/*
    (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 sizes (up to 1400px): */
@media only screen and (max-width: 1400px) {
    body.debug:before { content: 'large'; }
    .container { padding: 0 1rem; }

}

/* ! 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-title { flex-basis: 50%; max-width: 50%; padding: 1rem; }

    /* MOBILE nav */
    .skip-nav { position: absolute; max-width: 100%; visibility: hidden; }

    .main-nav { z-index: 100; max-width: 100%; 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 { font-weight: bold; color: #fff; border-left: 5px solid #19609A; padding-left: 1rem; }
    .nav-2 > .nav-item[data-nav-status='active'] > .nav-link { font-weight: bold; color: #fff; border-left: 5px solid #19609A; padding-left: 1rem; }

    .main-nav .nav-1 { display: block; }
    .main-nav .nav-1 li a { font-size: 16px; color: #fff; padding: .5rem .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 a { border-bottom: none; }

    .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%; width: 100vw; 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: 0; width: 32px; height: 32px; min-width: 0; margin: 1rem 0;  color: inherit; 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 */ }

    /* Footer navigation */
    ul#fnav > li { flex-basis: 32%; max-width: 32%; }


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



    /* General styles */

    .cke > .c1,
    .cke > .c2,
    .cke > .c3,
    .cke > .c4,
    .cke > .c5,
    .cke > .c6 { flex-basis: 100%; max-width: 100%; }

    section#constant div#location div.c2 { flex-basis: 100%; max-width: 100%; }
    section#constant div#location div.c-last { padding: 3rem; }

    /* 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 */

    /* GL module */
    div.service-set div.service { flex-basis: 49%; max-width: 49%; }

    /* 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%; }

    a.footer-logo { flex-basis: 50%; max-width: 50%; }
    nav.footer-nav { display: none; }
    section.contact-social div.contact { padding: 0; }

}

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

    .main-region .c1,
    .main-region .c2 { padding: 2rem 0; }
    section#introduction .container,
    section#cta .container { padding: 2rem 1rem; }
    div.form-block { width: 100%; margin: 0 auto; padding: 1rem; }
    .input-check-option,
    .input-radio-option { flex-basis: 100%; max-width: 100%; padding: 0.5rem 0; }

    div#banner .container { padding: 0; }
    .banner-title { font-size: 3rem; }
    .banner-subtitle { font-size: 1.5rem; }

    /* Footer styles and footer navigation */
    div.instagram { flex-basis: 100%; max-width: 100%; padding: 2rem; }
    section.contact-social > div { flex-basis: 100%; max-width: 100%; padding: 2rem 0; }
    ul#fnav > li { flex-basis: 100%; max-width: 100%; margin-bottom: 1.5rem; }

    /* Modules */
    section.inspiration-set .c2 { flex-basis: 100%; max-width: 100%; }
    section.inspiration-set#smiles .c-first,
    section.inspiration-set#needs .c-last,
    section.inspiration-set#anxiety .c-first { order: 1; min-height: 250px; margin-bottom: 1rem; }
    section.inspiration-set#smiles .c-last,
    section.inspiration-set#needs .c-first,
    section.inspiration-set#anxiety .c-last { order: 0; padding: 1rem 0; }
    section.inspiration-set#technology .container { padding: 1rem; }

    section#constant div#location div.c-first { padding: 2rem 0; }
    section#constant div#location div.c-last { padding: 2rem 0; box-shadow: 150px 0px 0px 0px #f3f1ea, -150px 0px 0px 0px #f3f1ea; }

    /* GL module */
    div.service-set div.service { flex-basis: 100%; max-width: 100%; }
    div.experience-set div.experience { flex-basis: 100%; max-width: 100%; }

    /* News */
    .article-item  { width: 100%; margin: 0 0 1rem 0; }

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

}