body {
	font-family:Roboto, Calibri, Arial, Sans-serif;
	color: black;
	background-color: white;
	background-image:url('img/fons_web4.gif');
    background-repeat:repeat-x;
    margin-left:0px;
    margin-right: 0px;
}
html, body {
	height:100%;
}

#wrapper{
	height: 100%;
	min-height:100%;
	height:auto!important;
}
*{
	margin-top: 5;
	box-sizing: border-box;
	margin-bottom: 0;
	padding:0;
}
h1{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 3px;
	position:absolute;
	top:83px;
	color:black;
	font-size:13px;
	left:360px;
	font-style:normal;
	font-weight:400;
}
h2{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	/*letter-spacing: 4px;*/
	position:absolute;
	top:140px;
	color:#04A6E7;
	font-size:15px;
	width: 99%;
	text-align: center;
	font-style:normal;
	font-weight:400;
}
h3{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:relative;
	top:165px;
	color:#474747;
	font-size:14px;
	text-align:center;
	font-style:normal;
	font-weight:normal;
	width: 100%;
	max-width:960px;
	margin-left:auto;
	margin-right:auto;
}

h4{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:relative;
	top:167px;
	color:red;
	font-size:11px;
	text-align:center;
	font-style:normal;
	font-weight:normal;
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
h5{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:relative;
	float:left;
	height:95px;
	width:250px;
	color:#474747;
	font-size:14px;
	text-align:left;
	font-style:normal;
	font-weight:normal;
	margin-left:auto;
	margin-right:auto;
}
h6{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:absolute;
	top:-25px;
	color:#535353;
	font-size:15px;
	text-align:center;
	font-style:normal;
	font-weight:normal;
	margin-left:auto;
	margin-right:auto;
	z-index:2
}

.breadcrumb { 
	font-family: Roboto, Calibri, Arial, Sans-serif;
	display: block;
	top: 140px;
	position: relative;
	width: 960px;
	margin-left:auto;
	margin-right:auto;
	line-height: 1.60em;
}
a.crumb:hover{
	text-decoration: underline;
	color:#04A6E7;
}
a.crumb {
	text-decoration: none;
	font-size:14px;
	color: #04A6E7;
}
a.current {
	color: #535353; 
	font-size: 14px; 
	text-decoration: none;
}
#topmenu{
	top:155px;
    position:relative;
    margin-left: auto;
   	margin-right: auto;
   	margin-bottom:8px;
    border:none;
    width: 100%;
  	max-width:960px;
  	height:44px;
  	-moz-border-radius:4px;
  	-webkit-border-radius:4px;
 	border-radius:4px;
 	-moz-box-shadow:0 0 3px #AAAAAA;
  	-webkit-box-shadow:0 0 3px #AAAAAA;
 	box-shadow:0 0 3px #AAAAAA;
 	background:url(img/menu_fons.png);
}
#topmenu ul{
	text-align:center;
	margin:0px;
	padding:0px;
}
#topmenu ul li{
  	  /* Every thumbnail is a li element */
	width:110px;
  	display:inline-block;
   	list-style:none;
   	height:44px;
   	overflow:hidden;
        
}
#topmenu ul li a:hover{
    
  	  background:url(img/fons_li.png) no-repeat;
}

#topmenu ul li a{
  	display:block;
	decoration:none;
	text-decoration:none;
	color:#ffffff;
	text-transform:uppercase;
   	font-family:Roboto, Calibri, Arial, Sans-serif;
   	font-size:15px;
   	height:44px;
   	padding-top:13px;
   	   
    
}

#lang{
	position:relative;
	text-align:right;
	font-style:normal;
	top:145px;
}
#lang ul{
	margin:0px;
	padding-right:10px;
}
#lang ul li{
  	  /* Every thumbnail is a li element */
	width:20px;
	text-align: center;
  	display:inline-block;
   	list-style:none;
   	overflow:hidden;
        
}
#lang ul li a:hover{
    
  	  color:#ffffff;
}

#lang ul li a{
	
  	display:block;
	decoration:none;
	text-decoration:none;
	color:#04A6E7;
	text-transform:uppercase;
   	font-family:Roboto, Calibri, Arial, Sans-serif;
   	font-size:15px;
   	font-weight:lighter;   
}
p.texto{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:relative;
	font-size:14px;
	font-style:normal;
	font-weight:normal;
	color: #474747;
	line-height: 1.36em;
	text-decoration: none;
	padding: 5px;
}

p.codi{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:relative;
	font-size:17px;
	color: white;
	background-color: #122d45;
	text-align:center;
	/*width: 100px;*/
	font-style:normal;
	font-weight:bold;
	display:inline-block;
	line-height:1.60em;
	padding: 5px;

}

p.titulo{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	/*position:relative;*/
	margin-bottom:15px;
	font-size:29px;
	color: #474747;
	background-color: white;
	text-align:center;
	width: 100%;
	font-style:normal;
	font-weight:lighter;
	display:inline-block;
	line-height:1.20em;
}
p.notes{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:relative;
	font-size:11px;
	color: #474747;
	text-align:justify;
	padding-top: 8px;
	width: 500px;
	height: 90px;
	font-style:normal;
	font-weight:normal;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
p.parraf{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:relative;
	font-size:14px;
	color: #474747;
	text-align:justify;
	padding-top: 4px;
	font-style:normal;
	font-weight:normal;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
p.titol{
	font-family: Roboto, Calibri, Arial, Sans-serif;
	letter-spacing: 0px;
	position:relative;
	font-size:16px;
	color: #000000;
	text-align:justify;
	padding-top: 4px;
	font-style:normal;
	font-weight:bold;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
#contingut0 ul li{
  	font-size:14px;
  	color:#474747;
  	display:inline-block;
   	list-style:none;
   	overflow:hidden;
        
}
#esq2 {
  	position:absolute;
	/*left:680px;*/
	right: 10%;
	top:0px;
	z-index:-1;
}
#cap {
	border-style:none;
  	position:absolute;
	left:50px;
	top:80px;
	z-index:0;
}
#main {
	padding-bottom: 100px;
}
#contingut0 {
	position:relative;
	margin-top:165px;
	margin-bottom:8px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 4px;
	padding-right: 4px;
	width: 99%;
	max-width: 970px;
	margin-left:auto;
	margin-right:auto;
	background:transparent;
	z-index:0;
}
#contingut {
	position:relative;
	margin-top:180px;
	margin-bottom:8px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;
	width: 100%;
	max-width: 960px;
	/*height: 380px;*/
	margin-left:auto;
	margin-right:auto;
	background:#ffffff;
	/*border-radius: 5px; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 0 1px #000;
	-webkit-box-shadow: 0 0 1px #000;
	box-shadow: 0 0 1px #000;*/
	z-index:0;
}
#contingut1 {
	position:relative;
	margin-top:180px;
	margin-bottom:8px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 4px;
	padding-right: 4px;
	max-width: 970px;
	/*height: 350px;*/
	margin-left:auto;
	margin-right:auto;
	background:#ffffff;
	z-index:0;
}
#contingut2 {
	position:relative;
	margin-top:180px;
	margin-bottom:8px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 4px;
	padding-right: 4px;
	width: 480px;
	height: 350px;
	margin-left:auto;
	margin-right:auto;
	background:#ffffff;
	z-index:0;
}


/* El contenedor del enlace */
.contenedor-imagen {
  position: relative;    /* Obligatorio: sirve de ancla para el texto */
  display: block;        /* Para que ocupe su propia línea (uno debajo del otro) */
  margin-bottom: 1px;   /* Espacio entre cada bloque de imagen */
  width: fit-content;    /* El contenedor se ajusta al tamaño de la imagen */
}

/* La imagen 
.contenedor-imagen img {
  display: block;
  width: 100%;           /* O el ancho que desees 
  height: auto;
}*/

/* El texto que flota encima */
.texto-encima {
  position: absolute;    /* Se mueve libremente sobre el padre relativo */
/*  top: 50%;               Lo baja al centro vertical */
/*  left: 50%;              Lo mueve al centro horizontal */
  transform: translate(-50%, -50%); /* Ajuste perfecto para centrado total */
  white-space: nowrap;
  /* Estilos visuales */
  color: white;
  font-weight: lighter;
  font-size: clamp(25px, 4vw, 45px);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Sombra para que se lea bien */
  pointer-events: none;  /* Hace que el click pase a través del texto al enlace */
  z-index: 5;
}



#menu1 {
	position: relative;
	width: 100%;
	max-width: 972px;
	border: 0px;
	z-index:0;
}
#menu1 img {
	position: relative;
	vertical-align: middle;
	border: 0px;
	width: 99%;
	max-width: 972px;
	margin-right:4px;
	margin-top:3px;
	margin-bottom:4px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 0 3px #888;
	-webkit-box-shadow: 0 0 3px #888;
	box-shadow: 0 0 3px #888;
	z-index:1;
}
#menu1 img:hover{
	-moz-box-shadow: 0 0 7px #000;
	-webkit-box-shadow: 0 0 7px #000;
	box-shadow: 0 0 6px #000;
	z-index:1;
}
#menu2 {
	position: relative;
	width: 480px;
	border: 0px;
	z-index:0;
}
#menu2 img {
	position: relative;
	border: 0px;
	margin-right:4px;
	margin-top:3px;
	margin-bottom:4px;
	width: 236px;
	height: 310px;
	background:#eeeeee;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 0 3px #888;
	-webkit-box-shadow: 0 0 3px #888;
	box-shadow: 0 0 3px #888;
	z-index:1;
}
#menu2 img:hover{
	-moz-box-shadow: 0 0 6px #000;
	-webkit-box-shadow: 0 0 6px #000;
	box-shadow: 0 0 6px #000;
	background-image:url("img/shadow.png");
	width: 236px;
	height: 310px;
	z-index:1;
}
#menu3 {
	display: flex;            /* Activa el modo flexible */
	flex-wrap: wrap;
	justify-content: center;  /* Centra las imágenes horizontalmente */
	align-items: center;      /* Centra las imágenes verticalmente (si tienen alturas distintas) */
	gap: 5px;                 /* Crea espacio uniforme entre las imágenes sin usar márgenes manuales */
	width: 100%;              /* Asegura que el div ocupe todo el ancho de 'contigut' */
	position: relative;
	max-width: 972px;
	border: 0px;
	z-index:0;
}
#menu3 img {
	position: relative;
	border: 0px;
	/*margin-right:4px;*/
	margin-top:3px;
	margin-bottom:4px;
	width: 236px;
	height: 310px;
	background:#eeeeee;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 0 3px #888;
	-webkit-box-shadow: 0 0 3px #888;
	box-shadow: 0 0 3px #888;
	z-index:1;
	/*max-width: 30%;           /* Evita que las imágenes crezcan de más y se amontonen */
	/*height: auto;             /* Mantiene la proporción */
}
#menu3 img:hover{
	-moz-box-shadow: 0 0 6px #000;
	-webkit-box-shadow: 0 0 6px #000;
	box-shadow: 0 0 6px #000;
	background-image:url("img/shadow.png");
	width: 236px;
	height: 310px;
	z-index:1;
}
table.foto-pie {
  width: 100%;
  border-collapse: collapse; /* Elimina espacios entre bordes */
  table-layout: fixed;       /* Fuerza a que las celdas respeten el ancho */
  word-wrap: break-word;     /* Rompe palabras largas para que no desborden */
}
table.foto-pie img {
  max-width: 100%;  /* La imagen no desbordará la celda */
  height: auto;     /* Mantiene la proporción original */
  display: block;   /* Elimina espacios en blanco extraños debajo de la imagen */
}

table.tableizer-table {
	border: 0px solid #CCC; 
	font-family: Roboto, Calibri, Arial, Sans-serif; 
	font-size: 13px;
	margin: 0 auto;

}
.tableizer-table td {
	background-color: #c9c9c9;
	color:#000000;
	padding: 3px; 
	margin: 3px; 
	border: 1px solid #ffffff;
	text-align:center;
}
.tableizer-table th {
	background-color: #535353;
	border: 1px solid #ffffff; 
	color: #FFF;
	padding: 4px;
	font-weight: bold;
	text-align:center;
}
footer{
	border-style:none;
  	margin-left:auto;
	margin-right:auto;
	margin-top: -100px;
	text-align:center;
	position:relative;
	/*bottom:0;*/
	height:100px;
	clear:both;
	width:100%;
	background-image:url(img/footer1.png);
	background-position:left top;
	background-repeat:repeat-x;
	
}	
#peu {
	padding-top: 8px;
	width: 100%;
	z-index:0;
	
}
#peu a:link {
	color:#ffffff;
	text-decoration: none;
}
#peu a:visited {
	color:#ffffff;
	text-decoration: none;
}
#peu a:hover {
	color:#0B84D3;
	font-weight: normal;
	text-decoration: underline;
}	
.peu_central{
	margin-top:-16px;
	
}
.clearpeu:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearpeu {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearpeu {
	 height: 1%;
}
.clearpeu {
	display: block;
}
/* End hide from IE-mac */
.imgcontainer {
	position:relative;
	float:left;
	
}
.caption {
	position:absolute;
	bottom:0;
	margin-bottom:0px;
	left:0;
	font-family: Roboto, Calibri, Arial, Sans-serif;
	font-size:14px;
	font-weight:normal;
	text-align:center;
	background:#122d45;
	width:236px;
	height:45px;
	line-height:45px;
	color:#fff;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	z-index:2;
}
.caption5 {
	position:absolute;
	bottom:0;
	margin-bottom:-30px;
	padding-top:5px;
	left:0;
	font-family: Roboto, Calibri, Arial, Sans-serif;
	font-size:11px;
	font-weight:normal;
	text-align:center;
	background:#535353;
	width:100px;
	height:33px;
	color:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	z-index:2;
}