// Burger at the top right of small displays .burger

cursor: pointer
display: block
padding-right: 3vw
z-index: 1000
& > div
  background-color: $burger-color
  height: 2px
  margin: 7px
  width: 25px

.burger-line-1

transition: width .6s ease-in-out, background-color .3s ease-in-out

.burger-line-2

transition: width .3s ease-in-out, background-color .3s ease-in-out

.burger-line-3

transition: background-color .3s ease-in-out

.burger-active

& > div
  background-color: $env-secondary
.burger-line-1
  width: 8px
  // reduce by 17 px

.burger-line-2
  width: 17px
  // reduce by 8 px

// For links as the slider opens // the timings are set in mobile-nav-slider.js @keyframes navLinksFade

from
  opacity: 0
  transform: translateY(20px)

to
  opacity: 1
  transform: translateY(0)