body {
}
html {
  background: #CCC;
}

/*html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}*/

#hamburger {
  display: none;
}

.menu {
  display: block;
  background-color: #AAA;
  width: 0px;
  height: 100%;
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.menuicon {
  position: absolute;
  top: 20px;
  left: 19px;
  display: block;
  cursor: pointer;
  height: 21px;
  width: 30px;
}


.menuicon span {
  display: block;
  top: 14px;
  left:10px;
  width: 30px;
  height: 5px;
  margin:-8px;
  background-color: white;
  position: absolute;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0;
}

.menuicon span:hover {
  display: block;
  /*top: -11px;*/
  top: 14px;
  left:10px;
  width: 30px;
  height: 5px;
  background-color:#e60047;
  position: absolute;
  /*-webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  -o-transition-duration: 0;
  transition-duration: 0;*/
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0;
}

.menuicon span::after, .menuicon span::before {
  display: block;
  content: '';
  position: absolute;
  width: 30px;
  height: 5px;
   background-color: white;
  /*-webkit-transition-property: margin, -webkit-transform;*/
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0;
}

.menuicon span:hover:after, .menuicon span:hover:before {
  display: block;
  content: '';
  position: absolute;
  width: 30px;
  height: 5px;
  background-color: #e60047;
  /*-webkit-transition-property: margin, -webkit-transform;*/
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
    /*-webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  -o-transition-duration: 0;
  transition-duration: 0;*/
  -webkit-transition-delay: 0, 0;
  -moz-transition-delay: 0, 0;
  -o-transition-delay: 0, 0;
  transition-delay: 0, 0;
}

.menuicon span::before {
  margin-top: -8px;
}
.menuicon span::after {
  margin-top: 8px;
}

/*#hamburger:checked ~ .menu {
  width: 250px;
}*/

#hamburger:checked ~ .menuicon span {
  background-color: transparent;
}
#hamburger:checked ~ .menuicon span::before, #hamburger:checked ~ .menuicon span::after {
  margin-top: 0px;
  -webkit-transition-delay: 0, 0s;
  -moz-transition-delay: 0, 0s;
  -o-transition-delay: 0, 0s;
  transition-delay: 0, 0s;
}


#hamburger:checked ~ .menuicon span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#hamburger:checked ~ .menuicon span::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}