.loading{
    background-color: #021e31;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 9999;
}
.logoCarga{
    animation: fill 0.5s ease forwards 1s;
}
.logoCarga path:nth-child(1){
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: line-anim 2s ease forwards;
}
.logoCarga path:nth-child(2){
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: line-anim 2s ease forwards 0.1s;
}
.logoCarga path:nth-child(3){
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease forwards 0.2s;
}
.logoCarga path:nth-child(4){
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease forwards 0.3s;
}
.logoCarga path:nth-child(5){
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease forwards 0.4s;
}
.logoCarga path:nth-child(6){
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease forwards 0.5s;
}
.logoCarga path:nth-child(7){
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease forwards 0.6s;
}
.logoCarga path:nth-child(8){
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: line-anim 2s ease forwards 0.7s;
}
.logoCarga path:nth-child(9){
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease forwards 0.8s;
}
.logoCarga path:nth-child(10){
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease forwards 0.8s;
}
.logoCarga path:nth-child(11){
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-anim 2s ease forwards 1s;
}

@keyframes line-anim{
    to{
        stroke-dashoffset: 0;
    }
}
@keyframes fill{
    from {
        fill: transparent;
    }
    to{
        fill: #59DDEC;
    }
}