@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

#navbarLH {
	padding-top:0.1rem !important; 
	padding-bottom:0.1rem !important; 
	margin:0;
	border-bottom: 1px solid rgba(0,0,0,.3);
	background-color: #EDEDED;
	box-shadow: 0 2px 5px rgba(0,0,0,.4);
	z-index:999999;
	outline: 0;
	font-family: 'Roboto Condensed', Arial, Helvetica;
	font-size: 1rem;
	text-transform:uppercase;
	width:100% !important;
	/* Evita que Bootstrap (clase .position-absolute) tape el header */
	position: static !important;
	top:auto;
	left:auto;
	right:auto;
	top:0
}

/* Barra sin Bootstrap: damos layout a los elementos del nav */
#navbarLH .container-fluid{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-left:.75rem;
	padding-right:0;
}

#navbarLH .collapse.navbar-collapse{
	/* Bootstrap JS añade/remueve .show */
	display:block;
	height:0;
	overflow:hidden;
}

#navbarLH .collapse.navbar-collapse.show{
	display:block;
	height:auto;
	overflow:visible;
}

#navbarLH .navbar-toggler{
	display:flex;
	align-items:center;
	gap:0;
	z-index:2;
}

#navbarLH .navbar-nav{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	margin:0;
	margin-left:auto;
	padding:0;
	margin-top:.3rem;
}

#navbarLH .nav-item{
	margin:0;
	padding:0;
	list-style:none;
}

#navbarLH .nav-link{
	display:flex;
	align-items:center;
	white-space:nowrap;
}

#navbarLH .navbar-toggler {border-color: rgba(104,104,104, 0.5);}
#navbarLH .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(104,104,104, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}
#navbarLH .navbar-toggler-icon{
	display:inline-block;
	width:1.6rem;
	height:1.6rem;
}

/* Oculta el texto "Veure opcions ..." si no cargamos bootstrap CSS */
#navbarLH .navbar-toggler .sr-only{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	padding:0 !important;
	margin:-1px !important;
	overflow:hidden !important;
	clip:rect(0,0,0,0) !important;
	white-space:nowrap !important;
	border:0 !important;
}
#navbarLH .navbar-nav .nav-link {
	color: #686868;
	}

#navbarLH .navbar-nav:hover .nav-link {color: #686868}

#navbarLH .nav-link {
	border-bottom:1px dotted #848484;	
	margin:0;
	padding: .5rem .5rem;
	text-decoration:none; 
	font-weight:normal;
	}
#navbarLH .navbar-nav { margin-top:.3rem}	
#navbarLH .nav-item { margin:0; padding:0}
#navbarLH .nav-item:hover { background-color:#0194A8;}
#navbarLH .nav-item:hover .nav-link { color: #ffffff}

#navbarLH li:last-child .nav-link {border-bottom:0;}
#navbarLH .nav-icon img {display:none}
#navbarLH .nav-link span { display:block}

#navbarLH .navbar-brand {display:block; background:url(../img/barralh/logo_ajuntament_barra_sm.png) no-repeat 0 0; width:46px; height:46px; text-align:left}

#navbarLH .bl-1-dt { border-left:0;}
#navbarLH .br-1-dt { border-right:0;}

/* SM (landscape phones, 576px para arriba)*/
@media all and (min-width:576px) {

#navbarLH .navbar-brand {
  background:url(../img/barralh/logo_ajuntament_barra.png) no-repeat 0 0;
  width:155px;
  /* Conserva la proporción del logo al reducir el ancho */
  height:35px;
  background-size:155px 35px;
}


}

/* Mobile: al abrir el collapse, ponemos los items en columna */
@media (max-width: 991.98px){
	/* Queremos: primera fila (logo + botón) y segunda fila (menu) */
	#navbarLH .container-fluid{
		flex-wrap:wrap;
		align-items:flex-start;
		align-content:flex-start;
	}

	#navbarLH .collapse.navbar-collapse{
		width:100%;
		flex-basis:100%;
		margin-top:0;
		z-index:1;
		order:3;
	}

	#navbarLH .navbar-toggler{
		order:2;
		margin-left:auto;
		padding:0;
		margin-top:0;
		width:46px;
		height:46px;
		justify-content:center;
		align-items:center;
	}

	#navbarLH .navbar-brand{
		order:1;
		flex:0 0 auto;
	}

	#navbarLH .navbar-nav{
		flex-direction:column;
		flex-wrap:nowrap;
		align-items:flex-start;
		width:100%;
		margin-top:0;
	}
}

/* MD (tablets, 768px para arriba)*/
@media all and (min-width:768px) { 


}

/* LG (desktops, 992px para arriba)*/
@media (min-width: 992px){ 
#navbarLH .navbar-toggler{
	display:none;
}
#navbarLH .collapse.navbar-collapse{
	display:flex !important;
	height:auto !important;
	overflow:visible !important;
}
#navbarLH .nav-item:hover { background-color:transparent;}
#navbarLH .nav-item:hover .nav-link {color:rgba(104,104,104)}
#navbarLH .nav-link {border-bottom:0; margin:.1rem .2rem .1rem 0; font-weight:normal}
#navbarLH .nav-icon .nav-link { padding:.3rem .2rem .3rem .2rem !important;}
#navbarLH .bl-1-dt { border-left:1px dotted #848484;}
#navbarLH .br-1-dt { border-right:1px dotted #848484;}
#navbarLH .nav-icon img {display:block;}
#navbarLH .nav-link span { display:none;}
#navbarLH .navbar-nav { margin-top:0}

}

/* XL (large desktops, 1200px para arriba)*/
@media (min-width: 1200px) { 


 }