@charset "UTF-8";
/*================================================================================*/
/*====       Design by Carolina Silva Breton for HLM Novohispana site          ===*/
/*====           up290821  index y sermones-relaciones                         ===*/
/*================================================================================*/

/*---------------------- DESKTOP -----------------------------------------*/
@media screen and (min-width: 1851px){
	header {border-top: 5px solid grey;} /*agregar para responsivo */ 
	
	#logoHLM-phone, #menuHamburguesa {
		display: none !important;
	}
	
	
}

/*----------------------- LAPTOP ----------------------------------------*/
@media screen and (max-width:1850px){
	header {border-top: 5px solid blue;} /*agregar para responsivo */ 
	
	#logoHLM-phone, #menuHamburguesa {
		display: none !important;
	}
	
	#bannerTop { height: 350px; top:65px;}
	#logoBuscador { margin-top: -270px;}
	#logoBuscador div:first-child a { width: 75%; padding-left: 10%;}
	#logoBuscador div:first-child a img { width: 100%; height: auto; }
	#searchForm { margin-left: 10%;}

	#cajaPalabras {font-size: 0.875rem;}
	.wrapper { width: 90%;}
	.marco { max-width: 86% !important; } /*isotipo*/
	.marco > div > div[fxlayoutalign="center"] { max-width: 29% !important;} /*unido a sig RegEstilo*/
	.expl-iso, .expl-iso-SM { max-width: 70% !important;}
	
	#herramientas div {width: 240px; height: 240px;}
	#herramientas div a h3 { padding-top: 32%;}
	footer p { padding: 20px 60px 5px 0;}
	
	
}

/*-------------mini LAPTOP ---------------*/
@media screen and (max-width:1300px){
	header {border-top: 5px solid aqua;} /*agregar para responsivo */ 
	
	#bannerTop { height: 400px; top:65px;}
	#logoBuscador { margin-top: -290px;}
	#video-banner video { width: 125%; margin-left: -90px; }
	#li-home { font-size: 1rem;}
	h1 { font-size: 1.55rem !important;}
	/*++++ Enlaces ++++*/
	#brujulaEnlaces {
    width: 15%; max-width: 380px; bottom: 200px; }
}


/*----------------------- TABLET -----------------------------------*/
/*****LANDSCAPE:H****/
@media screen and (max-width: 1220px){
	header {border-top: 5px solid red;} /* agregar para responsivo*/
	#logoHLM-phone, #menuHamburguesa {
		display: none !important;
	}

	.wrapper { width: 100%;}
	#bannerTop { height: 350px; top:30px;}
	#logoBuscador { margin-top: -230px;}
	#logoBuscador div:first-child a { width: 75%;}
	#video-banner video { width: 140%; margin-left: -150px; }

	#acercaDe {width: 80%;}
	#btnIsotipo {width: 20%; margin-top: 80px;}
	
	#herramientas div {width: 225px; height: 225px;}	
	footer p { padding-right: 90px; font-size: 12px; }
	/*++++ Enlaces ++++*/
	#submenuEnlaces {width: 90%;}
	
	
	
}
/*********** PORTRAIT:V **************/
@media screen and (max-width: 1023px){
	header {border-top: 5px solid magenta;} /* agregar para responsivo */
	
	#bannerTop { height: 290px; top:40px;}
	#logoBuscador { margin-top: -210px;}
	
}
@media screen and (max-width: 959px){
	header {border-top: 5px solid purple;} /* agregar para responsivo */
	
	.marco > div > div[fxlayoutalign="center"] { max-width: 100% !important;} /*unido a sig RegEstilo*/
	.expl-iso, .expl-iso-SM { max-width: 100% !important;}
	.cerrar[fxlayoutalign=end] { right: 10px !important;}
	.imagenportada { max-width: 30% !important; width: 30% !important; margin: 10px auto; }
	.secportada { position: relative; margin-bottom: 10px; flex-wrap: wrap; }
	.secportadadesc { max-width: 98% !important; width: 98% !important; }
	
}
/*********** PORTRAIT:V  +CH **************/
@media screen and (max-width: 850px){
	header {border-top: 5px solid pink;} /* agregar para responsivo */	
	
	body { overflow-x: auto;}
	#logoHLM-phone {
		display: block !important;
	}
	#leyendaUNAM, #leyendaUNAM img, #btnIsotipo, #logoHLM, #menuHamburguesa {
		display:none !important;}
	
	
	#bannerTop { height: 250px;}
	#logos { width: 80%;}
	#logoBuscador div:last-child { width: 60%; padding-top: 50px;}
	

	#acercaDe {width: 100%;}
	#publicacionesHLM div { width: 70%;}
	
	nav {height: auto;}
	nav li a {font-size: 15px !important; padding: 15px 5px;}
	
	/*++++ Siglo XVI ++++*/
	#contenidoTomos { flex-wrap: wrap; }
	/*++++ Enlaces ++++*/
	#submenuEnlaces {width: 530px;}
	#submenuEnlaces li a { height: 70px}
	#submenuEnlaces li:nth-child(3) a , #submenuEnlaces li:nth-child(4) a {
	padding-top: 20px; }
	
}


/*-------------------------------- PHONE -------------------------*/
/*****LANDSCAPE:H****/
@media screen and (max-width: 680px) {
	header {border-top: 5px solid orange;} /* agregar para responsivo */
	
	#logoHLM-phone, #menuHamburguesa {
		display: block !important;
	}
	#leyendaUNAM, #leyendaUNAM img, #btnIsotipo, #logoHLM, #brujulaEnlaces, nav {
		display:none !important;}

	#menuHamburguesa {
	color:#fff; position: absolute;
	right: 35px; font-size: 30px; top: 20px;
	}
	/*Interés*/
	.interesIndex a img { height:50px;}
	/*++++ Siglo XVI ++++*/
	#titulo-botonSigloXVI div {flex-wrap: wrap;}
	#recursosMultimedia div { width: 70%; max-width: 343px;}
	/*++++ Enlaces ++++*/
	#submenuEnlaces {width: 80%;}
	#submenuEnlaces li {width:100% !important;}
	#submenuEnlaces li a { height: auto;}
	#submenuEnlaces li:nth-child(3) a , #submenuEnlaces li:nth-child(4) a {
	padding-top: 10px; }
	.fdoEnlaces #txtHer {width: 100%; box-sizing: border-box;}
}

/*****PORTRAIT:V****/
@media screen and (max-width: 480px) {
	header {border-top: 5px solid green;}/* agregar para responsivo */
	
	#logoHLM-phone, #menuHamburguesa {
		display: block !important;
	}
	#leyendaUNAM, #leyendaUNAM img, #btnIsotipo, #logoHLM {
		display:none !important;}
	/*Interés*/
	.interesIndex a img { height:40px;}
	/*++++ Siglo XVI ++++*/
	#recursosMultimedia div { width: 90%; max-width: 343px;}
	/*++++ Enlaces ++++*/
	#submenuEnlaces {width: 90%;}
	
}