.camp-menu {
  @include rem(height, 50px);
  margin-bottom: 0;
  padding: 0;
  position: relative;
  z-index: 6;

  &-wrapper {
    position: relative;

    background-color: $dark-blue;

    .columns-gradient {
      position: absolute;
      top: 0;
      left: 0;

      display: none;

      width: 100%;
      height: 100%;

      z-index: 5;

      @include breakpoint(0 $screen-desktop) {
        display: block;
      }

      &.gradient-right:before {
        content: '';

        position: absolute;
        top: 0;
        left: 0;

        display: block;
        width: 100%;
        height: 100%;

        background: linear-gradient(to right, transparent 0%, transparent 90%, rgb(0, 54, 99) 100%);
      }

      &.gradient-left:after {
        content: '';

        position: absolute;
        top: 0;
        left: 0;

        display: block;
        width: 100%;
        height: 100%;

        background: linear-gradient(to left, transparent 0%, transparent 90%, rgb(0, 54, 99) 100%);
      }
    }
  }

  &__item {
    @include rem(height, 50px);
    float: left;
    list-style: none;

    a {
      @include cachet();
      @include rem(line-height, 50px);
      @include rem(padding, 0 15px);
      color: $white;
      display: block;
      font-size: 14px;

      @include breakpoint($screen-sm) {
        @include rem(padding, 0 20px);
        font-size: 18px;

      }

      &:hover,
      &:active {
        background-color: $blue;
      }

      @include breakpoint(0 $screen-xs) {
        &:hover,
        &:active {
          background-color: transparent;
        }
      }
    }
  }
}
