/* lora-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url("../static/fonts/lora-v35-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

/* lora-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/lora-v35-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

/* lora-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/lora-v35-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

/* lora-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/lora-v35-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

/* lora-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/lora-v35-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

/* lora-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/lora-v35-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

/* lora-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/lora-v35-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

/* lora-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/lora-v35-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

/* dm-sans-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/dm-sans-v15-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

body {
  font-family: 'Lora';
  width: 100%; }

html {
  scroll-behavior: smooth; }

h2 {
  font-family: 'DM Sans'; }

p {
  font-family: 'DM Sans'; }

.logo img {
  height: 50px; }

section#slide-home h1 {
  font-size: 152px;
  color: white;
  line-height: 1; }

.btn-outline {
  border: 2px solid #B4E9C4;
  padding: 15px 40px;
  border-radius: 40px;
  color: #B4E9C4;
  font-family: 'DM Sans'; }

.fons-gris {
  background-color: #EAEAEA; }

.fons-blau {
  background-color: #18418F; }

.blau-aljub {
  color: #18418F; }

.numeros {
  background: #B4E9C4;
  font-size: 47px;
  font-family: 'Lora';
  color: #18418F;
  width: 68px;
  height: 68px;
  border-radius: 444px;
  display: flex;
  justify-content: center;
  align-content: center; }

#coneix-nos {
  background-color: #EAEAEA;
  margin-top: -45px;
  position: relative; }

#coneix-nos strong {
  color: #B4E9C4; }

p.text-shadow {
  text-shadow: 3px 1px 4px #383838; }

img.bubbles-fons {
  position: absolute;
  width: 100vw;
  z-index: 1;
  margin-top: -55px; }

button:hover {
  background: #B4E9C4;
  color: #18418F;
  transition: 0.3s;
  cursor: pointer; }

@media (max-width: 640px) {
  section#slide-home h1 {
    font-size: 55px; }
  #coneix-nos {
    background: linear-gradient(179deg, #eaeaea 0%, #eaeaea 10%, #18418f 20%, #18418f 100%); } }

/* bubbles */
.lamp {
  position: absolute;
  top: -20%;
  left: 60%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: 100%;
  min-width: 100vw;
  z-index: -1; }

.lamp-dos {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: 100%;
  min-width: 100vw;
  z-index: -1; }

.lamp-tres {
  position: absolute;
  bottom: 10%;
  left: 10%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  min-width: 100vw;
  z-index: 2; }

button {
  font-family: 'DM Sans'; }

.lava {
  filter: url("#goo");
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0; }

.blob {
  border-radius: 50%;
  background: #2E71CE;
  position: absolute; }

.blob:nth-child(1) {
  width: 400px;
  height: 400px;
  left: 73%;
  bottom: 25%;
  animation: wobble 43s ease-in-out alternate infinite, blob-one ease-in-out 22s infinite; }

.blob:nth-child(2) {
  width: 350px;
  height: 350px;
  right: 28%;
  bottom: -50%;
  animation: wobble 43s ease-in-out alternate infinite, blob-two ease-in-out 22s infinite; }

.blob:nth-child(3) {
  width: 350px;
  height: 350px;
  bottom: 35%;
  left: 54%;
  animation: wobble 43s ease-in-out alternate infinite, blob-three ease-in-out 22s infinite; }

.blob:nth-child(4) {
  width: 435px;
  height: 435px;
  bottom: -13%;
  left: 43%;
  animation: wobble 43s ease-in-out alternate infinite, blob-four ease-in-out 22s infinite; }

.blob:nth-child(5) {
  width: 255px;
  height: 255px;
  bottom: -25%;
  left: 39%;
  animation: wobble 43s ease-in-out alternate infinite, blob-five ease-in-out 22s infinite; }

.blob:nth-child(6) {
  width: 400px;
  height: 400px;
  bottom: -65%;
  right: 11%;
  animation: wobble 43s ease-in-out alternate infinite,  blob-six ease-in-out 22s infinite; }

.blob:nth-child(7) {
  width: 435px;
  height: 435px;
  bottom: -55%;
  right: -11%;
  animation: wobble 43s ease-in-out alternate infinite, blob-seven ease-in-out 22s infinite; }

@keyframes blob-one {
  0%, 100% {
    transform: translatey(0); }
  50% {
    transform: translatey(-200%); } }

@keyframes blob-two {
  0%, 100% {
    transform: translatey(0); }
  50% {
    transform: translatey(-220%); } }

@keyframes blob-three {
  0%, 100% {
    transform: translatey(0); }
  50% {
    transform: translatey(-105%); } }

@keyframes blob-four {
  0%, 100% {
    transform: translatey(0); }
  50% {
    transform: translatey(-205%); } }

@keyframes blob-five {
  0%, 100% {
    transform: translatey(0); }
  50% {
    transform: translatey(-100%); } }

@keyframes blob-six {
  0%, 100% {
    transform: translatey(0); }
  50% {
    transform: translatey(-200%); } }

@keyframes blob-seven {
  0%, 100% {
    transform: translatey(0); }
  50% {
    transform: translatey(-100%); } }

@keyframes wobble {
  50% {
    /* border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; */
    border-radius: 50%; }
  100% {
    /* border-radius: 38% 52% 75% 36% / 50% 40% 50% 60%; */
    border-radius: 50%; } }

header {
  background-color: #18418F;
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }
  header nav ul {
    display: flex;
    flex-direction: row;
    font-family: 'DM Sans';
    color: white;
    font-size: 1.5rem;
    gap: 2rem; }
  header li.selected {
    color: #B4E9C4; }
  header.home {
    background-color: transparent; }

main:not(.home) {
  padding: 5rem 0;
  box-sizing: content-box; }

main.qui-som {
  background-color: #B4E9C4;
  color: #18418F; }
  main.qui-som .content p {
    font-family: 'DM Sans';
    font-weight: 400;
    font-size: 37px;
    line-height: 110%;
    letter-spacing: -0.03em;
    max-width: 50%; }
  main.qui-som section {
    margin: 5rem 0;
    display: flex;
    flex-direction: row;
    gap: 5rem;
    /*
    &:nth-child(odd) {}
    */ }
    main.qui-som section a {
      font-family: 'Lora';
      font-style: normal;
      font-weight: 400;
      font-size: 63px;
      line-height: 100%;
      /* or 63px */
      text-decoration-line: underline; }
    main.qui-som section p {
      font-size: 23px;
      margin-top: 2rem; }
    main.qui-som section img {
      max-width: 300px;
      height: auto;
      align-self: center;
      /* flex-start; */ }
    main.qui-som section img.logo-coopdera {
      mix-blend-mode: darken; }
    main.qui-som section div {
      max-width: 40%; }
    main.qui-som section:nth-child(even) {
      flex-direction: row-reverse; }

main.acompanyem {
  background-color: #EAEAEA;
  color: #18418F; }
  main.acompanyem blockquote {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-size: 62px;
    line-height: 100%;
    width: 70%; }
  main.acompanyem li {
    margin-top: 10rem;
    margin-left: 10rem;
    position: relative;
    width: 55%;
    font-family: 'DM Sans';
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 34px; }
    main.acompanyem li::before {
      content: "";
      display: block;
      width: 100px;
      height: 100px;
      background-color: #B4E9C4;
      margin-bottom: 10px;
      border-radius: 50%;
      position: absolute;
      left: -125px; }
    main.acompanyem li strong {
      display: block;
      font-family: 'Lora';
      font-style: normal;
      font-weight: 600;
      font-size: 37px;
      line-height: 100%;
      margin-bottom: 2rem; }

main.acompanyem .btn-outline {
  color: #18418F;
  border-color: #18418F; }
  main.acompanyem .btn-outline:hover {
    background-color: #18418F;
    color: white; }

div.space.acompanyem {
  background-color: #D9D9D9;
  display: block;
  height: 15rem; }

@media screen and (max-width: 600px) {
  header nav ul {
    flex-direction: column; } }