/* ----------------------------------------------
 * Generated by Animista on 2021-12-19 6:16:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

.anim-object {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.anim-object__face {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anim-object__face--back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 10;
}


@media (min-width: 1200px) {

    /**
     * Flip vertically to the left
     **/

    @-webkit-keyframes flip-vertical-left-init{0%{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}100%{-webkit-transform:rotateY(0);transform:rotateY(0)}}@keyframes flip-vertical-left{0%{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}100%{-webkit-transform:rotateY(0);transform:rotateY(0)}}
    @-webkit-keyframes flip-vertical-left{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}}@keyframes flip-vertical-left{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}}

    .flip-vertical-left {-webkit-animation:flip-vertical-left-init .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-vertical-left-init .4s cubic-bezier(.455,.03,.515,.955) both}
    .flip-vertical-left:hover {-webkit-animation:flip-vertical-left .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-vertical-left .4s cubic-bezier(.455,.03,.515,.955) both}

    /**
     * Flip vertically to the right
     **/

    @-webkit-keyframes flip-vertical-right-init{0%{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}100%{-webkit-transform:rotateY(0);transform:rotateY(0)}}@keyframes flip-vertical-right{0%{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}100%{-webkit-transform:rotateY(0);transform:rotateY(0)}}
    @-webkit-keyframes flip-vertical-right{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}}@keyframes flip-vertical-right{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}}

    .flip-vertical-right {-webkit-animation:flip-vertical-right-init .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-vertical-right-init .4s cubic-bezier(.455,.03,.515,.955) both}
    .flip-vertical-right:hover {-webkit-animation:flip-vertical-right .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-vertical-right .4s cubic-bezier(.455,.03,.515,.955) both}
    
    /**
     * Ken Burns
    **/

    @-webkit-keyframes kenburns-top-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 16%;transform-origin:84% 16%}100%{-webkit-transform:scale(1.25) translate(20px,-15px);transform:scale(1.25) translate(20px,-15px);-webkit-transform-origin:right top;transform-origin:right top}}@keyframes kenburns-top-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 16%;transform-origin:84% 16%}100%{-webkit-transform:scale(1.25) translate(20px,-15px);transform:scale(1.25) translate(20px,-15px);-webkit-transform-origin:right top;transform-origin:right top}}
    
    .kenburns-top-right{-webkit-animation:kenburns-top-right 5s ease-out both;animation:kenburns-top-right 5s ease-out both}

}