@charset "utf-8";

/* animation ------------------------------------------------------------ */
#top_tytle {
 width:30%;
 float:left;
 margin-top:2%;
}
/* h --------- */
.animation01 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation01 7s ease-in alternate forwards;
 -webkit-animation:animation01 7s ease-in 0s forwards;
}
@-webkit-keyframes animation01 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:1;transform: translate(0vw, 0vw);}
 100%{opacity:1;transform: translate(0vw, 0vw);}
}
@keyframes animation01 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:1;transform: translate(0vw, 0vw);}
 100%{opacity:1;transform: translate(0vw, 0vw);}
}
/* a --------- */
.animation02 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation02 7s ease-in alternate forwards;
 -webkit-animation:animation02 7s ease-in 0s forwards;
}
@-webkit-keyframes animation02 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:1;transform: translate(10vw, 0vw);}
 100%{opacity:1;transform: translate(10vw, 0vw);}
}
@keyframes animation02 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:1;transform: translate(10vw, 0vw);}
 100%{opacity:1;transform: translate(10vw, 0vw);}
}
/* v --------- */
.animation03 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation03 7s ease-in alternate forwards;
 -webkit-animation:animation03 7s ease-in 0s forwards;
}
@-webkit-keyframes animation03 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:1;transform: translate(20vw, 0vw);}
 100%{opacity:1;transform: translate(20vw, 0vw);}
}
@keyframes animation03 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:1;transform: translate(20vw, 0vw);}
 100%{opacity:1;transform: translate(20vw, 0vw);}
}
/* e --------- */
.animation04 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation04 7s ease-in alternate forwards;
 -webkit-animation:animation04 7s ease-in 0s forwards;
}
@-webkit-keyframes animation04 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:0;transform: translate(20vw, 0vw);}
 25%{opacity:1;transform: translate(30vw, 0vw);}
 100%{opacity:1;transform: translate(30vw, 0vw);}
}
@keyframes animation04 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:0;transform: translate(20vw, 0vw);}
 25%{opacity:1;transform: translate(30vw, 0vw);}
 100%{opacity:1;transform: translate(30vw, 0vw);}
}
/* t --------- */
.animation05 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation05 7s ease-in alternate forwards;
 -webkit-animation:animation05 7s ease-in 0s forwards;
}
@-webkit-keyframes animation05 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:1;transform: translate(0vw, 10vw);}
 100%{opacity:1;transform: translate(0vw, 10vw);}
}
@keyframes animation05 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:1;transform: translate(0vw, 10vw);}
 100%{opacity:1;transform: translate(0vw, 10vw);}
}
/* h --------- */
.animation06 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation06 7s ease-in alternate forwards;
 -webkit-animation:animation06 7s ease-in 0s forwards;
}
@-webkit-keyframes animation06 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:0;transform: translate(0vw, 10vw);}
 30%{opacity:1;transform: translate(10vw, 10vw);}
 100%{opacity:1;transform: translate(10vw, 10vw);}
}
@keyframes animation06 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:0;transform: translate(0vw, 10vw);}
 30%{opacity:1;transform: translate(10vw, 10vw);}
 100%{opacity:1;transform: translate(10vw, 10vw);}
}
/* e --------- */
.animation07 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation07 7s ease-in alternate forwards;
 -webkit-animation:animation07 7s ease-in 0s forwards;
}
@-webkit-keyframes animation07 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:0;transform: translate(0vw, 10vw);}
 30%{opacity:0;transform: translate(10vw, 10vw);}
 35%{opacity:1;transform: translate(20vw, 10vw);}
 100%{opacity:1;transform: translate(20vw, 10vw);}
}
@keyframes animation07 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:0;transform: translate(0vw, 10vw);}
 30%{opacity:0;transform: translate(10vw, 10vw);}
 35%{opacity:1;transform: translate(20vw, 10vw);}
 100%{opacity:1;transform: translate(20vw, 10vw);}
}
/* i --------- */
.animation08 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation08 7s ease-in alternate forwards;
 -webkit-animation:animation08 7s ease-in 0s forwards;
}
@-webkit-keyframes animation08 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:1;transform: translate(0vw, 20vw);}
 100%{opacity:1;transform: translate(0vw, 20vw);}
}
@keyframes animation08 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:1;transform: translate(0vw, 20vw);}
 100%{opacity:1;transform: translate(0vw, 20vw);}
}
/* d --------- */
.animation09 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation09 7s ease-in alternate forwards;
 -webkit-animation:animation09 7s ease-in 0s forwards;
}
@-webkit-keyframes animation09 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:1;transform: translate(10vw, 20vw);}
 100%{opacity:1;transform: translate(10vw, 20vw);}
}
@keyframes animation09 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:1;transform: translate(10vw, 20vw);}
 100%{opacity:1;transform: translate(10vw, 20vw);}
}
/* e --------- */
.animation10 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation10 7s ease-in alternate forwards;
 -webkit-animation:animation10 7s ease-in 0s forwards;
}
@-webkit-keyframes animation10 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:1;transform: translate(20vw, 20vw);}
 100%{opacity:1;transform: translate(20vw, 20vw);}
}
@keyframes animation10 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:1;transform: translate(20vw, 20vw);}
 100%{opacity:1;transform: translate(20vw, 20vw);}
}
/* a --------- */
.animation11 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation11 7s ease-in alternate forwards;
 -webkit-animation:animation11 7s ease-in 0s forwards;
}
@-webkit-keyframes animation11 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:0;transform: translate(20vw, 20vw);}
 50%{opacity:1;transform: translate(30vw, 20vw);}
 100%{opacity:1;transform: translate(30vw, 20vw);}
}
@keyframes animation11 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:0;transform: translate(20vw, 20vw);}
 50%{opacity:1;transform: translate(30vw, 20vw);}
 100%{opacity:1;transform: translate(30vw, 20vw);}
}
/* . --------- */
.animation12 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation12 7s ease-in alternate forwards;
 -webkit-animation:animation12 7s ease-in 0s forwards;
}
@-webkit-keyframes animation12 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:0;transform: translate(20vw, 20vw);}
 50%{opacity:0;transform: translate(30vw, 20vw);}
 55%{opacity:1;transform: translate(40vw, 20vw);}
 100%{opacity:1;transform: translate(40vw, 20vw);}
}
@keyframes animation12 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:0;transform: translate(20vw, 20vw);}
 50%{opacity:0;transform: translate(30vw, 20vw);}
 55%{opacity:1;transform: translate(40vw, 20vw);}
 100%{opacity:1;transform: translate(40vw, 20vw);}
}

@media only screen and (max-width:800px) and (orientation:landscape) {
/* animation ------------------------------------------------------------ */
#top_tytle {
 width:30%;
 float:left;
 margin-top:2%;
}
/* h --------- */
.animation01 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation01 7s ease-in alternate forwards;
 -webkit-animation:animation01 7s ease-in 0s forwards;
}
@-webkit-keyframes animation01 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:1;transform: translate(0vw, 0vw);}
 100%{opacity:1;transform: translate(0vw, 0vw);}
}
@keyframes animation01 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:1;transform: translate(0vw, 0vw);}
 100%{opacity:1;transform: translate(0vw, 0vw);}
}
/* a --------- */
.animation02 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation02 7s ease-in alternate forwards;
 -webkit-animation:animation02 7s ease-in 0s forwards;
}
@-webkit-keyframes animation02 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:1;transform: translate(10vw, 0vw);}
 100%{opacity:1;transform: translate(10vw, 0vw);}
}
@keyframes animation02 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:1;transform: translate(10vw, 0vw);}
 100%{opacity:1;transform: translate(10vw, 0vw);}
}
/* v --------- */
.animation03 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation03 7s ease-in alternate forwards;
 -webkit-animation:animation03 7s ease-in 0s forwards;
}
@-webkit-keyframes animation03 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:1;transform: translate(20vw, 0vw);}
 100%{opacity:1;transform: translate(20vw, 0vw);}
}
@keyframes animation03 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:1;transform: translate(20vw, 0vw);}
 100%{opacity:1;transform: translate(20vw, 0vw);}
}
/* e --------- */
.animation04 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation04 7s ease-in alternate forwards;
 -webkit-animation:animation04 7s ease-in 0s forwards;
}
@-webkit-keyframes animation04 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:0;transform: translate(20vw, 0vw);}
 25%{opacity:1;transform: translate(30vw, 0vw);}
 100%{opacity:1;transform: translate(30vw, 0vw);}
}
@keyframes animation04 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:0;transform: translate(20vw, 0vw);}
 25%{opacity:1;transform: translate(30vw, 0vw);}
 100%{opacity:1;transform: translate(30vw, 0vw);}
}
/* t --------- */
.animation05 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation05 7s ease-in alternate forwards;
 -webkit-animation:animation05 7s ease-in 0s forwards;
}
@-webkit-keyframes animation05 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:1;transform: translate(0vw, 10vw);}
 100%{opacity:1;transform: translate(0vw, 10vw);}
}
@keyframes animation05 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:1;transform: translate(0vw, 10vw);}
 100%{opacity:1;transform: translate(0vw, 10vw);}
}
/* h --------- */
.animation06 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation06 7s ease-in alternate forwards;
 -webkit-animation:animation06 7s ease-in 0s forwards;
}
@-webkit-keyframes animation06 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:0;transform: translate(0vw, 10vw);}
 30%{opacity:1;transform: translate(10vw, 10vw);}
 100%{opacity:1;transform: translate(10vw, 10vw);}
}
@keyframes animation06 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:0;transform: translate(0vw, 10vw);}
 30%{opacity:1;transform: translate(10vw, 10vw);}
 100%{opacity:1;transform: translate(10vw, 10vw);}
}
/* e --------- */
.animation07 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation07 7s ease-in alternate forwards;
 -webkit-animation:animation07 7s ease-in 0s forwards;
}
@-webkit-keyframes animation07 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:0;transform: translate(0vw, 10vw);}
 30%{opacity:0;transform: translate(10vw, 10vw);}
 35%{opacity:1;transform: translate(20vw, 10vw);}
 100%{opacity:1;transform: translate(20vw, 10vw);}
}
@keyframes animation07 {
 0%{opacity:0;transform: translate(-100vw, 10vw);}
 20%{opacity:0;transform: translate(-100vw, 10vw);}
 25%{opacity:0;transform: translate(0vw, 10vw);}
 30%{opacity:0;transform: translate(10vw, 10vw);}
 35%{opacity:1;transform: translate(20vw, 10vw);}
 100%{opacity:1;transform: translate(20vw, 10vw);}
}
/* i --------- */
.animation08 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation08 7s ease-in alternate forwards;
 -webkit-animation:animation08 7s ease-in 0s forwards;
}
@-webkit-keyframes animation08 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:1;transform: translate(0vw, 20vw);}
 100%{opacity:1;transform: translate(0vw, 20vw);}
}
@keyframes animation08 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:1;transform: translate(0vw, 20vw);}
 100%{opacity:1;transform: translate(0vw, 20vw);}
}
/* d --------- */
.animation09 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation09 7s ease-in alternate forwards;
 -webkit-animation:animation09 7s ease-in 0s forwards;
}
@-webkit-keyframes animation09 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:1;transform: translate(10vw, 20vw);}
 100%{opacity:1;transform: translate(10vw, 20vw);}
}
@keyframes animation09 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:1;transform: translate(10vw, 20vw);}
 100%{opacity:1;transform: translate(10vw, 20vw);}
}
/* e --------- */
.animation10 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation10 7s ease-in alternate forwards;
 -webkit-animation:animation10 7s ease-in 0s forwards;
}
@-webkit-keyframes animation10 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:1;transform: translate(20vw, 20vw);}
 100%{opacity:1;transform: translate(20vw, 20vw);}
}
@keyframes animation10 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:1;transform: translate(20vw, 20vw);}
 100%{opacity:1;transform: translate(20vw, 20vw);}
}
/* a --------- */
.animation11 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation11 7s ease-in alternate forwards;
 -webkit-animation:animation11 7s ease-in 0s forwards;
}
@-webkit-keyframes animation11 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:0;transform: translate(20vw, 20vw);}
 50%{opacity:1;transform: translate(30vw, 20vw);}
 100%{opacity:1;transform: translate(30vw, 20vw);}
}
@keyframes animation11 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:0;transform: translate(20vw, 20vw);}
 50%{opacity:1;transform: translate(30vw, 20vw);}
 100%{opacity:1;transform: translate(30vw, 20vw);}
}
/* . --------- */
.animation12 {
 position:absolute;
 top:5%;
 left:0;
 height:5vw;
 animation: animation12 7s ease-in alternate forwards;
 -webkit-animation:animation12 7s ease-in 0s forwards;
}
@-webkit-keyframes animation12 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:0;transform: translate(20vw, 20vw);}
 50%{opacity:0;transform: translate(30vw, 20vw);}
 55%{opacity:1;transform: translate(40vw, 20vw);}
 100%{opacity:1;transform: translate(40vw, 20vw);}
}
@keyframes animation12 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 30%{opacity:0;transform: translate(-100vw, 20vw);}
 35%{opacity:0;transform: translate(0vw, 20vw);}
 40%{opacity:0;transform: translate(10vw, 20vw);}
 45%{opacity:0;transform: translate(20vw, 20vw);}
 50%{opacity:0;transform: translate(30vw, 20vw);}
 55%{opacity:1;transform: translate(40vw, 20vw);}
 100%{opacity:1;transform: translate(40vw, 20vw);}
}
}

@media only screen and (max-width:800px) and (orientation:portrait) {
#top_tytle {
 width:30%;
 float:left;
 margin-top:2%;
}
/* h --------- */
.animation01 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation01 7s ease-in alternate forwards;
 -webkit-animation:animation01 7s ease-in 0s forwards;
}
@-webkit-keyframes animation01 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:1;transform: translate(0vw, 0vw);}
 100%{opacity:1;transform: translate(0vw, 0vw);}
}
@keyframes animation01 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:1;transform: translate(0vw, 0vw);}
 100%{opacity:1;transform: translate(0vw, 0vw);}
}
/* a --------- */
.animation02 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation02 7s ease-in alternate forwards;
 -webkit-animation:animation02 7s ease-in 0s forwards;
}
@-webkit-keyframes animation02 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:1;transform: translate(10vw, 0vw);}
 100%{opacity:1;transform: translate(10vw, 0vw);}
}
@keyframes animation02 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:1;transform: translate(10vw, 0vw);}
 100%{opacity:1;transform: translate(10vw, 0vw);}
}
/* v --------- */
.animation03 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation03 7s ease-in alternate forwards;
 -webkit-animation:animation03 7s ease-in 0s forwards;
}
@-webkit-keyframes animation03 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:1;transform: translate(20vw, 0vw);}
 100%{opacity:1;transform: translate(20vw, 0vw);}
}
@keyframes animation03 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:1;transform: translate(20vw, 0vw);}
 100%{opacity:1;transform: translate(20vw, 0vw);}
}
/* e --------- */
.animation04 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation04 7s ease-in alternate forwards;
 -webkit-animation:animation04 7s ease-in 0s forwards;
}
@-webkit-keyframes animation04 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:0;transform: translate(20vw, 0vw);}
 25%{opacity:1;transform: translate(30vw, 0vw);}
 100%{opacity:1;transform: translate(30vw, 0vw);}
}
@keyframes animation04 {
 0%{opacity:0;transform: translate(-100vw, 0vw);}
 10%{opacity:0;transform: translate(0vw, 0vw);}
 15%{opacity:0;transform: translate(10vw, 0vw);}
 20%{opacity:0;transform: translate(20vw, 0vw);}
 25%{opacity:1;transform: translate(30vw, 0vw);}
 100%{opacity:1;transform: translate(30vw, 0vw);}
}
/* t --------- */
.animation05 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation05 7s ease-in alternate forwards;
 -webkit-animation:animation05 7s ease-in 0s forwards;
}
@-webkit-keyframes animation05 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 20%{opacity:0;transform: translate(-100vw, 20vw);}
 25%{opacity:1;transform: translate(0vw, 20vw);}
 100%{opacity:1;transform: translate(0vw, 20vw);}
}
@keyframes animation05 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 20%{opacity:0;transform: translate(-100vw, 20vw);}
 25%{opacity:1;transform: translate(0vw, 20vw);}
 100%{opacity:1;transform: translate(0vw, 20vw);}
}
/* h --------- */
.animation06 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation06 7s ease-in alternate forwards;
 -webkit-animation:animation06 7s ease-in 0s forwards;
}
@-webkit-keyframes animation06 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 20%{opacity:0;transform: translate(-100vw, 20vw);}
 25%{opacity:0;transform: translate(0vw, 20vw);}
 30%{opacity:1;transform: translate(10vw, 20vw);}
 100%{opacity:1;transform: translate(10vw, 20vw);}
}
@keyframes animation06 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 20%{opacity:0;transform: translate(-100vw, 20vw);}
 25%{opacity:0;transform: translate(0vw, 20vw);}
 30%{opacity:1;transform: translate(10vw, 20vw);}
 100%{opacity:1;transform: translate(10vw, 20vw);}
}
/* e --------- */
.animation07 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation07 7s ease-in alternate forwards;
 -webkit-animation:animation07 7s ease-in 0s forwards;
}
@-webkit-keyframes animation07 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 20%{opacity:0;transform: translate(-100vw, 20vw);}
 25%{opacity:0;transform: translate(0vw, 20vw);}
 30%{opacity:0;transform: translate(10vw, 20vw);}
 35%{opacity:1;transform: translate(20vw, 20vw);}
 100%{opacity:1;transform: translate(20vw, 20vw);}
}
@keyframes animation07 {
 0%{opacity:0;transform: translate(-100vw, 20vw);}
 20%{opacity:0;transform: translate(-100vw, 20vw);}
 25%{opacity:0;transform: translate(0vw, 20vw);}
 30%{opacity:0;transform: translate(10vw, 20vw);}
 35%{opacity:1;transform: translate(20vw, 20vw);}
 100%{opacity:1;transform: translate(20vw, 20vw);}
}
/* i --------- */
.animation08 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation08 7s ease-in alternate forwards;
 -webkit-animation:animation08 7s ease-in 0s forwards;
}
@-webkit-keyframes animation08 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:1;transform: translate(0vw, 40vw);}
 100%{opacity:1;transform: translate(0vw, 40vw);}
}
@keyframes animation08 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:1;transform: translate(0vw, 40vw);}
 100%{opacity:1;transform: translate(0vw, 40vw);}
}
/* d --------- */
.animation09 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation09 7s ease-in alternate forwards;
 -webkit-animation:animation09 7s ease-in 0s forwards;
}
@-webkit-keyframes animation09 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:0;transform: translate(0vw, 40vw);}
 40%{opacity:1;transform: translate(10vw, 40vw);}
 100%{opacity:1;transform: translate(10vw, 40vw);}
}
@keyframes animation09 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:0;transform: translate(0vw, 40vw);}
 40%{opacity:1;transform: translate(10vw, 40vw);}
 100%{opacity:1;transform: translate(10vw, 40vw);}
}
/* e --------- */
.animation10 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation10 7s ease-in alternate forwards;
 -webkit-animation:animation10 7s ease-in 0s forwards;
}
@-webkit-keyframes animation10 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:0;transform: translate(0vw, 40vw);}
 40%{opacity:0;transform: translate(10vw, 40vw);}
 45%{opacity:1;transform: translate(20vw, 40vw);}
 100%{opacity:1;transform: translate(20vw, 40vw);}
}
@keyframes animation10 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:0;transform: translate(0vw, 40vw);}
 40%{opacity:0;transform: translate(10vw, 40vw);}
 45%{opacity:1;transform: translate(20vw, 40vw);}
 100%{opacity:1;transform: translate(20vw, 40vw);}
}
/* a --------- */
.animation11 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation11 7s ease-in alternate forwards;
 -webkit-animation:animation11 7s ease-in 0s forwards;
}
@-webkit-keyframes animation11 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:0;transform: translate(0vw, 40vw);}
 40%{opacity:0;transform: translate(10vw, 40vw);}
 45%{opacity:0;transform: translate(20vw, 40vw);}
 50%{opacity:1;transform: translate(30vw, 40vw);}
 100%{opacity:1;transform: translate(30vw, 40vw);}
}
@keyframes animation11 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:0;transform: translate(0vw, 40vw);}
 40%{opacity:0;transform: translate(10vw, 40vw);}
 45%{opacity:0;transform: translate(20vw, 40vw);}
 50%{opacity:1;transform: translate(30vw, 40vw);}
 100%{opacity:1;transform: translate(30vw, 40vw);}
}
/* . --------- */
.animation12 {
 position:absolute;
 top:5%;
 left:0;
 height:10vw;
 animation: animation12 7s ease-in alternate forwards;
 -webkit-animation:animation12 7s ease-in 0s forwards;
}
@-webkit-keyframes animation12 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:0;transform: translate(0vw, 40vw);}
 40%{opacity:0;transform: translate(10vw, 40vw);}
 45%{opacity:0;transform: translate(20vw, 40vw);}
 50%{opacity:0;transform: translate(30vw, 40vw);}
 55%{opacity:1;transform: translate(40vw, 40vw);}
 100%{opacity:1;transform: translate(40vw, 40vw);}
}
@keyframes animation12 {
 0%{opacity:0;transform: translate(-100vw, 40vw);}
 30%{opacity:0;transform: translate(-100vw, 40vw);}
 35%{opacity:0;transform: translate(0vw, 40vw);}
 40%{opacity:0;transform: translate(10vw, 40vw);}
 45%{opacity:0;transform: translate(20vw, 40vw);}
 50%{opacity:0;transform: translate(30vw, 40vw);}
 55%{opacity:1;transform: translate(40vw, 40vw);}
 100%{opacity:1;transform: translate(40vw, 40vw);}
}
}