.burger {
  width: 44px;
  height: 44px;
  position: relative;
  display: inline-block;
  font-size: 0;
}
.burger-circle {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background-color: #383c49;
}
.burger-bar {
  height: 2px;
  position: absolute;
  left: 12px;
  background-color: #fff;
}
.burger-bar.top {
  width: 10px;
  top: 15px;
}
.burger-bar.middle, .burger-bar.bottom {
  width: 20px;
}
.burger-bar.middle {
  top: 20px;
}
.burger-bar.bottom {
  top: 25px;
}

.burger.active .burger-bar.top {
  -webkit-animation: burger_top 700ms forwards;
  -moz-animation: burger_top 700ms forwards;
  animation: burger_top 700ms forwards;
}
.burger.active .burger-bar.middle {
  -webkit-animation: burger_middle 700ms forwards;
  -moz-animation: burger_middle 700ms forwards;
  animation: burger_middle 700ms forwards;
}
.burger.active .burger-bar.bottom {
  -webkit-animation: burger_bottom 700ms forwards;
  -moz-animation: burger_bottom 700ms forwards;
  animation: burger_bottom 700ms forwards;
}

.burger.active.reverse .burger-bar.top {
  -webkit-animation: burger_top_reverse 700ms forwards;
  -moz-animation: burger_top_reverse 700ms forwards;
  animation: burger_top_reverse 700ms forwards;
}
.burger.active.reverse .burger-bar.middle {
  -webkit-animation: burger_middle_reverse 700ms forwards;
  -moz-animation: burger_middle_reverse 700ms forwards;
  animation: burger_middle_reverse 700ms forwards;
}
.burger.active.reverse .burger-bar.bottom {
  -webkit-animation: burger_bottom_reverse 700ms forwards;
  -moz-animation: burger_bottom_reverse 700ms forwards;
  animation: burger_bottom_reverse 700ms forwards;
}

@-webkit-keyframes burger_top {
  0% {
    width: 10px;
    top: 15px;
    -webkit-transform: rotate(0);
  }
  25% {
    width: 20px;
    top: 15px;
    -webkit-transform: rotate(0);
  }
  50%, 90% {
    width: 20px;
    top: 20px;
    -webkit-transform: rotate(0);
  }
  100% {
    width: 20px;
    top: 20px;
    -webkit-transform: rotate(45deg);
  }
}
@-moz-keyframes burger_top {
  0% {
    width: 10px;
    top: 15px;
    -moz-transform: rotate(0);
  }
  25% {
    width: 20px;
    top: 15px;
    -moz-transform: rotate(0);
  }
  50%, 90% {
    width: 20px;
    top: 20px;
    -moz-transform: rotate(0);
  }
  100% {
    width: 20px;
    top: 20px;
    -moz-transform: rotate(45deg);
  }
}
@keyframes burger_top {
  0% {
    width: 10px;
    top: 15px;
    transform: rotate(0);
  }
  25% {
    width: 20px;
    top: 15px;
    transform: rotate(0);
  }
  50%, 90% {
    width: 20px;
    top: 20px;
    transform: rotate(0);
  }
  100% {
    width: 20px;
    top: 20px;
    transform: rotate(45deg);
  }
}
@-webkit-keyframes burger_top_reverse {
  100% {
    width: 10px;
    top: 15px;
    transform: rotate(0);
  }
  50%, 90% {
    width: 20px;
    top: 15px;
    transform: rotate(0);
  }
  25% {
    width: 20px;
    top: 20px;
    transform: rotate(0);
  }
  0% {
    width: 20px;
    top: 20px;
    transform: rotate(45deg);
  }
}
@-moz-keyframes burger_top_reverse {
  100% {
    width: 10px;
    top: 15px;
    transform: rotate(0);
  }
  50%, 90% {
    width: 20px;
    top: 15px;
    transform: rotate(0);
  }
  25% {
    width: 20px;
    top: 20px;
    transform: rotate(0);
  }
  0% {
    width: 20px;
    top: 20px;
    transform: rotate(45deg);
  }
}
@keyframes burger_top_reverse {
  100% {
    width: 10px;
    top: 15px;
    transform: rotate(0);
  }
  50%, 90% {
    width: 20px;
    top: 15px;
    transform: rotate(0);
  }
  25% {
    width: 20px;
    top: 20px;
    transform: rotate(0);
  }
  0% {
    width: 20px;
    top: 20px;
    transform: rotate(45deg);
  }
}
@keyframes burger_middle {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes burger_middle_reverse {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes burger_middle_reverse {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes burger_middle_reverse {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes burger_bottom {
  0%, 25% {
    top: 25px;
    transform: rotate(0);
  }
  50%, 90% {
    top: 20px;
    transform: rotate(0);
  }
  100% {
    top: 20px;
    transform: rotate(-45deg);
  }
}
@-moz-keyframes burger_bottom {
  0%, 25% {
    top: 25px;
    transform: rotate(0);
  }
  50%, 90% {
    top: 20px;
    transform: rotate(0);
  }
  100% {
    top: 20px;
    transform: rotate(-45deg);
  }
}
@keyframes burger_bottom {
  0%, 25% {
    top: 25px;
    transform: rotate(0);
  }
  50%, 90% {
    top: 20px;
    transform: rotate(0);
  }
  100% {
    top: 20px;
    transform: rotate(-45deg);
  }
}
@-webkit-keyframes burger_bottom_reverse {
  100% {
    top: 25px;
    transform: rotate(0);
  }
  50%, 90% {
    top: 25px;
    transform: rotate(0);
  }
  25% {
    top: 20px;
    transform: rotate(0);
  }
  0% {
    top: 20px;
    transform: rotate(-45deg);
  }
}
@-moz-keyframes burger_bottom_reverse {
  100% {
    top: 25px;
    transform: rotate(0);
  }
  50%, 90% {
    top: 25px;
    transform: rotate(0);
  }
  25% {
    top: 20px;
    transform: rotate(0);
  }
  0% {
    top: 20px;
    transform: rotate(-45deg);
  }
}
@keyframes burger_bottom_reverse {
  100% {
    top: 25px;
    transform: rotate(0);
  }
  50%, 90% {
    top: 25px;
    transform: rotate(0);
  }
  25% {
    top: 20px;
    transform: rotate(0);
  }
  0% {
    top: 20px;
    transform: rotate(-45deg);
  }
}