/* base.css — BUILD 14 — titoli SEO nella descrizione aggiuntiva — se non leggi questa riga, il file non e' aggiornato */
/* =====================================================================
   CBI — base.css
   Ricostruito da zero. Contiene SOLO quello che serve alla HOME.
   Ogni nuovo modulo aggiunge la sua sezione in fondo.
   ===================================================================== */

/* ---------------------------------------------------------------- FONT */
@font-face { font-family:'TitilliumWeb'; src:url('/css/font/TitilliumWeb-Light.ttf');    font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'TitilliumWeb'; src:url('/css/font/TitilliumWeb-Regular.ttf');  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'TitilliumWeb'; src:url('/css/font/TitilliumWeb-SemiBold.ttf'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'TitilliumWeb'; src:url('/css/font/TitilliumWeb-Bold.ttf');     font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'TitilliumWeb'; src:url('/css/font/TitilliumWeb-Black.ttf');    font-weight:900; font-style:normal; font-display:swap; }

/* ---------------------------------------------------------------- VARIABILI */
:root {
    --giallo:        #facd2a;
    --grigio-testo:  #575756;
    --grigio-scuro:  #3e3e40;
    --grigio-chiaro: #eee;
    --fondo:         #edecea;
    --bianco:        #fff;
    --nero:          #000;

    --font: 'TitilliumWeb', sans-serif;

    --wrap-max: 2000px;
    --gap:      15px;

    /* Altezza dello slideshow in home. Deve valere GIA' AL PRIMO PAINT:
       prima la metteva solo set_heights() a document.ready e la pagina
       faceva un salto enorme quando lo slideshow comparivo dal nulla.
       --menu-h e' l'altezza del menu giallo, che su desktop sta sopra
       lo slideshow; su mobile il menu galleggia sopra e vale 0. */
    --menu-h:  98px;
    --slide-h: calc(100vh - var(--menu-h));
    --slide-h: calc(100svh - var(--menu-h));  /* svh: senza le barre del browser */
    --ombra:    #c3c3c3 5px 5px 8px 0;
}

/* ---------------------------------------------------------------- GENERALE */
body {
    margin: 0;
    font: 1em/160% var(--font);
    font-weight: 400;
    color: var(--nero);
    background-color: var(--fondo);
}

strong { font-weight: 600; }

a { text-decoration: none; color: #015aa7; }

#main_wrap {
    width: var(--wrap-max);
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* overlay usati dai popup */
.clouder,
.clouder2 {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 150;
    background-color: var(--nero);
}
.clouder  { opacity: .8; }
.clouder2 { opacity: .6; }

/* ---------------------------------------------------------------- HEADER */
#menu {
    position: relative;
    top: 0;
    height: 98px;
    max-height: 98px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    background-color: var(--giallo);
    z-index: 250;
}

/* Nessuna regola su "#menu a": un id batte qualunque selettore di classi e
   imporrebbe il nero a tutti i link del menu, megamenu compreso, annullando
   il grigio dei titoli macro. Il colore lo decidono le regole specifiche. */
#menu a:hover { color: #555; }

#logo {
    position: absolute;
    top: 22px;
    left: 3%;
    width: 100%;
    max-width: 100px;
    padding: 0;
    border: 0;
    vertical-align: top;
    z-index: 400;
}

.menu_container { /* contiene burger e cerca: visibili solo su mobile */ }
#burger,
#cercaMobile { display: none; }

/* ---------------------------------------------------------------- MENU TOP */
#menu .menu_top {
    width: 100%;
    padding: 18px 0 0 0;
    text-align: right;
    font-size: 15px;
}

#menu .menu_top a {
    color: var(--nero);
    font-weight: 600;
    font-size: 16px;
}
#menu .menu_top a:hover { color: #555; }

#menu .menu_top span { margin: 0 5px; }

#menu .menu_top span[type~=active] a { text-decoration: underline; }
#menu .menu_top span[mod~=social]     { margin: 0 20px; }

#menu .menu_top img {
    margin: 0 7px;
    vertical-align: top;
    border: 0;
    opacity: 1;
}
#menu .menu_top img:hover { opacity: .8; }

/* selettore lingua */
#menu .menu_top span[mod~=lang] {
    margin: 0 3% 0 0;
    color: var(--nero);
    cursor: pointer;
}
#menu .menu_top span[mod~=lang]:hover  { color: #444; }
#menu .menu_top span[mod~=lang]:before { content: ">"; font-size: 10px; margin: 0 5px 0 0; }

#menu .menu_top .allLanguages {
    display: none;
    opacity: 0;
    margin: 0 3% 0 0;
    padding: 0 2px;
    transition: all linear 1s;
}
#menu .menu_top .allLanguages a {
    margin: 0 5px;
    color: #f00;
    font-weight: 600;
    cursor: pointer;
}
#menu .menu_top .allLanguages a[selected~=true],
#menu .menu_top .allLanguages a:hover { color: var(--nero); }

/* ---------------------------------------------------------------- MENU PRINCIPALE */
.mainMenu {
    position: relative;
    width: 100%;
    margin: 0;
    text-align: right;
}

.mainMenu ul {
    display: inline-block;
    margin: 7px auto 0 auto;
    padding: 0;
    border: 0;
    list-style: none;
}

.mainMenu ul li {
    display: inline-block;
    padding: 10px;
    text-align: center;
    background-color: transparent;
    color: var(--nero);
    font-weight: 700;
    font-size: 16px;
}

.mainMenu ul li:hover,
.mainMenu ul li[mod~=active] { background-color: #f2f2f2; }

.mainMenu ul li a,
.mainMenu ul li a:hover { color: var(--nero); }

/* apertura del megamenu in hover, e blocco al click (classe messa da web_builder.js) */
.mainMenu ul li:hover > .megamen,
.mainMenu ul li.megamen_pinned > .megamen {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    box-shadow: rgba(0, 0, 0, .12) 0 10px 20px -10px;
    transition: opacity .22s ease,
                transform .28s cubic-bezier(.22, .61, .36, 1),
                box-shadow .28s ease,
                visibility 0s;
}

/* --- le colonne entrano una dopo l'altra, dal basso --- */
.megamen .a_fifth_mega {
    opacity: 0;
    transform: translateY(12px);
    /* in uscita: dissolvenza breve e nessuno spostamento, la cascata
       si vede solo in entrata */
    transition: opacity .12s ease, transform 0s linear .12s;
}

.mainMenu ul li:hover > .megamen .a_fifth_mega,
.mainMenu ul li.megamen_pinned > .megamen .a_fifth_mega {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* il ritardo cresce di 55ms per colonna: la cascata parte dopo il pannello */
.mainMenu ul li:hover > .megamen .a_fifth_mega:nth-child(1),
.mainMenu ul li.megamen_pinned > .megamen .a_fifth_mega:nth-child(1) { transition-delay: .10s; }
.mainMenu ul li:hover > .megamen .a_fifth_mega:nth-child(2),
.mainMenu ul li.megamen_pinned > .megamen .a_fifth_mega:nth-child(2) { transition-delay: .155s; }
.mainMenu ul li:hover > .megamen .a_fifth_mega:nth-child(3),
.mainMenu ul li.megamen_pinned > .megamen .a_fifth_mega:nth-child(3) { transition-delay: .21s; }
.mainMenu ul li:hover > .megamen .a_fifth_mega:nth-child(4),
.mainMenu ul li.megamen_pinned > .megamen .a_fifth_mega:nth-child(4) { transition-delay: .265s; }
.mainMenu ul li:hover > .megamen .a_fifth_mega:nth-child(5),
.mainMenu ul li.megamen_pinned > .megamen .a_fifth_mega:nth-child(5) { transition-delay: .32s; }

/* --- l'icona della colonna entra in scala, un filo dopo i testi --- */
.megamen .a_fifth_mega ul li[mod~=img] {
    transform: scale(.92);
    transform-origin: right top;
}
.mainMenu ul li:hover > .megamen .a_fifth_mega ul li[mod~=img],
.mainMenu ul li.megamen_pinned > .megamen .a_fifth_mega ul li[mod~=img] {
    transform: scale(1);
}

/* --- sottolineatura che cresce sotto le voci --- */
.megamen .a_fifth_mega ul li p a,
.megamen .a_fifth_mega ul li span a {
    background-image: linear-gradient(var(--giallo), var(--giallo));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size .25s ease, color .2s ease;
}
.megamen .a_fifth_mega ul li p a:hover,
.megamen .a_fifth_mega ul li span a:hover { background-size: 100% 2px; }

/* --- passaggio da un megamenu all'altro ---
   Finche' il mouse e' dentro la barra, il pannello che si sta lasciando
   sparisce quasi subito: senza questo, per un istante se ne vedrebbero due
   sovrapposti, dato che occupano la stessa posizione. */
.mainMenu ul:hover > li:not(:hover) > .megamen {
    transition: opacity .07s ease,
                transform 0s linear .07s,
                box-shadow .07s ease,
                visibility 0s linear .07s;
}
.mainMenu ul:hover > li:not(:hover) > .megamen .a_fifth_mega {
    transition: opacity .05s ease, transform 0s linear .05s;
}

/* una voce bloccata al click cede il posto a quella che stai sorvolando,
   e torna visibile appena esci dalla barra */
.mainMenu ul:hover > li:not(:hover).megamen_pinned > .megamen {
    visibility: hidden;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0) 0 10px 20px -10px;
}

/* chi preferisce meno movimento vede solo la dissolvenza */
@media (prefers-reduced-motion: reduce) {
    .megamen,
    .megamen .a_fifth_mega,
    .megamen .a_fifth_mega ul li[mod~=img] {
        transform: none !important;
        transition-duration: .15s !important;
        transition-delay: 0s !important;
    }
}

/* la voce bloccata resta evidenziata come quella attiva */
.mainMenu ul li.megamen_pinned { background-color: #f2f2f2; }
.mainMenu ul li > t { cursor: pointer; }

/* ---------------------------------------------------------------- MEGAMENU */
.megamen {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    top: 52px;
    left: 0;
    width: 100%;
    max-width: 1920px;
    /* stesso margine laterale del resto del sito (il logo sta a left:3%).
       Con border-box le cinque colonne restano 20% dello spazio interno. */
    padding: 0 3%;
    box-sizing: border-box;
    text-align: left;
    background-color: #f2f2f2;
    border-top: solid 1px #f2f2f2;
    border-bottom: solid 1px #f2f2f2;

    /* Il pannello entra scendendo di pochi pixel. In uscita invece resta fermo
       e sfuma piu' in fretta: in chiusura il movimento fa sembrare tutto lento.
       visibility cambia solo a fine dissolvenza, altrimenti sparirebbe di colpo. */
    transform: translateY(-10px);
    box-shadow: rgba(0, 0, 0, 0) 0 10px 20px -10px;
    transition: opacity .16s ease,
                transform 0s linear .16s,
                box-shadow .16s ease,
                visibility 0s linear .16s;
}

.megamen .a_fifth_mega {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding: 30px 0 20px 0;
}

.megamen .a_fifth_mega ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.megamen .a_fifth_mega ul li {
    display: inline-block;
    vertical-align: top;
    width: 55%;
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 25px;
}

/* icona della colonna */
.megamen .a_fifth_mega ul li[mod~=img] {
    width: 45%;
    max-width: 60px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) 0;
    background-size: contain;
    cursor: pointer;
    transition: all linear .1s;
}
.megamen .a_fifth_mega ul:hover > li[mod~=img] {
    height: 100px;
    background-position: calc(100% - 10px) 0;
}
/* Scurimento del titolo macro al passaggio del mouse sulla colonna.
   Niente !important e niente nero pieno: il nero e' riservato alla macro
   attiva, che lo riceve come stile inline (con sottolineatura) e deve
   restare distinguibile dalle altre. */
.megamen .a_fifth_mega ul:hover > li div a { color: #333; }

.megamen .a_fifth_mega div,
.megamen .a_fifth_mega ul li span,
.megamen .a_fifth_mega ul li p {
    display: block;
    margin: 0 0 9px 0;
    line-height: 18px;
    color: var(--nero);
    font-size: 16px;
}

/* voci COMPANY */
.megamen .a_fifth_mega ul li p { font-weight: 600; }

/* titolo macro */
.megamen .a_fifth_mega ul li div a {
    font-weight: 900;
    color: #575556;
    transition: all linear .3s;
}

/* categorie sotto la macro */
.megamen .a_fifth_mega ul li span,
.megamen .a_fifth_mega ul li span a { font-weight: 500 !important; }

.megamen .a_fifth_mega div a:hover,
.megamen .a_fifth_mega ul li span a:hover { color: #555 !important; }

/* ---------------------------------------------------------------- RICERCA */
#mobileSearchBlock { display: none; }

#searching {
    display: none;
    margin-right: 0;
}

#searching input[type="text"] {
    width: 190px;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    background-color: transparent;
    color: var(--nero);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    appearance: none;
    outline: none;
}
#searching input[type="text"].opened {
    width: 180px;
    padding: 5px 8px;
    transition: all 1s;
}
#searching img {
    max-width: 22px;
    margin: 2px 14px 0 -5px;
    vertical-align: top;
}

#mobileMenu { display: none; }

/* ---------------------------------------------------------------- SLIDESHOW */
.flexslider {
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: transparent;
    zoom: 1;
}

.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }

.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
.flexslider .slides img  { width: 100%; display: block; }
.flexslider .slides      { zoom: 1; }
.no-js .slides > li:first-child { display: block; }

.slides:after {
    content: "\0020";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.flex-viewport { max-height: 2000px; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }

/* la slide: immagine di sfondo a tutta larghezza, proporzioni da
   slideshow_format in config.php (2000x800). Niente altezza fissa,
   cosi' l'immagine copre davvero tutta la larghezza dello schermo. */
.flexslider .slides > li { position: relative; }

.flexslider .slides .inside {
    width: 100%;
    aspect-ratio: 2000 / 800;
    max-height: 90vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* --- slideshow della home: altezza riservata prima che parta il JS ---
   Lo spazio e' occupato dal primo paint, quindi la pagina non salta piu'
   quando flexslider si inizializza e quando le immagini arrivano.
   L'altezza la decide SOLO questa regola: set_heights() non scrive piu'
   height inline, altrimenti i due valori litigano a ogni resize. */
.home_slider,
.home_slider .slides,
.home_slider .flex-viewport { height: var(--slide-h); }

.home_slider .slides .inside {
    height: var(--slide-h);
    aspect-ratio: auto;
    max-height: none;
}

/* Senza JS tutte le <li> sono display:none e il contenitore resterebbe
   vuoto: la prima slide si vede subito, poi flexslider fa il suo. */
.home_slider .slides > li:first-child { display: block; }

/* flexslider si mette addosso .loading in fase di init: il tetto di 300px
   sul viewport rifarebbe saltare la pagina per un istante. */
.home_slider.loading .flex-viewport,
.home_slider .flex-viewport { max-height: none; }

/* pallini di navigazione */
.flex-control-nav {
    width: auto;
    position: absolute;
    bottom: 14px;
    left: 0; right: 0;
    z-index: 110;
}
.flex-control-nav li { margin: 0 4px; display: inline-block; }

.flex-control-paging li a {
    width: 11px; height: 11px;
    display: block;
    background-color: transparent;
    border: solid 1px var(--giallo);
    border-radius: 6.5px;
    text-indent: -9999px;
    cursor: pointer;
}
.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active {
    background: var(--giallo);
    border: solid 1px var(--giallo);
}
.flex-control-paging li a.flex-active { cursor: default; }

/* --- frecce avanti/indietro: nascoste, compaiono in hover sullo slider --- */
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }

.flex-direction-nav a {
    position: absolute;
    top: 45%;
    display: block;
    width: 60px;
    height: 150px;
    margin: -20px 0 0;
    overflow: hidden;
    opacity: 0;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
    transition: all .3s ease;
}
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }

.flexslider:hover .flex-prev { opacity: .7; left: 10px; }
.flexslider:hover .flex-next { opacity: .7; right: 10px; }
.flexslider:hover .flex-prev:hover,
.flexslider:hover .flex-next:hover { opacity: 1; }

.flex-direction-nav .flex-disabled { opacity: 0 !important; cursor: default; }

.flex-direction-nav a img { width: auto; max-width: 100%; border: 0; }

/* ---------------------------------------------------------------- CAPTION SLIDE */
.flex-caption {
    position: absolute;
    top: 40%;
    left: 0; right: 0;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    color: var(--bianco);
    text-align: center;
    transition: all .5s;
    z-index: 20;
}

.flex-caption_active { transition: all .8s; margin-right: 0; opacity: 1; }

.caption_title {
    font-size: 70px;
    line-height: 80px;
    font-weight: 900;
    color: var(--bianco);
    padding: 0;
    text-transform: uppercase;
}

.caption_more {
    font-size: 60px;
    line-height: 80px;
    font-weight: 400;
    color: var(--bianco);
    text-transform: uppercase;
}

.caption_btn {
    display: inline-block;
    margin: 30px 0 0 0;
    padding: 6px 35px;
    background-color: var(--giallo);
    color: var(--nero);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 2px;
    cursor: pointer;
}

.caption_down_arrow {
    position: absolute;
    bottom: 60px;
    left: 0; right: 0;
    margin: 0 auto;
    width: 94px;
    z-index: 10;
    cursor: pointer;
}

/* ---------------------------------------------------------------- WRAPPER HOME */
.pagewrap_home {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background-color: var(--bianco);
}

#home_content {
    width: calc(100% - 100px);
    padding: 50px;
    line-height: 32px;
    font-size: 26px;
    font-weight: 300;
    color: var(--grigio-testo);
}

#home_content .home_bold {
    font-weight: 600;
    color: var(--grigio-testo);
    margin: 0 0 30px 0;
}

.home_content_2 { margin: 30px 0 0 0; }

.home_content_2 .home_bold_bolder {
    margin: 0 0 20px 0;
    font-weight: 800;
    color: var(--grigio-testo);
}

/* ---------------------------------------------------------------- BOX HOME (3 colonne) */
#ul_boxes {
    margin: 0 0 30px 0;
    padding: 0;
    list-style-type: none;
    /* i tre li sono inline-block e la loro larghezza somma esattamente 100%:
       azzerando il font-size gli spazi bianchi del markup non occupano posto */
    font-size: 0;
}

#ul_boxes li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    /* tre colonne: un terzo meno il padding proprio e la quota di margin */
    width: calc(100% / 3 - 30px - 30px / 3);
    height: 200px;
    padding: var(--gap);
    background-color: var(--giallo);
    background-size: cover;
    background-position: center center;
    color: var(--grigio-testo);
    font-size: 20px;
    line-height: 27px;
    font-weight: 400;
    border: 0;
    box-shadow: var(--ombra);
}

#ul_boxes li[mod~=second] {
    margin: 0 var(--gap);
    background-color: var(--grigio-chiaro);
}

/* --- box digital library / video --- */
.home_search_box_logo {
    position: relative;
    width: 100%;
    height: 100%;
}

.home_search_box_logo img {
    max-width: 50%;
    max-height: 200px;
    margin: 0 10px 0 0;
    float: left;
    vertical-align: top;
    cursor: pointer;
}

.home_search_box_logo .intro {
    font-size: 26px;
    line-height: 30px;
    font-weight: 400;
    padding: 5px 0;
    color: var(--bianco);
}

.home_search_box_logo .bolder {
    font-size: 34px;
    line-height: 34px;
    font-weight: 900;
    color: var(--bianco);
}

.home_search_box_logo .regular {
    margin: 6px 0 0 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: var(--grigio-testo);
}

.home_search_box_pulsante {
    position: absolute;
    bottom: 0;
    margin: 0 0 7px 0;
    padding: 10px 20px;
    background-color: var(--grigio-testo);
    color: var(--bianco);
    font-family: var(--font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: all ease-in .3s;
}
.home_search_box_pulsante:hover { background-color: var(--bianco); color: var(--nero); }

/* --- box news --- */
.home_news_logo {
    position: absolute;
    top: 20px;
    left: var(--gap);
    font-size: 26px;
    line-height: 30px;
    font-weight: 300;
    color: var(--giallo);
    transition: all ease .6s;
}

.home_news_box,
.home_news_box_sfondo {
    position: absolute;
    top: var(--gap);
    right: var(--gap);
    height: 180px;
    width: 55%;
    padding: 10px;
    transition: all ease .4s;
}

.home_news_box {
    background-color: #575656e3;
    color: var(--bianco);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

/* strato scuro che compare in hover */
.home_news_box_sfondo { background-color: var(--nero); opacity: 0; }

.home_news_title { font-weight: 700; padding-right: 10px; }

.home_news_read_all {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-weight: 600;
    color: var(--giallo);
    cursor: pointer;
}

#ul_boxes li:hover .home_news_box_sfondo { opacity: .9; }
#ul_boxes li:hover .home_news_logo       { color: var(--bianco); }

/* --- pulsante newsletter --- */
.home_newsletter_btn {
    margin: 5px 0 0 0;
    padding: 10px 20px;
    background-color: var(--giallo);
    color: var(--nero);
    font-family: var(--font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 0;
    border-radius: 2px;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: all ease-in .6s;
}
.home_newsletter_btn:hover { background-color: var(--grigio-testo); color: var(--bianco); }

/* ---------------------------------------------------------------- BLOCCHI MACRO */
.macro_container {
    margin: 50px 0 0 0;
    clear: both;
    cursor: pointer;
    box-shadow: #ebe8e8 6px 4px 15px;
}

.macro_big_left,
.macro_big_left_hide,
.macro_big_right {
    display: inline-block;
    vertical-align: top;
    width: 65.2%;
    height: 450px;
    padding: var(--gap);
    background-color: #ddd;
    background-size: cover;
    background-position: center center;
    border: 0;
    text-align: left;
}

/* duplicato della foto: nascosto su desktop, usato su mobile */
.macro_big_left_hide { display: none; }

.macro_small_right,
.macro_small_left {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100% / 3 - 30px - 30px / 3);
    height: 440px;
    overflow: hidden;
    padding: 20px 10px 20px 20px;
    background-color: var(--bianco);
    border: 0;
    text-align: left;
    transition: all ease-in .2s;
}

.home_macro_title {
    font-size: 34px;
    line-height: 34px;
    font-weight: 900;
}

.home_macro_sub_title {
    margin: 10px 0 0 0;
    font-size: 26px;
    line-height: 28px;
    font-weight: 900;
    color: var(--grigio-testo);
    letter-spacing: .01em;
    transition: all ease-in .4s;
}

.home_macro_desc {
    margin: 10px 10px 0 0;
    max-height: 200px;
    overflow: hidden;
    color: var(--grigio-testo);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

.home_macro_btn {
    position: absolute;
    bottom: var(--gap);
    left: 20px;
    padding: 10px 20px;
    background-color: var(--giallo);
    color: var(--nero);
    font-family: var(--font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    border: 0;
    border-radius: 2px;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: all ease-in .6s;
}

.macro_container:hover .macro_small_right,
.macro_container:hover .macro_small_left { background-color: var(--giallo); }

.macro_container:hover .home_macro_btn {
    background-color: var(--grigio-testo);
    color: var(--bianco);
}

/* ---------------------------------------------------------------- FRECCIA SU */
#up_arrow {
    position: fixed;
    bottom: 32px;
    right: 3%;
    max-width: 80px;
    display: none;
    z-index: 150;
    cursor: pointer;
}

/* ---------------------------------------------------------------- FOOTER */
.pagewrap_footer {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: var(--giallo);
    z-index: 100;
}

#footer {
    clear: both;
    width: 94%;
    padding: 30px 3%;
    text-align: left;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

#footer .one { float: left; width: 65%; text-align: left; }
#footer .two { float: left; width: 35%; text-align: right; }

#footer .two img       { margin: 9px 10px 0 0; }
#footer .two img:hover { opacity: .8; }

#footer .two div {
    display: inline-block;
    vertical-align: top;
    padding: 5px 10px;
    margin: 5px 90px 0 10px;
    background-color: var(--grigio-scuro);
    border-radius: 2px;
    font-weight: 500;
}
#footer .two div a     { color: var(--giallo); }
#footer .two div:hover { background-color: #333; }

.copy {
    width: 100%;
    padding: 1% 0 0 0;
    text-align: right;
    font-size: 60%;
    color: #aaa;
}
.copy a       { color: #bbb; }
.copy a:hover { color: #777; }

.xtras {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: var(--bianco);
    font-size: 90%;
    cursor: default;
}
.xtras a      { color: var(--bianco); text-decoration: none; }
.xtras span   { margin: 0 1%; }

/* =====================================================================
   PAGINE (page.php)
   ===================================================================== */
.page_block {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background-color: var(--bianco);
    min-height: 750px;
    z-index: 1000;
}

#page_flexslider { background-color: #f4f4f4; }

#slide_container { margin: 0 auto; padding: 0; text-align: center; }

/* --- briciola / titolo --- */
#titolo {
    display: block;
    width: 97%;
    margin: 0;
    padding: 1% 0 1% 3%;
    color: #444;
    font-size: 100%;
    font-weight: normal;
    z-index: 100;
}
#titolo span   { display: inline-block; margin: 0; color: var(--grigio-testo); font-weight: bold; }
#titolo a      { color: var(--nero); }
#titolo a:hover{ color: #333; }

/* animate da web_builder.js */
.categoria_title_opened          { position: relative; left: -50%; opacity: 0; }
.categoria_title_opened_animated { position: relative; left: 0; opacity: 1; transition: all .8s; }
#title_arrow                     { opacity: 0; }

/* --- corpo pagina --- */
#basic {
    width: 94%;
    padding: 0 3%;
    font-size: 16px;
    line-height: 20px;
}
#basic p { margin: 0 0 10px 0; }

/* con gallery laterale il testo passa a due colonne */
#basic[mod~=right_galleries] {
    float: left;
    width: 60.5%;
    padding: 0 1.5% 0 3%;
}

/* --- gallery --- */
#page_gallery { float: none; width: 100%; padding: 0; }
#page_gallery.laterale { float: right; width: 35%; }

#normal_gallery,
.full_gallery_ul {
    margin: 0 0 10px 0;
    padding: 0;
    clear: both;
    list-style: none;
}

.gallery_li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: .5%;
    list-style: none;
}

.gallery_piccola { width: 48%; height: auto; padding: 0 0 2% 2%; }
.gallery_grande  { width: 98%; height: auto; padding: 0 0 2% 2%; }

.full_gallery_row {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2% 0 0 0;
}
.full_gallery_row:first-child { padding-top: 0; }

.full_gallery_caption { margin: 1% 0 2% 0; }

.full_gallery_left,
.full_gallery_right {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 49.5%;
    height: auto;
    margin: 0 0 1% 0;
    list-style: none;
}
.full_gallery_left  { padding: 0 0 0 .5%; }
.full_gallery_right { padding: 0 .5% 0 0; }

.full_gallery_dida {
    position: absolute;
    bottom: 0;
    display: none;
    max-width: 86%;
    padding: 1% 3% 0 3%;
    background-color: var(--bianco);
    opacity: .8;
    font-size: 90%;
    border-radius: 0 6px 0 0;
}
.full_gallery_dida.visibile { display: block; background-color: var(--grigio-chiaro); }
.full_gallery_left .full_gallery_dida { right: 0; border-radius: 6px 0 0 0; }

.lazy_gallery {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    background-image: url(/images/buttons/transparent.png);
}
.lazy { margin: 0; padding: 0; border: 0; vertical-align: top; }

/* --- separatori --- */
.barra {
    clear: both;
    width: 100%;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    margin: 4% 0;
    background-color: #ddd;
}

.barrina {
    width: 100%;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
    margin: 1% 0;
    background-color: #ccc;
}

/* --- allegati --- */
.allegati_block  { margin: 0 0 5% 0; }
.allegati_label  { margin: 0 2%; color: #888; font-size: 11px; }
.allegati_ul     { margin: 0; padding: 0; list-style-type: none; }
.allegati_ul li  {
    display: inline-block;
    margin: 0 2% 0 0;
    color: #484e72;
    font-size: 110%;
    cursor: pointer;
}
.allegato_size   { color: #444; font-size: 80%; }

/* --- condivisione --- */
#social { clear: both; padding: 0 3%; }
.social_label { margin: 2% 2% 0 13px; color: #888; font-size: 11px; }

/* --- condivisione: markup generato da jquery.share, aspetto tutto da CSS.
   I path delle icone sono relativi a questo file, quindi /css/images/... --- */
.share-square {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 2px 0 0;
    line-height: 0;
    opacity: 1;
    background: url("images/social-icons.png") no-repeat left top transparent;
    transition: all .2s linear;
}
.share-square:hover { opacity: .8; }

.share-square-email    { background: url("images/email.png")    no-repeat; background-size: contain; }
.share-square-facebook { background: url("images/facebook.png") no-repeat; background-size: contain; }
.share-square-twitter  { background: url("images/twitter.png")  no-repeat; background-size: contain; }
.share-square-linkedin { background: url("images/linkedin.png") no-repeat; background-size: contain; }

#page_content {
    padding: 1% 0;
    border-top: solid 1px var(--grigio-chiaro);
    border-bottom: solid 1px var(--grigio-chiaro);
    font-size: 80%;
}

/* --- overlay --- */
.overlay_clouder {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 400;
    background-color: var(--nero);
    opacity: .8;
    background-image: url(/images/buttons/preloader.gif);
    background-repeat: no-repeat;
    background-position: center center;
}

/* =====================================================================
   CANALE NEWS (includes/news.php)
   ===================================================================== */
.newsContainer {
    width: 94%;
    padding: 0 3%;
}

/* --- colonna sinistra: la scheda --- */
.schede_left {
    float: left;
    width: 58%;
    margin: -35px 0 0 0;
    padding-right: 2%;
    font-size: 16px;
    line-height: 20px;
}
.schede_left img { max-width: 100%; }

.scheda_date { font-size: 14px; }

.scheda_title {
    margin: 1% 0 0 0;
    color: var(--grigio-scuro);
    font-size: 26px;
    line-height: 30px;
    font-weight: 900;
}

.scheda_s_title {
    margin: 0 0 1% 0;
    color: #333;
    font-size: 16px;
    font-weight: 400;
}

/* --- allegati della scheda --- */
.allegati {
    margin: 2% 0;
    padding: 1% 0 1% 2%;
    background-color: cadetblue;
    color: var(--bianco);
    font-size: 110%;
}
.allegati_label_inline { color: #ddd; font-size: 90%; }
.allegato_link { cursor: pointer; }

/* --- colonna destra: le altre news --- */
.schede_right {
    float: left;
    width: 37.7%;
    padding-left: 2%;
    border-left: solid 1px var(--grigio-chiaro);
}

.striscia {
    width: calc(100% - 40px);
    margin: 0 0 5% 0;
    padding: 5px 20px;
    background-color: #f2f2f2;
    color: #444;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
}

.div_cat_img {
    position: relative;
    float: left;
    width: 80px;
    margin: 0 0 10px 0;
}
.div_cat_img img { width: 100%; max-width: 80px; }

.div_cat_title {
    float: left;
    width: calc(100% - 90px);
    padding: 0 0 0 10px;
    line-height: 17px;
}

/* dalla quinta news in poi non c'e' miniatura: il blocco occupa tutta la riga */
.div_cat_title.larga { width: 100%; padding-left: 0; }

.schede_right div[mod~=date]  { font-size: 14px; }
.schede_right div[mod~=title] { margin: 5px 0 0 0; }
.schede_right div[mod~=title] a {
    color: var(--nero);
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
}
.schede_right div[mod~=fonte] { color: #777; font-size: 14px; }
.schede_right div[mod~=desc]  { font-size: 14px; line-height: 18px; }

.cat_barra {
    width: 80%;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
    margin: 20px 0;
    background-color: var(--grigio-chiaro);
}

.news_vuoto { padding: 3%; }

/* =====================================================================
   DIGITAL LIBRARY (includes/library.php)
   ===================================================================== */
.libraryPreviewBoxes {
    width: 94%;
    padding: 10px 3%;
    font-size: 0;
}
.libraryPreviewBoxes div {
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 90px) / 4);
    margin: 0 30px 30px 0;
    background-color: #f2f2f2;
    text-align: left;
    cursor: pointer;
}
.libraryPreviewBoxes div:hover      { background-color: var(--giallo); }
.libraryPreviewBoxes div:nth-child(4n) { margin-right: 0; }
/* height:auto e' necessario: senza, il browser ignora il rapporto ricavato
   dagli attributi width/height dell'img e non riserva l'altezza */
.libraryPreviewBoxes img {
    width: 100%;
    height: auto;
    vertical-align: top;
    background-color: #f2f2f2;   /* segnaposto mentre l'immagine arriva */
}
.libraryPreviewBoxes p {
    margin: 0;
    padding: 2px 5px;
    color: #575556;
    font-size: 16px;
    line-height: 18px;
    font-weight: 900;
}

/* striscia con il nome della macro */
.box_txt {
    width: 94%;
    margin: 0 auto;
    padding: 10px 3%;
    background-color: var(--giallo);
    color: #575556;
    text-align: left;
    font-size: 34px;
    line-height: 36px;
    font-weight: 900;
    cursor: pointer;
}
.box_txt:hover { background-color: #ffdc5d; }

/* il titolone della macro non e' cliccabile: fa solo da ancora */
.box_txt.titolone {
    scroll-margin-top: 20px;
    margin: 50px 0 0 0;
    background-color: transparent;
    cursor: default;
}
.box_txt.titolone:hover { background-color: transparent; }

/* titolo di categoria dentro l'elenco */
.box_txt.categoria {
    margin: 0 0 15px 0;
    padding: 0;
    background-color: transparent;
    font-size: 26px;
    cursor: default;
}
.box_txt.categoria:hover { background-color: transparent; }

.sottocategoriaTitolo {
    margin: 20px 0 0 0;
    padding: 10px 0 20px 0;
    border-top: solid 2px #ddd;
    color: #ffca0c;
    text-align: left;
    font-size: 22px;
    line-height: 24px;
    font-weight: 900;
}

.elenco_prodotti {
    width: 94%;
    padding: 0 3% 2% 3%;
    background-color: var(--bianco);
}

.prodotti_ul {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    font-size: 0;   /* i li sono inline-block e la larghezza somma esattamente 100% */
}

/* quattro per riga: 100% meno i 3 margini da 30px e i 4 bordi da 2px */
.prodotti_ul li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 90px - 8px) / 4);
    margin: 0 30px 30px 0;
    padding: 0;
    border: solid 1px var(--bianco);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    color: #575556;
    text-align: left;
    cursor: pointer;
    transition: all .4s;
}
.prodotti_ul li:nth-child(4n) { margin-right: 0; }

.prodotti_ul li:hover {
    color: var(--nero);
    border: solid 1px #ffca0c;
    background-color: var(--giallo);
}
.prodotti_ul li:hover > div,
.prodotti_ul li:hover > p { padding-left: 10px; }

.prodotti_ul li img { width: 100%; vertical-align: top; }

/* titolo prodotto */
.prodotti_ul li div {
    margin: 10px 0;
    font-size: 22px;
    line-height: 24px;
    font-weight: 500;
    transition: all .4s;
}

/* mini descrizione */
.prodotti_ul li p {
    width: calc(100% - 10px);
    margin: -8px 0 10px 0;
    padding: 0 10px 0 0;
    color: var(--grigio-testo);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    transition: all .4s;
}

.just_opened { background-color: var(--giallo); }

.prodotti_associati_label {
    margin: 30px 0 0 0;
    color: #575556;
    font-weight: 900;
}
.prodotti_ul[mode~=digital_library] li { background-color: #f2f2f2; }

/* =====================================================================
   DOWNLOAD (includes/download.php)
   ===================================================================== */
.downloadWrap {
    width: 94%;
    padding: 0 3%;
    font-size: 130%;
}

#welcome .welcome_link { margin-left: 20px; }

.downloadPage { width: 100%; }

.download_category {
    margin: 10px 0;
    border-bottom: solid 1px var(--bianco);
    color: var(--giallo);
    font-size: 22px;
    line-height: 34px;
    font-weight: 900;
}

.downloadPage ul { margin: 0; padding: 0; list-style-type: none; }

.downloadPage ul li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 160px) / 5);
    margin: 0 40px 40px 0;
}
.downloadPage ul li:nth-child(5n) { margin-right: 0; }

.downloadPage ul li img { width: 100%; vertical-align: top; border: 0; cursor: pointer; }
.downloadPage ul li p img { aspect-ratio: 16 / 9; object-fit: cover; }

.downloadPage ul li div {
    margin: 10px 0 0 0;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    text-transform: uppercase;
}
.downloadPage ul li div a { color: #555; font-weight: 700; }

.downloadPage ul li span { color: #aaa; font-size: 14px; line-height: 14px; font-weight: 400; }

.downloadPage ul li:hover > div a,
.downloadPage ul li:hover > span { color: var(--nero); }

/* miniatura video con l'icona play al centro */
.downloadPage ul li p { position: relative; margin: 0; padding: 0; transition: all .4s; }
.downloadPage ul li p .video_icon {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    max-width: 32px;
    max-height: 32px;
    background: url(/images/buttons/videoBig.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: all .2s;
}
.downloadPage ul li:hover > p .video_icon { max-width: 42px; max-height: 42px; }

.downloadPage a          { color: var(--giallo); font-weight: 900; line-height: 18px; }
.downloadPage a:hover    { color: #555; }

.nessun_risultato { margin: 20px 0 0 0; font-style: italic; }

/* =====================================================================
   PROJECTS (includes/projects.php)
   ===================================================================== */
.referenze { width: 100%; padding: 0; }

.referenze .title { display: none; }

.referenze .naviga {
    float: left;
    width: 97%;
    padding: 0 3% 0 0;
    text-align: right;
}
.referenze .naviga select {
    width: 99%;
    max-width: 220px;
    margin: 0 0 2px 5px;
    padding: 10px 15px;
    background-color: #f2f2f2;
    background-image: url(/images/buttons/up_down.png);
    background-repeat: no-repeat;
    background-position: 97% 50%;
    color: #333;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    border: 0;
    border-radius: 0;
    appearance: none;
    outline: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.referenze .naviga select[mod~=active] { font-weight: bold; }

.referenze .results {
    width: 100%;
    margin: .5% 0 0 0;
    background-color: var(--bianco);
}
.referenze .results ul { margin: 0; padding: 0; list-style: none; }

.referenze .results ul li {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin: 0;
    padding: 0;
    background-color: #444;
    list-style: none;
}
.referenze .results ul li[mode~=darker] { background-color: #333; }
.referenze .results ul li:hover         { background-color: var(--nero); }

/* La thumb su disco e' 330x330 quadrata (referenze_thumb_width). aspect-ratio
   tiene la griglia regolare anche sulle vecchie miniature non quadrate, e
   object-fit le ritaglia invece di deformarle. Le larghezze delle tessere
   sono scelte per non superare mai i 330px: vedi i @media in fondo al file.

   aspect-ratio serve anche a un'altra cosa: il lazy load parte con un <img>
   SENZA src (l'indirizzo sta in data-original), quindi senza rapporto imposto
   il box nasce alto zero e la pagina "scatta" quando l'immagine arriva. Con
   width al 100% e height auto l'altezza si calcola dal rapporto, non dal file,
   e lo spazio e' gia' giusto al primo paint. */
.referenze .results ul li > a {
    display: block;          /* senza, l'anchor inline lascia lo spazio del rigo sotto l'immagine */
    line-height: 0;          /* figlio diretto: l'anchor del titolo sta dentro il div e non e' toccato */
}
.referenze .results ul li img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    vertical-align: top;
    border: 0;
    background-color: #3a3a3a;   /* riempie il box finche' l'immagine non c'e' */
}

.referenze .results ul li div {
    width: 85%;
    padding: 2% 5%;
    color: var(--bianco);
    font-size: 80%;
    line-height: 18px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.referenze .results ul li div a { color: var(--bianco); }

/* --- scheda singola --- */
.referenze .scheda_left  { float: left; width: 62%; vertical-align: top; }
.referenze .scheda_right {
    float: left;
    width: 34%;
    padding: 0 2%;
    color: var(--grigio-testo);
    vertical-align: top;
}
.referenze .scheda_left div  { margin: 0 0 5px 4.34%; }
.referenze .scheda_right div { font-size: 16px; line-height: 20px; font-weight: 500; }

.referenze_title {
    margin: 0 0 10px 0;
    font-size: 34px;
    line-height: 34px;
    font-weight: 900;
}
.referenze_categories .spazio { display: inline-block; margin: 0 10px 0 0; }

/* larghezza automatica: il margine sinistro arriva da .scheda_left div,
   con width:100% lo slider sbordava fuori dalla colonna */
.referenze .scheda_left .referenze_slider {
    position: relative;
    width: auto;
    margin: 10px 0 5px 4.34%;
    background-color: var(--grigio-chiaro);
    overflow: hidden;
}

/* dentro lo slider i div non devono ereditare il margine della colonna */
.referenze .scheda_left .referenze_slider div { margin: 0; }

.referenze_slider .slides li { position: relative; }
.referenze_slider .slides img { width: 100%; vertical-align: top; }

.referenze_files { padding: 4px; color: #4180b6; }
.referenze_files .file_link { display: inline-block; cursor: pointer; }

/* =====================================================================
   VIDEO (includes/video.php)
   ===================================================================== */
.container_cat { width: 94%; padding: 0 3%; }

.videoContainer {
    display: block;
    width: 94%;
    margin: 0 3%;
    font-size: 0;   /* due per riga, larghezza esatta: niente spazi bianchi */
}

.videoContainer div {
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 40px) / 2);
    margin: 0 40px 40px 0;
    color: #555;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    text-transform: uppercase;
}
.videoContainer div:nth-child(2n) { margin-right: 0; }

/* titolo del video nel listing */
.videoContainer div a {
    display: block;
    margin: 15px 0 30px 0;
    color: #555;
}

.videoContainer div p {
    position: relative;
    margin: 0;
    padding: 0;
    transition: all ease .5s;
}
.videoContainer div p img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;   /* la 0.jpg e' 4:3: senza ritaglio spezza la griglia */
    vertical-align: top;
    border: 0;
    cursor: pointer;
}
.videoContainer div p:hover { box-shadow: #999 10px 10px 10px; }

.videoContainer .video_icon {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    max-width: 48px;
    max-height: 48px;
    background: url(/images/buttons/videoBig.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: all .2s;
}
.videoContainer div p:hover > .video_icon { max-width: 64px; max-height: 64px; }

/* --- video aperto --- */
.video_title {
    margin: 0 0 20px 0;
    color: var(--grigio-testo);
    font-size: 26px;
    line-height: 30px;
    font-weight: 900;
    letter-spacing: .01em;
}

.video_player { margin: 1% 0; }

.media_back {
    display: inline-block;
    vertical-align: top;
    margin: 5px 90px 0 10px;
    padding: 5px 10px;
    background-color: var(--grigio-scuro);
    color: var(--bianco);
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
}
.media_back:hover { background-color: #272727; }

/* =====================================================================
   NEWSLETTER (includes/newsletter.php)

   L'impaginazione dei campi arriva dal CSS classic di Mailchimp caricato
   dall'include. Qui ci sono solo gli override del sito.
   ===================================================================== */
.newsletter {
    width: 94%;
    margin: 2% 3%;
    padding: 0;
    background-color: var(--bianco);
}

/* campo trappola: fuori schermo, mai compilato da un utente vero */
.mc_honeypot { position: absolute; left: -5000px; }

/* =====================================================================
   CATALOGO (includes/catalogo.php + scripts/catalogo.php)

   .container_cat non e' qui: sta gia' nella sezione VIDEO, con la stessa
   identica regola. E' condivisa fra i due canali.
   ===================================================================== */

/* --- titolo della macro --- */
.bigTitle {
    width: 94%;
    margin: 15px 3% 20px 3%;
    color: var(--grigio-testo);
    font-size: 34px;
    line-height: 34px;
    font-weight: 900;
}

.minorTitle {
    width: calc(94% - 5px);
    margin: 0 0 10px 5px;
    padding: 0 3%;
    color: var(--grigio-testo);
    font-size: 16px;
    font-weight: 600;
}

/* --- box delle categorie sotto la macro --- */
.preview_container {
    width: 94%;
    margin: 0 3%;
    font-size: 0;   /* i .preview_4 sono inline-block e sommano 100% */
}

/* quattro per riga: 100% meno i 3 margini da 30px */
.preview_4 {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 90px) / 4);
    margin: 0 30px 20px 0;
}
.preview_4:nth-child(4),
.preview_4:nth-child(8) { margin-right: 0; }

.preview_4:hover > div { color: #333; }

.preview_4 img {
    width: 100%;
    max-width: 600px;
    margin: 0;
    border: 0;
    vertical-align: top;
}

.preview_4 div {
    width: calc(100% - 5px);
    margin: 0 auto;
    padding: 10px 0 10px 5px;
    color: #575556;
    text-align: left;
    font-size: 26px;
    line-height: 26px;
    font-weight: 900;
    cursor: pointer;
}

/* --- video dentro la macro --- */
.preview_4[mod~=video] {
    margin: 0 30px 30px 0;
    transition: all ease .5s;
}
.preview_4[mod~=video]:hover { box-shadow: #999 10px 10px 10px; }

.preview_4[mod~=video] .video_icon {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    max-width: 40px;
    max-height: 40px;
    background-image: url(/images/buttons/videoBig.png);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: all .2s;
}
.preview_4[mod~=video]:hover > .video_icon {
    max-width: 50px;
    max-height: 50px;
}

.videoSeparator {
    width: 94%;
    height: 2px;
    margin: 0 3% 10px 3%;
    background-color: #ddd;
}

/* --- descrizione della macro, su due colonne --- */
.descrizione {
    width: 94%;
    margin: 0;
    padding: 0 3%;
    color: var(--grigio-testo);
    font-size: 16px;
    line-height: 20px;
}
.descrizione p { margin: 0; }

.descrizione ul {
    margin: 0 0 20px 0;
    padding: 30px 0;
    border-top: solid 2px #ddd;
    border-bottom: solid 2px #ddd;
    list-style-type: none;
}
.descrizione ul li {
    display: inline-block;
    vertical-align: top;
}
.descrizione ul li:nth-child(1) { width: calc(50% - 20px); margin: 0 30px 0 0; }
.descrizione ul li:nth-child(2) { width: calc(50% - 10px); margin: 0; }

.sottotitolo {
    margin: 0 0 20px 0;
    font-size: 26px;
    line-height: 30px;
    font-weight: 900;
    letter-spacing: .01em;
}

/* --- titoli SEO dentro la descrizione aggiuntiva della macro -------------
   Il selettore figlio e' VOLUTO ed e' l'unica cosa che tiene separate le due
   descrizioni: quella principale (riga 341 di /includes/catalogo.php) avvolge
   tutto in <ul><li>, la moreDesc (riga 395) mette il contenuto come figlio
   diretto del div. Cosi' queste regole valgono SOLO per la descrizione
   aggiuntiva e non toccano nessun altro titolo del sito.

   h1 riprende .bigTitle, h2 riprende .sottotitolo, da h3 in giu' si scende.
   Gli stessi valori sono ripetuti nel content_style di
   /CMS/manager/InsertCatalogo.php, per l'anteprima nell'editor: se li cambi
   qui, cambiali anche li'. */
.descrizione > h1,
.descrizione > h2,
.descrizione > h3,
.descrizione > h4,
.descrizione > h5 {
    color: var(--grigio-testo);
}

.descrizione > h1 {
    font-size: 34px;
    line-height: 34px;
    font-weight: 900;
    margin: 30px 0 14px 0;
}

.descrizione > h2 {
    font-size: 26px;
    line-height: 30px;
    font-weight: 900;
    letter-spacing: .01em;
    margin: 26px 0 12px 0;
}

.descrizione > h3 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    margin: 22px 0 10px 0;
}

.descrizione > h4 {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    margin: 18px 0 8px 0;
}

.descrizione > h5 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    margin: 14px 0 6px 0;
}

/* il primo titolo non deve staccarsi dal bordo del blocco */
.descrizione > h1:first-child,
.descrizione > h2:first-child,
.descrizione > h3:first-child,
.descrizione > h4:first-child,
.descrizione > h5:first-child { margin-top: 0; }

/* --- descrizione spezzata da #fine# --- */
#read_more,
#read_less {
    display: block;
    margin: 8px 0;
    font-size: 14px;
    cursor: pointer;
}
#read_less     { display: none; }
.more_to_Read  { display: none; }

/* --- testata della categoria --- */
.half_cat {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    margin: 0 0 20px 0;
    padding: 0;
}
.half_cat[mode~=right] {
    width: calc(50% - 30px);
    padding: 0 0 0 30px;
}
.half_cat img { width: 100%; }

.half_cat_title {
    margin: 10px 0 0 0;
    color: #575556;
    font-size: 26px;
    line-height: 26px;
    font-weight: 900;
}
.half_cat_sottotitolo {
    color: #575556;
    font-size: 26px;
    line-height: 26px;
    font-weight: 900;
    letter-spacing: .01em;
}
.half_cat_descrizione {
    margin: 10px 0 0 0;
    color: var(--grigio-testo);
    font-size: 16px;
    line-height: 20px;
}
.half_cat_descrizione p { margin: 0; }

/* --- pulsanti di scroll verso le sottocategorie --- */
.pulsantiPerScrollSottocategorie {
    width: 94%;
    margin: 0 3%;
    padding: 15px 0 0 0;
    border-top: solid 2px #ddd;
}
.pulsantiPerScrollSottocategorie div {
    margin: 5px 0;
    color: #575556;
    font-size: 22px;
    line-height: 24px;
    font-weight: 900;
    cursor: pointer;
}
.pulsantiPerScrollSottocategorie div:hover { color: var(--nero); }
.pulsantiPerScrollSottocategorie div span  { font-weight: 700; }

/* --- case histories collegate --- */
.catalogo_references {
    width: 100%;
    margin: 0;
    padding: 0;
}
.catalogo_references .ref_item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20%;
    height: 180px;
    background-size: cover;
    cursor: pointer;
}
/* la dida compare in hover: opacity animata da web_builder.js */
.catalogo_references .ref_item div {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 4px 0;
    background-image: url(/images/buttons/transparent.png);
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    font-weight: 900;
    opacity: 0;
}
.catalogo_references img {
    width: 100%;
    border: 0;
    vertical-align: top;
    cursor: pointer;
}

/* =====================================================================
   OVERLAY PRODOTTO (#product_overlay, riempito da /scripts/catalogo.php)
   Il markup dei due contenitori sta in page.php, non nell'include:
   show_product() e' chiamata anche da download.php.
   ===================================================================== */
#product_overlay {
    position: fixed;
    left: 50%;
    top: 20px;
    bottom: 20px;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1400px;
    padding: 2%;
    height: auto;
    overflow-y: scroll;
    background-color: var(--bianco);
    z-index: 2000;
    scrollbar-color: #575556 var(--giallo);   /* firefox */
    scrollbar-width: thin;
}
#product_overlay::-webkit-scrollbar       { width: 12px; }
#product_overlay::-webkit-scrollbar-track { background: var(--giallo); }
#product_overlay::-webkit-scrollbar-thumb {
    background-color: #575556;
    border: 3px solid #fbc70b;
    border-radius: 20px;
}

/* --- foto --- */
.scheda_1 {
    float: left;
    width: 20%;
    margin: 0 0 20px 0;
}
.scheda_1 img { width: 100%; }

/* --- titolo, sottotitolo, codici, parametri --- */
.scheda_2 {
    position: relative;
    float: left;
    width: 70%;
    margin: 0 0 10px 0;
    padding: 0 6% 0 2%;
}

/* sovrascrive .scheda_title delle news, che e' 26px/900 */
.scheda_2 .scheda_title {
    margin: 0 0 10px 0;
    color: #575556;
    font-size: 22px;
    line-height: 24px;
    font-weight: 600;
}

/* NOTA: nel vecchio main.css erano stilati .scheda_sottotitolo,
   .scheda_codici e .scheda_parametri, che pero' l'handler non ha mai
   emesso: emette .scheda_desc per tutti e tre. Le tre regole avevano
   valori identici a meno del font-weight dei codici. Qui resta la sola
   classe realmente usata. */
.scheda_2 .scheda_desc {
    color: var(--grigio-testo);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

/* scritta CHIUDI [X] */
.scheda_2 c {
    position: absolute;
    top: -5px;
    right: -30px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
}

/* --- contenuto esteso --- */
.more_info {
    width: 100%;
    padding: 20px 0 0 0;
    border-top: solid 2px #ddd;
}
.more_info .titolo {
    margin: 0 0 5px 0;
    color: #575556;
    font-size: 22px;
    line-height: 24px;
    font-weight: 900;
}
.more_info .desc {
    width: 100%;
    color: var(--grigio-testo);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}
.more_info .desc p { margin: 0 0 10px 0; }

.more_info .extras {
    display: inline-block;
    vertical-align: top;
    width: 65%;
    padding: 0 2% 0 0;
}
.more_info .extras li {
    width: 100%;
    vertical-align: top;
    list-style-type: none;
}
/* width:100% serve alle modalita' "normale" e "foto estesa", dove l'immagine
   e' larga 700 o 1500 e va rimpicciolita alla colonna. Le anteprime della
   modalita' "didascalia" sono invece 80x80 reali: stirarle al 100% della
   cella le porterebbe a 128 sgranati. */
.more_info .extras li img { width: 100%; border: 0; }

.more_info .extras li[mod~=colori]     { display: inline-block; width: 20%; }
/* La cella vale esattamente quanto l'anteprima: catalogo.php scrive gli <li>
   uno di seguito all'altro senza spazi, quindi restano attaccate. Con una
   larghezza in percentuale resterebbe un vuoto a destra di ogni immagine. */
.more_info .extras li[mod~=didascalia] { display: inline-block; width: 80px; margin: 0 0 1% 0; vertical-align: top; }
.more_info .extras li[mod~=didascalia] img { width: 80px; height: 80px; display: block; }
.more_info .extras li[mod~=normale]    { display: inline-block; width: 49%;   margin: 0 0 1% 0; }
.more_info .extras li[mod~=normale][item~=right] { margin: 0 0 1% 2%; }

.more_info .files {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    padding: 0;
    color: #575556;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}
.more_info .files a {
    display: inline-block;
    margin: 0 0 2px 0;
    padding: 3px 8px 4px 8px;
    background-color: var(--grigio-scuro);
    color: #f9cc25;
    font-weight: 400;
    border-radius: 2px;
}
.more_info .files a:hover { color: var(--bianco); }

.more_info .files_title {
    margin: 15px 0 2px 0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.more_info #up_product_arrow {
    float: right;
    max-width: 50px;
    margin-right: -5px;
    margin-bottom: -20px;
    padding-bottom: 20px;
    z-index: 150;
    cursor: pointer;
}

/* =====================================================================
   FORM — campi e pulsanti comuni (login e ogni altro form del sito)
   ===================================================================== */
.textfield {
    width: 96%;
    max-width: 250px;
    padding: 8px 10px;
    color: #333;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #ddd;
    border-radius: 2px;
    outline: none;
    appearance: none;
}

.button {
    width: 100%;
    max-width: 160px;
    height: 40px;
    background-color: var(--grigio-scuro);
    color: var(--giallo);
    font-family: var(--font);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    border: 0;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    cursor: pointer;
}
.button:hover { color: var(--bianco); }

/* =====================================================================
   LOGIN (includes/log.php)
   ===================================================================== */
.logForm { margin: 0 20px 0 0; padding: 0 3%; text-align: left; }

.logForm .intesta { margin: 30px 0 5px 0; }

.logForm .riga_user { margin: 40px 0 5px 0; }
.logForm .riga_pass { margin: 0 0 15px 0; }

.logForm .riga_user span,
.logForm .riga_pass span { display: inline-block; margin-left: 5px; }

.logForm .lab_check { display: block; color: #c00; font-weight: 600; }

.logForm .spazio_finale { height: 120px; }

/* =====================================================================
   COLORBOX — overlay delle gallery
   Il plugin e' gia' dentro web_builder.js; qui c'e' solo il suo CSS.
   Senza queste regole l'overlay si apre ma resta invisibile.
   ===================================================================== */
#colorbox, #cboxOverlay, #cboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
}

#cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(/images/color_box/overlay.png) repeat 0 0;
}

#cboxMiddleLeft, #cboxBottomLeft { clear: left; }

#cboxContent { position: relative; background: var(--bianco); overflow: hidden; }

#cboxLoadedContent {
    margin-bottom: 28px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; }

/* cornice bianca */
#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight {
    width: 10px; height: 6px; background-color: var(--bianco);
}
#cboxMiddleLeft, #cboxMiddleRight   { width: 10px; background-color: var(--bianco); }
#cboxTopCenter, #cboxBottomCenter   { height: 6px; background-color: var(--bianco); }

#cboxLoadingOverlay, #cboxLoadingGraphic {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
#cboxLoadingOverlay { background: url(/images/color_box/loading_background.png) no-repeat center center; }
#cboxLoadingGraphic { background: url(/images/color_box/loading.gif) no-repeat center center; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }

#cboxTitle {
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    margin: 0;
    color: #333;
    font-size: 12px;
    text-align: center;
}

#cboxCurrent {
    position: absolute;
    bottom: 4px;
    left: 0;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

#cboxSlideshow {
    position: absolute;
    bottom: 4px;
    right: 35px;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
}

/* le frecce sono a dimensione zero: si naviga con i tasti o cliccando la foto */
#cboxPrevious {
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 0;
    background: url(/images/color_box/back.png) no-repeat;
    text-indent: -9999px;
}
#cboxNext {
    position: absolute;
    bottom: 0; left: 25px;
    width: 0; height: 0;
    background: url(/images/color_box/next.png) no-repeat;
    text-indent: -9999px;
}

#cboxClose {
    position: absolute;
    bottom: 6px; right: 0;
    width: 16px; height: 16px;
    background: url(/images/color_box/close.png) no-repeat;
    text-indent: -9999px;
}

#cboxError { padding: 50px; border: 1px solid #ccc; }

.cboxPhoto {
    float: left;
    margin: auto;
    display: block;
    max-width: none;
    border: 0;
}

.cboxIframe {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--bianco);
    border: 0;
}

/* =====================================================================
   MOBILE
   ===================================================================== */
@media screen and (max-width: 999px) {

    /* --- menu: il megamenu in hover viene disattivato --- */
    .mainMenu ul li:hover > .megamen { visibility: hidden; opacity: 0; }
    .megamen { display: none; }

    .menu_container {
        position: relative;
        top: 0; right: 0;
        width: 100%;
        height: 90px;
        background-color: var(--giallo);
        z-index: 300;
    }

    #burger {
        display: block;
        position: absolute;
        top: 35px; right: 10px;
        width: 45px; height: 7px;
        background: var(--bianco);
        border-radius: 4px;
        cursor: pointer;
        transition: all .5s;
        z-index: 300;
    }
    #burger:before,
    #burger:after {
        content: '';
        position: absolute;
        left: 0; right: 0;
        width: 45px; height: 7px;
        background: var(--bianco);
        border-radius: 4px;
    }
    #burger:before { top: -10px; transition: all .3s; }
    #burger:after  { top:  10px; transition: all .5s; }

    #burger.opened { background: var(--grigio-scuro); transform: rotate(-45deg); }
    #burger.opened:before { background: var(--grigio-scuro); transform: rotate(-90deg); top: 0; }
    #burger.opened:after  { display: none; }

    #cercaMobile {
        display: none;
        position: absolute;
        top: 25px; right: 75px;
        color: var(--bianco);
        font-size: 15px;
    }
    #cercaMobile img { vertical-align: middle; margin: 0 0 0 5px; }

    #searching { display: none; }

    #mobileSearchBlock { margin: 10px 0 0 0; }
    #mobileSearchBlock input[type=text] {
        width: 190px;
        margin: 0;
        padding: 2px 0 2px 10px;
        border: 0;
        vertical-align: top;
        background-color: var(--bianco);
        color: var(--nero);
        font-family: var(--font);
        font-size: 20px;
        font-weight: 400;
        appearance: none;
        outline: none;
    }
    #mobileSearchBlock input[type=button] {
        height: 35px;
        margin: 0 0 0 10px;
        padding: 0 10px;
        border: 0;
        border-radius: 10px;
        vertical-align: top;
        background-color: var(--grigio-scuro);
        color: gold;
        font-family: var(--font);
        font-size: 16px;
        text-transform: uppercase;
    }

    /* il menu diventa un pannello a tutta pagina aperto dal burger */
    #menu {
        position: absolute;
        top: 0;
        display: none;
        width: 100%;
        height: auto;
        max-height: none;
        padding: 80px 0 20px 0;
        box-shadow: 0 0 10px #111;
    }
    #menu .menu_top { display: none; }

    .mainMenu { width: 100%; text-align: center; }
    .mainMenu ul { display: block; margin: 30px auto 0 auto; }

    .mainMenu ul li {
        display: table;
        margin: 10px auto;
        padding: 0;
        text-align: center;
        color: var(--bianco);
        font-weight: 800;
        font-size: 28px;
        letter-spacing: .05em;
    }
    .mainMenu ul li:hover { background-color: transparent; }
    .mainMenu ul li a     { color: var(--bianco); font-weight: 800; }

    .mainMenu ul li[mod~=active],
    .mainMenu ul li[mod~=active] a {
        color: var(--grigio-scuro);
        background-color: transparent !important;
    }

    /* il contenuto del megamenu viene copiato qui da web_builder.js */
    .mobileSubMenu { display: none; margin: 0 0 20px 0; }

    .mobileSubMenu .a_fifth_mega {
        display: block;
        vertical-align: top;
        width: 100%;
        padding: 0;
        text-align: center;
        font-size: 14px;
    }
    .mobileSubMenu .a_fifth_mega ul { margin: 10px 0; }
    .mobileSubMenu .a_fifth_mega ul li[mod~=img] { display: none; }

    .mobileSubMenu .a_fifth_mega ul li {
        display: block;
        width: 100%;
        margin: 0 0 20px 0;
        padding: 0;
        text-align: center;
    }
    .mobileSubMenu .a_fifth_mega ul li p { margin: 0; }

    .mobileSubMenu .a_fifth_mega a,
    .mobileSubMenu .a_fifth_mega ul li div a,
    .mobileSubMenu .a_fifth_mega ul li span a,
    .mobileSubMenu .a_fifth_mega ul li p a {
        display: block;
        margin: 10px 0;
        color: var(--nero) !important;
        font-weight: 500 !important;
        font-size: 18px;
        line-height: 20px;
        text-transform: uppercase;
    }
    .mobileSubMenu .a_fifth_mega ul li div a {
        margin: 15px 0 5px 0;
        font-weight: 700 !important;
    }

    #mobileMenu { display: block; }

    #secondaryMenu {
        width: 100%;
        margin: 35px auto 0 auto;
        text-align: center;
        font-size: 0;
    }
    #secondaryMenu span a {
        display: table;
        margin: -20px auto 0 auto;
        color: var(--bianco);
        font-size: 20px;
        font-weight: 500;
    }
    #secondaryMenu span a:hover { color: var(--nero); }

    #socialAndLanguages {
        width: 100%;
        margin: 35px auto 0 auto;
        text-align: center;
    }
    #socialAndLanguages span   { display: block; }
    #socialAndLanguages span a { color: var(--bianco); margin: 0 5px; }

    #socialAndLanguages span[mod~=lang] {
        display: inline-block;
        margin: 20px 0 0 0;
        padding: 3px 10px;
        background-color: var(--grigio-scuro);
        color: gold;
        border-radius: 10px;
    }
    #socialAndLanguages .allLanguages { display: none; }

    body { background-color: var(--bianco); }

    /* --- pagine --- */
    .page_block { min-height: 400px; }

    #basic,
    #basic[mod~=right_galleries] { float: none; width: 94%; padding: 0 3%; }

    #page_gallery,
    #page_gallery.laterale { float: none; width: 100%; padding: 2% 0 0 0; }

    #normal_gallery { position: relative; left: -1%; }

    .full_gallery_dida { font-size: 90%; }

    .barra  { display: none; }
    #social { display: none; }

    /* --- news --- */
    .schede_left {
        float: none;
        width: 100%;
        margin: 0;
        padding-right: 0;
    }
    .schede_right {
        float: none;
        width: 100%;
        padding-left: 0;
        border-left: 0;
    }

    /* --- griglia prodotti: due per riga --- */
    .prodotti_ul li {
        width: calc((100% - 10px - 4px) / 2);
        margin: 0 10px 20px 0;
    }
    .prodotti_ul li:nth-child(2n),
    .prodotti_ul li:nth-child(4n) { margin-right: 0; }

    .prodotti_ul li div { margin: 3px 0 8px 0; font-size: 18px; line-height: 20px; }

    /* --- frecce slider sempre visibili su touch --- */
    .flex-direction-nav a { width: 40px; height: 80px; opacity: .7; }
    .flex-direction-nav .flex-prev { left: 0; }
    .flex-direction-nav .flex-next { right: 0; }
    .flexslider:hover .flex-prev { left: 0; }
    .flexslider:hover .flex-next { right: 0; }

    /* --- video --- */
    .videoContainer div { width: 100%; margin: 0 0 30px 0; }

    /* --- library / download / projects --- */
    .libraryPreviewBoxes div { width: calc((100% - 30px) / 2); margin: 0 30px 30px 0; }
    .libraryPreviewBoxes div:nth-child(2n) { margin-right: 0; }

    .box_txt { font-size: 24px; line-height: 26px; }

    .downloadPage ul li { width: calc((100% - 40px) / 2); margin: 0 40px 30px 0; }
    .downloadPage ul li:nth-child(2n) { margin-right: 0; }

    .referenze .naviga { float: none; width: 94%; padding: 0 3%; text-align: left; }
    .referenze .results ul li { width: 25%; }   /* 4 per riga: poi 3 sotto gli 850, 2 sotto i 600 */

    .referenze .scheda_left,
    .referenze .scheda_right { float: none; width: 100%; padding: 0; }

    #logo { max-width: 100px; top: 20px; left: 3%; }

    .pagewrap_footer { padding: 10px 0 20px 0; }

    /* --- slideshow --- */
    /* Sotto i 999px il menu giallo (.menu_container) galleggia sopra lo
       slideshow invece di stargli sopra in colonna: niente da sottrarre. */
    :root { --menu-h: 0px; }

    .flexslider .slides .inside { aspect-ratio: auto; height: 320px; max-height: none; }
    .home_slider .slides .inside { height: var(--slide-h); }

    .caption_title { font-size: 30px; line-height: 34px; }
    .caption_more  { font-size: 22px; line-height: 28px; }
    .caption_down_arrow { width: 50px; bottom: 20px; }

    /* --- contenuto --- */
    #home_content {
        width: calc(100% - 40px);
        padding: 25px 20px;
        font-size: 20px;
        line-height: 26px;
    }

    /* --- box home in colonna --- */
    #ul_boxes li {
        width: 100%;
        height: 260px;
        padding: var(--gap) 0;
    }
    #ul_boxes li[mod~=second] { margin: var(--gap) 0; }
    #ul_boxes li[mod~=liBox]  { height: auto; }

    .home_search_box_logo { width: calc(100% - 30px); padding: 0 var(--gap); }
    .home_search_box_logo img { display: none; }
    .home_search_box_logo .intro  { padding: 0 0 5px 0; }
    .home_search_box_logo .bolder { font-size: 30px; line-height: 30px; }

    .home_search_box_pulsante {
        position: relative;
        margin: var(--gap) 0 0 0;
        font-size: 13px;
    }

    /* --- macro: foto sotto i testi --- */
    .macro_container { box-shadow: #ebe8e8 0 -4px 15px; }

    .macro_big_left,
    .macro_big_left_hide,
    .macro_big_right { height: 180px; width: 100%; padding: 0; }

    .macro_big_left      { display: none; }
    .macro_big_left_hide { display: inline-block; }

    .macro_small_right,
    .macro_small_left { height: auto; padding: 20px 5%; }

    .home_macro_sub_title { margin: 6px 0 0 0; }
    .home_macro_desc      { margin: 10px 0 20px 0; max-height: none; }
    .home_macro_btn       { position: relative; bottom: 0; left: 0; }

    #up_arrow { display: none; }

    /* --- footer --- */
    #footer { padding: 1.5% 3%; }
    #footer .one,
    #footer .two { float: none; width: 100%; text-align: left; }
    #footer .one div  { margin: 10px 0; }
    #footer .one span { display: inline-block; }
    #footer .two div  { display: inline-block; margin: 5px 90px 0 0; }

    #div_copy,
    #copy { display: none; }

    /* --- catalogo --- */
    .preview_4 { width: 100%; margin: 0 0 20px 0; }

    .descrizione ul { padding: 20px 0; }
    .descrizione ul li:nth-child(1) { width: 100%; margin: 0; }
    .descrizione ul li:nth-child(2) { width: 100%; margin: 10px 0 0 0; }

    /* titoli della descrizione aggiuntiva: stessa scala, ridotta */
    .descrizione > h1 { font-size: 26px; line-height: 28px; margin: 22px 0 10px 0; }
    .descrizione > h2 { font-size: 21px; line-height: 24px; margin: 20px 0 9px 0; }
    .descrizione > h3 { font-size: 18px; line-height: 22px; margin: 18px 0 8px 0; }
    .descrizione > h4 { font-size: 17px; line-height: 21px; margin: 15px 0 7px 0; }
    .descrizione > h5 { font-size: 16px; line-height: 20px; margin: 12px 0 6px 0; }

    .half_cat             { width: 100%; margin: 0; padding: 0; }
    .half_cat[mode~=right]{ width: 100%; padding: 10px 0 0 0; }

    /* su mobile la dida delle case histories resta sempre visibile */
    .catalogo_references .ref_item { width: 50%; height: 200px; }
    .catalogo_references .ref_item div {
        padding: 2px 0;
        font-size: 80%;
        font-weight: bold;
        opacity: 1;
    }

    /* --- overlay prodotto --- */
    #product_overlay {
        width: 90%;
        padding: 65px 5% 20px 5%;
        top: 0;
        bottom: 0;
    }

    /* la foto sparisce: lo spazio serve al testo */
    .scheda_1 { display: none; }

    .scheda_2 { width: 100%; margin: 0 0 10px 0; padding: 0; }
    .scheda_2 .scheda_title { margin-top: -10px; }
    .scheda_2 .scheda_desc  { font-size: 14px; line-height: 18px; }
    .scheda_2 c             { top: -40px; right: 0; }

    .more_info { padding: 0; border-top: 0; }
    .more_info .titolo   { display: none; }
    .more_info .extras   { width: 100%; padding: 0; }
    .more_info .files    { width: 100%; }

}

@media screen and (min-width: 1000px) {
    .home_search_box_logo img,
    .home_search_box_logo .home_search_box_pulsante { display: none; }
}

@media screen and (min-width: 1200px) {
    .home_search_box_logo img { display: block; }
}

@media screen and (min-width: 1300px) {
    .home_search_box_logo .home_search_box_pulsante { display: inline-block; }
}


@media screen and (max-width: 650px) {
    .catalogo_references .ref_item { height: 160px; }
}

@media screen and (min-width: 1400px) {
    .catalogo_references .ref_item { height: 260px; }
}

/* --- ELENCO REFERENZE: quante tessere per riga ------------------------------
   La miniatura e' 330x330: oltre quella larghezza la tessera la ingrandisce e
   l'immagine si sgrana. Sotto i 1500px cinque colonne stanno dentro i 330
   (a 1500 -> 300px), sopra si passa a sei, e sui monitor molto larghi a otto.
   Il contenitore e' a tutta pagina, quindi i valori sono la larghezza reale. */
@media screen and (max-width: 850px) {
    .referenze .results ul li { width: 33.3333%; }   /* 3 per riga */
}

@media screen and (max-width: 600px) {
    .referenze .results ul li { width: 50%; }    /* 2 per riga */
}

@media screen and (min-width: 1500px) {
    .referenze .results ul li { width: 16.6666%; }   /* 6 per riga - a 1920 -> 320px */
}

@media screen and (min-width: 2000px) {
    .referenze .results ul li { width: 12.5%; }      /* 8 per riga - a 2560 -> 320px */
}