/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

:root {
  scroll-behavior: unset;

  --primary: #435EBC;
  --primary-rgb: 67, 94, 188;

  --secondary: #ECC85B;
  --secondary-rgb: 236, 200, 91;

  --ternary: #D9D9D9;
  --ternary-rgb: 217, 217, 217;

  --black: #000;
  --black-rgb: 0, 0, 0;

  --white: #FFFFFF;
  --white-rgb: 255, 255, 255;

  --dark: #001638;
  --dark-rgb: 0, 22, 56;

  --light: #F3F3EA;
  --light-rgb: 243, 243, 234;

  --blue: #4E489B;
  --blue-rgb: 78, 72, 155;

  --gray-light: #E8E8E8;
  --gray-light-rgb: 232, 232, 23;

  --gray: #CBCBCB;
  --gray-rgb: 203, 203, 203;

  --gray-dark: #838383;
  --gray-dark-rgb: 131, 131, 131;

  --border-radius: .25rem;
  --box-shadow: 0 .5rem 1rem rgba(var(--primary-rgb), .15);

  --link-color:       var(--primary);
  --link-hover-color: var(--secondary);

  --bg-primary:  var(--primary);
  --bg-secondary:  var(--secondary);
  --bg-light:  var(--gray-light);
  --bg-dark:  var(--gray-dark);
  --bg-gray:  var(--gray);
  --bg-white:  var(--white);
  --bg-black:  var(--black);

  --nav-height:  65px;
  --bs-gutter-x: .75rem;
  --em-gutter-x: .75rem;

  --font-family-primary: "Dear Sir Madam", sans-serif;
  --font-family-secondary: "GT Walsheim Pro", monospace;

  --cursor-stroke: #6b5537;
  --cursor-fill: none;
  --cursor-stroke-width: 1px;
  --cursor-text: var(--dark);
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}


html {
  color: var(--primary);
  background: var(--white);
  font-size: 1em;
  line-height: 1.4;
  font-family: var(--font-family-primary);
  font-weight: normal;
  font-style: normal;
  /* Smoothing */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;

  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  width: 100%;
}


body {
  position: relative;
  background: var(--white);
  height: 100%;
  overflow: hidden;
  margin: 0;
  /* Allows you to scroll below the viewport; default value is visible */
  overflow-y: scroll;

  /* To smooth any scrolling behavior */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;

  width: 100%;
}


html, body, main, .ip-main {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

p {
  font-size: 14px;
  font-family: var(--font-family-primary);
  color: var(--primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-primary);
  color: var(--primary);
  font-weight: normal;
  font-style: normal;
  line-height: 1.1em;
  -ms-word-wrap: break-word;
  word-wrap: break-word
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 58px;
}

h3 {
  font-size: 40px;
}

h4 {
  font-size: 32px;
}

h5 {
  font-size: 19px;
}

h6 {
  font-size: 16px;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a
{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}


a {
  font-family: var(--font-family-primary);
  color: var(--link-color);
  text-decoration: none;
  -webkit-transition: color .25s ease;
  -o-transition: color .25s ease;
  transition: color .25s ease
}

a:hover {
  color: var(--link-hover-color);
}

a,
a div,
a span,
button,
button div,
button span,
input,
textarea,
.touch-action {
  -ms-touch-action: manipulation;
  touch-action: manipulation; /*disable the delay of click events caused by support for the double-tap to zoom gesture. */
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input[type="checkbox"],
input[type="radio"] {
  padding: 0;
  box-sizing: border-box;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  height: auto;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*Force Hand Cursor over Clickable Items*/
a[href],
input[type="submit"],
input[type="image"],
label[for],
select,
button,
.pointer,
.clickable,
.tappable {
  cursor: pointer;
}

/* ==========================================================================
   Author's custom styles
========================================================================== */
.cv-auto {
  content-visibility: auto;
}

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

/*stop interaction with the page when page is loading*/
/*or when the search is open*/
body.is-loading,
body.is-loading * {
  pointer-events: none !important;
}

/* PRELOADER */
.ip-header {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1031;
  min-height: 460px;
  width: 100%;
  height: 100%;
  background: var(--white);
}

body.dark .ip-header {
  background-color: var(--dark);
}

.ip-logo,
.ip-loader {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

.ip-logo {
  top: 0;
  height: 100%;
  -webkit-transform: translate3d(0,25%,0);
  transform: translate3d(0,25%,0);
}

.logo-title {
  color: var(--dark);
  font-family: var(--font-family-primary);
}
body.dark .logo-title {
  color: var(--white);
}

.ip-loader {
  bottom: 20%;
}

.ip-header .ip-inner {
  display: block;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
}

.ip-header .ip-loader svg path {
  fill: none;
  stroke-width: 6px;
}

.ip-header .ip-loader svg path.ip-loader-circlebg {
  stroke: #ddd;
}
body.dark  .ip-header .ip-loader svg path.ip-loader-circlebg {
  stroke: #737373;
}

.ip-header .ip-loader svg path.ip-loader-circle {
  -webkit-transition: stroke-dashoffset 0.2s;
  transition: stroke-dashoffset 0.2s;
  stroke: var(--dark);
}

body.dark .ip-header .ip-loader svg path.ip-loader-circle {
  stroke: var(--white);
}

.ip-container {
  position: relative;
  background: var(--white);
  z-index: 1;
}

body.dark .ip-container {
  /*background: var(--dark);*/
  background: var(--black);
}

/* Content */
.ip-main {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  opacity: 1;
  background: var(--light);
  z-index: 1;
}

/* Animations */

/* Initial animation of header elements */
.loading .ip-logo,
.loading .ip-loader {
  opacity: 1;
}

.loading .ip-logo {
  /*  -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;*/
  -webkit-animation: animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;
  animation: animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;
}

@-webkit-keyframes animInitialLogo {
  from { opacity: 0; }
}

@keyframes animInitialLogo {
  from { opacity: 0; }
}

.loading .ip-loader {
  -webkit-animation: animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
  animation: animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
}

@-webkit-keyframes animInitialLoader {
  from { opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); }
}

@keyframes animInitialLoader {
  from { opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); }
}

/* Header elements when loading finishes */
.loaded .ip-logo,
.loaded .ip-loader {
  opacity: 1;
}

.loaded .ip-logo {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
  animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLogo {
  to { opacity: 0; -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}

@keyframes animLoadedLogo {
  to { opacity: 0; -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}

.loaded .ip-loader {
  -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
  animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
  to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
  to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

/* Change the color of the logo */
.loaded .ip-logo svg path {
  -webkit-transition: all 0.5s ease 0.3s;
  transition: all 0.5s ease 0.3s;
  fill: #fff;
}

/* Header animation when loading finishes */
.loaded .ip-header {
  -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
  animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
  to { -webkit-transform: translate3d(0,-100%,0); }
}

@keyframes animLoadedHeader {
  to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}

/* Content animations */
/*This is only if there is a preloader*/
.loaded .ip-main {
  -webkit-animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
  animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
}

@-webkit-keyframes animLoadedContent {
  from { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); }
}

@keyframes animLoadedContent {
  from { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); transform: scale3d(0.3,0.3,1); }
}


/*Helpers*/
.accelerate {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.no-event {
  pointer-events: none;
}


figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

.p-0 {
  padding: 0!important;
}
.m-0 {
  margin: 0!important;
}
.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: .875em;
  color: var(--dark);
}

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

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

/* cursor custom*/
.cursor {
  display: none;
}

@media (any-pointer: fine) {
  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    pointer-events: none;
    z-index: 9999;
  }
  .cursor__inner {
    fill: var(--cursor-fill);
    stroke: var(--cursor-stroke);
    stroke-width: var(--cursor-stroke-width);
  }

  .cursor__text {
    font-family: var(--font-family-secondary);
    position: fixed;
    top: 1.875rem;
    left: 80px;
    font-size: 19px;
    line-height: 1;
    /*text-transform: uppercase;*/
    font-weight: 500;
    fill: var(--cursor-text);
  }
}
/*End Helpers*/



/*Author styles*/

/*Custom scrollbar*/
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) #fff;
}

*::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-track {
  border-radius: 16px;
  background: rgba(var(--black-rgb), 0.25);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 16px;
  /*border: 2px solid var(--black);*/
}



.ip-main {
  background-color: var(--light);
  transition: background 500ms;
}

.logo {
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 75px;
  height: 69px;
  z-index: 1;
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.intro {
  text-align: center;
}

.content__title {
  font-weight: normal;
  font-size: 1rem;
  font-size: clamp(1rem, 8vw, 2rem);
  margin: 0;
  line-height: 1;
  position: relative;
  color: var(--black);
  text-transform: uppercase;
  text-align: center;
  transition: color 500ms;
}

.content__title-sub {
  font-weight: 500;
  font-family: var(--font-family-secondary);
}

.light-switch {
  font-family: var(--font-family-secondary);
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--primary);
  position: relative;
  z-index: 1;
  transition: color 0.3s ease-out;
}

/*body.dark .light-switch {*/
/*  color: var(--light);*/
/*}*/

.light-switch .active {
  color: var(--secondary);
}


/*START - Swiper*/
.swiper-clients {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 220px;
}

.swiper-clients .swiper-wrapper {
  align-content: stretch;
  align-items: center;
}

.swiper-clients .swiper-slide {
  background-color: transparent;
  text-align: center;
  width: auto;
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.swiper-clients .swiper-img {
  display: block;
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.swiper-clients .swiper-button-next,
.swiper-clients .swiper-button-prev {
  color: #001638;
}

.swiper-clients  .swiper-button-prev,
.swiper-clients .swiper-rtl .swiper-button-next {
  left: 0;
}

.swiper-clients  .swiper-button-next,
.swiper-clients .swiper-rtl .swiper-button-prev {
  right: 0;
}

@media (min-width: 576px) {
  .swiper-clients {
    height: 300px;
  }
}

@media (min-width: 768px) {
  .swiper-clients {
    height: 360px;
  }
}
@media (min-width: 992px) {
  .swiper-clients  {
    height: 400px;
  }
}
@media (min-width: 1200px) {
  .swiper-clients {
    height: 420px;
  }
}
@media (min-width: 1400px) {
  .swiper-clients {
    height: 420px;
  }

  .accordion-slider {
    height: 550px;
  }
}

/*END - Swiper*/

/* the grid */
.grid {
  position: absolute;
  width: 104%;
  height: 104%;
  top: -2%;
  left: -2%;
  display: grid;
  grid-template-columns: repeat(100, 1%);
  grid-template-rows: repeat(100, 1%);
  perspective: 1000px
}

.grid--inactive {
  pointer-events: none
}

.grid__item {
  --grid-height: 12;
  --grid-width: 5;
  /*this means this item will start on row x and colum Y and span for 12 rows and 5 columns*/
  grid-area: var(--grid-row)/var(--grid-column)/span var(--grid-height)/span var(--grid-width);
}


.grid__item,
.grid__item-img {
  transform: translateZ(0);
  position: relative;
  will-change: transform;
}

@keyframes floating {
  0% { transform: translate(0,  0); }
  50%  { transform: translate(0, 13px); }
  100%   { transform: translate(0, 0); }
}

@keyframes floating-inverse {
  0% { transform: translate(0,  0); }
  50%  { transform: translate(0, -13px); }
  100%   { transform: translate(0, 0); }
}

.layer {
  /*animation: floating 6s cubic-bezier(0.45, 0.25, 0.60, 0.95) 0.3s infinite alternate;*/
  animation-name: floating;
  animation-duration: 6s;
  animation-delay: 0.3s;
  /*animation-direction: alternate;*/
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.layer:nth-child(even) {
  animation-name: floating;
}

.layer:nth-child(odd) {
  animation-name: floating-inverse;
}

.grid__item-img {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.char {
  will-change: transform
}

/*START each layer individual*/

/*.layer-info*/
.pos-1 {
  --grid-row: 10;
  --grid-column: 4;
  --grid-height: 7;
  --grid-width: 14;
  animation-delay: .1s;
}
/*.layer-bio*/
.pos-2 {
  --grid-row: 35;
  --grid-column: 4;
  --grid-height: 6;
  --grid-width: 13;
  animation-delay: .6s;
}
/*.layer-pavilion*/
.pos-3 {
  --grid-row: 90;
  --grid-column: 1;
  --grid-height: 6;
  --grid-width: 72;
  animation-delay: .2s;
}
/*.layer-booklet*/
.pos-4 {
  --grid-row: 80;
  --grid-column: 10;
  --grid-width: 20;
  --grid-height: 5;
  animation-delay: .7s;
}
/*.layer-editorial*/
.pos-5 {
  --grid-row: 5;
  --grid-column: 22;
  --grid-height: 7;
  --grid-width: 15;
  animation-delay: .5s;
}
/*.layer-films*/
.pos-6 {
  --grid-row: 20;
  --grid-column: 26;
  --grid-height: 22;
  --grid-width: 20;
  animation-delay: .1s;
}
/*.layer-model*/
.pos-7 {
  --grid-row: 58;
  --grid-column: 5;
  --grid-height: 9;
  --grid-width: 40;
  animation-delay: .4s;
}
/*.layer-rectangle_gray*/
.pos-8 {
  --grid-row: 25;
  --grid-column: 9;
  --grid-height: 2;
  --grid-width: 12;
  animation-delay: .3s;
}
/*.layer-rectangle_blue*/
.pos-9 {
  --grid-row: 29;
  --grid-column: 45;
  --grid-height: 2;
  --grid-width: 8;
  animation-delay: .5s;
}
/*.layer-fluid_shape*/
.pos-10 {
  --grid-row: 71;
  --grid-column: 1;
  --grid-height: 10;
  --grid-width: 40;
  animation-delay: .9s;
}
/*.layer-rectangle_blue_vertical*/
.pos-11 {
  --grid-row: 57;
  --grid-column: 52;
  --grid-width: 3;
  --grid-height: 4;
  animation-delay: .2s;
}
/*.layer-leaf_gray*/
.pos-12 {
  --grid-row: 19;
  --grid-column: 52;
  --grid-height: 5;
  --grid-width: 12;
  animation-delay: .3s;
}
/*.layer-circle_blue*/
.pos-13 {
  --grid-row: 64;
  --grid-column: 60;
  --grid-width: 10;
  --grid-height: 5;
  animation-delay: 1s;
}
/*.layer-observations*/
.pos-14 {
  --grid-row: 79;
  --grid-column: 50;
  --grid-width: 40;
  --grid-height: 10;
  animation-delay: .2s;
}
/*.layer-occupancy*/
.pos-15 {
  --grid-row: 70;
  --grid-column: 33;
  --grid-width: 68;
  --grid-height: 7;
  margin-right: -20% !important;
  /*transform: translateX(20%);*/
  animation-delay: .6s;
}
/*.layer-events*/
.pos-16 {
  --grid-row: 56;
  --grid-column: 75;
  --grid-width: 15;
  --grid-height: 8;
  animation-delay: .4s;
}
/*.layer-process*/
.pos-17 {
  --grid-row: 10;
  --grid-column: 63;
  --grid-width: 38;
  --grid-height: 14;
  animation-delay: .1s;
  margin-right: -20% !important;
  /*transform: translateX(20%);*/
}
/*.layer-rectangle_blue_tilt*/
.pos-18 {
  --grid-row: 45;
  --grid-column: -10;
  --grid-width: 10;
  --grid-height: 5;
  animation-delay: .8s;
}
/*.layer-drawings*/
.pos-19 {
  --grid-row: 27;
  --grid-column: 58;
  --grid-width: 32;
  --grid-height: 11;
  animation-delay: .2s;
}
/*.layer-drawings_element*/
.pos-20 {
  --grid-row: 25;
  --grid-column: 52;
  --grid-width: 40;
  --grid-height: 20;
  animation-delay: .2s;
}
/*END each layer individual*/


.layer img {
  object-fit: contain;
  width: 100%;
  height: 100%;

  opacity: 1;
  visibility: visible;

  -webkit-transition: visibility 0.35s, opacity 0.3s;
  transition: visibility 0.35s, opacity 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.layer img.dark {
  position: absolute;
  top: 0;
  left: 0;

  opacity: 0;
  visibility: hidden;
}

.layer .layer-caption {
  font-weight: 500;
  font-size: 19px;
  line-height: 23px;
  color: var(--dark);
  position: absolute;
  top: 50%;
  margin-top: -12px;
  text-align: center;
  width: 100%;
}

.layer .layer-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
  opacity: 0;
  z-index: 1;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
}

.modal {
  --modal-bg: #DF9046;
  --modal-text: var(--dark);

  --bs-modal-zindex: 1055;
  --bs-modal-width: 982px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: var(--modal-text);
  --bs-modal-bg: var(--modal-bg);
  --bs-modal-border-color: transparent;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: 0;
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-modal-inner-border-radius: 0;
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: transparent;
  --bs-modal-header-border-width: 0;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: var(--modal-bg);
  --bs-modal-footer-border-color: transparent;
  --bs-modal-footer-border-width: 0;
  pointer-events: none;
}

.modal-body {
  padding: 1rem;
}

.modal-data {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.modal-loader {
  margin: 0 auto;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #ffffff42;
  --bs-backdrop-opacity: 0.01;
}

/*@media (min-width: 992px) {*/
/*  .modal-lg,*/
/*  .modal-xl {*/
/*    --bs-modal-width: 982px;*/
/*  }*/
/*}*/

.modal-data p,
.modal-data a {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  font-family: var(--font-family-secondary);
  color: var(--dark);
}

.modal-data a:hover {
  color: var(--primary);
}

.modal-data p {
  display: block;
}

.modal-data h3,
.accordion-button {
  display: block;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  font-family: var(--font-family-secondary);
  color: var(--dark);
}

.accordion-button {
  text-align: center;
}

.accordion {
  --bs-accordion-color: var(--dark);
  --bs-accordion-bg: transparent;
  --bs-accordion-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
  --bs-accordion-border-color: var(--black);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-accordion-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: none;
  --bs-accordion-btn-focus-border-color: #86b7fe;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 2rem;
  --bs-accordion-active-color: var(--black);
  --bs-accordion-active-bg: transparent;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  max-width: 910px;
  margin: 0 auto;
  width: 100%;
}

.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}


@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
  .modal-data h3,
  .accordion-button {
    font-size: 40px;
    line-height: 48px;
  }

  .modal-data p,
  .modal-data a {
    font-size: 25px;
    line-height: 30px;
  }

  .modal-body {
    padding: 2rem 65px 65px;
  }
}

@media (min-width: 1400px) {
}



body.modal-open .layer-link {
  pointer-events: none;
}

body.modal-open .modal {
  pointer-events: auto;
}

.modal.info {
  --modal-bg: #DF9046;
}

.modal.bio {
  --modal-bg: #4E489B;
}

.modal.films {
  --modal-bg: #AB4832;
}

.modal.editorial,
.modal.process {
  --modal-bg: #CBBCB9;
  --modal-text: #F3F3EA;
}

.modal.model {
  --modal-bg: #DF9146;
  --modal-text: #F3F3EA;
}

.modal.booklet {
  --modal-bg: #4E489B;
  --modal-text: #F3F3EA;
}

.modal.pavilion {
  --modal-bg: #AB4832;
  --modal-text: #F3F3EA;
}

.modal.observations {
  --modal-bg: #CBBCB9;
  --modal-text: #F3F3EA;
}

.modal.events {
  --modal-bg: #AB4832;
  --modal-text: #F3F3EA;
}

.modal.drawings,
.modal.occupancy {
  --modal-bg: #ECC85B;
  --modal-text: #F3F3EA;
}

/* START - DARK MODE */
body.dark .cursor__text {
  color: var(--ternary);
  fill: var(--ternary);
}

body.dark .ip-main {
  background-color: var(--dark);
}

body.dark .content__title {
  color: var(--ternary);
}

body.dark .layer img.dark {
  visibility: visible;
  opacity: 1;
}

body.dark .layer img.light {
  visibility: hidden;
  opacity: 0;
}

/*.layer-info*/
body.dark .pos-1 {
  --grid-row: 10;
  --grid-column: 4;
  --grid-height: 7;
  --grid-width: 14;
}
/*.layer-bio*/
body.dark .pos-2 {
  --grid-row: 36;
  --grid-column: 1;
  --grid-height: 8;
  --grid-width: 23;
}
/*.layer-pavilion*/
body.dark .pos-3 {
  --grid-row: 90;
  --grid-column: 1;
  --grid-height: 7;
  --grid-width: 42;
}
/*.layer-booklet*/
body.dark .pos-4 {
  --grid-row: 77;
  --grid-column: 13;
  --grid-width: 17;
  --grid-height: 7;
}
/*.layer-editorial*/
body.dark .pos-5 {
  --grid-row: 5;
  --grid-column: 22;
  --grid-height: 7;
  --grid-width: 15;
}
/*.layer-films*/
body.dark .pos-6 {
  --grid-row: 20;
  --grid-column: 26;
  --grid-height: 20;
  --grid-width: 20;
}
/*.layer-model*/
body.dark .pos-7 {
  --grid-row: 58;
  --grid-column: 5;
  --grid-height: 8;
  --grid-width: 40;
}
/*.layer-rectangle_gray*/
body.dark .pos-8 {
  --grid-row: 25;
  --grid-column: 9;
  --grid-height: 2;
  --grid-width: 12;
}
/*.layer-rectangle_blue*/
body.dark .pos-9 {
  --grid-row: 29;
  --grid-column: 45;
  --grid-height: 2;
  --grid-width: 8;
}
/*.layer-fluid_shape*/
body.dark .pos-10 {
  --grid-row: 69;
  --grid-column: 10;
  --grid-height: 10;
  --grid-width: 20;
}
/*.layer-rectangle_blue_vertical*/
body.dark .pos-11 {
  --grid-row: 57;
  --grid-column: 52;
  --grid-width: 3;
  --grid-height: 4;
}
/*.layer-leaf_gray*/
body.dark .pos-12 {
  --grid-row: 19;
  --grid-column: 52;
  --grid-height: 5;
  --grid-width: 12;
}
/*.layer-circle_blue*/
body.dark .pos-13 {
  --grid-row: 62;
  --grid-column: 60;
  --grid-width: 14;
  --grid-height: 5;
}
/*.layer-observations*/
body.dark .pos-14 {
  --grid-row: 84;
  --grid-column: 54;
  --grid-width: 35;
  --grid-height: 9;
}
/*.layer-occupancy*/
body.dark .pos-15 {
  --grid-column: 32;
  --grid-width: 69;
  --grid-height: 7;
}
/*.layer-events*/
body.dark .pos-16 {
  --grid-row: 56;
  --grid-column: 75;
  --grid-width: 15;
  --grid-height: 8;
}
/*.layer-process*/
body.dark .pos-17 {
  --grid-column: 80;
  --grid-width: 20;
}
/*.layer-rectangle_blue_tilt*/
body.dark .pos-18 {
  --grid-row: 44;
  --grid-column: -13;
  --grid-width: 10;
  --grid-height: 3;
}
/*.layer-drawings*/
body.dark .pos-19 {
  --grid-row: 27;
  --grid-column: 58;
  --grid-width: 32;
  --grid-height: 11;
}
/*.layer-drawings_element*/
body.dark .pos-20 {
  --grid-row: 25;
  --grid-column: 52;
  --grid-width: 40;
  --grid-height: 17;
}


/*Modal styling per layer*/
body.dark .modal.info {
  --modal-bg: #FF597C;
  --modal-text: #001638;
}

body.dark .modal.bio {
  --modal-bg: #EED034;
  --modal-text: #001638;
}

body.dark .modal.films {
  --modal-bg: #FF6840;
}

body.dark .modal.editorial {
  --modal-bg: #CBBCB9;
  --modal-text: #F3F3EA;
}

body.dark .modal.process {
  --modal-bg: #FF6840;
  --modal-text: #001638;
}

body.dark .modal.model {
  --modal-bg: #D9D9D9;
  --modal-text: #001638;
}

body.dark .modal.booklet {
  --modal-bg: #FF597C;
  --modal-text: #001638;
}

body.dark .modal.pavilion {
  --modal-bg: #435EBC;
  --modal-text: #001638;
}

body.dark .modal.observations {
  --modal-bg: #D9D9D9;
  --modal-text: #001638;
}

body.dark .modal.events {
  --modal-bg: #45CBBF;
  --modal-text: #001638;
}

body.dark .modal.drawings {
  --modal-bg: #FF597C;
  --modal-text: #001638;
}

body.dark .modal.occupancy {
  --modal-bg: #435EBC;
  --modal-text: #001638;
}

/* END - DARK MODE */
svg.svgwave {
  width: 100%;
  height: auto;
  overflow: visible;
}

svg.svgwave path {
  fill:transparent;
  stroke:transparent;
  stroke-width:1px;
}

svg.svgwave text {
  font-family: var(--font-family-secondary);
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  fill: var(--blue);
}


/*START RESPONSIVE*/
/*default mobile xs - here we need to fix the overflow part*/
@media (max-width: 575px) {
  .pos-3 {
    --grid-row: 78;
    margin-left: -33% !important;
  }
  .pos-4 {
    --grid-row: 72;
  }

  .pos-14 {
    --grid-row: 78;
    --grid-column: 67;
    --grid-width: 33;
  }
  .pos-15 {
    --grid-row: 68;
  }

  body.dark .pos-3 {
    --grid-row: 78;
    margin-left: 0 !important;
  }
  body.dark .pos-4 {
    --grid-row: 70;
    --grid-column: 16;
  }

  body.dark .pos-14 {
    --grid-row: 77;
    --grid-column: 63;
  }
  body.dark .pos-15 {
    --grid-row: 68;
  }
}


/*sm*/
@media (min-width: 576px) {
}
/*md*/
@media (min-width: 768px) {
}
/*lg*/
@media (min-width: 992px) {

  body.dark .pos-1,
  .pos-1 {
    --grid-column: 6;
    --grid-height: 11;
    --grid-width: 8;
  }

  .pos-2 {
    --grid-height: 10;
    --grid-width: 6;
  }
  body.dark .pos-2 {
    --grid-height: 14;
    --grid-width: 12;
  }

  .pos-3 {
    --grid-height: 7;
    --grid-width: 30;
  }
  body.dark .pos-3 {
    --grid-row: 85;
    --grid-height: 10;
    --grid-width: 25;
  }

  .pos-4 {
    --grid-row: 80;
    --grid-column: 10;
    --grid-width: 9;
    --grid-height: 8;
  }

  body.dark .pos-4 {
    --grid-row: 73;
    --grid-height: 10;
    --grid-column: 11;
    --grid-width: 8;
  }

  body.dark .pos-5,
  .pos-5 {
    --grid-column: 30;
    --grid-height: 11;
    --grid-width: 8;
  }

  body.dark .pos-6,
  .pos-6 {
    --grid-row: 20;
    --grid-column: 20;
    --grid-height: 30;
    --grid-width: 9;
  }

  body.dark .pos-7,
  .pos-7 {
    --grid-row: 56;
    --grid-column: 25;
    --grid-height: 12;
    --grid-width: 15;
  }

  body.dark .pos-10,
  .pos-10 {
    --grid-row: 73;
    --grid-column: 34;
    --grid-height: 12;
    --grid-width: 14;
  }

  body.dark .pos-10 {
    --grid-width: 8;
  }

  .pos-12 {
    --grid-height: 8;
    --grid-width: 8;
  }
  body.dark .pos-13,
  .pos-13 {
    --grid-column: 56;
    --grid-height: 8;
    --grid-width: 8;
  }

  .pos-14 {
    --grid-row: 80;
    --grid-column: 62;
    --grid-width: 17;
    --grid-height: 16;
  }
  body.dark .pos-14 {
    --grid-row: 83;
    --grid-column: 61;
    --grid-width: 14;
    --grid-height: 13;
  }

  .pos-15 {
    --grid-row: 70;
    --grid-column: 71;
    --grid-width: 30;
    --grid-height: 9;
  }
  body.dark .pos-15 {
    --grid-row: 71;
    --grid-column: 66;
    --grid-width: 32;
    --grid-height: 10;
  }

  .pos-16 {
    --grid-row: 53;
    --grid-column: 75;
    --grid-width: 10;
    --grid-height: 10;
  }
  body.dark .pos-16 {
    --grid-column: 71;
    --grid-height: 10;
    --grid-width: 10;
  }

  .pos-17 {
    --grid-row: 15;
    --grid-column: 81;
    --grid-width: 20;
    --grid-height: 25;
  }
  body.dark .pos-17 {
    --grid-row: 10;
    --grid-column: 85;
    --grid-width: 15;
    --grid-height: 23;
  }

  .pos-19 {
    --grid-row: 30;
    --grid-column: 63;
    --grid-width: 13;
    --grid-height: 12;
  }
  body.dark .pos-19 {
    --grid-row: 30;
    --grid-column: 63;
    --grid-width: 15;
    --grid-height: 12;
  }

  .pos-20 {
    --grid-row: 20;
    --grid-column: 77;
    --grid-width: 3;
    --grid-height: 17;
  }
  body.dark .pos-20 {
    --grid-row: 18;
    --grid-column: 80;
    --grid-width: 3;
    --grid-height: 17;
  }


  .pos-stories {
    --grid-row: 85;
    --grid-column: 40;
    --grid-height: 8;
    --grid-width: 18;
  }

  .pos-realities {
    --grid-row: 50;
    --grid-column: 1;
    --grid-height: 25;
    --grid-width: 35;
  }

  .pos-architecture {
    --grid-row: 12;
    --grid-column: 50;
    --grid-height: 25;
    --grid-width: 45;
    transform: rotate(-22deg) translate(10%, -14%);
  }

}
/*xl*/
@media (min-width: 1200px) {
  .logo {
    top: 26px;
    width: 85px;
    height: 79px;
  }

  .content__title {
    font-size: 2rem;
    font-size: clamp(2rem, 1.675rem + 1.625vw, 3.625rem);
  }

  .light-switch {
    font-size: 23px;
    line-height: 27px;
  }

  /*.layer-info*/
  .pos-1 {
    --grid-row: 8;
    --grid-column: 5;
    --grid-height: 9;
    --grid-width: 5;
  }
  /*.layer-bio*/
  .pos-2 {
    --grid-row: 28;
    --grid-column: 4;
    --grid-height: 7;
    --grid-width: 4;
  }
  /*.layer-pavilion*/
  .pos-3 {
    --grid-row: 87;
    --grid-column: 7;
    --grid-height: 5;
    --grid-width: 18;
  }
  /*.layer-booklet*/
  .pos-4 {
    --grid-row: 78;
    --grid-column: 10;
    --grid-width: 6;
    --grid-height: 6;
  }
  /*.layer-editorial*/
  .pos-5 {
    --grid-row: 8;
    --grid-column: 34;
    --grid-height: 10;
    --grid-width: 6;
  }
  /*.layer-films*/
  .pos-6 {
    --grid-row: 20;
    --grid-column: 22;
    --grid-height: 21;
    --grid-width: 5;
  }
  /*.layer-model*/
  .pos-7 {
    --grid-row: 58;
    --grid-column: 26;
    --grid-height: 9;
    --grid-width: 11;
  }
  /*.layer-rectangle_gray*/
  .pos-8 {
    --grid-row: 21;
    --grid-column: 9;
    --grid-height: 3;
    --grid-width: 4;
  }
  /*.layer-rectangle_blue*/
  .pos-9 {
    --grid-row: 30;
    --grid-column: 49;
    --grid-height: 3;
    --grid-width: 4;
  }
  /*.layer-fluid_shape*/
  .pos-10 {
    --grid-row: 71;
    --grid-column: 38;
    --grid-height: 12;
    --grid-width: 13;
  }
  /*.layer-rectangle_blue_vertical*/
  .pos-11 {
    --grid-row: 71;
    --grid-column: 55;
    --grid-width: 2;
    --grid-height: 7;
  }
  /*.layer-leaf_gray*/
  .pos-12 {
    --grid-row: 18;
    --grid-column: 64;
    --grid-height: 8;
    --grid-width: 5;
  }
  /*.layer-circle_blue*/
  .pos-13 {
    --grid-row: 76;
    --grid-column: 65;
    --grid-width: 6;
    --grid-height: 10;
  }
  /*.layer-observations*/
  .pos-14 {
    --grid-row: 85;
    --grid-column: 72;
    --grid-width: 11;
    --grid-height: 10;
  }
  /*.layer-occupancy*/
  .pos-15 {
    --grid-row: 80;
    --grid-column: 83;
    --grid-width: 18;
    --grid-height: 7;
    transform: translateX(2%);
  }
  /*.layer-events*/
  .pos-16 {
    --grid-row: 62;
    --grid-column: 82;
    --grid-width: 5;
    --grid-height: 8;
  }
  /*.layer-process*/
  .pos-17 {
    --grid-row: 13;
    --grid-column: -14;
    --grid-width: 13;
    --grid-height: 16;
    transform: translateX(25px);
  }
  /*.layer-rectangle_blue_tilt*/
  .pos-18 {
    --grid-row: 44;
    --grid-column: -10;
    --grid-width: 4;
    --grid-height: 7;
  }
  /*.layer-drawings*/
  .pos-19 {
    --grid-row: 32;
    --grid-column: 70;
    --grid-width: 10;
    --grid-height: 11;
  }
  /*.layer-drawings_element*/
  .pos-20 {
    --grid-row: 20;
    --grid-column: 82;
    --grid-width: 2;
    --grid-height: 17;
  }

  /*Dark mode*/
  /*.layer-info*/
  body.dark .pos-1 {
    --grid-row: 8;
    --grid-column: 5;
    --grid-height: 8;
    --grid-width: 4;
  }
  /*.layer-bio*/
  body.dark .pos-2 {
    --grid-row: 28;
    --grid-column: 3;
    --grid-height: 9;
    --grid-width: 7;
  }
  /*.layer-pavilion*/
  body.dark .pos-3 {
    --grid-row: 88;
    --grid-column: 9;
    --grid-height: 8;
    --grid-width: 11;
  }
  /*.layer-booklet*/
  body.dark .pos-4 {
    --grid-row: 78;
    --grid-column: 13;
    --grid-width: 5;
    --grid-height: 8;
  }
  /*.layer-editorial*/
  body.dark .pos-5 {
    --grid-row: 8;
    --grid-column: 34;
    --grid-height: 9;
    --grid-width: 5;
  }
  /*.layer-films*/
  body.dark .pos-6 {
    --grid-row: 20;
    --grid-column: 22;
    --grid-height: 20;
    --grid-width: 6;
  }
  /*.layer-model*/
  body.dark .pos-7 {
    --grid-row: 58;
    --grid-column: 26;
    --grid-height: 9;
    --grid-width: 11;
  }
  /*.layer-rectangle_gray*/
  body.dark .pos-8 {
    --grid-row: 22;
    --grid-column: 9;
    --grid-height: 3;
    --grid-width: 5;
  }
  /*.layer-rectangle_blue*/
  body.dark .pos-9 {
    --grid-row: 30;
    --grid-column: 50;
    --grid-height: 2;
    --grid-width: 2;
  }
  /*.layer-fluid_shape*/
  body.dark .pos-10 {
    --grid-row: 70;
    --grid-column: 39;
    --grid-height: 16;
    --grid-width: 9;
    transform-origin: 50% 50%;
    transform: rotate(-20deg);
  }
  /*.layer-rectangle_blue_vertical*/
  body.dark .pos-11 {
    --grid-row: 74;
    --grid-column: 55;
    --grid-width: 1;
    --grid-height: 4;
  }
  /*.layer-leaf_gray*/
  body.dark .pos-12 {
    --grid-row: 18;
    --grid-column: 66;
    --grid-height: 5;
    --grid-width: 3;
  }
  /*.layer-circle_blue*/
  body.dark .pos-13 {
    --grid-row: 76;
    --grid-column: 65;
    --grid-width: 5;
    --grid-height: 7;
  }
  /*.layer-observations*/
  body.dark .pos-14 {
    --grid-row: 85;
    --grid-column: 72;
    --grid-width: 9;
    --grid-height: 10;
  }
  /*.layer-occupancy*/
  body.dark .pos-15 {
    --grid-row: 80;
    --grid-column: 81;
    --grid-width: 20;
    --grid-height: 8;
    transform: translateX(50px);
  }
  /*.layer-events*/
  body.dark .pos-16 {
    --grid-row: 63;
    --grid-column: 80;
    --grid-width: 4;
    --grid-height: 8;
  }
  /*.layer-process*/
  body.dark .pos-17 {
    --grid-row: 14;
    --grid-column: -11;
    --grid-width: 8;
    --grid-height: 17;
  }
  /*.layer-rectangle_blue_tilt*/
  body.dark .pos-18 {
    --grid-row: 45;
    --grid-column: -9;
    --grid-width: 4;
    --grid-height: 5;
    transform: rotate(-135deg);
  }
  /*.layer-drawings*/
  body.dark .pos-19 {
    --grid-row: 32;
    --grid-column: 70;
    --grid-width: 10;
    --grid-height: 11;
  }
  /*.layer-drawings_elements*/
  body.dark .pos-20 {
    --grid-row: 20;
    --grid-column: 82;
    --grid-width: 2;
    --grid-height: 17;
  }

  .pos-stories {
    --grid-row: 85;
    --grid-column: 48;
    --grid-height: 5;
    --grid-width: 15;
  }

  .pos-realities {
    --grid-row: 50;
    --grid-column: 1;
    --grid-height: 25;
    --grid-width: 30;
  }

  .pos-architecture {
    --grid-row: 10;
    --grid-column: 59;
    --grid-height: 25;
    --grid-width: 40;
    transform: rotate(-15deg) translate(10%, -14%);
  }



}
/*xxl*/
@media (min-width: 1400px) {
}
/*END RESPONSIVE*/



/*END - Author styles*/

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}