/*######################### INICIO ##############################*/
/* Estilos generales. */
main{
	width: 75%;
	margin: 0px auto; /* margen arriba y abajo de 0px y automático a los lados.*/
	background: #fff;
	padding: 0px;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.75);
}

/* Fin de Estilos generales. */ 
/*--------------------------- FIN --------------------------------*/


/*######################### INICIO ##############################*/
/* Estilos de Estructura. */
/* El punto indica que es una clase. */

.DivEncabezado{
	overflow: hidden;
	
}

.DivContenedor{
	overflow: hidden;
	float: left;
}

.BoxRetratos{
	border-radius:30px; 
	background-color:white;
	background-image: url(../img/Retratos.jpg);
	background-size:300px 200px;
	background-repeat: no-repeat;
	width: 300px;
	height:200px;
	margin: 80px 30px 0px 125px ;
	float:none;
}

.BoxEventos{
	border-radius:30px; 
	background-color:white;
	background-image: url(../img/Eventos.jpg);
	background-size:300px 200px;
	background-repeat: no-repeat;
	width: 300px;
	height:200px;
	margin: 80px 30px 0px 35px;
	float:none;
}

.BoxHistoriando{
	border-radius:0px; 
	background-color:white;
	background-image: url(../img/crisyak.jpg);
	background-size:270px 405px;
	background-repeat: no-repeat;
	width: 270px;
	height:405px;
	margin: 0px 0px 0px 550px;
	float:none;
}

.BoxEtiqueta1{
	font-family: 'Sniglet', cursive;
	font-size: 21px;
	float: none;
	margin: 15px 0px 0px 95px;
	text-align: center;
}

.BoxEtiqueta2{
	font-family: 'Sniglet', cursive;
	font-size: 21px;
	float: none;
	margin: 15px 0px 0px 10px;
	text-align: center;
}

.BoxEtiqueta3{
	font-family: 'Sniglet', cursive;
	font-size: 21px;
	float: none;
	margin: 0px 0px 0px 450px;
	text-align: center;
}

/* En lugar de usar una clase podemos usar un identificador, para ello en HTML debemos llamar al identificador con un id (ejemplo: id="EstiloDivision01") y en CSS debemos usar # para crear el identificador (#EstiloDivision01{ }) y el código CSS iría en dentro de los corchetes. */

/* Fin de Estilos de Estructura. */ 
/*--------------------------- FIN --------------------------------*/


/*######################### INICIO ##############################*/
/* Como las media query por lo general tienen que sobreescribir el código de otros estilos definidos se necesita colocarlas al final del código CSS. */

@media screen and (max-width:870px) {
	.DivContenedor{
		float:none;
	}
	
	.BoxRetratos{
		float: none;
		margin: 30px auto 0px auto;
		background-size:250px 166px;
		width: 250px;
		height:166px;		
	}
	
	.BoxEventos{
		float: none;
		margin: 50px auto 0px auto;	
		background-size:250px 166px;
		width: 250px;
		height:166px;
	}
	
	.BoxHistoriando{
		float: none;
		margin: 50px auto 0px auto;
		background-size:167px 250px;
		width: 167px;
		height:250px;
	}
	
	.BoxEtiqueta1{
		float: none;
		margin: 15px 0px 0px 10px;
		text-align: center;
	}
	
	.BoxEtiqueta2{
		float: none;
		margin: 15px 0px 0px 10px;
		text-align: center;
	}
	
	.BoxEtiqueta3{
		float: none;
		margin: 15px 0px 0px 15px;
		text-align: center;
	}
	
	main{
		width: 90%;
	}
}

@media screen and (min-width:870px) and (max-width:1100px){
	main{
		height: 1250px;
	}
	.DivContenedor{
		padding-left:55px;
	}
}

@media screen and (min-width:1100px) and (max-width:1500px){
	main{
		height: 850px;
	}
	.DivContenedor{
		padding-left:15px;
	}
}

@media screen and (min-width:1500px) {
	main{
		height: 470px;
	}
	.DivContenedor{
		padding-left:15px;
	}
}

/* Fin de Estilos específicos. */
/*--------------------------- FIN --------------------------------*/