@charset "utf-8"; /* --------------------------------------------------------------------------------------------------------------------------------------- 0001 - Global --------------------------------------------------------------------------------------------------------------------------------------- */ html {} body {background: #f4f4f4; font-family: 'Roboto', sans-serif; color: #212121; font-size: 14px;} .tablet, .mobile {display: none;} .desktop {display: block;} .wrapper, .main-wrapper, .video-wrapper, .contents-wrapper, .form-wrapper {margin: 0 auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .wrapper {width: 100%;} .main-wrapper {width: 860px;} .contents-wrapper {width: 830px;} .video-wrapper {width: 640px;} .form-wrapper {} .main-wrapper {background: #fff;} .wrapper {padding: 0 10px;} .bg-green {background-color: #006C5B;} .bg-blue {background-color: #77b6c9;} .bg-white {background-color: #ffffff;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0002 - Typography --------------------------------------------------------------------------------------------------------------------------------------- */ .tk-din-condensed-web {font-family: "din-condensed-web";} .MuseoSlab {font-family: "museo-slab";} .FeltTipRoman {font-family: "felt-tip-roman";} .gf-Roboto-Condensed {font-family: 'Roboto Condensed', sans-serif;} .gf-roboto {font-family: 'Roboto', sans-serif;} h1, h2 {text-align: center; font-weight: 300;} h1 {color: #000; font-size: 2.0em; line-height: 1.2em;} h2 {color: #636466; font-size: 1.6em; line-height: 1.2em;} h3 {color: #006C5B; font-weight: 600; font-size: 1.1em;} h4 {color: #006C5B;} h6 {font-size: 1.0em; font-weight: bold; margin-bottom: 4px;} p, li {line-height: 1.5em;} p, ul, ol {margin-bottom: 1.5em;} li {list-style: disc; margin-left: 2em; padding-left: 0.5em; margin-bottom: .5em;} ol li {list-style: decimal;} a {color: #2e4e65;} blockquote {padding: 1% 4%; margin-bottom: 0; line-height: 1.5em;} .emphasized {color: #006C5B; font-size: 1.2em; font-weight: bold;} .list {border-top: 1px solid #006C5B; border-bottom: 2px solid #006C5B; margin-bottom: 1.5em;} .list .row {font-size: 1.4em; color: #006C5B; line-height: 1em; padding: 0.6em 0; font-weight: bold; font-style: italic; border-top: 1px solid #006C5B; margin: 0px;} .list span {float: right; width: 94%; font-size: 0.7em; color: #212121; font-weight: normal; font-style: normal;} .txt-blue {color: #77b6c9;} .txt-white {color: #fff;} .txt-green {color: #7ec677;} .txt-red {color: #b6213f;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0003 - Contents --------------------------------------------------------------------------------------------------------------------------------------- */ /* General /* ------------------------------------------------------------ */ .iframe-body {position: relative; top: -10px; height: 320px; width: 400px;} /* Header /* ------------------------------------------------------------ */ header {color: #ffffff; position: relative; z-index: 200;} .logo-main {} .logo-main img {max-width: 92%;} /* Headline /* ------------------------------------------------------------ */ .container-headline {} .container-headline > .wrapper {overflow: hidden;} h1.headline span, h2.headline span {display: inline-block; position: relative;} h1.headline span:before, h2.headline span:before, h1.headline span:after, h2.headline span:after {content: ""; position: absolute; height: 18px; width: 91px;} h1.headline span:before, h1.headline span:after {top: 20px;} h2.headline span:before, h2.headline span:after {top: 7px;} h1.headline span:before, h2.headline span:before {right: 100%; margin-right: 15px; background: url("../images/bg_tilt_left.png") center right no-repeat;} h1.headline span:after, h2.headline span:after {left: 100%; margin-left: 15px; background: url("../images/bg_tilt_right.png") center left no-repeat;} /* Body Content /* ------------------------------------------------------------ */ .container-contents {} /* Form - What they say */ /* ------------------------------------------------------------ */ .container-testimonial .icon {display: block; margin: 0 auto 1em;} .container-testimonial p {font-size: 14px; line-height: 1.3em; margin-bottom: 1.0em;} .container-testimonial h5 {color: #77b6c9; font-size: 1.0em;} .side-title {font-weight:400; color:#006C5B; border:1px solid #77b6c9; text-align:center; padding:14px 1%; text-transform:uppercase; font-size:21px; margin-bottom:20px;} .side-wrapper .wrapper {padding: 10px 22%;} /* Form - Way to Give Area */ /* ------------------------------------------------------------ */ .container-ways-to-give {color: #77b6c9; font-size: 14px; line-height: 1.3em;} .container-ways-to-give a {color: inherit;} .container-ways-to-give hr {border-top: 1px solid #79b7ca; border-bottom: none; margin-bottom: 20px;} .container-ways-to-give .title {font-weight: bold; color:#006C5B; text-align:center; padding:14px 1%; text-transform:uppercase; font-size:21px; margin-bottom: 6px;} .container-ways-to-give .wrapper {max-width: 252px; border: 1px solid #79b7ca; padding: 20px;} /* Intro /* ------------------------------------------------------------ */ .container-intro {color: #fff;} .container-intro hr {max-width: 100px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin: 20px auto;} .container-intro h1, .container-intro h2 {color: #fff;} .container-intro h1 {font-size: 2.4em;} .container-intro h2 {font-size: 1.5em;} /* Story /* ------------------------------------------------------------ */ .container-story {} .container-story.active .hide-on-extended {display: none;} /* Tips /* ------------------------------------------------------------ */ .container-tips {} .container-tips h2 {color: #006C5B; padding: 16px 0; border-top: 1px solid #006C5B; border-bottom: 1px solid #006C5B; font-weight: 700;} .container-tips .row p:last-child {margin-bottom: 0px;} .container-tips .title {color: #d7d7d7; font-size: 7em; font-weight: 100; vertical-align: top; position: relative; top: -12px;} /* Video /* ------------------------------------------------------------ */ .container-video {background: url("../images/bg_white.jpg") center top repeat-x #d6e9ef; margin: 15px 0 35px;} .container-video .body {width: 500px; height: 281px; margin: 0 auto;} /* height: 360px; */ /* Form /* ------------------------------------------------------------ */ .container-donation {padding: 0 0 50px;} .container-donation > .title {background: #006C5B; padding: 15px 20px;} .container-donation > .body {background: #f4f4f4;} .container-donation h2 {color: #fff; margin: 0px; font-size: 1.3em; line-height: 1.2em; text-transform: none;} .container-form {} .container-form {margin: 28px 0 0;} .container-form .title {position: relative; top: -10px; height: 20px; line-height: 20px; display: inline-block; padding-right: 25px;} .container-form .body {overflow: hidden;} .container-form .left {float: left; width: 380px; margin: 0; padding: 0; } .container-form .right {float: right; width: 210px; padding: 18px 2px 0 0; font-size: 14px;} .container-form .section {margin-bottom: 30px;} .container-form h3 {color: #000; font-size: 1.15em; font-weight: bold; text-transform: uppercase;} .container-form h4 {font-size: 14px; margin-bottom: 2em;} .container-form .right img {margin: 0 auto 10px; display: block;} .container-form .right p {margin-bottom: 0.5em; line-height: 1.1em;} .container-form .row-buttons button {display: inline-block;} /* Form updates from 3/8/2018 */ .container-form .row-option-other .other-label { color: #000; font-size: 1em; font-weight: bold; text-transform: uppercase; margin-right: 15px; } /* Mobile Panel Style, Updated 2017-06 /* ------------------------------------------------------------ */ .container-donation .menu {} .container-donation .menu nav {overflow: hidden;} .container-donation .menu nav.green {border-bottom: 5px solid #006C5B;} .container-donation .menu nav.blue {border-bottom: 5px solid #77b6c9;} .container-donation .menu nav li {float: left; width: 50%; list-style: none; text-align: center; cursor: pointer; cursor: hand; background-size: 100% auto; background-position: center top; background-repeat: no-repeat; margin: 0px; padding: 10px 2px; color: #fff; font-weight: bold; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .container-donation .menu nav li.green {background-color: #006C5B;} /* background-image: url("../images/bg_tab_green.jpg"); */ .container-donation .menu nav li.blue {background-color: #77b6c9;} /* background-image: url("../images/bg_tab_blue.jpg"); */ /* Social /* ------------------------------------------------------------ */ .container-share {margin-bottom: 35px; text-align: center;} .container-share span {background-image:url("../images/icon_share.png"); background-repeat:no-repeat; height: 58px; width: 60px; cursor: hand; cursor: pointer; display: inline-block; margin: 0 7px;} .container-share .facebook {background-position:0 0;} .container-share .twitter {background-position:0 -58px;} .container-share .pinterest {background-position:0 -116px;} .container-share.md span {background-image:url("../images/icon_share_md.png"); background-repeat:no-repeat; height: 34px; width: 35px; cursor: hand; cursor: pointer; display: inline-block; margin: 0 7px;} .container-share.md .facebook {background-position:0 0;} .container-share.md .twitter {background-position:0 -34px;} .container-share.md .pinterest {background-position:0 -68px;} .container-share.sm span {background-image:url("../images/icon_share_sm.png"); background-repeat:no-repeat; height: 29px; width: 30px; cursor: hand; cursor: pointer; display: inline-block; margin: 0 7px;} .container-share.sm .facebook {background-position:0 0;} .container-share.sm .twitter {background-position:0 -29px;} .container-share.sm .pinterest {background-position:0 -58px;} /* Footer Links for Donor Survey /* ------------------------------------------------------------ */ .container-footer {} .container-footer hr {border-top: 2px solid #006C5B; border-bottom: 0px; margin: 0.5em 0;} .container-footer a {color: #1573A2;} .container-footer p {margin-bottom: 1.2em; line-height: 1.3em;} .container-footer p:last-child {margin-bottom: 0px;} /* Footer /* ------------------------------------------------------------ */ footer {font-size: 0.8em; text-align: center; color: #323232; line-height: 1.5em; margin: 0 auto 50px;} /* color: #626262; */ footer a {color: #1573A2;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0004 - Form --------------------------------------------------------------------------------------------------------------------------------------- */ form {} form h3 {text-transform: uppercase; margin-bottom: 7px;} form .two-columns {float: left; width: 49%;} form .two-columns:first-child {margin-right: 2%;} form .three-columns {float: left; width: 32%; margin-right: 2%;} form .three-columns:last-child {margin-right: 0%;} form .fieldCity, form .fieldState, form .fieldZip, form .fieldCountry, form .fieldPhone, form .fieldExpMonth, form .fieldExpYear, form .fieldExpDate, form .fieldCode {float: left;} form .fieldCity, form .fieldState, form .fieldCountry, form .fieldCity, form .fieldExpMonth, form .fieldExpYear, form .fieldExpDate {margin-right: 2%;} form .fieldCity {width: 48%;} form .fieldState, form .fieldZip {width: 24%;} form .fieldCountry {width: 58%;} form .fieldPhone {width: 40%;} form .fieldExpMonth, form .fieldExpYear {width: 30%;} form .fieldExpDate {width: 62%;} form .fieldCode {width: 36%;} form .fieldExpMonth {white-space: nowrap;} form .fieldPremium {width: 100%; padding: 4px 0; display: block; overflow: hidden;} form .fieldPremium span {float: right; width: 92%; line-height: 1.3em;} .row-frequency span {float: right; width: 92%; line-height: 1.3em;} @media (max-width: 479px) { form .fieldExpMonth, form .fieldExpYear {width: 49%;} form .fieldExpDate, form .fieldCode {width: 100%;} form .fieldExpDate, form .fieldExpYear {margin-right: 0%;} } /* Radio Box Button Type */ /* ------------------------------------------------------------ */ form .row-option-other small {text-align: right; float: left; width: 26%; margin-top: 9px; margin-right: 2%;} form .option-other {display: none;} form input.option-other-text {width: 30%;} form label.option, form .option-caption {width:30%; float:left;} form label.option {height: 40px; cursor: hand; cursor: pointer; display: block; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); border-radius: 5px; text-align: center; border-width: 1px; font-weight: bold; letter-spacing: 1px; margin: 0 2% 2%; line-height: 40px; color: white; font-size: 22px; background-color: #009283;} form label.highlight {background-color: #006C5B;} form label.option:nth-child(3n+3) {margin-right: 0; margin-left: 3%; } form label.option:first-child, form label.option:nth-child(3n+4) {margin-left: 0; margin-right: 3%; } form label.option span {font-size:.6em; font-weight:normal; } form label.option input {display: none;} form .row-caption {position: relative; top: -0.3em;} form .option-caption {font-size: 0.8em; color: #62a70f; text-align: center; margin: 0 3%;} form .option-caption:first-child {margin: 0px 2% 0px 0%;} form .option-caption:last-child {margin: 0px 0% 0px 2%;} /* Credit Card */ /* ------------------------------------------------------------ */ .row-cardtype {height: 44px;} .row-cardtype label {display: inline; margin: 0 0.3em 0 0;} .row-cardtype label img {position: relative; top: 7px;} /* Common /* ------------------------------------------------------------ */ input[type=password], input[type=text], textarea, select {background:#fff; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; width:100%; margin: 3px 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; color: #000; border: 1px solid #bbbbbb;} input[type=password], input[type=text], select {padding: 6px 8px; height: 40px;} input[type=radio] {margin: 2px 4px 0 4px;} select.inline {width: auto; display: inline;} textarea {resize:none; height: 10em; line-height:1.3em; padding: 8px;} label {display: block; margin: 0 0 2px;} .password::-webkit-input-placeholder {color: #000; font-size: 2em; line-height: 20px;} .password::-moz-placeholder {color: #000; font-size: 2em; line-height: 20px;} .password:-ms-input-placeholder {color: #000; font-size: 2em; line-height: 20px;} .password:-moz-placeholder {color: #000; font-size: 2em; line-height: 20px;} .disabled {opacity: 0.7;} .error {color: #F06;} /* Button /* ------------------------------------------------------------ */ .button {cursor: hand; cursor: pointer; text-align:center; text-decoration: none; display: inline-block;} .button {color: #fff;} .button-primary {background: #006C5B; padding: 18px 10px 16px; text-transform: uppercase; width: 100%; font-size: 20px;} .button-green-sm {background: #006C5B; padding: 12px 60px 10px;} .button-download {background: #006C5B; padding: 6px 20px 12px;} .button-download span {width: 22px; height: 22px; display: inline-block; position: relative; top: 5px;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0005 - Grid --------------------------------------------------------------------------------------------------------------------------------------- */ /* Margin /* ------------------------------------------------------------ */ .m-a-0 {margin: 0px !important;} .m-x-0 {margin-left: 0px !important; margin-right: 0px !important;} .m-y-0 {margin-top: 0px !important; margin-bottom: 0px !important;} .m-t-0 {margin-top: 0px !important;} .m-r-0 {margin-right: 0px !important;} .m-b-0 {margin-bottom: 0px !important;} .m-l-0 {margin-left: 0px !important;} /* Padding /* ------------------------------------------------------------ */ .p-a-0 {padding: 0px !important;} .p-x-0 {padding-left: 0px !important; padding-right: 0px !important;} .p-y-0 {padding-top: 0px !important; padding-bottom: 0px !important;} .p-t-0 {padding-right: 0px !important;} .p-r-0 {padding-bottom: 0px !important;} .p-b-0 {padding-left: 0px !important;} .p-l-0 {padding-top: 0px !important;} .p-a-xs {padding: 0.3em;} .p-a-sm {padding: 0.5em;} .p-a-md {padding: 1.0em;} .p-a-lg {padding: 1.5em;} .p-a-xl {padding: 2.0em;} .p-x-xs {padding-left: 0.3em; padding-right: 0.3em;} .p-x-sm {padding-left: 0.5em; padding-right: 0.5em;} .p-x-md {padding-left: 1.0em; padding-right: 1.0em;} .p-x-lg {padding-left: 1.5em; padding-right: 1.5em;} .p-x-xl {padding-left: 2.0em; padding-right: 2.0em;} .p-y-xs {padding-top: 0.3em; padding-bottom: 0.3em;} .p-y-sm {padding-top: 0.5em; padding-bottom: 0.5em;} .p-y-md {padding-top: 1.0em; padding-bottom: 1.0em;} .p-y-lg {padding-top: 1.5em; padding-bottom: 1.5em;} .p-y-xl {padding-top: 2.0em; padding-bottom: 2.0em;} .p-t-xs {padding-top: 0.3em;} .p-t-sm {padding-top: 0.5em;} .p-t-md {padding-top: 1.0em;} .p-t-lg {padding-top: 1.5em;} .p-t-xl {padding-top: 2.0em;} .p-r-xs {padding-rignt: 0.3em;} .p-r-sm {padding-right: 0.5em;} .p-r-md {padding-right: 1.0em;} .p-r-lg {padding-right: 1.5em;} .p-r-xl {padding-right: 2.0em;} .p-b-xs {padding-bottom: 0.3em;} .p-b-sm {padding-bottom: 0.5em;} .p-b-md {padding-bottom: 1.0em;} .p-b-lg {padding-bottom: 1.5em;} .p-b-xl {padding-bottom: 2.0em;} .p-l-xs {padding-left: 0.3em;} .p-l-sm {padding-left: 0.5em;} .p-l-md {padding-left: 1.0em;} .p-l-lg {padding-left: 1.5em;} .p-l-xl {padding-left: 2.0em;} /* Row & Columns /* ------------------------------------------------------------ */ .section, .row {width: 100%;} .section:after, .row:after {display: block; clear: both; content: '.'; visibility: hidden; height: 0;} .section {margin: 0 0 1.5em;} .row {margin: 0 0 0.5em;} .col, .col-2, .col-3, .col-4, .col-5, .col-6, .col-xs, .col-sm, .col-md, .col-lg, .col-xl, .col-05, .col-10, .col-15, .col-20, .col-25, .col-30, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60, .col-65, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95 {float: left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .col-2 {width: 49%;} .col-3 {width: 32%;} .col-4 {width: 22%;} .col-5 {width: 18%;} .col-6 {width: 15%;} .col-2, .col-3, .col-5, .col-6 {margin-right: 2%;} .col-4 {margin-right: 3%;} .col-2:last-child, .col-3:last-child, .col-4:last-child, .col-5:last-child, .col-6:last-child {margin-right: 0%;} .col-05 {width: 5%;} .col-10 {width: 10%;} .col-15 {width: 15%;} .col-20 {width: 20%;} .col-25 {width: 25%;} .col-30 {width: 30%;} .col-35 {width: 35%;} .col-40 {width: 40%;} .col-45 {width: 45%;} .col-50 {width: 50%;} .col-55 {width: 55%;} .col-60 {width: 60%;} .col-65 {width: 65%;} .col-70 {width: 70%;} .col-75 {width: 75%;} .col-80 {width: 80%;} .col-85 {width: 85%;} .col-90 {width: 90%;} .col-95 {width: 95%;} .col-xs, .col-s, .col-m, .col-l, .col-xl, .col-05, .col-10, .col-15, .col-20, .col-25, .col-30, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60, .col-65, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95 {padding-right: 1%;} .col-xs:last-child, .col-s:last-child, .col-m:last-child, .col-l:last-child, .col-xl:last-child, .col-05:last-child, .col-10:last-child, .col-15:last-child, .col-20:last-child, .col-25:last-child, .col-30:last-child, .col-35:last-child, .col-40:last-child, .col-45:last-child, .col-50:last-child, .col-55:last-child, .col-60:last-child, .col-65:last-child, .col-70:last-child, .col-75:last-child, .col-80:last-child, .col-85:last-child, .col-90:last-child, .col-95:last-child {padding-right: 0%;} /* Mobile (Landscape), Design for a width of 480px */ @media (max-width: 767px) { /* Default Desktop */ .col-2, .col-3, .col-4, .col-5, .col-xs, .col-sm, .col-md, .col-lg, .col-xl, .col-05, .col-10, .col-15, .col-20, .col-25, .col-30, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60, .col-65, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95 {float: none; width: 100%; margin: 0 0 0.5em; padding-right: 0px;} .col-6 {width: 32%;} .col-6 {margin-right: 2%;} .col-6:nth-child(3), .col-6:last-child {margin-right: 0%;} /* Mobile Landscape */ .col-ml-2, .col-ml-3, .col-ml-4, .col-ml-5, .col-ml-6, .col-ml-05, .col-ml-10, .col-ml-15, .col-ml-20, .col-ml-25, .col-ml-30, .col-ml-35, .col-ml-40, .col-ml-45, .col-ml-50, .col-ml-55, .col-ml-60, .col-ml-65, .col-ml-70, .col-ml-75, .col-ml-80, .col-ml-85, .col-ml-90, .col-ml-95, .col-ml-100 {float: left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .col-ml-2 {width: 49%;} .col-ml-3 {width: 32%;} .col-ml-4 {width: 22%;} .col-ml-5 {width: 18%;} .col-ml-6 {width: 15%;} .col-ml-2, .col-ml-3, .col-ml-5, .col-ml-6 {margin-right: 2%;} .col-ml-4 {margin-right: 3%;} .col-ml-2:nth-child(even), .col-ml-2:last-child, .col-ml-3:last-child, .col-ml-4:last-child, .col-ml-5:last-child, .col-ml-6:last-child {margin-right: 0%;} .col-ml-05 {width: 5%;} .col-ml-10 {width: 10%;} .col-ml-15 {width: 15%;} .col-ml-20 {width: 20%;} .col-ml-25 {width: 25%;} .col-ml-30 {width: 30%;} .col-ml-35 {width: 35%;} .col-ml-40 {width: 40%;} .col-ml-45 {width: 45%;} .col-ml-50 {width: 50%;} .col-ml-55 {width: 55%;} .col-ml-60 {width: 60%;} .col-ml-65 {width: 65%;} .col-ml-70 {width: 70%;} .col-ml-75 {width: 75%;} .col-ml-80 {width: 80%;} .col-ml-85 {width: 85%;} .col-ml-90 {width: 90%;} .col-ml-95 {width: 95%;} .col-ml-100 {width: 100%;} .col-ml-05, .col-ml-10, .col-ml-15, .col-ml-20, .col-ml-25, .col-ml-30, .col-ml-35, .col-ml-40, .col-ml-45, .col-ml-50, .col-ml-55, .col-ml-60, .col-ml-65, .col-ml-70, .col-ml-75, .col-ml-80, .col-ml-85, .col-ml-90, .col-ml-95 {padding-right: 1%;} .col-ml-05:last-child, .col-ml-10:last-child, .col-ml-15:last-child, .col-ml-20:last-child, .col-ml-25:last-child, .col-ml-30:last-child, .col-ml-35:last-child, .col-ml-40:last-child, .col-ml-45:last-child, .col-ml-50:last-child, .col-ml-55:last-child, .col-ml-60:last-child, .col-ml-65:last-child, .col-ml-70:last-child, .col-ml-75:last-child, .col-ml-80:last-child, .col-ml-85:last-child, .col-ml-90:last-child, .col-ml-95:last-child {padding-right: 0%;} } /* Mobile (Portrait), Design for a width of 320px */ @media (max-width: 479px) { /* Default Desktop */ .col-6 {float: none; width: 100%; margin: 0 0 0.5em; padding-right: 0px;} /* Mobile Protrait */ .col-mp-2, .col-mp-3, .col-mp-4, .col-mp-5, .col-mp-6, .col-mp-05, .col-mp-10, .col-mp-15, .col-mp-20, .col-mp-25, .col-mp-30, .col-mp-35, .col-mp-40, .col-mp-45, .col-mp-50, .col-mp-55, .col-mp-60, .col-mp-65, .col-mp-70, .col-mp-75, .col-mp-80, .col-mp-85, .col-mp-90, .col-mp-95, .col-mp-100 {float: left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .col-mp-2 {width: 49%;} .col-mp-3 {width: 32%;} .col-mp-4 {width: 22%;} .col-mp-5 {width: 18%;} .col-mp-6 {width: 15%;} .col-mp-2, .col-mp-3, .col-mp-5, .col-mp-6 {margin-right: 2%;} .col-mp-4 {margin-right: 3%;} .col-mp-2:nth-child(even), .col-mp-2:last-child, .col-mp-3:last-child, .col-mp-4:last-child, .col-mp-5:last-child, .col-mp-6:last-child {margin-right: 0%;} .col-mp-05 {width: 5%;} .col-mp-10 {width: 10%;} .col-mp-15 {width: 15%;} .col-mp-20 {width: 20%;} .col-mp-25 {width: 25%;} .col-mp-30 {width: 30%;} .col-mp-35 {width: 35%;} .col-mp-40 {width: 40%;} .col-mp-45 {width: 45%;} .col-mp-50 {width: 50%;} .col-mp-55 {width: 55%;} .col-mp-60 {width: 60%;} .col-mp-65 {width: 65%;} .col-mp-70 {width: 70%;} .col-mp-75 {width: 75%;} .col-mp-80 {width: 80%;} .col-mp-85 {width: 85%;} .col-mp-90 {width: 90%;} .col-mp-95 {width: 95%;} .col-mp-100 {width: 100%;} .col-mp-05, .col-mp-10, .col-mp-15, .col-mp-20, .col-mp-25, .col-mp-30, .col-mp-35, .col-mp-40, .col-mp-45, .col-mp-50, .col-mp-55, .col-mp-60, .col-mp-65, .col-mp-70, .col-mp-75, .col-mp-80, .col-mp-85, .col-mp-90, .col-mp-95 {padding-right: 1%;} .col-mp-05:last-child, .col-mp-10:last-child, .col-mp-15:last-child, .col-mp-20:last-child, .col-mp-25:last-child, .col-mp-30:last-child, .col-mp-35:last-child, .col-mp-40:last-child, .col-mp-45:last-child, .col-mp-50:last-child, .col-mp-55:last-child, .col-mp-60:last-child, .col-mp-65:last-child, .col-mp-70:last-child, .col-mp-75:last-child, .col-mp-80:last-child, .col-mp-85:last-child, .col-mp-90:last-child, .col-mp-95:last-child {padding-right: 0%;} } /* --------------------------------------------------------------------------------------------------------------------------------------- 0007 - Plugin --------------------------------------------------------------------------------------------------------------------------------------- */ /* Lightbox /* ------------------------------------------------------------ */ #boxLight .body {max-width: 100%; border-radius: 6px; background-color: #313131;} #boxLight .lightbox_button_close {background: url("../images/btn_lightbox_close.png") no-repeat; width: 24px; height: 24px;} #boxLight img {width: 100%;} #boxLightProcessing, #donationFormError {font-size: 1.2em;} #boxLightProcessing p, #donationFormError p {margin-bottom: 1.3em; line-height: 1.3em;} #boxLightProcessing .background, #donationFormError .background {background-color: #333; opacity: 0.8;} #boxLightProcessing .body, #donationFormError .body {color: #212121;} #donationFormError .button { width: auto; text-align:center; padding-left: 20px; padding-right: 20px; margin: 0 auto; display: block; background-color: #77b6c9;} /* Countdown Clock /* ------------------------------------------------------------ */ .container-clock {position: relative; float: right; margin: 0% 7% 0 0; padding-top: 15px;} .countdown_title {font-size: 16px; margin: 2px 0 8px 0; display:block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; display:block; float: left; width: 130px; margin-right: 10px; text-align: right;} #counterClock {color: #fff; font-family: 'Oswald', sans-serif; font-weight: 300; text-align: center;width: 300px; float:right;} #counterClock.hasCountdown {background-color: transparent; border: none;} #counterClock .countdown_digit {font-size: 36px; overflow: hidden; color:#fff;} #counterClock .countdown_digit .digits {background: url("../images/bg_clock_digits.png") 4px top no-repeat; width: 45px; height: 66px; float: left; overflow: hidden; padding: 0 11px} #counterClock .countdown_digit .divider {float: left; margin: 0 2px 0 0; padding: 10px 0 0;} #counterClock .countdown_digit span {width: 21px; height: 65px; line-height: 65px; float: left; text-align: center; margin: 0;} #counterClock .countdown_desc {font-size: 11px; overflow: hidden; margin-top: -7px;} #counterClock .countdown_desc span {width: 73px;float: left;text-align: center;display: inline-block;font-size: 12px;margin: 0;color: #fff; position: relative;} #counterClock .countdown_desc .days {left: -4px;} #counterClock .countdown_desc .hrs {} #counterClock .countdown_desc .mins {left: 3px;} #counterClock .countdown_desc .secs {left: 7px;} #counterClock2 {color: #fff; font-family: 'Oswald', sans-serif; font-weight: 300; text-align: center;width: 300px; margin: 10px auto;} #counterClock2.hasCountdown {background-color: transparent; border: none;} #counterClock2 .countdown_digit {font-size: 36px; overflow: hidden; color:#fff;} #counterClock2 .countdown_digit .digits {background: url("../images/bg_clock_digits.png") 4px top no-repeat; width: 45px; height: 66px; float: left; overflow: hidden; padding: 0 11px} #counterClock2 .countdown_digit .divider {float: left; margin: 0 2px 0 0; padding: 10px 0 0;} #counterClock2 .countdown_digit span {width: 21px; height: 65px; line-height: 65px; float: left; text-align: center; margin: 0;} #counterClock2 .countdown_desc {font-size: 11px; overflow: hidden; margin-top: -7px;} #counterClock2 .countdown_desc span {width: 73px;float: left;text-align: center;display: inline-block;font-size: 12px;margin: 0;color: #fff; position: relative;} #counterClock2 .countdown_desc .days {left: -4px;} #counterClock2 .countdown_desc .hrs {} #counterClock2 .countdown_desc .mins {left: 3px;} #counterClock2 .countdown_desc .secs {left: 7px;} .LegacyPartner .container-clock {margin: 4.2% 0% 0 0; position:relative;} .LegacyPartner .countdown_title {float: none; width: auto; position: absolute; top: -18px; left: -20px;} .LegacyPartner #counterClock .countdown_digit .digits, .LegacyPartner #counterClock2 .countdown_digit .digits {background: url("../images/bg_clock_digits_blue.png") 4px top no-repeat;} .LegacyPartner #counterClock .countdown_digit .digits {margin: 0 -5px;} .LegacyPartner #counterClock .countdown_digit {padding-left: 40px;} .LegacyPartner #counterClock .countdown_desc .days {left: 31px;} .LegacyPartner #counterClock .countdown_desc .hrs {left: 25px;} .LegacyPartner #counterClock .countdown_desc .mins {left: 18px;} .LegacyPartner #counterClock .countdown_desc .secs {left: 11px;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0008 - Components --------------------------------------------------------------------------------------------------------------------------------------- */ /* Share Form /* ------------------------------------------------------------ */ aside.container-share {float: right; width: 264px; margin: 10px 0 10px 45px;} aside.container-share > .wrapper {padding: 0;} aside.container-share h3 {color: #8c3321; text-align: center; text-transform: none; font-weight: 700; font-family: "museo-slab"; line-height: 1.2em; margin-bottom: 0.2em; font-size: 1.4em;} .container-cb {background: url("../images/bg_form_cb.jpg") center center no-repeat; width: 264px; height: 230px; color: #f6f0e3; overflow: hidden; font-family: 'Libre Baskerville', serif;} .container-cb .wrapper {padding: 20px;} .container-cb span {line-height: 1.2em; display: block;} .container-cb .body {margin-bottom: 1.2em;} .container-cb .title {font-size: 1em;} .container-cb .item {display: none;} .container-cb .item:first-child {display: block;} .container-cb .btnNext {color: #f6f0e3; float: right; margin: 10px 0 0;} .container-share-form, .container-share-form label {color: #231f20 !important;} .container-share-form, .container-share-form label {font-size: 14px;} .container-share-form {background-color: #f1e8d1; margin: 20px auto 0px;} .container-share-form .row {margin-bottom: 0.5em;} .container-share-form .wrapper {padding: 20px 15px;} .container-share-form p {line-height: 1.2em;} .container-share-form input.text, .container-share-form textarea {border: 1px solid #bcbec0; border-radius: 0px;} .field-fn {float: left; width: 59%; margin-right: 4%;} .field-ln {float: left; width: 37%;} .field-btn {padding-top: 54px;} .container-share-form label {color: #231f20; text-align: left;} .container-share-form .row-buttons {text-align: center;} .container-share-form .btnStory {} /* display: none;*/ .form-share-photo-row {display: none;} /* Tablet (Portrait), Design for a width of 768px */ @media (max-width: 1023px) { aside.container-share {position: static; margin: 10px 0 40px 20px;} } /* Mobile (Landscape), Design for a width of 480px */ @media (max-width: 767px) { .container-cb {background: #4b3e33; width: 100%;} aside.container-share {display: block; margin: 10px auto 30px !important; width: 100%; float: none;} aside.container-share > .wrapper {padding: 0;} /* 25px 66px */ } /* Mobile /* Image Upload */ .container-upload {position: relative; overflow: hidden;} .container-upload .action {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 20;} .container-upload #formUpload {width: 100%; height: 100%;} .container-upload #inputUploadFile {width: 100%; height: 100%; opacity: 0.0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0.0; -moz-opacity: 0.0; cursor: hand; cursor: pointer;} /* Side Premium /* ------------------------------------------------------------ */ .container-premium {background: url("../images/bg_side.jpg") center top no-repeat #f5e5c3; max-width: 319px; margin-left: 20px;} .container-premium p {line-height: 1.3em; margin-botom: 1.3em;} .container-premium h2 {font-family: 'Roboto Condensed', sans-serif; font-weight: 700; margin-bottom: 0.8em;} .container-premium .wrapper {padding: 25px 20px;} /* eCard /* ------------------------------------------------------------ */ body.eCard {background: url("../images/bg_ecard.jpg") center top no-repeat #f1e8d1;} .eCard h1, .eCard h2 {text-align: center; font-family: "museo-slab"; font-weight: 500;} .eCard h1 {color: #d86308; font-size: 3.0em; margin-bottom: 20px;} .eCard h2 {color: #65491d; font-size: 1.3em; padding: 5px 0; border-top: 2px #989898 solid; border-bottom: 2px #989898 solid; text-transform: uppercase; margin-bottom: 35px;} .container-list {max-width: 320px; margin: 0 auto 25px; display: block;} .container-list p {margin-bottom: 0.2em;} .container-list ol {margin-left: 2em; color: #d86308; font-weight: bold;} .container-list li {padding-left: 1em;} #formCard select {font-size: 11px;} .container-ecard {} .container-cards {background-color: #eee8d9;} .container-cards .wrapper {padding: 4.3% 9.2%;} .container-cards .item {width: 48%; margin: 0 auto;} .container-cards .footer {margin: 8px 0 14px; text-align: center;} .container-cards img {width: 100%;} .container-cards img {-moz-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .15); -webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .15); box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .15);} .button.btnViewLarge {color: #000; text-transform: uppercase; font-size: 0.8em; font-weight: 300; margin-left: 8px;} .container-info {background: url("../images/bg_arrow_down.png") center top no-repeat; margin-bottom: 45px;} .container-info .wrapper {max-width: 450px; padding: 45px 0 50px;} .eCard .container-info h1 {font-size: 1.4em;} /* Mobile (Landscape), Design for a width of 480px */ @media (max-width: 767px) { .container-cards .item {width: 100%; margin: 0 auto 15px;} .container-cards .row {margin: 0;} } /* --------------------------------------------------------------------------------------------------------------------------------------- 0100 - Common --------------------------------------------------------------------------------------------------------------------------------------- */ .align-right {text-align: right;} .banner {width: 100%;} .box-size {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .button {cursor: hand; cursor: pointer;} .center {text-align: center;} .clear:after {display:block; clear:both; content:'.'; visibility:hidden; height:0;} .container {position: relative;} .cross-out {text-decoration: line-through;} .emphasize {font-weight: bold; text-transform: uppercase;} .hidden {display: none;} .illustration {max-width: 100%;} .inline {display: inline-block;} .invisible {visibility: hidden;} .large {font-size: 1.2em;} .left, .right {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .left {float: left;} .panel {display: none;} .panel:first-child {display: block;} .right {float: right;} .rounded-top {border-top-left-radius: 6px; border-top-right-radius: 6px;} .rounded-bottom {border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;} .rounded {border-radius: 3px;} .shadow {-webkit-box-shadow: 0 0 15px rgba(30, 30, 30, .75); -moz-box-shadow: 0 0 15px rgba(30, 30, 30, .75); box-shadow: 0 0 15px rgba(30, 30, 30, .75);} .shadow-bottom-right {-moz-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .15); -webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .15); box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .15);} .shadow_3sides {-webkit-box-shadow: 0px 8px 10px rgba(100, 100, 100, .75), -10px 8px 15px rgba(100, 100, 100, .75), 10px 8px 15px rgba(100, 100, 100, .75); -moz-box-shadow: 0px 8px 10px rgba(100, 100, 100, .75), -10px 8px 15px rgba(100, 100, 100, .75), 10px 8px 15px rgba(100, 100, 100, .75); box-shadow: 0px 8px 10px rgba(100, 100, 100, .75), -10px 8px 15px rgba(100, 100, 100, .75), 10px 8px 15px rgba(100, 100, 100, .75);} .shadow-3sides-dark {-webkit-box-shadow: 0px 8px 10px rgba(45, 45, 45, .25), -10px 8px 15px rgba(45, 45, 45, .25), 10px 8px 15px rgba(45, 45, 45, .25); -moz-box-shadow: 0px 8px 10px rgba(45, 45, 45, .25), -10px 8px 15px rgba(45, 45, 45, .25), 10px 8px 15px rgba(45, 45, 45, .25); box-shadow: 0px 8px 10px rgba(45, 45, 45, .25), -10px 8px 15px rgba(45, 45, 45, .25), 10px 8px 15px rgba(45, 45, 45, .25);} .shadow-3sides-light {-webkit-box-shadow: 0px 8px 10px rgba(100, 100, 100, .15), -10px 8px 15px rgba(100, 100, 100, .15), 10px 8px 15px rgba(100, 100, 100, .15); -moz-box-shadow: 0px 8px 10px rgba(100, 100, 100, .15), -10px 8px 15px rgba(100, 100, 100, .15), 10px 8px 15px rgba(100, 100, 100, .15); box-shadow: 0px 8px 10px rgba(100, 100, 100, .15), -10px 8px 15px rgba(100, 100, 100, .15), 10px 8px 15px rgba(100, 100, 100, .15);} .shadow-inner-top {box-shadow: inset 0 20px 20px -20px #000000; -webkit-box-shadow: inset 0 20px 20px -20px #000000; -moz-box-shadow: inset 0 20px 20px -20px #000000;} .text-shadow {text-shadow: black 0.3em 0.3em 0.5em;} .upper {text-transform: uppercase;} .v-center {position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .x-large {font-size: 1.4em;} /* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .page-template-default img, .logo-main img { max-width: 620px; height: auto; } @media ( max-width: 768px ) { .page-template-default img, .logo-main img { max-width: 460px; height: auto; } .page-template-default img.alignright, .page-template-default img.alignleft { float: none; display: block; margin-left: auto; margin-right: auto; } } @media ( max-width: 480px ) { .page-template-default img, .logo-main img { max-width: 300px; height: auto; } } /* =Gravity Forms specific CSS -------------------------------------------------------------- */ input.gform_button.button { text-decoration: none; text-transform: uppercase; width: 97% !important; -webkit-appearance: button; display: block; border-radius: 3px; text-align: center; letter-spacing: 1px; margin: 0 2% 2%; line-height: 40px; color: #fff; font-size: 20px !important; background-color: #006C5B; border: none; }