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

#contenedor_loader_ps_generico{
	position: fixed;
	top: 50%;
	left: 50%;
	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;
}

.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;
}

.center{
    width: 200px;
    height: 200px;
    box-sizing: border-box;
}

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

.circle2 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    border-radius: 50%;
    border-style: solid;
    border-width: 7px;
    border-color: #1B2C5A transparent #1B2C5A #1B2C5A;
    animation: animateCircle2 5s linear infinite;
}

.circle3 {
    position: absolute;
    top: 41px;
    left: 42px;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    border-radius: 50%;
    border-style: solid;
    border-width: 7px;
    border-color: #0A71CE transparent #0A71CE #0A71CE;
    animation: animateCircle3 10s linear infinite;
}

.circle4 {
    position: absolute;
    top: 21px;
    left: 37px;
    width: calc(100% - 40px);
    height: calc(100% - 41px);
    border-radius: 50%;
    border-style: solid;
    border-width: 20px;
    border-color: transparent#1B2C5A transparent transparent;
}

.circle5 {
    position: absolute;
    top: 60px;
    left: 62px;
    width: calc(100% - 120px);
    height: calc(100% - 120px);
    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;
    }
}