.hamburguer {
  position: relative;
  float: right;
  display: block;
  background: #000;
  width: 30px;
  height: 2px;
  top: -30px;
  transition: 0.5s ease-in-out;
  z-index: 100;
}

.hamburguer:before,
.hamburguer:after {
  background: #000;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: 0.5s ease-in-out;
}

.hamburguer:before {
  top: -10px;
}

.hamburguer:after {
  bottom: -10px;
}

input {
  display: none;
}

input:checked ~ label .hamburguer {
  transform: rotate(45deg);
}

input:checked ~ label .hamburguer:before {
  transform: rotate(90deg);
  top: 0;
}

input:checked ~ label .hamburguer:after {
  transform: rotate(90deg);
  bottom: 0;
}