.clearfix						{ overflow:auto;}
.on		 						{ text-decoration:underline; text-underline-position:under; text-decoration-thickness:2px; text-underline-offset:6px;}

#drop-uno						{ background:#be0f2e;}
#drop-dos						{ background:#fcbb37;}
#drop-tre						{ background:#e3ac00;}
#drop-cua						{ background:#95be05;}
#drop-cin						{ background:#648a9f;}
#drop-sei						{ background:#bd1353;}
#drop-sie						{ background:#059f94;}


#cabecera,#cabecera2			{ position:relative;}


.navigation .logo					{ margin:-7px 10px 0 0; width:147px; height:65px; overflow:hidden;} /* ----- width:131px; height:58px;----- */


#cabecera							{ width:100%; min-height:var(--alto-sobrem); color:#fff; background:transparent;}
#cabecera .navigation	 			{ box-shadow:inset 0px -1px 0px 0px #7c7c7c; border-radius:0;}
#cabecera .logo						{ background:url('../../images/logos/us-blanco.png') center center/cover no-repeat;}
#cabecera .navuno					{ margin:auto; color:#fff; background:transparent;}
#cabecera .navdos 					{ min-height:var(--alto-navega); color:var(--color-primario); background:var(--color-claro);}
#cabecera .navdos					{ box-shadow:inset 0px -1px 0px 0px #ddd; border-radius:0;}
#cabecera .navdos .logo				{ background:url('../../images/logos/us-negro-rojo.png') center center/cover no-repeat;}


#cabecera2						{ min-height:var(--alto-cabece); color:var(--color-primario);}
#cabecera2 .nav-container,	 		
#cabecera2 .navdos				{ box-shadow:inset 0px -1px 0px 0px #ddd; border-radius:0; background:var(--color-claro);}
#cabecera2 .logo				{ background:url('../../images/logos/us-negro-rojo.png') center center/cover no-repeat;}
#cabecera2 .navdos 				{ min-height:var(--alto-navega); color:var(--color-primario);}


.sobremenu						{ position:relative; height:var(--alto-sobrem); padding:0; background:var(--color-primario); z-index:901;}
.sobremenu .contenido			{ position:relative; max-width:var(--ancho-primario); height:var(--alto-sobrem); margin:auto; color:#fff; display:flex; justify-content:space-between; align-items:center;}
.sobremenu .contenido a:hover	{ text-decoration:underline; text-underline-position:under; text-underline-offset:3px; text-decoration-thickness:2px;}
.sobremenu .uno,					
.sobremenu .dos					{ max-width:50%; margin:0 4px; padding:2px; font-family:var(--fuente-textos); font-size:.9rem; font-weight:500;}


.navuno 						{ margin:auto; transition:0.3s ease;}
.navdos 						{ margin:auto; transform:translateY(-60px); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); transition:0.3s ease; background:var(--color-claro);}


/* COMPONENETES DEL MENÚ */
.navigation 					{ position:fixed; display:block; top:var(--alto-sobrem); right:0; left:0; min-height:var(--alto-navega); height:auto; color:inherit; z-index:900;}
.navigation .nav-container 		{ max-width:var(--ancho-primario); min-height:var(--alto-navega); margin:auto; display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
.navigation .brand 				{ max-width:460px; min-height:var(--alto-navega); margin:0 10px 0 0; display:flex; align-items:center;}
.navigation nav 				{ margin-left:20px; background:inherit;}
/* FIN COMPONENETES DEL MENÚ */

.navigation.scroll-Up 			{ transform:translateY(-167px); transition:0.4s ease; border:none;}


.marca				{ padding:0 0 0 10px; font-family:var(--fuente-marca); font-size:1.175rem; font-weight:700; line-height:1.1em; color:inherit; border-left:1px solid #ccc;}
.marca:before		{ display:block; content:"Departamento de"; margin-bottom:5px; font-size:0.975rem; font-weight:500; line-height:1em; color:inherit;}


.navigation .brand a:hover 		{ opacity:.7;}
.navigation .brand .marcaresto			{ margin-left:-40px; font-family:var(--fuente-textos); font-size:1.65rem; font-weight:650; line-height:1.2em; color:inherit; display:flex; align-items:center;}
.navigation .brand .marcaresto:before	{ display:inline-flex; margin:0px 10px 0 44px; padding:0; min-width:55px; width:55px; height:55px; overflow:hidde;}
.navigation .brand .marcaresto:before	{ content:""; background:url('../../images/logos/fafar.png') center center/cover no-repeat;}


.navigation nav ul 					{ list-style:none; margin:0; padding:0;}
.navigation nav ul li 				{ position:relative; float:left;}
.navigation nav ul li a 			{ display:block; padding:9px 10px; text-decoration;none; line-height:1.3em; font-family:var(--fuente-textos); font-weight:700; color:inherit; cursor:pointer; outline-width:0;}
.navigation nav ul li a:hover 		{ text-decoration:underline; text-underline-position:under; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:inherit; color:inherit;}
.navigation nav ul li a:not(:only-child):after 			{
	float:right; margin:6px 0 0 5px; width:8px; height:8px; border-color:inherit; border-bottom:2px solid; border-left:2px solid; content:""; transform:rotate(-45deg);}

.navigation nav ul li ul li 		{ width:100%;}
.navigation nav ul li ul li a 		{ white-space:normal; padding:8px 15px; line-height:1.5em; font-family:var(--fuente-textos); font-size:90%; text-align:left; font-weight:400; color:inherit;}
.navigation nav ul li ul li a:hover { line-height:1.5em; text-decoration:none; color:inherit; text-underline-offset:3px;}

.navigation .nav-dropdown 			{ position:absolute; top:55px; right:0; display:none; min-width:270px; width:100%; padding:20px 15px; font-size:95%; color:var(--color-claro); background:var(--color-clar); border:1px solid rgba(0, 0, 0, 0.15);}
--.navigation --.nav-dropdown:after		{ content:""; position:absolute; top:-8px; right:15px; width:16px; height:16px; border-left:1px solid rgba(0, 0, 0, 0.15); border-top:1px solid rgba(0, 0, 0, 0.15); background:var(--color-claro); transform:rotate(45deg);}
.navigation .nav-dropdown li a		{ font-family:var(--fuente-textos); text-decoration:none;}
.navigation .nav-dropdown li a:hover{ text-decoration:underline; text-underline-position:under; color:inherit;}


/* Mobile navigation */
.navigation .nav-mobile 			{ display:none; position:absolute; margin:0; padding:0; top:0px; right:0; width:80px; height:80px; background:transparent;}
.navigation .nav-mobile:hover 		{ text-decoration:none; border:none;}

.navigation .botonera-nav			{ position:relative; padding:0; display:none; align-items:center; justify-content:center;}
.navigation .boton-nav				{ position:relative; margin:0; padding:var(--padding-botones); transition: 0.3s;}
.navigation .boton-nav				{ border:none; background:var(--color-primario); color:var(--color-claro); -webkit-box-shadow: 0px 0px 0px 1px var(--color-primario) inset; box-shadow: 0px 0px 0px 1px var(--color-primario) inset; transition: 0.3s;}
.navigation .boton-nav:hover 		{ border:none; color:var(--color-primario); text-decoration:none; border:0; -webkit-box-shadow: 0px 0px 0px 1px var(--color-primario) inset; box-shadow: 0px 0px 0px 1px var(--color-primario) inset; background:transparent}


.navigation .bo						{ text-decoration:none; font-size:110%; color:inherit; overflow:hidden;}
.navigation .bo a					{ text-decoration:none;}
.navigation .bo:hover				{ color:#339af0; text-decoration:none;}
.navigation .social					{ text-align:center;}
.navigation .facebook:before		{ content:"\f09a"; font-family:FontAwesome;}
.navigation .instagram:before		{ content:"\f16d"; font-family:FontAwesome;}
.navigation .twitter:before			{ content:"\e61b"; font-family:FontAwesome;}
.navigation .whatsapp:before		{ content:"\f232"; font-family:FontAwesome;}

.navigation .derecha-nav 			{ display:none;}

.navigation [class*="item-"] 		{ display:flex; align-items:center; justify-content:center; width:39px; aspect-ratio:1/1; margin:0 0 0 5px; padding:10px 13px; background:#f3f3f3; border:1px solid #ddd; border-radius:100%;}
.navigation [class*="item-"]:hover 	{ color:var(--color-primario); text-decoration:none; background:#ccc;}
.navigation [class*="item-"]::before{ display:inline-flex; margin:0; font-weight:400;}


#lateral-nav 								{ background:#f3f0ee;}
#lateral-nav [class*="nav-lateral-bloque-"]	{ float:none; padding:10px 0;}
#lateral-nav .brand							{ position:relative; padding-bottom:20px; border-bottom:1px solid #ddd;}
#lateral-nav .marca							{ padding-left:0; font-size:1.55rem; border-left:none;}
#lateral-nav .marca:before					{ display:block; content:"Departamento de"; margin-bottom:5px; font-size:0.975rem; font-weight:500; line-height:1em; color:inherit;}

#lateral-nav .submarca						{ margin-top:10px; font-family:var(--fuente-textos); font-weight:600;}
#lateral-nav .imagen						{ position:relative; width:100%; aspect-ratio:1/.5; overflow:hidden;}
#lateral-nav p a							{ text-decoration:underline; text-underline-position:under; color:var(--color-primario);}
#lateral-nav p a:hover						{ color:var(--color-hover);}
#lateral-nav .nav-lateral-bloque-contacto	{ margin-top:20px; padding:20px 0; border-top:1px solid #ddd;}
#lateral-nav .nav-lateral-bloque-pie		{ margin-top:20px; padding:20px 0 0 0; border-top:1px solid #ddd;}

/* ----------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1080px){ /* antes 820px */

#cabecera2 .navigation:after		{ margin-top:-2px; box-shadow:0px 1px #ddd;}

.navigation .logo					{ }

.navigation .brand .marcaresto		{ }


.navigation .nav-mobile 			{ display:block;}
.navigation #nav-toggle 			{ background:transparent; font-weight:100; position:absolute; right:0; top:25px; width:50px; height:50px; font-size:180%; cursor:pointer; font-family:'Material Icons'; color:inherit; text-decoration:none; background:transparent; display:flex; align-items:center; justify-content:center;}
.navigation #nav-toggle:before		{ content:"\eb9e"; cursor:pointer; color:inherit; -webkit-transition:all 0.5s; transition: all 0.5s;}
.navigation #nav-toggle.active:before{ content:"\e5cd"; cursor:pointer; color:inherit; transform: rotate(180deg); background:transparent;}

.navigation 	 					{ }
.navigation nav 					{ width:100px; margin-left:-15px; }
.navigation .nav-list				{ box-shadow: 0px 0px 160px 37px rgba(0,0,0,0.75);}
.navigation .nav-list				{ position:absolute; top:90px; left:10px; margin:auto; padding:25px; width:95%; height:auto; border:1px solid #e3e3e3; text-align:center; color:#7a7a7a; background:#fff;}

.navigation .nav-dropdown 			{ position:static;}
.navigation .nav-dropdown:after		{ top:42px; right:12px; width:16px; height:16px;}


.navigation nav ul 					{ display:none;}
.navigation nav ul li 				{ float:none; padding:10px 0;}
.navigation nav ul li a 			{ padding:15px; line-height:10px;}
.navigation nav ul li ul li a 		{ padding-left:30px;}
.navigation nav ul li a:hover		{ border:none;}

.navigation [class*="item-"]::before{ font-size:1.2rem; font-weight:700; color:;}

.navigation .botonera-nav			{ margin-top:35px; padding:15px 0 10px 0; border-top:1px solid #ddd; display:flex;}

.navigation .boton-nav				{ margin-left:0; margin-bottom:3px;}
.navigation .bo						{ font-size:160%; text-align:center;}


.nav-social							{ position:relative; psdding:20px; border-top:1px solid #ddd; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;}
.nav-social .social 				{ margin:15px 7px;}


.nav-lateral						{ display:none;}

/* ----------------------------------------------------------------------------------------------------- */
}
@media screen and (min-width: 1300px){ /* antes 820px */
.navigation .nav-list 				{ display:block !important;}



/* ----------------------------------------------------------------------------------------------------- */
}
/* En pantallas de 600px o menos */
@media screen and (max-width: 667px) {

.navigation .boton-nav				{ margin-top:15px; margin-bottom:3px;}

/* ----------------------------------------------------------------------------------------------------- */
}
/* IPHONE VERTICAL */
@media screen and (max-width: 480px) {

.navigation .logo				{ width:125px; height:55px; margin-left:5px;}

.sobremenu .uno,					
.sobremenu .dos					{ max-width:100%; text-align:center;}

.brand							{ position:absolute; right:50px; left:0;}
.marca							{ font-size:1.10rem;}

.navigation .botonera-nav		{ margin-top:5px; padding:10px 0; border-top:1px solid #ddd; display:flex;}



}