@charset "utf-8";
/* CSS Document */
/*clear float*/
.ajuste {
	width: 100%;
	height: 1px;
	clear: both;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.palabraResaltada {
	color: #001C7D;
}
.numeracion {
	color: #F52929;
}
.videoGenero {
	padding-top: 2%;
	margin: 0 auto;
}
.imgSugerencia {
	width: 25px;
	height: 25px;
	vertical-align: middle;
}
/*CONTENEDORES*/
.cntBordeResumen {
	border: 3px dashed #A1E1FF;
	width: 85%;
	height: 574px;
	padding: 1.5% 1.5%;
	margin: 0 auto;
}
.cntResumen {
	background-color: #F9F5BE;
	width: 98%;
	height: 98%;
	text-align: center;
	padding: 1% 1% 0% 1%;
	letter-spacing: 0;
}
.cntResumen .tituloDefTexto {
	font-family: 'alegreya_sansbold';
	font-size: 63px;
	line-height: 59px;
	color: #4470B4;
	text-align: left;
	margin-left: 3%;
	text-align: center;
}
.cntResumen .defTexto {
	font-family: 'cabinregular';
	font-size: 35px;
	line-height: 40px;
	color: #385F8E;
	margin-top: 2%;
	text-align: left;
	margin-left: 3%;
}
.cntBordePasosResumen {
	background-color: #F2DF8A;
	width: 92%;
	height: 572px;
	padding: 1.5% 1.5%;
	margin: 0 auto;
}
.cntPasosResumen {
	border: 2px dashed #DC901A;
	background-color: transparent;
	width: 98%;
	height: 98%;
	text-align: center;
	padding: 1% 1% 0% 1%;
	letter-spacing: 0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-top: -0.5%;
}
.cntBordeAspectosResumen {
	background-color: #A1BF37;
	width: 92%;
	height: 572px;
	padding: 1.5% 1.5%;
	margin: 0 auto;
}
.cntAspectosResumen {
	border: 2px solid #FEFEFE;
	background-color: transparent;
	width: 98%;
	height: 98%;
	text-align: center;
	padding: 1% 1% 0% 1%;
	letter-spacing: 0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-top: -0.5%;
}
.cntDiarioClara {
	background-color: #DAEBF8;
	width: 85%;
	height: 544px;
	padding: 1.5% 1.5%;
	margin: 0 auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.cntDiarioClara .texto {
	font-family: 'cabinregular';
	font-size: 40px;
	line-height: 48px;
	color: #3E3D3D;
	display: inline-block;
	position: absolute;
	left: 12%;
	text-align: right;
	top: 30%;
}
/*FLECHAS*/
.flechaAtras {
	background-image: url(../img/flechaAtras.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 67px;
	height: 67px;
}
.flechaSiguiente {
	background-image: url(../img/flechaSiguiente.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 67px;
	height: 67px;
}
.flechaAtras2 {
	background-image: url(../img/flechaAtras2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 67px;
	height: 67px;
}
.flechaSiguiente2 {
	background-image: url(../img/flechaSiguiente2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 67px;
	height: 67px;
}
.flechaAtras3 {
	background-image: url(../img/flechaAtras3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 67px;
	height: 67px;
}
.flechaSiguiente3 {
	background-image: url(../img/flechaSiguiente3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 67px;
	height: 67px;
}
.flechaAtras4 {
	background-image: url(../img/flechaAtras4.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 90px;
	height: 89px;
}
.flechaSiguiente4 {
	background-image: url(../img/flechaSiguiente4.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 90px;
	height: 89px;
}
/*IMAGENES*/
.pilaLibros {
	background-image: url(../img/pilaLibros.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 305px;
	height: 368px;
	display: inline-block;
	position: absolute;
	left: 10%;
	top: 30%;
}
.agenda {
	background-image: url(../img/agenda.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 609px;
	height: 472px;
	display: inline-block;
	position: absolute;
	left: 42%;
	top: 15%;
}
.flechaRoja {
	background-image: url(../img/flechaRoja.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 74px;
	height: 160px;
	display: inline-block;
	position: absolute;
	left: 33%;
	top: 42%;
}
.textAreaResumen {
	font-family: "cabinmedium" !important;
	width: 96%;
	height: 386px;
	background-color: #FEFEFE;
	border: 2px solid #CCCAC9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-size: 60px;
	text-shadow: 1px 1px 3px #424242;
	display: block;
	margin-left: 1%;
	margin-top: 1%;
	padding: 10px 10px 10px 10px;
	resize: none;
}
.textAreaResumen:focus {
	outline : none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 2.5px solid #CCCAC9;
}
.resumenCuadro1 {
	background-image: url(../img/resumenCuadro1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 295px;
	height: 295px;
	position: absolute;
	left: 39%;
	top: 9%;
	z-index: 2;
	cursor: pointer;
}
.resumenCuadro2 {
	background-image: url(../img/resumenCuadro2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 280px;
	height: 271px;
	position: absolute;
	left: 10%;
	top: 10.8%;
	z-index: 2;
	display: none;
}
.resumenCuadro3 {
	background-image: url(../img/resumenCuadro3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 280px;
	height: 241px;
	position: absolute;
	top: 49%;
	left: 10%;
	z-index: 2;
	cursor: pointer;
	display: none;
}
.resumenCuadro4 {
	background-image: url(../img/resumenCuadro4.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 280px;
	height: 241.68px;
	position: absolute;
	left: 39.6%;
	top: 49%;
	z-index: 2;
	cursor: pointer;
	display: none;
}
.resumenCuadro5 {
	background-image: url(../img/resumenCuadro5.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 280px;
	height: 271px;
	position: absolute;
	left: 66%;
	top: 11%;
	cursor: pointer;
	z-index: 2;
}
.resumenCuadro6 {
	background-image: url(../img/resumenCuadro6.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 280px;
	height: 241.68px;
	position: absolute;
	left: 66%;
	top: 49%;
	z-index: 2;
	cursor: pointer;
	display: none;
}
.resumenFlecha2 {
	background-image: url(../img/resumenFlecha2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 176px;
	height: 81px;
	position: absolute;
	left: 31%;
	top: 21%;
	z-index: 1;
	display: none;
}
.resumenFlecha3 {
	background-image: url(../img/resumenFlecha3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 202px;
	height: 215px;
	position: absolute;
	top: 40%;
	left: 30%;
	z-index: 1;
	display: none;
}
.resumenFlecha4 {
	background-image: url(../img/resumenFlecha4.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 53px;
	height: 84px;
	position: absolute;
	left: 49%;
	top: 44%;
	z-index: 1;
	display: none;
}
.resumenFlecha5 {
	background-image: url(../img/resumenFlecha5.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 176px;
	height: 81px;
	position: absolute;
	left: 55%;
	top: 20%;
	cursor: pointer;
	z-index: 1;
}
.resumenFlecha6 {
	background-image: url(../img/resumenFlecha6.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 202px;
	height: 215px;
	position: absolute;
	left: 54%;
	top: 39%;
	z-index: 1;
	display: none;
}
.clickResumen1 {
	background-image: url(../img/clickResumen1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 26.18px;
	height: 28.98px;
}
.clickResumen2 {
	background-image: url(../img/clickResumen2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 26.18px;
	height: 28.98px;
}
.clickAspecto {
	background-image: url(../img/clickAspecto.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 37.34px;
	height: 41.35px;
}
.aspectoResumen {
	background-image: url(../img/aspectoResumen.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1049px;
	height: 462px;
	margin: 4% auto 0 auto;
}
.cntAspectos {
	margin-left: 4%;
	padding-top: 10.5%;
}
.aspecto {
	background-image: url(../img/aspecto.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 988px;
	height: 58px;
	border: 0px;
	margin-left: -18px;
	margin-bottom: 8px;
}
.aspectoSwap {
	background-image: url(../img/aspectoSwap.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 988px;
	height: 58px;
	margin-bottom: 12px;
}
.txtAspecto {
	font-family: 'cabinregular';
	font-size: 35px;
	line-height: 58px;
	color: #6E6E6E;
	margin-left: 50px;
	text-align: left;
}
.diarioClara1 {
	background-image: url(../img/diarioClara1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 541px;
	height: 351px;
	display: inline-block;
	position: absolute;
	left: 48%;
	top: 25%;
}
.diarioClara2 {
	background-image: url(../img/diarioClara2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1057px;
	height: 508px;
	display: inline-block;
}
.fabula {
	background-image: url(../img/fabula.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 501px;
	height: 462px;
	display: inline-block;
	top: 17%;
	position: absolute;
	z-index: 2;
}
.enlaceFabula {
	background-color: #F5F5F5;
	width: 641px;
	height: 85px;
	font-family: 'cabinregular';
	font-size: 35px;
	line-height: 80px;
	color: #30317F;
	position: absolute;
	left: 42.2%;
	top: 45%;
	z-index: 1;
}
.comentarioFabula {
	font-family: 'cabinregular';
	font-size: 35px;
	line-height: 45px;
	color: #375F98;
	text-align: right;
	margin-right: 5%;
	margin-top: 3%;
}
.imgSecuenciaFabula {
	width: 223px;
	height: 169px;
}
.aspectoTextoFabula {
	background-image: url(../img/aspectoTextoFabula.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 485px;
	height: 485px;
	display: inline-block;
	position: absolute;
	left: 29%;
	top: 19%;
}
.tituloFabula {
	font-family : 'cabinregular';
	font-size: 35px;
	line-height: 37px;
	color: #575756;
	margin: 0 auto;
	letter-spacing: 0;
	margin: 1% auto 1% 5%;
}
.btnPopupResumen {
	background-image: url(../img/btnPopupResumen.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 164px;
	height: 35.69px;
	display: inline-block;
	vertical-align: middle;
}
/*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: 1188px;
	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: 61px;
	line-height: 58px;
	color: #393C4A;
	padding-top: 3%;
	padding-bottom: 2%;
}
.lyPopup .cnt {
	font-family: 'cabinregular';
	font-size: 50px;
	line-height: 60px;
	color: #212120;
	padding-bottom: 5%;
}
.lyPopup .dividor {
	width: 100%;
	height: 20px;
}
.lyPopup .closePopup {
	background-image: url(../img/closePopup.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: 12px;
	margin-right: 15px;
}
.lyPopup .closePopup2 {
	background-image: url(../img/closePopup2.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 79.67px;
	height: 79.67px;
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	font-size: 0;
	margin-top: -10px;
	margin-right: -10px;
}
/*EL CUENTO */
/*DEFINICION CUENTO 1*/
.pop1 {
	margin-left: 3%;
	margin-top: 10%;
	background-color: #CA4F23;
}
.pop1 .cnt {
	margin: 0 auto 0 3%;
	font-family: 'cabinregular';
	font-size: 35px;
	color: #575756;
	line-height: 39px;
	text-align: left;
	letter-spacing: 0;
	padding-bottom: 4%;
}
.pop1 .title {
	font-family: 'cabinbold';
	font-size: 40px;
	color: #69A841;
	padding-top: 2%;
	padding-bottom: 2%;
}
.cntImgFabula {
	width: 97%;
	margin: 0 auto;
}
.imgFabula {
	display: inline-block;
	width: 230PX;
	height: 180px;
	background-color: #F7E939;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: 10px solid #F7E939;
	-webkit-box-shadow: 7px 7px 9px 1px rgba(86, 82, 85, 0.64);
	-moz-box-shadow: 7px 7px 9px 1px rgba(86, 82, 85, 0.64);
	box-shadow: 7px 7px 9px 1px rgba(86, 82, 85, 0.64);
	margin: 0.5% 0.5%;
}
.tituloResumen1 {
	background-image: url(../img/tituloResumen1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 461.94px;
	height: 75.85px;
	position: absolute;
	left: -3.3%;
	top: -1%;
}
.tituloResumen2 {
	background-image: url(../img/tituloResumen2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 690px;
	height: 80.52px;
	position: absolute;
	left: -3.3%;
	top: -1%;
}
.tituloResumen3 {
	background-image: url(../img/tituloResumen3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 690px;
	height: 80.52px;
	position: absolute;
	left: -3.3%;
	top: -1%;
}
.tituloResumen4 {
	background-image: url(../img/tituloResumen4.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 670px;
	height: 130.42px;
	position: absolute;
	left: -3.3%;
	top: 0%;
}
.preguntaResumen {
	width: 960px;
	height: 95px;
	background-color: #FFFFFF;
	-webkit-border-radius: 20px;
	-webkit-border-top-left-radius: 200px;
	-webkit-border-bottom-left-radius: 200px;
	-moz-border-radius: 20px;
	-moz-border-radius-topleft: 200px;
	-moz-border-radius-bottomleft: 200px;
	border-radius: 20px;
	border-top-left-radius: 200px;
	border-bottom-left-radius: 200px;
	margin-bottom: 1%;
	cursor:pointer;
}
.vinetaPreguntaResumen {
	font-family: 'cabinregular';
	font-size: 80px;
	width: 85px;
	height: 85px;
	color: #FEFEFE;
	background-color: #4470B4;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	float: left;
	margin-top: 0.5%;
	line-height: 80px;
}
.preguntaResumen .texto {
	font-family: "Myriad Pro";
	font-size: 37px;
	line-height: 37px;
	color: #4470B4;
	text-align: left;
	margin-left: 14%;
	padding-top: 2%;
}
.cntHeaderPasoDestinos
{	width: 97%;
	margin:5% auto 0% 6%;
}
.headerPasoDestino{
display: inline-block;
background: #68A7DE;
text-align: center;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin: 0px 8.5% 0px 0px;
height: 41.5px;
width: 125px;
font-family:'cabinbold';
color:#FEFEFE;
font-size:24px;
letter-spacing:0;
line-height:42px;
}
.cntPasoDestinos {
	width: 98%;
	margin-left: 2.5%;
}




.imgPaso{width:202.47px;
	height: 198.395px;}
.paso{
display: inline-block;
	width:202.9px;
	height: 197px;
	background-color: #FEFEFE;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	display:inline-block;
    -webkit-box-shadow: 6px 10px 0px 0px #68A7DE;
    -moz-box-shadow: 6px 10px 0px 0px #68A7DE;
    box-shadow: 6px 10px 0px 0px #68A7DE;
	margin:0 16px 16px 0;
}