@media only screen and (min-width:1024px){
    .menu{
        display: none !important;
    }
}
.menu {
  display: flex;
  flex-direction: column;
  width: 40px;
  height: 25px;
  cursor: pointer;
  outline: none !important;
}
.menu::before,
.menu::after {
  content: '';
  position: relative;
  top: 0;
  width: 50%;
  transform: rotate(0);
}
.menu::before,
.menu::after,
.menu span {
  display: block;
  height: 5px;
  background-color: #397338;
  border-radius: 12px;
}
.menu span {
  width: 100%;
  margin: 5px 0;
  opacity: 1;
}
.menu::after {
  align-self: flex-end;
}

/* Open animation */
.menu.open::before {
  top: 10px;
  transform: rotate(45deg);
}
.menu.open::after {
  top: -10px;
  transform: rotate(-45deg);
}
.menu.open::before,
.menu.open::after {
  width: 100%;
  transition: width 0.4s ease-out,
              top 0.4s ease-in 0.4s,
              transform 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.9s;
}
.menu.open span {
  opacity: 0;
  transition: opacity 0.1s linear 0.9s;
}

/* Close animation */
.menu.close::before,
.menu.close::after {
  transition: transform 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95),
              top 0.4s ease-out 0.4s,
              width 0.4s cubic-bezier(0, 0.3, 0.81, 1.24) 0.9s;
}
.menu.close span {
  transition: opacity 0.1s linear 0.4s;
}