@charset "utf-8";
/* CSS Document */
@import url("L_G07_U04_L02_01.css");
/*FONDOS*/
.fondoPapel {
	background-image: url(../img/fondoPapel.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: bottom;
	width: 100%;
	height: 678px;
}
.fondoPapelAzul {
	background-image: url(../img/fondoPapelAzul.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: bottom;
	width: 100%;
	height: 678px;
}
.fondoNaranja {
	background: #DB9600;
}
.fondoRojo {
	background: #B8625A;
}
.fondoVerde {
	background: #64ABAE;
}
/*clear float*/
.ajuste {
	width: 100%;
	height: 1px;
	clear: both;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
/*imagenes*/
.generoLiterario {
	background-image: url(../img/generoLiterario.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 662px;
	height: 390px;
	display: inline-block;
	position: absolute;
	margin: 13% 0% 0 3%;
}
/*BOTONES TIPO1 */
.cntBtnTipo1 {
	display: inline-block;
	margin-top: 6%;
	width: 40%;
	position: absolute;
	margin-left: 50%;
}
.clickBtnTipo1 {
	background-image: url(../img/clickBtnTipo1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	width: 55px;
	height: 60px;
	margin-top: 16%;
	vertical-align: middle;
	float: right;
}
.clickBtnRelacionGenero {
	background-image: url(../img/clickBtnTipo1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	width: 55px;
	height: 60px;
	margin-top: -13%;
	vertical-align: middle;
	float: right;
	margin-right: 3%;
}
.btnTipo1 {
	width: 406px;
	height: 163px;
	font-family: 'cabinbold' !important;
	font-size: 61px;
	line-height: 60px;
	letter-spacing: 0;
	color: #FFFFFF;
	text-align: left;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	padding-left: 20px;
	padding-right: 27px;
	display: inline-block;
	margin: 1% 1% 3% 0%;
	cursor: pointer;
	position: relative;
}
.btnTipo1 .txt {
	margin-left: 2%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.btnNaranja {
	border: 3px solid #B97612;
	-webkit-box-shadow: 0px 5px 0px 0px #C37B0F;
	-moz-box-shadow: 0px 5px 0px 0px #C37B0F;
	box-shadow: 0px 5px 0px 0px #C37B0F;
}
.btnNaranja:hover {
	background: #CA8914;
}
.btnRojo {
	border: 4px solid #9D473F;
	-webkit-box-shadow: 0px 5px 0px 0px #8F3739;
	-moz-box-shadow: 0px 5px 0px 0px #8F3739;
	box-shadow: 0px 5px 0px 0px #8F3739;
}
.btnRojo:hover {
	background: #A74D52;
}
.btnVerde {
	border: 4px solid #5A9392;
	-webkit-box-shadow: 0px 5px 0px 0px #508783;
	-moz-box-shadow: 0px 5px 0px 0px #508783;
	box-shadow: 0px 5px 0px 0px #508783;
}
.btnVerde:hover {
	background: #3198A2;
}
/*POP UPS*/
.lyPopup {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	font-family: 'alegreya_sansmedium';
	font-size: 45px;
	line-height: 45px;
	width: 985px;
	color: #393c4a;
}
.lyPopup .lyContent {
	padding: 15px;
	text-align: left;
	width: 94%;
	padding: 25px 25px;
}
.lyPopup .lyContentIn {
	background-color: #FFFFFF;
	width: 101%;
	height: 100%;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.lyPopup .title {
	font-family: 'cabinbold';
	font-size: 63px;
	line-height: 59px;
	color: #303D48;
	padding-top: 5%;
}
.lyPopup .cnt {
	font-family: 'cabinmedium';
	font-size: 45px;
	line-height: 43px;
	color: #201815;
	padding-bottom: 5%;
}
.lyPopup .dividor {
	width: 100%;
	height: 20px;
}
.lyPopup .closePopup {
	background-image: url(../img/cerrarPopUp.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 67px;
	height: 67px;
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	font-size: 0;
	margin-top: 40px;
	margin-right: -85px;
}
/*GENEROS LITERARIOS */

.pop1, .pop2, .pop3, .pop4, .pop5 {
	margin-left: 5%;
	margin-top: 4%;
}
/*EPICO O NARATIVO*/
.pop1 .cnt {
	background-image: url(../img/pop1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1067px;
	height: 615px;
}
/*LIRICO*/

.pop2 .cnt {
	background-image: url(../img/pop2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1067px;
	height: 615px;
}
/*DRAMATICO*/

.pop3 .cnt {
	background-image: url(../img/pop3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1067px;
	height: 615px;
}
/*DEFINICION CUENTO 3*/

.pop4 .cnt {
	background-image: url(../img/pop4.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1067px;
	height: 615px;
}
/*DEFINICION CUENTO 3*/

.pop5 .cnt {
	background-image: url(../img/pop5.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1067px;
	height: 615px;
}
.vineta {
	content: "";
	width: 13px;
	height: 13px;
	background-color: #69A4CC;
	float: left;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: -2.5%;
	/* margin-right: 1.5%; */
	vertical-align: middle;
	margin-top: 2%;
}
.tituloGeneroLiterio {
	font-size: 40px;
	line-height: 48px;
	font-family: 'cabinmedium';
	color: #054756;
	width: 90%;
	margin: 2.5% 12%;
}
.cntRelacionTextoGenero {
	font-size: 55px;
	line-height: 52px;
	font-family: 'cabinbold';
	color: #FFFFFF;
	width: 80%;
	margin: -38% 0 0 12%;
	text-align: center;
	position: absolute;
	z-index: 2;
}
.cntCanvas {
	margin-left: 12%;
	position: relative;
	z-index: 1;
	width: 1016px;
	height: 470px;
}
.cntRelacionTextoGenero tr td {
	padding-bottom: 3%;
}
.relacionTexto {
	background-color: #69A4CC;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	width: 546px;
	height: auto;
	min-height: 96px;
	border: 5px solid #69A4CC;
}
.relacionTexto .txt {
	padding-top: 3%;
	padding-bottom: 2%;
}
.relacionGenero {
	background-color: #69A4CC;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	width: 326px;
	height: 96px;
	text-align: left;
	cursor: pointer;
	border: 5px solid #69A4CC;
}
.relacionGenero .txt {
	margin-left: 5%;
	padding-top: 5%;
}
.aro {
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	width: 26px;
	height: 26px;
	border: 8px solid #69A4CC;
	margin: 0 15px;
}
/*bibliografia*/

.bibliografia {
	background-image: url(../img/bibliografia.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1110px;
	height: 597px;
	margin: 0 auto;
}
/*Niño*/
.IL_L_G07_U04_L02_03_03_01 {
	background-image: url(../img/IL_L_G07_U04_L02_03_03_01.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 101px;
	height: 222px;
	position: absolute;
	margin: 40% 0 0 82%;
}
/*Señor*/
.IL_L_G07_U04_L02_03_03_02 {
	background-image: url(../img/IL_L_G07_U04_L02_03_03_02.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 112px;
	height: 284px;
	position: absolute;
	margin: 34% 0 0 93%;
}
/*Caballo de troya*/
.caballoTroya {
	background-image: url(../img/caballoTroya.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 226px;
	height: 203px;
	position: absolute;
	left: 23%;
	top: 58%;
}

/*muchachaLeyendo*/
.muchachaLeyendo {
	background-image: url(../img/muchachaLeyendo.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 211px;
	height: 244px;
	position: absolute;
left: 24%;
top: 52%;
}

/*romeoJulieta*/
.romeoJulieta {
	background-image: url(../img/romeoJulieta.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 235px;
	height: 193px;
	position: absolute;
left: 25%;
top: 56.5%;

}


.cntBtnBibliografia {
	display: inline-block;
	margin-top: 43%;
	width: 100%;
	margin-left: 5%;
}
.btnBibliografiaSec {
	background-image: url(../img/btnBibliografiaSec.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 507px;
	height: 68px;
}
.btnBibliografiaCarac {
	background-image: url(../img/btnBibliografiaCarac.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 360px;
	height: 68px;
	margin-right: 10%;
}
.tituloLeyendoBibliografia {
	background-image: url(../img/tituloLeyendoBibliografia.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 519px;
	height: 107px;
	position: absolute;
	margin: 1.5% 0 0 -5.5%;
}
.contenedorBiliografia {
	text-align: left;
	width: 935px;
	height: 565px;
	background-color: #054756;
	position: relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 20px 15px;
	display: inline-block;
	margin-left: 13%;
}
.contenedorBiliografia2 {
	text-align: left;
	width: 1060px;
	height: 565px;
	background-color: #054756;
	position: relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/* margin-top: 0%; */
	padding: 20px 15px;
	display: inline-block;
	margin-left: 8%;
}
.contenedorLeyendoBiliografia {
	height: 100%;
	width: 98%;
	text-align: left;
	background-color: #fefefe;
	border: 0px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	text-align: left;
	margin: 0 auto;
	overflow-y: scroll;
	padding-right: 15px;
}
.contenedorLeyendoBiliografia p {
	margin-top: 11%;
	margin-left: 2.5%;
	font-size: 35px !important;
	line-height: 39px !important;
	font-family: "cabinregular" !important;
	color: #054756;
}
.contenedorLeyendoBiliografia2 {
	height: 100%;
	width: 98%;
	text-align: left;
	background-color: #fefefe;
	border: 0px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	text-align: left;
	margin: 0 auto;
	padding-right: 15px;
}
.contenedorLeyendoBiliografia2 .preg {
	margin-left: 7.5%;
	font-size: 38px !important;
	line-height: 45px !important;
	font-family: "cabinregular" !important;
	color: #054756;
	margin-bottom: 2.5%;
}
/*FLECHAS*/
.flechaAtras {
	background-image: url(../img/flechaAtras.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 62.5px;
	height: 62.5px;
	margin-left: -87%;
	margin-top: 43%;
	position: absolute;
}
.flechaSiguiente {
	background-image: url(../img/flechaSiguiente.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 62.5px;
	height: 62.5px;
	margin-left: -5.5%;
	margin-top: 43%;
	position: absolute;
}
.flechaAtrasN {
	background-image: url(../img/flechaAtrasN.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 53px;
	height: 53px;
	margin-left: 30%;
	margin-top: 1.5%;
	position: absolute;
}
.flechaSiguienteN {
	background-image: url(../img/flechaSiguienteN.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 53px;
	height: 53px;
	margin-left: 66%;
	margin-top: 1.5%;
	position: absolute;
}
.numeracion {
	width: 40px;
	height: 40px;
	margin-left: -6%;
	margin-top: 2%;
	margin-right: 0%;
	vertical-align: bottom;
}
.numeracionN {
	width: 44px;
	height: 44px;
	margin-left: -6%;
	margin-top: 2%;
	margin-right: 0%;
	vertical-align: bottom;
}
.contRespuesta {
	height: auto;
	width: 982.16px;
	min-height: 128.53px;
	max-width: 100%;
	background-image: url(../img/contRespuesta.png);
	background-repeat: no-repeat;
	background-size: 98% 100%;
	border: 0px;
	padding: 1% 0% 0% 3.5%;
	margin: -2% 0% 1% 3%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.contRespuestaSwap {
	height: auto;
	width: 982.16px;
	min-height: 128.53px;
	/* max-width: 95%; */
	background-image: url(../img/contRespuestaSwap.png);
	background-repeat: no-repeat;
	background-size: 98% 100%;
	border: 0px;
	padding: 1% 0% 0% 3.5%;
	margin: -2% 0% 1% 3%;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
}
.contRespuestaSwap .texto {
	font-size: 38px !important;
	line-height: 40px !important;
	font-family: "cabinregular" !important;
	color: #054756;
	padding-bottom: 1%;
}
.obraTeatro {
	background-image: url(../img/obraTeatro.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1113px;
	height: 605px;
	margin: 0 auto;
}
.interrogante {
	background-image: url(../img/interrogante.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 138px;
	height: 156px;
	position: absolute;
	margin-top: 33.5%;
	margin-left: 39%;
}
.videoGenero {
	padding-top: 3%;
	margin: 0 auto;
}
.tituloQuestionario {
	color: #054756;
	font-size: 38px;
	line-height: 45px;
	font-family: 'cabinmedium' !important;
	letter-spacing: 0;
	text-align: left;
	margin-left: 9%;
	margin-top: 2%;
}
.questionarioFV {
	color: #054756;
	font-size: 50px;
	line-height: 55px;
	font-family: 'cabinmedium' !important;
	letter-spacing: 0;
	margin-left: 13%;
	width: 83%;
}
.questionarioFV tr td {
	padding-top: 1%;
	padding-right: 1.5%;
	vertical-align: top;
}
.tituloQuestionarioFV {
	text-align: center;
	font-size: 40px;
	line-height: 45px;
	font-family: 'cabinmedium' !important;
	margin-top: 0%;
}
.respuestaFV {
	background: url(../img/respuestaFV.png) center no-repeat;
	background-size: 100% 100%;
	width: 69px;
	height: 62px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
}
.fail {
	background: url(../img/respuestaMala.png) center no-repeat;
	background-size: 100% 100%;
	width: 69px;
	height: 62px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.success {
	background: url(../img/respuestaBuena.png) center no-repeat;
	background-size: 100% 100%;
	width: 69px;
	height: 62px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.lectura {
	background: url(../img/lectura.png) center no-repeat;
	background-size: 100% 100%;
	width: 1010px;
	height: 622px;
	margin: 0 auto;
}
.lectura .texto {
	font-size: 50px;
	line-height: 60px;
	font-family: 'cabinmedium';
	padding-left: 12%;
	padding-top: 14%;
	color: #054756;
}
.lectura .vineta {
	background-color: #B8625A;
	margin-top: 2.5%;
}
.charles {
	background: url(../img/charles.png) center no-repeat;
	background-size: 100% 100%;
	width: 254px;
	height: 298px;
	position: absolute;
	left: 18%;
	top: 28%;
}
.lectura .texto2 {
	font-size: 43px;
	line-height: 51px;
	font-family: 'cabinmedium';
	padding-left: 45%;
	padding-top: 20%;
	color: #054756;
}
.crucigrama {
	background: url(../img/crucigrama.png) center no-repeat;
	background-size: 100% 100%;
	width: 1089px;
	height: 679px;
	margin: -2.25% auto 0 auto;
}
.numeracionCruc_01 {
	background: url(../img/numeracionCruc_01.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 1.3% 0 0 32.3%;
}
.numeracionCruc_02 {
	background: url(../img/numeracionCruc_02.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 13.2% 0 0 26.3%;
}
.numeracionCruc_03 {
	background: url(../img/numeracionCruc_03.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 7.1% 0 0 46.6%;
}
.numeracionCruc_04 {
	background: url(../img/numeracionCruc_04.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 19.1% 0 0 35.2%;
}
.numeracionCruc_05 {
	background: url(../img/numeracionCruc_05.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 27.6% 0 0 26.3%;
}
.numeracionCruc_06 {
	background: url(../img/numeracionCruc_06.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 24.6% 0 0 35.2%;
}
.numeracionCruc_07 {
	background: url(../img/numeracionCruc_07.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 21.8% 0 0 43.8%;
}
.numeracionCruc_08 {
	background: url(../img/numeracionCruc_08.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 39.3% 0 0 14.6%;
}
.numeracionCruc_09 {
	background: url(../img/numeracionCruc_09.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 42% 0 0 40.8%;
}
.numeracionCruc_10 {
	background: url(../img/numeracionCruc_10.png) center no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	margin: 47.8% 0 0 23%;
}
.cntCompletaFrase {
	color: #054756;
	font-size: 48px;
	line-height: 45px;
	font-family: 'cabinmedium' !important;
	letter-spacing: 0;
	background-color: #FFFFFF;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	width: 1096px;
	height: 609px;
	margin: 0 auto;
}
.tblCompletaFrase {
	margin-left: 6%;
	width: 97%;
}
.tblCompletaFrase tr td {
	padding-top: 1%;
	padding-right: 1.5%;
	vertical-align: top;
	width: 72%;
}
.frase1 {
	background-image: url(../img/frase1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 232px;
	height: 73px;
	cursor: pointer;
	border: 0px;
}
.frase2 {
	background-image: url(../img/frase2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 346px;
	height: 73px;
	cursor: pointer;
	display: inline-block;
	margin: 0 1%;
	border: 0px;
	vertical-align: middle;
}
.frase1Swap {
	font-size: 45px;
	line-height: 45px;
	color: #FFFFFF;
	width: 222px;
	height: 53px;
	border: 5px solid #9D473F;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	cursor: pointer;
	background-color: #B8625A;
	text-align: center;
	padding-top: 10px;
}
.frase2Swap {
	font-size: 45px;
	line-height: 45px;
	color: #FFFFFF;
	width: 336px;
	height: 53px;
	border: 5px solid #9D473F;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	cursor: pointer;
	display: inline-block;
	margin: 0 1%;
	vertical-align: middle;
	background-color: #B8625A;
	text-align: center;
	padding-top: 10px;
}
/*
.cntPalabras{
	color: #054756;
	font-size: 28px;
	line-height: 36px;
	text-align: center;
}

.cntPalabras div[id*=palabra]{
	display:none;	
}
#palabra1 {
word-wrap: break-word;
width: 17px;
position: absolute;
margin-left: 32.8%;
margin-top: 4.3%;
}
#palabra2 {
position: absolute;
margin-left: 30.3%;
margin-top: 13%;
letter-spacing: 19px;
}

#palabra3 {
word-wrap: break-word;
width: 17px;
position: absolute;
margin-left: 47%;
margin-top: 10.1%;
}

#palabra4 {
position: absolute;
margin-left: 38.3%;
margin-top: 18.8%;
letter-spacing: 17px;
}

#palabra5 {
position: absolute;
margin-left: 29.7%;
margin-top: 27.4%;
letter-spacing: 20px;
}
#palabra6 {
word-wrap: break-word;
width: 17px;
position: absolute;
margin-left: 35.7%;
margin-top: 27.4%;
}
#palabra7 {
word-wrap: break-word;
width: 17px;
position: absolute;
margin-left: 43.9%;
margin-top: 24.65%;
}
#palabra8 {
position: absolute;
margin-left: 18.3%;
margin-top: 39%;
letter-spacing: 20px;
}
#palabra9 {
position: absolute;
margin-left: 43.9%;
margin-top: 42%;
letter-spacing: 20px;
}
#palabra10{
position: absolute;
margin-left: 26.2%;
margin-top: 47.6%;
letter-spacing: 20.5px;
}
*/