/* CSS Document */
html,body {margin:0; padding:0; font-size:1em; font-family:Arial, Helvetica, sans-serif, "Arial Narrow"; color:#666;}
a {/*color:#E2441D;*/ color:#000000; font-weight:bold; text-decoration:none;}
a:hover{text-decoration:underline;}
img {border:none;}
.separador {clear:both;}
body {background:URL(img/fons.jpg) top center no-repeat #FFF; }
h1 {margin-top:0px;}
img.ocult {display:none;}
img.dreta {float:right; margin:0px 0px 1em 1em;}
img.esquerra {float:left; margin:0px 1em 1em 0px;}
p.centrat {text-align:center;}
p.ocultar {margin:0px;}
p.noWeb {display:none;margin:0px;}
p.separar {margin:0px;}
p.petit {font-size:75%;}
/* TAMANYS I FONS */
#contenidor{width:1000px; margin:0 auto; }
#capcalera #logoPaeria {position:absolute; top: 26px; right:22px; width:153px; height:71px; }
#cos{width:100%; margin:0px; padding:0px; background:#FFF; margin-top:30px;  }
#contingut{ float:left; width:100%; text-align:justify; font:Arial, Helvetica, sans-serif; font-size:87.5%; line-height:160%;}
#molletes { font-size:75%; margin-bottom:10px;}
#logotips{float:left}
h1 { background-color:#E7E6E6;height:auto; color:#4e4e4e; font-family:'Roboto', sans-serif; font-size:22px; padding:20px 20px 20px 10px; margin-bottom:30px;font-weight:normal;}
h2{ font-family:Arial, Helvetica, sans-serif; font-size:125%; color:#4e4e4e; padding-top:20px; border-bottom:1px dotted #4e4e4e}
h3{ font-family:Arial, Helvetica, sans-serif; font-size:112.5%; color:#4e4e4e; padding-top:20px; }
h4 { margin: 20px 0px 10px 0px; display:inline;}

h1.amb-logo {background-image: url("../img/fons-h1-amb-logo.png"); ;height:auto; color:#4e4e4e; font-family:'Roboto', sans-serif; font-size:22px; padding:24px 10px 24px 75px; margin-bottom:30px;font-weight:normal;}

/* ACORDIO */
/*.acordio {font-size:1em;}
.acButton {	font-size:100%;	}
.aContent {	font-size:100%;	}
.aContent ul li {padding:0px 25px 0px 0px;}*/


/* CAPCALERA */
#capcalera{width:100%; position:relative;}
ul#idiomes { width:100%; height:34px; position:absolute; list-style:none; margin:0px; padding:0px;}
ul#idiomes li {margin:10px 0px 0px 0px; padding:0px; float:right;}
ul#idiomes li img { margin-right:8px;}
#capcalera {
    position: relative;
    display: inline-block;
	background-image: linear-gradient(#fefefe, #eeeeee, #f6f6f6);
	height:146px;
	width:100%;
} 
h1.text-imatge {
	color:#d92129;
	font-size:37.8px;
	font-family: 'Roboto', sans-serif;	
	background:none;
	height:auto;
	text-transform:none;
	padding:0px;
	margin:40px 0px 0px 120px;
	display:block;
	font-weight:normal;
	line-height:41.5833px;
	letter-spacing:-1.3px;
	text-rendering: optimizelegibility;
}
h2.subtext-imatge {
	color:#4e4e4e;
	font-size:20px;
	font-family: 'Roboto', sans-serif;	
	font-weight:normal;
	border:none;
	padding:0px;
	margin:5px 0px 0px 120px;
	display:block;
}
#capcalera #logoPaeria {position:absolute; top: 40px; right:35px;}

/* INFORMACIO */
#informacio p.text-dreta {float:right; width:60%; font-size:18px; line-height:157%; margin-top:0px;}
#informacio .dosColumnes { width:100%;}
#informacio .dosColumnes .columna1{ width:56%; float:left; padding:2%;}
#informacio .dosColumnes .columna2{ width:40%; float:right; text-align:center;}
#informacio .quatreColumnes { width:100%;}
/*OPC1
#informacio .quatreColumnes .columna1d4,
#informacio .quatreColumnes .columna3d4 {width:15%; float:left; text-align:center;}
#informacio .quatreColumnes .columna2d4,
#informacio .quatreColumnes .columna4d4{ width:31%; padding:0px 2%; float:left;}*/
/*OPC2*/
#informacio .quatreColumnes .columna1d4,
#informacio .quatreColumnes .columna3d4 {width:15%; float:left; text-align:center;}
#informacio .quatreColumnes .columna2d4,
#informacio .quatreColumnes .columna4d4{ width:81%; padding:0px 2%; float:left;}

#informacio dl dt { background:#f0f0f0; padding:5px 5px 5px 10px; margin-top:2em;}
#informacio dl dd {}

#informacio .comunicacions-anonimes { width:92%; float:none;padding:0px 4% 4% 4%;}

/* ACCÉS A LA BÚSTIA */
#accesbustia {float: right; width: 92%; background-color: /*#e7e6e6*/ #c3c5e9; padding:10px 4% 20px 4%; height: auto; text-align:center; font-size:16px;border-radius: 5px; color:#272727;}
#accesbustia h3 {font-size:20px; font-weight:normal; padding-top:0px;}
#accesbustia .boto a{ 
width:180px; 
height:40px;
background-color:#66142c;
margin-left:auto; 
margin-right:auto; 
text-align:center; 
line-height:40px;
font-size:18px;
color:#ffffff;
border-radius: 5px;
text-decoration:none;
padding:15px;
/*height:auto; 
display:block;*/
}
#accesbustia .boto a:hover {background-color:#882f49; color:#FFF;}
#accesbustia .boto .icon{
display: block;
margin-left:auto; 
margin-right:auto;
height:30px;
width:30px;
}

/* PORTADA */
#franja-pictos { width:100%; height:300px; margin-bottom:1em;}
#franja-pictos .item { width:22%; float:left; text-align:center;}
#franja-pictos .fletxa-horitzontal {width:4%; float:left;}
#franja-pictos .fletxa-vertical { display:none;}

/* PEU */
#peu { background-color:#EEE; color:#666; width:100%; padding-top:10px; height:auto; line-height:160%; margin-top:50px; padding-bottom:10px; }
#peu li{list-style:circle!important;line-height:220%;}
#contingutPeu { width:960px;  margin: 0px auto; padding-top:20px;}
#peu .columna {width:225px; float:left; margin-left:20px;}
#peu .columna:first-child {margin-left:0px;}
#peu .columna a {color:#666;text-decoration:underline;}
#peu .columna ul {padding-left:13px;}
#peu #titol { font-weight:bold; border-bottom:1px solid #666; width:225px; display: block; font-size:87.5%; margin-bottom:10px;}
#peu #llista{list-style-type:circle!important;list-style:circle}
#peu {font-size:75%;}



/******************************************************************************** RESPONSIVE */
@media screen and (max-width: 1000px) {
	#contenidor,
	#contingutPeu {width:100%;}
	#cos #navigation #main-menu li a {font-size:14px;}
	h1.text-imatge { margin:40px 0px 0px 5%; }
	h2.subtext-imatge {	margin:5px 0px 0px 5%; }
	#franja-pictos { width:96%; padding:0px 2%; height:300px; margin-bottom:1em;}
	#peu {width:96%; padding:10px 2% 0px 2%;}
	#peu .columna {width:23%; margin-left:2%;}
	#peu .columna ul {padding-left:20px;}
	#peu #titol {width:100%;}
}
@media screen and (max-width: 900px) {
	#cos #navigation #main-menu li a {font-size:12px;}
	h1 {font-size:1.2em;}
	h1.amb-logo {font-size:1.2em;}
}
@media screen and (max-width: 770px) {	
#cos {margin-top:0px;}
	h1.text-imatge { font-size:31px;}
	h2.subtext-imatge {	font-size:16px;}
	#cos #navigation #main-menu li {float: left; width:23%; margin-left:2%; position:inherit; margin-top:1em;}
	#cos #navigation #main-menu li a { height:3em;}
	#peu .columna {width:48%; margin-left:2%;}
	#peu #textA {height:350px;}
}
@media screen and (max-width: 650px) {	
	#capcalera {height:200px;}
	#capcalera #logoPaeria {position:inherit; margin:1em auto 0px auto; padding:0px 27%;}
	h1 {margin-bottom:0px;}
	h1.text-imatge { margin:1em 0px 0px 5%;}
	h2.subtext-imatge {	margin:0px 0px 0px 5%;}
	#informacio .dosColumnes .columna1 { width:92%; float:none; padding:0px 4% 4% 4%;}
	#informacio .dosColumnes .columna2{ width:100%; float:none;}
	#informacio .quatreColumnes .columna1d4,
	#informacio .quatreColumnes .columna3d4 {width:30%;}
	#informacio .quatreColumnes .columna2d4,
	#informacio .quatreColumnes .columna4d4{ width:66%;}
	#peu .columna {width:100%;margin-left:0px; margin-bottom:3em;}
	#peu #textA {height:auto;}
}
@media screen and (max-width: 575px) {	
	#franja-pictos { height:auto;}
	#franja-pictos .item { width:100%; text-align:center;}
	#franja-pictos .fletxa-horitzontal {display:none;}
	#franja-pictos .fletxa-vertical { display:inherit; width:100%; text-align:center;}
}
@media screen and (max-width: 460px) {	
	#capcalera {height:auto;padding-bottom:1em;}
	h1.text-imatge { font-size:25px; line-height:120%; margin-bottom:5px;}
	h2.subtext-imatge {	font-size:13px;}
	#cos #navigation #main-menu li {width:42%;}
	#informacio .quatreColumnes .columna1d4 {margin-top:1.5em;}
	#informacio .quatreColumnes .columna1d4,
	#informacio .quatreColumnes .columna3d4 {width:100%;}
	#informacio .quatreColumnes .columna2d4,
	#informacio .quatreColumnes .columna4d4{ width:92%; float:none;padding:4%;}
}

/************ PROVA ACORDIÓ *********************/

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';  /** + **/
    font-size: 13px;
    float: right;
    margin-left: 5px;

}

button.accordion.active:after {
    content: "\2796"; /** - **/
	
}

div.panel {
    padding: 0 18px;
    max-height: 0;
    /*overflow: hidden;*/
    transition: 0.6s ease-in-out;
    opacity: 0;
}


div.panel.show {
   opacity: 1;
    max-height: 500px;
	background-color: #F00; /*vermell*/
	
}