@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

/* Diseño móvil: 480 px e inferior. */

.delimitador{
	margin: auto;	/* Centramos el vídeo */
	max-width: 560px;
}
/* El contenedor con el padding-top crea el tamaño del vídeo */
.contenedor{
	height:0px;
	width:100%;
	padding-top:56.25%; /* Relación: 16/9 = 56.25% */
	position:relative;
}
/* El iframe se adapta al tamaño del contenedor */
.contenedor iframe{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1%;
	padding-right: 1%;
	background-color: #F9ddb0;

}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top:1%;
	

}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #1b4f97;
	margin-top: 1%;
	vertical-align: middle;
}
#l10 {
	clear: none;
	float: Left;
	margin-left: 0%;
	width: 100%;
	display: block;
	alignment-baseline: central;

}
#l12 {
	clear: none;
	float: right;
	width: 100%;
	display: block;
	alignment-baseline: central;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	vertical-align: middle;
	margin: auto;
	height: auto;

	
}
#LayoutDiv3 {
	clear: both;
	float: left;
	margin-left: 0;
	margin-top: 1%;
	width: 100%;
	display: block;
	background-color: #codf16;
	
}

#lvideo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;


}
#laprende{
	clear: none;
	float: right;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #cec905;
}

#LayoutDiv4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #F93;
		margin-top:1%;

}
#LayoutDiv5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #e69817;
		margin-top:1%;

}
#LayoutDiv6 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #8d1096;
		margin-top:1%;

}


/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */

@media only screen and (min-width: 481px) {
	
.contenedor{
	height:0px;
	width:49%;
	padding-top:28.12%; /* Relación: 16/9 = 56.25% */
	position:relative;
}
	
.gridContainer {
	width: 90.675%;
	padding-left: 1%;
	padding-right: 1%;
	background-color: #FFC;

}


#l10 {
	clear: none;
	float: Left;
	margin-left: 0;
	width: 59%;
	display: block;
	
}

#l12 {
	clear: none;
	float: Right;
	margin-left: 1%;
	width: 39%;
	display: block;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}


#LayoutDiv3 {
	clear: none;
	float: right;
	margin-left:0;
	width: 48%;
	display: block;
	background-color: #cec905;

}

#lvideo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48%;
	display: block;


}
#laprende{
	clear: none;
	float: right;
	margin-left: 1%;
	width: 48%;
	display: block;
	background-color: #cec905;
}


#LayoutDiv4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48%;
	display: block;
}
#LayoutDiv5 {
	clear: none;
	float: right;
	margin-left: 1%;
	width: 48%;
	display: block;
}
#LayoutDiv6 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

}