label.hamburger{
 display:flex;
  flex-direction:column;
  width:35px;   /*70*/
  cursor:pointer;
}

label.hamburger span{
  background: #000;
  border-radius:5px;
  height:3px;   /*7*/
  margin: 3px 0;
  transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);

}


label.hamburger span:nth-of-type(1){
  width:50%;
  
}

label.hamburger span:nth-of-type(2){
  width:100%;
}


label.hamburger span:nth-of-type(3){
  width:75%;
 
}


input[id="hamburger"]{
  display:none;
}


input[id="hamburger"]:checked ~ span:nth-of-type(1){
  transform-origin:bottom;
  transform:rotatez(45deg) translate(3px,0px)
}


input[id="hamburger"]:checked ~ span:nth-of-type(2){
  
  transform-origin:top;
  transform:rotatez(-45deg)
}


input[id="hamburger"]:checked ~ span:nth-of-type(3){
  
  transform-origin:bottom;
  width:50%;
  transform: translate(15px,-4px) rotatez(45deg);

}