#mainNav {
  background-color: $themeDark;
  .navbar-toggler {
    padding: 15px;

    color: white;

    font-size: 14px;
    &:focus,
    &:hover {
      color: $themeDark;
      background-color: white;
    }
  }
  .navbar-brand {
    color: white;

    font-size: 24px;
    line-height: 44px;
    @include heading-font;
    img {
      height: 40px;
    }
  }
  .navbar-collapse {
    .navbar-nav {
      > .nav-item {
        > .nav-link {
          padding-top: 15px;
          padding-bottom: 15px;

          color: white;
          &:focus,
          &:hover {
            color: fade-out(white, 0.5);
          }
          &.active,
          &.active:focus,
          &.active:hover {
            color: $themePrimary;
          }
        }
      }
    }
  }
  @media (min-width: 992px) {
    height: auto;
    padding: 30px 0;
    @include transition-padding;

    background-color: transparent;
    &.navbar-shrink {
      padding: 5px 0;

      background-color: $themeDark;
    }
    .navbar-brand {
      font-size: 26px;
      line-height: 50px;
      img {
        height: 46px;
      }
    }
    .navbar-collapse {
      .navbar-nav {
        > .nav-item {
          margin-right: 5px;
          &:last-child {
            margin-right: 0;
          }
          > .nav-link {
            padding: 15px;
            &.active,
            &.active:focus,
            &.active:hover {
              color: $themePrimary;
              border-radius: 0;
              border-radius: 5px;
              background-color: white;
            }
          }
        }
      }
    }
  }
}