//css
.hamburger-menu {
    border-radius: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    align-self: center;
    z-index: 999;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    position: absolute;
    display: none;
  }

  .hamburger-menu:focus,
  .hamburger-menu-content:focus {
      outline: none;
  }

  .hamburger-menu:focus .hamburger-menu-content {
      outline: 5px solid rgba(17, 17, 17, 0);
  }

  .hamburger-menu-content {
      display: block;
      height: 24px;
  }

  .bar,
  .bar:after,
  .bar:before {
    width: 30px;
    height: 2px;
    border-radius: 10px;
}

.bar {
    position: relative;
    top: 5px;
    transform: translateY(5px);
    background: #ffffff;
    transition: all 0ms 300ms;
    border-radius: 10px;
    display: block;
}

.bar.animate {
    background: rgba(17, 17, 17, 0); }

.bar:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  background: #ffffff;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }

.bar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  background: #ffffff;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }

.bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1; }

.bar.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); }

.hamburger-menu .bar.animate {
  background: transparent !important; }

.hamburger-menu .bar.animate:before, .hamburger-menu .bar.animate:after {
  background: #ffffff }