* {
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

:root{
    --testo-grigio-1: #7E7E7E;
    --testo-grigio-2: #A7A7A7;
    --gap: 32px;
    --timer-hero: 5s;
    --1_12: calc( 8.33vw - 4px );
}

#griglia{
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.1);
    top:0;
    left: 0;
    display: none;
}

#griglia-cnt{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--gap);
    padding: 0 var(--gap);
    top: 0;
    left: 0;
}

#griglia-cnt div{
    background-color: rgba(255, 255, 255, 0.20);
}

html,
body {
    scroll-behavior: smooth;;
}

body {
    font-family: "SoleSans", Arial, Helvetica, sans-serif;
    background-color: #101010;  /*#fff8f0*/
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

ul{
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

.mostra-mobile{
    display: none;
}

.testo-48{
    font-size: 48px;
    font-weight: 500;
    line-height: 56px;
    letter-spacing: 0px;
}

.testo-32{
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: 0px;     
}

.testo-24{
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 116.667% */  
}

.testo{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;    
}

.box{
    padding-left: var(--gap);
    padding-right: var(--gap);
    background-color: #1a1a1a;
}

.border-bottom{ border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.border-top{ border-top: 1px solid rgba(255, 255, 255, 0.10); }
.bgcolor-02{ background-color: rgba(255,255,255,.02); }
.bgcolor-04{ background-color: rgba(255,255,255,.04); }
.bgcolor-10{ background-color: rgba(255,255,255,.10); }
.box-shadow-10{ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10); }
.border-radius-8{ border-radius: 8px; }
.border-radius-12{ border-radius: 12px; }
.border-radius-16{ border-radius: 16px; }


/* ELEMENTI */

/* intro */
    #testata{
        height: 30px;
        margin-top: 12px;
        padding-left: var(--gap);
        padding-right : var(--gap);
        position: relative;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
    }

    #testata-sfondo{
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 54px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        background: #1A1A1A;
        z-index: 45;
    }

    #hero{
        display: flex;
        position: relative;
        z-index: 47;
    }

    #colonna-sx{
        width: calc( var(--1_12) * 3 + var(--gap) );
        padding-bottom: var(--gap);
        padding-right: var(--gap);
        padding-left: var(--gap);
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        background: rgba(0, 0, 0, 0.40);
        flex: 1;
        justify-content: space-between;
        z-index: 1;
    }

    #colonna-sx .occhiello{
        padding-top: 46px;
        padding-bottom: 12px;
        /* margin-bottom: 24px; */
    }

    #colonna-sx-immagine{
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: left center;
        display: flex;
        -webkit-transition: background-image 1s ease-in-out;
        transition: background-image 1s ease-in-out;
    }

    #colonna-dx-immagine{
        flex: 1;
        aspect-ratio: 25 / 16;
    }

    .tag-cnt{
        display: flex;
        gap: 8px;
    }

    .label-tag{
        background-color: rgba(255, 255, 255, 0.10);
        /* background-color: #222222; */
        color:rgba(255, 255, 255, 0.60);
        border-radius: 16px;
        padding: 4px 8px;
        text-transform: uppercase;
        font-size: 12px;
        line-height: 16px;

        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;

        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome, Edge, Opera and Firefox */
    }

    li .blocco-titolo .label-tag{
        background-color: #303030;
    }

    .label-tag:not(.disabilitato).bottone{
        cursor: pointer;
        transition: all .3s ease-in;
    }

    .label-tag:not(.disabilitato).bottone:hover{
        background-color: rgba(255, 255, 255, 1);
        outline: 4px rgba(255,255,255,0.30) solid;
        color: black;
    }

    .div-bottone{
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        /* background: rgba(255, 255, 255, 0.10); */
        background: rgba(0, 0, 0, 0.40);
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);

        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 166.667% */
        letter-spacing: 2px;

        width: calc( var(--1_12) * 3 - var(--gap));

        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 24px;
        gap: 10px;

        text-transform: uppercase;

        transition: all .2s ease-in;

        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    }

    #colonna-sx .div-bottone,
    #ricerca-cancella.div-bottone,
    #togli-filtri .div-bottone{
        background: rgba(255, 255, 255, 0.10);
    }

    .label-tag.bottone.attivo{
        color: black;
        background-color: white;
    }

    .label-tag.disabilitato {
        opacity: .4;
    }

    #icona-su-destra{
        background-image: url(../img/freccia-su-dx.svg);
        background-size: cover;
    }

    #navigazione-aggiornamento .div-bottone{
        background-color: rgba(255, 255, 255, 0.10);
    }

    .div-bottone:hover {
        cursor: pointer;
        /* background: rgba(255, 255, 255, 0.30); */
        background-color: white!important;
        border: 1px solid rgba(255, 255, 255, 0);
        outline: 4px rgba(255,255,255,0.30) solid;
        color: black;
    }

    .icona-su-dx{
        background-image: url(../img/freccia-su-dx.svg);
        background-repeat: no-repeat;
        background-size: cover;
        transition: all .3s ease;
        width: 9px;
        height: 9px;
    }

    .div-bottone:hover .icona-su-dx{
        background-image: url(../img/freccia-su-dx-hover.svg);
    }

    #colonna-sx .div-bottone{  
        width: 100%;
    }

    .div-bottone-icona{
        cursor: pointer;
        transition: all .3s ease;
    }

    .div-bottone-icona:hover{
        opacity: .7;
    }

    #navigazione{
        flex: 0;
        position: absolute;
        width: 100%;
        bottom: 24px;
        left: 0;
        height: 32px;
    }

    #navigazione-aggiornamento {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 18px;
        align-items: center;
        margin-top: 24px;
    }

    #navigazione .div-bottone,
    #navigazione-aggiornamento .div-bottone,
    #muovi-giu .div-bottone{
        padding: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
    }

    #hero #navigazione .freccia-sx,
    #navigazione-aggiornamento .freccia-sx{
        background-image: url(../img/freccia-sx.svg);
        background-repeat: no-repeat;
        background-size: cover;
        transition: all .3s ease;
        width: 14px;
        height: 14px;
    }

    #hero #navigazione .freccia-dx,
    #navigazione-aggiornamento .freccia-dx{
        background-image: url(../img/freccia-dx.svg);
        background-repeat: no-repeat;
        background-size: cover;
        transition: all .3s ease;
        width: 14px;
        height: 14px;
    }

    #hero #navigazione .bottone-sx:hover .freccia-sx,
    #navigazione-aggiornamento .bottone-sx:hover .freccia-sx{
        background-image: url(../img/freccia-sx-hover.svg);
        /* content: url(../img/freccia-sx-hover.svg); */
    }

    #hero #navigazione .bottone-dx:hover .freccia-dx,
    #navigazione-aggiornamento .bottone-dx:hover .freccia-dx{
        background-image: url(../img/freccia-dx-hover.svg);
        /* content: url(../img/freccia-dx-hover.svg); */
    }

    #navigazione-punti{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: var(--gap); 
        margin-right:  var(--gap);
        gap: 12px;
    }

    .navigazione-punto{
        width: 8px;
        height: 8px;
        background-color: rgba(0, 0, 0, 0.40);
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        transition: all .2s linear;
    }

    .navigazione-punto-sfondo{
        position: absolute;
        top: 0;
        background-color: white;
        width: 100%;
        left: -100%;
        height: 8px;
        border-radius: 4px;
    }

    .navigazione-punto.attivo{
        width: calc( var(--1_12) - var(--gap) );
    }

    .navigazione-punto.attivo .navigazione-punto-sfondo{
        animation: navigazioneAnim var(--timer-hero) linear 0s 1 normal forwards;
    }
    @keyframes navigazioneAnim {
        0% {
            left: -100%;
        }
        100% {
            left: 0;
        }
    }

    #muovi-giu{
        flex: 0;
        position: absolute;
        width: 100%;
        bottom: -16px;
        left: 0;
        height: 32px;
        display: flex;
        justify-content: center;
    }

    #muovi-giu .div-bottone .freccia-giu{
        background-image: url(../img/freccia-giu.svg);
        background-repeat: no-repeat;
        background-size: cover;
        transition: all .3s ease;
        width: 14px;
        height: 9px;
    }

    #muovi-giu .div-bottone:hover .freccia-giu{
        background-image: url(../img/freccia-giu-hover.svg);
    }

    .sx-cnt {
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    .scorri-sx-cnt {
        height: 300%;
        display: flex;
        flex-direction: column;
        position: absolute;
        transition: all .3s ease;
    }

    .scorri-sx {
        flex: 1;
        overflow-y: hidden;
        padding-top: 24px;
    }

    .sx-testo{
        overflow-x: hidden;
        max-height: 9lh;
    }

    .dx-cnt{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .scorri-dx-cnt{
        width: 300%;
        height: 100%;
        display: flex;
        position: absolute;
        transition: all .3s ease;
    }

    .scorri-dx {
        flex: 1;
        background-position: center;
        background-size: cover;
    }

/* Blocco aggiornati */
    #blocco-aggiornati {
        width: 100%;
        position: relative;
        width: 100%;
        display: flex;
        padding:  var(--gap) 0;
        margin-top:  var(--gap);
        flex-direction: column;
        overflow-x: hidden;
    }

    /* #blocco-aggiornati .swiper-slide{
        padding-left: var(--gap);
        padding-right: var(--gap);
    } */

    .blocco-aggiornati-cnt{
        width: 100%;
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0  var(--gap);
        gap:  var(--gap);
    }

    .blocco-aggiornato{
        border: 1px solid rgba(255, 255, 255, 0.10);
        background: #1A1A1A;
        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);
        /* width: 33.33%; */
        width: 100%;
        min-width: 312px;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        transition: all .3s ease;
    }

    .blocco-aggiornato.opaco .titolo{
        opacity: .4;
    }

    .blocco-aggiornato.attivo{
        background-color: #303030;
    }

    .blocco-aggiornato-su{
        display: flex;
        justify-content: space-between;
    }

    .blocco-aggiornato .immagine{
        width: 120px;
        height: 90px;
        flex: 0;
    }
    .blocco-aggiornato .titolo{
        color: #FFF;
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px; /* 112.5% */
        max-height: 72px;

        display: -webkit-box; 
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 2; 
        overflow: hidden; 
        text-overflow: ellipsis; 

        flex: 1;

        padding-right: var(--gap);
    }

    .blocco-aggiornato-su, .blocco-aggiornato-giu{
        padding: 16px;
    }

    .blocco-aggiornato-giu{
        display: flex;
        align-items: center;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
        
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        background: rgba(255, 255, 255, 0.10);

        color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */

        color:#767676;    
    }

    .blocco-aggiornato .pallino,
    .blocco-data-mobile .pallino,
    .blocco-data .pallino{
        width: 12px;
        height: 12px;
        background-color: rgba(255,72,72,.2);
        border: 2px solid rgba(255,72,72,1);
        
        margin-right: 16px;
        border-radius: 50%;

        animation: pallinoAnim 1s linear infinite;
    }

    .blocco-data .pallino{
        margin-right: 0;
        margin-left: 16px;
        transform: translateY(7px);
    }

    .blocco-aggiornato .ultimo-aggiornamento{
        color: white;
    }

    @keyframes pallinoAnim {
        0% {
            background-color: rgba(255,72,72,.2);
            outline-style: solid;
            outline-color: rgba(255,72,72,.2);
            outline-width: 0px;
            border: 2px solid rgba(255,72,72,1);
        }

        30% {
            background-color: rgba(255,72,72,.2);
            outline-style: solid;
            outline-color: rgba(255,72,72,.2);
            outline-width: 0px;
            border: 2px solid rgba(255,72,72,1);
        }

        40% {
            background-color: rgba(255,72,72,1);
            outline-style: solid;
            outline-color: rgba(255,72,72,.2);
            outline-width: 6px;
        }

        100% {
            background-color: rgba(255,72,72,1);
            outline-style: solid;
            outline-color: rgba(255,72,72,.2);
            outline-width: 6px;
        }
    }

/* Servizio */

    #blocco-servizio{
        display: flex;
        justify-content: space-between;
    }

    #blocco-argomento{
        /* width: calc( (8.33vw - var(--gap) * 2) * 7 + var(--gap) * 6 ); */
        width: calc( var(--1_12) * 8 - var(--gap) );
        display: flex;
        flex-direction: column;
    }

    #blocco-ricerca{
        /* width: calc( (8.33vw - var(--gap)) * 4 + var(--gap) * 3  );  */
        width: calc( var(--1_12) * 4 - var(--gap) );
    }

    #blocco-servizio .intestazione{
        color: rgba(255, 255, 255, 0.4);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px; /* 100% */
        text-transform: uppercase;
    }

    #blocco-servizio .intestazione-cnt {
        margin-top: 24px;
        display: flex;
        gap: 8px 4px;
        flex-flow: wrap;
    }
    #blocco-servizio .intestazione-cnt::-webkit-scrollbar {
        display: none;
    }

    #ricerca-cnt{
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        background: rgba(255, 255, 255, 0.02);
        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);
        padding: 12px;
        display: flex;
        align-items: center;
        margin-top: 24px;
    }

    #ico-ricerca{
        background-color: rgba(255, 255, 255, 0.02);
        -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.10); 
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.10);
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }

    #ricerca-box{
        display: flex;
        align-items: center;
        position: relative;
        flex: 1;
    }

    #ricerca{
        /* color: rgba(255, 255, 255, 0.4); */
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 120% */

        letter-spacing: normal;
        word-spacing: normal;
        line-height: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        text-align: start;
        appearance: auto;
        -webkit-rtl-ordering: logical;
        cursor: text;
        background-color: transparent;
        margin: 0em;
        padding: 0;
        border: none;
        padding-block: 0;
        padding-inline: 0;
        margin-left: 4px;
        width: calc(100% - 38px);
    }

    #ricerca-cancella{
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);

        flex: 1;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
    }

    #ricerca-cancella .icona-cancella{
        background-image: url(../img/cancella.svg);
        background-repeat: no-repeat;
        background-size: cover;
        transition: all .3s ease;
        width: 16px;
        height: 16px;
        transition: all -3s ease;
    }

    #ricerca-cancella:hover .icona-cancella{ 
        background-image: url(../img/cancella-hover.svg);
    }

/* Ordina */
    #blocco-ordina{
        text-transform: uppercase;
        display: flex;
        gap: var(--gap);
        padding: 12px var(--gap);
        position: sticky;
        top: 54px;
        background-color: #1e1e1e;
    }

    #blocco-ordina.zIndexMax{
        z-index: 1000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #blocco-elenco:not(.no-corrispondenza) #blocco-ordina > div {
        transition: all .3s ease;
        cursor: pointer;
    }

    #blocco-elenco:not(.no-corrispondenza) #blocco-ordina > div:hover {
        color: white;
    }

    #blocco-ordina > div:not(.attivo),
    .no-corrispondenza > div  {
        color: rgba(255,255,255,.4);
    }

    #blocco-ordina > div img {
        transition: all .3s ease;
    }

    #blocco-elenco:not(.no-corrispondenza) #blocco-ordina > div.attivo img {
        content: url(../img/ordina-giu-attivo.svg);
    }

    #blocco-elenco:not(.no-corrispondenza) #blocco-ordina > div.ordina-su img {
        transform: rotate(180deg);
    }

/* Elenco */

    #blocco-elenco,
    #blocco-servizio{
        background-color: rgba(255, 255, 255, 0.04);
    }

    #blocco-servizio{
        padding: var(--gap) var(--gap) 48px var(--gap);
    }

    .filo-sopra{
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    #elenco-sintetico li{
        padding:var(--gap);
        display: flex;
        gap:var(--gap);       
        cursor: pointer;       
    }

    .no-corrispondenza li{
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: center;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 64px;
        margin-bottom: 64px;
        justify-content: center;
        cursor: default!important;
    }

    .blocco-data{
        /* width: calc( (8.33vw - var(--gap)) * 2 + var(--gap) ); */
        width: calc( var(--1_12) * 2 - var(--gap) );
    }
    
    .blocco-titolo{
        /* width: calc( var(--1_12) * 6 - var(--gap) ); */
        width: calc( var(--1_12) * 8);
    }

    .blocco-riconoscimenti{
        /* width: calc( (8.33vw - var(--gap)) * 2 + var(--gap) * 2 ); */
        width: calc( var(--1_12) * 2 );
        display: none;
    }

    .blocco-formato{
        /* width: calc( (8.33vw - var(--gap)) * 2 ); */
        width: calc( var(--1_12) * 2 - var(--gap) * 2 );
    }

    li .blocco-data,
    li .blocco-riconoscimenti,
    li .blocco-formato{
        font-size: 20px;
        font-weight: 400;
        line-height: 24px; /* 120% */
        color: rgba(255, 255, 255, 0.40);
    }
    
    li .blocco-data{
        display: flex;
    }

    li .blocco-titolo{
        color: #FFF; 
        font-size: 48px;
        font-style: normal;
        font-weight: 500;
        line-height: 56px; /* 116.667% */
    }

    li .titolo {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;  
        overflow: hidden;
        text-overflow: ellipsis; 
        
        
        height: 112px;
    }


    .riconoscimento{
        cursor: pointer;
        color: rgba(255, 255, 255, 0.40);
        text-decoration: underline;
        transition: all .3s ease;
    }

    .riconoscimento:hover{
        color: rgba(255, 255, 255, 1);
    }

    li .blocco-riconoscimenti{
        display: flex;
        flex-direction: column;
        text-align: left;
        justify-content: flex-start;
        display: none;
    }

    li .riconoscimento-occhiello {
        margin-bottom: 8px;
    }

    li .riconoscimento + .riconoscimento-occhiello {
        margin-top: 16px;
    }

    /*
    #elenco-sintetico-immagine-cnt{
        position: fixed;
        z-index: 2;
        overflow: hidden;
        pointer-events: none;
        top:0;
        left:0;
        bottom: 0;
        right: 0;
    }

    #elenco-sintetico-immagine{
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 1;
        width: 150px;
        height: 150px;
        background-color: red;
    }
    */

    #elenco-sintetico-immagine{
        position: fixed;
        z-index: 2;
        pointer-events: none;
        top:0;
        left:0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
        width: 400px;
        height: 300px;
        background-position: center;
        background-size: cover;
        transition: background .3s ease;
    }


    .no-corrispondenza #elenco-sintetico-immagine{
        display: none;
    }

    #elenco-sintetico li.attivo{
        z-index: 4;
        position: relative;
        background-color: rgba(255, 255, 255, 0.1);
    }
    #elenco-sintetico li{
        transition: all .3s ease;
    }

    #elenco-sintetico li.opaco{
        position: relative;
    }

    #elenco-sintetico li.opaco .titolo{
        opacity: .2;
    }

    #elenco-sintetico .evidenzia{
        background: rgba(0, 255, 186, 0.40);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    #carica-altri, 
    #togli-filtri-cnt{
        padding-top: 40px;
        padding-bottom: 40px;
        display: flex;
        justify-content: center;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }

    #carica-altri .div-bottone{
        width: auto;
        background-color: rgba(255, 255, 255, 0.10);
    }
    #carica-altri .div-bottone:hover{
        width: auto;
        background-color: rgba(255, 255, 255, 1);
    }

    #togli-filtri-cnt{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    #togli-filtri{
        width: auto;
        text-transform: uppercase;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 2px;
        cursor: pointer;
        margin-left: 32px;
    }

    #togli-filtri .div-bottone{
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        margin-left: 8px;
    }

    #togli-filtri:hover .div-bottone{
        background-color: white;
        border: 1px solid rgba(255, 255, 255, 0);
        outline: 4px rgba(255,255,255,0.30) solid;
        color: black;
    }

    #togli-filtri .icona-cancella{
        background-image: url(../img/cancella.svg);
        background-repeat: no-repeat;
        background-size: cover;
        transition: all .3s ease;
        width: 16px;
        height: 16px;
        transition: all -3s ease;
    }

    #togli-filtri:hover .icona-cancella{
        background-image: url(../img/cancella-hover.svg);
        /* background: rgba(255, 255, 255, 0.30); */
    }
/* Credit */

    #blocco-credit{
        padding: 48px var(--gap);
        display: flex;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 125% */
        gap: var(--gap);
    }

    #blocco-credit .ruolo{
        margin-bottom: 12px;
        color: rgba(255, 255, 255, 0.40);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px; /* 100% */
        text-transform: uppercase;
    }

    #blocco-credit .testo{
        margin-bottom: 12px;
    }

    #blocco-credit .testo + .ruolo{
        margin-top: 24px;
    }

    #blocco-credit .social{
        display: flex;
        gap: var(--gap);
    }
    #blocco-credit .ico-social{
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #fff;
        border-radius: 50%;
    }

    a, a:hover, a:visited, a:active {
        color: white;
        text-decoration: none;
    }

/* Footer */
    footer{
        padding: 48px var(--gap);
        display: flex;
        justify-content: space-between;

        color: rgba(255, 255, 255, 0.60);
        
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
    }

    footer a, footer a:hover, footer a:visited, footer a:active{
        color: rgba(255, 255, 255, 0.6);
        text-decoration: underline;
    }

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .testo{
        font-size: 14px;
        line-height: 20px;
    }
}

@media screen and (min-width: 1024px ) and (max-width: 1439px) {
    .scorri-sx .testo{
        -webkit-line-clamp: 6;
        max-height: 144px;
        visibility: visible;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    }
}

@media screen and (max-width: 1439px) {
    :root{
        --gap: 24px;
        --1_12: calc( 8.33vw - 4px );
    }

    .testo-32 {
        font-size: 24px;
        font-weight: 500;
        line-height: 28px;
        letter-spacing: 0px;
    }

    body{
        font-size: 14px;
        line-height: 20px;
    }

    .blocco-aggiornato .titolo {
        font-size: 24px;
        line-height: 28px;
        max-height: 56px;
    }

    .blocco-aggiornato-giu {
        font-size: 14px;
        line-height: 20px;
    }

    .blocco-aggiornato .pallino, .blocco-data .pallino {
        margin-right: 8px;
    }

    li .blocco-data, li .blocco-riconoscimenti, li .blocco-formato {
        font-size: 16px;
        line-height: 20px;
    }

    li .blocco-titolo {
        font-size: 32px;
        line-height: 36px;
    }

    #blocco-ordina{
        font-size: 12px;
        line-height: 12px;
    }

    #ricerca-cnt {
        padding: 11px;
    }

    #blocco-credit .testo{
        font-size: 14px;
        line-height: 16px;
    }

    footer {
        font-size: 14px;
        line-height: 20px;
    }

    #blocco-ordina > div img {
        transform: translateY(2px);
    }

    #blocco-elenco:not(.no-corrispondenza) #blocco-ordina > div.ordina-su img {
        transform: translateY(2px) rotate(180deg);
    }
}

@media screen and (min-width: 1150px) {
    .scorri-sx .testo{
        -webkit-line-clamp: 8;
        max-height: 192px;
        visibility: visible;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    }
}

@media screen and (min-width: 1450px) {
    .scorri-sx .testo{
        -webkit-line-clamp: 14;
        max-height: 336px;
        visibility: visible;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    }

    .div-bottone{
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 171.429% */
    }

    .label-tag {
        padding: 6px 12px;
        font-size: 14px;
        line-height: 20px;
    }
}

@media screen and (max-width: 1024px){
    #blocco-credit .social {
        display: flex;
        gap: unset;
        justify-content: space-between;
    }

    #blocco-argomento, 
    #blocco-ricerca{
        width: 50%;
    }

    :root{
        --gap: 24px;
    }

    .blocco-aggiornato {
        width: 312px;
        min-width:auto;
    }
    .swiper-slide{
        width: fit-content!important;
    }

    .li-sintetico{
        color: rgba(255, 255, 255, 0.4);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }

    .li-sintetico-sx{
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .li-sintetico-dx{
        display: flex;
        flex-direction: column;
        width: calc( var(--1_12) * 2 + var(--gap) );
    }

    .li-sintetico-immagine{
        width: 100%;
    }

    .blocco-titolo-mobile{
        color: #FFF;
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px; /* 112.5% */
        margin-top: 10px;
    }
    
    .blocco-titolo-mobile .tag-cnt{
        margin-top: 8px;
    }

    .blocco-riconoscimenti-mobile{
        margin-top: 8px;
        display: none;
    }

    .li-sintetico-dx img{
        margin-top: 12px;
    }

    #colonna-sx {
        width: calc( var(--1_12) * 4 + var(--gap) );
    }
}

@media screen and (min-width: 769px) and (max-width: 890px){
    #colonna-dx-immagine {
        flex: 1;
        aspect-ratio: 25 / 21;
    }

    #colonna-sx {
        width: calc( var(--1_12) * 4 + var(--gap) );
    }
}

@media screen and (max-width: 768px){
    .nascondi-mobile{
        display: none;
    } 
    .mostra-mobile{
        display: flex;
    }

    .ordina-per {
        color: rgba(255, 255, 255, 0.4);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
        text-transform: uppercase;
        align-items: center;
        transform: translateY(1px);
    }

    #blocco-credit .ico-social {
        width: 24px;
        height: 24px;
    }

    #blocco-credit .social {
        display: flex;
        gap: 8px;
        justify-content: flex-start;
    }

    .ico-social img {
        width: 90%;
    }

    li .blocco-data, li .blocco-riconoscimenti, li .blocco-formato {
        width: 100%;
    }

    .blocco-formato{
        text-align: right;
    }

    #blocco-ordina {
        top: 54px;
        padding: 4px var(--gap);
    }

    #blocco-ordina .blocco-data {
        width: fit-content;
    }
    #blocco-ordina .blocco-titolo {
        width: fit-content;
    }

    .blocco-data-mobile{
        display: flex;
        align-items: center;
    }

    .blocco-data-mobile .pallino {
        transform: translate(10px, 1px);
    }

    .blocco-aggiornato {
        width: 312px;
        min-width: auto;
    }

    .blocco-aggiornato .immagine {
        width: 96px;
        height: 72px;
        flex: 0;
    }

    footer{
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
    }

    #hero .occhiello:not(.mostra-mobile){
        display: none;
    }

    #hero .occhiello.mostra-mobile{
        position: absolute;
        left: var(--gap);
        top: 49px;
    }
}

@media screen and (max-width: 768px){
    #hero {
        display: flex;
        flex-direction: column-reverse;
        background-color: #1A1A1A;
    }

    #testata {
        position: relative;
    }

    #testata-cnt{
        position: fixed;
        background-color: #1A1A1A;
        padding-bottom: 12px;
        width: 100%;
        z-index: 50;
    }

    #testata-cnt .occhiello{
        padding-left: var(--gap);
    }

    #colonna-dx-immagine {
        margin-top: 74px;
    }

    #colonna-sx .div-bottone {
        /* width: 100%; */
        width: fit-content;
    }

    .div-bottone.mt-56{
        margin-top: 0;
    }

    #colonna-sx {
        height: 240px;
    }

    #colonna-sx-immagine {
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center top;
        display: flex;
        -webkit-transition: background-image 1s ease-in-out;
        transition: background-image 1s ease-in-out;
    }

    #muovi-giu {
        z-index: 51;
    }

    #blocco-ordina {
        top: 54px;
    }

    #navigazione {
        bottom: 254px;
    }

    .navigazione-punto.attivo {
        width: calc( var(--1_12) * 2 - var(--gap) );
    }

    li .titolo {
        height: auto;
    }

    .scorri-sx .testo{
        -webkit-line-clamp: 3;
        max-height: 72px;
        visibility: visible;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    }

    #blocco-servizio {
        display: flex;
        justify-content: space-between;
        gap: var(--gap);
    }

    .testo {
        font-size: 14px;
        line-height: 20px;
    }

    #navigazione-aggiornamento .bottone-sx,
    #navigazione-aggiornamento .bottone-dx{
        display: none;
    }

    #muovi-giu{
        display: none;
    }
}

@media screen and (max-width: 600px){
    :root{
        --gap: 16px;
    }

    #colonna-dx-immagine {
        flex: 1;
        aspect-ratio: 25 / 13;
    }

    #navigazione .bottone-sx,
    #navigazione .bottone-dx{
        display: none;
    }

    #colonna-sx .div-bottone {
        width: 100%;
    }

    .div-bottone.mt-56{
        margin-bottom: 48px;
    }

    #navigazione {
        bottom: 12px;
        z-index: 50;
    }

    #colonna-sx {
        height: 320px;
    }

    .scorri-sx .testo{
        -webkit-line-clamp: 5;
        max-height: 100px;
    }

    #colonna-sx-immagine {
        background-size: auto 100%;
    }

    footer {
        flex-direction: column;
    }

    footer .testo-centrato{
        margin-top: var(--gap);
    }

    #blocco-servizio {
        flex-direction: column-reverse;
    }

    #blocco-servizio > div {
        width: 100%;
    }

    .blocco-titolo-mobile .titolo {
        font-size: 24px;
        line-height: 28px;
        -webkit-line-clamp: 3;
        max-height: 84px;
    }

    #ricerca-cnt,
    #blocco-servizio .intestazione-cnt,
    .blocco-titolo-mobile .tag-cnt {
        margin-top: 12px;
        flex-flow: wrap;
    }

    #ricerca {
        font-size: 16px;
        line-height: 20px;
    }

    .navigazione-punto.attivo {
        width: calc( var(--1_12) * 2 + var(--gap) );
    }

    .li-sintetico-dx {
        width: calc( var(--1_12) * 3 + var(--gap) );
    }
}

@media screen and (max-width: 480px){
    .blocco-aggiornato{
        width: 80vw;
    }

    li .blocco-data, li .blocco-riconoscimenti, li .blocco-formato {
        font-size: 16px;
        line-height: 20px;
    }
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px!important;
}

.swiper-pagination-bullet {
    background: rgba(255,255,255,.10)!important;
    opacity: 1!important;
    transition: all .2s ease!important;
}

.swiper-pagination-bullet-active {
    opacity: 1!important;
    background: white!important;
    outline: 4px rgba(255,255,255,0.30) solid!important;
}

.swiper-pagination {
    position: relative!important;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    width: auto!important;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: auto!important;
    top: auto!important;
}

#blocco-aggiornati{
    padding-left: var(--gap);
    padding-right: var(--gap);
}

.blocco-aggiornato *,
#blocco-ordina * {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.blocco-aggiornato-cnt a {
    width: 33.33%;
}

.blocco-aggiornato-cnt{ 
    display: flex;
    gap: var(--gap);
}