:root {
    /*PALETA DE CORES*/
    --cor-verde-oliva: #18280D;
    --cor-bege: #E9E3CE;
    --cor-branco: var(--cor-verde-oliva);
    --cor-preto: #000000;    
}

html, body {
    width: 100vw;
    height: 100vh;
    background: var(--cor-bege);
    padding: 0;
    margin: 0;
}

.box_loading {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.loading {
    width: 300px;
    height: 300px;
}

.load4 .loader {
    font-size: 20px;
    margin: 5em auto;
    width: 1em;
    height: 1em;
    border-radius: 80%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes load4 {

    0%,
    100% {
        box-shadow: 0em -3em 0em 0.2em var(--cor-verde-oliva), 2em -2em 0 0em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 -0.5em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 0em var(--cor-verde-oliva);
    }

    12.5% {
        box-shadow: 0em -3em 0em 0em var(--cor-verde-oliva), 2em -2em 0 0.2em var(--cor-verde-oliva), 3em 0em 0 0em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 -0.5em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    25% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 0em var(--cor-verde-oliva), 3em 0em 0 0.2em var(--cor-verde-oliva), 2em 2em 0 0em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 -0.5em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    37.5% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 0em var(--cor-verde-oliva), 2em 2em 0 0.2em var(--cor-verde-oliva), 0em 3em 0 0em var(--cor-verde-oliva), -2em 2em 0 -0.5em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    50% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 0em var(--cor-verde-oliva), 0em 3em 0 0.2em var(--cor-verde-oliva), -2em 2em 0 0em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    62.5% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 0em var(--cor-verde-oliva), -2em 2em 0 0.2em var(--cor-verde-oliva), -3em 0em 0 0em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    75% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 0em var(--cor-verde-oliva), -3em 0em 0 0.2em var(--cor-verde-oliva), -2em -2em 0 0em var(--cor-verde-oliva);
    }

    87.5% {
        box-shadow: 0em -3em 0em 0em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 0em var(--cor-verde-oliva), -3em 0em 0 0em var(--cor-verde-oliva), -2em -2em 0 0.2em var(--cor-verde-oliva);
    }
}

@keyframes load4 {

    0%,
    100% {
        box-shadow: 0em -3em 0em 0.2em var(--cor-verde-oliva), 2em -2em 0 0em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 -0.5em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 0em var(--cor-verde-oliva);
    }

    12.5% {
        box-shadow: 0em -3em 0em 0em var(--cor-verde-oliva), 2em -2em 0 0.2em var(--cor-verde-oliva), 3em 0em 0 0em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 -0.5em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    25% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 0em var(--cor-verde-oliva), 3em 0em 0 0.2em var(--cor-verde-oliva), 2em 2em 0 0em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 -0.5em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    37.5% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 0em var(--cor-verde-oliva), 2em 2em 0 0.2em var(--cor-verde-oliva), 0em 3em 0 0em var(--cor-verde-oliva), -2em 2em 0 -0.5em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    50% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 0em var(--cor-verde-oliva), 0em 3em 0 0.2em var(--cor-verde-oliva), -2em 2em 0 0em var(--cor-verde-oliva), -3em 0em 0 -0.5em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    62.5% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 0em var(--cor-verde-oliva), -2em 2em 0 0.2em var(--cor-verde-oliva), -3em 0em 0 0em var(--cor-verde-oliva), -2em -2em 0 -0.5em var(--cor-verde-oliva);
    }

    75% {
        box-shadow: 0em -3em 0em -0.5em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 0em var(--cor-verde-oliva), -3em 0em 0 0.2em var(--cor-verde-oliva), -2em -2em 0 0em var(--cor-verde-oliva);
    }

    87.5% {
        box-shadow: 0em -3em 0em 0em var(--cor-verde-oliva), 2em -2em 0 -0.5em var(--cor-verde-oliva), 3em 0em 0 -0.5em var(--cor-verde-oliva), 2em 2em 0 -0.5em var(--cor-verde-oliva), 0em 3em 0 -0.5em var(--cor-verde-oliva), -2em 2em 0 0em var(--cor-verde-oliva), -3em 0em 0 0em var(--cor-verde-oliva), -2em -2em 0 0.2em var(--cor-verde-oliva);
    }
}