
@-webkit-keyframes holeOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1) rotateY(0deg);
        transform: scale(1) rotateY(0deg)
    }

    to {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0) rotateY(180deg);
        transform: scale(0) rotateY(180deg)
    }
}

@keyframes holeOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1) rotateY(0deg);
        transform: scale(1) rotateY(0deg)
    }

    to {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0) rotateY(180deg);
        transform: scale(0) rotateY(180deg)
    }
}

.holeOut {
    -webkit-animation-name: holeOut;
    animation-name: holeOut
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}


@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes tinLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(-900%);
        transform: scale(1) translateX(-900%)
    }

    50%,70%,90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0);
        transform: scale(1.1) translateX(0)
    }

    60%,80%,to {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0)
    }
}


@keyframes tinLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(-900%);
        transform: scale(1) translateX(-900%)
    }

    50%,70%,90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0);
        transform: scale(1.1) translateX(0)
    }

    60%,80%,to {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0)
    }
}

.tinLeftIn {
    -webkit-animation-name: tinLeftIn;
    animation-name: tinLeftIn
}

