/* =================================================================
*                 style_portfolio.css               VALID CSS3 OK

*           COMPOSTO IN BASSO DEL CSS  PORTFOLIO DUE COLONNE 
* Template: AM WEB DESIGN TP
* Version: 3    -     color: 2BCDC1 - RGB: 43 205 193 
* Author:  Anastasi Michelangelo cell. 347 4830468
* Email:   m.anastasi@amwebdesign.tp.it
* Date:       11 AGOSTO 2026
=================================================================== */

.slider-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

.slide.active { opacity: 1; visibility: visible;}

/* Lato Sinistro (Foto Monitor a Filo) */
.slide-image-wrapper {
    width: 55%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #FFF;
}

.slide-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0px;
    transform: scale(1.05);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* Titolo Centrato */
.titolo-progetto-descrizione {box-shadow:2px 4px 2px 0px rgba(0,0,0,0.6);
    line-height: 45px;
    display: block !important;
    text-align: center !important;
    border-radius: 10px;
    border: 1px solid RGBA(0,0,0);
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background-color: #2BCDC1;
    margin-bottom: 12px !important;
    letter-spacing: 1px !important;
}

/* Attiva lo scroll compatto su PC - ALTEZZA FISSA BLOCCATA */
.project-details-scroll {
    height: 530px !important;
    margin-bottom: 15px !important;
    padding-right: 10px !important; 
    background-color: #111;
    padding: 4px 6px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
    overflow-y: auto !important;    /* Forza la comparsa dello scroll se il testo supera i 480px */
}

/* Stile della barra di scorrimento    IMPORTANT!!!     */
.project-details-scroll::-webkit-scrollbar { 
    width: 5px !important;
}
.project-details-scroll::-webkit-scrollbar-thumb {
    background: #ffdd57!important;
    border-radius: 4px !important;
}


/* Lato Destro (Pannello Informazioni) */
.slide-content-wrapper {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    position: relative;
    padding-top: 60px !important;
    padding-bottom: 120px !important;
}

/* dots indicatore slider */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 45%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.slider-dots .dot {
    width: 35px !important;
    height: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
}

.slider-dots .dot.active { background: #2BCDC1; width: 45px !important;border-radius: 8px !important;}

/* Scritta zoom  foto */
.zoom-notice {
    position: absolute;
    bottom: 15px;
    left: 20px; 
    font-size: 15px;
    color: #111; 
    font-weight: 500;
    opacity: 0.7;
    pointer-events: none; 
    font-style: italic;
    letter-spacing: 0.5px;
}

/* Scritta zoom foto quando l'utente passa il mouse sul monitor */
.slide-image-wrapper:hover .zoom-notice {opacity: 1; color: #2BCDC1; }

/*   LIGHTBOX PER ZOOMARE LA FOTO DEL MONITOR  */
.lightbox {
    display: none;
    position: fixed;
    z-index: 99999 !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lightbox.active {display: flex;opacity: 1;}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox.active .lightbox-content {transform: scale(1);}

.lightbox-close {
    position: absolute;
    top: 55px;
    right: 10%!important;
	background: #fff;
    color: #ff0000;
    font-size: 55px;
    font-weight: 300;
    cursor: pointer;
    line-height: 0.5;
    user-select: none;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 100000;
}

.lightbox-close:hover { color: #2BCDC1; transform: scale(1.1);}

.slide-image-wrapper img { cursor: zoom-in !important;}

@media (min-width: 993px) {
    .slide-content-wrapper {
        padding-left: 2% !important;
        padding-right: 6% !important;
    }
}

/* Colore di Sfondo pannelli descrittivi */
.slide .slide-content-wrapper { background: linear-gradient(90deg, #417571 0%, #2BCDC1 110%);}

.tag {
    padding: 2px 6px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.project-subtitle {
    padding: 2px 6px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px !important;
    color: #fff;
    line-height: 1.4;
}
.project-subtitle span {border: 1px solid RGBA(0,0,0);
    background-color: #fff;border-radius: 10px;
    font-size: 1.1rem;padding: 1px 6px !important;
    font-weight: 600; margin-top: 4px !important;
    margin-bottom: 15px !important;
    color: #000;
    line-height: 1.4;
}

.slide-content ul,
.slide-content li,
ul.project-pages-list,
.project-pages-list li {
    list-style: none !important;
    list-style-type: none !important;
    background-image: none !important;
    padding-left: 0 !important;
    margin-left: 10px !important;
}

.project-pages-list li {  color: #fff;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.project-pages-list li strong {color: #ffdd57;margin-right: 20px !important;}

.info-highlight {
    background-color: #00a896;line-height: 20px;
    color: #fff;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 15px !important;
}

.info-notes { font-size: 0.85rem;color: #fff;font-style: italic;text-align: center;}

/* Box di prezzi  */
.price-action-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
    padding-top: 15px !important;
    margin-top: auto !important;
}

.price-tag {display: flex;flex-direction: column;}

.price-label {color: #000;
    text-align: center;
    font-size: 1rem;
    text-transform: uppercase;
    opacity: 1;
    font-weight: 700;
}

.price-amount {
    text-align: center;
    padding: 4px 6px;
    border-radius: 10px;
    border: 1px solid RGBA(0,0,0);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    background-color: #2BCDC1;
}

.price-condition {font-size: 0.7rem;opacity: 1;color: #000;font-weight: 700;}
.slide-content .btn-portfolio {margin-top:22px;
    font-size: 1.1rem;
    border-radius: 10px;
    border: 1px solid RGBA(0,0,0);
    background-color: #fff !important;
    color: #111 !important;
    padding: 4px 24px;
    font-weight: 700 !important;
    text-decoration: none;
    transition: all 0.3s ease !important;
}

.slide-content .btn-portfolio:hover {
    background-color: #fff !important;
    color: #111 !important;
    transform: translateY(-2px) !important;
}

/* Frecce di Controllo Rettangolari */
.nav-btn {
    position: absolute;
    bottom: 50px;
    width: 55px;
    height: 45px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.3s ease;
}

.nav-btn:hover {background-color: #fff;color: #111;border-color: #ff1;}

.next-btn { right: 4% !important; bottom: 25px !important; }
.prev-btn { right: 160px !important; bottom: 25px !important; }

/* Animazioni di Cascata Testi */
.slide-content * { opacity: 0;transform: translateY(30px);transition: opacity 0.6s ease, transform 0.6s ease;}

.slide.active .slide-content * { opacity: 1;transform: translateY(0);}

.slide.active .tag { transition-delay: 0.1s; }
.slide.active .project-subtitle { transition-delay: 0.2s; }
.slide.active .project-details-scroll { transition-delay: 0.1s; }
.slide.active .price-action-box { transition-delay: 0.4s; }


/* QUERY  LAPTOP 1440px and height 800px*/
@media (max-width: 1440px) or (max-height: 800px) {
    .slide-content-wrapper { padding-top: 15px !important; padding-bottom: 75px !important; }
    .titolo-progetto-descrizione { font-size: 1.3rem !important; }
    .project-subtitle { font-size: 0.95rem !important; margin-bottom: 10px !important; }  
    .project-details-scroll { 
        height: 400px !important;       
        min-height: 400px !important;
        max-height: 400px !important;
        overflow-y: auto !important;    
        padding-right: 15px !important; 
        margin-bottom: 15px !important; 
        display: block !important; 
    }
}


/* QUERY   LAPTOP 1366px and height 800px*/
@media (max-width: 1366px) or (max-height: 800px) {
	/* .project-details-scroll  altezza finestra scroll */
    .project-details-scroll { 
        height: 305px !important;       
        min-height: 305px !important;
        max-height: 305px !important; 
        overflow-y: auto !important; 
    }
    .slider-dots { bottom: 10px!important; left: 27.5%!important; }
	.zoom-notice {left: 2.5%!important;bottom: 8px!important;}
	.price-amount {padding: 4px 6px;font-size: 1.2rem!important;}
    .slide-content .btn-portfolio {font-size: 1rem!important;padding: 8px 14px !important;}
	.info-notes { font-size: 0.75rem;}
}

/*    QUERY  TABLET 768px e fino a 1023px        */
@media (min-width: 768px) and (max-width: 1023px) {
    .slide { flex-direction: column !important; }
    
    .slide-image-wrapper { 
        width: 100% !important; 
        height: 360px !important; 
        min-height: 360px !important;
        position: relative !important; 
    }    
    .slide-content-wrapper { 
        width: 100% !important; 
        height: auto !important;
        min-height: 480px !important; 
        position: relative !important;
        padding-right: 4% !important; 
        padding-left: 4% !important; 
        padding-bottom: 60px !important; 
    }    
    .project-details-scroll { 
        height: 110px !important;       
        max-height: 110px !important;   
        overflow-y: auto !important;    
    }
    div.slider-dots, .slider-dots, [class*="slider-dots"] { display: none !important; }
    .slide-content-wrapper .next-btn { right: 4% !important; bottom: 12px !important; position: absolute !important; z-index: 99 !important; } 
    .slide-content-wrapper .prev-btn { right: 110px !important; bottom: 12px !important; position: absolute !important; z-index: 99 !important; }    
    .price-amount { padding: 4px 6px; font-size: 1.3rem !important; }
    .lightbox-close { right: 35px !important; top: 85px !important; }
    .zoom-notice { bottom: 10px !important; left: 5% !important; font-size: 11px !important; }
}


/*    QUERY  SOLO RISOLUZIONE 1024px     */
@media (min-width: 1024px) and (max-width: 1199px) {
    .slide { 
        flex-direction: column !important; 
    }    
    .slide-image-wrapper { 
        width: 100% !important; 
        height: 350px !important; 
        min-height: 350px !important;
        position: relative !important; 
    } 
    .slide-content-wrapper { 
        width: 100% !important; 
        height: auto !important;
        min-height: 480px !important; 
        position: relative !important;
        padding-right: 4% !important; 
        padding-left: 4% !important; 
        padding-bottom: 70px !important; 
    }    
    
    div.project-details-scroll,
    .slide-content-wrapper .project-details-scroll,
    .slide-content .project-details-scroll { 
        height: 110px !important;       
        min-height: 110px !important;   
        max-height: 110px !important;   
        overflow-y: auto !important;
        display: block !important;
        margin-bottom: 25px !important;    
    }    
    div.slider-dots, .slider-dots, [class*="slider-dots"] { display: none !important; }
    .slide-content-wrapper .next-btn,
    .slide-content .next-btn,
    .next-btn { 
        right: 4% !important; 
        bottom: 15px !important; 
        position: absolute !important; 
        top: auto !important;
        z-index: 999 !important; 
    } 
    .slide-content-wrapper .prev-btn,
    .slide-content .prev-btn,
    .prev-btn { 
        right: 110px !important; 
        bottom: 15px !important; 
        position: absolute !important; 
        top: auto !important;
        z-index: 999 !important; 
    }    
    .price-amount { padding: 4px 6px; font-size: 1.3rem !important; }
    .lightbox-close { right: 35px !important; top: 85px !important; }
    .zoom-notice { bottom: 10px !important; left: 5% !important; font-size: 11px !important; }
}

/*  QUERY  TABLET 768px Fino a 1023px          */
@media (min-width: 768px) and (max-width: 1023px) {
    .slide { flex-direction: column !important; }    
    .slide-image-wrapper { 
        width: 100% !important; 
        height: 360px !important; 
        min-height: 360px !important;
        position: relative !important; 
    }    
    .slide-content-wrapper { 
        width: 100% !important; 
        height: auto !important;
        min-height: 480px !important; 
        position: relative !important;
        padding-right: 4% !important; 
        padding-left: 4% !important; 
        padding-bottom: 60px !important; 
    }    
    .project-details-scroll { 
        height: 110px !important;       
        max-height: 110px !important;   
        overflow-y: auto !important;    
    }
    div.slider-dots, .slider-dots, [class*="slider-dots"] { display: none !important; }
    .slide-content-wrapper .next-btn { right: 4% !important; bottom: 12px !important; position: absolute !important; z-index: 99 !important; } 
    .slide-content-wrapper .prev-btn { right: 110px !important; bottom: 12px !important; position: absolute !important; z-index: 99 !important; }    
    .price-amount { padding: 4px 6px; font-size: 1.3rem !important; }
    .lightbox-close { right: 35px !important; top: 85px !important; }
    .zoom-notice { bottom: 10px !important; left: 5% !important; font-size: 11px !important; }
}

/*   MEDIA SOLO RISOLUZIONE 1024px     */
@media (min-width: 1024px) and (max-width: 1199px) {
    .slide { 
        flex-direction: column !important; 
    }    
    .slide-image-wrapper { 
        width: 100% !important; 
        height: 340px !important; /* Leggermente ridotto per fare spazio sotto */
        min-height: 340px !important;
        position: relative !important; 
    }    
    /* Sfondo verde più alto per far respirare il listino lungo */
    .slide-content-wrapper { 
        width: 100% !important; 
        height: auto !important;
        min-height: 520px !important; 
        position: relative !important;
        padding-right: 4% !important; 
        padding-left: 4% !important; 
        padding-bottom: 80px !important; 
    }
    /*  Limitiamo lo scroll a 90px per evitare che inglobi le frecce */
    .project-details-scroll { 
        height: 90px !important;       
        max-height: 90px !important;   
        overflow-y: auto !important;
        position: relative !important;    
    }
    div.slider-dots, .slider-dots, [class*="slider-dots"] { display: none !important; }
    .slide-content-wrapper .next-btn { 
        right: 4% !important; 
        bottom: 20px !important; 
        position: absolute !important; 
        z-index: 999 !important; 
    } 
    .slide-content-wrapper .prev-btn { 
        right: 110px !important; 
        bottom: 20px !important; 
        position: absolute !important; 
        z-index: 999 !important; 
    }    
    .price-amount { padding: 4px 6px; font-size: 1.3rem !important; }
    .lightbox-close { right: 35px !important; top: 85px !important; }
    .zoom-notice { bottom: 10px !important; left: 5% !important; font-size: 11px !important; }
}

/* FORZATURA ASSOLUTA SMARTPHONE (Incluso 390px e 428px) */
@media (max-width: 480px) {
    div.project-details-scroll, 
    .slide-content-wrapper .project-details-scroll { 
        height: 170px !important;        
        min-height: 170px !important;    
        max-height: 170px !important;   
        overflow-y: auto !important; 
        margin-bottom: 15px !important;  
    }
    .lightbox-close {right: 35px !important;top: 110px!important;}
    .next-btn { right: 4% !important; bottom: 12px !important; } 
    .prev-btn { right: 75px !important; bottom: 12px !important; }    
    .slider-dots { 
        bottom: 20px !important; 
        left: 20% !important; /* Ridotto dal 36% per allontanarli del tutto dalle frecce */
        right: auto !important;
        transform: none !important;
    }   
    .zoom-notice { bottom: 5px !important; left: 4% !important; font-size: 10px !important; }
    .slide-content .btn-portfolio {
        font-size: 0.85rem !important;    
        padding: 8px 10px !important;    
        white-space: nowrap !important;  
    }
}

/* RESPONSIVE SMARTPHONE PICCOLI (da 320px a 479px) */
@media (min-width: 320px) and (max-width: 479px) {
    /* Forzatura estrema per accorciare il box nero a 320px */
    div.project-details-scroll,
    .slide-content-wrapper .project-details-scroll,
    .slide-content .project-details-scroll { 
        height: 105px !important;        
        min-height: 105px !important;    
        max-height: 105px !important;   
        overflow-y: auto !important; 
        margin-bottom: 5px !important;  
    }    
    div.slider-dots, .slider-dots, [class*="slider-dots"] { 
        display: none !important; 
    }
    .slide-content-wrapper .next-btn { 
        right: 4% !important; 
        bottom: 12px !important; 
        position: absolute !important;
        z-index: 99 !important; 
    }     
    .slide-content-wrapper .prev-btn { 
        right: 75px !important; 
        bottom: 12px !important; 
        position: absolute !important;
        z-index: 99 !important; 
    }    
    .zoom-notice { bottom: 5px !important; left: 4% !important; font-size: 10px !important; }
    .slide-content .btn-portfolio {
        font-size: 0.75rem !important;    
        padding: 5px 8px !important;    
        white-space: nowrap !important;  
    }
    .slide-content-wrapper .price-action-box {
        margin-top: 5px !important;
        margin-bottom: 50px !important; 
        position: relative !important;
        z-index: 5 !important;
    }
    .slide-content-wrapper .next-btn { 
        right: 4% !important; 
        bottom: 8px !important; 
        position: absolute !important;
        z-index: 99 !important; 
    }    
    .slide-content-wrapper .prev-btn { 
        right: 75px !important; 
        bottom: 8px !important;
        position: absolute !important;
        z-index: 99 !important; 
    }
}

/*           style_portfolio.css   
*           ONLY DUE COLONNE NEW  */

a, b{
    display: inline-block;
    color: #6c757d;
    text-decoration: none;
    font-weight: 600;
}

button{
    padding: 5px 10px;
}

.spotlight img,
.image{ border: 5px solid #2BCDC1;
    width: 900px!important; 
    height: 452px!important; 
    max-width: 900px;
    margin: 1.5vmin 1.5vmin;
    content-visibility: auto;
}
.image{
    display: inline-block;
    height: 41.14vw;
    max-height: 562px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.spotlight img{
    height: 41.14vw;
    max-height: 562px;
    object-fit: cover;
}

/* Dimensione title e descrizione  */
.spl-description,.spl-title{font-size:20px!important;font-weight:600; padding:0 20px;}

/* button link visit  */
.spl-button {    
    display: block !important; /* Cambiato da inline-block a block per isolarlo su una riga */
    background: #ff0000;
    color: #fff !important; 
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 12px 30px;
    text-align: center !important;
    cursor: pointer;
    /* Forzatura del centraggio corretto dopo il testo */
    position: relative !important;
    left: 0 !important;
    top: 5px !important;
    transform: none !important;  
    /* Centra un elemento di tipo block orizzontalmente */
    margin: 5px auto !important;     
    /* Impedisce al testo di affiancarsi e lo costringe ad andare a capo */
    clear: both !important;    
    /* Opzionale: definisce una larghezza massima per non farlo estendere al 100% */
    width: max-content !important;
	margin-bottom: 10px !important;
}

/*   LINK FOTO  */
.spotlight-group .spotlight {
    position: relative;
    display: inline-block; 
}

/*  🟢  SFONDO COLORATO CON ICONA AL CENTRO IN HOVER */
.spotlight-group .spotlight::before {
    content: "\f00e";
    font-family: "FontAwesome";         /*  versione 4.7.0 */
    font-size: 35px;  font-weight:500;
    color: #ff0000;
    /*  ICONA IN HOVER CENTRATA   */
    position: absolute;
    width: 60px !important; 
    height: 60px !important;
    background-color: #2BCDC1; 
    border-radius: 12px !important;
    /*  CENTRATURA SULLA FOTO */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    /* CENTRATURA PERFETTA DELLA LENTE ROSSA */
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
	pointer-events: none !important; 
}

/*   DESCRIZIONE FOOTER CON SFONDO SEMITRASPARENTE */
.spotlight-group .spotlight .spotlight-desc {
    position: absolute;
    padding: 12px 15px 12px 30px; /* Spazio interno ottimale sopra e sotto */
    bottom: 11px; /* Distanza dal bordo inferiore */
    left: 15px;   /* Distanza dal bordo sinistro */
    right: 15px;  /* Distanza dal bordo destro */
    color: #ffffff;  
    background-color: rgba(0, 0, 0, 0.65); /* Sfondo scuro semitrasparente */
    font-size: 16px; 
    font-family: Manrope, sans-serif;
    text-align: left;
    line-height: 1.4 !important;
    font-weight: normal;
    box-sizing: border-box;    
    /* Di base è invisibile */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
	pointer-events: none !important;
}

/*     CLASSI STILI DEL TESTO DESCRIZIONE IN HOVER    */
.spotlight-desc .testo-evidenziato{ padding:2px 8px; font-size: 16px !important;
    background-color:#2BCDC1!important;/* Sfondo: TIPO */
	color: #000!important; 
    font-weight: 800!important;
}
/* Colore descrizione principale */
.spotlight-desc .descrizione-progetto {
    color: #fff !important; 
    font-size: 16px !important;
    font-weight: 600!important;
}
/* Colore tipo responsive */
.spotlight-desc .tipo-responsive {
    color: #2BCDC1 !important; font-weight: 600!important;
}
/* Colore  Tipo Sito */
.spotlight-desc .tipo-sito {padding:1px 4px!important; margin-right:5px; 
    display: inline-block !important;
    margin-top: 10px !important;
    color: #000 !important;
	background: #fff!important;
}
/* Colore Categoria Sito */
.spotlight-desc .categoria-sito {padding:1px 4px!important; 
    display: inline-block !important; 
    margin-top: 10px !important; 
    color: #ffffff !important;
	background: #ff0000!important;
    margin-left: 5px !important; 
}

/*    ATTIVAZIONE HOVER ALL   */
.spotlight-group .spotlight:hover .spotlight-desc {
    opacity: 1;
}
/*      ATTIVAZIONE HOVER   */
.spotlight-group .spotlight:hover::before,
.spotlight-group .spotlight:hover::after {
    opacity: 1; /* Fa apparire contemporaneamente colore sfondo foto, lente e testo */
}

/*    GLOBAL SETTING    */
a [data-media="node"]{
    width: 29vw;
    max-width: 300px;
    margin: 1vmin 1vmin;
    display: inline-block;
    height: 20vw;
    max-height: 200px;
}
a [data-media="node"] img{
    float: left;
    width: 33.33%;
    margin: 0;
    object-fit: cover;
    height: 100%;
    padding: 0;
}

/*     ICONA CLOSE  FOTO    */
.spl-close {
    background-color: #ff0011 !important;
    opacity: 1 !important;
    filter: none !important;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIyIDIgMjAgMjAiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTgiIHgyPSI2IiB5MT0iNiIgeTI9IjE4Ii8+PGxpbmUgeDE9IjYiIHgyPSIxOCIgeTE9IjYiIHkyPSIxOCIvPjwvc3ZnPg==) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/*         CUSTOM CONTROL   */
.spl-like{
    background-image: url(assets/img/lavori/portfolio/heart-outline.svg);
     background-size: 23px;
}
/*  STATO  aggiuntivo per attivare/disattivare il pulsante: */
.spl-like.on{
    background-image: url(assets/img/lavori/portfolio/heart.svg);
}
/*  Custom Animation   */
/* custom scene transition (slide effect) */
.only-this-gallery.show .spl-scene{
    transition: transform 0.2s ease;
}
/* custom animation "visible state" (css context by custom classname "only-this-gallery" to apply these animation just on a specific gallery) */
.only-this-gallery.show .spl-pane > *{
    clip-path: circle(100% at center);
    transition: transform 0.35s ease, opacity 0.65s ease,clip-path 0.8s ease;
}
/* custom animation "hidden state" ("custom" is the name of the animation you pass as gallery option) */
.only-this-gallery .spl-pane .custom {
    clip-path: circle(0px at center);
    transition: transform 0.65s ease,
    opacity 0.65s ease;
}
/* animation state when gallery is hidden */
#spotlight.only-this-gallery{
    clip-path: circle(0px at center);
}

/* animation state when gallery will open */
#spotlight.only-this-gallery.show{
    clip-path: circle(100% at center);
    transition: clip-path 0.65s ease 0.15s;
}
/* Nasconde lente ingrandimento foto nel popup */
/*     .spl-zoom-in, 
/*    .spl-zoom-out { display: none !important;}
/*    END  CUSTOM CONTROL   */


/* STILE FRECCE PULITO */
.spl-next, .spl-prev {
    background-color: #2BCDC1 !important;
    border-radius: 6px;
    width: 50px;
    height: 50px;
}
/* STILE FRECCE HOVER INVERTITO */
.spl-next:hover, .spl-prev:hover {
    background-color: #ffffff !important;
    background-blend-mode: difference !important; /* Inverte colore icona interna  */
}

/*      STILE GRAFICO SELETTORE FILTRI        */
.portfolio-filtri {
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.portfolio-filtri span.icona-filtro { margin-right: 8px; color: #000;font-size: 18px;}

.portfolio-filtri span.icona-filtro i { margin-bottom:5px!important;margin-right: 8px; color: #ff0000;font-size: 25px;}

.portfolio-filtri .icona-filtro { color: #777!important;font-size: 18px;margin-bottom:5px!important;}

.portfolio-filtri .filtro-voce {
    cursor: pointer;font-size: 16px;
    color: #000;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

/* Linea rossa sotto la voce attiva del menu */
.portfolio-filtri .filtro-voce.active {
    border-bottom: 2px solid #ff0000;
}

/*         GESTIONE FILTRO VISIVO DELLE FOTO     */
.spotlight-group .spotlight {
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
    transform: scale(1);
}
/* Questa classe viene inserita dallo script per nascondere le foto escluse */
.spotlight-group .spotlight.hidden-item {
    display: none !important; /* Rimuove l'ingombro per far stringere le 2 colonne */
}

/*   CENTRATURA COMPLETA FILTRI E TITOLO   */
.portfolio-filtri {
    justify-content: center;
    width: 100%;
}

/*   TITOLO PORTFOLIO  */
.portfolio-filtri + h4, 
h4, h4.galleria-titolo { font-size: 25px;font-weight: 700;background-color:#2BCDC1;padding: 30px 30px; 
    text-align: center!important;  color: var(--nisoz-black);
    width: 100%;
    margin-bottom: 40px; margin-top:40px;
}

/*     MEDIA QUERY GLOBAL SETTING */
@media (min-width:1441px) and (max-width:1680px) {
   .spotlight img,
   .image{
    width: 700px!important; 
    height: auto!important; 
    max-width: 700px;
   }
}

/*     MEDIA QUERY 1367px a 1440px    */
@media (min-width:1367px) and (max-width:1440px) {
   .spotlight img,
   .image{
    width: 650px!important; 
    height: auto!important; 
    max-width: 650px;
   }
}

/*     MEDIA QUERY 1201px a 1366px    */
@media (min-width:1201px) and (max-width:1366px) {
   .spotlight img,
   .image{
    width: 635px!important; 
    height: auto!important; 
    max-width: 635px;
   }
}

/*     MEDIA QUERY 1025px a 1200px    */
@media (min-width:1025px) and (max-width:1200px) {
   .spotlight img,
   .image{
    width: 510px!important; 
    height: auto!important; 
    max-width: 510px;
	display: inline-block !important;
    margin: 20px 10px !important;
    text-align: center !important;
   }   
   /* Forza il link a stringersi a 540px per fare da gabbia millimetrica */
   .spotlight-group .spotlight {
      display: inline-block !important;
      width: 46% !important;
      max-width: 46% !important;
      position: relative !important; /* Blocca definitivamente la descrizione scura */
      margin: 20px 20px !important;  /* Distanzia in modo simmetrico le due colonne */
   }
   /* Allinea la descrizione perfettamente dentro i 540px della foto */
   .spotlight-group .spotlight .spotlight-desc {
      position: absolute !important;
      left: 10px !important;   
      right: 25px !important;  
      bottom: 20px !important;
      width: auto !important;
   }
    /* 🟢 FIX ICONA LENTE + PER TELEFONI PICCOLI */
   .spotlight-group .spotlight::before {
      font-size: 30px!important; font-weight:500 !important; 
	  top: 38% !important; 
      left: 50% !important;
	  width: 50px !important; 
      height: 50px !important;
      transform: translate(-50%, -50%) !important;
   }   
}

/*     MEDIA QUERY 901px a 1024px    */
@media (min-width:901px) and (max-width:1024px) {
    .spotlight-desc .testo-evidenziato{ padding:0px 6px!important;font-size: 14px !important; font-weight: 700!important;}
   /* Colore descrizione principale */
   .spotlight-desc .descrizione-progetto {font-size: 14px !important;}
   .spotlight-desc .tipo-responsive {font-size: 14px!important; font-weight: 500!important;}
   .spl-description, .spl-title { font-size: 14px!important; font-weight: 500!important; }      
   .spotlight-desc .tipo-sito {font-size: 14px!important; font-weight: 500!important;}   
   /* TITOLO FILTRI PORTFOLIO */
   .portfolio-filtri + h4, h4, .galleria-titolo { font-size: 26px!important; }   
   /* Dimensione title e descrizione nello Spotlight a tutto schermo */
   .spl-description, .spl-title { font-size: 14px!important; font-weight: 500!important; }   
   
   /* TITOLO FILTRI PORTFOLIO */
   .portfolio-filtri + h4, h4, .galleria-titolo { font-size: 20px!important; }   
   /* Dimensione title e descrizione nello Spotlight a tutto schermo */
   .spl-description, .spl-title { font-size: 11px!important; font-weight: 500!important; }   
   
   .spotlight img,
   .image{
    width: 460px!important; 
    height: auto!important; 
    max-width:460px;
	display: inline-block !important;
    margin: 20px 20px !important;
    text-align: center !important;
   }
   /* 🟢 FIX ICONA LENTE + PER TELEFONI PICCOLI */
   .spotlight-group .spotlight::before {
      font-size: 30px!important; font-weight:500 !important; 
	  top: 40% !important; 
      left: 50% !important;
	  width: 50px !important; 
      height: 50px !important;
      transform: translate(-50%, -50%) !important;
   }
}

/*     MEDIA QUERY 835px a 900px    */
@media (min-width:835px) and (max-width:900px) {
   .spotlight img,
   .image{
    width: 850px!important; 
    height: auto!important; 
    max-width:850px;
   }
}

/*     MEDIA QUERY 834px and  H 1112px    */
@media screen and (width: 834px) and (height: 1112px) {   
   .spotlight img,
   .image{
    width: 810px!important; 
    height: auto!important; 
    max-width: 810px;
	display: inline-block !important;
    margin: 20px 10px !important;
   text-align: center !important;
   }
}

/*     MEDIA QUERY 768px a 833px    */
@media (min-width:768px) and (max-width:833px) {
   .spotlight img,
   .image{
    width: 735px!important; 
    height: auto!important; 
    max-width: 735px;
	display: inline-block !important;
    margin: 20px 10px !important;
    text-align: center !important;
   }
}

   /*     MEDIA QUERY 800px and  H 1280px Kindle Fire   */
@media screen and (width: 800px) and (height: 1280px) {   
   .spotlight img,
   .image {
      width: 360px !important;
      height: auto !important; 
      max-width: 360px !important;
      display: inline-block !important;
      margin: 15px 15px !important;  
      text-align: center !important;
   }
}

/*     MEDIA QUERY 600px a 767px    */
@media (min-width:600px) and (max-width:767px) {
  .portfolio-filtri {font-size: 16px;gap: 2px;}
   .portfolio-filtri .filtro-voce { font-size: 14px!important; margin-right:8px;}
   .portfolio-filtri span.icona-filtro { font-size: 16px!important;}
   .portfolio-filtri span.icona-filtro i { font-size: 25px!important;}  
   .spl-description,.spl-title{font-size:18px!important;font-weight:500!important; }
   
   .spotlight-desc .testo-evidenziato{ padding:0px 6px!important;font-size: 12px !important; font-weight: 700!important;}
   /* Colore descrizione principale */
   .spotlight-desc .descrizione-progetto {font-size: 12px !important;}
   /* TITOLO FILTRI PORTFOLIO */
   .portfolio-filtri + h4, h4, .galleria-titolo { font-size: 20px!important; }   
   /* Dimensione title e descrizione nello Spotlight a tutto schermo */
   .spl-description, .spl-title { font-size: 11px!important; font-weight: 500!important; }   
 
   /* Mantiene protetto il tutto schermo e ridimensiona le miniature */
   .spotlight-group .spotlight img,
   .image {
   width: 550px !important;
   height: auto !important; 
   max-width: 550px;
   display: inline-block !important;
   margin: 20px auto !important;
   text-align: center !important;
  }    
   /* Centra il contenitore stesso di Spotlight e lo blocca alla misura della foto */
   .spotlight-group .spotlight {
      display: block !important; 
      text-align: center !important;
      position: relative !important; 
      width: 550px !important; 
      max-width: 550px !important; 
      margin: 20px auto !important; 
      float: none !important; 
   } 

   /* Applichiamo il centro anche al link/contenitore spotlight */
    .spotlight-group .spotlight {
      text-align: center !important;
      display: block !important;
   }
   /* FIX DESCRIZIONE MINI PER SCHERMI STRETTISSIMI */
   .spotlight-group .spotlight .spotlight-desc {
      bottom: 25px !important;     
      left: 5px !important;
      right: 5px !important;
      padding: 4px 6px !important;   
      font-size: 10px !important;    
      line-height: 1.1 !important;  
      box-sizing: border-box !important;
   }     
   /* Allinea lo sfondo dell'hover */
   .spotlight-group .spotlight::after {
      bottom: 20px !important; 
      left: 0 !important; 
      right: 0 !important;
   }  
   /* 🟢 FIX ICONA LENTE + PER TELEFONI PICCOLI */
   .spotlight-group .spotlight::before {
      font-size: 30px!important; font-weight:500 !important; 
	  top: 40% !important; 
      left: 50% !important;
	  width: 45px !important; 
      height: 45px !important;
      transform: translate(-50%, -50%) !important;
   }
}


/*     LARGE PHONES & FLAGSHIPS   */
/* QUERY - LARGE PHONES & FLAGSHIPS - iPhone 14 Pro: 393 x 852 / Pixel 7 Pro: 480 x 1040 / iPhone 14 Pro Max: 430 x 932 */
@media screen and (min-width: 366px) and (max-width: 480px) {
   .portfolio-filtri { 
      font-size: 12px; 
      gap: 2px; 
   }
   .portfolio-filtri .filtro-voce { 
      font-size: 12px !important; 
      margin-right: 5px; 
   }
   .portfolio-filtri span.icona-filtro { 
      font-size: 14px !important; 
   }
   .portfolio-filtri span.icona-filtro i { 
      font-size: 18px !important; 
   } 
   .spotlight-desc .testo-evidenziato { 
      padding: 0px 6px !important; 
      font-size: 12px !important; 
      font-weight: 500 !important; 
   }
   /* Colore descrizione principale */
   .spotlight-desc .descrizione-progetto { 
      font-size: 12px !important; 
   }
   /* TITOLO FILTRI PORTFOLIO */
   .portfolio-filtri + h4, h4, .galleria-titolo { 
      font-size: 20px !important; 
   } 
   /* Dimensione title e descrizione nello Spotlight a tutto schermo */
   .spotlight-desc .tipo-responsive { 
      font-size: 12px !important; 
      font-weight: 500 !important; 
   }
   .spl-description, .spl-title { 
      font-size: 12px !important; 
      font-weight: 500 !important; 
   } 
   .spotlight-desc .tipo-sito { 
      font-size: 12px !important; 
      font-weight: 500 !important; 
   }
   .spotlight-desc .categoria-sito { 
      font-size: 12px !important; 
      font-weight: 500 !important; 
      margin-top: 0px !important; 
   }
   /* Mantiene protetta l'immagine interna */
   .spotlight-group .spotlight img,
   .image {
      width: 100% !important; 
      height: auto !important; 
      max-width: 100% !important; 
      display: block !important; 
      margin: 0 !important; 
   }
   /* Centra il contenitore stesso di Spotlight e lo blocca alla misura della foto */
   .spotlight-group .spotlight {
      display: block !important; 
      text-align: center !important;
      position: relative !important; 
      width: 350px !important; 
      max-width: 100% !important; 
      margin: 20px auto !important; 
      float: none !important; 
   }
   /* Allinea la descrizione PERFETTAMENTE dentro la foto */
   .spotlight-group .spotlight .spotlight-desc {
      position: absolute !important; 
      left: 0 !important; 
      right: 0 !important; 
      bottom: 0 !important; 
      width: 100% !important; 
      max-width: 100% !important; 
      box-sizing: border-box !important; 
      padding: 10px !important; 
   } 
   /* Allinea lo sfondo dell'hover perfettamente con la descrizione */
   .spotlight-group .spotlight::after {
      bottom: 0 !important; 
      left: 0 !important; 
      right: 0 !important;
   } 
   /* FIX ICONA LENTE + PER TELEFONI PICCOLI */
   .spotlight-group .spotlight::before {
      font-size: 25px !important; 
      font-weight: 500 !important; 
      top: 15% !important; 
      left: 50% !important;
      width: 40px !important; 
      height: 40px !important;
      transform: translate(-50%, -50%) !important;
   }
}

/* MEDIA QUERY 320px a 413px */
@media (min-width: 320px) and (max-width: 365px) { 
   .portfolio-filtri { font-size: 12px; gap: 2px; }
   .portfolio-filtri .filtro-voce { font-size: 11px!important; margin-right:5px; }
   .portfolio-filtri span.icona-filtro { font-size: 14px!important; }
   .portfolio-filtri span.icona-filtro i { font-size: 18px!important; } 
   
   /* TITOLO FILTRI PORTFOLIO */
   .portfolio-filtri + h4, h4, .galleria-titolo { font-size: 20px!important; }
   
   /* Dimensione title e descrizione nello Spotlight a tutto schermo */
   .spl-description, .spl-title { font-size: 16px!important; font-weight: 500!important; }
   
   /* Mantiene protetto il tutto schermo e ridimensiona le miniature */
   .spotlight-group .spotlight img,
   .image {
      width: 320px!important;
      height: auto!important; 
      max-width: 320px;
      margin: 20px 0 !important;
   } 
   /* FIX DESCRIZIONE MINI PER SCHERMI STRETTISSIMI */
   .spotlight-group .spotlight .spotlight-desc {
      bottom: 25px !important;     
      left: 5px !important;
      right: 5px !important;
      padding: 4px 6px !important;   
      font-size: 10px !important;    
      line-height: 1.1 !important;  
      box-sizing: border-box !important;
   }
   /* Allinea lo sfondo dell'hover */
   .spotlight-group .spotlight::after {
      bottom: 20px !important; 
      left: 0 !important; 
      right: 0 !important;
   } 
   /* 🟢 FIX ICONA LENTE + PER TELEFONI PICCOLI */
   .spotlight-group .spotlight::before {
      top: 38% !important; 
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
   }
}


/*   QUERY  REALME 11 PRO PLUS  */
@media only screen and (max-width: 365px) and (max-height: 810px) {
   .portfolio-filtri { font-size: 12px; gap: 2px; }
   .portfolio-filtri .filtro-voce { font-size: 12px!important; margin-right:5px; }
   .portfolio-filtri span.icona-filtro { font-size: 14px!important; }
   .portfolio-filtri span.icona-filtro i { font-size: 18px!important; } 
   
   .spotlight-desc .testo-evidenziato{ padding:0px 6px!important;font-size: 12px !important; font-weight: 500!important;}
   /* Colore descrizione principale */
   .spotlight-desc .descrizione-progetto {font-size: 12px !important;}
   /* TITOLO FILTRI PORTFOLIO */
   .portfolio-filtri + h4, h4, .galleria-titolo { font-size: 20px!important; }   
   /* Dimensione title e descrizione nello Spotlight a tutto schermo */
   .spotlight-desc .tipo-responsive {font-size: 12px!important; font-weight: 500!important;}
   .spl-description, .spl-title { font-size: 12px!important; font-weight: 500!important; }      
   .spotlight-desc .tipo-sito {font-size: 12px!important; font-weight: 500!important;}
   .spotlight-desc .categoria-sito {font-size: 12px!important; font-weight: 500!important;  margin-top: 0px !important; }
   
   /* Mantiene protetto il tutto schermo e ridimensiona le miniature */
   .spotlight-group .spotlight img,
   .image {
      width: 350px !important;
      height: auto !important; 
      max-width: 350px;
      display: inline-block !important;
      margin: 20px 5px !important;
     text-align: center !important;
  }

   /* Allinea la descrizione perfettamente dentro i 540px della foto */
   .spotlight-group .spotlight .spotlight-desc {
      position: absolute !important;
      left: 5px !important;   
      right: 4px !important;  
      bottom: 5px !important;
      width: 96.6% !important;max-width: 96.6% !important;
   }  
   /* Allinea lo sfondo dell'hover */
   .spotlight-group .spotlight::after {
      bottom: 20px !important; 
      left: 0 !important; 
      right: 0 !important;
   }   
   /* 🟢 FIX ICONA LENTE + PER TELEFONI PICCOLI */
   .spotlight-group .spotlight::before {
      font-size: 25px!important; font-weight:500 !important; 
	  top: 38% !important; 
      left: 50% !important;
	  width: 40px !important; 
      height: 40px !important;
      transform: translate(-50%, -50%) !important;
   }
}
/* --     END ALL QUERY     -- */


/* Sposta la X a sinistra di 4px solo su schermi minori di 600px */
@media only screen and (max-width: 599px) {
    .spl-pane .spl-close,
    .spl-close {
        margin-right: 1px !important;
    }
}

/* --------------------------------------------------------------------------- */ 

/*                IMPORTANT  !!!!!!   FIX HEADER              */

/* BLINDATURA DEI COMANDI SUPERIORI DI SPOTLIGHT PER PASSARE SOPRA A TUTTO */
.spl-lightbox,
div[id^="spotlight"] {
    z-index: 999999999 !important;
}

/* Barra superiore nera coprente */
.spl-header {
    background-color: #000000 !important;
    z-index: 999999999 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    visibility: visible !important;
 /*  opacity: 0.6 !important;       */
    height: 50px !important; 
}

/* Pannello dei comandi di destra */
.spl-header .spl-pane,
.spl-pane {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    z-index: 999999999 !important;
    gap: 10px !important;
}

/* 🟢 FORZA L'ORDINE VISIVO DEI BOTTONI: LA X VA ALL'ESTREMA DESTRA */
.spl-pane .spl-fullscreen,
.spl-fullscreen {
    order: 1 !important; /* Primo bottone a sinistra del gruppo */
}

.spl-pane .spl-copy,
.spl-copy,
.spl-pane a,
.spl-pane button:not(.spl-close) {
    order: 2 !important; /* Secondo bottone in mezzo */
}

.spl-pane .spl-close,
.spl-close {
    order: 3 !important; /* 🟢 Terzo bottone: finisce all'estrema destra! */
}

/* Assicura che il contatore 1/10 rimanga fisso a sinistra */
.spl-header .spl-title,
.spl-header div:first-child {
    margin-right: auto !important;
}


/* Rende lo sfondo di Spotlight nero semitrasparente  per non vedere le bande nere */
#spotlight {
    background-color: rgba(0, 0, 0, 0.85) !important; /* Sfondo nero quasi coprente */
}

/* Forza le immagini in 'contain' a prendersi tutto il bordo-bordo orizzontale sotto i 600px */
@media (max-width: 600px) {
    #spotlight .spl-pane img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
	.spl-button {
        margin-bottom: 30px !important; 
    }
}