@charset "utf-8";

/**
 * National Ugly Christmas Sweater Day responsive stylesheet
 * 
 * Style Guidelines
 * - colors - red #da242b, green #558f45
 */

/* element types */
html, body { width: 100%; height: 100%; color: #000; font: 300 14pt/1.35 helvetica, sans-serif; background: #fff; }
h1, h2 { font-family: 'thirsty_script_extrabold_deRg', cursive; }
h3 { font-family: 'Roboto Condensed', sans-serif; }
h4 { font-family: 'Conv_gotham-medium-1361523254', helvetica, sans-serif; margin-bottom: 25px; }
h5, h6 { font-family: 'thirsty_script_extrabold_deRg', cursive; }
h1 { color: #da242b; font-size: 4em; font-weight: 700; margin: 25px 0; }
h2 { color: #558f45; font-size: 3em; font-weight: 700; margin: 0 0 15px; line-height: 1.1; }
h3 { color: #000; font-size: 2.5em; font-weight: 700; text-transform: uppercase; }
h4 { color: #000; font-size: 1.5em; font-weight: 700; text-transform: uppercase; text-align: center; }
h5 { color: #da242b; font-size: 3em; font-weight: 700; margin: 25px 0; vertical-align: middle; }
a { color: #da242b; font-weight: 700; text-decoration: none; }
li { list-style: none; }
p { text-align: justify; }
* { outline: none; padding: 0; margin: 0; }
strong { font-weight: 700; }

/* specific elements */
#header { background: #000; }
div.logo a { display: block; margin: 0 0 25px 50px; padding: 10px 25px 25px; width: 240px; -webkit-border-bottom-right-radius: 150px; -webkit-border-bottom-left-radius: 150px; -moz-border-radius-bottomright: 150px; -moz-border-radius-bottomleft: 150px; border-bottom-right-radius: 150px; border-bottom-left-radius: 150px; box-shadow: 0 0 10px rgba(0,0,0,0.5); background: #558f45; }
div.logo a img { width: 240px; }
.header-wrapper nav ul li a { margin-right: 30px; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; float: left; }
.header-wrapper nav ul li a:active, nav li a:hover, nav li a.active { color: #da242b; }
button#mobile-navigation-show { display: none; position: absolute; top: 10px; right: 10px; cursor: pointer; height: 40px; width: 40px; border: none; background: url('../images/hamburger.open.png') center center no-repeat; }
button#mobile-navigation-hide { display: block; position: absolute; top: 10px; right: 10px; cursor: pointer; height: 40px; width: 40px; border: none; background: url('../images/hamburger.close.png') center center no-repeat; z-index: 10002; }
#mobile-nav-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #000; opacity: 0.35; }
#mobile-nav-wrapper { display: none; position: relative; z-index: 10001; }
#mobile-nav-wrapper nav { position: absolute; top: 0; left: 0; padding: 2.5%; width: 95%; background: #000; }
#mobile-nav-wrapper nav ul li a { display: block; padding: 0.5% 2.5%; max-width: 300px; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: 2em; font-weight: 300; letter-spacing: 1px; line-height: 1.5; white-space: nowrap; text-transform: uppercase; }
#footer { background: #000; }
.footer-left a, .footer-center a, .copyright { color: #fff; font-size: 9pt; letter-spacing: 1px; }
.footer-right input[name="email"], .footer-right button.klaviyo_submit_button { display: inline-block; padding: 10px 15px; font-family: 'Roboto Condensed', sans-serif; font-size: 20px; font-weight: 300; border: none; }
.footer-right input[name="email"] { padding: 12px 15px; width: 300px; color: #222; font-size: 17px; letter-spacing: 1px; background: #fff; }
.footer-right button.klaviyo_submit_button { cursor: pointer; color: #fff; letter-spacing: 3px; text-transform: uppercase; background: #da242b; }
.success_message { margin: 10px 0; padding: 10px 15px; color: #fff; font-size: 25px; font-weight: 300; letter-spacing: 2px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; background: #558f45; }
#default-countdown { position: relative; border-top: 3px solid #000; margin-top: 0; padding: 25px 0; }
#default-countdown h4 { display: block; position: absolute; top: -20px; left: 50%; margin: 0 0 0 -40%; max-width: 78%; padding: 0 1%; background: #fff; }
#countdown-wrapper {  }
#countdown-wrapper li { position: relative; float: left; margin: 1%; width: 23%; }
#countdown-wrapper li img { width: 100%; height: 20vw; }
.flip-clock { position: absolute; top: 25%; left: 0; width: 100%; color: #fff; font: 700 130px/1.0 "helvetica neue", helvetica, sans-serif; letter-spacing: 10px; text-align: center; text-shadow: 0 -2px 2px rgba(255, 255, 255, 1), 0 2px 2px rgba(0, 0, 0, 1); }
.flip-clock-desc { width: 100%; color: #000; font: 400 1.5em/1.0 'Conv_gotham-medium-1361523254', helvetica, sans-serif; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.official-sponsor-heading { display: block; }
.official-sponsor-heading a img { margin: 0 0 -25px 0; }
img.official-sponsor-merchandise { width: 100%; height: 60vw; }
.contact-form-wrapper { position: relative; margin: -50px 0; }
.contact-form-background { width: 100%; height: 400px; }
form#contact-form { margin: 2.5%; position: absolute; top: 0; left: 0; width: 90%; }
.form-col { margin: 0; float: left; width: auto; }
.form-col.form-col-left { width: 45%; }
.form-col.form-col-right { margin: 0 2.5%; width: 45%; }
.contact-input { display: block; margin: 2.5% 0; width: 90%; padding: 20px 25px; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; font-weight: 300; letter-spacing: 1px; border: 3px solid #fff; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; background: #336c23; opacity: 0.8; }
.contact-input label { float: left; margin-right: 10px; }
.contact-input input[type="text"], .contact-input input[type="email"], .contact-input input[type="tel"], .contact-input textarea { display: inline-block; width: 60%; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: 1em; font-weight: 300; letter-spacing: 1px; border: none; background: none; float: right; }
.contact-input textarea { float: none; height: 160px; width: 100%; }
#contact-submit { padding: 10px 25px; width: auto; border: none; background: #000; text-transform: uppercase; opacity: 1; cursor: pointer; float: right; }
#contact-submit:disabled { background: #777; cursor: wait; }

/* classes */
.hide-text { text-indent: 100% !important; overflow: hidden !important; white-space: nowrap !important; }
.support-special-chars { font-family: 'prime_script_personal_use_oRg', cursive; }
.last { border: none; } 
.clear:after { display: table; content: ''; clear: both; }
.christmas-dots { margin: 25px 0; height: 25px; width: 100%; background: url('../images/christmas_dots.png') center left repeat-x; }
.ribbon-vertical { padding: 235px 10px 0; width: 230px; background: #da242b; }
.ribbon-vertical img { margin: 0 0 10px; }
.ribbon-tail-vertical { width: 250px; height: 72px; background: url('../images/red_ribbon.png') top center no-repeat; }
.ribbon-tail-horizontal {  }
.ribbon-info-btn a { display: block; margin: 10px auto 15px; padding: 10px; width: 180px; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 2px; text-align: center; border: 4px solid #fff; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; background: #000; }
.ribbon-social-icons { margin-bottom: -25px; text-align: center; }
.facebook-like-wrapper { display: none; }
.facebook-like-wrapper iframe { color: #fff !important; }
.social-links div { float: left; white-space: nowrap; }
.social-links div.social_share { margin: 2px 0 0 25px; }
.instructions-1, .instructions-2, .instructions-3 { display: inline-block; margin: 50px 0 10px; }
.instructions-1 .instructions-heading, .instructions-2 .instructions-heading, .instructions-3 .instructions-heading { text-indent: 60px; }
.instructions-1 { background: url('../images/heading_numbers_01.png') top left no-repeat; }
.instructions-2 { background: url('../images/heading_numbers_02.png') top left no-repeat; }
.instructions-3 { background: url('../images/heading_numbers_03.png') top left no-repeat; }
.content-right a { color: #558f45; font-weight: 700; }
.calendar { width: 100%; }
.stc-mtwbwas-logo { width: 100%; }
.page-banner, .page-banner-mobile { width: 100%; }
.page-banner-mobile { display: none; }
.buy-sweater-button { position: absolute; bottom: 25px; right: 0; }
.celebrate-list-item a { position: relative; display: block; margin: 0 40px 50px 0; padding: 15px 40px 15px 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; background: #558f45; }
.celebrate-list-item a h3 { font-size: 1.75em; }
.celebrate-list-item a span.celebrate-desc { color: #fff; font: 300 1.25em/1.0 'Conv_gotham-medium-1361523254', helvetica, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.celebrate-list-item a img { position: absolute; top: -30px; right: -50px; }
.celebrate-list-item a.celebrate-donate { text-align: right; margin: 0 0 50px 40px; padding: 15px 20px 15px 40px; }
.celebrate-list-item a img#instruction-icon-donate { left: -50px; }
.shop-page-heading-container { margin: -50px 0 0 300px; }
.shop-page-heading-container h1, .shop-page-heading-container h4 { text-align: right; }
.shop-page-heading-container h1 { font-size: 3em; }
.shop-page-heading-container h4 { line-height: 1.0; }
.featured-merchandise-image { margin-top: 25px; width: 100%; height: 28vw; }
.store-listing { width: 100%; overflow: hidden; margin: 50px 0; }
.shop-col-left, .shop-col-right {  }
.shop-col-left { float: left; margin-right: 50px; }
.shop-col-right { margin-top: 10px; overflow: hidden; }
.store-number { display: inline-block; padding: 10px; width: 50px; height: 50px; color: #fff; font: 400 50px/1.0 "thirsty_script_extrabold_deRg", cursive; text-align: center; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px; -o-border-radius: 35px; -ms-border-radius: 35px; background: #558f45; }
.store-name, .store-name a { display: inline-block; /*  */ }
.store-name { letter-spacing: -1px; font-size: 2em; }
.store-name a { width: 200px; height: 50px; font-size: 1.0em; background: url('../images/shop-arrow.png') center right no-repeat; }
.store-desc { margin-top: 10px; text-align: justify; }
.contact-heading-container {  }
.contact-heading-container h1 { margin: -35px 0 0 150px; padding: 10px 0 10px 150px; width: 580px; height: 65px; color: #fff; font-size: 2.5em; font-weight: 400; text-shadow: 0 0 10px rgba(0,0,0,0.5); background: #da242b; float: left; }
.contact-heading-container h4 { margin-top: 25px; font-size: 1em; }
.contact-heading-container span { margin: -35px 0 0 -15px; display: inline-block; height: 85px; width: 50px; background: url('../images/end-arrow.png') center center no-repeat; }
.privacy-terms-heading, .privacy-terms { font-size: 12pt; }
.privacy-terms-heading { margin: 0; text-align: center; }
.donate-heading, .pictures-heading { margin: 100px 0 0; text-align: center; }
.privacy-terms h4 { margin: 25px 0 10px; text-align: left; }
.privacy-terms ul { margin: 10px 0; }
.privacy-terms ul li { margin: 0 0 15px 50px; font-size: 12pt; line-height: 2; text-align: justify; }

/* layout classes */
.site-wrapper { position: relative; }
.header-wrapper { position: relative; width: 100%; height: 100px; z-index: 10000; }
.top-menu { position: absolute; left: 375px; top: 50px; width: 60%; }
.social-links { position: absolute; right: 10px; top: 45px; }
.page-banner-wrapper { position: relative; width: 100%; height: auto; }
.inner-wrapper { padding: 50px; }
.content-left { position: absolute; top: 0; left: 70px;  }
.content-right, .one-column { margin: 0 50px 25px 375px; }
.content-block .split-column.split-column-right { width: 40%; float: right; }
.content-block .split-column.split-column-left { width: 55%; float: left; }
.content-block .split-column.split-column-right.sidebar-left { width: 60%; }
.content-block .split-column.split-column-left.sidebar-left { width: 35%; }
.footer-wrapper { position: relative; padding: 50px; }
.footer-links-wrapper { float: left; white-space: nowrap; }
.footer-left, .footer-center { display: inline-block; width: 200px; margin: 0 50px 25px 0; line-height: 180%; }
.copyright { line-height: 100%; }
.footer-right { position: absolute; top: 50px; right: 50px; width: 500px; }
.footer-right input[name="email"], .footer-right button.klaviyo_submit_button { float: left; white-space: nowrap; }
.add-margin { margin: 50px 0 0; }