@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size:18px; 
}/*cabecera*/
#logo{
	background:black;
	justify-content:center;
}
#logo img{
	margin-left:45%;
	margin-right: 45%;
	padding:10px;	
}
header{
	background-color:navy;
	height:50px;
	color:antiquewhite;
	display:flex;
	justify-content:center;
	z-index:2000; 
}
header label{
	font-size:30px;
	display:none; 
}
#btn-menu{
	display:none;
}

.menu ul {
	background-color:navy;
	list-style:none;
	display:inline-flex;
	font-size:22px;
}
.menu ul ul {
	display:none;
}
.menu a{
	display:block;
	padding:15px 20px;
	color:white;
	text-decoration:none;
}
.menu a:hover {
	background: rgba(0,0,0,0.3) 
}
.menu ul li:hover ul{
	display:block;
	position:absolute;
	z-index:2000; 
	
}

/*Cuerpo*/
#Cuerpo .noticias img{
	width:60%;
	float:right; 
	padding:2%; 
}
#Cuerpo{
	margin-left:15%; 
	margin-right:15%;
}
#Cuerpo p{
	padding:10px;
	text-align: justify;
}
#Cuerpo h2{
	text-align: center;
	font-size:40px; 
	padding:10px; 
}
#Cuerpo .noticias{
	padding:20px 
}

/*Formlario*/
#Formulario{
	background:black;
	color:whitesmoke;
	text-align:center;
}
#Formulario form{
	padding:5%;
}
#Formulario h1{
	padding-top:10px; 
	font-size:30px;
	color:salmon;
}
#Formulario .campos{
	border-radius:10px;
	width:60%;
	padding-top:10px;
	margin-top:15px;
}
/*Pie*/
#Pie{
	text-align: center;
	margin-top:20px;
	color:whitesmoke;
	background-color: black;
	font-size:20px; 
	padding:2%; 
}
#Pie li{
	list-style:none; 
}

#Pie li a{
	display:inline-block;
	text-decoration:none; 
	color:white;
}
#Pie li a:hover{
	color:salmon; 
}

/* Dise;o para tablet */
@media screen and (max-width:1200px)
{
	/*Cuerpo responsive*/
	#Cuerpo{
	margin-left:2%; 
	margin-right:2%;
	}
	#Cuerpo h2{
		font-size:25px; 
		text-align:center; 
	}
	
	/*Formulario responsive*/
	#Formulario{
		margin-top: 95px;
		padding:15px; 
	}
	
} 
/*Dise;o celulares*/
@media screen and (max-width:800px){
	
	header label{
		display:block;
		z-index:2000; 
	}
	.menu{
		position: absolute;
		top:145px;
		width:100%;
		transform:translateX(-100%);
		transition:all 0.3s;
		z-index:2000; 
	}
	.menu ul{
		display:block;
		z-index:2000; 
	}
	.menu ul li:hover ul{
		display:none; 
		position:static;
		background:rgba(63,42,124,1.00) 
	}
	#btn-menu:checked ~ .menu{
		transform:translateX(0%);
	}
	/*Cuerpo*/
	#Cuerpo .noticias img{
	width:100%; 
	}
}