/// /// Future Imperfect by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///

/* Menu */

menu {

@include vendor('transform', 'translateX(#{_size(menu)})');
@include vendor('transition', ('transform #{_duration(menu)} ease',
    'visibility #{_duration(menu)}'
  ));
-webkit-overflow-scrolling: touch;
background: _palette(bg);
border-left: solid 1px _palette(border);
box-shadow: none;
height: 100%;
max-width: 80%;
overflow-y: auto;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
width: _size(menu);
z-index: _misc(z-index-base) + 2;

>* {
  border-top: solid 1px _palette(border);
  padding: _size(section-spacing);

  > :last-child {
    margin-bottom: 0;
  }
}

> :first-child {
  border-top: 0;
}

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

  >li {
    border: 0;
    border-top: dotted 1px _palette(border);
    margin: 1.5em 0 0 0;
    padding: 1.5em 0 0 0;

    a {
      display: block;
      border-bottom: 0;

      h3 {
        @include vendor('transition', 'color #{_duration(transition)} ease');
        font-size: 0.7em;
      }

      p {
        font-family: _font(family-heading);
        font-size: 0.6em;
        font-weight: _font(weight-heading);
        letter-spacing: _font(kerning-heading);
        letter-spacing: _size(letter-spacing-alt);
        margin-bottom: 0;
        text-decoration: none;
        text-transform: uppercase;
      }

      &:hover {
        h3 {
          color: _palette(accent);
        }
      }
    }

    &:first-child {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }
  }
}

body.is-menu-visible & {
  @include vendor('transform', 'translateX(0)');
  visibility: visible;
}

@include breakpoint('<=small') {
  >* {
    padding: _size(section-spacing-small);
  }
}

}