@font-face {
		font-family: "Tasteful Sandwich";
		src: url("fonts/Tasteful Sandwich.otf");		
	}
	@font-face {
		font-family: "Celestina";
		src: url("fonts/Celestina.otf");
	}		
	@font-face {
		font-family: "Loving";
		src: url("fonts/Loving.ttf");
	}
	@font-face {
		font-family: "MiraikatoScript-Regular";
		src: url("fonts/MiraikatoScript-Regular.otf");
	}
	@font-face {
		font-family: "MiraikatoScript-Thin";
		src: url("fonts/MiraikatoScript-Thin.otf");
	}
	
	
	:root {
	  --color_roig: #938274;
	  --color_groc: #ffbe3b;
	  --color_blau: #0743B2;	
	  --color_blanc: #f4f4f4;		
	  --color_taronja: #ff6600;		  	
	  --color_taronja_clar:	#f6a36b;
	  --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_roig2: #e24949; 
	  --color_marro_clar_transp: #bc94734f;
	}  

	* {
		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_magenta);
	}


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

	BODY {		
		margin: 0;
		background-color:#fff;
		color: var(--color_roig_fosc);						
	}		
	
	h2, h3 {
		display:inline;
	}
	
	fieldset{
		border: 0px;
	}
	legend {
		margin-right: 35px;
		padding: 12px 15px;
		background: white;
		border-radius: 0px 0px 12px 12px;
		text-align: right;
	    margin-bottom: 40px;		
		box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;	    

    }
	
	.contenidor {
		width:100%;
		border-spacing: 0px;
		border-collapse: separate;				
	}
	
	.logo {
		width: 160px; 
		margin-right: 20px;
	}
	
	.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_roig2); 
		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: 'Shadows Into Light', cursive; 
		font-size: 25px;
		color: var(--color_blau_fosc);
		float: right;
		margin-right: 40px;
		margin-top: 12px; 
		background: #fdf4cd;
		padding: 10px 20px;	
		border-radius: 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_taronja);
		padding: 30px;
		text-align: center;
		margin: 50px;		
		border-radius: 11px;
	}
	
	.titol, .titol a {
		font-family: "Celestina","Endestry", cursive;
		font-size: 100px;	
		color: var(--color_blanc);		
		text-align: center;
	}
	.subtitol {
		color: var(--color_blanc);		
		text-align: center;
	}
	.subtitol a {
		color: var(--color_taronja_clar);		
	}
	
	.top50 {
		margin-top: 50px;
	}
	.top100 {
		margin-top: 100px;
	}

	
 	.titol_pagina, .titol_pagina a {  
		/*font-family: 'Tasteful Sandwich', 'Droid Sans', 'PT Sans','Noticia Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; */
 		/*font-size: 90px;*/
 		font-family: "MiraikatoScript-Thin", 'Droid Sans', cursive;
 		font-size: 75px;
 		text-transform: lowercase; 
 		color: var(--color_roig2);
 		text-decoration: none;
 		text-align: center;
 	}    

	.titol_pagina:before {
		width: 100px;
		/*content: url(img/tio2.png);*/
		position: relative;
		z-index: 100000;
		left: -8px;
		top: 40px;
		padding-left: 60px;		
	}
	
	.xifra, .xifra a {
		font-family: "Celestina","Endestry", cursive;
		font-size: 90px;	
		color: var(--color_roig_fosc);		
		text-align: center; 
	}	
	.xifra2, .xifra2 a {
		font-family: "Celestina","Endestry", cursive;
		font-size: 30px;	
		color: var(--color_roig_fosc);		
		text-align: center; 
		border: 0px;
	    background-color: var(--color_roig2);
	    padding: 0px 2px;
	}	
 		
	.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 #543923;
	}
	.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 TR:nth-child(odd) {
		background-color:  var(--color_marro_clar_transp);
	}
	.llista TR:nth-child(even) {
		background-color: #f4f4f4;
	}	 	

 	.llista TH {
 		background-color: var(--color_roig_fosc);
 		color: #FFFFFF;
 		padding: 14px 4px 4px 8px;
 	}
 	

 	.llista TD {
 		padding: 14px;
 	}
	
	
	.cita {
		background-color:  var(--color_groc);
		color: var(--color_blau_fosc);
		padding: 60px 100px 50px 100px;
		line-height: 30px;		
		font-style: italic;		
		border-radius: 25px;
	    text-align: justify;		
	}
	.signatura { 
		float: right;
		font-family: "MiraikatoScript-Thin", 'Droid Sans', cursive;
		font-size: x-large;			
	}
	
	
	.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;
	}
	
	.uela {
		font-size: 18px;
		margin-top: 33px;
		list-style-position: inside;		
	}
	.uela li {
		padding: 16px 4px 18px 14px;
		margin-bottom: 1px;
		line-height: initial;
	}
	.uela li:nth-child(odd) {
		background-color:  var(--color_magenta_transp);
	}
	.uela li:nth-child(even) {
		background-color: var (--color_blau_clar);
	}	



		
	/* ------ errors --------*/

	.error   {
		width:80%;
		margin: auto;
		padding: 30px;
		border: 3px solid #FC0000;
		font-size: 18px;
		font-weight:bold;
		color: #FF0000;
		text-decoration: none;
		margin: auto;
		background-color: #fecccc;
		text-align:center;
		}
		
	.noerror   {
		width: 80%;
		margin: auto;
		padding: 30px;
		border: 2px solid var(--color_blau);
		font-size: 18px;
		font-weight: bold;
		color: var(--color_blau);
		text-decoration: none;
		background-color: var(--color_blau_clar);
		text-align: center;    		
	}		
	/* --------- botons ----------- */
	
	.boto1 {
		color: #FFF;
		font-family:'Ubuntu', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 	
		font-size:20px;
		padding: 4px 20px;
	    border: 3px solid #ffcbcd;
		-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: #ff3051; /* Old browsers */
		background: -moz-linear-gradient(top, #de4c51 32%, #c61a20 82%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#de4c51), color-stop(82%,#c61a20)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #de4c51 32%,#c61a20 82%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #de4c51 32%,#c61a20 82%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #de4c51 32%,#c61a20 82%); /* IE10+ */
		background: linear-gradient(top, #de4c51 32%,#c61a20 82%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de4c51', endColorstr='#c61a20',GradientType=0 ); /* IE6-9 */
	
		background-color:#ff3051; /* 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: #de4c51; /* Old browsers */
		background: -moz-linear-gradient(top, #de4c51 32%, #c61a20 82%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#de4c51), color-stop(82%,#c61a20)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #de4c51 32%,#c61a20 82%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #de4c51 32%,#c61a20 82%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #de4c51 32%,#c61a20 82%); /* IE10+ */
		background: linear-gradient(top, #de4c51 32%,#c61a20 82%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de4c51', endColorstr='#c61a20',GradientType=0 ); /* IE6-9 */	
		background-color:#ff9430; /* per a IE */
	}
	
	.boto2:link,.boto2:visited {
		color: #363636;
		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;			
	}	
		

	.video-responsive{
		overflow:hidden;
		padding-bottom:56.25%;
		position:relative;
		height:0;
	}
	.video-responsive iframe{
		left:0;
		top:0;
		height:100%;
		width:100%;
		position:absolute;
	}		
	
 	/* --------- 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: var(--color_marro_clar_transp);
	}
	.formulari tr:nth-child(even) {	
		background-color: #e0e0e0;
	} 	 
	.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;
 	}
	
	
	.blink{
		background-color: #15a0fa;  
		width:95%;
		max-width: 400px;
		font-size:11pt;
		padding: 4px 8px;		
		color: #FFF;
		padding: 10px 10px;		
	}
	.blink span{
		animation: blink .7s linear infinite;
	}
	@keyframes blink{
		0%{opacity: 0;}
		50%{opacity: .8; color:#ccc;}
		100%{opacity: 1;}
	}
	
	
	.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;
	}
	
	
	/* fotos */

	.foto_album {
	    max-width: 90%;	
		height: 166px;
	}	

	.contenidor_fotos {
		display: inline-block;
		margin-left: 20px;
		margin-bottom: 20px;		
	}
		

	.foto {
	  width: 100%;
	  height: 300px;
	  object-fit: cover;		
	}
	
	.foto_diada{
		max-width: 500px;
	}
	
	.foto_diada_petita {
		height: 150px;
		max-width: 100%; /* per a mobil */
		background: #f4f4f4;
		padding: 10px;
		border: 1px solid #333;
		border-radius: 9px;		
	}	
	
	
	/* 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: 100%;
		text-align: center;		
	}
	
	.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: 100px; 
				margin-right: 0px;
			}
			.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: 14px; 
				padding: 4px 10px;	
			}

			.destacat {
				font-size: 24px;			
			}
			#mapid {     
				height: 300px;  
			}			

			.cita {
				padding: 15px 40px;
				line-height: 30px;		
				
			}
			.taula_popup {
				border: 0px;
				/*width:300px;*/
				font-size: smaller;
			}		
			

	}