#navMenustateCheckbox {
  display: none;
}

.gn-mb-header {
  --transition-cubic: cubic-bezier(0.4, 0.01, 0.165, 0.99);
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: rgba(#000, 0.8);
  overflow: hidden;
  transition: all 0.5s ease-out, background 1s ease-out;
  transition-delay: 0.2s;
  z-index: 1;
}

#navMenustateCheckbox:checked ~ .gn-mb-header {
  height: 100%;
  background-color: #000;
  transition: all 0.3s ease-in, background 0.5s ease-in;
  transition-delay: 0s, 0s;
  transition-delay: 0.25s;
}

.burger-wrapper {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.3s var(--transition-cubic);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.burger-wrapper::after {
  content: "";
  position: absolute;
  --offset: -12px;
  top: var(--offset);
  bottom: var(--offset);
  left: var(--offset);
  right: var(--offset);
}

#navMenustateCheckbox:checked ~ .gn-mb-header .burger-wrapper {
  transform: rotate(90deg);
}

.burger {
  width: 18px;
  height: 8px;
  position: relative;
  display: block;
  margin: -4px auto 0;
  top: 50%;
}

.burger-bar {
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  background: #fff;
  transition: all 0.3s var(--transition-cubic);
  transition-delay: 0s;
}

#navMenustateCheckbox:checked ~ .gn-mb-header .burger-bar {
  transition: all 0.4s var(--transition-cubic);
  transition-delay: 0.2s;
}

.burger-top-bar {
  transform: translateY(0px) rotate(0deg);
}

#navMenustateCheckbox:checked ~ .gn-mb-header .burger-top-bar {
  transform: translateY(4px) rotate(45deg);
}

.burger-bottom-bar {
  transform: translateY(6px) rotate(0deg);
}

#navMenustateCheckbox:checked ~ .gn-mb-header .burger-bottom-bar {
  transform: translateY(3px) rotate(-45deg);
}