.customized_product {
    width: 200px;
}

@media (min-width: 768px) and (max-width: 991px) {}

@media (min-width: 576px) and (max-width: 768px) {}

@media (max-width: 576px) {
    .customized_product {
        width: 75% !important;
    }
}

@media (min-width: 768px) {}

@media (min-width: 991px) {}

/* // original */
#horizontal_product_container .carousel-multi-item .carousel-indicators li {
    width: 1.25rem;
    max-width: 1.25rem;
    height: 1.25rem;
    margin-bottom: -3.75rem;
    background-color: #4285f4;
}

#horizontal_product_container .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

#horizontal_product_container .card-body {
    padding: 12px;
}

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

    /* Show 4th slide on md  if col-md-4*/
    #horizontal_product_container .carousel-inner .active.col-md-4.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

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

    /* Show 3rd slide on sm  if col-sm-6*/
    #horizontal_product_container .carousel-inner .active.col-sm-6.carousel-item+.carousel-item+.carousel-item {
        position: absolute;
        top: 0;
        right: -50%;
        /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 576px) {
    #horizontal_product_container .carousel-item {
        margin-right: 0;
    }

    /* show 2 items */
    #horizontal_product_container .carousel-inner .active+.carousel-item {
        display: block;
    }

    #horizontal_product_container .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    #horizontal_product_container .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item {
        transition: none;
    }

    #horizontal_product_container .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    /* left or forward direction */
    #horizontal_product_container .active.carousel-item-left+.carousel-item-next.carousel-item-left,
    #horizontal_product_container .carousel-item-next.carousel-item-left+.carousel-item,
    #horizontal_product_container .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    #horizontal_product_container .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    #horizontal_product_container .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
    #horizontal_product_container .carousel-item-prev.carousel-item-right+.carousel-item,
    #horizontal_product_container .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/*MD*/
@media (min-width: 768px) {

    /* show 3rd of 3 item slide */
    #horizontal_product_container .carousel-inner .active+.carousel-item+.carousel-item {
        display: block;
    }

    #horizontal_product_container .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
        transition: none;
    }

    #horizontal_product_container .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    /* left or forward direction */
    #horizontal_product_container .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* right or prev direction */
    #horizontal_product_container .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/*LG */
@media (min-width: 991px) {

    /* show 4th item */
    #horizontal_product_container .carousel-inner .active+.carousel-item+.carousel-item+.carousel-item {
        display: block;
    }

    #horizontal_product_container .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item+.carousel-item {
        transition: none;
    }

    /* Show 5th slide on lg if col-lg-3 */
    #horizontal_product_container .carousel-inner .active.col-lg-3.carousel-item+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    #horizontal_product_container .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* right or prev direction //t - previous slide direction last item animation fix */
    #horizontal_product_container .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}