*{ padding:0; margin:0; outline: none; 

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: subpixel-antialiased;
}

@media screen and (max-width: 900px) {
    .maxWidth {
        padding:0 15px 100px 15px !important;
    }

    h2 {
        font-size:28px;
    }
    .distTop {
        height: 90px;
    }


    .boxLogo, .insidePage .boxLogo {
        text-align: left;
        height: 98px !important;
        width: 100%;
        height: unset;
        background-color: #fff;
        border-right: 1px solid #f5f5f5;
    }
    .logo, .insidePage .logo {
        margin-left: 0;
        width: 75px;
        height: 75px;
        background-size: 70px;
    }
    .boxMenu ,.insidePage .boxMenu{
        position: absolute;
        top: 29px;
        width: 100%;
        text-align: center;
        max-width: none;
        left: 0;
        right: 0;
    }
    #content_site {
        padding-left: 135px;
        padding-top: 0;
    }
    .underBoxLogo {
        height: 140px;
        width: 135px;
        display: none;
    }
    .boxSquare {
        text-align: center;
    }

    .colWorkMenu {
        transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        padding-top: 0;
        width: 85px;
        padding-top:90px;
    }
        .colWorkMenu li {
            width: 84px;
            height: 84px;
        }

            .colWorkMenu li a {
                width: 84px;
            height: 84px;
            }

    .imagePortfolio {
        margin-left: 84px !important;
        width: calc( 100% - 84px) !important;
    }

    .imagePortfolio .endLoadLazy{
    
        width: calc( 100% );
        margin-top: 84px;
        height:calc(100% - 84px);
    }

    .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        top: 110px;
    }

       
}


@media screen and (max-width: 600px) {
    .square {
        min-height: 100px;
        width: 100px;
        margin: 2px;
    }
    .colWorkMenu {
        /*
        transform: translateX(-87px);
        -o-transform: translateX(-87px);
        -ms-transform: translateX(-87px);
        -moz-transform: translateX(-87px);
        -webkit-transform: translateX(-87px);
        */
        padding-top: 0;
        width: 85px;
    }
        .colWorkMenu.open {
            transform: translateX(0px);
            -o-transform: translateX(0px);
            -ms-transform: translateX(0px);
            -moz-transform: translateX(0px);
            -webkit-transform: translateX(0px);
        }

    

}

@media screen and (max-width: 400px) {
    .square {
        min-height: 80px;
        width: 80px;
        margin: 2px;
    }
    .boxInfoWork {
        width:100%;
        padding-left:85px;
    }
        .boxInfoWork h1 {
            font-size: 20px;
        }
    .bodyWork p {
        padding:5px 0;
    }
}

@media screen and (orientation:landscape) {
    .imagePortfolio .endLoadLazy {
        background-size: auto 100% !important;
        position: fixed !important;
    }
}
@media screen and (orientation:portrait) {
    .imagePortfolio .endLoadLazy {
        background-size: 100% auto !important;
        position: fixed !important;
    }
}

/*-- MENU MOBILE: hamburger a destra + overlay fullscreen — 2026-07-21 --------*/
.hamburger { display: none; }
@media screen and (max-width: 900px) {
    .menuLabel { display: none !important; }
    .boxMenu, .insidePage .boxMenu { position: static !important; }

    .hamburger {
        display: -webkit-flex; display: flex;
        -webkit-flex-direction: column; flex-direction: column;
        -webkit-justify-content: space-between; justify-content: space-between;
        position: fixed; top: 16px; right: 16px; z-index: 60;
        width: 34px; height: 26px; padding: 0; margin: 0;
        background: transparent; border: 0; cursor: pointer;
    }
    .hamburger span {
        display: block; width: 100%; height: 3px; border-radius: 2px; background: #000;
        -webkit-transition: -webkit-transform .3s ease, opacity .3s ease;
        transition: transform .3s ease, opacity .3s ease;
    }
    .hamburger.is-active span { background: #fff; }
    .hamburger.is-active span:nth-child(1) { -webkit-transform: translateY(11.5px) rotate(45deg); transform: translateY(11.5px) rotate(45deg); }
    .hamburger.is-active span:nth-child(2) { opacity: 0; }
    .hamburger.is-active span:nth-child(3) { -webkit-transform: translateY(-11.5px) rotate(-45deg); transform: translateY(-11.5px) rotate(-45deg); }

    /* niente apertura su hover in mobile: comanda solo la classe .open */
    .boxMenu:hover .listMenu { visibility: hidden; opacity: 0; }
    .listMenu {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        width: 100%; height: 100%; background: #000; padding: 0; margin: 0;
        display: -webkit-flex; display: flex;
        -webkit-flex-direction: column; flex-direction: column;
        -webkit-justify-content: center; justify-content: center;
        -webkit-align-items: center; align-items: center;
        visibility: hidden; opacity: 0; z-index: 55;
        -webkit-transition: opacity .35s ease; transition: opacity .35s ease;
    }
    .listMenu.open { visibility: visible !important; opacity: 1 !important; }
    .listMenu li { width: auto; }
    .listMenu a { font-size: 22px; letter-spacing: 2px; padding: 16px 24px; }
    body.menu-open { overflow: hidden; }
}


/*-- FOOTER su MOBILE: NASCOSTO; utility links nel menu overlay (opzione 2) — 2026-07-21 --*/
.menuUtility { display: none; }
@media screen and (max-width: 900px) {
    .siteFooter { display: none !important; }
    #content_site { padding-bottom: 16px; }
    .master.insidePage .boxInfoWork { bottom: 0; }

    /* riga utility in fondo all'overlay hamburger */
    .menuUtility {
        display: block; list-style: none;
        position: absolute; left: 0; right: 0; bottom: 26px;
        text-align: center;
    }
    .menuUtility a {
        display: inline-block; border: 0;
        font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
        color: #888; padding: 6px 10px;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    .menuUtility a:hover { color: #fff; }
}


/*-- DETTAGLIO WORK MOBILE: filmstrip lavori in basso, a scomparsa — 2026-07-21 --*/
.worksToggle { display: none; }
@media screen and (max-width: 900px) {
    /* opera a tutta larghezza: via la colonna sinistra */
    .imagePortfolio { margin-left: 0 !important; width: 100% !important; }

    /* filmstrip orizzontale fissa in basso, nascosta di default */
    .colWorkMenu {
        position: fixed !important;
        top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; height: 82px !important;
        padding: 8px !important; margin: 0 !important;
        background: rgba(255,255,255,0.96);
        border-top: 1px solid #ececec; border-right: 0 !important;
        white-space: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        transform: translateY(105%) !important;
        -webkit-transition: -webkit-transform .32s cubic-bezier(.4,0,.2,1) !important;
        transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
        z-index: 40;
    }
    .colWorkMenu.open { transform: translateY(0) !important; }
    .colWorkMenu ul { display: inline-block; height: 100%; font-size: 0; list-style: none; margin: 0; padding: 0; }
    .colWorkMenu li { display: inline-block; vertical-align: top; width: 66px !important; height: 66px !important; margin: 0 3px !important; }
    .colWorkMenu li a { display: block; width: 66px !important; height: 66px !important; margin: 0 !important; }
    .colWorkMenu li a.current { outline: 2px solid #AC0600; outline-offset: -2px; }

    /* grabber (icona lista) per rivelare la filmstrip */
    .worksToggle {
        display: block; position: fixed; z-index: 41;
        left: 12px; bottom: 10px; width: 40px; height: 40px; padding: 0;
        background: transparent; border: 0; cursor: pointer;
    }
    /* freccia/chevron verso l'alto (apri) */
    .worksToggle::before {
        content: ""; display: block; width: 12px; height: 12px; margin: 15px auto;
        border-top: 2px solid #fff; border-right: 2px solid #fff;
        -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
        -webkit-filter: drop-shadow(0 0 1px rgba(0,0,0,0.55));
        filter: drop-shadow(0 0 1px rgba(0,0,0,0.55));
        -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease;
    }
    .works-open .worksToggle { bottom: 90px; }
    /* aperto: la freccia ruota verso il basso (chiudi) */
    .works-open .worksToggle::before { -webkit-transform: rotate(135deg); transform: rotate(135deg); }

    /* caption nome+misure: in basso a sinistra, si attenua quando la filmstrip è aperta */
    .boxInfoWork {
        left: auto !important; right: 0 !important; bottom: 0 !important;
        width: auto !important; max-width: 85% !important;
        text-align: right !important; padding: 10px 14px !important;
        background-color: rgba(250, 250, 250, 0.8);
        -webkit-transition: opacity .25s ease; transition: opacity .25s ease;
    }
    .boxInfoWork h1 { text-align: right !important; }
    .works-open .boxInfoWork { opacity: 0; pointer-events: none; }

    /* col menu hamburger aperto, nascondi la UI dei lavori */
    .menu-open .worksToggle, .menu-open .colWorkMenu { display: none !important; }
}