.nav{
  position:absolute;
  top:0;
  width:100%;
  transition:height 0.4s ease-in-out;
  z-index:999;
  &_bar {
    width: 100%;
    position: relative;
    &-wrap {
      width: 1.8rem;
      height: 1.8rem;
      display: grid;
      align-items: center;
      cursor: pointer;
      z-index: 99;
      min-height: 1.5rem;
    }
    &,
    &::after,
    &::before {
      padding: 1px;
      border-radius: 2px;
      background-color: var(--text);
    }
    &::after,
    &::before {
      content: "";
      position: absolute;
      width: 1.2rem;
    }
    &::before {
      top: -0.5rem;
    }
    &::after {
      top: 0.5rem;
      right: 0;
    }
  }
  &-body{
    @include shadow;
    position:fixed;
    right:10px;
    z-index:1;
    top:100%;
    opacity:0;
    overflow:hidden;
    transition:top 0.33s linear;
    background:transparent;
    background-color: var(--accent);
    width:33.3%;
    width: 16rem;
    padding: 100px 0;
    min-height: 67vh;
    margin-top: 0.5rem;
    z-index:1;
    border-radius: 0.33rem;
    a{
      display:block;
      padding:12.5px 25px;
      margin-bottom:2px;
      border-bottom:1px solid rgba($dark, 0.04);
      transition:color 0.25s ease-in-out;
      &:hover{
        color: $theme;
      }
    }
  }
  &-brand{
    font-family: 'Cookie';
    font-size:2em !important;
    // max-width:250px;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  &-close {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    right:0;
    width: 100%;
    cursor:pointer;
    padding:25px;
    &:after, 
    &:before{
      content: '';
      width: 18px;
      border-radius:50%;
      padding: 1.5px;
      background: var(--text);
      opacity: 0.7;
      position: relative;
    }
    &:before {
      transform: rotate(20deg) translateX(1.5px);
    }
    &:after {
      transform: rotate(-20deg) translateX(-1.5px);
    }
  }
  &-drop {
    background: rgba(0,0,0,0.15);
    top:0;
    bottom:0;
    z-index:1000;
  }
  &-exit{
    animation: hideMenu 0.5s ease-out forwards;
  }
  &-menu {
    position: relative;
    padding:10px 25px 10px 0;
    height:100%;
    max-width: 1024px;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      color:inherit;
      width:100%;
      display:block;
      padding:10px 25px;
      font-size:105%;
    }
  }
  &-pop{
    position: fixed;
    width:100vw;
  }
  &-open {
    animation: showMenu 0.5s ease-out forwards;
  }
  &_item {
    text-transform: capitalize;
  }
}
