.home-menu label{
 display:flex;
  flex-direction:column;
  width:36px;
  cursor:pointer;
}

.home-menu label span{
  background: #222;
  border-radius:10px;
  height:2px;
  margin: 5px 0;
  transition: .4s;
}

.home-menu span:nth-of-type(1){
  width:100%; 
}

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

.home-menu span:nth-of-type(3){
  width:100%;
}

.home-menu input[type="checkbox"]{
  display:none;
}

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

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

.home-menu input[type="checkbox"]:checked ~ span:nth-of-type(3){  
  transform-origin:bottom;
  width:0%;
	opacity:0;
  transform: translate(28px,0px) rotatez(0deg);
}

.home-menu .menu-container{
    transform: translateX(100%);
	height:100svh;
	height:100vh;
}

.home-menu .menu-container.active{
    transform: translateX(0);
}