.vibrate-1 {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
    animation: vibrate-1 0.3s linear infinite both;
}

.vibrate-2 {
    -webkit-animation: vibrate-2 0.3s linear infinite both;
    animation: vibrate-2 0.3s linear infinite both;
}

.bounce-bottom {
    -webkit-animation: bounce-bottom .9s both;
    animation: bounce-bottom .9s both
}


/**flip**/
.flip-scale-2-hor-top {
    animation: flip-scale-2-hor-top .5s linear
}

.flip-2-hor-top-1 {
    animation: flip-2-hor-top-1 .5s cubic-bezier(.455,.03,.515,.955) both
}

.flip-scale-up-hor {
    animation: flip-scale-up-hor .5s linear
}

/**rotate**/
.rotate-diagonal-1 {
    animation: rotate-diagonal-1 .4s linear both
}

/**title**/
.tilt-in-br {
    animation: tilt-in-br .65s cubic-bezier(.25,.46,.45,.94) both
}

.tilt-in-left-2 {
    animation: tilt-in-left-2 .6s cubic-bezier(.25,.46,.45,.94) both
}

.tilt-in-top-2 {
    -webkit-animation: tilt-in-top-2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: tilt-in-top-2 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.tilt-in-bottom-2 {
    -webkit-animation: tilt-in-bottom-2 .6s cubic-bezier(.25,.46,.45,.94) both;
    animation: tilt-in-bottom-2 .6s cubic-bezier(.25,.46,.45,.94) both
}

.flash {
    animation: 2s linear infinite;
    -webkit-animation-name: flash;
    animation-name: flash;
}

@-webkit-keyframes flash {
    from, 50%, to {
        filter: brightness(110%);
    }

    25%, 75% {
        filter: brightness(90%);
    }
}

@keyframes flash {
    from, 50%, to {
        filter: brightness(110%);
    }

    25%, 75% {
        filter: brightness(90%);
    }
}

@-webkit-keyframes bounce-bottom {
    0% {
        -webkit-transform: translateY(45px);
        transform: translateY(45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(24px);
        transform: translateY(24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%, 55%, 75%, 87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

@keyframes bounce-bottom {
    0% {
        -webkit-transform: translateY(45px);
        transform: translateY(45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    40% {
        -webkit-transform: translateY(24px);
        transform: translateY(24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    65% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    82% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    93% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    25%, 55%, 75%, 87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

@-webkit-keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

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

@keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

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

@-webkit-keyframes vibrate-2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

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

@keyframes vibrate-2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

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

@keyframes flip-scale-2-hor-top {
    0% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% 0
    }

    50% {
        transform: translateY(-50%) rotateX(-90deg) scale(2);
        transform-origin: 50% 50%
    }

    100% {
        transform: translateY(-100%) rotateX(-180deg) scale(1);
        transform-origin: 50% 100%
    }
}

@keyframes flip-2-hor-top-1 {
    0% {
        transform: translateY(0) rotateX(0);
        transform-origin: 50% 0
    }

    100% {
        transform: translateY(-100%) rotateX(-180deg);
        transform-origin: 50% 100%
    }
}

@keyframes flip-scale-up-hor {
    0% {
        transform: scale(1) rotateX(0)
    }

    50% {
        transform: scale(2.5) rotateX(-90deg)
    }

    100% {
        transform: scale(1) rotateX(-180deg)
    }
}

@keyframes rotate-diagonal-1 {
    0% {
        transform: rotate3d(1,1,0,0deg)
    }

    50% {
        transform: rotate3d(1,1,0,-180deg)
    }

    100% {
        transform: rotate3d(1,1,0,-360deg)
    }
}

@keyframes tilt-in-br {
    0% {
        transform: rotateY(-35deg) rotateX(-20deg) translate(250px,250px) skew(12deg,15deg);
        opacity: 0
    }

    100% {
        transform: rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);
        opacity: 1
    }
}

@keyframes tilt-in-left-2 {
    0% {
        transform: rotateX(30deg) translateX(-300px) skewX(30deg);
        opacity: 0
    }

    100% {
        transform: rotateX(0deg) translateX(0) skewX(0deg);
        opacity: 1
    }
}

@-webkit-keyframes tilt-in-top-2 {
    0% {
        -webkit-transform: rotateY(-30deg) translateY(-300px) skewY(30deg);
        transform: rotateY(-30deg) translateY(-300px) skewY(30deg);
        opacity: 0
    }

    100% {
        -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
        transform: rotateY(0deg) translateY(0) skewY(0deg);
        opacity: 1
    }
}

@keyframes tilt-in-top-2 {
    0% {
        -webkit-transform: rotateY(-30deg) translateY(-300px) skewY(30deg);
        transform: rotateY(-30deg) translateY(-300px) skewY(30deg);
        opacity: 0
    }

    100% {
        -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
        transform: rotateY(0deg) translateY(0) skewY(0deg);
        opacity: 1
    }
}

@-webkit-keyframes tilt-in-bottom-2 {
    0% {
        -webkit-transform: rotateY(-30deg) translateY(300px) skewY(30deg);
        transform: rotateY(-30deg) translateY(300px) skewY(30deg);
        opacity: 0
    }

    100% {
        -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
        transform: rotateY(0deg) translateY(0) skewY(0deg);
        opacity: 1
    }
}

@keyframes tilt-in-bottom-2 {
    0% {
        -webkit-transform: rotateY(-30deg) translateY(300px) skewY(30deg);
        transform: rotateY(-30deg) translateY(300px) skewY(30deg);
        opacity: 0
    }

    100% {
        -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
        transform: rotateY(0deg) translateY(0) skewY(0deg);
        opacity: 1
    }
}