/*
    (c)2021 - visuallizard.com

    Mobile styles using Media Queries
*/
/* Color declarations */
:root {
    --gold: #ffbc0d;
    --red: #db0007;
    --lavender: #d0c9ff;
    --aqua: #8ee7f8;
    --blue: #1b43b2;
    --lime: #9cd83e;
    --softwht: #fffde9;
    --white: #ffffff;
    --black: #000000;
}

/* !Media Queries ============================== */

/* greater than 1600 (devices and browsers) */
@media only screen and (min-width: 1601px) {
}

/* Smaller than 1600 (devices and browsers) */
@media only screen and (max-width: 1600px) {
}

/* Smaller than 1440 (devices and browsers) */
@media only screen and (max-width: 1440px) {
}

/* Smaller than 1200 (devices and browsers) */
@media only screen and (max-width: 1200px) {
    body:before { content: 'desktop'; visibility: hidden; }
}

/* Smaller than standard 1024 (devices and browsers) */
@media only screen and (max-width: 1000px) {
    body:before { content: 'large'; visibility: hidden; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 800px) {
    body:before { content: 'medium'; visibility: hidden; }
    h2, .h2 { font-size: 2.25rem; letter-spacing: normal; }

    /* MOBILE nav */
    .js nav.main-nav {
        max-height: 100vh;
        display: block;
        position: absolute;
        left: -100%;
        left: -100vw;
        top: 0px;
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 4rem 0 0 0;
        margin: 0;
        overflow: hidden;
        transition: transform .2s ease-in;
        z-index: 1000; }
    .js .nav-on nav.main-nav {
        max-height: none;
        transform: translateX(100%);
    }

    .nav-toggle {
        position: absolute;
        top: 0; right: 1rem;
        width: 32px; height: 32px;
        min-width: 0; margin: 1rem 0;
        color: #000; padding: 0;
        border: none; z-index: 1001;
        background: transparent; transition: color .2s;
        flex-shrink: 0;
    }
    .js .nav-on .nav-toggle,
    .js .nav-on .nav-toggle:hover { color: #fff; }

    .js .nav-on main,
    .js .nav-on .site-footer { max-height: 0; overflow: hidden; /* hide content when navigation is open */ }
    nav.main-nav {
        display: block;
        flex: 0 0 100%;
        max-width: 100%;
        z-index: 200;
        font-size: 1rem;
        box-shadow: none;
        background: var(--black);
        color: var(--softwht);
    }
    nav.main-nav .nav-1 { flex: 0 0 100%; max-width: 100%; flex-wrap: wrap; }
    nav.main-nav .nav-1 li { display: block; width: 100%; }
    nav.main-nav .nav-1 > li > a { text-align: left; color: var(--softwht); }
    /* .main-nav .nav-list,
    .main-nav li > .sub-list { width: 100%; max-height: 9999px; transform: scale(1); transition: max-height .2s ease-in; background: transparent; margin: 0 0 1rem; padding: 0; position: relative; top: auto; left: auto; opacity: 1; visibility: visible; border: none; box-shadow: none; }
    .main-nav .nav-item { border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; overflow: hidden; }
    .main-nav .nav-link, .main-nav .nav-1 > .nav-item > .nav-link { -webkit-tap-highlight-color: transparent; width: 100%; border: none; padding-right: 0; } */

    .main-nav .nav-1 > .nav-item[data-nav-status="has-active"] > .nav-link,
    .main-nav .nav-1 > .nav-item[data-nav-status="active"] > .nav-link { color: var(--softwht); }

    .main-nav .has-sub > .nav-link::after { content: none; }

    nav.main-nav .sub-list,
    nav.main-nav li > .sub-list {
        display: none;
        top: auto;
        position: relative;
        width: 100%;
        color: var(--black);
        visibility: visible;
        opacity: 1;
    }
    nav.main-nav li[data-nav-status="has-active"] > .sub-list,
    nav.main-nav li > .sub-list.on {
        display: block;
    }

    .main-nav li > .nav-3 > li { padding-left: 1.5em; }
    .main-nav li > .nav-4 > li { padding-left: 2.5em; }
    .main-nav li > .nav-5 {  }




    .site-title, .org-title { width: 35%; }
    header.site-header ul#snav {
        flex: 0 0 40%; max-width: 40%;
        margin: 0;
        align-self: center;
    }

    main .container { padding: 0 1rem; }
    .sidebar { display: none; }
    .primary { flex-basis: 100%; max-width: 100%; padding: 0; }

    div.announcement-set { flex-wrap: wrap; }
    div.announcement-set div.announcement,
    div.signature-set div.announcement { flex-basis: 100%; max-width: 100%; margin: 0 0 1em 0; }

    .featured-set article { width: 100%; margin: 0 0 1em 0; }

    div.event-set.upcoming div.event-listing { flex-basis: 100%; max-width: 100%; margin: 0 0 1em 0; }

    .feed-set { flex-wrap: wrap; }
    .feed-set .feed { flex-basis: 100%; max-width: 100%; margin: 0 0 1em 0; }

    .cke > .c2,
    .cke > .c3 { width: 100%; margin: 0; }

    .form-block .input-check-option,
    .form-block .input-radio-option { padding: 0; }
    .form-block .input-text label,
    .form-block .input-textarea label,
    .form-block .input-email label,
    .form-block .input-currency label,
    .form-block .input-select label,
    .form-block .input-radio label,
    .form-block .input-checkbox label { margin: 0 0 0.5em 0; font-size: 1rem; line-height: 1.1; }

    footer.site-footer .container.wide { width: 100%; padding: 0 1rem; }
    footer section.footer:nth-child(2) { flex-grow: 1; max-width: 66%; }
    section.footer.navigation ul#navigation-2 { display: none; }
    section.footer.navigation > ul.nav-list > li { flex: 0 0 32%; max-width: 32%; text-align: center; }
    footer section.footer:nth-child(3),
    footer section.footer:nth-child(4) { flex: 0 0 100%; max-width: 100%; }
    footer section.footer:nth-child(4) > div.disclaimer { flex: 0 0 100%; max-width: 100%; }
    footer section.footer:nth-child(4) > p.copyright { flex: 0 0 100%; max-width: 100%; text-align: center; }

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 670px) {
    body:before { content: 'small'; visibility: hidden; }
    header.site-header { padding: 1rem 0; }
    .site-header .container { column-gap: 2%; row-gap: 1rem; }
    .site-title { width: 58%; max-height: 200px; background-position: left center; }
    .site-header ul#snav { position: relative; max-width: 40%; }

    .w5, .w10, .w15, .w20, .w25, .w30, .w35, .w40, .w45, .w50,
    .w55, .w60, .w65, .w70, .w75, .w80, .w85, .w90, .w95, .w100 { width: 100%; }

    .sponsor-set#presenting .sponsor { max-width: 60%; padding: 20px; }
    .sponsor-set#gold .sponsor { max-width: 49%; padding: 10px; }
    .sponsor-set#silver .sponsor { max-width: 49%; padding: 10px; }
    .sponsor-set#bronze .sponsor { max-width: 49%; padding: 10px; }
    .sponsor-set#gift .sponsor, .sponsor-set#reception .sponsor, .sponsor-set#wine .sponsor, .sponsor-set#auction .sponsor, .sponsor-set#cart .sponsor, .sponsor-set#print .sponsor { max-width: 49%; padding: 10px; }
    .sponsor-set#forever .sponsor, .sponsor-set#national-lead .sponsor, .sponsor-set#national-mission .sponsor, .sponsor-set#founder .sponsor, .sponsor-set#local .sponsor { max-width: 49%; padding: 10px; }
    .sponsor-set#ten-thousand .sponsor, .sponsor-set#seven-thousand .sponsor, .sponsor-set#five-thousand .sponsor { max-width: 49%; padding: 10px; }

    div.charity-event { padding: 0; }
    div.goal-progress span { width: 100%; }
    div.goal-progress:before { display: none; }
    div.controls a.button { margin: 0 0 10px 0; }

    .form-block { padding: 15px; }
    .form-block .input-text,
    .form-block .input-email,
    .form-block .input-textarea,
    .form-block .input-wysiwyg,
    .form-block .input-currency,
    .form-block .input-select,
    .form-block .input-radio,
    .form-block .input-checkbox { padding: 0.5rem }
    .form-block .input-check-option input[type="checkbox"],
    .form-block .input-checkbox input[type="checkbox"],
    .form-block .input-radio-option input[type="radio"] { transform: none; }
    .form-block form .address-fields { padding: 0; }
    .form-block form .address-fields .input-text,
    .form-block form .address-fields .input-email,
    .form-block form .address-fields .input-select { width: 100%; padding: 0.5rem; }
    .form-block form .g-recaptcha { padding: 0; }

    .site-footer { padding: 1em; }

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 520px) {

    .site-header ul#snav { font-size: 0.75rem; }

    .featured-set article h3 { width: 100%; }
    .featured-set article div.article-date { width: 100%; padding: 0.5em 0; border-bottom: 1px solid #999; }
    .featured-set article div.article-date p { text-align: left; }
    .featured-set article div.article-body { padding: 0.5em 0; }

    .feed.video-feature iframe { max-height: 180px; }

    main { padding-top: 0; }
    body.home main { padding: 3rem 0; }

    div.staff { flex-wrap: wrap; flex: 0 0 100%; max-width: 100%; }
    div.staff img { order: 1; flex-basis: 100%; max-width: 100%; margin: 0 0 1em 0; }
    div.staff div.staff-copy { order: 2; flex-basis: 100%; max-width: 100%; padding: 0; }
    div.staff-copy h3 span { display: block; padding: 0.5rem 0 0 0; }

    .form-block .input-text,
    .form-block .input-email,
    .form-block .input-textarea,
    .form-block .input-wysiwyg,
    .form-block .input-currency,
    .form-block .input-select,
    .form-block .input-radio,
    .form-block .input-checkbox,
    .form-block .input-check-option,
    .form-block .input-radio-option { width: 100%; }
    .form-block button[type="submit"] { margin: 0; }
    .form-block .input-radio label,
    .form-block .input-checkbox label,
    .form-block .input-check-option > label { width: 100%; line-height: 1.625; }
    .form-block .input-radio > label { line-height: 1.1; margin: 0 0 0.5em 0; }
    .form-block p.input-plaintext-label,
    .form-block .input-select.fm-checkbox-group > label { padding: 0; margin: 0 0 0.5em 0; font-size: 1.25rem; }
    .form-block p.input-plaintext-value { padding: 0; }

    .subscribe .form-block .input-text,
    .subscribe .form-block .input-email { width: 100%; }

    footer section.footer,
    footer section.footer:nth-child(2) { flex: 0 0 100%; max-width: 100%; }
    section.footer.navigation > ul.nav-list > li { text-align: left; }
    ul#fnav { flex-wrap: wrap; flex-basis: 100%; max-width: 100%; padding: 0; }
    ul#fnav li,
    ul#fnav li:first-child { flex-basis: 100%; max-width: 100%; border: none; }

}