#check{
display:none;
}

.menulabel {
position: fixed;
z-index: 52;
width: 100px;
height: 100px;
top: 0;
left: 0;
cursor:pointer;
}

#burger {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 80%;
height: 80%;
margin: 10%;
transition: all 100ms cubic-bezier(.61, .01, .42, 1);
cursor: pointer;
border: 0px;
}
   


            /* burger animation*/
        
        span.burger {
        z-index: 53;
        position: relative;
        height: 0px;
        margin-top:22px;
        border: 1.5px solid #1F2226;
        border-radius: 150px;
        width: 40px;
        display: block;
        position: absolute;
        transition: all 100ms cubic-bezier(.61, .01, .42, 1);
        background:#1F2226;
        border-radius: 30px;
        }

      
        #burger:hover {
        transition: .2s;
        transform: scale(1.1);
        }
        
        #burger:hover > span.burger:nth-child(3):before {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #8387ff;
        }
        
        #burger:hover span.burger {
        border: 2px solid #1F2226;
        height: 20px;
        border-radius: 50%;
        margin-top: 33%;
        animation: atom 300ms linear 1;
        width: 60px;
        top: 0px;
        background:transparent;
        }
    
        #burger:focus {
        outline: 0px;
        }
        
        span.burger:nth-child(1) {
        top: 0px;
        }
        
        span.burger:nth-child(2) {
        top: 20%;
        }
        
        span.burger:nth-child(3) {
        top: 40%;
        }
        
        span.burger:nth-child(3):before {
        opacity: 0;
        animation: ball 4s linear infinite;
        content: '';
        border: 2px solid rgb(255, 255, 255);
        display: block;
        position: relative;
        top: 0.25px;
        }
        
        #burger:hover span.burger:nth-child(1) {
        transform: rotate(-33deg);
        }
        
        #burger:hover span.burger:nth-child(2) {
        transform: rotate(90deg);
        }
        
        #burger:hover span.burger:nth-child(3) {
        transform: rotate(33deg);
        }
        
    
        #burger:hover span.burger:nth-child(3):before{
        opacity: 1;
        }
    
        #check:checked ~ .menulabel span.burger:nth-child(3):before{
        opacity: 0;
        width: 0vw;
        height: 0vw;
        }
        
        #check:checked ~ .menulabel span.burger {
        top: 0px;
        height: 0px;
        margin-top: 38px;
        border-radius: 0%;
        border: 1.5px solid #1F2226;
        width: 60%;
        animation: division 300ms linear 1;
        background:#1F2226;
        border-radius: 30px;
        }
        
        #check:checked ~ .menulabel span.burger:nth-child(2) {
        width: 0px;
        }
        
        #check:checked ~ .menulabel span.burger:nth-child(3) {
        transform: rotate(45deg);
        }
        
        #check:checked ~ .menulabel span.burger:nth-child(1) {
        transform: rotate(-45deg);
        }
        
        @keyframes atom {
          0% {
            transform: rotate(180deg);
          }
        }
        
        @keyframes division {
          0% {
            transform: rotate(180deg);
          }
        }
        
        @keyframes ball {
          0% {
            left: -20%;
            top: 10%;
          }
          10% {
            left: 10%;
            top: -35%;
          }
          25% {
            left: 45%;
            top: -50%;
          }
          40% {
            left: 80%;
            top: -20%;
          }
          
          45% {
            left: 95%;
            top: 0%;
          }
    
          50% {
            left: 98%;
            top: 18%;
          }
    
          55% {
            left: 90%;
            top: 35%;
          }
    
          75% {
            left: 45%;
            top: 80%;
          }
          90% {
            left: 0%;
            top: 60%;
          }
          100% {
            left: -20%;
            top: 10%;
          }
        }



@media only screen and (max-width: 1200px) {


  .menulabel::before{
  content: '';
  position: fixed;
  display: block;
  width: 100px;
  aspect-ratio: 1/1;
  top: 0;
  left: 100px;
  transition: all 100ms cubic-bezier(.61, .01, .42, 1);
  z-index: 100;
  background-image: url(../images/icon/logo.png);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  }
  
  #check:checked ~ .menulabel::before{
  display: none;
  }    
}