/*
font-family: 'idealistregular';
font-family: 'aller_lightregular';
*/

body{ position: relative; padding: 0; margin: 0; height: 100%; width: 100%; background-image: url("../img/background.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; overflow: hidden;  user-select: none;}
.condiciones{position: absolute; height: 90%; padding-top: 5%; padding-bottom: 5%; z-index: 999; background-color: rgba(255,255,255,0.9); font-family: Gotham, "Helvetica Neue", Helvetica; width: 80%; padding-left: 10%; padding-right: 10%; overflow-y: scroll;  transition: 0.8s; display: none;}
.condiciones ol{float:left; width: 98%; margin-left: 2%;}
.condiciones p{float:left; width: 100%; margin-top: 10px; margin-bottom: 10px; }
.cerrarPopup{position: fixed; right: 0;  width: 40px; height: 30px; font-size: 1rem; cursor: pointer; margin-right: 30px; margin-top: -40px; background-image: url("../img/cerrar.png"); background-repeat: no-repeat; background-size: contain; z-index: 999; }
.condiciones.cerrado{display: none;}
.condiciones.abierto{ display: block;}
.condiciones.visible{ opacity: 1;}
.condiciones.hidden{ opacity: 0;}

.pantalla{ position:absolute; width: 100%; height: 100%; transition: 1s; z-index: 998;    }

.pantalla.inicio{ /*background-image: url("../img/nazareno1.png"); background-repeat: no-repeat; background-position: right top; background-size: contain;*/}

/* ### PANTALLA INICIO ### */
.pantalla.inicio .elige{ color: #fff; font-family: 'idealistregular'; font-size: 3.3vw; left: -150%; margin-left: 5.3%; top: 29.6vw; position: absolute;  transition: 1.5s;}
.pantalla.inicio .niveles{ color: #fff; font-family: 'idealistregular'; font-size: 5vw; left: -150%; margin-left: 5.3%; position: absolute; margin-top: 0px; top: 37.7vw; transition: 1.5s;}
.nazareno.inicio{float: right; height: auto; width: 33vw; right: -150%; position: absolute; transition: 1.5s; top: 3vw; }

.pantalla.inicio h1{ color: #fff; font-family: 'idealistregular'; font-weight: normal; font-size: 4.5vw;position: absolute; float: left; width: 80%; top: 13vw; left: -150%; margin-left: 5.3%;  transition: 1.5s;}
.pantalla.inicio h1 span{ font-size: 7.8vw; float: left; width: 100%;}

.inicio h1.visible{ left: 0; }
.inicio .niveles.visible{ left: 0; }
.inicio .elige.visible{ left: 0; }
.nazareno.inicio.visible{ right: 3vw; }
.nazareno.inicio.hidden{ right: -50%; }

/* ### PANTALLA FORMULARIO ### */
.pantalla.inicio h2{ color: #fff; font-family: 'idealistregular'; font-weight: normal; font-size: 4.5vw;position: absolute; float: left; width: 80%; top: 13vw; left: -150%; margin-left: 5.3%;  transition: 1.5s;}
.pantalla.inicio h2 span{ font-size: 7.8vw; float: left; width: 100%;}

.pantalla.inicio h6{ color: #fff; font-family: 'idealistregular'; font-weight: normal; font-size: 2.2vw; position: relative; float: left; width: 80%; margin-top: 4.6vw; left: 0; margin-left: 4.5%;}
.pantalla.inicio h6 span{ font-size: 4.5vw; float: left; width: 100%;}


.bocadillo{ background-repeat: no-repeat; background-size: contain; position: relative; float: left; width: 60%; padding-left: 4%; padding-top: 4vw; padding-right: 4%; height: 40vw; margin-top: 3vw; z-index: 999; margin-left: 4vw; font-family: 'idealistregular'; border: solid 5px #000; background-color: #fff; }
.bocadillo div.input{ float:left; margin-bottom: 60px; appearance: none;}
.bocadillo div.input.nombre{ width: 79.5%;}
.bocadillo div.input.edad{ width: 14%; margin-left: 6%;}
.bocadillo form{ position: absolute; width: 64%; margin-left: 10%; height: 30vw; left: 0; top: 10vw; font-size: 3vw;}
.bocadillo label{float:left; width: 100%;}
.bocadillo .input a{ text-decoration: underline; line-height: auto; font-size: 1.5vw; position: relative; top: -8px;}
.bocadillo label span{font-size: 1.5vw;}
.bocadillo input{ border: none; border-bottom: solid 3px #000; font-family: 'idealistregular'; font-size: 3vw; margin-top: 0.8vw; float: left; width: 99%; padding-left: 1%; margin-top: 5px;}

/*
.bocadillo1{background-image:url("../img/bocadillo.png") !important;}
.bocadillo2{background-image:url("../img/bocadillo.png") !important;}
.bocadillo3{background-image:url("../img/bocadillo.png") !important;}
.bocadillo4{background-image:url("../img/bocadillo4.png") !important;}
.bocadillo5{background-image:url("../img/bocadillo5.png") !important;}
.bocadillo6{background-image:url("../img/bocadillo.png") !important;}
.bocadillo7{background-image:url("../img/bocadillo.png") !important;}
*/

input#checkbox{ float: none; appearance: none; width: 30px; height: 30px; border: solid 2px #000; }
input#checkbox:checked{ background-color: #ccc; }
.checkbox label{ float:none !important; font-size: 1.5vw; position: relative; top: -8px; }
.checkbox{ text-align: center; width: 100%; height: 20px; margin-bottom: 60px !important; margin-top: -20px; }
.submit{width: 100%; text-align: center; background-color: transparent; border-bottom: none !important; font-size: 6.5vw !important; }

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
	/*background-color: #cecece;*/
}

.crono{ position: absolute; right: 1vw; width: 5.5vw; top: -2vw;}
.contenidopregunta{ float: left; left: 0; position: relative; top: 0; width: 100%; height: auto; }
.numpregunta{font-family: 'idealistregular'; font-size: 2.2vw; float:left; position: absolute; left: 0vw; top: 0vw;}
.contenidopregunta h3{ font-size: 4vw; font-weight: normal; line-height: 1; float: left; position: relative; margin-top: 4vw; margin-bottom: -0.6vw;}

.opcion{ float: left; border: solid 2px #000; height: 87px; width: 21vw; line-height: 1; text-align: center; margin-top: 2vw; margin-right: 2.15vw; font-size: 2vw; padding-left: 2vw; padding-right: 2vw; padding-bottom: 0.6vw; padding-top: 0.5vw;}
.opcion .respuestaContent{ position: absolute; transform: translateY(-50%); height: auto; width: 21vw; top: auto;
  margin-top: 43px; }
.opcion.correcta{ /*background-color: chartreuse;*/}
.textopregunta{ position: absolute; float: left; width: 100%; height: 32vw; transition: 1s; opacity: 0;}

.conimagen .contenidorespuestas{ float:right; margin-right: 1.7%; width: 62%;}
.conimagen .opcion{width: 11vw; margin-right: 1.5vw; margin-top: 1.5vw; font-size: 2.3vw;}
.conimagen .opcion .respuestaContent{ position: absolute; transform: translateY(-50%); height: auto; width: 11vw; top: auto;
  margin-top: 43px; }
.conimagen h3{ width: 55%; float: right; margin-bottom: 0.5vw; right: 9%; margin-top: 5.5vw !important;}

.textoresultado{ position: absolute; float: left; width: 100%; height: 32vw; transition: 1s;}
.textoresultado h4{ float: left; width: 100%; text-align: center; font-size: 9vw; font-weight: normal; margin-top: 5vw; margin-bottom: 0px;}
.textoresultado p{ float: left; width: 96%; margin-left: 2%; text-align: center; font-size: 3.5vw; font-weight: normal; margin-top: 0; margin-bottom: 2vw;}
.siguientepregunta{ float: left; width: 100%; text-align: center; font-size: 2vw; color: #000; font-weight: normal; text-decoration: none; }

.textoresultado.op100{opacity: 100; }
.textoresultado.op0{opacity: 0; }

.textopregunta.op100{opacity: 100; }
.textopregunta.op0{opacity: 0; }

.textoresultado.op0{opacity: 0; }
.textoresultado.hidden{ display: none; }
.textoresultado.visible{ display: block; }

.textopregunta.hidden{ display: none;}
.textopregunta.hidden h3{display: none;}
.textopregunta.hidden img{display: none;}
.textopregunta.hidden .opcion{display: none;}
.textopregunta.visible{ display: block;}
.textopregunta.visible h3{display: block;}
.textopregunta.visible img{display: block;}
.textopregunta.visible .opcion{display: block;}

.imagenpregunta{ float: left; width: 18vw; top: 5vw; position: relative; }

.nazareno.pregunta,.nazareno.correcto,.nazareno.error{ position: relative; right: 0; height:auto; width: auto; transition: 0.5s; max-width: 26vw; max-height: 100vh; }
.nazareno.pregunta.loading{ right: -50%;}
.nazareno.pregunta.visible,.nazareno.correcto.visible,.nazareno.error.visible{ display: block;}
.nazareno.pregunta.hidden,.nazareno.correcto.hidden,.nazareno.error.hidden{ display: none; }

.nazareno1{  margin-top: -3% !important; right: -3vw !important;}
.nazareno2{  margin-top: -3% !important; right: -3vw !important;}
.nazareno3{ right: -3vw !important; bottom: 0px !important; margin-top: -2% !important; }
.nazareno4{ right: -3vw !important; bottom: 0px !important; }
.nazareno5{ right: -5vw !important; height: 95% !important;  bottom: 0px !important; }
.nazareno6{ height: 107% !important; margin-top: -3% !important; right: -8vw !important; }
.nazareno7{ height: 108% !important; margin-top: -4% !important; right: -10vw !important; }

.volveraintentar{ float: left; left: 7vw; position: relative; top: 8vw; width: 55vw; height: auto; }
.volveraintentar h3{ font-size: 8vw; text-align: center;  width: 100%; font-weight: normal; line-height: 0.9; float: left; position: relative; margin-top: 1vw; margin-bottom: 1.3vw;}
.volveraintentar p.desc{float:left; width: 80%; margin-left: 10%; font-size: 3.6vw; text-align: center; margin-top: 0px; clear: both; margin-bottom: 1vw; }
.volveraintentar p.line2{float:left; width: 80%; margin-left: 10%; font-size: 2.2vw; text-align: center; margin-top: 0px; clear: both; }
.volveraintentar p.quieres{float:left; width: 80%; margin-left: 10%; font-size: 4.1vw; text-align: center; margin-top: 0px; clear: both; margin-bottom: 1vw; }
.volveraintentar a{float:left; position: absolute; bottom: 0; width: 75px; left: 50%; font-size: 3.8vw; text-align: center; margin-top: 0px; margin-bottom: -4vw; color: #000; text-decoration: none; }
.volveraintentar a.si{ margin-left: -90px; }
.volveraintentar a.no{ margin-left: 15px; }

.enhorabuena{ float: left; left: 0; position: relative; top: 0; width: 100%; height: auto; }
.enhorabuena h3{ font-size: 6vw; text-align: center;  width: 100%; font-weight: normal; line-height: 0.9; float: left; position: relative; margin-top: 1vw; margin-bottom: 0vw; margin-left: -1vw;}
.enhorabuena p.desc{float:left; width: 96%; margin-left: 2%; font-size: 2.5vw; text-align: center; margin-top: 2vw; clear: both; margin-bottom: 3vw; }
.enhorabuena p.line2{float:left; width: 80%; margin-left: 10%; font-size: 1.9vw; text-align: center; margin-top: 0px; clear: both; margin-bottom: 0.5vw;}
.enhorabuena p.line3{float:left; width: 100%; margin-left: 0; font-size: 2.4vw; text-align: center; margin-top: 0px; clear: both; margin-bottom: 1vw; }
.enhorabuena .finalizar{ color: #000; text-decoration: none; font-size: 3vw; width: 100%; float: left; text-align: center;margin-top: 26px;}

.whatsapp{ float: left; position: relative; background-color: #48ac42; color: #fff; font-size: 22px; width: 190px; left: 50%; margin-left: -110px; height: 50px; line-height: 50px;  padding-left: 50px; background-size: 35px; padding-right: 10px; text-decoration: none; background-image: url("../img/icono-whatsapp.png"); background-repeat: no-repeat; background-position: 8px 8px; border: solid 4px #e8ebee; border-radius: 10px;}

@media screen and (max-width: 600px)
{
	body{ background-position: center; overflow-x: hidden !important;}
	.pantalla.inicio{ top: 20vw;}
	.pantalla.inicio h1{ font-size: 9vw; top: 13vw; transition: 1.5s; width: 90% !important; line-height: 1;}
	.pantalla.inicio h1 span{ font-size: 13vw; float: left; width: 100%;}

	.pantalla.inicio .elige{ font-size: 7vw; width: 70%; line-height: 1.2; }
	.pantalla.inicio .niveles{ font-size: 11vw; }

	.pantalla.inicio .elige{ top: 41vw; }
	.pantalla.inicio .niveles{ top: 86vw; }	
	
	.bocadillo{ width: 89%; padding-left: 2%; padding-right: 2%; height: 500px; margin-left: 2vw;}
	.nazareno{ right: -9% !important; max-width: 50vw !important; position: absolute !important; top: 76vw !important; display: none !important;}
	
	.pantalla.inicio h6{ font-size: 6vw;}
	.pantalla.inicio h6 span{ font-size: 9vw;}
	
	.enhorabuena h3{ font-size: 12vw; margin-top: 6vw; margin-bottom: 5vw; }
	.enhorabuena p.desc{ font-size: 7vw; }
	.enhorabuena p.line2{ font-size: 7vw; }
	.enhorabuena p.line3{ font-size: 7vw; }
	.enhorabuena .finalizar{  font-size: 9vw; }
	
	.whatsapp{  font-size: 5.5vw; width: 215px; left: 50%; margin-left: -130px; height: 40px; line-height: 40px;  padding-left: 35px; background-size: 25px; padding-right: 5px;  background-repeat: no-repeat; background-position: 3px 7px; border: solid 3px #e8ebee; border-radius: 7px;}
	.nazareno.inicio{ width: 60vw; right: 1% !important;  display: block !important;}
	
	.numpregunta{font-size: 6vw; top: 3vw; }
	.contenidopregunta h3{ font-size: 8vw; margin-top: 14vw; margin-bottom: 5vw;}
	.crono{ width: 13vw; top: -1vw; right: 0vw;}

	
	.opcion{ float: left; border: solid 2px #000; height: 50px; width: 86%; line-height: 1; text-align: center; margin-top: 2vw; margin-right: 2.15vw; font-size: 7vw; padding-left: 2vw; padding-right: 2vw; padding-bottom: 0.6vw; padding-top: 0.5vw; margin-left:4%;}
	.opcion .respuestaContent{ position: absolute; transform: translateY(-50%); height: auto; width: 86%; top: auto;
	  margin-top: 26px; }
	.opcion.correcta{ /*background-color: chartreuse;*/}
	.textopregunta{ position: absolute; float: left; width: 100%; height: 32vw; transition: 1s; opacity: 0;margin-bottom: 6vw;}
	
	.textoresultado h4{ font-size: 12vw; margin-top: 15vw; }
	.textoresultado p{ font-size: 7vw; margin-top: 2vw;  }
	.siguientepregunta{ font-size: 9vw; margin-top: 3vw;  }

}