// Styling for the navbar
#mainNav {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  background: $theme-primary;
  a:focus {
    outline: none;
  }
  .navbar-brand {
    font-size: 1.1rem;
    color: white;
    &.active,
    &:active,
    &:focus,
    &:hover {
      color: white;
    }
  }
  .navbar-nav {
    letter-spacing: 1px;
    li.nav-item {
      a.nav-link {
        color: white;
        &:hover {
          color: $theme-success;
          outline: none;
        }
        &:active,
        &:focus {
          color: white;
        }
      }
    }
  }
  .navbar-toggler {
    font-size: 14px;
    padding: 11px;
    text-transform: uppercase;
    color: white;
    border-color: white;
    &:focus,
    &:hover {
      color: white;
      border-color: $theme-success;
      background-color: $theme-success;
    }
  }
}
@media(min-width:992px) {
  #mainNav {
    padding-top: 25px;
    padding-bottom: 25px;
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s;
    .navbar-brand {
      font-size: 2em;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
    }
    .navbar-nav > li.nav-item > a.nav-link.active {
      color: white;
      border-radius: 3px;
      background: $theme-success;
      &:active,
      &:focus,
      &:hover {
        color: white;
        background: $theme-success;
      }
    }
  }
  #mainNav.navbar-shrink {
    padding-top: 10px;
    padding-bottom: 10px;
    .navbar-brand {
      font-size: 1.5em;
    }
  }
}