.hamburger {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 9;
  width: 50px;
  height: 50px;
}
.hamburger b i {
  display: block;
  background: #fff;
  width: 40px;
  height: 4px;
  position: absolute;
  left: 8px;
  top: 11px;
  border-radius: 1000px;
  transform-origin: 20px 4px;
  transition: transform 300ms cubic-bezier(0.09, 0.92, 0, 1.435), opacity 500ms ease;
}
.hamburger b i:nth-child(2) {
  top: 21px;
}
.hamburger b i:nth-child(3) {
  transform-origin: 26px 4px;
  top: 31px;
}

.hamburger.active strong {
  color: rgba(255, 255, 255, 0.25);
}
.hamburger.active b {
  transition-delay: 100ms;
}
.hamburger.active b i:nth-child(1) {
  transform: rotate(45deg) translate(6px, 11px);
}
.hamburger.active b i:nth-child(2) {
  opacity: 0;
}
.hamburger.active b i:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -11px);
}