.entire-menu {
  position: absolute;
  padding: 20px;
  width: 100%;
}

.hamburguer {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  background: none;
  margin: 0 0 10px 0;
}
.hamburguer:after, .hamburguer:before, .hamburguer span, .hamburguer label {
  content: ' ';
  display: block;
  width: 100%;
  height: 4px;
  background: #000;
  left: 0;
  position: absolute;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.hamburguer:before {
  top: 0;
}
.hamburguer:after {
  bottom: 0;
}
.hamburguer:focus {
  outline: none;
}
.hamburguer label {
  width: 100%;
  height: 100%;
  background: none;
  cursor: pointer;
  z-index: 1000;
}
.hamburguer span {
  top: 8px;
}

#change-hamburguer {
  display: none;
}
#change-hamburguer:checked ~ .hamburguer:before, #change-hamburguer:checked ~ .hamburguer:after {
  top: 10px;
  margin-top: -10%;
}
#change-hamburguer:checked ~ .hamburguer:before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#change-hamburguer:checked ~ .hamburguer:after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#change-hamburguer:checked ~ .hamburguer span {
  opacity: 0;
}
#change-hamburguer:checked ~ .menu {
  max-height: 400px;
}