<?
    header( "content-type: text/css" );
    
    include "parametres_cac.php"; 

	// el <link del CSS inclu el parametre del INDEX del menu. Amb ell posem al triangle de la capcelera
    
	$index_menu=$_REQUEST['index_menu'];
	//echo "estils:IM=".$index_menu;

	//$n = 10 + ($index_menu * $w_mnu);
	$n = 15 + ($index_menu * (80/$total_mnu));

	$posicio_triangle = intval($n) ;
	echo "->POS->".$posicio_triangle;

    
?>


	* {
		box-sizing: border-box;
	}	

	body,input,textarea,select{
		color:#333;
		font-size:18px;
		font-weight:normal;
		text-align:left
	}

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

	BODY {
		margin: 0;
		font-family: 'Titillium Web', sans-serif;
		background-color: #ffd400;		
	}

   
 	h1 {
 		font-size: 60px;
 	}

 	h2 {
 		font-size: 32px;
 		display:inline;
 		color: #232323;
 	}

	h2 a:link { text-decoration:none; color:#fff333;}
	
 	.cap {
		width: 100%;
 	}
 	.cap_contenidor {
 		width: 90%;
		max-width: 1000px;
		margin:auto;
 	}

 	.cos {
 	}
 	
 	.cos_contenidor {
 		width: 90%;
		max-width: 1000px;
        padding:15px 20px;	
        margin:0px auto 20px;
	    color: #636363; 	 	
 	}

 	.peu {
		background-color: #0251a2; 	
		width: 100%;
		border-top: 5px solid #ea730d;	  
		text-align: center; 	  		
	    color: #FFF; 	 			
 	}
 	
 	.peu_contenidor, .peu_contenidor a  {
		max-width: 1000px;
		margin: auto;
		text-align: center;
		color: #ffd400;
 	}

	.titol_manifest {
		padding: 20px 0px;
	}
	
	.simetrix {
		transform: rotate(-180deg);
	}
	.fliph {
	  display: inline-block;
	  vertical-align: top;
	  transform: scaleX(-1); /* Or also:   rotateY(180deg) */
	  -ms-filter: fliph;
	  filter: fliph;
	  transition: all 2s;
	}	
	.fliph:hover {
	  transform: scaleX(1); 
	  transition: all 1s;
	}	
	
	.elvideo {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		opacity: 0.1;
	}
	.elvideo h1 {
	  text-align: center;
	  font-size: 6rem;
	  font-family: "Cookie";
	  padding: 20px;
	  margin: 15px;
	  z-index: 1;
	  opacity: 0.7;
	}


	.logo {
		width: 120px;
		border-radius: 10px;
	}		 

 	.cap_titol,.cap_titol a {
 		margin-left: 20px;
 		font-size: 70px;
 		color: #0251a2;
		font-weight:bold;
 		text-decoration:none;
 		letter-spacing: 0.05em;
 	}

 	.cap_subtitol,.cap_subtitol a {
 		color: #250500; 
 		font-size: 25px;
 		font-weight:bold;
 	}


 	.cos_titol,.cos_titol a {
 		background-color: #0251a2;;
 		color: #FFF;
 		padding-left: 30px;
 		font-size: 25px;
 		color: #FFFFFF;
		font-weight:bold;
		border-radius: 5px;
 	}
	
	.imatge100 {
		width: 100%;
		border-radius: 25px;
		-webkit-box-shadow:  2px 2px 4px 3px #cccccc;        
        box-shadow:  2px 2px 4px 3px #cccccc; 				
	}
	
		.video-responsive {
			height: 0;
			overflow: hidden;
			padding-bottom: 56.25%;
			padding-top: 30px;
			position: relative;
			}
		.video-responsive iframe, .video-responsive object, .video-responsive embed {
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			}	

 	.uela {
		list-style: none;
 	}
 	.uela li {
 		padding:6px;
 		text-align: left;
 	}
 	.uela li::before {
 		content: "�"; 
 		color: red;
 		padding: 10px;
 	}
 	 	
 	.bicolor tr:nth-child(odd) {
    	background-color: #ddbfff;
	}

	.top, .top a {
		padding: 1px 5px;
		color: #333;
		Float: right;
	}

	.mesinfo {
		padding: 10px 5px;
		background-color: #f3f1b1;
		width: 100%;
		text-align: center;
		border-radius: 10px;
	}	 

 	.taula {
		background-color: #F4F4F4;
		width: 100%;
		-webkit-border-radius: 4px;
		border-radius: 4px; 		
		-webkit-box-shadow:  2px 2px 10px 0px #cccccc;        
        box-shadow:  2px 2px 10px 0px #cccccc; 		
        padding:15px 20px;	
        margin:30px auto 20px;
		border-spacing: 20px;
		border-collapse: separate;        
 	}
 	.taula TH {
 		font-size: 26px;
 	 	padding:15px;	
		color: #fff; 	 	
		background-color: #bf1a00; 	 	 
 	 	border-bottom: 2px solid #400202; 
 	}
 	
 	.taula_text {
 		width: 100%;
 		padding:5px;	
 		font-size: 20px;
 	}
 	
 	.taula_info {
 		width: 100%;
 		padding:5px;	
 		font-size: 18px;
 	}
 	.taula_info TH {
 		font-size: 22px;
 	 	padding:15px;	
		background-color: #CCCCC0; 	 	
 	 	border-bottom: 2px solid #333; 
 	}

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

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

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

	.foto_accio {
		float: left;
		padding: 10px;
		width: 40%;	
	}

	.destacat {
	  background-color: #f9ee9a;
	  border:1px solid #f5f5f5;
	  color:#333;
	  font-size:18px;
	  padding:4px;
	  text-align:CENTER;
	  text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0;
	      line-height: 150%;
	}

	.destacat2 {
	  background-color: #cbdeff;
	  border:1px solid #f5f5f5;
	  color:#333;
	  font-size:18px;
	  padding:4px;
	  text-align:CENTER;
	  text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0;
	      line-height: 150%;
	}
 	

	/* --- menus ---- */
	
 	.menu {
 		width:90%;
	} 	
 	.menu td {
	  padding: 3px 16px 3px 16px;
 	}
 	.menu a {
	 	text-decoration:none;
	 	font-weight:bold;
 	}
 	
 	.menu td:hover {
	 	background-color:#ccc;
 	}
 	
 	.menu_on, .menu_on a {
 		background-color: #0151a2;
 		color: #FFFFFF;
 	}
 	.menu_off {
 		background-color:#fff; 	
 	}
 	
 	.menu_destacat {
 		background-color:#E87306; 	
 		font-weight:bold;
 	} 	
 	
 	.chart {
		width: 100%;
		height: 300px;
 	}
 	
 			 	
 	/* --------- formulari ----------- */
 	
 	.formulari {
		width: 100%;
		background-color:#FFFFFF; 	
 	}
 	.formulari TD {
 		padding:8px;
 	}
	.formulari_desc {
		font-size:12px;
	} 	
 	
 	.input1 {
 		font-size:16px;
		background-color:#f4f4f4;
		border:1px solid #cccccc;
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		color:#333;
		width: 400px;
		padding: 4px 10px;
 	}

 	.input1nw {
 		font-size:16px;
		background-color:#f4f4f4;
		border:1px solid #cccccc;
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		color:#333;
		padding: 4px 10px;
 	}

 	.input1error {
 		font-size:16px;
		background-color:#ffc1c1;
		border:2px solid #c0000c;
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		color:#c0000c;
		width: 400px;
		padding: 4px 10px;
 	}


	/* --------- botons ----------- */
	
	.boto1 {
		color: #363636;
		font-family:'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 	
		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 */
	}
	
	.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 */
	}
	
	.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 {
		color: #363636;
		font-size:14px;
		padding: 1px 10px;
		border: 1px solid #ff920d;
		background: #ffa84c; /* Old browsers */	
		background-color:#ff9430; /* per a IE */
	}
	
	.boto3:link,.boto3:visited {
		color: #363636;
		text-decoration:none;
	}
	
	.boto3: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;
	}
	.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;
	}	
				
	.petita {
		font-size:14px;
	}


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

	.error   {
		width:50%;
		position:relative;
		left:25%;
		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:50%;
		position:relative;
		left:25%;
		border: 2px solid #009966;
		font-size: 18px;
		font-weight:bold;
		color: #009966;
		text-decoration: none;
		padding: 0.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 <br />
<b>Warning</b>:  Undefined variable $color2 in <b>/home/catalaalatac/public_html/estils_cac.php</b> on line <b>566</b><br />
;
		padding: 5px 10px 10px;
		background-color: #f4f4f4;
		margin: 5px 10px 20px 20px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	}

	legend {
		background-color:<br />
<b>Warning</b>:  Undefined variable $color1 in <b>/home/catalaalatac/public_html/estils_cac.php</b> on line <b>575</b><br />
;
		border:2px solid <br />
<b>Warning</b>:  Undefined variable $color2 in <b>/home/catalaalatac/public_html/estils_cac.php</b> on line <b>576</b><br />
;
		padding: 0.2em 1.2em;
		color:#FFFFFF;
		text-align:center;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		text-transform: uppercase;
	}		
  
  
	 /* ============================================================================================================================
	== BUBBLE WITH AN ISOCELES TRIANGLE
	** ============================================================================================================================ */

	/* THE SPEECH BUBBLE
	------------------------------------------------------------------------------------------------------------------------------- */

	.triangle-isosceles {
		position:relative;
		padding:15px;
		margin:1em auto 1.7em;
		color:#000;
		background:#f3961c; /* default background for browsers without gradient support */
		/* css3 */
		background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
		background:-moz-linear-gradient(#f9d835, #f3961c);
		background:-o-linear-gradient(#f9d835, #f3961c);
		background:linear-gradient(#f9d835, #f3961c);
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
	}

	/* Variant : for top positioned triangle
	------------------------------------------ */

	.triangle-isosceles.top {
		background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
		background:-moz-linear-gradient(#f3961c, #f9d835);
		background:-o-linear-gradient(#f3961c, #f9d835);
		background:linear-gradient(#f3961c, #f9d835);
	}

	/* Variant : for left/right positioned triangle
	------------------------------------------ */

	.triangle-isosceles.left {
		margin-left:50px;
		background:#f3961c;
	}

	/* Variant : for right positioned triangle
	------------------------------------------ */

	.triangle-isosceles.right {
		margin-right:50px;
		background:#f3961c;
	}

	/* THE TRIANGLE
	------------------------------------------------------------------------------------------------------------------------------- */

	/* creates triangle */
	.triangle-isosceles:after {
		content:"";
		position:absolute;
		bottom:-40px; /* value = - border-top-width - border-bottom-width */
		/*left:150px;*/ /* controls horizontal position */
		<?
			// la posicio del triangle la determina en quin punt del menu esta i quants punts hi ha al menu
			// esta definit a la capcelera_cac.php;
			if ($posicio_triangle > 0) {
				echo "left: $posicio_triangle%;
				";
			} else { // si hi ha error al 20%
				echo "left:20%;
				";
			}
		?>
		
		border-width:40px 15px 0; /* vary these values to change the angle of the vertex */
		border-style:solid;
		border-color:#f3961c transparent;
		/* reduce the damage in FF3.0 */
		display:block;
		width:0;
	}

	/* Variant : top
	------------------------------------------ */

	.triangle-isosceles.top:after {
		top:-15px; /* value = - border-top-width - border-bottom-width */
		right:50px; /* controls horizontal position */
		bottom:auto;
		left:auto;
		border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
		border-color:#f3961c transparent;
	}

	/* Variant : left
	------------------------------------------ */

	.triangle-isosceles.left:after {
		top:16px; /* controls vertical position */
		left:-50px; /* value = - border-left-width - border-right-width */
		bottom:auto;
		border-width:10px 50px 10px 0;
		border-color:transparent #f3961c;
	}

	/* Variant : right
	------------------------------------------ */

	.triangle-isosceles.right:after {
		top:16px; /* controls vertical position */
		right:-50px; /* value = - border-left-width - border-right-width */
		bottom:auto;
		left:auto;
		border-width:10px 0 10px 50px;
		border-color:transparent #f3961c;
	}

	/* variacio nomes el bubble */
	.isosceles {
		padding:15px;
		margin:1em 0 1.7em;
		color:#000;
		background:#f3961c; /* default background for browsers without gradient support */
		/* css3 */
		background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
		background:-moz-linear-gradient(#f9d835, #f3961c);
		background:-o-linear-gradient(#f9d835, #f3961c);
		background:linear-gradient(#f9d835, #f3961c);
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
	}  
  
	
	blockquote {
	  border-left: 1px solid #ccc;
	  margin: 1.5em 10px;
	  padding: 0.5em 30px;
	  quotes: "\201C""\201D""\2018""\2019";
	  font-size: 20px;
	}
	blockquote:before {
	  color: #ccc;
	  content: open-quote;
	  font-size: 4em;
	  line-height: 0.1em;
	  margin-right: 0.25em;
	  vertical-align: -0.4em;
	}
	blockquote p {
	  display: inline;
	}	
	
		
	@media screen and (max-width: 900px) {
		BODY  {
			padding: 0px;
		}
		h2 {
			font-size: 25px;
		}

		.cap_contenidor {
			width: 100%;
		}	
		.cap_titol,.cap_titol a {
			font-size: 60px;
	 		letter-spacing: normal;		
	 		line-height: 80%;	
		}
		.cap_subtitol,.cap_subtitol a {
	 		line-height: 120%;	
		}
		.cos_contenidor {
			width: 100%;
		}		
		.cos_titol, .cos_titol a {
			font-size: 25px;
		}
		.logo {
			width: 80px;
		}		
		.menu td {
		  padding: 4px 2px;
		}
		.menu a {
			font-size: 13px;
		}
		
		.cos {
			width: 100%;
			padding:5px;	
			margin:0px;
	 		background-color: #F4F4F4;			
			
		}
		.peu {
			width: 100%;	
			font-size:12px;
		}		
		
		.boto1 {
			padding: 4px 15px;
		}		
		.taula {
			padding:3px 4px;	
			margin:10px auto 10px;
		}		
		.llista {
			width: 100%;	
		} 			
		.llista TD {
			padding: 2px;
		}
		.llista TH {
			padding: 4px;
		}
		fieldset {
			margin: 5px auto 10px;
		}
	 	.input1 {
	 		width: 100%;
	 		padding: 4px;
	 	}
	 	.input1error {
	 		width: 100%;
	 		padding: 4px;
	 	}
		.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;
		}

		.foto_accio {
			padding: 6px;
			width: 100%;	
		}		
		
	}