.carousel
{
    OVERFLOW: hidden;
}

.carousel .carousel-background
{
    LEFT: 50%;
    MIN-HEIGHT: 100%;
    MIN-WIDTH: 100%;
    OBJECT-FIT: cover;
    POSITION: absolute;
    TOP: 50%;
    WIDTH: 100%;
    TRANSFORM: translate(-50%, -50%);
    -MOZ-TRANSFORM: translate(-50%, -50%);
    -WEBKIT-TRANSFORM: translate(-50%, -50%);
}

.carousel .carousel-title
{
    /* COLOR: #ffffff; */
    MARGIN: 20px 20px 40px;
    TEXT-ALIGN: center;
}

.carousel .carousel-slider
{
    ALIGN-ITEMS: center;
    DISPLAY: flex;
    MARGIN: 20px;
}

.carousel-state
{
    DISPLAY: none;
}

.carousel .carousel-slide,
.carousel .carousel-state:checked ~ .carousel-state ~ .carousel-state ~ .carousel-state + .carousel-slide
{
    DISPLAY: flex;
    FILTER: blur(5px);
    JUSTIFY-CONTENT: center;
    MARGIN-RIGHT: -100%;
    OPACITY: 0;
    POINTER-EVENTS: none;
    Z-INDEX: 0;
    WIDTH: 100%;
    TRANSFORM: translate(-40%) scale(0.4);
    -MOZ-TRANSFORM: translate(-40%) scale(0.4);
    -WEBKIT-TRANSFORM: translate(-40%) scale(0.4);
    TRANSITION: left 0.5s, opacity 0.5s, transform 0.5s;
    -MOZ-TRANSITION: left 0.5s, opacity 0.5s, -moz-transform 0.5s;
    -WEBKIT-TRANSITION: left 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}

.carousel .carousel-state:checked + .carousel-slide
{
    FILTER: blur(2.5px);
    OPACITY: 0.9;
    Z-INDEX: 1;
    TRANSFORM: translate(-20%) scale(0.75);
    -MOZ-TRANSFORM: translate(-20%) scale(0.75);
    -WEBKIT-TRANSFORM: translate(-20%) scale(0.75);
}

.carousel .carousel-state:checked ~ .carousel-state + .carousel-slide
{
    FILTER: blur(0);
    OPACITY: 1;
    Z-INDEX: 3;
    TRANSFORM: translate(0) scale(1);
    -MOZ-TRANSFORM: translate(0) scale(1);
    -WEBKIT-TRANSFORM: translate(0) scale(1);
}

.carousel .carousel-state:checked ~ .carousel-state ~ .carousel-state + .carousel-slide
{
    FILTER: blur(2.5px);
    OPACITY: 0.9;
    Z-INDEX: 2;
    TRANSFORM: translate(20%) scale(0.75);
    -MOZ-TRANSFORM: translate(20%) scale(0.75);
    -WEBKIT-TRANSFORM: translate(20%) scale(0.75);
}

.carousel .carousel-state:checked ~ .carousel-state ~ .carousel-state ~ .carousel-state + .carousel-slide
{
    FILTER: blur(5px);
    TRANSFORM: translate(40%) scale(0.4);
    -MOZ-TRANSFORM: translate(40%) scale(0.4);
    -WEBKIT-TRANSFORM: translate(40%) scale(0.4);
}

.carousel .carousel-content
{
    BACKGROUND: #ffffff;
    PADDING: 20px;
    POINTER-EVENTS: auto;
    MARGIN: 0 auto;
    MAX-WIDTH: 750px;
    WIDTH: 100%;
    BOX-SIZING: border-box;
    -MOZ-BOX-SIZING: border-box;
    -WEBKIT-BOX-SIZING: border-box;
    BOX-SHADOW: 0 0 10px rgba(0, 0, 0, 0.25);
    -MOZ-BOX-SHADOW: 0 0 10px rgba(0, 0, 0, 0.25);
    -WEBKIT-BOX-SHADOW: 0 0 10px rgba(0, 0, 0, 0.25);
}

.carousel .carousel-overlay,
.carousel .carousel-state:checked ~ .carousel-state ~ .carousel-state + .carousel-slide .carousel-overlay
{
    BOTTOM: 0;
    COLOR: transparent;
    DISPLAY: block;
    LEFT: 0;
    POSITION: absolute;
    RIGHT: 0;
    TOP: 0;
}

.carousel .carousel-state:checked ~ .carousel-state + .carousel-slide .carousel-overlay,
.carousel-edit .carousel-overlay
{
    DISPLAY: none;
}

.carousel .carousel-selection
{
    MARGIN: 20px;
    TEXT-ALIGN: center;
}

.carousel-edit .carousel-selection
{
    DISPLAY: none;
}

.carousel .carousel-switch,
.carousel .carousel-switch-active
{
    BORDER: 2px solid #ffffff;
    COLOR: transparent !important;
    DISPLAY: inline-block;
    HEIGHT: 18px;
    MARGIN: 5px;
    WIDTH: 18px;
    BORDER-RADIUS: 100%;
}

.carousel .carousel-switch-active
{
    BACKGROUND: #ffffff;
}

.carousel .carousel-switch:hover
{
    BACKGROUND: rgba(255, 255, 255, 0.5);
}