/*****************
0. SVG attributes
*****************/
svg .st0
{
        fill: #272829;
}

svg .st1
{
        fill:none;
        stroke: #272829;
        stroke-width: 1.3;
}

svg .st2
{
        fill: #ffffff;
}

svg .st3
{
        fill:none;
        stroke:#272829;
        stroke-width:1.3;
        stroke-dasharray:3.9,1.3;
}

/**************
1. UI Design
**************/

.ui_design #line_1{
        animation: ui_line_1 3s ease infinite;
}

.ui_design #line_2{
        animation: ui_line_2 3s ease infinite;
        animation-delay: 1.5s;
        -webkit-animation-delay: 1.5s;
}

.ui_design #line_3{
        animation: ui_line_3 3s ease infinite;
        animation-delay: 3s;
        -webkit-animation-delay: 3s;
}

@keyframes ui_line_1{
        0%{ 
                transform-origin: -22px 556px;
                transform: scaleX(0);
                
                
        }
        50%{ 
                transform-origin: -22px 556px;
                transform: scaleX(1);
                
        }
        50.1%{ 
                transform-origin: -15px 556px;
                transform: scaleX(1);
        }
        100%{ 
                transform-origin: -15px 556px;
                transform: scaleX(0);
          
        }
}

@keyframes ui_line_2{
        0%{ 
                transform-origin: -8px 563px;
                transform: scale(0,0);
                
                
        }
        50%{ 
                transform-origin: -8px 563px;
                transform: scale(1,1);
                
        }
        50.1%{ 
                transform-origin: 0px 556px;
                transform: scale(1,1);
        }
        100%{ 
                transform-origin: 0px 556px;
                transform: scale(0,0);
          
        }
}
@keyframes ui_line_3 {
        0%{ 
                transform-origin: 7px 563px;
                transform: scaleX(0);       
        }
        50%{ 
                transform-origin: 7px 563px;
                transform: scaleX(1);
                
        }
        50.1%{ 
                transform-origin: 22px 563px;
                transform: scaleX(1);
        }
        100%{ 
                transform-origin: 22px 563px;
                transform: scaleX(0);
          
        }
}

/**************
2. DLS
**************/
.dls #square_1{ 
        animation: dls_square_1 3s ease infinite;
        transform-origin: 7.875px 29.903px;
        transform: scaleY(0.8);
}

.dls #square_2{
        animation: dls_square_2 3s ease infinite;
        transform-origin: 62.125px 20.417px;
        transform: scaleX(1.6);
}

@keyframes dls_square_1{
        0%{ 
                transform: scaleY(0.8);   
        }
        20%{ 
                transform: scaleY(1.1);
        }
        50%{ 
                transform: scaleY(1.1);
        }       
        70%{ 
                transform: scaleY(0.8);
          
        }
}

@keyframes dls_square_2{
        0%{ 
                transform: scaleX(1.6);   
        }
        20%{ 
                transform: scaleX(0.8);
        }
        50%{ 
                transform: scaleX(0.8);
        }      
        70%{ 
                transform: scaleX(1.6);
          
        }
}

/*****************
3. Art Direction
*****************/

.art_direction #left{ 
        animation: art_direction_opacity 4.5s linear infinite;
}

.art_direction #middle{
        animation: art_direction_opacity 4.5s linear 1.5s infinite;
        animation-delay: 1.5s;
        -webkit-animation-delay: 1.5s;
}

.art_direction #right{
        animation: art_direction_opacity 4.5s linear 2s infinite;
        animation-delay: 3s;
        -webkit-animation-delay: 3s;
}

@keyframes art_direction_opacity{
        0%{ 
                opacity:1;   
        }
        26%{ 
                opacity:1;
        }
        33%{
                opacity:0.4;
        }
        93%{ 
                opacity:0.4;
        }       
}

/*****************
4. Illustrtion
*****************/

.illustration #line_1{
        animation: illustration_line_1 3s ease infinite;
}

.illustration #line_2{
        animation: illustration_line_2 3s ease infinite;
        animation-delay: 1s;
        -webkit-animation-delay: 3s;
}

.illustration #line_3{
        animation: illustration_line_3 3s ease infinite;
        animation-delay: 0.5s;
        -webkit-animation-delay: 1.5s;
}

@keyframes illustration_line_1{
        0%{ 
                transform-origin: 30.3px 32.5px;
                transform: scale(0,0);
                
                
        }
        50%{ 
                transform-origin: 30.3px 32.5px;
                transform: scale(1,1);
                
        }
        50.1%{ 
                transform-origin: 17.8px 20px;
                transform: scale(1,1);
        }
        100%{ 
                transform-origin: 17.8px 20px;
                transform: scale(0,0);
          
        }
}

@keyframes illustration_line_2{
        0%{ 
                transform-origin: 30.3px 7.4px;
                transform: scaleY(0);
                
                
        }
        50%{ 
                transform-origin: 30.3px 7.4px;
                transform: scaleY(1);
                
        }
        50.1%{ 
                transform-origin: 30.3px 32.5px;
                transform: scaleY(1);
        }
        100%{ 
                transform-origin: 30.3px 32.5px;
                transform: scaleY(0);
          
        }
}

@keyframes illustration_line_3{
        0%{ 
                transform-origin: 17.7px 20px;
                transform: scale(0,0);
                
                
        }
        50%{ 
                transform-origin: 17.7px 20px;
                transform: scale(1,1);
                
        }
        50.1%{ 
                transform-origin: 30.3px 7.4px;
                transform: scale(1,1);
        }
        100%{ 
                transform-origin: 30.3px 7.4px;
                transform: scale(0,0);
          
        }
}
/*****************
5. Animation
*****************/

.animation #left{
        animation: animation_left 3s ease infinite;
}
.animation #right{
        animation: animation_right 3s ease infinite;
}

@keyframes animation_left{
        0%{ 
                transform: translateX(0);   
        }
        20%{ 
                transform: translateX(33.274px);
        }
        50%{ 
                transform: translateX(33.274px);
        }       
        70%{ 
                transform: translateX(0);
          
        }
}

@keyframes animation_right{
        0%{ 
                transform: translateX(0);   
        }
        20%{ 
                transform: translateX(-33.274px);
        }
        50%{ 
                transform: translateX(-33.274px);
        }       
        70%{ 
                transform: translateX(0);
          
        }
}

/*****************
6. Prototype
*****************/

.prototype #line{
        animation: prototype_line 1.5s ease infinite;
        transform-origin: 35px 20px;
}

@keyframes prototype_line{
        0%{ 
                transform: scale(1); 
                opacity: 1;
        }
        
        100%{ 
                transform: scale(2.6);
                opacity: 0;
        }
}