.fan
{
    DISPLAY: flex;
}

.fan-trigger
{
    DISPLAY: none;
}

.fan-slat
{
    DISPLAY: inline-block;
    HEIGHT: 400px;
    OVERFLOW: hidden;
    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);
    TRANSITION: width 0.5s;
    -MOZ-TRANSITION: width 0.5s;
    -WEBKIT-TRANSITION: width 0.5s;
}

.fan-link,
.fan-switch
{
    BOTTOM: 0;
    LEFT: 0;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100%;
}

.fan-link
{
    WIDTH: 0;
}

.fan-image
{
    HEIGHT: 100%;
    LEFT: 50%;
    MIN-HEIGHT: 100%;
    MIN-WIDTH: 100%;
    POSITION: absolute;
    TOP: 50%;
    WIDTH: auto;
    TRANSFORM: translate(-50%, -50%);
    -MOZ-TRANSFORM: translate(-50%, -50%);
    -WEBKIT-TRANSFORM: translate(-50%, -50%);
}

@supports (object-fit: cover)
{
    .fan-image
    {
        OBJECT-FIT: cover;
        WIDTH: 100% !important;
    }
}

.fan-background
{
    BACKGROUND: #212a2e;
    BOTTOM: 0;
    CONTENT: "";
    LEFT: 0;
    OPACITY: 0.25;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 206px;
}

@supports (mix-blend-mode: multiply)
{
    .fan-background
    {
        BACKGROUND: #ffffff !important;
        /* MIX-BLEND-MODE: multiply; */
        OPACITY: 0.5 !important;
    }
}

.fan-text
{
    BACKGROUND: #212a2e;
    COLOR: #ffffff;
    FONT-SIZE: 21px;
    LEFT: 0;
    LINE-HEIGHT: 21px;
    MIN-HEIGHT: 72px;
    PADDING: 15px 10px 15px 27px;
    POSITION: absolute;
    TEXT-ALIGN: right;
    TOP: calc(50% - 36px);
    WIDTH: 206px;
    BOX-SIZING: border-box;
    -MOZ-BOX-SIZING: border-box;
    -WEBKIT-BOX-SIZING: border-box;
}

.fan-trigger:checked + .fan-slat,
.fan-slat:hover
{
    WIDTH: 100% !important;
}

.fan-trigger:checked + .fan-slat .fan-switch,
.fan-slat:hover .fan-switch
{
    DISPLAY: none;
}

@keyframes fan-link
{
    0% { WIDTH: 0; };
}

.fan-trigger:checked + .fan-slat .fan-link,
.fan-slat:hover .fan-link
{
    WIDTH: 100%;
    ANIMATION: fan-link 0.5s steps(1);
    -MOZ-ANIMATION: fan-link 0.5s steps(1);
    -WEBKIT-ANIMATION: fan-link 0.5s steps(1);
}

@media (max-width: 640px)
{
    .fan-slat
    {
        HEIGHT: 200px;
    }
}