.hamburger,
.hamburger:after,
.hamburger:before {
  background: currentColor;
}

.open .hamburger,
.open.hamburger {
  background-color: transparent;
}

.hamburger {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.8rem;
  height: 2.5px;
  margin-top: -1px;
  margin-left: -0.9rem;
  border-radius: 2px;
  transition: background-color .3s
}

@media screen and (max-width: 767px) {
  .hamburger {
    height: 2px;
  }
}

.hamburger:after,
.hamburger:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  height: 100%;
  width: 100%;
  transform-origin: 50% 50%;
  transition: top .3s ease .2s,transform .3s ease,background-color .3s ease,width .3s ease .2s;
}

.hamburger:before {
  top: -.7rem
}

.hamburger:after {
  top: .7rem
}

.open .hamburger:after,
.open .hamburger:before,
.open.hamburger:after,
.open.hamburger:before {
  top: 0;
  transition: top .3s ease,transform .3s ease .2s,width .3s ease
}

.open .hamburger:before,
.open.hamburger:before {
  transform: rotate3d(0,0,1,45deg)
}

.open .hamburger:after,
.open.hamburger:after {
  transform: rotate3d(0,0,1,-45deg)
}