.burger-menu {
  padding: 2.75rem 2rem 1rem 0px;
  display: none;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  z-index: 9999;
  transition: padding 0.3s ease;
  position: relative;
}

.burger-menu.active .burger-bar,
.burger-menu.active .burger-bar::before,
.burger-menu.active .burger-bar::after {
  background-color: white;
}

.burger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.burger-bar {
  display: block;
  top: 50%;
  margin-top: -2px; 
  transition: background-color 0.2s ease;
  box-shadow: 0 0 1em rgba(0,0,0,0.2);
}
.burger-bar, .burger-bar::before, .burger-bar::after {
  width: 60px;
  height: 7px;
  background-color: white;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  border-radius: 15%/50%;
}
.burger-bar::before, .burger-bar::after {
  content: "";
  display: block;
}
.burger-bar::before {
  top: -12.5px;
}
/*.burger-bar::after {
  bottom: -10px;
}


 /*collapse*/
.burger-collapse .burger-bar {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.burger-collapse .burger-bar::after {
  top: -25px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.burger-collapse .burger-bar::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.burger-collapse.active .burger-bar {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
.burger-collapse.active .burger-bar::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; 
}
.burger-collapse.active .burger-bar::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}


@media (max-width: 707px) {
  .burger-menu {
    display: inline-block;
  }
}