@font-face {
		font-family: "Endestry";
		src: url("fonts/Endestry.ttf");		
	}
	@font-face {
		font-family: "Celestina";
		src: url("fonts/Celestina.otf");
	}		

	:root {
	  --color_roig: #CE0000;
	  --color_groc: #ffbe3b;
	  --color_blau: #0743B2;	
	  --color_blanc: #f4f4f4;		
	  --color_taronja: #ff6600;		  	
	  --color_taronja_clar:	#f6a36b;
	  --color_blue: #2196F3;
	  --color_blau_clar: #b0b1f1;	 
	  --color_blau_clar_transp: #b0b1f14f;
	  --color_blau_fosc: #13223c;
	  --color_roig_fosc: #3b0202; /*#682c2c;*/
	  --color_roig_transp: #CE000033;
	  --color_magenta: #ce3270;
	  --color_magenta_transp: #ce32701c;	  
	  --color_gris: #b8b3b3;
	}  

	* {
		padding:0;
		margin:0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;			
	}	
	
	a {
		text-decoration:none; 			
		color: var(--color_roig);
	}


	 body,input,textarea,select{
		font-family: 'ubuntu', 'Arial', sans-serif;
		font-size: large;
		color:#333;
		font-weight:normal;
		text-align:left
	}		

	BODY {		
		margin: 0;
		background-color:#fff;
		background: url(img/bg120pc.png);
		background-repeat: no-repeat;
		background-size: cover;  
		color: var(--color_roig_fosc);						
	}		
	
	h2, h3 {
		display:inline;
	}
	
	fieldset{
		border-bottom: 2px solid #fff;
		border-top: 0px;
		margin-bottom: 0;
		border-left: 0px;
		border-right: 0px;
		text-align: center;
	}
	legend {
		margin-right: 0px;
		margin-top: 50px;
		padding: 12px 15px;
		background: white;
		border-radius: 0px 0px 0px 12px;
		text-align: right;
    }
	
	.contenidor {
		width:100%;
		border-spacing: 0px;
		border-collapse: separate;				
	}
	
	.logo {
		width: 125px; 
	}
	
	.contingut {
		margin: auto;
		max-width: 1200px;
		border-spacing: 20px;
		border-collapse: separate;		
		color: var(--color_blau_fosc);		
	}
	.contingut_capcelera {
		margin: auto;
	}	
	
	.capcelera {
		margin: auto;
		width: 100%;
		text-align: center;			
		background-color: var(--color_roig);
		color: var(--color_blanc);		
		padding-top: 50px;			
		padding-bottom: 50px;			
	}	

	.subcapcelera {
		margin: auto;
		width: 100%;
		text-align: center;			
		background-color: var(--color_roig_transp);
		color: var(--color_blau_fosc);		
		padding-top: 5px;			
		padding-bottom: 5px;			
	}	
	.subcapcelera_anterior {
		margin: auto;
		width: 100%;
		text-align: center;			
		background-color: var(--color_gris);
		color: var(--color_blau_fosc);		
		padding-top: 5px;			
		padding-bottom: 5px;			
	}	

	.cos {
		margin: auto;			
		width: 100%;
		text-align: center;		
	}	
	
	.peu {
		margin: auto;	
		background-color: var(--color_blau);						
		width: 100%;
		text-align: center;		
		color: var(--color_blau_clar);	
		height: 100px;			
		font-size: 14px;			
	}	
	
	.peu a {
		color: var(--color_taronja);
	}
	.peu p {
		margin-top:8px;
	}
	
	.diferent { 
		background: url(img/bgllibres2.jpg);
		background-repeat: no-repeat;
		background-size: cover;  			
		background-color: var(--color_roig_transp);	
		/*
		-webkit-box-shadow: inset 0px 15px 38px -20px rgba(0,0,0,0.75);
		-moz-box-shadow: inset 0px 15px 38px -20px rgba(0,0,0,0.75);
		box-shadow: inset 0px 15px 38px -20px rgba(0,0,0,0.75);		
		*/
	}
	
	.taula_cafe {
		font-family: 'Ubuntu', 'Shadows Into Light', cursive; 
		font-size: 17px;
		color: var(--color_blau_fosc);
		float: right;
		margin-right: 40px;
		margin-top: 0px; 
		background: #fbe274; //#fdf4cd;
		padding: 10px 20px;	
		border-radius: 0px 0px 15px 15px;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;		
	}

	.destacat {
		font-size: x-large;	
		color: var(--color_blanc);	
		background-color: var(--color_blau);		 			
		padding: 1px 15px;
	}
	.destacat2 {
		font-size: x-large;	
		color: var(--color_blanc);	
		background-color: var(--color_blau);					
		padding: 1px 10px;
	}
	.destacat4 {
		-webkit-text-stroke: 2px #ffffff;
		font-size: xxx-large;	
	}
	
	.titol, .titol a {
		font-family: "Celestina","Endestry", cursive;
		font-size: 120px;	
		color: var(--color_blanc);		
		text-align: center;
	}
	.subtitol {
		color: var(--color_blanc);		
		text-align: center;
	}
	.subtitol a {
		color: var(--color_taronja_clar);		
	}

	.top10 {
		margin-top: 10px;
	}	
	.top50 {
		margin-top: 50px;
	}
	.top100 {
		margin-top: 100px;
	}
	
	
 	.titol_pagina, .titol_pagina a {
		font-family: 'Celestina','Droid Sans', 'PT Sans','Noticia Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 	 
 		font-size: 50px;
 		color: var(--color_roig_fosc);
		/*font-weight: bold;*/
 		text-decoration: none;
 	}

	.titol_pagina:before {
		width: 100px;
		content: url(img/rosa.png);
		position: relative;
		z-index: 100000;
		left: -8px;
		top: 40px;
		padding-left: 60px;		
	}
 		
	.taula_menu {
		max-width: 1200px;
		margin:auto;
		color: var(--color_blau_fosc);	
	}
	.taula_menu TD {
		text-align: center;
		padding: 4px 18px;
		border-right: 1px solid var(--color_roig);
	}
	.taula_menu TD:last-child {
		border-right: 0px;
	}   

	.taula_menu TD A {
		color: var(--color_blau_fosc);	
	}
	.taula_menu TD :hover {
		background-color: var(--color_roig_transp);
	}
	.taula_menu TD:last-child {
	}
	
 	.llista TD {
 		background-color:#e6e6e6;
 		padding: 4px 4px 4px 8px;
 	}

 	.llista TH {
 		background-color:#FFFFFF;
 		padding: 14px 4px 4px 8px;
 	}
 	.llista tr:hover td{ background-color:#FFFFFF; color: #000000;} 	
	
	.petita {
		font-size:14px;
	}
		
	#mapid { 
		width: 100%; 
		height: 600px; 
		text-align: center; 
		vertical-align: middle; 
		border: 3px solid var(--color_roig_fosc); 
	}
	
	.taula_popup {
		border: 1px solid #363636;
		font-family: 'Ubuntu';	
		width:300px;
		font-size: small;
	}		
	.taula_popup TD {
		padding: 3px;
	}
	

      .blink { 
      	font-size:16px;
      	line-height:40px;
      	color: #DA121A;
      	background-color: #b5e2ff;
      	padding: 10px 10px;
      	line-heigth: 15px;
        animation: blink-animation 1s steps(2, start) infinite; 
        -webkit-animation: blink-animation 1s steps(2, start) infinite;
      }
      @keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }
      @-webkit-keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }  	
	/* ------ columna dreta portada --------*/
	
	.columna_dreta {
		width: 25%;
		/*background-color: var(--color_blau_clar_transp);*/
		vertical-align: text-top;
		text-align: center; 
	}
	
	.contingut_columna_dreta {
		width: 100%;
		font-size: 16px;
		text-align: center;
		color: var(--color_blau_fosc);
	}

	.contingut_columna_dreta TH {
		font-size: 20px;
		background-color: var(--color_blau_clar);		
		padding-top: 20px;
		padding-bottom: 15px;						
	}
	.contingut_columna_dreta TD {
		padding: 10px;
	}
	.llibre_portada {
		width: 200px;
		box-shadow: rgb(0 0 0 / 15%) 5.95px 5.95px 2.6px;				
	}	
		
	/* ------ errors --------*/

	.error   {
		width:80%;
		position:relative;
		border: 3px solid #FC0000;
		font-size: 18px;
		font-weight:bold;
		color: #FF0000;
		text-decoration: none;
		padding: 1.2em 3.1em;
		margin: auto;
		background-color: #fecccc;
		text-align:center;
		border-radius: 6px;
	}
		
	.noerror   {
		width: 80%;
		margin: auto;
		border: 2px solid var(--color_blau);
		font-size: 18px;
		font-weight: bold;
		color: var(--color_blau);
		text-decoration: none;
		padding: 1.2em 3.1em;
		background-color: #d5d6f2;
		text-align: center;    		
		border-radius: 6px;
	}		
	
	
	/* --------- botons ----------- */
	
	.boto1 {
		color: #363636;
		font-family:'Ubuntu', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 	
		font-size:20px;
		padding: 4px 20px;
		border: 1px solid #1465fb;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		-o-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		cursor: pointer;
	
		background: #69b0f7; /* Old browsers */
		background: -moz-linear-gradient(top, #69b0f7 32%, #1c83fb 82%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#69b0f7), color-stop(82%,#1c83fb)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #69b0f7 32%,#1c83fb 82%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #69b0f7 32%,#1c83fb 82%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #69b0f7 32%,#1c83fb 82%); /* IE10+ */
		background: linear-gradient(top, #69b0f7 32%,#1c83fb 82%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69b0f7', endColorstr='#1c83fb',GradientType=0 ); /* IE6-9 */
	
		background-color:#ff9430; /* per a IE */
	}
	
	.boto1:link,.boto1:visited {
		color: #363636;
		text-decoration:none;
	}
	
	.boto1:active {
			position:relative;
			top:2px;
			-moz-box-shadow:0px 0px 0 #819F45;
			-webkit-box-shadow:0px 0px 0 #819F45;
			//background: -moz-linear-gradient(center top , #A5C956 0%, #CDEB8E 100%) repeat scroll 0 0 transparent;
			//background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(100%,#cdeb8e));
		}
	
	
	.boto2 {
		color: #363636;
		font-family:'Ubuntu', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 	
		font-size:15px;
		padding: 4px 10px;
		border: 1px solid #1465fb;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		-o-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		cursor: pointer;	
		background: #307cff; 
	}
	
	.boto2:link,.boto2:visited {
		color: #fff;
		text-decoration:none;
	}
	
	.boto2:active {
			position:relative;
			top:2px;
			-moz-box-shadow:0px 0px 0 #819F45;
			-webkit-box-shadow:0px 0px 0 #819F45;
			//background: -moz-linear-gradient(center top , #A5C956 0%, #CDEB8E 100%) repeat scroll 0 0 transparent;
			//background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(100%,#cdeb8e));
	}		
		
	.boto3 {
		background-color: var(--color_groc);
		color: #333;
		font-weight: 600;
		line-height: 1.333;
		box-shadow: 0 2px 0 0 #e87700;
		position: relative;	
		padding: 8px 18px;	
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-o-border-radius: 6px;			
	}	
		
		
 	/* --------- formulari ----------- */

 	.formulari {
		width: 100%;
		background-color:#FFFFFF; 	
		margin-top: 50px;
 	}
 	.formulari TH {
 		background-color:#dfdbdb;
 		padding:20px;
 	}	
 	.formulari TD {
 		padding: 8px 26px;
 	}
	.formulari tr:nth-child(odd) {
		background-color: #ffffffb8;
	}
	.formulari tr:nth-child(even) {	
		background-color: var(--color_magenta_transp);
	} 	 
	.formulari_desc {
		font-size:12px;
	} 	

 	.formulari_ob {
 		background-color: var(--color_groc) !important
 		;
 	} 	
 	.input1 {
		background-color:#f4f4f4;
		border:2px solid var(--color_magenta);
		border-radius: 3px;
		color:#333;
		width: 90%;
		padding: 10px 10px;
 	}

 	.input1nw {
		background-color:#f4f4f4;
		border:2px solid var(--color_magenta);
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		color:#333;
		padding: 10px 10px;
 	}

 	.input1error {
		background-color:#ffc1c1;
		border:2px solid var(--color_roig);
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		color:#c0000c;
		width: 90%;
		padding: 10px 10px;
 	}

 	.input1nwerror {
 		font-size:16px;
		background-color:#ffc1c1;
		border:2px solid var(--color_roig);
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		color:#c0000c;
		padding: 10px 10px;
 	}
	
	
 	.input2 {
		background-color:#f4f4f4;
		border:2px solid var(--color_magenta);
		border-radius: 3px;
		color:#333;
		padding: 4px 4px;
 	}	
	
	
	.esponja {
		padding: 40px;	
	}

	.barruda {
		width: 90%;
		margin: auto;			
		border-spacing: 0px;
		border-collapse: separate;	
	}
	.barruda tr:nth-child(odd){
	  background-color: var(--color_roig_transp);
	}	
	.barruda tr:nth-child(even){
	  background-color: var(--color_blau_clar);
	}	
	.barruda TD {
		padding: 30px 20px;
	}

	.foto {
	  width: 100%;
	  height: 300px;
	  object-fit: cover;		
	}
	
	.foto_diada{
		max-width: 500px;
	}
	
	.foto_diada_petita {
		height: 150px;
		margin-left: 20px;
		margin-bottom: 20px;
		max-width: 100%; /* per a mobil */
		background: #fff;
		padding: 10px 10px 20px 10px;
		border: 1px solid #333;		
	}	
	.foto_diada_petita_mosaic {
		height: 200px;
		margin-left: 0px;
		margin-bottom: 0px;
		max-width: 100%; /* per a mobil */
		background: #fff;
		padding: 1px;
		border: 0px solid #333;		
	}	
	
	
	.fotorab {
		width:44%; 
		float:left; 
		margin:0px 20px 20px 0px; 
		padding:20px;  
		background:#fff; 
		border: 1px solid #ccc;
	}
	
	
	
	/* Tooltip container */
	.tooltip {
	  position: relative;
	  display: inline-block;
	}

	/* Tooltip text */
	.tooltip .tooltiptext {
	  visibility: hidden;
	  width: 120px;
	  background-color: #4080ff;
	  color: #fff;
	  text-align: center;
	  padding: 5px 0;
	  border-radius: 6px;

	  /* Position the tooltip text */
	  position: absolute;
	  z-index: 1;
	  bottom: 95%;
	  left: 50%;
	  margin-left: -60px;

	  /* Fade in tooltip */
	  opacity: 0;
	  transition: opacity 0.3s;
	}

	.div_fotos {
		margin:auto;
		max-width: 1000px;
	}
	
	.bg_senyera {
		background-image: linear-gradient(90deg, #ffe262 11%, 
			#da281c 11%, #da281c 22%, 
			#ffe262 22%, #ffe262 33%, 
			#da281c 33%, #da281c 44%, 
			#ffe262 44%, #ffe262 55%, 
			#da281c 55%, #da281c 66%, 
			#ffe262 66%, #ffe262 77%, 
			#da281c 77%, #da281c 88%, 
			#ffe262 88%, #ffe262 100%
			);
	}

	.bg_senyera_tr {
		background-image: linear-gradient(90deg, #ffe26266 11%, 
			#da281c66 11%, #da281c66 22%, 
			#ffe26266 22%, #ffe26266 33%, 
			#da281c66 33%, #da281c66 44%, 
			#ffe26266 44%, #ffe26266 55%, 
			#da281c66 55%, #da281c66 66%, 
			#ffe26266 66%, #ffe26266 77%, 
			#da281c66 77%, #da281c66 88%, 
			#ffe26266 88%, #ffe26266 100%
			);
	}
			
	/* Tooltip arrow */
	.tooltip .tooltiptext::after {
	  content: "";
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  margin-left: -5px;
	  border-width: 5px;
	  border-style: solid;
	  border-color: #555 transparent transparent transparent;
	}

	/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
	  visibility: visible;
	  opacity: 1;
	}	

	@media screen and (max-width: 900px) {
			BODY  {
				padding-top: 0px;
				font-size:18px;
			}  
			.contingut_capcelera {
				border-spacing: 0px;
			}
			.titol, .titol a, .titol_pagina {
				font-size: xx-large;			
			}
			.subtitol{
				font-size: small;			
			}
			.logo {
				width: 75px; 
			}
			.titol_pagina:before {
				text-align: right;			
			}
			
			.foto {
			  width: 90%;
			  height: 300px;
			}			
			.contenidor {
				padding-top:0px;
			}		
			.taula_menu {
				font-size: 16px;
			}	
			.taula_menu TD {
				padding: 2px 4px;			
			}	
			.laip {
				font-size: 12px;
			}			
			.taula_cafe {
				font-size: 16px;
				margin-right: 6px;
				margin-top: 0px; 
				padding: 4px 10px;	
			}

			.destacat {
				font-size: 24px;			
			}
			#mapid {     
				height: 300px;  
			}			
			.fotorab {
				width:100%; 
				float:left; 
				margin:0px 0px 20px 0px; 
				padding:10px;  
				background:#fff; 
				border: 1px solid #ccc;
			}			
			

	}