#mainNav {
  background-color: fade-out($secondary, 0.1);
  @include heading-font;
  .navbar-brand {
    color: $primary;
  }
  .navbar-nav {
    .nav-item {
      .nav-link {
        color: fade-out($white, 0.3);

        font-weight: 800;
      }
      &.active {
        .nav-link {
          color: $primary;
        }
      }
    }
  }
  @media (min-width: 992px) {
    .navbar-nav {
      .nav-item {
        .nav-link {
          font-size: 0.9rem;
          &:hover {
            color: fade-out($white, 0.6);
          }
        }
        &.active {
          .nav-link:hover {
            color: $primary;
          }
        }
      }
    }
  }
}