#hero-header-wrapper {
  position: relative;
}

header {
  background-color: rgba(25, 122, 128, 1);
}

/* navbar grid system row is always max width of container */
nav.navbar div.container div.row {
  width: 100%;
}

#nav-bar {
  margin-top: 16px;
  border-top: 2px solid var(--info);
}

  #nav-bar p.mega-section {
    margin: 0;
    padding-top: 10px;
    color: var(--info);
    text-align: left;
    font-weight: 600;
  }

  #nav-bar p.mega-section:first-of-type {
    padding-top: 0;
  }

  #nav-bar ul {
    list-style-type: none;
    list-style-image: none;
    padding-left: 0;
    margin-bottom: 0;
  }

    #nav-bar ul a {
      color: var(--white);
      font-weight: 600;
    }

    #nav-bar ul a:hover, #nav-bar ul a:active {
      color: var(--info);
      text-decoration: none;
    }

    #nav-bar .mega-menu-display ul {
      font-size: 13px;
      padding-left: 8px;
    }

  #mobile-menu-link {
    height: 26px;
  }

  #mobile-menu-link:hover {
    cursor: pointer;
  }

  #mobile-menu-link i {
    position: absolute;
    top: -22px;
    color: var(--info);
    font-size: 50px;
  }

  #mobile-menu-link a {
    padding-left: 45px;
    color: var(--white);
  }

  #mobile-menu-link a:hover, #mobile-menu-link a:active {
    text-decoration: none;
  }

#main-site-nav {
  padding: 5px 0;
  display: none;
}

#nav-bar .mega-menu-display i.material-icons {
  display: none;
}

/* Small devices (landscape phones, 576px and up) */
/* fix nav bar drift from sm+, xs is fine */
@media (min-width: 576px) {
  nav.navbar div.container{
    padding-left: 15px;
  }
}

/* Mobile Menu nav item states, this media query is UP TO the switch to horizontal nav */
@media (max-width: 767px) {

  /* keep search bar at 100% up until horizontal nav (this line forces it through sm, usually it stops after xs) */
  #nav-bar .form-inline .input-group {
    width: 100%;
  }
}

/* Medium devices (tablets, 768px and up), horizontal nav in effect */
@media (min-width: 768px) {

  header {
    background-color: rgba(25, 122, 128, 0.85);
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
  }

  #mobile-menu-link {
    display: none;
  }

  #main-site-nav {
    display: block !important;
  }

  /* mega menu display overrides */
  #main-site-nav .mega-menu-display {
    width: 690px;
    left: 15px;
  }
  #nav-bar .mega-menu-display i.material-icons {
    display: block;
    position: absolute;
    color: var(--primary);
    font-size: 50px;
    top: -21px;
    pointer-events: none;
  }
  #main-site-nav .mega-menu-display i.material-icons {left: 41px;}
  #main-site-nav #services-mega-menu-display i.material-icons {left: 176px;}
  #main-site-nav #department-mega-menu-display i.material-icons {left: 311px;}
  #main-site-nav #electeds-mega-menu-display i.material-icons {left: 447px;}
  #main-site-nav #maps-mega-menu-display i.material-icons {left: 583px;}

  /* this is applied to all links in displayed click-menus */
  #main-site-nav .mega-menu-display li {
    display: inline;
    text-align: left;
  }

  #main-site-nav .mega-menu-display li a {
    color: var(--primary);
  }

  #main-site-nav .mega-menu-display li a:hover, #main-site-nav .mega-menu-display li a:focus {
    color: var(--warning);
  }

  /* this is applied to the top level links (nav bar) */
  #main-site-nav > ul > li {
    text-align: center;
    display: inline-block;
    width: 19%;
  }

  /* this is applied to the "more" links (i.e. in How Do I menu) */
  #main-site-nav .expand-link {
    color: var(--info);
    text-align: left;
    display: inline-block;
    width: 100%;
  }

  #main-site-nav .expand-link:hover, #main-site-nav .expand-link:focus {
    color: var(--warning);
  }

  #main-site-nav ul li:first-of-type {
    padding-left: 0;
  }

  #main-site-nav ul li:last-of-type {
    padding-right: 0;
  }

  #main-site-nav .mega-menu-display li {
    display: block;
  }

} /* // end @media (min-width: 768px) */

@media (min-width: 992px) {
  /* mega menu display overrides */
  #main-site-nav .mega-menu-display {width: 930px;}
  #main-site-nav .mega-menu-display i.material-icons {left: 63px;}
  #main-site-nav #services-mega-menu-display i.material-icons {left: 245px;}
  #main-site-nav #department-mega-menu-display i.material-icons {left: 426px;}
  #main-site-nav #electeds-mega-menu-display i.material-icons {left: 607px;}
  #main-site-nav #maps-mega-menu-display i.material-icons {left: 788px;}
}

@media (min-width: 1200px) {
  /* mega menu display overrides */
  #main-site-nav .mega-menu-display {width: 1110px;}
  #main-site-nav .mega-menu-display i.material-icons {left: 80px;}
  #main-site-nav #services-mega-menu-display i.material-icons {left: 297px;}
  #main-site-nav #department-mega-menu-display i.material-icons {left: 511px;}
  #main-site-nav #electeds-mega-menu-display {
    left: inherit; /* null-out the left align from the class */
    right: 30px; /* right align since it is not full width, and closer to the right */
    width: 666px; /* only 3 "items" wide, instead of all 5 (full-width) Calc: 1110/5*3 = 666 */
  }
  #main-site-nav #electeds-mega-menu-display i.material-icons {left: 283px;}
  #main-site-nav #maps-mega-menu-display i.material-icons {left: 942px;}
}