/*
    (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 */
    .main-nav { z-index: 200; background: #123; color: #fff; font-size: 18px; box-shadow: none; }
    .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-link:hover { opacity: .8; }
    .main-nav .nav-item:hover > .nav-link { color: inherit; border: none; }

    .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,
    .main-nav .nav-1 > .nav-item:hover > .nav-link { color: #000; }
    .main-nav .nav-1 > li:hover > a, .main-nav .nav-1 > li.nav-item[data-nav-status="active"] > a { background: #fff; }

    .main-nav .nav-1 { display: block; }
    .main-nav .nav-1 li a { font-size: 16px; color: #fff; padding: .5rem; }
    .main-nav .nav-1 > li > a {  font-weight: bold; color: #fff; text-align: left; }

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

    .main-nav .sub-list .sub-list { left: auto; display: block; visibility: visible; opacity: 1; transform: scale(1); left: auto; position: static; top: auto; margin: 0; padding: 0; }

    .main-nav .nav-2 { /* text-align: center;  */}
    .main-nav .nav-2 > li { padding: 0 0 0 0.5rem; position: relative; }
    .main-nav .nav-2 > li:hover,
    .main-nav .nav-2 > li[data-nav-status="active"] { background: #fff; }
    .main-nav .nav-2 li a { border-bottom: none; }
    .main-nav .nav-2 > li:hover a.nav-link,
    .main-nav .nav-2 > li[data-nav-status="active"] a.nav-link { color: #000; }

    .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         .main-nav { max-height: 100vh; display: block; position: absolute; left: -100%; left: -100vw; top: 0px; width: 100%; height: auto; min-height: 100vh; padding: 4em 10px 10px; margin: 0; overflow: hidden; transition: transform .2s ease-in;  z-index: 1000; }
    .js .nav-on .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 */ }

    .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; }

    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#gold .sponsor { max-width: 49%; }
    .sponsor-set#silver .sponsor { max-width: 49%; }
    .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#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; }

    div#register > div.registration-tickets { flex-basis: 100%; max-width: 100%; }

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

}