.multi-item-carousel .carousel-inner > .item {
    transition: 500ms ease-in-out left;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .multi-item-carousel .carousel-inner > .item {
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none !important;
    }
}

.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
    background-image: none;
}

/*xs*/
@media (max-width: 767px) {
    .multi-item-carousel .carousel-inner .active.left {
        left: -100%;
    }

    .multi-item-carousel .carousel-inner .active.right {
        left: 100%;
    }

    .multi-item-carousel .carousel-inner .next {
        left: 100%;
    }

    .multi-item-carousel .carousel-inner .prev {
        left: -100%;
    }

    .active > div:not(:first-child),
    .next > div:not(:first-child),
    .prev > div:not(:first-child) {
        display: none;
    }
}

/*sm*/
@media (min-width: 768px) and (max-width: 991px) {
    .multi-item-carousel .carousel-inner .active.left {
        left: -50%;
    }

    .multi-item-carousel .carousel-inner .active.right {
        left: 50%;
    }

    .multi-item-carousel .carousel-inner .next {
        left: 50%;
    }

    .multi-item-carousel .carousel-inner .prev {
        left: -50%;
    }

    .active > div:not(:first-child),
    .next > div:not(:first-child),
    .prev > div:not(:first-child) {
        display: none;
    }

    .active > div:first-child + div,
    .next > div:first-child + div,
    .prev > div:first-child + div {
        display: block;
    }
}

/*md*/
@media (min-width: 992px) and (max-width: 1199px) {
    .multi-item-carousel .carousel-inner .active.left {
        left: -50%;
    }

    .multi-item-carousel .carousel-inner .active.right {
        left: 50%;
    }

    .multi-item-carousel .carousel-inner .next {
        left: 50%;
    }

    .multi-item-carousel .carousel-inner .prev {
        left: -50%;
    }

    .active > div:not(:first-child),
    .next > div:not(:first-child),
    .prev > div:not(:first-child) {
        display: none;
    }

    .active > div:first-child + div,
    .next > div:first-child + div,
    .prev > div:first-child + div {
        display: block;
    }
}

/*lg*/
@media (min-width: 1200px) {
    .multi-item-carousel .carousel-inner .active.left {
        left: -33%;
    }

    .multi-item-carousel .carousel-inner .active.right {
        left: 33%;
    }

    .multi-item-carousel .carousel-inner .next {
        left: 33%;
    }

    .multi-item-carousel .carousel-inner .prev {
        left: -33%;
    }
    .col-lg-4 {
        width: 33%;
    }
}

/*
.carousel-col {
    position: relative;
    min-height: 1px;
    padding: 5px;
    float: left;
}

.active > div {
    display: none;
}

.active > div:first-child {
    display: block;
}

@media (max-width: 767px) {
    .carousel-inner .active.left {
        left: -50%;
    }

    .carousel-inner .active.right {
        left: 50%;
    }

    .carousel-inner .next.left .carousel-col:not(:first-child) {
        display: none;
    }

    .carousel-inner .next.right .carousel-col:not(:first-child) {
        display: none;
    }

    .carousel-inner .next {
        left: 50%;
    }

    .carousel-inner .prev {
        left: -50%;
    }

    .carousel-col {
        width: 100%;
    }
}


@media (min-width: 768px) and (max-width: 991px) {
    .carousel-inner .active.left {
        left: -50%;
    }

    .carousel-inner .active.right {
        left: 50%;
    }

    .carousel-inner .next {
        left: 50%;
    }

    .carousel-inner .prev {
        left: -50%;
    }

    .carousel-col {
        width: 50%;
    }

    .active > div:first-child + div {
        display: block;
    }
}


@media (min-width: 992px) and (max-width: 1199px) {
    .carousel-inner .active.left {
        left: -33%;
    }

    .carousel-inner .active.right {
        left: 33%;
    }

    .carousel-inner .next {
        left: 33%;
    }

    .carousel-inner .prev {
        left: -33%;
    }

    .carousel-col {
        width: 33%;
    }

    .active > div:first-child + div {
        display: block;
    }

    .active > div:first-child + div + div {
        display: block;
    }
}


@media (min-width: 1200px) {
    .carousel-inner .active.left {
        left: -33%;
    }

    .carousel-inner .active.right {
        left: 33%;
    }

    .carousel-inner .next {
        left: 33%;
    }

    .carousel-inner .prev {
        left: -33%;
    }

    .carousel-col {
        width: 33%;
    }

    .active > div:first-child + div {
        display: block;
    }

    .active > div:first-child + div + div {
        display: block;
    }
}

*/