/** Carousel **/
.carousel_container {
    margin: 20px 0;
}
#home_carousel .carousel_container {
    margin: 0;
}
.carousel_title_container {
    padding: 0 42px;
}
.carousel_title {
    font-family:var(--primary-font);
    font-size:22px;
    font-weight:500;
    line-height: 28px;
    color:#333;
    text-transform: uppercase;
}

.jcarousel-wrapper {
    position:relative;
}

.jcarousel,
.mapjcarousel {
    position: relative;
    overflow: hidden;
    visibility: hidden;
    margin:0 32px;
    padding: 10px 0 10px;
}

.jcarousel ul {
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0 5px;
    padding: 0;
}

.jcarousel li {
    /*width: 200px;
    height: 300px;*/
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 5px;
    position:relative;
    /*overflow:hidden;*/
    z-index: 1;
}

.jcarousel img.jcarousel_image {
    display: block;
    width: 100%;
    height: auto !important;
    /*border:1px solid #999;*/
}

/** Carousel Controls **/
button.jcarousel-control2 {
    position:absolute !important;
    background-color: var(--primary-color) !important;
    top:calc(50% - 25px);
    height:50px;
    width:26px;
    min-width:0;
    margin:0;
    padding:0;
    text-align:center;
    border-radius: 0;
    z-index:2;
}
button.jcarousel-control2 i.material-icons {
    color:#FFF;
}
/*button.jcarousel-control2 img {
    width:18px;
}*/
button.jcarousel-control2-prev {
    left:0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
/*button.jcarousel-control2-prev img {
    margin-left:-7px;
}*/
button.jcarousel-control2-next {
    right:0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
/*button.jcarousel-control2-next img {
    margin-right:-7px;
}*/

/* versione a scomparsa - non utilizzata */
button.jcarousel-control {
    position:absolute;
    top:calc(50% - 25px);
    bottom:0;
    background-color:rgba(183, 28, 28, 1) !important;
    width:50px !important;
    height:50px !important;
    min-width: 0;
    margin:0;
    padding:0;
    transition: 0.3s;
}
button.jcarousel-control i {
    width:50px;
    height:50px;
    line-height:50px;
    font-size: 52px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
}
button.jcarousel-control-prev {
    left:-40px;
}
button.jcarousel-control-next {
    right:-40px;
}
button.jcarousel-control-prev:hover {
    left:0px;
}
button.jcarousel-control-next:hover {
    right:0px;
}

/** Carousel Pagination **/
.jcarousel-pagination {
    margin:0;
    display:inline-block;
    white-space: nowrap;
    float: none;    
    position: absolute;
    bottom: 0;
    right: 42px;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;

    font-size: 20px;
    text-align:center;
    width: 24px;
    border-bottom:8px solid #CCC;

    border-radius:1px;
    
    /*text-indent: -9999px;*/

    margin:6px 3px;

    /*-webkit-box-shadow: 0 0 2px #4E443C;
    -moz-box-shadow: 0 0 2px #4E443C;
    box-shadow: 0 0 2px #4E443C;*/
}
.jcarousel-pagination a:last-child {
    margin-right:0;
}

.jcarousel-pagination a.active {
    /*background: #b71c1c;*/
    border-color:#b71c1c;

    /*opacity: 1;
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;*/
}


@media screen and (max-width: 768px) {
    /* ridimensiona pagination dei carousel */
    .jcarousel-pagination a {
        height: 12px;
        width: 12px;
        line-height: 12px;
        border-radius: 50%;
        margin-right: 8px;
        margin-bottom: 8px;
    }
}
@media screen and (max-width: 500px) {
    /* tiolo carousel a tutta larghezza */
    .carousel_title_container {
        padding-left:10px;
        padding-right:10px;
    }
}
@media screen and (max-width: 400px) {
    /* sposto i bottoni avanti e indietro all'interno dell'immagine */
    .jcarousel {
        margin:0;
    }
    /* rimuovo il padding degli elementi: vedi anche jcarousel.js
    .jcarousel li {
        padding:0;
    }*/

    /* riduco dimensione titolo carousel */
    .carousel_title {
        font-size:20px;
    }
    
    .jcarousel-pagination {
        margin: 10px 52px 0;
    }
    button.jcarousel-control {
        height:52px;
        width:52px;
        min-width:52px;
        top:auto;
        bottom:-60px;
        overflow:hidden;
    }
    button.jcarousel-control-prev {
        left: 0;
        right:auto;
    }
    button.jcarousel-control-next {
        right:0;
        left:auto;
    }
    /* nascondi pagination dei carousel */
    /* .jcarousel-pagination {
        display:none !important;
    } */
    /* aumento margine contenitore per far spazio ai controlli sotto */
    /*.carousel_container {
        margin-bottom:80px;
    } */
    .carousel_container_single {
        margin-bottom:20px;
    }

}