:root {
  --color-blue: #01afc7;
  --color-yellow: #ffea03;
  --transition-duration: 0.5s;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Calibri, sans-serif;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  /* overflow: hidden; */
}

[data-lang] {
  display: none;
}
html[lang="cs"] [data-lang="cs"],
html[lang="en"] [data-lang="en"],
html[lang="es"] [data-lang="es"] {
  display: initial;
}

#preload-images {
  background-image:
    url('../images/map-objects/baba-active.png'),
    url('../images/map-objects/bridge-light-1.png'),
    url('../images/map-objects/bridge-light-2.png'),
    url('../images/map-objects/bridge-light-3.png'),
    url('../images/map-objects/bus-stop-active.png'),
    url('../images/map-objects/cameras-active.png'),
    url('../images/map-objects/charger-active.png'),
    url('../images/map-objects/clock-active.png'),
    url('../images/map-objects/cubism-lamp-active.png'),
    url('../images/map-objects/lamp-active.png'),
    url('../images/map-objects/mikulas-active.png'),
    url('../images/map-objects/petrin-tower-active.png'),
    url('../images/map-objects/semafor-active.png'),
    url('../images/map-objects/theater-active.png'),
    url('../images/map-objects/tree-active.png');
  height: 1px;
  left: -1000px;
  position: absolute;
  top: -1000px;
  width: 1px;
}

#main-wrap {
  aspect-ratio: 9 / 16;
  background-image: url('../images/map-background.png');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  /*
    height: 100vh;
    margin: 0 auto;
    max-height: 100%;
  */
  overflow: hidden;
  position: relative;
}

/* * * Map objects * * */
.map-object {
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  position: absolute;
  transition: background-image var(--transition-duration);
}

.clickable-area {
  background-color: rgba(255, 0, 0, 0.0);
  bottom: 0;
  cursor: pointer;
  left: 0;
  pointer-events: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.map-object#horizon {
  background-image: url('../images/map-objects/horizon.png');
  height: 5.6378%;
  left: 2.8118%;
  top: 15.3571%;
  width: 57.7778%;
}
.map-object#horizon .clickable-area {
  /* clip-path: polygon(); */
}

.map-object#wires {
  background-image: url('../images/map-objects/wires.png');
  height: 7.2959%;
  left: 0%;
  top: 14.8980%;
  width: 39.6825%;
  z-index: 10;
}
.map-object#wires .clickable-area {
  clip-path: polygon(0 78%, 11% 77%, 27% 71%, 45% 55%, 57% 34%, 67% 12%, 71% 12%, 72% 0%, 73% 12%, 76% 13%, 83% 26%, 92% 35%, 100% 38%, 100% 45%, 83% 47%, 77% 39%, 71% 41%, 65% 43%, 54% 63%, 44% 77%, 30% 91%, 16% 99%, 0 100%);
}

.map-object#cameras {
  background-image: url('../images/map-objects/cameras.png');
  height: 6.3520%;
  left: 0%;
  top: 23.6990%;
  width: 16.6893%;
  z-index: 20;
}
.map-object#cameras .clickable-area {
  clip-path: polygon(0 35%, 21% 38%, 21% 28%, 14% 26%, 13% 2%, 71% 5%, 61% 19%, 60% 31%, 29% 30%, 29% 43%, 100% 45%, 91% 62%, 91% 78%, 51% 76%, 51% 100%, 43% 100%, 43% 94%, 0 94%, 0 82%, 43% 82%, 43% 74%, 31% 73%, 31% 50%, 0 47%);
}
.map-object#cameras.active {
  background-image: url('../images/map-objects/cameras-active.png');
}

.map-object#mikulas {
  background-image: url('../images/map-objects/mikulas.png');
  height: 14.0051%;
  left: 38.0045%;
  top: 10.6633%;
  width: 20.9070%;
  z-index: 10;
}
.map-object#mikulas .clickable-area {
  clip-path: polygon(6% 95%, 7% 42%, 17% 13%, 16% 1%, 20% 0%, 20% 13%, 23% 21%, 23% 29%, 30% 44%, 31% 68%, 33% 70%, 34% 85%, 38% 86%, 37% 52%, 40% 44%, 51% 36%, 51% 24%, 57% 18%, 56% 10%, 58% 7%, 60% 9%, 61% 20%, 67% 24%, 68% 36%, 75% 38%, 81% 48%, 84% 78%, 76% 83%, 71% 79%, 64% 78%, 63% 81%, 58% 82%, 56% 84%, 51% 82%, 47% 86%, 42% 86%, 40% 88%, 30% 87%, 25% 90%, 19% 92%, 14% 92%, 11% 96%, 7% 95%, 6% 95%);
}
.map-object#mikulas.active {
  background-image: url('../images/map-objects/mikulas-active.png');
}

.map-object#hrad {
  background-image: url('../images/map-objects/hrad.png');
  height: 12.2704%;
  right: 0%;
  top: 4.8980%;
  width: 40.2721%;
  z-index: 10;
}
.map-object#hrad .clickable-area {
  clip-path: polygon(0% 87%, 1% 64%, 5% 58%, 24% 58%, 23% 32%, 25% 9%, 27% 30%, 28% 7%, 31% 41%, 37% 41%, 37% 24%, 41% 1%, 44% 26%, 45% 41%, 62% 43%, 64% 48%, 64% 55%, 77% 56%, 81% 59%, 99% 60%, 100% 96%, 82% 95%, 81% 90%, 73% 88%, 67% 99%, 53% 95%, 45% 79%, 36% 78%, 30% 73%, 16% 74%);
}

.map-object#bus-stop {
  background-image: url('../images/map-objects/bus-stop.png');
  height: 6.7347%;
  left: 25.0794%;
  top: 55.1020%;
  width: 30.3855%;
  z-index: 28;
}
.map-object#bus-stop .clickable-area {
  clip-path: polygon(25% 90%, 24% 17%, 26% 14%, 22% 3%, 96% 2%, 92% 13%, 92% 89%);
}
.map-object#bus-stop.active {
  background-image: url('../images/map-objects/bus-stop-active.png');
}

.map-object#petrin-tower {
  background-image: url('../images/map-objects/petrin-tower.png');
  height: 13.5204%;
  left: 8.2540%;
  top: 4.1837%;
  width: 12.4263%;
  z-index: 10;
}
.map-object#petrin-tower .clickable-area {
  clip-path: polygon(5% 99%, 26% 69%, 25% 63%, 34% 60%, 46% 24%, 45% 17%, 49% 11%, 50% 0%, 69% 0%, 70% 6%, 52% 7%, 52% 12%, 59% 18%, 59% 23%, 55% 24%, 61% 59%, 70% 64%, 70% 68%, 64% 68%, 92% 100%);
}
.map-object#petrin-tower.active {
  background-image: url('../images/map-objects/petrin-tower-active.png');
}

.map-object#semafor {
  background-image: url('../images/map-objects/semafor.png');
  height: 40.4337%;
  left: 3.4467%;
  top: 51.7347%;
  width: 13.8322%;
  z-index: 30;
}
.map-object#semafor .clickable-area {
  clip-path: polygon(38% 99%, 37% 25%, 17% 26%, 1% 22%, 13% 18%, 1% 14%, 10% 10%, 20% 4%, 46% 2%, 48% 0%, 62% 0%, 60% 3%, 65% 5%, 56% 6%, 56% 9%, 98% 10%, 100% 26%, 90% 31%, 56% 32%, 56% 100%);
}
.map-object#semafor.active {
  background-image: url('../images/map-objects/semafor-active.png');
}

.map-object#lamp {
  background-image: url('../images/map-objects/lamp.png');
  height: 71.5561%;
  left: 69.6599%;
  top: 18.4184%;
  width: 28.2993%;
  z-index: 30;
}
.map-object#lamp .clickable-area {
  clip-path: polygon(44% 100%, 48% 79%, 49% 55%, 36% 53%, 33% 50%, 41% 47%, 50% 45%, 48% 28%, 32% 23%, 19% 25%, 4% 24%, 0% 22%, 9% 18%, 7% 13%, 3% 11%, 14% 7%, 33% 7%, 47% 10%, 48% 4%, 54% 1%, 61% 4%, 55% 11%, 63% 8%, 81% 6%, 96% 8%, 97% 12%, 90% 13%, 94% 18%, 99% 20%, 96% 23%, 84% 24%, 68% 22%, 55% 26%, 55% 41%, 58% 46%, 70% 48%, 72% 52%, 58% 55%, 58% 80%, 63% 87%, 64% 100%);
}
/*
.map-object#lamp .clickable-area:nth-child(1) {
  clip-path: circle(6.4% at 52% 50.5%);
}
.map-object#lamp .clickable-area:nth-child(2) {
  clip-path: circle(4.5% at 15% 21.5%);
}
.map-object#lamp .clickable-area:nth-child(3) {
  clip-path: circle(4.5% at 86% 20.7%);
}
*/
.map-object#lamp.active {
  background-image: url('../images/map-objects/lamp-active.png');
}

.map-object#qr-board {
  background-image: url('../images/map-objects/qr-board.png');
  height: 7.4235%;
  left: 78.0952%;
  top: 66.7857%;
  width: 12.5624%;
  z-index: 30;
}
.map-object#qr-board .clickable-area {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.map-object#qr-code {
  background-image: url('../images/qr-code.png');
  height: 5.1020%;
  left: 79.8617%;
  top: 67.9449%;
  width: 9.0703%;
  z-index: 30;
}
.map-object#qr-board .clickable-area {
  /* clip-path: polygon(); */
}

.map-object#cubism-lamp {
  background-image: url('../images/map-objects/cubism-lamp.png');
  height: 12.2449%;
  left: 29.2517%;
  top: 27.3469%;
  width: 12.5624%;
  z-index: 18;
}
.map-object#cubism-lamp .clickable-area {
  clip-path: polygon(31% 100%, 23% 90%, 40% 73%, 38% 69%, 42% 63%, 37% 60%, 41% 54%, 37% 49%, 40% 44%, 37% 40%, 41% 34%, 37% 29%, 42% 18%, 33% 8%, 45% 1%, 58% 8%, 50% 18%, 54% 28%, 50% 34%, 53% 40%, 51% 44%, 54% 49%, 51% 54%, 53% 58%, 51% 63%, 55% 68%, 52% 73%, 71% 90%, 63% 100%);
}
.map-object#cubism-lamp.active {
  background-image: url('../images/map-objects/cubism-lamp-active.png');
}

.map-object#theater {
  background-image: url('../images/map-objects/theater.png');
  height: 24.7959%;
  right: 0%;
  top: 52.6276%;
  width: 51.3832%;
  z-index: 29;
}
.map-object#theater .clickable-area {
  clip-path: polygon(11% 98%, 13% 70%, 30% 70%, 30% 37%, 31% 30%, 33% 30%, 35% 23%, 42% 20%, 48% 18%, 52% 13%, 57% 11%, 57% 6%, 95% 6%, 96% 11%, 100% 13%, 100% 99%);
}
.map-object#theater.active {
  background-image: url('../images/map-objects/theater-active.png');
}

.map-object#radnice {
  background-image: url('../images/map-objects/radnice.png');
  height: 21.2500%;
  left: 41.3605%;
  top: 26.7347%;
  width: 28.1179%;
  z-index: 20;
}
.map-object#radnice .clickable-area {
  clip-path: polygon(24% 100%, 24% 37%, 22% 35%, 22% 30%, 25% 17%, 28% 29%, 36% 6%, 45% 27%, 47% 21%, 50% 30%, 48% 37%, 48% 67%, 52% 69%, 55% 57%, 59% 72%, 60% 100%);
}

.map-object#tree {
  background-image: url('../images/map-objects/tree.png');
  height: 22.8571%;
  left: 54.5579%;
  top: 25.2041%;
  width: 16.0544%;
  z-index: 20;
}
.map-object#tree .clickable-area {
  clip-path: polygon(0 87%, 45% 0, 55% 0, 98% 85%, 86% 95%, 17% 95%);
}
.map-object#tree.active {
  background-image: url('../images/map-objects/tree-active.png');
}

.map-object#charger {
  background-image: url('../images/map-objects/charger.png');
  height: 20.4847%;
  left: 9.0703%;
  top: 30.7143%;
  width: 34.2857%;
  z-index: 20;
}
.map-object#charger .clickable-area {
  clip-path: polygon(26% 100%, 26% 71%, 32% 71%, 33% 82%, 46% 74%, 92% 73%, 91% 100%);
}
.map-object#charger.active {
  background-image: url('../images/map-objects/charger-active.png');
}

.map-object#external-light {
  height: 14.5408%;
  left: 10.7483%;
  top: 30.6378%;
  width: 17.2336%;
}
.map-object#external-light .clickable-area {
  clip-path: polygon(46% 100%, 44% 8%, 0 8%, 0 0, 94% 0, 93% 8%, 54% 8%, 54% 100%);
}

.map-object#clock {
  background-image: url('../images/map-objects/clock.png');
  height: 18.0102%;
  left: 3.0839%;
  top: 32.9592%;
  width: 7.1655%;
  z-index: 20;
}
.map-object#clock .clickable-area {
  clip-path: polygon(10% 99%, 10% 22%, 42% 18%, 45% 29%, 61% 28%, 64% 0, 94% 4%, 92% 99%);
}
.map-object#clock.active {
  background-image: url('../images/map-objects/clock-active.png');
}

.map-object#fve {
  background-image: url('../images/map-objects/fve.png');
  height: 4.3622%;
  right: 0%;
  top: 45.8163%;
  width: 15.2834%;
}
.map-object#fve .clickable-area {
  /* clip-path: polygon(); */
}

.map-object#baba {
  background-image: url('../images/map-objects/baba.png');
  height: 7.7041%;
  left: 73.9229%;
  top: 39.2347%;
  width: 17.0975%;
  z-index: 20;
}
.map-object#baba .clickable-area {
  clip-path: polygon(6% 86%, 6% 25%, 19% 24%, 21% 10%, 29% 10%, 29% 1%, 48% 1%, 49% 10%, 79% 12%, 80% 39%, 88% 39%, 89% 52%, 79% 53%, 79% 69%, 83% 68%, 83% 97%, 13% 97%, 13% 86%);
}
.map-object#baba.active {
  background-image: url('../images/map-objects/baba-active.png');
}

.map-object#bridge {
  background-image: url('../images/map-objects/bridge.png');
  height: 13.1888%;
  left: 0%;
  top: 63.7245%;
  width: 72.8345%;
  z-index: 28;
}
.map-object#bridge .clickable-area {
  /* clip-path: polygon(0% 54%, 20% 52%, 20% 19%, 22% 15%, 24% 21%, 25% 53%, 58% 54%, 58% 45%, 58% 16%, 60% 13%, 61% 17%, 62% 45%, 63% 53%, 100% 55%, 89% 98%, 84% 79%, 77% 72%, 69% 81%, 65% 97%, 56% 98%, 52% 78%, 43% 70%, 33% 76%, 27% 97%, 19% 97%, 15% 78%, 7% 71%, 0% 78%); */
  clip-path: polygon(0% 54%, 20% 52%, 20% 19%, 22% 15%, 24% 21%, 25% 53%, 58% 54%, 58% 45%, 58% 16%, 60% 13%, 61% 17%, 62% 45%, 63% 53%, 78% 54%, 78% 60%, 78% 64%, 77% 72%, 69% 81%, 65% 97%, 56% 98%, 52% 78%, 43% 70%, 33% 76%, 27% 97%, 19% 97%, 15% 78%, 7% 71%, 0% 78%);
}

.map-object.bridge-lamp {
  height: 13.1888%;
  left: 0%;
  opacity: 0;
  pointer-events: none;
  top: 63.7245%;
  transition: all 1s;
  width: 72.8345%;
  z-index: 28;
}

.bridge-lamp#lamp-1 {
  background-image: url('../images/map-objects/bridge-light-1.png');
}
.bridge-lamp#lamp-2 {
  background-image: url('../images/map-objects/bridge-light-2.png');
}
.bridge-lamp#lamp-3 {
  background-image: url('../images/map-objects/bridge-light-3.png');
}

.bridge-lamp.active {
  opacity: 1;
}

.map-object#fence {
  background-image: url('../images/map-objects/fence.png');
  height: 17.3724%;
  left: 0%;
  top: 76.2755%;
  width: 100%;
  z-index: 30;
}
.map-object#fence .clickable-area {
  /* clip-path: polygon(); */
}

.map-object#thmp-logo {
  background-image: url('../images/thmp-logo.svg');
  bottom: 2.9337%;
  height: 4.6939%;
  right: 4.0816%;
  width: 29.6599%;
  z-index: 40;
}

/* * * Modal * * */
#modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  bottom: 0;
  display: none;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: all var(--transition-duration);
  transition-behavior: allow-discrete;
  z-index: 200;
}

.modal-visible #modal-overlay {
  display: block;
  opacity: 1;
  pointer-events: auto;

  @starting-style {
    opacity: 0;
  }
}

.modal-visible #boat,
.modal-visible #lamp-lighter,
.modal-visible #animation-tom-bubble-cs,
.modal-visible #animation-tom-bubble-en,
.modal-visible #animation-tom-bubble-es,
.modal-visible #grafiti-boat,
[data-tom-bubble="active"] #grafiti,
[data-tom-bubble="active"] #grafiti-boat,
[data-animation-row="bottom"] #animation-tom-bubble-cs,
[data-animation-row="bottom"] #animation-tom-bubble-en,
[data-animation-row="bottom"] #animation-tom-bubble-es {
  opacity: 0 !important;
}

img {
  max-width: 100%;
}

.modal {
  background-color: rgba(100, 100, 100, 0.9);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  color: #fff;
  display: none;
  left: 50%;
  height: 154vw;
  max-height: 95vh;
  opacity: 0;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -30%);
  transition: all var(--transition-duration);
  transition-behavior: allow-discrete;
  width: 82.4vw;
  z-index: 300;
}

.modal::after {
  background-color: var(--color-blue);
  bottom: 0;
  content: '';
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 5vw;
}

.modal-content {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.modal.visible {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%);
  @starting-style {
    opacity: 0;
    transform: translate(-50%, -30%);
  }
}

.text-blue {
  color: var(--color-blue);
}

.text-yellow {
  color: var(--color-yellow);
}

.close-modal {
  background: none;
  border: none;
  cursor: pointer;
  height: 5vw;
  right: -7vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 5vw;
  z-index: 2;
}

.close-modal::after,
.close-modal::before {
  background-color: #fff;
  border-radius: 0.25vw;
  content: '';
  height: 0.5vw;
  left: 0%;
  position: absolute;
  top: calc(50% - 0.25vw);
  transform-origin: 50% 50%;
  width: 5vw;
}

.close-modal::after {
  transform: rotate(-45deg);
}

.close-modal::before {
  transform: rotate(45deg);
}

.modal-header {
  left: 5.09vw;
  position: absolute;
  top: 12.95vw;
}

.modal-header h1 {
  font-size: 7vw;
  font-weight: normal;
  line-height: 1.05;
  margin: 0;
}

.modal-header h2 {
  font-size: 4.7vw;
  font-weight: normal;
  line-height: 1.05;
  margin: 0;
}

.modal-text {
  font-size: 2.45vw;
  left: 5.09vw;
  line-height: 1.1;
  position: absolute;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  top: 34.26vw;
}

#modal-external-light .modal-header {
  top: 8.15vw;
}
#modal-external-light .modal-text {
  top: 21.76vw;
}
#modal-external-light .modal-content-panel:nth-child(1) .modal-text {
  width: 41.7vw;
}
#modal-external-light .modal-content-panel:nth-child(2) .modal-text {
  width: 69.4vw;
}
#modal-external-light .modal-content-panel:nth-child(3) .modal-text {
  width: 73.15vw;
}

#modal-charles-bridge .modal-header {
  top: 8.05vw;
}
#modal-charles-bridge .modal-text {
  top: 27.8vw;
}
#modal-charles-bridge .modal-content-panel:nth-child(1) .modal-text {
  width: 41.7vw;
}
#modal-charles-bridge .modal-content-panel:nth-child(2) .modal-text {
  width: 39.8vw;
}

#modal-christmas-tree .modal-header {
  top: 8.55vw;
}
#modal-christmas-tree .modal-text {
  top: 27.3vw;
  width: 64.8vw;
}

#modal-cubism-lamp .modal-header {
  top: 8.05vw;
}
#modal-cubism-lamp .modal-text {
  top: 21.76vw;
}
#modal-cubism-lamp .modal-content-panel:nth-child(1) .modal-text {
  width: 33.8vw;
}
#modal-cubism-lamp .modal-content-panel:nth-child(2) .modal-text {
  width: 50.93vw;
}

#modal-clock .modal-header {
  top: 8.05vw;
}
#modal-clock .modal-text {
  top: 21.76vw;
  width: 37.5vw;
}

#modal-mikulas .modal-header {
  top: 8.05vw;
}
#modal-mikulas .modal-text {
  top: 27.3vw;
}
html[lang="es"] #modal-mikulas .modal-text {
  top: 34.3vw;
}
#modal-mikulas .modal-content-panel:nth-child(1) .modal-text {
  width: 37.3vw;
}
#modal-mikulas .modal-content-panel:nth-child(2) .modal-text {
  width: 41.7vw;
}

#modal-petrin-tower .modal-header {
  top: 8.05vw;
}
#modal-petrin-tower .modal-text {
  top: 21.76vw;
}
#modal-petrin-tower .modal-content-panel:nth-child(1) .modal-text {
  width: 34.7vw;
}
#modal-petrin-tower .modal-content-panel:nth-child(2) .modal-text {
  width: 61.0vw;
}

#modal-theater .modal-header {
  top: 8.05vw;
}
#modal-theater .modal-text {
  top: 22.2vw;
  width: 67.6vw;
}

#modal-bus-stop .modal-header {
  top: 8.12vw;
}
#modal-bus-stop .modal-text {
  top: 21.7vw;
}
#modal-bus-stop .modal-content-panel:nth-child(1) .modal-text {
  width: 67.5vw;
}
#modal-bus-stop .modal-content-panel:nth-child(2) .modal-text {
  width: 67.5vw;
}

#modal-semafor .modal-header {
  top: 8.05vw;
}
#modal-semafor .modal-text {
  width: 56.5vw;
  top: 21.8vw;
}
html[lang="en"] #modal-semafor .modal-text {
  top: 28.8vw;
}


#modal-cameras .modal-header {
  top: 8.05vw;
}
#modal-cameras .modal-text {
  top: 21.8vw;
  width: 50vw;
}

#modal-charger .modal-header {
  top: 8.1vw;
}
#modal-charger .modal-text {
  top: 26.85vw;
}
#modal-charger .modal-content-panel:nth-child(1) .modal-text {
  width: 53.2vw;
}

#modal-energy .modal-header {
  top: 8.1vw;
}
#modal-energy .modal-text {
  top: 21.7vw;
}
#modal-energy .modal-content-panel:nth-child(1) .modal-text {
  width: 39.35vw;
}
#modal-energy .modal-content-panel:nth-child(2) .modal-text {
  width: 56.5vw;
}

#modal-baba .modal-header {
  top: 59.04vw;
}
#modal-baba .modal-text {
  top: 68.8vw;
  width: 72.2vw;
}

.modal-languages {
  display: flex;
  flex-direction: column;
  font-size: 0;
  right: -8.31vw;
  position: absolute;
  top: 75%;
  transform: translateY(-50%);
  z-index: 2;
}

.modal-languages a {
  padding: 1.71vw;
}

.modal-background {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.modal-languages img {
  width: 4.63vw;
}

.modal-content-panels {
  display: flex;
  flex-direction: row;
  height: 100%;
  justify-content: stretch;
  transform: translateX(0);
  transition: all .3s;
}

[show-slide="2"] .modal-content-panels {
  transform: translateX(-100%);
}

[show-slide="3"] .modal-content-panels {
  transform: translateX(-200%);
}

.modal-content-panel {
  flex-shrink: 0;
  position: relative;
  width: 100%;
}

.modal-back,
.modal-more {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 2.45vw;
  padding: 0.5vw 0 0.5vw 0;
  position: relative;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.modal-back {
  margin-right: 4vw;
  padding-left: 5.5vw;
}

.modal-more {
  padding-right: 5.5vw;
}

.modal-back::after,
.modal-back::before,
.modal-more::after,
.modal-more::before {
  background-color: #fff;
  border-radius: 0.125vw;
  content: '';
  height: 0.25vw;
  position: absolute;
  transform-origin: 50% 50%;
  width: 2vw;
}

.modal-back::after {
  left: 1.5vw;
  top: calc(50% - 0.65vw);
  transform: rotate(-45deg);
}

.modal-back::before {
  left: 1.5vw;
  top: calc(50% + 0.65vw);
  transform: rotate(45deg);
}

.modal-more::after {
  right: 1.5vw;
  top: calc(50% + 0.65vw);
  transform: rotate(-45deg);
}

.modal-more::before {
  right: 1.5vw;
  top: calc(50% - 0.65vw);
  transform: rotate(45deg);
}

#app-store-phone {
  background-image: url('../images/app-store-phone.png');
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -14vw;
  height: 70vw;
  left: -7.8vw;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: all .3s;
  transform: scale(1.5) translateY(50%);
  width: 46vw;
}

.modal.visible[show-slide="3"] #app-store-phone {
  opacity: 1;
  transform: scale(1) translateY(0%);
}

.embedded-pdf,
.embedded-website {
  border: none;
  width: 100%;
  height: 100%;
}

.two-columns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.two-columns > .column {
  width: 45%;
}

.modal-text h3 {
  font-size: 3vw;
  margin: 0 0 1vw;
  text-transform: uppercase;
}

.modal-text ul {
  margin-left: 0;
  padding-left: 2vw;
}

.modal-text ul > li {
  margin-bottom: 1vw;
}

.modal-09-u3,
.modal-09-u2 {
  position: relative;
}

.modal-09-u3 .modal-back {
  height: 4vw;
  left: 1vw;
  position: absolute;
  top: 78.3vw;
  width: 10vw;
}

.modal-12-u2 .modal-back {
  height: 4vw;
  left: 3vw;
  position: absolute;
  top: 65.6vw;
  width: 10vw;
}

/* * Animations * */
.animation-element {
  pointer-events: none;
  transition: opacity .3s;
}

#lamp-lighter {
  bottom: 16%;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 72.5%;
}

@keyframes boat {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}

#boat {
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: boat;
  animation-timing-function: ease-in;

  bottom: 3%;
  pointer-events: none;
  position: absolute;
  width: 80%;
  z-index: 30;
}

#animation-run-clap,
#animation-run-click,
#animation-run-remote,
#animation-run-snap,
#animation-run-wand {
  left: 0;
  position: absolute;
}

#animation-run-clap[data-row="bottom"],
#animation-run-click[data-row="bottom"],
#animation-run-remote[data-row="bottom"],
#animation-run-snap[data-row="bottom"],
#animation-run-wand[data-row="bottom"] {
  top: 70%;
  width: 45%;
  z-index: 35;
}

#animation-run-clap[data-row="middle"],
#animation-run-click[data-row="middle"],
#animation-run-remote[data-row="middle"],
#animation-run-snap[data-row="middle"],
#animation-run-wand[data-row="middle"] {
  top: 40%;
  width: 30%;
  z-index: 25;
}

#animation-run-click[data-row="middle-baba"] {
  top: 37%;
  width: 30%;
  z-index: 25;
}

#animation-run-clap[data-row="top"],
#animation-run-click[data-row="top"],
#animation-run-remote[data-row="top"],
#animation-run-snap[data-row="top"],
#animation-run-wand[data-row="top"] {
  top: 17%;
  width: 24%;
  z-index: 15;
}

#animation-car-left {
  left: -35%;
  position: absolute;
}
#animation-car-left[data-row="middle"] {
  top: 29%;
  width: 50%;
  z-index: 25;
}

#animation-car-right {
  right: -35%;
  position: absolute;
}
#animation-car-right[data-row="middle"] {
  top: 29%;
  width: 50%;
  z-index: 25;
}
#animation-car-right[data-row="middle-2"] {
  top: 19.5%;
  width: 50%;
  z-index: 19;
}

#animation-tom-bubble-cs,
#animation-tom-bubble-en,
#animation-tom-bubble-es {
  position: absolute;
  top: 57%;
  width: 45%;
  z-index: 35;
}

#grafiti {
  left: 56%;
  opacity: 0;
  position: absolute;
  top: 66%;
  z-index: 29;
  width: 25%;
}
#grafiti.active {
  opacity: 1;
}

#grafiti-boat {
  bottom: 1%;
  left: -65%;
  position: absolute;
  z-index: 29;
  width: 80%;
}

.ripple {
  background-color: #000;
  border-radius: 50%;
  height: 0;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  transition: all .3s;
  width: 0;
  z-index: 1000;
}
.ripple.active {
  height: 10vw;
  opacity: 0;
  width: 10vw;
}