@charset "utf-8";

/* Laptops */
body, html {
	width:100%;
	height:100%;
	font-family: "Ubuntu Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	background-color: #333;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-size: 1vw;

	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select:none;
	
}


::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width:10px;
}

::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {
    display: none;
} 

::-webkit-scrollbar:horizontal {
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
}

.banner-superior {
	background-color: rgba(1,31,91,0.5);
	height:15%;
}

.banner-superior-claro {
	background-color: rgba(255,255,255,1);
	height:15%;
}

.banner-superior-titulo1 {
	font-size: 1.5vw;
}

.banner-superior-titulo2 {
	font-size: 1.5vw;
}

.boton{
	width: 20%;
	margin: auto;
	padding: 1vw;
	text-align: center;
	font-size: 1.5vw;
	font-weight: bold;
	color: #333;
	background-color: #0ff7;
	border-radius: 1vw;
	border: 0.25vw solid #0ff3;
	cursor:pointer;
}

.boton-envio {
	width: 40%;
	text-align:center;
	font-size:1vw;
	font-weight:bold;
	color:#333;
}

.boton-envio-sin-caja {
	width: 28%;
    text-align: center;
    font-size: 1.5vw;
    padding: 0.5vw;
    background-color: #638a8f;
    border-radius: 0.5vw;
}

.boton-instructivo {
	position: fixed;
	left: 1%;
	width: 2.4%;
	background-color: #ff0;
	font-size: 2vw;
	text-align: center;
	font-weight: bold;
	border-radius: 5vw;
	border: 0.25vw solid #f70;
	bottom: 2vw;
	cursor: pointer;
}

.boton-soporte {
	position: fixed;
    left: 5%;
    width: 2.75%;
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
    bottom: 1.7vw;
    cursor: pointer;
}

.centered {
	text-align:center;
}

.clear-both {
	clear:both;
}

.contenedor-boton {
	padding:1%;
}

.creditos {
	color: #E3E3E3;
	font-size: 1vw;
	text-shadow: 2px 2px 4px #000;
	position: fixed;
	bottom: 1vw;
	right: 10vw;
}

.creditos a {
	color:#E3E3E3;
}

.creditos-aliado {
	color: #E3E3E3;
	font-size: 1vw;
	left: 10vw;
	text-shadow: 2px 2px 4px #000;
	position: fixed;
	bottom: 1vw;
}

.creditos-aliado a {
	color:#E3E3E3;
}

.documento	{
	width:60%;
	margin-left:20%;
	margin-top:2%;
	background-color:rgba(255,255,255,0.60);
	padding:2%;
	border: thin solid #E8E8E8;
	-webkit-border-radius: 10px 10px;  /* Safari  */
	-moz-border-radius: 10px 10px;
	box-shadow: 2px 2px 5px #999;
	font-size:1vw;
}

.footer {
	position:fixed; bottom:0px; left:0px;
	width:98%;
	padding:1%;
}

.img-logo-aliado {
	width:100%;
	/*box-shadow: 5px 5px 15px #000;*/
}

.img-logo-cliente {
	width:100%;
	/*box-shadow: 5px 5px 15px #000;*/
}

.login-campo {
	font-size: 1.5vw;
	border: thin solid #E8E8E8;
	-webkit-border-radius: 10px 10px;  /* Safari  */
	-moz-border-radius: 10px 10px;
	box-shadow: 2px 2px 5px #999;
	outline: 0;
	padding-top: 0.5%;
	padding-right: 1%;
	padding-bottom: 0.5%;
	padding-left: 1%;
	text-align: center;
	width: 90%;
}

.login-div {
	padding: 3%;
	height: 10%;
	width: 45%;
	-webkit-border-radius: 10px 10px;  /* Safari  */
	-moz-border-radius: 10px 10px;
	box-shadow: 5px 5px 15px #000;
	outline: 0;
	background-color: rgba(174,221,255,0.75);
	margin-left: auto;
	margin-right: auto;
}

.login-div-campo {
	width: 65%;
	float: left;
	padding: 5px;
	text-align: center;
}

.login-error {
	outline: 0;
	color: #F00;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 2px #333;
	width:400px;
	margin-left: auto;
	margin-right: auto;
	padding:20px;
	-webkit-border-radius: 10px 10px;  /* Safari  */
	-moz-border-radius: 10px 10px;
	background-color: rgba(220,220,220,0.75);
	margin-top:20px;
}

.login-etiqueta {
	width: 30%;
	float: left;
	padding: 1%;
	font-size: 1.5vw;
	font-weight: bold;
	text-align: right;
	color:#333;
}

.login-ok {
	outline: 0;
	color: #063;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 2px #333;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	-webkit-border-radius: 10px 10px;  /* Safari  */
	-moz-border-radius: 10px 10px;
	background-color: rgba(220,220,220,0.75);
	margin-top: 20px;
}

.logo-aliado {
	float:right;
	padding:1%;
	width:20%;
}

.logo-cliente {
	float:left;
	padding:1%;
	width:20%;
}

.observaciones{
	font-size:2vw;
	color:#fff;
	text-align:center;
	width: 80%;
	margin-left: 10%;
}

.subtitulo-blanco {
	color:#FFF;
	font-size:1vw;
	padding-top:0.5%; padding-bottom:0.5%; width:70%; margin-left:15%;
	text-shadow: 2px 2px 4px #000;
}

.texto-blanco {
	color:#FFF;
	font-size:1vw;
}

.titulo1 {
	color: #FFF;
	text-align:center;
	font-size:2vw;
	padding:2%;
	text-shadow: 2px 2px 4px #000;
}

.subtitulo1 {
	color: #FFF;
	text-align:center;
	font-size:1.5vw;
	padding:1.5%;
	text-shadow: 2px 2px 4px #000;
}

.subtitulo1 a {
	color: #FF9;
}

.titulo-banner {
	text-align:center; position:absolute; width:98%; color:#FFF; font-size:1.5vw;
}

.titulo-banner-oscuro {
	text-align:center; position:absolute; width:98%; color:#333; font-size:1.5vw;
}

.titulo-login {
	font-size: 2vw;
	color: #333;
	padding: 0.5%;
	text-align: center;
	text-shadow: 2px 2px 4px #333;
}

.underline {
	text-decoration:underline;
}

.casilla{
	height:1vw;
	width:1vw;
}

.contenedor-implementaciones{
	display: flex;
    align-items: center;
    justify-content: center;
}

.contenedor-implementacion{
	margin: 0.5vw;
}

.imagen-implementacion{
	border-radius: 0.25vw;
	cursor:pointer;
}

.imagen-implementacion:hover{
	filter: drop-shadow(5px 5px 10px #FFF);
}

.mensaje-ok {
	outline: 0;
	color: #333;
	font-weight: bold;
	text-align: center;
	width:30%;
	margin-left: auto;
	margin-right: auto;
	padding:20px;
	-webkit-border-radius: 10px 10px;  /* Safari  */
	-moz-border-radius: 10px 10px;
	background-color: #afaa;
	margin-top:20px;
}

.tyc-iframe{
	width: 100%;
    height: 50vh;
}

.sep-final{
	height:3vw;
}

.nota-cambio-clave{
	background-color: #9ff9;
	color:#333;
	border-radius: 1vw;
	padding: 0.5vw;
	font-size: 1.5vw;
}

@media only screen and (max-aspect-ratio: 13/9) {
/* CSS para pantallas cuadradas - Factores desde 0.9 hasta 1.4444*/

	.banner-superior {
		height:initial%;
	}
	
	.ttulo-banner{
		position:initial;
	}

    .banner-superior-titulo1 {
		font-size: 2vw;
    }

    .banner-superior-titulo2 {
		font-size: 2vw;
    }

	.boton-envio {
		font-size:2vw;
	}

	.boton {
		width: 50%;
		font-size: 5vw;
	}
	|1
	.documento {
        font-size:1.5vw;
    }
    
	.login-campo {
		font-size: 2vw;
	}

	.login-div {
		width: 50%;
	}

	.login-etiqueta {
		font-size: 2vw;
	}

	.titulo1 {
        font-size:3vw;
    }

	.titulo-login {
		font-size: 3vw;
	}

	.subtitulo-blanco {
        font-size:4vw;
    }

	.subtitulo1{
		font-size:4vw;
	}

	.boton-envio-sin-caja {
		width: 75%;
		font-size: 5vw;
	}
	
	.boton-soporte{
		left: 3%;
		width: 7.25%;
		font-size: 6vw;
		border-radius: 5vw;
		border: 1vw solid #f70;
		bottom: 5vw;
	}	

	.casilla{
		height:2vw;
		width:2vw;
	}

	.observaciones{
		font-size:5vw;
	}

	.mensaje-ok {
		width:60%;
		font-size:4vw;
	}

	.sep-final{
		height:20vw;
	}
	
	.login-error {
		font-size:4vw;
	}

	.boton-instructivo{
		width:10%;
		font-size:8vw;
	}
	
	.creditos{
		font-size:3vw;
		right:30vw;
	}

	.nota-cambio-clave{
		font-size:5vw;
	}

}

@media only screen and (max-aspect-ratio: 9/10) {
/* CSS para smartphones - Factores desde 0 hasta 0.9 */
	body, html {
		background-image: url(../imagenes/fondo-portrait.jpg?v=2);
	}

	.banner-superior {
		height:initial%;
	}

    .banner-superior-titulo1 {
		font-size: 4vw;
    }

    .banner-superior-titulo2 {
		font-size: 4vw;
    }
    
	.boton-envio {
		font-size:4vw;
	}

	.documento	{
		width:85%;
		margin-left:5%;
        font-size:4vw;
	}

	.login-div {
		width: 75%;
	}
    
    .login-div-campo {
        width:100%;
		font-size:4vw;
    }

	.login-etiqueta {
		font-size: 5vw;
        width:100%;
        text-align:center;
	}
    
    .login-campo {
        width:98%;
        font-size:4vw;
    }

	.logo-aliado {
		width:40%;
	}
	
	.logo-cliente {
		width:40%;
	}

	.poweredby {
		font-size: 3.5vw;
	}

	.poweredby-claro {
		font-size: 3.5vw;
	}

	.titulo1 {
        font-size:6vw;
    }

	.titulo-banner {
		top:8%;
	}

	.titulo-login {
		font-size: 6vw;
        padding-bottom: 8%;
	}

	.subtitulo1{
		font-size:4vw;
	}


	.subtitulo-blanco {
        font-size:4vw;
    }

	.boton-envio-sin-caja {
		width: 75%;
		font-size: 5vw;
	}

	.boton-soporte{
		left: 3%;
		width: 7.25%;
		font-size: 6vw;
		border-radius: 5vw;
		border: 1vw solid #f70;
		bottom: 5vw;
	}	

	.casilla{
		height:2vw;
		width:2vw;
	}

	.observaciones{
		font-size:5vw;
	}
    
	.mensaje-ok {
		width:60%;
		font-size:4vw;
	}
	
	.sep-final{
		height:20vw;
	}

}