* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
 
.contenedor_principal {
	background:#ccc;
	width:90%;
	max-width:1000px;
	margin:auto;
 
	/* Flexbox */
	display:flex;
	flex-flow:row wrap; /* igual a flex-direction:row;
							       flex-wrap:wrap;  */
}
 
body {
	background:#e9e9e9;
}
 
header {
	background: gray;  /* #1a1aff #2c3e50; */
	border-radius: 0.5em;   /* nuevo  */
	width:100%;
	padding:20px;
 
	/* Flexbox */
	display: flex;
	justify-content:space-between;
	align-items:center;
 
	flex-direction:row;
	flex-wrap:wrap; /* si no cabe , lo coloca abajo  */
}
 
header .logo {
	color:black;  /* #fff white  */
	font-size: 40px;   /*  30px   */
	text-shadow: 5px 5px 10px rgba(255,255,255,1);   /* sombra  1 */   */
}
 
header .logo img {
	width:100px;
	vertical-align: top;
}
 
header .logo a {
	color:#fff;
	text-decoration: none;
	line-height:50px;
}
 
header nav {
	width:50%;
	/* Flexbox */
 
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
 
header nav a {
	background:#002699; 			/*#c0392b;*/
	/* border-radius: 0.5em;   /* nuevo  */
	color:#fff;
	text-align: center;
	text-decoration: none;
	padding:10px;
 
	/* Flexbox */
	flex-grow:1;
}
 
header nav a:hover {
	background: blue;  /*#e74c3c; */
}
 
.main {
	background:#fff;
	padding:20px;
 
	flex:1 1 70%;
	/*flex:1;*/
}
 
.main article {
	margin-bottom: 20px;
	padding-bottom:20px;
	border-bottom:1px solid #000;
}
 
.main article:nth-last-child(1){
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom:none;
}

p {
	text-align: justify;
}
 
aside {
	background: #595959; /*               #e67e22; naranja*/
	padding:20px;
	/*FLEX*/
	flex:1 1 30%;
	/*flex:0 0 300px;*/
 
	display: flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:flex-start;
}
 
aside .widget {
	background:#ffff99; /* #d35400; naranja  */
	height:150px;
	margin:10px;
	padding: 5px;    /*     Nuevo*/

}

aside .widget .imagen {
	border-radius: 0.5em;
}
 
footer {

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */

	width: 100%;
	padding:20px;
	 font-family: 'Tangerine', serif;
        font-size: 38px;
}


 */
@media screen and (max-width: 800px) {
	.contenedor {
		flex-direction:column;
	}
 
	header {
		flex-direction:column;
		padding:0;
	}
 
	header .logo {
		margin:20px 0;
	}
 
	header nav {
		width: 100%;
	}
 
	aside {
		flex-direction:row;
		flex:0;
	}
 
	aside .widget {
		flex-grow:1;
	}
}
 
@media screen and (max-width: 600px) {
	aside {
		flex-direction:column;
	}
 
	footer {
		justify-content:space-around;
	}
}


	a {
	display:block;
	padding: 0.25em;
	text-align:center;
	/*margin-bottom:0.2em;*/
	text-decoration:none;
	color:#000000;

}

	.alumno {
	display:block;
	padding: 0.25em;
	text-align:center;
	text-decoration:none;
	color:#00cc00;

}