@media(max-width:640px){
  *{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html{
   display: flex;
   flex-direction: column;
    font-family: Merryweather, Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   
    
}
body{
    padding: 1em;
   }
  nav li{
    display:none;
    
  }
  .labo{
    display: none;
  }
  nav li:first-child, li:last-child{
    display: block;
    width:100%;
      text-align: center;
    
  }
  .flex-container-center{
    flex-direction: column;
    align-items: center;
   
  }
  .text-container-center{
    padding: 1em;
    text-align: center;
    background: url(/public/images/centropictures/logo\ centro\ \(1\).png) no-repeat center bottom;
      background-size: 35% 66%;
      height: 30vw;
  }
  .social-center{
   margin-top: 1%;
  }
  .mobile-laboratory{
    font-size: 2vw;
    display: flex;
    flex-direction: column;
    color: #2532e4;
    font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    z-index: 3;
    text-align: center;
    align-items: center;
 }
 .close-sidebar-laboratory a{
text-decoration: none;
color: white;
 }
.links-container-laboratory{
    display: none;
}
#sidebar-active-laboratory{
   display: none;
}
.mobile-laboratory svg{
    position: relative;
    width:20vw;
   cursor: pointer;
    z-index: 7;
    display: flex;
    
  
}
#sidebar-active-laboratory:checked ~ .links-container-laboratory{
     flex-direction: column;
     position: relative;
     display: flex;
     z-index: 10;
     width: 100%;
     align-items: center;
     margin-top: 10%;
}

.close-sidebar-laboratory{
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
    color: black;
    z-index: 15;
    gap:15px;
    cursor: pointer;
}
.mobile-box{
   display:flex;
   flex-direction: column;
   z-index: 2;
      position:relative;
      width: 100%;
      height: 50vw;
      border-radius: 10px;
      border-top: white 0.2em solid;
      border-bottom: white 0.2em solid;
      
}
.mobile-box:hover{
   scale:1.1;
   transition: 700ms ease;
   border-top:none;
   border-bottom:none;
   box-shadow: 0.5vw 0vw 3vw 3vw white inset;
   
}
.mobile-box h1{
   z-index: 1;
   color:white;
   text-shadow: 1px 1px 5px black;
    background: linear-gradient(to right, #80f28f, #5eefa6, #3bebbb, #13e5cd, #00dfdb, #1ddddf, #2edbe2, #3cd9e4, #4edce2, #5ddedf, #6be1de, #77e3dc);
    border-radius: 10px 10px 0 0;
    font-size: 4vw;
  
   
}
.mobile-box:hover h1:hover{
   background-image:none; 
}
#box01{
    background:url(/public/images/grid-img/artistico.png)no-repeat center;
   background-size:100% 100%; 
}
#box02{
    background:url(/public/images/grid-img/cucina.jpg)no-repeat center;
   background-size:140%; 
   background-color: #80f28f;
}
#box03{
    background:url(/public/images/grid-img/informatica.png);
   background-size:cover; 
}
#box04{
    background-image:url(/public/images/grid-img/cineforum.jpeg);
   background-size:cover; 
}
#box05{
   background-image:url(/public/images/grid-img/scrittura.jpg);
   background-size:100% 100%;
}
#box06{
   background-image:url(/public/images/grid-img/piscina.jpg);
   background-size:cover; 
}
#box07{
    background-image:url(/public/images/grid-img/ginnastica.png);
   background-size:cover; 
  
}
#box08{
    background:url(/public/images/grid-img/lettura.jpg) no-repeat center;
   background-size:100% 100%; 
}
#box09{
    background-image:url(/public/images/grid-img/musicapassiva.jpg);
   background-size:cover; 
  
}
#box10{
    background:url(/public/images/grid-img/musica.jpg) no-repeat;
   background-size:100% 100%; 
  
}
#box11{
    background-image:url(/public/images/grid-img/passeggiata.jpg);
   background-size:cover; 
  
}
.cta-button{
   margin-left: 0;
}
}