#lcheck{
 display:flex;
  flex-direction:column;
  width:30px;
  cursor:pointer;
}

#lcheck span{
  background: #264695;
  border-radius:4px;
  height:4px;
  margin: 3px 0;
  transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);

}


.scheck:nth-of-type(1){
  width:100%;
  
}

.scheck:nth-of-type(2){
  width:100%;
}


.scheck:nth-of-type(3){
  width:100%;
 
}


input[type="checkbox"]{
  display:none;
}


input[type="checkbox"]:checked ~ .scheck:nth-of-type(1){
  transform-origin:bottom;
  transform:rotatez(45deg) translate(8px,5px)
}


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


input[type="checkbox"]:checked ~ .scheck:nth-of-type(3){
  
  transform-origin:bottom;
  width:50%;
  transform: translate(12px,-8px) rotatez(45deg);

}