/*  */

.navbar-links li a[href="/espais"] {
	text-decoration-color: white;
}

header.outter {
	width: 100%;
}

main {
	margin-bottom: 10em;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
}

main * {
	font-family: Arial, Helvetica, sans-serif;
}

.tile {
	background-size: cover;
	height: 23rem;
	flex-grow: 1;
	flex-basis: 33%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1em;
	cursor: pointer;
}

.tile * {
	color: white;
}

.tile h3 {
	font-weight: 400;
}

.white {
	background-color: white;
	font-size: min(1.5em + 2vw, 3em);
	align-items: center;
}

.white * {
	color: var(--black);
}

.white h2 {
	font-family: 'novecento-sans-wide', sans-serif;
	line-height: .9;
	max-width: 6em;
}

.white:not(.help):hover {
	cursor: auto;
}


.tile:not(.white) {
	font-size: min(1em + 2vw, 1.8em);
	text-align: center;
	box-shadow: inset 0px -30em 22em #0000004d;
}

.tile:not(.white):hover {
	box-shadow: inset 0px -30em 22em #0000004d;
}

.help {
	font-size: min(1.4em + 2vw, 2.5em);
}

.help:hover {
	box-shadow: inset 0em 0em 1em #4b2804a3;
}

.help h4,
span {
	font-family: 'novecento-sans-wide', sans-serif;
	font-weight: 400;
	text-transform: lowercase;
}

.help .focus {
	font-weight: 900;
	font-family: 'novecento-sans-wide', sans-serif;
	text-transform: lowercase;
}

.help:hover .focus {
	text-decoration: underline;
}

.line {
	height: 3px;
	background-color: white;
	min-width: 10em;
}

main header {
	width: fit-content;
	line-height: 2;
}

header.outter {
	display: flex;
	height: fit-content;
	flex-wrap: wrap;
}

header.outter>* {
	display: flex;
	flex-direction: column;
}

header.outter .content {
	color: var(--black);
	flex-grow: 1;
	flex-basis: 20%;
	padding: 1.6em 1.5em;
}

@media screen and (min-width:500px) {
	header.outter .content {
		min-width: 31em;
	}
}

header.outter .content * {
	color: var(--black);
}

header.outter .content h1 {
	font-size: min(1.6em + 2vw, 3em);
	margin-bottom: 1em;
}

header.outter .content p {
	font-size: min(0.8em + 1vw, 1.2rem);
	margin-bottom: 1em;
	line-height: 1.3;
	text-align: justify;
}

header.outter .embeded {
	flex-grow: 1;
	flex-basis: 53.4%;
	min-height: calc(15em + 28vw);
}

@media screen and (min-width:852px) {
	header.outter .embeded {
		min-height: 45em;
	}
}

/* tiles backgrounds */

.tile:not(.white):nth-of-type(1) {
	background-image: url("/static/img/espais/1-gran-auditori.webp");
}

.tile:not(.white):nth-of-type(2) {
	background-image: url("/static/img/espais/2-sala-polivalent.webp");
}

.tile:not(.white):nth-of-type(3) {
	background-image: url("/static/img/espais/3-auditori-torre.webp");
}

.tile:not(.white):nth-of-type(4) {
	background-image: url("/static/img/espais/4-aules-polivalents.webp");
}

.tile:not(.white):nth-of-type(5) {
	background-image: url("/static/img/espais/6-conferencies.webp");
}

.tile:not(.white):nth-of-type(6) {
	background-image: url("/static/img/espais/5-amfiteatre.webp");
}

.tile:not(.white):nth-of-type(7) {
	background-image: url("/static/img/espais/7-jardinets.webp");
}

.tile:not(.white):nth-of-type(8) {
	background-image: url("/static/img/espais/9-masia.webp");
}

.tile:not(.white):nth-of-type(9) {
	background-image: url("/static/img/espais/8-exterior-masia.webp");
}

.tile:not(.white):nth-of-type(10) {
	background-image: url("/static/img/espais/10-ermita.webp");
}

.tile:not(.white):nth-of-type(11) {
	background-image: url("/static/img/espais/11-bosc.webp");
}

.tile:not(.white):nth-of-type(12) {
	background-image: url("/static/img/espais/12-salo-modernista.webp");
}

.tile:not(.white):nth-of-type(13) {
	background-image: url("/static/img/espais/13-pati-turull.webp");
}

nav {
	position: sticky !important;
	top: 0;
}