@charset "utf-8";
/* CSS Document */

.animationRight {
    animation: right 0.8s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.animationLeft {
    animation: left 0.8s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.animationOpacity {
    animation: opacity 2s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.opacityBig {
    animation: opacityBig 2s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.top1 {
    animation: dataTop 2s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.top2 {
    animation: dataTop 2s;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.top3 {
    animation: dataTop 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.up1 {
    animation: dataUp 0.8s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.up2 {
    animation: dataUp 0.8s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.up3 {
    animation: dataUp 0.8s;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.big {
    animation: big 1s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
.flipInX {
    animation: flipInX 0.8s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}

 @keyframes bounce-bug {
 0% {
 transform:translateY(0)
}
 15% {
 transform:translateY(-50%)
}
 20% {
 transform:translateY(10%)
}
 25% {
 transform:translateY(-5%)
}
 30% {
 transform:translateY(0)
}
 100% {
 transform:translateY(0)
}
}

 @keyframes right {
 from {
 opacity: 0;
 right: -50px;
}
 to {
 opacity: 1;
 right: 0;
}
}

@keyframes left {
 from {
 opacity: 0;
 left: -50px;
}
 to {
 opacity: 1;
 left: 0;
}
}

 @keyframes opacity {
 from {
 opacity: 0;
}
 to {
 opacity: 1;
}
}

 @keyframes dataTop {
 from {
 opacity: 0;
 top: -100px;
}
 to {
 opacity: 1;
 top: 0;
}
}

 @keyframes dataUp {
 from {
 opacity: 0;
 bottom: -30px;
}
 to {
 opacity: 1;
 bottom: 0;
}
}

 @keyframes big {
 from {
 opacity: 0;
 transform: scale3d(0.1, 0.1, 1);
}
 to {
 opacity: 1;
 transform: scale3d(1, 1, 1);
}
}

 @keyframes opacityBig {
 from {
 opacity: 0;
 transform: scale3d(0.9, 0.9, 1);
}
 to {
 opacity: 1;
 transform: scale3d(1, 1, 1);
}
}

 @keyframes flipInX {
 from {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
 opacity: 0;
}
 40% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 60% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 opacity: 1;
}
 80% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
 to {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
 opacity: 1;
}
}

 @keyframes slide {
 from {
 background-position: 0 bottom;
}
 to {
 background-position: -1600px bottom;
}
}

 @keyframes slide2 {
 from {
 background-position: 0 bottom;
}
 to {
 background-position: -2829px bottom;
}
}