:root {
	--blau: #003A70;
	--vermell: #C00000;
	--blanc: #EBEFF4;
}

*{
	margin: 0;    /* RESET */
   	/*padding: 0;   /* RESET */
 }


 
 /* =========================== 
        TOP BAR HEADER   
   =========================== */
   
.miniBarraSuperior {
	width: 100%;
	background: var(--blau);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 0.3rem 0;
}

.xarxesHeader {
	display:flex;
	flex-wrap:wrap;
	gap:0.8rem;
	align-self:center;
	margin-top:0.45rem;
}

.headerIcoFacebook{height:2rem;}
.headerIcoTwitter{height:2rem;}
.headerIcoInsta{height:2rem;}
.headerIcoFacebookBlanc{height:1.5rem;}
.headerIcoTwitterBlanc{height:1.5rem;}
.headerIcoInstaBlanc{height:1.5rem;}
.headerIcoYT{width:2rem;margin: auto 0.8rem;}
 
 .margin2 {
 	margin: 0px 2rem;
 }
 
 
.logo{
	min-width:250px;
	width:25%;
	margin-left:3rem;
	float:left;
	
	height:3rem;
	padding: 1.2rem 0px 1.5rem 0.3rem;  /* TOP RIGHT BOTTOM LEFT*/
	transition: 0.3s; /* Adds a transition effect when the padding is decreased */
}

.logofepolHeaderImg{
	height:4.5rem;
	margin:auto;

	transition: 0.3s; /* Adds a transition effect when the padding is decreased */
}

a:visited{ color: inherit; }

.topBar{
	position: fixed; /* Sticky/fixed navbar */
  	top: 0; /* At the top */
  	
	font-size:1rem; /* 1 rem = 16px - mejor usar la unidad "rem" para responsive designs*/
 	width: 100%;
 	z-index:100; /*Para que el header este encima de cualquier otro objeto que pueda estar en la web*/
 	
 	background-color: #fff;
 	color:#fff;
 	transition: 0.3s; /* Adds a transition effect when the padding is decreased */
 	
 	-webkit-box-shadow: 0px 5px 6px -4px rgba(0,0,0,0.48);
    /* -moz-box-shadow: 0px 5px 6px -4px rgba(0,0,0,0.48); */
    box-shadow: 0px 5px 6px -4px rgba(0,0,0,0.48);
}   

/* Ocultem la barra */
.barraHeaderPCInferior{
	width:100%;
	background: var(--blau);
	height:0px;
	z-index:10;
}

.barraHeaderInferior{
	width:100%;
	background: var(--blau);
	height:0.3rem;
	z-index:10;
	display:none;
}
   
.divContenidorItemsHeader{
	color: var(--blanc);
	display:flex;
	justify-content:right;
	
	height:3.5rem;
	padding: 1.2rem 0px 1.5rem 0.3rem;  /* TOP RIGHT BOTTOM LEFT*/
	transition: 0.3s; /* Adds a transition effect when the padding is decreased */
}

.menuButonDiv{
	display:none;
	float:left;
	height:5rem;
	z-index:100;
	width:10%;
}

.itemHeaderSmall{
	cursor:pointer;
	color:#37474F;
	font-family: 'Fira Sans', sans-serif;
	font-weight:bold;
	font-size: 0.rem; /* 1 rem = 16px - mejor usar la unidad "rem" para responsive designs*/
	margin:auto 10px;
	
	transition: 0.3s; /* Adds a transition effect when the padding is decreased */
}

.itemHeaderSmall a{
	text-decoration:none;
	color:#37474F;
}

.itemHeaderSmall a:hover{
	color: var(--blau);
	font-weight:bold;
}

.itemHeaderSmall:hover{
	color: var(--blau);
}


.itemHeader{
	cursor:pointer;
	color:#37474F;
	font-family: 'Montserrat', sans-serif;
	font-weight:bold;
	font-size: 1rem; /* 1 rem = 16px - mejor usar la unidad "rem" para responsive designs*/
	margin:auto 10px;
	border-bottom: 2px solid white;
	padding-bottom: 5px;
	
}

.itemHeader a{
	text-decoration:none;
	color: var(--blau);
}

.itemHeader:hover{
	border-bottom: 2px solid var(--blau);
}


.itemHeaderWhite{
	cursor:pointer;
	color:white;
	font-family: 'Fira Sans', sans-serif;
	font-weight:bold;
	font-size: 0.9rem; /* 1 rem = 16px - mejor usar la unidad "rem" para responsive designs*/
	
	transition: 0.3s; /* Adds a transition effect when the padding is decreased */
}

.itemHeaderWhite a{
	text-decoration:none;
	color:white;
}

.itemHeaderWhite a:hover{
	color:#5F5F61;
	font-weight:bold;
}

.itemHeaderWhite:hover{
	color:#5F5F61;
}



.itemLinkMenu{font-size:1.2rem;}



 /* ======================================================  
	BARRA DE NAVEGACIÓN IZQUIERDA DE LA PAGINA FORMATO MOBIL
 /* ====================================================== 

 /*----- Toggle Button -----*/
.toggle-nav {
	display:inline-block;
	/*border-radius:3px;
	text-shadow:0px 1px 0px rgba(0,0,0,0.5);*/
	color:#616161;
	font-size:2rem; /* 1 rem = 16px - mejor usar la unidad "rem" para responsive designs*/
	transition:color linear 0.15s;
	text-decoration:none;
	outline: none; /* Eliminem el borde que es fa al clicar a sobre*/
	
	display:none;  /*  EN EL DISSENY WEB ELIMINEM EL BOTO DE MENU DE l'ESQUERRE*/
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -mos-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.toggle-nav:hover, .toggle-nav.active {
	text-decoration:none;
	color: var(--blau);
	transform: scale(0.8);
}


/* =========================== 
        ESTILS DE LA CERCA   
   =========================== */
  
 .cercaMainDiv{
  	background:#262626;
  	height:3rem;
  	display:flex;
  	justify-content:center;
 }
  
 .cercaContainer{
 	margin:auto;
 	width:60%;
 	display:flex;
 	justify-content:center;
 	overflow:hidden;
 }

.inputCerca{
	width:97%;
	margin:auto;
	padding:0.3rem;
	background:#262626;  
	box-sizing: border-box;
	outline:none;
	border:none;
	color:white;
	font-size:0.9rem;
}

.inputCerca::-webkit-input-placeholder {
  font-size:0.9rem;
  color: #9E9E9E;
}

.inputCerca::-moz-placeholder {  /* Firefox 19+ */
  font-size:0.9rem;
  color: #9E9E9E;  
}

.inputCerca:-ms-input-placeholder {
  font-size:0.9rem;
  color: #9E9E9E;  
}

.inputCerca::placeholder {
  font-size:0.9rem;
  color: #9E9E9E;   
}


/* ==========================================
	MENU DESPLEGABLE, DISPOSITIUS MOBILS
  ==========================================*/
.slider {
	text-align:left;
	background: white;
	padding: 0;
    list-style-type: none;
	overflow:hidden;
	
	transition-property:max-height;
	transition-duration:250ms;
	transition-timing-function:ease-out;
}

.slider li {
	font-family: 'Montserrat', sans-serif;
	font-size:0.9rem; /* 1 rem = 16px - mejor usar la unidad "rem" para responsive designs*/
	cursor:pointer;
	color: #303030;
	list-style:none;
	border-bottom:1px solid #E0E0E0;
}


.slider a {
	text-decoration:none;
	padding: 15px 30px 15px 30px;  /* TOP RIGHT BOTTOM LEFT*/
	display:block;
}

.slider a:hover {
	color: var(--blau);
	font-weight: bold;
}

.slider a:focus {
    outline: none;
}


.categoriaItem{
    display:inline-block;
    width:100%;
	padding: 10px 50px 10px 50px;  /* TOP RIGHT BOTTOM LEFT*/
	border-bottom:1px solid #E0E0E0;
	margin-left:2rem;
	margin-right:1rem;
    font-size:1.2rem;	
}

.categoriaItem:hover {
	color: white;
	background: var(--blau);
}


.icnDesplegar{
	height:20px;
	width:50px;
	display:inline-block;

	
	background-image: url(../../../public/img/web_publica/tancar.png);
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: center;
}

.icnReplegar{
	height:20px;
	width:50px;
	display:inline-block;
	float:right;
	
	background-image: url(../../../public/img/web_publica/desplegar.png);
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: center;
}



.llistatItemsContainer{
	background:#262626;
	min-width:18rem;
	position:absolute;
	margin-top:1.3rem;
	z-index:100;
	padding: 1rem 0 1rem 0;  /* TOP RIGHT BOTTOM LEFT*/
}

.categoriaItem2{
	display:block;
	font-size:0.9rem; /* 1 rem = 16px - mejor usar la unidad "rem" para responsive designs*/
	padding: 0.5rem 2rem 0.5rem 2rem;  /* TOP RIGHT BOTTOM LEFT*/
}

.categoriaItem2:hover {
	background: var(--blau);
}



/* .........................................................................................
    PANTALLES PETITES AMAGUEM EL MENU DE L'ESQUERRA I MOSTREM EL BOTO DE MENU DESPLEGABLE
   .........................................................................................
 */
@media screen and (max-width: 1250px) {
	
	 .miniBarraSuperior{justify-content: center;gap:2rem;padding:0.3rem 0;}
	 .cercaHeader{display:none;}
     .itemBarraBuit{width:0rem;}

    .divHeaderContainer{padding:0.5rem 0;}

	/* EN DISPOSITIUS MOBILS AMAGUEM ELS BOTONS DE LA TOP BAR */
	.divContenidorItemsHeader{display:none;}
	
	#divContenidorComteUsuari{display:flex; justify-content:center; height:5rem;} /* Mostrem boto compte usuari */
	
	.logo{height:5rem;min-width:100px;overflow:hidden;text-align:center;float:left;padding:0;width: calc(90% - 5rem);} /* 5 rem és la mida del icona per accedir al compte d'usuari */
	.logofepolHeaderImg{height:2.5rem;margin: 1rem auto;}
	.menu ul.active {display:block;}
	
	.toggle-nav {
		display:block;  /*  EN EL DISSENY MOVIL MOSTREM EL BOTO DE MENU DE l'ESQUERRE*/
	}
	
	.menuButonDiv{
		display:flex;
		justify-content:center;
		cursor:pointer;
	}
}

/*
 ==========================================
 		P A N T A L L A   F I N S   580px
 ==========================================
 */

@media screen and (max-width: 580px) {
	
	.miniBarraSuperior{gap:0;padding:0;}
	.telefonHeader{margin:0 auto;}
	.textTelefon{max-width: 170px;}
	.xarxesHeader{display:none;}
	.logofepolHeaderImg{height:2rem;margin:1rem auto;}
}

    

/* ==================================== */
/* ALTRES                               */
/* ==================================== */
.clear{clear:both;}
.floatedLeft{float:left;}
.floatedRight{float:right;}