@charset "utf-8";
/* CSS Document */
body {margin: 0 auto;width: 90%;background-color: #498A0A;}
/*comienzo de estilo header*/
	header {text-align: center; width: 100%;height: 280px;background-color: greenyellow; background-image:url( "../img/medidas-campo-de-futbol.jpg");background-size: cover;background-repeat: no-repeat;background-attachment: fixed;}
	/* estilo a menu*/
	.sup {width: 90%;margin-top: -30px; box-shadow: 4px 5px 9px 1px ;position: fixed; background-color: rgba(202,245,181,0.60);}
	.sup1 {float: right; display: flex;list-style: none;padding: 20px 20px 30px 0;}
	.sup1 li {padding: 5px; border-radius: 10px;}
	.sup1 a {color: black;display: inline; margin: 0 5px;text-decoration: none;text-transform: uppercase;}
	.sup1 li:hover {background-color: #05FB9B;}
	/*.sup1:hover a{color: #000;}*/
	@media (max-width: 800px) {header {height: 250px;background-image: none;background-color: #784c0c;}}
	/* terminado el menu*/
	.fondo {display: inline; display: grid;grid-template-columns: 15% 70% 15%;}
	.fimg1 {width: 150px;float: left;margin-top: 80px;}
	.fimg2 {width: 150px;float: right;margin-top: 40px;}
	h1 {font-size: 4rem;text-transform: uppercase;-webkit-text-stroke-width:1px;-webkit-text-stroke-color: #FFf;font-family:BankGothic;padding-top: 7%;text-shadow: 5px 5px 20px #fff;/*padding-right: 15%;*/}
	button {padding: 1%;background-color: #000;font-size: 1.3em;border: solid 3px #fff;border-radius: 30px;margin-top: -30px;color: aliceblue;display: inline;}
	button:hover {background-color: white;color: black;border-color: black;}
/* fin estilo header*/
/* estilo a contenido 1*/
.contenido1 {background-color: rgba(0,0,0,0.2);padding: 4% 0;display: block;}
h2, h3 {font-size: 3rem;text-transform: uppercase;padding-bottom: 2%;text-shadow: 5px 5px 20px white; text-align: center;}
.img1 {padding: 3% 0;width: 100%;text-align: center;margin: 0 auto !important; }
.img1 p {float: right; width: 50%; color:azure; align-items: center; height: 300px;font-size: 1.2rem;text-align: justify; padding-right: 60px;padding-top: 60px}
.img1 img {width: 30%; border-radius: 15%; box-shadow: 5px 5px 10px #000;}
/*fin estilo contenido 1 */
/*comienzo de mi estilo contenido2*/
.contenido2 {width: 90%;/*estas propiedades son para trabajar con grid lo último en css para contabilizar por columnas*/display: grid;grid-template-columns: 30% 30% 30%;column-gap: 5%;margin: 0 auto;text-align: center;vertical-align: middle;margin-bottom: 100px;margin-top: 50px;}
.contenido2 img {width: 90%;height: 50%;border-radius: 15px; box-shadow: 5px 5px 10px #fffc02;}
@media (max-width: 600px) { .contenido2{ grid-template-columns: 100%;}}
.contenido2 p {text-align: justify;color: #c4c347;font-size: 1.3rem;padding: 20px;}
/* hacer aparecer desaparecer*/
.oculto {display: none;background-color: yellow;border-radius: 10%; padding: 10px;}
.contenido2 div:hover p {display: none;}
.contenido2 div:hover .oculto {display: block;color: black;border: solid;}
/*fin hover*/
/*inicio pie*/
footer {background-color: aliceblue; height: 60px; padding: 15px 0; box-shadow: 0 -3px 5px yellow;display: grid;grid-template-columns: 50% 50%;margin-top: 50px}
footer nav {position: relative; box-shadow: none;float: none; display: block;}
.inf1 {float: left; display: flex;list-style: none;}
.inf1 li {padding: 5px; border-radius: 10px;}
.inf1 a {color: black;display: inline; margin: 0 5px;text-decoration: none;text-transform: uppercase;}
.inf1 li:hover {background-color: brown;}
.inf1:hover a{color: cadetblue;}
footer p {font-size: 1.3rem;}