@charset "utf-8";
#slideshow {
position: relative;
width: 1920px;
height: 400px;
}

#sl_i1 {
    position: fixed;
    top: 2000px;
    right: 3000px;

}

/* annulation des marges sur figure */

figure {
    display: inline-block;
    /* Float left marchait aussi mais j'ai finalement utilisé
       les commentaires html entre les images pour supprimer l'espace */
    /*float: left;*/
}

/* gestion des dimensions et débordement du conteneur */

#slideshow .cell_slideshow {
position:relative;
width: 1920px;
height: 400px;
overflow: hidden;
}

/* on prévoit un petit espace gris pour la timeline */
#slideshow .cell_slideshow:after {
position:absolute;
bottom: 0; left:0;
width: 100%;
height: 2px; 
}

/*
le conteneur des slides
en largeur il fait 100% x le nombre de slides 
*/

#slideshow .slider {
position: absolute;
left:0; top:0;
width: 1400%;
height: 400px;
}

/* petit effet de vignette sur les images */
/*#slideshow figure:after{
position: absolute;
display:block;
content: " ";
top:0; left:0;
width: 704px; height: 100%;
box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}*/
/* fonction d'animation, n'oubliez pas de prefixer ! */

@-webkit-keyframes slider{
0%, 5%, 100%   { left: 0 }
7%, 12%        { left: -100% }
14%, 19%        { left: -200% }
21%, 27%        { left: -300% }
29%, 33%        { left: -400% }
35%, 41%        { left: -500% }
43%, 48%        { left: -600% }
50%, 55%        { left: -700% }
57%, 62%        { left: -800% }
64%, 69%        { left: -900% }
71%, 77%        { left: -1000% }
79%, 84%        { left: -1100% }
86%, 91%        { left: -1200% }
93%, 98%        { left: -1300% }
}
@-moz-keyframes slider{
0%, 5%, 100%   { left: 0 }
7%, 12%        { left: -100% }
14%, 19%        { left: -200% }
21%, 27%        { left: -300% }
29%, 33%        { left: -400% }
35%, 41%        { left: -500% }
43%, 48%        { left: -600% }
50%, 55%        { left: -700% }
57%, 62%        { left: -800% }
64%, 69%        { left: -900% }
71%, 77%        { left: -1000% }
79%, 84%        { left: -1100% }
86%, 91%        { left: -1200% }
93%, 98%        { left: -1300% }
}
@keyframes slider{
0%, 5%, 100%   { left: 0 }
7%, 12%        { left: -100% }
14%, 19%        { left: -200% }
21%, 27%        { left: -300% }
29%, 33%        { left: -400% }
35%, 41%        { left: -500% }
43%, 48%        { left: -600% }
50%, 55%        { left: -700% }
57%, 62%        { left: -800% }
64%, 69%        { left: -900% }
71%, 77%        { left: -1000% }
79%, 84%        { left: -1100% }
86%, 91%        { left: -1200% }
93%, 98%        { left: -1300% }
}

/* complétez le sélecteur : */
#slideshow .slider{
/* ... avec la propriété animation */
-webkit-animation: slider 140s infinite;
-moz-animation: slider 140s infinite;
animation: slider 140s infinite;
}

/* Affichage de la ligne du temps */

#timeline {  
position: absolute;
background: #999;
bottom: 0px;
left: 0px;
height: 2px;
background: rgb(214,98,13);
background: rgba(214,98,13,.8);
width: 0;  
/* fonction d'animation */
-webkit-animation: timeliner 140s infinite;
-moz-animation: timeliner 140s infinite;
animation: timeliner 140s infinite;
}

/* Annimation de la ligne du temps */

@-webkit-keyframes timeliner {
    0%, 7%, 14%, 21%, 29%, 35%, 43%, 50%, 57%, 64%, 71%, 79%, 86%, 93%, 100% { width: 0;      }
    5%, 12%, 19%, 27%, 33%, 41%, 48%, 55%, 62%, 69%, 77%, 84%, 91%, 98%      { width: 1920px; }
}

@-moz-keyframes timeliner {
    0%, 7%, 14%, 21%, 29%, 35%, 43%, 50%, 57%, 64%, 71%, 79%, 86%, 93%, 100% { width: 0;      }
    5%, 12%, 19%, 27%, 33%, 41%, 48%, 55%, 62%, 69%, 77%, 84%, 91%, 98%      { width: 1920px; }
}
@keyframes timeliner {
    0%, 7%, 14%, 21%, 29%, 35%, 43%, 50%, 57%, 64%, 71%, 79%, 86%, 93%, 100% { width: 0;      }
    5%, 12%, 19%, 27%, 33%, 41%, 48%, 55%, 62%, 69%, 77%, 84%, 91%, 98%      { width: 1920px; }
}

.play_commands {
/* positionnement en haut à droite */ 
position: absolute;
top: 25px; right: 25px;
z-index: 1;
/* dimensionnement des icônes */
width: 22px;
height: 22px;
text-indent: -9999px;
border:0 none;
/* placez l'opacité à 1 si vous souhaitez voir les commandes */
opacity: 0;
/* préparation de transition sur opacicty et right */
-webkit-transition: opacity 1s, right 1s;
-moz-transition: opacity 1s, right 1s;
transition: opacity 1s, right 1s;
}  
/* on décale play légèrement sur la gauche */
.play { right: 55px; cursor: default; }

/* création de l'icône pause avec 2 pseudos éléments */
.pause:after,
.pause:before {
position: absolute;
display: block;
content: " ";
top:0;
width:38%;
height: 22px;
background: #fff;
background: rgba(255,255,255,0.5);
}
.pause:after { right:0; }
.pause:before { left:0; }

/* création de l'icône play avec des bordures */
.play {
width: 1px;
height: 1px;
/* les transparentes forment la flèche */
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid #fff;
border-left: 20px solid rgba(255,255,255,0.5);
/* renseignez 1 pour voir l'icône de suite */
opacity: 0;
}

/* apparition du bouton pause au survole */
/* apparition des boutons au focus */
#slideshow:hover .pause,
.play_commands:focus {
opacity: 1;
outline: none;
}

/* stopper les animation */
.sl_command:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .slider,
.sl_command:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow figcaption,
.sl_command:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow #timeline,
.sl_command:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:after {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
   
/* redémarrer les animations */
#sl_play:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .slider,
#sl_play:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow figcaption,
#sl_play:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow #timeline,
#sl_play:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:after {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
   
/* switch entre les boutons */
.sl_command:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .pause      { opacity:0; }
#sl_play:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow:hover .pause,
#sl_play:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .pause:focus   { opacity:1; }
.sl_command:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .play       { opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .play          { opacity:0; right: 55px; cursor: default; }

#slideshow .commands {
    position: absolute;
    top: 45%;
    padding: 5px 13px;
    border-bottom:0;
    font-size: 1.3em;
    color: #aaa;
    text-decoration:none;
    background-color: #eee;
    background-image: linear-gradient(#fff,#ddd);
    text-shadow: 0 0 1px #aaa;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

#slideshow .c_slider {
position: absolute;
left:0; top:0;
width: 1300%;
height: 400px;
/* multiple background */
background: url(../images/slides/pub_iyoyo_passion_2021_05_07.jpg) 0 0 no-repeat,
            url(../images/slides/pub_yoyofactory_element_2021_04_27.jpg) 1920px 0 no-repeat,
            url(../images/slides/pub_iyoyo_impact_2021_04_27.jpg) 3840px 0 no-repeat,
            url(../images/slides/pub_iyoyo_nightmoves_x_2021_04_26.jpg) 5760px 0 no-repeat,
            url(../images/slides/pub_iyoyo_iceberg_2021_04_21.jpg) 7680px 0 no-repeat,
            url(../images/slides/pub_iyoyo_shooting_star_2021_04_25.jpg) 9600px 0 no-repeat,
            url(../images/slides/pub_yoyofactory_flame_2020_12_20.jpg) 11520px 0 no-repeat,
            url(../images/slides/pub_iyoyo_pyro_x_2020_05_24.jpg) 13440px 0 no-repeat,
            url(../images/slides/pub_yoyofactory_overthrow_2020_05_07.jpg) 15360px 0 no-repeat,
            url(../images/slides/pub_frais_port.gif) 17280px 0 no-repeat,
            url(../images/slides/pub_colis.gif) 19200px 0 no-repeat,
            url(../images/slides/pub_commande_24h.gif) 21120px 0 no-repeat,
            url(../images/slides/pub_packs.gif) 23040px 0 no-repeat,
            url(../images/slides/pub_twitter.gif) 24960px 0 no-repeat;
-webkit-transition: background 1s;
-moz-transition: background 1s;
transition: background 1s;
}

/* on cache le slider */  
.sl_i:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .slider                                   { visibility: hidden }  
/* on planque la 1ère pastille (cf. bonux suivant) */  
.sl_i:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:after     { display:none; }  
/* pour afficher la 2ème pastille (cf. bonux suivant) */  
.sl_i:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before    { display:block; }  
   
/* lorsque on cible le premier slider */   
/* correspond au décalage des images */  
#sl_i1:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0, 11520px 0, 13440px 0, 15360px 0, 17280px 0, 19200px 0, 21120px 0, 23040px 0, 24960px 0; }  
/* on place la pastille tout à gauche */  
#sl_i1:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:0; }  
   
/* même procédé lorsqu'on cible le second slide */    
#sl_i2:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0, 11520px 0, 13440px 0, 15360px 0, 17280px 0, 19200px 0, 21120px 0, 23040px 0; }  
#sl_i2:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:18px; }  
   
/* puis le 3ème */   
#sl_i3:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0, 11520px 0, 13440px 0, 15360px 0, 17280px 0, 19200px 0, 21120px 0; }  
#sl_i3:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:36px; }

/* le 4ème */   
#sl_i4:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0, 11520px 0, 13440px 0, 15360px 0, 17280px 0, 19200px 0; }  
#sl_i4:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:54px; }

/* le 5ème */   
#sl_i5:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0, 11520px 0, 13440px 0, 15360px 0, 17280px 0; }  
#sl_i5:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:72px; }

/* le 6ème */   
#sl_i6:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0, 11520px 0, 13440px 0, 15360px 0; }  
#sl_i6:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:90px; }

/* le 7ème */   
#sl_i7:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -11520px 0, -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0, 11520px 0, 13440px 0; }  
#sl_i7:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:108px; }

/* le 8ème */   
#sl_i8:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -13440px 0, -11520px 0, -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0, 11520px 0; }  
#sl_i8:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:126px; }

/* le 9ème */   
#sl_i9:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -15360px 0, -13440px 0, -11520px 0, -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0, 9600px 0; }  
#sl_i9:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:144px; }

/* le 10ème */   
#sl_i10:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -17280px 0, -15360px 0, -13440px 0, -11520px 0, -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0, 7680px 0; }  
#sl_i10:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:162px; }

/* le 11ème */   
#sl_i11:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -19200px 0, -17280px 0, -15360px 0, -13440px 0, -11520px 0, -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0, 5760px 0; }  
#sl_i11:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:180px; }

/* le 12ème */   
#sl_i12:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -21120px 0,-19200px 0, -17280px 0, -15360px 0, -13440px 0, -11520px 0, -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0, 3840px 0; }  
#sl_i12:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:198px; }

/* le 13ème */   
#sl_i13:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -23040px 0, -21120px 0,-19200px 0, -17280px 0, -15360px 0, -13440px 0, -11520px 0, -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0, 1920px 0; }  
#sl_i13:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:216px; }

/* et le 14ème */   
#sl_i13:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .c_slider                                { background-position: -24960px 0, -23040px 0, -21120px 0,-19200px 0, -17280px 0, -15360px 0, -13440px 0, -11520px 0, -9600px 0, -7680px 0, -5760px 0, -3840px 0, -1920px 0, 0 0; }  
#sl_i13:target ~ .index__main_slider_layout .index__main_slider_slide #slideshow .dots_commands li:first-child a:before   { left:234px; }

/* Gestion des points : */

.dots_commands  {  
    padding:0;  
    margin: 5px 20px 0;  
    text-align: right;
}  
.dots_commands li {  
    display: inline;  
    padding:0; margin:0;  
}  
.dots_commands a {  
    position: relative;  
    display: inline-block;  
    height:8px; width: 8px;  
    margin: 0 5px;  
    text-indent: 9999px;  
    background: #fff;  
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}  
/* quelques styles au focus */  
.dots_commands a:focus {   
    outline: none;  
    background: #FEB700;  
}
.dots_commands li:first-child a { z-index: 1; }

/* on style after et before, on utilisera les deux */  
.dots_commands li:first-child a:after,  
.dots_commands li:first-child a:before {  
    position: absolute;  
    top: 0; left: 0;  
    content: " ";  
    width: 8px; height: 8px;  
    background: #FF8400;  
    z-index: 1;  
  
    border-radius: 50%;  
    box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
}  
/* on anime "after" */  
.dots_commands li:first-child a:after {  
    -moz-animation: dotser 140s infinite;
    -webkit-animation: dotser 140s infinite;
    animation: dotser 140s infinite;
}  
/* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */  
.dots_commands li:first-child a:before { display:none; } 
   
/* c'est parti pour l'animation ! */

@-moz-keyframes dotser {
    0%, 100%    { opacity: 1; left: 0;      }

    5%         { opacity: 1; left: 0;      }
    6%         { opacity: 0; left: 0;      }
    6%         { opacity: 0; left: 18px;   }
    7%         { opacity: 1; left: 18px;   }

    12%         { opacity: 1; left: 18px;   }
    13%         { opacity: 0; left: 18px;   }
    13%         { opacity: 0; left: 36px;   }
    14%         { opacity: 1; left: 36px;   }

    19%         { opacity: 1; left: 36px;   }
    20%         { opacity: 0; left: 36px;   }
    20%         { opacity: 0; left: 54px;   }
    21%         { opacity: 1; left: 54px;   }

    27%         { opacity: 1; left: 54px;   }
    28%         { opacity: 0; left: 54px;   }
    28%         { opacity: 0; left: 72px;   }
    29%         { opacity: 1; left: 72px;   }

    33%         { opacity: 1; left: 72px;   }
    34%         { opacity: 0; left: 72px;   }
    34%         { opacity: 0; left: 90px;   }
    35%         { opacity: 1; left: 90px;   }

    41%         { opacity: 1; left: 90px;   }
    42%         { opacity: 0; left: 90px;   }
    42%         { opacity: 0; left: 108px;   }
    43%         { opacity: 1; left: 108px;   }

    48%         { opacity: 1; left: 108px;   }
    49%         { opacity: 0; left: 108px;   }
    49%         { opacity: 0; left: 126px;   }
    50%         { opacity: 1; left: 126px;   }

    55%         { opacity: 1; left: 126px;   }
    56%         { opacity: 0; left: 126px;   }
    56%         { opacity: 0; left: 144px;   }
    57%         { opacity: 1; left: 144px;   }

    62%         { opacity: 1; left: 144px;   }
    63%         { opacity: 0; left: 144px;   }
    63%         { opacity: 0; left: 162px;   }
    64%         { opacity: 1; left: 162px;   }

    69%         { opacity: 1; left: 162px;   }
    70%         { opacity: 0; left: 162px;   }
    70%         { opacity: 0; left: 180px;   }
    71%         { opacity: 1; left: 180px;   }

    77%         { opacity: 1; left: 180px;   }
    78%         { opacity: 0; left: 180px;   }
    78%         { opacity: 0; left: 198px;   }
    79%         { opacity: 1; left: 198px;   }

    84%         { opacity: 1; left: 198px;   }
    85%         { opacity: 0; left: 198px;   }
    85%         { opacity: 0; left: 216px;   }
    86%         { opacity: 1; left: 216px;   }

    91%         { opacity: 1; left: 216px;   }
    92%         { opacity: 0; left: 216px;   }
    92%         { opacity: 0; left: 234px;   }
    93%         { opacity: 1; left: 234px;   }

    98%         { opacity: 1; left: 234px;   }
    99%         { opacity: 0; left: 234px;   }
    99%         { opacity: 0; left: 0;  }
}
@-webkit-keyframes dotser {
    0%, 100%    { opacity: 1; left: 0;      }

    5%         { opacity: 1; left: 0;      }
    6%         { opacity: 0; left: 0;      }
    6%         { opacity: 0; left: 18px;   }
    7%         { opacity: 1; left: 18px;   }

    12%         { opacity: 1; left: 18px;   }
    13%         { opacity: 0; left: 18px;   }
    13%         { opacity: 0; left: 36px;   }
    14%         { opacity: 1; left: 36px;   }

    19%         { opacity: 1; left: 36px;   }
    20%         { opacity: 0; left: 36px;   }
    20%         { opacity: 0; left: 54px;   }
    21%         { opacity: 1; left: 54px;   }

    27%         { opacity: 1; left: 54px;   }
    28%         { opacity: 0; left: 54px;   }
    28%         { opacity: 0; left: 72px;   }
    29%         { opacity: 1; left: 72px;   }

    33%         { opacity: 1; left: 72px;   }
    34%         { opacity: 0; left: 72px;   }
    34%         { opacity: 0; left: 90px;   }
    35%         { opacity: 1; left: 90px;   }

    41%         { opacity: 1; left: 90px;   }
    42%         { opacity: 0; left: 90px;   }
    42%         { opacity: 0; left: 108px;   }
    43%         { opacity: 1; left: 108px;   }

    48%         { opacity: 1; left: 108px;   }
    49%         { opacity: 0; left: 108px;   }
    49%         { opacity: 0; left: 126px;   }
    50%         { opacity: 1; left: 126px;   }

    55%         { opacity: 1; left: 126px;   }
    56%         { opacity: 0; left: 126px;   }
    56%         { opacity: 0; left: 144px;   }
    57%         { opacity: 1; left: 144px;   }

    62%         { opacity: 1; left: 144px;   }
    63%         { opacity: 0; left: 144px;   }
    63%         { opacity: 0; left: 162px;   }
    64%         { opacity: 1; left: 162px;   }

    69%         { opacity: 1; left: 162px;   }
    70%         { opacity: 0; left: 162px;   }
    70%         { opacity: 0; left: 180px;   }
    71%         { opacity: 1; left: 180px;   }

    77%         { opacity: 1; left: 180px;   }
    78%         { opacity: 0; left: 180px;   }
    78%         { opacity: 0; left: 198px;   }
    79%         { opacity: 1; left: 198px;   }

    84%         { opacity: 1; left: 198px;   }
    85%         { opacity: 0; left: 198px;   }
    85%         { opacity: 0; left: 216px;   }
    86%         { opacity: 1; left: 216px;   }

    91%         { opacity: 1; left: 216px;   }
    92%         { opacity: 0; left: 216px;   }
    92%         { opacity: 0; left: 234px;   }
    93%         { opacity: 1; left: 234px;   }

    98%         { opacity: 1; left: 234px;   }
    99%         { opacity: 0; left: 234px;   }
    99%         { opacity: 0; left: 0;  }
}
@keyframes dotser {
    0%, 100%    { opacity: 1; left: 0;      }

    5%         { opacity: 1; left: 0;      }
    6%         { opacity: 0; left: 0;      }
    6%         { opacity: 0; left: 18px;   }
    7%         { opacity: 1; left: 18px;   }

    12%         { opacity: 1; left: 18px;   }
    13%         { opacity: 0; left: 18px;   }
    13%         { opacity: 0; left: 36px;   }
    14%         { opacity: 1; left: 36px;   }

    19%         { opacity: 1; left: 36px;   }
    20%         { opacity: 0; left: 36px;   }
    20%         { opacity: 0; left: 54px;   }
    21%         { opacity: 1; left: 54px;   }

    27%         { opacity: 1; left: 54px;   }
    28%         { opacity: 0; left: 54px;   }
    28%         { opacity: 0; left: 72px;   }
    29%         { opacity: 1; left: 72px;   }

    33%         { opacity: 1; left: 72px;   }
    34%         { opacity: 0; left: 72px;   }
    34%         { opacity: 0; left: 90px;   }
    35%         { opacity: 1; left: 90px;   }

    41%         { opacity: 1; left: 90px;   }
    42%         { opacity: 0; left: 90px;   }
    42%         { opacity: 0; left: 108px;   }
    43%         { opacity: 1; left: 108px;   }

    48%         { opacity: 1; left: 108px;   }
    49%         { opacity: 0; left: 108px;   }
    49%         { opacity: 0; left: 126px;   }
    50%         { opacity: 1; left: 126px;   }

    55%         { opacity: 1; left: 126px;   }
    56%         { opacity: 0; left: 126px;   }
    56%         { opacity: 0; left: 144px;   }
    57%         { opacity: 1; left: 144px;   }

    62%         { opacity: 1; left: 144px;   }
    63%         { opacity: 0; left: 144px;   }
    63%         { opacity: 0; left: 162px;   }
    64%         { opacity: 1; left: 162px;   }

    69%         { opacity: 1; left: 162px;   }
    70%         { opacity: 0; left: 162px;   }
    70%         { opacity: 0; left: 180px;   }
    71%         { opacity: 1; left: 180px;   }

    77%         { opacity: 1; left: 180px;   }
    78%         { opacity: 0; left: 180px;   }
    78%         { opacity: 0; left: 198px;   }
    79%         { opacity: 1; left: 198px;   }

    84%         { opacity: 1; left: 198px;   }
    85%         { opacity: 0; left: 198px;   }
    85%         { opacity: 0; left: 216px;   }
    86%         { opacity: 1; left: 216px;   }

    91%         { opacity: 1; left: 216px;   }
    92%         { opacity: 0; left: 216px;   }
    92%         { opacity: 0; left: 234px;   }
    93%         { opacity: 1; left: 234px;   }

    98%         { opacity: 1; left: 234px;   }
    99%         { opacity: 0; left: 234px;   }
    99%         { opacity: 0; left: 0;  }
}