html > .carousel, body > .carousel {
    padding-top: 125px;
}
#main-carousel{
    height:400px;
}
.carousel {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.carousel__prev, .carousel__next {
    position: absolute;
    bottom: -15%;
    transition: transform 0.25s ease;
}

    .carousel__prev i, .carousel__next i {
        font-size: 60px;
        color: var(--box-border);
        cursor: pointer;
    }

    .carousel__prev:hover, .carousel__next:hover {
        transform: scale(1.25);
    }

.carousel__prev {
    left: 40%;
}

.carousel__next {
    right: 40%;
}

.carousel__body {
    width: 100%;
    padding: 20px 0 50px 0;
    overflow: hidden;
}

    .carousel__body .carousel__slider {
        position: relative;
        transition: transform 1s ease-in-out;
    }

    .carousel__body .carousel__slider__item {
        position: relative;
        display: block;
        float: left;
        box-sizing: border-box;
        margin-left: 20px;
        margin-right: 20px;
    }

        .carousel__body .carousel__slider__item .item__3d-frame {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 1s ease-in-out;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

            .carousel__body .carousel__slider__item .item__3d-frame:after {
                content: '';
                position: absolute;
                bottom: -15%;
                width: 100%;
                height: 40px;
                box-shadow: 0px 0px 5px 5px var(--box-shadow);
                transform: rotateX(90deg) translate3d(0px, -20px, 0px);
                opacity: 0.85;
            }

        .carousel__body .carousel__slider__item .item__3d-frame__box {
            display: flex;
            align-items: center;
            vertical-align: middle;
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-color: var(--box-border);
            border-width: 1px;
            border-style: solid;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }

            .carousel__body .carousel__slider__item .item__3d-frame__box h1 {
                font-size: 7em;
                width: 100%;
                color: var(--box-border);
            }

        .carousel__body .carousel__slider__item .item__3d-frame__box--right, .carousel__body .carousel__slider__item .item__3d-frame__box--left {
            top: 0;
            width: 40px;
            backface-visibility: hidden;
        }

        .carousel__body .carousel__slider__item .item__3d-frame__box--left {
            left: 0;
            border-left-width: 5px;
            transform: translate3d(1px, 0, -40px) rotateY(-90deg);
            transform-origin: 0%;
            background-color: #d2d2d2;
        }

        .carousel__body .carousel__slider__item .item__3d-frame__box--right {
            right: 0;
            border-right-width: 5px;
            transform: translate3d(-1px, 0, -40px) rotateY(90deg);
            transform-origin: 100%;
            background-color: #d2d2d2;
        }
.item__3d-frame__box--front{
    background-color:unset;

}