@charset "UTF-8";
/*
Theme Name: L'Efecte Blau
Theme URI: https://www.lefecteblau.cat
Author: Anedma (Jorge Manzano)
Author URI: http://anedma.com/
Description: Tema creado para el sitio web L'Efecte Blau
Version: 1.0
License: © Copyright 2019
Text Domain: leb
*/
/***********************************************************

CORE
Ajustes iniciales correspondientes a cualquier proyecto

************************************************************/
/*******************************

COLORES

********************************/
/* Color Primario */
/* Gris oscuro. Viene del blog */
/*******************************

TIPOGRAFÍA

********************************/
/*******************************

HOVER (@include hover o transition)

********************************/
/* development/CORE/_Mixins.scss */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)

   Modificaciones:
   - Se elimina el reset de las listas: ol, ul, dl

*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

/************************************************************

APP
elementos comunes y genéricos a todo el sitio web

************************************************************/
@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/ProximaNova-Light.woff2") format("woff2"), url("fonts/ProximaNova-Light.woff") format("woff"), url("fonts/ProximaNova-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/ProximaNova-Black.woff2") format("woff2"), url("fonts/ProximaNova-Black.woff") format("woff"), url("fonts/ProximaNova-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal; }

@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/ProximaNova-Semibold.woff2") format("woff2"), url("fonts/ProximaNova-Semibold.woff") format("woff"), url("fonts/ProximaNova-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/ProximaNova-Regular.woff2") format("woff2"), url("fonts/ProximaNova-Regular.woff") format("woff"), url("fonts/ProximaNova-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/ProximaNova-Extrabld.woff2") format("woff2"), url("fonts/ProximaNova-Extrabld.woff") format("woff"), url("fonts/ProximaNova-Extrabld.ttf") format("truetype");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'Proxima Nova';
  src: url("fonts/ProximaNova-Bold.woff2") format("woff2"), url("fonts/ProximaNova-Bold.woff") format("woff"), url("fonts/ProximaNova-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

html, body {
  font-size: 100%;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none; }

body {
  font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: #212529; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.1;
  font-weight: 700; }

h1 {
  margin: 0 0 2.25rem;
  font-size: 1.875rem;
  line-height: 1; }
  @media (min-width: 48em) {
    h1 {
      margin: 0 0 3rem;
      font-size: 2.49rem; } }
  @media (min-width: 64em) {
    h1 {
      font-size: 3rem; } }

h2 {
  margin: 2.25rem 0 1.5rem;
  font-size: 1.125rem; }
  h2:first-child {
    margin-top: 0; }
  @media (min-width: 48em) {
    h2 {
      margin: 3rem 0 1.5rem;
      font-size: 1.5rem; } }
  @media (min-width: 64em) {
    h2 {
      font-size: 1.5rem; } }

h3, h4 {
  margin: 1.5rem 0 1rem;
  font-size: 1rem; }
  @media (min-width: 48em) {
    h3, h4 {
      font-size: 1.125rem; } }

h4 {
  font-style: italic; }

h5, h6 {
  float: left;
  line-height: 1.5;
  margin-right: 0.25rem; }

h6 {
  font-weight: normal;
  font-style: italic; }

p {
  margin: 0 0 1rem; }

.wp-block-quote,
blockquote {
  font-size: 1.3125rem;
  font-weight: 500;
  margin: 3rem 0 1.5rem;
  border-top: 1px solid #ddd;
  border-left: none;
  padding: 1.5rem 0; }
  .wp-block-quote cite,
  .wp-block-quote .wp-block-quote__citation,
  blockquote cite,
  blockquote .wp-block-quote__citation {
    display: block;
    font-size: 0.8125rem;
    text-transform: uppercase;
    line-height: 1; }
    .wp-block-quote cite:before,
    .wp-block-quote .wp-block-quote__citation:before,
    blockquote cite:before,
    blockquote .wp-block-quote__citation:before {
      display: -webkit-inline-box;
      display: inline-flex;
      -webkit-box-pack: center;
              justify-content: center;
      -webkit-box-align: center;
              align-items: center;
      width: 32px;
      height: 32px;
      margin-right: 1rem;
      border-radius: 50%;
      background: #21ace3;
      color: white;
      content: "\e913";
      font-family: 'icons';
      font-size: 18px;
      -webkit-transform: translateY(4px);
              transform: translateY(4px); }

/* LISTAS */
ul, ol {
  padding-left: 1em;
  margin-left: 0; }
  ul ul,
  ul ol, ol ul,
  ol ol {
    margin-top: .5em;
    margin-bottom: 0; }

li {
  margin-bottom: .5em; }

@media (min-width: 48em) {
  ul, ol {
    margin-bottom: 1.5rem; } }

dl {
  margin-top: 0; }

dt,
dd {
  line-height: 1.5; }

hr {
  height: 0;
  margin: 2.25rem auto;
  min-width: 140px;
  width: 20%;
  border-top: 1px solid #ccc; }

/*************************

ELEMENTOS EN LÍNEA

**************************/
a {
  color: #21ace3; }

em {
  font-style: italic; }

strong,
b {
  font-weight: 700; }

small {
  font-size: 0.75rem; }

sub {
  vertical-align: sub;
  font-size: 12px; }

table {
  margin-bottom: 1rem;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  /* Añadir cellspacing="0" a la tabla */
  border: 1px solid;
  font-size: 0.875rem;
  line-height: 1.4375rem;
  text-align: left; }

th, td {
  height: 1.5rem;
  border: 1px solid;
  padding: 0 0.375rem; }

thead tr th, thead tr td, tfoot tr th, tfoot tr td {
  font-weight: 700; }

video, iframe {
  display: block;
  width: 100%;
  -ms-interpolation-mode: bicubic; }

img {
  display: block;
  max-width: 100%;
  height: auto; }

svg {
  fill: currentColor;
  width: 100%;
  height: inherit; }

/*@import '02_app/_forms';*/
/*

ICONOS
Cargar hoja de estilos del provedor de iconos

*/
/* Screen reader text */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important; }

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  -webkit-clip-path: none;
          clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */ }

/*

Alineación de imágenes

*/
img {
  display: block; }

/* front  */
figure.wp-block-image,
.wp-block-image figure,
[data-type="core/image"][data-align=center] .editor-block-list__block-edit figure,
[data-type="core/image"][data-align=left] .editor-block-list__block-edit figure,
[data-type="core/image"][data-align=right] .editor-block-list__block-edit figure,
[data-type="core/image"][data-align=wide] .editor-block-list__block-edit figure {
  margin: 4px 0 2.25rem; }

.wp-block-image .alignleft {
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  display: inline;
  float: left;
  max-width: 50%;
  text-align: left; }

.wp-block-image .alignright {
  margin-left: 1.5rem;
  display: inline;
  float: right;
  max-width: 50%;
  text-align: right; }

.wp-block-image .aligncenter {
  margin-right: auto;
  margin-left: auto;
  display: block;
  clear: both;
  text-align: center; }

/*

Imágenes alignwide

*/
/* Si el ancho del bloque no está limitado, se verá practicamente como un alignfull */
.wp-block-image.alignwide,
.editor-block-list__block[data-type="core/image"][data-align="wide"] {
  padding: 0; }
  .wp-block-image.alignwide img,
  .editor-block-list__block[data-type="core/image"][data-align="wide"] img {
    width: calc(100% + 96px);
    display: block; }

.wp-block-image.alignwide img {
  -webkit-transform: translateX(-48px);
          transform: translateX(-48px); }

.editor-block-list__block[data-type="core/image"][data-align=full] {
  margin: 0 0 1.5rem;
  width: calc(100% + 90px);
  -webkit-transform: translateX(-45px);
          transform: translateX(-45px); }

/* Requiere que el body tenga overflow-x hidden */
.wp-block-image.alignfull {
  margin-left: calc( -100vw / 2 + 100% / 2);
  margin-right: calc( -100vw / 2 + 100% / 2);
  max-width: 100vw; }
  .wp-block-image.alignfull img {
    width: 100%; }

/*

Pies de fotos

*/
.wp-block-image figcaption {
  margin-top: 0.375rem;
  font-style: italic;
  font-size: 0.9090909091rem;
  padding: 1.5rem 0 0.75rem; }

.wp-block-image.alignwide figcaption,
.wp-block-image.alignfull figcaption,
[data-type="core/image"][data-align=center] .editor-block-list__block-edit figcaption,
[data-type="core/image"][data-align=wide] .editor-block-list__block-edit figcaption,
[data-type="core/image"][data-align=full] .editor-block-list__block-edit figcaption {
  text-align: center; }

[data-type="core/image"][data-align=left] .editor-block-list__block-edit figcaption {
  text-align: left; }

[data-type="core/image"][data-align=right] .editor-block-list__block-edit figcaption {
  text-align: right; }

*, *:before, *:after {
  box-sizing: border-box; }

html, body {
  min-height: 100vh; }

body {
  background: white; }

.leb-wrapper {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding: 48px 96px; }
  @media (max-width: 1025px) {
    .leb-wrapper {
      padding: 24px 48px; } }
  @media (max-width: 768px) {
    .leb-wrapper {
      padding: 24px; } }

/************************************************************

MODULES
Elementos que se repiten en toda la página web: header, footer,
logo, breadcrumbs...
Elementos genéricos que se pueden usar para componer páginas:
Heros, formulario de contacto, etc.

************************************************************/
/************************************************************

BLOQUES

************************************************************/
/************************************************************

PAGES
Composición del layout de páginas

************************************************************/
#full-page {
  font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }

.flex-parent {
  display: -webkit-box;
  display: flex; }

.flex-child {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column; }

.flex-child-center {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column; }

.oculto {
  display: none; }

.wrapper {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden; }

/* Sección Izquierda */
#section0-izq,
#section0-der {
  height: 100vh; }

#section0-izq {
  position: relative;
  z-index: 20;
  width: 33.3333vw;
  min-width: 300px;
  background: white;
  padding: 48px;
  color: #013688; }
  #section0-izq .contenedor {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
    -webkit-box-pack: justify;
            justify-content: space-between;
    height: 100%; }
  @media (max-width: 1024px) {
    #section0-izq {
      padding: 24px; } }

#section0-izq h1 {
  font-weight: 900;
  font-size: 42px;
  margin: 0;
  line-height: .9;
  margin-bottom: 48px; }
  @media (max-width: 1024px) {
    #section0-izq h1 {
      margin-bottom: 24px;
      font-size: 36px;
      font-weight: 700; } }

#section0-izq p {
  font-size: 16px;
  font-weight: 300; }

#section0-izq ul.listado-seccion {
  list-style: none;
  margin: 0;
  padding: 0 48px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between; }
  #section0-izq ul.listado-seccion .nombre-seccion {
    display: none; }
  @media (max-width: 1025px) {
    #section0-izq ul.listado-seccion {
      padding: 0 24px; } }

.vineta {
  border: 1px solid #013688;
  width: 1.4583vw;
  height: 1.4583vw;
  text-align: center;
  border-radius: 50%;
  font-size: 1vw;
  margin-top: 0.2778vh;
  margin-right: 0.3646vw; }

ul.listado-seccion .vineta {
  display: block;
  width: 18px;
  height: 18px;
  overflow: hidden;
  background: rgba(1, 54, 136, 0.2);
  border: none;
  margin: 0 24px 0 0; }
  ul.listado-seccion .vineta:last-of-type {
    margin-right: 0; }
  ul.listado-seccion .vineta:before {
    content: "";
    display: block;
    width: 100%;
    height: inherit; }

ul.listado-seccion li.activo .vineta {
  background-color: #013688;
  color: white; }

ul.listado-seccion li.activo .nombre-seccion {
  text-decoration: underline; }

ul.listado-seccion .vineta,
ul.listado-seccion .nombre-seccion {
  cursor: pointer; }

#section0-der {
  -webkit-box-flex: 1;
          flex: 1;
  background: #e6f3fc; }

#mapa-horizontal {
  position: fixed;
  z-index: 10;
  width: 373.2813vw;
  height: 47.0313vw;
  background: url(images/cicle-aigua/mapa-horizontal.png) no-repeat;
  background-size: contain;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  bottom: -91.1458vw;
  left: -50px;
  background-position-x: -260vw;
  /* Safari */
  -webkit-transition: 2s;
  transition: 2s; }

#section0-der > .contenedor {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 20; }

.texto-seccion {
  width: 100%;
  max-width: 384px;
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 20;
  display: none;
  padding: 0 24px; }

.texto-seccion h2 {
  margin: 0;
  color: #6ba8db;
  font-size: 21px;
  font-weight: 900; }

.texto-seccion h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #003f87;
  line-height: 1.2;
  margin-bottom: 24px; }

.texto-seccion p {
  margin: 0;
  color: #003f87;
  font-size: 16px; }

.texto-seccion .vineta-h2 {
  background: #6ba8db;
  color: #e5f2fb;
  font-size: 0.75vw;
  width: 1.25vw;
  height: 1.25vw;
  border-radius: 50%;
  text-align: center;
  margin-top: 0.75vw;
  margin-right: 0.625vw; }

.texto-seccion h3,
.texto-seccion p {
  padding-left: 1.875vw; }

#section1 .texto-seccion {
  display: block; }

#logo-movil {
  margin-top: 10vh; }

#logo-movil > img {
  width: 10.2604vw; }

@media (max-width: 767px) {
  #mapa,
  #mapa-horizontal,
  #section0-der,
  ul.listado-seccion {
    display: none; }
  #section0-izq {
    width: 100vw;
    background-image: none; }
  #logo-movil {
    display: block;
    margin-top: 2vh; }
  #logo-movil > img {
    width: 32.9333vw; }
  .texto-seccion {
    position: relative;
    display: block;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin-top: 0.9989vh; }
  #section0-izq h1 {
    font-size: 15.216vw;
    line-height: 12.5vw;
    margin-bottom: 2.5vh; }
  #section0-izq p {
    font-size: 5.5vw; }
  .texto-seccion .vineta-h2 {
    width: 4.6667vw;
    height: 4.6667vw;
    font-size: 3.5vw;
    position: absolute;
    left: 1.875vw; }
  .texto-seccion h2,
  .texto-seccion h3 {
    font-size: 5.8667vw;
    letter-spacing: initial;
    line-height: 6vw;
    margin-bottom: 5px; }
  .texto-seccion .texto-h2 {
    margin-top: 7.5vw;
    padding-left: 1.875vw; }
  .texto-seccion p {
    font-size: 4.8vw;
    line-height: 5.3773vw;
    margin-top: 3vh; }
  #section1 {
    background: #e5f2fb url(images/cicle-aigua/fondo-movil-1.png) no-repeat;
    background-size: contain;
    background-position: center bottom; }
  #section2 {
    background: #e5f2fb url(images/cicle-aigua/fondo-movil-2.png) no-repeat;
    background-size: contain;
    background-position: center bottom; }
  #section3 {
    background: #e5f2fb url(images/cicle-aigua/fondo-movil-3.png) no-repeat;
    background-size: contain;
    background-position: center bottom; }
  #section4 {
    background: #e5f2fb url(images/cicle-aigua/fondo-movil-4.png) no-repeat;
    background-size: contain;
    background-position: center bottom; }
  #section5 {
    background: #e5f2fb url(images/cicle-aigua/fondo-movil-5.png) no-repeat;
    background-size: contain;
    background-position: center bottom; }
  #section6 {
    background: #e5f2fb url(images/cicle-aigua/fondo-movil-6.png) no-repeat;
    background-size: contain;
    background-position: center bottom; }
  html.safari #section1,
  html.safari #section2,
  html.safari #section3,
  html.safari #section4,
  html.safari #section5,
  html.safari #section6 {
    background-position: 0 45vh; }
  #section1.superpuesta .flotante {
    position: fixed;
    z-index: 100;
    background-color: #e5f2fb;
    padding-bottom: 10px;
    bottom: 0; }
  #section0-izq > .contenedor {
    padding-top: 1.8vh; } }

.quiz-container {
  position: relative;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 35px 48px; }

#quiz-title {
  color: #21ace3;
  font-weight: 900;
  font-size: 25px;
  text-align: center;
  margin-bottom: 48px; }

.quiz-next-question {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 32px; }

.pregunta {
  display: none; }
  .pregunta.active {
    display: block;
    width: 100%; }
  .pregunta .num {
    font-weight: 900;
    font-size: 137px;
    color: #e3ebf5;
    line-height: .71;
    position: absolute;
    top: 0;
    left: 0; }
  .pregunta .enunciat {
    position: relative; }
    .pregunta .enunciat p {
      width: 70%;
      margin: 0;
      font-size: 30px;
      line-height: 1.13;
      font-weight: 300;
      color: #003478;
      -webkit-transition: all 1500ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
      transition: all 1500ms cubic-bezier(0.05, 1.04, 0.72, 0.98); }
    .pregunta .enunciat ul {
      list-style: none;
      margin: 48px 48px 48px 0;
      padding: 0;
      width: 50%;
      -webkit-transition: all 1500ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
      transition: all 1500ms cubic-bezier(0.05, 1.04, 0.72, 0.98); }
    .pregunta .enunciat li {
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: center;
              justify-content: center;
      margin-bottom: 30px;
      padding: 8px 30px;
      border-radius: 30px;
      border: 1px solid;
      font-size: 18px;
      color: #003478;
      text-align: center;
      /*transition: all 1500ms $cubic-bezier;*/ }
      .pregunta .enunciat li.correct {
        background: #85bb9a;
        border-color: #85bb9a;
        color: white;
        font-weight: 600; }
      .pregunta .enunciat li.error {
        color: crimson; }
      .pregunta .enunciat li:last-of-type {
        margin-bottom: 0; }
    .pregunta .enunciat .picto {
      -webkit-transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
      transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98); }
  .pregunta.pregunta-test:not(.wait):not(.correct) .enunciat li:not(.correct):not(.error) {
    cursor: pointer; }
  .pregunta .resultat {
    display: none;
    font-size: 18px;
    color: #003478;
    padding: 18px 24px;
    background: #e3ebf5;
    border-radius: 20px; }
    .pregunta .resultat p {
      margin-bottom: 0; }

.pregunta-test-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between; }
  .pregunta-test-container ul {
    -webkit-box-flex: 0;
            flex: 0 0 auto;
    width: 66.666%;
    margin-right: 30px; }
  .pregunta-test-container .picto {
    margin: 24px 0;
    -webkit-box-flex: 1;
            flex: 1;
    background-image: url("images/aquaquiz/pregunta1.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain; }

/************************************************************************************************************************************************
* SELECT BOX
************************************************************************************************************************************************/
.pregunta-options .enunciat ul {
  width: 70%;
  margin-right: 24px;
  -webkit-box-flex: 0;
          flex: 0 0 auto; }

.pregunta-options .enunciat li {
  -webkit-box-pack: start;
          justify-content: flex-start; }

.pregunta-options .wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%; }

.pregunta-options .text {
  -webkit-box-flex: 0;
          flex: 0 0 auto;
  width: 70%;
  padding-right: 24px;
  text-align: left; }

.sel {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
          flex-flow: row-reverse;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  width: 50%;
  min-height: 48px;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: none;
  border-bottom: 1px solid;
  cursor: pointer; }
  .sel:before {
    position: relative;
    content: '';
    width: 0;
    height: 0;
    margin-right: 12px;
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: #003478 transparent transparent transparent;
    -webkit-transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
    transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98); }
  .sel.active {
    background-color: #e3ebf5; }
    .sel.active:before {
      z-index: 300;
      -webkit-transform: rotateX(-180deg);
              transform: rotateX(-180deg); }
  .error .sel:before {
    border-color: crimson transparent transparent transparent; }
  .correct .sel:before {
    border-color: white transparent transparent transparent; }

.sel__placeholder {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  height: 100%;
  color: #003478;
  font-weight: 600;
  text-align: left;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  visibility: visible;
  white-space: nowrap; }
  .correct .sel__placeholder {
    color: white; }
  .error .sel__placeholder {
    color: crimson; }
  .sel__placeholder:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.2em 0.5em;
    content: attr(data-placeholder);
    visibility: hidden; }
  .active .sel__placeholder:before {
    visibility: visible; }

.sel__box {
  position: absolute;
  top: calc(100%);
  top: 0;
  left: 0;
  z-index: 200;
  display: none;
  width: 100%;
  border-radius: 10px;
  background-color: #e3ebf5;
  list-style: none;
  text-align: left;
  overflow: hidden; }

.sel.active .sel__box {
  display: block;
  -webkit-animation: fadeInDown 500ms;
          animation: fadeInDown 500ms; }

.sel__box__options {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 48px;
  color: #003478;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .sel__box__options:hover {
    background-color: #003478;
    color: white; }

/* ===== Keyframes ===== */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

#pregunta-1 .picto {
  background-image: url("images/aquaquiz/pregunta1.png"); }

#pregunta-2 .picto {
  background-image: url("images/aquaquiz/pregunta2.png"); }

#pregunta-3 .picto {
  background-image: url("images/aquaquiz/pregunta3.png"); }

#pregunta-4 .picto {
  background-image: url("images/aquaquiz/pregunta4.png"); }

#pregunta-6 .picto {
  background-image: url("images/aquaquiz/pregunta6.svg"); }

#pregunta-7 .picto {
  background-image: url("images/aquaquiz/pregunta7.png"); }

#pregunta-8 .picto {
  background-image: url("images/aquaquiz/pregunta8.svg"); }

#pregunta-9 .picto {
  background-image: url("images/aquaquiz/pregunta9.png"); }

#pregunta-10 .picto {
  background-image: url("images/aquaquiz/pregunta10.png"); }

#pregunta-6 .picto {
  background-position: center right; }

#pregunta-7 .enunciat ul {
  width: 40%; }

#pregunta-7 .sel {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row;
  width: 50px;
  margin-right: 24px;
  -webkit-transition: all 0.3 cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition: all 0.3 cubic-bezier(0.05, 1.04, 0.72, 0.98); }
  #pregunta-7 .sel:before {
    margin: 0 0 0 6px; }

#pregunta-7 .sel.active:before {
  margin-left: 12px; }

#pregunta-7 .text {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-flex: 1;
          flex: 1;
  width: auto;
  padding: 0; }

#pregunta-7 .picto {
  margin-top: 48px;
  background-position: top right; }

#pregunta-7 .sel__box {
  width: calc(100% + 12px); }

#pregunta-7 .sel__box__options {
  -webkit-box-pack: end;
          justify-content: flex-end;
  padding: 0 12px; }

#pregunta-7 .sel__placeholder {
  margin-right: 6px; }

.final {
  display: none;
  width: 100%;
  text-align: center;
  color: #3b3b3b; }
  .final.active {
    display: block; }
  .final .final__container {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    padding: 96px 48px;
    background: url("images/aquaquiz/final-bg_1.svg") no-repeat left top, url("images/aquaquiz/final-bg_2.svg") no-repeat right top; }
  .final .final__title {
    font-size: 50px;
    line-height: 1;
    font-weight: 900;
    color: #00235a;
    margin-bottom: 42px; }
  .final .final__text {
    font-weight: 300;
    font-size: 30px;
    color: #00235a;
    line-height: 1.2; }

@media (max-width: 1024px) {
  #quiz-title {
    margin-bottom: 48px; }
  .pregunta .enunciat p {
    width: 100%;
    margin-bottom: 24px;
    font-size: 24px; }
  .pregunta .enunciat li {
    margin-bottom: 16px; }
  .pregunta-test-container .picto {
    margin: 0;
    background-position: center; }
  .pregunta .resultat {
    margin-top: 48px; }
  .pregunta-options .enunciat ul {
    width: 100%;
    margin: 0; }
  #pregunta-7 .pregunta-test-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-flow: column-reverse; }
    #pregunta-7 .pregunta-test-container .picto {
      margin: 0 0 48px;
      height: 0;
      padding-top: 40%;
      background-position: center; }
    #pregunta-7 .pregunta-test-container ul {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 24px; }
      #pregunta-7 .pregunta-test-container ul li {
        margin: 0; }
  .final .final__container {
    background: url("images/aquaquiz/final-bg_1.svg") no-repeat left top/contain, url("images/aquaquiz/final-bg_2.svg") no-repeat right top/contain; }
  .final .final__title {
    font-size: 40px;
    margin-bottom: 42px; }
  .final .final__text {
    font-size: 24px; } }

@media (max-width: 767px) {
  .quiz-title {
    margin-bottom: 24px; }
  .quiz-next-question {
    position: static;
    -webkit-transform: none;
            transform: none;
    margin-top: 24px; }
  .pregunta .num {
    font-size: 72px; }
  .pregunta .enunciat p {
    font-size: 21px; }
  .pregunta .enunciat ul {
    margin: 0;
    width: 100%; }
  .quiz-container {
    padding: 28px 0 0; }
  .pregunta .enunciat .picto {
    display: none; }
  .pregunta .resultat {
    margin-top: 24px; }
  .pregunta-options .enunciat li {
    padding: 0;
    border: none;
    margin-bottom: 24px;
    line-height: 1.1; }
  .pregunta-options .enunciat li.correct {
    background: transparent;
    color: #85bb9a;
    font-weight: 600; }
    .pregunta-options .enunciat li.correct .sel:before {
      border-color: #85bb9a transparent transparent transparent; }
    .pregunta-options .enunciat li.correct .sel__placeholder {
      color: #85bb9a; }
  .pregunta-options .wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
    -webkit-box-align: start;
            align-items: flex-start;
    width: 100%; }
    .pregunta-options .wrap .text {
      width: 100%;
      padding: 0;
      margin-bottom: 12px; }
    .pregunta-options .wrap .sel {
      width: 100%;
      min-height: 24px; }
    .pregunta-options .wrap .sel__box__options {
      height: 32px;
      font-size: 16px; }
  #pregunta-7 .pregunta-test-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-flow: column-reverse; }
    #pregunta-7 .pregunta-test-container .picto {
      display: block;
      margin-bottom: 24px;
      padding-top: 60%;
      background-position: top left;
      background-size: cover; }
    #pregunta-7 .pregunta-test-container ul {
      /*grid-template-columns: 1fr;*/
      grid-gap: 24px; }
      #pregunta-7 .pregunta-test-container ul li {
        border-bottom: 1px solid;
        border-radius: 0; }
    #pregunta-7 .pregunta-test-container .sel {
      border-bottom: none; }
  .final .final__container {
    padding: 48px 0;
    background: url("images/aquaquiz/final-bg_1.svg") no-repeat center/contain; }
  .final .final__title {
    font-size: 32px;
    margin: 0;
    margin-bottom: 24px; }
  .final .final__text {
    font-size: 18px;
    margin-bottom: 0; } }

@media (max-width: 550px) {
  #pregunta-7 .pregunta-test-container ul {
    grid-template-columns: 1fr; } }

.municipis-blaus svg {
  display: block; }

.municipis-blaus .comarca {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  cursor: pointer;
  fill: #fdedc6;
  opacity: 0;
  -webkit-transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98); }

.municipis-blaus .comarca path {
  fill: #fdedc6;
  -webkit-transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98); }

.municipis-blaus .comarca:hover {
  fill: #64aae1;
  opacity: 1; }

.municipis-blaus .comarca:hover path {
  fill: #64aae1; }

.municipis-blaus .comarca.active {
  fill: #9fb2db;
  cursor: default;
  opacity: .25; }

.municipis-blaus .comarca.active path {
  fill: #9fb2db; }

.municipis-blaus .ampliada {
  -webkit-transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
  opacity: 0;
  visibility: hidden; }

.municipis-blaus .ampliada.active {
  opacity: 1;
  visibility: visible; }

.municipis-blaus .punt {
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition: all 300ms cubic-bezier(0.05, 1.04, 0.72, 0.98); }

.municipis-blaus .punt:hover {
  fill: #f7ebc5; }

.municipis-blaus .tooltip {
  background: #e3ebf5;
  font-size: 23px;
  color: #002E6D;
  padding: 3px 15px;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }

.map-platges .tooltip {
  background: #1CACE4;
  color: #fff;
  min-width: 250px;
  padding: 20px 12px; }

.map-platges .tooltip h3 {
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0; }

.map-platges .tooltip h4 {
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  margin: 0; }

.map-platges .tooltip p {
  font-size: 16px;
  font-weight: 900;
  margin: 0; }

.owl-carousel:not(.owl-loaded) {
  opacity: 0; }

.slick-disabled,
.owl-carousel .owl-nav .disabled {
  opacity: 0 !important; }

/* AÑADIDO MANUAL */
body {
  width: 100%;
  overflow-x: hidden; }

.eoa {
  --cyan: rgb(33,172,227);
  --blue: rgb(0,46,109);
  --purplelight: rgb(160,179,220);
  --pink: rgb(238,174,174); }

.eoa__header {
  display: -webkit-box;
  display: flex;
  width: 100vw;
  margin: 0 calc(-50vw + 50%);
  background: #e0e8f2; }

.eoa__tabs {
  width: 100%;
  max-width: 1366px;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  padding: 48px 16px; }

.eoa__tab {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 0 0 16px;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: inherit;
  text-align: left; }

.eoa__tab br {
  display: none; }

.eoa__tab.active,
.eoa__tab:hover {
  font-weight: 700;
  color: var(--cyan); }

.eoa__tab:after {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background: url("/wp-content/uploads/exposicio-operacio-aigua/keyboard_arrow_right.svg") no-repeat center right;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out; }

.eoa__tab.active:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }

.eoa__panel {
  display: none;
  width: 100vw;
  margin: 0 calc(-50vw + 50%); }

.eoa__panel.active {
  display: block; }

@media (min-width: 1024px) {
  .eoa__header {
    height: 257px; }
  .eoa__tabs {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    z-index: 1;
    justify-self: center;
    width: 100%;
    max-width: 1366px;
    padding: 0 72px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    -webkit-box-align: end;
            align-items: end; }
  .eoa__tab {
    justify-self: center;
    display: block;
    width: auto;
    height: auto;
    line-height: 1;
    padding: 0;
    border: none;
    text-align: center;
    margin-bottom: 52px; }
  .eoa__tab:after {
    content: "";
    display: none;
    position: absolute;
    width: auto;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
    background: url("/wp-content/uploads/exposicio-operacio-aigua/stroke-repeat-cyan.svg") repeat-x;
    background-size: contain;
    -webkit-transition: none;
    transition: none; }
  .eoa__tab.active:after,
  .eoa__tab:hover:after {
    display: block;
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  .eoa__tab br {
    display: block; }
  .eoa__panel {
    grid-column: 1 / 2; } }

/* Contenidos de artículos */
.eoa__panel-contents {
  width: 100%;
  max-width: calc(1184px + 48px);
  margin: 0 auto;
  padding: 48px 16px 0; }
  @media (min-width: 768px) {
    .eoa__panel-contents {
      padding: 48px 24px 0; } }
  @media (min-width: 1024px) {
    .eoa__panel-contents {
      padding: 96px 48px 0; } }
  @media (min-width: 1234px) {
    .eoa__panel-contents {
      max-width: 1184px;
      padding: 96px 0 0; } }

.eoa__title {
  -webkit-box-flex: 1;
          flex: 1 0 auto;
  font-size: 38px;
  font-weight: 900;
  color: white;
  text-align: center; }

.eoa__title span {
  display: inline-block;
  width: auto;
  padding: 6px;
  background: #21ace3; }

.eoa__title br + span {
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
  padding-top: 0; }

.eoa__excerpt {
  max-width: 768px;
  margin: 0 auto 48px;
  font-weight: 700;
  font-size: 18px;
  color: #21ace3;
  text-align: center; }

@media (min-width: 1024px) {
  .eoa__panel-header {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between; }
  .eoa__title {
    font-size: 72px;
    margin-bottom: 120px;
    text-align: left; }
  .eoa__excerpt {
    -webkit-box-flex: 0;
            flex: 0 0 auto;
    width: 545px;
    margin-left: 48px;
    margin-bottom: 0;
    font-size: 24px;
    text-align: left; } }

/* Secciones internas de cada panel */
.eoa__section + .eoa__section {
  margin-top: 72px; }

.eoa__section-title {
  font-size: 28px;
  font-weight: 900;
  color: white;
  text-align: center; }

.eoa__section-title span {
  background: #21ace3;
  padding: 0 6px; }

@media (min-width: 1024px) {
  .eoa__section + .eoa__section {
    margin-top: 120px; }
  .eoa__section-title {
    font-size: 42px;
    text-align: left; } }

.aigua-per-tothom {
  background: url("/wp-content/uploads/exposicio-operacio-aigua/tta-shadow.svg") no-repeat left top/cover; }

/* Cubo 1 Sección 1: pie-chart */
.pie-chart {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  color: var(--blue); }

.pie-chart__graph {
  position: relative;
  display: grid;
  -webkit-box-align: center;
          align-items: center;
  justify-items: center;
  margin: 48px 0; }

.eoa .pie-chart__img,
.pie-chart__graph p {
  z-index: 0;
  grid-column: 1 / 2;
  grid-row: 1 / 2; }

.eoa .pie-chart__img {
  max-width: 360px; }

.pie-chart__graph p {
  z-index: 1;
  margin: 0;
  padding: 32px 0; }

.pie-chart__large {
  display: block;
  font-size: 48px; }

.pie-chart__medium {
  display: block;
  font-size: 28px;
  line-height: 1.5;
  color: white; }

.pie-chart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.1; }

.pie-chart__list li:nth-of-type(even) {
  color: #a0b3dc; }

.pie-chart__list small {
  font-size: 14px; }

@media (min-width: 1024px) {
  .pie-chart {
    font-size: 24px; }
  .pie-chart__large {
    font-size: 72px; }
  .pie-chart__medium {
    font-size: 48px; }
  .eoa .pie-chart__img {
    max-width: 520px; }
  .pie-chart__list {
    font-size: 24px; }
  .pie-chart__list small {
    font-size: 18px; } }

/* Cubo 1 Sección 2: tots-tenim-aigua */
.tta {
  list-style: none;
  margin: 0;
  padding: 48px 0;
  display: grid;
  grid-gap: 24px;
  justify-items: center; }

.tta li {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column;
  -webkit-box-align: center;
          align-items: center;
  padding: 30px 0;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--purplelight);
  text-align: center;
  background-image: url("/wp-content/uploads/exposicio-operacio-aigua/drop-blue.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 88px; }

.tta li:nth-of-type(even) {
  color: var(--blue);
  background-image: url("/wp-content/uploads/exposicio-operacio-aigua/drop-purplelight.svg"); }

.tta li:nth-of-type(3) {
  color: var(--blue);
  background-image: url("/wp-content/uploads/exposicio-operacio-aigua/drop-purplelight.svg"); }

.tta li:nth-of-type(4) {
  color: var(--purplelight);
  background-image: url("/wp-content/uploads/exposicio-operacio-aigua/drop-blue.svg"); }

.tta__large {
  font-size: 21px; }

.tta__extra {
  font-size: 28px; }

.tta__bg {
  background: var(--pink);
  color: white; }

.tta li:nth-of-type(even) .tta__bg {
  color: var(--blue); }

.tta li:nth-of-type(3) .tta__bg {
  color: var(--blue); }

.tta li:nth-of-type(4) .tta__bg {
  color: white; }

@media (min-width: 600px) {
  .tta {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px; } }

@media (min-width: 1024px) {
  .tta {
    padding: 96px 0;
    grid-gap: 120px 108px;
    justify-items: start; }
  .tta li {
    -webkit-box-align: start;
            align-items: flex-start;
    max-width: 475px;
    -webkit-transform: translateX(84px);
            transform: translateX(84px);
    font-size: 26px;
    text-align: left;
    background-size: 136px; }
  .tta li:nth-of-type(3),
  .tta li:nth-of-type(5) {
    max-width: 560px; }
  .tta li:nth-of-type(3),
  .tta li:nth-of-type(4) {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  .tta li:nth-of-type(3) {
    background-position-x: 128px; }
  .tta li:nth-of-type(4) {
    background-position-x: 28px; }
  .tta__large {
    font-size: 38px; }
  .tta__extra {
    font-size: 52px; } }

/* Quanta aigua consumeixes  */
.qac__image-container img {
  margin-top: 48px; }

@media (min-width: 1024px) {
  .qac__image-container img {
    margin-top: 72px; }
  .qac__image-container img:first-of-type {
    margin-top: -48px; } }

.qac__fullpage {
  width: 100vw;
  margin: 0 calc(-50vw + 50%);
  background: url("/wp-content/uploads/exposicio-operacio-aigua/cubo-2-fondo.png") no-repeat center top/cover; }

.qac__grid {
  width: 100%;
  max-width: 900px;
  margin: -105px auto 0;
  padding: 225px 0 120px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 24px; }

.qac__grid-item {
  display: block;
  text-align: center; }

.qac__grid-image {
  width: 100%;
  max-width: 132px;
  margin: 0 auto; }

.qac__grid-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%; }

.qac__grid-texts {
  font-size: 21px;
  color: var(--blue);
  line-height: 1.2;
  font-weight: 700; }

.qac__grid-texts p {
  margin-bottom: 0; }

.qac__grid-texts span {
  display: block; }

.qac__large-text {
  font-size: 32px;
  color: var(--purplelight); }

@media (min-width: 600px) {
  .qac__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 48px; } }

@media (min-width: 768px) {
  .qac__grid-item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    text-align: left; }
  .qac__grid-image {
    margin: 0 16px 0 0; } }

@media (min-width: 1024px) {
  .qac__grid-texts {
    font-size: 30px; }
  .qac__large-text {
    font-size: 52px; } }

/* CUBO 3: COM S'EMBRUTA L'AIGUA */
.cea__fullsize {
  width: 100vw;
  margin: 0 calc(-50vw + 50%) 0;
  padding-top: 60px;
  background: url("/wp-content/uploads/exposicio-operacio-aigua/cubo-3-fondo.png") no-repeat; }

.cea__image-container img {
  display: block; }

@media (min-width: 1024px) {
  .cea__fullsize {
    margin: -220px calc(-50vw + 50%) 0; } }

/* CUBO 4: Com contaminem l'aigua */
.use {
  width: 100%;
  max-width: 980px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 48px; }

.use__graph {
  max-width: 320px;
  margin: 0 auto; }

.use__list {
  list-style: none;
  padding: 0;
  margin: 0; }

.use__list li {
  font-weight: 900;
  text-align: center;
  line-height: .9;
  margin-bottom: 16px; }

.use__list li:last-of-type {
  margin-bottom: 0; }

.use__list span:nth-of-type(2) {
  display: block;
  font-size: 2em; }

.use__list li:nth-of-type(1) {
  font-size: 42px;
  color: #f6bfbf; }

.use__list li:nth-of-type(2) {
  font-size: 28px;
  color: #436795; }

.use__list li:nth-of-type(3) {
  font-size: 24px;
  color: #FFECA2; }

.use__list li:nth-of-type(4) {
  font-size: 20px;
  color: #CCE2BC; }

@media (min-width: 600px) {
  .use {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 48px;
    -webkit-box-align: center;
            align-items: center; }
  .use__graph {
    margin: 0; } }

@media (min-width: 1024px) {
  .use {
    width: 100%;
    max-width: 980px;
    margin: -120px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 48px;
    -webkit-box-align: end;
            align-items: end; }
  .use__graph {
    max-width: 424px; }
  .use__list li:nth-of-type(1) {
    font-size: 85px; }
  .use__list li:nth-of-type(2) {
    font-size: 57px; }
  .use__list li:nth-of-type(3) {
    font-size: 48px; }
  .use__list li:nth-of-type(4) {
    font-size: 39px; } }

.cps__container {
  width: 100vw;
  margin: 96px calc(-50vw + 50%) 0;
  background: url("/wp-content/uploads/exposicio-operacio-aigua/cubo-4-fondo.png") no-repeat center top/cover;
  padding-bottom: 72px; }

.cps {
  width: 100%;
  max-width: calc(1110px + 32px);
  list-style: none;
  padding: 0 16px;
  margin: 0 auto; }

.cps__item {
  display: grid;
  grid-gap: 24px;
  margin-bottom: 48px; }

.cps__item:nth-of-type(1) .cps__image-container {
  grid-row: 1 / 2; }

.cps__item:nth-of-type(1) .cps__image {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  -webkit-transform: translateY(-15%);
          transform: translateY(-15%); }

.cps__item:nth-of-type(1) .cps__texts {
  color: var(--purplelight); }

.cps__item:nth-of-type(2) .cps__texts {
  color: var(--blue); }

.cps__item:nth-of-type(3) .cps__texts {
  color: #86BC9B; }

.cps__item:nth-of-type(4) .cps__texts {
  color: var(--purplelight); }

.cps__texts {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2; }

.cps__title {
  font-style: normal;
  font-size: 38px;
  font-weight: 900; }

.cps__title br {
  display: none; }

@media (min-width: 768px) {
  .cps__item {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 100px;
    margin-bottom: 120px; }
  .cps__texts,
  .cps__image-container {
    align-self: center; }
  .cps__item:nth-of-type(1) .cps__image-container {
    grid-row: auto; }
  .cps__item:nth-of-type(even) .cps__image-container {
    grid-column: 1 / 2;
    grid-row: 1 / 2; }
  .cps__item:nth-of-type(1) .cps__image {
    max-width: 280px;
    -webkit-transform: translateY(-24%);
            transform: translateY(-24%); } }

@media (min-width: 1024px) {
  .cps__container {
    padding-bottom: 120px; }
  .cps__title br {
    display: block; }
  .cps__item:nth-of-type(1) .cps__image {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%); } }

            .custom-menu-class {
  z-index: 90000;
  position: relative;
  position: absolute;
  top: 24px;
  right: 24px;
}

.custom-menu-class ul {
  display: flex;

}

.custom-menu-class li {
  list-style-type: none;
}

.custom-menu-class li:last-child::before {
  content: "\00a6";
  margin: 0 12px;
  color: rgba(0, 0, 0, 0.2);
}

.custom-menu-class li a, .custom-menu-class li a:visited  {
  color: #003478;
}