@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif !important;
}

#contenedor_carga {
    background-color: rgba(164, 221, 197, .9);
    height: 100vh;
    width: 100%;
    position: fixed;
    transition: all 1s ease;
    z-index: 1;
}


#carga {
    background: -moz-linear-gradient(left, rgb(0,168,89) 10%, rgba(0,168,89, 0) 42%);
    /* background: -webkit-linear-gradient(left, #ffffff 10%, rgba(0,168,89, 0) 42%); */
    background: -o-linear-gradient(left, rgb(0,168,89) 10%, rgba(0,168,89, 0) 42%);
    background: -ms-linear-gradient(left, rgb(0,168,89) 10%, rgba(0,168,89, 0) 42%);
    background: linear-gradient(to right, rgb(0,168,89) 10%, rgba(0,168,89, 0) 42%);
    height: 120px;
    width: 120px;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: girar 1.5s linear infinite;
}

#carga:before {
    width: 50%;
    height: 50%;
    background: rgb(0,168,89);
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}

#carga:after {
    background:rgba(164, 221, 197, 1);
    width: 90%;
    height: 90%;
    border-radius: 100%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#contenedor_carga img {
    z-index: inherit;
    width: 80px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

@keyframes girar {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }


}