body, html{
			height: 100%;
			width: 100%;
			margin: 0%;
			padding: 0%; /* para ocultar el scroll bar de los navegadores web */ 
			/* como no todos tienen el mismo zoom inicial debo hacerlo para evitar que salga el scroll bar en algunos y en otros no*/
			background-color: indigo; 
		}

		#header1 {
			display: block;
			min-height: 10%;
			background-image: url(dreamlike-flowers.jpg);
			color: white;
			font-family: 'Lobster Two', cursive;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
		}
		#header1 p {
			margin: auto;
			text-align: center;
			font-size: 1.5em;
			font-weight: bolder;
		}

		.contenido{
			height: 2450px;
			padding-top: 1%;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row; /* es un shorthand de flex-direction y flex-wrap */
		}

		/* caracteristicas generales de los elementos del contenedor */

		/* NAV */
		.contenido nav {
			order: 1;
			flex: 1 6 20%;
			background-image: url(elegant-grey-illumination.jpg);
			background-size: cover;
			color: white;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
			border-radius: 1em;
			margin-right: 1%;
		}
		.contenido nav p {
			margin: auto;
			font-size: 1.5em;
		}

		/* SECTION */
		/* como contiene otros elementos html dentro de él pasa de ser un elemento mas del contenedor principal */
		/* ha convertirse en un contenedor secundario, por lo cual se debe declarar con un display propio: */
		/* display: flex y flow: column para estructurar los elementos internos del section */
		.contenido section {
			order: 2;
			flex: 3 1 60%;
			background-image: url(dreamlike-flowers.jpg);
			background-size: cover;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: column; /* se declara column para alinear los elementos internos de forma vertical*/; /* 0% margen superior e inferior, 1% margen izquierdo y derecho */
			border-radius: 3% 3%;
		}

		/* ASIDE */
		.contenido aside {
			order: 3;
			flex: 1 6 20%;
			border-radius: 1em;
			margin-left: 1%;
			text-align: center;
			color: white;
			font-weight: bolder;
			font-size: 1em%;
			background-image: url(antique-scroll.jpg);
			background-size: cover;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: column;
			padding: 1%;
		}
		.contenido aside img {
			margin: 3% 0% 8% 5%;

		}


		/**********************************/
		/* Elementos internos del section */
		/**********************************/

		/* HEADER SECTION */
		.presentacion {
			order: 1;
			flex: 1 15 10%;
			margin-top: 2%; 
			margin-bottom: 1%; 
			background-color:rgba(250,250,250,.5);
			border-radius: 12.5%;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
		}
		.presentacion img {
			order: 1;
			flex: 1 6 10%;
			margin-right: 10%%;
			border-radius: 5%;


		}
		.presentacion p {
			order 2;
			flex: 6 1 10%;
			font-family: 'Lora', serif;
			font-size: 1.5em;
			margin: 2%;

		}


		/* ARTICLE SECTION */
		.curriculum{
			order: 2;
			flex: 3 15 20%;
			background-color:rgba(250,250,250,.5); 
			border-radius: 12.5%;
		}
		.curriculum p {
			margin-left: 5%;
			font-family: 'Lora', serif;
			text-align: justify;
			font-size: 100%;

		}

		/* FOOTER SECTION */
		.RecursosFavoritos{
			order: 3;
			flex: 15 1 75%;
			background-color:rgba(250,250,250,.5);
			margin-top: 1%; 
			margin-bottom: 1%;
			border-radius: 5%;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: column;
		}

		.RecursosFavoritos h3 {
			display: block;
			font-family: 'Roboto Condensed', sans-serif;
			font-size: 1.5em;
			font-weight: bolder;
			text-align: center;
			margin: 4%;
			border: 3px solid black;
			border-radius: 0.5em;
		}

		.RecursosFavoritos .recursos {
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: column;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
		}
		.RecursosFavoritos .recursos .horizontal {
			border: 0px;
			background-color: transparent;
			max-width: 99.5%;
			max-height: 560px;
			margin: 1% 0.5%;
		}
		.RecursosFavoritos .recursos .vertical {
			padding: 1%;
			border: 1% solid indigo;
			background-color: white;
			min-height: 30%;
			min-width: 90%;
			margin: 3%
		}
		iframe {
			margin: 1%;
		}

		.footerprincipal	{
			display: block;
			min-height: 10%;
			background-image: url(circles-on-wave-line.jpg);
			background-position: 25% 40%;
			background-size: cover;
			color: white;
			font-family: 'Lobster Two', cursive;
			display: -webkit-box; /* display para safari y navegadores android de versiones antiguas */
			display: -moz-box; /* display para mosilla firefox de versiones antiguas */  
			display: -webkit-flex; /* display para google chrome de versiones antiguas */
			display: -ms-flexbox; /* display para internet explorer de versions antiguas */
			display: flex; /* display para nuevas versiones de navegadores que soportan el estandar oficial de flex en CSS3 */
			flex-flow: row;
			margin: 0.5%;
			border-radius: 0.5em;
		}
		.footerprincipal p 	{
			margin: auto;
			font-size: 1em;
			font-weight: bolder;
		}