@media (max-width:1280px) {
html, body {
  overflow-x: hidden;
   margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.style-img img, video {
   width: 100%;
   
      /* l'immagine si adatta senza essere stirata */
   
}

#personal { right: 10%; }
#contact {left: 10%; }

.descrizione {
     top: 140px;
}


   /* Container verticale per immagini */
   .scrolling-images {
    width: 90vw !important;
    height: auto !important;
    position: relative !important;
   top: 180px;
   align-items: center !important;
    justify-content: center !important;
    gap: 2vh !important;
    left: 0;
    right: 0;
    margin-left: auto ;
    margin-right: auto ;
    padding-bottom: 200px;
}

  .scrolling-images img,
.scrolling-images video {
    width: 90vw !important;
    height: auto !important;
    position: static !important;
    display: block !important;
     margin:  0 auto;
}
#img0, #img00 {
    width: 100vw!important;
    height: 60vh !important;
    margin-bottom: 10vh;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
   
}

#img00 {
   left: 0%;
    transform: translate(0%, 0%); 
}
#img7, #img14 {
    width: 100VW!important;
    height: auto !important;
    left: unset;
    right: unset;
  margin-left: unset;
   margin-right: unset;
   position: relative;
  transform: translate(0%, 0%); 
}
.empty2 {
  height: 40vh; /* o quanto spazio vuoi */
  width: 100%;
  display: block;
   flex-shrink: 0;
}
/*WORK*/

   .style-img-asa {
        width:10%;
        height:10%;
    }
     .style-img-par {
        width:10%;
        height:10%;
    }
     .style-img-rev {
        width:10%;
        height:10%;
    }
     .style-img-prez {
        width:10%;
        height:10%;
    }
     .style-img-trama {
        width:10%;
        height:10%;
    }
     .style-img-typ {
        width:10%;
        height:10%;
    }


.img-asa.active,
.img-par.active,
.img-rev.active,
.img-typ.active,
.img-prez.active,
.img-trama.active {
    opacity: 1 !important;
    z-index: 5;
      pointer-events: auto;
      
}

    .box-projects > .style-projects {
    color: #aaa;
    opacity: 0.5;
    transition: color 0.2s;
  }
  .box-projects > .style-projects.active {
    color: #111;
    opacity: 1;
  }
.box-text {
    gap: 0%;
}
.fixed-text {
    margin-left: 3%;
    margin-right: 3%;
   margin-top: 2%;
 
}


#button-work { top: 40vh; left: 80%; }
#button-acad { top: 50vh; left: 80%; }
#button-edu { top: 60vh; left: 80%; }
#button-exh { top: 70vh; left: 80%; }

.mini-nav {

   padding-bottom: 30%;
  
}
nav {
    width: 100%; /* oppure width: auto; */
max-width: 20%;
     gap: 18%;
        text-align: center;
   align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
}
#nav-decrypta {
      width: 100%; /* oppure width: auto; */
max-width: 25%;
}

}
