@charset "UTF-8";
/* Swing Animation */

.swing{
-webkit-perspective: 1500;
-moz-perspective: 1500;
-o-perspective: 1500;
perspective: 1500;
display:block;
text-align:center;
width:300px;
margin:0 auto;

}

.hover {

position: relative; z-index:1;
-webkit-transition:all 250ms ease;
-moz-transition:all 250ms ease;
-o-transition:all 250ms ease;
transition:all 250ms ease;
display: block; 
width:300px;
color: #fff; 
text-decoration: none;
text-align:center;
font-size:30px;

}

.hover:hover{
-webkit-transform-origin: top;
-moz-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;

-webkit-animation: balance 3s ease-in-out 110ms 1 alternate;
-moz-animation: balance 3s ease-in-out 110ms 1 alternate;
-ms-animation: balance 3s ease-in-out 110ms 1 alternate;
-o-animation: balance 3s ease-in-out 110ms 1 alternate;
animation: balance 3s ease-in-out 110ms 1 alternate;
}

 

@keyframes "balance" {
0% {
}
15% {
-webkit-transform: rotateX(-50deg);
-moz-transform: rotateX(-50deg);
-o-transform: rotateX(-50deg);
-ms-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
-webkit-transform: rotateX(50deg);
-moz-transform: rotateX(50deg);
-o-transform: rotateX(50deg);
-ms-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
-webkit-transform: rotateX(30deg);
-moz-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
100% {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-moz-keyframes balance {
0% {
}
15% {

-moz-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
-moz-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {

-moz-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {

-moz-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {

-moz-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
100% {

-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-webkit-keyframes "balance" {
0% {

}
15% {

-webkit-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {

-webkit-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {

-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-ms-keyframes "balance" {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
-ms-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-ms-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {

-ms-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {

-ms-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {

-ms-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
100% {

-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}

@-o-keyframes "balance" {
0% {
margin-top: 0;
}
15% {
-o-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-o-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {

-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
100% {

-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}

}