.main-nav {
  background-color: darken($sbc-blue,15);
  overflow: hidden;
}

.main-nav a {
  float: left;
  display: block;
  color: $white;
  text-align: center;
  padding: $gutter / 2;
  text-decoration: none;
  font-size: 17px;
  &.active {
    color: $white;
    background-color: lighten($sbc-blue, 10);
  }

  &:hover,
  &:active,
  &:focus {
    color: $white;
    background-color: lighten($sbc-blue, 10);
  }
}

.main-nav a:hover {
  color: $white;
  background-color: lighten($sbc-blue, 10);
}

.main-nav .icon {
  display: none;
}

@media screen and (max-width: $small-screen) {
  .main-nav a:not(:first-child) {
    display: none;
  }

  .main-nav a.icon {
    float: right;
    display: block;
    color: $white;

    &:hover {
      color: $white;
      background-color: transparent;
    }

    &:hover,
    &:active,
    &:focus {
      color: $white;
      background-color: transparent;
    }
  }
}

@media screen and (max-width: $small-screen) {
  .main-nav.responsive {
    position: relative;
  }

  .main-nav.responsive a.icon {
    position: absolute;
    right: $gutter;
    top: 0;
    &:hover {
      color: $white;
      background-color: transparent;
    }
  }

  .main-nav a {
    &.active {
      color: $white;
      background-color: transparent;
    }
  }

  .main-nav.responsive a {
    float: none;
    display: block;
    text-align: left;
    &.active {
      color: $white;
      background-color: transparent;
    }

    &:hover,
    &:active,
    &:focus {
      color: $white;
      background-color: transparent;
    }
  }
}