﻿@charset "UTF-8";


.animate { animation-duration:0.8s; animation-fill-mode: forwards; }

.animate.delay0{ animation-delay:0.0s; }
.animate.delay1{ animation-delay:0.1s; }
.animate.delay2{ animation-delay:0.3s; }
.animate.delay3{ animation-delay:0.5s; }
.animate.delay4{ animation-delay:0.6s; }
.animate.delay5{ animation-delay:0.7s; }
.animate.delay6{ animation-delay:0.8s; }
.animate.delay7{ animation-delay:0.9s; }
.animate.delay8{ animation-delay:1.0s; }
.animate.delay9{ animation-delay:1.1s; }
.animate.delay10{ animation-delay:1.2s; }
.animate.delay11{ animation-delay:1.3s; }
/*.animate.delayC{ animation-delay:attr(data-offset s, 1); }*/





@keyframes fadeIn{ from{opacity:0.2;} to{opacity:1;} }
@keyframes fadeOut{ from{opacity:1;} to{opacity:0;} }
.fadeIn{ opacity:0.2; }
.animate.fadeIn{ animation-name:fadeIn; }
.fadeOut{ animation-name:fadeOut; }


@keyframes slideRight{ from{transform:translate(-90px, 0);} to{transform:translate(0, 0);} }
@keyframes slideLeft{ from{transform: translate3d(90px,0,0);} to{transform:translate(0, 0);} }
.slideRight{ transform:translate(-90px, 0); }
.animate.slideRight{ animation-name:slideRight; -webkit-animation-name:slideRight; }
.slideLeft{ /*animation-name:slideLeft;*/ transform: translate3d(-20px,0,0); }

@keyframes fadeInRight{ from{transform:translate(-20px, 0); opacity:0.2;} 70%{transform:translate(0, 0);} to{transform:translate(0, 0); opacity:1;} }
@keyframes fadeInLeft{ from{transform:translate(20px, 0); opacity:0.2;} 70%{transform:translate(0, 0);} to{transform:translate(0, 0); opacity:1;} }
@keyframes fadeInTop{ from{transform:translate(0, -20px); opacity:0.2;} 70%{transform:translate(0, 0);} to{transform:translate(0, 0); opacity:1;} }
@keyframes fadeInBottom{ from{transform:translate(0, 20px); opacity:0.2;} 70%{transform:translate(0, 0);} to{transform:translate(0, 0); opacity:1;} }
.fadeInRight{transform:translate(-20px, 0); opacity:0.2; }
.animate.fadeInRight{animation-name:fadeInRight; animation-timing-function:ease-out;}
.fadeInLeft{transform:translate(20px, 0); opacity:0.2; }
.animate.fadeInLeft{animation-name:fadeInLeft; animation-timing-function:ease-out;}
.fadeInTop{transform:translate(0, -20px); opacity:0.2; }
.animate.fadeInTop{animation-name:fadeInTop; animation-timing-function:ease-out;}
.fadeInBottom{transform:translate(0, 20px); opacity:0.2; }
.animate.fadeInBottom{animation-name:fadeInBottom; animation-timing-function:ease-out;}


@keyframes flipInRight{ from{transform:perspective(1000px) rotateY(180deg); opacity:0.2;} to{transform:perspective(1000px) rotateY(0deg); opacity:1;} }
.flipInRight{transform:rotateY(180deg); opacity:0.2; backface-visibility:visible; transform-style: preserve-3d; position:relative;}
.animate.flipInRight{animation-name:flipInRight; animation-timing-function:ease-in-out; }

@keyframes flipInTop{ from{transform:perspective(1000px) rotateX(90deg); opacity:0.2;} to{transform:perspective(1000px) rotateX(0deg); opacity:1;} }
.flipInTop{transform:rotateY(90deg); opacity:0.2; backface-visibility:visible; transform-style: preserve-3d; position:relative;}
.animate.flipInTop{animation-name:flipInTop; animation-timing-function:ease-in-out; transform-origin:center center; }

@keyframes bounceIn{ from{transform:translateY(20px) scale(0.5); opacity:0.2;} 50%{transform:translateY(0px) scale(1.3);} 75%{transform:scale(0.9);} to{transform:scale(1); opacity:1;} }
.bounceIn{transform:translateY(20px) scale(0.5); opacity:0.2; transform-origin:center left; }
.animate.bounceIn{animation-name:bounceIn; animation-timing-function:ease-in-out;}