/*********************************************************************/
/* Bootstrap 4 Multiple Item Carousel */
/*********************************************************************/
/* medium - display 2  */
@media (min-width: 768px) {
    .carousel-inner {
        /*width: 88%;*/
        width: -webkit-calc(100% - 80px);
        width: -moz-calc(100% - 80px);
        width: calc(100% - 80px);
        margin-left: 40px;
        margin-right: 40px;
    }
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(50%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-50%);
    }
}

/* large - display 3 */
/*@media (min-width: 992px) {
    .carousel-inner {
        width: 90%;
    }
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33%);
    }
}*/

/* large - display 4 */
@media (min-width: 1200px) {
    .carousel-inner {
        /*width: 90%;*/
        width: -webkit-calc(100% - 80px);
        width: -moz-calc(100% - 80px);
        width: calc(100% - 80px);
        margin-left: 40px;
        margin-right: 40px;
    }

        .carousel-inner .carousel-item-right.active,
        .carousel-inner .carousel-item-next {
            transform: translateX(25%);
        }

        .carousel-inner .carousel-item-left.active,
        .carousel-inner .carousel-item-prev {
            transform: translateX(-25%);
        }
}

@media (max-width: 768px) {
    .carousel-inner {
        /*width: 80%;*/
        width: -webkit-calc(100% - 80px);
        width: -moz-calc(100% - 80px);
        width: calc(100% - 80px);
        margin-left: 40px;
        margin-right: 40px;
    }
    .carousel-inner .carousel-item > div {
        display: none;
    }

        .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}


.carousel-control-next,
.carousel-control-prev {
    display: flex;
    width: 40px;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    filter: invert(1);
}

.carousel-multi
{

}