@font-face {
  font-family: 'VarelaRound';
  font-weight: 400;
  src: url("../tour/fonts/VarelaRound-Regular.ttf"); }

@font-face {
  font-family: 'OpenSans';
  font-weight: 300;
  src: url("../tour/fonts/OpenSans.ttf"); }

@font-face {
  font-family: 'OpenSans';
  font-weight: 400;
  src: url("../tour/fonts/OpenSans.ttf"); }

@font-face {
  font-family: 'OpenSans';
  font-weight: 700;
  src: url("../tour/fonts/OpenSans.ttf"); }

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0px;
  padding: 0px; }

html {
  height: 100%; }
  @media (max-width: 1024px) and (orientation: landscape) {
    html {
      height: 100vh; } }

body {
  background-color: #1e83eb;
  color: white;
  font-family: "OpenSans";
  font-size: 16px;
  height: 100%;
  overflow: hidden; }
  @media (max-width: 1024px) and (orientation: landscape) {
    body {
      height: 100vh; } }

a {
  color: white;
  text-decoration: none; }

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none; }

input:focus {
  outline: none; }

#tour-container {
  height: 100%;
  width: 100%; }

.tour-gui {
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
  z-index: 999999999; }
  @media (max-width: 1024px) and (orientation: landscape) {
    .tour-gui {
      height: 100vh; } }
  @media (min-width: 1025px) {
    .tour-gui .mobile-only {
      display: none; } }
  @media (max-width: 1024px) {
    .tour-gui .desktop-only {
      display: none; } }
  .tour-gui--no-fullscreen .toggle-fullscreen-button {
    display: none !important; }

.loader {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%; }
  .loader span {
    border-radius: 50%;
    box-sizing: border-box;
    color: #FFF;
    display: block;
    height: 5px;
    left: -100px;
    margin: 15px auto;
    position: relative;
    width: 5px; }
  .loader--progress span {
    animation: shadowRolling 2s linear infinite; }

.modal *, .popup *, .button * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.button {
  cursor: pointer;
  pointer-events: all;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 200px;
  font-weight: 700;
  padding: 10px 16px;
  transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
  @media (min-width: 1025px) {
    .button {
      font-size: 20px; } }
  @media (max-width: 1024px) {
    .button {
      font-size: 16px; } }
  @media (hover: hover) and (pointer: fine) {
    .button:hover {
      border: 2px solid white; } }

.controls {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  z-index: 2; }
  @media (min-width: 1025px) {
    .controls {
      gap: 16px;
      right: 38px;
      top: 30px; } }
  @media (max-width: 1024px) {
    .controls {
      gap: 12px;
      right: 12px;
      top: 24px; } }
  .controls .lang-button {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    font-size: 20px;
    font-weight: 300;
    gap: 7px;
    width: 48px; }
    @media (hover: hover) and (pointer: fine) {
      .controls .lang-button {
        opacity: 0.85;
        transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
        .controls .lang-button:hover {
          opacity: 1; } }
    .controls .lang-button span:nth-of-type(2) {
      align-items: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-shrink: 0;
      height: 24px;
      transform: rotate(90deg) scaleY(1.5) scaleX(0.75) translateX(2px);
      transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
      width: 18px; }
    .controls .lang-button--open span:nth-of-type(2) {
      transform: rotate(90deg) scaleY(1.5) scaleX(-0.75) translateX(-2px); }
  .controls .lang-list {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    position: absolute;
    right: 24px;
    top: 36px;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
    .controls .lang-list__item {
      cursor: pointer;
      pointer-events: all;
      font-size: 20px;
      font-weight: 300; }
      @media (hover: hover) and (pointer: fine) {
        .controls .lang-list__item {
          opacity: 0.85;
          transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
          .controls .lang-list__item:hover {
            opacity: 1; } }
  .controls .toggle-audio-button, .controls .toggle-fullscreen-button, .controls .toggle-vr-button {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    pointer-events: all; }
    @media (hover: hover) and (pointer: fine) {
      .controls .toggle-audio-button, .controls .toggle-fullscreen-button, .controls .toggle-vr-button {
        opacity: 0.85;
        transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
        .controls .toggle-audio-button:hover, .controls .toggle-fullscreen-button:hover, .controls .toggle-vr-button:hover {
          opacity: 1; } }
    .controls .toggle-audio-button img, .controls .toggle-fullscreen-button img, .controls .toggle-vr-button img {
      width: 24px; }
    .controls .toggle-audio-button--disabled, .controls .toggle-fullscreen-button--disabled, .controls .toggle-vr-button--disabled {
      opacity: 0.25;
      pointer-events: none; }
  .controls .toggle-vr-button img {
    width: 32px; }

.dm-logo {
  cursor: pointer;
  pointer-events: all;
  position: absolute;
  z-index: 6; }
  @media (min-width: 1025px) {
    .dm-logo {
      bottom: 24px;
      right: 32px;
      width: 80px; } }
  @media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .dm-logo {
      opacity: 0.5;
      transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
      .dm-logo:hover {
        opacity: 1; } }
  @media (max-width: 1024px) {
    .dm-logo {
      left: 50%;
      margin-left: calc(max(-8vw, -40px));
      opacity: 0.5;
      top: 24px;
      width: calc(min(16vw, 80px)); } }

.hotspot {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  height: 100px;
  margin: -50px 0px 0px -50px;
  transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
  width: 100px; }
  .hotspot__icon {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
    .hotspot__icon img {
      width: 42px; }
  .hotspot__preview {
    border-radius: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
    width: 100%; }
    .hotspot__preview img {
      backface-visibility: hidden;
      border-radius: 100%;
      height: 100%;
      transform-origin: center;
      transition: transform 0.5s ease;
      width: 100%; }
  .hotspot__title {
    color: #1e83eb;
    background: white;
    border-radius: 16px;
    font-size: 16px;
    opacity: 0;
    padding: 4px 12px;
    pointer-events: none;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
    top: 120px;
    white-space: nowrap; }
    .hotspot__title:after {
      content: '';
      border-bottom: 6px solid white;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      height: 0;
      left: 50%;
      margin-left: -6px;
      position: absolute;
      top: -6px;
      width: 0; }
  .hotspot--modal, .hotspot--static {
    background: white;
    border: 3px solid #1e83eb;
    border-radius: 100%;
    height: 60px;
    width: 60px; }
  .hotspot--modal .hotspot__title, .hotspot--static .hotspot__title {
    background: #1e83eb;
    color: white;
    top: 32px; }
    .hotspot--modal .hotspot__title:after, .hotspot--static .hotspot__title:after {
      border-bottom: 6px solid #1e83eb; }
  .hotspot--modal.hotspot:hover, .hotspot--static.hotspot:hover {
    background: #1e83eb; }
  .hotspot--modal.hotspot:hover .hotspot__icon, .hotspot--static.hotspot:hover .hotspot__icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(307deg) brightness(108%) contrast(102%); }
  .hotspot--modal.hotspot:hover .hotspot__title, .hotspot--static.hotspot:hover .hotspot__title {
    opacity: 1;
    pointer-events: all;
    top: 24px; }
  .hotspot--static {
    cursor: default; }
  .hotspot--traversal {
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid white;
    border-radius: 100%; }
  .hotspot--traversal.hotspot:hover .hotspot__preview {
    opacity: 1; }
    .hotspot--traversal.hotspot:hover .hotspot__preview img {
      transform: scale(1.2);
      transition: transform 5s ease-out; }
  .hotspot--traversal.hotspot:hover .hotspot__title {
    opacity: 1;
    pointer-events: all;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85) 0.3s;
    top: 110px; }
  .hotspot--traversal.hotspot:hover {
    height: 180px;
    margin: -90px 0px 0px -90px;
    width: 180px; }
  .hotspot--small-icon .hotspot__icon img {
    width: 32px; }

.landing {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  pointer-events: all;
  transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
  z-index: 9; }
  .landing__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: calc(max(80vw, 1200px));
    position: absolute;
    z-index: 4; }
  .landing__background-1 {
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    background: url("../tour/img/landing.jpg") no-repeat center/cover;
    filter: blur(5px);
    position: absolute;
    z-index: 1; }
  .landing__background-2 {
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    background: #1e83eb;
    opacity: 0.5;
    position: absolute;
    z-index: 2; }
  .landing__background-3 {
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    background: black;
    opacity: 0.25;
    position: absolute;
    z-index: 3; }
  .landing__logo {
    width: 100%; }
  .landing h1 {
    font-weight: 300;
    text-align: center; }
    @media (min-width: 1025px) {
      .landing h1 {
        font-size: 48px;
        margin: 64px 0px 50px; } }
    @media (max-width: 1024px) {
      .landing h1 {
        font-size: 32px;
        margin: 32px 0px 40px; } }

.logo {
  z-index: 5;
  position: absolute; }
  @media (min-width: 1025px) {
    .logo {
      left: 6px;
      top: 33px;
      width: 200px; } }
  @media (max-width: 1024px) {
    .logo {
      top: 24px;
      width: 35vw; } }

.modal {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  backdrop-filter: blur(4px);
  pointer-events: all;
  position: absolute;
  transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
  z-index: 10; }
  .modal__close {
    cursor: pointer;
    pointer-events: all;
    position: absolute;
    transform: scaleX(2);
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
    z-index: 2; }
    @media (min-width: 1025px) {
      .modal__close {
        font-size: 48px;
        right: 24px;
        top: -16px; } }
  @media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .modal__close {
      opacity: 0.85;
      transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
      .modal__close:hover {
        opacity: 1; } }
    @media (max-width: 1024px) {
      .modal__close {
        font-size: 36px;
        right: 14px;
        top: 0px; } }
  .modal__content {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: rgba(62, 184, 215, 0.9);
    box-sizing: border-box;
    color: white;
    position: relative;
    width: 100%; }
    @media (min-width: 1025px) {
      .modal__content {
        max-height: 50vh;
        width: calc(max(50vw, 900px)); } }
    @media (max-width: 1024px) {
      .modal__content {
        margin: 0px 16px;
        max-height: 80vh; } }
    .modal__content a {
      color: #FFE66D;
      transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
      @media (hover: hover) and (pointer: fine) {
        .modal__content a:hover {
          text-decoration: underline; } }
    .modal__content iframe {
      aspect-ratio: 16 / 9; }
      @media (min-width: 1025px) {
        .modal__content iframe {
          width: 800px; } }
      @media (max-width: 1024px) {
        .modal__content iframe {
          width: 100%; } }
    .modal__content p {
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
      margin: 20px 0px; }
      .modal__content p:first-of-type {
        margin-top: 0px; }
      .modal__content p:last-of-type {
        margin-bottom: 0px; }
    .modal__content ul {
      padding: 0px 24px; }
  .modal__details {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box; }
    @media (min-width: 1025px) {
      .modal__details {
        max-height: 50vh;
        padding: 48px 24px; } }
    @media (max-width: 1024px) {
      .modal__details {
        max-height: 80vh;
        padding: 12px 18px 24px; } }
  .modal__photo {
    height: 50vh;
    min-width: 50%;
    object-fit: fill;
    width: 50%; }
    @media (max-width: 1024px) {
      .modal__photo {
        margin-bottom: 16px; } }
  .modal__text {
    overflow-y: auto;
    padding-bottom: 1px;
    padding-right: 16px; }
  @media (min-width: 1025px) {
    .modal__title {
      font-size: 36px;
      line-height: 48px;
      font-weight: 700;
      margin-bottom: 24px; } }
  @media (max-width: 1024px) {
    .modal__title {
      font-size: 30px;
      line-height: 36px;
      font-weight: 500;
      margin-bottom: 10px;
      max-width: 80%;
      text-align: center; } }
  .modal--hidden {
    opacity: 0;
    pointer-events: none; }
    .modal--hidden * {
      pointer-events: none; }
  .modal--video .modal__close {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 24px;
    padding: 6px 0px 18px;
    right: 12px;
    top: 0px;
    width: 24px; }
    @media (max-width: 1024px) {
      .modal--video .modal__close {
        background: #1e83eb; } }
  @media (min-width: 1025px) {
    .modal--video .modal__content {
      max-height: 100%; } }
  @media (max-width: 1024px) {
    .modal--video .modal__content {
      margin: 0px; } }
  @media (min-width: 1025px) {
    .modal--video .modal__details {
      max-height: 100%; } }
  @media (max-width: 1024px) {
    .modal--video .modal__details {
      padding: 0px;
      width: 100%; } }

.nav-button {
  cursor: pointer;
  pointer-events: all;
  font-size: 32px;
  font-weight: 300;
  left: 50%;
  margin-left: -9px;
  position: absolute;
  transform: scaleY(0.7) scaleX(1.3) rotate(-90deg);
  transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85) !important;
  z-index: 8; }
  @media (hover: hover) and (pointer: fine) {
    .nav-button {
      opacity: 0.85;
      transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
      .nav-button:hover {
        opacity: 1; } }
  @media (min-width: 1025px) {
    .nav-button {
      bottom: 22px; } }
  @media (max-width: 1024px) {
    .nav-button {
      bottom: 60px; } }
  @media (min-width: 1025px) {
    .nav-button--open {
      bottom: 210px;
      transform: scaleY(-0.7) scaleX(1.3) rotate(-90deg); } }
  @media (max-width: 1024px) {
    .nav-button--open {
      opacity: 0;
      pointer-events: none; } }

.nav {
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  opacity: 1;
  top: 0px;
  transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
  z-index: 7; }
  @media (max-width: 1024px) {
    .nav {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      pointer-events: all; } }
  .nav__close {
    position: absolute;
    transform: scaleX(2);
    z-index: 2; }
    @media (max-width: 1024px) {
      .nav__close {
        font-size: 36px;
        right: 28px;
        top: -6px; } }
  @media (min-width: 1025px) {
    .nav__image-container {
      height: 154px;
      overflow: hidden;
      position: relative;
      width: 240px; } }
  @media (max-width: 1024px) {
    .nav__image-container {
      border: 3px solid white;
      height: 100%;
      width: 100%; } }
  .nav__list {
    box-sizing: border-box;
    pointer-events: all;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
    width: 100%; }
    @media (min-width: 1025px) {
      .nav__list {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        bottom: 0px;
        gap: 16px;
        height: 200px;
        overflow-x: auto;
        overflow-y: hidden;
        position: absolute;
        padding: 0px 16px; } }
    @media (max-width: 1024px) {
      .nav__list {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 12px;
        height: calc(100% - 80px);
        margin-top: 0px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0px 24px;
        z-index: 2; } }
  .nav__list-item {
    cursor: pointer;
    pointer-events: all;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative; }
    @media (min-width: 1025px) {
      .nav__list-item {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        border: 3px solid white;
        height: 160px;
        width: 240px; } }
    @media (max-width: 1024px) {
      .nav__list-item {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        aspect-ratio: 16 / 9;
        width: 100%; } }
    .nav__list-item img {
      height: 100%;
      object-fit: cover; }
      @media (min-width: 1025px) {
        .nav__list-item img {
          position: absolute;
          transition: transform 1s ease-out;
          width: 100%; } }
      @media (max-width: 1024px) {
        .nav__list-item img {
          aspect-ratio: 16 / 9;
          width: 100%; } }
    .nav__list-item span {
      padding: 8px 0px 12px;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
      width: calc(100% + 6px); }
      @media (min-width: 1025px) {
        .nav__list-item span {
          bottom: -43px;
          font-size: 15px;
          font-weight: 300;
          position: absolute; } }
      @media (max-width: 1024px) {
        .nav__list-item span {
          font-size: 24px;
          font-weight: 600; } }
    @media (min-width: 1025px) {
      .nav__list-item span.long-text {
        font-size: 14px; } }
    @media (hover: hover) and (pointer: fine) {
      .nav__list-item:hover img {
        transform: scale(1.2);
        transition: transform 5s ease-out; } }

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .nav__list-item:hover span {
    background: #1e83eb; } }

@media (hover: hover) and (pointer: fine) and (max-width: 1024px) {
  .nav__list-item:hover span {
    background: white;
    color: #1e83eb; } }
    @media (min-width: 1025px) {
      .nav__list-item--active span {
        background: #1e83eb; } }
    @media (max-width: 1024px) {
      .nav__list-item--active span {
        background: white;
        color: #1e83eb; } }
  .nav__mask {
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%; }
    @media (min-width: 1025px) {
      .nav__mask {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.5) 25%); } }
    @media (max-width: 1024px) {
      .nav__mask {
        backdrop-filter: blur(2px);
        background: rgba(0, 0, 0, 0.8); } }
  .nav__up, .nav__down {
    cursor: pointer;
    pointer-events: all;
    font-size: 30px;
    font-weight: 300;
    transform: scaleX(2) rotate(90deg);
    z-index: 2; }
  .nav__down {
    transform: scaleX(2) rotate(-90deg); }
  .nav--hidden {
    opacity: 0;
    pointer-events: none; }
    .nav--hidden * {
      pointer-events: none; }
  .nav--hidden .nav__list {
    bottom: -160px; }
    @media (max-width: 1024px) {
      .nav--hidden .nav__list {
        margin-top: 75px; } }
  .nav--hidden .nav__list-item {
    pointer-events: none; }

.scene-info {
  position: absolute;
  z-index: 4;
  /*
    &__open-button {
        @include pointer;
        
        font-weight: 300;
        margin-right: 6px;
        max-width: 48px;
        transition: all $duration $easing;
        
        @media ($desktop) {
            font-size: 50px;
        }

        @media ($mobile) {
            font-size: 30px;
        }
    }
    */ }
  @media (min-width: 1025px) {
    .scene-info {
      bottom: 20px;
      left: 32px;
      max-width: 45vw; } }
  @media (max-width: 1024px) {
    .scene-info {
      background: rgba(30, 131, 235, 0.8);
      bottom: 0px;
      height: 60px;
      transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85) 0.3s;
      width: 100%; } }
  .scene-info__background-1 {
    background: rgba(30, 131, 235, 0.85);
    height: 400px;
    left: -240px;
    position: absolute;
    transform: rotate(50deg);
    transform-origin: top left;
    transition: all 0.75s cubic-bezier(0.6, 0.48, 0.11, 1.04) 0.3s;
    width: 1000px; }
    @media (min-width: 1025px) {
      .scene-info__background-1 {
        top: 280px; } }
    @media (max-width: 1024px) {
      .scene-info__background-1 {
        top: calc(min(60vh, 70vw)); } }
  .scene-info__background-2 {
    background: rgba(62, 184, 215, 0.85);
    filter: drop-shadow(2px 10px 10px rgba(0, 0, 0, 0.5));
    height: 450px;
    left: -200px;
    position: absolute;
    transform: rotate(150deg);
    transform-origin: top left;
    transition: all 0.75s cubic-bezier(0.6, 0.48, 0.11, 1.04) 0.3s;
    width: 1000px; }
    @media (min-width: 1025px) {
      .scene-info__background-2 {
        top: 30px; } }
    @media (max-width: 1024px) {
      .scene-info__background-2 {
        top: 20vh; } }
  .scene-info__close-button {
    cursor: pointer;
    pointer-events: all;
    transform: scaleX(2);
    z-index: 2; }
    @media (min-width: 1025px) {
      .scene-info__close-button {
        font-size: 48px;
        right: 140px;
        top: 100px;
        transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); } }
  @media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .scene-info__close-button {
      opacity: 0.85;
      transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
      .scene-info__close-button:hover {
        opacity: 1; } }
    @media (max-width: 1024px) {
      .scene-info__close-button {
        font-size: 28px; } }
  .scene-info__cta {
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
    .scene-info__cta .button {
      font-size: 18px;
      font-weight: 400; }
  .scene-info__description {
    font-weight: 300;
    max-width: 700px;
    opacity: 0;
    overflow-y: auto;
    padding-right: 16px;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
    @media (min-width: 1025px) {
      .scene-info__description {
        font-size: 20px;
        height: 230px;
        line-height: 28px; } }
    @media (max-width: 1024px) {
      .scene-info__description {
        font-size: 16px;
        line-height: 24px;
        margin: 0px 12px 0px 0px; } }
    .scene-info__description a {
      color: #FFE66D;
      transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
      @media (hover: hover) and (pointer: fine) {
        .scene-info__description a:hover {
          text-decoration: underline; } }
    .scene-info__description ul {
      padding: 12px 24px 0px; }
  .scene-info__extended {
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
    z-index: 100; }
    @media (min-width: 1025px) {
      .scene-info__extended {
        height: 420px;
        width: 900px; } }
    @media (max-width: 1024px) {
      .scene-info__extended {
        height: calc(70vh + 24px);
        width: 100%; } }
    .scene-info__extended * {
      pointer-events: none; }
  .scene-info__extended-content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    left: 0px;
    position: absolute;
    z-index: 2; }
    @media (min-width: 1025px) {
      .scene-info__extended-content {
        top: 100px; } }
    @media (max-width: 1024px) {
      .scene-info__extended-content {
        height: calc(70vh - 200px);
        left: 16px;
        top: 200px; } }
    .scene-info__extended-content a {
      cursor: pointer;
      pointer-events: all; }
  .scene-info__title-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
    @media (hover: hover) and (pointer: fine) {
      .scene-info__title-container:hover .scene-info__open-button {
        transform: rotate(90deg); } }
    .scene-info__title-container--extended {
      opacity: 0;
      pointer-events: none; }
      @media (max-width: 1024px) {
        .scene-info__title-container--extended {
          justify-content: space-between;
          padding-top: 2vw;
          width: calc(100% - 10px); } }
    @media (max-width: 1024px) {
      .scene-info__title-container:not(.scene-info__title-container--extended) {
        height: 100%; } }
  .scene-info__title {
    font-weight: 300; }
    @media (min-width: 1025px) {
      .scene-info__title {
        font-size: calc(min(4vw,50px)); } }
    @media (max-width: 1024px) {
      .scene-info__title {
        font-size: calc(min(6vw, 28px));
        max-width: 70vw;
        text-align: center; } }
    @media (min-width: 1025px) {
      .scene-info__title.long-text {
        font-size: calc(min(4vw, 44px)); } }
    .scene-info__title--extended {
      text-align: left; }
      @media (min-width: 1025px) {
        .scene-info__title--extended {
          width: 750px; } }
    .scene-info__title::before {
      background: rgba(30, 131, 235, 0.25);
      content: "";
      inset: 0;
      position: absolute;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s ease-in-out;
      z-index: -1; }
    .scene-info__title:hover::before {
      transform: scaleX(1);
      transform-origin: left; }
    .scene-info__title.clicked::before {
      transform: scaleX(0);
      transform-origin: right; }
  .scene-info--open {
    background: rgba(30, 131, 235, 0); }
    @media (max-width: 1024px) {
      .scene-info--open {
        transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); } }
    .scene-info--open .steppers {
      opacity: 0;
      pointer-events: none; }
  .scene-info--open .scene-info__background-1 {
    transform: rotate(-15deg); }
  .scene-info--open .scene-info__background-2 {
    transform: rotate(5deg); }
  .scene-info--open .scene-info__close-button {
    pointer-events: all;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85) 0.75s; }
  .scene-info--open .scene-info__cta {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85) 0.75s; }
  .scene-info--open .scene-info__description {
    pointer-events: all;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85) 0.75s; }
  .scene-info--open .scene-info__extended {
    pointer-events: all; }
  .scene-info--open .scene-info__title-container--extended {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85) 0.75s; }
  @media (max-width: 1024px) {
    .scene-info--open .scene-info__title-container:not(.scene-info__title-container--extended) {
      opacity: 0; } }
  .scene-info--no-description .scene-info__open-button {
    max-width: 0px;
    opacity: 0; }
  .scene-info--no-description .scene-info__title-container {
    pointer-events: none; }

.shadow {
  z-index: 1;
  left: 0px;
  position: absolute;
  transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85);
  width: 100%; }
  @media (min-width: 1025px) {
    .shadow {
      height: 100px; } }
  @media (max-width: 1024px) {
    .shadow {
      height: 80px; } }
  .shadow--bottom {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    bottom: 0px; }
  .shadow--top {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    top: 0px; }
  .shadow--top.shadow--open {
    height: 200px; }

.steppers {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  box-sizing: border-box;
  z-index: 3; }
  @media (min-width: 1025px) {
    .steppers {
      font-size: 24px;
      padding: 20px; } }
  @media (max-width: 1024px) {
    .steppers {
      bottom: 0px;
      font-size: 20px;
      height: 60px;
      top: auto; } }
  .steppers__bg {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%);
    height: 100px;
    position: absolute;
    width: 100px; }
  .steppers__next, .steppers__prev {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    padding: 10px;
    transition: all 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85) !important; }
    @media (hover: hover) and (pointer: fine) {
      .steppers__next, .steppers__prev {
        opacity: 0.5;
        transition: opacity 0.3s cubic-bezier(0.85, 0.125, 0.125, 0.85); }
        .steppers__next:hover, .steppers__prev:hover {
          opacity: 1; } }
    .steppers__next span, .steppers__prev span {
      transform: scaleY(1.5) scaleX(0.8);
      z-index: 2; }
    @media (hover: hover) and (pointer: fine) {
      .steppers__next:hover, .steppers__prev:hover {
        padding: 5px; } }

@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
    scrollbar-color: #1e83eb white; } }

*::-webkit-scrollbar {
  height: 3px;
  width: 2px; }

*::-webkit-scrollbar-track {
  background: white; }

*::-webkit-scrollbar-thumb {
  background-color: #1e83eb;
  border: none; }

.hidden {
  opacity: 0 !important;
  pointer-events: none !important; }
  .hidden * {
    pointer-events: none !important; }
  .hidden--truly {
    width: 0px; }

@keyframes shadowRolling {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
  12% {
    box-shadow: 100px 0 #1e83eb, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
  25% {
    box-shadow: 110px 0 #1e83eb, 100px 0 #1e83eb, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); }
  36% {
    box-shadow: 120px 0 #1e83eb, 110px 0 #1e83eb, 100px 0 #1e83eb, 0px 0 rgba(255, 255, 255, 0); }
  50% {
    box-shadow: 130px 0 #1e83eb, 120px 0 #1e83eb, 110px 0 #1e83eb, 100px 0 #1e83eb; }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #1e83eb, 120px 0 #1e83eb, 110px 0 #1e83eb; }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #1e83eb, 120px 0 #1e83eb; }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #1e83eb; }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0); } }