#carouselExampleControls .carousel-item .col {
    padding: 0 15px;
}

@media (max-width: 767px) {
    #carouselExampleControls .carousel-inner .carousel-item > div {
        display: none;
    }

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

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

/* medium and up screens */
@media (min-width: 768px) {
    #carouselExampleControls .carousel-inner .carousel-item-end.active,
    #carouselExampleControls .carousel-inner .carousel-item-next {
        transform: translateX(20%);
    }

    #carouselExampleControls .carousel-inner .carousel-item-start.active,
    #carouselExampleControls .carousel-inner .carousel-item-prev {
        transform: translateX(-20%);
    }

    /*  half slides CSS */

    #carouselExampleControls .carousel-inner:before {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 85%;
        left: 0;
        content: "";
        display: block;
        background-color: #fff;
        z-index: 2;
    }

    #carouselExampleControls .carousel-inner:after {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 85%;
        content: "";
        display: block;
        background-color: #fff;
        z-index: 2;
    }

    #carouselExampleControls .carousel-control-prev {
        left: 12%;
    }

    #carouselExampleControls .carousel-control-next {
        right: 12%;
    }
}

#carouselExampleControls .carousel-inner .carousel-item-end,
#carouselExampleControls .carousel-inner .carousel-item-start {
    transform: translateX(0);
}