:root {
	  --bgcolor1: #1a63a9;  
	  --bgcolor2: #938274; 
	  --bgcolor3: #f4f4f4; 
	  --bgcolor4: #93827626; 
	  --bgcolor5: #40f8a7;
	  --bgcolor6: #c5d9ef; 
	  --bgcolor7: #A1C810; 
	  --bgcolor8: #BDB5D5;	
	  --bgcolor9: #ffc697;
	  --bgcolor11: #ED1E60;  
	  
	  --verd_fosc: #8bbd08;
	  --verd_clar: #A3C947;	  
	  --verd_mes_fosc: #4d6905;

	  --bgcolor1b: #1963a914;
	  --bgcolor2b: #cdeb8e36;
	  --bgcolor3b: #c8cdea;
	  

	}

	* {
		box-sizing: border-box;
	}	


	 body,input,textarea,select{
	 	font-family: 'montserrat', 'PT Sans', 'Arial', sans-serif;
	 	color:#333;
	 	font-size:20px;
	 	font-weight:normal;
	 	text-align:left;
	 	}

	 a {
	 	color:#333;
	 	font-weight:normal;
	 	text-align:left;
	 	}


	BODY {
		background-color: #fff;
		margin: 0;
	}

   
		 	
 	h1 { 		
 		font-size: 50px;
 		display:inline;
 		color:var(--bgcolor1);
		line-height: 62px;

 	}

 	h2 {
 		font-size: 32px;
 		display:inline;
		color:var(--bgcolor1);
 	}

	h2 a:link { text-decoration:none;}
	
 	h3 {
 		font-size: 25px;
 		display:inline;
 		color: var(--verd_mes_fosc);
		background: #ffe4c4;
		padding: 10px 28px 10px 8px;
		line-height: 34px; 		
 	}

 	h4 {
 		font-size: 22px;
 		display:inline;
 		color: var(--verd_mes_fosc);
		line-height: 34px; 		
 	}

 	.cos {
 		width: 100%;
 	}
 	.cos TD {
 		 padding: 40px 0px 20px 0px;
 	}

	.bg1 {
		background-color: var(--bgcolor1b);
	} 	
	.bg1b {
		background-color: var(--bgcolor1b);
	} 	
	.bg2 {
		background-color: var(--bgcolor2b);
	} 	
	.bg3 {
		background-color: var(--bgcolor3b);
	} 	
	.bg4 {
		background-color: var(--bgcolor9);
	} 	
 	

 	.contenidor {
 		width: 90%;
		max-width: 1200px;
        margin: 0px auto 20px;
	    color: #333333; 	 	
	    font-size: 20px;
 	}

	.logo {
		width: 120px;
 		margin-right: 40px;
		
	}		 
	
	.capcelera {
		width: 100%;
		background-color: var(--bgcolor1);
		border-bottom: 5px solid #cdeb8e;
		padding: 30px 0px;
	}

	.capcelera_interior {
		width: 90%;
		max-width: 1000px;
		margin: 0 auto;		
	}

 	.titol_capcelera,.titol_capcelera a {
 		font-size: 50px;
 		color: var(--bgcolor3);
		font-weight:bold;
 		text-decoration:none;
 	}

 	.titol_subcapcelera,.titol_subcapcelera a {
 		color: white; 		
 	}

 	.titol_pagina, .titol_pagina a {
		font-family: 'Droid Sans', 'PT Sans','Noticia Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 	
 		font-size: 50px;
 		color: <?php=$color1?>;
		font-weight:bold;
 		text-decoration:none;
 	}

	


	.subcapcelera {
		width: 100%; 
		background: #ffe4c4;
		border-spacing: 0px;
		border-collapse: separate;	
	}
	
	.menu_off, .menu_off a {
	    color: #333;
	    text-decoration: none;
	}
	
	.taula_menu {
		border-spacing: 0px;
		border-collapse: separate;	
	}
	.taula_menu TD {
		padding: 13px 4px;	
	}

	.menu_on {
		color: bisque;
		background: var(--bgcolor1);	
		padding: 0px;
	}
	.menu_on a {
		color: bisque;
		text-decoration: none;
	}
	
	.enconstruccio {
		width: 100%;
		background: aliceblue;
	}	

	.enconstruccio TD {	
		text-align: right;
		font-size: 12px;
		padding: 0px 30px;
	}
	
	.mapid {
		width: 100%; 
		height: 550px; 
		text-align: center; 
		vertical-align: middle; 
		font-size: 16px; 
		background: #ccc; 
		color: #333;
		border-radius: 10px;
	}		

	.mapid_general {
		border: 5px solid var(--bgcolor1);					
	}
	.mapid_ofertes {
		border: 5px solid var(--bgcolor7);					
	}
	.mapid_demandes {
		border: 5px solid var(--bgcolor8);					
	}
	.mapid_links {
		border: 5px solid var(--bgcolor9);					
	}


	.taula_llegenda {
		width: 66%;
		margin:auto;
		font-size: xx-small;
		background: var(--bgcolor3);
		border-radius: 0px 0px 10px 10px;		
	}

 	.formulari {
 		margin: auto;    
 		width: 100%;
		border: 1px #666; 		
	    border-spacing: 0px;
    	border-collapse: separate;		
 	}
	.formulari tr:nth-child(odd) {
	  background-color: #f3f3f3;
	}
	.formulari tr:nth-child(even) {
	  background-color: #dbedf7;
	} 	
 	.formulari TH {
 		padding: 20px;
 		font-size: 20px; 
		color:var(--bgcolor1); 		
 	}
 	.formulari TD{
 		padding: 10px 15px; 
 	}
 	



 	.formulari_input {
 		margin: auto;    
 		width: 90%;
		background-color: var(--bgcolor2b); 		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;			
		box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;		
 	}
 	
 	.formulari_input TH{
		color: var(--bgcolor1);
		font-size: xx-large;
		padding: 20px;
		/*border-bottom: 1px solid #c8c8c8;*/
		/*box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;	*/
		box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 20px -20px;	
 	}
 	.formulari_input TD{
		padding: 40px 10px 0px 10px;
 	}
 	
    
     	
	.input1 {
		width: 90%; 
		padding: 8 15px;
		border: 2px solid var(--bgcolor1);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;			
	}
	.input1:disabled {
		border: 2px solid #ccc;
		color: #ccc !important;
	}
	
	.input1error {
		width: 90%;
		padding: 8 15px;
		border: 2px solid red;
		background: #ffdfde;		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;			
	}

	.input2 {
		width: 90%;
		padding: 2px 5px;
		border: 1px solid #666;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;			
	}	
	.input2_error {
		width: 90%;
		padding: 2px 5px;
		border: 2px solid red;
	}	
	
 	
 	
	/* ---------- MENU CSS */
	
	.menu_bar {
		display:none;
	}
 
	header {
		width: 100%;
	}
 
	header nav {
		z-index:1000;
		max-width: 1000px;
		width:98%;
		margin:10px auto;
	}
 
	header nav ul {
		list-style:none;
	}
 
	header nav ul li {
		display:inline-block;
		position: relative;
	}
 
	header nav ul li:hover {
		background:#666;
	}
 
	header nav ul li a , header nav ul li a:visited , header nav ul li a:link {
		color: #ece5ae; //#4b92db;
		display:block;
		text-decoration:none;
		padding: 11px;
		font-size: 18px;
		font-weight: normal;
		text-transform: uppercase;
	}
 

	header nav ul li a span {
		margin-right:10px;
	}
 
	header nav ul li:hover .children {
		display:block;
	}
 
	header nav ul li .children {
		display: none;
		background:#011826;
		position: absolute;
		width: 150%;
		z-index:10000;
		padding: 0px;
	}
 
	header nav ul li .children li {
		display:block;
		overflow: hidden;
		border-bottom: 1px solid rgba(255,255,255,.5);
	}
 
	header nav ul li .children li a {
		display: block;
		font-size: 15px;	
	color: #fff;	
	}
 
	header nav ul li .children li a span {
		float: right;
		position: relative;
		top:3px;
		margin-right:0;
		margin-left:10px;
	}
 
	header nav ul li .caret {
		position: relative;
		top:3px;
		margin-left:10px;
		margin-right:0px;
	} 	
	
	.submenu {
		font-size: 10px;
		font-style: normal;
		color: #FF6600;
		background-color: #363636;
		right: 10px;
		text-indent: 5pt;
		text-transform: lowercase;
		vertical-align: text-bottom;
	}	
	
	 	
 	
 	
	.dont-break-out {

	  /* These are technically the same, but use both */
	  overflow-wrap: break-word;
	  word-wrap: break-word;

	  -ms-word-break: break-all;
	  /* This is the dangerous one in WebKit, as it breaks things wherever */
	  word-break: break-all;
	  /* Instead use this non-standard one: */
	  word-break: break-word;

	  /* Adds a hyphen where the word breaks, if supported (No Blink) */
	  -ms-hyphens: auto;
	  -moz-hyphens: auto;
	  -webkit-hyphens: auto;
	  hyphens: auto;

	} 	
	
.leaflet-container a {
    font-size: 10px;
}    

 	.botonera {
		width: 100%;
		border-spacing: 20px;
		border-collapse: separate;		
 	}
 	.botonera td {
        padding:40px;	
		text-align: center;
 	}
 	.botonera td a{
		font-weight:bold;
 		text-decoration:none;
 		font-size: x-large;
 	}
 	
	
	.taula_mapa {
		width: 100%;
		padding: 1;
		font-size: 15px;	
		color: #fff;
	} 
	.taula_mapa TD a {
		font-size: 16px;	
		color: #fff;
	} 
		
	.titol, .titol a {
		font-size: 40px;
		font-weight:bold;
		padding: 10px 20px;
		text-align: center;
	}
	
 	.taula {
		width: 100%;
        padding:15px 20px;	
        margin:30px auto 20px;
	    color: #333333; 	
 	}
 	
	.taula_plana {
		width: 100%;
		font-size: 18px;
		margin-top: 20px;		
	}
	.taula_plana tr:nth-child(odd) {
    	background-color: unset;
	}
	.taula_plana TD {
		padding: 8px 10px;
	}

	.disclaimer {
		width:95%;
		margin: auto;
		color: #999;
		font-size: smaller;
		padding: 15px 25px;
		text-align: justify;			
		border-top: 1px solid #dcdadd;
	}

 	.uela {
	}	
 	
 	.uela li {
 		padding: 25px 16px;
		border-bottom: 1px solid #a9b390;
 	}
 	
	.uela li:last-child {
	  	border: none;
	} 	
 	.uela li a {
 		text-decoration: none;
 	}
	.uela li:hover {
	  	background: var(--bgcolor2b);
	} 	
	
	.uela2 li {
		padding: 10px;
	}
 	.uela2 li a {
 		text-decoration: none;
 	}
	.uela2 li:nth-child(odd) {
	  background-color: #f0f8ff8a;
	} 	
	
	.elai {
			font-size: 40px;
			font-weight:bold;	
			display: block;
			margin-bottom: 20px;	
			color: 	var(--bgcolor2);
	}
	
	.quadrats li {
		//list-style-type: square;
		list-style: square inside url("img/external-link-symbol.png");	 	
	}

	.news li {
		list-style: square inside url("img/news-icon.png");	 	
	}
	
	.faq li {
		list-style: square inside url("img/faq_icon2.png");	 	
	}
	
	.incrusta {
		width: 300px;
		float: left;
		margin: 0px 20px 10px 0px;
		border: 1px solid #333;
	}
	.apm {
		background: lightyellow;
		margin: auto;
		border: 1px dashed #CCCCCC;
		font-size: smaller;
		text-align: center;
		margin-top: 20px;
    }
	
	.apartat {
		width: 100%;
		margin-top: 100px;	
		border-spacing: 0px;
	    border-collapse: separate;		
	}	
	.apartat TD {
		padding: 30px;
	}
	
	.certificat {
		max-width: 90%;
	}
	
 	.info {
	 	border-left: 1px dashed #CCCCCC; 
 	}
 	
 	.taula_info {
 		width: 100%;
 		padding:5px;	
 	}
 	.taula_info TH {
 		font-size: 20px;
 	 	padding:15px;	
		background-color: #CCCCC0; 	 	
 	 	border-bottom: 2px solid #dddddd; 
 	}

 	.taula_info caption {
 		font-size: 13px;
 	}

 	.taula_info TD {
 	 	padding:15px;	
 	 	border-top: 1px solid #ffffff; 
 	 	border-bottom: 1px solid #dddddd; 
 	}

 	.taula_info td:hover {
	 	background-color:#FFF;
 	} 	


 	
 	.esp {
		color: #555;
		font-size: small;
		font-family: Arial;
		text-indent: 30px;
 	}
 	
 	
 	
 	.sense_estil {
		padding:1px 2px 1px 2px !important;	
		border: 0px;
 	}
 	
	.alert {
	  background-color:#FEB36A;
	  border:2px solid #e87306;
	  border-bottom-left-radius:4px;
	  border-bottom-right-radius:4px;
	  border-top-left-radius:4px;
	  border-top-right-radius:4px;
	  color:#636363;
	  font-size:18px;
	  /*margin:-10px auto 20px;*/
	  padding:8px 35px 8px 14px;
	  text-align:left;
	  text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0;
	  text-align: center;
	}


	.destacat {
	  background-color: #f9ee9a;
	  border:spx solid #f5f5f5;
	  color:#333;
	  padding:30px;
	  text-align:CENTER;
	  text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0;
	  line-height: 150%;
	  font-weight: bold;
	  border-radius: 10px;	
	}

	.destacat2 {
	  background-color: #cbdeff;
	  border:5px solid #9fb5de;
	  color:#333;
	  font-size: 25px;
	  padding: 55px 70px !important;
	  text-align: CENTER;
	  line-height: 150%;
	  border-radius: 10px;	      
	  
	}
	.div_destacat {
	  /*background-color: #cbdeff;*/
	  /*border:5px solid #9fb5de;*/
	  /*color:#333;*/
	  background-color: var(--verd_clar);
	  border:5px solid var(--verd_fosc);
	  color:#F3F3F3;
	  font-size: 25px;
	  padding: 40px!important;
	  text-align: center;
	  line-height: 150%;
	  border-radius: 10px;	      
      margin: auto;	  
	  width: 36%;      
	}

	.div_destacat a {
		color:#fff;
	}
	
	.destacat3 {
		color: #a90404;
		font-size: x-large;	
	}
	
	.destacadet {
	  background-color: #f9ee9a;
	  color:#333;
	  padding:1px 6px;
	  text-align:CENTER;
	  text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0;
	  font-weight: bold;
	}

	.fs_destacat {
	  background-color:#FFF;
	  border:4px dashed #00FB00;
	  border-bottom-left-radius:4px;
	  border-bottom-right-radius:4px;
	  border-top-left-radius:4px;
	  border-top-right-radius:4px;
	  color:#636363;
	  font-size:18px;
	  padding:18px 35px 18px 35px;
	  text-align:left;
	}


 	.contenidor_peu {
		background-color:#d2d7c4; 	
		width: 100%;
		border-top: 5px solid #60524621;	  
		text-align: center; 	
		font-size: 14px;
		padding-top: 50px;
	    padding-bottom: 80px;		
 	}
 	
 	.contenidor_peu a {
	 	font-size: 12px;
	 	font-family: 'PT sans';
 	}
	 	
 	.peu {
 		width: 90%;
		max-width: 1000px;
		margin:0px auto 0px;
		color:#353535;
		font-size:14px;
 	}
 	.peu a {
	  font-size:14px;
 	}
 	
 	.peu2 {
		width: 900px;
		margin:10px auto 10px;
		color:#454545;
		font-size:16px;
 		border-top: 1px solid #605246;
 		border-bottom: 1px solid #605246; 	
 	}

	footer {
		color:#bb6413;
		font-size:14px;
	}
 	
 	

 	.compartir {
 		text-align:center;
 		float: right;
 		margin-left: 30px;
 		font-size: smaller;
 	}
 	
 	.compartir TD {
	 	padding:1px 10px;
 	}
 	  

	/* 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;
	}


			
	/* 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;
	}

 
 	.mesmostres a:link {
 		background-color:#FF6600;
 		color: #111111;
 		padding: 14px 4px 4px 8px;
 		text-decoration:none;
 	}
 	
	.remarkable {
 		border-top: 2px solid #CCCCCC;
 		border-bottom: 2px solid #CCCCCC; 	
 		background-color:#91f329;
 		margin-top: 40px;
 		margin-bottom: 30px; 	
 		padding: 10px;
 		text-align: center;	
	}
	
	.tria_pais {
		background: #f3f3f3;
		width: 100%;
		margin-top: 15px;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	.tria_pais TD {
		padding-right: 10px;
	} 	



 	 	/* --- taules ---- */
 	 	
 	.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(--bgcolor1);
 		padding: 14px 6px;
		color: var(--bgcolor6); 	
		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;
	}	
	 

 	.llista2 { 
 		width: 90%;
 		margin: auto;
		border-spacing: 0px; 		
 	} 	
 	.llista2 TD {
 		padding: 11px 10px;
 	}

 	.llista2 TH {
	 	color: var(--bgcolor1);
 		background-color:#f3f3f3; 
 		padding: 14px 4px 4px 8px;
 	}

	.replica {
		background-color: #dbedf7 !important;	
		border: 1px dotted #333;
		width: 90%;
		float: right;
		margin-top: 6px;
	}
	.replica_font { 
		color: #666;
		border: 2px dotted #444;
		background: #d8d8d8;
	}	
	.repliques_titol {
		float: right;
		background-color: #feb36a5e;
		padding: 4px 4px 4px 40px;	
	    border-left: 3px solid #4080ff;
	    margin-bottom: -10px;	    		
	}


	.foto_noticia {
		width: 250px;
	}
	.foto_logo {
		max-width: 200px;
	}
	.foto_logop {
		max-width: 100px;
	}

	.foto_petita {	
		height: 250px;
		margin-left: 20px;
		margin-bottom: 20px;
		max-width: 100%;
		background: #fff;
		padding: 10px 10px 20px 10px;
		border: 1px solid #333;	
	}
	.foto_qui {
		float: left;
		max-width: 150;
		margin: 0px 30px 10px 0px;	
		border: 1px solid #333;
	}
	
	.div_fotos {
		text-align: center;
	}
	
	.favs {
		font-size: smaller;
	}
	.favs a:link { 
		text-decoration: none; 
	}	
	
	.llista_destacat {
		background-color:<?php=$color2;?> !important;
		font-weight:bold;
 		font-size:20px;
	}
	
	.perllegir {
		background: var(--bgcolor1);
		color: var(--bgcolor2);
		padding: 6px 8px ;
		font-size: smaller;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;		
	}
	.perllegir a {
		text-decoration:none;
		color: #FFFFFF;
	}
	
	.totals	{
	    border-top: 2px solid var(--bgcolor1);	
	}
	
	
	.info_post {
		font-size: smaller;
		color: #666;
	}
	
	.hastag {
 		padding: 2px 14px;
 		background-color:#258380;
		border-bottom-left-radius:2px;
		border-bottom-right-radius:2px;
		border-top-left-radius:2px;
		border-top-right-radius:2px; 		
	}
	a.hastag {
		text-decoration:none;
		color: #FFFFFF;
	}
		 	
	.dreta {
		float: right;
		margin-top: 14px;
		margin-right: 10px;
		background-color: #4e94eb47; 
		padding: 4px 20px 4px 10px;	
		font-size: smaller;	
		border-radius: 1px;		
	}
	div.dreta a {
		color: #667;
	}
	.dreta2 {
		float: right;
		margin-top: 14px;
		margin-right: 10px;
		padding: 4px 20px 4px 10px;	
		font-size: smaller;	
		border-radius: 5px;		
	}
	div.dreta2 a {
		color: #667;
	}


      .blink { 
      	font-size:16px;
      	color: var(--bgcolor1);
        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;
        }
      }   

	.arrow_original {
	  border: solid black;
	  border-width: 0 3px 3px 0;
	  display: inline-block;
	  padding: 3px;
	}
	.arrow {	
		border: solid #ffa84c;
		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);
	}

	/* --------- botons ----------- */
	
	.boto1 {
		color: #363636;
		font-size:20px;
		padding: 4px 60px;
		border: 1px solid #ff920d;
		-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: #ffa84c; /* Old browsers */
		background: -moz-linear-gradient(top, #ffa84c 32%, #ff7b0d 82%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#ffa84c), color-stop(82%,#ff7b0d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* IE10+ */
		background: linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
	
		background-color:#ff9430; /* per a IE */
		white-space: nowrap;
	}
	
	.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:'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 	
		font-size:15px;
		padding: 4px 10px;
		border: 1px solid #ff920d;
		-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: #ffa84c; /* Old browsers */
		background: -moz-linear-gradient(top, #ffa84c 32%, #ff7b0d 82%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#ffa84c), color-stop(82%,#ff7b0d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* IE10+ */
		background: linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
	
		background-color:#ff9430; /* per a IE */
		white-space: nowrap;
		line-height: 30px;
	}
	
	.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));
	}	
	
	.boto0	{
		background-color:#eaeaea; 
		border: 1px solid #d6d6d6;
		-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;
		
	}
	
	.boto3 { 
		background: var(--bgcolor1);
		color: #ffffff !important;
		font-size:15px;
		padding: 1px 10px;
		border: 2px solid #333;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;		
		line-height: 30px;		
	} 
	
	.boto3:link,.boto3:visited {
		color: #363636;
		text-decoration:none;
	}
	

	.boto4 {
		color: #363636;
		font-size:14px;
		padding: 1px 10px;
		background: #9e9b9b4a; /* Old browsers */	
		background-color:#9e9b9b4a; /* per a IE */
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;		
		line-height: 30px;		
	}
	
	.boto4:link,.boto4:visited {
		color: #363636;
		text-decoration:none;
	}
	
	.boto4:active {
	}





	.bt_whatsapp {
		text-transform: uppercase;
		font-size: 80%;
		font-weight: 700;
		padding: 3px 12px;
		color: #e2ffd9;
		background-color: #42aa42;	
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		margin-left: 10px;		
	}
	.bt_whatsapp:link,.bt_whatsapp:visited {
		color: #FFFFFF;
		text-decoration:none;
	}	
	
	.bt_facebook, a.bt_facebook {
		font-family:'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 
		font-size: 14px;
		text-align: center;
		text-decoration: none;
		padding: 6px 12px;
		background-color: #3b5998;
		border: 2px solid transparent;
		color: white;
	}	
	
	.bt_copylink {
		text-transform: uppercase;
		font-size: 80%;
		font-weight: 700;
		padding: 3px 12px;
		color: #333;
		background-color: #CCC;	
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		margin-left: 10px;
		border: 1px solid #666;		
	}
	
				
		.petita {
			font-size:14px;
		}


	.barra {
	  background-color:#FEB36A;
	  border:0px solid #e87306;
	  height: 25px;
	  background: url('img/bg1.png') repeat-x scroll center bottom;
	}

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

	.error   {
		width:70%;
		margin: auto;
		border: 3px solid #FC0000;
		font-size: 18px;
		font-weight:bold;
		color: #FF0000;
		text-decoration: none;
		padding: 0.2em 0.1em;
		margin-top : 2px;
		margin-bottom : 2px;
		background-color: #fecccc;
		text-align:center;
		}
		
	.noerror   {
		width:70%;
		margin: auto;
		border: 2px solid #009966;
		font-size: 18px;
		font-weight:bold;
		color: #009966;
		text-decoration: none;
		padding: 2em 0.1em;
		margin-top : 2px;
		margin-bottom : 2px;
		background-color: #dff6c6;
		text-align:center;
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		
		}	

	fieldset {
		border:1px dotted <?php=$color2?>;
		padding: 5px 10px 10px;
		background-color: #f4f4f4;
		margin: 5px 10px 20px 20px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		}
	
	legend {
		  background-color:<?php=$color1?>;
		  border:2px solid <?php=$color2?>;
		  padding: 0.2em 1.2em;
		  color:#FFFFFF;
		  text-align:center;
		  -moz-border-radius: 2px;
		  -webkit-border-radius: 2px;
		  text-transform: uppercase;
	
	  }		
  
	.dreta_gran {
		text-align: right;
	}


	.roomer1 {
		width: 80%;
		float: left;
		background-color: var(--bgcolor1b);
		border:2px solid var(--bgcolor1);
		padding: 20px;
		margin-top: 30px;
		text-align: left;
		border-radius: 10px;
	}
	.roomer2 {
		width: 80%;
		float: right;
		background-color: var(--bgcolor2b);
		border:2px solid var(--bgcolor2);
		padding: 20px;
		margin-top: 30px;
		text-align: right;
		border-radius: 10px;
	}
	
	.taula_afegir {
		width: 100%;
		background-color: var(--bgcolor3b);
		font-size: smaller;
    	border-bottom: 3px solid #999;
	}
	
	.capdemunt {
		float: right;
		margin-right: 3px;
		margin-bottom: 3px;
		padding: 3px;	
	}
	.capdemunt A {
		font-size: 12px;
	}
	
	.icona {
		width: 25px;
	}
	
	

	@media screen and (max-width: 900px) {
		BODY  {
			padding: 0px;
		}
		h1 {
			font-size: 35px;
		    line-height: 40px;			
		}
		h2 {
			font-size: 30px;
		}
		h3 { 
			line-height: 40px;  		
	 	}		

		.capcelera_interior {
			width: 100%;
		}	
		.titol_capcelera,.titol_capcelera a {
			font-size: 40px;
			font-weight:bold;
			margin-left: 1px;
		}
		.titol_pagina, .titol_pagina a {
			font-size: 25px;
		}
		.logo {
			width: 80px;
	 		margin-right: 4px;
		}		
		.menu td {
		  padding: 4px 2px;
		}
		.menu a {
			font-size: 11px;
		}
		.menu_on a {
			font-size: 12px;
		}
		
		.menu_off, .menu_off a {
			font-size: 11px;
			font-weight: bold;		    
		}		
		
		p {
		}

		.div_destacat {
			width: 90%;
			padding: 43px 40px !important;
		}
		
		.zappa {
			margin: auto;
			width: 90%;
			background-color: #42aa42;
		}

		.taula {
			padding:5px 2px;	
			margin:10px auto 10px;
		}
		
		.contenidor {
			width: 95%;
			padding:5px;	
			margin: auto;
			
		}
		.peu {
			width: 100%;	
			font-size:12px;
		}		
		
		.campanyes TD {
			padding:5px;	
		}
		
		.formulari_input {
			width: 100%;
		}		
		.formulari_input TH{
			font-size: x-large;		
		}
				
		.boto1 {
			padding: 4px 15px;
		}		
		.llista {
			width: 100%;	
		    margin-top: 25px;			
		    margin-bottom: 50px;			
		} 			
		.llista TD {
			padding: 12px 8px;
		}
		.llista TH {
			padding: 4px;
		}
		fieldset {
			margin: 5px auto 10px;
		}
		
		 
		.mapid {
			width: 90%; 
			height: 400px; 
		}
		


		
		
		.bt_whatsapp {
			text-transform: capitalize;
			padding: 2px 8px;
			color: #e2ffd9;
			background-color: #42aa42;	
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-o-border-radius: 3px;
		}
		
		.dreta_gran {
			text-align: left;
		}
		
		.input1, .input1error {
			width: 100%; 
		}		

		.uela {
			font-size: large;		
		}	
	
		.uela li {
			padding: 25px 6px;
		}

		.dreta {
			margin-top: 5px;
			margin-bottom: 20px;
			padding: 5px 10px;		
		}
		
		.botonera {
			width: 100%;
			border-spacing: 10px;
		}		
		.botonera td {
			padding:20px 18px;	
		}		

		.taula_llegenda {
			width: 100%;
		}	
		.foto_qui {
			width: 100%;
			max-width: none;			
		}			
		.incrusta {
			width: 100%;
		}		
		
			/* menu */
			
			.menu_bar {
				display:block;
				width:100%;
				position: fixed;
				top:0;
				left: 0;
				background:#167ac6;
			}

			.menu_bar .bt-menu {
				display: block;
				padding: 20px;
				color: #fff;
				overflow: hidden;
				font-size: 25px;
				font-weight: bold;
				text-decoration: none;
			}

			.menu_bar span {
				/*float: right;*/
				font-size: 40px;
				margin-right: 10px;
			}

			header nav {
				width: 80%;
				height: calc(100% - 80px);
				position: fixed;
				right:100%;
				margin: 0;
				overflow: scroll;
			}

			header nav ul li {
				display: block;
				border-bottom:1px solid rgba(255,255,255,.5);
			}

			header nav ul li a {
				display: block;
			}

			header nav ul li:hover .children {
				display: none;
			}

			header nav ul li .children {
				width: 100%;
				position: relative;
			}

			header nav ul li .children li a {
				margin-left:20px;
			}

			header nav ul li .caret {
				float: right;
			}		
			
			/* fi del menu */		
		
	}