:root {
  --width : 0px;
  --height : 0px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  /* font-size: calc(var(--size) * 0.015); */
}

body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	line-height: 24px;
	overscroll-behavior: none;
  /* min-height: 700px; */
  font-family: 'NittiGrotesk' !important;
}

/* @media only screen and (max-width: 1000px) {
  html {
    font-size: 10px !important;
  }
  body {
    /* min-height: 1000px; */
  }
} */


.webgl-canvas {
  display: none;
  position: relative;
  z-index: -2;
}

.loading-cont {
  --loading-width : calc(var(--size) * 0.15);
  --loading-height : calc(var(--size) * 0.03);
  width : var(--loading-width);
  height : var(--loading-height);
  position : absolute;
  top : calc((var(--height) * 0.4));
  left : calc((var(--width) * 0.5) - (var(--loading-width) * 0.5));
  font-family: 'NittiGrotesk-Bold';
  font-size: calc(var(--size) * 0.014);
}

.loading-border {
  width : var(--loading-width);
  height : var(--loading-height);
  border : calc(var(--size) * 0.003) solid black;
  display : grid;
  justify-content: center;
  align-items: center;
}

.loading-bar {
  width : calc(var(--loading-width) - (var(--loading-width) * 0.09));
  height : calc(var(--loading-height) - (var(--loading-height) * 0.45));
}

.loading-bar-moving {
  width : 0%;
  height : 100%;
  background-color: #fdd205;
}

/* .progressbar {
  font-size: 1.5rem;
  margin: auto;
  margin-top: 5rem;
  background-color: white;
  font-family: 'NittiGrotesk-Bold';
}

.progressbar .bar {
  width: 0%;
  height: 2.5rem;
  
  background-color: #fdd205;
} */

.click-buttons {
  display: none;
  z-index: 1;
}

#discover-more {
  position: relative;
  z-index: 1;
}

.click-buttons .discover-more a {
  position: absolute;
  top: calc((var(--height) * 0.5) - 40px);
  right: 15%;
  font-size: 2.75rem;
  font-family: 'NittiGrotesk-Bold';
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 10px;
  color: #fff;
  background-color: #fdd205;
  border: 3px solid #fdd205;
}
.click-buttons .discover-more a:hover {
  color: #000;
  background-color: #fff;
}

@media only screen and (max-width: 1000px) {
  .click-buttons .discover-more a {
    /* top: 35rem; */
    /* right: 10%; */
  }
}

.click-buttons .rotate a {
  position: absolute;
  display: flex;
  align-items: center;
  top: 20rem;
  left: 5%;
  font-family: 'NittiGrotesk-Bold';
  font-size: 1.9rem;
  color: #000;
  text-decoration: none;
}

.click-buttons .rotate a img {
  height: 150px;
  transition: all 0.3s;
}

.click-buttons .rotate a:hover img {
  height: 165px;
}

.click-buttons .button-bar {
  position: absolute;
  top : calc(var(--height) - 100px);
  width: 800px;
  left: calc((100vw - 800px) / 2);
}
@media only screen and (max-width: 1000px) {
  .click-buttons .button-bar {
    width: 80%;
    left: 10%;
  }
}

.click-buttons .button-bar hr {
  border-width: 0px;
  opacity: 1;
}

.dial-hitbox {
  width : 130px;
  height : 150px;
  position : absolute;
  top : -70px;
  left : -60px;
  z-index : 3;
}

.button-bar .dial {
  position: absolute;
  left: 12.5%;
  top: 0px;
}

.button-bar .movement {
  position: absolute;
  left: 37.5%;
  top: 0px;
}

.button-bar .explosion {
  position: absolute;
  left: 62.5%;
  top: 0px;
}

.button-bar .organs {
  position: absolute;
  left: 87.5%;
  top: 0px;
}

.button-bar .current {
  display: block;
  position: absolute;
}

.button-bar .cur-spot {
  position: absolute;
  left: -10px;
  top: 7px;
  width: 20px;
  height: 20px;
  background-color: #fdd205;
  border-radius: 100%;
  border: 2px solid #fff;
}
@media only screen and (max-width: 1000px) {
  .button-bar .cur-spot {
    /* top: 1px; */
  }
}

.current hr {
  width: 3px;
  height: 35px;
  position: absolute;
  top: -25px;
  left: -1px;
  margin: 0px; 
  background-color: #fdd205;
}

.current .title {
  position: absolute;
  border: 3px solid #fdd205;
  width: 10rem;
  font-size: 1.5rem;
  line-height: 20px;
  text-align: center;
  padding: 0.5rem;
  margin: 0px;
  top: -25px;
  transform: translateX(-50%) translateY(-100%);
}

.button-bar .left-bar {
  position: absolute;
  height: 3px;
  width: 12.5%;
  top: 0px;
  opacity: 1;
  background-color: #B2B3B4;
}

.button-bar .backward {
  display: block;
  position: absolute;
  cursor: pointer;
}

.backward .backward-spot {
  position: absolute;
  left: -10px;
  top: 7px;
  width: 20px;
  height: 20px;
  outline: 2px solid #fff;
  background-color: #B2B3B4;
  border-radius: 100%;
  transform-origin: center;
  transition: transform 0.3s;
  z-index : 2;
}
@media only screen and (max-width: 1000px) {
  .button-bar .backward-spot {
    top: 0px;
  }
}

.backward hr {
  position: absolute;
  width: 2px;
  height: 35px; 
  top: 20px;
  left: -1px;
  margin: 0px; 
  background-color: #B2B3B4;
  z-index : 1;
}

.backward .title {
  position: absolute;
  font-size: 1.3rem;
  width: 10rem;
  color: #B2B3B4;
  line-height: 20px;
  text-align: center;
  padding: 0.5rem;
  margin: 0px;
  top: 55px;
  transform: translateX(-50%);
}

.button-bar .forward {
  display: block;
  position: absolute;
  cursor: pointer;
}

.forward .forward-spot {
  position: absolute;
  left: -10px;
  top: 7px;
  width: 20px;
  height: 20px;
  outline: 2px solid #fff;
  background-color: #fff;
  border-radius: 100%;
  border: 4px solid #000;
  transform-origin: center;
  transition: transform 0.3s;
  z-index : 2;
}

.forward hr {
  position: absolute;
  width: 2px;
  height: 35px; 
  top: 25px;
  left: -1px;
  margin: 0px; 
  background-color: #000;
}
@media only screen and (max-width: 1000px) {
  .button-bar .forward-spot {
    /* top: 0px; */
  }
  .forward hr {
    /* top: 20px; */
  }
}

.forward .title {
  position: absolute;
  font-size: 1.3rem;
  width: 10rem;
  color: #000;
  line-height: 20px;
  text-align: center;
  padding: 0.5rem;
  margin: 0px;
  top: 55px;
  transform: translateX(-50%);
}

.POI .POIs {
  position: absolute;
  background-color: #fdd205;
  /* width: 28px;
  height: 28px; */
  width: calc(var(--height) * 0.015);
  height: calc(var(--height) * 0.015);

  border-radius: 100%;
  outline: 0.3rem solid #fff;
  cursor: pointer;
  transform: translateX(-50%) translateY(-50%);
  z-index: 5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.POIs .popup-tooltip {
  visibility: hidden;
  background-color: #fdd205;
  color: #fff;
  text-align: center;
  font-family: 'NittiGrotesk';
  font-size: 1.7rem;
  padding: 9px;
  position: absolute;
  width: fit-content;
  display : block;
  white-space: nowrap;
  /* outline: 3px solid #fff; */
  z-index: 100;
}

.POIs-hitbox {
  position : absolute;
  /* opacity : 0.5; */
  width: calc(var(--height) * 0.06);
  height: calc(var(--height) * 0.06);
  top: calc((var(--height) * -0.03) + (var(--height) * 0.0075));
  left: calc((var(--height) * -0.03) + (var(--height) * 0.0075));
  display : grid;
  justify-content: center;
  align-items: center;
}

.POIS-round {
  width: calc(var(--height) * 0.03);
  height: calc(var(--height) * 0.03);
  background : #fdd205;
  border-radius: 100%;
  outline: 3px solid #fff;
}

.POIs-line {
  width : 5rem;
  height : 0.15rem;
  transform-origin: left;
  background-color: #fdd205;
  position : absolute;
  /* top : 7px;
  left : 9px; */
  top: calc(var(--height) * 0.0075);
  left: calc(var(--height) * 0.0075);

  pointer-events: none;
  opacity : 0;
  transition: opacity 1s;
  /* z-index: 15; */
}

.POIs-line-up {
  transform : rotate(315deg);
}

.POIs-line-down {
  transform : rotate(45deg);
}

.POIs-line-left {
  transform : rotate(135deg);
}

.POIs-line-right {
  transform : rotate(45deg);
}

.POIs-line-up-organ {
  transform : rotate(315deg);
}

.POIs-line-remontoire-organ {
  transform : rotate(37deg);
}

.POIs-line-down-organ {
  transform : rotate(45deg);
}

.POIs-line-left-organ {
  transform : rotate(215deg);
}

.POIs-line-right-organ {
  transform : rotate(45deg);
}

/* .POIs .popup-tooltip::after {
  content: "";
  position: absolute;
  border-width: 10px;
  border-style: solid;
}
@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip::after {
    border-width: 5px;
  }
} */

.POIs .popup-tooltip-up {
  line-height: 2rem;
  bottom: 2.8rem;
  left: 0.7rem;
  transform: translateX(2rem);
}
/* .POIs .popup-tooltip-up::after {
  top: 100%;
  left: 50%;
  margin-left: -12px;
  border-color: #fdd205 transparent transparent transparent;
} */
@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip-up {
    left: 1rem;
  }
  /* .POIs .popup-tooltip-up::after {
    margin-left: -4px;
  } */
}

.POIs .popup-tooltip-down {
  line-height: 2rem;
  top: 2.8rem;
  left: 0.7rem;
  transform: translateX(2rem);
}
/* .POIs .popup-tooltip-down::after {
  bottom: 100%;
  left: 50%;
  margin-left: -11px;
  border-color: transparent transparent #fdd205 transparent;
} */
@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip-down {
    left: 1rem;
  }
  /* .POIs .popup-tooltip-down::after {
    margin-left: -4px;
  } */
}

.POIs .popup-tooltip-left {
  line-height: 2rem;
  right: 2.8rem;
  top: 0.7rem;
  transform: translateY(2rem);
}
/* .POIs .popup-tooltip-left::after {
  top: 50%;
  left: 100%;
  margin-top: -11px;
  border-color: transparent transparent transparent #fdd205;
} */
@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip-left {
    top: 1rem;
  }
  /* .POIs .popup-tooltip-left::after {
    margin-top: -5px;
  } */
}

.POIs .popup-tooltip-right {
  line-height: 2rem;
  left: 2.8rem;
  top: 0.7rem;
  transform: translateY(2rem);
}
/* .POIs .popup-tooltip-right::after {
  top: 50%;
  right: 100%;
  margin-top: -11px;
  border-color: transparent #fdd205 transparent transparent;
} */
@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip-right {
    top: 1rem;
  }
  /* .POIs .popup-tooltip-right::after {
    margin-top: -5px;
  } */
}

.POIs {
  opacity : 0;
  transition : opacity 0.4s;
}

.POIs .popup-tooltip-organs {
  visibility: hidden;
  color: #fff;
  font-family: 'NittiGrotesk';
  position: absolute;
  width: 573px;
  z-index: 10;
}

/* .POIs .popup-tooltip-organs::after {
  content: "";
  position: absolute;
  border-width: 10px;
  border-style: solid;
} */

.POIs .popup-tooltip-organs video {
  width: 573px;
  height: 323px;
  border: 3px solid #fdd205;
  background-color: #fff;
  margin-bottom: 3px;
}
.POIs .popup-tooltip-organs .caption {
  width: 573px;
  font-size: 18px;
  background-color: #fdd205;
  /* border: 3px solid #fff; */
  padding: 15px 20px;
  line-height: 25px;
}
.POIs .popup-tooltip-organs .caption-title {
  font-weight: bold;
  font-size: 27px;
}

.video-reset-cont {
  position : absolute;
  width : 3rem;
  height : 3rem;
  background-image : url(./imgs/reset.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top : calc(323px - 3.2rem);
  left : calc(573px - 3rem);
}

@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip-organs {
    width: 36rem;
  }
  .POIs .popup-tooltip-organs video {
    width: 36rem;
    height: 20rem;
  }
  .POIs .popup-tooltip-organs .caption {
    width: 36rem;
  }
  /* .POIs .popup-tooltip-organs::after {
    border-width: 5px;
  } */
  .video-reset-cont {
    top : calc(20rem - 3.2rem);
    left : calc(36rem - 3rem);
  }
  
}

.POIs .popup-tooltip-organs-up {
  line-height: 2rem;
  bottom: 2.8rem;
  left: 0.7rem;
  transform: translateX(5.5%);
}

.POIs .popup-tooltip-organs-remontoire {
  line-height: 2rem;
  bottom: -6.2rem;
  left: 0.7rem;
  transform: translateX(5.5%);
}

/* .POIs .popup-tooltip-organs-up::after {
  top: 100%;
  left: 50%;
  margin-left: -11px;
  border-color: #fdd205 transparent transparent transparent;
} */
@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip-organs-up {
    left: 1rem;
  }
  /* .POIs .popup-tooltip-organs-up::after {
    margin-left: -4px;
  } */
}

.POIs .popup-tooltip-organs-left {
  line-height: 2rem;
  right: 2.8rem;
  top: 0.7rem;
  transform: translateY(-106%);
}
/* .POIs .popup-tooltip-organs-left::after {
  top: 85%;
  left: 100%;
  margin-top: -12px;
  border-color: transparent transparent transparent #fdd205;
} */
@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip-organs-left {
    top: 1rem;
  }
  /* .POIs .popup-tooltip-organs-left::after {
    margin-top: -3px;
  } */
}

.POIs .popup-tooltip-organs-right {
  line-height: 2rem;
  left: 2.8rem;
  top: 0.8rem;
  /* transform: translateY(-85%); */
}
/* .POIs .popup-tooltip-organs-right::after {
  top: 85%;
  right: 100%;
  margin-top: -12px;
  border-color: transparent #fdd205 transparent transparent;
} */
@media only screen and (max-width: 1000px) {
  .POIs .popup-tooltip-organs-right {
    top: 1rem;
  }
  /* .POIs .popup-tooltip-organs-right::after {
    margin-top: -3px;
  } */
}

.POIs .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

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

.POI-click {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.infos-hover {
  position : absolute;
  font-size: calc(var(--width) * 0.011);
  bottom : calc(var(--width) * 0.003);
  display : flex;
  color : #737373;
}

.next {
  left : calc(var(--width) * -0.018);
}

.prev {
  left : calc(var(--width) * -0.034);
}

.triangle {
  background-image : url(./imgs/triangle.svg);
  background-size: contain;
  width : calc(var(--width) * 0.015);
  height : calc(var(--width) * 0.015);
  margin-top : calc(var(--width) * 0.001);
  background-position: center;
  background-repeat: no-repeat;
  transition : all 0.3s;
}

.triangle2 {
  background-image : url(./imgs/triangle2.svg);
}