/* Nav */

  #nav {
    @include vendor('transform', 'translateX(-18em)');
    @include vendor('transition', ('transform #{_duration(nav)} ease', 'box-shadow #{_duration(nav)} ease', 'visibility #{_duration(nav)}'));
    -webkit-overflow-scrolling: touch;
    background: #F8F8F8;
    box-shadow: none;
    color: _palette(accent2, fg-bold);
    height: -webkit-calc(100% - 3.5em);
    height: -moz-calc(100% - 3.5em);
    height: calc(100% - 3.5em);
    max-width: 80%;
    overflow-y: auto;
    position: fixed;
    top: 3.50em;
    left: 0;
    visibility: hidden;
    width: 18em;
    z-index: 500;
    h3 {
      font-size: 18px;
      font-family: 'Muli', sans-serif;
      color: darken(_palette(accent2, bg), 12);
    }
    p {
      margin-bottom: 20px;
      color: darken(_palette(accent2, bg), 12);
    }
    > ul {
      margin: 0 0 (_size(element-margin) * 0.5) 0;

      &.links {
        list-style: none;
        padding: 0;

        > li {
          padding: 0;

          > a:not(.button) {
            border: 0;
            border-top: solid 1px _palette(accent2, border);
            color: inherit;
            display: block;
            letter-spacing: _size(letter-spacing-alt);
            line-height: 3.5em;
            text-decoration: none;
          }

          > .button {
            display: block;
            margin: 0.5em 0 0 0;
          }

          &:first-child {
            > a:not(.button) {
              border-top: 0 !important;
            }
          }
        }
      }
    }

    .form-control > select,
    .form-control > span {
      float: right;
    }

    .close {
      @include icon('\f00d');
      @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      border: 0;
      color: _palette(accent2, fg-light);
      cursor: pointer;
      display: none;
      height: 3.25em;
      line-height: 3.25em;
      padding-right: 1.25em;
      position: absolute;
      right: 0;
      text-align: right;
      top: 0;
      vertical-align: middle;
      width: 7em;

      &:before {
        font-size: 1.25em;
      }

      &:hover {
        color: _palette(accent2, fg-bold);
      }

      @include breakpoint(small) {
        height: 4em;
        line-height: 4em;
      }
    }

    &.visible {
      @include vendor('transform', 'translateX(0)');
      box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.2);
      visibility: visible;
    }

    .ui-accordion-content {
      padding-top: 0.5em;
      padding-right: 0.5em;
      padding-bottom: 0.5em;
      padding-left: 0.5em;
    }
    .ui-state-active,
    .onoffswitch-checkbox:checked+.onoffswitch-label {
      border-color: #3b3b3b;
      background-color: #3b3b3b;
    }
    .onoffswitch-checkbox:checked+.onoffswitch-label:before {
      border-color: #c0c0c0;
    }
    .ui-accordion-header.ui-state-active {
      color: #d6d6d6;
    }
    .ui-corner-all {
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    .ui-state-focus {
      outline: none;
    }
  }