@charset "utf-8";

/**
 * National Ugly Christmas Sweater Day responsive stylesheet
 * 
 * Style Guidelines
 * - colors - red #da242b, green #558f45
 * 
 * Break Points
 * 1440px, 1280px, 1024px, 960px, 800px, 768px, 640px, 480px, 320px
 */

/* break point - 1440px */
@media (max-width: 1440px) {
    .social-links div.social-pages { display: none; }
    .flip-clock { top: 25%; font-size: 100px; }
}

/* break point - 1280px */
@media (max-width: 1280px) {
    .social-links div.social_share { display: none; }
    nav ul li a { font-size: 11pt; font-weight: 400; letter-spacing: 1px; }
    .ribbon-info-btn a { padding: 5px; font-size: 20px; }
    h1 { font-size: 4em; }
    h2 { font-size: 3em; }
    .flip-clock { font-size: 90px; }
    #default-countdown { padding-top: 50px; }
    .celebrate-list-item a, .celebrate-list-item a.celebrate-donate { margin-bottom: 75px; }
    .celebrate-list-item a h3 { font-size: 1.25em; }
    .celebrate-list-item a span.celebrate-desc { font-size: 1em; letter-spacing: 0; }
    .celebrate-list-item a img { width: 125px; }
}

/* break point - 1024px */
@media (max-width: 1024px) {
    body { font-size: 12pt; }
    .inner-wrapper { padding: 25px; }
    .social-links { top: 15px; right: 60px; }
    .social-links div.social_share { display: block; }
    button#mobile-navigation-show { display: block; }
    .header-wrapper nav ul li a { display: none; }
    #mobile-navigation-wrapper nav ul li a {  }
    .ribbon-info-btn a { display: inline-block; margin: 15px 8px; width: 80px; font-weight: 300; float: left; }
    .flip-clock { font-size: 80px; }
    .flip-clock-desc { font-size: 1em; }
    .celebrate-list-item a h3 { font-size: 1.75em; }
    .celebrate-list-item a span.celebrate-desc { font-size: 1.25em; letter-spacing: 2px; }
    .celebrate-list-item a img { width: auto; }
    .shop-page-heading-container { margin: 100px 0 0; }
    .shop-page-heading-container h1, .shop-page-heading-container h4 { text-align: center; line-height: 1.0; }
    .shop-col-left a img { width: 200px; }
    .calendar { margin-bottom: 25px; }
    .contact-heading-container { position: relative; height: 200px; }
    .contact-heading-container h1 { display: inline-block; margin: 100px 0 0; width: 100%; padding: 0; color: #da242b; text-align: center; text-shadow: none; background: none; float: none; }
    .contact-heading-container h4 { display: inline-block; margin: 0; }
    .contact-heading-container span.end-arrow { display: none; }
    .contact-form-wrapper { margin: 0 0 -25px; }
    .form-col.form-col-left, .form-col.form-col-right { width: 100%; margin: 0; }
    .form-col.form-col-right { margin-top: -10px; }
    .contact-input { margin: 10px 0; padding: 1% 2%; width: 95%; }
    .contact-input textarea { height: 50px; }
    .stc-mtwbwas-logo { width: auto; max-width: 100%; margin: 0 auto 25px; }
    .footer-links-wrapper { width: 100%; }
    .footer-right { position: static; }
    .copyright { margin-top: 50px; }
    .content-block .split-column.split-column-right, .content-block .split-column.split-column-left, .content-block .split-column.split-column-right.sidebar-left, .content-block .split-column.split-column-left.sidebar-left { width: 100%; float: left; }
    .page-banner { display: none; }
	.page-banner-mobile { display: block; }
}

/* break point - 960px */
@media (max-width: 960px) {
    .content-right { margin: 0 25px 25px 275px; }
    .content-right h1.heading-about { font-size: 3em; }
    .ribbon-info-btn a { display: none; }
    .flip-clock { font-size: 60px; }
    div.logo a { margin-left: 20px; width: 180px; -webkit-border-bottom-right-radius: 120px; -webkit-border-bottom-left-radius: 120px; -moz-border-radius-bottomright: 120px; -moz-border-radius-bottomleft: 120px; border-bottom-right-radius: 120px; border-bottom-left-radius: 120px; }
    div.logo a img { width: 180px; }
    .content-left { left: 30px; }
    .ribbon-vertical { padding-top: 200px; width: 190px; }
    .ribbon-tail-vertical { width: 210px; }
    .fan-photo img { width: 100%; height: 100%; }
    .buy-sweater-button { bottom: -30px; }
    .buy-sweater-button a img { width: 200px; }
    #default-countdown { margin-top: 25px; }
    .shop-page-heading-container h1 { font-size: 2.5em; }
    .contact-heading-container h1 { margin-top: 75px; }
}

/* break point - 800px */
@media (max-width: 800px) {
    h5 { font-size: 2.5em; }
    .flip-clock { top: 30%; font-size: 50px; letter-spacing: 5px; text-shadow: 0 -1px 1px rgba(255, 255, 255, 1), 0 1px 1px rgba(0, 0, 0, 1); }
    .store-details .store-number { display: none; }
    .store-name a { background: none; width: auto; }
}

/* break point - 768px */
@media (max-width: 768px) {
    h1 { font-size: 3em; }
    .flip-clock { font-size: 40px; }
    #default-countdown { padding-top: 65px; border: none; }
    #default-countdown h4 { font-size: 1.25em; }
    .celebrate-list-item a h3 { font-size: 1.5em; }
    .celebrate-list-item a span.celebrate-desc { font-size: 1em; }
    .contact-input { padding: 2%; }
    .shop-page-heading-container h1 { font-size: 2em; }
    .shop-page-heading-container h4 { font-size: 1.25em; }
    .shop-col-left a img { width: 150px; }
}

/* break point - 640px */
@media (max-width: 640px) {
    h1 { font-size: 2.5em; }
    h5 { font-size: 1.75em; }
    div.logo a { padding: 10px 20px; width: 120px; -webkit-border-bottom-right-radius: 80px; -webkit-border-bottom-left-radius: 80px; -moz-border-radius-bottomright: 80px; -moz-border-radius-bottomleft: 80px; border-bottom-right-radius: 80px; border-bottom-left-radius: 80px; }
    div.logo a img { width: 130px; }
    .social-links { left: 200px; width: 100px; }
    .social-links div.social-pages { display: block; }
    .social-links div.social_share { display: none; }
    .ribbon-vertical { display: none; }
    .content-right { margin: 0 25px 25px; }
    .flip-clock { font-size: 30px; letter-spacing: 2px; text-shadow: none; }
    .flip-clock-desc { font-size: 0.75em; }
    #default-countdown { padding-top: 50px; }
    #default-countdown h4 { font-size: 1em; }
    .donate-heading, .pictures-heading { margin: 50px 0 0; }
    .celebrate-list-item a, .celebrate-list-item a.celebrate-donate { margin-bottom: 50px; }
    .celebrate-list-item a h3 { font-size: 1.25em; }
    .celebrate-list-item a span.celebrate-desc { letter-spacing: 0; }
    .celebrate-list-item a img { width: 125px; }
    .shop-page-heading-container { margin-top: 0; }
    .shop-page-heading-container h1 { font-size: 1.5em; }
    .shop-page-heading-container h4 { font-size: 1em; }
    .contact-heading-container h1 { margin: 50px 0 25px; line-height: 1.0; }
    .shop-col-right { width: 100%; }
    .shop-col-left { margin-bottom: 25px; }
    .shop-col-left a img { width: 320px; }
    .footer-left, .footer-center { width: 150px; }
    .footer-right { width: 100%; text-align: center; }
    .footer-right input[name="email"] { width: auto; }
    .footer-right input[name="email"], .footer-right button.klaviyo_submit_button { padding: 10px 15px; font-size: 12px; }
}

/* break point - 520px */
@media (max-width: 520px) {
    body { font-size: 11pt; }
    .celebrate-list-item a h3 { font-size: 0.8em; }
    .celebrate-list-item a span.celebrate-desc { font-size: 0.8em; }
    #countdown-wrapper li { width: 31%; }
    li#countdown-seconds { display: none; }
    .flip-clock { top: 25%; font-size: 40px; }
    .flip-clock-desc { font-size: 1em; }
}

/* break point - 480px */
@media (max-width: 480px) {
    body { font-size: 10pt; }
    h1 { font-size: 2em; }
    h5 { font-size: 1.25em; }
    .donate-heading, .pictures-heading { margin: 0; }
    div.logo a { padding: 10px 0; width: 90px; background: none; box-shadow: none; }
    div.logo a img { width: 100px; }
    .social-links { left: 150px; }
    .flip-clock { font-size: 30px; }
    .flip-clock-desc { font-size: 0.9em; }
    #default-countdown { padding-top: 35px; }
    #default-countdown h4 { font-size: 0.9em; }
    .contact-heading-container h1 { margin: 25px 0; }
    .celebrate-list-item a img { margin-top: 10px; width: 100px; }
    .shop-col-left a img { width: 100%; }
    .footer-left, .footer-center { width: 125px; margin: 0; margin-bottom: 25px; }
}

@media (max-width: 360px) {
    .social-links { top: 55px; right: 0; }
}

/* break point - 320px */
@media (max-width: 320px) {
    h5 { font-size: 1em; }
    .flip-clock { font-size: 25px; }
    .shop-col-left a img { width: 270px; }
}