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

	:root {
	  --color_primari: #22c389;
	  --color_gris_clar: #e7e6e6;;	  
	  --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_primari_fosc: #3b0202; /*#682c2c;*/
	  --color_primari_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_primari);
	}


	 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_primari_fosc);						
	}	
	
	h1 {
		color: var(--color_primari);
		font-size: 60px;
	}	
	
	h2, h3 {
		display:inline;
	}
	
	fieldset{
		border: 2px solid var(--color_gris_clar);
		text-align: center;
		margin-top: 30px;
	}
	legend {
		margin-right: 10px;
		margin-top: 10px;
		padding: 6px 15px;
		background: var(--color_gris_clar);
		border-radius: 4px;
    }
	
	.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);		
		font-size: 20px;
	}
	.contingut_capcelera {
		margin: auto;
	}	
	
	.capcelera {
		margin: auto;
		width: 100%;
		text-align: center;			
		background-color: var(--color_primari);
		color: var(--color_blanc);		
		padding-top: 50px;			
		padding-bottom: 50px;			
	}	

	.subcapcelera {
		margin: auto;
		width: 100%;
		text-align: center;			
		background-color: var(--color_gris_clar);
		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;
	}
	
	.divfix {
		position: sticky;
		top: 700;
		float: right;
		background: #c4d9ff;
		padding: 9px 13px;
		font-size: 12px;
	    border-radius: 13px 0px 0px 13px;		
	}
	.arrow {	
		border: solid #ce0000;
		border-width: 0 8px 8px 0;
		display: inline-block;
		padding: 4px;
		margin-left: 10px;	
	}
	.right {
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
	}

	.left {
	  transform: rotate(135deg);
	  -webkit-transform: rotate(135deg);
	}

	.up {
	  transform: rotate(-135deg);
	  -webkit-transform: rotate(-135deg);
	}

	.down {
	  transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
	}		
	
	.diferent { 
		background: url(img/bgllibres2.jpg);
		background-repeat: no-repeat;
		background-size: cover;  			
		background-color: var(--color_gris_clar);

		/*
		-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);		
		*/
	}
	
	.nombre {
		float: left;
		background: #FF9800;
		border-radius: 125px;
		text-align: center;
		margin-right: 14px;
		padding: 15;	
		font-size: 40px;
		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;					
	}
				
	.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: 145px;	
		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: 'Droid Sans', 'PT Sans','Noticia Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 	 
 		font-size: 50px;
		border-left: 20px solid var(--color_magenta);
		padding-left: 20px;
 		color: var(--color_primari_fosc);
 		text-decoration: none;
 	}

	.xxxtitol_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_primari);
	}
	.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_primari_transp);
	}
	.taula_menu TD:last-child {
	}
	
 	.llista {
	 	width: 100%;
		margin-top: 3px;
		margin-bottom: 30px;	 
		font-size: 19px;
	    line-height: 28px;		
 	} 	
 	.llista TD {
 		padding: 40px 30px;
 	}

 	.llista TH {
 		background-color: var(--color_primari_transp);
 		padding: 14px 6px;
		color: var(--bgcolor3); 	
		font-size: larger;	
 	}
 	.llista TH A{	 	
	 	color: var(--bgcolor6);
	}	 	
	.llista tr:nth-child(odd) {
	  background-color: #f3f3f3;
	}
	.llista tr:nth-child(even) {
	  background-color: #dbedf7;
	}
	.llista tr:last-child {
	  border-bottom: 6px solid #ccc;
	}	
	
	
	.petita {
		font-size:14px;
	}
		
	#mapid { 
		width: 100%; 
		height: 600px; 
		text-align: center; 
		vertical-align: middle; 
		border: 3px solid var(--color_primari_fosc); 
	}
	.sobremapa {
		text-align: center;
		background-color: var(--color_primari);
		color: var(--color_blanc);				
		padding: 20px;
		font-size: larger;				
	}	
	.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;
        }
      }  	
      
	@keyframes blink {
		0% {opacity: 1;}
		50% {opacity: 0;}
		100% {opacity: 1;}
	}
	.boto_off {
		background-color: #3875D277;
		border: 0px;
		color: #333;	
		font-family: 'Ubuntu';
		padding: 1px 15px;
		animation: blink 1s infinite;
	}
	      

	/* contenidor general de fotos */
	.galeria{
		display:flex;
		flex-wrap:wrap;
		gap:25px;
		align-items:flex-start;
	}
	
	/* cada polaroid */
	.polaroid{
		background:white;
		padding:12px 12px 45px 12px;
		box-shadow:0 8px 18px rgba(0,0,0,0.25);
		border:1px solid #ddd;
		width:auto;
		max-width:260px;
		transition:0.3s;
		position:relative;
	}
	
	/* efecte al passar ratolí */
	.polaroid:hover{
		transform:scale(1.04) rotate(0deg) !important;
		z-index:10;
	}
	
	/* foto */
	.polaroid img{
		display:block;
		max-width:100%;
		height:auto;
	}
	
	/* peu de foto */
	.caption{
		position:absolute;
		bottom:12px;
		left:0;
		width:100%;
		text-align:center;
		font-size:16px;
		color:#555;
	}
	
	.minifoto {
		height: 66px;
	}
	.minifoto:hover {
		transform:scale(5.04) rotate(0deg) !important;
		z-index:10;
		border: 1px solid #333;
		padding: 10px;
		background: #ffffff;
	}	
		
	/* ------ 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; 
		line-height: 30px;
	}
	
	.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_primari);
		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_primari);
		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_primari_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;
			}  
			h1 {
				font-size: 28px;
			}			
			.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;
			}			
			

	}