/***********************************************************************/
/* Estils per a www.Elsblaus.cat                                       */
/*                                                                     */
/*                                                                     */
/* #4C80B6 blau de l'escut rgba(0,74,151, 0.7) amb 70% de transperencia*/
/* #4f4f46 color de lletra (negre)                                     */
/*                                                                     */
/*                                                   per mberamendi.cat*/
/***********************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* ======================== GENERALS */
* {margin: 0px; padding:0px;}
html {scroll-behavior: smooth;}
img {border: 0;}
table {border-collapse:collapse;} 
body {font-family: 'Roboto', Arial, Verdana, Helvetica, sans-serif;	font-size: 1em; color: #4f4f46;}
.cap {width: 100%; height: 217px; background-image: url('../img/cap1.jpg'); position:relative;
	background-repeat:no-repeat; background-position: top center;}
.titols {width:95%; max-width:1298px; height: 217px; margin: 0px auto; position: relative; }
.cos {width:95%; max-width:1298px; margin: 15px auto; padding-top: 12px; overflow: hidden;}
.peu {width:95%; max-width:1298px; margin: 20px auto; min-height: 50px; border-top: 1px dashed #4f4f46; clear:both; position: relative;}
.logo {position: absolute; top: 0; right:0; width:auto; margin: 5px;}
.lema {position: absolute; left: 0; bottom: 40px; width:auto; height: auto; font-style:italic; margin: 5px 0;}
.social {position: absolute; left: 0; top: 5px; height:30px; padding: 4px; /*background-color: rgba(0,0,0,0.3); border-radius: 4px;*/}
.logo img {height:170px;}

/* ======================== MENUS */
.barra_menu {position: absolute; left: 0; bottom: 0; width:100%;}
.barra_menu_fixe {position:fixed; top: 0; z-index: 10; width:100%; background-color: rgba(255,255,255,0.5); box-shadow: 3px 3px 3px rgba(64,64,64, 0.1);}
.menu {width:95%; max-width:1298px; margin: 0px auto; background-color: rgba(255,255,255,0.8);}
/*nou menu*/
.menu ul {list-style:none; display: table; width:100%; /*overflow: hidden;*/ position:relative;}
.menu ul > li {display: table-cell; width:auto;}
.menu ul > li {text-align:center; font-size: 1em; font-weight: bold; overflow: hidden;vertical-align: middle;}
.menu ul > li.select > a , .menu ul > li:hover > a {color: #fff;background: #4C80B6; text-decoration:none;}
.menu ul > li > a {display: block; line-height:1.2em; padding:10px 20px; color: #F25F25; position:relative;  text-transform: uppercase;}
/*Sub-menus (del principal i laterals de les seccions) */
.menu ul.sub {display:none;}  /*estat inicial temporal*/
.menu ul > li:hover ul.sub {display:block; position:absolute;}
.menu ul.sub {width: 195px; font-size: 1em; border: none; margin: 0px;  border: solid 1px #4C80B6; background-color:white; z-index:1;}
.menu ul.sub li {text-align:left; display: block; position:relative; font-weight: normal;}
.menu ul.sub a:hover {font-weight: bold; background: #4C80B6; color: #fff;}
.menu ul.sub a {display: block; color: #4f4f46; position:relative; line-height:1.2em; padding: 8px;  text-transform: none;}
.submenu li {font-size: 1.1em; background: #ededed; color: #4f4f46; border: 1px solid #ccc; padding: 5px; margin: 0px 0px 7px; list-style:none;}
.submenu li.select, .submenu li:hover {font-weight: bold; background: #4C80B6; color: #fff; border: 1px solid #4C80B6;}
.submenu a:hover{text-decoration:none;}
.submenu {}
/* responsive */
.menu_resp {display: none;  position:fixed; top: 5px; right: 5px; width: 35px; height:35px; border-radius: 5px;
		background-image: url('/img/menu_resp.png'); background-position: center center; background-size:cover; background-repeat:no-repeat;
		background-color: rgba(0,0,0,0.25); z-index:10;}
.menu_resp_tanca {display: none; position:fixed; top: 5px; right: 5px; width: 35px; height:35px; border-radius: 5px;
		background-image: url('/img/menu_resp_tanca.png'); background-position: center center; background-size:cover; background-repeat:no-repeat;
		background-color: rgba(255,255,255,0.5);}
.sub_menu_resp {display: none;  position:fixed; top: 45px; right: 5px; width: 35px; height:35px; border-radius: 5px;
		background-image: url('/img/sub_menu_resp.png'); background-position: center center; background-size:cover; background-repeat:no-repeat;
		background-color: rgba(0,0,0,0.25); z-index:7;}
.sub_menu_resp_tanca {display: none; position:fixed; top: 45px; right: 5px; width: 35px; height:35px; border-radius: 5px;
		background-image: url('/img/menu_resp_tanca.png'); background-position: center center; background-size:cover; background-repeat:no-repeat;
		background-color: rgba(255,255,255,0.5);}
.menu_resp:hover, .menu_resp_tanca:hover, .sub_menu_resp:hover,  .sub_menu_resp_tanca:hover {cursor:pointer}

/* ======================== TEXT */
a {text-decoration:none;} /* En geneal el enllaços no estaran subratllats*/
p, blockquote {margin-bottom: 12px; text-align:justify; line-height:1.5em;}
h1 {font-size: 2.4em; color: white; padding: 10px; line-height:0.75em;}
.lema h1 { border-radius: 8px; background-color: rgba(0,0,0,0.35);}
/*h1 {font-size: 2.6em; color: rgba(250,250, 250, 0.8);}*/
h2 {font-size: 1.2em; width: 98%; padding: 5px 1%; background:#d3d3d3;}
h3 {font-size: 1.3em; width: 99.1%; padding: 15px 0.45%;}
h4 {font-size: 1.1em; width: 99.2%; background: #d3d3d3; font-weight:bold; margin: 24px auto 12px; padding: 6px 0.4%;}
.extra h2 {width: 95%; padding: 4px 2% 4px 3%;}

/* ======================== CALENDARI */
table.calendari {width:calc(100% - 2px); max-width: 425px; color: #b0b0b0; margin: 20px auto 25px;}
table.calendari th, table.calendari td {border: solid 1px #4f4f46; text-align:center; padding: 7px 0;}
table.calendari th {color: black !important; font-size:0.9em;}
table.calendari .ves {border:none;}
table.calendari .caption {border:none; color:black; font-size: 1.1em; font-weight:bold;}
table.calendari .marcat {background-color: #759dc7; color: #c3c3c3;}
table.calendari .marcat_festa {background-color: #4C80B6; font-weight:bold; color: #c3c3c3;}
table.calendari .gris {color: #939393; font-weight:bold; background-color: #e3e3e3;}
table.calendari td a {color: white;}

/* ======================== ESTRUCTURA */
.cos_news, .cos_pagina {width: calc(96% - 320px); margin-bottom: 20px; min-height:500px; overflow:hidden;}
.cos_news {float:left;}
.cos_pagina {float: right;}
.extra, .documents_r {float: right; width: 320px; margin-bottom: 15px;}
.cos_galeries {width: 100% !important; min-height:500px; margin-bottom: 20px; overflow:hidden;}
.cos_seccio {width: 100%; padding: 5px 0;}
.cos_seccio p, blockquote {margin-bottom: 12px;}
.cos_seccio td {padding:2px; vertical-align:top;}
.cos_seccio table td p {padding: 0; margin:0;}
/* noticies */
.news {width: 100%; margin-bottom: 10px; padding: 20px 0 10px; border-bottom: 1px dashed #d3d3d3; clear:both; position:relative; overflow:hidden;}
.news_img {float:left; width: 280px; margin-bottom: 20px;}
.news_img img {min-height: 200px; max-height:350px; object-fit: contain; object-position: top center;}
.news_titol {float:right; width: calc(97% - 280px); margin-bottom: 10px;}
.news_titol h3 {margin:0; padding:0;}
.news_text {float:right; width: calc(97% - 280px); min-height:100px; margin-bottom: 5px;}
.news_text ul {margin-left: 30px; margin-bottom:15px;}
.news_text li {display:list-item; list-style:disc; margin: 5px 0;}
.news_text h3 {margin-bottom:0;}

/* seccions */
.cos_seccio .news {width: 100%; padding:0; overflow:hidden;}
.cos_seccio .news_img {float:left; width: 250px; min-height:0px; margin: 0 0 5px 0; text-align:right;}
.cos_seccio .news_img img {width:100%; min-height:inherit; max-height:270px; object-fit: contain; object-position: top;}
.cos_seccio .news_text {float:right; width: calc(96% - 250px); min-height:100px; margin-bottom: 5px;}
.cos_seccio .news_titol {float:right; width: calc(96% - 250px); margin-bottom: 5px;}
.cos_seccio .news_titol p{line-height: 1.2em; text-align:left; margin-bottom: 18px;}
.cos_seccio .news_titol b, .cos_seccio .news_titol strong {font-size: 125%;}
.activities {width: 98%; margin: 10px auto 5px; text-align:center;}
.activities img {max-width:250px; max-height:400px;}
p.data {font-style:italic; margin-bottom: 10px; font-size: 0.8em;}
.p_blau {border: solid 1px #4C80B6; padding: 4px;}
p.indent {padding-left: 30px; text-indent: -30px;}
.cos_news td {padding: 2px; vertical-align:top;}
.cos_seccio ul {margin-left: 30px; margin-bottom:15px;}
.cos_seccio li {display:list-item; list-style:disc; margin: 5px 0;}
.fil_ariadna {margin-left: calc(320px + 4%);}
.fil_ariadna ul {display: inline-block;}
.fil_ariadna li {padding: 9px 4px; font-size: 0.9em; font-weight: bold; float: left; display: inline-block;}
.fil_ariadna a {color: #F25F25;}
.imatge_seccio {margin: 0px;}
.col_esquerra, .col_dreta {width: 48%; margin: 5px 0 10px;}
.col_esquerra {float: left;}
.col_dreta {float: right;}

/* ========================  GALERIES */
.galeria {position:relative; float:left; width: 49%; min-height:190px; margin: 15px 0.5% 0px;}
.galeria_img {position: absolute; top:0; left:0; width: 190px; height: 190px;  
	background-repeat:no-repeat; background-color:#ededed; background-position:center; background-size:cover;}
.galeria_img:hover {cursor:pointer;}
.galeria_titols {position: absolute; top:0; right:0; width: calc(100% - 210px);}
.galeria_titols h3 {margin:0; padding-bottom: 1px; font-size: 1em;}
.galeria_titols h4 {margin:0; padding: 0;  font-size: 0.9em; font-weight:normal; font-style:italic; background-color:transparent;}
.galeria_text {position: absolute; bottom: 0; right: 0; width: calc(100% - 210px); height:135px; overflow: hidden;}

.cos_thumbs {width: 100%; min-height:500px; margin: 0px auto 20px; overflow:hidden;}
.thumb_img {float:left; width: 190px; height: 190px; margin: 3px; text-align:center;
 				background-repeat:no-repeat; background-color:#ededed; background-position:center; background-size:cover;}
.thumb_img:hover {cursor:pointer;}
.thumb_text {width: 98%; padding: 10px 1%; margin: 5px 0px;}
/* ======================== FORMULARIS */
.curt  {width: 180px;}
.llarg {width: 300px;}
.llarg_tot {width: 96%;  padding: 5px 1%; margin: 4px 0;}
.form_contacta {width: 100%; border: none;}
.form_contacta .curt  {width: 50%;}
.form_contacta .llarg, .form_contacta textarea {width: 98%;}
#formulari input, select, #formulari_tpv input, #formulari #missatge {padding: 5px 3px; font-size: 1em;}
#formulari tr {height: 45px;}
.text_lopd {margin-top:10px;}
.text_lopd p {font-size:0.8em;}
#formulari .boto, #formulari_tpv .boto, #formulari_tpv .boto_desactivat {padding: 5px 10px;}
.pagament {float:right; min-width: 80%; max-width: 85%; background-color: #dedede; padding: 1px 5px; margin-bottom: 10px;}
.formulari_esquerra {float: left; width: 56%;}
.formulari_dreta {float: right; width: 40%;}
.per_tu {display: none;}
#taula_formulari td {padding: 0px 4px}
/* central de reserva*/
.thumb_activitat {position:relative; float:left; width: 235px; height: 235px; margin: 8px 7px ;;
 				background-repeat:no-repeat; background-color:#ededed; background-position:center center; background-size:cover;}
.thumb_activitat h4 {width:98%; padding: 1%; margin:0; text-align: left; color: white; background-color:rgba(64,64,	64,0.65);}
.thumb_activitat a.boto {position:absolute; bottom: 5px; right: 5px; padding: 5px 8px; color: white; border-radius: 4px; border: solid 1px white; font-weight:bold;
							background-color:rgba(64,64,64,0.65);}
.frame_pagament {width: 95%; height: 300px; margin: 5px 2.5% 10px; border: solid 1px #d3d3d3;}
table.apats {width: 100%; margin: 15px 0 0; background-color: #e3e3e3;}
table.apats tbody {display: block; padding: 10px 5%;}
table.apats tr {height:auto !important;}
table.apats td {padding: 4px 2px;}
/*butlleti*/
.activities form td {text-align: left; padding: 3px 0;}
.activities label {font-weight:bold;}
.iframe_envia {display: none;}
.boto {padding: 6px; margin: 4px 0;}
input[type="checkbox"] {margin: 10px;}
#fila3 {display: none;}
/* ======================== Documents Relacionats */
.documents_r {float: left;}
.documents_r h4 {border-bottom: solid 1px #d3d3d3; background-color:transparent;}
.documents_capsa {min-height: 55px; clear: both; position: relative; overflow:hidden; margin-bottom:15px;}
.documents_capsa a {}
.documents_capsa .ico {position: absolute; top:0; left:0; width:50px; }
.documents_capsa .descrip {width: calc(100% - 60px); font-size:0.9em; margin-left: 60px;}
.documents_capsa p {text-align:left;}

/*PEU*/
.peu li {display: inline-block; margin-left: 10px; padding-left: 10px;}
.peu li.separa {border-left: 1px solid #4F4F46;	}
.peu a {color: #4f4f46;}
.copy {position: absolute; left: 0; top: 5px; width: 48%;}
.enllassos {position: absolute; right: 0; top: 5px;}


/* ======================== ALTRES */
.ok {padding: 10px 5px;color: green;}
.dreta {text-align:right;}
.movil, .si_mobil {display: none;}
.ves:hover {cursor: pointer;}

@media only screen and (max-width: 1024px) {
.submenu li {width:auto;}
.menu ul > li > a {padding:10px;}
.fil_ariadna {margin-left: calc(280px + 4%);}
.cos_news, .cos_pagina {width: calc(96% - 280px);}
.extra, .documents_r {width: 280px;}
.col_esquerra, .col_dreta {width: 100%;}
}

@media only screen and (max-width: 999px) {
.cos_galeries {width: 98%; margin-left:auto; margin-right:auto;}
.galeria {width: 24%; margin: 15px 0.4% 10px; background-color:#d3d3d3;}
.galeria_img {position: relative; top:0; left:0; width: 190px; height: 190px; margin: 0 auto;}
.galeria_titols {top: 0; left: 0; width: 98%; min-width: 185px; padding: 0 1%; background-color: rgba(0,0,0,0.25); border-radius: 4px;}
.galeria_titols h3 a , .galeria_titols h4, .galeria_text {color: white;}
.galeria_text a {color: #C4C4FF;}
.galeria_text {width: 98%; height:0; padding: 0 1%; background-color: rgba(0,0,0,0.25); border-radius: 4px; font-size:0.9em;}
.galeria_text p {margin-bottom: 3px; line-height: 1.3em;}
.galeria:hover .galeria_text {height: 70px;}
}		

@media only screen and (max-width: 900px) {
.news_img, .news_titol, .news_text {float:none; width: 100%;}
.news_img { margin-bottom: 15px;}
.news_img img {min-height:inherit; object-position: center center;}
.fil_ariadna {}
/* MENUS */
.thumb_activitat {width: 31%; height:200px; margin: 8px 1%;}
/*formulari*/
.formulari_esquerra, .formulari_dreta {float: none; width: 100%;}
/*seccions*/
.col_esquerra, .col_dreta {width: 48%;}
}

@media only screen and (max-width: 800px) {
.cap {background-image: url(../image/cap_resp1.jpg); height:250px;}
.titols {width:100%;height:100%;}
.social {left:2.5%;}
.logo {top: 0; right: calc(45px + 2.5%);}
.logo img {height:150px;}
.lema {width:100%; bottom: 0; margin:0;}
.lema h1 {display: inline-block; padding: 10px 65px 10px 2.5%; border-radius: 0;}
/* Definició del MENU que es mostrarà en RESPOSNSIVE*/
.barra_menu_fixe {box-shadow: none}
.menu_resp, .sub_menu_resp {display: block;}
.menu_resp_tanca {display: block;}
.menu > ul {width: 94%; max-width: 460px; position:fixed; top: 0; right:0; min-width:150px; height: auto;  padding: 45px 3% 30px; display:none; 
	background-color: rgba(0,0,0,0.65); z-index:8;}
.menu ul.sub {display:none;}  /*es mostra el menu complet*/
.menu > ul > li {display: list-item}
.menu ul > li:hover ul.sub {display: none;}
.menu > ul > li a {color: #e3e3e3;}
.submenu {display: none; position: fixed; top: 45px; right: 5px; width: 50%; min-width: 190px; 
	background-color: rgba(0,0,0,0.65); padding: 10px 45px 10px 10px;}
.submenu li {width: auto; font-size: 1em; background: transparent; color: #ededed; border: none; margin:0; font-size:1.2em}
.submenu li.select, .submenu li:hover {font-weight: bold; background: #4C80B6; color: #fff; border: 1px solid #4C80B6;}
/*altres*/
.fil_ariadna {margin-left: 0;}
.cos_pagina {width:100%;}
.documents_capsa {position: relative; width:96%; min-height: 75px; margin:auto;}
.documents_r {float: none; width:100%; margin:0;}
.documents_r .ico {position:absolute; left: 0; top: 0;}
.documents_r .descrip {width: auto; position:absolute; left: 55px; top: 0; font-size:1em;}
.cos_seccio .news_img {width: 220px;}
.cos_seccio .news_text {width: calc(96% - 220px);}
.cos_seccio .news_titol {width: calc(96% - 220px);}
/*seccions*/
.col_esquerra, .col_dreta {width: 100%;}

/*galeria*/
.galeria {width: 31%; margin: 15px 1% 10px;}
/*peu*/
.peu li {display:list-item; list-style:none; text-align:right; margin-bottom: 10px; padding: 4px 0}
.peu li a {padding: 4px 0;}
.peu li.separa {border-left: none;}
.copy {width: 58%; padding-left: 2%}
.enllassos {width: 38%; padding-right: 2%}
}
@media only screen and (max-width: 650px) {
.social {left: 0; top: 5px; width: 65px; heigth: 65px;}
.lema h1 {font-size: 2em; line-height:1em;}
.logo {position: relative; max-width: 170px; top: 10px; right: 0; margin:0 auto; text-align:center}
.logo img {height:130px;}
.cos_news, .extra, .documents_r {float: none; width: 100%; margin-bottom: 15px;}
.thumb_activitat {width: 48%; height:200px;}
.cos_seccio .news_text, .cos_seccio .news_titol {float:none; width: 100%; margin-bottom: 15px;}
.cos_seccio .news_img {float:none; width: 100%; margin: 15px 0; text-align:center;}
.documents_capsa, .documents_capsa p {line-height:normal;}

/*.cos_seccio .news_img {float:right; width: 250px; min-height:0px; margin: 0 0 5px 0; text-align:right;}
.cos_seccio .news_img img {max-height:320px; object-fit: contain; object-position: top;}
.cos_seccio .news_text {float:left; width: calc(96% - 250px); min-height:100px; margin-bottom: 5px;}
.cos_seccio .news_titol {float:left; width: calc(96% - 250px); margin-bottom: 5px;}
*/
.no_mobil {display:none;}
.si_mobil {display: inline-block;}
}

@media only screen and (max-width: 587px) {
.galeria {width: 48%; margin: 15px 1% 10px;}
}		

@media only screen and (max-width: 480px) {
.cap {background-image: url(../img/cap_resp_mini1.jpg);}
.cap, .titols {height: 300px;}
.logo img {height:170px;}
.lema h1 {width: 95%; text-align: center; font-size: 1.9em; padding: 10px 2.5% 10px;}
.cos_news .news_titol {position: relative; left: 0; top: 0; width: 100%;}
.cos_news .news_img {position: relative; width: 100%; max-width:300px; margin:auto; margin-bottom: 20px;}
.news_img img {object-fit: contain;}
}
@media only screen and (max-width: 430px) {
.thumb_activitat {float:none; width: 96%; height: 240px; max-width:280px; margin: 10px auto 20px; clear:both}
}

@media only screen and (max-width: 418px) {
.galeria {width: 96%; margin: 15px 1% 10px;}
}		

@media only screen and (max-width: 330px) {
.social {width: 32px; heigth: 130px;}
}