nav
  position: absolute
  top: 10rem
  left: -15rem
  ul
    list-style: none
    li
      border-left: 1px solid $color-primary
      padding-left: 15px
      &.active
        font-weight: $active
      a
        text-decoration: none
        color: $color-primary
        &:hover
          font-weight: $active

.nav-button
  display: none

@media screen and (max-width: 80rem)
  body
    padding-bottom: 2*$space
  nav
    display: none
    position: fixed
    z-index: 10
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: $color-secondary
    &.is-opened
      display: block
    ul
      list-style: none
      padding: $space
      position: absolute
      bottom: $space
      right: 0
      width: 100%
      li
        line-height: 1.8*$space
        font-size: 0.7*$space
        text-align: right
        a
          text-decoration: none
          color: $color-primary
          font-weight: 400
          &:hover
            font-weight: 700
        &.active a
          font-weight: 700
  .nav-button
    z-index: 20
    display: inherit
    border: 0
    padding: 0
    position: fixed
    bottom: 0.5*$space
    right: $space
    background: transparent !important
    &:before
      content: 'menu'
      padding: 0 2em
      text-transform: uppercase
      background: $color-secondary
      position: fixed
      left: 0
      width: 100%
      height: 2*$space
      bottom: 0
      padding: 0.5*$space 3*$space 0.5*$space 0
      line-height: $space
      text-align: right
    &.is-active:before
      content: ''
    & > *
      display: inline-flex
      vertical-align: top
      flex-direction: column
      justify-content: space-between
      align-items: stretch
      height: 2.6rem
      width: 3.6rem
      background-image: linear-gradient(#333,#333)
      background-position: 50%
      background-repeat: no-repeat
      background-origin: content-box
      background-size: 100% 1px
      transition: .25s
      transition-property: transform,background
      will-change: transform,background
    & > ::before,& > ::after
      content: ""
      height: 1px
      background: #333
      transition: .25s
      transition-property: transform,top
      will-change: transform,top
    &.is-active > *
      background-image: none
      justify-content: center
    &.is-active > ::before
      transform: translateY(50%) rotate(45deg)
    &.is-active > ::after
      transform: translateY(-50%) rotate(-45deg)