/************************
******   Menus    *******
**** Version: 0.0.1 *****
*************************/
/*! responsive-nav.js 1.0.23 by @viljamis */

.nav-collapse {
  list-style: none;
  width: 100%;
  float: left;

  ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    list-style: none;
    float: left;
  }

  li {
    width: 100%;
    display: block;
    float: left;

    @media(min-width: 40em) {
      width: 25%;
      *width: 24.9%;
      /* IE7 Hack */
      _width: 19%;
      /* IE6 Hack */ 
    }

  }

  &.opened {
    max-height: 9999px;
  }

  a {
    color: $white;
    text-decoration: none;
    width: 100%;
    background: $black-10;
    border-bottom: 1px solid $white;
    padding: .7em 1em;
    float: left;

    @media(min-width: 40em) {
      margin: 0;
      padding: 1em;
      float: left;
      text-align: center;
      border-bottom: 0;
      border-right: 1px solid $white;
    }

  }

  ul ul a {
    background: $black-20;
    padding-left: 2em;

    @media(min-width: 40em) {
      display: none;
    }

  }

}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;

  @media(min-width: 40em) {
    position: relative;

    &.closed {
      max-height: none;
    }
  
  }

}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  @include vendorize(user-select, none);
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 55px;
  float: right;
  
  &:before {
    color: #444;
    font-family: "icomoon";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 28px;
    text-transform: none;
    position: absolute;
    content: "\e6b8";
    text-indent: 0;
    text-align: center;
    line-height: 65px;
    speak: none;
    width: 100%;
    top: 0;
    left: 0;
  }

  .active {

    &:before {
      font-size: 24px;
      content: "\e6fd";
    }

  }

  @media(min-width: 40em) {
    display: none;
  }

}
