.navbar-toggler {
  padding: 0;
  cursor: pointer;
  margin: 0 10px 0 0;
  width: 30px;
  height: 35px;
  background-color: transparent;
  border: transparent
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
  background: 0 0
  }
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon::after,
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon::before {
  top: 0
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon::before {
  transform: rotate(135deg)
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon::after {
  transform: rotate(45deg)
}
.navbar-toggler .navbar-toggler-icon {
  background: var(--white-color);
  display: block;
  width: 30px;
  height: 2px;
  position: relative
}
.navbar-toggler .navbar-toggler-icon::after,
.navbar-toggler .navbar-toggler-icon::before {
  position: absolute;
  right: 0;
  left: 0;
  background: var(--white-color);
  width: 30px;
  height: 2px;
  content: ''
}
.navbar-toggler .navbar-toggler-icon::before {
  top: -8px
}
.navbar-toggler .navbar-toggler-icon::after {
  top: 8px
}

/* Don't show transitions if prefers-reduced-motion */
@media not (prefers-reduced-motion:reduce) {
  .navbar-toggler .navbar-toggler-icon {
    transition: background 10ms .25s
  }
  .navbar-toggler .navbar-toggler-icon::after,
  .navbar-toggler .navbar-toggler-icon::before {
    transition: top .25s 350ms,transform .25s 50ms,-webkit-transform .25s 50ms
  }
  .navbar-toggler[aria-expanded=true] .navbar-toggler-icon::after,
  .navbar-toggler[aria-expanded=true] .navbar-toggler-icon::before {
    transition: top .3s 50ms,transform .3s 350ms,-webkit-transform .3s 350ms
  }
}