#logo
  position: absolute
  @media (min-width: 960px)
    position: fixed

  width: calc(1rem + 9vw)
  left: 10px
  top: -0.5rem

.nav
  position: absolute
  top: 0
  width: 100%
  transition: height 0.4s cubic-bezier(0.52, 0.16, 0.24, 1)
  z-index: 999

  &_main_item
    display: none !important
    @media (min-width: 960px)
      display: inline !important

  &_bar 
    width: 100%
    position: relative
    display: block
    @media (min-width: 960px)
      display: none

    &-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
    box-shadow: 0 1.5rem 6rem rgba(0,0,0,0.17)
    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: 16rem
    padding: 100px 0
    min-height: 100vh
    z-index: 1
    &:hover 
      box-shadow: 0 1.5rem 6rem rgba(0,0,0,0.27)
    
    a
      display: block
      padding: 12.5px 25px
      margin-bottom: 2px
      border-bottom: 1px solid var(--accent)
      transition:color 0.25s ease-in-out
      &:hover
        color: var(--theme)
      
    
  
  &-brand
    font-family: 'Signika', sans-serif
    font-size: 1.5em !important
    padding-top: 0 !important
    padding-bottom: 0 !important
    color: var(--title) !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 
    cursor: pointer
    top: 0
    bottom: 0
    z-index: 1000
  
  &-exit
    animation: hideMenu 0.5s cubic-bezier(0.52, 0.16, 0.24, 1) forwards
  
  &-menu 
    position: relative
    padding: 10px 25px 10px 0
    padding-left: 15vw
    @media (min-width: 1150px)
      padding-left: 3vw

    height: 100%
    max-width: 1024px
    margin: 0 auto
    display: flex
    align-items: center
    justify-content: space-between
    a 
      color: inherit
      display: block
      font-size: 105%
    
  &-pop
    position: fixed
    width: 100vw
    background: rgba(0,0,0,0.05)
  
  &-open 
    animation: showMenu 0.5s cubic-bezier(0.52, 0.16, 0.24, 1) forwards
  
  &_item 
    text-transform: capitalize