/* Variabili Css */
:root{
    --color1: #0d70da; 
    --color1negative: #1c94ff; /* Colore 1 per parti a sfondo scuro */
    --color2: #00c8ff; /* Colore shock per elementi vari */
    --color2rgb: 0,200,255; 
    --color2negative: #75e1ff; /* Colore shock per parti a sfondo scuro */
    --color3: #f6f8ff; /* Bg chiaro+ */
    --color3rgb: 246,248,255; 
    --color4: #e2e9f8; /* Bg chiaro */
    --color4rgb: 226,233,248; 
    --color5: #445864; /* Testo principale */
    --color5rgb: 68,88,100; 
    --color6: #ffffff; /* Bg principale, testi negativi */
    --color6rgb: 255,255,255; 
    --color7: rgba(0,0,0,.1); /* Colore medio per elementi come bordi tabelle */
    --color8: #203956; /* Titoli e altro */
    --color8rgb: 32,57,86; /* Titoli e altro */
    --backdrop-color: rgba(241, 241, 241, 1); /* colore per backdrop (sfondo x modal) */
    --backdrop-navscroll: rgba(255, 255, 255, 0.8); /* bg nav fixed onscroll o nav su cell */
    --backdrop-navcollapse: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.95) 50%, rgba(243,246,252,.95) 73%, rgba(226,233,248,.95) 100%); /* bg nav aperto su cell */
    --backdrop-color-dark: rgba(34, 34, 34, 0.85); /* colore per backdrop scuro (modal video e immagini che devono essere a bg scuro con grafiche bianche) */
    --roundcorner: 8px; /* Angoli tondi per elementi vari */
    --maxwidth: 1500px; /* un limite massimo in px per la larghezza sui grandi dispositivi */
}

/* Stili base */
html,body{
    height: 100%; 
    min-height: 100%;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    line-height: 1.4em;
}
body{
    color: var(--color5);
    background-color: var(--color3);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    height: 100svh; /* dvh o svh risolve il bug dei 100vh che sforano su android (https://www.youtube.com/watch?v=pOuE9sgK9jY) */
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: var(--color8);
}
a{
    color: var(--color1);
    text-decoration: none;
}
a:hover, a:focus{
    color: var(--color2);
    text-decoration: none;
}
b, strong {
    font-weight: 600;
}
.small, small {
    font-size: 90%;
}
::-moz-selection{
    color: var(--color1);
    background: var(--color7);
    text-shadow: none;
}
::selection{
    color: var(--color6);
    background: var(--color1);
    text-shadow: none;
}
/* Rimuove il bordo di BS del focus su campi  */
select:focus, input:focus, textarea:focus, button:focus,
.btn.focus, .btn:focus,
select:active, input:active, textarea:active, button:active,
.btn.active, .btn:active {
    outline: none !important;
    outline-color: transparent;
    outline-style: none;
    box-shadow: none !important;
}
.form-control:focus{
    box-shadow: none;
    border-color: var(--color1);
}
/* Stili base > Utility */
.bg-color1{background: var(--color1);}
.bg-color2{background: var(--color2);}
.bg-color3{background: var(--color3);}
.bg-color4{background: var(--color4);}
.bg-color5{background: var(--color5);}
.bg-transparent{background:transparent;}
.color1{color: var(--color1);}
.color2{color: var(--color2);}
.color3{color: var(--color3);}
.color4{color: var(--color4);}
.color5{color: var(--color5);}
.color6{color: var(--color6);}
.percent99{width:99%;}
.maxwidth{
    max-width: var(--maxwidth);
}
.rounded{
    border-radius: var(--roundcorner) !important;
}
.text-primary{
    color: var(--color1)!important;
}

/* Stili base > Buttons */
.btn{
    font-size: 0.825rem;
    letter-spacing: 0.04em;
    line-height: 1em;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--roundcorner);
    transition: all .15s ease-in-out;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
    outline: none; /* Rimuove il bordo di focus che appare su alcuni browser */
    border: none;
    display: inline-flex;
    flex-direction: row;
    padding: 0.5rem 1rem;
    width: auto;
    min-height: 2.5rem;
    justify-content: center;
    align-items: center;
}
.btn:hover, .btn:focus{
    /*box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);*/
}
.btn:active{
    transform: scale(0.98); /* Effetto di "pressione" durante il clic */
}
/*.btn > span{
    display: inline-block;
}*/
/* Btn con icona */
.btn > span + .icon{ /* icona a dx */
    margin: 0;
    margin-left: .5rem !important; /* su .icon */
}
.btn > .icon + span{ /* icona a sx */
    margin: 0;
    margin-right: .5rem !important; /* sullo span */
}
/* Btn primario  */
.btn-primary{
    color: var(--color6);
    border: none;
    background: var(--color1);
    min-width: 220px;
    margin: .5rem 0;
}
.btn-primary:hover, 
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle{
    color: var(--color6);
    background: var(--color2);
}
.btn-primary.disabled, .btn-primary:disabled {
    color: var(--color6);
    background-color: var(--color7);
    border-color: var(--color7);
}
.btn-primary > .icon,
.btn-primary:hover > .icon, 
.btn-primary:focus > .icon{
    color: var(--color6) !important;
}
/* Btn primario outline */
.btn-outline-primary{ 
    color: var(--color1);
    border: 2px solid var(--color1);
    box-shadow: none;
}
.btn-outline-primary:hover, 
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active, 
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.show>.btn-outline-primary.dropdown-toggle{
    background: transparent;
    color: var(--color2);
    border: 2px solid var(--color2);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--color7);
    border: 2px solid var(--color7);
}
.btn-outline-primary > .icon,
.btn-outline-primary:hover > .icon, 
.btn-outline-primary:focus > .icon{
    color: var(--color2) !important;
}
/* Btn secondario */
.btn-secondary{
    color: var(--color6);
    border: none;
    background: var(--color2);
    min-width: 220px;
    margin: .5rem 0;
}
.btn-secondary:hover, 
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active, 
.btn-secondary:not(:disabled):not(.disabled):active, 
.show>.btn-secondary.dropdown-toggle{
    color: var(--color6);
    background: var(--color1);
}
.btn-secondary.disabled, .btn-secondary:disabled {
    color: var(--color6);
    background-color: var(--color7);
    border-color: var(--color7);
}
.btn-secondary > .icon,
.btn-secondary:hover > .icon, 
.btn-secondary:focus > .icon{
    color: var(--color6) !important;
}
/* Btn link */
.btn-link{
    box-shadow: none;
    min-height: auto;
}

/* Stili base > padding e margin */
.py-x{
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.pt-x{padding-top: 4rem;}
.pb-x{padding-bottom: 4rem;}
.py-2x{
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.pt-2x{padding-top: 8rem;}
.pb-2x{padding-bottom: 8rem;}
/* Stili base > card */
.card-img{
    border-radius: 0;
}
/* Stili base > Icons */
.icon{
    width: 30px;
    height: 30px;
}
a .icon, .icon{
    color: var(--color8);
}
a:hover .icon, a:focus.icon{
    color: var(--color1);
}
a .icon.icon--negative, .icon.icon--negative{
    color: var(--color6);
}
a:hover .icon.icon--negative, a:focus .icon.icon--negative{
    color: var(--color2negative);
}
/* Stili base > Forms */
#form-container{
    color: var(--color5);
}
#form-container h2{
    margin-top:0;
}
/*
#form-container .btn{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
}*/
.btn-col{
    text-align: center;
}
.btn-col:last-child{
    margin-bottom: 0;
}
input.form-control, textarea.form-control, select.form-control{
    width: 100%;
    font-size: 1.2rem;
    height: auto;
    color: var(--color5);
    background: var(--color6);
    border: 2px solid var(--color7);
    padding: 12px;
    -moz-border-radius: var(--roundcorner);
    -webkit-border-radius: var(--roundcorner);
    border-radius: var(--roundcorner);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
input.form-control:focus, textarea.form-control:focus, select.form-control:focus,
input.form-control:active, textarea.form-control:active, select.form-control:active,
.form-control:focus, .form-control:active{
    outline: 0;
    border-color: var(--color1);
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.form-control::-webkit-input-placeholder {
    color: var(--color7);
}
.form-control::-moz-placeholder {
    color: var(--color7);
}
.form-control:-moz-placeholder { /* Older versions FF */
    color: var(--color7);
}
.form-control:-ms-input-placeholder { 
    color: var(--color7);
}
/* Errori o successi su campo */
.has-error .form-control, .has-error .checkbox label,
.has-error .form-control:focus, .has-error .checkbox label:focus{
    border-color: #ff7f7f;
    -webkit-box-shadow: none;
    box-shadow:none;
}
.has-error .help-block, .has-error .control-label, .has-error .radio, 
.has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline{
    color: #ff7f7f;
}
.has-success .form-control, .has-success .checkbox label, 
.has-success .form-control:focus, .has-success .checkbox label:focus{
    border-color: #75ea75;
    -webkit-box-shadow: none;
    box-shadow:none;
}
/* Errori testo */
.has-error .help-block{
    display: block;
    position: absolute;
    z-index: 1;
    background: #ff7f7f;
    color: #fff;
    margin-top: 2px;
    padding: .5em;
    line-height: 1.4em;
    border-radius: 3px;
}
.has-error .help-block:before {
    content: "";
    position: absolute;
    left: 10px;
    width: 0px;
    height: 0px;
    border-style: solid;    
    top: -12px;
    border-width: 12px 12px 0 12px;
    -webkit-transform: rotate(180deg);
    border-color: rgb(255, 127, 127) transparent transparent transparent;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
/* Checkbox */
input[type=checkbox] {
    visibility: hidden;
}
.checkbox {
    width: 25px;
    position: relative;
    float:left;
    margin-right:20px;
    margin-top:0;
}
/* Create the box for the checkbox */
.checkbox label {
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    background: transparent;
    border:2px solid var(--color7);
    background: var(--color6);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
/* Display the tick inside the checkbox */
.checkbox label:after {
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 13px;
    height: 7px;
    background: transparent;
    top: 6px;
    left: 5px;
    border: 3px solid var(--color5);
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* Effetto hover */
.checkbox label:hover{
    border:2px solid var(--color1);
}
/* Create the hover event of the tick */
.checkbox label:hover::after {
    opacity: 0.3;
}
/* Create the checkbox state for the tick */
 input[type=checkbox]:checked + label::after {
    opacity: 1;
}
/* Messaggi finali esito (successo o errore) */
.form-msg{
    color: var(--color5);
    text-align: center;
    padding: 2rem;
    border-radius: var(--roundcorner);
}
.form-msg .icon{
    color: var(--color6);
    height: 5rem;
    width: 5rem;
    margin: 0 auto 1rem auto;
}
.form-msg.form-msg-err{
    background: rgb(255, 127, 127);
}
.form-msg.form-msg-ok{
    background: rgb(117, 234, 117);
}

/* Scrollbar personalizzata */
::-webkit-scrollbar {
    width: 11px;
}
body {
    scrollbar-width: thin;
    scrollbar-color: var(--color5) #f6f8ff;
}
::-webkit-scrollbar-track {
    background: #f6f8ff;
}
::-webkit-scrollbar-thumb {
    background-color: var(--color5);
    border-radius: 6px;
    border: 3px solid #f6f8ff;
}

/* Background */
.background{
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
}
/* Background > Canvas wave */
.background-wave {
    position: absolute;
    width: 60vw;
    height: 30vh; 
    z-index: 0;
    margin-left: 30vw;
    margin-top: 20vh;
    background: transparent; 
    overflow: hidden;
}
/* Background > Lights */
.background-lights > span{
    display: block;
    position: absolute;
    z-index: 0;
    mix-blend-mode: multiply;
}
.background-lights > span:nth-child(1) {
    width: 60vw;
    height: 60vh;
    bottom: -30vh;
    left: -30vw;
    background: rgba(90,255,245,.2); /* light aquamarine */
    filter: blur(60px);
    animation: float-1 15s ease-in-out infinite alternate;
}
.background-lights > span:nth-child(2) {
    width: 60vw;
    height: 60vh;
    top: 70vh;
    right: -30vw;
    background: rgba(13,112,218,.1); /* blue */
    filter: blur(70px);
    animation: float-2 7s ease-in-out infinite alternate;
}
.background-lights > span:nth-child(3) {
    width: 60vw;
    height: 70vh;
    top: 80vh;
    left: 20vw;
    background: rgba(0,200,255,.2); /* cyan */
    filter: blur(50px);
    animation: float-3 5s ease-in-out infinite alternate;
}
/* Background > Lights > Animation */
@keyframes float-1 {
    0% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(15vw, -10vh) scale(1.1); /* Sale e va a destra */
    }
    100% {
      transform: translate(25vw, -5vh) scale(0.95); /* Si sposta ancora a destra */
    }
}
@keyframes float-2 {
    0% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-20vw, -15vh) scale(1.05); /* Va a sinistra e sale */
    }
    100% {
      transform: translate(-10vw, 5vh) scale(0.9); /* Torna leggermente indietro e scende */
    }
}
@keyframes float-3 {
    0% {
      transform: translate(-10vw, 0) scale(0.95);
    }
    50% {
      transform: translate(15vw, -8vh) scale(1.1); /* Va a destra */
    }
    100% {
      transform: translate(-5vw, -15vh) scale(1); /* Torna a sinistra e sale */
    }
}


/* Sfondi negativi con blur */
.negative, .card.negative {
  color: var(--color6);
  background:rgba(0, 9, 44, 0.8);
  backdrop-filter: blur(2px);
}

/* Scrollreveal animazione allo scroll di elementi con classe .scrollreveal*/
.scrollreveal {
    /* Prima dell'animazione allo scroll */
    opacity: 0;
    transform: translateY(80px); /* Sposta l'elemento in basso prima dell'animazione */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.scrollreveal.scrollreveal-animate {
    /* Dopo animazione allo scroll */
    opacity: 1;
    transform: translateY(0); /* Torna alla posizione originale */
    transition-delay: 300ms; /* Aggiunge un delay di 300ms prima di eseguire l'animazione */
}

/* Navbar */
.navbar{
    padding: 0;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    font-weight: normal;
    background: transparent;
}
.navbar-maxwidth{
    width: 100%;
    max-width: var(--maxwidth);
}
.navbar.onscroll{
    background: var(--color6);
    background-color: var(--backdrop-navscroll);
    backdrop-filter: blur(10px);
    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 10%);
}
/* Navbar > Left Elements */
.navbarMenuLeft{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
/* Navbar > Center Elements */
.navbar-collapse{ 
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: auto;
}
.navbar-nav{
    margin: auto;
}
/* Navbar > Right Elements */
.navbarMenuRight{
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem; /* auto; */
}
.navbarMenuRight .btn{
    margin: 0;
}
/* Navbar > Brand */
.navbar-brand{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.navbar-brand:hover,.navbar-brand:focus{
    transform: scale(1.05);
}
.navbar-brand .logo-marchio{
    aspect-ratio: 509 / 104;
    height: 40px;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    fill: #0d70da; /* default single color if browser don't support css variables */
    --color-up: #0d70da;
    --color-down: #00c8ff;
    --color-text: #203956;
}
.navbar.onscroll .navbar-brand .logo-marchio{
    
}
/* Navbar > Icona cerca */
.button-cerca{
    position: relative;
    width: 54px;
    height: 68px;
    border: none;
    padding: 0;
    background: transparent;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.button-cerca .icon{
    cursor: pointer;
}
.button-cerca:hover .icon,.button-cerca:focus .icon{
    color: var(--color1);
}
/* Navbar > Lingua */
.lang-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}
.lang-link{
    color: rgba(var(--color5rgb), .5);
}
.lang-link:focus,
.lang-link:hover{
    color: var(--color1);
}
.lang-link.active{
    color: rgba(var(--color5rgb), 1);
    font-weight: 500;
}

/* Navbar > Icona menu */
.navbar-toggler{
    position: relative;
    z-index: 1;
    width: 54px;
    height: 68px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
/* Navbar > Icona menu > animazione */
.icon-bars{
    width: 20px;
    height: 20px;
}
.icon-bars span{
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 0;
    margin-bottom: 5px;
    background: var(--color8);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.navbar-toggler:hover .icon-bars span,
.navbar-toggler:focus.icon-bars span {
    background: var(--color1);
}
.icon-bars span:last-child{
    margin-bottom: 0;
}
.icon-esc .icon-bars span:nth-child(1){
    -ms-transform: translate(0,7px) rotate(45deg);
    -webkit-transform: translate(0,7px) rotate(45deg);
    -moz-transform: translate(0,7px) rotate(45deg);
    -o-transform: translate(0,7px) rotate(45deg);
    transform: translate(0,7px) rotate(45deg);
}
.icon-esc .icon-bars span:nth-child(2){
    opacity: 0;
}
.icon-esc .icon-bars span:nth-child(3){
    -ms-transform: translate(0,-7px) rotate(-45deg);
    -webkit-transform: translate(0,-7px) rotate(-45deg);
    -moz-transform: translate(0,-7px) rotate(-45deg);
    -o-transform: translate(0,-7px) rotate(-45deg);
    transform: translate(0,-7px) rotate(-45deg);
}
.navbar-collapse{
    font-size: 1.75rem;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    /* Equivalente a mettere la classe BS flex-column per incolonnare voci menù e links social */
    -ms-flex-direction: column!important;
    flex-direction: column!important;
    background: var(--backdrop-navcollapse);
    /*backdrop-filter: blur(10px);*/
}
.navbar-collapse ul{ 
    font-family: "Inter",sans-serif;
    font-weight: 400;
}
/* Navbar > Btn Speciale */
.btn-nav{ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color6);
    background: var(--color2);
    padding: .65rem 1.5rem;
}
/* Navbar > Fullscreen su cell e tablet */
@media(max-width:991px) {
    .navbar-collapse.show {
        display: flex;
        height: 100svh;
        opacity: 1;
        overflow-y: auto;
        background: var(--color6);
    }
    .navbar-nav {
        width: 100%;
    }
}
.navbar-nav .nav-link{
    color: var(--color8);
    font-weight: bold;
    /*padding: 1rem;
    text-align: left;*/
    border-top: none;

    padding: 1.25rem 2rem;
}
.navbar-nav .nav-item:first-child .nav-link{
    border-top: 0;
}
.navbar-nav .active>.nav-link{
    color: var(--color1);
}
.navbar-nav .active>.nav-link:hover{
    color: var(--color2);
}  
.navbar-nav .nav-link:hover{ /* .navbar-nav .nav-link:focus, */
    color: var(--color1);
}
.navbar-nav .nav-link:focus{
    color: var(--color1); /* Solo per i cell */
}
/* Navbar > Dropdown */
.dropdown-menu{
    position: relative;
    padding: 0;
    margin: 0;
    border: 0 solid rgba(0,0,0,0);
    border-radius: 0;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    text-align: center;
    /*opacity: 0;
    height: 0; 
    -webkit-transition: all 1.25s ease-in-out;
    -moz-transition: all 1.25s ease-in-out;
    -o-transition: all 1.25s ease-in-out;
    transition: all 1.25s ease-in-out;*/
}
/*.dropdown-menu:before{
    content: " ";
    display: block;
    margin: 0 auto 1rem auto;
}
.dropdown-menu:after{
    content: " ";
    display: block;
    margin: 1rem auto 0 auto;
}*/
/*.dropdown.show{
    background: rgba(0,0,0,.05);
}*/
/*.dropdown-menu.show{
    opacity: 1;
    height: auto;
}*/
.navbar .collapse ul > li:hover > a{
    background: transparent; 
}
.navbar .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover{background: transparent;}
.navbar .collapse ul ul ul > li:hover > a{background: transparent;}
.navbar .collapse ul ul, .navbar .collapse ul ul.dropdown-menu{
    background: var(--color3); /*background: transparent;*/
    margin: 0 auto;
    padding: 1rem 0;
    border-radius: var(--roundcorner);
    border-top: 4px solid var(--color2);
    max-width: 340px;
}
.navbar .collapse ul ul ul, .navbar .collapse ul ul ul.dropdown-menu{background: transparent;}
.dropdown-item, .dropdown-item a{
    color: var(--color5);
    font-weight: normal;
}
.dropdown-item{
    padding: .5rem;
}
.dropdown-item:first-child{
    padding-top: 0;
}
.dropdown-item:last-child{
    padding-bottom: 0;
}
.dropdown-item a:hover, .dropdown-item a:focus, .dropdown-item a:active,
.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover{
    background: transparent;
    color: var(--color1);
}
.dropdown-menu.collapsing {
    display:block;
}
/* Navbar > Dropdown > Work on mouse over */
@media only screen and (min-width: 992px) {
    .navbar .collapse ul li:hover> ul{display:block}
    .navbar .collapse ul ul{position:absolute;top:100%;left:0;display:none}
    .navbar .collapse ul ul li{position:relative}
    .navbar .collapse ul ul li:hover> ul{display:block}
    .navbar .collapse ul ul ul{position:absolute;top:0;left:100%;display:none}
    .navbar .collapse ul ul ul li{position:relative}
}
/* Navbar > Dropdown > No caret */
.navbarMenu .dropdown-toggle::after{
    display: none;
}


/* Header */
.header{
    margin-top: 0;
}
/* Home Header grid */
.grid {
    display: grid;
    /* Le prime due righe per immagine e titolo occupano la 100svh.
        Le card avranno la loro altezza naturale e si posizioneranno sotto. */
    grid-template-columns: 1fr; /* Una singola colonna per mobile */
    grid-template-rows: calc(66.6svh - 68px - 2rem) calc(33.3svh - 66px) auto auto auto; /* levo i padding sopra e sotto e il gap */
    gap: 2rem; 
    grid-template-areas:
        "slider"
        "slider"
        "header-card1"
        "header-card2"
        "header-card3";
    height: auto; /* L'altezza della griglia si adatterà al contenuto totale */
    min-height: 100svh; /* Assicura che la parte iniziale sia almeno 100svh */
    padding: 68px 0 2rem 0;
    overflow: visible; /* Permette lo scroll della pagina per vedere le card */
}
.header-card1{
    margin-top: 38px;
}
.slider{ 
    grid-area: slider; 
    display:flex; 
    flex-direction: column;
}
.header-card1 { grid-area: header-card1; }
.header-card2 { grid-area: header-card2; }
.header-card3 { grid-area: header-card3; }
.header-btn{
    position: absolute;
    z-index: 1;
    bottom: 2rem;
    left: 50vw;
    width: 250px;
    /* width: 30vw; */
    margin-left: -125px;
}

/* Home Header parallax images */
.parallax__container {
    position: relative;
    width: 100%;
    height: 50%;
    /*overflow: hidden;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: rgba(255,0,0,.3);*/
}
.parallax__layer {
    position: absolute;
    pointer-events: none; /* Impedisce al mouse di catturare il drag dell'immagine */
    object-fit: contain;
    transition: transform 0.1s ease-out; /* Rende il movimento morbido e fluido */
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5) );
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5));
}
.parallax__layer1{
    z-index: 1;
    width: 207px;
    max-width: 415px;
    margin: 0;
}
.parallax__layer2{
    z-index: 2;
    width: 112px;
    max-width: 225px;
    margin: -138px 0 0 -136px;
}
.parallax__layer3{
    z-index: 3;
    width: 55px;
    max-width: 109px;
    margin: 125px -192px 0 0;
}
.parallax__layer4{
    z-index: 4;
    width: 76px;
    max-width: 151px;
    margin: -191px 0 0 111px;
}
.parallax__layer5{
    z-index: 5;
    width: 113px;
    max-width: 225px;
    margin: 118px 0 0 -193px;
}

/* Home Header text rotator */
.rotator__container { /* Contenitore principale */
    display: grid;
    grid-template-areas: "slide";
    align-items: center;
    position: relative;
    width: 100%;
    height: 50%;
    /*background: rgba(255,255,0,.5);*/
}
.rotator__slide { /* Ogni singola slide si sovrappone nello stesso punto */
    grid-area: slide;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    /* Parte leggermente più in basso */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.8s;
    pointer-events: none;
}
.rotator__slide.is-active { /* SLIDE ATTIVA: entra dal basso sfumando */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.rotator__slide.is-leaving { /* SLIDE IN USCITA: sfuma verso l'alto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
}
.rotator__title{
    font-size: 2rem;
    margin-bottom: .5em;
}

/* Home slide subgrid (Grid version) */
/*.slider .slick-list,
.slider .slick-track,
.slide-image-container{
    height: 100%;
    width: calc(100svw - 15px - 15px);
}
.slide-contents{
    height: 100%;
    display: grid;
    gap: 2rem;
    grid-template-rows: 2fr 1fr; 
    grid-template-areas: "subgrid-image" "subgrid-title";
}
.slide-title{
    grid-area: subgrid-title;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.slide-image{
    grid-area: subgrid-image;
    overflow: hidden;
    border-radius: 4px;
}
.slide-image img{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}*/
/* Home slide subgrid (Flex version) */
/*    
.slide, .slide a{
    display: block;
    width: 100%;
}
.slide-contents{
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
    height: calc(100svh - 68px - 66px);
}
.slide-title {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: #fc0;
}
.slide-image{
    flex-grow: 2;
    overflow: hidden;
    border-radius: 4px;
}*/

/* Header > Slider */
/*.slider{
    background: transparent;
    position: relative;
}
.slider .slick-track{
    height: 100vh;
    min-height: 100svh; 
}
.slider .slide{
    border-radius: var(--roundcorner);
    overflow: hidden;
}
.slider .slide .slide-image{
    background-size: cover; 
    background-position: 50%;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--roundcorner);
}*/
/* Header > Slider > Title */
.slider .slide .slide-title h2{
    font-size: 2rem;
    margin-bottom: 0.5em;
}
/* Header > Slider > Animation */
.slider .slide .slide-title {
    /*z-index: 2;
    font-size: 2.25rem;
    color: var(--color5);*/
    opacity: 0;
    transition: all .5s ease-out .75s;
    transform: translateY(25px);
}
.slider .slide.slick-active .slide-title {
    opacity: 1;
    /*z-index: 2;*/
    transform: translateY(0px);
}
/*
.slider .slide .slide-title span{
    display: block;
}
.slider .slide.slick-active .slide-title {
    opacity: 1;
    z-index: 2;
    transform: translateX(0px);
}
.slider .slide .slide-image{
    background-position: 30% 50%;
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.slider .slide .btn{
    width: auto;
}*/

/* Header > Links */
.header-links{
    text-align: center;
    width: 100%;
    padding: 2rem 0;
}
.header-contacts{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    gap: .25rem;
}
.header-links .list-inline-item{
    margin: 0;
}
.header-links a{
    display: block;
    font-weight: 500;
    padding: 0.75rem;
}
.header-links a .icon {
    fill: var(--color1);
}
.header-links a:hover .icon,
.header-links a:focus .icon{
    fill: var(--color2);
}
/* Header > Scrolldown */
.header-scrolldown{
    position: absolute;
    z-index: 1;
    bottom: .5rem; 
    left: 50%;
    margin-left: -23px;
    text-align: center;
}
.header-scrolldown .icon{
    fill: var(--color5);
}
.header-scrolldown:before{
    content: "SCROLL";
    text-align: center;
    display: block;
    margin-bottom: -.7rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--color5);
}
/* Header: header elenco (es lista news) */
.header.header-elenco{
    margin-top: 68px;
}
.header.header-elenco h1{
    font-size: 2.1rem;
    padding: 0 0 0 0;
    line-height: 1.2em;
    text-align: left;
    margin-bottom: 0;
}
.header.header-elenco h1::after{
    display: block;
    content: "";
    background: var(--color2);
    width: 150px;
    height: 6px;
    border-radius: 3px;
    margin-top: 0.15em;
}
/* Header: post singolo (pagina, articolo...) */
.header.single-post{
    margin-top: 68px;
}
.header.single-post h1{
    color: var(--color5);
    font-size: 2.1rem;
    padding: 0 0 0 0;
    line-height: 1.2em;
    text-align: left;
    margin-bottom: 0;
}
.header.single-post h1::after{
    display: block;
    content: "";
    background: var(--color2);
    width: 150px;
    height: 6px;
    margin-top: 0.15em;
}
/* Header dati (luogo, data, tipo contenuto)*/
.header-dati{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .25rem;
    margin-top: 0.5rem;
    color: var(--color5);
    font-weight: 500;
    text-transform: uppercase;
}
.header-dati .tipo-contenuto{
    color: var(--color1);
}
.header-dati .icon{
    fill: var(--color1);
}
/* Header > 404 */
.error-404{
    display: flex;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: var(--color2);
    font-size: 40vw;
    line-height: 1em;
}
.error-404 span{
    display: inline-block;
}
.error-404 span:nth-child(1){
    -webkit-animation:errFirst .6s ease-in-out infinite;
    -moz-animation:errFirst .6s ease-in-out infinite;
    -o-animation:errFirst .6s ease-in-out infinite;
    -ms-animation:errFirst .6s ease-in-out infinite;
    animation:errFirst .6s ease-in-out infinite;
}
.error-404 span:nth-child(2){
    -webkit-animation:errSecond .6s ease-in-out infinite;
    -moz-animation:errSecond .6s ease-in-out infinite;
    -o-animation:errSecond .6s ease-in-out infinite;
    -ms-animation:errSecond .6s ease-in-out infinite;
    animation:errSecond .6s ease-in-out infinite;
}
.error-404 span:nth-child(3){
    -webkit-animation:errFirst .6s .4s ease-in-out infinite;
    -moz-animation:errFirst .6s .4s ease-in-out infinite;
    -o-animation:errFirst .6s .4s ease-in-out infinite;
    -ms-animation:errFirst .6s .4s ease-in-out infinite;
    animation:errFirst .6s .4s ease-in-out infinite;
}
/* Primo span */
@keyframes errFirst{
    0%,100% {transform:rotate(0deg) scaleX(1.00) scaleY(1.00);}
    50% {transform:rotate(3deg) scaleX(1.20) scaleY(1.20);}
}
@-moz-keyframes errFirst{
    0%,100% {-moz-transform:rotate(0deg) scaleX(1.00) scaleY(1.00);}
    50% {-moz-transform:rotate(3deg) scaleX(1.20) scaleY(1.20);}
}
@-webkit-keyframes errFirst{    
    0%,100% {-webkit-transform:rotate(0deg) scaleX(1.00) scaleY(1.00);}
    50% {-webkit-transform:rotate(3deg) scaleX(1.20) scaleY(1.20);}
}
@-o-keyframes errFirst{    
    0%,100% {-o-transform:rotate(0deg) scaleX(1.00) scaleY(1.00);}
    50% {-o-transform:rotate(3deg) scaleX(1.20) scaleY(1.20);}
}
@-ms-keyframes errFirst{    
    0%,100% {-ms-transform:rotate(0deg) scaleX(1.00) scaleY(1.00);}
    50% {-ms-transform:rotate(3deg) scaleX(1.20) scaleY(1.20);}
}
/* Secondo span */
@keyframes errSecond{
    0%,100% {transform:rotate(-4deg) scaleX(1.30) scaleY(1.30);}
    50% {transform:rotate(0deg) scaleX(1.0) scaleY(1.0);}
}
@-moz-keyframes errSecond{
    0%,100% {-moz-transform:rotate(-4deg) scaleX(1.30) scaleY(1.30);}
    50% {-moz-transform:rotate(0deg) scaleX(1.0) scaleY(1.0);}
}
@-webkit-keyframes errSecond{    
    0%,100% {-webkit-transform:rotate(-4deg) scaleX(1.30) scaleY(1.30);}
    50% {-webkit-transform:rotate(0deg) scaleX(1.0) scaleY(1.0);}
}
@-o-keyframes errSecond{    
    0%,100% {-o-transform:rotate(-4deg) scaleX(1.30) scaleY(1.30);}
    50% {-o-transform:rotate(0deg) scaleX(1.0) scaleY(1.0);}
}
@-ms-keyframes errSecond{    
    0%,100% {-ms-transform:rotate(-4deg) scaleX(1.30) scaleY(1.30);}
    50% {-ms-transform:rotate(0deg) scaleX(1.0) scaleY(1.0);}
}


/* Main */
.main{
    background: transparent;
}
.testo a{
    text-decoration: underline;
}
.testo li::marker {
    font-weight: 500;
    color: var(--color2);
    line-height: 2.5rem;
}
.testo ul li::marker{
    font-size: 1.5em;
    content: "› ";
}
.testo h2, .testo h3, .testo h4, .testo h5, .testo h6{
    margin-bottom: .75em;
}

/* Main > Galleria foto generica */
.photos {
    border-radius: var(--roundcorner);
    overflow: hidden;
    margin-bottom: 2rem;
}
.photos img{
    object-fit: cover;
}
.photos .slide{
    margin-bottom: 0;
    overflow: hidden;
    border-radius: var(--roundcorner);
}
.photos .slick-dots{
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center; 
    padding: 1.25rem 2rem;
    gap: 1rem;
    text-align: center;
    margin: 0 auto -1px -1px;
    position: absolute;
    bottom: 0;
    background: var(--color6);
    border-top-right-radius: var(--roundcorner);
    border-bottom-left-radius: var(--roundcorner);
}
.photos .slick-dots li{
    position: relative;
    display: block;
    height: 12px;
    width: 12px;
    margin: 0;
    border: 0;
    background: var(--color7);
    cursor: pointer;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.photos .slick-dots li button {
    background: transparent;
    display: block;
    height: 12px;
    width: 12px;
    outline: none;
    margin: 0;
    border: 0;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.photos .slick-dots  li.slick-active{
    background: var(--color1);
    border: 2px solid var(--color1);
}
/* Main > Video */
.photos .slick-slide{
    height: auto; /* corregge bug altezze delle slide con i filmati */
}
/* Play dei thumb dei video */
.video-thumb{
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16/9;
    /*display:block;
    float: left;
    width: 100%;*/
    background-color: var(--color3);
    background-repeat: no-repeat;
    background-position: center center; 
    background-size: cover;
}
.sixteen-nine {
    /*position: relative;*/
}
.sixteen-nine:before {
    /*display: block;
    content: " ";
    width: 100%;
    padding-top: 56.25%;*/
}
.video-thumb{
    /*position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/
  }
.video-thumb .play{
    position: relative;
    outline: none;
    z-index: 1;
    width: 84px;
    height: 84px;
    /*top: 50%;
    left: 50%;*/
    border: 0;
    padding: 0;
    text-align: center;
    background:rgba(0, 0, 0, 0.33);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    -webkit-border-radius: 42px;
    -moz-border-radius: 42px;
    border-radius: 42px;
    /*margin: -42px 0 0 -42px;*/
    border: 2px solid #fff;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.33);
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.33);
}
.video-thumb .play:hover, .video-thumb .play:focus{	
    transform: scale(1.05);
}
.video-thumb .play div{
    width: 40px;
    height: 40px;
    border-style: solid;
    border-width: 20px;  
    border-color: transparent transparent transparent #fff;
    box-sizing: border-box;
    border-width: 20px 0px 20px 34px;
    margin: 20px 16px 20px 28px;
}
/* Contenitore di video esterni in iframe per resa responsiva */
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    margin: 0 auto;
    height: 0; 
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Main > Cards */
.card-item{
    margin-bottom: 2rem;
}
.card-item .card, .card{
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(2px);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.05);
    color: var(--color5);
    border: none;
    -moz-border-radius: var(--roundcorner);
    -webkit-border-radius: var(--roundcorner);
    border-radius: var(--roundcorner);
    transition: 
        transform 0.3s ease-in-out, 
        box-shadow 0.3s ease-in-out;
    overflow: hidden;
}
.card-img-container{
    margin-bottom: 0;
}
.card-img-top{
    width: 100%;
    height: auto;
    aspect-ratio: 16 /9;
    border-top-left-radius: var(--roundcorner);
    border-top-right-radius: var(--roundcorner);
    border: 0;
    transition: transform 0.3s ease-in-out, all 0.3s ease-in-out;
    /* Gradient Mask */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%); 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    /* Filters effect 1 */
    /*filter: grayscale(50%) opacity(50%);
    -webkit-filter: grayscale(50%) opacity(50%);*/  /* WebKit */  
    /* Filters effect 2 */
    filter:  sepia(100%) hue-rotate(160deg) brightness(85%) saturate(40%) opacity(70%);
    -webkit-filter: sepia(100%) hue-rotate(160deg) brightness(85%) saturate(40%) opacity(70%);
}
.card-item figure{
    margin-bottom: 0;
    position: relative;
}
.card-item time{
    color: var(--color5);
    position: absolute;
    z-index: 1;
    top: 0;
    left:0;
    text-align: center;
    font-weight: 500;
    line-height: 1em;
    text-transform: uppercase;
    background: var(--color6);
    border-radius: var(--roundcorner);
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.card-item time div{
    position: relative;
    z-index: 1;
    padding: 0;
}
.card-item time div:first-child{ /* Giorno n° */
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    color: var(--color2);
    font-size: 2rem;
    line-height: .8em;
}
.card-item time:nth-child(2){ /* Data fine */
    left: auto;
    right: 0;
    border-radius: var(--roundcorner);
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
}
.card-item .card-title{
    font-size: 1.3rem;
    line-height: 1.2em;
    margin-bottom: 1.5rem;
    /*transition: all .25s cubic-bezier(0.7, 0, 0.3, 1);*/
}
.card-title::after{
    content: "";
    display: block;
    background: var(--color2);
    width: 50px;
    height: 4px;
    margin-top: 3px;
    border-radius: 2px;
    transition: transform 0.3s ease-in-out, all 0.3s ease-in-out;
}
.card-item .card-icon{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    color: var(--color1);
}
.card-item .card-body{
    padding: 2rem;
    padding-bottom: 1rem;
}
.card-item .card-footer{
    background: transparent;
    color: var(--color1);
    text-align: left;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 500;
    border-top: 0;
    padding: 0 2rem 1.75rem 2rem;
}
.card-item .card-footer .icon{
    fill: var(--color1);
    margin: 0;
    /*transition: all .25s cubic-bezier(0.7, 0, 0.3, 1);*/
}
.card .list-group-item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-width: 1px 0 0 0;
    border-color: rgba(0,0,0,.1);
    background: transparent;
    padding: 0.5rem 2rem;
    border-top: 1px solid rgba(var(--color5rgb),.1);
}
/*.card .list-group-item:first-child{
    margin-top: -1rem;
}*/
.card .list-group-item:last-child{
    margin-bottom: 1rem;
}
.card-footer{
    background: transparent;
}
/* Main > Cards > Negative Card */
.negative-cards .card{
    color: #fff;
    background:rgba(0, 9, 44, 0.8); 
    backdrop-filter: blur(2px);
}
.negative-cards.card-item .card-title{
    color: var(--color6);
}
.negative-cards.card-item .card-title::after{
    background: var(--color2negative);
}
.negative-cards.card-item .card-icon {
    color: var(--color2negative);
}
.negative-cards.card-item .card .list-group-item {
    border-top: 1px solid rgba(var(--color6rgb),.1);
}
/* Main > Cards > Header Card */
.header-card.card-item{
    margin-bottom: 0;
}
.header-card.card-item .card-body{
    margin-top: 0;
}
.header-card.card-item .card-title{
    width: calc(100% - 70px); /* evita che il titolo si sovrapponga all'icona */
}
/* Main > Cards > Funzionalità Card */
.funzionalita-card{
    font-size: 90%;
    line-height: 1.45em;
}
.funzionalita-card.card-item .card-title{
    width: calc(100% - 48px); /* evita che il titolo si sovrapponga all'icona */
}
.funzionalita-card.card-item .card-category{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    text-align: center;
    width: 70px;
    height: 70px;
    background: var(--color6);
    border-radius: var(--roundcorner);
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0;
    display: flex;
}
/* Main > Cards > On hover */
.card-item .card:hover, .card-item .card:focus{
    transform: scale(1.03); /* Ingrandisce la card del 3% */
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.1); 
}
.card-item .card:hover .card-img-top, .card-item .card:focus .card-img-top{
    border-radius: var(--roundcorner);
    /* Filters effect 1 */
    /*filter: grayscale(0%) opacity(100%);
    -webkit-filter: grayscale(0%) opacity(100%);*/  /* WebKit */ 
    /* Filters effect 2 */  
    filter:  sepia(0%) hue-rotate(0deg) brightness(100%) saturate(100%) opacity(100%);
    -webkit-filter: sepia(0%) hue-rotate(0deg) brightness(100%) saturate(100%) opacity(100%);
}
.card-item .card:hover .card-title::after{  
    width: 100px;
}
/* Main > Cards > Static (no animatio On hover) */
.card-item .card.card-static:hover, .card-item .card.card-static:focus{
    transform: none;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.05);
}

/* Main > Cards > News button */
.news-btn{}
/* Main > Tabelle e badge */
.badge{
    background: var(--color2);
    color: var(--color6);
}
.table{
    margin-bottom: 2em;
}
.table-responsive { border: 0;}
.table tr td,
.table tr th,
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td 
{
    border-top: 1px solid var(--color7);
    padding: .75em .25em;
}
.table tr td a, #main .box-content-big .table tr td a{
    color: var(--color1);
}
.table-hover tbody tr:hover {
    background-color: var(--color3);
}
.main .table tr td a:hover,
.main .table tr td a:focus{
    text-decoration: none;
}
.table tr:last-child td,
.table tr:last-child th{
    border-bottom: 1px solid var(--color7);
}
/* Main > Documenti e Links */
.docs, .links{
    margin-top: 3rem;
    text-align: left;
}
.docs header, .links header{
    text-align: center;
}
.docs a, .links a{
    font-weight: 500;
}
.container-docslinks > div > div > div:last-child .table{
    margin-bottom: 0;
}
/* Main > Dettagli Progetto */
.project-details{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 0;
    padding: 1rem 2rem;
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(2px);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.05);
    border: none;
    border-radius: var(--roundcorner);
}
.project-details div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
    border-bottom: 1px solid var(--color7);
    padding: 1rem 0;
}
.project-details div:last-child{
    border-bottom: 0;
}
/* Main > Post lista futuri passati */
.next-prev{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 3rem;
    padding: 1rem 2rem;
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(2px);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.05);
    border: none;
    border-radius: var(--roundcorner);
}
.next-prev a{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 1rem;
    border-bottom: 1px solid var(--color7);
    padding: 1rem 0;
}
.next-prev h4{
    margin-bottom: 0;
}
.next-prev a:hover .title h4,
.next-prev a:focus .title h4{
    color: var(--color2);
}
.next-prev div:last-child a:last-child{
    border-bottom: 0;
}
.next-prev img{
    width: 20%;
    max-width: 80px;
    border-radius: var(--roundcorner);
}
.next-prev .time{
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color1);
}
/* Main > Mappa */
.mappa{
    width: 100%;
    height: 60vh;
    background: var(--color6);
    border-radius: var(--roundcorner);
}
.mappa-indirizzo{
    padding: 1rem 0;
}
.mappa-popup .leaflet-popup-content-wrapper{
    font-size: 1rem;
    background: var(--color1);
    color: var(--color6);
    border-radius: var(--roundcorner);
    box-shadow: none;
}
.mappa-popup .leaflet-popup-content {
    margin: 20px;
}
.mappa-popup .leaflet-popup-tip-container{
    display: none;
}
.leaflet-container .mappa-popup{
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}
.leaflet-container .mappa-popup a.leaflet-popup-close-button,
.leaflet-container .mappa-popup a.leaflet-popup-close-button:hover{
    color: var(--color6);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
}
.leaflet-container .mappa-popup a{
    color: var(--color6);
}
.mappa-popup .luogo{
    display: block;
    margin-top: 5px;
    color: var(--color2negative);
    text-transform: uppercase;
}
.leaflet-container .mappa-popup a:focus,
.leaflet-container .mappa-popup a:hover{
    color: var(--color6);
    text-decoration: underline;
}
.mappa-popup.leaflet-popup{
    margin-bottom: 0;
}
/* Mappa > Marker cluster custom */
.marker-cluster div{
    background-color: var(--color1);
    outline: 5px solid rgba(var(--color1rgb),0.4);
    color: var(--color6);
}
.marker-cluster:hover div{
    background-color: var(--color2);
    outline: 5px solid rgba(var(--color2rgb),0.4);
}
.marker-cluster div{
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 5px solid rgba(var(--color1rgb),0.4);
}
.marker-cluster div span{
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    line-height: 1em;
}
/* Mappa > Tasti zoom */
.leaflet-top .leaflet-control {
    margin-top: 20px !important;
    border: 0 !important;
}
.leaflet-left .leaflet-control {
    margin-left: 20px !important;
    border: 0 !important;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 0;
}
.leaflet-touch .leaflet-bar a:first-child {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}
.leaflet-touch .leaflet-bar a:last-child {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
    font-size: 22px !important;
    background: var(--color1) !important;
    color: var(--color6) !important;
}
.leaflet-bar a{
    color: var(--color6);
    border-bottom: 0 !important;
}
.leaflet-bar a:hover {
    color: var(--color6) !important;
    background: var(--color2) !important;
    border-bottom: 0 !important;
}
.leaflet-bar a.leaflet-disabled {
    cursor: default !important;
    color: rgba(var(--color6rgb),0.5) !important;
    background: var(--color2) !important;
}

/* Main > Turni e orari attività */
#orari-turni{
    line-height: 1.6em;
    color: var(--color5);
}
.tabella-turno-orari {
    width:100%; 
    font-size:.85em;
    line-height:1.1em;
}
.tabella-turno-orari tbody{
    background: var(--color6);
}
.tabella-turno-orari tr{
    border-right:0;
}
.tabella-turno-orari tr:last-child td{
    border-bottom: 2px solid var(--color4);
}
.tabella-turno-orari th{
    color: var(--color1);
    padding:5px;
    font-weight: 500; 
    text-transform: uppercase;
    text-align:center;
}
.tabella-turno-orari td{
    width:14%; 
    background: var(--color3);
    border-top: 2px solid var(--color4);
    vertical-align:top; 
    border-left: 2px solid var(--color4);
    position:relative; /* position relative importante perchè i div degli orari avranno posizionamento assoluto relativo ad esso */
}
.tabella-turno-orari td:last-child{
    border-right: 2px solid var(--color4);
}
/*.tabella-turno-orari td.colonna-giorno2, .tabella-turno-orari td.colonna-giorno4, .tabella-turno-orari td.colonna-giorno6{
    background: rgba(0,0,0,.1);
}*/
.tabella-turno-orari td.colonna-ora{
    width:2%;
    padding:0px 5px;
    text-align:center; 
    background: var(--color4);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.2);
}
.tabella-turno-orari td.colonna-ora div{
    height: 24px; 
    margin-top:2px;
    overflow:hidden;
}
div.orario-container, div.orario-selected-container{position:relative;}
div.orario-container div{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    position:absolute; 
    z-index:1;
    left:0; 
    width:100%; /* altezza, top e background sono definiti nello stile inline dei div */
    overflow:hidden;
    text-align:center;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-sizing: border-box; /* i bordi all'interno delle dimensioni, altrimenti farebbero sforare le dimensioni dei div orario calcolate */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid var(--color3);
    background: var(--color1);
} 
div.orario-container div span{
    color: var(--color6);
}
div.orario-selected-container div{
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute; 
    z-index:100;
    left:0; 
    width:100%; /* altezza, top e background sono definiti nello stile online dei div */
    overflow:hidden;
    text-align:center;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-sizing: border-box; /* i bordi all'interno delle dimensioni, altrimenti farebbero sforare le dimensioni dei div orario calcolate */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid var(--color3);
    color: var(--color1);
    background: var(--color2);
}

/* Sections */
/* Sections > Numeri */
.numeri{
    text-align: center;
}
.numero{
    padding: 2rem 1rem;
}
.numero-title{
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    font-size: 2.5rem;
    line-height: .85em;
    margin-bottom: 1rem;
    color: var(--color2negative);
}
.numero-text{
    margin-bottom: 0;
}

/* Sections > Generica Testo big + immagine */
.testobig-img{
    font-size: 1.25rem;
    line-height: 1.6em;
}

/* Sections > Full Img (Generica immagine big con testo sopra) */
.fullimg{
    color: var(--color6);
}
.fullimg__img{
    object-fit: cover;
    aspect-ratio: 1 / 1;
}
.fullimg__gradient{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(var(--color8rgb), 1) 0%, rgba(var(--color8rgb), 0.3) 100%);
}
.fullimg__title{
    color: var(--color2negative);
    font-size: 2.5rem;
    line-height: .85em;
    margin-bottom: 1rem;
}
.fullimg__body{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    position: relative;
    z-index: 2;
    color: var(--color6);
}

/* Asides */
/* Asides > Marquee loghi */
.marquee__wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    /*margin: auto;
    max-width: 100vw;*/
  }
.marquee {
    --gap: 3rem;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    /* Per Chrome, Edge, Safari */
    -webkit-mask-image: linear-gradient(
        to right,
        hsl(0 0% 0% / 0),
        hsl(0 0% 0% / 1) 20%,
        hsl(0 0% 0% / 1) 80%,
        hsl(0 0% 0% / 0)
    );
    /* Per Firefox e standard futuro */
    mask-image: linear-gradient(
        to right,
        hsl(0 0% 0% / 0),
        hsl(0 0% 0% / 1) 20%,
        hsl(0 0% 0% / 1) 80%,
        hsl(0 0% 0% / 0)
    );
    opacity: 0.7; /* rende più soft l'impatto dei loghi */
}
.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll-x 60s linear infinite;
}
.marquee--reverse .marquee__group {
    animation-direction: reverse;
    animation-delay: -3s;
}
@keyframes scroll-x {
    from {
        transform: translateX(var(--scroll-start));
    }
    to {
        transform: translateX(var(--scroll-end));
    }
}

/* Asides > Orari apertura */
.orari-apertura .table{
    text-transform: uppercase;
    margin-bottom: 0;
    border-bottom: 1px solid var(--color7);
}
.orari-apertura .table td, .orari-apertura .table th {
    border-top: 1px solid var(--color7);
    border-bottom: 0;
}
.orari-apertura .table tr:last-child td,
.orari-apertura .table tr:last-child th{
    border-bottom: 0;
}

.orari-apertura .table tr td:first-child{
    text-align: left;
}
.orari-apertura .table td.condizione{
    /* classe speciale per orari con diciture come "solo appuntamento" */ 
    padding: .2em .25em;
}

/* Asides > Social sharer */
.social-sharer{
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
}
.social-sharer:before{
    content: "Condividi";
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color5);
}
html[lang="en"] .social-sharer:before { /* Modifico la scritta per l'inglese */
    content: "Share";
}
.social-sharer .icon{
    fill: var(--color1);
    margin: 1rem;
}
.social-sharer a:hover .icon,
.social-sharer a:focus .icon,
.social-sharer a:active .icon{
    fill: var(--color2);
}
.social-sharer ul{
    margin-bottom: 0;
}
.msg-link-copiato{
    color: var(--color6);
    background:  var(--color1);
    position: fixed;
    z-index: 3;
    left: 50%;
    bottom: 50px;
    width: 140px;
    margin-left: -70px;
    padding: .5em;
    font-weight: 500;
    text-transform: uppercase;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}


/* Footer */
.footer-dati{
    padding: 2rem;
    font-size: 90%;
    line-height: 1.45em;
}
.footer-item{
    margin-bottom: 0;
}
.footer-brand .logo-marchio{
    aspect-ratio: 509 / 104;
    height: 40px;
    margin-bottom: 1.15rem;;
    fill: #ffffff; /* default single color if browser don't support css variables */
    --color-up: var(--color1negative);
    --color-down: var(--color2negative);
    --color-text: #ffffff;
}
.footer-title{
    color: var(--color6);
    font-size: 1rem;
    line-height: 1.6em;
    margin-bottom: 1.5rem;
}
.footer-title::after {
    content: "";
    display: block;
    background: var(--color2negative);
    width: 50px;
    height: 4px;
    border-radius: 2px;
    margin-top: 3px;
    transition: transform 0.3s ease-in-out, all 0.3s ease-in-out;
}
.footer-subtitle{
    color: var(--color6);
    font-size: 1rem;
    line-height: 1.6em;
    margin-bottom: 0;
}
.footer a{
    display: inline-block;
    color: var(--color2negative);
}
.footer a:hover, .footer a:focus{
    color: var(--color2negative);
    filter: brightness(1.2); /* Aumenta la luminosità del 20% */
}
.footer .icon{
    fill: var(--color2negative);
    display: inline-block;
    margin: 0.3rem 10px 0.3rem 0;
    flex-shrink: 0;
    flex-grow: 0;
}
.footer-item ul li a{
    display: flex;
    align-items: center;
}
.footer a:hover .icon, .footer a:focus .icon{
    fill: var(--color2negative);
    filter: brightness(1.2); /* Aumenta la luminosità del 20% */
}
.footer-contacts{
    margin-top: -0.5rem;
}
.footer-social{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 1rem;
}
.footer-links li a{
    padding: .3rem 0;
    border-bottom: 1px solid rgba(var(--color6rgb),.1);
}
.footer-links li:first-child a{
    padding-top: 0;
}
.footer-links li:last-child a{
    padding-bottom: 0;
    border-bottom: 0;
}
.footer-social a .icon{
    margin: 0;
}
.footer-copyright-container{
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.copyright{
    font-size: .9em;
    text-align: center;
}
.copyright a{
    color: var(--color5);
    text-align: center;
}
.copyright > span{
    display: block;
}
.copyright a:hover, .copyright a:focus{
    color: var(--color5);
    text-decoration: underline;
}
.by-siteland{
    display: inline;
    position: relative;
    z-index: 1;
    font-size: .9em;
    text-align: center;
    margin-top: .9rem;
}
.by-siteland a{
    color: var(--color1);
    text-transform: uppercase;
    text-align: center;
}
.by-siteland a:focus, .by-siteland a:hover{
    color: var(--color1);
    text-decoration: underline;
}


/* Modals */
.modal-backdrop.show {
    opacity: 1;
    filter: alpha(opacity=100);
}
.modal .close{
    font-size: 3rem;
    line-height: .7em;
    font-weight: 300;
    color: var(--color5);
    text-shadow: 0 0 0 transparent;
    opacity: 1;
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 20px;
    float: none;
}
.modal-title{
    color: #fff;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, .75);
    width: 100%;
    text-align: center;
}
.modal-header {
    border-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Modals > Cerca modal */
.modal-backdrop {
    /* Valido per modal cerca, modal foto è in bluimp-gallery.css, modal video è in .media-modal-open .modal-backdrop */ 
    background: var(--backdrop-color);
    backdrop-filter: blur(10px);
}
/*.modal.modal-cerca .close:focus, .modal.modal-cerca .close:hover{
    color: var(--color5) !important;
    font-weight: 300;
}*/
.modal-cerca .modal-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
}
.modal-cerca .modal-content {
    background-color: transparent;
    border: none;
    border-radius: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.modal-cerca .modal-footer{
    border-top: none;
}
.modal-cerca .modal-body{
    padding: 3em .5em;
}
.cerca-input{
    width: 100%;
    height: 100%;
    padding: .2em 10% .2em 10px;
    font-size: 1.75rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--color5);
    border-bottom: 2px solid var(--color7);
    outline: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.cerca-input::-webkit-input-placeholder { color: var(--color7); }
.cerca-input:-moz-placeholder { color: var(--color7); }
.cerca-input::-moz-placeholder { color: var(--color7); }
.cerca-input:-ms-input-placeholder { color: var(--color7); }
.cerca-submit{
    position: absolute;
    width: 1.5rem;
    height: 3rem;
    margin-right: 1.5rem;
    overflow: hidden;
    right: 0;
    top: 0%;
    background: transparent url(/img/search.svg) no-repeat center center;
    background-size: 100%;
    border: none;
    transform-origin: 50% 50%;
    outline: none;
    cursor: pointer;
}
.cerca-subtitle{
    /*padding: 0 0 .5em 0;
    font-size: 2em;*/
    color: var(--color5);
}
.cerca-error{	
    background: #f9b8b8;
    padding: .6em 1em;
    color: var(--color5);
    margin-bottom: 3em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: 500;
}
.cerca-result{
    display: table;
    width: 100%;
    background: var(--color6);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.05);
    padding: .6em 1em;
    color: var(--color5);
    margin-bottom: 6px;
    -webkit-border-radius: var(--roundcorner);
    -moz-border-radius: var(--roundcorner);
    border-radius: var(--roundcorner);
    transition: transform 0.3s ease-in-out, all 0.3s ease-in-out;
}
.cerca-result:last-child{
    margin-bottom: 3em;
}
.cerca-result-title{
    display: table-cell;
    font-size: 1.15em;
}
.cerca-result-text{
    display: table-cell;
    width: 60%;
    color: var(--color5);
    font-weight: 300;
    font-size: .9em;
    line-height: 1.5em;
}
.cerca-result-type{
    display: block;
    font-size: 0.75em;
    color: var(--color1);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.cerca-result:hover, .cerca-result:focus{
    /*background: var(--color4);*/
    color: var(--color5);
    text-decoration: none;
    transform: scale(1.03);
}
/* Modals > Media modal */
.media-modal-open .modal-backdrop {
    background-color: var(--backdrop-color-dark);
    backdrop-filter: blur(10px);
}
.modal.media-modal .close,
.modal.media-modal .close:focus, 
.modal.media-modal .close:hover{
    color: #fff;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, .75);
}
.media-modal .modal-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
}
.media-modal .modal-content {
    background-color: transparent;
    border: none;
    border-radius: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.media-modal .modal-footer{
    border-top: none;
}
.media-modal .modal-body{
    padding: 0;
}
/* Contenitore di video esterni in iframe per resa responsiva */
.embed-container {
    position: relative; 
    padding-bottom: 56.25%; 
    margin: 0 auto;
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
}
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
@media (min-width: 601px) {
    .embed-container { max-width: 80%; }
    .embed-container iframe, .embed-container object, .embed-container embed { height: 80%; }
}