@layer components {
/* MENU ICON ANIMATION */

.header-menu-ico label{
 display:flex;
  flex-direction:column;
  width:40px;
  cursor:pointer;
}

.header-menu-ico label span{
  background: #fff;
  border-radius:10px;
  height:4px;
  margin: 3px 0;
  transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
}


.header-menu-ico span:nth-of-type(1){
  width:50%;
}

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

.header-menu-ico span:nth-of-type(3){
  width:75%;
}


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


.header-menu-ico input[type="checkbox"]:checked ~ span:nth-of-type(1){
  transform-origin:bottom;
  width:100%;
}


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


.header-menu-ico input[type="checkbox"]:checked ~ span:nth-of-type(3){
  transform-origin:bottom;
  width:100%;
}
}