@charset "UTF-8";
/* CSS Document
Client: Informatics Starter Template
Company: Informatics, Inc
Author: Jeff S
Date: April 2022
*/
/* ----------------------*/
/* -- MENU AND HEADER -- */
/* ----------------------*/
.hdr-topper {background: var(--primary);}
.hdr-tools {display: flex; justify-content: space-between;}
.hdr-tools a {display: block; padding: 5px; color: rgba(255,255,255,.85); font-size: .8rem;}
.hdr-tools a:hover {color: #fff;}
#logo {max-width: 115px; margin-right: auto;}

#nav-main {margin: 1rem 0;}
#nav-main a {font-size: 1.1rem; color: var(--dark); font-weight: 700; text-decoration: none; display: block; padding: 15px; flex: 1;}
#nav-main li ul {width: 100%; padding: 0;}
#nav-main li ul li {border: 0;}
#nav-main li ul li a {font-size: 1rem; font-weight: 400; padding: 10px 15px 10px 35px;}

#language-select {
    background: transparent;
      border: none;
      text-decoration: underline;
      font-size: .8rem;
      position: relative;
      padding: 5px;
      color: #fff;
      width: 85px;
  }
  .translate-dropdown option {
    background: #fff;
    color: #000;
  }

/* ONLY MOBILE */
@media (max-width: 992px) {
#header {border-bottom: 1px solid var(--light-border); margin: 0 0 var(--spacer) 0; box-shadow: 0 5px 10px var(--light);}
#header .container {width: 100%; padding: 0;}
.mobile-menu {display: flex; justify-content: flex-end; align-items: center; gap: 15px; padding: 15px;}
#toggle {background: none; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin: 0; border: none; border-radius: 0; font-size: .6rem;}
#toggle .menu-label {display: block;}
#toggle .fa {font-size: 1.5rem;}
#navbar {margin: 0; border-top: 1px solid var(--secondary-light-border);}
#header .btn-theme span {letter-spacing: normal; font-size: .5rem;}
#nav-mini {display: grid; grid-template-columns: 1fr 1fr; list-style: none; padding: 0; gap: 15px; margin: 0 0 1rem 0;}
#nav-mini a {padding: 10px 15px; font-size: .8rem; display: block; background: var(--secondary-light); color: var(--text); border-radius: 5px; border: 1px solid var(--secondary-light-border);}

#nav-main button {border: none; background: none; color: var(--secondary); padding: 15px 25px; border-left: 1px dotted var(--secondary-light-border);}
#nav-main button .fa {transform: rotate(180deg);}
#nav-main button.collapsed .fa {transform: rotate(0deg);}
#nav-main li {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-bottom: 1px dotted var(--secondary-light-border);}
#nav-main li ul li:last-of-type {margin: 0 0 1rem 0;}
#nav-main .hdr-cta {display: none;}

.mobile-menu .btn-theme {font-size: .75rem; padding: 15px 15px; box-shadow: none; padding: 12px 10px; background: var(--secondary); box-shadow: 5px 5px 5px rgba(0,0,0,.1), inset 0 0 0 2px rgba(0,0,0,.2); color: rgba(0,0,0,.7);}
    .mobile-menu .btn-theme:hover {background: var(--secondary);}
    .mobile-menu .btn-theme span {display: none;}
    .hdr-tools > * {flex: 1; text-align: center}
.hdr-tools a {}
    
.hdr-language-select {background: rgba(0,0,0,.25); text-transform: uppercase;}
#language-select {text-transform: capitalize; font-weight: 700}
}

/* TABLET */
@media (min-width: 768px) {
#logo {max-width: 135px;}
}

/* DESKTOP */
@media (min-width: 992px) {
#header {position: fixed; width: 100%; top: 0; left: 0; z-index: 50; transition: var(--transition);}
#header.scroll {background: #fff; box-shadow: 0 10px 10px rgba(0,0,0,.025); top: -45px;}
.header {margin-top: 125px;}
#header .container {display: flex; align-items: center; justify-content: space-between;}
#header .container:before, #header .container:after {display: none;}
#header .hdr-topper .container {display: block;}
#logo {display: block; max-width: 125px;}
.hdr-tools {justify-content: flex-start;align-items: center;}
.mobile-menu .hdr-cta {display: none;}
#navbar {padding: 0;}
#nav-main {display: flex; align-items: center;}
#nav-main li button {display: none;}
#nav-main a {display: flex; align-items: center; font-size: .9rem; padding: 10px 5px; letter-spacing: -.5px;}
#nav-main > li > a:after {content: "\f078";font-family: "Font Awesome 5 Free"; color: var(--secondary); margin: 0 0 0 5px; font-size: .7rem; transition: var(--transition);}
#nav-main .hdr-cta .btn-theme {display: block; color: #fff; line-height: 1.2; font-weight: 800; padding: 10px 15px; margin: 0 0 0 15px;}
#nav-main .hdr-cta .btn-theme span {letter-spacing: normal;}
#nav-main .hdr-cta .btn-theme:after {display: none;}

.hdr-tools a {font-size: .75rem; color: rgba(255,255,255,.85);}
#nav-mini {position: absolute; top: -28px; right: 15px; display: flex; align-content: center; list-style: none; padding: 0; margin: 0;}
#nav-mini a {font-size: .75rem; padding: 5px; color: rgba(255,255,255,.85);}

.hdr-language-select {position: relative; padding: 5px 13px 5px 13px; margin: 5px 5px 5px 0; background: #fff; border-radius: 5px; font-weight: bold; background-size: 25px; color: #fff; box-shadow: inset 0 4px 0 0 var(--primary); background: var(--secondary); box-shadow: 5px 5px 5px rgba(0,0,0,.1), inset 0 0 0 2px rgba(0,0,0,.2); color: rgba(0,0,0,.7);}
.hdr-language-select:hover {background-color: var(--tertiary);}
#language-select {color: #000;text-transform: capitalize; font-weight: 800; font-size: .8rem;}
#language-select:hover {color: #fff;}
#nav-main a:hover {background: none; opacity: 1;}
#nav-main .hdr-cta .btn-theme:hover {background: var(--primary-dark);}
#nav-main li:hover a:after {color: var(--primary);}
#nav-main li ul {position: absolute; display: block; top: 105%; left: calc(50% - 125px); width: 250px; background: #fff; z-index: 5;list-style: none;box-shadow: 0 5px 10px rgba(0,0,0,.05); border-radius: 15px; padding: 10px; border: 1px solid var(--secondary-light-border); margin: 0; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 15;}
#nav-main li:hover ul {top: 100%; opacity: 1; visibility: visible;}
#nav-main li ul li a {padding: 8px 10px; border-radius: 5px; border: 1px solid #fff;}
#nav-main li ul li a:hover {padding: 8px 5px 8px 15px; background: var(--secondary-light); border: 1px solid var(--secondary-light-border);}

#logo {max-width: 175px; position: relative; top: 15px;}

#nav-main .hdr-cta .btn-theme {font-size: 1rem; padding: 12px 10px; background: var(--secondary); box-shadow: 5px 5px 5px rgba(0,0,0,.1), inset 0 0 0 2px rgba(0,0,0,.2); color: rgba(0,0,0,.7);}
#nav-main .hdr-cta .btn-theme:hover {background: var(--secondary); color: #fff;}
.hdr-tools a, #nav-mini a {font-size: .8rem; position: relative; padding: 8px 5px;}
#nav-mini {top: -30px;}
#nav-mini a {padding: 5px 10px;}
#nav-mini a:before {content:""; height: 15px; width: 1px; background: rgba(255,255,255,.25); position: absolute; left: 0; top: 7px;}
#nav-mini li:first-of-type a:before {display: none;}
#nav-mini a:hover {text-decoration: none; opacity: 1; color: #fff;}

}

/* WIDE DESKTOP */
@media (min-width: 1200px) {
#logo {max-width: 200px;}
#nav-main .hdr-cta .btn-theme {padding: 15px;}
#nav-main a {font-size: 1rem; padding: 20px 8px}
}

/* Bootstrap Expand Nav Tablet Too */
@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in {
        display:block !important;
    }
}