.main-nav__wrapper.main-nav--feature__wrapper {

  .main-nav--feature__inner-wrapper {
    float: right;
  }
  .main-nav__burger {
    display: block;
    float: left;
    margin-left: 10px;
    height: 77px;
    border-right: 2px solid $colour-light-grey;
    border-left: 2px solid $colour-light-grey;
    
    @include breakpoint($desktop-nav-breakpoint) {
      position: relative;
      z-index: 10;
      float: left;
      height: 104px;
    }
  }

  .c-hamburger.main-nav-toggle {
    float: right;
    font-size: 16px;
    @include breakpoint($screen-md) {
      width: 125px;
      text-indent: 0;
      .c-hamburger__text {
        top: 30px;

        &:before {
          content: "More";
        }
      }
      &.is-active {
        .c-hamburger__text {
          &:before {
            content: "Close";
          }
        }
      }
    }
    @include breakpoint($desktop-nav-breakpoint) {
      .c-hamburger__text {
        top: 40px;
      }
    }
  }

  .main-nav--feature__featured-items {
    display: none;
    float: left;
    margin-top: 16px;
    @include breakpoint($desktop-nav-breakpoint) {
      display: block;
    }
    li {
      display: inline-block;
      margin: 0 20px;
      padding: 24px 0;
      a {
        transition: border 0.4s;
        padding: 2px 8px;
        text-decoration: none;
        color: #333;
        border-bottom: 3px solid transparent;
        font-size: 16px;
        line-height: 16px;
        font-family: $body-font;
      }
      &.menu-item--active-trail a,
      &.menu-item--active-trail a:hover,
      a:hover {
        border-bottom: 3px solid $colour-red;
        background-color: transparent;
      }
    }
  } 
  .main-nav__items.main-nav--feature__items {
    display: none;
    &.menu-open {
      display: block;
      position: absolute;
      top: 80px;
      right: 0;
      overflow: hidden;
      margin: 0;
      padding: 10px 0;
      width: 100%;
      height:auto;
      z-index: 100;
      text-align: right;
      background-color: #051d37;

      li,
      li.item-open {
        display: block;
        position: relative;
        padding: 0;
        /* Main menu text */
        a {
          display: block;
          padding: 10px 30px;
          text-decoration: none;
          color: $colour-white;
          font-size: 20px;
          line-height: 20px;
          font-family: $body-font;
        }
        > ul {
          display: none !important; // fallback in case there are more levels
        }
        &:hover {
          background-color: #1e354b;
          > a {
            span.menu-item__text {
              border: none;
            }
          }
          > ul {
            display: none !important; // fallback in case there are more levels
          }
        }
        .font--red:hover,
        .font--red {
          color: $colour-red;
        }  
      }
      @include breakpoint($screen-md) {
        top: 80px;
        width: auto;
      }
      @include breakpoint($desktop-nav-breakpoint) {
        top: 107px;
      }
    }
  }
}

#main-menu.main-nav--feature__items {
  @include breakpoint($desktop-nav-breakpoint) {
    // Override any prior jQuery animations from changing breakpoint
    display: none !important;

    &.menu-open {
      display: block !important;
    }
  }
}