.menu-active {
  body {
    margin-left: $main_nav_width;
  }

  .main_nav {
    margin-left: 0;
  }

  #main_header {
    margin-left: $main_nav_width;
  }

  .main_nav-menu_button:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    height: 2000%;
    width: 2000%;
  }
}

.main_nav-accordion {
  &.-open {
    > ul {
      margin-left: 0;
      z-index: 1;
    }
  }
}

.main_nav-sub-nav {
  @include bp(large-down) {
    @include transition(margin-left, .3s, cubic-bezier(0.250, 0.460, 0.450, 0.940)); // for mobile menu
    position: fixed;
    top: 0;
    left: 0;
    width: $main_nav_width;
    height: 100%;
    margin-left: negate($main_nav_width);
    overflow: auto;
    padding: 0 5px 10px 0;
    background: image-url('fae/bg_tile.gif');
  }

  > li {
    span {
      @extend %inset-nav-shadow;
      margin-bottom: 0;
      margin-right: -5px;
      display: block;
      padding: 20px;
      cursor: pointer;
      background-color: $c-light_grey;
      color: $c-white;

      &:before {
        @extend .icon-chevron_left:before;
        @include icon_stuff();
        @include border-radius(50%);
        padding: 5px 9px 5px 7px;
        border: 2px solid $c-white;
        margin-right: 10px;
        color: $c-white;
      }

      @include bp(large) {
        display: none;
      }
    }
  }
}