.special-button {
  width: 50px;
  height: 50px;
  margin-right: -0.5rem;
  position: relative;
  z-index: 9999999;
  cursor: pointer;
  transition: background 0.3s ease, stroke 0.3s ease;
}
@media screen and (min-width: 1001px) {
  .special-button {
    display: none;
  }
}
.special-button:hover .active-burger {
  stroke: #03dac6;
  background: #03dac6;
}
.special-button:hover .st0, .special-button:hover .bottom, .special-button:hover .top {
  background-color: #03dac6;
  stroke: #03dac6;
}

.st0 {
  fill: none;
  stroke: black;
  stroke-width: 12;
  stroke-miterlimit: 10;
  stroke-dasharray: 500;
  stroke-dashoffset: 2430;
  transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}
.st0.active-burger {
  transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease, stroke 0.3s ease;
  stroke: #fff;
  stroke-dasharray: 500;
  stroke-dashoffset: 1880;
}

.top,
.bottom {
  pointer-events: none;
  width: 27px;
  background-color: black;
  height: 4px;
  border-radius: 2px;
  position: absolute;
  left: 12px;
  transition: transform 0.6s ease, top 0.6s ease, left 0.6s ease;
}
.top.active-burger,
.bottom.active-burger {
  left: 11px;
}

.top {
  top: 15px;
  transition: 0.3s ease;
}
.top.active-burger {
  transition: 0.3s ease;
  background-color: #fff;
  transform: rotate(45deg);
  top: 23px;
}

.bottom {
  top: 33px;
  transition: 0.3s ease;
}
.bottom.active-burger {
  transition: 0.3s ease;
  background-color: #fff;
  transform: rotate(-45deg);
  top: 23px;
}

/*# sourceMappingURL=burger.css.map */