.header {
  padding: 20px 0px 20px 0px;
  background: #125f8e;
  color: white;

  &__container {
    .container();
  }

  &__row {
    .row;
  }

  &__logo {
    .make-xs-column(2);
    width: initial;
  }

  &__title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    @media(@md){
      font-size: 14px;
      margin-top: 0;
    }
  }

  &__nav {
    .make-xs-column(18.5);
    @media(@md){
      float: none;
      width: 100%;
      padding: 0px 60px 0px 67px;
    }

    &__wrapper {
      @media(@md){
        display: none;
      }
    }
  }

  &__do {
    .make-md-column(24);
    .make-lg-column(3.5);
    margin-top: 15px;
    text-align: right;

    .btn {
      width: 100%;
    }
  }
}

.mobile-menu {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 43px;
  height: 40px;
  color: #345;
  border: 2px solid white;
  background: #125f8e;
  z-index: 2;
  cursor: pointer;
  font-size: 20px;
  display: none;

  @media(@md){
    display: block;
  }

  span {
    position: relative;
    background-color: white;
    height: 2px;
    display: block;
    width: 22px;
    margin: 17px auto 0;
    //transition: all 0.4s;
    //transition-delay: 0.3s;

    &:before,
    &:after {
      content: '';
      position: absolute;
      display: block;
      width: 20px;
      height: 0;
      left: 1px;
      top: 50%;
      margin-top: -7px;
      //transition: all 0.3s 0.3s;
    }

    &:before {
      box-shadow: 0 14px 0 1px white;
    }

    &:after {
      box-shadow: 0 0 0 1px white;
    }
  }

  &.active {
    span {
      background-color: transparent;

      &:before {
        transform: rotate(-45deg);
      }

      &:after {
        transform: rotate(45deg);
      }

      &:before,
      &:after {
        margin-top: 0;
        box-shadow: 0 0 0 1px white;
      }
    }
  }
}

.nav {
  &--promo {
    width: 100%;
    text-align: center;

    li {
      display: inline-block;
      margin: 0px 10px;

      a {
        color: #125f8e;
        font-size: 19px;
        border-bottom: 1px rgba(18,95,142,0.5) dashed;
        text-decoration: none;
        padding: 0px;
        line-height: normal;

        &:focus, &:hover {
          color: #125f8e;
          text-decoration: none;
          background: transparent;
        }
      }
    }
  }

  &--header {
    margin-top: 15px;

    li {
      display: inline-block;
      margin-right: 15px;

      &:last-child {
        margin-right: 0;
      }

      a {
        padding: 0;
        font-size: 16px;
        color: white;

        &:focus, &:hover {
          color: white;
          text-decoration: underline;
          background: transparent;
        }
      }
    }
  }
}