*{
	background: #2D073C;
	margin: .5;
	color: white;
}

/* Rasgos Generales de la Página ^ */

body{
	background-image: url("Recursos/Detalles.png");
}

/* Ahora el Header */

header{
	background-color: black;
	display: inline-block;
	width: 100%
}

header h1 {
	background-color: black;
	text-align: center;
	margin-bottom: 5%;
	color: white;
	font-family: Algerian;
	font-size: 300%
}

#Central {
	background-color: black;
	display: inline-block;
	width: 79%;
}

header img {
	background-color: transparent;
	width: 9%;
	margin-top: 1%;
	margin-left: .5%;
	margin-bottom: .5%;
	margin-right: .5%;
}

nav a{
	margin-left: 6.8%;
	background-color: black;
	text-decoration: none;
}

nav a button{
	padding: .5%;
	border-radius: 15px;
	border-color: white;
	box-shadow:2px 2px 20px white;
	font-family: Castellar;
}

nav a button:hover{
	color: red;
	cursor: pointer;
}

nav{
	background-color: black;
	margin-bottom: 30px;
}

/* Fin del Header */

/* Comienzo de la Introducción */

.contenedor{
	width: 100%;
	height: 100%;
	background-color: transparent;
	padding: 2px;
	float: left;
	margin-bottom: 20px;
}

.ContenidoA img {
	margin-top: 30px ;
	margin-bottom: 30px;
	width: 50%;
	float: left;
	margin-left: 10%;
	background-color: transparent;
	
}

.ContenidoA .ContenidoB{ 
	display:inline-block;
	margin-top: 30px;
	margin-left: 5%;
	width: 25%;
	float: left;
	background-color: transparent;
	
}

.ContenidoB h3{
	font-size: 2.5em;
	text-align: center;
	float: left;
	font-family: Algerian;
	background-color: transparent;
}

.ContenidoB p{ 
	font-size: 1.5em;
	font-family: Algerian;
	text-align: center;
	background-color: transparent;
	
}

.Esperenos {
	color: red;
}

.ContenidoB a{
	text-decoration: none;
	background-color: transparent;
}

.ContenidoB a button{
	font-family: Castellar;
	background-color: transparent;
	padding: 20px;
	border: 2px Solid;
	border-radius: 15px;
	text-align: center;
	margin-top: 9%;
	margin-bottom: 26px;
	margin-left: 22.5%;
	float: left;
	font-size: 1.5em;
}

.ContenidoB a button:hover{
	color: red;
	cursor: pointer;
	background-image: url("Recursos/Sangre.png");
}

/* Varios links como los del Nav */
/* Opciones para colocar las categorias. Una debajo de la otra como una especie de Lista, una lista donde alterno el lado donde coloco la imagen y colocarlos
en 4 categorias dividiendo la pantalla*/
	
	.Contenedor2{
	  background-color: transparent;
	}
		/* Primer Div (Biblioteca) casos desclasificados */
				.Fondo{
					padding: 10px;
					background-color: #FFA717;
					width: 90%;
					margin-left: 4.5%;
					border-radius: 15px;
					display: inline-block;
				}
				
				/* No sé porque, pero al aplicarse 20px a 2 elementos, se suman y se aplican solo por fuera de los dos elementos como si fueran uno solo
Esto mismo ocurre con los margenes en porcentaje. Al querer colocarlos sobre los elementos individualmente se descolocan y no se ven iguales al ser
elementos en lineas y no en bloque*/

					.Biblioteca {
						margin-left: 10%;
						margin-right: 5%;
						margin-bottom: 50px;
						width: 60%;
						float: left;
						background-color: transparent;
					}
					
					.Biblioteca p, .Biblioteca h3, .Biblioteca a{
						background-color: transparent;
						color: #2D073C;
					}
					
					.Biblioteca h3{
						font-size: 2.5em;
						font-family: Bernard MT Condensed;
						margin-bottom: 30px;
					}
					
					.Biblioteca p{
						font-family: Castellar;
						margin-bottom: 30px;
					}
					
					.Biblioteca a{
						margin-left: 30%;
						text-decoration: none;
					}
					
					.Biblioteca a button{
						background-color: transparent;
						font-family: Century Gothic;
						color: #2D073C;
						font-size: 2em;
						border-color: #2D073C;
						border-radius: 20px;
						padding: 15px;
					}
					
					.Biblioteca a button:hover{
						color: red;
						background-color: #1EDA15;
						cursor: pointer;
					}

					 .Icono{
						margin-top: 5%;
						width: 15%;
						float: left;
						background-color: transparent;
					}

/* Segundo Div (Misiones en activo) */

				.Fondo2 {
					padding: 10px;
					background-color: #1EDA15;
					width: 90%;
					margin-left: 4.5%;
					border-radius: 15px;
					display: Inline-block;
				}
				
				.Misiones{
					margin-top:20px;
					margin-left: 5%;
					margin-right: 5%;
					margin-bottom: 4%;
					width: 60%;
					float: right;
					background-color: transparent;
				}
				
				.Misiones p, .Misiones h3, .Misiones a {
					background-color: transparent;
					color: #2D073C;
				}
				
				.Misiones h3{
					font-size: 2.5em;
					font-family: Bernard MT Condensed;
					margin-bottom: 30px;
					float: right;
				}
				
				.Misiones p{
					font-family: Castellar;
					margin-bottom: 40px;
					float: right;
					text-align: right;
				}
				
				.Misiones a{
					margin-right: 30%;
					text-decoration: none;
					float: right;					
				}
				
				.Misiones a button{
					background-color: transparent;
					font-family: Century Gothic;
					color: #2D073C;
					font-size: 2em;
					border-color: #2D073C;
					border-radius: 20px;
					padding: 15px;
				}
					
				.Misiones a button:hover{
					color: red;
					background-color: #FFA717;
					cursor: pointer;
				}
				
				.Icono2{
					margin-top: 7%;
					margin-left: 10%;
					width: 15%;
					float: left;
					background-color: transparent;
				}


/* Tercer Div (Plantilla de Agentes) */
				.Fondo3 {
					padding: 10px;
					background-color: #FFA717;
					width: 90%;
					margin-left: 4.5%;
					border-radius: 15px;
					display: Inline-block;
				}
				
				.Agentes{
					margin-left: 10%;
					margin-right: 5%;
					margin-bottom: 50px;
					width: 60%;
					float: left;
					background-color: transparent;					
				}
				
				.Agentes p, .Agentes h3, .Agentes a {
					background-color: transparent;
					color: #2D073C;
				}
				
				.Agentes h3{
					font-size: 2.5em;
					font-family: Bernard MT Condensed;
					margin-bottom: 30px;
				}
				
				.Agentes p{
					font-family: Castellar;
					margin-bottom: 30px;
				}
				.Agentes a{
					margin-left: 30%;
					text-decoration: none;	
				}
				
				.Agentes a button{
					background-color: transparent;
					font-family: Century Gothic;
					color: #2D073C;
					font-size: 2em;
					border-color: #2D073C;
					border-radius: 20px;
					padding: 15px;
				}
					
				.Agentes a button:hover{
					color: red;
					background-color: #1EDA15;
					cursor: pointer;
				}
				
				.Icono3{
					margin-top: 5%;
					width: 15%;
					float: left;
					background-color: transparent;
				}

	
/* Cuarto Div (Contacto) */

				.Fondo4 {
					padding: 10px;
					background-color: #1EDA15 ;
					width: 90%;
					margin-left: 4.5%;
					border-radius: 15px;
					display: Inline-block;
				}
				
				.Contacto{
					margin-top:20px;
					margin-left: 5%;
					margin-right: 5%;
					margin-bottom: 4%;
					width: 60%;
					float: right;
					background-color: transparent;
				}
				
				.Contacto p, .Contacto h3, .Contacto a {
					background-color: transparent;
					color: #2D073C;
				}
				
				.Contacto h3{
					font-size: 2.5em;
					font-family: Bernard MT Condensed;
					margin-bottom: 30px;
					float: right;
				}
				
				.Contacto p{
					font-family: Castellar;
					margin-bottom: 40px;
					float: right;
					text-align: right;
				}
				
				.Contacto a{
					margin-right: 30%;
					text-decoration: none;	
					float: right;					
				}
				
				.Contacto a button{
					background-color: transparent;
					font-family: Century Gothic;
					color: #2D073C;
					font-size: 2em;
					border-color: #2D073C;
					border-radius: 20px;
					padding: 15px;
				}
					
				.Contacto a button:hover{
					color: red;
					background-color: #FFA717;
					cursor: pointer;
				}
				
				.Icono4{
					margin-top: 7%;
					margin-left: 10%;
					width: 15%;
					float: left;
					background-color: transparent;
				}
				
/* Tabla de Profugos */

	table {
		margin-top: 60px;
		width: 99%;
		margin-left: 0.5%;
		margin-right: 0.5%;
		border:  4px solid;
		font-family: Bahnschrift;
	}
	
	caption{
		background: none;
	}
	
	table img{
		width: 50%
	}
	
	table img:hover{
		width: 80%;
	}
	
	th, td, tr{
		border: 2.5px solid;
		text-align: center;
		border-color: Black;
	}
	
	th.verde, td.verde, tr.verde {
		background-color: #1EDA15;
	}
	
	table td.verde:hover, table th.verde:hover{
		background-color: #2F0252;
	}
	
	th.naranja, td.naranja, tr.naranja {
		background-color: #FFA717;
	}
	
	
	th.naranja:hover, td.naranja:hover, tr.naranja:hover {
		background-color: #2F0252;
	}
	
	
	caption {
	font-size: 2.5em;
	text-align: Left;
	margin-bottom: 20px;
	}
	
	table button{
		padding: 20px;
		width: 55%;
		background-color: red;
		border-radius: 15px;
		font-family: Bahnschrift;
	}
	
	table button.naranja:hover{
		width: 60%;
		background-color: #FFA717;
		cursor: pointer;
		transition: 1s;
	}
	
	table button.verde:hover{
		width: 60%;
		background-color: #1EDA15;
		cursor: pointer;
		transition: 1s;
	}


/* Footer */

.foot {
	margin-top: 50px;
	background-color: transparent;
	display: inline-block;
}

.foot span{
	width: 100%;
	float: left;
	text-align: center;
	background-color: transparent;
}



.foot img{
	margin-top: 30px;
	width: 5%;
	background-color: transparent;
	float: right;
	margin-right: 21.7%;
	}