@charset "utf-8";

#loader { position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,1); width: 100vw; height: 100vh; z-index: 10000; }
#loader {display: flex; flex-direction: column; align-items: center; justify-content: center; }
#loader .loader_logo { display: block; max-width: 80%; margin: 0 auto; background: url('') no-repeat center bottom transparent; background-size: contain; }
#loader .loader-text { position: relative; _top: 40%; padding-top: 20px; color: #fff; font-family: 'Roboto Condensed', Roboto, Verdana; font-size: 16px; font-weight: 500; text-align: center; background: url('') no-repeat center 300px transparent; }
#loader .loader-text:after { content: 'aguarde un instante por favor...'; display: block; padding-top: 6px; font-weight: 300; font-size: 14px; opacity: 0.5; }

#loader_wheel { display: block; position: relative; _left: 50%; _top: 40%; width: 100px; height: 100px; margin: 0 auto; _margin: -50px 0 0 -50px; border: 3px solid #3498db; z-index: 1500; }
#loader_wheel:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 3px solid #e74c3c; }
#loader_wheel:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 3px solid #444; }
/* change border to transparent and set only border-top to a solid color */
#loader_wheel { border: 3px solid transparent; border-top-color: #3498db; }
#loader_wheel:before { border: 3px solid transparent; border-top-color: #009FC3; border-left-color: #009FC3; }
#loader_wheel:after { border: 3px solid transparent; border-top-color: #444; }

#loader { background: var(--color-main); }
#loader .loader-text { color: var(--color-base); }
#loader_wheel { border-top-color: var(--color-base); }
#loader_wheel:before { border-top-color: var(--color-accent); border-left-color: var(--color-accent); }
#loader_wheel:after { border-top-color: var(--color-base-03); }

#loader_wheel {
    border-radius: 50%;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}
#loader_wheel:before {
    border-radius: 50%;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}
#loader_wheel:after {
    border-radius: 50%;
	-webkit-animation: spin 2.5s linear infinite;
	animation: spin 2.5s linear infinite;
}
/* include this only once */
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}