*{
				margin: 0px;
				font-family: "Open Sans", sans-serif;
			}
		    a{text-decoration: none;}

			header{
				width: 100%;
				height: 120px;
				background-color: orange;
			}
			nav{ 
				z-index: 10;
			 }

			section{
				width: 70%;
				background-color: #583C84;
				float: left;
			}
			aside{
				width: 30%;
				background-color: #9163DC;
				float: right;
			}
			footer{
				width: 100%;
				height: 160px;
				background-color: black;
				clear: both;
			}
			h1{
				text-align: center;
				color: white;
				line-height: 120px;
			}
			h2{
				text-align: center;
				color: white;
				padding: 20px;
				margin: 10px;
			}
			h3{
				text-align: center;
				color: white;
				line-height: 160px;

			}
			p{
				text-align: justify;
				color: #222;
				padding: 30px;
			}
			img{
				width: 60%;
				display: block;
				margin-left: auto;
				margin-right: auto;
				border-radius: 8px;
			}

			.ultima_imagen{
				margin-bottom: 40px;
			}


			#contenedor{
					overflow: hidden;
					z-index: 0;
			}

			section, aside{
					padding-bottom: 100%;
					margin-bottom:-100%;
			}
			#imagen_resaltada{
				border:5px solid #fff;
			}

			.frase{
				font-size: 16px;
				font-weight: lighter;
				color: #fff;
			}

			/*-----------------estilos de TABLAS Servicios----------*/
			table{
				width: 70%;
				height: 300px;
				margin: auto;
				border-collapse: collapse;
			}
			td, th{
				height: 30px;
				border: 1px solid #9163DC;
				font-size: 12px;
				text-align: left;
				padding: 12px;
			}
			th{background-color: #56375F;
			    font-size: 14px;
			    font-weight: bold;
			    color: white;
				}

			tr:nth-child(even) {background-color: #DA8BF0;}
			tr:nth-child(odd) {background-color: #BF7AD3;}
			tr:hover {background-color: #F0CF13;}

			/*-----------------estilos de FORMULARIO de Contacto----------*/

			input[type=text], input[type=email], select {
			  width: 100%;
			  padding: 12px 20px;
			  margin: 8px 0;
			  display: inline-block;
			  border: 1px solid #ccc;
			  border-radius: 4px;
			  box-sizing: border-box;
			}

			input[type=submit] {
			  width: 100%;
			  background-color: #DA8BF0;
			  color: white;
			  padding: 14px 20px;
			  margin: 8px 0;
			  border: none;
			  border-radius: 4px;
			  cursor: pointer;
			}

			input[type=submit]:hover {
			  background-color: #BF7AD3;
			}

			#contenedor_form {
			  width: 70%;
			  border-radius: 5px;
			  background-color: #f2f2f2;
			  padding: 20px;
			  margin: auto;
			}

			/*-----------------estilos de MENÚ de navegación----------*/

			ul {
			  list-style-type: none;
			  margin: 0;
			  padding: 0;
			  overflow: hidden;
			  background-color: #333;
			}

			li {
			  float: left;
			}

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

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

			.active {
			  background-color: #DA8BF0;
			}


			/*--------- HERO IMAGE - portada y header ----------*/
			.hero-image {
			      background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("laptop_x.jpg");
			      height: 100%;
			      background-position: center;
			      background-repeat: no-repeat;
			      background-size: cover;
			      position: relative;
			    }

			/*--------- MENU DE NAVEGACIÓN RESPONSIVE -------*/
			.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: #BF7AD3;
			  color: black;
			}

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

			.topnav .icon {
			  display: none;
			}

			@media screen and (max-width: 600px) {
			  .topnav a:not(.active) {display: none;}
			  .topnav a.icon {
			    float: right;
			    display: block;
			  }
			}

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



			/*--------- REGLAS DE MEDIOS - RESPONSIVE DESIGN ------*/


			@media only screen and (max-width: 900px) {
			  section, aside {
			    width: 100%;
			  }
			}

			@media only screen and (max-width: 620px) {
			  aside {
			    display: none;
			  }
			}