/* Maquetación base: Anthony Mena*/
@charset "utf-8";
			


/************************************
*********     RESET       	*********
*************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


p{
	white-space: pre-wrap;	
}
/************************************
*********     FIN-RESET     *********
*************************************/




body {
	
	background:#FFF;	
	
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	color:#666;
}

a
{
	outline: none;	
}


/************************************
*********     CARCASA       *********
*************************************/

#carcasa
{
	
	background-size: 983px 690px;
	/*background-color:#ffffff;*/
	width:983px;
	height:690px;
	margin:0 auto;
	
	
	
	
	
	
	/*border:2px solid #c8c6c6;*/
	
	overflow:hidden;
	position:relative;
}



/************************************
*********     HEADER       *********
*************************************/
#encabezado {
	
	height:100px;
	margin-bottom:0px;
	position:absolute;
	top:0px;
	left:0px;
	width:983px;
}





#tituloObjeto
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:28px;
	float:left;
	margin:45px 0px 20px 20px;
	font-weight:normal;
	color:#666;
	
}




#logo
{
	float:right;
	margin: 32px 20px 0px 0px;
	display: none;
}



/****************************************
********* CONTENEDOR ACTIVIDAD  *********
*****************************************/

#actividad
{
	background:url(../img/Fondo_Ob.jpg) no-repeat;
	padding:0px;
	margin: 1px 1px 1px 1px;	
	width: 981px;
	height: 688px;


	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	-webkit-border-top-left-radius: 12px;
	-webkit-border-top-right-radius: 12px;
	-moz-border-radius-topleft: 12px;
	-moz-border-radius-topright: 12px;
	-o-border-radius-topleft: 12px;
	-o-border-radius-topright: 12px;
	-ms-border-radius-topleft: 12px;
	-ms-border-radius-topright: 12px;


}



.nameActi {
	font-size:21px;
	line-height:23px;
	color:#666;
	float:left;
	left: 755px;
    position: absolute;
    top: 140px;
	font-family:Arial, Helvetica, sans-serif;

	}
	


/****************************************
*************** ICONO  ******************
*****************************************/


.icono{
	background:url(../img/icono.svg) no-repeat;
	width:43px;
	height:43px;
	position: absolute;
    right: 237px;
    top: 130px;    
  }


/****************************************
*************** tituloRecurso ***********
*****************************************/

#tituloRecurso
{

	display: none;
}



.txtGen1 {
		font-size: 15px;
    	font-family:Arial, Helvetica, sans-serif;
    	line-height: 18px;
		}
		
	.txtGen2 {
		font-size: 22px;
		font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	line-height: 18px;
		
		}


/****************************************
*************** POP UP  ******************
*****************************************/


.WrPuAlpha {
		width:100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.7);
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 100000;
		display:none;
		overflow:hidden;
	}
	
	
	.PopUp {
		background:#faa61a;
	
		
		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-ms-border-radius: 15px;
		-o-border-radius: 15px;
		
		
		
		overflow:hidden;
		
		
		
		margin:auto;
		width:507px;
		
		display:none;
		margin-top:220px;
		padding:6px;
		position:relative;
		
		

	}
	
	.PopUpRecurso {
		background:#fff;
	
		margin:auto;
    	width:990px;
		height:699px;
		display:none;
	
	}
	
	.PopUpHead {
		width: 100%;
		height: 35px;
	}
	
	
	.PopUpCerrar {
		background: url(../img/PopUpCerrar.svg) no-repeat;
		width: 22px;
		height: 22px;
		background-size: 44px 22px;
		float: right;
		margin: 7px 7px 0px 0;
		cursor: pointer;
	}
	
	
	.PopUpCerrar:hover {
		background-position:-22px 0;
	}
	
	.WrPopUp {
		padding: 10px 40px 20px 40px;
		overflow: hidden;
	}
	
	
	
		
	.txtbold {
		font-weight:bold;}
	
	.vinnetaPop {
		float:left;
		margin-right:5px;
		font-weight:bold;
		}
		
		
	.CajaRec {
		width:100%;
		height:100%;
		}
	
	.BoxColor {
		position:absolute; 
		top:0px; 
		left:5%;
		width: 90%; 
		height:100%;
		}
		
	.BoxTexPop {
		background:#fff; 
		overflow:hidden; 
		border-radius:12px; 
		position: relative; 
		z-index: 5;
		}
		
	.ciencias {
		width: 25%; 
		height:100%; 
		background:#99ca3c;  
		position:absolute;
		left: 0%;
		}
		
	.com {
		width: 25%; 
		height:100%; 
		background:#ed1b2f;  
		position:absolute;
		left: 25%;
		}
		
	.mate {
		width: 25%; 
		height:100%; 
		background:#0089d0; 
		position:absolute;
		left: 50%
		}
		
	.social {
		width: 25%; 
		height:100%; 
		background:#00b6ad; 
		position:absolute;
		left: 75%;
		}
		
	.PopRecurso {
		width:100%;
		height:100%;
		}
		

/****************************************
*************** ZONA ACTIVA  ***********
*****************************************/

.WrappShape{
	width: 983px;
	height: 690px;
	position: absolute;
	top:0px;
	left:0px;
	
	
}

#WrappZonas
{
	z-index:290;
}

#WrappSombras
{

	z-index:180;
}





.shapesGen {
	position: absolute;
	top: 0px;
	left:0px;
}

.zonaActiva {

  cursor:pointer;
  opacity:0;
}

.sombra
{
	opacity: 0; 

}


.exagonoInicio {
	position: absolute;
    top: 289px;
    left: 39px;
	}




#mascota
{
	background:url(../img/mascota.png) no-repeat;
	width:96px;
	height:203px;
	background-position: 0px -306px;
	position: absolute;
	z-index: 190; 
	left:80px; 
	top:130px;
	display:none;


}


/****************************************
*************** VARIABLES  ***********
*****************************************/



.trayectoria {
	width:15px;
	height:15px;
	background:url(../img/A.svg) no-repeat;
	float:left;
	margin-top:2px;
	}
	
.desplazamiento {
	width:15px;
	height:15px;
	background:url(../img/B.svg) no-repeat;
	float:left;
	margin-top:2px;
	}


.masinfo {
	width:238px; 
	height:219px; 
	float:left;
	background:url(../img/masinfo.jpg) no-repeat;
	
	}
	

.cajatext {
	padding:10px;
	background-color:#DCF39A;
	border-radius:12px;
	}
	

	

.situProblem {
	background:url(../img/situacion.svg) no-repeat; 
	width: 162px;
    height: 218px;
    float: left;
    margin-right: 10px;
	}