/*Motion CSS The library of CSS3 animation create by Petr Pavlyuk  - http://pavlyukpetr.com Copyright (c) 2015-2016 Petr Pavlyuk*/
#animation {
	visibility: hidden
}
.animation {
	visibility: visible!important;
	animation-fill-mode: both!important;
	-webkit-animation-fill-mode: both!important
}
.replay {
	-webkit-animation-iteration-count: infinite!important;
	animation-iteration-count: infinite!important
}
/*　アニメーション開始時間の遅延 以下にない時間は追加　*/
.delay-05s {
	-webkit-animation-delay: .5s!important;
	animation-delay: .5s!important
}
/*1秒*/
.delay-1s {
	-webkit-animation-delay: 1s!important;
	animation-delay: 1s!important
}
.delay-1.2s {
	-webkit-animation-delay: 1.2s!important;
	animation-delay: 1.2s!important
}
.delay-2s {
	-webkit-animation-delay: 2s!important;
	animation-delay: 2s!important
}
.delay-3s {
	-webkit-animation-delay: 3s!important;
	animation-delay: 3s!important
}
.delay-4s {
	-webkit-animation-delay: 3s!important;
	animation-delay: 3s!important
}
.delay-5s {
	-webkit-animation-delay: 3s!important;
	animation-delay: 3s!important
}

.fade-in {
	-webkit-animation: fade-in 1s;
	animation: fade-in 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@-webkit-keyframes fade-in {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fade-in {
0% {
opacity:0
}
100% {
opacity:1
}
}
.fade-out {
	-webkit-animation: fade-out .51s;
	animation: fade-out 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-out {
0% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes fade-out {
0% {
opacity:1
}
100% {
opacity:0
}
}
.fade-in-right {
	-webkit-animation: fade-in-right 1s;
	animation: fade-in-right 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-in-right {
0% {
-webkit-transform:translateX(-100%);
opacity:0
}
100% {
-webkit-transform:translateX(0%);
opacity:1
}
}
@keyframes fade-in-right {
0% {
transform:translateX(-100%);
opacity:0
}
100% {
transform:translateX(0%);
opacity:1
}
}
.fade-in-left {
	-webkit-animation: fade-in-left 1s;
	animation: fade-in-left 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-in-left {
0% {
-webkit-transform:translateX(100%);
opacity:0
}
100% {
-webkit-transform:translateX(0%);
opacity:1
}
}
@keyframes fade-in-left {
0% {
transform:translateX(100%);
opacity:0
}
100% {
transform:translateX(0%);
opacity:1
}
}
.fade-in-up {
	-webkit-animation: fade-in-up 1s;
	animation: fade-in-up 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-in-up {
0% {
-webkit-transform:translateY(100%);
opacity:0
}
100% {
-webkit-transform:translateY(0%);
opacity:1
}
}
@keyframes fade-in-up {
0% {
transform:translateY(100%);
opacity:0
}
100% {
transform:translateY(0%);
opacity:1
}
}
.fade-in-down {
	-webkit-animation: fade-in-down 1s;
	animation: fade-in-down 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-in-down {
0% {
-webkit-transform:translateY(-100%);
opacity:0
}
100% {
-webkit-transform:translateY(0%);
opacity:1
}
}
@keyframes fade-in-down {
0% {
transform:translateY(-100%);
opacity:0
}
100% {
transform:translateY(0%);
opacity:1
}
}
.fade-out-right {
	-webkit-animation: fade-out-right 1s;
	animation: fade-out-right 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-out-right {
0% {
-webkit-transform:translateX(0%);
opacity:1
}
100% {
-webkit-transform:translateX(100%);
opacity:0
}
}
@keyframes fade-out-right {
0% {
transform:translateX(0%);
opacity:1
}
100% {
transform:translateX(100%);
opacity:0
}
}
.fade-out-left {
	-webkit-animation: fade-out-left 1s;
	animation: fade-out-left 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-out-left {
0% {
-webkit-transform:translateX(0%);
opacity:1
}
100% {
-webkit-transform:translateX(-100%);
opacity:0
}
}
@keyframes fade-out-left {
0% {
transform:translateX(0%);
opacity:1
}
100% {
transform:translateX(-100%);
opacity:0
}
}
.fade-out-up {
	-webkit-animation: fade-out-up 1s;
	animation: fade-out-up 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-out-up {
0% {
-webkit-transform:translateY(0%);
opacity:1
}
100% {
-webkit-transform:translateY(-100%);
opacity:0
}
}
@keyframes fade-out-up {
0% {
transform:translateY(0%);
opacity:1
}
100% {
transform:translateY(-100%);
opacity:0
}
}
.fade-out-down {
	-webkit-animation: fade-out-down 1s;
	animation: fade-out-down 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@-webkit-keyframes fade-out-down {
0% {
-webkit-transform:translateY(0%);
opacity:1
}
100% {
-webkit-transform:translateY(100%);
opacity:0
}
}
@keyframes fade-out-down {
0% {
transform:translateY(0%);
opacity:1
}
100% {
transform:translateY(100%);
opacity:0
}
}
.slide-in-right {
	-webkit-animation: slide-in-right 1s;
	animation: slide-in-right 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}
@-webkit-keyframes slide-in-right {
0% {
/*-webkit-transform:translateX(-2000px)*/
-webkit-transform:translateX(-200px)
}
100% {
-webkit-transform:translateX(0px)
}
}
@keyframes slide-in-right {
0% {
/*transform:translateX(-2000px)*/	
transform:translateX(-200px)
}
100% {
transform:translateX(0px)
}
}
.slide-in-left {
	-webkit-animation: slide-in-left 1s;
	animation: slide-in-left 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}
@-webkit-keyframes slide-in-left {
0% {
/*-webkit-transform:translateX(2000px)*/	
-webkit-transform:translateX(200px)
}
100% {
-webkit-transform:translateX(0px)
}
}
@keyframes slide-in-left {
0% {
/*transform:translateX(2000px)*/	
transform:translateX(200px)
}
100% {
transform:translateX(0px)
}
}
.slide-in-up {
	-webkit-animation: slide-in-up 1s;
	animation: slide-in-up 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}
@-webkit-keyframes slide-in-up {
0% {
/*-webkit-transform:translateY(1000px)*/
-webkit-transform:translateY(200px)
}
100% {
-webkit-transform:translateY(0px)
}
}
@keyframes slide-in-up {
0% {
/*transform:translateY(1000px)*/
transform:translateY(200px)
}
100% {
transform:translateY(0px)
}
}
.slide-in-down {
	-webkit-animation: slide-in-down 1s;
	animation: slide-in-down 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}
@-webkit-keyframes slide-in-down {
0% {
-webkit-transform:translateY(-1000px)
}
100% {
-webkit-transform:translateY(0px)
}
}
@keyframes slide-in-down {
0% {
transform:translateY(-1000px)
}
100% {
transform:translateY(0px)
}
}
.slide-out-right {
	-webkit-animation: slide-out-right 1s;
	animation: slide-out-right 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}
@-webkit-keyframes slide-out-right {
0% {
-webkit-transform:translateX(0px)
}
100% {
-webkit-transform:translateX(2000px)
}
}
@keyframes slide-out-right {
0% {
transform:translateX(0px)
}
100% {
transform:translateX(2000px)
}
}
.slide-out-left {
	-webkit-animation: slide-out-left 1s;
	animation: slide-out-left 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}
@-webkit-keyframes slide-out-left {
0% {
-webkit-transform:translateX(0px)
}
100% {
-webkit-transform:translateX(-2000px)
}
}
@keyframes slide-out-left {
0% {
transform:translateX(0px)
}
100% {
transform:translateX(-2000px)
}
}
.slide-out-up {
	-webkit-animation: slide-out-up 1s;
	animation: slide-out-up 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}
@-webkit-keyframes slide-out-up {
0% {
-webkit-transform:translateY(0px)
}
100% {
-webkit-transform:translateY(-1000px)
}
}
@keyframes slide-out-up {
0% {
transform:translateY(0px)
}
100% {
transform:translateY(-1000px)
}
}
.slide-out-down {
	-webkit-animation: slide-out-down 1s;
	animation: slide-out-down 1s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease
}
@-webkit-keyframes slide-out-down {
0% {
-webkit-transform:translateY(0px)
}
100% {
-webkit-transform:translateY(1000px)
}
}
@keyframes slide-out-down {
0% {
transform:translateY(0px)
}
100% {
transform:translateY(1000px)
}
}
.bounce-in {
	-webkit-animation: bounce-in 1s;
	animation: bounce-in 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes bounce-in {
0% {
transform:scale(.9);
opacity:0
}
25% {
transform:scale(1.2)
}
40% {
transform:scale(.8)
}
50% {
transform:scale(1.1)
}
60% {
transform:scale(.9)
}
70% {
transform:scale(1.05);
opacity:1
}
80% {
transform:scale(.95)
}
90% {
transform:scale(1.01)
}
100% {
transform:scale(1)
}
}
@-webkit-keyframes bounce-in {
0% {
-webkit-transform:scale(.9);
opacity:0
}
25% {
-webkit-transform:scale(1.2)
}
40% {
-webkit-transform:scale(.8)
}
50% {
-webkit-transform:scale(1.1)
}
60% {
-webkit-transform:scale(.9)
}
70% {
-webkit-transform:scale(1.05);
opacity:1
}
80% {
-webkit-transform:scale(.95)
}
90% {
-webkit-transform:scale(1.01)
}
100% {
-webkit-transform:scale(1)
}
}
.bounce-in-right {
	-webkit-animation: bounce-in-right 1s;
	animation: bounce-in-right 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes bounce-in-right {
0% {
transform:translateX(-2000px)
}
63% {
transform:translateX(30px)
}
70%, 80%, 90%, 100% {
transform:translateX(0px)
}
75% {
transform:translateX(14px)
}
85% {
transform:translateX(8px)
}
95% {
transform:translateX(4px)
}
}
@-webkit-keyframes bounce-in-right {
0% {
-webkit-transform:translateX(-2000px)
}
63% {
-webkit-transform:translateX(30px)
}
70%, 80%, 90%, 100% {
-webkit-transform:translateX(0px)
}
75% {
-webkit-transform:translateX(14px)
}
85% {
-webkit-transform:translateX(8px)
}
95% {
-webkit-transform:translateX(4px)
}
}
.bounce-in-left {
	-webkit-animation: bounce-in-left 1s;
	animation: bounce-in-left 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes bounce-in-left {
0% {
transform:translateX(2000px)
}
63% {
transform:translateX(-30px)
}
70%, 80%, 90%, 100% {
transform:translateX(0px)
}
75% {
transform:translateX(-14px)
}
85% {
transform:translateX(-8px)
}
95% {
transform:translateX(-4px)
}
}
@-webkit-keyframes bounce-in-left {
0% {
-webkit-transform:translateX(2000px)
}
63% {
-webkit-transform:translateX(-30px)
}
70%, 80%, 90%, 100% {
-webkit-transform:translateX(0px)
}
75% {
-webkit-transform:translateX(-14px)
}
85% {
-webkit-transform:translateX(-8px)
}
95% {
-webkit-transform:translateX(-4px)
}
}
.bounce-in-up {
	-webkit-animation: bounce-in-up 1s;
	animation: bounce-in-up 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes bounce-in-up {
0% {
transform:translateY(1000px)
}
25% {
transform:translateY(50px)
}
30%, 55%, 70%, 80%, 90%, 100% {
transform:translateY(0px)
}
45% {
transform:translateY(25px)
}
63% {
transform:translateY(15px)
}
75% {
transform:translateY(7px)
}
85% {
transform:translateY(4px)
}
95% {
transform:translateY(2px)
}
}
@-webkit-keyframes bounce-in-up {
0% {
-webkit-transform:translateY(1000px)
}
25% {
-webkit-transform:translateY(50px)
}
30%, 55%, 70%, 80%, 90%, 100% {
-webkit-transform:translateY(0px)
}
45% {
-webkit-transform:translateY(25px)
}
63% {
-webkit-transform:translateY(15px)
}
75% {
-webkit-transform:translateY(7px)
}
85% {
-webkit-transform:translateY(4px)
}
95% {
-webkit-transform:translateY(2px)
}
}
.bounce-in-down {
	-webkit-animation: bounce-in-down 1s;
	animation: bounce-in-down 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes bounce-in-down {
0% {
transform:translateY(-1000px)
}
25% {
transform:translateY(-50px)
}
30%, 55%, 70%, 80%, 90%, 100% {
transform:translateY(0px)
}
45% {
transform:translateY(-25px)
}
63% {
transform:translateY(-15px)
}
75% {
transform:translateY(-7px)
}
85% {
transform:translateY(-4px)
}
95% {
transform:translateY(-2px)
}
}
@-webkit-keyframes bounce-in-down {
0% {
-webkit-transform:translateY(-1000px)
}
25% {
-webkit-transform:translateY(-50px)
}
30%, 55%, 70%, 80%, 90%, 100% {
-webkit-transform:translateY(0px)
}
45% {
-webkit-transform:translateY(-25px)
}
63% {
-webkit-transform:translateY(-15px)
}
75% {
-webkit-transform:translateY(-7px)
}
85% {
-webkit-transform:translateY(-4px)
}
95% {
-webkit-transform:translateY(-2px)
}
}
.roll-in-right {
	-webkit-animation: roll-in-right 1s;
	animation: roll-in-right 1.2s
}
@keyframes roll-in-right {
0% {
transform:translateX(-100%) rotate(-130deg);
opacity:0
}
100% {
transform:translateX(0%) rotate(0deg);
opacity:1
}
}
@-webkit-keyframes roll-in-right {
0% {
-webkit-transform:translateX(-100%) rotate(-130deg);
opacity:0
}
100% {
-webkit-transform:translateX(0%) rotate(0deg);
opacity:1
}
}
.roll-in-left {
	-webkit-animation: roll-in-left 1s;
	animation: roll-in-left 1.2s
}
@keyframes roll-in-left {
0% {
transform:translateX(100%) rotate(130deg);
opacity:0
}
100% {
transform:translateX(0%) rotate(0deg);
opacity:1
}
}
@-webkit-keyframes roll-in-left {
0% {
-webkit-transform:translateX(100%) rotate(130deg);
opacity:0
}
100% {
-webkit-transform:translateX(0%) rotate(0deg);
opacity:1
}
}
.roll-out-right {
	-webkit-animation: roll-out-right 1s;
	animation: roll-out-right 1.2s
}
@keyframes roll-out-right {
0% {
transform:translateX(0%) rotate(0deg);
opacity:1
}
100% {
transform:translateX(100%) rotate(130deg);
opacity:0
}
}
@-webkit-keyframes roll-out-right {
0% {
-webkit-transform:translateX(0%) rotate(0deg);
opacity:1
}
100% {
-webkit-transform:translateX(100%) rotate(130deg);
opacity:0
}
}
.roll-out-left {
	-webkit-animation: roll-out-left 1s;
	animation: roll-out-left 1.2s
}
@keyframes roll-out-left {
0% {
transform:translateX(0%) rotate(0deg);
opacity:1
}
100% {
transform:translateX(-100%) rotate(-130deg);
opacity:0
}
}
@-webkit-keyframes roll-out-left {
0% {
-webkit-transform:translateX(0%) rotate(0deg);
opacity:1
}
100% {
-webkit-transform:translateX(-100%) rotate(-130deg);
opacity:0
}
}
.rotbo-in-right {
	-webkit-animation: rotbo-in-right 1.1s;
	animation: rotbo-in-right 1.1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes rotbo-in-right {
0% {
transform:translateX(-1000px) rotateZ(-540deg)
}
63% {
transform:translateX(15px) rotateZ(20deg)
}
75% {
transform:translateX(-7px) rotateZ(-7deg)
}
85% {
transform:translateX(4px) rotateZ(4deg)
}
95% {
transform:translateX(-2px) rotateZ(-2deg)
}
100% {
transform:translateX(0px) rotateZ(0deg)
}
}
@-webkit-keyframes rotbo-in-right {
0% {
-webkit-transform:translateX(-1000px) rotateZ(-540deg)
}
63% {
-webkit-transform:translateX(15px) rotateZ(20deg)
}
75% {
-webkit-transform:translateX(-7px) rotateZ(-7deg)
}
85% {
-webkit-transform:translateX(4px) rotateZ(4deg)
}
95% {
-webkit-transform:translateX(-2px) rotateZ(-2deg)
}
100% {
-webkit-transform:translateX(0px) rotateZ(0deg)
}
}
.rotbo-in-left {
	-webkit-animation: rotbo-in-left 1.1s;
	animation: rotbo-in-left 1.1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes rotbo-in-left {
0% {
transform:translateX(1000px) rotateZ(540deg)
}
63% {
transform:translateX(-15px) rotateZ(-20deg)
}
75% {
transform:translateX(7px) rotateZ(7deg)
}
85% {
transform:translateX(-4px) rotateZ(-4deg)
}
95% {
transform:translateX(2px) rotateZ(2deg)
}
100% {
transform:translateX(0px) rotateZ(0deg)
}
}
@-webkit-keyframes rotbo-in-left {
0% {
-webkit-transform:translateX(1000px) rotateZ(540deg)
}
63% {
-webkit-transform:translateX(-15px) rotateZ(-20deg)
}
75% {
-webkit-transform:translateX(7px) rotateZ(7deg)
}
85% {
-webkit-transform:translateX(-4px) rotateZ(-4deg)
}
95% {
-webkit-transform:translateX(2px) rotateZ(2deg)
}
100% {
-webkit-transform:translateX(0px) rotateZ(0deg)
}
}
.rotbo-out-left {
	-webkit-animation: rotbo-out-left 2s;
	animation: rotbo-out-left 2s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes rotbo-out-left {
0% {
transform:translateX(0%) rotateZ(0deg)
}
20% {
transform:translateX(15px) rotateZ(20deg)
}
100% {
transform:translateX(-2000px) rotateZ(-1080deg)
}
}
@-webkit-keyframes rotbo-out-left {
0% {
-webkit-transform:translateX(0%) rotateZ(0deg)
}
20% {
-webkit-transform:translateX(15px) rotateZ(20deg)
}
100% {
-webkit-transform:translateX(-2000px) rotateZ(-1080deg)
}
}
.rotbo-out-right {
	-webkit-animation: rotbo-out-right 2s;
	animation: rotbo-out-right 2s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes rotbo-out-right {
0% {
transform:translateX(0%) rotateZ(0deg)
}
20% {
transform:translateX(-15px) rotateZ(-20deg)
}
100% {
transform:translateX(2000px) rotateZ(1080deg)
}
}
@-webkit-keyframes rotbo-out-right {
0% {
-webkit-transform:translateX(0%) rotateZ(0deg)
}
20% {
-webkit-transform:translateX(-15px) rotateZ(-20deg)
}
100% {
-webkit-transform:translateX(2000px) rotateZ(1080deg)
}
}
.flip {
	-webkit-animation: flip 1.3s;
	animation: flip 1.3s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes flip {
0% {
transform:rotateY(-360deg)
}
40% {
transform:scale(1.6) rotateY(-190deg)
}
50% {
transform:scale(1.6) rotateY(-150deg)
}
80% {
transform:scale(.95)
}
100% {
transform:scale(1)
}
}
@-webkit-keyframes flip {
0% {
-webkit-transform:perspective(500px) rotateX(70deg);
opacity:.2
}
30% {
-webkit-transform:perspective(500px) rotateX(-50deg)
}
45% {
-webkit-transform:perspective(500px) rotateX(30deg)
}
65% {
-webkit-transform:perspective(500px) rotateX(-20deg)
}
85% {
-webkit-transform:perspective(500px) rotateX(10deg)
}
100% {
-webkit-transform:perspective(500px) rotateX(0deg)
}
}
.flip-in-x {
	-webkit-animation: flip-in-x 1s;
	animation: flip-in-x 1.2s
}
@keyframes flip-in-x {
0% {
transform:perspective(500px) rotateX(70deg);
opacity:.2
}
30% {
transform:perspective(500px) rotateX(-50deg)
}
45% {
transform:perspective(500px) rotateX(30deg)
}
65% {
transform:perspective(500px) rotateX(-20deg)
}
85% {
transform:perspective(500px) rotateX(10deg)
}
100% {
transform:perspective(500px) rotateX(0deg)
}
}
@-webkit-keyframes flip-in-x {
0% {
-webkit-transform:perspective(500px) rotateX(70deg);
opacity:.2
}
30% {
-webkit-transform:perspective(500px) rotateX(-50deg)
}
45% {
-webkit-transform:perspective(500px) rotateX(30deg)
}
65% {
-webkit-transform:perspective(500px) rotateX(-20deg)
}
85% {
-webkit-transform:perspective(500px) rotateX(10deg)
}
100% {
-webkit-transform:perspective(500px) rotateX(0deg)
}
}
.flip-in-y {
	-webkit-animation: flip-in-y 1s;
	animation: flip-in-y 1.2s
}
@keyframes flip-in-y {
0% {
transform:perspective(500px) rotateY(70deg);
opacity:.2
}
30% {
transform:perspective(500px) rotateY(-50deg)
}
45% {
transform:perspective(500px) rotateY(30deg)
}
65% {
transform:perspective(500px) rotateY(-20deg)
}
85% {
transform:perspective(500px) rotateY(10deg)
}
100% {
transform:perspective(500px) rotateY(0deg)
}
}
@-webkit-keyframes flip-in-y {
0% {
-webkit-transform:perspective(500px) rotateY(70deg);
opacity:.2
}
30% {
-webkit-transform:perspective(500px) rotateY(-50deg)
}
45% {
-webkit-transform:perspective(500px) rotateY(30deg)
}
65% {
-webkit-transform:perspective(500px) rotateY(-20deg)
}
85% {
-webkit-transform:perspective(500px) rotateY(10deg)
}
100% {
-webkit-transform:perspective(500px) rotateY(0deg)
}
}
.flip-out-x {
	-webkit-animation: flip-out-x 1s;
	animation: flip-out-x 1s
}
@keyframes flip-out-x {
0% {
transform:perspective(500px) rotateX(0deg)
}
50% {
transform:perspective(500px) rotateX(-30deg);
opacity:1
}
100% {
transform:perspective(500px) rotateX(70deg);
opacity:0
}
}
@-webkit-keyframes flip-out-x {
0% {
-webkit-transform:perspective(500px) rotateX(0deg)
}
50% {
-webkit-transform:perspective(500px) rotateX(-30deg);
opacity:1
}
100% {
-webkit-transform:perspective(500px) rotateX(70deg);
opacity:0
}
}
.flip-out-y {
	-webkit-animation: flip-out-y 1s;
	animation: flip-out-y 1s
}
@keyframes flip-out-y {
0% {
transform:perspective(500px) rotateY(0deg)
}
50% {
transform:perspective(500px) rotateY(-30deg);
opacity:1
}
100% {
transform:perspective(500px) rotateY(70deg);
opacity:0
}
}
@-webkit-keyframes flip-out-y {
0% {
-webkit-transform:perspective(500px) rotateY(0deg)
}
50% {
-webkit-transform:perspective(500px) rotateY(-30deg);
opacity:1
}
100% {
-webkit-transform:perspective(500px) rotateY(70deg);
opacity:0
}
}
.rotate {
	-webkit-animation: rotate 1s;
	animation: rotate 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes rotate {
0% {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg)
}
}
.rotate-in {
	-webkit-animation: rotate-in 1s;
	animation: rotate-in 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes rotate-in {
0% {
transform:rotate(-0deg);
opacity:0
}
80% {
opacity:1
}
100% {
transform:rotate(360deg)
}
}
@-webkit-keyframes rotate-in {
0% {
-webkit-transform:rotate(-0deg);
opacity:0
}
80% {
opacity:1
}
100% {
-webkit-transform:rotate(360deg)
}
}
.rotate-out {
	-webkit-animation: rotate-out 1s;
	animation: rotate-out 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes rotate-out {
0% {
transform:rotate(-360deg)
}
20% {
opacity:1
}
100% {
transform:rotate(0deg);
opacity:0
}
}
@-webkit-keyframes rotate-out {
0% {
-webkit-transform:rotate(-360deg)
}
20% {
opacity:1
}
100% {
-webkit-transform:rotate(0deg);
opacity:0
}
}
.rotate-in-x {
	-webkit-animation: rotate-in-x 1s;
	animation: rotate-in-x 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@keyframes rotate-in-x {
0% {
transform:rotateX(180deg);
opacity:0
}
80% {
opacity:1
}
100% {
transform:rotateX(0deg)
}
}
@-webkit-keyframes rotate-in-x {
0% {
-webkit-transform:rotateX(180deg);
opacity:0
}
80% {
opacity:1
}
100% {
-webkit-transform:rotateX(0deg)
}
}
.rotate-out-x {
	-webkit-animation: rotate-out-x 1s;
	animation: rotate-out-x 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@keyframes rotate-out-x {
0% {
transform:rotateX(0deg)
}
20% {
opacity:1
}
100% {
transform:rotateX(180deg);
opacity:0
}
}
@-webkit-keyframes rotate-out-x {
0% {
-webkit-transform:rotateX(0deg)
}
20% {
opacity:1
}
100% {
-webkit-transform:rotateX(180deg);
opacity:0
}
}
.rotate-in-y {
	-webkit-animation: rotate-in-y 1s;
	animation: rotate-in-y 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@keyframes rotate-in-y {
0% {
transform:rotateY(-180deg);
opacity:0
}
100% {
transform:rotateY(0deg);
opacity:1
}
}
@-webkit-keyframes rotate-in-y {
0% {
-webkit-transform:rotateY(0deg);
opacity:0
}
60% {
opacity:1
}
100% {
-webkit-transform:rotateY(360deg)
}
}
.rotate-out-y {
	-webkit-animation: rotate-out-y 1s;
	animation: rotate-out-y 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@keyframes rotate-out-y {
0% {
transform:rotateY(0deg);
opacity:1
}
100% {
transform:rotateY(-180deg);
opacity:0
}
}
@-webkit-keyframes rotate-out-y {
0% {
-webkit-transform:rotateY(0deg);
opacity:1
}
100% {
-webkit-transform:rotateY(-180deg);
opacity:0
}
}
.rotate-in-3d {
	-webkit-animation: rotate-in-3d 1s;
	animation: rotate-in-3d 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@keyframes rotate-in-3d {
0% {
transform:rotate3d(1, 1, 0, 0deg);
opacity:0
}
60% {
opacity:1
}
100% {
transform:rotate3d(1, 1, 0, 360deg)
}
}
@-webkit-keyframes rotate-in-3d {
0% {
-webkit-transform:rotate3d(1, 1, 0, 0deg);
opacity:0
}
60% {
opacity:1
}
100% {
-webkit-transform:rotate3d(1, 1, 0, 360deg)
}
}
.rotate-out-3d {
	-webkit-animation: rotate-out-3d 1s;
	animation: rotate-out-3d 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@keyframes rotate-out-3d {
0% {
transform:rotate3d(1, 1, 0, 360deg)
}
40% {
opacity:1
}
100% {
transform:rotate3d(1, 1, 0, 0deg);
opacity:0
}
}
@-webkit-keyframes rotate-out-3d {
0% {
-webkit-transform:rotate3d(1, 1, 0, 360deg)
}
40% {
opacity:1
}
100% {
-webkit-transform:rotate3d(1, 1, 0, 0deg);
opacity:0
}
}
.rotate-in-scale {
	-webkit-animation: rotate-in-scale 1s;
	animation: rotate-in-scale 1s;
	-webkit-animation-timing-function: easec;
	animation-timing-function: ease-in-out
}
@keyframes rotate-in-scale {
0% {
transform:scale(0) rotate(-540deg);
opacity:0
}
80% {
opacity:1
}
100% {
transform:scale(1) rotate(0deg)
}
}
@-webkit-keyframes rotate-in-scale {
0% {
-webkit-transform:scale(0) rotate(-540deg);
opacity:0
}
80% {
opacity:1
}
100% {
-webkit-transform:scale(1) rotate(0deg)
}
}
.rotate-out-scale {
	-webkit-animation: rotate-out-scale 1s;
	animation: rotate-out-scale 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@keyframes rotate-out-scale {
0% {
transform:scale(1) rotate(0deg)
}
40% {
opacity:1
}
100% {
transform:scale(0) rotate(540deg);
opacity:0
}
}
@-webkit-keyframes rotate-out-scale {
0% {
-webkit-transform:scale(1) rotate(0deg)
}
40% {
opacity:1
}
100% {
-webkit-transform:scale(0) rotate(540deg);
opacity:0
}
}
.turn-in-x {
	-webkit-animation: turn-in-x 1s;
	animation: turn-in-x 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes turn-in-x {
0% {
transform:rotateX(360deg) scale(0);
opacity:0
}
100% {
transform:rotateX(0deg) scale(1);
opacity:1
}
}
@-webkit-keyframes turn-in-x {
0% {
-webkit-transform:rotateX(360deg) scale(0);
opacity:0
}
100% {
-webkit-transform:rotateX(0deg) scale(1);
opacity:1
}
}
.turn-out-x {
	-webkit-animation: turn-out-x 1s;
	animation: turn-out-x 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes turn-out-x {
0% {
transform:rotateX(0deg) scale(1);
opacity:1
}
80% {
opacity:0
}
100% {
transform:rotateX(360deg) scale(0)
}
}
@-webkit-keyframes turn-out-x {
0% {
-webkit-transform:rotateX(0deg) scale(1);
opacity:1
}
80% {
opacity:0
}
100% {
-webkit-transform:rotateX(360deg) scale(0)
}
}
.turn-in-y {
	-webkit-animation: turn-in-y 1s;
	animation: turn-in-y 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes turn-in-y {
0% {
transform:rotateY(0deg) scale(0);
opacity:0
}
100% {
transform:rotateY(360deg) scale(1);
opacity:1
}
}
@-webkit-keyframes turn-in-y {
0% {
-webkit-transform:rotateY(0deg) scale(0);
opacity:0
}
100% {
-webkit-transform:rotateX(360deg) scale(1);
opacity:1
}
}
.turn-out-y {
	-webkit-animation: turn-out-y 1s;
	animation: turn-out-y 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes turn-out-y {
0% {
transform:rotateY(0deg) scale(1);
opacity:1
}
80% {
opacity:0
}
100% {
transform:rotateY(360deg) scale(0)
}
}
@-webkit-keyframes turn-out-y {
0% {
-webkit-transform:rotateY(0deg) scale(1);
opacity:1
}
80% {
opacity:0
}
100% {
-webkit-transform:rotateY(360deg) scale(0)
}
}
.back-in-right {
	-webkit-animation: back-in-right 1s;
	animation: back-in-right 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes back-in-right {
0% {
transform:translateX(-2000px) scale(.7);
opacity:.7
}
80% {
transform:translateX(0px) scale(.7);
opacity:.7
}
100% {
transform:scale(1);
opacity:1
}
}
@-webkit-keyframes back-in-right {
0% {
-webkit-transform:translateX(-2000px) scale(.7);
opacity:.7
}
80% {
-webkit-transform:translateX(0px) scale(.7);
opacity:.7
}
100% {
-webkit-transform:scale(1);
opacity:1
}
}
.back-out-right {
	-webkit-animation: back-out-right 1s;
	animation: back-out-right 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes back-out-right {
0% {
transform:scale(1);
opacity:1
}
20% {
transform:translateX(0px) scale(.7);
opacity:.7
}
100% {
transform:translateX(2000px) scale(.7);
opacity:.7
}
}
@-webkit-keyframes back-out-right {
0% {
-webkit-transform:scale(1);
opacity:1
}
20% {
-webkit-transform:translateX(0px) scale(.7);
opacity:.7
}
100% {
-webkit-transform:translateX(2000px) scale(.7);
opacity:.7
}
}
.back-in-left {
	-webkit-animation: back-in-left 1s;
	animation: back-in-left 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes back-in-left {
0% {
transform:translateX(2000px) scale(.7);
opacity:.7
}
80% {
transform:translateX(0px) scale(.7);
opacity:.7
}
100% {
transform:scale(1);
opacity:1
}
}
@-webkit-keyframes back-in-left {
0% {
-webkit-transform:translateX(2000px) scale(.7);
opacity:.7
}
80% {
-webkit-transform:translateX(0px) scale(.7);
opacity:.7
}
100% {
-webkit-transform:scale(1);
opacity:1
}
}
.back-out-left {
	-webkit-animation: back-out-left 1s;
	animation: back-out-left 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes back-out-left {
0% {
transform:scale(1);
opacity:1
}
20% {
transform:translateX(0px) scale(.7);
opacity:.7
}
100% {
transform:translateX(-2000px) scale(.7);
opacity:.7
}
}
@-webkit-keyframes back-out-left {
0% {
-webkit-transform:scale(1);
opacity:1
}
20% {
-webkit-transform:translateX(0px) scale(.7);
opacity:.7
}
100% {
-webkit-transform:translateX(-2000px) scale(.7);
opacity:.7
}
}
.back-in-up {
	-webkit-animation: back-in-up 1s;
	animation: back-in-up 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes back-in-up {
0% {
transform:translateY(1200px) scale(.7);
opacity:.7
}
80% {
transform:translateY(0px) scale(.7);
opacity:.7
}
100% {
transform:scale(1);
opacity:1
}
}
@-webkit-keyframes back-in-up {
0% {
-webkit-transform:translateY(1200px) scale(.7);
opacity:.7
}
80% {
-webkit-transform:translateY(0px) scale(.7);
opacity:.7
}
100% {
-webkit-transform:scale(1);
opacity:1
}
}
.back-out-up {
	-webkit-animation: back-out-up 1s;
	animation: back-out-up 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes back-out-up {
0% {
transform:scale(1);
opacity:1
}
20% {
transform:translateY(0px) scale(.7);
opacity:.7
}
100% {
transform:translateY(-1200px) scale(.7);
opacity:.7
}
}
@-webkit-keyframes back-out-up {
0% {
-webkit-transform:scale(1);
opacity:1
}
20% {
-webkit-transform:translateY(0px) scale(.7);
opacity:.7
}
100% {
-webkit-transform:translateY(-1200px) scale(.7);
opacity:.7
}
}
.back-in-down {
	-webkit-animation: back-in-down 1s;
	animation: back-in-down 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes back-in-down {
0% {
transform:translateY(-1200px) scale(.7);
opacity:.7
}
80% {
transform:translateY(0px) scale(.7);
opacity:.7
}
100% {
transform:scale(1);
opacity:1
}
}
@-webkit-keyframes back-in-down {
0% {
-webkit-transform:translateY(-2000px) scale(.7);
opacity:.7
}
80% {
-webkit-transform:translateY(0px) scale(.7);
opacity:.7
}
100% {
-webkit-transform:scale(1);
opacity:1
}
}
.back-out-down {
	-webkit-animation: back-out-down 1s;
	animation: back-out-down 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes back-out-down {
0% {
transform:scale(1);
opacity:1
}
20% {
transform:translateY(0px) scale(.7);
opacity:.7
}
100% {
transform:translateY(1200px) scale(.7);
opacity:.7
}
}
@-webkit-keyframes back-out-down {
0% {
-webkit-transform:scale(1);
opacity:1
}
20% {
-webkit-transform:translateY(0px) scale(.7);
opacity:.7
}
100% {
-webkit-transform:translateY(1200px) scale(.7);
opacity:.7
}
}
.push-in-up {
	transform-origin: 50% 100% 0;
	-webkit-animation: push-in-up 1s;
	animation: push-in-up 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes push-in-up {
0% {
transform:rotateX(90deg);
opacity:0
}
100% {
transform:none
}
}
@-webkit-keyframes push-in-up {
0% {
-webkit-transform:rotateX(90deg);
opacity:0
}
100% {
-webkit-transform:none
}
}
.push-out-down {
	transform-origin: 50% 100% 0;
	-webkit-animation: push-out-down 1s;
	animation: push-out-down 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes push-out-down {
0% {
transform:none
}
100% {
transform:rotateX(90deg);
opacity:0
}
}
@-webkit-keyframes push-out-down {
0% {
-webkit-transform:none
}
100% {
-webkit-transform:rotateX(90deg);
opacity:0
}
}
.push-in-down {
	-webkit-transform-origin: 50% 0 0;
	transform-origin: 50% 0 0;
	-webkit-animation: push-in-down 1s;
	animation: push-in-down 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes push-in-down {
0% {
transform:rotateX(-90deg);
opacity:0
}
100% {
transform:none
}
}
@-webkit-keyframes push-in-down {
0% {
-webkit-transform:rotateX(-90deg);
opacity:0
}
100% {
-webkit-transform:none
}
}
.push-out-up {
	-webkit-transform-origin: 50% 0 0;
	transform-origin: 50% 0 0;
	-webkit-animation: push-out-up 1s;
	animation: push-out-up 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes push-out-up {
0% {
transform:none
}
100% {
transform:rotateX(-90deg);
opacity:0
}
}
@-webkit-keyframes push-out-up {
0% {
-webkit-transform:none
}
100% {
-webkit-transform:rotateX(-90deg);
opacity:0
}
}
.push-in-right {
	-webkit-transform-origin: 0 50% 0;
	transform-origin: 0 50% 0;
	-webkit-animation: push-in-right 1s;
	animation: push-in-right 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	transform-style: preserve-3d
}
@keyframes push-in-right {
0% {
transform:rotateY(90deg);
opacity:0
}
100% {
transform:none
}
}
@-webkit-keyframes push-in-right {
0% {
-webkit-transform:rotateY(90deg);
opacity:0
}
100% {
-webkit-transform:none
}
}
.push-out-left {
	-webkit-transform-origin: 0 50% 0;
	transform-origin: 0 50% 0;
	-webkit-animation: push-out-left 1s;
	animation: push-out-left 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes push-out-left {
0% {
transform:none
}
100% {
transform:rotateY(90deg);
opacity:0
}
}
@-webkit-keyframes push-out-left {
0% {
-webkit-transform:none
}
100% {
-webkit-transform:rotateY(90deg);
opacity:0
}
}
.push-in-left {
	-webkit-transform-origin: 100% 50% 0;
	transform-origin: 100% 50% 0;
	-webkit-animation: push-in-left 1s;
	animation: push-in-left 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	transform-style: preserve-3d
}
@keyframes push-in-left {
0% {
transform:rotateY(-90deg);
opacity:0
}
100% {
transform:none
}
}
@-webkit-keyframes push-in-left {
0% {
-webkit-transform:rotateY(-90deg);
opacity:0
}
100% {
-webkit-transform:none
}
}
.push-out-right {
	-webkit-transform-origin: 100% 50% 0;
	transform-origin: 100% 50% 0;
	-webkit-animation: push-out-right 1s;
	animation: push-out-right 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	transform-style: preserve-3d
}
@keyframes push-out-right {
0% {
transform:none
}
100% {
transform:rotateY(-90deg);
opacity:0
}
}
@-webkit-keyframes push-out-right {
0% {
-webkit-transform:none
}
100% {
-webkit-transform:rotateY(-90deg);
opacity:0
}
}
.clip-x-in {
	-webkit-animation: clip-x-in 1s;
	animation: clip-x-in 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes clip-x-in {
0% {
transform:scale(1, 0)
}
100% {
transform:none
}
}
@-webkit-keyframes clip-x-in {
0% {
-webkit-transform:scale(1, 0)
}
100% {
-webkit-transform:none
}
}
.clip-y-in {
	-webkit-animation: clip-y-in 1s;
	animation: clip-y-in 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes clip-y-in {
0% {
transform:scale(0, 1)
}
100% {
transform:none
}
}
@-webkit-keyframes clip-y-in {
0% {
-webkit-transform:scale(0, 1)
}
100% {
-webkit-transform:none
}
}
.clip-xy-in {
	-webkit-animation: clip-xy-in 1s;
	animation: clip-xy-in 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes clip-xy-in {
0% {
transform:scale(0, .5)
}
50% {
transform:scale(1, .5)
}
100% {
transform:none
}
}
@-webkit-keyframes clip-xy-in {
0% {
-webkit-transform:scale(0, .5)
}
50% {
-webkit-transform:scale(1, .5)
}
100% {
-webkit-transform:none
}
}
.clip-x-out {
	-webkit-animation: clip-x-out 1s;
	animation: clip-x-out 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes clip-x-out {
0% {
transform:none
}
100% {
transform:scale(1, 0)
}
}
@-webkit-keyframes clip-x-out {
0% {
-webkit-transform:none
}
100% {
-webkit-transform:scale(1, 0)
}
}
.clip-y-out {
	-webkit-animation: clip-y-out 1s;
	animation: clip-y-out 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes clip-y-out {
0% {
transform:none
}
100% {
transform:scale(0, 1)
}
}
@-webkit-keyframes clip-y-out {
0% {
-webkit-transform:none
}
100% {
-webkit-transform:scale(0, 1)
}
}
.clip-xy-out {
	-webkit-animation: clip-xy-out 1s;
	animation: clip-xy-out 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes clip-xy-out {
0% {
transform:none
}
50% {
transform:scale(1, .5)
}
100% {
transform:scale(0, .5)
}
}
@-webkit-keyframes clip-xy-out {
0% {
-webkit-transform:none
}
50% {
-webkit-transform:scale(1, .5)
}
100% {
-webkit-transform:scale(0, .5)
}
}
.fanfare {
	-webkit-animation: fanfare 1s;
	animation: fanfare 1.2s
}
@keyframes fanfare {
0%, 100% {
transform:scale(1)
}
30% {
transform:scale(.8) rotateZ(5deg)
}
40%, 60%, 80% {
transform:scale(1.15) rotateZ(-5deg)
}
50%, 70%, 90% {
transform:scale(1.15) rotateZ(5deg)
}
}
@-webkit-keyframes fanfare {
0%, 100% {
-webkit-transform:scale(1)
}
30% {
-webkit-transform:scale(.8) rotateZ(5deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.15) rotateZ(-5deg)
}
50%, 70%, 90% {
-webkit-transform:scale(1.15) rotateZ(5deg)
}
}
.float {
	-webkit-animation: float 1.6s;
	animation: float 1.6s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}
@keyframes float {
0%, 100% {
transform:translateY(0)
}
50% {
transform:translateY(-20px)
}
}
@-webkit-keyframes float {
0%, 100% {
-webkit-transform:translateY(0)
}
50% {
-webkit-transform:translateY(-20px)
}
}
.orbit {
	-webkit-animation: orbit 3s;
	animation: orbit 3s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear
}
@keyframes orbit {
0% {
transform:rotate(0deg) translateX(20px) rotate(0deg)
}
100% {
transform:rotate(360deg) translateX(20px) rotate(-360deg)
}
}
@-webkit-keyframes orbit {
0% {
-webkit-transform:rotate(0deg) translateX(20px) rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg) translateX(20px) rotate(-360deg)
}
}
.spiral {
	-webkit-animation: spiral 1s;
	animation: spiral 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes spiral {
0% {
transform:rotateY(-360deg) translateY(-150%)
}
100% {
transform:rotateY(0) translateY(0px)
}
}
@-webkit-keyframes spiral {
0% {
-webkit-transform:rotateY(-360deg) translateY(-150%)
}
100% {
-webkit-transform:rotateY(0) translateY(0px)
}
}
.bounce {
	-webkit-animation: bounce 1s;
	animation: bounce 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes bounce {
0%, 30%, 55%, 70%, 80%, 90%, 100% {
transform:translateY(0px)
}
25% {
transform:translateY(-50px)
}
45% {
transform:translateY(-25px)
}
63% {
transform:translateY(-15px)
}
75% {
transform:translateY(-7px)
}
85% {
transform:translateY(-4px)
}
95% {
transform:translateY(-2px)
}
}
@-webkit-keyframes bounce {
0%, 30%, 55%, 70%, 80%, 90%, 100% {
-webkit-transform:translateY(0px)
}
25% {
-webkit-transform:translateY(-50px)
}
45% {
-webkit-transform:translateY(-25px)
}
63% {
-webkit-transform:translateY(-15px)
}
75% {
-webkit-transform:translateY(-7px)
}
85% {
-webkit-transform:translateY(-4px)
}
95% {
-webkit-transform:translateY(-2px)
}
}
.vibro {
	-webkit-animation: vibro .5s;
	animation: vibro .5s
}
@keyframes vibro {
0%, 100% {
transform:translateX(0px)
}
10%, 30%, 50%, 70%, 90% {
transform:translateX(5px)
}
20%, 40%, 60%, 80% {
transform:translateX(-5px)
}
}
@-webkit-keyframes vibro {
0%, 100% {
-webkit-transform:translateX(0px)
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform:translateX(5px)
}
20%, 40%, 60%, 80% {
-webkit-transform:translateX(-5px)
}
}
.heartbeat {
	-webkit-animation: heartbeat 8s;
	animation: heartbeat 8s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}
@keyframes heartbeat {
0%, 20%, 40%, 60%, 80%, 100% {
transform:scale(1)
}
10%, 30%, 50%, 70%, 90% {
transform:scale(1.15)
}
}
@-webkit-keyframes heartbeat {
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-transform:scale(1)
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform:scale(1.15)
}
}
.shake {
	-webkit-animation: shake 1s;
	animation: shake 1s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
@keyframes shake {
0%, 100% {
transform:translateX(0px)
}
12.5%, 37.5%, 62.5%, 87.5% {
transform:translateX(20px)
}
25%, 50%, 75% {
transform:translateX(-20px)
}
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform:translateX(0px)
}
12.5%, 37.5%, 62.5%, 87.5% {
-webkit-transform:translateX(20px)
}
25%, 50%, 75% {
-webkit-transform:translateX(-20px)
}
}
.puff {
	-webkit-animation: puff 1s;
	animation: puff 1s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}
@keyframes puff {
0% {
transform:none
}
100% {
transform:scale(1.2);
opacity:0
}
}
@-webkit-keyframes puff {
0% {
-webkit-transform:none
}
100% {
-webkit-transform:scale(1.2);
opacity:0
}
}
.scale-in {
	-webkit-animation: scale-in 1s;
	animation: scale-in 1.2s
}
@keyframes scale-in {
0% {
transform:scale(0);
opacity:0
}
100% {
transform:scale(1);
opacity:1
}
}
@-webkit-keyframes scale-in {
0% {
-webkit-transform:scale(0);
opacity:0
}
100% {
-webkit-transform:scale(1);
opacity:1
}
}
.scale-out {
	-webkit-animation: scale-out 1s;
	animation: scale-out 1s
}
@keyframes scale-out {
0% {
transform:none;
opacity:1
}
80% {
opacity:0
}
100% {
transform:scale(0);
opacity:0
}
}
@-webkit-keyframes scale-out {
0% {
-webkit-transform:none;
opacity:1
}
50% {
opacity:.7
}
100% {
-webkit-transform:scale(0);
opacity:0
}
}
.stretch {
	-webkit-animation: stretch 1s;
	animation: stretch 1s
}
@keyframes stretch {
0%, 100% {
transform:scale3d(1, 1, 1)
}
30% {
transform:scale3d(1.3, .7, 1)
}
40% {
transform:scale3d(.7, 1.3, 1)
}
60% {
transform:scale3d(1.2, .8, 1)
}
75% {
transform:scale3d(.8, 1.2, 1)
}
90% {
transform:scale3d(1.05, .95, 1)
}
}
@-webkit-keyframes stretch {
0%, 100% {
-webkit-transform:scale3d(1, 1, 1)
}
30% {
-webkit-transform:scale3d(1.3, .7, 1)
}
40% {
-webkit-transform:scale3d(.7, 1.3, 1)
}
60% {
-webkit-transform:scale3d(1.2, .8, 1)
}
75% {
-webkit-transform:scale3d(.8, 1.2, 1)
}
90% {
-webkit-transform:scale3d(1.05, .95, 1)
}
}
.pulse {
	-webkit-animation: pulse 1s;
	animation: pulse 1s
}
@keyframes pulse {
0% {
transform:none
}
50% {
transform:scale(1.15)
}
100% {
transform:scale(1)
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform:none
}
50% {
-webkit-transform:scale(1.15)
}
100% {
-webkit-transform:scale(1)
}
}
.spin {
	-webkit-transform-origin: 50% 50% -200px;
	transform-origin: 50% 50% -200px;
	-webkit-animation: spin 1s;
	animation: spin 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}
@keyframes spin {
0% {
transform:rotateY(0deg)
}
100% {
transform:rotateY(360deg)
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform:rotateY(0deg)
}
100% {
-webkit-transform:rotateY(360deg)
}
}
.spin-y {
	-webkit-transform-origin: left top;
	transform-origin: left top;
	-webkit-animation: spin-y 1s;
	animation: spin-y 1s
}
@keyframes spin-y {
0% {
transform:rotateY(0deg)
}
100% {
transform:rotateY(360deg)
}
}
@-webkit-keyframes spin-y {
0% {
-webkit-transform:rotateY(0deg)
}
100% {
-webkit-transform:rotateY(360deg)
}
}
.whirl {
	-webkit-animation: whirl 2s;
	animation: whirl 2s
}
@keyframes whirl {
0% {
transform:translateY(1000px) rotateY(0deg)
}
80% {
transform:translateY(-100%) rotateY(720deg)
}
100% {
transform:translateY(0px)
}
}
@-webkit-keyframes whirl {
0% {
-webkit-transform:translateY(1000px) rotateY(0deg)
}
80% {
-webkit-transform:translateY(-100%) rotateY(720deg)
}
100% {
-webkit-transform:translateY(0px)
}
}
.wabble {
	-webkit-transform-origin: 50% 0 0;
	transform-origin: 50% 0 0;
	-webkit-animation: wabble 1s;
	animation: wabble 1.2s
}
@keyframes wabble {
0%, 100% {
transform:rotateZ(0deg)
}
12.5% {
transform:rotateZ(-20deg)
}
25% {
transform:rotateZ(18deg)
}
37.5% {
transform:rotateZ(-15deg)
}
50% {
transform:rotateZ(13deg)
}
62.5% {
transform:rotateZ(-10deg)
}
75% {
transform:rotateZ(7deg)
}
87.5% {
transform:rotateZ(-3deg)
}
}
@-webkit-keyframes wabble {
0%, 100% {
-webkit-transform:rotateZ(0deg)
}
12.5% {
-webkit-transform:rotateZ(-20deg)
}
25% {
-webkit-transform:rotateZ(18deg)
}
37.5% {
-webkit-transform:rotateZ(-15deg)
}
50% {
-webkit-transform:rotateZ(13deg)
}
62.5% {
-webkit-transform:rotateZ(-10deg)
}
75% {
-webkit-transform:rotateZ(7deg)
}
87.5% {
-webkit-transform:rotateZ(-3deg)
}
}