@-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        50% {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        100% {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
            opacity: 0;
        }
    }

    @keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        50% {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        100% {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
            opacity: 0;
        }
    }

    .animation-rotate {
        -webkit-animation-name: rotate;
        animation-name: rotate;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes zoomInImage {
        0% {
            opacity: 1;
        }

        50% {
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2);
            opacity: 1;
        }
    }

    @keyframes zoomInImage {
        0% {
            opacity: 1;
        }

        50% {
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2);
            opacity: 1;
        }
    }

    .zoomInImage {
        -webkit-animation: zoomInImage;
        animation: zoomInImage;
        -webkit-animation-duration: 200ms;
        animation-duration: 200ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }













    @-webkit-keyframes changeUpOne {
        0% {
            -webkit-transform: skew(-30deg, 15deg) translate(0%, calc((var(--vh, 1vh) * (-50))));
                    transform: skew(-30deg, 15deg) translate(0%, calc((var(--vh, 1vh) * (-50))));
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -48%;
            left: -50%;
            opacity: 0;
        }

        90% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -48%;
            left: -50%;
            opacity: 1;
        }

        100% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -48%;
            left: -50%;
            opacity: 1;
        }
    }

    @keyframes changeUpOne {
        0% {
            -webkit-transform: skew(-30deg, 15deg) translate(0%, calc((var(--vh, 1vh) * (-50))));
                    transform: skew(-30deg, 15deg) translate(0%, calc((var(--vh, 1vh) * (-50))));
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -48%;
            left: -50%;
            opacity: 0;
        }

        90% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -48%;
            left: -50%;
            opacity: 1;
        }

        100% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -48%;
            left: -50%;
            opacity: 1;
        }
    }

    .changeUpOne {
        -webkit-animation: changeUpOne;
        animation: changeUpOne;
        -webkit-animation-duration: 600ms;
        animation-duration: 600ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes changeUpTwo {

        0% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -48%;
            left: -50%;
            opacity: 1;
        }

        100% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -100%;
            left: -50%;
            opacity: 1;
        }


    }

    @keyframes changeUpTwo {

        0% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -48%;
            left: -50%;
            opacity: 1;
        }

        100% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(95%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0) 100%);
            width: 200%;
            top: -100%;
            left: -50%;
            opacity: 1;
        }

    }

    .changeUpTwo {

        -webkit-animation: changeUpTwo;
        animation: changeUpTwo;
        -webkit-animation-duration: 400ms;
        animation-duration: 400ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;

    }

    @-webkit-keyframes changeDownOne {
        0% {
            -webkit-transform: skew(-30deg, 15deg) translate(0%, calc((var(--vh, 1vh) * (50))));
                    transform: skew(-30deg, 15deg) translate(0%, calc((var(--vh, 1vh) * (50))));
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            width: 200%;
            bottom: -48%;
            left: -50%;
            opacity: 0;
        }

        90% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            width: 200%;
            bottom: -48%;
            left: -50%;
            opacity: 1;
        }

        100% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            width: 200%;
            bottom: -48%;
            left: -50%;
            opacity: 1;
        }
    }

    @keyframes changeDownOne {
        0% {
            -webkit-transform: skew(-30deg, 15deg) translate(0%, calc((var(--vh, 1vh) * (50))));
                    transform: skew(-30deg, 15deg) translate(0%, calc((var(--vh, 1vh) * (50))));
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            /* background: red; */
            width: 200%;
            bottom: -48%;
            left: -50%;
            opacity: 0;
        }

        90% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            /* background: red; */
            width: 200%;
            bottom: -48%;
            left: -50%;
            opacity: 1;
        }

        100% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            /* background: red; */
            width: 200%;
            bottom: -48%;
            left: -50%;
            opacity: 1;
        }
    }

    .changeDownOne {
        -webkit-animation: changeDownOne;
        animation: changeDownOne;
        -webkit-animation-duration: 600ms;
        animation-duration: 600ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes changeDownTwo {

        0% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            width: 200%;
            bottom: -48%;
            left: -50%;
            opacity: 1;
        }

        100% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            width: 200%;
            bottom: -100%;
            left: -50%;
            opacity: 1;
        }


    }

    @keyframes changeDownTwo {

        0% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            width: 200%;
            bottom: -48%;
            left: -50%;
            opacity: 1;
        }

        100% {
            -webkit-transform: skew(0deg, 0deg) translate(0, 0);
                    transform: skew(0deg, 0deg) translate(0, 0);
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(5%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 1)));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 1) 100%);
            width: 200%;
            bottom: -100%;
            left: -50%;
            opacity: 1;
        }

    }

    .changeDownTwo {

        -webkit-animation: changeDownTwo;
        animation: changeDownTwo;
        -webkit-animation-duration: 400ms;
        animation-duration: 400ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;

    }


    @-webkit-keyframes changeBackground {

        0% {
            -webkit-transform: rotateX(90deg);
                    transform: rotateX(90deg);
        }

        100% {
            -webkit-transform: rotateX(0deg);
                    transform: rotateX(0deg);
        }

    }

    @keyframes changeBackground {

        0% {
            -webkit-transform: rotateX(90deg);
                    transform: rotateX(90deg);
        }

        100% {
            -webkit-transform: rotateX(0deg);
                    transform: rotateX(0deg);
        }

    }

    .changeBackground {

        -webkit-animation: changeBackground;
        animation: changeBackground;
        -webkit-animation-duration: 400ms;
        animation-duration: 400ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;

    }