@charset "utf-8";
/* CSS Document xxx */

body, html {
    width: 100%;
    height: 100%;
    background-color: #133b4a;
    -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;
    font-family: Arial, Helvetica, sans-serif !important;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-size: 14px;
}

::placeholder {
	color: #B5B5B5;
	font-style:italic;
	font-size:1.1vw;
	font-family: Arial, Helvetica, sans-serif !important;
}

option {
	color: #333;
}

.clear-both{
	clear: both;
}

.ambiente {
    background-color: #FF0;
    color: #f00;
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
    padding: 1vw;
}

.div-evento-h{
	float: left;
	text-align: left;
	margin: 1%;
	width: 26%;
	height: 90%;
	position: fixed;    
	display: flex;
    justify-content: center;
    align-items: center;
}

.img-registro{
	height:100%;
}

.div-evento-v{
    display: none;
    text-align: center;
    margin-top: 1vw;
    width: 100%;
}

.img-registro-portrait{
	width:95%;
}

.contenedor-form{
	float: left;
	border-radius: 10px 10px;
	-webkit-border-radius: 10px 10px;
	-moz-border-radius: 10px 10px;
	outline: 0;
	background-color: rgb(0 0 0 / 24%);
	color: #ffffff;
	padding: 2%;
	width: 65%;
	margin: 1%;
	margin-left:30%;
	height:auto;
	min-height:84%;
	padding-top: 0.5%;
}

.titulo{
	padding: 0%;
	font-size: 3rem;
	text-align: center;
	font-weight: bolder;
	color: #ffed00;
	text-shadow: 2px 3px 5px #000;
	margin-bottom: 1vw;
}

.logo-colsubsidio{
	width: 35%;
}

.logo-teatro-colsubsidio{
	width:100%;
	max-width:500px;
}

.titulo-principal{
    padding: 1%;
    font-size: 1.8vw;
    text-align: center;
    font-weight: bolder;
    color: #ffffff;
    /*text-shadow: 2px 3px 5px #000;*/
    background: #0a93fb;
    border-radius: 10px;
}

.titulo-principal-confirmacion{
    padding: 1%;
    font-size: 1.8vw;
    text-align: center;
    font-weight: bolder;
    color: #ffffff;
    /*text-shadow: 2px 3px 5px #000;*/
    background: #0a93fb;
    border-radius: 10px;
}

.texto-nota{
	text-align: right;
    color: #FF9;
    font-style: italic;
    font-size: 1vw;
    padding: 1vw;
}

.obligatoriedad{
	float:left;
	width:1vw;
	font-size:1.4vw;
	color:#f00;
}

.etiqueta{
	padding: 0.25% 0.25% 1.6% 1%;
	width:30%; 
	float:left; 
	font-size:1.4vw; 
	color:#ffffff; 
}

.campo{
	padding:0.3%;
	margin:0.25%;
	width:63%;
	float:left;
	font-size:1.3vw;
	background-color: rgb(177 177 177 / 55%);
	border:none;
	outline:none;
	border-radius: 10px 10px;
	-webkit-border-radius: 10px 10px; 
	-moz-border-radius: 10px 10px;
	padding-left: 1.2%;
    padding-right: 2%;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
}

.lista{
	width:66%;
}

.errado{
    background-color: #faa9;
}

.campoErrValid {
	padding: 0.5%;
	margin: 0.25% 0.25% 0.25% 2%;
	width: 64%;
	float: left;
	font-size: 1.25vw;
	background-color: rgb(254 210 1 / 60%);
	border: none;
	outline: none;
	border-radius: 10px 10px;
	-webkit-border-radius: 10px 10px;
	-moz-border-radius: 10px 10px;
}

.mayusculas{
	text-transform:uppercase;
}

.minusculas{
	text-transform:lowercase;
}

.texto{
	font-size: 1.3vw;
    color: #c5c5c5;
    float: left;
    width: 65%;
}

.texto-opciones{
	font-size:1.1vw;
	color:#ffffff;
	display:inline;
}

.opcion{
	height:1.1vw;
	width:1.1vw;
	float: left;
}

.texto-opcion{
	float:left;
}

.vinculo {
	color: #11caa9;
	text-decoration: underline;
}

.boton {
    padding: 0.2%;
    text-align: center;
    font-size: 1.4vw;
    border-radius: 0px 30px 0px 0px;
    -webkit-border-radius: 0px 30px 0px 0px;
    -moz-border-radius: 0px 30px 0px 0px;
    outline: 0;
    color: #FFF;
    cursor: pointer;
    background-color: #fecf00;
    text-shadow: 0px 0px 0px #fff;
    font-weight: 900;
    width: 20%;
    margin-left: 39%;
    margin-top: 0%;
}

.boton-trivia {
    padding: 0.2%;
    text-align: center;
    font-size: 1.4vw;
    border-radius: 0px 30px 0px 0px;
    -webkit-border-radius: 0px 30px 0px 0px;
    -moz-border-radius: 0px 30px 0px 0px;
    outline: 0;
    color: #FFF;
    cursor: pointer;
    border: 3px solid #53565b;
    background-color: #0a93fb;
    text-shadow: 0px 0px 0px #fff;
    font-weight: 900;
    width: 50%;
    margin-left: 33%;
    margin-top: 0%;
}

.boton:hover{
    color: #fff;
    background-color: #b38e10;
}

.boton-trivia:hover{
    color: #fff;
    background-color: #b38e10;
}

.logo-super{
	width:32%;
	float:right;
}

#divsuper{
	float:right !important;
	padding:0% 1.5% 0% 0.5% !important;
	width:50% !important;
}

.poweredby{
	text-align:center;
	padding:8px;
	color:#CCC;
}

.fondo-error{
	background-color:#000a;
	width:100%;
	height:100%;
	position:fixed;
	top: 0%;
    left: 0%;
}

.cont-mensaje-error{
	width: 50%;
    margin-left: 25%;
    padding: 2vw;
	background-color: #f6e8a3;
	border: thick solid #665608;
    border-radius: 1vw;
	position: fixed;
    top: 15%;
}

.error-titulo{
	font-size: 2vw;
	color: #505050;
    text-align: center;
    font-weight: bold;
}

.error-texto{
	font-size: 1.5vw;
	color: #505050;
    text-align: center;
}


.error-mensaje{
	font-size: 1.25vw;
	color: #505050;
    margin: 3% 0% 0% 20%;
}

.fondo-notificacion{
	background-color:#000a;
	width:100%;
	height:100%;
	position:fixed;
	top: 0%;
    left: 0%;
}

.cont-mensaje-notificacion{
	width: 50%;
    margin-left: 25%;
    padding: 2vw;
	background-color: #ffce00;
	border: thick solid #770;
    border-radius: 1vw;
	position: fixed;
    top: 15%;
	color:#006eb6;
}

.notificacion-titulo{
	font-size: 2vw;
	color: #030;
    text-align: center;
    font-weight: bold;
}

.notificacion-texto{
	font-size: 1.5vw;
	color: #040;
    text-align: center;
}

.texto-confirmacion {
	margin: 1% 0% 1% 0%;
    padding: 1%;
    font-size: 1.5vw;
    text-align: center;
    font-weight: bolder;
    color: #ffffff;
}

.img-calendario{
	width:10%;
}

.pregunta {
    border-radius: 1vw;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #ffffff2e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.pregunta h3 {
	color: #fec925;
    font-size: 1.5vw;
}
.pregunta label {
    display: block;
    margin: 10px 0;
    font-size: 1.5vw;
}
.pregunta input[type="radio"] {
	margin-right: 10px;
}
.btn-enviar {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	cursor: pointer;
}
.btn-enviar:hover {
	background-color: #0056b3;
}

.cont-respuesta {
	margin: 1vw 0vw;
}

.cont-opcion-respuesta {
	float: left;
}

.opcion-respuesta {
	margin-top: 0.85vw;
    margin-left: 2vw;
    width: 1.5vw;
    height: 1.5vw;
}

.texto-opcion-respuesta {
	cursor: pointer;
	float:left;
	width: 55vw;
}

.respuesta-correcta{
	font-size: 2vw;
    background-color: #0A0;
    border: thick solid #070;
    border-radius: 1vw;
    padding: 0.5vw;
    text-align: center;
}

.respuesta-incorrecta{
	font-size: 2vw;
    background-color: #A00;
    border: thick solid #700;
    border-radius: 1vw;
    padding: 0.5vw;
    text-align: center;
}

/* Smartphones (portrait) */
@media only screen 
and (max-aspect-ratio: 13/9) {
	
	.ambiente {
		font-size: 6vw;
	}

	.div-evento-h{
		display: none;
	}
	
	.div-evento-v{
		display: block;
	}
	
	.titulo-principal{
		padding: 1%;
		font-size: 4.2vw;
		text-align: center;
		font-weight: bolder;
	}

	.texto-confirmacion {
		margin: 10% 0% 1% 0%;
		padding: 2%;
		font-size: 4vw;
		text-align: center;
		font-weight: bolder;
	}
	
	.contenedor-form{
		border-radius: 10px 10px;
		-webkit-border-radius: 10px 10px;
		-moz-border-radius: 10px 10px;
		outline: 0;
		margin: 2.5%;
		padding: 2.5%;
		width: 90%;
		height:auto;
	}

	.etiqueta{
		padding:2%;
		width:90%;
		font-size:4vw;
	}
	
	.campo{
		padding:2%; margin:0.25%; width:95%; float:left; font-size:4.1vw; border:none; outline:none;
		border-radius: 7px 7px;
		-webkit-border-radius: 7px 7px;
		-moz-border-radius: 7px 7px;

	}

	::placeholder {
	  font-size:3.6vw;
	}

	.campoErrValid {
		padding: 2%;
		margin: 0.25%;
		width: 95%;
		float: left;
		font-size: 4vw;
		background-color: rgba(255,153,102,0.85);
		border: none;
		outline: none;
		border-radius: 10px 10px;
		-webkit-border-radius: 10px 10px;
		-moz-border-radius: 10px 10px;
	}

	.texto-nota{
		font-size:3vw;
	}

	.texto{
		width: 90%;
		font-size:4.1vw;
	}

	.texto-opciones{
		font-size:3.6vw;
		margin:5%;
		margin-left:2%;
		display:inline;
		width:30px;
	}

	.opcion{
		height:4vw;
		width:4vw;
	}
	
	.boton {
        font-size: 5.4vw;
        width: 50%;
        margin-left: 25%;
        margin-top: 10%;
    }

	.boton-trivia {
        font-size: 4.4vw;
        width: 74%;
        margin-left: 13%;
        margin-top: 10%;
    }
	
	.poweredby{
		text-align: center;
		padding: 10px;
		color:#CCC;
	}

	.logo-colsubsidio{
		width:80%;
	}

	.logo-super{
		width:70%;
	}

	#divseparador{
		display:none;
	}
	
	#divsuper{
		float:right !important;
		padding:0% 1.5% 0% 0.5% !important;
		width:50% !important;
	}

	.img-calendario{
		width:20%;
	}

	.errado{
		background-color: #faa9;
	}

	.cont-mensaje-error {
        width: 86vw;
        margin-left: 3vw;
        top: 41%;
    }
	
	.error-titulo{
		font-size: 6vw;
	}
	
	.error-texto{
		font-size: 4.5vw;
	}
	
	.error-mensaje{
		font-size: 4vw;
		margin: 3% 0% 0% 10%;
	}
	
	.obligatoriedad{
		font-size: 4vw;
	}

	.titulo-principal-confirmacion {
		font-size: 4.8vw;
	}
	
	.pregunta h3 {
		font-size: 4.5vw;
	}

	.pregunta label {
		font-size: 4.5vw;
	}

	.cont-respuesta {
	
	}

	.cont-opcion-respuesta {
		height: 7vw;
		width: 7vw;
	}

	.texto-opcion-respuesta {
		width: 70vw;
	}

	.opcion-respuesta {
		width: 3.5vw;
		height: 3.5vw;
		margin-top: 2vw;
	}
	
	.respuesta-incorrecta {
    	font-size: 5vw;
		border-radius: 3vw;
	}

	.respuesta-correcta {
    	font-size: 5vw;
		border-radius: 3vw;
	}
}