/**
 * @file
 * The header components.
 *
 * It includes styles for the header itself and their
 * component as the logotype or the main menu.
 */

/**
 * Global header rules
 */
.header {
  background-color: #132D61;
}
@media all and (min-width: 750px) {
  .header {
    position: relative;
    z-index: 10;
    height: 70px;
  }
  .header-wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
  }
  .region-primary-menu {
    width: 600px;
    padding-top: .75rem;
  }
}
@media all and (min-width: 900px) {
  .header-wrapper {
    width: 86%;
    max-width: 1440px;
    margin: 0 auto;
  }
}
@media all and (min-width: 1100px) {
  .header-wrapper {
    justify-content: left;
  }
  .region-primary-menu {
    margin-left: 1rem;
  }
}


/**
 * Branding block
 */
.site-logo {
  display: block;
  max-width: 120px;
  margin: -1rem auto 0;
}

/**
 * Main menu
 */
.mobile-menu-trigger {
  display: none;
}
.menu--main .menu {
  margin: 0;
  padding: .5rem 0;
}
.menu--main .menu__item  {
  text-align: center;
}
.menu--main .menu a.menu__link {
  color: #FFF;
}
@media all and (min-width: 750px) {
  .menu--main .menu {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
  }
  .menu--main .menu a.menu__link {
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }
  .menu--main .menu a.menu__link:hover {
    border-bottom: 1px solid #A71D17;
  }
}