@charset "utf-8";
/* CSS Document */
* {margin: 0px;}
body {background-color: #C5BF07}
/*estilo a mi capa header con parallax*/
header {background-image: url(" ../img/burger-8128861_640.png"); background-position: center; background-size: cover;height: 500px;/*con las siguientes propiedades añado parallax a mi fondo del header >>*/background-attachment: fixed; background-repeat: no-repeat;text-align: center;}
/*con la media lo que hago es reducir la altura del header en versiones de pantalla más pequeña, de hasta 800px*/
@media (max-width:800px) {
	header {height: 250px;background-image: none; background-color: #784c0c;}
}
/*.fondo{background-color: rgba(0,0,0,0.3);height: 500px;}*/
nav {position: fixed;background-color: #fff;width: 100%;height: 8%;box-shadow: 4px 5px 5px;}
nav ul {float: right; list-style: none;padding: 20px 20px 0px 20px;}
nav ul li {display: inline;padding: 15px;text-align: center; border-radius: 10px;}
nav ul li a {color: #000;text-decoration: none;text-transform: uppercase;}
nav ul li:hover {background-color: #C5BF07;}
nav ul li a:hover {color: #fff;}
h1 {font-family: verdana; padding-top: 10%;color: #000;font-size: 6rem;text-shadow: 5px 5px 5px #C5BF07;}
button {padding: 15px; font-size: 2rem;background-color: #C5BF07;color: #000;border-radius: 10px;margin-top: 50px;border-color: #000;}
button:hover {background-color: #fff; color: #512400; border-color: #D3D3D3;}
/*fin de estilo contenido header*/
/*ahora doy estilo al contenido1 */
.content1 {padding: 4% 0px;}
h2, h3 {font-family: verdana; padding: 60px; color: #000; font-size: 3rem;padding-bottom: 60px; text-shadow: 3px 3px 3px #fff;text-align: center;}
.c1 {width: 60%;margin: 0 auto;}
.imagen1 {padding: 3% 0px;}
.imagen1 p {font-family: Arial; float: right; display: inline-block; width: 45%; color: #000;font-size: 2rem; text-align: justify;}
.imagen1 img {width: 45%;border-radius: 15px;box-shadow: 5px 5px 10px #fff;}
/*fin de estilos para mi capa content2*/

/*comienzo de mi estilo contenido2*/
.content2 {width: 90%;margin: 0 auto;vertical-align: middle;/*estas propiedades son para trabajar con grid lo último en css para contabilizar por columnas*/display: grid; text-align: center; grid-template-columns: 30% 30% 30%; column-gap: 5%;}
.content2 img {width: 90%; border-radius: 15px;box-shadow: 5px 5px 10px #fff;}
@media (max-width: 600px) { .contenido2{ grid-template-columns: 100%;}}
.content2 p {padding: 20px; text-align: justify; color: #000; font-size: 1.3rem; font-family: Arial;}
.oculto {display: none; background-color: #fff; border-radius: 10px;padding: 10px;}
.content2 div:hover p {display:none;}
.content2 div:hover p.oculto {display: block;}
/*fin de estilos para mi capa content2*/
footer {margin: 0 auto; text-align: center; box-shadow: 0px -5px 10px #000; padding: 15px; height: 80px; background-color: #fff;font-size: 1.2rem;display: grid;grid-template-columns: 50% 50%;}
footer nav {position: relative; display: block; padding: 0 80px 0 0 ;box-shadow: none;}
.inf1 {position: relative;background-color: #fff;width: 100%;height: 8%;box-shadow: 4px 5px 5px;}
.inf1 ul {float: left; list-style: none;padding: 20px 20px 0px 10px;}
.inf1 ul li {display: inline;padding: 15px;text-align: center; border-radius: 10px;}
.inf1 ul li a {color: #000;text-decoration: none;text-transform: uppercase;}
.inf1 ul li:hover {background-color: #C5BF07;}
.inf1 ul li a:hover {color: #fff;}
footer p {padding-top: 25px; font-family: Arial;}