.burger-icon{
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  will-change: transform;
  transform: translateZ(0);
  transition: transform 240ms ease-in-out;
}

.burger-icon line{
  will-change: transform, opacity;
  transform: translateZ(0);
  transform-origin: 12px 12px;
  transition:
    transform 240ms ease-in-out,
    opacity 160ms ease-in-out;
  transition-delay: 0ms;
}

.burger-btn.is-open .burger-icon{
  transform: rotate(180deg) translateZ(0);
}

.burger-btn.is-open .burger-icon .l1{
  transform: translateY(6px) rotate(45deg) translateZ(0);
}

.burger-btn.is-open .burger-icon .l2{
  opacity: 0;
}

.burger-btn.is-open .burger-icon .l3{
  transform: translateY(-3px) rotate(-45deg) translateZ(0);
}