body{
    padding:0;
    margin:0;
    background:#8a8ab7;
    min-height:100vh;
}

.vert-move {
    -webkit-animation: mover 1.5s linear infinite  alternate;
    animation: mover 1.5s linear infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(-5px); }
}
@keyframes mover {
    0% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(-5px); }}
}





.center_body{
    height: 100vh;
    width: 100%;
    overflow: hidden;
    text-align: center;
    background:#8a8ab7;
}

.center_body svg{
    height: 100vh;
    margin: auto;
    display: block;
    transform: translate(-50%, 0);
    left: 50%;
    position: fixed;
}




/*
svg #stroke .s:nth-child(1){
    animation-delay:0.2s;
}
svg #stroke .s:nth-child(2){
    animation-delay:0.4s;
}
svg #stroke .s:nth-child(3){
    animation-delay:0.6s;
}
svg #stroke .s:nth-child(4){
    animation-delay:0.8s;
}
svg #stroke .s:nth-child(5){
    animation-delay:1s;
}
svg #stroke .s:nth-child(6){
    animation-delay:1.2s;
}
svg #stroke .s:nth-child(7){
    animation-delay:1.4s;
}
svg #stroke .s:nth-child(8){
    animation-delay:1.6s;
}
svg #stroke .s:nth-child(9){
    animation-delay:1.8s;
}
svg #stroke .s:nth-child(10){
    animation-delay:2s;
}
svg #stroke .s:nth-child(11){
    animation-delay:2.2s;
}
*/

.cls-12{
    fill: none;
}
.cls-12.s{    
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      stroke-width:5;
          

        stroke: #fff;
        
        animation-name: summerbird-s;
        animation-duration: 0.2s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;

     /* animation:summerbird-s .75s linear forwards .5s; */
    }



    @keyframes summerbird-s {
        0% {
            stroke-dashoffset: 1200;           
            stroke-width: 0.5px;            
        }
        33% {
            stroke-width:5;            
        }
        90% {
            stroke-dashoffset: 0;
        }
        100% {
            stroke-dashoffset: 0;
            /* stroke-width:17; */
            fill: #fff;
            stroke-width:1;                       
        }
    }





    .cls-3.go{           
        stroke: #fff;
        fill: none;
        animation-name: summerbird-s-go;
        animation-duration: 1s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
   }

    @keyframes summerbird-s-go {
        0% {
            stroke-dashoffset: 1200;           
            stroke-width: 0.5px;
        }
        33% {
            stroke-width:5;            
        }
        90% {
            stroke-dashoffset: 0;
        }
        100% {
            stroke-dashoffset: 0;
            /* stroke-width:17; */
            fill: #fff;
            stroke-width:1;                       
        }
    }



@media only screen and (max-width: 820px) {
    .center_body svg {
        height: 50vh;
    }
}


@media only screen and (max-width: 600px) {
    .center_body svg {
        height: 45vh;
        top: 15%;
    }
    #stroke{
        transform: scale(1.6) translate(-19%, -60px);
    }
}