#myCarousel2 {
    overflow: hidden;
    position: absolute;
    height: 800px;
    width: 100%;
    top: 205px;
    left: 0;
}

#myCarousel2 img {
    position: absolute;
    height: 800px;
    top: 0;
    left: 60%;
    z-index: -1;
}

.transformer .carousel-item-next:not(.carousel-item-start),
.transformer .active.carousel-item-end {
    transition: transform 1s ease-in-out;
    transform: translateX(200%);
}

.transformer .carousel-item-prev:not(.carousel-item-end),
.transformer .active.carousel-item-start {
    transition: transform 1s ease-in-out;
    transform: translateX(200%);
}

@media (max-width: 767px) {
    .transformer {
        margin-top: -120px;
        padding: 0;
    }

    .transformer > .justify-content-center {
        padding: 20px;
    }

    .transform_li {
        margin: 20px;
    }

    .transformer .container:first-of-type {
        height: 350px;
        overflow: hidden;
        background: url('../../proto/svg/transformation2.svg') no-repeat top right scroll;
        background-position: 50% 50%;
        background-size: 75% 75%;
        z-index: -2;
    }
}

@media screen and (min-width: 768px) {
    .transformer {
    height: 800px;
}
    .transformer .container:first-of-type {
        height: 600px;
        overflow: hidden;
        background: url('../../proto/svg/transformation2.svg') no-repeat top right scroll;
        background-position: 50% 50%;
        background-size: 75% 75%;
        z-index: -2;
    }
     .transformer > .justify-content-center {
        padding-bottom: 670px;
    }
}