@media (min-width: 1200px) {

    /** {
        box-sizing: border-box;
    }*/

    div#carousel {
        perspective: 1200px;
        font-size: 0;
    }

    figure#spinner {
        transform-style: preserve-3d;
        height: 567px;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50% -467px;
        transition: 1s;
    }

        figure#spinner figure {
            width: 415px;
            position: absolute;
            left: 242px;
            transform-origin: 50% 50% -467px;
            outline: 1px solid transparent;
            overflow: hidden;
            transition: 1s;
        }

            /*figure#spinner figure.focus {
                width: 26%;
                left: 37%;
                margin-top: -3rem;
            }*/

            figure#spinner figure img {
                width: 100%;
                height: 536px;
            }

    /*figcaption {
        position: absolute;
        top: 100%;
        width: 100%;
        padding: .3rem;
        z-index: 2;
        font-size: 1.1rem;
        background: transparent;
        transition: .6s;
    }*/

    figure#spinner figure.current:hover figcaption,
    figure#spinner figure.current.caption figcaption {
        top: 90%;
        background: lightgray;
        bottom: 0;
    }

    /*div#carousel ~ span {
        color: black;
        margin: 5%;
        display: inline-block;
        text-decoration: none;
        font-size: 2rem;
        transition: 0.6s color;
        position: relative;
        margin-top: -21rem;
        border-bottom: none;
        line-height: 0;
    }*/

        /*div#carousel ~ span:hover {
            color: #888;
            cursor: pointer;
        }*/
}

@media (min-width: 992px) and (max-width: 1199px) {
    /** {
        box-sizing: border-box;
    }*/

    div#carousel {
        perspective: 1200px;
        font-size: 0;
    }

    figure#spinner {
        transform-style: preserve-3d;
        height: 567px;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50% -401px;
        transition: 1s;
    }

        figure#spinner figure {
            width:367px;
    position: absolute;
    left: 162px;
    transform-origin: 50% 50% -401px;
            outline: 1px solid transparent;
            overflow: hidden;
            transition: 1s;
        }

            /*figure#spinner figure.focus {
                width: 26%;
                left: 37%;
                margin-top: -3rem;
            }*/

            figure#spinner figure img {
                width: 100%;
                height: 536px;
            }

    /*figcaption {
        position: absolute;
        top: 100%;
        width: 100%;
        padding: .3rem;
        z-index: 2;
        font-size: 1.1rem;
        background: transparent;
        transition: .6s;
    }*/

    figure#spinner figure.current:hover figcaption,
    figure#spinner figure.current.caption figcaption {
        top: 90%;
        background: lightgray;
        bottom: 0;
    }

    /*div#carousel ~ span {
        color: black;
        margin: 5%;
        display: inline-block;
        text-decoration: none;
        font-size: 2rem;
        transition: 0.6s color;
        position: relative;
        margin-top: -21rem;
        border-bottom: none;
        line-height: 0;
    }*/

        /*div#carousel ~ span:hover {
            color: #888;
            cursor: pointer;
        }*/
}

@media (min-width: 768px) and (max-width: 991px) {
    * {
        box-sizing: border-box;
    }

    div#carousel {
        perspective: 1200px;
        font-size: 0;
    }

    figure#spinner {
        transform-style: preserve-3d;
        height: 550px;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50% -280px;
        transition: 1s;
    }

        figure#spinner figure {
            width: 241px;
    position: absolute;
    left: 119px;
    transform-origin: 50% 50% -280px;
            outline: 1px solid transparent;
            overflow: hidden;
            transition: 1s;
        }

            /*figure#spinner figure.focus {
                width: 26%;
                left: 37%;
                margin-top: -3rem;
            }*/

            figure#spinner figure img {
                width: 100%;
                height: 536px;
            }

    /*figcaption {
        position: absolute;
        top: 100%;
        width: 100%;
        padding: .3rem;
        z-index: 2;
        font-size: 1.1rem;
        background: transparent;
        transition: .6s;
    }*/

    figure#spinner figure.current:hover figcaption,
    figure#spinner figure.current.caption figcaption {
        top: 90%;
        background: lightgray;
        bottom: 0;
    }

    /*div#carousel ~ span {
        color: black;
        margin: 5%;
        display: inline-block;
        text-decoration: none;
        font-size: 2rem;
        transition: 0.6s color;
        position: relative;
        margin-top: -21rem;
        border-bottom: none;
        line-height: 0;
    }*/

        /*div#carousel ~ span:hover {
            color: #888;
            cursor: pointer;
        }*/
}

@media (max-width: 767px) {
    * {
        box-sizing: border-box;
    }

    div#carousel {
        perspective: 1200px;
        font-size: 0;
    }

    figure#spinner {
        transform-style: preserve-3d;
        height: 567px;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50% -261px;
        transition: 1s;
    }

        figure#spinner figure {
            width:  240px;
    position: absolute;
    left: 118px;
    transform-origin: 50% 50% -261px;
            outline: 1px solid transparent;
            overflow: hidden;
            transition: 1s;
        }

            /*figure#spinner figure.focus {
                width: 26%;
                left: 37%;
                margin-top: -3rem;
            }*/

            figure#spinner figure img {
                width: 100%;
                height: 515px;
            }

    /*figcaption {
        position: absolute;
        top: 100%;
        width: 100%;
        padding: .3rem;
        z-index: 2;
        font-size: 1.1rem;
        background: transparent;
        transition: .6s;
    }*/

    figure#spinner figure.current:hover figcaption,
    figure#spinner figure.current.caption figcaption {
        top: 90%;
        background: lightgray;
        bottom: 0;
    }

    /*div#carousel ~ span {
        color: black;
        margin: 5%;
        display: inline-block;
        text-decoration: none;
        font-size: 2rem;
        transition: 0.6s color;
        position: relative;
        margin-top: -21rem;
        border-bottom: none;
        line-height: 0;
    }*/

        /*div#carousel ~ span:hover {
            color: #888;
            cursor: pointer;
        }*/
}

@media (max-width: 480px) {
    * {
        box-sizing: border-box;
    }

    div#carousel {
        perspective: 1200px;
        font-size: 0;
    }

    figure#spinner {
        transform-style: preserve-3d;
        height: 433px;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50% -175px;
        transition: 1s;
    }

        figure#spinner figure {
            width: 164px;
            position: absolute;
            left: 106px;
            transform-origin: 50% 50% -175px;
            outline: 1px solid transparent;
            overflow: hidden;
            transition: 1s;
        }

            /*figure#spinner figure.focus {
                width: 26%;
                left: 37%;
                margin-top: -3rem;
            }*/

            figure#spinner figure img {
                width: 100%;
                height: 418px;
            }

    /*figcaption {
        position: absolute;
        top: 100%;
        width: 100%;
        padding: .3rem;
        z-index: 2;
        font-size: 1.1rem;
        background: transparent;
        transition: .6s;
    }*/

    figure#spinner figure.current:hover figcaption,
    figure#spinner figure.current.caption figcaption {
        top: 90%;
        background: lightgray;
        bottom: 0;
    }

    /*div#carousel ~ span {
        color: black;
        margin: 5%;
        display: inline-block;
        text-decoration: none;
        font-size: 2rem;
        transition: 0.6s color;
        position: relative;
        margin-top: -21rem;
        border-bottom: none;
        line-height: 0;
    }*/

        /*div#carousel ~ span:hover {
            color: #888;
            cursor: pointer;
        }*/
}