@charset "utf-8";

.he-wrap {
zoom: 1;
display: inline-block;
position: relative;
*display: inline;
position: relative;
}
.he-view, .he-zoom {
visibility: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow: hidden;
}
.he-zoom img {
top: 0;
left: 0;
position: absolute;
}
.he-zoomstate {
background: #c00;
box-shadow: -1px -1px 1px rgba(204,0,0,.3);
line-height: 16px;
border-radius: 3px 0 0 0;
right: 0;
color: #fff;
bottom: 0;
padding: 0 4px;
position: absolute;
font-size: 12px;
}
.he-view-show { visibility: visible }
.he-sliders { overflow: hidden }
.he-sliders img { display: none }
.he-sliders img:first-child {
*zoom: 1;
display: inline-block;
*display: inline;
}
.he-pre, .he-next {
margin-top: -18px;
background: url(//i0.wp.com/www.radiolakalle.pe/wp-content/themes/kalle/css/nav.png) no-repeat top left;
top: 50%;
left: 0;
width: 61px;
height: 35px;
cursor: pointer;
position: absolute;
}
.he-next {
background-position: top right;
left: auto;
right: 0;
}
.a0, .a1, .a2, .a3, .a4, .a5, .a6, .a7 {
animation-duration: .6s;
animation-fill-mode: both;
-o-animation-duration: .6s;
-o-animation-fill-mode: both;
-ms-animation-duration: .6s;
-ms-animation-fill-mode: both;
-moz-animation-duration: .6s;
-moz-animation-fill-mode: both;
-webkit-animation-duration: .6s;
-webkit-animation-fill-mode: both;
}
.a1 {
animation-delay: .2s;
-o-animation-delay: .2s;
-moz-animation-delay: .2s;
-webkit-animation-delay: .2s;
}
.a2 {
animation-delay: .4s;
-o-animation-delay: .4s;
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
.a3 {
animation-delay: .6s;
-o-animation-delay: .6s;
-moz-animation-delay: .6s;
-webkit-animation-delay: .6s;
}
.a4 {
animation-delay: .8s;
-o-animation-delay: .8s;
-moz-animation-delay: .8s;
-webkit-animation-delay: .8s;
}
.a5 {
animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.a6 {
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
.a7 {
animation-delay: 1.4s;
-o-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
}
@-webkit-keyframes flipInLeft { 
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0.5;
}
60% { -webkit-transform: perspective(400px) rotateY(-10deg) }
80% { -webkit-transform: perspective(400px) rotateY(5deg) }
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInLeft { 
0% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0.5;
}
60% { -moz-transform: perspective(400px) rotateY(-10deg) }
80% { -moz-transform: perspective(400px) rotateY(5deg) }
100% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-o-keyframes flipInLeft { 
0% {
-o-transform: perspective(400px) rotateY(90deg);
opacity: 0.5;
}
60% { -o-transform: perspective(400px) rotateY(-10deg) }
80% { -o-transform: perspective(400px) rotateY(5deg) }
100% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInLeft { 
0% {
opacity: 0.5;
transform: perspective(400px) rotateY(90deg);
}
60% { transform: perspective(400px) rotateY(-10deg) }
80% { transform: perspective(400px) rotateY(5deg) }
100% {
opacity: 1;
transform: perspective(400px) rotateY(0deg);
}
}
.flipInLeft {
animation-name: flipInLeft;
transform-style: preserve-3d;
transform-origin: 0 50%;
-o-animation-name: flipInLeft;
-o-transform-style: preserve-3d;
-moz-animation-name: flipInLeft;
-o-transform-origin: 0 50%;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0 50%;
-webkit-animation-name: flipInLeft;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 50%;
}
@-webkit-keyframes flipInRight { 
0% {
-webkit-transform: perspective(400px) rotateY(-90deg);
opacity: 0.5;
}
60% { -webkit-transform: perspective(400px) rotateY(10deg) }
80% { -webkit-transform: perspective(400px) rotateY(-5deg) }
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInRight { 
0% {
-moz-transform: perspective(400px) rotateY(-90deg);
opacity: 0.5;
}
60% { -moz-transform: perspective(400px) rotateY(10deg) }
80% { -moz-transform: perspective(400px) rotateY(-5deg) }
100% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-o-keyframes flipInRight { 
0% {
-o-transform: perspective(400px) rotateY(-90deg);
opacity: 0.5;
}
60% { -o-transform: perspective(400px) rotateY(10deg) }
80% { -o-transform: perspective(400px) rotateY(-5deg) }
100% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInRight { 
0% {
opacity: 0.5;
transform: perspective(400px) rotateY(-90deg);
}
60% { transform: perspective(400px) rotateY(10deg) }
80% { transform: perspective(400px) rotateY(-5deg) }
100% {
opacity: 1;
transform: perspective(400px) rotateY(0deg);
}
}
.flipInRight {
animation-name: flipInRight;
transform-style: preserve-3d;
transform-origin: 100% 50%;
-o-animation-name: flipInRight;
-o-transform-style: preserve-3d;
-moz-animation-name: flipInRight;
-o-transform-origin: 100% 50%;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 100% 50%;
-webkit-animation-name: flipInRight;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 50%;
}
@-webkit-keyframes flipInDown { 
0% {
-webkit-transform: perspective(400px) rotateX(-90deg);
opacity: 0.5;
}
60% { -webkit-transform: perspective(400px) rotateX(10deg) }
80% { -webkit-transform: perspective(400px) rotateX(-5deg) }
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInDown { 
0% {
-moz-transform: perspective(400px) rotateX(-90deg);
opacity: 0.5;
}
60% { -moz-transform: perspective(400px) rotateX(10deg) }
80% { -moz-transform: perspective(400px) rotateX(-5deg) }
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInDown { 
0% {
-o-transform: perspective(400px) rotateX(-90deg);
opacity: 0.5;
}
60% { -o-transform: perspective(400px) rotateX(10deg) }
80% { -o-transform: perspective(400px) rotateX(-5deg) }
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInDown { 
0% {
opacity: 0.5;
transform: perspective(400px) rotateX(-90deg);
}
60% { transform: perspective(400px) rotateX(10deg) }
80% { transform: perspective(400px) rotateX(-5deg) }
100% {
opacity: 1;
transform: perspective(400px) rotateX(0deg);
}
}
.flipInDown {
animation-name: flipInDown;
transform-style: preserve-3d;
transform-origin: 50% 0%;
-o-animation-name: flipInDown;
-o-transform-style: preserve-3d;
-moz-animation-name: flipInDown;
-o-transform-origin: 50% 0%;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 0%;
-webkit-animation-name: flipInDown;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 0%;
}
@-webkit-keyframes flipInUp { 
0% {
-webkit-transform: perspective(300px) rotateX(90deg);
opacity: 0.5;
}
60% { -webkit-transform: perspective(300px) rotateX(-10deg) }
80% { -webkit-transform: perspective(300px) rotateX(5deg) }
100% {
-webkit-transform: perspective(300px) rotateX(0deg);
opacity: 1;
}
}
@-webkit-keyframes flipInUp { 
0% {
-webkit-transform: perspective(300px) rotateX(90deg);
opacity: 0.5;
}
60% { -webkit-transform: perspective(300px) rotateX(-10deg) }
80% { -webkit-transform: perspective(300px) rotateX(5deg) }
100% {
-webkit-transform: perspective(300px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInUp { 
0% {
-moz-transform: perspective(300px) rotateX(90deg);
opacity: 0.5;
}
60% { -moz-transform: perspective(300px) rotateX(-10deg) }
80% { -moz-transform: perspective(300px) rotateX(5deg) }
100% {
-moz-transform: perspective(300px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInUp { 
0% {
-o-transform: perspective(300px) rotateX(90deg);
opacity: 0.5;
}
60% { -o-transform: perspective(300px) rotateX(-10deg) }
80% { -o-transform: perspective(300px) rotateX(5deg) }
100% {
-o-transform: perspective(300px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInUp { 
0% {
opacity: 0.5;
transform: perspective(300px) rotateX(90deg);
}
60% { transform: perspective(300px) rotateX(-10deg) }
80% { transform: perspective(300px) rotateX(5deg) }
100% {
opacity: 1;
transform: perspective(300px) rotateX(0deg);
}
}
.flipInUp {
animation-name: flipInUp;
transform-style: preserve-3d;
transform-origin: 50% 100%;
-o-animation-name: flipInUp;
-o-transform-style: preserve-3d;
-moz-animation-name: flipInUp;
-o-transform-origin: 50% 100%;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 100%;
-webkit-animation-name: flipInUp;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 100%;
}
.flipInV, flipInH {
animation-name: flipInDown;
transform-style: preserve-3d;
transform-origin: 50% 50%;
-o-animation-name: flipInDown;
-o-transform-style: preserve-3d;
-moz-animation-name: flipInDown;
-o-transform-origin: 50% 50%;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 50%;
-webkit-animation-name: flipInDown;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.flipInH {
animation-name: flipInLeft;
-o-animation-name: flipInLeft;
-moz-animation-name: flipInLeft;
-webkit-animation-name: flipInLeft;
}
@-webkit-keyframes zoomIn { 
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
50% {
-webkit-transform: scale(1.05);
opacity: 1;
}
70% { -webkit-transform: scale(.9) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes zoomIn { 
0% {
-moz-transform: scale(.3);
opacity: 0;
}
50% {
-moz-transform: scale(1.05);
opacity: 1;
}
70% { -moz-transform: scale(.9) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes zoomIn { 
0% {
-o-transform: scale(.3);
opacity: 0;
}
50% {
-o-transform: scale(1.05);
opacity: 1;
}
70% { -o-transform: scale(.9) }
100% { -o-transform: scale(1) }
}
@keyframes zoomIn { 
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% { transform: scale(.9) }
100% { transform: scale(1) }
}
.zoomIn {
animation-name: zoomIn;
-o-animation-name: zoomIn;
-moz-animation-name: zoomIn;
-webkit-animation-name: zoomIn;
}
@-webkit-keyframes zoomInLeft { 
0% {
-webkit-transform: scale(.4) translateX(-1000px);
opacity: .3;
}
70% {
-webkit-transform: scale(1.05);
opacity: 1;
}
90% { -webkit-transform: scale(.95) translateX(0px) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes zoomInLeft { 
0% {
-moz-transform: scale(.4) translateX(-1000px);
opacity: .3;
}
70% {
-moz-transform: scale(1.05);
opacity: 1;
}
90% { -moz-transform: scale(.95) translateX(0px) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes zoomInLeft { 
0% {
-o-transform: scale(.4) translateX(-1000px);
opacity: .3;
}
70% {
-o-transform: scale(1.05);
opacity: 1;
}
90% { -o-transform: scale(.95) translateX(0px) }
100% { -o-transform: scale(1) }
}
@keyframes zoomInLeft { 
0% {
opacity: .3;
transform: scale(.4) translateX(-1000px);
}
70% {
opacity: 1;
transform: scale(1.05);
}
90% { transform: scale(.95) translateX(0px) }
100% { transform: scale(1) }
}
.zoomInLeft {
animation-name: zoomInLeft;
-o-animation-name: zoomInLeft;
-moz-animation-name: zoomInLeft;
-webkit-animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight { 
0% {
-webkit-transform: scale(.4) translateX(1000px);
opacity: .3;
}
70% {
-webkit-transform: scale(1.05);
opacity: 1;
}
90% { -webkit-transform: scale(.95) translateX(0px) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes zoomInRight { 
0% {
-moz-transform: scale(.4) translateX(1000px);
opacity: .3;
}
70% {
-moz-transform: scale(1.05);
opacity: 1;
}
90% { -moz-transform: scale(.95) translateX(0px) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes zoomInRight { 
0% {
-o-transform: scale(.4) translateX(1000px);
opacity: .3;
}
70% {
-o-transform: scale(1.05);
opacity: 1;
}
90% { -o-transform: scale(.95) translateX(0px) }
100% { -o-transform: scale(1) }
}
@keyframes zoomInRight { 
0% {
opacity: .3;
transform: scale(.4) translateX(1000px);
}
70% {
opacity: 1;
transform: scale(1.05);
}
90% { transform: scale(.95) translateX(0px) }
100% { transform: scale(1) }
}
.zoomInRight {
animation-name: zoomInRight;
-o-animation-name: zoomInRight;
-moz-animation-name: zoomInRight;
-webkit-animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp { 
0% {
-webkit-transform: scale(.4) translateY(-1000px);
opacity: .3;
}
70% {
-webkit-transform: scale(1.05);
opacity: 1;
}
90% { -webkit-transform: scale(.95) translateY(0px) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes zoomInUp { 
0% {
-moz-transform: scale(.4) translateY(-1000px);
opacity: .3;
}
70% {
-moz-transform: scale(1.05);
opacity: 1;
}
90% { -moz-transform: scale(.95) translateY(0px) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes zoomInUp { 
0% {
-o-transform: scale(.4) translateY(-1000px);
opacity: .3;
}
70% {
-o-transform: scale(1.05);
opacity: 1;
}
90% { -o-transform: scale(.95) translateY(0px) }
100% { -o-transform: scale(1) }
}
@keyframes zoomInUp { 
0% {
opacity: .3;
transform: scale(.4) translateY(-1000px);
}
70% {
opacity: 1;
transform: scale(1.05);
}
90% { transform: scale(.95) translateY(0px) }
100% { transform: scale(1) }
}
.zoomInUp {
animation-name: zoomInUp;
-o-animation-name: zoomInUp;
-moz-animation-name: zoomInUp;
-webkit-animation-name: zoomInUp;
}
@-webkit-keyframes zoomInDown { 
0% {
-webkit-transform: scale(.4) translateY(1000px);
opacity: .3;
}
70% {
-webkit-transform: scale(1.05);
opacity: 1;
}
90% { -webkit-transform: scale(.95) translateY(0px) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes zoomInDown { 
0% {
-moz-transform: scale(.4) translateY(1000px);
opacity: .3;
}
70% {
-moz-transform: scale(1.05);
opacity: 1;
}
90% { -moz-transform: scale(.95) translateY(0px) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes zoomInDown { 
0% {
-o-transform: scale(.4) translateY(1000px);
opacity: .3;
}
70% {
-o-transform: scale(1.05);
opacity: 1;
}
90% { -o-transform: scale(.95) translateY(0px) }
100% { -o-transform: scale(1) }
}
@keyframes zoomInDown { 
0% {
opacity: .3;
transform: scale(.4) translateY(1000px);
}
70% {
opacity: 1;
transform: scale(1.05);
}
90% { transform: scale(.95) translateY(0px) }
100% { transform: scale(1) }
}
.zoomInDown {
animation-name: zoomInDown;
-o-animation-name: zoomInDown;
-moz-animation-name: zoomInDown;
-webkit-animation-name: zoomInDown;
}
@-webkit-keyframes fadeIn { 
0% { opacity: 0 }
100% { opacity: 1 }
}
@-moz-keyframes fadeIn { 
0% { opacity: 0 }
100% { opacity: 1 }
}
@-o-keyframes fadeIn { 
0% { opacity: 0 }
100% { opacity: 1 }
}
@keyframes fadeIn { 
0% { opacity: 0 }
100% { opacity: 1 }
}
.fadeIn {
animation-name: fadeIn;
-o-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-webkit-animation-name: fadeIn;
}
@-webkit-keyframes fadeInLeft { 
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0%);
opacity: 1;
}
}
@-moz-keyframes fadeInLeft { 
0% {
-moz-transform: translateX(-100%);
opacity: 0;
}
100% {
-moz-transform: translateX(0%);
opacity: 1;
}
}
@-o-keyframes fadeInLeft { 
0% {
-o-transform: translateX(-100%);
opacity: 0;
}
100% {
-o-transform: translateX(0%);
opacity: 1;
}
}
@keyframes fadeInLeft { 
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
.fadeInLeft {
animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-webkit-animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight { 
0% {
-webkit-transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0%);
opacity: 1;
}
}
@-moz-keyframes fadeInRight { 
0% {
-moz-transform: translateX(100%);
opacity: 0;
}
100% {
-moz-transform: translateX(0%);
opacity: 1;
}
}
@-o-keyframes fadeInRight { 
0% {
-o-transform: translateX(100%);
opacity: 0;
}
100% {
-o-transform: translateX(0%);
opacity: 1;
}
}
@keyframes fadeInRight { 
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
.fadeInRight {
animation-name: fadeInRight;
-o-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-webkit-animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUp { 
0% {
-webkit-transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
@-moz-keyframes fadeInUp { 
0% {
-moz-transform: translateY(100%);
opacity: 0;
}
100% {
-moz-transform: translateY(0%);
opacity: 1;
}
}
@-o-keyframes fadeInUp { 
0% {
-o-transform: translateY(100%);
opacity: 0;
}
100% {
-o-transform: translateY(0%);
opacity: 1;
}
}
@keyframes fadeInUp { 
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
.fadeInUp {
animation-name: fadeInUp;
-o-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown { 
0% {
-webkit-transform: translateY(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
@-moz-keyframes fadeInDown { 
0% {
-moz-transform: translateY(-100%);
opacity: 0;
}
100% {
-moz-transform: translateY(0%);
opacity: 1;
}
}
@-o-keyframes fadeInDown { 
0% {
-o-transform: translateY(-100%);
opacity: 0;
}
100% {
-o-transform: translateY(0%);
opacity: 1;
}
}
@keyframes fadeInDown { 
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
.fadeInDown {
animation-name: fadeInDown;
-o-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-webkit-animation-name: fadeInDown;
}
@-webkit-keyframes rotateIn { 
0% {
-webkit-transform: rotate(360deg) scale(.1);
opacity: 0;
}
100% {
-webkit-transform: rotate(0deg) scale(1);
opacity: 1;
}
}
@-moz-keyframes rotateIn { 
0% {
-moz-transform: rotate(360deg) scale(.1);
opacity: 0;
}
100% {
-moz-transform: rotate(0deg) scale(1);
opacity: 1;
}
}
@-o-keyframes rotateIn { 
0% {
-o-transform: rotate(360deg) scale(.1);
opacity: 0;
}
100% {
-o-transform: rotate(0deg) scale(1);
opacity: 1;
}
}
@keyframes rotateIn { 
0% {
opacity: 0;
transform: rotate(360deg) scale(.1);
}
100% {
opacity: 1;
transform: rotate(0deg) scale(1);
}
}
.rotateIn {
animation-name: rotateIn;
-o-animation-name: rotateIn;
-moz-animation-name: rotateIn;
-webkit-animation-name: rotateIn;
}
@-webkit-keyframes rotateInLeft { 
0% {
-webkit-transform: translateX(-100%) rotate(-120deg);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
@-moz-keyframes rotateInLeft { 
0% {
-moz-transform: translateX(-100%) rotate(-120deg);
opacity: 0;
}
100% {
-moz-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
@-o-keyframes rotateInLeft { 
0% {
-o-transform: translateX(-100%) rotate(-120deg);
opacity: 0;
}
100% {
-o-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
@keyframes rotateInLeft { 
0% {
opacity: 0;
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
.rotateInLeft {
animation-name: rotateInLeft;
-o-animation-name: rotateInLeft;
-moz-animation-name: rotateInLeft;
-webkit-animation-name: rotateInLeft;
}
@-webkit-keyframes rotateInRight { 
0% {
-webkit-transform: translateX(100%) rotate(120deg);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
@-moz-keyframes rotateInRight { 
0% {
-moz-transform: translateX(100%) rotate(120deg);
opacity: 0;
}
100% {
-moz-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
@-o-keyframes rotateInRight { 
0% {
-o-transform: translateX(100%) rotate(120deg);
opacity: 0;
}
100% {
-o-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
@keyframes rotateInRight { 
0% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
.rotateInRight {
animation-name: rotateInRight;
-o-animation-name: rotateInRight;
-moz-animation-name: rotateInRight;
-webkit-animation-name: rotateInRight;
}
@-webkit-keyframes rotateInUp { 
0% {
-webkit-transform: translateY(100%) rotate(-120deg);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px) rotate(0deg);
opacity: 1;
}
}
@-moz-keyframes rotateInUp { 
0% {
-moz-transform: translateY(100%) rotate(-120deg);
opacity: 0;
}
100% {
-moz-transform: translateY(0px) rotate(0deg);
opacity: 1;
}
}
@-o-keyframes rotateInUp { 
0% {
-o-transform: translateY(100%) rotate(-120deg);
opacity: 0;
}
100% {
-o-transform: translateY(0px) rotate(0deg);
opacity: 1;
}
}
@keyframes rotateInUp { 
0% {
opacity: 0;
transform: translateY(100%) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateY(0px) rotate(0deg);
}
}
.rotateInUp {
animation-name: rotateInUp;
-o-animation-name: rotateInUp;
-moz-animation-name: rotateInUp;
-webkit-animation-name: rotateInUp;
}
@-webkit-keyframes rotateInDown { 
0% {
-webkit-transform: translateY(-100%) rotate(120deg);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px) rotate(0deg);
opacity: 1;
}
}
@-moz-keyframes rotateInDown { 
0% {
-moz-transform: translateY(-100%) rotate(120deg);
opacity: 0;
}
100% {
-moz-transform: translateY(0px) rotate(0deg);
opacity: 1;
}
}
@-o-keyframes rotateInDown { 
0% {
-o-transform: translateY(-100%) rotate(120deg);
opacity: 0;
}
100% {
-o-transform: translateY(0px) rotate(0deg);
opacity: 1;
}
}
@keyframes rotateInDown { 
0% {
opacity: 0;
transform: translateY(-100%) rotate(120deg);
}
100% {
opacity: 1;
transform: translateY(0px) rotate(0deg);
}
}
.rotateInDown {
animation-name: rotateInDown;
-o-animation-name: rotateInDown;
-moz-animation-name: rotateInDown;
-webkit-animation-name: rotateInDown;
}
@-webkit-keyframes jellyInDown { 
0% {
-webkit-transform: translateY(-1000px);
opacity: 0;
}
40% {
-webkit-transform: translateY(0px);
opacity: 1;
}
50% { -webkit-transform: scale(1.1, .9) }
60% { -webkit-transform: scale(.95, 1.05) }
70% { -webkit-transform: scale(1.05, .95) }
80% { -webkit-transform: scale(.98, 1.02) }
90% { -webkit-transform: scale(1.02, .98) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes jellyInDown { 
0% {
-moz-transform: translateY(-1000px);
opacity: 0;
}
40% {
-moz-transform: translateY(0px);
opacity: 1;
}
50% { -moz-transform: scale(1.1, .9) }
60% { -moz-transform: scale(.95, 1.05) }
70% { -moz-transform: scale(1.05, .95) }
80% { -moz-transform: scale(.98, 1.02) }
90% { -moz-transform: scale(1.02, .98) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes jellyInDown { 
0% {
-o-transform: translateY(-1000px);
opacity: 0;
}
40% {
-o-transform: translateY(0px);
opacity: 1;
}
50% { -o-transform: scale(1.1, .9) }
60% { -o-transform: scale(.95, 1.05) }
70% { -o-transform: scale(1.05, .95) }
80% { -o-transform: scale(.98, 1.02) }
90% { -o-transform: scale(1.02, .98) }
100% { -o-transform: scale(1) }
}
@keyframes jellyInDown { 
0% {
opacity: 0;
transform: translateY(-1000px);
}
40% {
opacity: 1;
transform: translateY(0px);
}
50% { transform: scale(1.1, .9) }
60% { transform: scale(.95, 1.05) }
70% { transform: scale(1.05, .95) }
80% { transform: scale(.98, 1.02) }
90% { transform: scale(1.02, .98) }
100% { transform: scale(1) }
}
.jellyInDown {
animation-name: jellyInDown;
transform-origin: 50% 100%;
-o-animation-name: jellyInDown;
-moz-animation-name: jellyInDown;
-o-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-webkit-animation-name: jellyInDown;
-webkit-transform-origin: 50% 100%;
}
@-webkit-keyframes jellyInUp { 
0% {
-webkit-transform: translateY(1000px);
opacity: 0;
}
40% {
-webkit-transform: translateY(0px);
opacity: 1;
}
50% { -webkit-transform: scale(1.1, .9) }
60% { -webkit-transform: scale(.95, 1.05) }
70% { -webkit-transform: scale(1.05, .95) }
80% { -webkit-transform: scale(.98, 1.02) }
90% { -webkit-transform: scale(1.02, .98) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes jellyInUp { 
0% {
-moz-transform: translateY(1000px);
opacity: 0;
}
40% {
-moz-transform: translateY(0px);
opacity: 1;
}
50% { -moz-transform: scale(1.1, .9) }
60% { -moz-transform: scale(.95, 1.05) }
70% { -moz-transform: scale(1.05, .95) }
80% { -moz-transform: scale(.98, 1.02) }
90% { -moz-transform: scale(1.02, .98) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes jellyInUp { 
0% {
-o-transform: translateY(1000px);
opacity: 0;
}
40% {
-o-transform: translateY(0px);
opacity: 1;
}
50% { -o-transform: scale(1.1, .9) }
60% { -o-transform: scale(.95, 1.05) }
70% { -o-transform: scale(1.05, .95) }
80% { -o-transform: scale(.98, 1.02) }
90% { -o-transform: scale(1.02, .98) }
100% { -o-transform: scale(1) }
}
@keyframes jellyInUp { 
0% {
opacity: 0;
transform: translateY(1000px);
}
40% {
opacity: 1;
transform: translateY(0px);
}
50% { transform: scale(1.1, .9) }
60% { transform: scale(.95, 1.05) }
70% { transform: scale(1.05, .95) }
80% { transform: scale(.98, 1.02) }
90% { transform: scale(1.02, .98) }
100% { transform: scale(1) }
}
.jellyInUp {
animation-name: jellyInUp;
transform-origin: 50% 0%;
-o-animation-name: jellyInUp;
-moz-animation-name: jellyInUp;
-o-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-animation-name: jellyInUp;
-webkit-transform-origin: 50% 0%;
}
@-webkit-keyframes jellyInLeft { 
0% {
-webkit-transform: translateX(-1000px);
opacity: 0;
}
40% {
-webkit-transform: translateX(0px);
opacity: 1;
}
50% { -webkit-transform: scale(.9, 1.1) }
60% { -webkit-transform: scale(1.05, .95) }
70% { -webkit-transform: scale(.95, 1.05) }
80% { -webkit-transform: scale(1.02, .98) }
90% { -webkit-transform: scale(.98, 1.02) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes jellyInLeft { 
0% {
-moz-transform: translateX(-1000px);
opacity: 0;
}
40% {
-moz-transform: translateX(0px);
opacity: 1;
}
50% { -moz-transform: scale(.9, 1.1) }
60% { -moz-transform: scale(1.05, .95) }
70% { -moz-transform: scale(.95, 1.05) }
80% { -moz-transform: scale(1.02, .98) }
90% { -moz-transform: scale(.98, 1.02) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes jellyInLeft { 
0% {
-o-transform: translateX(-1000px);
opacity: 0;
}
40% {
-o-transform: translateX(0px);
opacity: 1;
}
50% { -o-transform: scale(.9, 1.1) }
60% { -o-transform: scale(1.05, .95) }
70% { -o-transform: scale(.95, 1.05) }
80% { -o-transform: scale(1.02, .98) }
90% { -o-transform: scale(.98, 1.02) }
100% { -o-transform: scale(1) }
}
@keyframes jellyInLeft { 
0% {
opacity: 0;
transform: translateX(-1000px);
}
40% {
opacity: 1;
transform: translateX(0px);
}
50% { transform: scale(.9, 1.1) }
60% { transform: scale(1.05, .95) }
70% { transform: scale(.95, 1.05) }
80% { transform: scale(1.02, .98) }
90% { transform: scale(.98, 1.02) }
100% { transform: scale(1) }
}
.jellyInLeft {
animation-name: jellyInLeft;
transform-origin: 100% 50%;
-o-animation-name: jellyInLeft;
-moz-animation-name: jellyInLeft;
-o-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-webkit-animation-name: jellyInLeft;
-webkit-transform-origin: 100% 50%;
}
@-webkit-keyframes jellyInRight { 
0% {
-webkit-transform: translateX(1000px);
opacity: 0;
}
40% {
-webkit-transform: translateX(0px);
opacity: 1;
}
50% { -webkit-transform: scale(.9, 1.1) }
60% { -webkit-transform: scale(1.05, .95) }
70% { -webkit-transform: scale(.95, 1.05) }
80% { -webkit-transform: scale(1.02, .98) }
90% { -webkit-transform: scale(.98, 1.02) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes jellyInRight { 
0% {
-moz-transform: translateX(1000px);
opacity: 0;
}
40% {
-moz-transform: translateX(0px);
opacity: 1;
}
50% { -moz-transform: scale(.9, 1.1) }
60% { -moz-transform: scale(1.05, .95) }
70% { -moz-transform: scale(.95, 1.05) }
80% { -moz-transform: scale(1.02, .98) }
90% { -moz-transform: scale(.98, 1.02) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes jellyInRight { 
0% {
-o-transform: translateX(1000px);
opacity: 0;
}
40% {
-o-transform: translateX(0px);
opacity: 1;
}
50% { -o-transform: scale(.9, 1.1) }
60% { -o-transform: scale(1.05, .95) }
70% { -o-transform: scale(.95, 1.05) }
80% { -o-transform: scale(1.02, .98) }
90% { -o-transform: scale(.98, 1.02) }
100% { -o-transform: scale(1) }
}
@keyframes jellyInRight { 
0% {
opacity: 0;
transform: translateX(1000px);
}
40% {
opacity: 1;
transform: translateX(0px);
}
50% { transform: scale(.9, 1.1) }
60% { transform: scale(1.05, .95) }
70% { transform: scale(.95, 1.05) }
80% { transform: scale(1.02, .98) }
90% { transform: scale(.98, 1.02) }
100% { transform: scale(1) }
}
.jellyInRight {
animation-name: jellyInRight;
transform-origin: 0% 50%;
-o-animation-name: jellyInRight;
-moz-animation-name: jellyInRight;
-o-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-webkit-animation-name: jellyInRight;
-webkit-transform-origin: 0% 50%;
}
@-webkit-keyframes bounceInLeft { 
0% { -webkit-transform: translateX(-1000px) }
34% {
-webkit-transform: translateX(0px);
-webkit-animation-timing-function: ease-out;
}
52% {
-webkit-transform: translateX(-24px);
-webkit-animation-timing-function: ease-in;
}
70% {
-webkit-transform: translateX(0px);
-webkit-animation-timing-function: ease-out;
}
79% {
-webkit-transform: translateX(-8px);
-webkit-animation-timing-function: ease-in;
}
88% {
-webkit-transform: translateX(0px);
-webkit-animation-timing-function: ease-out;
}
94% {
-webkit-transform: translateX(-3px);
-webkit-animation-timing-function: ease-in;
}
100% { -webkit-transform: translateX(0px) }
}
@-moz-keyframes bounceInLeft { 
0% { -moz-transform: translateX(-1000px) }
34% {
-moz-transform: translateX(0px);
-moz-animation-timing-function: ease-out;
}
52% {
-moz-transform: translateX(-24px);
-moz-animation-timing-function: ease-in;
}
70% {
-moz-transform: translateX(0px);
-moz-animation-timing-function: ease-out;
}
79% {
-moz-transform: translateX(-8px);
-moz-animation-timing-function: ease-in;
}
88% {
-moz-transform: translateX(0px);
-moz-animation-timing-function: ease-out;
}
94% {
-moz-transform: translateX(-3px);
-moz-animation-timing-function: ease-in;
}
100% { -moz-transform: translateX(0px) }
}
@-o-keyframes bounceInLeft { 
0% { -o-transform: translateX(-1000px) }
34% {
-o-transform: translateX(0px);
-o-animation-timing-function: ease-out;
}
52% {
-o-transform: translateX(-24px);
-o-animation-timing-function: ease-in;
}
70% {
-o-transform: translateX(0px);
-o-animation-timing-function: ease-out;
}
79% {
-o-transform: translateX(-8px);
-o-animation-timing-function: ease-in;
}
88% {
-o-transform: translateX(0px);
-o-animation-timing-function: ease-out;
}
94% {
-o-transform: translateX(-3px);
-o-animation-timing-function: ease-in;
}
100% { -o-transform: translateX(0px) }
}
@keyframes bounceInLeft { 
0% { transform: translateX(-1000px) }
34% {
animation-timing-function: ease-out;
transform: translateX(0px);
}
52% {
animation-timing-function: ease-in;
transform: translateX(-24px);
}
70% {
animation-timing-function: ease-out;
transform: translateX(0px);
}
79% {
animation-timing-function: ease-in;
transform: translateX(-8px);
}
88% {
animation-timing-function: ease-out;
transform: translateX(0px);
}
94% {
animation-timing-function: ease-in;
transform: translateX(-3px);
}
100% { transform: translateX(0px) }
}
.bounceInLeft {
animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-webkit-animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight { 
0% { -webkit-transform: translateX(1000px) }
34% {
-webkit-transform: translateX(0px);
-webkit-animation-timing-function: ease-out;
}
52% {
-webkit-transform: translateX(24px);
-webkit-animation-timing-function: ease-in;
}
70% {
-webkit-transform: translateX(0px);
-webkit-animation-timing-function: ease-out;
}
79% {
-webkit-transform: translateX(8px);
-webkit-animation-timing-function: ease-in;
}
88% {
-webkit-transform: translateX(0px);
-webkit-animation-timing-function: ease-out;
}
94% {
-webkit-transform: translateX(3px);
-webkit-animation-timing-function: ease-in;
}
100% { -webkit-transform: translateX(0px) }
}
@-moz-keyframes bounceInRight { 
0% { -moz-transform: translateX(1000px) }
34% {
-moz-transform: translateX(0px);
-moz-animation-timing-function: ease-out;
}
52% {
-moz-transform: translateX(24px);
-moz-animation-timing-function: ease-in;
}
70% {
-moz-transform: translateX(0px);
-moz-animation-timing-function: ease-out;
}
79% {
-moz-transform: translateX(8px);
-moz-animation-timing-function: ease-in;
}
88% {
-moz-transform: translateX(0px);
-moz-animation-timing-function: ease-out;
}
94% {
-moz-transform: translateX(3px);
-moz-animation-timing-function: ease-in;
}
100% { -moz-transform: translateX(0px) }
}
@-o-keyframes bounceInRight { 
0% { -o-transform: translateX(1000px) }
34% {
-o-transform: translateX(0px);
-o-animation-timing-function: ease-out;
}
52% {
-o-transform: translateX(24px);
-o-animation-timing-function: ease-in;
}
70% {
-o-transform: translateX(0px);
-o-animation-timing-function: ease-out;
}
79% {
-o-transform: translateX(8px);
-o-animation-timing-function: ease-in;
}
88% {
-o-transform: translateX(0px);
-o-animation-timing-function: ease-out;
}
94% {
-o-transform: translateX(3px);
-o-animation-timing-function: ease-in;
}
100% { -o-transform: translateX(0px) }
}
@keyframes bounceInRight { 
0% { transform: translateX(1000px) }
34% {
animation-timing-function: ease-out;
transform: translateX(0px);
}
52% {
animation-timing-function: ease-in;
transform: translateX(24px);
}
70% {
animation-timing-function: ease-out;
transform: translateX(0px);
}
79% {
animation-timing-function: ease-in;
transform: translateX(8px);
}
88% {
animation-timing-function: ease-out;
transform: translateX(0px);
}
94% {
animation-timing-function: ease-in;
transform: translateX(3px);
}
100% { transform: translateX(0px) }
}
.bounceInRight {
animation-name: bounceInRight;
-o-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-webkit-animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp { 
0% { -webkit-transform: translateY(1000px) }
34% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
52% {
-webkit-transform: translateY(24px);
-webkit-animation-timing-function: ease-in;
}
70% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
79% {
-webkit-transform: translateY(8px);
-webkit-animation-timing-function: ease-in;
}
88% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
94% {
-webkit-transform: translateY(3px);
-webkit-animation-timing-function: ease-in;
}
100% { -webkit-transform: translateY(0px) }
}
@-moz-keyframes bounceInUp { 
0% { -moz-transform: translateY(1000px) }
34% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
52% {
-moz-transform: translateY(24px);
-moz-animation-timing-function: ease-in;
}
70% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
79% {
-moz-transform: translateY(8px);
-moz-animation-timing-function: ease-in;
}
88% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
94% {
-moz-transform: translateY(3px);
-moz-animation-timing-function: ease-in;
}
100% { -moz-transform: translateY(0px) }
}
@-o-keyframes bounceInUp { 
0% { -o-transform: translateY(1000px) }
34% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
52% {
-o-transform: translateY(24px);
-o-animation-timing-function: ease-in;
}
70% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
79% {
-o-transform: translateY(8px);
-o-animation-timing-function: ease-in;
}
88% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
94% {
-o-transform: translateY(3px);
-o-animation-timing-function: ease-in;
}
100% { -o-transform: translateY(0px) }
}
@keyframes bounceInUp { 
0% { transform: translateY(1000px) }
34% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
52% {
animation-timing-function: ease-in;
transform: translateY(24px);
}
70% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
79% {
animation-timing-function: ease-in;
transform: translateY(8px);
}
88% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
94% {
animation-timing-function: ease-in;
transform: translateY(3px);
}
100% { transform: translateY(0px) }
}
.bounceInUp {
animation-name: bounceInUp;
-o-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-webkit-animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown { 
0% { -webkit-transform: translateY(-1000px) }
34% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
52% {
-webkit-transform: translateY(-24px);
-webkit-animation-timing-function: ease-in;
}
70% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
79% {
-webkit-transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
}
88% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
94% {
-webkit-transform: translateY(-3px);
-webkit-animation-timing-function: ease-in;
}
100% { -webkit-transform: translateY(0px) }
}
@-moz-keyframes bounceInDown { 
0% { -moz-transform: translateY(-1000px) }
34% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
52% {
-moz-transform: translateY(-24px);
-moz-animation-timing-function: ease-in;
}
70% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
79% {
-moz-transform: translateY(-8px);
-moz-animation-timing-function: ease-in;
}
88% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
94% {
-moz-transform: translateY(-3px);
-moz-animation-timing-function: ease-in;
}
100% { -moz-transform: translateY(0px) }
}
@-o-keyframes bounceInDown { 
0% { -o-transform: translateY(-1000px) }
34% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
52% {
-o-transform: translateY(-24px);
-o-animation-timing-function: ease-in;
}
70% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
79% {
-o-transform: translateY(-8px);
-o-animation-timing-function: ease-in;
}
88% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
94% {
-o-transform: translateY(-3px);
-o-animation-timing-function: ease-in;
}
100% { -o-transform: translateY(0px) }
}
@keyframes bounceInDown { 
0% { transform: translateY(-1000px) }
34% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
52% {
animation-timing-function: ease-in;
transform: translateY(-24px);
}
70% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
79% {
animation-timing-function: ease-in;
transform: translateY(-8px);
}
88% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
94% {
animation-timing-function: ease-in;
transform: translateY(-3px);
}
100% { transform: translateY(0px) }
}
.bounceInDown {
animation-name: bounceInDown;
-o-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-webkit-animation-name: bounceInDown;
}
@-webkit-keyframes bounce { 
0% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
37% {
-webkit-transform: translateY(-24px);
-webkit-animation-timing-function: ease-in;
}
54% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
68% {
-webkit-transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
}
82% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-out;
}
91% {
-webkit-transform: translateY(-3px);
-webkit-animation-timing-function: ease-in;
}
100% { -webkit-transform: translateY(0px) }
}
@-moz-keyframes bounce { 
0% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
37% {
-moz-transform: translateY(-24px);
-moz-animation-timing-function: ease-in;
}
54% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
68% {
-moz-transform: translateY(-8px);
-moz-animation-timing-function: ease-in;
}
82% {
-moz-transform: translateY(0px);
-moz-animation-timing-function: ease-out;
}
91% {
-moz-transform: translateY(-3px);
-moz-animation-timing-function: ease-in;
}
100% { -moz-transform: translateY(0px) }
}
@-o-keyframes bounce { 
0% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
37% {
-o-transform: translateY(-24px);
-o-animation-timing-function: ease-in;
}
54% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
68% {
-o-transform: translateY(-8px);
-o-animation-timing-function: ease-in;
}
82% {
-o-transform: translateY(0px);
-o-animation-timing-function: ease-out;
}
91% {
-o-transform: translateY(-3px);
-o-animation-timing-function: ease-in;
}
100% { -o-transform: translateY(0px) }
}
@keyframes bounce { 
0% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
37% {
animation-timing-function: ease-in;
transform: translateY(-24px);
}
54% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
68% {
animation-timing-function: ease-in;
transform: translateY(-8px);
}
82% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
91% {
animation-timing-function: ease-in;
transform: translateY(-3px);
}
100% { transform: translateY(0px) }
}
.bounce {
animation-name: bounce;
-o-animation-name: bounce;
-moz-animation-name: bounce;
-webkit-animation-name: bounce;
}
@-webkit-keyframes elasticInLeft { 
0% {
-webkit-transform: translateX(-1000px);
-webkit-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-webkit-transform: translateX(30px);
-webkit-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-webkit-transform: translateX(-10px);
-webkit-animation-timing-function: ease-in-out;
}
100% { -webkit-transform: translateX() }
}
@-moz-keyframes elasticInLeft { 
0% {
-moz-transform: translateX(-1000px);
-moz-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-moz-transform: translateX(30px);
-moz-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-moz-transform: translateX(-10px);
-moz-animation-timing-function: ease-in-out;
}
100% { -moz-transform: translateX() }
}
@-o-keyframes elasticInLeft { 
0% {
-o-transform: translateX(-1000px);
-o-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-o-transform: translateX(30px);
-o-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-o-transform: translateX(-10px);
-o-animation-timing-function: ease-in-out;
}
100% { -o-transform: translateX() }
}
@keyframes elasticInLeft { 
0% {
animation-timing-function: ease-in-out;
opacity: 0;
transform: translateX(-1000px);
}
60% {
animation-timing-function: ease-in-out;
opacity: 1;
transform: translateX(30px);
}
80% {
animation-timing-function: ease-in-out;
transform: translateX(-10px);
}
100% { transform: translateX() }
}
.elasticInLeft {
animation-name: elasticInLeft;
-o-animation-name: elasticInLeft;
-moz-animation-name: elasticInLeft;
-webkit-animation-name: elasticInLeft;
}
@-webkit-keyframes elasticInRight { 
0% {
-webkit-transform: translateX(1000px);
-webkit-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-webkit-transform: translateX(-30px);
-webkit-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-webkit-transform: translateX(10px);
-webkit-animation-timing-function: ease-in-out;
}
100% { -webkit-transform: translateX() }
}
@-moz-keyframes elasticInRight { 
0% {
-moz-transform: translateX(1000px);
-moz-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-moz-transform: translateX(-30px);
-moz-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-moz-transform: translateX(10px);
-moz-animation-timing-function: ease-in-out;
}
100% { -moz-transform: translateX() }
}
@-o-keyframes elasticInRight { 
0% {
-o-transform: translateX(1000px);
-o-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-o-transform: translateX(-30px);
-o-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-o-transform: translateX(10px);
-o-animation-timing-function: ease-in-out;
}
100% { -o-transform: translateX() }
}
@keyframes elasticInRight { 
0% {
animation-timing-function: ease-in-out;
opacity: 0;
transform: translateX(1000px);
}
60% {
animation-timing-function: ease-in-out;
opacity: 1;
transform: translateX(-30px);
}
80% {
animation-timing-function: ease-in-out;
transform: translateX(10px);
}
100% { transform: translateX() }
}
.elasticInRight {
animation-name: elasticInRight;
-o-animation-name: elasticInRight;
-moz-animation-name: elasticInRight;
-webkit-animation-name: elasticInRight;
}
@-webkit-keyframes elasticInUp { 
0% {
-webkit-transform: translateY(1000px);
-webkit-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-webkit-transform: translateY(-30px);
-webkit-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-webkit-transform: translateY(10px);
-webkit-animation-timing-function: ease-in-out;
}
100% { -webkit-transform: translateY() }
}
@-moz-keyframes elasticInUp { 
0% {
-moz-transform: translateY(1000px);
-moz-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-moz-transform: translateY(-30px);
-moz-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-moz-transform: translateY(10px);
-moz-animation-timing-function: ease-in-out;
}
100% { -moz-transform: translateY() }
}
@-o-keyframes elasticInUp { 
0% {
-o-transform: translateY(1000px);
-o-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-o-transform: translateY(-30px);
-o-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-o-transform: translateY(10px);
-o-animation-timing-function: ease-in-out;
}
100% { -o-transform: translateY() }
}
@keyframes elasticInUp { 
0% {
animation-timing-function: ease-in-out;
opacity: 0;
transform: translateY(1000px);
}
60% {
animation-timing-function: ease-in-out;
opacity: 1;
transform: translateY(-30px);
}
80% {
animation-timing-function: ease-in-out;
transform: translateY(10px);
}
100% { transform: translateY() }
}
.elasticInUp {
animation-name: elasticInUp;
-o-animation-name: elasticInUp;
-moz-animation-name: elasticInUp;
-webkit-animation-name: elasticInUp;
}
@-webkit-keyframes elasticInDown { 
0% {
-webkit-transform: translateY(-1000px);
-webkit-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-webkit-transform: translateY(30px);
-webkit-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-webkit-transform: translateY(-10px);
-webkit-animation-timing-function: ease-in-out;
}
100% { -webkit-transform: translateY() }
}
@-moz-keyframes elasticInDown { 
0% {
-moz-transform: translateY(-1000px);
-moz-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-moz-transform: translateY(30px);
-moz-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-moz-transform: translateY(-10px);
-moz-animation-timing-function: ease-in-out;
}
100% { -moz-transform: translateY() }
}
@-o-keyframes elasticInDown { 
0% {
-o-transform: translateY(-1000px);
-o-animation-timing-function: ease-in-out;
opacity: 0;
}
60% {
-o-transform: translateY(30px);
-o-animation-timing-function: ease-in-out;
opacity: 1;
}
80% {
-o-transform: translateY(-10px);
-o-animation-timing-function: ease-in-out;
}
100% { -o-transform: translateY() }
}
@keyframes elasticInDown { 
0% {
animation-timing-function: ease-in-out;
opacity: 0;
transform: translateY(-1000px);
}
60% {
animation-timing-function: ease-in-out;
opacity: 1;
transform: translateY(30px);
}
80% {
animation-timing-function: ease-in-out;
transform: translateY(-10px);
}
100% { transform: translateY() }
}
.elasticInDown {
animation-name: elasticInDown;
-o-animation-name: elasticInDown;
-moz-animation-name: elasticInDown;
-webkit-animation-name: elasticInDown;
}
@-webkit-keyframes shake { 
10% { -webkit-transform: translateX(7px) }
30% { -webkit-transform: translateX(-7px) }
50% { -webkit-transform: translateX(5px) }
70% { -webkit-transform: translateX(-5px) }
90% { -webkit-transform: translateX(3px) }
100% { -webkit-transform: translateX(0px) }
}
@-moz-keyframes shake { 
10% { -moz-transform: translateX(7px) }
30% { -moz-transform: translateX(-7px) }
50% { -moz-transform: translateX(5px) }
70% { -moz-transform: translateX(-5px) }
90% { -moz-transform: translateX(3px) }
100% { -moz-transform: translateX(0px) }
}
@-o-keyframes shake { 
10% { -o-transform: translateX(7px) }
30% { -o-transform: translateX(-7px) }
50% { -o-transform: translateX(5px) }
70% { -o-transform: translateX(-5px) }
90% { -o-transform: translateX(3px) }
100% { -o-transform: translateX(0px) }
}
@keyframes shake { 
10% { transform: translateX(7px) }
30% { transform: translateX(-7px) }
50% { transform: translateX(5px) }
70% { transform: translateX(-5px) }
90% { transform: translateX(3px) }
100% { transform: translateX(0px) }
}
.shake {
animation-name: shake;
-o-animation-name: shake;
-moz-animation-name: shake;
-webkit-animation-name: shake;
}
@-webkit-keyframes pendulum { 
10% { -webkit-transform: rotate(15deg) }
30% { -webkit-transform: rotate(-10deg) }
50% { -webkit-transform: rotate(5deg) }
70% { -webkit-transform: rotate(-5deg) }
90% { -webkit-transform: rotate(2deg) }
100% { -webkit-transform: rotate(0deg) }
}
@-moz-keyframes pendulum { 
10% { -moz-transform: rotate(15deg) }
30% { -moz-transform: rotate(-10deg) }
50% { -moz-transform: rotate(5deg) }
70% { -moz-transform: rotate(-5deg) }
90% { -moz-transform: rotate(2deg) }
100% { -moz-transform: rotate(0deg) }
}
@-o-keyframes pendulum { 
10% { -o-transform: rotate(15deg) }
30% { -o-transform: rotate(-10deg) }
50% { -o-transform: rotate(5deg) }
70% { -o-transform: rotate(-5deg) }
90% { -o-transform: rotate(2deg) }
100% { -o-transform: rotate(0deg) }
}
@keyframes pendulum { 
10% { transform: rotate(15deg) }
30% { transform: rotate(-10deg) }
50% { transform: rotate(5deg) }
70% { transform: rotate(-5deg) }
90% { transform: rotate(2deg) }
100% { transform: rotate(0deg) }
}
.pendulum {
animation-name: pendulum;
-o-animation-name: pendulum;
-moz-animation-name: pendulum;
-webkit-animation-name: pendulum;
}