.hamburger {
  font-size: 60px;

  display: block;
  position: absolute;

  width: 30px;
  height: 30px;
  padding: 0;
  top:25px;
  left:25px;

  transform: transform .2s ease-in-out;
  -o-transition: transform .2s ease-in-out;
  -ms-transition: transform .2s ease-in-out;
  -moz-transition: transform .2s ease-in-out;
  -webkit-transition: transform .2s ease-in-out;

  vertical-align: middle;
  z-index:999;
}

.hamburger::-moz-focus-inner {
  padding: 0;
  border: 0 none;
}

.hamburger:focus {
  outline: 0;
}
.hamburger:before,
.hamburger:after {
  content: "";
}

.hamburger:before,
.hamburger .icon,
.hamburger:after {
  display: block;

  width: 100%;
  height: 2px;
  margin: 0 0 8px;

  transition:.3s ease-in-out;
  -o-transition:.3s ease-in-out;
  -ms-transition:.3s ease-in-out;
  -moz-transition:.3s ease-in-out;
  -webkit-transition:.3s ease-in-out;

  background: #021d30;
}

.button-wrapper.yellow .hamburger:before,
.button-wrapper.yellow .hamburger .icon,
.button-wrapper.yellow .hamburger:after {
  background: #efa420;
}

.button-wrapper.active .hamburger:before,
.button-wrapper.active .hamburger .icon,
.button-wrapper.active .hamburger:after {
  background: #efa420;
}

.button-wrapper:hover .hamburger:before,
.button-wrapper:hover .hamburger .icon,
.button-wrapper:hover .hamburger:after {
  background: #efa420 !important;
}

.button-wrapper.yellow:hover .hamburger:before,
.button-wrapper.yellow:hover .hamburger .icon,
.button-wrapper.yellow:hover .hamburger:after {
  background: #053251 !important;
}

.button-wrapper.active .hamburger.hamburger-cancel .icon {
  transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
}

.button-wrapper.active .hamburger.hamburger-cancel:before {
  transform: translateY(.17em) rotate(135deg);
  -o-transform: translateY(.17em) rotate(135deg);
  -ms-transform: translateY(.17em) rotate(135deg);
  -moz-transform: translateY(.17em) rotate(135deg);
  -webkit-transform: translateY(.17em) rotate(135deg);
}

.button-wrapper.active .hamburger.hamburger-cancel:after {
  transform: translateY(-.17em) rotate(-135deg);
  -o-transform: translateY(-.17em) rotate(-135deg);
  -ms-transform: translateY(-.17em) rotate(-135deg);
  -moz-transform: translateY(-.17em) rotate(-135deg);
  -webkit-transform: translateY(-.17em) rotate(-135deg);
}