body, html {
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

#bgObscure{
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(97, 94, 94, 0.32);
    z-index:2000;
}


.loader-background {
     background: none repeat scroll 0 0 rgba(168, 35, 208, 0.66);
     opacity: 0.2;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: 8000;
 /* z-index: 9999; // or, higher
 position: fixed;
 display: block;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%; */
 /* background: red;  */
}


.loader {

    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 75px;
    display: inline-block;
    vertical-align: middle;
    animation: spin 1.5s linear infinite;
    position: fixed;
    /* Ponemos el valor de left, bottom, right y top en 0 */
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto; /* Centramos vertical y horizontalmente */
    z-index: 9999;

}

.loader-star {
    position: absolute;
    top: calc(50% - 12px);
}
/*LOADER-1*/


.loader-1 .loader-outter {
    position: absolute;
    border: 7px solid rgba(7, 221, 114, 1);
    border-left-color: transparent;
    border-bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
    animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
}

.loader-1 .loader-inner {
    position: absolute;
    border: 6px solid rgba(223, 63, 235, 1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    border-right: 0;
    border-top-color: transparent;
    -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
    animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
}
/*LOADER-2*/


/* ----------------     KEYFRAMES    ----------------- */

@-webkit-keyframes loader-1-outter {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loader-1-outter {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loader-1-inner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes loader-1-inner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}