.hamburger {
  cursor: pointer;
  padding: 5px 5px 13px 5px;
  margin: 10px 4px 0px 0px;
  border-radius: 5px;
  width: auto;
  height: auto;
  transition: all 0.25s;
  position: relative;
  border: 1px solid rgba(61, 29, 66, 0.3);
  outline: none;
  transition: 0.3s ease, transform 0.3s ease;
}

.hamburger:active {
  background:rgba(250, 40, 145, 1);
}

.hamburger:hover {
  background-color: #f5f4f2;
}

.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
  positon: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background: #3D1D42;
  transform: rotate(0);
  transition: all 0s;
  outline: none;
}

.hamburger-middle {
  transform: translateY(4px);
}

.hamburger-bottom {
  transform: translateY(8px);
}

.open {
  transform: rotate(90deg);
  transform: translateY(0px);
}

.open .hamburger-top {
  margin-bottom: 2px;
  transform: rotate(45deg) translateY(4px) translate(5px);
}

.open .hamburger-middle {
  display: none;
}

.open .hamburger-bottom {
  margin-bottom: 0px;
  transform: rotate(-45deg) translateY(2px) translate(-1.5px);
}