.hamburger {
  display: inline-flex;
  align-items: center;
  margin: 10px 18px;
}
@media screen and (min-width: 577px) {
  .hamburger.hide-md-query {
    display: none;
  }
}
.hamburger .toggler {
  width: 30px;
  height: 30px;
  opacity: 0;
  z-index: 101;
  cursor: pointer;
  position: relative;
}
.hamburger .toggler:checked + .bars {
  transform: rotate(45deg);
}
.hamburger .toggler:checked + .bars > .ham-icon {
  background-color: transparent;
}
.hamburger .toggler:checked + .bars > .ham-icon::after {
  transform: rotate(180deg);
}
.hamburger .toggler:checked + .bars > .ham-icon::before {
  transform: rotate(-90deg);
}
.hamburger .bars {
  position: absolute;
  cursor: pointer;
  margin: 10px 0;
  transition: 0.2s ease-in-out;
}
.hamburger .bars .ham-icon {
  width: 30px;
  height: 3px;
  background-color: var(--black);
  margin: 5px 0;
  border-radius: 50px;
}
.hamburger .bars .ham-icon::after, .hamburger .bars .ham-icon::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 3px;
  border-radius: 50px;
  background-color: var(--black);
  transition: 0.2s ease-in-out;
}
.hamburger .bars .ham-icon::after {
  transform: translateY(7px);
}
.hamburger .bars .ham-icon::before {
  transform: translateY(-7px);
}