html, body{
			margin:0;
			box-sizing: border-box;
			height: 100%;
			}
			

		body{
			background-color: #999;
			font-family: 'Montserrat', sans-serif;
			}

		header {
			width:100%;
			height: 90px;
			background-color: #FF0A34;
			}

		nav {
			width:100%;
			background-color: #666;
			}

		section {
			width: 70%;
			float: left;
			background-color: #988CFF;
			}

		aside{
			width:30%;
			background-color: #797CFF;
			float: right;
			}

		footer{
			width:100%;
			height: 70px;
			background-color: #FF0A34;
			clear: both;
			}
		
		h1, h2, h3{ 
				font-family: 'Courgette', cursive;
				margin: 0;
				padding: 0;
				color: white;
				text-align: center;
			}
		h1 {line-height:90px;}
		h2 {line-height:70px; color: purple; font-size: 34px;}
		h3 {line-height:70px;}

		p {
			padding: 10px 20px;
			font-size: 12px;
			}

		img {
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 70%;
			border-radius: 5px;
		}

		/*=========================== seccion y aside de igual alto ================*/
		#contenedor {
			overflow:hidden;		
		}

		section, aside {
		    padding-bottom: 100%;
 			margin-bottom: -100%;
		}

		/*========================estilos del menú de navegación ===================*/


		ul {
		  list-style-type: none;
		  margin: 0;
		  padding: 0;
		  overflow: hidden;
		}

		li {
		  float: left;
		}

		li a {
		  display: block;
		  color: white;
		  font-size: 12px;
		  text-align: center;
		  padding: 14px 12px;
		  text-decoration: none;
		}

		li a:hover:not(.active) {
		  background-color: #111;
		}

		.active {
		  background-color: #6CE353;
		}

		/*========================estilos del cabezal. imagen de fondo con link a la portada ===================*/

			.hero-image {
			  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("fondo1.jpeg");
			  height: 90px;
			  background-position: center;
			  background-repeat: no-repeat;
			  background-size: cover;
			  position: relative;
			}

			.hero-text {
			  text-align: center;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  color: white;
			}

			.hero-text button {
			  border: none;
			  outline: 0;
			  display: inline-block;
			  padding: 10px 25px;
			  color: black;
			  background-color: #ddd;
			  text-align: center;
			  cursor: pointer;
			}

			.hero-text button:hover {
			  background-color: #555;
			  color: white;
			}

			/* unvisited link */
			a:link {
			  	 text-decoration: none;

			}

			/* visited link */
			a:visited {
			  	text-decoration: none;

			}

			/* mouse over link */
			a:hover {
			  	text-decoration: none;
			}

			/* selected link */
			a:active {
			  	 text-decoration: none;

			}
		
		/*======================== video visualización ===================*/
		.embed-container {
		    position: relative;
		    padding-bottom: 56.25%;
		    height: 0;
		    overflow: hidden;
		    width: 90%;
		    margin: auto;
		    margin-bottom: 20px;
		}
		.embed-container iframe , .embed-container object, .embed-container embed  {
		    position: absolute;
		    top:0;
		    left: 0;
		    width: 100%;
		    height: 100%;

		}

	/*-----------------menu responsive, con botón hamburguesa------*/
		.topnav {
		  overflow: hidden;
		  background-color: #333;
		}

		.topnav a {
		  float: left;
		  display: block;
		  color: #f2f2f2;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		  font-size: 17px;
		}

		.topnav a:hover {
		  background-color: #ddd;
		  color: black;
		}

		.topnav a.active {
		  background-color: #4CAF50;
		  color: white;
		}

		.topnav .icon {
		  display: none;
		}

/*========================reglas de medios - responsive design ===================*/

		@media screen and (max-width: 992px) {

			section{
			  	width: 100%;
			}
			aside{
			  	width: 100%;
			}

		}

		@media screen and (max-width: 600px) {
			
			aside{display: none;}
			.topnav a:not(:first-child) {display: none;}
		    .topnav a.icon {
		      float: right;
		      display: block;
		    }
			.topnav.responsive {position: relative;}
		  	.topnav.responsive .icon {
		  	  position: absolute;
		   	 right: 0;
		   	 top: 0;
		  	}
		  	.topnav.responsive a {
		  	  float: none;
		   	  display: block;
		  	  text-align: left;
		  }
		}