@import "/colors.css";

#banner {
    background: url("../images/banner-home-new.png") center;
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.1);
}

#banner .card {
    background-color: rgba(255, 255, 255, .15)
}

.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 0
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0px, 0px)
}

.owl-carousel .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
    display: none
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit
}

.owl-carousel .owl-nav button.owl-prev:hover span,
.owl-carousel .owl-nav button.owl-next:hover span {
    color: var(--primaryColor)
}

.owl-carousel .owl-nav button.owl-prev.disabled span,
.owl-carousel .owl-nav button.owl-next.disabled span {
    color: #f5f5f5
}

.owl-carousel button.owl-dot {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit
}

.owl-carousel.owl-loaded {
    display: block
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-grab {
    cursor: move
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.no-js .owl-carousel {
    display: block
}

/* Mostra i contenuti in griglia quando JavaScript è disabilitato */
.no-js #offerte-home {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin: 0;
}

.no-js #marchi-home {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 36px;
    margin: 0;
}

/* Nascondi i controlli Owl quando JavaScript è disabilitato */
.no-js .owl-nav,
.no-js .owl-dots {
    display: none !important;
}

/* Assicura che gli item siano visibili */
.no-js .owl-carousel .owl-item {
    display: block;
    float: none;
}

/* Fix per stretched-link quando JavaScript è disabilitato */
.no-js .owl-carousel .owl-stage-outer,
.no-js .owl-carousel .owl-stage {
    position: static !important;
    overflow: visible !important;
    transform: none !important;
}

.no-js .owl-carousel .owl-item {
    position: static !important;
}

/* Assicura che box-prodotto sia il parent relativo per stretched-link */
.no-js .box-prodotto {
    position: relative !important;
}

/* Responsive per schermi piccoli */
@media screen and (max-width: 768px) {
    .no-js #offerte-home {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .no-js #marchi-home {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 20px;
    }
}

@media screen and (max-width: 540px) {
    .no-js #offerte-home {
        grid-template-columns: 1fr;
    }

    .no-js #marchi-home {
        grid-template-columns: repeat(2, 1fr);
    }
}

.owl-carousel .animated {
    animation-duration: 1000ms;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height 500ms ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity 400ms ease
}

.owl-carousel .owl-item .owl-lazy[src^=""],
.owl-carousel .owl-item .owl-lazy:not([src]) {
    max-height: 0
}

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
    position: absolute;
    font-size: 100px !important;
    line-height: 0 !important
}

.owl-carousel .owl-nav .owl-prev {
    left: -45px
}

.owl-carousel .owl-nav .owl-next {
    right: -45px
}

.owl-dots {
    margin-top: 1rem;
    text-align: center
}

.owl-dots .owl-dot {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0
}

.owl-dots .owl-dot span {
    width: 7px;
    height: 7px;
    margin: 0 3px;
    background: #a7a7a7;
    border-radius: 10px;
    display: block;
    opacity: .5
}

.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span {
    background: var(--primaryColor);
    opacity: 1
}

#marchi-home.owl-carousel .marchio img {
    margin: 0 auto;
    display: block
}

#marchi-home.owl-carousel .owl-nav {
    top: 20px
}

#estivi,
#invernali,
#stagioni {
    background-size: cover !important;
    width: 100%;
    min-height: 360px;
    left: 0
}

#estivi::before,
#invernali::before,
#stagioni::before {
    content: "";
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 20%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

#estivi {
    background: url("../images/banner-estivi.jpg") center center no-repeat
}

#invernali {
    background: url("../images/banner-invernali.jpg") center center no-repeat
}

#stagioni {
    background: url("../images/banner-stagioni.jpg") center center no-repeat
}

#spedizione {
    background: url("../images/banner-spedizione-new.jpg") center center no-repeat;
    background-size: cover !important;
    width: 100%;
    min-height: 450px;
    left: 0
}

#centri::before {
    content: "";
    position: absolute;
    background-color: rgba(0, 0, 0, .1);
    width: 40%;
    height: 100%
}

#centri .box-centro {
    background-image: linear-gradient(#DFE3E4, #BFC5C5);
    box-shadow: 0 1px 3px #000
}

#centri .box-centro label {
    color: var(--primaryColorHover);
    font-size: 25px;
    font-weight: bold
}

#centri .box-centro-footer {
    background-image: linear-gradient(#DFE3E4, #BFC5C5)
}

#centri .gomme img {
    height: 350px;
    width: auto
}

#contatti::before {
    content: "";
    position: absolute;
    /* background-image:linear-gradient(#F5F5F5, #BFBFBF); */
    width: 40%;
    height: 100%;
    z-index: 1
}

.bg-contatti {
    /*background:url("/images/banner-contatti-new.jpg") right no-repeat;*/
    background: linear-gradient(0deg, var(--primaryColorHover) 40%, var(--primaryColor));
    /*background-size: cover;*/
    /*height:100%;*/
    /* position:absolute; */
    /* right:0; */
    /* z-index:0 */
}

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

    #centri::before,
    #contatti::before {
        width: 38%
    }
}

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

    /* #banner{
        background-position:-1000px center
    } */
    #centri::before,
    #contatti::before {
        width: 44%
    }
}

/*
@media screen and (max-width: 1199px) {
    .bg-contatti {
        background-position: center
    }
}*/

@media screen and (max-width: 1112px) {
    /* #banner{
        background-position:-1120px center
    } */
}

@media screen and (max-width: 991px) {
    #spedizione {
        min-height: 400px
    }

    #centri::before,
    #contatti::before {
        width: 54%
    }
}

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

    /* #banner{
        background-position:-900px center;
        height:400px
    } */
    #estivi::before,
    #invernali::before,
    #stagioni::before {
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 100%, rgba(255, 255, 255, 0) 100%)
    }

    #estivi .lead,
    #invernali .lead,
    #stagioni .lead {
        font-size: 1rem
    }

    #estivi,
    #invernali {
        background-position: -800px
    }

    #stagioni {
        background-position: -780px
    }

    #spedizione {
        background: url("../images/banner-spedizione-new.jpg") center no-repeat
    }

    /*
    .bg-contatti {
        background: url("../images/banner-contatti-new.jpg") center cover no-repeat
    }
    */
}

/*
@media screen and (max-width: 600px) {

    #banner{
        background-position:-880px center;
        height:350px
    } 
    #spedizione{
        background-position:-200px;
        min-height:290px
    } 
    .bg-contatti {
        background-position: left;
    }

} */

/* @media screen and (max-width: 575px){
    .text-sm-center-c{
        text-align: center;
    }
} */
@media screen and (max-width: 540px) {
    /* #spedizione{
        background-position:-225px
    } */
    /* #centri::before,#contatti::before{
        width:0
    } */
}

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

    #centri::before,
    #contatti::before {
        width: 0
    }
}

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

    #estivi,
    #invernali,
    #stagioni {
        background-position-x: -1200px
    }

    /* #spedizione{
        background-position:-170px;
        min-height:220px
    } */
    #marchi-home.owl-carousel .marchio img {
        width: 100%
    }
}

@media screen and (min-width: 381px) {
    .d-sm-block-inline {
        display: inline !important;
    }
}

@media screen and (max-width: 380px) {
    .d-sm-block-inline {
        display: block !important;
    }
}

@media screen and (max-width: 375px) {
    /* #spedizione{
        background-position:-188px
    } */
}