
#lt line,#ls path,#li line,#ln path,#le path,#lc path,#li2 line,#reg path,
#reg circle,#k1 path,#k3 path,#k2 path,#time line{animation: 7s linear 0s infinite;}



.body_white #bg path{fill: #fff;}
.body_black #bg path{fill: #8770f6;}

/** for WHITE SINTECO **/
.body_white #lt line,
.body_white #ls path,
.body_white #li line,
.body_white #ln path,
.body_white #le path,
.body_white #lc path,
.body_white #li2 line
{
  stroke:#000;
  stroke-width: 5;  
}



/** for BLACK SINTECO **/
.body_black #lt line,
.body_black #ls path,
.body_black #li line,
.body_black #ln path,
.body_black #le path,
.body_black #lc path,
.body_black #li2 line
{
  stroke:#fff;
  stroke-width: 5;  
}



 /** FON-SINTECO-CONTUR **/
.body_white #k3 path{stroke:#B3A6F5;}/** CONTUR-3 for WHITE **/
.body_black #k3 path{stroke:#000;}/** CONTUR-3 for BLACK **/


 /** PODLOJKA **/
.body_white #k1 path{stroke:#ccc;}/** CONTUR-1 for WHITE **/
.body_black #k1 path{stroke:#fff;}/** CONTUR-1 for BLACK **/

 /** BEGUNOK **/
.body_white #k2 path{stroke:#7CFA05;}/** CONTUR-2 for WHITE **/
.body_black #k2 path{stroke:#7CFA05;}/** CONTUR-2 for BLACK **/



.body_white #reg path,.body_white #reg circle {stroke:#000;}
.body_black #reg path,.body_black #reg circle {stroke:#fff;}



/**     REG   **/
#reg path,#reg circle{
 stroke-width: 1.5;
stroke-dasharray: 150;
stroke-dashoffset: 300 ;
animation-name: reg;
    }
#k1 path{
    stroke-width: 4;
    stroke-dasharray: 1600;
    stroke-dashoffset: 3200 ;
     animation-name: k1;
        }
#k2 path{
    stroke-width: 4.3;
    stroke-dasharray: 1600;
    stroke-dashoffset: 3200 ;
    animation-name: k2;
}

#k3 path{
    stroke-width: 5;
    stroke-dasharray: 1600;/** Длинна отрезка **/
    stroke-dashoffset: 3200 ;/** Длинна замены**/
    animation-name: f1;
        }
/**     S   **//**     S   **/
#ls path{
stroke-dasharray: 150;/** Длинна отрезка **/
stroke-dashoffset: 300 ;/** Длинна замены**/
animation-name: lls;
}

/**     T **/
#lt line{
stroke-dasharray: 100;/** Длинна отрезка **/
stroke-dashoffset: 200 ;/** Длинна замены**/
animation-name: llt;
    }
/**     I   **/
#li line{
stroke-dasharray: 150;/** Длинна отрезка **/
stroke-dashoffset: 300 ;/** Длинна замены**/
animation-name: lli;
    }
/**     I2   **/
#li2 line{
stroke-dasharray: 150;/** Длинна отрезка **/
stroke-dashoffset: 300 ;/** Длинна замены**/
animation-name: lli2;}
/**     N   **/
#ln path{
stroke-dasharray: 150;/** Длинна отрезка **/
stroke-dashoffset: 300 ;/** Длинна замены**/
animation-name: lln;
}
/**     E   **/
#le path{
stroke-dasharray: 300;/** Длинна отрезка **/
stroke-dashoffset: 600 ;/** Длинна замены**/
animation-name: lle;
    }

/**     C   **/
#lc path{
stroke-dasharray: 150;/** Длинна отрезка **/
stroke-dashoffset: 300 ;/** Длинна замены**/
animation-name: llc;}



@keyframes k1 {
0% { stroke-dashoffset: 2000; }    
30% { stroke-dashoffset: 2350; }
40% { stroke-dashoffset: 3200; }
95% { stroke-dashoffset: 3200; }
100% { stroke-dashoffset: 2000; } 
}
@keyframes k2 {
    0% { stroke-dashoffset: 1600; }    
    2% { stroke-dashoffset: 1890; }
    33% { stroke-dashoffset: 2350; }/** длинна белого **/
    36% { stroke-dashoffset: 3200; }
    90% { stroke-dashoffset: 3200; }
    100% { stroke-dashoffset: 1600; } 
}
@keyframes f1 {
  0% { stroke-dashoffset: 1600; }
  4% { stroke-dashoffset: 1890; }
  35% { stroke-dashoffset: 2350; }
  40% { stroke-dashoffset: 3200; }
  95% { stroke-dashoffset: 3200; }
  100% { stroke-dashoffset: 1600; }
  
}
@keyframes lls {
  0% { stroke-dashoffset: 150; }
  4% { stroke-dashoffset: 150; }
  20% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes llt {
  0% { stroke-dashoffset: 100; }
  28% { stroke-dashoffset: 100; }
  44% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes lli {
  0% { stroke-dashoffset: 150; }
  13% { stroke-dashoffset: 150; }
  30% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes lli2 {
  0% { stroke-dashoffset: 150; }
  12% { stroke-dashoffset: 150; }
  30% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes lln {
  0% { stroke-dashoffset: 150; }
  13% { stroke-dashoffset: 150; }
  30% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes lle {
  0% { stroke-dashoffset: 300; }
  18% { stroke-dashoffset: 300; }
  30% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}    
@keyframes llc {
  0% { stroke-dashoffset: 150; }
  33% { stroke-dashoffset: 150; }
  55% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes reg {
  0% { stroke-dashoffset: 150; }
  40% { stroke-dashoffset: 150; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}









/** *********** time ************************************ **/
#time line{
    stroke:rgb(158, 158, 158);
    stroke-width: 0.2;
    stroke-dasharray: 250;/** Длинна отрезка **/
    stroke-dashoffset: 500 ;
    animation-name: time2;
    display: none;
 }
 @keyframes time2 {
  0% { stroke-dashoffset: 250; }
  100% { stroke-dashoffset: 0; }
}



