/* Importate */







.link-no-underline:hover{
    text-decoration: none !important;
}

:root {
    --tc-h1-letter-spacing: 0.05em;
    --tc-cta-font-size-mobile: 0.875rem;
    --tc-body-font-size-desktop: 1rem;
    --tc-body-font-size-tablet: 1rem;
    --tc-body-font-size-mobile: 0.875rem;
    --tc-body-letter-spacing: 0.05em;
    --tc-body-font-weight: 400;
    --tc-h4-font-size-mobile: 34px;
    --tc-h4-letter-spacing: 0.8em;
}

.text-color-primary p {
    color: var(--primary) !important;
}

.text-color-light p {
    color: var(--light) !important;
}


section.h-600 {
    /*background: var(--secondary) !important;*/
    height: 600px;
}
.dropdown-menu {
    background-color: var(--secondary) !important;
}
@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li > a {
        font-size: 18px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
        font-size: 1.3em !important;
        letter-spacing: 0.5px !important;
        color: var(--quaternary--200) !important;
        padding: 10px !important;
    }
    #header .header-nav-bar .header-nav .header-nav-main.header-nav-main-dropdown-arrow nav > ul > li.dropdown:hover > .dropdown-menu {
        padding: 15px 25px 15px 25px !important;
    }
    #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:hover > a {
        background-color: var(--secondary) !important;
    }
    
    #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover {
        color: var(--primary) !important;
    }

    #header .header-nav-bar.header-nav-bar-top-border {
        border-top: 0px !important;
    }

    #header .header-nav.header-nav-links nav > ul li:hover > a {
        color: white !important;
    }

    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a, #header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a {
        color: white !important;
    }
}
@media (max-width: 576px) {
    #header .header-logo img {
        height: 45px !important;
    }

}

@media (max-width: 991px) {
    #header .header-nav-bar .header-container{
        height:0px !important;
    }
}


/*BEGIN immagine background section hp*/
.custom-background-style-1 {
    height: calc(75% + 1px)
}
@media only screen and (min-width: 91em) {
    .custom-background-style-1 {
        width: 73.6% !important;
        margin: auto 0 auto auto;
        height: calc(100% + 1px);
    }
}
@media(min-width: 768px) and (max-width: 1800px) {
    .custom-background-style-1 {
        width: 83.6% !important;
        margin: auto 0 auto auto;
        height: calc(100% + 1px)
    }
}

.custom-background-style-1:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

@media(min-width: 768px) {
    .custom-background-style-1:after {
        content: none
    }
}
/*END immagine background section hp*/



@media (min-width: 768px) {

    .sn_block_teaser_simple_i_title_in h1,
    .sn_block_teaser_simple_i_title_in h2,
    .sn_block_teaser_simple_i_title_in h3 {
        font-size: 72px;
        line-height: 60px !important;
        letter-spacing: calc((var(--tc-h1-letter-spacing, -1.5) / 1000) * 1em);
    }

    .sn_block_teaser_simple_i_title_in h4 {
        font-size: 65px;
        line-height: 55px !important;
        letter-spacing: calc((var(--tc-h1-letter-spacing, -1.5) / 1000) * 1em);
    }
    .sn_block_teaser_simple_i_content,
    .sn_block_teaser_simple_i_content p {
        font-size: var(--tc-body-font-size-desktop);
        line-height: 23px !important;
    }

    p {
        /*font-size: var(--tc-body-font-size-mobile, 16px);*/
        letter-spacing: calc((var(--tc-body-letter-spacing, 0.5) / 1000) * 1em);
        font-weight: var(--tc-body-font-weight, 400);
        line-height: 23px !important;
    }
}

@media only screen and (min-width: 64em) {
    p {
        font-size: var(--tc-body-font-size-desktop, 21px);
    }
}
@media only screen and (min-width: 52.125em){
    p {
        font-size: var(--tc-body-font-size-desktop, 21px);
    }
}

@media (max-width: 576px) {
    .mt-mobile-25 {
        margin-top: 25em !important;
    }
    .p-5 {
        padding: 1.5rem !important;
    }
    .mb-4 {
        margin-bottom: 0.5rem !important;
    }

    p {
        font-size: var(--tc-body-font-size-mobile, 16px);
        letter-spacing: calc((var(--tc-body-letter-spacing, 0.5) / 1000) * 1em);
        line-height: 20px !important;
    }


    .sn_block_teaser_simple_i_title_in h1,
    .sn_block_teaser_simple_i_title_in h2,
    .sn_block_teaser_simple_i_title_in h3,
    .sn_block_teaser_simple_i_title_in h4 {
        line-height: 35px !important;
        font-size: var(--tc-h4-font-size-mobile, 51px);
        letter-spacing: calc((var(--tc-h4-letter-spacing, 0.25)
                        0.05em
                         / 1000) * 1em);
    }

    .order-mobile-1 {
        order: 1 !important;
    }
    .order-mobile-2 {
        order: 2 !important;
    }
}

.vertical {
    z-index: 2;
    width: 50%;
    padding-top: 35%;
    position: relative;
}

.horizontal {
    z-index: 1;
    position: absolute;
    right: 0px;
    width: 90%;
}

@media only screen and (min-width: 52.125em) {
    .vertical {
        width: 28% !important;
        padding-top: 12%;
    }
    .horizontal {
        width: 78% ;
    }
}


.cocktail-carousel .owl-dots {
    margin-top: 30px;
}


section.timeline:before {
    /* background: #002855 ;*/
    background: linear-gradient(to bottom, rgba(0, 40, 85, 0) 0%, #002855 8%, #002855 92%, rgba(0, 40, 85, 0) 100%) !important;
}
section.timeline .timeline-number {
    width: 20px !important;
    height: 20px !important;
    line-height: 0px !important;
}
section.timeline .timeline-number h3 {
    line-height: 0px !important;
}


.img-back-history{
   margin-top: -100px;
   max-height: 400px;
   overflow:hidden;
}
.img-back-history::before {
    /* 2. Impostazioni dello pseudo-elemento (il "livello" dell'immagine) */
    content: ""; /* Essenziale per mostrare lo pseudo-elemento */
    position: absolute;
    /* top: 0;
    left: 0;*/
    width: 100%;
    height: 100%;
    z-index: -1; /* Metti l'immagine dietro il contenuto del div (z-index: 1) */
    /* 3. Immagine di Sfondo e Opacità */
    /*background-image: url('nome-immagine.jpg');*/
    background-image: url(https://www.cinzano.com/app/uploads/2023/06/1757_bg.png);
    background-size: 25% auto; /* Manteniamo la dimensione al 50% come richiesto in precedenza */
    background-repeat: no-repeat;
    /* Imposta l'opacità al 10% (0.1) */
    opacity: 0.1;
}




.mio-div {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    overflow: hidden;
    /* Stile per il contenuto, assicuriamoci che sia leggibile */
    padding: 20px;
    color: #333;
    
}

    .mio-div::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        /* Devi cambiare 'percorso/alla/tua/immagine.jpg' con il nome reale del file */
        background-image: url('https://www.cinzano.com/app/uploads/2023/06/1757_bg.png');
        background-size: 25% auto;
        background-repeat: no-repeat;
        opacity: 0.1;
    }





/*component 3*/
@media only screen and (min-width: 0em) {
    .bb_container .main_image {
        width: 228px;
        height: 240px;
        position: relative;
        z-index: 1;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 44% 20%;
        object-position: 44% 20%;
    }

    .bb_container .secondary_image {
        width: 210px;
        height: 138px;
        position: relative;
        z-index: 2;
        left: 91px;
        top: -62px;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 20% 10%;
        object-position: 20% 10%;
    }
}

@media only screen and (min-width: 490px) {
    .bb_container .main_image {
        width: 327px;
        height: 361px;
        position: relative;
        z-index: 1;
        top: 62px;
        left: -34px;
    }

    .bb_container .secondary_image {
        width: 338px;
        height: 207px;
        position: relative;
        z-index: 2;
        left: 42px;
        top: -11px;
    }
}

@media only screen and (min-width: 690px) {
    .bb_container .main_image {
        width: 397px;
        height: 420px;
        position: relative;
        z-index: 1;
        top: 62px;
        left: -53px;
    }

    .bb_container .secondary_image {
        width: 357px;
        height: 240px;
        position: relative;
        z-index: 2;
        left: 91px;
        top: 1px;
    }
}



@media only screen and (min-width: 823px) {
    .bb_container .main_image {
        width: 301px;
        height: 338px;
        position: relative;
        z-index: 1;
        top: 0px;
        left: 0px;
    }

    .bb_container .secondary_image {
        width: 200px;
        height: 162px;
        position: relative;
        z-index: 2;
        left: -58px;
        top: 71px;
    }
}

@media only screen and (min-width: 52.125em) {
    /*834px*/
    .bb_container .main_image {
        width: 296px;
        height: 379px;
        position: relative;
        z-index: 1;
        top: 0px;
    }

    .bb_container .secondary_image {
        width: 253px;
        height: 162px;
        position: relative;
        z-index: 2;
        left: -58px;
        top: 71px;
    }
}


@media only screen and (min-width: 64em) {
    /*1024px*/
    .bb_container .main_image {
        width: 324px;
        height: 337px;
        position: relative;
        z-index: 1;
        top: 62px;
        left: -10px;
    }

    .bb_container .secondary_image {
        width: 234px;
        height: 189px;
        position: relative;
        z-index: 2;
        left: 117px;
        top: -65px;
    }
}


@media only screen and (min-width: 1280px) {
    .bb_container .main_image {
        width: 397px;
        height: 420px;
        position: relative;
        z-index: 1;
        top: 62px;
        left: -10px;
    }

    .bb_container .secondary_image {
        width: 357px;
        height: 240px;
        position: relative;
        z-index: 2;
        left: 117px;
        top: -65px;
    }
}

/*end component 3*/

#footer {
    margin-top: 0px !important;
    border-top: 0px !important;
}