@charset "UTF-8";
/* CSS Document */

body,
h1,
h2,
h3,
h4,
h5,
p {
    font-family: "Montserrat", sans-serif;
}

.homemade-apple-regular {
    font-family: "Homemade Apple", cursive;
    font-weight: 400;
    font-style: normal;
}

.noise {
    pointer-events: none;
    z-index: calc(infinity);
    opacity: 0.06;
    background-image: url("../img/noise.webp");
    background-position: 0 0;
    background-size: 250px;
    background-attachment: fixed;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

::-moz-selection {
    /* Code for Firefox */
    color: #F4F2E8;
    background: #383838;
}

::selection {
    color: #F4F2E8;
    background: #383838;
}
.wa {
    position: fixed;
    max-width: 80px;
    right: 1rem;
    bottom: 1rem;
    z-index: 100000;
}

/*-------------------------video-apertura------------------------------*/
.centro {
    position: fixed;
    width: 120%;
    animation-duration: 2s;
    animation-name: animate-fade;
    animation-delay: 2s;
    animation-fill-mode: both;
    background-color: transparent;
    height: 100vh;

}

@keyframes animate-fade {
    0% {
        opacity: 1;
        scale: 1.2;
        display: block;
    }

    100% {
        opacity: 0;
        scale: 1.2;
        display: none;
    }
}
/*-------------------------fine-video-apertura------------------------------*/

.navbar {
    padding-left: 2rem;
    padding-right: 2rem;

}
.logo-nav {
    max-width: 50px;
    min-width: 50px;
}

.nav-link {
    display: block;
    color: #0e0e0e;
    font-size: calc(14px + (16 - 14)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 2rem;
}
.prenota {
    position: absolute;
    top: 0;
    width: 7rem;
    right: 0.5rem;
}

.lg-sito {
    padding-left: 6%;
    padding-right: 6%;
}

.let-head {
    width: 100%;
    z-index: -5;
}

.no-pad {
    padding-left: 0;
    padding-right: 0;
    padding-top: 2rem;
    position: relative;

}
.r-cop {
    position: relative;
}
.copertura {
    background-color: #fafaf9;
    position: absolute;
    width: 0;
    height: 100%;
    z-index: 20;
    top: 0;
    left: 0;
    padding-left: 0px!important;
    padding-right: 0px!important;
    animation-name: slide-cop;
    animation-duration: 2s;

}
@keyframes slide-cop {
    0% {
        width: 100%;
    }
    2% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

.d2 {
    animation-duration: 1.5s;
}
.d3 {
    animation-duration: 2s;
}

.video-head {
    position: absolute;
    top: 20%;
    right: 0;
    opacity: calc(0.6);
    animation-name: app-video;
    animation-duration: 2.5s;
    width: 150%;
}
@keyframes app-video {
    0% {
        opacity: calc(0);
    }
    20% {
        opacity: calc(0);
    }
    100% {
        opacity: calc(0.6);
    }
}

.testo-verticale {
    position: absolute;
    writing-mode: vertical-rl;
    left: 2.5%;
    top: 25%;
    color: #0e0e0e;
    font-size: calc(14px + (15 - 14)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 500;
}

.h1-head {
    font-size: calc(16px + (22 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15rem;
}
.h2-head {
    padding-top: 1rem;
    font-size: calc(16px + (80 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (76 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 700;
}

.sp-ph {
    padding-top: 10rem;
    padding-bottom: 10rem;
}
/* Il contenitore ha dimensione fissa: cambia solo lo zoom dell'immagine */
.zoom-frame {
    width: min(90%, 1100px);
    aspect-ratio: 4 / 5;
    /* metti la stessa proporzione della tua foto */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 16px;
}

.zoom-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.8);
    /* zoom iniziale */
    transform-origin: center center;
    will-change: transform;
}

.txt-hand {
    position: absolute;
    top: 40%;
    left: 10%;
    z-index: 90;
    font-family: "Homemade Apple", cursive;
    font-size: calc(16px + (50 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (70 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #5f6f3b;
    font-weight: 500;
    text-shadow: 1px 1px 1px #fafaf9;
}

.back-ph {
    position: relative;
    background-image: url("../img/back-foto.svg");
    background-position: center right;
    background-size: 100%;
    background-repeat: no-repeat;
}

.virgolette {
    font-size: calc(16px + (80 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (70 - 16)*((100vw - 300px) /(1920 - 300)));
}
.sp1 {
    padding-left: 2rem;
}
.sp2 {
    padding-left: 4rem;
}

.back-green {
    background-color: #5f6f3b;
}
.sp-sez-green {
    padding-top: 4em;
    padding-bottom: 4rem;
    padding-left: 6rem;
}
.back-salone {
    position: relative;
    background-image: url("../img/salone.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cop-ph {
    background-color: #5f6f3b;
    position: absolute;
    width: 100%;
    height: 0;
    z-index: 20;
    top: 0;
    left: 0;
    padding-left: 0px!important;
    padding-right: 0px!important;

}
.cop-ph.visible {
    animation-name: slide-cop-ph;
    animation-duration: 2s;
}
@keyframes slide-cop-ph {
    0% {
        height: 100%;
    }
    20% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}

.sp-txt {
    padding: 20% 8% 10%;
}
.title {
    font-size: calc(28px + (32 - 28)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(28px + (34 - 28)*((100vw - 300px) /(1920 - 300)));
    color: #fafaf9;
    font-weight: 700;
    padding-bottom: 2rem;
    text-transform: uppercase;
}
.up-txt {
    font-size: calc(16px + (20 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (24 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fafaf9;
    font-weight: 600;
}
.txt {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (22 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fafaf9;
    font-weight: 300;
}
.back-el-white {
    position: relative;
    background-image: url("../img/back-white.svg");
    background-position: bottom right;
    background-size: 100%;
    background-repeat: no-repeat;
}
.back-gr {
    position: relative;
    background-image: url("../img/back-gr.svg");
    background-position: top right;
    background-size: 100%;
    background-repeat: no-repeat;
}
.back-social {
    position: relative;
    background-image: url("../img/back-gr.svg");
    background-position: top right;
    background-size: 300%;
    background-repeat: no-repeat;
}
.back-black {
    background-color: #111111;
}
.link-privacy{
    color:#495529!important;
}
.link-privacy:hover{
    color:#61703c!important;
}
.black {
    color: #111111;
}
.sp-ascolto {
    padding: 8% 8% 2%;
}
.sp-listino {
    padding: 0 8% 2%;
}
.sp-innovazione {
    padding: 8% 8% 2%;
}
.title-big {
    font-size: calc(36px + (140 - 36)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(30px + (110 - 30)*((100vw - 300px) /(1920 - 300)));
    color: #111111;
    font-weight: 600;
    padding-bottom: 2rem;
    text-transform: uppercase;
}

.loghi {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 3rem;
    width: 100%;
}

.marquee {
    overflow: hidden;
    width: 100%;
    cursor: grab;
    touch-action: pan-y;
    /* lo scroll verticale della pagina resta attivo su mobile */
    user-select: none;
    -webkit-user-select: none;
}

.marquee.dragging {
    cursor: grabbing;
}

.track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee-item {
    flex: 0 0 auto;
    width: 50vw;
    padding-right: 0;
    box-sizing: border-box;
}

.marquee-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    pointer-events: none;
    /* evita il drag nativo dell'immagine */
    -webkit-user-drag: none;
}

@media (max-width: 700px) {
    .marquee-item {
        width: 60vw;
    }
}

.head-list {
    width: 60%;
}

.title-listino {
    font-size: calc(30px + (32 - 30)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(30px + (38 - 30)*((100vw - 300px) /(1920 - 300)));
    color: #5f6f3b;
    font-weight: 700;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}
.txt-listino {
    font-size: calc(18px + (22 - 18)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(22px + (22 - 22)*((100vw - 300px) /(1920 - 300)));
    color: #111111;
    font-weight: 500;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    padding-left: 1rem;
    display: flow-root;
}
.spec {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #5f6f3b;
    font-weight: 400;
}
.prezzo {
    float: right;
    font-weight: 500;
}
.riga {
    border: none;
    height: 1px;
    background: #111111;
    background: repeating-linear-gradient(90deg,#111111,#111111 10px,transparent 10px,transparent 20px);
}

.sp-foot {
    padding: 8% 8% 1%;
}

.title-foot {
    font-size: calc(16px + (52 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (56 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #5f6f3b;
    font-weight: 600;
    padding-bottom: 10%;
    text-transform: uppercase;
}

.txt-foot {
    font-size: calc(16px + (24 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (28 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #5f6f3b;
    font-weight: 300;
}
.txt-orari {
    text-align: right;
}
.dati {
    font-size: calc(16px + (16 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (16 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #5f6f3b;
    font-weight: 300;
}

.hr-gr {
    border-top: 2px solid #5f6f3b;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.mappa {
    position: absolute;
    bottom: 0;
    right: 0;
}

.fa-play {
    margin-bottom: -0.1rem;
}

.txt-head {
    font-size: calc(16px + (22 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 300;
    letter-spacing: 0.15rem;
    padding-top: 2rem;
    padding-right: 8rem;
    padding-bottom: 2rem;
}

.btn-g {
    background-color: #5f6f3b;
    border-radius: 0;
    padding: 0.6rem 3rem;
    color: #fff;
    font-size: calc(15px + (15 - 15)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15rem;
    transition-duration: 1s;
    white-space: nowrap;
}
.btn-g:hover {
    background-color: #5f6f3b;
    border-radius: 0;
    padding: 0.6rem 3.5rem;
    color: #fff;
    font-size: calc(15px + (15 - 15)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15rem;
    transition-duration: 1s;
    white-space: nowrap;
}

.btn-w {
    background-color: #fafaf9;
    border-radius: 0;
    padding: 0.6rem 3rem;
    color: #5f6f3b;
    font-size: calc(15px + (15 - 15)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15rem;
    transition-duration: 1s;
    white-space: nowrap;
}
.btn-w:hover {
    background-color: #fafaf9;
    border-radius: 0;
    padding: 0.6rem 3.5rem;
    color: #5f6f3b;
    font-size: calc(15px + (15 - 15)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15rem;
    transition-duration: 1s;
    white-space: nowrap;
}
.sp-social{
    padding-top: 0.5rem;
}
.btn-social {
    background-color: #5f6f3b;
    border-radius: 0;
    padding: 0.6rem 3rem;
    color: #fff;
    font-size: calc(20px + (20 - 20)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    letter-spacing: 0.1rem;
    white-space: nowrap;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
    text-align: center;
}

.title-head {
    font-size: calc(16px + (32 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (34 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #111111;
    font-weight: 700;
    text-transform: uppercase;
}

.tasti-head {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
}
.tasto-prenota:hover {
    position: absolute;
    bottom: 0;
    right: 6rem;
}
.head-listino {
    position: absolute;
    bottom: 0;
    right: 0;
}

.st0 {
    fill: #111110;
}

.st1 {
    fill: #61703c;
}

.st1:hover {
    fill: #495529;
}

.st0:hover {
    fill: #000000;
}

.ig {
    position: absolute;
    left: 2%;
    top: 8%;
    width: 2%;
    transition-duration: 1s;
}
.tk {
    position: absolute;
    left: 2%;
    top: 12%;
    width: 2%;
    transition-duration: 1s;
}
.fb {
    position: absolute;
    left: 2%;
    top: 16%;
    width: 2%;
    transition-duration: 1s;
}

.ig:hover {
    left: 2%;
    top: 7.5%;
    width: 2.5%;
    transition-duration: 1s;
}
.tk:hover {
    left: 2%;
    top: 11.5%;
    width: 2.5%;
    transition-duration: 1s;
}
.fb:hover {
    left: 2%;
    top: 15.5%;
    width: 2.5%;
    transition-duration: 1s;
}

.dist-card {
    padding-right: 0.2rem;
    padding-left: 0.2rem;
}

.sp-social {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.white {
    color: #fafaf9;
}

strong {
    font-weight: 600;
}
a {
    color: #fff;
    text-decoration: none;
}
a:hover {
    color: #7bb2d6;

    text-decoration: none;
}

.link-foot {
    color: #5f6f3b;
}

.link-foot:hover {
    color: #1e1f1d;
}
.navbar-toggler {
    padding: 0.5rem;
    line-height: 1;
    color: #111111;
    background-color: #fff;
    border: 0;
    border-radius: 100rem;
    box-shadow: -4px 4px 6px #11111148;
}

@media only screen and (max-width: 1500px) {
    .sp-sez-green {
        padding-top: 2em;
        padding-bottom: 2rem;
        padding-left: 4rem;
    }

    .sp-txt {
        padding: 10% 4% 5%;
    }
    .sp-ascolto {
        padding: 4% 8%;
    }
    .sp-innovazione {
        padding: 8% 4% 2%;
    }
    .txt {
        font-size: calc(16px + (16 - 16) * ((100vw - 300px) / (1920 - 300)));
        line-height: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 300;
    }
    .lg-sito {
        padding-left: 10%;
        padding-right: 10%;
    }
    .testo-verticale {

        left: 4%;
    }

    .ig {
        left: 4%;
        top: 10%;
        width: 2%;
        transition-duration: 1s;
    }
    .tk {
        position: absolute;
        left: 4%;
        top: 14%;
        width: 2%;
        transition-duration: 1s;
    }
    .fb {
        position: absolute;
        left: 4%;
        top: 18%;
        width: 2%;
        transition-duration: 1s;
    }

    .ig:hover {
        left: 4%;
        top: 9.5%;
        width: 2.5%;
        transition-duration: 1s;
    }
    .tk:hover {
        left: 4%;
        top: 13.5%;
        width: 2.5%;
        transition-duration: 1s;
    }
    .fb:hover {
        left: 4%;
        top: 17.5%;
        width: 2.5%;
        transition-duration: 1s;
    }

    .btn-g {
        background-color: #5f6f3b;
        border-radius: 0;
        padding: 0.6rem 1.5rem;
        color: #fff;
        font-size: calc(15px + (15 - 15)*((100vw - 300px) /(1920 - 300)));
        text-transform: uppercase;
        font-weight: 300;
        letter-spacing: 0.15rem;
        transition-duration: 1s;
        white-space: nowrap;
    }
    .btn-g:hover {
        background-color: #5f6f3b;
        border-radius: 0;
        padding: 0.6rem 2rem;
        color: #fff;
        font-size: calc(15px + (15 - 15)*((100vw - 300px) /(1920 - 300)));
        text-transform: uppercase;
        font-weight: 300;
        letter-spacing: 0.15rem;
        transition-duration: 1s;
        white-space: nowrap;
    }

    .btn-w {
        background-color: #fafaf9;
        border-radius: 0;
        padding: 0.6rem 1.5rem;
        color: #5f6f3b;
        font-size: calc(15px + (15 - 15)*((100vw - 300px) /(1920 - 300)));
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.15rem;
        transition-duration: 1s;
        white-space: nowrap;
    }
    .btn-w:hover {
        background-color: #fafaf9;
        border-radius: 0;
        padding: 0.6rem 2rem;
        color: #5f6f3b;
        font-size: calc(15px + (15 - 15)*((100vw - 300px) /(1920 - 300)));
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.15rem;
        transition-duration: 1s;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 850px) {

    .sp-head-mobile {
        padding-top: 4rem;
    }
    .no-pad {
        padding-top: 0.7rem;
        position: relative;
    }

    .tasti-head {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 90%;
    }

    .prezzo {
        float: right;
        font-weight: 500;
        padding-top: 0.5rem;
    }
    .txt-listino {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        padding-left: 1rem;
        display: flow-root;
    }
    .riga {
        margin-top: 0.4rem;
    }
    .sp-listino {
        padding-top: 4%;
    }
    .txt-hand {
        position: relative;
        top: 5%;
        padding-bottom: 4rem;
        left: 2%;
        right: 2%;
        z-index: 90;
        font-family: "Homemade Apple", cursive;
        font-size: calc(26px + (50 - 26) * ((100vw - 300px) / (1920 - 300)));
        line-height: calc(28px + (70 - 28) * ((100vw - 300px) / (1920 - 300)));
        color: #5f6f3b;
        font-weight: 500;
        text-shadow: 1px 1px 5px #fafaf9;
        text-align: center;
    }
    .sp-ph {
        padding-top: 10rem;
        padding-bottom: 2rem;
    }
    .sp1 {
        padding-left: 0;
    }
    .sp2 {
        padding-left: 0;
    }

    .back-salone {
        position: relative;
        background-image: url("../img/salone-800.webp");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 40vh;
    }
    .sp-sez-green {
        padding: 2em 5% 2rem;
    }
    .sp-ascolto {
        padding: 2em 5% 2rem;
    }
    .txt-orari {
        text-align: left;
    }
    .head-list {
        width: 100%;
    }
    .title {
        padding-bottom: 0.4rem;
    }

    .ig {
        left: 2%;
        top: 18%;
        width: 6%;
        transition-duration: 1s;
    }
    .tk {
        position: absolute;
        left: 2%;
        top: 26%;
        width: 6%;
        transition-duration: 1s;
    }
    .fb {
        position: absolute;
        left: 2%;
        top: 34%;
        width: 6%;
        transition-duration: 1s;
    }

    .ig:hover {
        left: 4%;
        top: 18%;
        width: 6%;
        transition-duration: 1s;
    }
    .tk:hover {
        position: absolute;
        left: 4%;
        top: 26%;
        width: 6%;
        transition-duration: 1s;
    }
    .fb:hover {
        left: 4%;
        top: 18%;
        width: 6%;
        transition-duration: 1s;
    }
    .testo-verticale {
        left: 1.5%;
        position: absolute;
        writing-mode: vertical-rl;
        top: 46%;
        color: #0e0e0e;
        font-size: calc(10px + (10 - 10)*((100vw - 300px) /(1920 - 300)));
        text-transform: uppercase;
        font-weight: 500;
        white-space: nowrap;
    }
    .video-head {
        position: absolute;
        top: 30%;
        right: 0;
        opacity: calc(0.6);
        animation-name: app-video;
        animation-duration: 2.5s;
        width: 150%;
    }

    .prenota {
        position: fixed;
        top: 0;
        width: 7rem;
        margin-left: 1rem;
        right: 0.5rem;
        z-index: 999;

    }
    .navbar {
        padding-left: 0.2rem;
        padding-right: 7rem;
    }
    .nav-mobile {
        padding: 0.6rem 3rem;
        color: #111111;
        background-color: #fff;
        border: 0;
        border-radius: 100rem;
        box-shadow: -4px 4px 6px #11111148;
    }
    .nav-link {
        display: block;
        color: #0e0e0e;
        font-size: calc(18px + (16 - 18) * ((100vw - 300px) / (1920 - 300)));
        text-transform: uppercase;
        font-weight: 600;
        margin-right: 0;
        text-align: left;
        margin-bottom: 0.4rem;
        margin-left: 1.5rem;
    }
    .back-ph {
        position: relative;
        background-image: url("../img/back-foto-mobile.svg");
        background-position: center right;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}