/**
 * Navigation bar.
 */


/******************************************************************************************************************************//*
* Mega-menus styling
********************************************************************************************************************************/

#megamenu {
  display: none;
  color: #fff;
  position: absolute;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 1.2rem 0 3rem;
  background-color: #0067b2;
  border-bottom: 2px solid #00497f;
  border-top: 1px dotted #5188c2;
}

.header.megamenu-show #megamenu {
  display: block;
}

#megamenu .block {
  display: none;
}

#megamenu .block-menu > .menu > .menu-item {
  margin-bottom: 1rem;
}

#megamenu .menu {
  margin: 0;
}
#megamenu li a {
  font-size: .9rem;
}
#megamenu .block.with-button > .menu > .menu-item:first-child > a {
  background: #fec63e;
  border-radius: 0 4px;
  padding: 4px 8px;
  color: #0067b2;
  font-size: 1rem;
}

#megamenu .block.with-button > .menu > .menu-item:first-child > a:after {
  content: ' ›';
}

#megamenu .column-heading,
#megamenu .menu .menu-item--expanded > span {
  display: block;
  font-size: .8rem !important;
  padding: 0 0 0.333rem 0;
  margin-bottom: .5rem;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: #fec63e;
  text-underline-position: under;
  text-decoration-thickness: 2px;
}
#megamenu .column-heading a {
  font-size: .8rem;
}

@media all and (min-width: 800px) {
  #megamenu {
    padding: 2rem 0 3rem;
  }
  #megamenu .block-menu > .menu {
    display: grid;
    grid-template-columns: 20.5% 20.5% 20.5% 20.5%;
    grid-column-gap: 6%;
  }
  #megamenu .block-menu > .menu > .menu-item {
    margin-bottom: 0;
  }
}

@media all and (min-width: 1250px) {
  #megamenu .block.with-button > .menu > .menu-item:first-child {
    text-align: right;
  }
}