/*
    (c)2012 - visuallizard.com

    Mobile styles using Media Queries
*/
/* colour 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) {
    main { width: 100%; max-width: 1400px; }
}

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

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

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

}

/* Smaller than standard 1000 (devices and browsers) */
@media only screen and (max-width: 1000px) {
    body:before { content: 'large'; visibility: hidden; }
    main .container { padding: 2rem 1rem; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 800px) {
    body:before { content: 'medium'; visibility: hidden; }

    /* 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; flex: 0 0 100%; max-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 {  }

    .js .nav-on main,
    .js .nav-on .site-footer { max-height: 0; overflow: hidden; /* hide content when navigation is open */ }

    .site-header { flex-wrap: wrap; }
    .site-title,
    .org-title { flex-basis: 49%; max-width: 49%; }
    .site-header ul#snav { position: relative; justify-content: center; top: auto; right: auto;    width: 100%; margin: 0 0 1rem 0; }

    main .container { padding: 0 1rem; }

    ul#fnav { flex-basis: 49%; max-width: 49%; flex-wrap: wrap; }
    ul#fnav li { border: none; border-top: 1px solid #000; flex-basis: 100%; max-width: 100%; }

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 670px) {
    body:before { content: 'small'; visibility: hidden; }

    .sponsor-set#presenting .sponsor { max-width: 60%; padding: 20px; }
    .sponsor-set#platinum .sponsor { max-width: 60%; padding: 20px; }
    .sponsor-set#gold .sponsor,
    .sponsor-set#silver .sponsor,
    .sponsor-set#bronze .sponsor { max-width: 49%; }
    .sponsor-set#hors-doeuvres .sponsor, .sponsor-set#dessert .sponsor, .sponsor-set#wine .sponsor, .sponsor-set#auction .sponsor, .sponsor-set#live-auction .sponsor, .sponsor-set#sparkling-wine .sponsor { max-width: 40%; padding: 5px; }

}

/* Mobile Portrait Size (devices and browsers) */
@media only screen and (max-width: 520px) {
    body:before { content: 'small'; visibility: hidden; }

    a.subsite-link { display: block; flex-basis: 49%; max-width: 49%; }
    .site-header ul#snav li a.nav-link { padding: 1rem 0.25rem; font-size: 0.875rem; }
    header.site-header ul#snav { flex: 0 0 100%; max-width: 100%; }

    div#register > div.registration-tickets { flex-basis: 100%; max-width: 100%; }
    footer.site-footer .container.wide { padding: 0 1rem; }
    footer section.footer,
    footer section.footer:nth-child(2),
    footer section.footer:nth-child(4) > div.disclaimer,
    footer section.footer:nth-child(4) > p.copyright { flex-basis: 100%; max-width: 100%; }

    ul#fnav { flex-basis: 100%; max-width: 100%; flex-wrap: wrap; }

}