/* Duration */
* { -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both; }

/* General */
.anim-infinite { -webkit-animation-iteration-count: infinite; }
.anim-delay--5 { -webkit-animation-delay: -.5s; }
.anim-delay-5 { -webkit-animation-delay: 0.5s; }
.anim-duration-5 { -webkit-animation-duration: 0.5s; }
.anim-duration-15 { -webkit-animation-duration: 1.5s; }
.anim-duration-20 { -webkit-animation-duration: 2s; }
.anim-duration-25 { -webkit-animation-duration: 2.5s; }
.anim-duration-30 { -webkit-animation-duration: 3s; }

/* Animations */
.anim-logo { -webkit-animation-name: anim-logo; }
@keyframes anim-logo {
    0% { -webkit-transform: scale3d(1, 1, 1); }
    30% { -webkit-transform: scale3d(1.25, 0.75, 1); }
    40% { -webkit-transform: scale3d(0.75, 1.25, 1); }
    50% { -webkit-transform: scale3d(1.15, 0.85, 1); }
    65% { -webkit-transform: scale3d(0.95, 1.05, 1); }
    75% { -webkit-transform: scale3d(1.05, 0.95, 1); }
    100% { -webkit-transform: scale3d(1, 1, 1); }
}

/**/
.anim-scale-1 { -webkit-animation-name: anim-scale-1; }
@keyframes anim-scale-1 {
    0% { transform: scale(1.2); }
    100% { transform: none; }
}
.anim-scale-2 { -webkit-animation-name: anim-scale-2; }
@keyframes anim-scale-2 {
    0% { transform: scale(.9); }
    80% { transform: scale(1.05); }
    100% { transform: none; }
}
.anim-scale-3 { -webkit-animation-name: anim-scale-3; }
@keyframes anim-scale-3 {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.anim-scale-4 { -webkit-animation-name: anim-scale-4; }
@keyframes anim-scale-4 {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.anim-scale-5 { -webkit-animation-name: anim-scale-5; }
@keyframes anim-scale-5 {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.anim-scale-6 { -webkit-animation-name: anim-scale-6; }
@keyframes anim-scale-6 {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(0); }
}
.anim-scale-7 { -webkit-animation-name: anim-scale-7; }
@keyframes anim-scale-7 {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/**/
.anim-up-1 { -webkit-animation-name: anim-up-1; }
@keyframes anim-up-1 {
    0% { transform: translateY(5%); }
    50% { transform: translateY(-5%); }
    100% { transform: translateY(5%); }
}
.anim-down-1 { -webkit-animation-name: anim-down-1; }
@keyframes anim-down-1 {
    0% { transform: translateY(-65%); }
    80% { transform: translateY(10%); }
    100% { transform: none; }
}
.anim-left-1 { -webkit-animation-name: anim-left-1; }
@keyframes anim-left-1 {
    0% { transform: translateX(100%); }
    80% { transform: translateX(-10%); }
    100% { transform: none; }
}
.anim-right-1 { -webkit-animation-name: anim-right-1; }
@keyframes anim-right-1 {
    0% { transform: translateX(-100%); }
    80% { transform: translateX(10%); }
    100% { transform: none; }
}
.anim-up-2 { -webkit-animation-name: anim-up-2; transform-origin: bottom center; }
@keyframes anim-up-2 {
    0% { transform: translateY(300%) scaleY(1); }
    80% { transform: scaleY(1.1); }
    100% { transform: none; }
}
.anim-up-3 { -webkit-animation-name: anim-up-3; }
@keyframes anim-up-3 {
    0% { transform: none; }
    100% { transform: translateY(-100%); }
}
.anim-up-4 { -webkit-animation-name: anim-up-4; transform-origin: bottom center; }
@keyframes anim-up-4 {
    0% { transform: translateY(100%) scaleY(1); opacity: 0; }
    50% { opacity: 1; }
    80% { transform: scaleY(1.1); }
    100% { transform: none; }
}
.anim-down-2 { -webkit-animation-name: anim-down-2; }
@keyframes anim-down-2 {
    0% { transform: translateY(-100%); }
    100% { transform: none; }
}
.anim-down-3 { -webkit-animation-name: anim-down-3; }
@keyframes anim-down-3 {
    0% { transform: none; }
    100% { transform: translateY(100%); }
}
.anim-left-2 { -webkit-animation-name: anim-left-2; }
@keyframes anim-left-2 {
    0% { transform: translateX(100%); }
    100% { transform: none; }
}
.anim-right-2 { -webkit-animation-name: anim-right-2; }
@keyframes anim-right-2 {
    0% { transform: translateX(-100%); }
    100% { transform: none; }
}
.anim-left-3 { -webkit-animation-name: anim-left-3; }
@keyframes anim-left-3 {
    0% { transform: none; }
    100% { transform: translateX(-100%); }
}
.anim-right-3 { -webkit-animation-name: anim-right-3; }
@keyframes anim-right-3 {
    0% { transform: none; }
    100% { transform: translateX(100%); }
}
.anim-eyes { -webkit-animation-name: anim-eyes; }
@keyframes anim-eyes {
    0% { transform: translateX(-5%); }
    50% { transform: translateX(5%); }
    100% { transform: translateX(-5%); }
}

/**/
.anim-rotate-1 { -webkit-animation-name: anim-rotate-1; -webkit-animation-timing-function: linear; }
@keyframes anim-rotate-1 {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}
.anim-rotate-2 { -webkit-animation-name: anim-rotate-2; }
@keyframes anim-rotate-2 {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(-360deg) }
}
.anim-rotate-3 { -webkit-animation-name: anim-rotate-3; }
@keyframes anim-rotate-3 {
    0% { transform: rotate(20deg) translateX(-100%); }
    33% { transform: rotate(0deg) }
    66% { transform: rotate(10deg) }
    100% { transform: none }
}
.anim-rotate-4 { -webkit-animation-name: anim-rotate-4; }
@keyframes anim-rotate-4 {
    0% { transform: rotate(-20deg) translateX(100%); }
    33% { transform: rotate(0deg) }
    66% { transform: rotate(-10deg) }
    100% { transform: none }
}
.anim-rotate-5 { -webkit-animation-name: anim-rotate-5; }
@keyframes anim-rotate-5 {
    0% { transform: translateX(-100%) scale(.5); }
    25% { transform: none }
    50% { transform: translateX(100%) scale(.5); }
    75% { transform: none }
    100% { transform: translateX(-100%) scale(.5); }
}
.anim-rotate-6 { -webkit-animation-name: anim-rotate-6; }
@keyframes anim-rotate-6 {
    0% { transform: rotate(-5deg); }
    25% { transform: none }
    50% { transform: rotate(5deg); }
    75% { transform: none }
    100% { transform: rotate(-5deg); }
}
.anim-dialog-1 { -webkit-animation-name: anim-dialog-1; }
@keyframes anim-dialog-1 {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}
.anim-dialog-2 { -webkit-animation-name: anim-dialog-2; }
@keyframes anim-dialog-2 {
    0% { transform: scale(0); }
    25% { transform: scale(1.25); }
    50% { transform: scale(1); }
    75% { transform: scale(1.25); }
    100% { transform: scale(0); }
}
.anim-dialog-3 { -webkit-animation-name: anim-dialog-3; }
@keyframes anim-dialog-3 {
    0% { transform: scale(0); }
    30% { transform: scale(1.25); }
    55% { transform: scale(1); }
    80% { transform: scale(1.25); }
    100% { transform: scale(0); }
}
.anim-dialog-4 { -webkit-animation-name: anim-dialog-4; }
@keyframes anim-dialog-4 {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(0); }
}

/**/
.anim-move-1 { -webkit-animation-name: anim-move-1; }
@keyframes anim-move-1 { }

/**/
.anim-fade-1 { -webkit-animation-name: anim-fade-1; }
@keyframes anim-fade-1 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.anim-fade-2 { -webkit-animation-name: anim-fade-2; }
@keyframes anim-fade-2 {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/**/
.anim-msg-game-in { -webkit-animation-name: anim-msg-game-in; animation-name: anim-msg-game-in; }
@keyframes anim-msg-game-in {
    0% { transform: scale(5); opacity: 0; }
    100% { transform: none; opacity: 1; }
}
.anim-msg-game-out { -webkit-animation-name: anim-msg-game-out; animation-name: anim-msg-game-out; }
@keyframes anim-msg-game-out {
    0% { opacity: 1 }
    100% { opacity: 0 }
}

/**/
@keyframes anim-star {
    0% {  opacity: 1; transform: scale(0);}
    50% {opacity: 1;}
    100% {  opacity: 0; transform: scale(1.5); }
}