/* CSS Document */


@media all and (max-width:605px)
{
	#icons_socials a, #icons_socials span {
		width: 20px !important;
		margin: 5px!important;
		text-align: left !important;
		
	}
	
	#icons_socials font
	{
		display: none;
	}
}

@media all and (max-width: 884px)
{

	h1
	{
		font-size: 22px !important;
		line-height: 24px !important;
	}
	
	h2,h3
	{
		width: auto !important;
	}
	
	
	
	
	#ruta
	{
		padding: 5px 10px;
	}
	
	body
	{
		padding-top: 0 !important; 
	}
	#header,#nav,#msg_cookies_fbox
	{
		position: static !important;
	}
	#header > div
	{
		width: 100% !important;
		position: static !important; 
		margin: auto; 
		padding: 10px 0px;
		text-align: center;
	}
	
		#logo
		{
			width: 160px;
			height:auto;
		}
		
		#xarxes_socials
		{
			margin-top: 10px; position: relative; z-index: 250; width: 100%; display: block;
		}
			#xarxes_socials > div
			{
				position: static !important;
				text-align: center;
				
			}
			
				#xarxes_socials div.fl, #xarxes_socials div.fr
				{
					display: block;
					float: none;
					text-align:center;
					margin: 10px;
					width: auto;
				}
				
				
		
	#nav
	{
		background: #DDDDDD; 
		height:auto; 
		margin-bottom: 2px; 
		position: relative; 
		z-index: 200;
	}
	
		#nav > div
		{
			width: 100%;
		}
			#cercador
			{
				display: none;
				float: right; 
				margin-top: 9px; 
				border-radius: 2px; 
				padding: 3px 5px 2px 5px;
			}
				#cercador input[type="text"]
				{
					width: 163px; height: 18px; line-height: 18px; font-style: italic; padding: 0px;margin: 2px 0px; color: #b11a2d;font-size: 16px; border: none; background-color:transparent;  outline: 0px;
				}
				
				#cercador img
				{
					cursor: pointer; margin-right: 5px; margin-top: 4px;
				}
	
	
	#desplegador_menu
	{
		display: block;
		padding: 10px 25px;
		background-color: #b11a2d;
		font-weight: bold;
		color: #FFFFFF;
		border-bottom: 1px solid #999999;
		font-size: 16px;
	}
	
		#desplegador_menu img
		{
			margin-right: 5px;
			vertical-align:baseline;
		}
	#menu
	{
		display: none;
		float: none;
	}
	
	#menu.mobile_active
	{
		display:block;
	}
	
		#menu > li
		{
			float: none;
			height: auto;
			text-align: left;
			border-bottom: 2px solid #CCCCCC;
		}
			#menu > li > a
			{
				height: auto;
				display: block;
				line-height: inherit;
				padding: 10px 25px;
				vertical-align: top;
				color: #000000;
				text-shadow: 1px 1px 1px #FFFFFF;
				text-decoration: none;
				text-transform: uppercase;
				font-weight: bold;
				

			}
			
			
			
			#menu > li > img
			{
				display: none;
			}
			#menu > li:hover, #menu > li.active
			{
				background-color: #DDDDDD !important;
				color: #000000 !important;
				
			}
			#menu > li.active
			{
				margin-left: 1px;
				margin-right: 1px;
			}
			#menu > li:hover > a, #menu > li.active > a
			{
				color: #000000 !important;
				text-shadow: none;
			}
			#menu > li:hover > img,#menu > li.active > img{opacity: 0;}
			
			#menu > li > ul{ display:none; position: relative; width: 100%; padding: 0; border-top:none;}
			
			
				#menu > li > ul a
				{
					padding: 10px 30px;
					color: #FFFFFF;
					text-decoration: none;
					display: block;
					border-top: 1px solid #4e4e4e;
					text-transform: uppercase;
				}
				
				#menu > li > ul > li:first-child a
				{
					border-top: none;
				}
				
				#menu > li:hover > ul
				{
					display: none;
				}
				#menu > li > ul.active, #menu > li:hover > ul.active{ display:block;}
		
	#content_centrat
	{
		width: 100% !important;
	}		
	#content
	{
		border-top: 2px solid #b11a2d; 
		min-height: 352px; 
		background:url(../img/bg_content.jpg) repeat-x; 
		padding: 10px;
	}
	
	#slide_home
	{
		/*height: 200px !important; */
		width: 100%; 
		margin-bottom: 10px; 
		height: 0px !important;
		padding-bottom: 56%; /* proportional scaling */
	}
		.slide_gran
		{
			position: absolute; width: 100%; height: 100%; left: 0; margin-left: 0px;
		}
		
			.slide_gran > div
			{
				height: 100%; 
				width: 100%;
				background-size: 200% auto !important;
			}
			
				.slide_gran > div > div
				{
					width: 100%; position: absolute; left: 0; margin-left: 0; bottom: 0px;
				}
				
				.frase_slide
				{
					padding: 5px 10px; background: url(../img/fons_negre_transparent.png); color: #FFFFFF; display: block; line-height: 15px; margin-left: 0px; font-size: 13px; font-style: italic;
				}
				
				.boto_slide
				{
					margin-right: 0px;padding: 5px 10px; background-color: #b11a2d; color: #FFFFFF; font-size: 13px; display: block; line-height: 15px; font-style: italic; text-decoration: none;
					text-align: right;
				}
	
	
	.banner_home
	{
		float: left;
		position: relative; 
		width: 49.6%; 
		height: auto;
		margin: 0.2% !important;
		overflow: hidden;
	}
		.banner_home > span
		{
			background-color: #b11a2d; color: #FFFFFF; font-size: 14px; font-style: italic; text-transform: uppercase; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; line-height: 16px; padding: 5px;
		}
	
		.banner_home > img
		{
			width: 100%;
		}
		
		#enllacos_veure_mes
		{
			display: none;
		}
		#noticies_home
		{
			padding: 0 10px;
			overflow: hidden;
			
		}	
		#noticies_home .noticia
		{
			width: auto;
			float: none;
			margin: 15px 0px;
			font-size: 14px;
			line-height: 18px;
			text-align: justify;
		}
		
		.noticia .tipus
		{
			color: #b11a2d;
			font-style: italic;
			font-size: 20px;
			line-height: 23px;
			margin-bottom: 5px;
			display: block;
		}
		
		.noticia a
		{
			font-size: 20px;
			line-height: 25px;
			font-size: italic;
			margin-bottom: 5px;
			color: #000000;
			text-decoration: none;
			font-style: italic;
			display: block;
			text-align: left;
		}
		
		.noticia .data
		{
			font-weight: bold;
			font-size: 16px;
			margin-bottom: 5px;
			display: block;
			line-height: 16px;
		}
			
			
		.desplegable
		{
			float: left;
			list-style: none;
			padding-left: 0px;
			margin: 0px;
			margin-right: 15px;
			position: relative;
			z-index: 150;
			text-align: left;
		}
		
		.desplegable > li
		{
			position: relative;
			width: 250px;
		}
			.desplegable > li > span
			{
				display: block;
				padding: 10px;
				text-decoration: none;
				font-size: 13px;
				font-style: italic;
				color: #FFFFFF;
				background-color: #b72a3c;
				line-height: 11px;
				border-radius: 1px;
				text-transform: uppercase;
				cursor: default;
			}
				.desplegable > li > span.active
				{
					color: #990000;
				}
			
				.desplegable li span img
				{
					margin-top: 4px;
				}
				
		.desplegable li ul
		{
			position: absolute;
			left: 0;
			right: 0;
			border-top: 2px solid #FFFFFF;
			margin-left: 0;
			background-color: #b72a3c;
			border-radius: 2px;
			display: none;
			list-style: none;
			height: 200px;
			padding: 10px 0px;
			
		}
		
	.desplegable li ul a
	{

		display: block;
		padding: 10px;
		text-decoration: none;
		font-size: 13px;
		font-style: italic;
		color: #FFFFFF;
		line-height: 11px;
		text-transform: uppercase;
	}

.seleccio_programes
{
	margin-bottom: 30px; display: block; width: 100%; border-spacing: 0px;
}

	.seleccio_programes > div
	{
		display:block;
	}
	
		.seleccio_programes > div > a
		{
			width:auto;
			vertical-align: middle;
			display: block;
			margin-right: 0px;
			margin-bottom: 2px;
			padding: 8px;
			
		}
	
.bloc_generic
{
	margin-bottom: 30px;
}

	.bloc_generic h2
	{
		width: auto; font-size: 20px; color: #b11a2d; font-weight: normal; font-style: italic; margin-bottom: 5px;
	}
	.bloc_generic h3
	{
		width: auto; font-size: 20px; line-height: 25px; font-weight: normal; font-style: italic; margin-bottom: 15px;
	}
	
	.bloc_generic .col_esquerra
	{
		width: auto;
		float: none;
		margin-bottom: 25px;
	}
	
	.bloc_generic .col_dreta
	{
		width: auto;
		float: none;
		position: relative;
		margin-bottom: 25px;
	}
		
		.bloc_generic .col_dreta div, .bloc_generic .col_dreta img, .bloc_generic .col_dreta a
		{
			width: 100%;	
		}
	
	.boto_generic
	{
		display: inline-block !important; 
		background-color: #b72a3c; 
		padding: 8px; 
		font-style: italic; 
		text-decoration: none;
		color: #FFFFFF; 
		margin-right: 15px; 
		margin-bottom: 15px;
		width: auto !important;
	}
	
		.boto_generic img
		{
			width: auto !important;
		}
		
	.mapa
	{
		width: 100%;
		/*width: inherit !important;*/
	}
	
	.logo_onsom
	{
		width: 50%;
	}
	
	.dos_columnes
	{
		-moz-column-count:auto;
		-webkit-column-count:auto;
		column-count:auto; 
		-moz-column-gap:30px;
		-webkit-column-gap:30px;
		column-gap:30px;
	}
	.pager_noticia
	{
		text-align: center;
		position: absolute;
		width: 100%;
		z-index:150;
		margin-top: -50px;
		color: #3c3c3c;
		font-size: 25px;
		
	}
	
		.pager_noticia .cycle-pager-active
		{
			color: #b72a3c;
		}
		
		.pager_noticia span
		{
			cursor: pointer;
		}
		
#contenidor_mapa
{
	margin: 0px; margin-bottom: 15px; min-height: 0px; position: relative;
}
	#mapa_partners
	{
		display: none;
	}	
	
	#poblacions_onsom
	{
		width: 100%;
	
	}	
		
	.contenidor_contacte
	{
		width: auto;
	}
	
	.contenidor_captcha input
	{
		width: 90% !important;
	}
	
	.bloc_noticia
	{
		margin-bottom: 30px;
	}	
	
		.bloc_noticia .data_noticia
		{
			width: 150px; margin-right: 15px; color: #b11a2d; font-size: 30px; font-style: italic; line-height: 30px;
		}	
		
		.bloc_noticia h3
		{
			font-size: 20px; line-height: 25px; font-weight: normal; font-style: italic; margin-bottom: 15px;
		}
		
		.bloc_noticia .col_esquerra_llarg
		{
			width: 100%;
		}
		.bloc_noticia .col_esquerra_curt
		{
			width: 100%;
		}
		
		.bloc_noticia .col_dreta
		{
			width: 100%; 
			position: relative;
		}
			.bloc_noticia .col_dreta div,.bloc_noticia .col_dreta img,.bloc_noticia .col_dreta a
			{
				width: 100%;
			}
			
	
	
	.contenidor_dades_donatius
	{
		width: auto;
		margin-bottom: 25px;
	}
	
	.contenidor_pagaments_donatius
	{
		width: auto; font-style: italic;
	}
	
		.label_opcions
		{
			width: auto; display: block; margin-bottom: 10px;
		}
		
	input[type=text]
	{
		width: 40.6%;
		border: 1px solid #CECECE;
		margin: 2px 0px;
		padding: 8px 4%;
		font-style: italic;
		font-size: 14px;
		
		
	}
	
	#dades_sexe, #dades_any, #dades_llengua
	{
		float: none;
		display: block;
		margin: auto !important;
		margin-bottom: 15px !important;
		text-align: center;
		
	}
	
		#dades_any span,#dades_any select
		{
			display: block;
			float: none !important;
			margin: auto;
			margin-bottom: 2px;
		}
	
	
	.lletra_llistat_empreses
	{
		display: block;
		float: none;
		margin-bottom: 15px;
	}
	
	.llistat_empreses
	{
		width: auto;
		float: none;
	}
			
		#peu
		{
			background-color: #3c3c3c; padding: 10px; color: #dedede;
		}	
			
			#peu, #peu a
			{
				color: #dedede;
				font-size: 14px;
				text-decoration: none;
			}
				
				#peu a.mail
				{
					color:#b11a2d;
				}
			
			#dades_contacte_peu
			{
				line-height: 18px;
				width: auto;
				margin-right: 0px;
				text-align: center;
				float: none !important;
				margin-bottom: 15px;
			}
			
				#dades_contacte_peu a:hover
				{
					text-decoration: underline;
				}
			
			#enllacos_peu
			{
				width: auto;
				margin-right: 0px;
				border-bottom: 1px solid #505050;
				border-top: 1px solid #212121;
				margin-bottom: 15px;
				float: none !important;
			}
				
				#enllacos_peu a
				{
					display: block;
					line-height: 16px;
					padding: 10px 0px;
					text-decoration: none;
					border-top: 1px solid #505050;
					border-bottom: 1px solid #212121;
					text-align: center;
				}
			
			#empreses_peu
			{
				width: auto;
				float: none !important; 
				text-align: center;
			}
				#empreses_peu img
				{
					width: 100%;
				}
			
			
			.white-popup {
			  position: relative;
			  background: #FFF;
			  padding: 20px;
			  max-width: 500px;
			  width: auto;
			  height: 500px;
			  overflow: auto;
			  margin: 20px auto;
			}
			
				.white-popup > div
				{
					height: 480px; 
					overflow: auto;
				}
}

@media all and (min-width: 885px) and (max-width: 1010px)
{
	h1
	{
		font-size: 22px !important;
		line-height: 24px !important;
	}
	
	h2,h3
	{
		width: auto !important;
	}
	
	
	
	
	#ruta
	{
		padding: 5px 10px;
	}
	
	body
	{
		padding-top: 0 !important; 
	}
	#header,#nav,#msg_cookies_fbox
	{
		position: static !important;
	}
	#header > div
	{
		width: 100% !important;
		position: static !important; 
		margin: auto; 
		padding: 10px 0px;
		text-align: center;
	}
	
		#logo
		{
			width: 250px;
			height:auto;
		}
		
		#xarxes_socials
		{
			margin: 20px 0px; position: relative; z-index: 250; width: 100%; display: block;
		}
			#xarxes_socials > div
			{
				width: 710px; 
				margin: auto;
				padding-left:35px;
				
				
			}
			
			#xarxes_socials div.fl, #xarxes_socials div.fr
			{
				text-align: center;
				width: auto;
				float: none;
			}
			
				
		

	
		#nav > div
		{
			width: 100%;
		}
			#cercador
			{
				display: none;
				float: right; 
				margin-top: 9px; 
				border-radius: 2px; 
				padding: 3px 5px 2px 5px;
			}
				#cercador input[type="text"]
				{
					width: 163px; height: 18px; line-height: 18px; font-style: italic; padding: 0px;margin: 2px 0px; color: #b11a2d;font-size: 16px; border: none; background-color:transparent;  outline: 0px;
				}
				
				#cercador img
				{
					cursor: pointer; margin-right: 5px; margin-top: 4px;
				}
	
	#nav > div
	{
		text-align:center;
	}
	
	#menu
	{
		margin: auto;
		float: none;
	}
	
		
	#content_centrat
	{
		width: 100% !important;
	}		
	#content
	{
		border-top: 2px solid #b11a2d; 
		min-height: 352px; 
		background:url(../img/bg_content.jpg) repeat-x; 
		padding: 10px;
	}
	
	#slide_home
	{
		/*height: 200px !important; */
		width: 100%; 
		margin-bottom: 10px; 
		height: 0px !important;
		padding-bottom: 36%; /* proportional scaling */
	}
		.slide_gran
		{
			position: absolute; width: 100%; height: 100%; left: 0; margin-left: 0px;
		}
		
			.slide_gran > div
			{
				height: 100%; 
				width: 100%;
				background-size: 150% auto !important;
			}
			
				.slide_gran > div > div
				{
					width: 100%; position: absolute; left: 0; margin-left: 0; bottom: 0px;
				}
				
				.frase_slide
				{
					padding: 5px 10px; background: url(../img/fons_negre_transparent.png); color: #FFFFFF; display: block; line-height: 15px; margin-left: 0px; font-size: 13px; font-style: italic;
				}
				
				.boto_slide
				{
					margin-right: 0px;padding: 5px 10px; background-color: #b11a2d; color: #FFFFFF; font-size: 13px; display: block; line-height: 15px; font-style: italic; text-decoration: none;
					text-align: right;
				}
	
	
	.banner_home
	{
		float: left;
		position: relative; 
		width: 24.6%; 
		height: auto;
		margin: 0.2% !important;
		overflow: hidden;
	}
		.banner_home > span
		{
			background-color: #b11a2d; color: #FFFFFF; font-size: 14px; font-style: italic; text-transform: uppercase; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; line-height: 16px; padding: 5px;
		}
	
		.banner_home > img
		{
			width: 100%;
		}
		
		#enllacos_veure_mes
		{
			display: none;
		}
		#noticies_home
		{
			padding: 0 0.5%;
			overflow: hidden;
			
		}	
		#noticies_home .noticia
		{
			width: 29%;
			float: left;
			margin: 0px 2%;
			font-size: 14px;
			line-height: 18px;
			text-align: justify;
		}
		
		.noticia .tipus
		{
			color: #b11a2d;
			font-style: italic;
			font-size: 20px;
			line-height: 23px;
			margin-bottom: 5px;
			display: block;
		}
		
		.noticia a
		{
			font-size: 20px;
			line-height: 25px;
			font-size: italic;
			margin-bottom: 5px;
			color: #000000;
			text-decoration: none;
			font-style: italic;
			display: block;
			text-align: left;
		}
		
		.noticia .data
		{
			font-weight: bold;
			font-size: 16px;
			margin-bottom: 5px;
			display: block;
			line-height: 16px;
		}
			
			
		.desplegable
		{
			float: left;
			list-style: none;
			padding-left: 0px;
			margin: 0px;
			margin-right: 15px;
			position: relative;
			z-index: 150;
			text-align: left;
		}
		
		.desplegable > li
		{
			position: relative;
			width: 250px;
		}
			.desplegable > li > span
			{
				display: block;
				padding: 10px;
				text-decoration: none;
				font-size: 13px;
				font-style: italic;
				color: #FFFFFF;
				background-color: #b72a3c;
				line-height: 11px;
				border-radius: 1px;
				text-transform: uppercase;
				cursor: default;
			}
				.desplegable > li > span.active
				{
					color: #990000;
				}
			
				.desplegable li span img
				{
					margin-top: 4px;
				}
				
		.desplegable li ul
		{
			position: absolute;
			left: 0;
			right: 0;
			border-top: 2px solid #FFFFFF;
			margin-left: 0;
			background-color: #b72a3c;
			border-radius: 2px;
			display: none;
			list-style: none;
			height: 200px;
			padding: 10px 0px;
			
		}
		
	.desplegable li ul a
	{

		display: block;
		padding: 10px;
		text-decoration: none;
		font-size: 13px;
		font-style: italic;
		color: #FFFFFF;
		line-height: 11px;
		text-transform: uppercase;
	}

	
		.seleccio_programes > div > a
		{
			width:20%;
			
			
		}
	
.bloc_generic
{
	margin-bottom: 30px;
}

	.bloc_generic h2
	{
		width: auto; font-size: 20px; color: #b11a2d; font-weight: normal; font-style: italic; margin-bottom: 5px;
	}
	.bloc_generic h3
	{
		width: auto; font-size: 20px; line-height: 25px; font-weight: normal; font-style: italic; margin-bottom: 15px;
	}
	
	.bloc_generic .col_esquerra
	{
		width: 48%;

		margin-bottom: 25px;
	}
	
	.bloc_generic .col_dreta
	{
		width: 48%;
		position: relative;
		margin-bottom: 25px;
	}
		
		.bloc_generic .col_dreta div, .bloc_generic .col_dreta img, .bloc_generic .col_dreta a
		{
			width: 100%;	
		}
	
	.boto_generic
	{
		display: inline-block !important; 
		background-color: #b72a3c; 
		padding: 8px; 
		font-style: italic; 
		text-decoration: none;
		color: #FFFFFF; 
		margin-right: 15px; 
		margin-bottom: 15px;
		width: auto !important;
	}
	
		.boto_generic img
		{
			width: auto !important;
		}
		
	.mapa
	{
		width: 100%;
		/*width: inherit !important;*/
	}
	
	.dos_columnes
	{
		-moz-column-count:auto;
		-webkit-column-count:auto;
		column-count:auto; 
		-moz-column-gap:30px;
		-webkit-column-gap:30px;
		column-gap:30px;
	}
	.pager_noticia
	{
		text-align: center;
		position: absolute;
		width: 100%;
		z-index:150;
		margin-top: -50px;
		color: #3c3c3c;
		font-size: 25px;
		
	}
	
		.pager_noticia .cycle-pager-active
		{
			color: #b72a3c;
		}
		
		.pager_noticia span
		{
			cursor: pointer;
		}
		
#contenidor_mapa
{
	margin: 0px; margin-bottom: 15px; min-height: 0px; position: relative;
}
	#mapa_partners
	{
		display: none;
	}	
	
	#poblacions_onsom
	{
		width: 100%;
	
	}	
		
	.contenidor_contacte
	{
		width: 60%;
	}
	
	.contenidor_captcha input
	{
		width: 90% !important;
	}
	
	.bloc_noticia
	{
		margin-bottom: 30px;
	}	
	
		.bloc_noticia .data_noticia
		{
			width: 10%;
		}	
		
		.bloc_noticia h3
		{
			font-size: 20px; line-height: 25px; font-weight: normal; font-style: italic; margin-bottom: 15px;
		}
		
		.bloc_noticia .col_esquerra_llarg
		{
			width: 45%;
		}
		.bloc_noticia .col_esquerra_curt
		{
			width: 45%;
		}
		
		.bloc_noticia .col_dreta
		{
			width: 40%; 
			position: relative;
		}
			.bloc_noticia .col_dreta div,.bloc_noticia .col_dreta img,.bloc_noticia .col_dreta a
			{
				width: 100%;
			}
			
	
	
	.contenidor_dades_donatius
	{
		width: 60%;
		margin-bottom: 25px;
		margin: auto;
		float: none;
	}
	
	.contenidor_pagaments_donatius
	{
		width: 60%;
		float: none;
		margin: auto;
		font-style: italic;
	}
	
		.label_opcions
		{
			width: auto; display: block; margin-bottom: 10px;
		}
		
	input[type=text]
	{
		width: 40.6%;
		border: 1px solid #CECECE;
		margin: 2px 0px;
		padding: 8px 4%;
		font-style: italic;
		font-size: 14px;
		
		
	}
	
	#dades_sexe, #dades_any, #dades_llengua
	{
		float: none;
		display: block;
		margin: auto !important;
		margin-bottom: 15px !important;
		text-align: center;
		
	}
	
		#dades_any span,#dades_any select
		{
			display: block;
			float: none !important;
			margin: auto;
			margin-bottom: 2px;
		}
	
	
	.lletra_llistat_empreses
	{
		display: block;
		float: none;
		margin-bottom: 15px;
	}
	
	.llistat_empreses
	{
		width: auto;
		float: none;
	}
			
		#peu
		{
			background-color: #3c3c3c; padding: 0.1%; color: #dedede;
		}	
			
			#peu, #peu a
			{
				color: #dedede;
				font-size: 14px;
				text-decoration: none;
			}
				
				#peu a.mail
				{
					color:#b11a2d;
				}
			
			#dades_contacte_peu
			{
				line-height: 18px;
				width: 29%;
				margin:2%;
			}
			
			#enllacos_peu
			{
				width: 29%;
				margin: 2%;
			}
				
				
			
			#empreses_peu
			{
				width: 29%;
				margin: 2%; 
			}
				#empreses_peu img
				{
					width: 100%;
				}
			
			
			.white-popup {
			  position: relative;
			  background: #FFF;
			  padding: 20px;
			  max-width: 500px;
			  width: auto;
			  height: 500px;
			  overflow: auto;
			  margin: 20px auto;
			}
			
				.white-popup > div
				{
					height: 480px; 
					overflow: auto;
				}
}