/* ==== Estils  Fotografia
   ==== per a mBeramendi.cat*/

/* varis:
       box-shadow: 5px 5px 5px rgba(68,68,68,0.6); height:125px;
       border: solid 1px #BBBBBB; 
*/
* {border-collapse:collapse; margin: 0; padding: 0; /*border: solid 1px pink;*/}
body {font-family: 'Roboto', arial, tahoma, verdana;}
.cap {width: 100%; background: #FFFFFF; margin-bottom: 30px; height: 130px; z-index:1;}
.cos {width: 100%; background: #FFFFFF; min-height: 350px; padding-bottom: 35px; z-index:0;}
.peu {width: 100%; background: #FFFFFF; min-height: 100px; padding-bottom:20px;}
.subcap {width:96%; max-width: 1366px; margin: 0 auto; padding: 8px 2%; position:relative; height: 100%;}
.subcos {width:96%; max-width: 1366px; margin: 0 auto; padding: 2px 2%;} 
.subpeu {width:96%; max-width: 1366px; margin: 0 auto; padding: 24px 0 12px; border-top: solid 1px #AAAAAA;}

h1 {font-size:2em;  margin: 0 0 10px;}
h2 {font-size:1.7em; margin: 8px 0px;}
h3 {font-size:1.3em; margin: 4px 0px; padding: 12px 0 4px; clear:left}
h4 {font-size:1.1em; margin: 4px 0px;}
p {margin-bottom: 12px;}
.caixa_cap {width:100%; height:100%; position: relative;}
.titol_logo {position: absolute; top: 5px; left:0; width:130px; height: 120px; display:block;}
.titol_logo img {height: 100%;}
.titol_text {position: absolute; top: 0; left:130px; font-size:2.8em; font-weight:bold; text-shadow: 2px 2px 2px rgba(64,64,64,0.5);}
.tanca_resp {display:none;}
.submenu {}
/* ======================= estils MENUS */
.menu {position: absolute; bottom: 5px; left:130px;}
.menu li {display: inline-block; list-style: none;}
.menu li a {padding: 10px 20px; border-bottom: solid 2px #FFFFFF; font-size:1.1em;}
.menu li a.actiu {color: #888888;}
.menu li a:hover {border-bottom: solid 2px #888888;}
.menu_resp {position: absolute; top: 25px; right:0; width: 35px; height: 35px; display: none; 
	background-image: url('imatges/menu_resp.png'); background-position: center center; background-repeat:no-repeat;}
 
/* ======================= estils PEUS DE FOTO*/
.peu_foto {position: relative; color: #666666; padding: 4px 0; width: 100%; height: 20px;}
.peu_foto img {box-shadow: none; width: 20px; none; max-width: none;}
.peu_foto .caixa_cercles {position:absolute; left:0;}
.peu_foto .cercle, .peu_foto .cercle_actiu  {display: inline-block; background: #AAAAAA; width: 20px; height: 20px; border-radius: 50%;}
.peu_foto .cercle:hover {background: #DDA0A0;}
.peu_foto .cercle_actiu {background: #DDDDDD;}
.peu_foto .cercle_actiu:hover {background: #DDA0A0;}
.peu_foto p {display: block; position:absolute; right:0; text-align:right; width:auto;}

/* ======================= estils Home*/
.text {float:right; width:34%; height: auto; /*background: #EEEEEE;*/}
.imatge {float:left; width: 60%; height:auto; margin: 0 0 35px;
	background-repeat: no-repeat; background-position: center;}
.text p  {text-align: justify; margin-bottom: 12px; margin-top: 6px;}
.text .cita {text-align: justify; font-size: 20px; font-style: italic; margin: 12px 4px 6px;}
.text .autor {text-align: right; margin: 6px 4px 48px;}
.imatge img {width:100%; }
.subpeu td  {line-height: 1.4em;}
.llei {font-size:9px;}

/* ======================= estils ACTIVITATS*/
.activitat {float:left; width: 30%; margin: 0 3.3% 15px 0; height: 640px;}
.activitat .text {width:100%;}
.activitat .imatge {width: 100%; margin-bottom: 25px;}
/* ======================= estils FORMULARI */
.contacte {float:left; width:34%; height: auto;}
.formulari {padding-bottom: 10px; margin-bottom: 10px;}
.llei {font-size: 0.9em;}
.etiqueta, .camp, .camp_consulta {display: block; width: 98%;}
.etiqueta {margin: 5px 0;}
.camp, .camp_consulta {margin: 5px 15% 5px 0;}
.camp_consulta {width: 78%; margin: 5px 0 5px 0;}
.caixa_boto {width: 120px;}
input {font-family: 'Signika', Verdana, Arial; padding: 3px 2px; font-size:1.1em;}
.llarg {width: 100%;}
textarea {width: 100%; height: 170px; font-family: 'Signika', Verdana, Arial; font-size:1.1em;}
.boto {display: inline-block; margin-bottom: 6px; padding: 5px 10px; border: solid 1px #888888; border-radius:4px; font-size:1em;
	 background-color: white;}
	 
/* ======================= estils GALERIES D'IMATGES */
.caixa_albums {width:100%; position:relative; overflow:hidden;}
.caixa_albums h2 {clear: both; margin: 1.5em 0 0;}
.album {float: left; width: 18%; margin: 10px 1%;}
.album h3 {font-size: 1.15em; margin: 0 0 5px; display: block; height: 22px; overflow:hidden;}
.album img {width:100%; height: 245px; object-fit: cover; border-radius: 10px;}
.album p {margin-bottom:5px;}


.separa {width:100%; clear:both; height:auto;}
a {color: black; text-decoration:none;}
a:hover {color: #666666; cursor: pointer;}
.text a {color: #666666; text-decoration:none;}
.text a:hover {color: black;}
.subpeu a {color: #666666; text-decoration:none;}
.subpeu a:hover {color: #666666; text-decoration:underline;}
.subpeu table {width:100%;}
.subpeu td {line-height: 1.8em;}
.cercle:hover, .menu_resp:hover, .tanca_resp:hover {cursor:pointer;}

@media only screen and (max-width: 1100px) {
	.cos {min-height: 200px; padding-bottom: 15px;}
	.text, .contacte {width:44%;}
	.imatge {width: 52%;}
	.activitat {float:left; width: 47.5%; margin: 0 2.5% 15px 0;}
	.album {width: 23%;}
	.album h2 {font-size: 1.05em;}
	.album img {height: 240px;}
}
@media only screen and (max-width: 801px) {
	.cos {min-height: 0px; padding-bottom: 25px;}
	.imatge {float:none; width:100%;}
	.text, .contacte {float:none; width:80%; margin: auto;}
	.activitat {height: 620px;}
	.album {width: 31%;}
	.album img {height: 230px;}
}
@media only screen and (max-width: 750px) {
	.cap {position: fixed; height: 71px; background-color: white;} 
	.cos {padding-top: 85px;}
	.subcap {padding: 0 2%;}
	.caixa_cap {position:relative}
	.titol_logo {width:50px; height: 55px;}
	.titol_text {top: auto; bottom: 5px; left:60px; font-size:1.5em; font-weight:bold; text-shadow: 2px 2px 2px rgba(64,64,64,0.5);}
	.menu_resp, .tanca_menu  {display:block;}
	.menu_resp {}
	.tanca_resp {position: absolute; top: 10px; right: 2%; width: 40px; color: white; font-weight:bolder; display:block; padding: 20px 0; text-align:center;}
	.menu {position: relative; top: auto; left: auto; width:auto; height:auto;}
	.submenu {position: fixed; top: 0; right: 0; width: 96%; max-width: 350px; padding: 70px 2% 25px; display: none; 
		background-color: rgba(64,64,64,0.9);}
	.menu li {display: block; width:100%}
	.menu li a {display: block; width:90%; height: auto; padding: 8px 5%; border-bottom: none; color: white;}
	.menu li a.actiu {background-color: white;}
	.menu li a:hover {border-bottom: none;}
	.album img {height: 210px;}
}
@media only screen and (max-width: 641px) {
	h1 {font-size:1.6em;}
	.text, .contacte {width:100%;}
	.activitat {float:none; width: 85%; margin: 0 auto 15px; height: auto;}
	.album {width: 47%; margin: 15px 1.5%;}
	.album img {height: 250px;}
}
@media only screen and (max-width: 512px) {
	.activitat {width: 100%;}
	.album {float_none; width: 96%; margin: 5px 2%;}
	.album img {height: 250px;}
}

@media only screen and (max-width: 420px) {
	.no_movil {display:none;}
}