@import "shared/color"
@import "shared/mixin"
.mobile_menu
  position: relative
  top: 0
  z-index: 100
  display: none
  border-top: 2px solid rgba($main, .21)
  border-bottom: 2px solid rgba($main, .11)
  +box-shadow(inset 0 0 8px -5px black)
  text-align: center
  background: white

  .nav_menu
    a
      color: $main
      border: 2px solid $main
      +border-radius(5px)
      padding: 2px 10px

.menu_open
  display: block !important


.box_sandwich
  .sandwich
    position: absolute
    top: 20px
    right: 10px
    cursor: pointer

    +width_height(30px, 5px)
    +border-radius(2px)
    background: $main
    z-index: 101
    &:before, &:after
      position: absolute
      content: ''
      +width_height(30px, 5px )
      +border-radius(2px)
    &:before
      top: -8px
      left: 0
      background: $main
    &:after
      top: 8px
      left: 0
      background: $main
  .close_sandwich
    &:after, &:before
      background: $main
    background: white
    &:after
      top: 0
      +transform(rotate(-45deg))
    &:before
      +transform(rotate(45deg))
      top: 0