.hamburger {
  height: 28px;
  width: 40px;

  z-index: 1;
  position: relative;
  cursor: pointer;
}

.hamburger .hamburger-child__one,
.hamburger .hamburger-child__two,
.hamburger .hamburger-child__three {
  height: 4px;
  width: 100%;
  background-color: #00b894;
  position: absolute;
  z-index: -1;
  transition: .5s;
}

.hamburger .hamburger-child__one {
  top: 0;
}

.hamburger .hamburger-child__two {
  background-color: #0984e3;
  width: 70%;
  top: 12px;
  left: 0;
}

.hamburger .hamburger-child__three {
  top: 24px;

}

.hamburger.hamburger-active .hamburger-child__two {
  left: 12px;
}