/* Botó del menú: ocult en desktop */
.menu-toggle {
	display: none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width: 900px) {

	#contenedor {
		width: 100%;
		max-width: 910px;
		margin-right: auto;
		margin-left: auto;
	}

	#pagina1 #contenido {
		padding-right: 30px !important;
		padding-left: 30px !important;
	}

}


/* ==========================================================
   TABLET VERTICAL / MÒBIL
   ========================================================== */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------------
	   BASE
	   ------------------------------------------------------ */

	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	body {
		background-position: center top;
	}

	#contenedor,
	#header,
	#pagina1 #contenido,
	.navigate-site,
	.navigate-site ul,
	#footer {
		box-sizing: border-box;
	}


	/* ------------------------------------------------------
	   HEADER
	   INICI + idiomes a l'esquerra
	   Logo a la dreta
	   Menú a sota a tota l'amplada
	   ------------------------------------------------------ */

	#header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(180px, 46%);
		grid-template-rows: auto auto auto auto;
		column-gap: 16px;
		row-gap: 0;

		width: 100%;
		padding: 15px 18px 18px;

		align-items: start;
	}


	/* Inici */

	#header p.home {
		grid-column: 1;
		grid-row: 1;

		float: none !important;
		display: block;

		margin: 2px 0 8px !important;

		font-size: 13px !important;
		line-height: 22px;
	}

	#header p.home a {
		font-size: 13px !important;
		padding-left: 16px;
	}


	/* Idiomes */

	#header ul.idioma {
		grid-column: 1;
		grid-row: 2;

		float: none !important;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		width: 100%;
		margin: 0 !important;
		padding: 0;
	}

	#header ul.idioma li {
		float: none !important;

		font-size: 12px !important;
		line-height: 25px;
	}

	#header ul.idioma li a {
		font-size: 12px !important;
		padding: 2px 3px;
	}


	/* Logo */

	#header h1 {
		grid-column: 2;
		grid-row: 1 / 3;

		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		width: 100%;
		height: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}

	#header h1 a {
		float: none !important;
		display: block;

		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		min-height: 70px !important;

		margin: 0 !important;

		aspect-ratio: auto !important;

		background-repeat: no-repeat;
		background-position: center center !important;
		background-size: 118% auto !important;
	}

	#header h1 span {
		display: none;
	}


	/* Botó hamburguesa */

	#header .menu-toggle {
		grid-column: 1 / -1;
		grid-row: 3;

		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100% !important;
		min-height: 50px;

		margin: 18px 0 0 !important;
		padding: 12px 16px;

		border: 1px solid #444;
		border-radius: 4px;

		background: #272727;
		color: #fff;

		font: bold 14px/1 Arial, Verdana, Helvetica, sans-serif;
		text-align: left;
		text-transform: uppercase;

		cursor: pointer;
	}

	#header .menu-toggle-icon {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		width: 28px;
		height: 21px;
	}

	#header .menu-toggle-icon span {
		display: block;

		width: 100%;
		height: 2px;

		background: #C2E801;

		transition:
			transform 0.25s ease,
			opacity 0.25s ease;
	}


	/* Menú tancat / obert */

	#header ul.menu {
		grid-column: 1 / -1;
		grid-row: 4;

		float: none;
		display: none;

		width: 100% !important;
		margin: 0 !important;
		padding: 0;

		background: #1E1E1E;
	}

	#header ul.menu.menu-open {
		display: block;
	}

	#header ul.menu li {
		float: none;

		width: 100% !important;
		margin: 0;
		padding: 0;

		border-bottom: 1px solid #333;

		background-image: none !important;
	}

	#header ul.menu li:last-child {
		border-bottom: 0;
	}

	#header ul.menu li a {
		display: block;

		width: 100%;
		padding: 15px 16px;

		box-sizing: border-box;

		font-size: 14px !important;
		line-height: 1.4;
	}

	#header ul.menu li a:hover {
		color: #A9CD07;
		background: #272727;
	}


	/* Opció activa */

	#habitatges #header .habitatges a,
	#vila #header .vila a,
	#localitzacio #header .localitzacio a,
	#llocs #header .llocs a,
	#contactar #header .contactar a,
	#activitats #header .activitats a {
		color: #A9CD07;
	}


	/* Hamburguesa -> X */

	#header .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1) {
		transform: translateY(9.5px) rotate(45deg);
	}

	#header .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) {
		opacity: 0;
	}

	#header .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3) {
		transform: translateY(-9.5px) rotate(-45deg);
	}

	#header > br.clear {
		display: none;
	}


	/* ------------------------------------------------------
	   BANNER HOME
	   ------------------------------------------------------ */

	#pagina1 #top-index {
		position: relative;

		width: 100%;
		height: clamp(210px, 52vw, 320px);

		overflow: hidden;
	}

	#pagina1 #top-index .top-banner {
		display: block;

		width: 100%;
		height: 100%;

		object-fit: cover;
		object-position: center;
	}

	#pagina1 #top-index object,
	#pagina1 #top-index embed {
		display: block;

		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
	}


	/* ------------------------------------------------------
	   HOME
	   En responsive:
	   c01 -> c02 -> c03 -> c05 -> arquitecte -> botó -> text
	   ------------------------------------------------------ */

	#pagina1 div#contenido {
		display: flex !important;
		flex-direction: column;

		width: 100%;
		padding: 25px 20px 35px !important;

		box-sizing: border-box;
	}

	#pagina1 .contentleft,
	#pagina1 .contentright {
		display: contents;
	}


	/* Ordre */

	#pagina1 .contentleft > img:nth-of-type(1) {
		order: 1;
	}

	#pagina1 .contentleft > img:nth-of-type(2) {
		order: 2;
	}

	#pagina1 .contentright > img:nth-of-type(1) {
		order: 3;
	}

	#pagina1 .contentright > img:nth-of-type(2) {
		order: 4;
	}

	#pagina1 .contentleft > .recuadro.logo-arq {
		order: 5;
	}

	#pagina1 .contentleft > p {
		order: 6;
	}

	#pagina1 .contentright > .recuadro.grande {
		order: 7;
	}

	#pagina1 #contenido > br.clear {
		display: none;
	}


	/* Imatges home */

	#pagina1 .contentleft > img:not(.logo-arq-img),
	#pagina1 .contentright > img {
		display: block;

		width: 100% !important;
		height: auto;
		aspect-ratio: 16 / 9;

		margin: 0 0 15px !important;

		object-fit: cover;
	}


	/* Logo arquitecte */

	#pagina1 .recuadro.logo-arq {
		width: auto;
		max-width: 100%;

		margin: 10px 0 20px;
		padding: 0;

		background: transparent;
	}

	#pagina1 .recuadro.logo-arq .interno {
		width: auto;
		max-width: 100%;

		background: transparent;
	}

	#pagina1 ul.pdf.logo-lst {
		display: inline-block;

		margin: 0;
		padding: 10px;

		background: #fff;
	}

	#pagina1 ul.pdf.logo-lst li {
		padding: 0;
		background: none;
	}

	#pagina1 ul.pdf.logo-lst a {
		display: block;

		width: auto;
		padding: 0;

		background: none;
	}

	#pagina1 ul.pdf.logo-lst img.logo-arq-img {
		display: block;

		width: 120px;
		max-width: 100%;
		height: auto;

		margin: 0;
	}


	/* Botó */

	#pagina1 .contentleft > p {
		width: 100%;
		margin: 0 0 25px;
	}

	#pagina1 p a.boton {
		width: 100%;
		max-width: 320px;

		background-size: 100% 100%;
	}


	/* Requadre de text */

	#pagina1 .recuadro.grande {
		width: 100%;
		max-width: none;

		padding-top: 0;

		background: none;
	}

	#pagina1 .recuadro.grande .interno {
		width: 100%;

		border: 1px solid rgba(255, 255, 255, 0.12);

		background: rgba(0, 0, 0, 0.2);
	}

	#pagina1 .recuadro.grande .recuadrobottom {
		display: none;
	}

	#pagina1 .recuadro.grande ul {
		padding: 15px 20px;
	}

	#pagina1 .recuadro.grande li {
		padding: 8px 5px 8px 20px;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ ANTERIOR / SEGÜENT
	   ------------------------------------------------------ */

	.navigate-site {
		width: 100%;
	}

	.navigate-site ul {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

		width: 100%;
		margin: 0;
		padding: 18px 24px;
	}

	.navigate-site ul li {
		min-width: 0;
	}

	.navigate-site ul li.pev-page,
	.navigate-site ul li.next-page {
		float: none;
	}

	.navigate-site ul li.pev-page {
		text-align: left;
	}

	.navigate-site ul li.next-page {
		text-align: right;
	}

	.navigate-site ul li a {
		display: inline-block;
		max-width: 100%;
	}

	.navigate-site ul li a span {
		display: inline-block;
		max-width: 100%;
	}


	/* ------------------------------------------------------
	   FOOTER
	   ------------------------------------------------------ */

	#footer {
		width: 100%;
		height: auto;
		min-height: 110px;

		padding: 20px;

		background-position: 20px 20px;

		overflow: hidden;
	}

	#footer img {
		max-width: 100%;
		height: auto;
	}

}


/* ==========================================================
   MÒBIL
   ========================================================== */

@media screen and (max-width: 480px) {

	#header {
		padding: 14px 15px 16px;
		column-gap: 12px;
	}

	#header p.home,
	#header p.home a {
		font-size: 12px !important;
	}

	#header ul.idioma li,
	#header ul.idioma li a {
		font-size: 11px !important;
	}

	#header .menu-toggle {
		font-size: 13px !important;
	}

	#pagina1 #top-index {
		height: 210px;
	}

	#pagina1 div#contenido {
		padding: 20px 15px 30px !important;
	}

	#pagina1 .contentleft > img:not(.logo-arq-img),
	#pagina1 .contentright > img {
		margin-bottom: 12px !important;
	}

	#pagina1 #contenido p,
	#pagina1 #contenido li {
		line-height: 1.45;
	}

	#pagina1 .recuadro.grande ul {
		padding: 12px 14px;
	}

	#pagina1 .recuadro.grande li {
		padding: 8px 5px 8px 18px;

		font-size: 0.92em;
	}

	#pagina1 p a.boton {
		width: 100%;
		max-width: none;
	}

	.navigate-site ul {
		padding: 16px;
	}

	.navigate-site ul li a span {
		font-size: 11px;
	}

	.navigate-site ul li a.prev span {
		margin-left: 12px;
	}

	.navigate-site ul li a.next span {
		margin-right: 12px;
	}

	#footer {
		padding: 75px 16px 20px;

		background-position: center 15px;
		background-size: auto 45px;
	}

	#footer p {
		text-align: center;
	}

	#footer ul {
		float: none;

		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		width: 100%;
		margin-top: 10px;
	}

	#footer ul li {
		float: none;
	}

	#footer img {
		float: none;
		display: block;

		margin: 8px auto;
	}

}


/* ==========================================================
   MÒBILS MOLT PETITS
   ========================================================== */

@media screen and (max-width: 360px) {

	#header {
		grid-template-columns: minmax(0, 1fr) minmax(145px, 48%);

		padding-right: 12px;
		padding-left: 12px;

		column-gap: 10px;
	}

	#pagina1 #top-index {
		height: 180px;
	}

	#pagina1 div#contenido {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	.navigate-site ul {
		padding-right: 12px;
		padding-left: 12px;
	}

}

/* ==========================================================
   NAVEGACIÓ RESPONSIVE
   ========================================================== */

@media screen and (max-width: 768px) {

	.navigate-site {
		width: 100%;
		overflow: hidden;
	}

	.navigate-site ul {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

		width: 100%;
		margin: 0;
		padding: 18px 20px;

		box-sizing: border-box;
	}

	.navigate-site ul li {
		float: none;
		width: 100%;
		min-width: 0;
	}


	/* ANTERIOR */

	.navigate-site ul li.pev-page {
		text-align: left;
	}

	.navigate-site ul li a.prev {
		display: inline-block;

		max-width: 100%;

		padding-left: 18px;

		box-sizing: border-box;
	}


	/* SEGÜENT */

	.navigate-site ul li.next-page {
		text-align: right;
	}

	.navigate-site ul li a.next {
		display: inline-block;

		max-width: 100%;

		/*
		 * Reservem lloc per a la fletxa.
		 * Així no queda sobre el text.
		 */
		padding-right: 18px;

		box-sizing: border-box;

		background:
			url(img/liflecha.gif)
			no-repeat
			right
			center;
	}


	/* TEXT */

	.navigate-site ul li a span {
		display: inline-block;

		max-width: 100%;

		margin: 0 !important;

		font-size: 12px;
		line-height: 1.35;

		white-space: normal;
	}


	/* Si l'anterior està ocult,
	   el següent ocupa tota l'amplada */

	.navigate-site ul li.pev-page.hide + li.next-page {
		grid-column: 1 / -1;
	}

}

/* ==========================================================
   HABITATGES RESPONSIVE
   Desktop no es modifica
   ========================================================== */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------------
	   TOP
	   ------------------------------------------------------ */

	#habitatges #top.top-new {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));

		width: 100%;
		height: auto;

		overflow: hidden;
	}

	#habitatges #top.top-new img.top-img {
		display: block;

		width: 100%;
		height: auto;

		aspect-ratio: 16 / 9;

		object-fit: cover;
	}


	/* ------------------------------------------------------
	   CONTINGUT
	   ------------------------------------------------------ */

	#habitatges #contenido {
		display: flex !important;
		flex-direction: column;

		width: 100%;

		padding: 28px 20px 35px !important;

		box-sizing: border-box;
	}

	/*
	 * Només desmuntem contentleft.
	 * contentright es manté com a contenidor de les 3 fotos.
	 */
	#habitatges .contentleft {
		display: contents;
	}

	#habitatges .contentright {
		order: 3;

		float: none !important;

		display: flex !important;
		flex-direction: column;

		width: 100% !important;
		max-width: none;

		margin: 15px 0 30px !important;
		padding: 0 !important;
	}


	/* ------------------------------------------------------
	   ORDRE
	   ------------------------------------------------------ */

	#habitatges .contentleft > h2 {
		order: 1;
	}

	#habitatges .contentleft > p {
		order: 2;
	}

	#habitatges .contentleft > .recuadro:not(.logo-arq) {
		order: 4;
	}

	#habitatges .contentleft > .recuadro.logo-arq {
		order: 5;
	}

	#habitatges #contenido > br.clear {
		display: none;
	}


	/* ------------------------------------------------------
	   TÍTOL + TEXT
	   ------------------------------------------------------ */

	#habitatges h2 {
		margin-bottom: 18px;

		font-size: 18px;
		line-height: 1.3;
	}

	#habitatges #contenido > p {
		margin-bottom: 15px;

		font-size: 13px;
		line-height: 1.55;
	}


	/* ======================================================
	   LES 3 FOTOS
	   Mateixa mida i mateix marge
	   ====================================================== */

	/* FOTO 1 */

	#habitatges .contentright > img#foto_base {
		display: block;

		width: 100% !important;
		height: auto !important;

		aspect-ratio: 16 / 9;

		margin: 0 0 12px 0 !important;

		object-fit: cover;
	}


	/* FOTO 2 + FOTO 3 */

	#habitatges .contentright > ul.galeria {
		display: flex !important;
		flex-direction: column;

		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		/* no fem servir gap per evitar conflictes */
		gap: 0 !important;
	}

	#habitatges .contentright > ul.galeria > li {
		float: none !important;

		display: block;

		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	/*
	 * Marge NOMÉS entre foto 2 i foto 3.
	 * Així és exactament igual al marge foto 1 -> foto 2.
	 */
	#habitatges .contentright > ul.galeria > li + li {
		margin-top: 12px !important;
	}

	#habitatges .contentright > ul.galeria > li > a {
		display: block;

		width: 100%;

		margin: 0 !important;
		padding: 0 !important;
	}

	#habitatges .contentright > ul.galeria > li > a > img {
		display: block;

		width: 100% !important;
		height: auto !important;

		aspect-ratio: 16 / 9;

		margin: 0 !important;
		padding: 0 !important;

		object-fit: cover;
	}


	/* ------------------------------------------------------
	   CARACTERÍSTIQUES
	   ------------------------------------------------------ */

	#habitatges .contentleft > .recuadro:not(.logo-arq) {
		width: 100%;
		max-width: none;

		margin: 0 0 25px;
		padding: 0;

		background: none;
	}

	#habitatges
	.contentleft
	> .recuadro:not(.logo-arq)
	.interno {
		width: 100%;

		border: 1px solid rgba(255,255,255,0.12);

		background: rgba(0,0,0,0.20);
	}

	#habitatges
	.contentleft
	> .recuadro:not(.logo-arq)
	.recuadrobottom {
		display: none;
	}

	#habitatges
	.contentleft
	> .recuadro:not(.logo-arq)
	ul {
		margin: 0;
		padding: 15px 18px;
	}

	#habitatges
	.contentleft
	> .recuadro:not(.logo-arq)
	li {
		padding: 8px 5px 8px 20px;

		font-size: 12px;
		line-height: 1.4;
	}


	/* ------------------------------------------------------
	   LOGO ARQUITECTE
	   ------------------------------------------------------ */

	#habitatges .contentleft > .recuadro.logo-arq {
		width: auto;
		max-width: 100%;

		margin: 0 0 10px;
		padding: 0;

		background: transparent;
	}

	#habitatges .recuadro.logo-arq .interno {
		width: auto;
		max-width: 100%;

		background: transparent;
	}

	#habitatges ul.pdf.logo-lst {
		display: inline-block;

		width: auto;

		margin: 0;
		padding: 10px;

		background: #fff;
	}

	#habitatges ul.pdf.logo-lst li {
		margin: 0;
		padding: 0;

		background: none;
	}

	#habitatges ul.pdf.logo-lst a {
		display: block;

		width: auto;
		padding: 0;

		background: none;
	}

	#habitatges ul.pdf.logo-lst img.logo-arq-img {
		display: block;

		width: 120px;
		max-width: 100%;
		height: auto;

		margin: 0;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ
	   ------------------------------------------------------ */

	#habitatges .navigate-site ul {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

		width: 100%;

		padding: 18px 20px;
	}

	#habitatges .navigate-site .pev-page {
		text-align: left;
	}

	#habitatges .navigate-site .next-page {
		text-align: right;
	}

	#habitatges .navigate-site a.prev {
		display: inline-block;

		max-width: 100%;

		padding-left: 18px;

	}

	#habitatges .navigate-site a.next {
		display: inline-block;

		max-width: 100%;

		padding-right: 18px;
	}

	#habitatges .navigate-site a span {
		margin: 0 !important;

		font-size: 12px;
		line-height: 1.35;

		white-space: normal;
	}

}


/* ==========================================================
   HABITATGES - MÒBIL
   ========================================================== */

@media screen and (max-width: 480px) {

	#habitatges div#contenido {
		padding: 24px 15px 30px !important;
	}

	#habitatges h2 {
		font-size: 17px;
	}

	#habitatges .contentright {
		margin-top: 15px !important;
		margin-bottom: 25px !important;
	}

	#habitatges .contentleft > .recuadro:not(.logo-arq) ul {
		padding: 12px 14px;
	}

	#habitatges .contentleft > .recuadro:not(.logo-arq) li {
		padding: 8px 4px 8px 18px;

		font-size: 11px;
	}

	#habitatges .navigate-site ul {
		padding: 16px 15px;
		column-gap: 10px;
	}

	#habitatges .navigate-site a span {
		font-size: 11px;
	}

}


/* ==========================================================
   HABITATGES - MÒBIL PETIT
   ========================================================== */

@media screen and (max-width: 360px) {

	#habitatges #top.top-new {
		grid-template-columns: 1fr;
	}

	#habitatges #top.top-new img.top-img {
		aspect-ratio: 16 / 8;
	}
}

/* ==========================================================
   VILA - RESPONSIVE
   Desktop no es modifica
   ========================================================== */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------------
	   TOP
	   ------------------------------------------------------ */

	#vila #top {
		width: 100%;
		height: 160px;

		background-position: center center !important;
		background-size: cover !important;
	}


	/* ------------------------------------------------------
	   CONTINGUT
	   Desktop: 2 columnes
	   Responsive: 1 columna
	   ------------------------------------------------------ */

	#vila #contenido {
		display: flex !important;
		flex-direction: column;

		width: 100%;

		padding: 28px 20px 35px !important;

		box-sizing: border-box;
	}


	#vila .contentleft,
	#vila .contentright {
		float: none !important;

		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	#vila #contenido > br.clear {
		display: none;
	}


	/* ------------------------------------------------------
	   TEXT
	   ------------------------------------------------------ */

	#vila .contentleft h2 {
		margin-bottom: 18px;

		font-size: 18px;
		line-height: 1.3;
	}


	#vila .contentleft p {
		margin-bottom: 15px;

		font-size: 13px;
		line-height: 1.55;
	}


	/* ------------------------------------------------------
	   COLUMNA DE FOTOS
	   ------------------------------------------------------ */

	#vila .contentright {
		margin-top: 20px !important;
	}


	/* FOTO PRINCIPAL */

	#vila .contentright > img#foto_base {
		display: block;

		width: 100% !important;
		max-width: 100%;
		height: auto !important;

		margin: 0 0 12px !important;
		padding: 0;

		object-fit: cover;
	}


	/* ------------------------------------------------------
	   GALERIA
	   ------------------------------------------------------ */

	#vila .contentright ul.galeria {
		display: grid !important;

		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		gap: 10px;

		width: 100%;

		margin: 0 !important;
		padding: 0 !important;
	}


	#vila .contentright ul.galeria li {
		float: none !important;

		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	#vila .contentright ul.galeria li a {
		display: block;

		width: 100%;

		margin: 0;
		padding: 0;
	}


	#vila .contentright ul.galeria li img {
		display: block;

		width: 100% !important;
		height: auto !important;

		aspect-ratio: 4 / 3;

		margin: 0 !important;
		padding: 0;

		object-fit: cover;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ INFERIOR
	   ------------------------------------------------------ */

	#vila .navigate-site ul {
		display: grid;

		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr);

		width: 100%;

		margin: 0;
		padding: 18px 20px;

		box-sizing: border-box;
	}


	#vila .navigate-site ul li {
		float: none;

		width: 100%;
		min-width: 0;
	}


	/* ANTERIOR */

	#vila .navigate-site .pev-page {
		text-align: left;
	}

	#vila .navigate-site a.prev {
		display: inline-block;

		max-width: 100%;

		padding-left: 18px;

		box-sizing: border-box;

	}


	/* SEGÜENT */

	#vila .navigate-site .next-page {
		text-align: right;
	}

	#vila .navigate-site a.next {
		display: inline-block;

		max-width: 100%;

		padding-right: 18px;

		box-sizing: border-box;

	}


	/* TEXT NAVEGACIÓ */

	#vila .navigate-site a span {
		display: inline-block;

		max-width: 100%;

		margin: 0 !important;

		font-size: 12px;
		line-height: 1.35;

		white-space: normal;
	}

}


/* ==========================================================
   VILA - MÒBIL
   ========================================================== */

@media screen and (max-width: 480px) {

	/* TOP */

	#vila #top {
		height: 130px;
	}


	/* CONTINGUT */

	#vila #contenido {
		padding: 24px 15px 30px !important;
	}


	/* TÍTOL */

	#vila .contentleft h2 {
		font-size: 17px;
	}


	/* TEXT */

	#vila .contentleft p {
		font-size: 13px;
		line-height: 1.55;
	}


	/* ------------------------------------------------------
	   GALERIA
	   2 fotos per fila en mòbil
	   ------------------------------------------------------ */

	#vila .contentright ul.galeria {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 8px;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ
	   ------------------------------------------------------ */

	#vila .navigate-site ul {
		padding: 16px 15px;

		column-gap: 12px;
	}


	#vila .navigate-site a span {
		font-size: 11px;
	}

}


/* ==========================================================
   VILA - MÒBIL MOLT PETIT
   ========================================================== */

@media screen and (max-width: 360px) {

	#vila #contenido {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}


	#vila .navigate-site ul {
		padding-right: 12px;
		padding-left: 12px;
	}


	#vila .contentright ul.galeria {
		gap: 6px;
	}

}

/* ==========================================================
   LOCALITZACIÓ - RESPONSIVE
   Desktop no es modifica
   ========================================================== */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------------
	   CONTINGUT
	   ------------------------------------------------------ */

	#localitzacio #contenido {
		display: flex !important;
		flex-direction: column;

		width: 100%;

		padding: 28px 20px 35px !important;

		box-sizing: border-box;
	}


	#localitzacio .contentleft,
	#localitzacio .contentright {
		float: none !important;

		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	#localitzacio #contenido > br.clear {
		display: none;
	}


	/* ------------------------------------------------------
	   TÍTOL
	   ------------------------------------------------------ */

	#localitzacio .contentleft h2 {
		margin-bottom: 18px;

		font-size: 18px;
		line-height: 1.3;
	}


	/* ------------------------------------------------------
	   TEXT
	   ------------------------------------------------------ */

	#localitzacio .contentleft p {
		margin-bottom: 15px;

		font-size: 13px;
		line-height: 1.55;
	}


	/* ------------------------------------------------------
	   GOOGLE MAPS LINK
	   ------------------------------------------------------ */

	#localitzacio p.googlemaps {
		margin: 0 0 18px;
	}

	#localitzacio p.googlemaps a {
		display: inline-block;

		padding: 4px 0 4px 28px;

		font-size: 13px;
		line-height: 1.4;

		background-position: left center;
	}


	/* ------------------------------------------------------
	   GPS
	   ------------------------------------------------------ */

	#localitzacio .geo {
		width: auto;

		margin: 0 0 25px;

		text-align: left;
	}

	#localitzacio .geo span,
	#localitzacio .geo abbr {
		font-size: 12px;
		text-align: left;
	}

	#localitzacio .geo span {
		display: inline-block;

		margin-right: 10px;
	}

	#localitzacio .geo abbr {
		display: inline;
	}


	/* ------------------------------------------------------
	   LLEGENDA
	   ------------------------------------------------------ */

	#localitzacio ul.leyenda {
		width: 100%;

		margin: 20px 0 25px;
		padding: 0;
	}

	#localitzacio ul.leyenda li {
		width: 100%;

		margin: 0 0 6px;
		padding: 7px 5px 7px 32px;

		box-sizing: border-box;

		font-size: 12px;
		line-height: 1.45;

		background-position: 0 7px;
	}

	#localitzacio ul.leyenda li span {
		font-size: 12px;
	}


	/* ------------------------------------------------------
	   MAPA
	   ------------------------------------------------------ */

	#localitzacio .contentright {
		margin-top: 10px !important;
	}

	#localitzacio .contentright img {
		display: block;

		width: 100% !important;
		max-width: 100%;
		height: auto !important;

		margin: 0;

		object-fit: contain;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ INFERIOR
	   ------------------------------------------------------ */

	#localitzacio .navigate-site ul {
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr);

		width: 100%;

		margin: 0;
		padding: 18px 20px;

		box-sizing: border-box;
	}


	#localitzacio .navigate-site ul li {
		float: none;

		width: 100%;
		min-width: 0;
	}


	/* ANTERIOR */

	#localitzacio .navigate-site .pev-page {
		text-align: left;
	}

	#localitzacio .navigate-site a.prev {
		display: inline-block;

		max-width: 100%;

		padding-left: 18px;

		box-sizing: border-box;
	}


	/* SEGÜENT */

	#localitzacio .navigate-site .next-page {
		text-align: right;
	}

	#localitzacio .navigate-site a.next {
		display: inline-block;

		max-width: 100%;

		padding-right: 18px;

		box-sizing: border-box;
	}


	/* TEXT NAVEGACIÓ */

	#localitzacio .navigate-site a span {
		display: inline-block;

		max-width: 100%;

		margin: 0 !important;

		font-size: 12px;
		line-height: 1.35;

		white-space: normal;
	}

}


/* ==========================================================
   LOCALITZACIÓ - MÒBIL
   ========================================================== */

@media screen and (max-width: 480px) {

	/* ------------------------------------------------------
	   CONTINGUT
	   ------------------------------------------------------ */

	#localitzacio #contenido {
		padding: 24px 15px 30px !important;
	}


	/* ------------------------------------------------------
	   TÍTOL
	   ------------------------------------------------------ */

	#localitzacio .contentleft h2 {
		font-size: 17px;
	}


	/* ------------------------------------------------------
	   TEXT
	   ------------------------------------------------------ */

	#localitzacio .contentleft p {
		font-size: 13px;
		line-height: 1.55;
	}


	/* ------------------------------------------------------
	   GPS
	   ------------------------------------------------------ */

	#localitzacio .geo {
		margin-bottom: 22px;
	}

	#localitzacio .geo span,
	#localitzacio .geo abbr {
		font-size: 11px;
	}


	/* ------------------------------------------------------
	   LLEGENDA
	   ------------------------------------------------------ */

	#localitzacio ul.leyenda {
		margin-top: 15px;
	}

	#localitzacio ul.leyenda li {
		padding:
			7px
			4px
			7px
			30px;

		font-size: 11px;
		line-height: 1.45;
	}

	#localitzacio ul.leyenda li span {
		font-size: 11px;
	}


	/* ------------------------------------------------------
	   MAPA
	   ------------------------------------------------------ */

	#localitzacio .contentright {
		margin-top: 5px !important;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ
	   ------------------------------------------------------ */

	#localitzacio .navigate-site ul {
		padding: 16px 15px;

		column-gap: 12px;
	}

	#localitzacio .navigate-site a span {
		font-size: 11px;
	}

}


/* ==========================================================
   LOCALITZACIÓ - MÒBIL MOLT PETIT
   ========================================================== */

@media screen and (max-width: 360px) {

	#localitzacio #contenido {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	#localitzacio .navigate-site ul {
		padding-right: 12px;
		padding-left: 12px;
	}

}

/* ==========================================================
   LLOCS - RESPONSIVE
   Desktop no es modifica
   ========================================================== */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------------
	   CONTINGUT GENERAL
	   ------------------------------------------------------ */

	#llocs #contenido.listas {
		display: block !important;

		width: 100%;

		padding: 28px 20px 35px !important;

		box-sizing: border-box;
	}


	/* ------------------------------------------------------
	   INTRODUCCIÓ
	   ------------------------------------------------------ */

	#llocs #contenido.listas > .contentleft {
		float: none !important;

		width: 100% !important;
		max-width: none;

		margin: 0 0 20px !important;
		padding: 0;
	}


	#llocs #contenido.listas > .contentleft h2 {
		margin-bottom: 15px;

		font-size: 18px;
		line-height: 1.3;
	}


	#llocs #contenido.listas > .contentleft p {
		margin-bottom: 15px;

		font-size: 13px;
		line-height: 1.55;
	}


	/* ------------------------------------------------------
	   CONTENIDOR DE LES DUES LLISTES
	   ------------------------------------------------------ */

	#llocs #contenido.listas > div:not(.contentleft) {
		display: flex;
		flex-direction: column;

		width: 100%;
	}


	/* Les dues columnes desktop passen a una columna */

	#llocs #contenido.listas > div > .contentleft,
	#llocs #contenido.listas > div > .contentright {
		float: none !important;

		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	#llocs #contenido.listas > div > br.clear {
		display: none;
	}


	/* ------------------------------------------------------
	   LLISTES
	   ------------------------------------------------------ */

	#llocs #contenido.listas ul {
		width: 100%;

		margin: 0;
		padding: 0;
	}


	#llocs #contenido.listas li {
		width: 100%;

		margin: 0;
		padding: 12px 0 12px 20px;

		box-sizing: border-box;

		background:
			url(img/liflecha.gif)
			no-repeat
			0
			17px;
	}


	/* Separació entre elements */

	#llocs #contenido.listas li + li {
		border-top: 1px solid rgba(255,255,255,0.08);
	}


	/* ------------------------------------------------------
	   TÍTOLS DE CADA LLOC
	   ------------------------------------------------------ */

	#llocs #contenido.listas li h3 {
		margin: 0 0 7px;

		font-size: 14px;
		line-height: 1.35;

		color: #fff;
	}


	/* ------------------------------------------------------
	   TEXT
	   ------------------------------------------------------ */

	#llocs #contenido.listas li p {
		margin: 0;

		font-size: 13px;
		line-height: 1.55;
	}


	/* Elimina els paràgrafs buits com <p>&nbsp;</p>
	   visualment massa grans */

	#llocs #contenido.listas li p:empty {
		display: none;
	}


	/* ------------------------------------------------------
	   IMATGES
	   ------------------------------------------------------ */

	#llocs #contenido.listas li img {
		display: block;

		width: 100%;
		max-width: 100%;
		height: auto;

		margin: 8px 0 10px;

		object-fit: cover;
	}


	/* ------------------------------------------------------
	   SEPARACIÓ ENTRE LES DUES LLISTES ORIGINALS
	   ------------------------------------------------------ */

	#llocs #contenido.listas > div > .contentright {
		margin-top: 0 !important;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ INFERIOR
	   ------------------------------------------------------ */

	#llocs .navigate-site ul {
		display: grid;

		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr);

		width: 100%;

		margin: 0;
		padding: 18px 20px;

		box-sizing: border-box;

		column-gap: 15px;
	}


	#llocs .navigate-site ul li {
		float: none;

		width: 100%;
		min-width: 0;
	}


	/* ANTERIOR */

	#llocs .navigate-site .pev-page {
		text-align: left;
	}


	#llocs .navigate-site a.prev {
		display: inline-block;

		max-width: 100%;

		padding-left: 18px;

		box-sizing: border-box;

	}


	/* SEGÜENT */

	#llocs .navigate-site .next-page {
		text-align: right;
	}


	#llocs .navigate-site a.next {
		display: inline-block;

		max-width: 100%;

		padding-right: 18px;

		box-sizing: border-box;

	}


	/* TEXT NAVEGACIÓ */

	#llocs .navigate-site a span {
		display: inline-block;

		max-width: 100%;

		margin: 0 !important;

		font-size: 12px;
		line-height: 1.35;

		white-space: normal;
	}

}


/* ==========================================================
   LLOCS - MÒBIL
   ========================================================== */

@media screen and (max-width: 480px) {

	/* ------------------------------------------------------
	   CONTINGUT
	   ------------------------------------------------------ */

	#llocs #contenido.listas {
		padding: 24px 15px 30px !important;
	}


	/* ------------------------------------------------------
	   TÍTOL
	   ------------------------------------------------------ */

	#llocs #contenido.listas > .contentleft h2 {
		font-size: 17px;
	}


	/* ------------------------------------------------------
	   TEXT INTRO
	   ------------------------------------------------------ */

	#llocs #contenido.listas > .contentleft p {
		font-size: 13px;
	}


	/* ------------------------------------------------------
	   ELEMENTS LLISTA
	   ------------------------------------------------------ */

	#llocs #contenido.listas li {
		padding:
			11px
			0
			11px
			18px;

		background-position: 0 16px;
	}


	#llocs #contenido.listas li h3 {
		font-size: 13px;
	}


	#llocs #contenido.listas li p {
		font-size: 12px;
		line-height: 1.5;
	}


	/* ------------------------------------------------------
	   IMATGES
	   ------------------------------------------------------ */

	#llocs #contenido.listas li img {
		margin-top: 8px;
		margin-bottom: 10px;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ
	   ------------------------------------------------------ */

	#llocs .navigate-site ul {
		padding: 16px 15px;

		column-gap: 10px;
	}


	#llocs .navigate-site a span {
		font-size: 11px;
	}

}


/* ==========================================================
   LLOCS - MÒBIL MOLT PETIT
   ========================================================== */

@media screen and (max-width: 360px) {

	#llocs #contenido.listas {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}


	#llocs .navigate-site ul {
		padding-right: 12px;
		padding-left: 12px;
	}

}

/* ==========================================================
   CONTACTAR - RESPONSIVE
   Desktop no es modifica
   ========================================================== */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------------
	   TOP
	   ------------------------------------------------------ */

	#contactar #top {
		width: 100%;
		height: 160px;

		background-position: center center !important;
		background-size: cover !important;
	}


	/* ------------------------------------------------------
	   CONTINGUT
	   ------------------------------------------------------ */

	#contactar #contenido {
		width: 100%;

		padding: 28px 20px 35px !important;

		box-sizing: border-box;
	}


	#contactar #contenido h2 {
		margin-bottom: 18px;

		font-size: 18px;
		line-height: 1.3;
	}


	#contactar #contenido > p {
		font-size: 13px;
		line-height: 1.55;
	}


	/* ------------------------------------------------------
	   FORMULARI
	   ------------------------------------------------------ */

	#contactar form {
		display: flex;
		flex-direction: column;

		width: 100%;

		margin: 20px 0;
		padding: 0 0 20px;

		box-sizing: border-box;
	}


	/*
	 * Eliminem floats i amplades fixes del desktop.
	 */

	#contactar form .formleft,
	#contactar form .formright {
		float: none;

		width: 100% !important;
		max-width: none;

		margin: 0;
		padding: 0;

		box-sizing: border-box;
	}


	/*
	 * Mantenim l'ordre HTML:
	 * comentaris -> dades personals
	 */

	#contactar form .formright {
		margin-bottom: 20px;
	}


	/* ------------------------------------------------------
	   LABELS
	   ------------------------------------------------------ */

	#contactar form label {
		display: inline-block;

		margin-bottom: 5px;
		padding-left: 0;

		font-size: 12px;
		line-height: 1.4;
	}


	/* ------------------------------------------------------
	   INPUTS
	   ------------------------------------------------------ */

	#contactar form input[type="text"],
	#contactar form input.bona,
	#contactar form input.error {
		display: block;

		width: 100% !important;
		max-width: 100%;

		min-height: 38px;

		margin: 0 0 12px;
		padding: 7px 9px;

		box-sizing: border-box;

		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 14px;
	}


	/* ------------------------------------------------------
	   TEXTAREA
	   ------------------------------------------------------ */

	#contactar form textarea {
		display: block;

		width: 100% !important;
		max-width: 100%;

		height: 140px;
		min-height: 140px;

		margin: 0;
		padding: 8px 9px;

		box-sizing: border-box;

		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 14px;

		resize: vertical;
	}


	/* ------------------------------------------------------
	   BOTÓ ENVIAR
	   Manté la imatge enviar.png original
	   ------------------------------------------------------ */

	#contactar form input[type="button"] {
		float: none;

		display: block;

		width: 130px;
		height: 32px;

		margin: 20px 0 18px auto;

		background:
			url(img/enviar.png)
			no-repeat
			center center;

		background-size: 100% 100%;

		cursor: pointer;
	}


	/* ------------------------------------------------------
	   CHECKBOX + TEXT LEGAL
	   ------------------------------------------------------ */

	#contactar form input.check {
		float: none;

		display: inline-block;

		width: auto;
		height: auto;

		margin: 3px 7px 0 0;
		padding: 0;

		vertical-align: top;
	}


	/*
	 * tfacceptar pot passar de class="bona"
	 * a class="error", per això controlem les dues.
	 */

	#contactar form label.bona,
	#contactar form label.error {
		float: none;

		display: inline-block;

		width: calc(100% - 32px);

		margin: 0;
		padding: 0;

		box-sizing: border-box;

		font-size: 11px;
		line-height: 1.45;

		vertical-align: top;
	}


	#contactar form label.error {
		color: #ff0000;
	}


	/* Clear antic */

	#contactar form > .clear {
		clear: none;

		height: 15px;
	}


	/* ------------------------------------------------------
	   TEXT LEGAL INFERIOR
	   ------------------------------------------------------ */

	#contactar #contenido p.conforme {
		width: 100%;

		margin: 15px 0 0;

		font-size: 11px;
		line-height: 1.5;

		overflow-wrap: anywhere;
	}


	/* ------------------------------------------------------
	   MISSATGES D'ERROR / CONFIRMACIÓ
	   ------------------------------------------------------ */

	#contactar #contenido p[align="center"] {
		width: 100%;

		margin: 20px 0;

		text-align: center;

		font-size: 13px;
		line-height: 1.5;

		overflow-wrap: anywhere;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ INFERIOR
	   ------------------------------------------------------ */

	#contactar .navigate-site ul {
		display: grid;

		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr);

		width: 100%;

		margin: 0;
		padding: 18px 20px;

		box-sizing: border-box;

		column-gap: 15px;
	}


	#contactar .navigate-site ul li {
		float: none;

		width: 100%;
		min-width: 0;
	}


	/* ANTERIOR */

	#contactar .navigate-site .pev-page {
		text-align: left;
	}


	#contactar .navigate-site a.prev {
		display: inline-block;

		max-width: 100%;

		padding-left: 18px;

		box-sizing: border-box;

	}


	/* SEGÜENT */

	#contactar .navigate-site .next-page {
		text-align: right;
	}


	#contactar .navigate-site a.next {
		display: inline-block;

		max-width: 100%;

		padding-right: 18px;

		box-sizing: border-box;
	}


	/* TEXT NAVEGACIÓ */

	#contactar .navigate-site a span {
		display: inline-block;

		max-width: 100%;

		margin: 0 !important;

		font-size: 12px;
		line-height: 1.35;

		white-space: normal;
	}

}


/* ==========================================================
   CONTACTAR - MÒBIL
   ========================================================== */

@media screen and (max-width: 480px) {

	#contactar #top {
		height: 130px;
	}


	/* Contingut */

	#contactar #contenido {
		padding: 24px 15px 30px !important;
	}


	/* Títol */

	#contactar #contenido h2 {
		font-size: 17px;
	}


	/* Text */

	#contactar #contenido > p {
		font-size: 13px;
	}


	/* Inputs */

	#contactar form input[type="text"],
	#contactar form input.bona,
	#contactar form input.error {
		min-height: 42px;

		font-size: 16px;
	}


	/*
	 * 16px evita que alguns navegadors mòbils
	 * facin zoom automàtic en enfocar el camp.
	 */

	#contactar form textarea {
		min-height: 150px;

		font-size: 16px;
	}


	/* Enviar */

	#contactar form input[type="button"] {
		width: 140px;
		height: 35px;

		margin-top: 18px;
	}


	/* Acceptació */

	#contactar form label.bona,
	#contactar form label.error {
		font-size: 11px;
	}


	/* Text legal */

	#contactar #contenido p.conforme {
		font-size: 10px;
	}


	/* Navegació */

	#contactar .navigate-site ul {
		padding: 16px 15px;

		column-gap: 10px;
	}


	#contactar .navigate-site a span {
		font-size: 11px;
	}

}


/* ==========================================================
   CONTACTAR - MÒBIL MOLT PETIT
   ========================================================== */

@media screen and (max-width: 360px) {

	#contactar #contenido {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}


	#contactar .navigate-site ul {
		padding-right: 12px;
		padding-left: 12px;
	}

}

/* ==========================================================
   ACTIVITATS - RESPONSIVE
   Desktop no es modifica
   ========================================================== */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------------
	   CONTINGUT GENERAL
	   ------------------------------------------------------ */

	#activitats #contenido.listas {
		display: block !important;

		width: 100%;

		padding: 28px 20px 35px !important;

		box-sizing: border-box;
	}


	/* ------------------------------------------------------
	   INTRODUCCIÓ
	   ------------------------------------------------------ */

	#activitats #contenido.listas > .contentleft {
		float: none !important;

		width: 100% !important;
		max-width: none;

		margin: 0 0 20px !important;
		padding: 0;
	}


	#activitats #contenido.listas > .contentleft h2 {
		margin-bottom: 15px;

		font-size: 18px;
		line-height: 1.3;
	}


	#activitats #contenido.listas > .contentleft p {
		margin-bottom: 15px;

		font-size: 13px;
		line-height: 1.55;
	}


	/* ------------------------------------------------------
	   CONTENIDOR DE LES DUES COLUMNES
	   ------------------------------------------------------ */

	#activitats #contenido.listas > div:not(.contentleft) {
		display: flex;
		flex-direction: column;

		width: 100%;
	}


	#activitats #contenido.listas > div > .contentleft,
	#activitats #contenido.listas > div > .contentright {
		float: none !important;

		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	#activitats #contenido.listas > div > br.clear {
		display: none;
	}


	/* ------------------------------------------------------
	   LLISTES PRINCIPALS
	   ------------------------------------------------------ */

	#activitats #contenido.listas > div > .contentleft > ul,
	#activitats #contenido.listas > div > .contentright > ul {
		width: 100%;

		margin: 0;
		padding: 0;
	}


	/*
	 * Només els LI principals tenen la fletxa verda.
	 */

	#activitats #contenido.listas
	> div
	> .contentleft
	> ul
	> li,

	#activitats #contenido.listas
	> div
	> .contentright
	> ul
	> li {
		width: 100%;

		margin: 0;
		padding: 14px 0 14px 20px;

		box-sizing: border-box;

		background:
			url(img/liflecha.gif)
			no-repeat
			0
			19px;
	}


	/* Separació visual entre activitats */

	#activitats #contenido.listas
	> div
	> .contentleft
	> ul
	> li + li,

	#activitats #contenido.listas
	> div
	> .contentright
	> ul
	> li + li {
		border-top: 1px solid rgba(255,255,255,0.08);
	}


	/* ------------------------------------------------------
	   TÍTOLS
	   ------------------------------------------------------ */

	#activitats #contenido.listas h3 {
		margin: 0 0 7px;

		font-size: 14px;
		line-height: 1.35;

		color: #fff;
	}


	/* ------------------------------------------------------
	   TEXTOS
	   ------------------------------------------------------ */

	#activitats #contenido.listas
	> div
	> .contentleft
	> ul
	> li
	> p,

	#activitats #contenido.listas
	> div
	> .contentright
	> ul
	> li
	> p {
		margin: 0;

		font-size: 13px;
		line-height: 1.55;
	}


	/* ------------------------------------------------------
	   IMATGES
	   ------------------------------------------------------ */

	#activitats #contenido.listas li > img {
		display: block;

		width: 100%;
		max-width: 100%;
		height: auto;

		margin: 10px 0 12px;

		object-fit: cover;
	}


	/* ------------------------------------------------------
	   SUBLLISTES
	   Golf, Sky Dive, Globus, cavalls...
	   ------------------------------------------------------ */

	#activitats #contenido.listas li > ul {
		width: 100%;

		margin: 10px 0 0;
		padding: 0 0 0 12px;

		box-sizing: border-box;
	}


	/*
	 * IMPORTANT:
	 * Els LI interiors NO han de tenir la fletxa
	 * ni l'estil del LI principal.
	 */

	#activitats #contenido.listas li > ul > li {
		width: 100%;

		margin: 0;
		padding: 4px 0 4px 12px;

		border: 0;

		background: none !important;

		box-sizing: border-box;

		font-size: 12px;
		line-height: 1.45;

		position: relative;
	}


	/* Petit marcador per als links interns */

	#activitats #contenido.listas li > ul > li::before {
		content: "•";

		position: absolute;
		left: 0;
		top: 4px;

		color: #C2E801;
	}


	#activitats #contenido.listas li > ul > li a {
		display: inline;

		max-width: 100%;

		color: #C2E801;

		overflow-wrap: anywhere;
		word-break: normal;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ INFERIOR
	   ------------------------------------------------------ */

	#activitats .navigate-site ul {
		display: grid;

		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr);

		width: 100%;

		margin: 0;
		padding: 18px 20px;

		box-sizing: border-box;

		column-gap: 15px;
	}


	#activitats .navigate-site ul li {
		float: none;

		width: 100%;
		min-width: 0;
	}


	/* ANTERIOR */

	#activitats .navigate-site .pev-page {
		text-align: left;
	}


	#activitats .navigate-site a.prev {
		display: inline-block;

		max-width: 100%;

		padding-left: 18px;

		box-sizing: border-box;

	}


	/* SEGÜENT */

	#activitats .navigate-site .next-page {
		text-align: right;
	}


	#activitats .navigate-site a.next {
		display: inline-block;

		max-width: 100%;

		padding-right: 18px;

		box-sizing: border-box;

	}


	/* Text navegació */

	#activitats .navigate-site a span {
		display: inline-block;

		max-width: 100%;

		margin: 0 !important;

		font-size: 12px;
		line-height: 1.35;

		white-space: normal;
	}


	/* ------------------------------------------------------
	   EN AQUESTA PÀGINA EL "NEXT" ESTÀ OCULT
	   No reservem el 50% dret.
	   ------------------------------------------------------ */

	#activitats .navigate-site li.next-page.hide {
		display: none;
	}


	#activitats .navigate-site li.pev-page {
		grid-column: 1 / -1;
	}

}


/* ==========================================================
   ACTIVITATS - MÒBIL
   ========================================================== */

@media screen and (max-width: 480px) {

	/* ------------------------------------------------------
	   CONTINGUT
	   ------------------------------------------------------ */

	#activitats #contenido.listas {
		padding: 24px 15px 30px !important;
	}


	/* ------------------------------------------------------
	   TÍTOL
	   ------------------------------------------------------ */

	#activitats #contenido.listas > .contentleft h2 {
		font-size: 17px;
	}


	/* ------------------------------------------------------
	   INTRO
	   ------------------------------------------------------ */

	#activitats #contenido.listas > .contentleft p {
		font-size: 13px;
		line-height: 1.5;
	}


	/* ------------------------------------------------------
	   ACTIVITATS
	   ------------------------------------------------------ */

	#activitats #contenido.listas
	> div
	> .contentleft
	> ul
	> li,

	#activitats #contenido.listas
	> div
	> .contentright
	> ul
	> li {
		padding:
			12px
			0
			12px
			18px;

		background-position: 0 17px;
	}


	#activitats #contenido.listas h3 {
		font-size: 13px;
	}


	#activitats #contenido.listas
	> div
	> .contentleft
	> ul
	> li
	> p,

	#activitats #contenido.listas
	> div
	> .contentright
	> ul
	> li
	> p {
		font-size: 12px;
		line-height: 1.5;
	}


	/* ------------------------------------------------------
	   SUBLLISTES
	   ------------------------------------------------------ */

	#activitats #contenido.listas li > ul {
		padding-left: 8px;
	}


	#activitats #contenido.listas li > ul > li {
		font-size: 11px;
		line-height: 1.5;
	}


	/* ------------------------------------------------------
	   NAVEGACIÓ
	   ------------------------------------------------------ */

	#activitats .navigate-site ul {
		padding: 16px 15px;
	}


	#activitats .navigate-site a span {
		font-size: 11px;
	}

}


/* ==========================================================
   ACTIVITATS - MÒBIL MOLT PETIT
   ========================================================== */

@media screen and (max-width: 360px) {

	#activitats #contenido.listas {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}


	#activitats .navigate-site ul {
		padding-right: 12px;
		padding-left: 12px;
	}

}