:root {
    --crsl-bg: transparent;
    --box-bg: #1e272e;
    --box-shadow: #000 1c;
    --box-shadow-border: #000 0f;
    --box-border: #fff;
}

/*html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #2f3539;
    background: -moz-radial-gradient(circle, rgba(47, 53, 57, 1) 0%, rgba(30, 39, 46, 1) 100%);
    background: -webkit-radial-gradient(circle, rgba(47, 53, 57, 1) 0%, rgba(30, 39, 46, 1) 100%);
    background: radial-gradient(circle, rgba(47, 53, 57, 1) 0%, rgba(30, 39, 46, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2f3539",endColorstr="#1e272e",GradientType=1);
}*/

  /*  html *, body * {
        font-family: 'Source Sans Pro', sans-serif;
    }*/
.SliderContent {
background-image:url("Images/cancha.jpg");
height:100%;


}

html > p, body > p {
    font-size: 0.95em;
    font-weight: bold;
    position: absolute;
    top: 7.5%;
    width: 100%;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    color: white;
    user-select: none;
}

    html > .carousel, body > .carousel {
        padding-top: 125px;
    }

.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;
        background: var(--crsl-bg);
    }

    .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;
                background: var(--box-shadow);
                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);
            background: var(--box-bg);
            border-width: 3px;
            border-style: solid;
        }

            .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%;
        }

        .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%;
        }