/* General */

body {
    font-family: sans-serif;
    background-color: white;
}

h2, h3, h4, h5, h6 {  font-weight: normal;  margin-bottom: 0;  }


.capcalera {
    display: flex;
    width: 100%;
    align-items: flex-start; /* alinea els elements a la part superior */
		margin-bottom: 10px;
		/*border:1px solid black;*/
}

.logo {
    display: block;
    height: 180px;
 		padding: 0 5% 30px 5%;
		/*border:1px solid black;*/
}

.logo img {
    display: block;
    height: 100%;
}

.resta {
		display: flex;
		flex-direction: column;
		flex-grow: 1;           /* Ocupa tota l'amplada restant */
		/*border:1px solid black;*/
}


/* Menú superior*/

.barramenu {
    display: flex;
}

.opciomenu {
    display: flex;
    color: white;
    text-decoration: none;
		justify-content: center;
		text-align: center;   /* Aliniat horitzontal del text */
    align-items: center;   /* Aliniat vertical del text */
    font-size: 18px;
    font-weight: bold;
    /*position: relative;*/
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 20px;
}

.opciomenu:hover {
    background-color: #7995B9;   /* rgba(255, 255, 255, 0.3) */
}


/* Text que apareix i desapareix */
.flash-text {
		display: flex;
		flex-grow: 1;   /* Ocupa tot l'espai restant a la dreta */
		width: 100%;
		margin: 30px 0 15px 0;
		color: #555577;
		font-size: 18px;
		justify-content: center;
		text-align: center;
		opacity: 1;
		transition-duration: 2s;
}


/* Títol de la secció (manteniment, aplicacions, etc.) */
.titol-seccio {
		display: flex;
		flex-grow: 1;   /* Ocupa tot l'espai restant a la dreta */
		width: 100%;
		justify-content: center;
		text-align: center;
		font-size: 32px; 
}


/* Blocs de text */

.contenidor-blocs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.bloc1 {
    display: flex;
    float: left;
		height: 100px;
		border: 2px solid #496589;
		border-radius: 15px;
		padding: 20px;
		margin: 0 20px 20px 20px;
    text-align: center;
    justify-content: center;
    align-items: center;   /* Aliniat vertical del text */
		font-size: 24px;
		color: black;
		text-shadow: 0px 0px 9px blue;
		background-color: rgba(255,255,255,0.8);
		background-blend-mode: lighten;
		background-size: 90%;
		background-position: center;
		background-repeat: no-repeat;
		transition-duration: 0.5s;
}
.bloc1:hover {
		color: white;
		background-size: 60%;
  }


.bloc2 {
    padding: 10px 20px 10px 20px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
		font-size: 16px;
		max-width: 555px;
}

.bloc2::after {
    content: "";
    position: absolute;
    left: 12.5%;
    height: 1px;
    width: 75%;
    background-color: #ccc;
    display: none;
}


/* Pantalles estretes */
@media (max-width: 700px) {
		body {  margin: 10px 20px 10px 0;  }
		.capcalera {
			flex-direction: column;
			align-items: center;
			padding: 0 5% 0 5%;
		}
		.flash-text {  margin-top: 10px;  }
		.barramenu {
			justify-content: space-evenly;   /* Repartiment horitzontal de les opcions de menú */
			flex-wrap: wrap;
		}
		.opciomenu {
			height: 45px;
			background-color: #597599;
		}
		.titol-seccio {  font-size: 28px;  }
		.bloc1 {  max-width: 430px;  }
    .bloc2 {  width: 98%;  margin-bottom: 40px;  }
    .bloc2:not(:last-child)::after {  display: block;  bottom: -20px;  }
}


/* Pantalles amples */
@media (min-width: 700px) {
		body {  margin: 15px;  }
		.capcalera {  padding-left: 10px;  }
		/* Menú junt i amb la cantonada esquerra arrodonida (meitat de l'alçada per fer semicercle)*/
		.barramenu {
				flex-grow: 1;   /* Ocupa tot l'espai restant a la dreta */
				background-color: #597599;
				height: 50px;
				border-top-left-radius: 25px;
				border-bottom-left-radius: 25px;
				overflow: hidden;  /* Perquè el fons de les opcions no surti de la corba */
		}
		.opciomenu {  height: 50px;  flex: 1;  }
		/* I amb Línia vertical blanca de separació entre les opcions */
		.opciomenu:not(:last-child)::after {
				content: "";
				position: absolute;
				right: 0;
				height: 60%; /* La línia no ocupa tota l'alçada per estètica */
				border-right: 1px solid white;
		}

		.bloc1 {  width: 430px;  }
    .bloc2 {  width: 48%;  margin: 0 1% 20px 1%;  }
    .bloc2::after {  display: block;  bottom: -20px;  }
    .bloc2:nth-last-child(-n+2)::after {  display: none;  }
}