@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
	@import url("https://fonts.googleapis.com/css?family=Roboto Condensed:400");
	@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
	@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&display=swap');
	@import url('https://fonts.googleapis.com/css?family=Muli');



:root {
    --color-fondo: #070146;
    --color-texto: #fff;		
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    background-color: var(--color-fondo);
    
}

a {
    color:#fff;
    text-decoration: none;
}


/* Contenedor principal */
.containerTop {

      background-image: url('../images/bg.jpg');	
    background-size: cover;
    background-position: top;
    display: flex;
    justify-content: center;           
    text-align: center;
       color: var(--color-texto);
    padding:0px;
    margin:0px;			
}

/* Contenido */
.content {
    max-width: 600px;
    justify-content: center;
    margin:0px;
    padding-top:30px;
    
}

 .contentLogo {
    padding:0px 0px;
 }
 
 .contentTitulo {
        padding:25px 0px;
     justify-content: center;
     text-align:center;
 }
 .contentLeyenda {	

    font-family: 'Roboto', sans-serif;		 
    padding:20px 10px;
    font-size:20px;
    font-weight:400;
    letter-spacing:-0.5px;
 }

 
 .bono {
    padding-top:20px;
    padding-bottom:20px;
    font-size:20px;
    font-weight:400;
    letter-spacing:0.5px
    
 }
 .textpwsp {
     padding-top:00px;
    padding-bottom:20px;
    font-size:15px;
    font-weight:300;
 
 }
 .contentBoton {
    padding:0px 0px;
    text-align:center;
 }
 
 .loadWsp {
    position:absolute;
    border-radius: 20px;
    display:none;	
    margin:auto;
    padding:20px;
    width:80%;
    
    border:3px solid #51d4db;
    background:#dcdcdc;
    color: #53656f;
    z-index:999;

    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);			 
 }
 
 .loadWsp a {
    text-decoration: none;
    color: #808080;
       pointer-events: none;
 }
 
 .loadWsp a:hover {
    text-decoration: none;
    color: #808080;
       pointer-events: none;
 }
 
 .loadWsp .info {
     font-family: 'Roboto', sans-serif;		 
    font-letter-spacing:-0.5px;
    font-size:16px;
    font-weight:400;
    text-align:left;
    text-align: justify;
 }

.conecting {
    padding:10px;
    text-align:center;
    
    margin:auto;
}

.conectingTxt {	
    margin:auto;
}

.conectingIcon {
    padding-top:10px;
    margin:auto;
    text-align:center;
}


.containerLista {
    background-color: var(--color-fondo);
    display: flex;
    justify-content: center;           
    text-align: center;
       color: var(--color-texto);
    padding:0px;
    margin:0px;	
    padding-top:30px;
    padding-bottom:10px;
}		 

.containerItem img {
    display: inline-block;
    vertical-align: middle;		
}
.containerItem p {				
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        font-family: 'Roboto', sans-serif;		 
        padding:0px 0px;
        font-size:18px;
        font-weight:300;
        padding-left:20px;
        text-align:left;
}


 .containerAviso {
    background-color: #000;
   
    justify-content: center;           
    text-align: center;
       color: var(--color-texto);
    padding:0px;
    margin:0px;	
    padding-top:30px;
    padding-bottom:30px;

}	

.containerAviso p {				
        
        vertical-align: middle;
        margin: 0;
        font-family: 'Roboto', sans-serif;		 
        padding:0px 0px;
        font-size:15px;
        font-weight:300;
        
        text-align:center;
}

/* Estilos para pantallas pequeñas */
@media screen and (max-width: 600px) {
    .container {
     background-size: auto;
    }
}


.imgboton {
    animation: zoom 2s infinite;
}

.btnwsp {
background-color: transparent;
border:0px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
cursor: pointer;
}

.whatsapp-icon {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25D366;
color: #fff;
width: 70px;
height: 70px;
border-radius: 50%;
text-align: center;
line-height: 70px;
font-size: 36px;
z-index: 9999;
cursor: pointer;
}

.whatsapp-icon:hover { 
color: #25D366;
background-color: #fff;
border:0.5px solid #25D366;
}


@keyframes zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
}
}	

.c-loader {
text-align:center;
margin:auto;
animation: is-rotating 1s infinite;
border: 6px solid #e5e5e5;
border-radius: 50%;
border-top-color: #51d4db;
height: 40px;
width: 40px;
}

@keyframes is-rotating {
to {
    transform: rotate(1turn);
}
}

.leyenda p {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 1em;
letter-spacing: 0.5px;
overflow: hidden;
background: linear-gradient(90deg, #efefef, #fff, #efefef);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
0% {
    background-position: -500%;
}
100% {
    background-position: 500%;
}
}