/*================================================
=            Geiles animiertes Menü              =
= // http: //tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
================================================*/

body {
  background-color: @navbar-inverse-bg;
  overflow-x: hidden;
  &.menu-open {
    position: relative;

    height: 100%;
  }
}

.wrapper-pusher {
  position: relative;
  left: 0;
  height: 100%;
  transition: transform 0.5s;
  background-color: #fff;
  &:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background-color: #000;
    content: '';
    opacity: 0;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    .menu-open & {
      width: 100%;
      height: 100%;
      opacity: .25;
      transition: opacity 0.5s;
    }
  }
  .menu-open & {
    transform: translate3d(280px, 0, 0);
  }
}

.wrapper-content {
  position: relative;
}

.wrapper-mobilenav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: @zindex-navbar-fixed;
  width: 280px;
  height: 100%;
  transition: all 0.5s;
  transform: translate3d(-100%, 0, 0);
  overflow: auto;
  max-height: 100vh;
  .menu-open & {
    transition: transform 0.5s;
  }
}

.navbar-mobile {
  border-width: 0;
  box-shadow: inset -13px 0px 3px -10px rgba(0, 0, 0, .1);
  height: 100%;
  background-color: @navbar-inverse-bg;

  .nav {

    a {
      padding-left: @nav-link-padding-horizontal/2;
      padding-right: @nav-link-padding-horizontal/2;
    }
    &--level1 {
      > li {
        border-top: 1px solid rgba(0, 0, 0, .2);
        > a {
          text-transform: uppercase;
          font-weight: 500;
          color: #fff;
          &:hover, &:focus, &:active {
            background-color: @brand-primary;

          }
        }
      }
    }

    &--level2 {
      background-color: rgba(255, 255, 255, .1);
      > li {
        > a {
          font-weight: 300;
          color: #eee;
          &:hover, &:focus, &:active {
            background-color: @brand-primary;

          }
        }
      }
    }
  }
}

/*================================================
=            Geiler animierter Burger            =
================================================*/

.navbar-toggle {

  @media screen and (min-width: @grid-float-breakpoint) {
    display: none;
  }
  position: absolute;
  top: 50%;
  right: @grid-gutter-width;
  transform: translateY(-50%);
  float: none;
  border: 0 none;
  padding: 17px 10px;
  cursor: pointer;
  width: 35px;
  span {
    &, &:before, &:after {
      height: 3px;
      width: 35px;
      background: @brand-primary;
      position: absolute;
      right: 0;
      display: block;
      content: '';
      transition: all 500ms ease;
    }
    &:before {
      top: -10px;
    }
    &:after {
      bottom: -10px;
    }
  }
  //.menu-open & {
  //  span {
  //    background-color: transparent;
  //    &:before, &:after {
  //      top: 0;
  //    }
  //    &:before {
  //      transform: rotate(225deg);
  //    }
  //    &:after {
  //      transform: rotate(-225deg);
  //    }
  //  }
  //}
}
