"proxima-nova"@charset "utf-8"; /* --------------------------------------------------------------------------------------------------------------------------------------- 0001 - Global --------------------------------------------------------------------------------------------------------------------------------------- */ html {} body {font-family: "proxima-nova", sans-serif;background:#e7e7e7; font-style: normal;} .tablet, .mobile {display: none;} .desktop {display: block;} .wrapper, .main-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: 800px !important; background: #fff;} .contents-wrapper {background-color: #FFFFFF; padding: 20px 0px 100px !important;} .form-wrapper {width: 370px;} .ylw-grad {padding: 40px 0px; background-image: url(https://www.give2wnc.org/myimpactol/images/2024/pie-chart-bg.png); background-position: top center; background-repeat: no-repeat; background-size: cover;} .operating-graph {display: block; width: 100%;} .operating-graph img {display:block; width: 100%; max-width:550px; margin:30px auto;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0002 - Typography --------------------------------------------------------------------------------------------------------------------------------------- */ .tk-adobe-garamond-pro {font-family: "adobe-garamond-pro", sans-serif;} .tk-proxima-nova {font-family: "proxima-nova", sans-serif;} .tk-petersburg {font-family: "petersburg-web";} .tk-plantin {font-family: "plantin", sans-serif;} .bg-purple {background-color:#231B4D;} .bg-grey {background-color:#ebebeb;} .bg-gold {background-color:#cb862b;} .bg-tan {background-color:#f8eddf;} .txt-purple {color:#231B4D;} .txt-black {color:#000;} h1, h2 {font-family: "Bespoke Serif", "plantin"; font-weight:100; line-height: 1.0em;} h1 {font-size: 24px; color: #231B4D; letter-spacing: 1px; line-height: 1.1em;} h2 {font-size: 22px; line-height: 1.2em; color: #231B4D;} h3 {} h4 {font-size: 1.1em; color: #fff; font-weight: 500;} p, li {margin-bottom: 1.5em; line-height: 1.5em;} li {list-style: disc; margin-left: 2em;margin-bottom:0px;color:#530d13;} a {color: #231B4D;} .emphasized {color: #cb862b; font-weight: 700;font-size:16px;font-family:"proxima-nova", sans-serif;} .text-left {text-align:left;} .info-text {font-size:15px;line-height:120%;} .p-r {padding-right:20px!important;} .p-l {padding-right:20px!important;} .bg-tan p {line-height:120%;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0003 - Contents --------------------------------------------------------------------------------------------------------------------------------------- */ /* Header /* ------------------------------------------------------------ */ header {position: relative;} header .logo-main, header .contents {margin:0 auto;text-align:left; width: 100%;} header .logo-main .logo-image {} header .logo-main .text-image {position: absolute; margin-top: -30%;margin-left:0%;} header .download-button {position:absolute;margin-top:-11%;margin-left:55%;} header .purple-bar {position:relative;margin-left:5%;margin-top:-3%;max-width:700px;padding:10px;} @media (max-width: 1023px) { header.sty3 .contents {bottom: 10%;} header.sty4 .contents {bottom: 47%;} } /* Mobile (Landscape), Design for a width of 480px */ @media (max-width: 767px) { header .logo-main { width: 100%; text-align: center; } header.sty4 .contents {display: none;} } /* Body Content /* ------------------------------------------------------------ */ .contents-wrapper p {font-size: 14px !important;} .signature-img {display:inline;float:left;padding-right:10px;} .col-right {max-width:502px;margin-left:10px;padding:16px 40px 16px 16px;height:177px;font-size:15px;} .col-left {max-width:502px !important;margin-right:10px;padding: 16px 40px 16px 16px !important;height:177px;font-size:15px;} .gold-bar {color:#ffffff;padding:10px 20px;;font-family: "plantin", sans-serif;font-size:32px;} .purple-bar {color:#ffffff;padding:15px;font-family: "plantin", sans-serif;font-size:32px;position:relative;margin-top:0%;font-style: normal;} .container-headline {border-top:solid 1px #000; text-align:center;width:95%;margin:0 auto;} .container-headline .headline {position: relative; top: -18px; overflow: hidden; text-align: center; background: #cb862b; color:#fff; display: inline-block; padding: 10px 20px;font-size:18px;font-family:"proxima-nova", sans-serif;} .headline-bottom {margin-left:-50%;} .container-info .col-border-right {border-right:solid 1px #000;} .container-info .col-border-top {border-top:solid 1px #000;} .letter-text {max-width:650px;margin:0 auto;padding-top:40px; font-style: normal;} .container-info .col-width {width:89%;margin:0 auto;} ul {margin-bottom:20px;} .subscribe-tab {cursor:pointer;position:relative;z-index:1000;right:6px;bottom:27%;} .position {-webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: rotate(270deg) translate(0, -50%); -moz-transform: rotate(270deg) translate(0, -50%); -ms-transform: rotate(270deg) translate(0, -50%); -o-transform: rotate(270deg) translate(0, -50%); transform: rotate(270deg) translate(0, -50%);} .tab {background: #443595;color: #ffffff;padding: 10px 20px;line-height: 30px;font-size: 18px;} .subsribe-mobile, .tab2 {display:none;} .top-padding {padding-top:30px;} /* Tablet (Portrait), Design for a width of 768px */ @media (max-width: 1023px) { .container-video {margin: 15px auto 0px; top: 0px;} } /* Mobile (Landscape), Design for a width of 480px */ @media (max-width: 767px) { .container-video {padding: 5px; } .container-video .body {width: 430px; height: 241px; margin: 0 auto;} } /* Mobile (Portrait), Design for a width of 320px */ @media (max-width: 479px) { /* Video */ .container-video .body {width: 290px; height: 163px;} } /* Headline /* ------------------------------------------------------------ */ .headline {position: relative; overflow: hidden; text-align: center;} .headline span {display: inline-block; position: relative; padding: 6px 16px; background: #cb862b; color: #fff;} .headline span:before, .headline span:after {content: ""; position: absolute; height: 14px; border-bottom: 1px solid #000000; top: -9px; width: 600px;} .headline span:before {right: 100%; margin-right: 20px;} .headline span:after {left: 100%; margin-left: 20px;} .bg-headline {background: url("../images/bg_headline.png");background-repeat:repeat-y;background-size:contain;} .bg-gold-headline {background: url("../images/bg_goldheader.png");background-repeat:repeat-y;background-size:cover;} /* Form /* ------------------------------------------------------------ */ .container-form {border-left: 1px solid #9a9a9a;} /* Mobile (Landscape), Design for a width of 480px */ @media (max-width: 767px) { .container-form {border-left: 0px;} } /* Social /* ------------------------------------------------------------ */ .container-share {text-align: center; border-top: 1px solid #231B4D; padding-top: 3px;max-width:400px;margin:0 auto;} .container-share > .body {overflow: hidden; text-align: center; background: #fff; display: inline-block; padding: 0 10px; position: relative; top: -20px;} .container-share .fa, .container-share .fa-brands {color: #443595; font-size: 24px; border: 1px solid #443595; width: 36px; line-height: 36px; text-align: center; margin: 0 0.2em;} /* Footer /* ------------------------------------------------------------ */ footer {text-align:center; font-size:11px;font-family:'Helvetica', Arial, sans-serif; padding:20px 0; line-height:18px;} footer .main-wrapper {background:#e7e7e7;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0004 - Form --------------------------------------------------------------------------------------------------------------------------------------- */ form {font-family:'Helvetica', Arial, sans-serif; font-size: 14px; line-height: 1.3em;} form h3 {text-transform: uppercase; margin-bottom: 14px;} form hr {margin: 45px 0; border-top: solid 1px #231B4D; border-bottom: none;} form .fieldCity, form .fieldState, form .fieldZip, form .fieldCountry, form .fieldPhone, form .fieldExpMonth, form .fieldExpYear, form .fieldCode {float: left;} form .fieldCity, form .fieldState, form .fieldCountry, form .fieldCity, form .fieldExpMonth, form .fieldExpYear {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 .fieldCode {width: 36%;} form .fieldExpMonth {white-space: nowrap;} form .row p:last-child {margin: 0px;} .option-text {float: right; width: 93%;} /* Radio Box Button Type */ /* ------------------------------------------------------------ */ form .row-option-other small {text-align: right; float: left; width: 26%; margin-top: 4px; margin-right: 2%;} form .option-other {display: none;} form input.option-other-text {width: 72%;} form input.option-other-text.full {width: 100%;} form label.option {height: 38px; 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: 400; letter-spacing: 1px; float:left; margin: 0 3%; line-height: 38px; color: white; font-size: 22px; width:30%; background-color: #231B4D;} form label.highlight {background-color: #cc8614;} form label.option:last-child {margin: 0 0% 0 2%;} form label.option:first-child {margin: 0 2% 0 0;} form label.option span {font-size:.6em; font-weight:normal; } form label.option input {display: none;} /* For Oct Calendar Campaign */ form input.option-other-text.alt {background: url("../images/txt_dollar.png") 6px center no-repeat #ffffff; width: 30%; border: 0px; padding: 6px 8px 6px 28px;} form .option-desc {line-height: 38px; font-size: 16px; font-weight: 400; float: right; width: 67%;} form .option-desc.two-line {line-height: 19px;} /* Match */ /* ------------------------------------------------------------ */ .row-match .title {color: #000000; float:right; line-height: 26px; padding: 8px 10px;} .row-match .amount {float:right; font-size: 26px; line-height:26px; background:#fff; width: 30%; border-radius: 5px; border: 2px solid #231B4D; color: #231B4D; text-align:center; padding: 8px 10px; font-family:'Helvetica', Arial, sans-serif;} /* Honor */ /* ------------------------------------------------------------ */ .row-gift-type select, .row-gift-type input.text {width: 130px;} @media (max-width: 479px) { .row-gift-type select {width: 204px;} .row-gift-type input.text {width: 100%;} } /* Credit Card */ /* ------------------------------------------------------------ */ .row-cardtype {padding-bottom: 10px;} /* Common /* ------------------------------------------------------------ */ input.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; font-size: 12px;} input.text, select {padding: 6px 8px; height: 40px;} input[type="checkbox"], input[type="radio"] {margin: 4px;} 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;} /* Radio Box with Custom Color */ /* ------------------------------------------------------------ */ .container-custom input[type=radio] {-webkit-appearance: none; width:14px; height:14px; border:2px solid #cc8614; border-radius:50%; outline:none; margin: 0px 4px; position: relative; top: 2px;} .container-custom input[type=radio]:before {content:''; display:block; width:100%; height:100%; border-radius:50%; position: relative;} .container-custom input[type=radio]:checked:before {background: #cc8614;} /* Button /* ------------------------------------------------------------ */ button {text-align:center; text-decoration: none; display: inline-block; color: #fff; } .button-primary {background: #231B4D; color: #ffffff; padding: 10px 20px; font-size: 16px; line-height: 18px; font-family:'Proxima Nova', sans-serif;border-radius:5px;} .button-gold {background: #cc8614; padding: 12px 80px;} .btn-purple {background: #231B4D; padding: 16px 24px;} .btn-purple-sm {background: #231B4D; padding: 14px 20px;} .btn-purple-md {background: #231B4D; padding: 14px 46px;} /* --------------------------------------------------------------------------------------------------------------------------------------- 0006 - Plugin --------------------------------------------------------------------------------------------------------------------------------------- */ /* Thermometer /* ------------------------------------------------------------ */ .container-meter {display: inline-block; width: 700px; padding: 0 30px; margin-bottom: 0px;} .container-meter .thermometer, .container-meter .goal {font-family: "proxima-nova", sans-serif; font-weight: 600;} .container-meter .thermometer strong, .container-meter strong {font-weight: 600;} .container-meter .title {margin-bottom: 35px;} .container-meter h2 {font-family: "proxima-nova", sans-serif; font-weight: 600; color: #231B4D; font-size: 1.7em;} @media (max-width: 1023px) { .container-meter {width: 600px;} } @media (max-width: 767px) { .container-meter {width: 80%;} } /* Counter Clock /* ------------------------------------------------------------ */ .container-clock {margin:20px auto 0;max-width: 250px;border-right:solid 1px #231B4D;border-left:solid 1px #231B4D;} #counterClock {padding:0 10px 10px;} #counterClock div > div {font-family:'proxima-nova', sans-serif;float: left; text-align:center; color:#231B4D; line-height: 1.2;font-weight:300; font-size: 30px;} #counterClock div > font {font-family:'proxima-nova', sans-serif;float: left; text-align:center; color:#9f9f9f; line-height: 1.2;font-weight:300; font-size: 30px;} #counterClock div span {color: #636363;} .countdown_digit:after, .countdown_desc:after {display:block; clear:both; content:'.'; visibility:hidden; height:0;} .countdown_digit div {width:15%;font-size: 28px;line-height: 1.2;} .countdown_digit div.colon {width:2.5%;line-height: 0.8;font-size: 37px;} .countdown_desc {margin-right:5px; font-size: 14px;} .countdown_text {color:#231B4D;font-size:15px;font-family:'proxima-nova';text-align:center;} .hasCountdown {background:none!important;} /* Tablet (Portrait), Design for a width of 768px */ @media (max-width: 767px) { } /* --------------------------------------------------------------------------------------------------------------------------------------- 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, .35), -10px 8px 15px rgba(100, 100, 100, .35), 10px 8px 15px rgba(100, 100, 100, .35); -moz-box-shadow: 0px 8px 10px rgba(100, 100, 100, .35), -10px 8px 15px rgba(100, 100, 100, .35), 10px 8px 15px rgba(100, 100, 100, .35); box-shadow: 0px 8px 10px rgba(100, 100, 100, .35), -10px 8px 15px rgba(100, 100, 100, .35), 10px 8px 15px rgba(100, 100, 100, .35);} .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;}