.logoBox{
    z-index: 3;
}

.mainbody{
    min-height: 100%;
}

.imgHolder{
    background-size: cover;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.4s ease-in-out;
    position: absolute;
}
#imgBox li{
    position: relative;
   z-index: 1; 
}
#img0{
    background-image: url(works-files/residenze/hover-bg-residenze.webp);
}
#img1{
    background-image: url(works-files/spazi-per-il-lavoro/hover-bg-spazi-per-il-lavoro.webp);
}
#img2{
    background-image: url(works-files/spazi-ricettivi/hover-bg-spazi-ricettivi.webp);
}
#img3{
    background-image: url(works-files/esterni/hover-bg-esterni.webp);
}
#img4{
    background-image: url(works-files/progetti/hover-bg-progetti.webp);
}
#imgBox{
    transition: opacity 0.4s ease-in-out;

    
}

.grid-box{
    display: none;
    margin: clamp(15px, 2.5vw, 100px) 0 clamp(15px, 2.5vw, 100px) 0;
    padding: 0 clamp(30px, 2vw, 45px) 0 clamp(30px, 2vw, 45px);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-box div{
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: scale 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    align-items: end;
    aspect-ratio: 1 / 1;
    border: 1px solid #ffff;

}
.subtitle{
    font-size: 14px;
    position: relative;
    top: 30%;
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 15%;
    background-color: #00000060;
    transition: top 0.4s ease-in-out;
    z-index: 0;
}
.subtitle b{
    font-size: clamp(10px, 2vw, 16px)
}
.subtitle p{
    padding-bottom: 10px;
}

.grid-box div:hover{
    scale: 1.05;
    box-shadow: 0 0 5px #0000006e;
    .subtitle{
        top: 0;
        
    }

}
#imgBox{
    background-size: cover;
    background-position: center;
    background-image: url(works-files/copertina-lavori.webp);
}



#pageP{
    text-align: justify;
    margin: 30px 14% 30px 14%;
    text-shadow: 1px 1px var(--colore1);
}



#bgImg{
    background-position: center;
    background-size: cover;
    background-image: url(works-files/CopertivaLavori.webp);
}

.aHover{
    color: var(--colore2);
    left: 10px;
}
.aLeave{
    color: #ffff;
    left: 0;
}

#residenze1{
    background-image: url(works-files/residenze/residenza-cubo-bianco/0.webp);
}
#residenze2{
    background-image: url(works-files/residenze/residenza-il-giardino-sospeso/0.webp);
}
#residenze3{
    background-image: url(works-files/residenze/residenza-la-conchiglia-sul-mare/0.webp);
}
#residenze4{
    background-image: url(works-files/residenze/residenza-movimenti-urbani/0.webp);
}

#spazilavoro1{
    background-image: url(works-files/spazi-per-il-lavoro/centro-congressi-chia-laguna-resort/0.webp);
}
#spazilavoro2{
    background-image: url(works-files/spazi-per-il-lavoro/centro-congressi-multinazionale-farmaceutica/0.webp);
}
#spazilavoro3{
    background-image: url(works-files/spazi-per-il-lavoro/building-a/0.webp);
}
#spazilavoro4{
    background-image: url(works-files/spazi-per-il-lavoro/building-b/0.webp);
}
#spazilavoro5{
    background-image: url(works-files/spazi-per-il-lavoro/building-w/0.webp);
}
#spazilavoro6{
    background-image: url(works-files/spazi-per-il-lavoro/building-mab/0.webp);
}

#spaziricettivi1{
    background-image: url(works-files/spazi-ricettivi/camere-chia-laguna-resort/0.webp);
}
#spaziricettivi2{
    background-image: url(works-files/spazi-ricettivi/hall-multinazionale-farmaceutica-3/0.webp);
}

#spaziricettivi3{
    background-image: url(works-files/spazi-ricettivi/hall-chia-laguna-resort/0.webp);
}

#spaziricettivi4{
    background-image: url(works-files/spazi-ricettivi/lounge-bar-chia-laguna/0.webp);
}

#spaziricettivi5{
    background-image: url(works-files/spazi-ricettivi/lounge-bar-multinazionale-farmaceutica-1/0.webp);
}

#spaziricettivi6{
    background-image: url(works-files/spazi-ricettivi/lounge-bar-club-med-napitia/0.webp);
}

#spaziricettivi7{
    background-image: url(works-files/spazi-ricettivi/palestre-chia-laguna/0.webp);
}

#spaziricettivi8{
    background-image: url(works-files/spazi-ricettivi/palestre-club-med-napitia/0.webp);
}

#spaziricettivi9{
    background-image: url(works-files/spazi-ricettivi/ristorante-club-med-napitia/0.webp);
}

#spaziricettivi10{
    background-image: url(works-files/spazi-ricettivi/ristorante-aziendale-multinazionale-farmaceutica-1/0.webp);
}

#spaziricettivi11{
    background-image: url(works-files/spazi-ricettivi/ristorante-le-dune/0.webp);
}

#spaziricettivi12{
    background-image: url(works-files/spazi-ricettivi/ristorante-piscina-chia-laguna-resort/0.webp);
}

#spaziricettivi13{
    background-image: url(works-files/spazi-ricettivi/spa-chia-laguna-resort/0.webp);
}

#spaziricettivi14{
    background-image: url(works-files/spazi-ricettivi/spa-club-med-napitia/0.webp);
}

#esterni1{
    background-image: url(works-files/esterni/palazzo-latina/0.webp);
}
#esterni2{
    background-image: url(works-files/esterni/edifici-industriali/0.webp);
}
#esterni3{
    background-image: url(works-files/esterni/arredo-urbano/0.webp);
}
#esterni4{
    background-image: url(works-files/esterni/residence-chia/0.webp);
}
#progettirealizzazione1{
    background-image: url(works-files/progetti/multinazionale-farmaceutica-2-edifici-aziendali/0.webp);
}
#progettirealizzazione2{
    background-image: url(works-files/progetti/multinazionale-farmaceutica-2-mensa-aziendale/0.webp);
}
#progettirealizzazione3{
    background-image: url(works-files/progetti/multinazionale-farmaceutica-2-restyling-facciate/0.webp);
}
#progettirealizzazione4{
    background-image: url(works-files/progetti/multinazionale-farmaceutica-2-uffici/0.webp);
}
#progettirealizzazione5{
    background-image: url(works-files/progetti/multinazionale-farmaceutica-1-sale-riunioni/0.webp);
}
#progettirealizzazione6{
    background-image: url(works-files/progetti/multinazionale-farmaceutica-1-bar-aziendale/0.webp);
}
#progettirealizzazione7{
    background-image: url(works-files/progetti/garden-resort-calabria-retyling-esterni-interni/0.webp);
}
#progettirealizzazione8{
    background-image: url(works-files/progetti/retail-cisterna-latina/0.webp);
}