/*********************************************************
 * DEFINICION DE FUENTES A UTILIZAR EN LA INTERFAZ
 * Y LOS CONTENIDOS
 *
 * AUTOR : FJLG
 * CREADO : 22/07/2016
 * VERSIÓN : 1.0
 ********************************************************/


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

html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:top;
    background:transparent;
    }
    body {
    line-height:1;
    }
	
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
    display:block;
    }
    nav ul {
    list-style:none;
    }
    blockquote, q {
    quotes:none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content:'';
    content:none;
    }
    a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    /* change colours to suit your needs */
    ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
    }
    /* change colours to suit your needs */
    mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
    }
    del {
    text-decoration: line-through;
    }
    abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
    }
    table {
    border-collapse:collapse;
    border-spacing:0;
    }
    /* change border colour to suit your needs */
    hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
    }
    input, select {
    vertical-align:middle;
    }

/**************
 * imports
 *************/

/*********************************************************
 * CONFIGURACION DE LA INTERFAZ
 * Definicion de variables que dan como resultado el 
 * aspecto de la interfaz y del contenido
 *
 * AUTOR : FJLG
 * CREADO : 25/07/2016
 * VERSIÓN : 1.0
 ********************************************************/

/***************************
 * DEFINICION DE VARIABLES *
 ***************************/

/* MATERIALES BASE */
@materialBlanco: rgb(255,255,255);
@materialGrisOscuro: rgb(158,158,158);
@materialGrisBase: rgb(205,205,205);
@materialGrisMedio: rgb(224,224,224);
@materialGrisClaro: rgb(249,249,249);

@overlayBase:rgba(81,81,81,0.2);
@overlayOscuro:rgba(81,81,81,0.7);

/* MATERIALES */
@materialBase: rgb(216,30,5);
@materialSecundario: rgb(202,3,3);
@materialTerciario: rgb(172,4,4);

@materialContenido:rgb(190,15,15);
@materialActivo:rgb(216,30,5);

@materialBotonesSvg: rgb(255,255,255);
@materialElementoInactivo: rgb(97,97,97);
@materialElementoVisto: rgb(69,154,65);

@materialClose: rgb(255,26,26);

@materialDetalles: rgb(238,187,0);

/* FUENTES */
@fuentePrincipal:'MetaNormal',Arial,Helvetica,sans-serif;
@fuenteNegrita:'MetaBold',Arial,Helvetica,sans-serif;
@fuenteSecundaria:Arial, Helvetica, sans-serif;
@colorFuenteBase:rgb(81,81,81);

/* SOMBRAS */
@sombraBase:0px 0px 5px 0px rgba(0,0,0,0.7);
@sombraIconosSm:0px 3px 3px 0px rgba(0,0,0,0.6);
@sombraMenuHerramientas:2px 0px 3px 0px rgba(0,0,0,0.3);
@sombraBotonesContenido:0px 0px 3px 0px rgba(0,0,0,0.7);
@sombraCajasContenido:0px 0px 3px 0px rgba(0,0,0,0.7);
@sombraIconosMenuActivos:inset 4px 0px 5px -5px rgba(0,0,0,1);

/* BORDERS */
@radioBordeBase: 3px;
@radioCirculo:100%;

/* MARGENES ESTANDAR */

@margenVertical:15px;


/*************************
 * MIXINS - DEFINICIONES *
 *************************/
 
.sombraBase(){
	-webkit-box-shadow: 	@sombraBase;
	-moz-box-shadow: 		@sombraBase;
	box-shadow: 			@sombraBase;
}

.sombraMenuHerramientas(){
	-webkit-box-shadow: 	@sombraMenuHerramientas;
	-moz-box-shadow: 		@sombraMenuHerramientas;
	box-shadow: 			@sombraMenuHerramientas;
}

.sombraIconos(){
	-webkit-box-shadow: 	@sombraIconosSm;
	-moz-box-shadow: 		@sombraIconosSm;
	box-shadow: 			@sombraIconosSm;
	
	@media (min-width:1024px) {
		-webkit-box-shadow: none;
		-moz-box-shadow: 	none;
		box-shadow: 		none;		
	}
}

.sombraBotonesContenido(){
	-webkit-box-shadow: 	@sombraBotonesContenido;
	-moz-box-shadow: 		@sombraBotonesContenido;
	box-shadow: 			@sombraBotonesContenido;
}

.sombraCajasContenido(){
	-webkit-box-shadow: 	@sombraCajasContenido;
	-moz-box-shadow: 		@sombraCajasContenido;
	box-shadow: 			@sombraCajasContenido;
}

.radioBordeBase(){
	-webkit-border-radius: 	@radioBordeBase;
	-moz-border-radius: 	@radioBordeBase;
	border-radius: 			@radioBordeBase;
}

.radioCirculo(){
	-webkit-border-radius: 	@radioCirculo;
	-moz-border-radius: 	@radioCirculo;
	border-radius: 			@radioCirculo;
}

.sombraBotonInterfaz(){
	-webkit-border-radius: 	@sombraIconosMenuActivos;
	-moz-border-radius: 	@sombraIconosMenuActivos;
	border-radius: 			@sombraIconosMenuActivos;
}


.oculto{
	display:none;
}


.botonInterfaz > svg{
	position:absolute;
	fill:@materialBotonesSvg;
}

.aspaIcono{
	fill:@materialClose;
}

#indice_btn > svg{	
	margin: auto;
	
	width: 24px;
	height: 20px;
	top: 11px;
	left: 7px;
	
	@media (min-width:480px) {
		width: 44px;
		height:37px;
		top: 12px;	
		left: 8px;
	}
}

.navanterior .pag > svg, .navsiguiente .pag > svg{
	width: 15px;
	height: 20px;
	left: 12px;
	top: 11px;
    position: relative;
    
	fill:@materialBlanco;
	
	@media (min-width:480px) {
		width: 29px;
		height: 40px;
		left: 14px;
    	top: 10px;
	}
}

.navsiguiente .pag > svg{
	left:13px;
	
	@media (min-width:480px) {
		left:17px;
	}	
}

#contenedorHerramientas .botonInterfaz > svg
{	
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	
	@media(min-width:480px){
		width: 60px;
		height: 60px;
	}
}

/*********************************************************
 * DEFINICION DE LA ESTRUCTURA DE CAPAS DE LA INTERFAZ
 * Define tamaños y posicionamientos de las diferentes
 * capas de la interfaz para las versiones móvil,
 * tablet y sobremesa.
 *
 * AUTOR : FJLG
 * CREADO : 20/07/2016
 * VERSIÓN : 1.0
 ********************************************************/


#barraHerramientas{
	background:@materialBase;	
	position:fixed;
	bottom: 0;
	left:0;
	width: 100%;
	z-index:3;
	height:40px;
	
	@media (min-width:480px) {	
		height: 60px;	
	}
	
	@media (min-width:1024px) {		
		background-color:@materialGrisMedio;
		width:60px;
		height: 100%;
		
		position:absolute;
		bottom:auto;
		top:0;
		left:auto;
		right:0;
		z-index:auto;
		
		/* MIXINS */
		.sombraMenuHerramientas;
	 }
	
}

body{
	
	&.menuVisible{
		
		#barraHerramientas{
			z-index: 101;
			background-color: transparent;
			-webkit-box-shadow:none;
			-moz-box-shadow:none;
			box-shadow:none;
					
			.navegacion_div, #contenedorHerramientas, #capaProgreso, #sombra01{
				display: none;
			}
		}
		
		.bloqueMenu{
			display: block;
		}
		
		
	}
	
	
	@media (min-width:1024px) {
		height:100%;
	}
}



#indice_btn{
	overflow: hidden;
	width:40px;
	height:40px;
	left:0;
	bottom:0;
	position:absolute;
	cursor:pointer;
	background-color:@materialBase;
	
	@media (min-width:480px) {
		width:60px;
		height:60px;
	}
	
	@media (min-width:1024px) {
		bottom:auto;
		top:0;
	}
	
	&.desplegado{
		position: fixed;
		z-index: 100;
		left: auto;
		top: auto;				
		bottom: 15px;
		right: 15px;
		border-radius: 100%;
		background-color: rgb(5, 112, 153);		
		width: 60px;
		height: 60px;
		
		
		@media (min-width:1024px) {
			top: 19px;
			right: 20px;
		}
	}
}


#contenedorHerramientas{		
	position: absolute;
	bottom: 0;
	left: 0;
	height: 40px;
	width:100%;
	
	@media (min-width:480px) {
		height: 60px;
	}
	
	@media (min-width:1024px) {
		height:auto;
		width: 60px;		
	}
	
	.botonInterfaz{
		cursor:pointer;
		position:absolute;
		width:40px;
		height:40px;
		
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		
		@media (min-width:480px) {
			width:60px;
			height:60px;
		}
		
	}
	
	#capaUtiles,
	#capaConfiguracion,
	#capaMenuSecundario{
		position: relative;				
	}
	
	#capaUtiles{
		&.desplegado{
			@media (min-width:1024px) {
				#contenidoMenuUtiles{
					overflow:visible;
				}
			}
		}
	}
	
	#contenidoMenuUtiles,
	#contenidoMenuConfiguracion,
	#contenidoMenuSecundario{
		position: absolute;		
		bottom: 0;
		width: 100%;
		height: 40px;
		display:none;
		text-align:right;
		
		.botonInterfaz{
			position:relative;
			display: inline-block;
			float: right;
			
			@media (min-width:480px) {
				height: 60px;		
			}
			
			@media (min-width:1024px) {
				float:none;
			}
		}
		
		@media (min-width:480px) {
			height: 60px;		
		}

		@media (min-width:1024px) {
			width:60px;		
			position: static;
			height:auto;
			overflow:hidden;
		}
	}
	
	#capaUtiles{
		
		.botonInterfaz{
			background-color:@materialBase;
		}
		
		#botonMenuUtiles{
			position:absolute;
			right:80px;
			
			@media (min-width:480px) {
				right:120px;
			}
			
			@media (min-width:1024px) {
				right:0;
				position:relative;
			}
		}
		
		#contenidoMenuUtiles{
			background-color:@materialBase;			
			left: 0px;
			
			#botonMarcador{				
				white-space: nowrap;
				overflow: hidden;
				
				@media (min-width:1024px) {				
					overflow: visible;
					white-space: normal;
				}
				
				&.recursoActivo{
					background: white;
					z-index: 3;
					
					svg{
						fill:#d81e05;
					}
				}
			}
			
			#botonMarcaPaginas{
				white-space: nowrap;
				overflow: hidden;
				
				@media (min-width:480px) {
				}
				
				@media (min-width:1024px) {
					overflow: visible;
				}
				
				&.recursoActivo{
					background: white;
					z-index: 3;
					
					svg{
						fill:#d81e05;
					}
				}
			}
			
			#botonNotas{
				
				&.recursoActivo{
					background: white;
					z-index: 3;
					
					svg{
						fill:#d81e05;
					}
				}
			}
		}
		
		
		&.desplegado{
			#contenidoMenuUtiles{
				display: block;
			
			}
			
			#botonMenuUtiles{			
				box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.5);
				z-index:1;
				
				@media (min-width:1024px) {
					display: none;
				}
			}
		}
		
	}
	
	#capaAyuda{
		
		#botonAyuda{
			position: absolute;
			background: #057099;
			right: 120px;
			
			@media(min-width:480px){
				right: 180px;
			}
			
			@media(min-width:1024px){
				position: relative;
				right: auto;
			}			
			
			svg{
				fill:#FFFFFF;
			}
			
			
			&.recursoActivo{
				z-index: 3;
				background: #FFFFFF;
				svg{
					fill:#057099;
				}
			}
		}
	}
	
	#capaConfiguracion{		
		
		.botonInterfaz{
			background-color:@materialSecundario;
		}
		
		#botonMenuConfiguracion{
			position:absolute;
			right:40px;
			
			@media (min-width:480px) {
				right:60px;
			}
			
			@media (min-width:1024px) {
				right:0;
				position:relative;
			}
		}
		
		#contenidoMenuConfiguracion{
			background-color:@materialSecundario;
			
			.botonInterfaz{				
				background-color:@materialSecundario;
			}
		}
		
		&.desplegado{
			#contenidoMenuConfiguracion{
				display: block;
			}
			
			#botonMenuConfiguracion{			
				box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.5);
				z-index:1;
				
				@media (min-width:1024px) {
					display: none;
					box-shadow:0px;
				}
			}
		}
	}
	
	#capaMenuSecundario{
				
		.botonInterfaz{
			background-color:@materialTerciario;
		}
	
		#botonMenuSecundario{
			position:absolute;
			right:0px;
			
			
			@media (min-width:1024px) {
				position:relative;
			}
			
			
		}
		
		#contenidoMenuSecundario{			
			background-color:@materialTerciario;
			
			.botonInterfaz{
				
				background-color:@materialTerciario;
				
				&.recursoActivo{
					background: white;
					z-index: 3;
					
					svg{
						fill:@materialTerciario;
					}
				}
			}
			
		}
		
		&.desplegado{
			#contenidoMenuSecundario{
				display: block;
			}
			
			#botonMenuSecundario{			
				box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.5);
				z-index:1;
				
				@media (min-width:1024px) {
					display: none;
				}
			}
			
			
		}
	
	}
	
}




#capaProgreso{
	display:none;
	position: absolute;
	top: 65px;
	left: 6px;
	width: 50px;
	height: 50px;
	
	@media (min-width:1024px) {
		display:block;
	}
	
	#graficaProgreso{
		
	}
	
	.fondoProgreso{
		fill:none;
		stroke:@materialGrisOscuro;
	}
	
	.barraProgreso{
		transform:rotate(-90deg);
		position: absolute;
		left: 0;
		top: 0;
		fill:none;
		stroke:@materialBase;
	}
	
	#textoProgreso{
		position: absolute;
		font-size: 10px;
		font-family:@fuenteSecundaria;
		left: 12px;
		width: 26px;
		top: 19px;
		text-align: center;
		color: @materialGrisOscuro;
		font-weight: bold;
	}

}


#contenedorHerramientas #contenidoMenuConfiguracion #botonRecargar.botonInterfaz,
#contenedorHerramientas #contenidoMenuConfiguracion #botonPlay.botonInterfaz,
#contenedorHerramientas #contenidoMenuSecundario #botonEnlaces.botonInterfaz,
#contenedorHerramientas #contenidoMenuSecundario #botonDescargas.botonInterfaz,
#contenedorHerramientas #contenidoMenuSecundario #botonImprimir.botonInterfaz
{
	display: none;
}



#paginacionTotal, #paginacionApartado{	
	color:rgb(255,255,255);
	text-align:center;
}

#paginacionTotal{
	font-size:17px;
	margin:2px 0 5px 0;
}

#paginacionApartado{
	display:none;	
}

#paginacionApartado.oculto{
	display:none;
}

@media (min-width:480px) {
	#paginacionApartado{
		display:block;
		font-size:11px;
	}
}



/*************
 * pluggin_ejercicio_unificado
*******************************/

.opacidad60{
	opacity:0.6;
}

.cajaEjercicio{
	background-color: #ffffff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
}


.zonaPuntuacion{
	position:relative;
	overflow:hidden;
	
	-webkit-border-radius: 2px 2px 0 0;
	-moz-border-radius: 2px 2px 0 0;
	border-radius: 2px 2px 0 0;
	
	img{
		width:100%;
	}

	p{
		display: table;
		width: 100%;
		height: 100%;
		
		span{
			text-align: center;
			display: table-cell;
			color: #FFFFFF;
			width: 100%;
			height: 100%;
			vertical-align: middle;
			font-size:24px;
			font-weight:bold;
		}
	}

	.capaPuntuacion{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		background: rgba(0,0,0,0.75);
		display:none;
	}
}

.zonaInfo{
	padding:20px;
	position:relative;
	
	.botonAcceder{
		width:50px;
		height:50px;	
		cursor:pointer;
		position:absolute;
		right:10px;
		top:-25px;
	
		.fondo{
			position:absolute;
			border-radius:100%;
			width:100%;
			height:100%;
			background:#057099;
			box-shadow:0 0 2px rgba(0,0,0,0.5);
		}

		svg{
			width:70%;
			height: 70%;
			left: 15%;
			top: 15%;
			position:absolute;
			fill:#FFFFFF;
		}

		.texto{
			font-size:16px;
			line-height:12px;
			letter-spacing:-1px;
			width:90%;
			left:5%;
			top:63%;
			color:#515151;
			text-align:center;
			position:absolute;
			display:none;
	
			@media(min-width:768px){
				display:block;
			}
		}
			
		.contador{
			width:0;
			height:0;
			left:50%;
			top:50%;
			position:absolute;
			border-radius:100%;
			background:rgba(0,0,0,0.2);
		}
			
		
	}

		
	.titulo{
		color:#057099;
		font-size:18px;
		font-weight:bold;
		display:block;
		margin-bottom:10px;
	}

	.descripcion{
		font-size:14px;
		font-style:italic;
		color:#313131;
	}

}

.overlayEjercicio{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	left: 0;
	top: 0;
	z-index: 9;
	display:none;
	
	.cajaEjercicio{
		position:fixed;
		z-index:1;
		top:50px;
				
		@media(min-width:1024px){
			top:105px;
		}
	}
	
	.marcadorEjercicio{
		position:fixed;
		z-index:1;
		width: 50px;
		height: 50px;
		overflow:visible;
		
		.icono{
			position:absolute;
			width: 50px;
		    height: 50px;
		}
		
		.fondo{
			position: absolute;
			border-radius: 100%;
			width: 100%;
			height: 100%;
			background: #057099;
			box-shadow: 0 0 2px rgba(0,0,0,0.5);
		}
		
		svg {
			width: 70%;
			height: 70%;
			left: 15%;
			top: 15%;
			position: absolute;
			fill: #FFFFFF;
		}

		
		.contador{
			border-radius: 100%;
			background: rgba(0,0,0,0.3);
			width: 0%;
			height: 0%;
			left:50%;
			top:50%;
			position: absolute;
		}
		
		.texto{
			font-size: 16px;
			right: 90px;
			top: 15px;
			color: #FFFFFF;
			text-align: right;
			position: absolute;
			display: none;
			
			@media(min-width:1024px){
				line-height: 12px;
				letter-spacing: -1px;
				width: 80%;
				right: auto;
				left: 10%;
				top: 60%;
				color: #515151;
				text-align: center;
				height: 35px;
			}
		}
		
		.tiempo{
			display:none;
			position: absolute;
			top: 15px;
			text-align: left;
			width: auto;
			color: #FFFFFF;
			font-size: 16px;
			font-style: italic;
			left: 85px;
			
			@media(min-width:1024px){
				top: -25px;
				text-align: center;
				width: 160%;
				left: -30%;
			}
		}
		
		.percentLine{
			height: 2px;
			width: 100%;
			position: absolute;
			left: 0;
			top: 39px;
			display:none;
			
			background:rgba(69,154,65,1);
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#459a41+0,459a41+100&1+49,0+50 */
			background: -moz-linear-gradient(left,  rgba(69,154,65,1) 0%, rgba(69,154,65,1) 49%, rgba(69,154,65,0) 50%, rgba(69,154,65,0) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(left,  rgba(69,154,65,1) 0%,rgba(69,154,65,1) 49%,rgba(69,154,65,0) 50%,rgba(69,154,65,0) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right,  rgba(69,154,65,1) 0%,rgba(69,154,65,1) 49%,rgba(69,154,65,0) 50%,rgba(69,154,65,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#459a41', endColorstr='#00459a41',GradientType=1 ); /* IE6-9 */	
			
			
			&.lasts{
				background:rgba(188,15,46,1);
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bc0f2e+0,bc0f2e+100&1+49,0+50 */
				background: -moz-linear-gradient(left,  rgba(188,15,46,1) 0%, rgba(188,15,46,1) 49%, rgba(188,15,46,0) 50%, rgba(188,15,46,0) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(left,  rgba(188,15,46,1) 0%,rgba(188,15,46,1) 49%,rgba(188,15,46,0) 50%,rgba(188,15,46,0) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to right,  rgba(188,15,46,1) 0%,rgba(188,15,46,1) 49%,rgba(188,15,46,0) 50%,rgba(188,15,46,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc0f2e', endColorstr='#00bc0f2e',GradientType=1 ); /* IE6-9 */
			}
			
			@media(min-width:1024px){
				top: 54px;
			}
		}
	}
	
	&.desplegado{
		.cajaEjercicio{			
			
			@media(max-width:1023px){
				max-height:85%;
				top:50px;
			}
			
			@media(min-width:1024px){
				top: 105px;
				width:920px;
			}
		}
		
		.marcadorEjercicio{
			
			width: 80px;
			height: 80px;
			top:10px;
			
			@media(min-width:1024px){
				width: 110px;
				height: 110px;
				top:50px;
			}
			
			.icono{
				width: 60px;
				height: 60px;
				top: 10px;
				left: 10px;
				
				@media(min-width:1024px){
					width: 84px;
					height: 84px;
					top: 13px;
					left: 13px;
				}
				
				svg {
					width: 60%;
					height: 60%;
					left: 20%;
					top: 20%;
					fill: rgb(5, 112, 153);
					
					@media(min-width:1024px){
						width: 55.97%;
						height: 55.97%;
						left: 22%;
						top: 11%;
					}
				}
			}
			
			.pista{
				border-radius:100%;
				position:absolute;
				left:50%;
				top:50%;
				width:0%;
				height:0%;
				background-color: #FFFFFF;
				overflow: visible !important;
				background-image:url('contenidos/personajes/personajeAyuda.png');
				background-size:cover;
				background-attachment:scroll;
				background-repeat:no-repeat;
				background-position:50% 50%;
				
				span{
					position: absolute;					
					background: #057099;
					color: #FFFFFF;
					display: block;					
					display: none;
					border-radius: 4px;					
					display:none;
					top: 80px;
					right: -145px;
					width:340px;
					padding: 15px;
					margin:auto;
					text-align:center;				
					
					@media(min-width:768px){
						top: 15px;
						right: 115px;
						width: 340px;
						padding: 15px;
						text-align:left;
					}
				}
				
				span:before{
					content: '';
					width: 0;
					height: 0;					
					position: absolute;
					border-left: 15px solid transparent;
					border-right: 15px solid transparent;
					border-bottom: 13px solid #057099;
					top: -10px;
					left:~"calc(50% - 15px)";
					
					@media(min-width:768px){
						border-top: 15px solid transparent;
						border-bottom: 15px solid transparent;
						border-left: 13px solid #057099;
						top:~"calc(50% - 15px)";
						left:auto;
						right: -28px;	
					}
				}
			}
		}
	}
	

	.contenedorEjercicio{
		display:none;		
		margin: 50px 5px 0;
		max-height: 90%;
		overflow-x:visible;
		overflow-y: auto !important;
		padding: 0 15px;
		
		@media(min-width:1024px){
			margin: 70px 5px 0;
		}
		
		.contenedorInfo{
			text-align:center;
			
			.enunciado{				
				font-size: 16px;
				line-height: 16px;
				margin-bottom: 15px;
				color:#515151;
				
				@media(min-width:768px){
					font-size:20px;		
					line-height: 24px;
				}
			}
			
			.iniciaEjercicio{
				svg {
					width: 21px;
					height: 21px;
					fill: #FFFFFF;
					display: inline-block;
					margin-right: 5px;
				}
			}
		}
		
		
		.botonera{
			padding: 0;
			font-size: 14px;
			line-height: 19px;
			margin: 0 0 15px 0;
			display:none;
			position:relative;
			left: 0;
			top: 0;
			text-align:center;
			
			@media(min-width:1024px){
				position:absolute;
				left:auto;
				top: 15px;
				right: 20px;
			}

			.capaBoton{
				padding: 8px 10px;
				margin:0 0 5px 5px;
				
				&:first-child{
					margin:0;
				}
				
				svg{
					width:20px;
					height: 20px;
					display: inline-block;
					margin-right: 5px;
				}

				&.abandonar svg{
					width:15px;
				}
	
				&.terminarEjercicio svg{
					width:17px;
				}
	
				&.pistas{
					padding-right: 18px;					
				}
				
				&.puntuacion{
					text-transform: uppercase;
				}
				
				.nPistas, .nIntentos{
					position: absolute;
					border-radius: 100%;
					background: #eebb00;
					width: 16px;
					height: 16px;
					text-align: center;
					font-size: 11px;
					line-height: 13px;
					color: #FFFFFF;
					top: -4px;
					right: 3px;

				}
			}
		}
	}
	
	.ejercicio{
		width:auto;
		position:relative;
		overflow:visible;
		display:none;
	}
}



/**********************
 * EJERCICIO CONECTAR *
 *********************/


.capaEjercicio .contenedorEjercicio .botonera{
	position:relative;
	right: 0;
	top: 0px;
	display:none;
}

@media(min-width:768px){
	.capaEjercicio .contenedorEjercicio .botonera{
		position:absolute;
	}
}

.capaEjercicio .contenedorEjercicio .ejercicio{
	position:relative;
}

.overlay{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);
	position:absolute;
	left:0;
	top:0;
	display:none;
}

.iniciaEjercicio svg {
    width: 21px;
    height: 21px;
    fill: #FFFFFF;
    display: inline-block;
    margin-right: 5px;
}

.overlayEjercicio.conectar .contenedorEjercicio .columnaA,
.overlayEjercicio.conectar .contenedorEjercicio .separador,
.overlayEjercicio.conectar .contenedorEjercicio .columnaB{
	display:inline-block;	
	margin:0;
}


.overlayEjercicio.conectar .contenedorEjercicio .columnaA,
.overlayEjercicio.conectar .contenedorEjercicio .columnaB{
	width:45%;
}

@media(min-width:768px){
	.overlayEjercicio.conectar .contenedorEjercicio .columnaA,
	.overlayEjercicio.conectar .contenedorEjercicio .columnaB{
		width:40%;
	}
}

.overlayEjercicio.conectar .contenedorEjercicio .separador{
	width:10%;
}

@media(min-width:768px){
	.overlayEjercicio.conectar .contenedorEjercicio .separador{
		width:20%;
	}
}






.overlayEjercicio.conectar .contenedorEjercicio .elemento{
	position:relative;
	background:#9e9e9e;
	margin-bottom:15px;	
	cursor:pointer;
}


.overlayEjercicio.conectar .contenedorEjercicio .elemento.ocupado{background:#057099;}
.overlayEjercicio.conectar .contenedorEjercicio .elemento.seleccionado{background:#c17f02;}

.overlayEjercicio.conectar .contenedorEjercicio .elemento.ocupado .enlace{border-color:#057099;}
.overlayEjercicio.conectar .contenedorEjercicio .elemento.seleccionado .enlace{border-color:#c17f02;}
.overlayEjercicio.conectar .contenedorEjercicio .elemento.correcto .enlace{border-color:#459a41;}
.overlayEjercicio.conectar .contenedorEjercicio .elemento.incorrecto .enlace{border-color:#890b22;}




.overlayEjercicio.conectar .contenedorEjercicio .elemento.correcto,
.overlayEjercicio.conectar .contenedorEjercicio .linea.correcto{
	background:#459a41;	
}

.overlayEjercicio.conectar .contenedorEjercicio .elemento.incorrecto,
.overlayEjercicio.conectar .contenedorEjercicio .linea.incorrecto{
	background:#890b22;	
}

.overlayEjercicio.conectar .contenedorEjercicio .imagen,
.overlayEjercicio.conectar .contenedorEjercicio .texto{	
	display:block;
	margin:0;
	position:relative;
	text-align: justify;
}

.overlayEjercicio.conectar .contenedorEjercicio .texto{	
	padding:10px;	
	color:#FFFFFF;
	font-size:14px;
	line-height:14px;
}

.overlayEjercicio.conectar .contenedorEjercicio .imagen{
	width:100%;
	max-height:120px;
	overflow:hidden;
}

@media(min-width:768px){	
	.overlayEjercicio.conectar .contenedorEjercicio .imagen,
	.overlayEjercicio.conectar .contenedorEjercicio .texto{		
		//display:table-cell;
	}
	
	.overlayEjercicio.conectar .contenedorEjercicio .texto{
		//width: 66%;
		padding: 4%;
		vertical-align: middle;	
	}
	
	.overlayEjercicio.conectar .contenedorEjercicio .imagen{
		width:26%;
		max-height:none;
		overflow:auto;
	}
}

.overlayEjercicio.conectar .contenedorEjercicio .imagen img{
	width:100%;
}



.overlayEjercicio.conectar .contenedorEjercicio .enlace{
	position:absolute;	
	width: 10px;
	height: 10px;
	top:0;
	left:0;
	border-radius:100%;
	background:#FFFFFF;
	border:5px solid #9e9e9e;	
	display:none;
}

.overlayEjercicio.conectar .contenedorEjercicio .marca{
	position:absolute;
	bottom:0;
	left:0;
	display:none;
}

@media(min-width:768px){
	.overlayEjercicio.conectar .contenedorEjercicio .marca{
		top:34%;
	}
}

.overlayEjercicio.conectar .contenedorEjercicio .columnaA .marca{
	left:auto;
	right:0;
}

.overlayEjercicio.conectar .triangulo-izq,
.overlayEjercicio.conectar .triangulo-dch{
	width: 0;
	height: 0;
}

.overlayEjercicio.conectar .triangulo-izq{ 
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;  
  border-bottom:15px solid #9e9e9e; 
}


.overlayEjercicio.conectar .triangulo-dch{
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;  
  border-bottom: 15px solid #9e9e9e;
}

.overlayEjercicio.conectar .contenedorEjercicio .elemento.ocupado .marca.triangulo-izq,
.overlayEjercicio.conectar .contenedorEjercicio .elemento.ocupado .marca.triangulo-dch
{
	border-color:transparent transparent #057099 transparent;
}
.overlayEjercicio.conectar .contenedorEjercicio .elemento.seleccionado .marca.triangulo-izq,
.overlayEjercicio.conectar .contenedorEjercicio .elemento.seleccionado .marca.triangulo-dch
{
	border-color:transparent transparent #c17f02 transparent;
}


@media(min-width:768px){
	.overlayEjercicio.conectar .triangulo-izq{ 
	  border-top: 18px solid transparent;
	  border-bottom: 18px solid transparent;  
	  border-right:15px solid #9e9e9e; 
	}
	
	
	.overlayEjercicio.conectar .triangulo-dch{
	  border-top: 18px solid transparent;
	  border-bottom: 18px solid transparent;  
	  border-left: 15px solid #9e9e9e;
	}
	
	.overlayEjercicio.conectar .contenedorEjercicio .elemento.ocupado .marca.triangulo-izq{border-color:transparent #057099 transparent transparent;}
	.overlayEjercicio.conectar .contenedorEjercicio .elemento.seleccionado .marca.triangulo-izq{border-color:transparent #c17f02 transparent transparent;}
	
	.overlayEjercicio.conectar .contenedorEjercicio .elemento.ocupado .marca.triangulo-dch{border-color:transparent transparent transparent #057099;}
	.overlayEjercicio.conectar .contenedorEjercicio .elemento.seleccionado .marca.triangulo-dch{border-color:transparent transparent transparent #c17f02;}
}

.overlayEjercicio.conectar .contenedorEjercicio .linea{
	position:absolute;
	height:6px;
	border-radius:10px;
	background:#057099;
	box-shadow:0 0 4px #FFFFFF;
}




.capaResultadoEjercicio{
	padding:0;
	color:#515151;
	text-align:center;
	display:none;
}

.capaResultadoEjercicio .feed{
	font-size:20px;	
	margin-bottom:20px;
}

.capaResultadoEjercicio .datoNota{
	font-size:40px;
	margin-bottom:20px;
}

.capaResultadoEjercicio .datoNota > span{
	display:block;
	font-size:60px;
}

.capaResultadoEjercicio .datosEjercicio{
	margin-bottom:20px;
}

.capaResultadoEjercicio .datosEjercicio > span{
	font-size:14px;
	display:inline-block;
	margin:0 10px;
}

.capaPuntuacion .datoNota{
	font-size: 24px;
	text-align: center;
	width: 100%;
	font-weight: bold;
	color: #FFFFFF;
	height: 100%;
	display: table;
}

.capaPuntuacion .datoNota > span{
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}

.capaBoton.terminarEjercicio svg{
	height:20px;
	margin-right:5px;
}




 /*********************
 * EJERCICIO ELECCION *
 *********************/

.cajaEjercicioVF{
	display: table;
	border-collapse: separate;
	border-spacing: 1px;
	width: 100%;
	margin-bottom: 20px;
}

.cajaEjercicioVF .encabezado, .cajaEjercicioVF .elemento{
	display: table-row;		
}

.cajaEjercicioVF .encabezado .textotitulo,
.cajaEjercicioVF .elemento .texto{
	display: table-cell;
	vertical-align: middle;
	width: auto;	
}

.cajaEjercicioVF .encabezado .tituloOpcion,
.cajaEjercicioVF .elemento .opcion{
	display: table-cell;
	width: 55px;
	height: 55px;		
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	position: relative;
}	

.cajaEjercicioVF .elemento .opcion .textoOpcion{
	position: absolute;
	width: 55px;
	text-align: center;
	margin-top: 40%;
	display: block;
	top: 0;
	font-size: 16px;
	color: #999999;
}

.cajaEjercicioVF .elemento .opcion.activo .textoOpcion{
	display: none;	
}

.cajaEjercicioVF .elemento .texto{
	background: #dedede;
	padding: 10px;
	vertical-align: middle;
}

.cajaEjercicioVF .encabezado .tituloOpcion{
	background: #057099;
	color: #FFFFFF;
}

.cajaEjercicioVF .elemento .opcion{
	background: #F0F0F0;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

.cajaEjercicioVF .elemento .opcion svg{
	width: 50px;
	height: 50px;
	position: relative;
}	

.cajaEjercicioVF .elemento .opcion svg.red{
	fill:rgb(255,0,0);
}

.cajaEjercicioVF .elemento .opcion svg.green{
	fill:rgb(76,175,80);
}

.cajaEjercicioVF .elemento .opcion svg.grisBase{
	fill:rgb(205,205,205);
}

.cajaEjercicioVF .elemento .opcion svg.grisOscuro{
	fill:rgb(158,158,158);
}

.overlayEjercicioFeedback{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	left: 0;
	top: 0;
	z-index: 9;
	display: none;
}

.overlayEjercicioFeedback .ventanaModalFeedback{
	position: relative;
	max-width: 600px;
	background: #FFFFFF;
	margin: 15% auto;
	padding: 60px 2% 20px;
	width: 92%;
}

.overlayEjercicioFeedback .cierraModalFeedback{
	width: 50px;
	height: 50px;
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}

.overlayEjercicioFeedback .tituloModalFeedback{
	font-size: 24px;
	margin-bottom: 15px;
}

.overlayEjercicioFeedback .contenidoModalFeedback{
	font-size: 18px;
}



/******************
 * EJERCICIO TEST *
 ******************/


.cajaEjercicioTest{
	display: block;
	width: 100%;	
	margin-bottom: 20px;
	overflow: hidden;
	white-space: nowrap;
}

.cajaEjercicioTest .carreteTest{
	position: relative;
	margin: 0;
	padding: 0;
	left: 0;
}


.cajaEjercicioTest .carreteTest .preguntaTest{
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
	white-space: normal;
}

.cajaEjercicioTest .carreteTest .preguntaTest .enunciadoP{
	background: #057099;
	padding: 10px;
	color: #FFFFFF;
	margin: 1px 1px 3px;
	font-size: 18px;
}

.cajaEjercicioTest .carreteTest .tablaPreguntaTest{
    display: table;
    border-collapse: separate;
    border-spacing: 1px;
    width: 100%;
    margin-bottom: 20px;
}

.cajaEjercicioTest .carreteTest .preguntaTest .opcion{
	display: table-row;
	background: #dedede;
    width: auto;
	cursor: pointer;
}


.cajaEjercicioTest .carreteTest .preguntaTest .opcion.correcta{
	
}

.cajaEjercicioTest .carreteTest .preguntaTest .textoOpcion,
.cajaEjercicioTest .carreteTest .preguntaTest .check{
	display: table-cell;
	vertical-align: middle;
}

.cajaEjercicioTest .carreteTest .preguntaTest .textoOpcion{
	padding: 5px 5px 10px 10px;
}

.cajaEjercicioTest .carreteTest .preguntaTest .check{
	width: 50px;
	height: 50px;
	background: #dedede;
	text-align: center;
}

.cajaEjercicioTest .carreteTest .preguntaTest .opcion svg{
	width: 46px;
	height: 46px;
}	

.cajaEjercicioTest .carreteTest .preguntaTest .opcion svg.red{
	fill:rgb(255,0,0);
}

.cajaEjercicioTest .carreteTest .preguntaTest .opcion svg.green{
	fill:rgb(76,175,80);
}

.cajaEjercicioTest .carreteTest .preguntaTest .opcion svg.grisBase{
	fill:rgb(205,205,205);
}

.cajaEjercicioTest .carreteTest .preguntaTest .opcion svg.grisOscuro{
	fill:rgb(158,158,158);
}



.cajaEjercicioTest .navTest{
	text-align: center;
	margin-bottom: 10px;
	white-space: normal;
}

.cajaEjercicioTest .navTest .bulletNavTest{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #DEDEDE;
	color: #313131;
	font-size: 16px;
    line-height: 24px;
    margin: 0 5px 5px 0;
    cursor: pointer;
}

.cajaEjercicioTest .navTest .bulletNavTest.activo{
	background-color: #057099;
	color: rgb(255, 255, 255);
}

.cajaEjercicioTest .navTest .bulletNavTest.completo{
	background-color: rgb(238, 187, 0);
	color: rgb(255, 255, 255);
}





.overlayEjercicioFeedback{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	left: 0;
	top: 0;
	z-index: 9;
	display: none;
}

.overlayEjercicioFeedback .ventanaModalFeedback{
	position: relative;
	max-width: 600px;
	background: #FFFFFF;
	margin: 15% auto;
	padding: 60px 2% 20px;
	width: 92%;
}

.overlayEjercicioFeedback .cierraModalFeedback{
	width: 50px;
	height: 50px;
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}

.overlayEjercicioFeedback .tituloModalFeedback{
	font-size: 24px;
	margin-bottom: 15px;
}

.overlayEjercicioFeedback .contenidoModalFeedback{
	font-size: 18px;
}


/************************
 * cajajuegos
***********************/

.cartaJuego{
		width: 100%;
		max-width: 320px;
		margin: 0 auto 20px;
		position: relative;
		cursor: pointer;
		border-radius: 4px;

	.avisoSustituto{
		color:white;
		font-size:12px;
		margin:10px;
	}
	
	
	
	.anverso, .reverso{	
		min-height: 410px;
	}
	
	.anverso{
		background: #057099;
		
		.puntuacionJuego{
		position: absolute;
		top: 10px;
		right: 0;
			
			&.completo{
				.icono svg{
					fill:#eebb00;
				}
			}
		}

		.puntuacionJuego .puntos{
		}

		.puntuacionJuego .icono{
			display: block;
			width: 60px;
			height: 60px;
		}

		.puntuacionJuego .icono svg{
			width: 100%;
			height: 100%;
			fill:#FFFFFF;
		}

		.logoJuego{
			width: 84%;
			padding: 2%;
			margin: 30px auto 20px;
			background: #FFFFFF;
			border-radius: 100%;
		}

		.logoJuego img{
			width: 100%;
		}
	}
	
	.reverso{
		background: #818181;
		
		.botonera{
			margin: 0;
			text-align: center;
		}
		
		.capaBoton.btnComenzar{
			opacity: 1;
			font-size: 22px;
			padding: 10px 15px 6px;
		}
	}
	
	.contenido{
		padding: 20px;
	}	
	
	
	.titularJuego, .subtiluloJuego,  .tituloReglas, ul.listaReglas li{
		color:#FFFFFF;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.titularJuego, .tituloReglas{
		font-size: 24px;
		font-weight: bold;
	}
	
	.subtiluloJuego{
		font-size: 16px;
		font-style: italic;
	}
	
	.tituloReglas{
		margin-bottom: 20px;
	}
	
	ul.listaReglas li{
		list-style: none;
		font-size: 16px;
		font-style: italic;
		margin-bottom: 20px;
		
	}
	
}
	
.overlayJuego{
	z-index: 100;
	position: fixed;
	overflow: hidden;
	display: none;
	
	
	.cajaJuego{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-image:url('contenidos/media/millonario-bg.png');
		background-attachment: fixed;
		background-position: 0 0;
		background-size: cover;
	}
	
	.iframeJuego{
		box-shadow: 0 0 5px #000000;
	}
	
	.salirJuego{
		position: absolute;
		right: 40px;
		top: 40px;
		background: #be0f0f;
		border-radius: 100%;
		width: 0px;
		height: 0px;
		z-index: 1;
		cursor: pointer;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
		border:2px solid #FFFFFF;
		display: none;
	}
	
	.salirJuego svg{
		width: 100%;
		height: 100%;
		fill:#FFFFFF;
	}
	
}


/****************
 * practica guiada
 ************************/

.cajaPractica{
	background-color: #ffffff;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);

	.zonaPuntuacion{
		position: relative;
		overflow: hidden;
		-webkit-border-radius: 2px 2px 0 0;
		-moz-border-radius: 2px 2px 0 0;
		border-radius: 2px 2px 0 0;
	}

	.zonaPuntuacion img{
		width: 100%;
	}

	.capaPuntuacion{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		background: rgba(0, 0, 0, 0.75);
		display: none;
	}

	.zonaInfo{
		padding: 0;
		margin: 0;
		position: relative;
	}	

	.zonaInfo .info{		
		padding: 20px;
		display: block;
	}

	.zonaInfo .titulo{
		color: #057099;
		font-size: 18px;
		font-weight: bold;
		display: block;
		margin-bottom: 10px;
	}

	.zonaInfo .descripcion{
		font-size: 14px;
		font-style: italic;
		color: #313131;
	}

	.zonaInfo .botonAcceder {
		cursor: pointer;
		width: 60px;
		position: absolute;
		right: 10px;
		top: -30px;
		height: 60px;
	}

	.zonaInfo .botonAcceder .fondo{
		width: 100%;
		height: 100%;
		background: #057099;
		position: absolute;
		border-radius: 100%;
		box-shadow: 0 0 2px rgba(0,0,0,0.5);
	}

	.zonaInfo .botonAcceder .fondo svg{

		width: 80%;
		height: 80%;
		left: 8%;
		top: 10%;
		position: absolute;
		fill: #FFFFFF;
	}

}

#practica_content {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:none;
	background-color: #333;
	z-index:3;

	
	
	
	
	#practica {
		position:relative;
		width:1024px;
		height:768px;
		z-index:1;		
	

		.clicable{cursor:pointer;}

		#ejerciciosimulado{
			position:absolute;
			background-image:url(contenidos/media/ejerciciosimulado.png);
			width:1024px;
			height:768px;	
			top:0;
			left:0;
			z-index:1;
		}

		.contenedorBtns{
			position: absolute;
			top: -40px;
			text-align: center;
			height: 30px;
			z-index: 3;
			width: 100%;

			#pg_progreso{
				background-color: #CCCCCC;
				border: 1px solid #FFF;
				color: #fff;
				font-size: 12px;
				height: 14px;
				padding: 6px;
				width: 283px;
				display: inline-block;
				position: relative;
			}

			#pg_progreso #infbarraprog{
				text-align: left;
				color: #313131;
			}

			#pg_progreso #barrasombra{
				background-color: #333;
				height: 10px;
				left: 90px;
				position: absolute;
				text-align: center;
				top: 9px;
				width: 193px;
			}

			#pg_progreso #barra{
				background-color: #057099;
				height: 10px;
				left: 90px;
				position: absolute;
				text-align: center;
				top: 9px;
			}
			
			
			#pg_close, #pg_enunciado, #pg_repetir{
				cursor: pointer;
				height: 18px;
				display: inline-block;
				padding: 4px 6px;
				background: #057099;
				color: #FFFFFF;
				border: 1px solid #FFFFFF;
				line-height: 18px;
			}
			
			#pg_close span, #pg_enunciado span, #pg_repetir span{
				width: 20px;
				height: 20px;
				display: inline-block;
			}
			
			#pg_close span svg, #pg_enunciado span svg, #pg_repetir span svg{
				width: 100%;
				height: 100%;
				fill:#FFFFFF;
			}

			#pg_close:hover, #pg_enunciado:hover, #pg_repetir:hover{
				
			}

		}
		
		#pg_tooltip{
			position:absolute;
			padding:18px;
			z-index:10000;
			font-size:18px;
			
			background: rgb(255,26,26);
			color: #FFFFFF;

			display:none;
			-moz-border-radius:8px;
			-webkit-border-radius:8px;
			border-radius:8px;
			border-style:solid;
			border-width:1px;
			border-bottom-width:2px;
			-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
			-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
			box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
						
			white-space:nowrap;
			width:auto !important;

			
			text-transform:uppercase;
		}

		#editbuttons{
			position:absolute;
			padding:5px;
			top:-42px;
			left:100px;
			background-color:#FFFFFF;
			border:2px solid #cccccc;
			z-index:10000;
			display:none;
		}

		.practica_guiada{
			display:none;
			width:800px;
			height:800px;
			border:1px solid black;
			background-color:#00ff00;
			overflow:scroll;
		}


		.paso{
			display:none;
			position:relative;
			top:0px;
			left:0px;
			width:1024px;
			height:768px;
			background-color:#cccccc;
		}

		.paso .zonainteractiva{
			position:absolute;
			top:0px;
			left:0px;
			width:150px;
			height:150px;
			border:none;
			opacity: 0.0;
			z-index:2;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			outline: none;
			cursor:pointer !important;
		}

		.paso .zonainteractiva #info{
			 font-size:8pt;
			 font-family:tahoma;
			 font-weight:bold;
			 background-color:white;
			 opacity:0.9;
			 display:none;
		}

		 ::-ms-clear {
			  display: none;
		  }

		.paso .zonainteractiva input
		{
			 width:80%;
			 height:80%;
			 background-color:transparent;
			 border: 0px;
			 color:black;
			 font-family: tahoma;
			font-size: 11px;
			cursor:default;
			cursor:pointer;

		}


		.infcodigo{
		font-size:8pt;
		overflow:scroll;
		height:400px;

		}


		#editbuttons .infoAciertosFallos
		{

			display:inline;
			font-size:9pt;


		}

		#editbuttons #puntos
		{

			display:inline;
			font-size:9pt;


		}

		.btnInteractiveElement,.delInteractiveElement
		{
			padding:5px;
			width:200px;
			color:#ff4444;
			background-color:#cccccc;
			border: 1px solid #444444;
			-webkit-border-radius: 5px 5px 5px 5px;
			border-radius: 5px 5px 5px 5px;

		}

		.btnUsuario
		{
			background-color: #ffffff;
			border: 1px solid #ddd;
			border-radius: 5px;
			color: #000000;
			cursor: pointer;
			display: inline;
			font-size: 13px;
			margin: 10px;
			padding: 12px;
			text-transform: uppercase;
			-webkit-border-radius: 5px 5px 5px 5px;
			border-radius: 5px 5px 5px 5px;






		}


		.btnInteractiveElement 
		{
			color:#000000;
			background-color:#ffccff;

		}
		.miclaseespecial button 
		{
			background-color:red;

		}
		.miotraclaseespecial 
		{

			border:8px solid black;
			color:red;
			background-repeat: no-repeat;
		}

		#pg_progreso.rojo{color:#F00;
		font-weight:bold;}

		.blanco input{color: #fff !important;
			font-family: Arial,Geneva,sans-serif !important;
			font-size: 13px !important;
			font-weight: bold !important;
		}

		

		.practicaCompletada{

		 background-image: url("contenidos/media/ok.png");
			background-repeat: no-repeat;
			height: 69px;
			left: 778px;
			position: absolute;
			top: 172px;
			width: 69px;
			z-index: 99;

		}



		.btnimprimir{
			background-image: url("contenidos/media/imprimir.png");
			background-position: right top;
			background-repeat: no-repeat;
			border-radius: 5px;
			font-size: 16px;
			left: 600px;
			margin-bottom: 5px;
			padding: 3px 23px 3px 3px;
			position: absolute;
			text-transform: uppercase;
			width: 160px;
			cursor:pointer;top:30px;

		}

		.btnimprimir:hover{
		 text-decoration:underline;
		}

		.bocadillo{
			position:absolute;
			background:#057099;
			padding:15px;
			font-size: 18px;
			color: #FFFFFF;

			-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
			-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
			box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
		

			&:after, &:before{
				content:'';				
				position:absolute;
			}
			
			&.tl:after, &.lt:after, &.tr:after, &.rt:after, &.br:after, &.rb:after, &.bl:after, &.lb:after,
			&.tl:before, &.lt:before, &.tr:before, &.rt:before, &.br:before, &.rb:before, &.bl:before, &.lb:before{
				border-style:solid;
			}
			
			
			&.tl, &.lt{
				-webkit-border-radius:	0 3px 3px 3px;
				-moz-border-radius:		0 3px 3px 3px;
				border-radius: 			0 3px 3px 3px;
			}
			
			
			&.tr, &.rt{
				-webkit-border-radius:	3px 0 3px 3px;
				-moz-border-radius:		3px 0 3px 3px;
				border-radius: 			3px 0 3px 3px;
			}
			
			&.br, &.rb{
				-webkit-border-radius:	3px 3px 0 3px;
				-moz-border-radius:		3px 3px 0 3px;
				border-radius: 			3px 3px 0 3px;
			}
			
			&.bl, &.lb{
				-webkit-border-radius:	3px 3px 3px 0;
				-moz-border-radius:		3px 3px 3px 0;
				border-radius: 			3px 3px 3px 0;
			}
			
			
			&.tl:before, &.rb:before{
				border-width: 14px 0 0 14px;
				border-color: transparent transparent transparent rgba(0,0,0,0.2);
			}
			
			&.tl:after, &.rb:after{
				border-width: 10px 0px 0 10px;
				border-color: transparent transparent transparent #057099;
			}
			
			
			&.lt:before, &.br:before{
				border-width:14px 0 0 14px;
				border-color:rgba(0,0,0,0.2) transparent transparent transparent;				
			}
			
			&.lt:after, &.br:after{
				border-width:10px 0px 0px 10px;
				border-color: #057099 transparent transparent transparent;				
			}
			
			
			&.lb:before, &.tr:before{
				border-width: 0 0 14px 14px;
				border-color: transparent transparent rgba(0,0,0,0.2) transparent;				
			}
			
			&.lb:after, &.tr:after{
				border-width: 0px 0 10px 10px;
				border-color: transparent transparent #057099 transparent;
			}
			
			&.bl:before, &.rt:before{
				border-width:0 0 14px 14px;
				border-color: transparent transparent transparent rgba(0,0,0,0.2);				
			}
			
			&.bl:after, &.rt:after{
				border-width:0px 0px 10px 10px;
				border-color: transparent transparent transparent #057099;				
			}
			
			&.tl:before{
				left: -1px;
				top: -14px;
			}
			
			&.tl:after{
				left:0;
				top:-10px;
			}
			
			&.tr:before{
				right: -1px;
				top: -14px;
			}
			
			&.tr:after{
				right:0;
				top:-10px;
			}
			
			&.rt:before{
				right: -14px;
				top: -1px;
			}
			
			&.rt:after{
				right:-10px;
				top:0px;
			}
			
			&.rb:before{
				right: -14px;
				bottom: -1px;
			}
			
			&.rb:after{
				right:-10px;
				bottom:0px;
			}
			
			&.br:before{
				right: -1px;
				bottom: -14px;
			}
			
			&.br:after{
				right:0px;
				bottom:-10px;
			}
			
			&.bl:before{
				left: -1px;
				bottom: -14px;
			}
			
			&.bl:after{
				left:0px;
				bottom:-10px;
			}
			
			&.lb:before{
				left: -14px;
				bottom: -1px;
			}
			
			&.lb:after{
				left:-10px;
				bottom:0px;
			}
			
			&.lt:before{
				left: -14px;
				top: -1px;
			}
			
			&.lt:after{
				left:-10px;
				top:0px;
			}
			

			& > span{
				color:#343434;
				font-size:14px;
				font-style:italic;
			}
		}

		.zonainteractiva[accion*="info"]{cursor:default !important;}





		.XPOSIT
		{
			padding:55px 15px 15px;
			position: absolute;
			width: 220px;
			height: 155px;
			background-color:#e9eb9a;


			-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.2);
			-moz-box-shadow: 	0 10px 20px rgba(0,0,0,0.2);
			box-shadow: 		0 10px 20px rgba(0,0,0,0.2);


			z-index:10;


			-ms-transform: rotate(3deg); /* IE 9 */
			-webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
			transform: rotate(3deg);


		}

		.XPOSIT.positMinimizado
		{	 
			-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
			-moz-box-shadow: 0px 0px 0px -0px rgba(0,0,0,0.0);
			box-shadow: 0px 0px 0px -0px rgba(0,0,0,0.0);

			width:200px;
			height:30px;
			background-color:transparent;


			border: none;	

		}
		.XPOSIT.positMinimizado .titulo
		{
			display:none;
		}


		.XPOSIT .titulo
		{
			color:#890b22;	
			font-size:18px;
			margin-bottom:15px;
		}
		.XPOSIT .titulo.editando{
			color:green;
			border: 1px dashed #ccc;
		}

		.XPOSIT .chincheta
		{
			background-image:url("contenidos/media/chincheta.png");
			width:36px;
			height:36px;
			background-repeat: no-repeat;
			background-position:0%;
			position: absolute;
			left: 108px;
			top: 10px;
		}

		.XPOSIT .chincheta .xpositTooltip{
			position: absolute;
			bottom: 50px;
			left: -90px;
			width: 196px;
			font-size: 16px;
			line-height:16px;
			color:#FFFFFF;
			text-align:center;
			background-color: #890b22;

			border-radius:			6px;
			-moz-border-radius:		6px;
			-webkit-border-radius:	6px;

			-webkit-box-shadow:	0px 0px 2px rgba(0,0,0,0.6);
			-moz-box-shadow:	0px 0px 2px rgba(0,0,0,0.6);
			box-shadow:			0px 0px 2px rgba(0,0,0,0.6);

			padding: 6px 10px 10px;
			display:none;
		}

		.XPOSIT .chincheta .xpositTooltip:after{
			content: '';
			width: 0;
			height: 0;
			border-top: 12px solid #890b22;
			border-bottom: 12px solid transparent;
			border-right: 12px solid transparent;
			border-left: 12px solid transparent;
			position: absolute;
			bottom: -24px;
			left: 96px;
		}

		.XPOSIT .cuerpo
		{
			color:#313131;

			font-size:15px;
			line-height: 19px;
			height:120px;
			overflow-y:auto;
			overflow-x:hidden;
		}
		.XPOSIT.positMinimizado .cuerpo
		{
			display:none;
		}
		.XPOSIT .cuerpo.editando{
			color:green;
			border: 1px dashed #ccc;
		}

		.POSITDRAG
		{
		}

		.XPOSIT .pliegue{
			width: 230px;
			height: 20px;
			position: absolute;
			left: 0;
			bottom: -20px;
			background:#e9eb9a;
		}

		.XPOSIT.positMinimizado .pliegue{
			display:none;
		}

		.XPOSIT .pliegue:after{
			content:'';
			width: 0;
			height: 0;
			border-top: 10px solid #ffffd1;
			border-bottom: 10px solid transparent;
			border-right: 10px solid transparent;
			border-left: 10px solid #ffffd1;
			position: absolute;
			right: -20px;
			bottom: 0;
		}
		.force-select {  
		  -webkit-user-select: all !important;  /* Chrome 49+ */
		  -moz-user-select: all !important;     /* Firefox 43+ */
		  -ms-user-select: all !important;      /* No support yet */
		  user-select: all !important;          /* Likely future */   
		}


		.contenedorpopup{
			position:fixed;
			top:0;
			left:0;
			width:0px;
			height:100%;
			z-index:-10;
			display:none;
		}

		.contenedorpopup.activo{
			z-index:10;
		}


		.bpopupwindow {
			background-color: #ededed;
			border-radius: 6px;
			display: none;
			padding: 20px;
			width: 800px;
			color: #556263;
			border: 1px solid #c0c0c0;
			text-shadow: 1px 1px 0px #ffffff;
			
		}

		.bpopupwindow p, .bpopupwindow ol{
			font-size:/*11pt*/12pt;
			margin-right:/*30px*/0px;
		}
		.bpopupwindow .capaTexto p, .bpopupwindow .capaTexto span {
		    font-size: 16px;
		    line-height: 19px;
		    text-align: justify;
		    margin-bottom: 15px;
		}

		.bpopupwindow p.titulo{	
			font-size: 18px;
			font-weight: bold;
			line-height: 20px;
			margin: 0 50px 0 10px;
			padding: 10px 30px 5px 10px;
			position: relative;
			text-transform: uppercase;
		}

		.bpopupwindow p.titulo img{
			position:relative;
			top:10px;
			margin: 0 10px 0 0;
		}

		.bpopupwindow .bClose{
			 cursor: pointer;
			float: right;
			margin-right: -20px;
			margin-top: -20px;
			padding: 0;
		}
		/*
		.lanzaderaPG{
			border:3px solid red;
		}

		.lanzaderaPG.PGCOMPLETA{
			border:3px solid green;
		}*/

		/*media screen*/
		.informacion .icon {
			background-attachment: inherit;
			background-image: url("contenidos/media/ico_info.png");
			background-repeat: no-repeat;
			display: block;
			float: left;
			height: 58px;
			margin: 2px 25px 0 0x;
			padding: 0;
			width: 58px;

		}
	}
}


/****************
 * abricerrarmenu.css
***************/


#contenedorMenu{
	position: fixed;
	z-index: 99;
	top: 0;
	left:0;
	margin:0;
	padding:0;
	background:#f9f9f9;
	display:none;
	width: 100%;
	height:100%;
	overflow:hidden;
	overflow-y:auto;
	
	@media (min-width:1024px) {		
		background:transparent;
	}
}


.encabezadoMenu{	
	position: static;
	bottom: 0;
	left: 0;
	background: #d81e05;
	z-index: 2;
	width: 100%;
	padding: 10px 0;
	display: none;
}

@media (min-width:1024px) {
	.encabezadoMenu{
		background:#FFFFFF;	
		bottom: auto;
		top: 0;
		padding: 0;
		box-shadow: 0 0 4px rgba(0,0,0,0.6);
	}
}

.encabezadoMenu .tituloContenido{
	font-size: 20px;
	color: #FFFFFF;
	text-transform: uppercase;
	position: static;
	text-align: center;
	padding: 0 10px;
	display:block;
	vertical-align: middle;
}

@media (min-width:1024px) {
	.encabezadoMenu .tituloContenido{	
		color: #313131;	
		font-size: 32px;
		position: static;
		padding: 30px 120px;
		right: 100px;
		height: auto;
	}
}

.bloqueMenu{
	position: relative;
	top: 20px;
	padding-bottom:80px;
	background: #F9f9f9;
}

@media (min-width:1024px) {
	.bloqueMenu{
		top: 80px;
		padding-bottom:80px;
		display:none;
	}
}

.bloqueMenu .apartadoMenu{
	width:100%;
}

/* .bloqueMenu .apartadoMenu */

.circuloApartado{
	width:100%;
	margin:auto;
	position: relative;
	z-index:1;
}

@media(min-width:1024px){
	.circuloApartado{
		width:200px;
		height:200px;
	}
	
	.desplegado .circuloApartado{
		width:90px;
		height:90px;
	}
}

.circuloApartado .circuloExterior, .circuloIntermedio, .circuloCentral, .circulo{
	border-radius:100%;
}

.circulo{
	position: relative;
	width: 200px;
	height: 200px;
	margin: auto;
}

.circuloApartado .circuloExterior{
	background:#cce2de;
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	left:0;
}

.circuloIntermedio{
	background: #f9f9f9;
	width: 180px;
	height: 180px;
	position: absolute;
	top: 10px;
	left: 10px;
}

.circuloCentral{
	background:#1cae97;
	width: 160px;
	height: 160px;
	position: absolute;
	top: 20px;
	left: 20px;
	cursor:pointer;
}

.circuloCentral svg{
	fill: #FFFFFF;
	position: absolute;
	left: 25%;
	top: 15%;
	width: 50%;
	height: 50%;
}

.circuloCentral .paginas{
	position: absolute;
	width: 100%;
	left: 0;
	top: 96px;
	color: #FFFFFF;
	font-size: 28px;
	text-align: center;
}
/**/

.infoApartado{
	width: 90%;
	padding: 10px 5% 30px;
	text-align: center;
	font-style:italic;
}

@media(min-width:1024px){
	.infoApartado{
		position: absolute;
		left: -410px;
		width: 350px;
		top: -40px;
		text-align: right;
		padding: 0;
	}
	
	.desplegado .infoApartado{
		display: none;
	}	
}

.tituloApartado{
	font-size: 24px;
	text-transform: uppercase;
	color: #1cae97;
	border-bottom: 1px dashed #1cae97;
	padding-bottom: 6px;
	margin-bottom: 8px;
	position:relative;
}


.tituloApartado span.linea{
	display: none;
}

@media(min-width:1024px){
	.tituloApartado span.linea{
		display:block;
		width: 90px;
		height: 1px;
		border-bottom: 1px dashed #1cae97;
		transform: rotate(35deg);
		position: absolute;
		bottom: -26px;
		right: -83px;
	}
}

.descripcionApartado{
	font-size:14px;
	color:#313131;
	line-height: 18px;
}


/**/

.iconosApartado{	
	white-space: nowrap;
	text-align: center;	
	margin-bottom: 10px;
}

.desplegado .iconosApartado{
	margin-bottom: 30px;
}

@media(min-width:1024px){
	.iconosApartado{
		position: absolute;
		left: 255px;
		top: 210px;
		white-space: nowrap;
		height:0;
		border-bottom:1px dashed #1cae97;
		text-align: inherit; 
		margin: 0;
	}
	
	.desplegado .iconosApartado{
		left: 95px;
		top: 45px;
		border: 0;
	}
}

.iconosApartado span.linea,
.desplegado .iconosApartado span.linea{
	display: none;
}

@media(min-width:1024px){
	.iconosApartado span.linea{
		display: block;
		width: 90px;
		height: 1px;
		border-bottom: 1px dashed #1cae97;
		transform: rotate(35deg);
		position: absolute;
		left: -80px;
		top: -27px;

	}
}

.iconosApartado.sinElementos span.linea{
	display: none;
}

.iconosApartado .elemento{
	background:#1cae97;
	width:40px;
	height:40px;
	border-radius:100%;
	display:inline-block;
	position: relative;	
	margin:0 10px 0 0;
}

@media(min-width:1024px){
	.iconosApartado .elemento{
		top: -20px;
		left: 10px;
	}	
}

.iconosApartado .elemento:last-child{
	margin:0;
}

.iconosApartado .elemento svg{
	fill:#FFFFFF;
	position: absolute;	
}

.iconosApartado .elemento .contador{
	position: absolute;
	display: block;
	width: 100%;
	top: -22px;
	text-align: center;
	color: #1cae97;
	font-size: 16px;
}

.iconosApartado .elemento.estrella svg{
	width: 24px;
	left: 8px;
	top: 8px;
	height: 22px;	
}

.iconosApartado .elemento.video svg{
	width: 22px;
	height: 13.2px;
	top: 13px;
	left: 9px;
}

.iconosApartado .elemento.ejercicio svg{
	width: 20px;
	height: 20px;
	top: 10px;
	left: 10px;
}

.iconosApartado .elemento.actividad svg{
	width: 20px;
	height: 20px;
	top: 10px;
	left: 10px;
}

.iconosApartado .elemento.podcast svg{
	width: 20px;
	height: 18px;
	left: 10px;
	top: 11px;
}


/*****/

.separadorApartado{
	width: 50px;
	height:50px;	
	margin: auto;	
}

.separadorApartado span{
	width:100%;
	height: 1px;
	transform: rotate(90deg);
	border-bottom: 1px dashed #bebebe;	
	position: relative;
	top: 30px;
	display: block;
}

@media(min-width:1024px){
	.separadorApartado{
		width: 100px;
		height:100px;
	}

	.separadorApartado span{		
		top: 50px;
	}
}

/***/

.contenidoApartado{
	background:#f1f1f1;
	display:none;
	overflow:hidden;
	position:relative;
	padding:60px 20px 20px;
	top: -45px;
	margin-bottom: -45px;
}

.contenidoApartado .tituloApartado{
	border:none;
	text-align:center;
	margin-bottom:20px;
	font-family: MetaThin, Arial, Helvetica, sans-serif;
	font-size: 36px;
	display: none;
}

@media(min-width:1024px){
	.contenidoApartado .tituloApartado{
		display: block;
	}
}

.contenedorPaginas{
	margin: 10px;
}

.paginaMenu{
	display: inline-block;
	position: relative;
	width: 43%;
	margin: 0 7% 30px 0;
}

@media (min-width:480px) {
	.paginaMenu{
		width: 28.3%;
		margin: 0 5% 30px 0;
	}
}

@media (min-width:768px) {
	.paginaMenu{
		width: 30.3%;
		margin: 0 3% 30px 0;
	}
}

@media (min-width:1024px) {
	.paginaMenu{
		width: 18%;	
		margin: 0 2% 30px 0;
	}
}

@media (min-width:1280px) {
	.paginaMenu{
		width: 18.5%;
		margin: 0 1.5% 30px 0;
	}
}

.paginaMenu .contenedorBloques{
	width:100%;
	background: #c6c6c6;
	height: 24px;
	position:relative;
}

.paginaMenu .contenedorBloques:before{
	content: '';
	width: 0;
	height: 0;
	border-width: 12px 0px 12px 12px;
	border-style: solid;
	border-color: #c6c6c6 transparent #c6c6c6 transparent;
	position: absolute;
	left: -12px;
}

.paginaMenu .contenedorBloques:after{
	content: '';
	width: 0;
	height: 0;
	border-width: 12px 0 12px 12px;
	border-style: solid;
	border-color: transparent transparent transparent #c6c6c6;
	position: absolute;
	right: -12px;
	top: 0;
}



.paginaMenu .contenedorBloques .bloque{
	float:left;
	position:relative;
	text-align:center;
	width:100%;
	height:100%;
}

/*** PAGINAS ACTUAL ****/
.paginaMenu.actual .contenedorBloques{
	background:#666666;
}

.paginaMenu.actual .contenedorBloques:before{
	border-color: #1cae97 transparent #1cae97 transparent;
}

.paginaMenu.actual .contenedorBloques:after{
	border-color: transparent transparent transparent #666666;
}

/*** PAGINAS ACCESIBLES ****/
.paginaMenu.accesible .contenedorBloques{
	background:#666666;
}

.paginaMenu.accesible .contenedorBloques:before{
	border-color: #666666 transparent #666666 transparent;
}

.paginaMenu.accesible .contenedorBloques:after{
	border-color: transparent transparent transparent #666666;
}

/**** PAGINAS VISTAS *****/
.paginaMenu .contenedorBloques .bloque.visto{
	background:#1cae97;
}

.paginaMenu.iniciada .contenedorBloques:before,
.paginaMenu.finalizada .contenedorBloques:before
{
	border-color: #1cae97 transparent #1cae97 transparent;
}

.paginaMenu.finalizada .contenedorBloques:after{
	border-color: transparent transparent transparent #1cae97;
}


/**** ICONOS ****/

.paginaMenu .contenedorBloques .bloque .icono{
	border-radius: 100%;
	width: 32px;
	height: 32px;
	background: #c6c6c6;
	position: absolute;
	top: -4px;
}

.paginaMenu.accesible .contenedorBloques .bloque .icono{
	background: #666666;
}

.paginaMenu.iniciada .contenedorBloques .bloque.visto .icono,
.paginaMenu.finalizada .contenedorBloques .bloque .icono
{
	background: #1cae97;
}

.paginaMenu .paginaTitulo{
	color:#313131;
	font-size:14px;
	font-style:italic;
	position: relative;
	top: 8px;
	padding-left: 10px;
}

.paginaMenu .contenedorBloques .bloque .icono svg{
	position:absolute;
	fill:#FFFFFF;
	width: 16px;
}
.paginaMenu .mnumarcador{
	position: absolute;	
	display: block;	
}

.paginaMenu .mnumarcador.paginaactual{
	top: -15px;
	width: 20px;
	left: 48%;
	height: 30px;
	z-index:1;
}

.paginaMenu .mnumarcador.paginamarcada{
	width: 18px;
	left: -11px;
	bottom: -10px;
	height: 16px;
}

.paginaMenu .mnumarcador svg{
	width:100%;
	height:100%;
}

.paginaMenu .mnumarcador.paginaactual svg{
	fill:#d81e05;
}


.paginaMenu .mnumarcador.paginamarcada svg{
	fill:#d81e05;
}
.paginaMenu .thumbnail{
	overflow:hidden;
	height:130px;
	margin-bottom: 10px;
}

.paginaMenu .thumbnail.noAccesible{
	opacity:0.3;
}


/****************************
 * PARCHE COLORES APARTADOS *
 ****************************/

.circuloCentralAP1 .circuloApartado .circuloExterior,
.circuloCentralAP2 .circuloApartado .circuloExterior{
	background:#ffd386;
}

.circuloCentralAP1 .circuloCentral,
.circuloCentralAP2 .circuloCentral{
	background:#e49100;
}

.circuloCentralAP1 .tituloApartado,
.circuloCentralAP2 .tituloApartado{
	color: #e49100;
	border-color:#e49100;
}

.circuloCentralAP1 .iconosApartado .elemento,
.circuloCentralAP2 .iconosApartado .elemento{
	background:#e49100;
}

.circuloCentralAP1 .iconosApartado .elemento .contador
.circuloCentralAP2 .iconosApartado .elemento .contador{
	color: #e49100;
}

.circuloCentralAP1 .paginaMenu.actual .contenedorBloques:before,
.circuloCentralAP2 .paginaMenu.actual .contenedorBloques:before{
	border-color: #e49100 transparent #e49100 transparent;
}

.circuloCentralAP1 .paginaMenu .contenedorBloques .bloque.visto,
.circuloCentralAP2 .paginaMenu .contenedorBloques .bloque.visto
{
	background:#e49100;
}

.circuloCentralAP1 .paginaMenu.iniciada .contenedorBloques:before,
.circuloCentralAP1 .paginaMenu.finalizada .contenedorBloques:before,
.circuloCentralAP2 .paginaMenu.iniciada .contenedorBloques:before,
.circuloCentralAP2 .paginaMenu.finalizada .contenedorBloques:before
{
	border-color: #e49100 transparent #e49100 transparent;
}

.circuloCentralAP1 .paginaMenu.finalizada .contenedorBloques:after,
.circuloCentralAP2 .paginaMenu.finalizada .contenedorBloques:after{
	border-color: transparent transparent transparent #e49100;
}

.circuloCentralAP1 .paginaMenu.iniciada .contenedorBloques .bloque.visto .icono,
.circuloCentralAP1 .paginaMenu.finalizada .contenedorBloques .bloque .icono,
.circuloCentralAP2 .paginaMenu.iniciada .contenedorBloques .bloque.visto .icono,
.circuloCentralAP2 .paginaMenu.finalizada .contenedorBloques .bloque .icono
{
	background: #e49100;
}

@media(min-width:1024px){
	.circuloCentralAP1 .tituloApartado span.linea,
	.circuloCentralAP2 .tituloApartado span.linea{
		border-color:#e49100;
	}
	
	.circuloCentralAP1 .iconosApartado span.linea,
	.circuloCentralAP2 .iconosApartado span.linea{
		border-color:#e49100;
	}
	
	.circuloCentralAP1 .iconosApartado,
	.circuloCentralAP2 .iconosApartado{
		border-color:#e49100;
	}
	
}

/******/

.circuloCentralAP3 .circuloApartado .circuloExterior,
.circuloCentralAP4 .circuloApartado .circuloExterior,
.circuloCentralAP5 .circuloApartado .circuloExterior{
	background:#98c5d0;
}

.circuloCentralAP3 .circuloCentral,
.circuloCentralAP4 .circuloCentral,
.circuloCentralAP5 .circuloCentral{
	background:#1e96b4;
}

.circuloCentralAP3 .tituloApartado,
.circuloCentralAP4 .tituloApartado,
.circuloCentralAP5 .tituloApartado{
	color: #1e96b4;
	border-color:#1e96b4;
}

.circuloCentralAP3 .iconosApartado .elemento,
.circuloCentralAP4 .iconosApartado .elemento,
.circuloCentralAP5 .iconosApartado .elemento{
	background:#1e96b4;
}

.circuloCentralAP3 .iconosApartado .elemento .contador
.circuloCentralAP4 .iconosApartado .elemento .contador,
.circuloCentralAP5 .iconosApartado .elemento .contador{
	color: #1e96b4;
}

.circuloCentralAP3 .paginaMenu.actual .contenedorBloques:before,
.circuloCentralAP4 .paginaMenu.actual .contenedorBloques:before,
.circuloCentralAP5 .paginaMenu.actual .contenedorBloques:before{
	border-color: #1e96b4 transparent #1e96b4 transparent;
}

.circuloCentralAP3 .paginaMenu .contenedorBloques .bloque.visto,
.circuloCentralAP4 .paginaMenu .contenedorBloques .bloque.visto,
.circuloCentralAP5 .paginaMenu .contenedorBloques .bloque.visto
{
	background:#1e96b4;
}

.circuloCentralAP3 .paginaMenu.iniciada .contenedorBloques:before,
.circuloCentralAP3 .paginaMenu.finalizada .contenedorBloques:before,
.circuloCentralAP4 .paginaMenu.iniciada .contenedorBloques:before,
.circuloCentralAP4 .paginaMenu.finalizada .contenedorBloques:before,
.circuloCentralAP5 .paginaMenu.iniciada .contenedorBloques:before,
.circuloCentralAP5 .paginaMenu.finalizada .contenedorBloques:before
{
	border-color: #1e96b4 transparent #1e96b4 transparent;
}

.circuloCentralAP3 .paginaMenu.finalizada .contenedorBloques:after,
.circuloCentralAP4 .paginaMenu.finalizada .contenedorBloques:after,
.circuloCentralAP5 .paginaMenu.finalizada .contenedorBloques:after{
	border-color: transparent transparent transparent #1e96b4;
}

.circuloCentralAP3 .paginaMenu.iniciada .contenedorBloques .bloque.visto .icono,
.circuloCentralAP3 .paginaMenu.finalizada .contenedorBloques .bloque .icono,
.circuloCentralAP4 .paginaMenu.iniciada .contenedorBloques .bloque.visto .icono,
.circuloCentralAP4 .paginaMenu.finalizada .contenedorBloques .bloque .icono,
.circuloCentralAP5 .paginaMenu.iniciada .contenedorBloques .bloque.visto .icono,
.circuloCentralAP5 .paginaMenu.finalizada .contenedorBloques .bloque .icono
{
	background: #1e96b4;
}

@media(min-width:1024px){
	.circuloCentralAP3 .tituloApartado span.linea,
	.circuloCentralAP4 .tituloApartado span.linea,
	.circuloCentralAP5 .tituloApartado span.linea{
		border-color:#1e96b4;
	}
	
	.circuloCentralAP3 .iconosApartado span.linea,
	.circuloCentralAP4 .iconosApartado span.linea,
	.circuloCentralAP5 .iconosApartado span.linea{
		border-color:#1e96b4;
	}
	
	.circuloCentralAP3 .iconosApartado,
	.circuloCentralAP4 .iconosApartado,
	.circuloCentralAP5 .iconosApartado{
		border-color:#1e96b4;
	}
	
}



/**************************/



.circuloCentralAP6 .circuloApartado .circuloExterior,
.circuloCentralAP7 .circuloApartado .circuloExterior{
	background:#c4df8f;
}

.circuloCentralAP6 .circuloCentral,
.circuloCentralAP7 .circuloCentral{
	background:#94c632;
}

.circuloCentralAP6 .tituloApartado,
.circuloCentralAP7 .tituloApartado{
	color: #94c632;
	border-color:#94c632;
}

.circuloCentralAP6 .iconosApartado .elemento,
.circuloCentralAP7 .iconosApartado .elemento{
	background:#94c632;
}

.circuloCentralAP6 .iconosApartado .elemento .contador
.circuloCentralAP7 .iconosApartado .elemento .contador{
	color: #94c632;
}

.circuloCentralAP6 .paginaMenu.actual .contenedorBloques:before,
.circuloCentralAP7 .paginaMenu.actual .contenedorBloques:before{
	border-color: #94c632 transparent #94c632 transparent;
}

.circuloCentralAP6 .paginaMenu .contenedorBloques .bloque.visto,
.circuloCentralAP7 .paginaMenu .contenedorBloques .bloque.visto
{
	background:#94c632;
}

.circuloCentralAP6 .paginaMenu.iniciada .contenedorBloques:before,
.circuloCentralAP6 .paginaMenu.finalizada .contenedorBloques:before,
.circuloCentralAP7 .paginaMenu.iniciada .contenedorBloques:before,
.circuloCentralAP7 .paginaMenu.finalizada .contenedorBloques:before
{
	border-color: #94c632 transparent #94c632 transparent;
}

.circuloCentralAP6 .paginaMenu.finalizada .contenedorBloques:after,
.circuloCentralAP7 .paginaMenu.finalizada .contenedorBloques:after{
	border-color: transparent transparent transparent #94c632;
}

.circuloCentralAP6 .paginaMenu.iniciada .contenedorBloques .bloque.visto .icono,
.circuloCentralAP6 .paginaMenu.finalizada .contenedorBloques .bloque .icono,
.circuloCentralAP7 .paginaMenu.iniciada .contenedorBloques .bloque.visto .icono,
.circuloCentralAP7 .paginaMenu.finalizada .contenedorBloques .bloque .icono
{
	background: #94c632;
}

@media(min-width:1024px){
	.circuloCentralAP6 .tituloApartado span.linea,
	.circuloCentralAP7 .tituloApartado span.linea{
		border-color:#94c632;
	}
	
	.circuloCentralAP6 .iconosApartado span.linea,
	.circuloCentralAP7 .iconosApartado span.linea{
		border-color:#94c632;
	}
	
	.circuloCentralAP6 .iconosApartado,
	.circuloCentralAP7 .iconosApartado{
		border-color:#94c632;
	}
	
}


/***************************
 * interfaz_buscador
****************************/



#RecursoSearch_panelResultado{
	width:100%;
}

.textoAyudaPanelBusqueda{
	color: #999;
	font-size: 34px;
	text-align: center;
}

#txtSearch{
	background: #ededed;
	font-family: MetaNormal, Arial, Helvetica, sans-serif;
	width: 210px;
	padding: 10px;
	margin: 0 12px 30px 0px;
	border: none;
	font-size: 20px;
	color: #515151;
	display: inline-block;
}

#btnSearch{
	width: 51px;
	height: 50px;
	border-radius: 100%;
	background: #057099;
	display: inline-block;
	cursor: pointer;
}



#RecursoSearch_barraBusqueda,
.SEARCH_listaresultado{
	width:300px;
	margin: auto;
}

.SEARCHRESULT_THUMBNAIL{
	display: inline-block;
	margin: 10px;
	width: 280px;
	position: relative;
	height: 200px;
	overflow: hidden;
}

.SEARCHRESULT_PAGE{
	font-size: 18px;
	position: absolute;	
	left: 110px;
	top: 70px;
	border-radius: 100%;
	width: 60px;
	height: 60px;
	background: #d81e05;
	color: #FFFFFF;
	text-align: center;
	line-height: 56px;
	font-weight: bold;
}

.SEARCHRESULT{
	width:100%;
	margin:0 0 10px 0;
	background: #ededed;
	position: relative;
}

.SEARCHRESULT_THUMBNAIL img{
	width: 100%;
}


.SEARCHRESULT_DATA {
    display: inline-block;
    margin: 0 10px 10px;
    width: 280px;
}

@media(min-width:480px){
	#RecursoSearch_barraBusqueda,
	.SEARCH_listaresultado{
		width: 460px;
	}
	
	#txtSearch{
		width: 370px;
	}
	
	.SEARCHRESULT_THUMBNAIL{
		margin: 20px;
		width: 420px;		
		height: 260px;
	}
	
	.SEARCHRESULT_PAGE{
		left: 180px;
		top: 100px;
	}
	
	.SEARCHRESULT_DATA {		
		margin: 0 20px 10px;
		width: 420px;
	}
}

@media(min-width:768px){	
	.SEARCH_listaresultado{
		width: 688px;
		display: none;
	}
	
	.SEARCHRESULT_THUMBNAIL{
		width: 240px;		
		height: 180px;
	}
	
	.SEARCHRESULT_PAGE{
		left: 90px;
		top: 60px;
	}
	
	.SEARCHRESULT_DATA {		
		margin: 20px 20px 20px 0;
		width: 380px;
	}
	
	#RecursoSearch_barraBusqueda,
	#RecursoSearch_panelResultado{
		position: relative;
		top: 35%;
	}
}

@media(min-width:1024px){	
	.SEARCH_listaresultado{
		width: 884px;
	}
	
	#btnSearch{
		display: none;
	}
	
	#RecursoSearch_barraBusqueda{
		width: 390px;
	}
	
	.SEARCHRESULT_THUMBNAIL{		
		width: 280px;		
		height: 200px;
	}
	
	.SEARCHRESULT_PAGE{
		left: 110px;
		top: 70px;
	}
	
	.SEARCHRESULT_DATA{		
		width: 540px;
	}
	
}


#btnSearch svg{
	width: 60%;
	height: 60%;
	position: relative;
	left: 20%;
	top: 20%;
	fill:#FFFFFF;
}


.SEARCHRESULT_COINCIDENCIAS{
	font-style: italic;
	color: #666666;
}

.SEARCHTITLE{
	font-size:18px;
	font-weight:bold;
}


.SEARCHRESULT_TEXT{
	display:inline-block;	
	margin-bottom:10px;
}

.SEARCHTEMA{
	color: #057099;
	font-size: 18px;
	display: block;
	margin-bottom: 5px;
}

.SEARCHTITULO{
	display: block;
	margin-bottom: 5px;
	color: #515151;
	font-size: 18px;

}

.SEARCHDESCRIPTION{
	color:#aaa;
}

.SEARCHRESULT_NUMCOINCIDENCIAS{
	font-style: italic;
	color: #666666;
	margin-bottom: 10px;
}

.SEARCHDESCRIPTIONWORD{
	color:#d81e05;
	font-style: italic;
}

.SEARCHENCONTRADOS{
	font-size: 14px;
	margin-bottom: 8px;
}

.SEARCHENCONTRADOS:last-child{
	margin: 0;	
}

.searchAccesible
{
	cursor: pointer;
}
.searchNOAccesible
{
	opacity:0.6;
}

.SEARCHSINRESULTS{
	color: #999;
	font-size: 34px;
	text-align: center;
}


/******************
 * pluggin_marcapagina
*************************/


#PANEL_PAGMARCADAS{	
	position: static;
	background: #FFFFFF;
	border-radius: 0;
	padding: 0;
	text-align: left;
	margin-left: 40px;
	display: inline-block;
}

@media(min-width:480px){
	#PANEL_PAGMARCADAS{	
		margin-left: 60px;
	}
}

@media(min-width:1024px){
	#PANEL_PAGMARCADAS{
		position: absolute;
		right: 60px;
		background: #FFFFFF;
		z-index: 61;	
		border-radius: 0;
		padding: 10px;
		display:none;
		width:160px;
		top: 0;
		margin: 0;

		box-shadow:-1px 0 3px -2px rgba(0,0,0,1);
	}
}

#PANEL_MARCAPAGINAS_LISTADO{
	margin-bottom: 40px;
}



#PANEL_MARCAPAGINAS_LISTADO .marcador{
	display: inline-block;
	width: 100%;	
	background: #ededed;
	margin: 0 0 5px 0;
	border-radius:3px;
	text-align: left;
	position:relative;
}

#PANEL_MARCAPAGINAS_LISTADO .marcador:last-child{
	margin:0;
}

@media(min-width:480px){
	#PANEL_MARCAPAGINAS_LISTADO .marcador,
	#PANEL_MARCAPAGINAS_LISTADO .marcador:last-child
	{
		
		width: 49.4%;
		margin: 0 1% 5px 0;
	}
	
	#PANEL_MARCAPAGINAS_LISTADO .marcador:nth-child(2n){
		margin:0 0 5px 0;
	}
}

@media(min-width:768px){
	#PANEL_MARCAPAGINAS_LISTADO .marcador,
	#PANEL_MARCAPAGINAS_LISTADO .marcador:last-child,
	#PANEL_MARCAPAGINAS_LISTADO .marcador:nth-child(2n)
	{
		
		width: 33%;	
		margin: 0 0.5% 5px 0;
	}

	#PANEL_MARCAPAGINAS_LISTADO .marcador:nth-child(3n){
		margin:0 0 5px 0;
	}
}


#PANEL_MARCAPAGINAS_LISTADO .thumbnailsMarcaPagina{
	padding: 0;
	margin: 15px 15px 0;
	position: relative;
	z-index: 1;
	height: 180px;
	overflow: hidden;
	background: #FFFFFF;
	cursor: pointer;
}


#PANEL_MARCAPAGINAS_LISTADO .marcador .thumbnailsMarcaPagina .adornoMarcador{	
	width: 20px;
	position: absolute;
	top: 0;
	right: 12px;
}

#PANEL_MARCAPAGINAS_LISTADO .marcador .thumbnailsMarcaPagina .adornoMarcador svg{
	width: 15px;
	height:27px;
	fill:#bc0f2e;
}

#PANEL_MARCAPAGINAS_LISTADO .marcador .tituloMarcador{
	font-size: 13px;
	display: block;
	padding: 10px 15px;
	margin: 0 60px 0 0;
	cursor: pointer;
}
	
#PANEL_MARCAPAGINAS_LISTADO .marcador .tituloMarcador .marcadorApartado {
    font-size: 16px;
	display: block;
	color: #313131;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: 8px;
}

#PANEL_MARCAPAGINAS_LISTADO .marcador .tituloMarcador .marcadorPagina {
    font-size: 14px;
	color: #525252;
	height: 31px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

#PANEL_MARCAPAGINAS_LISTADO .marcador .infoMarcador{
	width: 60px;
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	background: #e4e4e4;
}

#PANEL_MARCAPAGINAS_LISTADO .marcador .infoMarcador .borraMarcador{	
	position: absolute;
	bottom: 6px;
	width: 32px;
	left: 15px;
	height: 33px;
	cursor: pointer;
}

#PANEL_MARCAPAGINAS_LISTADO .marcador .infoMarcador .borraMarcador svg{
	fill: #313131;
    width: 100%;
    height: 100%;
}

#PANEL_MARCAPAGINAS_LISTADO .marcador .infoMarcador .pagina{
	font-size: 16px;
	padding: 0;
	text-align: center;
	color: #890b22;
	position: absolute;
	bottom: 49px;
	width: 100%;
}

#PANEL_MARCAPAGINAS_LISTADO .pagina a{
	color:#890b22;
}

#PANEL_MARCAPAGINAS_LISTADO a{
	text-decoration:none;
	white-space:nowrap;
}

#CONTADOR_PAGMARCADAS{
	position: absolute;
	border-radius: 100%;
	background: #eebb00;
	width: 15px;
	height: 15px;
	text-align: center;
	font-size: 10px;
	line-height: 8px;
	color: #FFFFFF;
	top: 9px;
	left: 19px;
	display: none;
}

@media(min-width:480px){
	#CONTADOR_PAGMARCADAS{
		width: 20px;
		height: 20px;
		font-size: 12px;
		line-height: 15px;		
		top: 10px;
		left: 30px;
	}

}
/*** BOTONES ***/

#PANEL_PAGMARCADAS .btnMarcapaginas{
	width: 40px;
	height: 40px;
	display: inline-block;
    position: relative;
}

#PANEL_PAGMARCADAS .btnMarcapaginas svg{
	fill: rgb(225, 15, 50);
	width: 100%;
	height: 100%;
}

svg .transparent{
	fill:none;
}

svg .green{
	fill:rgb(76,175,80)
}

svg .red{
	fill:rgb(255,0,0)
}

svg .blue{
	fill:rgb(5,112,153)
}

svg .white{
	fill:rgb(255,255,255)
}
@media(min-width:480px){
	#PANEL_PAGMARCADAS .btnMarcapaginas{
		width: 50px;
		height: 50px;
		padding: 5px 0;
	}	
}


#ventanaRecurso .btnMarcapaginas.add{
	width: 60px;
	height: 60px;
	margin: 0 auto 10px;
	cursor: pointer;
}

#ventanaRecurso .sinMarcadores{
	font-size: 18px;
	text-align: center;
	font-style: italic;
}


/************
 * pluggin_postit
********************/


.XPOSIT{
	width: 96%;
	padding: 0 2%;
	border-bottom: 1px dashed #b0b0b0;
	margin-bottom: 40px;
	position: relative;
}

.XPOSIT .chincheta,
.XPOSIT .pliegue{
	display: none;
}

.XPOSIT .icono{
	width: 20px;
	height: 20px;
	position: absolute;
	fill: #890b22;
}

.XPOSIT .titulo{
	margin-left: 25px;
	font-size: 18px;
	font-style: italic;
	color: #890b22;
	margin-bottom: 10px;
}

.XPOSIT .cuerpo{	
	font-size: 14px;
	font-style: italic;
	color: #000000;
}

.XPOSIT .delete{
	width: 40px;
	height: 40px;
	position: relative;
	bottom: -20px;
	margin: 0 auto;
	cursor: pointer;
}


.XPOSIT.positMinimizado .delete{
	display:none;
}

.contenidoVR .btnNota.add{
	width: 60px;
	height: 60px;
	margin: auto;
	position: relative;
	cursor: pointer;
}

@media(min-width:768px){
	.XPOSIT
	{
		padding:55px 15px 15px;
		position: absolute;
		width: 220px;
		height: 155px;
		background-color:#e9eb9a;


		-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.2);
		-moz-box-shadow: 	0 10px 20px rgba(0,0,0,0.2);
		box-shadow: 		0 10px 20px rgba(0,0,0,0.2);
		word-break: break-all;
		word-wrap: break-word;

		z-index:1;
	}
	
	.XPOSIT .icono{
		display: none;
	}
	
	.XPOSIT .delete {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 15px;
		margin: 0;
		right: 15px;
	}

	.XPOSIT.positMinimizado
	{	 
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
		-moz-box-shadow: 0px 0px 0px -0px rgba(0,0,0,0.0);
		box-shadow: 0px 0px 0px -0px rgba(0,0,0,0.0);

		width:200px;
		height:30px;
		background-color:transparent;


		border: none;	

	}
	.XPOSIT.positMinimizado .titulo
	{
		display:none;
	}


	.XPOSIT .titulo
	{
		color:#890b22;	
		font-size:16px;
		margin-bottom:15px;
		margin-left: 0;
	}
	.XPOSIT .titulo.editando{
		color:green;
		border: 1px dashed #ccc;
	}

	.XPOSIT .chincheta
	{
		display: block;
		background-image:url("contenidos/media/chincheta.png");
		width:36px;
		height:36px;
		background-repeat: no-repeat;
		background-position:0%;
		position: absolute;
		left: 108px;
		top: 10px;
	}

	.XPOSIT .chincheta .xpositTooltip{
		position: absolute;
		bottom: 50px;
		left: -90px;
		width: 196px;
		font-size: 16px;
		line-height:16px;
		color:#FFFFFF;
		text-align:center;
		background-color: #890b22;

		border-radius:			6px;
		-moz-border-radius:		6px;
		-webkit-border-radius:	6px;

		-webkit-box-shadow:	0px 0px 2px rgba(0,0,0,0.6);
		-moz-box-shadow:	0px 0px 2px rgba(0,0,0,0.6);
		box-shadow:			0px 0px 2px rgba(0,0,0,0.6);

		padding: 6px 10px 10px;
		display:none;
	}

	.XPOSIT .chincheta .xpositTooltip:after{
		content: '';
		width: 0;
		height: 0;
		border-top: 12px solid #890b22;
		border-bottom: 12px solid transparent;
		border-right: 12px solid transparent;
		border-left: 12px solid transparent;
		position: absolute;
		bottom: -24px;
		left: 96px;
	}

	.XPOSIT .cuerpo
	{
		color:#313131;
		font-size:12px;
		line-height: 14px;
		height:120px;
		overflow-y:auto;
	}
	.XPOSIT.positMinimizado .cuerpo
	{
		display:none;
	}
	.XPOSIT .cuerpo.editando{
		color:green;
		border: 1px dashed #ccc;
	}

	.POSITDRAG
	{
	}

	.XPOSIT .pliegue{
		display: block;
		width: 230px;
		height: 20px;
		position: absolute;
		left: 0;
		bottom: -20px;
		background:#e9eb9a;
	}

	.XPOSIT.positMinimizado .pliegue{
		display:none;
	}

	.XPOSIT .pliegue:after{
		content:'';
		width: 0;
		height: 0;
		border-top: 10px solid #ffffd1;
		border-bottom: 10px solid transparent;
		border-right: 10px solid transparent;
		border-left: 10px solid #ffffd1;
		position: absolute;
		right: -20px;
		bottom: 0;
	}
}

.icodeletePostit{
	position:absolute;
	width:7%;
	top:-47px;
	left:148px;
}


/**********************
 * glosario.css
***************/




#contenedor_glosario{
	width: 280px;
	margin: 0 auto;
}

/* PARTE DEL BUSCADOR Y SELECCION DE LETRAS */

#contenedor_glosario .GLOSARIO_BUSCADOR{
	margin-bottom: 20px;
}

#contenedor_glosario .GLOSARIO_BUSCADOR #glosarioIndice_letras{	
	text-align: center;
	padding: 10px 0;
	margin-bottom: 10px;
}

#contenedor_glosario .GLOSARIO_BUSCADOR #glosarioIndice_letras span.letra{					
	background:#f3f3f4;					
	display: inline-block;
	font-size: 32px;
	margin: 0px 2px 2px 0px;
	padding: 0px;
	text-transform: uppercase;
	width: 50px;
	height: 50px;
	line-height: 44px;
	text-align:center;
	color:#666666;
	cursor:pointer;
	
	-moz-border-radius: 100%; 
	-webkit-border-radius: 100%; 
	border-radius: 100%;
}

#contenedor_glosario .GLOSARIO_BUSCADOR #glosarioIndice_letras span.letra.activa,
#contenedor_glosario .GLOSARIO_BUSCADOR #glosarioIndice_letras span.letra:hover{	
	color:#FFFFFF;
	background-color:#d81e05;
}

#contenedor_glosario .GLOSARIO_BUSCADOR #glosarioIndice_letras span.letra.sinContenido,
#contenedor_glosario .GLOSARIO_BUSCADOR #glosarioIndice_letras span.letra.sinContenido:hover{	
	cursor: default;
	background: #f3f3f4;
	color: #666666;
}

#contenedor_glosario .GLOSARIO_BUSCADOR #glosarioIndice_letras span.letra.sinContenido{
	display: none;
}




#contenedor_glosario .GLOSARIO_BUSCADOR #formularioBusqueda{
	margin-bottom: 20px;
	text-align: center;
}

#contenedor_glosario .GLOSARIO_BUSCADOR #formularioBusqueda #txtbusqueda{
	background: #ededed;
	font-family: MetaNormal, Arial, Helvetica, sans-serif;
	width: 190px;
	padding: 10px;
	margin: 0 12px 0 0px;
	border: none;
	font-size: 20px;
	color: #515151;
	display: inline-block;
	font-style: italic;
}

#contenedor_glosario .GLOSARIO_BUSCADOR #formularioBusqueda .btnGlos{
	width: 51px;
	height: 50px;
	border-radius: 100%;
	background: #057099;
	display: inline-block;
	cursor: pointer;
	position: relative;
}

#contenedor_glosario .GLOSARIO_BUSCADOR #formularioBusqueda .btnGlos svg{
	width: 60%;
	height: 60%;
	position: absolute;
	left: 20%;
	top: 20%;
	fill: #FFFFFF;
}

/* PARTE DEL CONTENIDO DONDE SE MUESTRAN LOS TERMINOS */


#contenedor_glosario .GLOSARIO_CONTENIDO{	
	font-size: 10pt;
	margin: 0 0 20px 0;	
	padding: 0;
}

#contenedor_glosario .GLOSARIO_CONTENIDO .mensajeNoEncontradas{
	display: none;
	color: #999;
	font-size: 34px;
	text-align: center;
}
				
#contenedor_glosario .GLOSARIO_CONTENIDO .bloque_letras{
	display: none;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #ccc;
}

#contenedor_glosario .GLOSARIO_CONTENIDO .bloque_letras span.letra{
	font-size: 70px;
	text-transform: uppercase;
	font-weight: bold;
	color: #ccc;
	text-align: center;
	display: block;
	border-radius: 100%;
	background: #FFFFFF;
	width: 80px;
	height: 80px;
	margin: 0 auto 10px;
	padding: 0;
}

#contenedor_glosario .GLOSARIO_CONTENIDO .bloque_letras .contenedorPalabra{
	background: #FFFFFF;
	margin-bottom: 20px;
}

#contenedor_glosario .GLOSARIO_CONTENIDO .bloque_letras .contenedorPalabra:last-child{
	margin: 0 0 35px 0;
}
				
#contenedor_glosario .GLOSARIO_CONTENIDO .bloque_letras .contenedorPalabra p.palabra{
	color:#313131;
	display:block;
	font-size:22px;
	margin:0 0 5px 0;
	text-transform:uppercase;
	line-height:18px;
}
				
#contenedor_glosario .GLOSARIO_CONTENIDO .bloque_letras .contenedorPalabra p.descripcion{
	color:#515151;
	display:block;
	font-size:16px;
	line-height:18px;	
	margin: 0;
	padding: 0;	
}

#contenedor_glosario .GLOSARIO_CONTENIDO .contenedorPalabra.palabraEncontrada{
	
}

#contenedor_glosario .GLOSARIO_CONTENIDO .contenedorPalabra.palabraNoEncontrada{
	display: none;
}
				


@media(min-width:480px){
	#contenedor_glosario{
		width:420px;
	}
	
	#contenedor_glosario .GLOSARIO_BUSCADOR #formularioBusqueda #txtbusqueda{
		width: 330px;
	}
}


@media(min-width:768px){
	#contenedor_glosario{
		width:720px;
	}
	
	#contenedor_glosario .GLOSARIO_BUSCADOR{
		display: inline-block;
		width: 260px;
		position: fixed;
		margin-left: 460px;
	}
	
	#contenedor_glosario .GLOSARIO_CONTENIDO{
		margin: 0 0 20px 0;
		padding: 0;
		display: inline-block;
		width: 430px;
	}
	
	#contenedor_glosario .GLOSARIO_BUSCADOR #formularioBusqueda #txtbusqueda{
		width: 170px;
	}
	
	#contenedor_glosario .GLOSARIO_BUSCADOR #glosarioIndice_letras span.letra.sinContenido{
		display: inline-block;
		opacity: 0.4;
	}
	
}

@media(min-width:1024px){
	#contenedor_glosario{
		width:884px;
	}
	
	#contenedor_glosario .GLOSARIO_BUSCADOR{		
		width: 320px;
		margin-left: 560px;
	}
	
	#contenedor_glosario .GLOSARIO_CONTENIDO{
		width: 530px;
	}
	
	#contenedor_glosario .GLOSARIO_BUSCADOR #formularioBusqueda #txtbusqueda{
		width: 295px;		
		margin: 0;
	}
	
	#contenedor_glosario .GLOSARIO_BUSCADOR #formularioBusqueda .btnGlos{
		display: none;		
	}
}


/***** PALABRAS EN EL CONTENIDO *****/

#capaContenidos .glossTerm{
	padding: 0;
	cursor: pointer;
	position: relative;
	border-bottom: 1px dashed #c0c0c0;
}

#capaContenidos .glossTermDescription{
	display: none;
	position: absolute;
	top: 24px;
	width: auto;
	left: 0;
	padding: 10px;
	background-color: rgb(245,245,245);	
	text-align: left;
	text-indent: 0;
	font-style: italic;
	font-size: 14px;
	line-height: 16px;
	z-index: 3;
	border: 1px dashed #c0c0c0;
	opacity: 1;
}

@media(min-width:480px){
	#capaContenidos .glossTermDescription{				
		width: 270px !important;		
		left: 0;
			
	}
}

#capaContenidos .glossTermDescription p.definicion{
	display: block;
	margin: 0 0 5px 0;
	text-align: justify;
	font-weight: normal;
	font-style: normal;
	font-size: 14px;
	color: #515151;
	text-transform: none;
	font-family: MetaNormal, Arial, Helvetica, sans-serif;
	line-height: 16px;
}

#capaContenidos .glossTermDescription p.definicion span{
	display: block;
	color: #057099;
	margin: 5px 0 0 0;
	font-size: 14px;
	padding: 0;
}

#capaContenidos .capaTexto span.definicion{
	display: inline-block;
	font-size: 14px;
	width: 230px;
	margin: 0 10px 5px 0;
	line-height: 16px;
}

.showglosaryButton{
	width: 30px;
	height: 30px;
	background-color: #057099;
	position: relative;
	top: 0;
	border-radius: 100%;
	cursor: pointer;
	display: block;
	margin: auto;
}

.showglosaryButton svg{
	width: 14px;
	height: 14px;
	left: 8px;
	top: 8px;
	position: absolute;
	fill: #ffffff;
}

.cerrarPopupGlosario{
	position: absolute;
	width: 20px;
	height: 20px;
	top: -10px;
	right: 10px;
}

/*******************
 * interfaz_texthighlighter
******************/


#PANELCFG_SUBRAYADOR
{	
	position: static;
	background: #FFFFFF;
	border-radius: 0;
	padding: 0 10px;
	text-align:left;
	margin-left: 40px;

}

@media(min-width:480px){
	#PANELCFG_SUBRAYADOR{
		margin-left: 60px;
	}
}

@media(min-width:1024px){
	
	#PANELCFG_SUBRAYADOR{
		display:none;
		position: absolute;
		top: 0;
		right: 60px;		
		z-index: 61;
		padding: 25px 25px 10px;
		margin: 0;
		box-shadow:-1px 0 3px -2px rgba(0,0,0,1);
		width: 200px;
	}
}


#PANELCFG_SUBRAYADOR .colorSelect{
	position:relative;
	display: inline-block;
	margin: 8px 10px 6px 0;
	width: 26px;
	height: 26px;
	border-radius: 100%;
}

#PANELCFG_SUBRAYADOR #borrar.colorSelect{
	border: 1px solid rgb(225, 15, 50);
}

#PANELCFG_SUBRAYADOR #borrar.colorSelect svg{
	fill:rgb(225, 15, 50);
	width: 80%;
	height: 80%;
	position: relative;
	left: 10%;
	top: 10%;
}

@media(min-width:480px){
	#PANELCFG_SUBRAYADOR .colorSelect{
		margin: 15px 15px 5px 0;
		width: 32px;
		height: 32px;
	}
}

@media(min-width:1024px){
	
	#PANELCFG_SUBRAYADOR .colorSelect{	
		margin: 0 15px 15px 0;
		width: 35px;
		height: 35px;
	}

	#PANELCFG_SUBRAYADOR .colorSelect:nth-child(4n){
		margin: 0 0 15px 0;
	}
}

#PANELCFG_SUBRAYADOR .colorSelect span{
	width: 28px;
	height: 28px;
	border-radius: 100%;
	border:2px solid #c7c7c7;
	position:absolute;
	left: -3px;
	top: -3px;
	display:none;
}


@media(min-width:480px){
	#PANELCFG_SUBRAYADOR .colorSelect span{
		width: 36px;
		height: 36px;
		left: -4px;
		top: -4px;
	}
}

@media(min-width:1024px){
	#PANELCFG_SUBRAYADOR .colorSelect span{
		width: 41px;
		height: 41px;
		left: -5px;
		top: -5px;
	}
}

#PANELCFG_SUBRAYADOR .colorSelect.selected span{ 
	display:block; 
}



.noseleccionable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}






.highlighted{
	position: relative;
}	


.submenuHighlighterDelete{
	display:none;
	position: absolute;
	top: 1%;
	right: 1%;		
	z-index: 61;
	padding: 0;
	margin: 0;
	width: 36px;
	height: 36px;
	cursor: pointer;
	
	background: #313131;
	border-radius: 100%;
}

.submenuHighlighterDelete .colorSelect{
	position:relative;
	display: inline-block;
	margin: 0px 0px 0px 0;
	width: 36px;
	height: 36px;
}
 
.submenuHighlighterDelete .colorSelect svg{
	fill:#FFFFFF;
	left: 3px;
	top: 3px;
	width: 30px;
	height: 30px;
	position: relative;
}


/****************
 * descargas
*******************/


#contenedor_descargas{
	width: 300px;
	margin: 0 auto;
}

#contenedor_descargas .descarga{
	cursor: pointer;
	position: relative;
	display: block;
	padding: 10px;
	background: #ededed;
	margin-bottom: 10px;	
}

#contenedor_descargas .descarga .descarga_imagen{
	width:280px;
	height:160px;
	overflow: hidden;
	display: inline-block;
	margin-bottom: 10px;
}

#contenedor_descargas .descarga .descarga_imagen img{
	height: 90%;
	display: block;
	margin: 5% auto 0;
}

#contenedor_descargas .descarga .descarga_datos{
	display: inline-block;
	width:280px;
}

#contenedor_descargas .descarga .descarga_titulo{
	margin-bottom: 10px;
	color: #057099;
	font-size: 18px;
	display: block;
	margin-bottom: 5px;
}

#contenedor_descargas .descarga .descarga_descripcion{
	font-size: 14px;
	margin-bottom: 8px;
	color: #666666;
}

.deshabilitarBotonInterfaz{
	opacity:0.5;
}

@media(min-width:480px){
	
	#contenedor_descargas{	
		width: 460px;
	}
	
	#contenedor_descargas .descarga .descarga_imagen {
    	width: 200px;
    	height: 120px;
		margin-right: 10px;
	}
	
	#contenedor_descargas .descarga .descarga_datos{
		width: 225px;
	}

}

@media(min-width:768px){
	#contenedor_descargas {
		width: 720px;
	}
	
	#contenedor_descargas .descarga{
		margin-bottom: 10px;
		width: 335px;
		display: inline-block;
	}
	
	#contenedor_descargas .descarga:nth-child(2n+1){
		margin-right: 10px;
	}
	
	#contenedor_descargas .descarga .descarga_imagen{
		width: 335px;
		height: 200px;
	}
	
	#contenedor_descargas .descarga .descarga_datos{
		width: 335px;
	}
}

@media(min-width:1024px){
	#contenedor_descargas {
		width: 875px;
	}
	
	#contenedor_descargas .descarga{
		width: 265px;
		margin-right: 10px;
	}
	
	#contenedor_descargas .descarga:nth-child(3n){
		margin-right: 0;
	}
	
	#contenedor_descargas .descarga .descarga_imagen{
		width: 265px;
		height: 150px;
	}
	
	#contenedor_descargas .descarga .descarga_datos{
		width: 265px;
	}
}



/*******************
 * enlaces.css
*********************/

#contenedor_enlaces{
	width: 300px;
	margin: 0 auto;
}

#contenedor_enlaces .enlace{
	cursor: pointer;
	position: relative;
	display: block;
	padding: 10px;
	background: #ededed;
	margin-bottom: 10px;	
}

#contenedor_enlaces .enlace .enlace_imagen{
	width:280px;
	height:160px;
	overflow: hidden;
	display: inline-block;
	margin-bottom: 10px;
}

#contenedor_enlaces .enlace .enlace_imagen img{
	width: 100%;
}

#contenedor_enlaces .enlace .enlace_datos{
	display: inline-block;
	width:280px;
}

#contenedor_enlaces .enlace .enlace_titulo{
	margin-bottom: 10px;
	color: #057099;
	font-size: 18px;
	display: block;
	margin-bottom: 5px;
}

#contenedor_enlaces .enlace .enlace_descripcion{
	font-size: 14px;
	margin-bottom: 8px;
	color: #666666;
}

.deshabilitarBotonInterfaz{
	opacity:0.5;
}

@media(min-width:480px){
	
	#contenedor_enlaces{	
		width: 460px;
	}
	
	#contenedor_enlaces .enlace .enlace_imagen {
    	width: 200px;
    	height: 120px;
		margin-right: 10px;
	}
	
	#contenedor_enlaces .enlace .enlace_datos{
		width: 225px;
	}

}

@media(min-width:768px){
	#contenedor_enlaces {
		width: 720px;
	}
	
	#contenedor_enlaces .enlace{
		margin-bottom: 10px;
		width: 335px;
		display: inline-block;
	}
	
	#contenedor_enlaces .enlace:nth-child(2n+1){
		margin-right: 10px;
	}
	
	#contenedor_enlaces .enlace .enlace_imagen{
		width: 335px;
		height: 200px;
	}
	
	#contenedor_enlaces .enlace .enlace_datos{
		width: 335px;
	}
}

@media(min-width:1024px){
	#contenedor_enlaces {
		width: 875px;
	}
	
	#contenedor_enlaces .enlace{
		width: 265px;
		margin-right: 10px;
	}
	
	#contenedor_enlaces .enlace:nth-child(3n){
		margin-right: 0;
	}
	
	#contenedor_enlaces .enlace .enlace_imagen{
		width: 265px;
		height: 150px;
	}
	
	#contenedor_enlaces .enlace .enlace_datos{
		width: 265px;
	}
}


/*********************
 * pluggin_componentes_unificado.less
**********************************/


/*****
 * ACORDEON 
*************/

.acordeon{}

.acordeon .titulo{
	color:#e1e1e1;
	font-size:18px;
	line-height:18px;
	letter-spacing:-0.5px;
	padding:15px 10px 10px;
	cursor:pointer;
	border-bottom:1px solid #c0262b;
	border-top:1px solid #d5464a;
	background-color:#c8282d;
	font-family: MetaNormal, Arial, Helvetica, sans-serif;
}

.acordeon .elemento:first-child .titulo{
	border-top:0px;
	
	-webkit-border-radius:	4px 4px 0 0;
	-moz-border-radius:		4px 4px 0 0;
	border-radius:			4px 4px 0 0;
}

.acordeon .elemento:last-child .titulo{
	border-bottom:0px;
	
	-webkit-border-radius:	0 0 4px 4px;
	-moz-border-radius:		0 0 4px 4px;
	border-radius:			0 0 4px 4px;
}

.acordeon .elemento.desplegado:last-child .titulo{
	-webkit-border-radius:	0;
	-moz-border-radius:		0;
	border-radius:			0;
}

.acordeon .elemento.desplegado:last-child .contenido{
	-webkit-border-radius:	0 0 4px 4px;
	-moz-border-radius:		0 0 4px 4px;
	border-radius:			0 0 4px 4px;
}

.acordeon .contenido{
	padding:10px;
	background:#e1e1e1;
	color:#212121;
}

.acordeon.desplegado .titulo{
	background-color:#f12b31;
	color:#FFFFFF;
}

.acordeon .titulo svg{
	fill:#FFFFFF;
	width: 18px;
	height: 19px;
	margin: 0px 10px 0 0;
}


/*******************
 * CAJA MISTERIOSA *
 *******************/

.cajaMisteriosa{
	position: relative;
	background: #f0f0f0;	
}

.cajaMisteriosa > .tituloCM{
	padding: 20px 20px 0;
	font-size: 20px;
	text-transform: uppercase;
	font-family: 'MetaBold';
	color: #057099;
}

.cajaMisteriosa .contenidoCM{
	padding: 20px;
}

.cajaMisteriosa .overlayCM{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #e9e9e9;		
	display: block;
	cursor: pointer;
	overflow: hidden;
	z-index: 1;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
}

.cajaMisteriosa .overlayCM .tituloCM{
	position: absolute;
	width: 80%;
	left: 10%;
	bottom: 20px;
	margin: 0;
	padding: 0;
	text-align: center;
}

.cajaMisteriosa .overlayCM .tituloCM span{
	margin: 0;
	padding: 10px;		
	text-transform: uppercase;
	color: #ffffff;
	background-color: #057099;
	display: inline-block;
}

.cajaMisteriosa .overlayCM .circuloCM{
	width: 100px;
	height: 100px;
	position: absolute;
	left:-webkit-calc(50% - 50px);
	left:-moz-calc(50% - 50px);
	left:calc(50% - 50px);
	top:-webkit-calc(50% - 50px);
	top:-moz-calc(50% - 50px);
	top:calc(50% - 50px);

	background: #FFFFFF;
	border-radius: 100%;
	overflow: hidden;
}

.cajaMisteriosa .overlayCM img{
	position: absolute;
}

.cajaMisteriosa .overlayCM .circuloCM svg{
	fill:#5b5b5b;
	width: 80px;
	height: 80px;
	position: relative;

	left:-webkit-calc(50% - 40px);
	left:-moz-calc(50% - 40px);
	left:calc(50% - 40px);
	top:-webkit-calc(50% - 40px);
	top:-moz-calc(50% - 40px);
	top:calc(50% - 40px);
}

/**************
 * CAJA PASOS *
 **************/


.cajaPasos{
	
	.paso{
		position:relative;
		display:none;
		width:97%;
		left:-1000px;
		opacity:0;
		margin:0 0 30px 0;
		padding:10px 1.5% 20px 1.5%;
	
		.titulo{
			font-size:18px;
			color:@materialContenido;
			margin-bottom:10px;
		}
		
		.imagen{
			margin-bottom:@margenVertical;
		
			& > img{
				width:100%;
			}
		}
		
		.texto p{
			margin-bottom:@margenVertical;
			font-size:16px;
			line-height:120%;
			text-align: justify;
		}
	
	
	
		.btnSiguiente{
			.radioCirculo;
			.sombraBotonesContenido;
			
			width:0px;
			height:0px;			
			background:@materialContenido;			
			cursor:pointer;
			position:absolute;
			left:50.7%;
			bottom: 0px;
			overflow:hidden;
		}
	
		 .btnSiguiente.visto{
			background:@materialElementoVisto;
			cursor:default;
		}
	
		.btnSiguiente svg{
			width:50%;
			height: 50%;
			fill:@materialBlanco;
			position:absolute;
			top: 30%;
			left: 25%;
			opacity:0.75;
		}
		
		.btnSiguiente.visto svg{
			
		}
	}
	
	.paso:last-child{		
		
		.checkVisto{
			.radioCirculo;
			.sombraBotonesContenido;
			
			width:0px;
			height:0px;
			position:absolute;
			left:50.7%;
			bottom: 0px;
			overflow:hidden;			
			background: @materialElementoVisto;
			cursor: default;
			overflow: hidden;
			
			svg{
				width: 50%;
				height: 50%;
				fill:@materialBlanco;
				position: absolute;
				top: 11px;
				left: 25%;
				opacity:0.75;
			}
		}
	}
	
	.pushHand{
		position:absolute;
		left: 0;
		top: 60%;
		width: 120%;
	}
	
	.pushHand img{
		width:100%;
	}
	
}

@media (min-width:480px){
	.cajaPasos{
		.paso{
			width:46.5%;
			margin:0 1% 20px 0;
		}
		
		.paso:nth-child(2n){
			margin:0 0 20px 0;
		}
	}
	
}

@media (min-width:768px){
	/* NO SE MODIFICA EN ESTE SALTO */	
}

@media (min-width:1024px){
	.cajaPasos{
		.paso{
			width:21%;
			margin:0 1% 20px 0;
			
			&.medio{
				width:46.5%;
			}
			
			&.medio:last-child{
				margin:0 0 20px 0;
			}
			
			&.tercio{
				width:29.66%;
			}
			
			&.tercio:last-child{
				margin:0 0 20px 0;
			}
		}
		
		.paso:nth-child(2n){
			margin:0 1% 20px 0;
		}
		
		.paso:nth-child(4n){
			margin:0 0 20px 0;
		}
	}
}

/********************
 * COLLAGE IMAGENES *
 ********************/

.capaCollageImagen{
	position: relative;
	margin: 0 auto 15px; 
}

.capaCollageImagen .imagenCollage{
	width: 100%;
	margin-bottom: 10px;
}

.capaCollageImagen .imagenCollage img{
	width: 100%;
	height: auto;
}
	
@media(min-width:480px){
	
	.capaCollageImagen{	
		width: 100%;
		height: 338px;
	}
	
	.capaCollageImagen .imagenCollage{
		margin: 0;
	}
	
	.capaCollageImagen .imagenCollage.cuadro1x1{
		width: 32.897%;
		height: 32.545%;
	}

	.capaCollageImagen .imagenCollage.cuadro2x1{
		width: 66.45%;
		height: 32.545%;
	}

	.capaCollageImagen .imagenCollage.cuadro3x1{
		width: 100%;
		height: 32.545%;
	}

	.capaCollageImagen .imagenCollage.cuadro1x2{
		width: 32.897%;
		height: 66.275%;
	}

	.capaCollageImagen .imagenCollage.cuadro1x3{
		width: 32.897%;
		height: 100%;
	}

	.capaCollageImagen .imagenCollage.cuadro2x2{
		width: 66.45%;
		height: 66.275%;
	}

	.capaCollageImagen .imagenCollage.cuadro2x3{
		width: 66.45%;
		height: 100%;
	}

	.capaCollageImagen .imagenCollage.cuadro3x2{
		width: 100%;
		height: 66.275%;
	}

	.capaCollageImagen .imagenCollage.cuadro3x3{
		width: 100%;
		height: 100%;
	}

	.capaCollageImagen .imagenCollage.cuadro1x1 img,
	.capaCollageImagen .imagenCollage.cuadro2x1 img,
	.capaCollageImagen .imagenCollage.cuadro3x1 img,
	.capaCollageImagen .imagenCollage.cuadro2x2 img,
	.capaCollageImagen .imagenCollage.cuadro3x2 img,
	.capaCollageImagen .imagenCollage.cuadro3x3 img{
		width: 100%;
		height: auto;
	}

	.capaCollageImagen .imagenCollage.cuadro1x2 img,
	.capaCollageImagen .imagenCollage.cuadro1x3 img,
	.capaCollageImagen .imagenCollage.cuadro2x3 img{
		height: 100%;
		width: auto;
	}

	/******** POSICIONES **************/

	.capaCollageImagen.pos01 .imagenCollage{
		position: absolute;
		overflow: hidden;
	}

	.capaCollageImagen.pos01 .imagen01{
		left: 0;
		top: 0;
	}


	.capaCollageImagen.pos01 .imagen02{
		left: 33.555%;
		top: 0;
	}

	.capaCollageImagen.pos01 .imagen03{
		left: 67.108%;
		top: 0;
	}

	.capaCollageImagen.pos01 .imagen04{
		left: 0;
		top: 33.732%;
	}

	.capaCollageImagen.pos01 .imagen05{
		left: 0;
		top: 67.46%;
	}

	.capaCollageImagen.pos01 .imagen06{
		left: 33.555%;
		top: 67.46%;
	}
	

			
}


/***************
 * COMPARACION *
 ***************/


.capaImagen{
	margin-bottom:15px;
}
.capaBoton{
	margin-bottom:15px;
}



.comparacion{
	position:relative;
}

.comparacion .titulo{
	font-size:18px;
	font-weight: bold;
	margin-bottom:15px;
}

.comparacion .mal .titulo{
	color:#bc0f2e;
}

.comparacion .bien .titulo{
	color:#459a41;
}


.circuloComparacion{
	border-radius:100%;
	width:140px;
	height:140px;
	position:absolute;
	z-index: 1;
	
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
}

.circuloComparacion div{	
	width:50%;
	height:100%;
	display:inline-block;
	overflow:hidden;
	position: relative;
}

.circuloComparacion div span.fondo{
	width:200%;
	height:100%;
	position:absolute;
	display:block;
	border-radius:100%;
}

.circuloComparacion div.mal span.fondo{
	left:0%;
	background:#bc0f2e;
}

.circuloComparacion div.bien span.fondo{
	left:-100%;	
	background:#459a41;
}

.circuloComparacion div span.icono{
	position: absolute;
	width: 48%;
	height: 23%;
	left: 29%;
	top: 40%;
}

.circuloComparacion div span.icono svg{
	fill:#FFFFFF;
	width:100%;
	height:100%;
}


/************
 * DIALOGOS *
 ************/



.cajaDialogo{
	position:relative;
	overflow:hidden;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
}

.cajaDialogo .fondo{
	width:100%;	
}

.cajaDialogo .personaje{
	position:absolute;
}

.cajaDialogo .personaje img{
	width:100%;
	height:100%;
	position:absolute;
}

.volteaH{
	-moz-transform: scaleX(-1); /* Firefox */
	-o-transform: scaleX(-1); /* Opera */
	-webkit-transform: scaleX(-1); /* Chrome y Safari */
	transform: scaleX(-1); /* w3org */
	filter: FlipH; /* Internet Explorer */
}


/**************
 * BOCADILLOS *
 **************/

body.mobile .cajaDialogo,
body.phablet .cajaDialogo{
	display:none;
}
 
.cajaDialogo .bocadillo{
	position:absolute;
	background:#f9f9f9;
	padding:15px;
	
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
}

.cajaDialogo .bocadillo:after{
	content:'';
	border-style:solid;
	position:absolute;
}

.cajaDialogo .bocadillo.lt{
	-webkit-border-radius:	0 3px 3px 3px;
	-moz-border-radius:		0 3px 3px 3px;
	border-radius: 			0 3px 3px 3px;
}

.cajaDialogo .bocadillo.lt:after{
	border-width:10px 0px 0px 10px;
	border-color: transparent transparent transparent #f9f9f9;
	left:0;
	top:-10px;	
}

.cajaDialogo .bocadillo.rt{
	-webkit-border-radius:	3px 0 3px 3px;
	-moz-border-radius:		3px 0 3px 3px;
	border-radius: 			3px 0 3px 3px;
}

.cajaDialogo .bocadillo.rt:after{
	border-width: 0 0px 10px 10px;
	border-color: transparent transparent #f9f9f9 transparent;
	right:0;
	top:-10px;
}

.cajaDialogo .bocadillo.rb{
	-webkit-border-radius:	3px 3px 0 3px;
	-moz-border-radius:		3px 3px 0 3px;
	border-radius: 			3px 3px 0 3px;
}

.cajaDialogo .bocadillo.rb:after{
	border-width: 0 10px 10px 0px;
	border-color: transparent #f9f9f9 transparent transparent;	
	right:0;
	bottom:-10px;
}

.cajaDialogo .bocadillo.lb{
	-webkit-border-radius:	3px 3px 3px 0;
	-moz-border-radius:		3px 3px 3px 0;
	border-radius: 			3px 3px 3px 0;
}

.cajaDialogo .bocadillo.lb:after{
	border-width:0 0px 10px 10px;
	border-color: transparent transparent transparent #f9f9f9;
	left:0;
	bottom:-10px;	
}

.cajaDialogo .bocadillo > span{
	color:#343434;
	font-size:14px;
	font-style:italic;
}


/**********
 * MOBILE *
 **********/
 
 
body.tablet .dialogoMvl,
body.desktop .dialogoMvl{
	display:none;
}

.dialogoMvl {
	width: 100%;
	margin-bottom: 10px;
}


.dialogoMvl .dialogoMvlBox{
	margin-bottom:15px;
	position:relative;
}

.dialogoMvl .dialogoMvlBox .imagenPersonaje{
	display: table-cell;
	vertical-align:top;	
	padding: 0px 20px 0px 0px;
}

.dialogoMvl .dialogoMvlBox.derecha .imagenPersonaje{
	padding:0px 0px 0px 20px;
}

.dialogoMvl .dialogoMvlBox .imagenPersonaje img{
	width: 120%;
	left: -10%;
	position: relative;
}


.dialogoMvl .dialogoMvlBox .imagenPersonaje > div {
    position: relative;
    overflow: hidden;
    margin:0;
	padding:10px;
    background-position: 50% 50%;
    background-attachment: scroll;
    width: 40px;
    height: 40px; 
	background:rgba(240,220,0,1);	
	
	-webkit-border-radius: 	1000px;
	-moz-border-radius: 	1000px;
	border-radius: 			1000px;
	

}
.dialogoMvl .dialogoMvlBox.derecha .imagenPersonaje > div {
	background:rgba(140,240,100,1);
}

.dialogoMvl .dialogoMvlBox .nombrePersonaje{
	position: absolute;
	top: 0;
	left: 80px;
	padding: 5px 10px 6px;
	background: rgba(240,220,0,1);
	border-radius: 4px;
	font-size: 12px;
}

.dialogoMvl .dialogoMvlBox.derecha .nombrePersonaje{
	left: auto;
	right: 80px;
	background: rgba(140,240,100,1);	
}

.dialogoMvl .dialogoMvlBox .bocadillo{
	position:relative;
	padding:15px 15px 20px;
	margin-top: 30px;
	font-style: italic;
}

.mobile .dialogoMvl .dialogoMvlBox .bocadillo{
	padding:10px 10px 15px;	
}

.dialogoMvl .dialogoMvlBox .textoPersonaje{
	display: table-cell;
	vertical-align: bottom;
	width: 100%;
}


.dialogoMvl .dialogoMvlBox.derecha .bocadillo{
	background:rgba(140,240,100,1);
	border-radius: 3px 0 3px 3px;
	float: right;
}

.dialogoMvl .dialogoMvlBox.izquierda .bocadillo{
	background:rgba(240,220,0,1);
	border-radius: 0 3px 3px 3px;
	float: left;
}

.dialogoMvl .dialogoMvlBox .bocadillo:after{
	content:'';
	border-style:solid;
	position:absolute;
}


.dialogoMvl .dialogoMvlBox.izquierda .bocadillo:after{
	border-width: 0 10px 10px 0;
	border-color: transparent rgba(240,220,0,1) transparent transparent;
	left: -10px;
	top: 0;
}

.dialogoMvl .dialogoMvlBox.izquierda .bocadillo{
	-webkit-border-radius:	0 3px 3px 3px;
	-moz-border-radius:		0 3px 3px 3px;
	border-radius: 			0 3px 3px 3px;
}

/*
.dialogoMvl .dialogoMvlBox.izquierda .bocadillo{
	-webkit-border-radius:	3px 3px 3px 0;
	-moz-border-radius:		3px 3px 3px 0;
	border-radius: 			3px 3px 3px 0;
}

.dialogoMvl .dialogoMvlBox.izquierda .bocadillo:after{
	border-width: 0 0 10px 10px;
	border-color: transparent transparent rgba(240,220,0,1) transparent;	
	left: -10px;
	bottom:0;
}
*/

.dialogoMvl .dialogoMvlBox.derecha .bocadillo{
	-webkit-border-radius:	3px 0 3px 3px;
	-moz-border-radius:		3px 0 3px 3px;
	border-radius: 			3px 0 3px 3px;
}


.dialogoMvl .dialogoMvlBox.derecha .bocadillo:after{
	border-width: 10px 10px 0 0px;
	border-color: rgba(140,240,100,1) transparent transparent transparent;
	right: -10px;
	top: 0;
}

/*

.dialogoMvl .dialogoMvlBox.derecha .bocadillo{
	-webkit-border-radius:	3px 3px 0 3px;
	-moz-border-radius:		3px 3px 0 3px;
	border-radius: 			3px 3px 0 3px;
}


.dialogoMvl .dialogoMvlBox.derecha .bocadillo:after{
	border-width: 10px 0 0 10px;
	border-color: transparent transparent transparent rgba(140,240,100,1);
	right: -10px;
	bottom:0;
}
*/


.dialogoMovil .bocadillo{
	/**/	
	-moz-box-shadow:	none;
	-ms-box-shadow:		none;
	-o-box-shadow:		none;
	-webkit-box-shadow:	none;
	box-shadow:			none;
	/**/
}





.ventanaDialogo{
	display:none;
}

.ventanaDialogo .personaje > img{
	width:100%;
}

/*
.ventanaDialogo {
    width: 106%;
    left: -3%;
    top: -10px;
    position: relative;
	overflow:hidden;
	
}*/

@media (min-width: 769px){
}



@media (min-width: 900px){
}


@media (min-width: 1025px){
}


/********************
 * TARGETS/hotspots *
 ********************/

.capaHotspots{
	position: relative;
	width: 100%;
}

.hotspot{
	position:absolute;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background: #ac0404;
	overflow: hidden;
	cursor: pointer;
}

.hotspot.mini{
	width: 20px;
	height: 20px;
}

@media(min-width:480px){
	.hotspot{
		width: 40px;
		height: 40px;
	}
}

@media(min-width:768px){
	.hotspot{
		width: 60px;
		height: 60px;		
	}
	
	.hotspot.mini{
		width: 30px;
		height: 30px;
	}
}

.hotspotMovilVolver{
	display: none;
	width: 30px;
	height: 30px;
	right: 3%;
	position: absolute;
	top: 3px;
	cursor: pointer;
}

@media(min-width:480px){
	.hotspotMovilVolver{
		width: 40px;
		height: 40px;
		top: 5px;
	}
}

.hotspot svg{
	fill:#FFFFFF;
	width: 60%;
	height: 60%;
	left: 20%;
	top: 20%;
	position: absolute;
}

.hotspot.mini svg{	
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
}

.contenedoraHotspotCnt{
	position: absolute;
	display: none;
	border-top-left-radius: 100%;
	border-top-right-radius: 100%;
	border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
	overflow-y: scroll;
	z-index: 1;
}


.hotspotCnt{
	display:none;
	position:absolute;
}

@media(max-width:767px){
	.hotspotCnt{
		width: 92% !important;
		margin: 4%;
		height: auto;
		position: static !important;
	}
}

.hotspotCnt .subcaja{
	vertical-align:top;
	margin:0 10px 0 0;
}

.hotspotCnt .subcaja p{
	font-size: 16px;
	margin-bottom: 10px;
	line-height: 18px;
}

.hotspotCnt .subcaja p.subtitulo{
	font-size:20px;
	margin:0 0 10px 0;
}

.hotspotCnt .anotacion{
	margin:0 0 5px 0;
	color: #ac0404;
	/*font-family: 'noto_sansbold',Arial,Helvetica,sans-serif;*/
	text-transform: uppercase;
	font-size: 18px;
}


.hotspotCnt .lineahotspot, .hotspotCnt .lineaAnotacion{
	height: 1px;
	background: #ac0404;
}

.hotspotCnt .lineahotspot{	
	position:absolute;	
}

.hotspotCnt .lineaAnotacion,
.hotspotCnt.derecha .lineaAnotacion{
	margin-bottom: 8px;
	left: 0;
	padding:0;
	position:relative;
	width:100%;
}


@media(min-width:768px){
	.hotspotCnt .lineaAnotacion{
		left: -30px;
		padding-left:30px;
	}
	
	
}


/**********
 * ICONOS *
 **********/



.listadoBullets{
	margin-left: 5%;
	position: relative;
}

.listadoBullets .bullet{
	position:relative;
	display:table;
	margin:0 10px 10px -40px;
	padding:0;
}

.listadoBullets .contenedorIcono{
	display:table-cell;
}

.listadoBullets .contenedorIcono .icono{
	border-radius: 100%;
	width: 50px;
	height: 50px;
	position:relative;
	overflow:hidden;
	background:#057099;	
	margin:0 10px 0 0;
	padding:0;
	cursor:pointer;
	
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.35);
}


.listadoBullets .contenedorIcono .icono > svg{
	width: 20px;
	height: 25px;
	
	position:absolute;
	left: 16px;
	top: 12px;
	
	fill: #fff;
	
	transform:rotate(60deg)
}

.listadoBullets .contenidoBullet{
	display: table-cell;
	min-height: 50px;
	vertical-align:middle;
	
	font-size:20px;
	line-height:22px;
	font-style:italic;
	
	font-family:'MetaThin';
}

.listadoBullets .contenidoBullet > div{
	display:none;
}

.listadoBullets .bullet.visto .icono{
	background:#459a41;
	cursor:default;
}

.listadoBullets .bullet.visto .icono > svg{	
	width: 25px;
	height: 20px;	

	left: 13px;
	
	transform:rotate(0deg)
}

.listadoBullets .st1{
	opacity:0.5;
}

/********************
 * IMAGEN ETIQUETAS *
 ********************/

.imagenEtiquetas{
	position: relative;
	width: 100%;
}
	
.imagenEtiquetas .imagenBase,
.imagenEtiquetas .imagenBase img{
	width: 100%;
}
	
.imagenEtiquetas .etiquetas{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
	
.etiqueta{
	position: absolute;
	background: rgb(237, 237, 237);
	font-size: 28px;
	line-height: 0;
	padding: 2%;
}
	
.etiqueta.color{
	background: #057099;
	color: #FFFFFF;
}
	
.etiqueta span{
	font-size: 100%;
	line-height: 100%;
}

/*****************************
 * CSS IMAGENES AMPLIABLES
 ***************************/

	
.sobreImagen{
	position: absolute;
	bottom: 5%;
	right: 5%;
	color: #FFF;
	font-size: 34px;
	text-shadow: 0 0 10px #666;
	
}


#ventanaAmpliable{
	background:rgba(0,0,0,0.9);
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:9;
	cursor:zoom-out;
}

.cuerpoVentanaAmpliable{
	margin: 10px auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
}

.cuerpoVentanaAmpliable .titulo{
	padding: 10px;
	font-size: 32px;
	color: rgb(255, 255, 255);
	text-transform: uppercase;
}

.cuerpoVentanaAmpliable img{
	border:5px solid #f0f0f0;
	max-width: 98%;
}

.cuerpoVentanaAmpliable .sobreImagen{
	font-size:5vw;
	text-shadow:0px 0px 10px #999;
}

.ampliable{
	cursor:zoom-in;
}

.ampliable > img{
	width:100%;
}

/**********
 * LISTAS *
 **********/

.capaLista .noordenada, .capaLista .ordenada{
	margin:0 0 0 15px;
}

.capaLista .ordenada{
	margin:0 0 0 25px;
}

.capaLista .noordenada{
	list-style-type:square;
}

.capaLista .noordenada li, .capaLista .ordenada li{
	font-size:16px;
	color:@colorFuenteBase;
	line-height:20px;
	margin:0 0 5px 0;
	list-style-position: outside;
}

.capaLista li .noordenada li, .capaLista li .ordenada li{
	margin:0 0 5px 15px;	
}

.capaLista .noordenada .noordenada{
	list-style-type:disc;
}

.capaLista .noordenada .noordenada .noordenada{
	list-style-type:circle;
}

.capaLista .ordenada.naturalCero{
	list-style-type:decimal-leading-zero;		
}

.capaLista .ordenada.roman{
	list-style-type:lower-roman;
}

.capaLista .ordenada.Hroman{
	list-style-type:upper-roman;
}

.capaLista .ordenada.alpha{
	list-style-type:lower-alpha;
}

.capaLista .ordenada.Halpha{
	list-style-type:upper-alpha;
}

.capaLista dt{
	margin-bottom:5px;
}

.capaLista dd{
	font-size:16px;
	color:#313131;
	line-height:20px;
	font-style: italic;
	margin-bottom:5px;
}

.capaLista .noordenada.icono{
	list-style-type:none;
	margin:0;
	padding:0;
}

.capaLista .noordenada.icono > li{
	padding-left:18px;
	position:relative;
}

.capaLista .noordenada.icono > li > span.icono{
	width:14px;
	position:absolute;
	left:0;
	top:1px;
}

.capaLista .noordenada.icono.idea > li > span.icono{width:12px; top:2px;}


@media (min-width:480px){}

@media (min-width:768px){}

@media (min-width:1024px){}


/*****
 * MINDMAP 
*************/

.caja.mindMap{
	position: relative;
	padding:40px 30px 15px 30px;
	margin-bottom: 20px;
}

.mindMap .linea{
	height:2px;
	position:absolute;
}

.mindMap .linea.azul{background-color:#057099;}
.mindMap .linea.verde{background-color:#459a41;}
.mindMap .linea.amarillo{background-color:#db9600;}
.mindMap .linea.cian{background-color:#17aebf;}
.mindMap .linea.rojo{background-color:#bc0f2e;}
.mindMap .linea.oro{background-color:#e6c129;}
.mindMap .linea.naranja{background-color:#ed700b;}
.mindMap .linea.lima{background-color:#b1bb1c;}
.mindMap .linea.tierra{background-color:#a46112;}

.caja.mindMap .tituloCaja {
    background-color: #ca0303;
    position: absolute;
    right: 0;
    top: 0;
    height: 20px;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 0 3px 0 0px;
}

.mindMap .tituloCaja .icono svg {
    fill: #ffffff;
    width: 23px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
}

.mindMap .tituloCaja p {
    font-family: MetaBold, Arial, Helvetica, sans-serif;
    display: inline-block;
}

.mindMap .textos {
    margin-bottom: 25px;
}

.mindMap .textos .titulo {
    font-size: 24px;
    margin-bottom: 10px;
}

.mindMap .textos .descripcion {
    font-size: 14px;
    line-height: 17px;
}

.mindMap .cajaMindMap{
	position: relative;
	height:500px;
	background:#F0F0F0;
}

.mindMap .cajaMindMap .nodo{
	border-radius:100%;
	position:absolute;
	background-color:#FFFFFF;
}

.mindMap .cajaMindMap div{
	border-style:solid;
}

.mindMap .cajaMindMap div.textoG{
	width:115px;
	height:115px;
	border-width:18px;	
}

.mindMap .cajaMindMap div.textoG .contenido{
	display:table-cell;
	width:115px;
	height:115px;
	text-align:center;
	vertical-align:middle;
	font-size:16px;
	line-height:14px;
	color:#057099;
}

.mindMap .cajaMindMap div.textoM{
	width:94px;
	height:94px;
	border-width:14px;
}

.mindMap .cajaMindMap div.textoP{
	width:94px;
	height:94px;
	border-width:0;
}

.mindMap .cajaMindMap div.textoMini{
	width:85px;
	height:85px;
	border-width:5px;
}

.mindMap .cajaMindMap div.textoM .contenido,
.mindMap .cajaMindMap div.textoP .contenido,
.mindMap .cajaMindMap div.textoMini .contenido{
	display:table-cell;
	width:74px;
	height:74px;
	text-align:center;
	vertical-align:middle;
	font-size:14px;
	line-height:12px;
	padding: 10px;
}

.mindMap .cajaMindMap div.textoMini .contenido{
	width:80px;
	height:80px;
	padding: 5px;
}

.mindMap .cajaMindMap div.textoP .contenido,
.mindMap .cajaMindMap div.textoMini .contenido{
	color:#FFFFFF;
}

.mindMap .cajaMindMap div.icono{
	width:50px;
	height:50px;
}

.mindMap .cajaMindMap div.icono .contenido{
	width:50px;
	height:50px;
	display:block;
	padding:0;
}

.mindMap .cajaMindMap div.icono .contenido svg{
	fill: #FFFFFF;
	width: 25px;
	position: absolute;
}


/* COLORES */
.mindMap .cajaMindMap .nodo.azul{border-color:#057099;}
.mindMap .cajaMindMap .nodo.verde{border-color:#459a41;}
.mindMap .cajaMindMap .nodo.amarillo{border-color:#db9600;}
.mindMap .cajaMindMap .nodo.cian{border-color:#17aebf;}
.mindMap .cajaMindMap .nodo.rojo{border-color:#bc0f2e;}
.mindMap .cajaMindMap .nodo.oro{border-color:#e6c129;}
.mindMap .cajaMindMap .nodo.naranja{border-color:#ed700b;}
.mindMap .cajaMindMap .nodo.lima{border-color:#b1bb1c;}
.mindMap .cajaMindMap .nodo.tierra{border-color:#a46112;}

.mindMap .cajaMindMap .nodo.textoMini{border-color:#FFFFFF;}

.mindMap .cajaMindMap div.textoM.azul .contenido,{color:#057099;}
.mindMap .cajaMindMap div.textoM.verde .contenido{color:#459a41;}
.mindMap .cajaMindMap div.textoM.amarillo .contenido{color:#db9600;}
.mindMap .cajaMindMap div.textoM.cian .contenido{color:#17aebf;}
.mindMap .cajaMindMap div.textoM.rojo .contenido{color:#bc0f2e;}
.mindMap .cajaMindMap div.textoM.oro .contenido{color:#e6c129;}
.mindMap .cajaMindMap div.textoM.naranja .contenido{color:#ed700b;}
.mindMap .cajaMindMap div.textoM.lima .contenido{color:#b1bb1c;}
.mindMap .cajaMindMap div.textoM.tierra .contenido{color:#a46112;}

.mindMap .cajaMindMap div.textoP.nodo.azul,
.mindMap .cajaMindMap div.textoMini.nodo.azul,
.mindMap .cajaMindMap div.icono.nodo.azul{background-color:#057099;}
.mindMap .cajaMindMap div.textoP.nodo.verde,
.mindMap .cajaMindMap div.textoMini.nodo.verde,
.mindMap .cajaMindMap div.icono.nodo.verde{background-color:#459a41;}
.mindMap .cajaMindMap div.textoP.nodo.amarillo,
.mindMap .cajaMindMap div.textoMini.nodo.amarillo,
.mindMap .cajaMindMap div.icono.nodo.amarillo{background-color:#db9600;}
.mindMap .cajaMindMap div.textoP.nodo.cian,
.mindMap .cajaMindMap div.textoMini.nodo.cian,
.mindMap .cajaMindMap div.icono.nodo.cian{background-color:#17aebf;}
.mindMap .cajaMindMap div.textoP.nodo.rojo,
.mindMap .cajaMindMap div.textoMini.nodo.rojo,
.mindMap .cajaMindMap div.icono.nodo.rojo{background-color:#bc0f2e;}
.mindMap .cajaMindMap div.textoP.nodo.oro,
.mindMap .cajaMindMap div.textoMini.nodo.oro,
.mindMap .cajaMindMap div.icono.nodo.oro{background-color:#e6c129;}
.mindMap .cajaMindMap div.textoP.nodo.naranja,
.mindMap .cajaMindMap div.textoMini.nodo.naranja,
.mindMap .cajaMindMap div.icono.nodo.naranja{background-color:#ed700b;}
.mindMap .cajaMindMap div.textoP.nodo.lima,
.mindMap .cajaMindMap div.textoMini.nodo.lima,
.mindMap .cajaMindMap div.icono.nodo.lima{background-color:#b1bb1c;}
.mindMap .cajaMindMap div.textoP.nodo.tierra,
.mindMap .cajaMindMap div.textoMini.nodo.tierra,
.mindMap .cajaMindMap div.icono.nodo.tierra{background-color:#a46112;}



.mindMap .cajaMindMap span.iconoVentana{
	background:#057099;
	border-radius:100%;
	position:absolute;
	width:30px;
	height:30px;
	cursor:pointer;
}

.mindMap .cajaMindMap span.iconoVentana svg{
	position:absolute;
	fill:#FFFFFF;
	left: 25%;
	top: 30%;
	width: 50%;
}

.mindMap .cajaMindMap span.iconoVentana > span{
	display:none;
}

/*************
 * PIE GRAPH *
 *************/


span.iconoVisto{
	position:absolute;
	display:inline-block;
	background:#459a41;
	width:15px;
	height:15px;
	
	border-radius:100%;
	box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

span.iconoVisto svg{
	position:absolute;
	width:50%;
	fill:rgba(255,255,255,0.7);
	
	top: 28%;
	left: 26%;
}

.pieGraph{
	position:relative;
	margin-top:40px;
}

/* INFO */

.pieGraph .info{
	margin-bottom:20px;
	overflow:hidden;
}

.pieGraph .info .titulo{
	font-size:18px;
	color:#057099;
	text-align:center;
	margin-bottom:15px;
}

.pieGraph .info .descripcion{
	font-size:16px;
	text-align:center;
	color:#515151;
	margin:0 15%;
}

/* TARTA */

.pieGraph .pie{
	width: 270px;
	height: 270px;
	position: relative;
	left: 35%;
	
	margin:0;
	z-index:1;
}

.pieGraph .pie .anillo, .pieGraph .pie .anillo svg{
	width:100%;
	height:100%;
}

.pieGraph .pie .anillo svg{
	opacity:0.3;
	position:absolute;
	left:0;
	top:0;
}

.pieGraph .pie .slice{
	position:absolute;
	width: 36%;
	height: 36%;
	cursor:pointer;	
}

.pieGraph .pie .slice .sliceBg{
	width:100%;
	height:100%;
	background:#cc0033;
	border-radius:100% 0 0 0;
}

.pieGraph .pie .slice .sliceIcon{
	position:absolute;
	width: 40%;
}

.pieGraph .pie .slice .sliceIcon svg{
	fill:#FFFFFF;
}

.pieGraph .pie .slice .sliceText{
	background:rgba(0,0,0,0.6);
	padding: 4px 10px;
	position: absolute;
	top: 15%;
	white-space: nowrap;
	right: 10%;
}

.pieGraph .pie .slice .sliceText span.texto{
	color:#f9f9f9;
	font-size:14px;
	line-height:14px;
}

.pieGraph .pie .slice.elem02 .sliceText,
.pieGraph .pie .slice.elem03 .sliceText
{
	right:auto;
	left:10%;
}

.pieGraph .pie .slice.elem03 .sliceText,
.pieGraph .pie .slice.elem04 .sliceText
{
	top:auto;
	bottom:15%;
}

.pieGraph .pie .slice.elem01 .sliceText,
.pieGraph .pie .slice.elem04 .sliceText
{
	text-align:right;
}

.pieGraph .pie .slice.elem01 .sliceIcon,
.pieGraph .pie .slice.elem02 .sliceIcon
{
	bottom: 12%;
}

.pieGraph .pie .slice.elem01 .sliceIcon,
.pieGraph .pie .slice.elem04 .sliceIcon
{
	right: 12%;
}

.pieGraph .pie .slice.elem02 .sliceIcon,
.pieGraph .pie .slice.elem03 .sliceIcon
{
	left: 12%;
}

.pieGraph .pie .slice.elem03 .sliceIcon,
.pieGraph .pie .slice.elem04 .sliceIcon
{
	top: 12%;
}




/*CONTENIDOS*/

.pieElements{
}

.pieElements .pieElement{
	display:none;
}

.pieElements .pieElement .presentacion{
	padding-top:60px;
	position:relative;
}

.pieElements .pieElement .presentacion .btnSiguiente{
	width:30px;
	height:30px;
	border-radius:100%;
	background:#057099;
	box-shadow:0 0 3px rgba(0,0,0,0.5);
	cursor:pointer;
	position:absolute;
	right: -15px;
	bottom: 15px;
	overflow:hidden;
}

.pieElements .pieElement .presentacion .btnSiguiente.visto{
	background:#459a41;
	cursor:default;
}

.pieElements .pieElement .presentacion .btnSiguiente svg{
	width: 47%;
	fill: rgba(255,255,255,0.75);
	position: absolute;
	top: 31%;
	left: 27%;
}

.pieElements .pieElement .presentacion .titulo{
	font-size:16px;
	text-align:center;
	text-transform:uppercase;
	margin-bottom:15px;	
}

.pieElements .pieElement .presentacion p{
	font-size:14px;
	font-style:italic;
	line-height:normal;
	margin-bottom:15px;
	text-align:justify;
}

.pieElements .pieElement .presentacion .nota{
	font-size:12px;
	font-weight:bold;
	color:#057099;
	text-align:center;
}

/**/

.pieElements .pieElement .cuerpo{
	position:relative;
}

.pieElements .pieElement .cuerpo p{
	font-size:14px;
	line-height:normal;
	margin-bottom:15px;
}

.pieElements .pieElement .cuerpo .btnCerrar{
	border-radius:100%;
	background:#cc0033;
	width:30px;
	height:30px;
	position:absolute;
	right:15px;
	top:-15px;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	cursor:pointer;
}

.pieElements .pieElement .cuerpo .btnCerrar svg{
	position:absolute;	
	width: 50%;
	top: 25%;
	left: 25%;
	fill:#FFFFFF;
}


/**********
 * SLIDER *
 **********/



.slider .contenedorSlides{
	white-space: nowrap;
	overflow: hidden;
	margin-bottom:15px;
	width:100%;
	position:relative;
	padding: 0;
}

.slider .contenedorSlides .carreteSlides{
	position:relative;
	margin: 0;
	padding: 0;
	left: 0;
}



.slider .portada .circuloIcono{
	width: 200px;
	height: 200px;	
	border-radius: 100%;
	background: rgba(0,0,0,0.5);
	position: relative;
	margin: 0 auto;
}

.slider .portada .circuloIcono svg{
	width: 60%;
	height: 60%;
	position: absolute;
	left: 20%;
	top: 20%;
	fill:#FFFFFF;
}

.slider .portada .cartelInfo{
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 80%;
	left: 10%;
}

.slider .portada .cartelInfo span{
	display: inline-block;
	padding: 10px;
	font-size: 18px;
	color: #FFFFFF;
	text-transform: uppercase;
	margin: auto;
	background: #057099;
	white-space: normal;
	font-family: 'MetaThin';
}

.slider .portada,
.slider .slide{
	position:relative;
	display: inline-block;	
	overflow: hidden;
}

.slider .portada{
	width: 90%;
	padding: 5%;
}
.slider .slide{	
	width: 100%;
	padding: 0;
	margin: 0;
}

.slider .slide .textos{
	position:absolute;
	bottom: 5%;
	left: 5%;
	max-width: 90%;
	white-space: normal;
}

.slider .slide .slideTitulo{
	font-size:18px;
	background:#057099;
	color:#FFFFFF;	
	padding:2% 3%;
	font-family:'MetaThin';	
	margin-bottom:2%;
	display:inline-block;
	position:relative;
	opacity: 0;
}

.slider .slide .slideDescripcion{
	font-size:12px;
	background:#d1d1d1;
	color:#545454;	
	padding:2% 3%;
	position:relative;
	opacity: 0;
}


.slider .contenedorSlides .slide .imagenFondo{
	width:100%;	
}



@media(min-width:480px){
	.slider .contenedorSlides .slide .slideTitulo{
		font-size:20px;
	}

	.slider .contenedorSlides .slide .slideDescripcion{
		font-size:14px;
	}
}

@media(min-width:768px){
	.slider .contenedorSlides .portada .cartelInfo{
		top: 150px;
	}
	
	.slider .contenedorSlides .slide .slideTitulo{
		font-size:22px;
	}

	.slider .contenedorSlides .slide .slideDescripcion{
		font-size:15px;
	}

}

@media(min-width:1024px){
	.slider .contenedorSlides .portada .circuloIcono{
		width: 250px;
		height: 250px;
	}
	
	.slider .contenedorSlides .portada .cartelInfo{
		top: 220px;
	}
	
	.slider .contenedorSlides .portada .cartelInfo span{
		font-size: 24px;
	}
	
	.slider .contenedorSlides .slide .slideTitulo{
		font-size:24px;
	}

	.slider .contenedorSlides .slide .slideDescripcion{
		font-size:16px;
	}
}

.slider .navegacion{
	width: 100%;
	height: auto;
	margin: 0 auto 25px;
}

/***************
 * CON BULLETS *
 ***************/



.slider .navegacion.bullets{
	text-align: center;
	margin: 0 auto 15px;
}

.slider .navegacion.bullets .bulletSlider{
	width: 30px;
	height: 30px;
	border-radius: 100%;
	margin: 0 5px 5px 0;
	display: inline-block;
	background: #d1d1d1;
	cursor: pointer;
	position: relative;
	box-shadow:0 0 2px rgba(0,0,0,0.3);
}

.slider .navegacion.bullets .bulletSlider svg{
	position: absolute;
	width:50%;
	height:50%;
	left:25%;
	top:130%;
	fill:#FFFFFF;
}


/*******************************
 * CON BARRA DE DESPLAZAMIENTO *
 *******************************/

.slider .navegacion.barraDesplazamiento{	
	height: 6px;
	position: relative;
	margin: 0 auto 40px;
	padding: 0;
	background: #dedede;
	border-radius: 4px;
	top: 15px;
}


.slider .navegacion.barraDesplazamiento .bulletBarraDesplazamiento{
	width: 30px;
	height: 30px;
	border-radius: 100%;
	position: absolute;
	top: -12px !important;
	left: 5px;
	background: #057099;
	cursor: pointer;
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.slider .navegacion.barraDesplazamiento .cuadroSlide{
	height: 6px;
	width: auto;
	background: #999;
	display: inline-block;
	margin-right: 0.5%;
}

.slider .navegacion.barraDesplazamiento .cuadroSlide:nth-child(2){
	border-radius:4px 0 0 4px;
}

.slider .navegacion.barraDesplazamiento .cuadroSlide:last-child{
	border-radius:0 4px 4px 0;
	margin: 0;
}



/*************
 * NUMERADOS *
 *************/


.slider .contenedorSlides.numerado .slide{
	cursor: pointer;
}

.slider .contenedorSlides.numerado .slide .imagenFondo{
	width: auto;
}

.slider .contenedorSlides.numerado .slide .cuadroNumero{
	color: #313131;
	position: absolute;
	top: 0;
    left: 10px;
	font-size: 56px;
	line-height: 40px;
	font-family: 'MetaBold';
	text-shadow: 0 0 3px rgba(255,255,255,0.7);
	/*opacity: 0.7;*/
}




/**************
 * THUMBNAILS *
 **************/

.slider .navegacion.miniaturas{
	width: 100%;
	margin: 0;
	position:relative;
}

.slider .contenedorMiniaturas{		
	overflow: hidden;
	
}

.slider .bandejaMiniaturas{
	position:relative;
	white-space: nowrap;
}

.slider .contenedorMiniaturas .miniatura{
	width: 19%;
	margin:0 1.25% 15px 0;
	display:inline-block;
	opacity:0.6;
	position: relative;
	cursor:pointer;
}

.slider .contenedorMiniaturas .miniatura.visible{
	
}

.slider .contenedorMiniaturas .miniatura.activo{
	opacity:1;	
}

.slider .contenedorMiniaturas .miniatura:last-child{
	margin:0;
}

.slider .contenedorMiniaturas .miniatura .cajaMiniatura{
	margin-bottom:5px;
	width: 100%;
	max-height: 100px;
	overflow: hidden;
	position: relative;
}

.slider .contenedorMiniaturas .miniatura img{
	width: 100%;
}

.slider .contenedorMiniaturas .miniatura .textoMiniatura{
	font-family:'MetaThin';	
	font-size:12px;
	color:#313131;
	text-align:center;
	white-space:normal;
}

.slider .contenedorMiniaturas .miniatura .iconoVisto{
	position: absolute;
	width:0;
	height:0;
	left: 50%;
	top: 50%;
}

.slider .contenedorMiniaturas .miniatura .iconoVisto svg{
	position: absolute;
	width: 50%;
	fill: rgba(255,255,255,0.7);
	top:32%;
	left: 26%;
	height: 41.7%;	
}

.slider .navegacion .contenedorMore{
	text-align: center;
	margin-bottom: 10px;
}

.slider .navegacion .contenedorMore .more,
.slider .navegacion .contenedorMore .previous{
	border-radius:100%;	
	position: relative;
	width: 40px;
	height: 40px;
	cursor: pointer;
	overflow:hidden;
	display: inline-block;
	margin: 0 5px;
	
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.35);
}

.slider .navegacion .contenedorMore .more{
	background:#057099;
}

.slider .navegacion .contenedorMore .previous{
	background:#a00519;
}

.slider .navegacion .contenedorMore .more span,
.slider .navegacion .contenedorMore .previous span{
	color:#FFFFFF;
	opacity:0.8;
	font-family:'MetaBold';
	font-size:16px;
	font-style:italic;
	position:absolute;
	left: 0;
	top: 10px;	
	width: 40px;
	text-align: center;
}

@media(min-width:480px){
	
	.slider .navegacion.miniaturas.desbordado .contenedorMiniaturas{
		margin: 0 50px;
	}
	
	.slider .navegacion .contenedorMore .more,
	.slider .navegacion .contenedorMore .previous{
		position:absolute;
		top: 16px;
		display: block;
		margin: 0;
	}
	
	.slider .navegacion .contenedorMore .more{
		right: 0;		
	}

	.slider .navegacion .contenedorMore .previous{
		left: 0;		
	}

	.slider .navegacion .contenedorMore .more span,
	.slider .navegacion .contenedorMore .previous span{
	}

}

/********
 * TABS *
 ********/

.cajaTabs .tabs{
	margin-bottom:15px;
	position:relative;
	white-space:normal;	
	z-index:1;
}

.cajaTabs .tabs .carreteTabs{
	position:relative;
	display:inline-block;
	width:100%;
}

@media(min-width:768px){
	.cajaTabs .tabs{
		white-space:nowrap;
	}
	
	.cajaTabs .tabs .carreteTabs{
		width:auto;
	}
}

.cajaTabs .tabs .tab{
	position:relative;
	margin:0 0 8px 0;
	text-transform:uppercase;
	padding:11px 16px 12px;
	display:block;
	cursor:pointer;
	white-space:nowrap;	
	
	background:#FFFFFF;	
	border-radius:4px;
	box-shadow:0 0 2px rgba(0,0,0,0.5);
}



@media(min-width:768px){
	.cajaTabs .tabs .tab{
		width:auto;
		display:inline-block;
		margin:0 5px 10px 0;
	}
	
	.cajaTabs .tabs .tab:last-child{
		margin-right: 0;
	}
}

.cajaTabs .tabs .tab.seleccionable{
	background:#057099;	
}

.cajaTabs .tabs .tab.bloqueado{
	background:#888888;
	cursor:not-allowed;
}

.cajaTabs .tabs .tab.seleccionable span.texto,
.cajaTabs .tabs .tab.bloqueado span.texto
{
	color:#FFFFFF;
}

.cajaTabs .tabs .tab:last-child{
	margin-right:0;
}

.cajaTabs .tabs .tab span.texto{
	display: inline-block;
	font-size: 14px;
	line-height: 20px;
	height: 20px;
	color: #057099;
	overflow: hidden;
	width: 90%;
	text-overflow: ellipsis;	
}

.cajaTabs .tabs .tab.visto span.texto{
	color:#459a41;
}

.cajaTabs .tabs .tab span.icono{
	display:inline-block;
	width:26px;
	height: 20px;
	margin-right:5px;
	position: relative;
}

.cajaTabs .tabs .tab span.icono svg{
	width:26px;
	height: 20px;
	fill:#FFFFFF;
	position:absolute;
	left: 0;
}

.cajaTabs .tabs .tab.activo span.icono svg{
	fill:#057099;
}

.cajaTabs .tabs .tab.visto span.icono svg{
	fill:#459a41;
}

.cajaTabs .tabs .tab span.iconoVisto{
	position:absolute;
	background:#459a41;
	width:15px;
	height:15px;
	top: -7px;
	right: 10px;
	
	border-radius:100%;
	box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.cajaTabs .tabs .tab span.iconoVisto svg{
	position:absolute;
	width:50%;
	height: 41.7%;
	fill:rgba(255,255,255,0.7);
	
	top: 30%;
	left: 24%;
}

.cajaTabs .ventanas .marcador{
	display:none;
	position:absolute;
	left: 50px;
	top: -20px;
}


.cajaTabs .ventanas .botonSubirTabs{
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: #057099;
	position: absolute;
	right: 20px;
	bottom: -25px;
	cursor:pointer;
	
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.7);
}

.cajaTabs .ventanas .botonSubirTabs svg{
	width: 50%;
	height: 36%;
	fill: #FFFFFF;
	position: absolute;
	left: 25%;
	top: 30%;
}

@media(min-width:768px){
	.cajaTabs .ventanas{
		min-height: 280px;		
	}
	
	.cajaTabs .ventanas .marcador{
		display:block;
	}
}

.cajaTabs .ventanas .marcador > svg{
	fill:#FFFFFF;
	width:50px;
	height:23.6px;
}



.cajaTabs .ventanas{
	position:relative;
	overflow:visible !important;	
}


.cajaTabs .ventanas .ventana{
	display:none;
}

.cajaTabs .ventanas .ventana > .titulo{
	font-size:18px;
	color:#057099;
	margin-bottom:15px;
}

.cajaTabs .ventanas .ventana .contenido p{
	font-size:16px;
	margin-bottom:15px;
	line-height:130%;
}

.cajaTabs .ventanas .portada{
	width: 90%;
	left: 5%;
	display: block;
	position: relative;
	height: 70%;
	top: 15%;
	padding: 0;
}

.cajaTabs .ventanas .portada .circuloIcono{
	width: 200px;
	height: 200px;	
	border-radius: 100%;
	background: rgba(0,0,0,0.5);
	position: relative;
	margin: 0 auto;
}

.cajaTabs .ventanas .portada .circuloIcono svg{
	width: 60%;
	height: 60%;
	position: absolute;
	left: 20%;
	top: 20%;
	fill:#FFFFFF;
}

.cajaTabs .ventanas .portada .cartelInfo{
	text-align: center;
	position: absolute;
	bottom: 5%;
	width: 80%;
	left: 10%;
	top: auto;
}

.cajaTabs .ventanas .portada .cartelInfo span{
	display: inline-block;
	padding: 10px;
	font-size: 18px;
	color: #FFFFFF;
	text-transform: uppercase;
	margin: auto;
	background: #057099;
	white-space: normal;
	font-family: 'MetaThin';
}

@media(min-width:1024px){
	.cajaTabs .ventanas .portada .cartelInfo span{
		font-size: 24px;
	}
}

/******************
 * CON THUMBNAILS *
 ******************/
 

.cajaTabs.thumbnails .tabs .tab{
	 padding:0;
	 width: 49%;
	 margin: 0 2% 8px 0;
	 display:inline-block;
}

.cajaTabs.thumbnails .tabs .tab:nth-child(2n){
	margin: 0 0 8px 0;
}



 @media (min-width:768px){
	 .cajaTabs.thumbnails .tabs .tab,
	 .cajaTabs.thumbnails .tabs .tab:nth-child(2n){
		 width:176px;
		 margin: 0 7px 8px 0;
	}

}
 
.cajaTabs.thumbnails .tabs .tab span.texto{
	text-align: center;
	padding: 8px;
	display: table-cell;
	vertical-align: middle;
	height: 50px;
	line-height:16px;
	white-space:normal;
}
 
.cajaTabs.thumbnails .tabs .tab .thumbnail{
	height: 100px;
	overflow: hidden;

	border-radius:4px 4px 0 0;
}
 
.cajaTabs.thumbnails .tabs .tab span.iconoVisto{
	width: 30px;
	height: 30px;
	top: -15px;
}
 
 .cajaTabs.thumbnails .tabs .tab .thumbnail img{
	 width:100%;
	 height:auto;
}



/************
* VERTICAL *
************/

.cajaTabs.vertical.thumbnails .tabs .tab{
	
}


 @media (min-width:768px){
	 
	.cajaTabs.vertical .carreteTabs{
		width: 100%;
	 }
	
	 
	.cajaTabs.vertical .tabs{
		width: 26%;
		margin: 0 3% 0 0;
		white-space: normal;
		display: inline-block;
		text-align: right;
	}
	
	.cajaTabs.vertical .tabs .tab{
		display:block;
		white-space:normal;
		margin: 0 0 10px 0;
	}
	
	.cajaTabs .tabs .tab span.icono{text-align:center;}
	
	.cajaTabs.vertical .ventanas{
		width: 66%;
		margin: 0;
		display: inline-block;
		padding: 20px 2.2%;
	}
	
	.cajaTabs.vertical .ventanas .marcador{
		transform:rotate(-90deg);
		position: absolute;
		left: -32px;
		top: 13px;
	}
	
	.cajaTabs.vertical .tabs .tab span.icono{display: table-cell; vertical-align: middle; padding-right: 10px;}
	.cajaTabs.vertical .tabs .tab span.icono svg{position: relative;}
	.cajaTabs.vertical .tabs .tab span.texto{display: table-cell; vertical-align:middle; text-align:left; width: auto;}
}

/***************************
 * VERTICAL CON THUMBNAILS *
 ***************************/
 
.cajaTabs.thumbnails.vertical .tabs .tab .thumbnail{
	border-radius:4px 0 0 4px;
}

 
@media (min-width:768px){
	
	.cajaTabs.vertical.thumbnails .tabs .tab{
		 width:100%;
	 }
	 
	.cajaTabs.vertical.thumbnails .tabs{
		width: 30%;
	}
	
	.cajaTabs.vertical.thumbnails .ventanas{
		width: 62%;
	}
	 
	 .cajaTabs.vertical.thumbnails .tabs .tab .thumbnail{
		 display:table-cell;
		 overflow:hidden;
		 width: 40%;
		 height:auto;
		 line-height:16px;
	 }
 

 }

/***************
 * CON PETALOS *
 ***************/

.cajaTabs.petalos .tabs .tab > svg{
	display: none;		
}

@media(min-width:768px){
	.cajaTabs.petalos{		
		margin: 0 160px 15px;
	}

	.cajaTabs.petalos .tabs{	
		position: absolute;
		white-space: normal;
		z-index: 2;
		left: 0;
		width: 100%;
	}

	.cajaTabs.petalos .tabs .carreteTabs{
		width: auto;
		display: block;
	}

	.cajaTabs.petalos .tabs .carreteTabs .tab{		
		width: 150px;
		height: 120px;
		padding: 0;
		margin: 0;
		border-radius: 100%;
		background: transparent;
		box-shadow: none;
		position: absolute;
	}
	
	.cajaTabs.petalos .tabs .tab > svg{
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		fill:#057099;
	}
	
	.cajaTabs.petalos .tabs .tab.bloqueado > svg{
		fill:#515151;
	}
	
	.cajaTabs.petalos .tabs .tab.activo > svg{
		fill:#208ab2;
	}
	
	.cajaTabs.petalos .tabs .tab.izquierda{		
		left:0;
	}
	
	.cajaTabs.petalos .tabs .tab.derecha{
		right: 0;
	}
	
	.cajaTabs.petalos .tabs .tab.derecha > svg{
		transform: rotate(180deg);
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab span.texto{	
		display: none;
		position: absolute;
		z-index: 1;
		width: 80%;
		font-size: 12px;
		line-height: 14px;
		left: 10%;
		bottom: 20px;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.izquierda span.texto{
		left: 0;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.derecha span.texto{
		right: 0;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab .thumbnail,
	.cajaTabs.petalos.thumbnails .tabs .tab .icono{
		width: 53.34%;
		height: 66.68%;
		overflow: hidden;				
		border-radius: 100%;
		z-index: 1;
		position: absolute;		
		top: 16.5%;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.izquierda .thumbnail,
	.cajaTabs.petalos.thumbnails .tabs .tab.izquierda .icono{
		left: 13.5%;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.derecha .thumbnail,
	.cajaTabs.petalos.thumbnails .tabs .tab.derecha .icono{
		right: 13.5%;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab .thumbnail img{
		width: 160%;
		height: auto;
		position: relative;
		left: -30%;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab .icono{
		border-radius: 100%;
		background: #DEDEDE;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab .icono svg{
		position: absolute;
		width: 60%;
		height: 60%;
		left: 20%;
		top:20%;
		fill:#057099;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.activo{
		z-index: 1;

		width: 190px;
		height: 152px;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(1),
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(2){
		top: 0;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(1),
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(2){
		top: -16px;
	}
	
	
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(3),
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(4){
		top: 120px
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(3),
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(4){
		top: 104px;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(5),
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(6){
		top: 240px
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(5),
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(6){
		top: 224px;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(7),
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(8){
		top: 360px
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(7),
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(8){
		top: 344px;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(9),
	.cajaTabs.petalos.thumbnails .tabs .tab:nth-child(10){
		top: 480px
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(9),
	.cajaTabs.petalos.thumbnails .tabs .tab.activo:nth-child(10){
		top: 464px;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab span.iconoVisto{
		width: 0;
		height: 0;
		top: 25%;
		z-index: 1;
		transform-origin:50% 50%;
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.izquierda span.iconoVisto{
		left: 19%;		
	}
	
	.cajaTabs.petalos.thumbnails .tabs .tab.derecha span.iconoVisto{
		right: 19%;		
	}
}


/***************
 * MODO SLIDER *
 ***************/

.cajaTabs.tabSlider{
	margin: 30px 0 50px;
}



.cajaTabs.tabSlider .ventanas{
	padding: 40px 20px;
}

.cajaTabs.tabSlider .carrete{
	overflow: hidden;
	width: 100%;
}

.cajaTabs.tabSlider .carrete .contenedorSlides{	
	white-space: nowrap;
	position: relative;
}

.cajaTabs.tabSlider .carrete .contenedorSlides .portada{
	display: inline-block;
	width: 100%;
	left: 0;
	top: 0;
	white-space: normal;
}

.cajaTabs.tabSlider .carrete .contenedorSlides .ventana{
	display: inline-block;
	width: 100%;
	white-space: normal;
}

.cajaTabs.tabSlider .slidePrevious,
.cajaTabs.tabSlider .slideNext{
	width: 0;
	height: 0;
	position: absolute;
	border-radius: 100%;
	background: #057099;
	box-shadow: 0 0 3px 0 #414141;
	cursor: pointer;
}

.cajaTabs.tabSlider .slidePrevious svg,
.cajaTabs.tabSlider .slideNext svg{
	fill: #FFFFFF;
	width: 55%;
	left: 24%;
	position: relative;
	top: 23%;
	height: 55%;
}

.cajaTabs.tabSlider .slidePrevious{
	-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);	
}

.cajaTabs.tabSlider .slideNext{
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);	
}
 

.cajaTabs.tabSlider .slidePrevious.activo,
.cajaTabs.tabSlider .slideNext.activo{
	width: 60px;
	height: 60px;
}

.cajaTabs.tabSlider .slidePrevious,
.cajaTabs.tabSlider .slideNext{
	left: 41%;
}




.cajaTabs.tabSlider .slidePrevious{top: -30px;}
.cajaTabs.tabSlider .slideNext{bottom:-30px;}



@media(min-width:480px){
	.cajaTabs.tabSlider .slidePrevious,
	.cajaTabs.tabSlider .slideNext{
		left: 43%;
	}
}

@media(min-width:768px){
	
	.cajaTabs.tabSlider{
		margin: 0 30px 15px;
	}
	
	.cajaTabs.tabSlider .ventanas{
		padding: 20px 40px;
	}
	
	.cajaTabs.tabSlider .slidePrevious,
	.cajaTabs.tabSlider .slideNext{
		top: 49%;
	}
	
	.cajaTabs.tabSlider .slidePrevious{
		left: 0;
	}

	.cajaTabs.tabSlider .slideNext{
		left: auto;
		right: 0;
	}

	
	.cajaTabs.tabSlider .slidePrevious.activo,
	.cajaTabs.tabSlider .slideNext.activo{
		top: 42%;
	}
	
	.cajaTabs.tabSlider .slidePrevious.activo{
		left: -30px;
	}

	.cajaTabs.tabSlider .slideNext.activo{
		right: -30px;
		
	}
	
	.cajaTabs.tabSlider .slidePrevious{
		-ms-transform: rotate(-180deg); /* IE 9 */
		-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
		transform: rotate(-180deg);	
	}

	.cajaTabs.tabSlider .slideNext{
		-ms-transform: rotate(0deg); /* IE 9 */
		-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
		transform: rotate(0deg);	
	}


}


/************************
 * CSS VENTANAS MODALES
 ************************/
 
 
.ventanaModal .contenidoVentana{
	display:none;
}

#ventanaModal{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(51, 51, 51, 0.9) none repeat scroll 0% 0%;
	top: 0px;
	left: 0px;
	text-align: center;
	z-index: 10;
	display:none;
}

#ventanaModal .cuerpoVentanaModal{
	background: rgb(255, 255, 255);
	padding: 35px 0;
	max-width: 94%;	
	margin: auto;
	position: relative;
	display: inline-block;
	opacity:0;
	text-align: left;
	
}

#ventanaModal .cierraModal{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 40px;
	height: 40px;
	cursor:pointer;
}

#ventanaModal .cierraModal svg{
	fill:#515151;
	width: 100%;
	height: 100%;
}


#ventanaModal .tituloModal{
	font-family:'MetaThin', Arial, Helvetica, sans-serif;
	font-size:32px;
	color:#333333;
	margin:0px 20px 20px 20px;
}

@media(min-width:768px){
	#ventanaModal .tituloModal{
		margin:0px 20px 20px 35px;
	}	
}

#ventanaModal .tituloModal span{
	font-family:'MetaThin', Arial, Helvetica, sans-serif;
	font-size:32px;
	color:#333333;
}

#ventanaModal .cuerpoModal{
	margin:0;
}

#ventanaModal .cuerpoModal #contenedor_glosario,
#ventanaModal .cuerpoModal #contenedor,
#ventanaModal .cuerpoModal #panelProgreso,
#ventanaModal .cuerpoModal .contenidoDescargas,
#ventanaModal .cuerpoModal .contenidoAyuda{
	margin-left:35px;
}

#ventanaModal .cuerpoModal .inner{
	padding:5px 5px;
	font-size:15px;
	line-height:20px;
	color:#50575d;
	margin:0 15px;
}

@media (min-width:768px){
	#ventanaModal .cuerpoModal .inner{
		padding:5px 10px;		
		margin:0 25px;
	}
}

@media (min-width:1024px){
	#ventanaModal .cuerpoVentanaModal{
		max-width:950px;
	}
}


/*************************************************************
 * CONFIGURACION DE LAS VENTANAS DE RECURSOS DE LA INTERFAZ
 * Definicion de variables que dan como resultado el 
 * aspecto de las ventanas
 *
 * AUTOR : FJLG
 * CREADO : 09/11/2016
 * VERSIÓN : 1.0
 *************************************************************/

#ventanaRecurso{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9;
	background: #FFFFFF;
	top: 0;
	margin: 0;
	left: 0;
}

@media(min-width:1024px){
	#ventanaRecurso{
		width: 964px;
		height: 100%;		
	}
}

.cuerpoVR{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	height: 100%;
}

.encabezadoVR{
	width: 100%;
	padding: 10px 0;
	margin: 0;
	background: #d81e05;
}


@media(min-width:1024px){
	.encabezadoVR{		
		padding: 0;
		margin: 0;
		height: 60px;
	}
}

.tituloVR{
	font-size: 28px;
	color: #FFFFFF;
	text-align: center;
	margin: 0 50px;
	text-transform: uppercase;
	line-height: 25px;
}

@media(min-width:1024px){
	.tituloVR{
		font-size: 40px;
		text-align: right;
		margin: 0 30px 0 0;
		line-height: 35px;
		height: 40px;
		padding: 10px 0;
	}
}

.contenidoVR{
	padding: 20px 10px 10px 10px;
	overflow: hidden;
	overflow-y: auto;
}

@media(min-width:480px){
	.contenidoVR{
		padding: 20px;
	}
}

.cierraVR{
	width: 40px;
	height: 40px;
	position: absolute;
	left: 4px;
	top: 4px;
	cursor: pointer;	
}

.cierraVR svg{
	fill:#FFFFFF;
}

@media(min-width:1024px){
	.cierraVR{
		width: 60px;
		height: 60px;
		right: 5px;
		top: 0px;
	}
}



/*******************
 * bkCnt.css
*******************/


.btnRepetirDeshabilitado
{
	opacity:0.2;
}


.BLKCNT{
    padding: 0px;
    margin: 0px;
	overflow: hidden;
	padding:4px;
}

.BLKCNT.desactivado{
	display:block;
	position: fixed;
	left: 10000px;
	top: 0;
	width: 100%;
}

@media(min-width:1024px){	
	.BLKCNT.desactivado{
		width: 924px;
		
	}
}

.BLKCNT.completado{
}

.BLKCNTpanel{
	width:100%;
	display:table;
	margin-bottom:20px;
}

.BLKCNTpanel > div{
	display:table-cell;
	vertical-align:middle;
	position:relative;
}

.BLKCNTpanelInfo, .BLKCNTpanelActions{
	width:auto;
}

.BLKCNTlinea{
	width:100%;
	height:2px;
	background:#057099;
}

.BLKCNTpanelInfo .textoInformacion{
	position: absolute;
	font-size: 12px;
	font-style:italic;
	bottom: 45px;
	right: 0;
	color:#999999;
}

.BLKCNTloader{
	width:80px;
	height:80px;
	padding:0 10px;
}

.BLKCNTloader .circuloExterior{
	border-radius:100%;
	width:60px;
	height:60px;
	padding:10px;
	background: rgba(0,0,0,0.1);
}

.BLKCNTloader .circuloInterior{
	border-radius:100%;
	position:relative;
	width:100%;
	height:100%;
	background: #057099;
	overflow:hidden;
}


.BLKCNTloader .circuloInterior span.circulo{
    width: 16.69%;
    height: 16.69%;
    background: #FFFFFF;
    position: absolute;
    top: 41.5%;
    border-radius: 100%;
}

.BLKCNTloader .circuloInterior span.circulo.c01{left: 20%;}
.BLKCNTloader .circuloInterior span.circulo.c02{left: 41%;}
.BLKCNTloader .circuloInterior span.circulo.c03{left: 64%;}

.BLKCNTloader .circuloInterior > svg{
	position:absolute;
	fill:#FFFFFF;
}

.BLKCNTloader .circuloInterior svg.engranajeGrande{
	width: 40%;
	height: 40%;
	left: 18%;
	top: 19%;
}

.BLKCNTloader .circuloInterior svg.engranajeMediano{
	width: 30%;
	height: 30%;
	left: 55%;
	top: 42%;
}

.BLKCNTloader .circuloInterior svg.engranajePequeño{
	width: 20%;
	height: 20%;
	left: 40%;
	top: 65%;
}

.BLKCNTloader .circuloInterior .iconoNextBlock,
.BLKCNTloader .circuloInterior .iconoSiguientePantalla,
.BLKCNTloader .circuloInterior .iconoFinalizado
{
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:-100%;
	cursor:pointer;
}

.BLKCNTloader .circuloInterior .iconoFinalizado{
	left:50%;
	top:50%;
	width:0;
	height:0;
}

.BLKCNTloader .circuloInterior .iconoNextBlock svg,
.BLKCNTloader .circuloInterior .iconoSiguientePantalla svg,
.BLKCNTloader .circuloInterior .iconoFinalizado svg
{
	position:absolute;
	fill:#FFFFFF;
}


.BLKCNTloader .circuloInterior .iconoNextBlock svg{
	width: 44%;
	left: 28%;
	top: 37%;
	height: 31.44%;
}

.BLKCNTloader .circuloInterior .iconoSiguientePantalla svg{
	width: 50%;
	left: 28%;
	top: 29%;
	height: 41.69%;
}

.BLKCNTloader .circuloInterior .iconoFinalizado svg{
	width: 50%;
	left: 25%;
	top: 31%;
	height: 41.69%;
}

.BLKCNTloader .circuloInterior .iconoFinContenido{
	width: 0px;
	height: 0px;
	position: absolute;
	left: 30px;
	top: 30px;
	fill:#FFFFFF;
}

.BLKCNTpanelActionContinue{
	position: absolute;
	left: 20px;
	top: 22px;
}	

.BLKCNTicono{
	position:absolute;
	display:inline-block;
	width:36px;
	height:36px;
	background:#057099;
	border-radius:100%;
}

.BLKCNTicono svg{	
	position: absolute;
	fill: #FFFFFF;	
}

.BLKCNTicono.btnElementosPulsables{
	left:0px;
}

.BLKCNTicono.btnElementosPulsables > svg{
	width: 44.45%;
	left: 30%;
	top: 20%;
	height: 59.3%;
}

.BLKCNTicono.btnPodcast{
	left:45px;
}

.BLKCNTicono.btnPodcast > svg{
	width: 40%;
	height: 55%;
	left: 33%;
	top: 25%;
}

.BLKCNTicono.btnVideos{
	left:90px;
}

.BLKCNTicono.btnVideos > svg{
	width: 44.45%;
	left: 29%;
	top: 38%;
	height: 27.8%;
}

.BLKCNTicono.btnEjercicios{
	left:135px;
}

.BLKCNTicono.btnEjercicios > svg{
	width: 44.45%;
	height: 44.45%;
	left: 31%;
	top: 29%;
}

.BLKCNTcontadorElementos{
	position: absolute;
	border-radius: 100%;
	background: #eebb00;
	width: 20px;
	height: 20px;
	text-align: center;
	font-size: 12px;
	line-height: 15px;
	color: #FFFFFF;
	top: -5px;
	right: -3px;
	overflow:hidden;
}

.BLKCNTcontadorElementos span{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.BLKCNTcontadorElementos svg{
	width: 50%;
	height: 41.7%;
	left: 26%;
	top: 160%;
}


.BLKCNTicono.btnRecargar{
	position:absolute;
	left:25px;
	top:18px;
	width:0px;
	height:0px;
	cursor: pointer;
	overflow: hidden;
}

.BLKCNTicono.btnRecargar svg{
	width: 40%;
	left: 30%;
	top: 30%;
	height: 40%;
}

.BLKSEQUENCER{
display:none;
}



/*********************
 * sacatextuales.css
**********************/


.outTextuales{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 2;
	max-width: 964px;
}

.outTextuales textarea{
	width: 96%;
	min-height: 200px;
	resize: none;
	padding: 2%;
	border: 0px;
	background: #dedede;
}

.outTextuales .close{
	width: 40px;
	height: 40px;
	border-radius: 100%;
	position: absolute;
	right: 10px;
	top: -20px;
	background: #dedede;
	cursor: pointer;

}

.outTextuales .close svg{
	width: 20px;
	height: 20px;
	position: relative;
	left: 10px;
	top: 10px;
}


/********************
 * estructuraInterfaz.less
***************/


/**********************
 * ESTRUCTURA BLOQUES *
 **********************/

html, body{
	width: 100%;	
	margin: 0;
	padding: 0;
	background-color:@materialGrisClaro;
	overflow-x:hidden;
	
	@media (min-width:1024px) {
		height: 100%;
		background-color:@materialGrisBase;
	}
}

#Wrapper{	
	width:100%;
	height:100%;
	overflow:hidden;
	background:@materialGrisClaro;
	
	@media (min-width:1024px) {
		width:1024px;
		margin:auto;
		overflow:visible;
	 }
}

#PageWrapper{
	@media (min-width:1024px) {
		height:100%;
	}
}

#cuerpo{	
	@media (min-width:1024px) {
		height: 100%;
		width:1024px;		
		position:relative;
	 }
	 
}

.full-page{        
							  
   position:relative;
	@media (min-width:1024px) {
				   overflow:auto;
				   overflow-x:hidden;
				   width:964px;
				   float:left;
				   height: 100%;
				   position:relative;
				   
				   /* MIXINS */
				   .sombraBase;
	}

}


#capaEncabezado{
	background:@materialBase;
	
	position:fixed;
	top: 0px;
	width: 100%;
	height: 30px;
	z-index:2;
	
	@media (min-width:768px) {
		height:60px;		
	}
	
	@media (min-width:1024px) {
		width:964px;		
		position:absolute;
		left:0;
	}
}




.navegacion_div{
	z-index: 2;
	position:relative;
	
	@media (min-width:1024px) {
		position: absolute;
		top:0;
		right: 340px;
	}
	
	.botonInterfaz{
		position:absolute;		
	}
}



#capaContenidos{
	margin:50px 10px;
	position: static;
	
	@media (min-width:480px){
		margin:50px 10px 70px;
	}
	
	@media (min-width:768px) {
		margin:80px 20px 70px;
	}
	
	@media (min-width:1024px) {
		margin:80px 20px 20px;		
	}
}









/********
 * MENU *
 ********/
 
#navegacion{	
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background:#f9f9f9;
	display:none;
}

/***************************
 * NAVEGACION Y PAGINACION *
 ***************************/
.navegacion_div .inactivo{
	opacity: 0.5;
	filter: alpha(opacity=50);  
}	
#paginacion{
	position: absolute;
	width: 100%;
	top: 28%;
}

#paginacionTotal{
	text-align:center;
}

.navanterior{
	left: 40px;
	top: 0;
	
	@media (min-width:480px) {
		left: 60px;
	}
}

.navsiguiente{
	left:120px;
	top: 0;
	
	@media(min-width:360px){
		left:140px;
	}
	
	@media (min-width:480px) {
		left: 180px;
	}
	
	@media (min-width:520px) {
		left: 220px;
	}
}

.navanterior .pag, .navsiguiente .pag{
	width:40px;
	height:40px;
	cursor:pointer;
	
	@media (min-width:480px) {
		width:60px;
		height:60px;
	}
}

#capaIndicePaginas{    
    position: absolute;
	width: 40px;    
    height: 40px;
	left: 80px;
	
	@media (min-width:360px) {
		width: 60px;
	}
	
	@media (min-width:480px) {		
		width: 60px;
		height: 60px;
		left: 120px;
	}
	
	@media (min-width:520px) {	
		width: 100px;
	}
}

#marcaPaginas{
	fill:@materialSecundario;
	width: 18px;
	height: 14px;
	margin: 0 auto;
}

#marcaPaginas > svg{
	width:100%;
	height:100%;
}

#contenedor-progreso{
	display:none;
}

#paginacionTotal, #paginacionApartado{
	font-family:MetaNormal, Arial, Helvetica, sans-serif;
	color:rgb(255,255,255);
	text-align:center;
}

#paginacionTotal{
	font-size: 12px;
	margin: 6px 0 5px 0;
	
	@media (min-width:480px) {
		font-size:17px;
		margin:2px 0 5px 0;
	}
}

#paginacionApartado{
	display:none;
	@media (min-width:520px) {
		display:block;
		font-size:11px;
	}
}


/***********
 * TITULOS *
 ***********/
 
#titulosEncabezado{
	width:100%;	
	float:left;
	@media (min-width:768px) {
		max-width:580px;
	}
}
 
#tituloPrincipal{
	padding:0 10px;	
	font-size:18px;
	line-height:34px;
	height:34px;	
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	
	text-transform:uppercase;
	color:@materialBlanco;
	//background-color:@materialSecundario;
	display:none;
	
	@media (min-width:768px) {
		display:inline-block;
		max-width: 560px;
	}
	
	
}

#tituloPrincipal > svg, #tituloSecundario > svg{
	width: 11px;
	height: 10px;
	fill:@materialBlanco;
}

#tituloUnidad{
	font-size:14px;
	display:inline;
}

#tituloSecundario{
	font-size: 14px;
	height: 30px;
	line-height: 28px;
	padding: 0 10px;	
	color:@materialBlanco;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	
	@media (min-width:768px) {
		height:26px;
		line-height:22px;
		padding:0 0 0 20px;
	}
}



/****************
 * LOGO Y OTROS *
 ****************/
 
#logo{
	
	display:none;
	
	@media (min-width:768px) {
		width: 160px;
		height: 60px;
		display:block;
		float: left;
		background: @materialGrisClaro;
	}
}

#logo > img{
	height: 30px;	
	@media (min-width:768px) {
		height: 60px;
	}
}

#sombra01{
	position:absolute;
	width:120%;
	height:6px;
	top:0;
	left:-10%;
	background:transparent;
	
	-webkit-box-shadow: inset 0px 3px 3px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 3px 3px 0px rgba(0,0,0,0.5);
	box-shadow: inset 0px 3px 3px 0px rgba(0,0,0,0.5);
	
	@media (min-width:1024px) {
		display:none;
	}
}



/***********************
 * CONTENIDOS
 **********************/
 
 #capaContenidos{
	 color:@colorFuenteBase;
	 
	 .tituloEnPagina{
		 font-size:24px;		 
		 margin-bottom:20px;
	 }
	 
	 .capaTexto p, .capaTexto span{
		 font-size:16px;
		 line-height:19px;
		 text-align:justify;
		 margin-bottom:@margenVertical;
	 }
 }

.columnas{
	& > div{
		display:inline-block;
		width:100%;
		margin:0;
		
		@media (min-width:768px) {
			margin-right:2.16%;
			width:48.91%;
			
			&:nth-child(2n){
				margin-right:0;
			}
		}
		
		@media (min-width:1024px) {
			&:nth-child(2n){
				margin-right:2.16%;
			}
		}
		
		&:last-child{
			margin-right:0;
		}
		
	}
	
	.columna20{
		@media (min-width:1024px) {
			width:18%;
		}
	}
	
	.columna25{
		@media (min-width:1024px) {
			width:23%;
		}
	}
	
	.columna33{		
		@media (min-width:1024px) {
			width:31.88%;
		}
	}	
	
	.columna40{
		@media (min-width:1024px) {
			width:38.51%;
		}		
	}	
	
	.columna50{
		@media (min-width:1024px) {
			width:48.91%;
		}		
	}
	
	.columna60{
		@media (min-width:1024px) {
			width:59.11%;
		}		
	}
	
	.columna66{
		@media (min-width:1024px) {
			width:65.95%;
		}		
	}
	
	.columna70{
		@media (min-width:1024px) {
			width:69.95%;
		}		
	}
	
	.columna75{
		@media (min-width:1024px) {
			width:74.95%;
		}		
	}
	
	.columna100{
		width:100%;
	}
	
	& > div > div{
		margin-bottom:@margenVertical;
	}
}

.bloque{	
	margin: 0;
	position:relative;
	z-index:1;
}

.caja{
	position: relative;
	background-color:@materialBlanco;
	.radioBordeBase;
	.sombraCajasContenido;
	padding:20px;
	
	.tituloCaja{
		font-size:18px;
		color:@materialContenido;
		margin-bottom:@margenVertical;
	}
}

/********************
 * SUBTITULOS *
 **************/
.submenuDesplegado #barraSubtitulos{
	bottom:85px;
	
	@media(min-width:480px){
		bottom:125px;
	}
	
	@media(min-width:1024px){
		bottom:20px;
	}
}

#barraSubtitulos{
	position:fixed;
	bottom:50px;
	z-index:2;
	width: 96%;
	left: 2%;	
	text-align:center;
	display: none;
	z-index: 3;
	

	@media (min-width:480px) {	
		bottom:70px;
		width:90%;
		left:5%;
	}

	@media (min-width:1024px) {	
		bottom: 20px;
		width: 904px;
		margin: auto;
		left: auto;
		padding-left: 20px;
	}

	p{
		background:rgba(0,0,0,0.8);
		color:#FFFFFF;
		font-size: 16px;
		line-height: 25px;
		padding: 0 5px;
		display: inline;
	}
}



/*****************************
 * DEFINICIONES DE ELEMENTOS *
 *****************************/


.capaBoton{
	
	background-color:@materialContenido;
	color:@materialBlanco;	
	.radioBordeBase;
	position:relative;
	padding:10px 15px;
	display:inline-block;
	line-height: 22px;
	cursor:pointer;
	
	& > svg{
		vertical-align:bottom;
		fill:@materialBlanco;
	}
	
	&.ventanaModal > svg{
		width:25px;
		height:20px;
		margin:0 5px 0 0;
		
	}
}

.capaImagen{
	
	position: relative;
	
	img{
		width:100%;
	}
	
	.titulo, .encabezado{
		display:inline-block;
		padding:10px;
		margin-bottom:@margenVertical;
		text-transform:uppercase;
		color:@materialBlanco;

		background-color:@materialContenido;

		@media (min-width:480px){
			position: absolute;
			left: 5%;
			margin: 0;
			max-width: 84%;
			padding: 3%;		
		}
	}
	
	.titulo{		
		@media (min-width:480px){
			bottom: 5%;		
		}
	}
	
	.encabezado{		
		@media (min-width:480px){
			top: 5%;		
		}
	}
	
	.descripcion{		
		position: absolute;
		left: 5%;
		bottom: 5%;
		display: inline-block;
		padding: 1% 2%;		
		background: #d1d1d1;
		color: #545454;
		font-size: 16px;
		max-width: 86%;	
		margin: 0;
	}
	
	&.ampliable{
		
		.mascara{

			width:100%;

			@media (min-width:768px){
				height:200px;
				overflow: hidden;
			}

			& > img{
				position:relative;
				width:100%;
			}
		}

		

		@media (min-width:768px) {
			cursor:pointer;
		}
	}
	
}

.capaInfografia{
	
	cursor:pointer;
	position:relative;
	
	.mascara{
		
		width:100%;
		
		@media (min-width:768px){
			height:200px;
			overflow: hidden;
		}
		
		& > img{
			position:relative;
			width:100%;
		}
	}
	
	.titulo{
		display:inline-block;
		padding:10px;		
		margin-bottom:@margenVertical;
		text-transform:uppercase;
		color:@materialBlanco;
		
		background-color:@materialContenido;
		
		@media (min-width:768px){
			position:absolute;
			left:10px;
			bottom:10px;
			margin:0;
			z-index:1;		
		}
	}
}


.capaDestacado{
	
	.titulo{		
		
	    margin-bottom: 10px;
		
		.icono{
			display:inline-block;
			vertical-align:middle;
			width: 23px;
			height: 23px;
			border:3.5px solid @materialGrisBase;
			.radioCirculo;
			margin-right:5px;
		}
		
		svg{
			position: relative;
			width: 13px;
			height: 12px;
			left: 4.5px;
			top: 2.5px;
			fill:@materialContenido;
		}
		
		.titulo {
			font-size:18px;
			color:@materialContenido;
			font-family:@fuenteNegrita;
			line-height:20px;
			position: relative;
			top: 2px;
		}
		
	}
	
	.descripcion{
		font-size:16px;
		line-height:20px;
		text-align: justify;
	}
	
	&.ejemplo{
		
		.titulo{		
			
			margin-bottom: 10px;
			
			.titulo{
				margin-bottom: 10px;
				display: block;
				position: static;
				text-align: center;
			}
			
			.icono{
				
				display: block;
				width: 35px;
				height: 35px;
				border: 4px solid #cdcdcd;
				margin: 0 auto 10px;
				
				svg{
					width: 17px;
					height: 20px;
					left: 8px;
					top: 7px;					
				}
			}
		}
		
		.descripcion{
			font-size: 16px;
			line-height: 19px;
			margin-bottom: 10px;
			text-align: justify;
		}
	}
}

.capaPodcast{
	
	position:relative;
	
	&.insignia .titulo{
		margin-right: 18px;
	}
	
	.botonPlay{
		display:table-cell;
		width: 60px;
		vertical-align: middle;
		cursor:pointer;
		
		span{
			cursor:pointer;
			display:block;
			width: 60px;
			height: 60px;
			position:relative;
			
			.radioCirculo;
			background-color:@materialContenido;
			
			svg{
				position: absolute;
				fill:@materialBlanco;
			}
			
			svg.pause{
				width: 18px;
				height: 30px;
				left: 21px;
				top: 15px;
				display:none;
			}
			
			svg.play{
				width: 20px;
				height: 21px;
				left:23px;
				top:20px;
			}
		}		
		
	}
	
	&.reproduciendo .botonPlay span{
		svg.pause{
			display:block;
		}
		
		svg.play{
			display:none;
		}
	}
	
	.contenidoPodcast{
		display:table-cell;
		padding-left: 15px;
		width: 100%;
	}
	
	.titulo{
		
		margin-bottom:6px;
		
		.icono{
			width:11px;
			height:14px;
			display: inline-block;
			margin-right: 3px;
			line-height: 14px;			
		}
		
		.textoTitulo{
			font-size:16px;
			color:@materialTerciario;
			font-family:@fuenteNegrita;
		}
	}
	
	.descripcion{
		font-size:14px;
		margin-bottom: 10px;
	}
	
	.capaProgreso{
		display:table;
		width:100%;
		
		.barraProgreso{
			display:table-cell;
			width:100%;
			position:relative;
			
			.fondoBarra{
				height:3px;
				width:100%;
				background-color:@materialGrisOscuro;
				position:absolute;
				top:7px;
				left:0;
			}
			
			.progreso{
				height:3px;
				width:0;
				background-color:@materialActivo;
				position:absolute;
				top:7px;
				left:0;
			}
			
			.tirador{
				.radioCirculo;
				background-color:@materialContenido;			
				width: 11px;
				height: 11px;
				position:absolute;
				top:3px;
				left:0;
				margin-left:-6px;
				
				span.bolaActivo{
					.radioCirculo;
					opacity:0.3;
					width: 23px;
					height: 23px;
					position:absolute;
					left:-6px;
					top:-6px;
					background-color:@materialContenido;
					display:none;				
				}
				
				span.tiempoActual{
					position: absolute;
					top: 9px;
					left: -30px;
					font-size: 8px;
					font-family:@fuenteSecundaria;
					display:none;
				}
			}
		}
	}
	
	.tiempoTotal{
		display:table-cell;
		width:50px;
		padding-left:8px;
		font-family:@fuenteNegrita;
		font-size:12px;
	}
	
	
	.capaTranscripcion{
		margin-top: 10px;
		position: relative;
	}
	
	.botonTranscripcion{
		height: 20px;
		border-radius: 4px;
		position: absolute;
		bottom: -30px;
		left: 37%;
		cursor: pointer;
		background: #057099;
		color: #FFFFFF;
		line-height: 18px;
		padding: 0 10px 0 5px;
		font-size: 12px;
	}
	
	.botonTranscripcion svg{
		fill:#FFFFFF;
		width: 20px;
		height: 20px;
	}
	
	.botonTranscripcion.desplegado svg{
		transform: rotate(180deg);
	}
	
	.contenidoTranscripcion{
		display: none;
		padding: 0 0 5px 0;
		font-size: 14px;
		text-align: justify;
	}
}


/*************
 * INSIGNIAS *
 *************/
 
.capaInsignia{
	
	width:15px;
	height:32px;
	position:absolute;
	top: -8px;
	right: 15px;
	
	& > svg{
		fill:@materialElementoInactivo;
	}
	

}

.completado .capaInsignia > svg{
		fill:@materialElementoVisto;
}



/*******************
 * LINEA DE TIEMPO *
 *******************/

.lineaDeTiempo{
	
	position:relative;
	padding:40px 15px 15px 15px;
	
	.tituloCaja{
		background-color:@materialBase;
		position:absolute;
		right:0;
		top:0;
		height:20px;
		color:@materialBlanco;
		padding:6px 10px;
		
		border-radius:0 3px 0 0px;
		
		.icono svg{
			fill:@materialBlanco;
			width:23px;
			height:20px;
			display:inline-block;
			margin-right:5px;
		}
		
		p{
			font-family:@fuenteNegrita;
			display:inline-block;
		}
	}
	
	.textos{
		
		margin-bottom:25px;
	
		.titulo{
			font-size:24px;
			margin-bottom:10px;
		}
		
		.descripcion{
			font-size:14px;
			line-height:17px;
		}
	}
	
	.cajaLineaTiempo{
		
		position:relative;				
		
		.lineaTemporal{			
			position: absolute;
			width: 90px;
			height:100%;		
			
			@media (min-width:768px){ 
				height: 90px;
				width: 100%;
				top: 85px;
			}
			
			.lineaFondo{
				width: 2px;
				height: 95%;
				left: 30px;
				position: relative;
				top: 5%;
				
				background-color:@materialGrisOscuro;
				
				@media (min-width:768px){
					width:auto;
					height:2px;
					margin:0 10px 0 60px;
					left:auto;
					top: 44px;					
				}
			}
			
			.circuloIconoInicio{
				width:60px;
				height:60px;
				background-color:@overlayBase;
				position:absolute;
				top:0;
				
				.radioCirculo;
				
				@media (min-width:768px){
					width:90px;
					height:90px;
				}
				
				.circuloInterior{
					width: 40px;
					height: 40px;
					background-color: @materialBlanco;
					
					position:absolute;
					left:10px;
					top:10px;
					
					.radioCirculo;
					
					@media (min-width:768px){
						width:70px;
						height:70px;
					}
				
					.icono{
						
						display: table-cell;
						width: 40px;
						height: 40px;
						vertical-align: middle;
						text-align: center;
						
						@media (min-width:768px){
							width:70px;
							height:70px;
						}
						
						svg{
							width:22px;
							height:20px;
							fill:@materialContenido;
							
							@media (min-width:768px){
								width:35px;
								height:31px;
							}
						}
					}
				}
			}
			
			.circuloFin{
				width:12px;
				height:12px;
				background-color:@materialGrisOscuro;				
			    position: absolute;
				left: 25px;
				bottom: -1px;				
				
				.radioCirculo;
				
				@media (min-width:768px){
					left: auto;
					bottom: auto;	
					right: 0;
					top: 41px;
				}
			}
			
		}
		
		
		.pasosLinea{
			
			position: relative;
			left: 0;
			overflow: hidden;			
			height:auto;
			top:50px;
			margin-bottom:70px;
			
			@media (min-width:768px){
				margin-left: 80px;
				height:auto;
				top:auto;
				margin-bottom:@margenVertical;
			}
			
			.contenedorPasos{
				position:relative;								
				
				@media (min-width:768px){
					height: 270px;
					display: inline-block;
					white-space:nowrap;				
				}
			}
			
			.paso{
				
				position:relative;				
				left: 15px;
				margin-bottom: 30px;		
				
				@media (min-width:768px){
					display:inline-block;
					width:220px;
					height: 145px;					
					margin:0 30px 0 0;
					white-space:normal;
					left:auto;
				}
				
				.linea{
					width: 94%;
					height: 1px;					
					
					position: absolute;					
					left: 15px;
					top:15px;
					
					background-image:url('contenidos/media/dashHorizontal.png');
					background-repeat:repeat-x;
					background-attachment:scroll;
					background-position:0 0;
					
					@media (min-width:768px){
						top:0;
						width: 1px;
						height: 122px;
						left:14px;
						
						background-image:url('contenidos/media/dashVertical.png');
						background-repeat:repeat-y;
					}
				}
				
				.bullet{
					position:absolute;
					top:0;
					left:0;
					width:30px;
					height:30px;
					background-color:@materialContenido;
					.radioCirculo;
					
					@media (min-width:768px){
						top:auto;
						bottom:0;
					}
					
					.circuloInterior{
						width:20px;
						height:20px;
						position:absolute;
						left:5px;
						top:5px;
						background-color:@materialBlanco;
						.radioCirculo;
					}
					
					.anotacion{
						position: absolute;
						left: 30px;
						top: -10px;
						
						font-size:14px;
						font-family:@fuenteNegrita;						
						color:@materialContenido;
						
						@media (min-width:768px){
							top: 22px;
						}
					}
				}
				
				.bloqueIzquierda{
					
					display:inline-block;
					width:20%;
					margin: 30px 10px 0 30px;
					text-align: center;
					
					@media (min-width:480px){
						width:25%;
					}
					
					@media (min-width:768px){
						width: 120px;
						left: -120px;
						text-align: right;
						position: absolute;
						top: 25px;
						margin:0;
					}
					
					img{
						max-width:100%;
					}
					
				}
				
				.bloqueDerecha{
					
					display:inline-block;
					width: 60%;
					margin-top: 30px;
					
					@media (min-width:480px){
						width: 64%;
					}
					
					@media (min-width:768px){
						width: 180px;
						position:absolute;
						left: 30px;
						margin-top: 0;
					}
					
					.titulo{
						font-size:14px;
						text-transform:uppercase;
						font-family:@fuenteNegrita;						
						color:@materialContenido;
						margin-bottom:5px;
					}
					
					.descripcion{
						font-size:14px;
						line-height:17px;
					}
				}
				
				&.par{
					
					@media (min-width:768px){
						top:115px;
										
						.linea{
							top:25px;
							left:15px;
						}
						
						.bullet{
							top:0;
							
							.anotacion{
								top:-16px
							}
						}
					
						.bloqueIzquierda,.bloqueDerecha{
							top:auto;
							bottom:0;
						}
					}
				}
			}
		}
	}
	
	.bulletsPasos{
		text-align:center;
		
		.bullet{
			
			width:20px;
			height:20px;
			display:inline-block;
			margin-right:10px;
			margin-top:20px;
			
			background-color:@materialGrisOscuro;
			.radioCirculo;
			position:relative;
			
			
			.circuloInterior{
				width:10px;
				height:10px;
				margin:5px 0 0 5px;
				
				background-color:@materialBlanco;
				.radioCirculo;
			}
			
			.anotacion{
				position: absolute;
				left: -10px;
				top: -15px;
				font-size: 12px;
				width: 40px;
				text-align: center;
				
				font-family:@fuenteNegrita;						
				color:@materialGrisOscuro;
			}
			
			.icono{
				display:none;
				position: relative;
				line-height:0;
			}
		}
		
		.bullet.activo{
			width:30px;
			height:30px;
			background-color:@materialContenido;
			margin-top:15px;
			
			.circuloInterior{
				width:20px;
				height:20px;
				margin:5px 0 0 5px;
			}
			
			.anotacion{
				top:-18px;
				width: 50px;
				font-size:14px;
				color:@materialContenido;
			}
			
			.icono{
				
				display: block;
				position: absolute;
				top: 9px;
				left: 6px;
				width: 17px;
				height: 14px;

				svg{
					fill:@materialContenido;
				}
				
			}
		}
		
		.bullet.visto{
			
			background-color:@materialElementoVisto;
			
			.circuloInterior{
				display:none;
			}
			
			.icono{
				
				display: block;
				position: absolute;
				top: 5px;
				left: 4px;
				width: 12px;
				height: 10px;					
				
				svg{
					
					fill:@materialBlanco;
					opacity:0.7;
				}
				
			}
			
			.anotacion{
				color:@materialElementoVisto;
			}
		}
		
		.bullet:last-child{
			margin-right:0;
		}
	}
}

/******************************
 * CONTENIDOS - SACAR DE AQUI *
 ******************************/

.BLKSEQUENCER{
	display:none;
}


/***********************
 * PERSONAJE CONDUCTOR *
************************/


.contenedorVideoPersonaje{
	position:fixed;
	left:-5000px;
}

.overlayPersonajeConductor{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	
	@media (min-width:1024px){
		width: 964px;
	}
}


.personajeConductor{
	position:fixed;
	bottom:0;	
	width: auto;
	max-width: 964px;
	z-index:2;
	overflow: hidden;
	
	@media (min-width:480px){
		&.centro{
			left:35%;
		}
		
		&.derecha{
			left:auto;
			right:20px;
		}
	}
	
	@media (min-width:1024px){
		&.derecha{right:auto;}
	}
		
	img{
		width:100%;
	}
}

.capaCita{
	
	.titulo{
		margin-bottom:10px;
	}

	.titulo .imagenCita{
		position: relative;
		margin: auto;
		width: 60px;
	}

	.titulo .imagenCita .fotoCita{
		border-radius: 100%;
		width: 60px;
		height:60px;
		overflow: hidden;
		display: inline-block;
		position: relative;
		left: 0;
		top: 0;
		margin-bottom:10px;
	}
	
	.titulo .imagenCita .fotoCita > img{
		width:100%;
	}
	
	.titulo .imagenCita .icono{
		position: absolute;
		vertical-align: middle;
		width: 23px;
		height: 23px;
		box-shadow: 0 0 0 3.5px rgba(0,0,0,0.1);
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		margin-right: 5px;
		top: -5%;
		left: 72%;
		background: #FFFFFF;
	}
	
	.titulo .imagenCita .icono svg{
		width: 65%;
		left: 17%;
		top: 13%;
		fill: #057099;
		position: relative;
	}
	
	.titulo .tituloCita{
		display: block;
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		color: #057099;
	}
	
	.textoCita{
		font-size:14px;
		color:#515151;
		font-style:italic;
		text-align:center;
		line-height: 125%;
	}
}

/*********
 * VIDEO *
**********/

.capaVideo{
	width: 100%;
	
	video{
		width: 100%;
	}
}


/**************
 * SVG COLORS *
 **************/

svg .transparent{
	fill:none;
}

svg .halftransparent{
	opacity: 0.5;
}

svg .green{
	fill:rgb(76,175,80)
}

svg .red{
	fill:rgb(255,0,0)
}

svg .blue{
	fill:rgb(5,112,153)
}

svg .white{
	fill:rgb(255,255,255)
}

svg .amarillo{
	fill:rgb(238,187,0);
}

svg .grisBase{
	fill:rgb(205,205,205);
}

svg .grisOscuro{
	fill:rgb(49,49,49);
}



/*******************
 * CARGADOR ITINERARIO GRAFICO
 **************************/