@charset "utf-8";
/* CSS Document */
/*clear float*/
.ajuste {
    width: 100%;
    height: 1px;
    clear: both;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.cntFondoBorde {
    border: 3px dashed #A1E1FF;
    width: 1125px;
    height: 590px;
    margin: 0 auto;
display: -moz-box;
display: -webkit-box;
display: box;
display: -ms-flexbox;
}

.fondoAmarillo{
	background-color:#F7FCB1;
    width: 1097px;
    height: 552px;
	margin: 1.5% auto 0 auto;
}


/*NAVEGACION*/

.navInicio {
    background-image: url(../img/nav/navInicio.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 67.44px;
    height: 62.4px;
	position: absolute;
	left: 87%;
	top: 12.5%;
}

.flechaAtras {
    background-image: url(../img/nav/flechaAtras.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 67px;
    height: 67px;
}

.flechaSiguiente {
    background-image: url(../img/nav/flechaSiguiente.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 67px;
    height: 67px;
}

.tituloFondoAmarillo{
	font-family: 'cabinbold';
	font-size: 45px;
	color:#18192E;
	margin-left: 3%;
	margin-top: 2%;
	letter-spacing:0;
}

.textoFondoAmarillo{
	font-family: 'cabinmedium';
	font-size: 35px;
	color:#18192E;
	letter-spacing:0;
	margin-left: 3%;
	margin-top: 5px;
}

.piePagina{
	font-family: 'cabinmedium';
  font-family: 'cabinmedium';
  font-size: 15.5px;
  color: #6E6E6E;
}

/*HOMBRE DUDOSO*/
.hombreDudoso{
  background-image: url(../img/hombreDudoso/hombreDudoso.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 317px;
    height: 297px;
	position: absolute;
	left: 68.5%;
	top: 48.5%;
}
.hombreDudoso2{
  background-image: url(../img/hombreDudoso/hombreDudoso2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 260px;
    height: 278px;
	position: absolute;
	left: 73.15%;
	top: 51.3%;
}
.hombreDudoso3{
  background-image: url(../img/hombreDudoso/hombreDudoso3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 324px;
    height: 333px;
	position: absolute;
	left: 68.9%;
	top: 13.1%;
}

/*personajeBlanco*/
.personajeBlanco{
  background-image: url(../img/personajeBlanco/personajeBlanco.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 332px;
    height: 418px;
	position: absolute;
	left: 60%;
	top: 22%;
}
.personajeBlanco2{
  background-image: url(../img/personajeBlanco/personajeBlanco2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 355px;
    height: 490px;
	position: absolute;
	left: 63%;
	top: 21.5%;
}
.personajeBlanco3{
  background-image: url(../img/personajeBlanco/personajeBlanco3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 362px;
    height: 516px;
	position: absolute;
	left: 64%;
	top: 12%;
}
/*INSPECTOR*/
.inspector{
	background-image: url(../img/inspector.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 391px;
	height: 548px;
	position: absolute;
	left: 9.5%;
	top: 11.2%;
}
/*LUPA*/
.lupa{
	background-image: url(../img/lupa.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 477px;
	height: 275px;
	position: absolute;
	left: 55.7%;
	top: 51.7%;
}
/*COMIC*/
.comic{
	background-image: url(../img/comic.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 608px;
	height: 342px;
	position: absolute;
	left: 45%;
	top: 28%;
}
/*VENTANA*/
.ventana{
	background-image: url(../img/ventana.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 272px;
	height: 270px;
	position: absolute;
	left: 67%;
	top: 25%;
}

/*rompecabeza*/
.rompecabeza{
	background-image: url(../img/rompecabeza.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 444px;
	height: 415px;
	position: absolute;
	left: 59%;
	top: 22%;
}

/*globoRompeCabeza*/
.globoRompeCabeza{
	background-image: url(../img/globoRompeCabeza.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 422px;
	height: 417px;
	position: absolute;
	left: 58%;
	top: 27%;
}

/*chino*/
.chino{
	background-image: url(../img/chino.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 260px;
	height: 376px;
	position: absolute;
	left: 70%;
	top: 23%;
}

/*manoCorazon*/
.manoCorazon{
	background-image: url(../img/manoCorazon.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 239px;
	height: 188px;
	position: absolute;
	left: 70%;
	top: 62%;
}
/*BOTON*/
.btnBorde{
vertical-align: middle;
	width: 224px;
	height: 52.5px;
	background-color: #7FC31B;
	padding:4px 8px 8px 4px;
	display: inline-block;
}
.btnBorde .cntBtnBorde{
width: 100%;
height: 100%;
/* height: 86%; */
/* margin: 1% 1% 0% 1%; */
letter-spacing: 0;
border: 2px dashed #18192E;
background-color: transparent;
margin: 0% auto;
position: relative;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.btnBorde .cntBtnBorde .texto {
	font-family: 'cabinmedium' ;
	font-size: 35px ;
	color: #18192E ;
	line-height: 50px ;
	margin-left: 16px ;
	text-align: left;	
}

.btnBorde .clickBtn {
background-image: url(../img/click/clickBtn.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 39.67px;
height: 44px;
right: -10px;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.vinetaV {
vertical-align: middle;
	width: 34px;
	height: 34px;
	padding-right: 10px;
	display: inline-block;
}

.lstPasoHipotesis li {
	margin-bottom: 7.5px;
}

.lstAnalisis {
list-style: none;
text-align: left;
font-size: 35px;
line-height: 45px;
padding: 0;
margin-left: 6.5%;
}
.lstAnalisis li:before {
	content: "";
	width: 8px;
	height: 8px;
	background-color: #18192E;
	float: left;
	margin: 20px 10px 0 -2px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.btnEstructura{
	background-image: url(../img/btnEstructura.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 443px;
    height: 101px;
}
.btnEstructura .texto{
	font-family: 'cabinmedium';
	font-size: 45px;
	margin-left: 8%;
	line-height: 80px;
}


/*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/closePopup/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: 8px;
        margin-right: 8px;
        z-index: 2;
		margin-top: -22px;
		margin-right: -22px;
    }
	
.popupDescripcion{
 background-color: rgb(255,255,255);
 width: auto;
 margin-left: 7.25%;
 margin-top:16%;

}

.popupDescripcion .lyContent{
padding:15px;
 background-color: rgb(255,255,255);
  width:1009px; height:354px;
     -webkit-box-shadow: 8px 8px 0px 0px #E5E5E5;
    -moz-box-shadow: 8px 8px 0px 0px #E5E5E5;
    box-shadow: 8px 8px 0px 0px #E5E5E5;
}

.popupDescripcion .titulo{
font-family: 'cabinbold';
font-size: 54px;
text-align: left;
line-height: 35px;
margin-left: 2%;
letter-spacing: 0;
margin-top: 5%;
color: #18192E;
}

.popupDescripcion .texto{
font-family: 'cabinmedium';
font-size: 35px;
text-align: left;
line-height: 40px;
margin-left: 2%;
letter-spacing: 0;
margin-top: 5%;
color: #18192E;
}


.popupJuan{
 background-color: rgb(255,255,255);
 width: auto;
 margin-left: 7.25%;
 margin-top:16%;

}

.popupJuan .lyContent{
padding:15px;
 background-color: rgb(255,255,255);
  width:1009px; height:354px;
     /*-webkit-box-shadow: 8px 8px 0px 0px #E5E5E5;
    -moz-box-shadow: 8px 8px 0px 0px #E5E5E5;
    box-shadow: 8px 8px 0px 0px #E5E5E5;*/
	    -webkit-box-shadow: 2px 2px 6px 1px #616161;
    -moz-box-shadow: 2px 2px 6px 1px #616161;
    box-shadow: 2px 2px 6px 1px #616161;
}

.popupJuan .titulo{
font-family: 'cabinbold';
font-size: 54px;
text-align: left;
line-height: 35px;
margin-left: 8%;
letter-spacing: 0;
margin-top: 6%;
color: #18192E;
}

.popupJuan .texto{
font-family: 'cabinmedium';
font-size: 35px;
text-align: left;
line-height: 40px;
margin-left: 8%;
letter-spacing: 0;
margin-top: 5%;
color: #18192E;
}
