/*
    (c)2021 - visuallizard.com

    Responsive styles using Media Queries
*/



/* Larger Desktop sizes (more than 1400px): */
@media only screen and (min-width: 1400px) {
    body.debug:before { content: 'x-large desktop'; }
    button#nav-toggle { display: none; }

}

/* Desktop sizes (up to 1400px): */
@media only screen and (max-width: 1400px) {
    body.debug:before { content: 'large desktop'; }
    button#nav-toggle { display: none; }

}

/* Desktop sizes (up to 1024px): */
@media only screen and (max-width: 1024px) {
    body.debug:before { content: 'large tablet'; }
    .container,
    main .container,
    footer .container { padding-left: 1rem; padding-right: 1rem; }
    div#talk { display: none; }


}

/* Medium Tablet sizes (up to 800px):  usually when mobile nav mode kicks in */
@media only screen and (max-width: 800px) {
    body.debug:before { content: 'medium'; }


    /* 	Site Header */
    .site-header { padding: 0; }
    .site-header-container { display: flex; justify-content: space-between; }
    .site-title { margin-top: 1rem; }

    .search-form { float: none; margin: 1rem; display: none; }

    /* MOBILE nav */
    .main-nav { z-index: 10000; background: #123; color: #fff; font-size: 18px; box-shadow: none; }
    header .container, .main-nav > .container {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .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-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; background: #fff; }

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




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

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



    /* 	Featured banners */
    .slick-dots { bottom: 0; }
    .banner-container { padding: 2% 4%; }



    /* 	General styles */

    .cke > .c2,
    .cke > .c3,
    .cke > .c4,
    .cke > .c5,
    .cke > .c6 { float: none; margin-left: 0; width: auto; }

    .region-row { display: block; }
    .region-cell { padding: 0; }

    .flex { display: block; }
    .flex > div + div { margin: 0 0 1em 0; }

    h1, .h1 { font-size: 35px; }
    h2, .h2 { font-size: 28px; }
    h3, .h3 { font-size: 20px; }

    table { font-size: 12px; }

    /* Forms */
    .fm-form [type="url"],
    .fm-form [type="tel"],
    .fm-form [type="text"],
    .fm-form [type="date"],
    .fm-form [type="email"],
    .fm-form [type="number"],
    .fm-form [type="password"],
    .fm-form select,
    .fm-form textarea { -webkit-appearance: none; }

    .fm-form [type="date"] {  min-height: 46px; }
    .fm-form [class^="input-"] { width: 100%; }

    .button { font-size: 1rem; min-width: 0; }
    .button.large { font-size: 100%;  margin-left: 0; margin-right: 0; }


    .pagination-links { font-size: 16px; }
    .pagination-links li:not([class]) { display: none; }

    .img-left,
    .img-right { float: none; margin-left: 0; margin-right: 0; }


    /* 	Modules */

    /* 	Toggles */
    .toggle { right: 1rem; top: .85rem; width: 1.5rem; height: 1.5rem; }
    .toggle-head {padding: .5rem 3rem .5rem 1rem; }
    .toggle-head > .toggle-title { font-size: 18px; }
    .is-toggle-on .toggle-details { padding-left: 1rem; padding-right: 1rem; }


    /* 	Staff */
    .staff-item { width: 45%; min-width: 0; }


    /* 	Documents */
    .document-item { width: 45%; }
}

/* Small Mobile sizes (up to 520px): */
@media only screen and (max-width: 520px) {
    body.debug:before { content: 'small'; }

    div.gallery-set div.gallery-image { flex: 0 0 49%; max-width: 49%; }
    div.gallery-set div.gallery-image:nth-child(odd):hover,
    div.gallery-set div.gallery-image:nth-child(even):hover { transform: none; box-shadow: none; }

    /* 	News */
    .article-item  { width: 100%; }

    /* 	Events */
    .event-item { width: 100%; }

}