/* CSS Document        			*/
/* Blau #0073AA        			*/
/* Vert #408080        			*/
/* Vermell #C42F00     			*/
/* Vermell menu clar #FA9696;	*/
/* Vermell menu foc #FA6464;	*/
/* Gris fosc #23282D   			*/
/* Gris Clar #EEEEEE   			*/
/* Gris Línies #DDDDDD 			*/

* {margin:0; padding:0; border-collapse: collapse;}
body {background-color:#EEEEEE; font-family: 'Signika', tahoma, verdana, helvetica}

/* =========================  Estructura bàsica*/
.top {position:fixed; top:0; left:0; width:100%; height:33px; background-color:#23282D; color:white;  z-index:2;}
.barra {position:fixed; top:0; left:0; width:150px; height:100%; background-color:#23282D; color:white; z-index:1;}
.cos  {position: absolute; top:30px; left:151px; padding: 20px 0 20px 35px; min-width:80%; z-index:0;}
/* =========================  Estructura visible*/
.peu  {width:100%; margin-top: 15px; padding: 15px 0 0; clear:both;}
.menu {width: 150px; margin-top:45px;}
div.tauler, div.edicio, div.llista, div.edicio_gran, div.xml_carac {float:left; position: relative; margin: 10px 35px 20px 0; border: solid 1px #DDDDDD;
		overflow:hidden; background-color:white;}
div.tauler {width: 545px;}
div.edicio {width: 800px;}
div.edicio_gran {width:1000px;}
div.llista {width: 750px; max-height:650px; overflow:auto;}

.ok {border-left: solid 3px #408030 !important;}
.ko {border-left: solid 3px #C42F00 !important;}
.top .boto_menu_resp {float:left; width: 30px; height:30px; margin-left:5px; display:none;
			background-image:url('img/menu_resp.png'); background-repeat:no-repeat; background-position: center center; background-size:cover;}
.top .t_esquerra {float:left; width:48%; padding: 2px 4px;}
.top .t_dreta {float:right; width:48%; padding: 4px 6px; text-align:right; margin-right:10px;}

/* =========================  LOGIN */
.login {}
.logo_client {width: 200px; height: 150px; margin: 4% auto 0; text-align: center;}
.logo_client img {height: 100%;}
.cuadre {width:94%; max-width: 400px; padding: 2em 2%; margin: 25px auto 0; background:white; border: solid 1px #DDDDDD;}
.casella {width:96%; padding: 5px 1%; margin: 8px 1%; font-size:1em;}
.error {width:94%; max-width: 400px; padding: 10px 2% 0; margin: 40px auto 0; background:white; border: solid 1px #DDDDDD; border-left: solid 3px #C42F00;}
.error p {margin-bottom:10px;}
.avis { text-align: right; padding: 20px 5px 5px;}

/* =========================  MENU */
.connectat {padding-left:10px; vertical-align:middle;}
.top  li {display:inline-block; background-color:#23282D;}
.top .veure {display:none; padding-left:25px;}
.top .veure li a {display:block; color:white; padding: 10px 10px; border: solid 1px #363636; border-top: none;}
.connectat > li:hover {cursor:pointer;}
.connectat > li:hover ul.veure {display:block; position:absolute;}
.menu a {display: block; padding: 10px; color:#DDDDDD;}
.menu > ul > li {border: solid 1px #363636; border-top: none;}
.menu > ul > li.selec > a {color:white; background-color:#408080;}
.menu > ul > li.selec > ul > li {display:list-item;}
.menu > ul > li:hover > ul > li.sub_opcio {display:block;}
.sub_opcio {display:none;}
.sub_opcio a {padding-left: 25px; padding-top: 5px; color:#A0A0A0; }
.sub_opcio a.selec {color:white; background-color:transparent;}
.menu li.admin a {color: #408080;}
.menu li.admin a.selec {color: #96DEDC;}
p.sector {text-align:center; padding: 8px 0; margin-top: 12px; background-color:rgba(255,255,255, 0.1); color:white;}

/* =========================  TEXT */
h2 {width:100%; clear:both;}
h3 {padding: 10px 2%;}
h4 {margin: 15px 0 10px;}
.titol {border-bottom: solid 1px #DDDDDD;}
.edicio td {vertical-align:top;}
.funcions {color: #DDDDDD;}
.edicio p, .llista p, .galeria p, .tauler p, .edicio_gran p, div.xml_carac p {padding: 6px 2%;}
.galeria table {margin: 10px 0; border-collapse:collapse;}
#mostra_imatge {width:300px; height:300px; border: solid 1px #DDDDDD;
			background-position:center center; background-size:contain; background-repeat:no-repeat;}

/* =========================  LLISTES */
.taula_llista {clear: both; border-top: solid 1px #AAAAAA; max-height:500px; overflow:scroll; /*overflow-x: hidden;*/}
.llista table, .edicio table, .tauler table {width: 100%; border-collapse:collapse; border:none; clear:both;}
.llista th {padding: 10px 7px; text-align:left; border-bottom: solid 1px #DDDDDD;}
.llista td, .edicio td, .galeria td, .tauler td {padding: 6px 4px;}
.llista h3 {position:absolute; top: 0px; left: 0px;}
.boto_nou, .botons {position:absolute; top: 8px; right: 10px; max-width:300px;}
.llista table {width:100%; margin: 45px 0 0; clear:both;}
.llista table.taula_immo {margin:0;}
textarea.td_html {height: 23px; background-color: transparent; resize: none;}
.filtres {width: 94%; margin: 45px auto 5px; padding: 10px 1%; border: solid 1px #d3d3d3; position: relative; overflow:hidden;}
.filtre_esquerra {float:left; margin-right:10px;}
.filtre_centre {float:left; padding-top: 5px;}
.filtre_centre input {margin: 0 10px;}
.filtre_dreta {float:right;}

#iframe_llista {width: 100%; margin:0; padding:0; height: 490px; border: none;}
/* =========================  FORMULARIS */
table.edicio {width: 94%; margin: 5px 2%;}
input, select {padding: 3px 5px; font-size:1em; border-radius:4px;}
select {margin-bottom: 6px;}
textarea {width:100%; height:300px;}
.boto, .boto_elimina, .boto_desactivat, .boto_trans, .boto_trans_esquerra {display: inline-block; margin-bottom: 6px; padding: 5px 10px;
			color:white; background-color:#408080; border: solid 1px #DDDDDD; border-radius:4px; font-size:1em; font-weight:normal;}
.boto_gris {display: inline-block; padding: 5px 10px; border: solid 1px #DDDDDD; border-radius:4px; font-size:1em; font-weight:normal;}
.boto_elimina {background-color: #FA6464;}
.boto_descativat {background-color: #C3C3C3;}
.fosc .boto {border: solid 1px #888888;}
.boto:hover, .boto_elimina {cursor:pointer;}
.imatge_preview, .img_baner, .logo_preview, .foto_preview {width:99%; height:250px; margin: 10px auto; vertical-align: bottom; border: solid 1px #ededed; position: relative; 
			background-position:center center; background-repeat:no-repeat; background-size:cover;}
.logo_preview {height:200px; background-color: #eee; background-size:contain;}
.foto_preview {float: right; max-width:200px; height:200px; margin: 0 0 4px;}
.img_baner {height:300px;}
.src {width:100%; color:white; background-color: rgba(64,64,64,0.5); padding: 5px 1%; border:none; border-radius: 0;}
.boto_trans, .boto_trans_esquerra {color:white; background-color:rgba(64,64,64,0.5); border: solid 1px rgba(164,164,164,0.5); margin: 5px 7px;
			position: absolute; bottom: 0; right: 0;}
.boto_trans_esquerra {left: 0; right: auto;}
.mostra_cap {width:100%; height: 150px; position: relative; border: solid 1px #d3d3d3;
			background-position: center center; background-size:contain; background-repeat:no-repeat;}
.mostra_logo {width:125; height: 125px; background-position: center center; background-size:cover; background-repeat:no-repeat;}
.tauler td {vertical-align:middle;}
#img_preview {float:right; position:relative; width: 200px; height: 133px; margin-right: 8px; border: solid 1px #ededed;
			background-position:center center;  background-repeat:no-repeat; background-size:cover;}
.form_esquerra {float:left; width:62%; margin-left:1%; overflow:hidden;}
.form_dreta {float:right; width:34%;  margin-right:1%; overflow:hidden;}
.form_centre {width: 98%; margin: 0 0 10px 1%; clear:both; position: relative;}
.form_esquerra input.llarg, .form_dreta input.llarg {width:99%; max-width:370px;}
.form_botons {padding: 15px 0 10px;}
.curt {width:150px;}
.llarg {width:370px;}
.mini {text-align:center; background-color: #ededed;}
.mini input {width:27px; padding: 3px 0; text-align:right;}
textarea.gran {height:400px;}
textarea.codi_font {height: 150px;}
textarea.text_mini {font-family: 'Montserrat', Helvetica, Arial; color: #655A52; font-size: 1em; height: 80px;}
textarea.text_mini::placeholder {font-family: Helvetica, Arial; color: gray; font-size: 0.9em; font-style:italic;}
.cuadrat {border: solid 1px #C0C0C0; margin-bottom:10px;}
.separa {widtg:100%; clear:both;}
.opcio_0 { font-style:italic; color:gray;}
textarea.codi_font {height:100px;}
textarea.whatsapp {width: 98%; height: 250px; margin: 0 1% 10px;}
/* SEO als formularis*/
#head_seccio {display:none; border: solid 1px #408080; margin-top: 10px; background-color: #40808021;}
#cos_seccio {}
.taula_seccio {margin-top:50px;}
/* =========================  Pestanyes idiomes */
.contenidor_idiomes {position:relative; width: 100%;}
.opcions_idioma {background-color: white; border:solid 1px #C0C0C0; border-bottom:none;}
.text_idioma {width: 100%; background-color:white; border:solid 1px #C0C0C0; clear:both;  padding-top: 8px}
.pestanyes_idioma {padding-top: 20px; z-index:1;}
.pestanyes_idioma li {display:inline-block; min-height:27px;}
.pestanyes_idioma li a {padding:8px 12px; border:solid 1px #C0C0C0; border-bottom:none;
	border-top-left-radius: 4px; border-top-right-radius: 4px; background-color:#F0F0F0;}
#pestanya_ca {background-color:white; border-bottom-color:white;} 
.catala {z-index:0;}
.castella {position: absolute; top:0; left:0; z-index:-1; background-color: #F0F0F0;}
/* =========================  GALERIA */
.galeria {position: relative; width:100%; border: solid 1px #DDDDDD; padding: 4px 0 10px; background-color: white; overflow: hidden;}
.galeria h3 {padding: 0 4px; margin-bottom: 25px;}
.img_gal {float:left; position:relative; width: 13.35%; height: 175px; margin: 5px 0.45% 5px; overflow:hidden;
	background-color: #DDDDDD; background-position:center center; background-repeat:no-repeat; background-size:contain;}
.eines_gal {position:absolute; bottom: 0; right:0; width:100%; height: 35px; background-color: rgba(64,64,64,0.5);}
.eines_gal img {position: absolute; right:2px; bottom: 2px;}
.eines_gal .nom_fitxer {position: absolute; top:0; left:2px; font-size: 0.85em; color:white; height: 18px; overflow:hidden;}
.eines_gal .mides_fitxer {position: absolute; bottom:2px; left:2px; font-size: 0.85em; color:white;}
.thumb_puja {background-image:url(img/creu_trans.png); background-size:50%;}
.boto_sel {position:absolute; top: 15px; right: 35px;}
.download {position:absolute; top: 0; right: 0; padding: 5px; background-color: rgba(64,64,64,0.5);}
/* =========================  CASELLA D'ESPERA */
.espera {width:30px; height:30px; display:none;}
.espera img {width:100%;}
/* =========================  CASELLA DE GUARDAR TEMPORAL */
.casella_grava {position:absolute; top: 15px; right: 25px;/*border: solid 1px pink;*/}
#iframe_guarda {width: 96%; height:35px; border: none; background: transparent;}
/* =========================  TAULES en General */
.dreta {text-align:right !important;}
.centre {text-align:center !important;}
.dalt {vertical-align:top;}
.baix {vertical-align:bottom;}
.vertical {display:inline-block;margin:0; padding:0;transform: rotate(270deg); /*transform-origin: left bottom 0;*/}
.fosc {background-color: rgba(10,10,10,0.3); color: white;}
.gris {background-color: #ededed;}
.vert {background-color: #DCFFDC; text-align:center;}
.vermell {background-color: #FFDCDC; text-align:center;}
.red {color: #C42F00;}
.green {color: #00B500;}
.inactiu {color: gray; font-style:italic;}
.linia {width:100%; height: 5px; border-top: dashed 1px #d3d3d3; margin-top: 5px;}
/* =========================  ENLLAÇOS */
a {text-decoration:none; color: #408080;} /* General */
a.esborra {color: #C42F00;}
.m_src:hover, a.esborra:hover, .tanca:hover, .llista_fitxers a, a:hover, .eines_gal img:hover, .suma:hover, .thumb_puja:hover {cursor:pointer;}
a .movil img {display: inline-block;}
/* javascript*/
.fons_negre {position: fixed; width: 100%; height:100%; top: 0; left:0; background: rgba(10,10,10,0.4); z-index:65537;}
.mostra_src, .mostra_espera {position: relative; width: 90%; max-width: 500px; height: 275px; margin: 200px auto; padding: 15px; border: solid 1px black;
	background: white;}
.mostra_espera {width: 80%; max-width: 300px; height: 150px; margin: 100px auto; padding: 5px;}
.mostra_src p, .mostra_espera p {margin: 6px 0px 12px;}
.galeria_selec {width: 80%; height: 80%; min-width:700px; min-height: 650px; margin: 5% auto; background: white; border: solid 1px black;}
.mostra_galeria {position: relative; width: 90%; height: 90%; margin: 3% auto; padding: 1%; background: white; border: solid 1px black;}
.mostra_galeria h3 {padding: 0;}
.galaria_ext {margin-top: 10px; width: 100%; height:94%; border: solid 1px #DDDDDD;}
.tanca {position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
	background-image: url('img/tanca_vert.png'); background-size: contain;}
#proces {width:95%; border: solid 1px #DDDDDD; margin: 10px 2%;}
#llista_fitxers {width:96%; height: 400px; margin: 5px 2%; border: solid 1px #d3d3d3; background-color: white;}
table.llista_fitxers {border-collapse: collapse; margin: 2px;}
.llista_fitxers td, .llista_fitxers th {border-bottom: solid 1px #d3d3d3; text-align:left; padding: 2px;}
#arxiu_traspas {font-size: 0.8em;}

/* ========================================================================================= Tauler 2.1 Responsive */
.movil {display: none;}
@media only screen and (max-width: 1500px) {
.img_gal {width: 13.35%;height: 160px;}
}
@media only screen and (max-width: 1500px) {
.img_gal {width: 15.75%;}
}
@media only screen and (max-width: 1250px) {
.cos  {padding: 20px 0 20px 15px;}
/* =========================  Estructura visible*/
h2 {margin: 10px 0 0;}
div.tauler, div.edicio, div.llista, div.galeria, div.edicio_gran, div.xml_carac {margin: 10px 20px 20px 0;}
 {margin: 10px 0 20px; padding: 10px 5px;}

.top {}
.barra {display:none;}
.cos  {width:96%; top:34px; left:0; padding: 10px 2%;}

/* =========================  Estructura visible*/
.top .boto_menu_resp {display:block;}
.top .t_esquerra {width:auto;}
.top .t_dreta {width:auto;}

/* =========================  MENU */
.menu a {padding: 8px 4px;}
.sub_opcio a {padding-left: 15px; padding-top: 4px;}
p.sector {padding: 4px 0; margin-top: 6px;}
.img_gal {width: 19.1%;}
}
@media only screen and (max-width: 1035px) {
.img_gal {height: 180px;}
}

@media only screen and (max-width: 800px) {
/* =========================  Estructura bàsica*/
div.llista, div.edicio, div.tauler, div.edicio_gran {float:none;  width: 100%; margin: 15px auto;}
.peu  {margin-top: 5px; padding: 5px 0 0;}
/* =========================  Estructura visible*/
.llista th {padding: 6px 3px;}
.llista td, .edicio td, .galeria td, .tauler td {padding: 4px;}
/* llistes */
.filtre_dreta {padding-top: 5px;}
/* Formularis */
.form_esquerra input.llarg, .form_dreta input.llarg {max-width:99%}
.peu  {}
.menu {}
/*Altres*/
.img_gal {width: 24.1%;}
}

@media only screen and (max-width: 640px) {
/* =========================  Estructura bàsica*/
.cos {width: 98%; padding: 8px 1%;}
div.llista, div.edicio, div.tauler {float:none; width: 100%; margin: 5px auto;}
/*div.llista {max-height: 90%;}*/
.llista th {font-size:0.9em;}
.llista h3 {max-width:60%;}
p.sector, .no_movil {display: none;}
td.movil, th.movil  {display: table-cell;}
p.movil, div.movil {display: block;}
span.movil, a.movil {display: inline-block;}
/* Formularis */
.form_esquerra, .form_dreta {float: none; width:98%; margin: 15px auto; padding:0 1%; clear:both;}
#img_preview {float: none; width: 300px; height: 200px; margin: 0 auto;}
.foto_preview {float: none; max-width:200px; height:200px; margin: 0 auto 10px;}
.form_botons {max-width:98%;}
/*Inscripcions*/
#inscrit .inscripcio {float:none; width: 100%; margin: 0 auto 10px;}
/*Altres*/
.img_gal {width: 32.1%;}
}

@media only screen and (max-width: 480px) {
/* =========================  Estructura bàsica*/
.top {height: 63px;}
.cos {top: 64px;}
.top .boto_menu_resp {float:none; position:absolute; top: 0; left:0; }
.top .t_esquerra {float:none; position:absolute; top: 34px; right:0; width:auto;}
.top .t_dreta {float:none; position:absolute; top: 0; right:0; width:80%}
.barra {}
.menu {margin-top: 65px;}
/* formularis */
.edicio table {width:99%;}
table.edicio {margin: 5px auto;}
.curt {width:80%;}
.llarg, .form_esquerra input.llarg {width:98%;}
.activitats_llista, .activitats_sel {float:none; width: 96%; margin: 5px auto;}
/*Altres*/
.img_gal {width: 48%; margin: 5px 1%;}
}

@media only screen and (max-width: 380px) {
.llista h3, .edicio h3 {display: none;}
.filtre {margin-top: 5px;}
}

@media only screen and (max-height: 420px) {
.barra {overflow:scroll; overflow-x:hidden;}
}