@charset "utf-8";
/* CSS Document */

#columna_esquerra_principal{
	float:left;
	width: 34%;
	max-width: 400px;
	margin-left:1%;
	margin-right: 0;
	margin-top:5px;
}

#columna_dreta_principal{
	float:right;
	width: 63%;
	margin-right: 1%;
	margin-left:0;
	margin-top:5px;
}

.caixa_titol{
	position:relative;
	top:10px;
	left:0px;
	padding-left: 15px;
	width:100%;
	color:#333333;
	font-family:'Roboto';
	font-size:18px;
	font-weight:bold;
	margin-bottom:-10px;
	background:#FFC844;
	min-height: 50px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
  	-moz-border-radius: 15px; 
	/*border:solid 1px #FFC844;*/
	/* -----CENTRAR VERTICAL------ */
	-ms-display: flex;
  	display: flex;
  	/* alineacion vertical */
  	align-items:center;
   	/* alineacion horizontal */
  	justify-content:flex-start;
	
}

.caixa_complement{
	position:relative;
	margin-top:30px;
	left:0px;
	padding-left: 15px;
	width:100%;
	color:#777777;
	border:solid 1px #FFC844;
	font-family:'Roboto';
	font-size:15px;
	margin-bottom:-10px;
	height: 50px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
  	-moz-border-radius: 15px; 
	/*border:solid 1px #FFC844;*/
	/* -----CENTRAR VERTICAL------ */
	-ms-display: flex;
  	display: flex;
  	/* alineacion vertical */
  	align-items:center;
   	/* alineacion horizontal */
  	justify-content:flex-start;
	
}
.caixa_foto_pagina_A{
	position:relative;
	top:35px;
}

.caixa_text_pagina_A{
	position:relative;
	top:30px;
	color:#000000;
	font-family:'Roboto';
	font-size:16px;
	text-align: justify;
	padding-top:10px;
}

.una_opcio{
	position:relative;
	height: 32px;
	width: 100%;margin-top:10px;
	background-color: #bbbbbb;
	border-radius: 16px;
	-webkit-border-radius: 16px;
  	-moz-border-radius: 16px; 
}
.una_opcio_B{
	position:relative;
	height: 32px;
	width: 100%;margin-top:10px;
	background-color: #bbbbbb;
	border-radius: 16px;
	-webkit-border-radius: 16px;
  	-moz-border-radius: 16px; 
}
.punt_opcio{
	position:absolute;
	top:4px;
	left:4px;
	height: 24px;
	width: 24px;
	border-radius:50%;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%; 
	background-color: #FFC844;
}
.punt_opcio_activada{
	position:absolute;
	top:4px;
	left:4px;
	height: 24px;
	width: 24px;
	border-radius:50%;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%; 
	background-color: #eeeeee;
}
.text_opcio{
	position:absolute;
	top:4px;
	left:60px;
	height: 24px;
	padding-left: 10px;
	color:#333333;
	font-family:'Roboto';
	font-size:18px;
	/* -----CENTRAR VERTICAL------ */
	-ms-display: flex;
  	display: flex;
  	/* alineacion vertical */
  	align-items:center;
   	/* alineacion horizontal */
  	justify-content:flex-start;
}
.text_opcio_B{
	position:absolute;
	top:4px;
	left:60px;
	height: 24px;
	padding-left: 10px;
	padding-top:2px;
	color:#333333;
	font-family:'Roboto';
	font-size:16px;
	overflow: hidden;
	/* -----CENTRAR VERTICAL------ */
	-ms-display: flex;
  	display: flex;
  	/* alineacion vertical */
  	/*align-items:center;*/
   	/* alineacion horizontal */
  	justify-content:flex-start;
}
.caixa_links{
	position:relative;
	width: 100%;
	border:solid 1px #FFC844;
	border-radius: 16px;
	padding: 10px;
}
.caixa_links_esquerra{
	float:left;
	width: 45px;
}
.caixa_links_dreta{
	float:left;
	color:#333333;
	font-family:'Roboto';
	font-size:14px;
	padding-top:10px;
}

/*-------------MAPA------------*/
 .fila_mapes{
	 margin-top:50px;
	 margin-bottom:20px;
	 width: 98%;  
 }
 .un_mapa_E{
	 float:left;
	 margin:0 1% 0 1%;
	 width: 35%;
 }
 .un_mapa_D{
	 float:left;
	 margin:0 1% 0 1%;
	 width: 60%;
 }
 .fila_maps, .fila_maps_tx{
	 margin:50px auto 10px auto;
	 width: 80%;
 }
#boto_GGL{
	margin:15px auto 10px auto;
	border-radius:20px;
	-webkit-border-radius: 20px;
  	-moz-border-radius: 20px;
	border:solid 2px #CC4921;
	width: 80%;
	height: 40px;
	text-align: center;
	padding-top:8px;
	color:#CC4921;
	font-family:'Roboto';
	font-size:16px;
	font-weight: bold;
}


/* -----LLISTAT NORMES------ */
.normes_fila{
	position: relative;
	width: 100%;
	height: 100px;
}
.normes_pictograma{
	float:left;
	width: 100px;
	padding:5px 15px 5px 0;
}

.normes_text{
	float:left;
	height: 100%;
	width: 80%;
	-ms-display: flex;
  	display: flex;
  	align-items:center;
  	justify-content:flex-start;
}
.clear{
	clear:both;
}

@media screen and (max-width: 900px) {
	#columna_esquerra_principal{
		position:relative;
		width: 98%;
		margin-left:1%;
		margin-right:1%;
		max-width: 98%;
	}

	#columna_dreta_principal{
		position:relative;
		width: 98%;
		margin-right: 1%;
		margin-left:1%;
	}
	.text_opcio_B{
		left:25px;
		font-size: 14px;
	}
	
	
}

@media screen and (max-width: 500px) {
	.normes_text{
		width: 70%;
	}
}

@media screen and (max-width: 350px) {
	.normes_text{
		width: 60%;
	}
}