@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:300&display=swap');

#contenedor_loader_ps{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .5);
	z-index: 999;
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.centrar_loader_ps{
    position: relative;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    -webkit-animation: fade .8s alternate infinite;
    animation: fade .8s alternate infinite;
}

.mensaje_loader{
    margin-top: 10px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 300;
	color: rgba(27, 44, 90, .7);
	font-size: 1.5em;
}

.loader_center{
    width: 50px;
    height: 50px;
    box-sizing: border-box;
}

.loader_circle1 {
    width: 100%;
    height: 101%;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    border-color: #1B2C5A transparent #1B2C5A #1B2C5A;
    box-sizing: border-box;
}

.loader_circle2 {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(97% - 9px);
    height: calc(97% - 9px);
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    border-color: #1B2C5A transparent #1B2C5A #1B2C5A;
    animation: animateCircle2 5s linear infinite;
}

.loader_circle3 {
    position: absolute;
    top: 11px;
    left: 11px;
    width: calc(100% - 21px);
    height: calc(100% - 21px);
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    border-color: #0A71CE transparent #0A71CE #0A71CE;
    animation: animateCircle3 10s linear infinite;
}

.loader_circle4 {
    position: absolute;
    top: 4px;
    left: 19px;
    width: calc(100% - 18px);
    height: calc(100% - 8px);
    border-radius: 50%;
    border-style: solid;
    border-width: 4.5px;
    border-color: transparent#1B2C5A transparent transparent;
}

.loader_circle5 {
    position: absolute;
    top: 16px;
    left: 16px;
    width: calc(100% - 31px);
    height: calc(100% - 31px);
    background: #0A71CE;
    border-radius: 50%;
    animation: animateBackground 2s infinite;
}

@keyframes animateCircle2{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes animateCircle3{
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes animateBackground{
    0%{
        background: #0A71CE;
    }
    50%{
        background: transparent;
    }
    100%{
        background: #0A71CE;
    }
}

.texto_power{
    color: #1B2C5A;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 5em;
}

.texto_street{
    color: #0A71CE;
    font-family: 'Raleway', sans-serif;
    font-size: 4.5em;
    font-weight: 300;
    margin-top: 5px;
}