/*Solo se aplica cuando el tamaño de la pantalla es igual o mayor a X pixels*/
@media only screen and (min-width: 173px) {
	
/* Estas líneas de CSS las usaremos para dar estilo a la cabecera: */
#main-header {
	background: #FFFFFF;

	font-family: Montserrat, sans-serif;
	font-size: 1.09em;
	
	height: 76px;	/* hacemos que la cabecera ocupe un alto fijo */
	width: 157px; /* hacemos que la cabecera ocupe un ancho fijo */
	left: 80; /* Posicionamos la cabecera al lado izquierdo con 80 ideal */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
}
.header {
	display:block;
	background: #333;
	color: white;
	position:fixed;
	left:0;
	top:0;
	height: 60px;
	margin: 0;
}

	.header a {
		color: white;
		text-decoration: none;
		background: #FFFFFF;
}

/*
 * Logo Estilos
 */
#logo-header {
	float: left;
	padding: 30px 0 0 10;
	position:fixed;
	text-decoration: none;
	top: 0;
	left: 80;
	height: 36px; /* hacemos que el logo ocupe un alto fijo */
	width: 135px; /* hacemos que el logo ocupe un ancho fijo */
}
	#logo-header:hover {
		color: #ef3054;
	}
	
	#logo-header .site-name {
		display: block;
		font-weight: 750;
		font-size: 0.9em;
		color: #ef3054;
	}
	
	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 0.45em;
		line-height: 1.3em			
		text-align: center;
		color: #333;
	}
	
	
	
/* Estas líneas de CSS las usaremos para dar estilo al logo flotante: */	
#secondary-box {
	background: #FFFFFF;

	font-family: Montserrat, sans-serif;
	font-size: 1.09em;
	margin: 0 auto;
	
	height: 76px;	/* hacemos que la cabecera ocupe un alto fijo */
	width: 180px; /* hacemos que la cabecera ocupe un ancho fijo */
	left: 50%; /*  Posicionamos la cabecera al lado izquierdo con 80 ideal */
	top: 101; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
	transform: translate(-50%); /* para terminar de ajustar en el centro */

}
.secondary {
	display:block;
	background: #333;
	color: white;
	position:fixed;
	left:0;
	top:0;
	height: 60px;
	margin: 0;
}

	.secondary a {
		color: white;
		text-decoration: none;
		background: #FFFFFF;
}

/*
 * Logo Estilos
 */
#logo-secondary-box {
	float: center;
	padding: 30px 0 0 10;
	position:fixed;
	text-decoration: none;
	top: 180;
	left: 180;
	height: 36px; /* hacemos que el logo ocupe un alto fijo */
	width: 135px; /* hacemos que el logo ocupe un ancho fijo */
}
	#logo-secondary-box:hover {
		color: #ef3054;
	}
	
	#logo-secondary-box .secondary-name {
		display: block;
		font-weight: 750;
		font-size: 0.9em;
		color: #ef3054;
	}
	
	#logo-secondary-box .secondary-desc {
		display: block;
		font-weight: 300;
		font-size: 0.45em;
		line-height: 1.3em			
		text-align: center;
		color: #333;
	}
	
	
}	/*Solo se muestra cuando el tamaño de la pantalla es igual a X pixels*/	



/*Solo se aplica cuando el tamaño de la pantalla es mayor a X pixels*/
@media only screen and (min-width: 1039px) {
	
/* Estas líneas de CSS las usaremos para dar estilo a la cabecera: */
#main-header {
	background: #FFFFFF;

	font-family: Montserrat, sans-serif;
	font-size: 1.09em;
	
	height: 76px;	/* hacemos que la cabecera ocupe un alto fijo */
	width: 157px; /* hacemos que la cabecera ocupe un ancho fijo */
	left: 56; /* Posicionamos la cabecera al lado izquierdo con 80 ideal */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
}
.header {
	display:block;
	background: #333;
	color: white;
	position:fixed;
	left:0;
	top:0;
	height: 60px;
	margin: 0;
}

	.header a {
		color: white;
		text-decoration: none;
		background: #FFFFFF;
}

/*
 * Logo Estilos
 */
#logo-header {
	float: left;
	padding: 30px 0 0 10;
	position:fixed;
	text-decoration: none;
	top: 0;
	left: 56;
	height: 36px; /* hacemos que el logo ocupe un alto fijo */
	width: 135px; /* hacemos que el logo ocupe un ancho fijo */
}
	#logo-header:hover {
		color: #ef3054;
	}
	
	#logo-header .site-name {
		display: block;
		font-weight: 750;
		font-size: 0.9em;
		color: #ef3054;
	}
	
	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 0.45em;
		line-height: 1.3em			
		text-align: center;
		color: #333;
	}
}	/*Solo se muestra cuando el tamaño de la pantalla es igual a X pixels*/	


/*Y por último, con esto estilizaremos el pie de página:*/

#main-footer {
	display: block;
	
	width: 10%; /* hacemos el pie ocupe el ancho completo de la página */
	left: 20; /* Posicionamos el pie al lado izquierdo */	
	position: fixed; /* Hacemos que el pie tenga una posición fija */
}
	#main-footer p {
		margin: 0;
		max-height: 150px;
		position: fixed;
	}
	
	#main-footer a {
		color: blue;
	}

/*Solo se aplica cuando el tamaño de la pantalla es igual o menor a X pixels*/
@media only screen and (max-width: 687px) {
	
#main-header {
	height: 76px;	/* hacemos que la cabecera ocupe un alto fijo */
	width: 145px; /* hacemos que la cabecera ocupe un ancho fijo */
	left: 67; /* Posicionamos la cabecera al lado izquierdo con 80 ideal */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
	}
	.header {
		display: block;
	}
#logo-header {
	left: 67;
	height: 36px; /* hacemos que el logo ocupe un alto fijo */
	width: 135px; /* hacemos que el logo ocupe un ancho fijo */
	}
	
}	



/*Solo se aplica cuando el tamaño de la pantalla es igual o menor a X pixels*/
@media only screen and (max-width: 399px) {

	#main-header {
	height: 79px;	/* hacemos que la cabecera ocupe un alto fijo */
	width: 80px; /* hacemos que la cabecera ocupe un ancho fijo */
	left: 62; /* Posicionamos la cabecera al lado izquierdo con 80 ideal */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
	}
	.header {
		display: block;
	}
#logo-header {
	left: 63;
	height: 36px; /* hacemos que el logo ocupe un alto fijo */
	width: 69px; /* hacemos que el logo ocupe un ancho fijo */
	}
	#logo-header .site-name {
		overflow-wrap: break-word;
		font-weight: 750;
		font-size: 0.9em;
		color: #ef3054;
	}
	
	#logo-header .site-desc {
		display: none;
	}
	
}	/*Fin Solo se aplica*/

@media only screen and (max-width: 323px) {
	
#main-header {
	height: 76px;	/* hacemos que la cabecera ocupe un alto fijo */
	width: 145px; /* hacemos que la cabecera ocupe un ancho fijo */
	left: 67; /* Posicionamos la cabecera al lado izquierdo con 80 ideal */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
	}
	.header {
		display: block;
	}
#logo-header {
	left: 77;
	height: 36px; /* hacemos que el logo ocupe un alto fijo */
	width: 145px; /* hacemos que el logo ocupe un ancho fijo */
	}
	#logo-header .site-name {
		display: block;
		font-weight: 750;
		font-size: 0.9em;
		color: #ef3054;
	}
	
	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 0.45em;
		line-height: 1.3em			
		text-align: center;
		color: #333;
	}
	
}	/*Fin Solo se aplica*/


/*Solo se aplica cuando el tamaño de la pantalla es igual o menor a X pixels*/
@media only screen and (max-width: 272px) {
	
#main-header {
	height: 76px;	/* hacemos que la cabecera ocupe un alto fijo */
	width: 185px; /* hacemos que la cabecera ocupe un ancho fijo */
	left: 67; /* Posicionamos la cabecera al lado izquierdo con 80 ideal */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
	}
	.header {
		display: block;
	}
#logo-header {
	left: 77;
	height: 46px; /* hacemos que el logo ocupe un alto fijo */
	width: 175px; /* hacemos que el logo ocupe un ancho fijo */
	}
	
}	/* Fin Solo se aplica*/

/*Solo se aplica cuando el tamaño de la pantalla es igual o menor a X pixels*/
@media only screen and (max-width: 228px) {
	
#main-header {
	display: none;
	}
#logo-header {
	display: none;
	}
	
}	/* Fin Solo se aplica*/