#logo{
   width: 278px;
    height: 82px;
    top: 118px;
    margin: 0 auto;
    left: 0px;
    right: 0px;
    position: absolute;
    transform: translateZ(100px);
}

@media screen and (min-width:1024px) and (max-width:1919px){
    #logo{
            width: 368px;
            height: 110px;
            top:160px;
    }
}

@media screen and (min-width:1920px){
    #logo{
            width: 628px;
            height: 188px;
            top:272px;
            left: 34px;
    }
}

#logo path:nth-child(1){
    stroke-dasharray: 372.61376953125px;
    stroke-dashoffset: 372.61376953125px;
    animation: line-anim 0.5s ease forwards;
}
#logo path:nth-child(2){
    stroke-dasharray: 401;
    stroke-dashoffset: 401;
    animation: line-anim 0.5s ease forwards 0.3s;
}
#logo path:nth-child(3){
    stroke-dasharray: 281;
    stroke-dashoffset: 281;
    animation: line-anim 0.5s ease forwards 0.6s;
}
#logo path:nth-child(4){
    stroke-dasharray: 412.1722717285156px;
    stroke-dashoffset: 412.1722717285156px;
    animation: line-anim 0.5s ease forwards 0.9s;
}
#logo path:nth-child(5){
    stroke-dasharray: 385;
    stroke-dashoffset: 385;
    animation: line-anim 0.5s ease forwards 1.2s;
}
#logo path:nth-child(6){
    stroke-dasharray: 83;
    stroke-dashoffset: 83;
    animation: line-anim 0.5s ease forwards 1.5s;
}
#logo path:nth-child(7){
    stroke-dasharray: 418;
    stroke-dashoffset: 418;
    animation: line-anim 0.5s ease forwards 1.8s;
}
#logo path:nth-child(8){
    stroke-dasharray: 414;
    stroke-dashoffset: 414;
    animation: line-anim 0.5s ease forwards 2.1s;
}
#logo path:nth-child(9){
    stroke-dasharray: 429;
    stroke-dashoffset: 429;
    animation: line-anim 0.5s ease forwards 2.4s;
}
#logo path:nth-child(10){
    stroke-dasharray: 292;
    stroke-dashoffset: 292;
    animation: line-anim 0.5s ease forwards 2.7s;
}
#logo path:nth-child(11){
    stroke-dasharray: 481;
    stroke-dashoffset: 481;
    animation: line-anim 0.5s ease forwards 3.0s;
}
#logo path:nth-child(12){
    stroke-dasharray: 385;
    stroke-dashoffset: 385;
    animation: line-anim 0.5s ease forwards 3.3s;
}
#logo path:nth-child(13){
    stroke-dasharray: 414;
    stroke-dashoffset: 414;
    animation: line-anim 0.5s ease forwards 3.6s;
}
#logo path:nth-child(14){
    stroke-dasharray: 309;
    stroke-dashoffset: 309;
    animation: line-anim 0.5s ease forwards 3.9s;
}

@keyframes line-anim {
    to {
        stroke-dashoffset: 0px;
    }
}