@charset "UTF-8";
/* CSS Document *//* INFORMACIÓ x SANTI ROMAN GUIMARAES utilitzo FLEXBOX */
* {
	margin: 0;
	padding: 0;
	/*El PADDING i BORDER d'un element DIV no incrementa el seu ample.
	Per treballar més cómode i no fer tants números:)*/
	box-sizing: border-box;
}
body {
	margin: 0 auto; /*Ajusta a 0 margen i relleno del body per aconseguir compatibilitat amb la configuració predeterminada dels diversos navegadors*/
	text-align: center; /*Centra contenedor en los navegadores IE5*. El texto se ajusta posteriormente con valor predeterminado de alineación del container*/
	background-color: #F2F2F2;
	color: #000000;
	font-family: 'Montserrat', sans-serif;
	font-size: 100%;
    }
/* Tipografies estils */
h1{
	font-size: 1.25em;
	font-weight: 300;
}
h2{
	font-size: 1em;
	font-weight: 400;
	color: #000;
}
h3 {
	font-size: 1em;
	font-weight: 500;
}
h4{
	font-size: 1.9em;
	font-weight: 400;
	color: #009ee0;
}
/*Treiem decoracions automàtiques dels ENLLAÇOS*/
a {
	text-decoration: none;
	list-style: none;
	border: none;
	color: #000;
	cursor: pointer;
}
/*------------------CONTINGUT GENERAL----------------*/
.container {
	width: 100%;
	margin: auto;
	font-size: 1em;
}
/*------------------CAPÇALERA HEADER----------------*/
header {
	background-color: #FFF;
	position: -webkit-sticky; /*Per fer que quedi enganxat i fix el HEADER  a la part superior*/
	position: sticky;
	top: 0px;
	z-index: 101;
}
header a {
	color: #009ee0;
}
.cabecera {
	max-width: 1280px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 30px;
	/* FLEXBOX */
	display: flex; /*Defineix contenidor flexible*/
	flex-direction: row; /*L'ORDRE dels elements, en horitzontal (MAIN-AXIS) d'esquerra a dreta*/
	flex-wrap: wrap; /*Si els elements no caben en una linia, afegeix una altre*/
	justify-content: space-between;
}
.logo {
	Width: 100%;
	max-width: 415px;
	font-weight: 400;
	font-size: 1.24em;
	text-align: center;
}
.logo a:hover, a:active, a:focus {
	background-color: #fff; /*Fem que el logo no canvi al clicar a sobre*/
	animation: aparecer 0s ease-out 0; /*Fem que el logo no tingui animació*/
}
.lema:hover, a:active, a:focus {
	background-color: #fff; /*Fem que el logo no canvi al clicar a sobre*/
	color: #009ee0; /*Fem que el lema no canvi al clicar a sobre*/
}
.contacte {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: 160px;
	font-weight: 600;
	font-size: 1.1em;
	color: #009ee0;
}
.contacte a:hover, a:active, a:focus {
	color: #00558E;
	animation: aparecer 0.25s ease-out 1; /*Definim nom per a l'animació “aparecer”*/
	background-color: #fff; /*Fem que el logo no canvi al clicar a sobre*/
}
.contacte .material-icons {
	font-size: 2.5em;
	color: #009ee0;
}
.contacte_mail {
	padding-top: 5px;
	font-weight: 500;
	font-size: 0.75em;
}
/*------------------MENÚ PRINCIPAL----------------*/
nav {
	height: 40px;
	background-color: #009ee0;
}
nav ul {
	max-width: 1280px;
	margin: auto;
	line-height: 40px; /* Per centrar verticalment el text del menú */
	display: flex;
	list-style: none;
	flex-direction: row;
	flex-wrap: nowrap; /*Si els elements no caben en una linia, NO afegeix una altre*/
	justify-content: space-between; /*Omple tot l'ample del contenidor*/

}
nav ul li {
	flex: 16.6%;
	font-size: 1em;
}
nav ul li:hover, a:active, a:focus {
	background-color: #007CBF;
	animation: aparecer 0.25s ease-out 1;
}
nav ul li a {
	display: block;
	color: white;
}
/*Perquè es quedi assenyalada la secció actual*/
.seleccionat {
	background-color: #007CBF;
}
/*------------------CONTINGUT PRINCIPAL----------------*/
.content {
	margin: auto;
	max-width:1280px; /* Així establim ample màxim (si volem) */
}
.content a {
	font-weight: 500;
	color: #009ee0;
}
/* contenidor per crear la mida de vídeo (amb el padding-top) */
.peli {
	height:0px;
	width:100%;
	padding-top:56.25%; /* Proporció 16/9 = 56.25% */
	position:relative;
}
/* Fem que el iframe s'adapti a la mida del contenidor .peli */
.peli iframe {
	position:absolute;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
}
/* Fem que el iframe s'adapti a la mida del contenidor .mapa */
.mapa {
	height:0px;
	width:100%;
	padding-top:31.25%; /* Proporció 16/9 = 56.25% */
	position:relative;
}
/* Fem que el iframe s'adapti a la mida del contenidor .mapa */
.mapa iframe {
	position:absolute;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
}
.contingut_principal {
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 75px;
	text-align: left;
}
.parrafada {
	flex: 65%;
	padding-right: 40px;
}
.parrafada a:hover, a:active, a:focus {
	color: #00558E;
	background-color: #F2F2F2; /*Fem que el logo no canvi al clicar a sobre*/
	animation: aparecer 0.3s ease-out 1;
}
.parrafada li {
	font-size: 1.2em;
	font-weight: 300;
	margin-left: 1em;
}
.ilustra_vitrubio {
	display: inline-block;
	flex: 35%;
	width: 100%;
	height: auto;
	text-align: right;
}
/*------ Per al contingut de les SECCIONS del site ------*/
.contingut_seccions {
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	padding-top: 50px;
	text-align: left;
	padding-bottom: 40px;
}
.contingut_seccions a {
	font-weight: 500;
	color: #009ee0;
}
.parraf_d {
	flex: 50%;
}
.parraf_d a:hover, a:active, a:focus {
	font-weight: 500;
	color: #009ee0;
	background-color: #FFF;
}
.parraf_e {
	flex: 60%;
}
.parraf_e a:hover, a:active, a:focus {
	font-weight: 500;
	color: #009ee0;
	background-color: #F2F2F2;
}
.parraf_e li {
	font-size: 1.2em;
	font-weight: 300;
}
.foto_d {
	display: inline-block;
	flex: 40%;
	width: 100%;
	height: auto;
	padding-left: 40px;
}
.foto_e {
	display: inline-block;
	flex: 50%;
	width: 100%;
	height: auto;
	padding-right: 40px;
}
.contingut_fotos {
	display: flex;
	padding-bottom: 75px;
}
.foto2 {
	display: inline-block;
	flex: 35%;
	width: 100%;
	height: auto;
	padding-right: 40px;
}
.foto3 {
	display: inline-block;
	flex:  64%;
	width: 100%;
	height: auto;
}
.contingut_secundari {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	margin: auto;
	max-width:1280px; 
	padding-top: 75px;
	padding-bottom: 75px;
	text-align: left;
}
.contingut_secundari a {
	font-weight: 500;
	color: #009ee0;
}
.parraf_e80 {
	flex: 80%;
}
.parraf_e80 li {
	margin-left: 1em;
	font-size: 1.2em;
	font-weight: 300;
}
.parraf_d li {
	font-size: 1.2em;
	font-weight: 300;
	margin-left: 1em;
}
.contingut_secundari_ico {
	display: inline-block;
	flex: 20%;
	width: 100%;
	height: auto;
}
/* ---------- 3 icones menú ----------- */
aside {
	background-color: #fff;
}
.bloc_iconos {
	margin: auto;
	max-width:1280px; 
	padding-top: 75px;
	padding-bottom: 75px;
}
.bloc_iconos ul {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.bloc_iconos ul li {
	max-width: 320px;
	max-width: 310px;
	background-color: #fff; /*Fem que el logo no canvi al clicar a sobre*/
}
.bloc_iconos ul li a:hover, a:active, a:focus {
	background-color: #FFF;
}
.bloc_iconos ul li h4:hover, a:active, a:focus {
	color: #00558E;
	background-color: #FFF;
	animation: aparecer 0.3s ease-out 1;
}
/* Slideshow de INSTAL·LACIONS */
.slider {
  position: relative;
	margin: auto;
	padding: 0;
	max-width:1280px;
}
.myslider {
	display: none; /* inicialment no es mostren totes les imatges */
}
/* ---------- Acordeon de PREGUNTES FREQÜENTS ----------- */
.preguntes {
	  margin-bottom: 10px;
}
.accordion {
  background-color: #ddd;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: 'Montserrat', sans-serif;
	font-size: 1.25em;
	font-weight: 500;
  transition: 0.4s;
}

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

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  width:  100%;
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  color: #888;
  font-family: 'Montserrat', sans-serif;
	font-size: 1.25em;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
/*------------------PEU----------------*/
footer {
	background-color: #009ee0;
	font-size: 0.9em;
}
.contingut_footer {
	margin: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 1280px;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: left;
	color: #000;
}
.loguito {
	max-width: 405px;
	min-width: 405px;
	flex: 40%;
	padding-right: 50px;
	font-size: 0.86em;
}
.loguito a {
	color: #fff;
}
.loguito a:hover, a:active, a:focus {
	background-color: #009ee0; /*Fem que el logo no canvi al clicar a sobre*/
	animation: aparecer 0s ease-out 0; /*Fem que el logo no tingui animació*/
}
.loguito p {
	font-size: 1.3em;
}
.menu_secundari ul {
	flex: 25%;
	margin-top: -10px;
	list-style: none;
	font-weight: 600;
	line-height: 2.6em;
}
.menu_secundari ul li a:hover, a:active, a:focus {
	color: #fff;
	background-color: #009ee0;
	animation: aparecer 0.2s ease-out 1;
}
.menu_xarxes {
	font-weight: 500;
}
.menu_xarxes ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	flex: 25%;
	list-style: none;
	text-align: left;
}
.menu_xarxes ul li {
	padding-right: 30px;
	font-weight: 600;
}
.menu_xarxes ul li a:hover, a:active, a:focus {
	color: #fff;
	background-color: #009ee0;
	animation: aparecer 0.2s ease-out 1;
}
.menu_xarxes i {
	font-size: 2.5em;
}
.menu_idiomes {
	font-weight: 500;
}
.menu_idiomes ul {
	list-style: none;
	line-height: 2.6em;
}
.menu_idiomes li {
	font-weight: 600;
}
.menu_idiomes ul li a:hover, a:active, a:focus {
	color: #fff;
	background-color: #009ee0;
	animation: aparecer 0.2s ease-out 1;
}
/*Botó WHATSAPP*/
.menu_whatsapp {
	position: fixed;
	right: 0px;
	bottom: 25px;
	z-index: 101;
}
.menu_whatsapp span a {
	color: #fff;
	text-align: center;
	font-size: 2.8em;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 20px;
	padding-left: 25px;
	background-color: rgba(0, 85, 142, 0.35);
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
}
.menu_whatsapp span a:hover, a:active, a:focus {
	background-color: rgba(0, 85, 142, 1);
	animation: aparecer 0.3s ease-out 1;
}
.signatura {
	margin: auto;
	justify-content: flex-end;
	font-size: 0.6em;
	font-weight: 400;
	text-align: center;
	color: #000000;
	max-width: 1280px;
	padding-top: 50px;
	padding-bottom: 15px;	
}
.signatura a:hover, a:active, a:focus {
	color: #fff;
	background-color: #009ee0;
	animation: aparecer 0.15s ease-out 1;
}
/* Per animació dels botons "animacion" */
@-o-keyframes aparecer {
from {opacity: 0;}
50% {opacity: 0.2;}
to {opacity: 1;}
}
@-moz-keyframes aparecer {
from {opacity: 0;}
50% {opacity: 0.2;}
to {opacity: 1;}
}
@-webkit-keyframes aparecer {
from {opacity: 0;}
50% {opacity: 0.2;}
to {opacity: 1;}
}
@-ms-keyframes aparecer {
from {opacity: 0;}
50% {opacity: 0.2;}
to {opacity: 1;}
}
/*---------MEDIA QUERIS per marcar breakpoints (RESPONSIVE)---------*/
@media screen and (max-width: 1380px) {
	.cabecera {
		padding-left: 50px;
		padding-right: 50px;
	}
	.contingut_principal {
		padding-left: 50px;
		padding-right: 50px;		
	}
	.bloc_iconos {
		padding-left: 50px;
		padding-right: 50px;
	}
	.contingut_seccions {
		padding-left: 50px;
		padding-right: 50px;
	}
	.contingut_fotos {
		padding-left: 50px;
		padding-right: 50px;
	}
	.contingut_secundari {
		padding-left: 50px;
		padding-right: 50px;
	}
	.loguito {
		padding-left: 50px;
	}
	.menu_idiomes {
		padding-right: 50px;
	}
}
@media screen and (max-width: 1100px) {
	.bloc_iconos ul li h2 {
		display: none;
	}
	.bloc_iconos ul li h4 {
		font-size: 1.6em;
	}
}
@media screen and (max-width: 945px) {
	.menu_secundari ul {
		display: none;
	}
	.contingut_seccions {
		flex-direction: column;
		padding-bottom: 0px;
	}
	.foto2 {
		padding-right: 5px;
	}
	.parraf_e {
		padding-bottom: 40px;
	}
	.foto_d {
		padding-left: 0px;
	}
	.parraf_d {
		padding-top: 40px;
	}
}
@media screen and (max-width: 910px) {
	header {
		height: 100%;
		position: static;
	}
	nav {
		height: 100%;
		position: static;
	}
	nav ul {
		flex-direction: column;
	}
	nav ul li .clar {
		background-color: #333;
	}
	.ilustra_vitrubio {
		display: none;
	}
	.contingut_secundari_ico {
		display: none;
	}
	.contingut_secundari {
		flex-direction: column;
	}
	.foto_e {
		padding-right: 0px;
	}
	.mapa {
	padding-top:56.25%; /* Proporció 16/9 = 56.25% */
	}
}
@media screen and (max-width: 880px) {
	.bloc_iconos ul li h4 {
		display: none;
	}
}
@media screen and (max-width: 760px) {
	.bloc_iconos ul {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
	}
	.bloc_iconos ul li {
		max-width: 560px;
		padding-bottom: 95px;
	}
	.bloc_iconos {
		padding-bottom: 0px;
	}
	.bloc_iconos ul li h2 {
		display: flex;
	}
	.bloc_iconos ul li h4 {
		display: block;
		font-size: 1.9em;
	}
}
@media screen and (max-width: 740px) {
	nav ul li a {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.mapa {
	padding-top:66.66%; /* Proporció 15/10 = 66.66% */
	}
	.contingut_footer {
		flex-direction: column;
		align-items: center;
		text-align: center;
		flex: 100%;
	}
	.menu_xarxes {
		order: 2;
		padding-top: 50px;
		min-width: 200px;
	}
	.menu_xarxes ul li {
		padding-right: 0px;
	}
	.menu_idiomes {
		order: 1;
		padding-top: 50px;
		padding-right: 0px;
	}
}
@media screen and (max-width: 725px) {
	.cabecera {
		justify-content: center;
	}
	.contingut_principal {
		padding-left: 25px;
		padding-right: 25px;
	}
	.contingut_seccions {
		padding-left: 0px;
		padding-right: 0px;
	}
	.parraf_e {
		padding-left: 25px;
		padding-right: 25px;
	}
	.parraf_d {
		padding-left: 25px;
		padding-right: 25px;
	}
	.contingut_secundari {
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.parraf_e80 {
		padding-top:  40px;
		padding-left: 25px;
		padding-right: 25px;		
	}
	.foto2 {
		padding-right: 0px;
	}
	.contacte {
		display: none;
	}
	.contingut_fotos {
		flex-direction: column;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
	}
}
@media screen and (max-width: 540px) {
	.logo {
		font-size: 3.6vw;
	}
	.peli {
		display: none;
	}
}
@media screen and (max-width: 440px) {
	.logo {
		font-size: 3.4vw;
	}
}
@media screen and (max-width: 400px) {
	.cabecera {
		padding-left: 25px;
		padding-right: 25px;
	}
	.logo {
		font-size: 3.85vw;
	}
}
@media screen and (max-width: 310px) {
	.cabecera {
		padding-left: 15px;
		padding-right: 15px;
	}
	.logo .lema{
		display: none;
	}
}