.loader-animado-logo {
    fill: transparent;
    stroke: black;
    stroke-width: 70px;
    stroke-dasharray: 25286;
    stroke-dashoffset: 1;
    animation: 3s desenha infinite alternate;
    width: 800px;
    height: 500px;
}

.logo-animado-login {
    width: auto !important;
    height: 300px;
    stroke: white;
    stroke-width: 10px;
    fill: transparent;
    stroke-dasharray: 2600 !important;
    stroke-dashoffset: 1;
    animation: 3s desenha-login infinite alternate;
}

.parte-cima-logo {
    animation: 3s colore-cinza infinite alternate;
}

.parte-baixo-logo {
    animation: 3s colore-amarelo infinite alternate;
}

.letras-logo-branco {
    animation: 3s colore-branco infinite alternate;
}

@keyframes desenha {
    from {
        stroke-dashoffset: 25286;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes colore-amarelo {
    to {
        fill: transparent;
    }
    from {
        fill: #f1ba1a;
    }
}

@keyframes colore-cinza {
    to {
        fill: transparent;
    }
    from {
        fill: #6d6e71;
    }
}

@keyframes colore-branco {
    from {
        fill: #fff;
    }
    to {
        fill: transparent;
    }
}

@keyframes desenha-login {
    from {
        stroke-dashoffset: 2600;
    }
    to {
        stroke-dashoffset: 0;
    }
}