@charset "UTF-8";

html{
  background-color:white;
  cursor: none;
}

body{
transition: background-color .8s ease-in-out;
cursor: none;
}

@font-face {
  font-family: "Edu Monument Grotesk";
  src: url("../fonts/ABCMonumentGrotesk-Regular.woff") format("woff")
 }
 @font-face {
  font-family: "Terminal";
  src: url("../fonts/terminal-grotesque-webfont.woff") format("woff")
 }

 @font-face {
  font-family: "Tiny";
  src: url("../fonts/TINY5x3-80.woff") format("woff")
 }

 @font-face {
  font-family: "Selecta";
  src: url("../fonts/Selecta-Medium.woff") format("woff")
 }
 @font-face {
  font-family: "Build";
  src: url("../fonts/ESBuild-Regular.woff") format("woff")
 }
 

body::-webkit-scrollbar {
  display: none;
}

.pagefin::-webkit-scrollbar {
  display: none;
}

#sitesuivant{
  background-color: var(--main);
  font-family: "Build";
  font-size: 1.5em;
  color: white;
  width: 5em;
  height: 3em;
  border-radius: 50px;
  border: 0px;
  position: absolute;
  right: 2vw;
  top: 885vh;
  z-index: +999;
  cursor: none;
}
#sitesuivant:hover{
  scale: 1.15;
}

#sitesuivant p{
  position: relative;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}

#suiveur {
  width: 25px;
  height: 25px;
  transform: translate(-50%, -50%);
  background-color: var(--main);
  position: fixed;
  z-index: +999999;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: multiply;
}

:root {
  --main: #32e252;
  --2: #bababa;
}
.pagefinoff{
display: none;
} 

.pagefin{
  display: block;
background: rgba(255, 255, 255, 0.39);
border-radius: 16px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(55px);
border: 1px solid rgba(255, 255, 255, 0.9);
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: +9999;
  left: 50%;
  /* border-radius: 50px; */
  top: 50%;
  overflow-Y: scroll;
  transform: translate(-50%, -50%);
}   

.pagefinpagefinoff{
  display: none;
} 

.refresh{
  text-align: center;
  background-color: var(--2);
  font-family: "Build";
  font-size: 2vw;
  color: black;
  width: 8em;
  transform: translate(-50%, 20%);
  height: 1.5em;
  border-radius: 50px;
  position: relative;
  margin-bottom: 6vh;
 left: 50%;
  top: 0%;
  z-index: +999;
  text-decoration: none;
}

.pagefin p{
  font-family: Build;
  position: relative;
  text-align: left;
  width: 75%;
  left: 50%;
  transform: translate(-50%);
margin: 5%;
  font-size: 3em;
}

.refresh:hover{
  scale: 1.15;
}

.refresh p{
  position: relative;
  font-size: 1em;
  font-family: "Build";
  top: 50%;
  width: 100vw;
  text-align: left;
  color: black;
  transform: translate(-7.5%,-39.75%);
  font-size:  1em;
}

.page0{
  /* display: none; Todo remove */
  overflow: hidden;
  background: rgba(255, 255, 255, 0.29);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
top: 0%;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: +99999;
  left: 0%;
  opacity: 100%;

  transition: .5s ease-in-out;
}

.page0on{
opacity: 0%;
  transition: .5s ease-in-out;
  pointer-events: none;
}

.page1{
  /* display: none; Todo remove */
  /* background: linear-gradient(90deg, var(--main) 0%, rgba(255,255,255,1) 9%, rgba(255,255,255,1) 91%, var(--main) 100%); */
background-color: white;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: +9999;
  left: 0%;
}
.page1_on{
transform: translate(-100%);
}

.link{
  background-color: var(--main);
  font-family: "Build";
  font-size: 2vw;
  color: white;
  width: 3em;
  height: 2em;
  border-radius: 50px;
  position: fixed;
  right: 2vw;
  top: 50vh;
  transform: translateY(-50%);
  z-index: +999;
  /* cursor: pointer; */
}
.link:hover{
  scale: 1.15;
}

.link p{
  position: relative;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
}
/* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */
.page2{
  position: fixed;
  /* background: linear-gradient(#ffffff,var(--main) 150%); */
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* border: 1px solid red; */
}

.immobile{
  /* display: none; */
position: relative;
width: 30%;
height: 100%;
background-color: var(--main);
opacity: 100%;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
  z-index: +99999999;

  /* border: 1px solid blue; */

}
.container-right {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* background-color: rgba(255, 0, 255, 0.39); */
  /* background-image: linear-gradient(90deg, red, yellow); */
  /* border: 10px solid black; */
  overflow: hidden;
}

.test {
  font-size: 10em;
}

/* 
.degrade{
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: +999;
  background: linear-gradient(#93363600, #6c1d1d00);
} */

.iamsticky {
  left: 20%;
  position: sticky;
  top: 0;
}

.space{
  width: 100%;
  height: 150vh;
  background: linear-gradient(#ffffff00, #ffffff00);
  filter: opacity(.12);
}

.plan{
  width: 100%;
  height: 10vh;
}
.infoplan1{
  position:fixed;
  left: 83.5%;
  top: 25.25vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.numeroplan1{
  position:fixed;
  left: 73.25%;
  top: 25.25vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.infoplan2{
  position:fixed;
  left: 38%;
  top: 16vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.numeroplan2{
  position:fixed;
  left: 31.25%;
  top: 16vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.infoplan3{
  position:fixed;
  left: 42.15%;
  top: 51.25vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.numeroplan3{
  position:fixed;
  left: 50.75%;
  top: 51.25vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.infoplan4{
  position:fixed;
  left: 67.5%;
  top: 60vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.numeroplan4{
  position:fixed;
  left: 60.15%;
  top: 60vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.infoplan5{
  position:fixed;
  left: 80.75%;
  top: 86.5vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}
.numeroplan5{
  position:fixed;
  left: 74.25%;
  top: 86.5vh;
  font-size: 2em;
  transform: translate(-50%);
  font-family: "Build";
}

.rond-anim{
  position: absolute;
  top: 220vh;
  left: 50%;
  width: 10.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  animation: anim 3s infinite 0s forwards; 
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 
.rond-anim2{
  position: absolute;
  top: 370vh;
  left: 50%;
  width: 10.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  animation: anim 3s infinite 0s forwards;
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

.rond-anim3{
  position: absolute;
  top: 620vh;
  left: 50%;
  width: 10.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  animation: anim 3s infinite 0s forwards;
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 

.rond-anim4{
  position: absolute;
  top: 720vh;
  left: 50%;
  width: 10.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  animation: anim 3s infinite 0s forwards;
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 
.rond-anim5{
  position: absolute;
  top: 870vh;
  left: 50%;
  width: 10.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  animation: anim 3s infinite 0s forwards;
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 

@keyframes anim {
  0%{
    left: 23.5%;
  }
  50%{
left: 90%;
  }
  100%{
    left: 23.5%;
  }
}

.trait1{
  position: absolute;
  width: 75vw;
  height: 3px;
  left: 0vw;
  top: 27.5vh;
  background: #000000;
  transform: rotate(-7deg);
  z-index: -1;
}
.trait2{
  position: absolute;
  width: 27vw;
  height: 3px;
  left: -1vw;
  top: 44.75vh;
  background: #000000;
  transform: rotate(20.5deg);
  z-index: -1;
}
.trait3{
  position: absolute;
  width: 27vw;
  height: 3px;
  left: 24vw;
  top: 61.75vh;
  background: #000000;
  transform: rotate(20.5deg);
  z-index: -1;
}
.trait4{
  position: absolute;
  width: 52vw;
  height: 3px;
  left: 50vw;
  top: 78.75vh;
  background: #000000;
  transform: rotate(10.25deg);
  z-index: -1;
}

h1{
  position:fixed;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  font-family: "Build";
  font-size: 5vw;
  z-index: 4;
  /* transform: translate(-50%); */
}
h2{
  position:fixed;
  left: 70%;
  top: 0;
  color: var(--main);
  text-align: center;
  transform: translate(10vw, 15%);
  font-family: "Build";
  font-size: 5vw;
  z-index: 4;
  /* transform: translate(-50%); */
}


h3{
  position:fixed;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  font-family: "Build";
  font-size: 5vw;
  z-index: 4;
  /* transform: translate(-50%); */
}






.progress-bar {
  position: fixed;
  top: .75%;
  transform: translateY(0%);
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--main);
  z-index: 998;
  display: none;
}

.spacing {
  position: relative;
  width: 5%;
  height: 15vh;
}
.spacing2 {
  position: relative;
  left: 20%;
  width: 5%;
  height: 20vh;
}
/* .step01 p{
  color: #32e252;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}
.step02 p{
  color: #32e252;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}
.step03 p{
  color: #32e252;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}
.step04 p{
  color: #32e252;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}
.step05 p{
  color: #32e252;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
} */

.step01{
  position: fixed;
  top: 17.75%;
  left: 17.75%;
  width: 30px;
  transform: translate(-50%, -50%);
  height: 30px;
  border-radius: 50%;
  background-color: black;
  z-index: 999;
  filter: blur(1px);
  font-family: "Build";
}
.step02{
  position: fixed;
  top: 47.75%;
  left: 9.45%;
  width: 30px;
  transform: translate(-50%, -50%);
  height: 30px;
  border-radius: 50%;
  background-color: black;
  z-index: 999;
  filter: blur(1px);
  font-family: "Build";
}
.step03{
  position: fixed;
  top: 61%;
  left: 11%;
  width: 30px;
  transform: translate(-50%, -50%);
  height: 30px;
  border-radius: 50%;
  background-color: black;
  z-index: 999;
  filter: blur(1px);
  font-family: "Build";
}
.step04{
  position: fixed;
  top: 11.25%;
  left: 3.25%;
  width: 30px;
  transform: translate(-50%, -50%);
  height: 30px;
  border-radius: 50%;
  background-color: black;
  z-index: 999;
  filter: blur(1px);
  font-family: "Build";
}
.step05{
  position: fixed;
  top: 91.75%;
  left: 18.5%;
  width: 30px;
  transform: translate(-50%, -50%);
  height: 30px;
  border-radius: 50%;
  background-color: black;
  z-index: 999;
  filter: blur(1px);
  font-family: "Build";
}

.step1{
  position: fixed;
  top: 26.75%;
  left: 75%;
  width: 20px;
  transform: translate(-50%, -50%);
  height: 20px;
  border-radius: 50%;
  background-color: var(--main);
  z-index: 998;
}
.step1:hover{
  scale: 1.5;
}
.step2:hover{
  scale: 1.5;
}
.step3:hover{
  scale: 1.5;
}
.step4:hover{
  scale: 1.5;
}
.step5:hover{
  scale: 1.5;
}
.step2{
  position: fixed;
  top: 17.75%;
  left: 33%;
  width: 20px;
  transform: translate(-50%, -50%);
  height: 20px;
  border-radius: 50%;
  background-color: var(--main);
  z-index: 998;
}

.step3{
  position: fixed;
  top: 52.75%;
  left: 49%;
  width: 20px;
  transform: translate(-50%, -50%);
  height: 20px;
  border-radius: 50%;
  background-color: var(--main);
  z-index: 998;
}

.step4{
  position: fixed;
  top: 61.5%;
  left: 62%;
  width: 20px;
  transform: translate(-50%, -50%);
  height: 20px;
  border-radius: 50%;
  background-color: var(--main);
  z-index: 998;
}

.step5{
  position: fixed;
  top: 87.75%;
  left: 75%;
  width: 20px;
  transform: translate(50%, -50%);
  height: 20px;
  border-radius: 50%;
  background-color: var(--main);
  z-index: 998;
}


.bloc{
  position: fixed;
  /* height: 20em;
  width: 30vw; */
  right: 50%;
  top: 15%;
  opacity: 0%;
}

.taxi{
  position: fixed;
  /* height: 20em;
  width: 30vw; */
  right: 50%;
  top: 77%;
  opacity: 0%;
}

.taxi img{
  height: 20vh;
}

.bloc_texte{
  position: absolute;
  /* height: 20em;
  width: 30vw; */
  right: 50%;
  top: 265%;
  opacity: 0%;
}

.bloc_texte p{
  width: 80%;
  font-family: 'Selecta';
font-size: 5vh;
}

.bloc_on{
  opacity: 100%;
  /* opacity: 30%;
  transform: translateX(-75%);
  scale: .25; */
}

.bloc p{
  width: 20em;
}

.bloc img{
  height: 60vh;
  display: block;
}

.population1{
  position: fixed;
  background-color: white;
  width: 30vw;
  right: 50%;
  font-family: 'Courier New', Courier, monospace;
  top: 80%;
  border-radius: 25px;
  border: solid 4px red;
  align-items: center;
  opacity: 0%;
  display: none;
}
.population1 p{
  position: relative;
  top: 7px;
  font-size: 3.5em;
  width: 100%;
  font-family: 'Tiny';
  text-align: center;
}


.image1{
  position: absolute;
  bottom: -110vh;
  left: 20%;
  /* cursor: pointer; */
}

.cityhall{
  position: absolute;
  bottom: -74vh;
  left: 35%;
  opacity: 0%;
  /* cursor: pointer; */
}

.cityhall img{
  width: 25vw;
}

.city{
  position: fixed;
  bottom: -174vh;
  left: 62.5%;
  opacity: 0%;
  /* cursor: pointer; */
}

.city img{
  width: 39vw;
}


.vendeuse{
  position: fixed;
  bottom: -174vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.vendeuse img{
  width: 25vw;
}

.klong{
  position: fixed;
  bottom: 44vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.klong img{
  width: 35vw;
}

.watarun{
  position: fixed;
  bottom: 44vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.watarun img{
  width: 35vw;
}

.image1 img:hover{
  scale: 1.1;
transform: translate(1.2vw, -4.5%);
}

.rue{
  position: fixed;
  bottom: 52vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.rue img{
  width: 30vw;
}

.bato{
  position: absolute;
  bottom: -284vh;
  left: 80.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.bato img{
  width: 20vw;
}

.riviere{
  position: fixed;
  bottom: 2vh;
  opacity: 0%;
  left: 36.25%;
  /* cursor: pointer; */
}

.riviere img{
  width: 30vw;
}

.kuala{
  position: fixed;
  bottom:-1vh;
  opacity: 0%;
  left: 36.25%;
  /* cursor: pointer; */
}

.kuala img{
  width: 20vw;
}

.selangor{
  position: fixed;
  bottom:-1vh;
  opacity: 0%;
  left: 36.25%;
  /* cursor: pointer; */
}

.selangor img{
  width: 60vw;
}

.statue{
  position: absolute;
  left: 5.5%;
  top: 50%;
  filter: grayscale(0%);
  opacity: 0%;
}

.statue img{
  width: 35vw;
}


.lumpur{
  position: absolute;
  bottom: -435vh;
right: -1%;
  /* cursor: pointer; */
}

.lumpur img{
  width: 25vw;
}

.temple{
  position: fixed;
  bottom: 44vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.temple img{
  width: 30vw;
}

.train{
  position: fixed;
  bottom: 8vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.train img{
  width: 25vw;
}

.foret{
  position: fixed;
  bottom: -1vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.foret img{
  width: 45vw;
}

.jardin{
  position: fixed;
  bottom: 63.5vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.jardin img{
  width: 30vw;
}

.singapore{
  position: fixed;
top: 63.5vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.singapore img{
  width: 20vw;
}

.eau{
  position: fixed;
  left: 5.5%;
  top: 10%;
  filter: grayscale(0%);
  opacity: 0%;
}

.eau img{
  width: 35vw;
}

.mansion{
  position: fixed;
  left: 50.5%;
  top: 50%;
  filter: grayscale(0%);
  opacity: 0%;
}

.mansion img{
  width: 35vw;
}

.montagne{
  position: absolute;
  left: 50.5%;
  top: 730%;
  filter: grayscale(0%);
  opacity: 100%;
}

.montagne img{
  width: 35vw;
}

.nature{
  position: absolute;
  left: 69.5%;
  top: 627%;
  filter: grayscale(0%);
  opacity: 100%;
}

.nature img{
  width: 25vw;
}

.national{
  position: fixed;
  left: 5.5%;
  top: 60%;
  filter: grayscale(0%);
  opacity: 0%;
}

.national img{
  width: 15vw;
}

.activite{
  position: fixed;
  left: 5.5%;
  top: 16.5%;
  filter: grayscale(0%);
  opacity: 0%;
}

.activite img{
  width: 30vw;
}

.port{
  position: absolute;
  left: 60.5%;
  top: 860%;
  filter: grayscale(0%);
  opacity: 100%;
}

.port img{
  width: 25vw;
}

.image1 img:hover{
  scale: 1.1;
transform: translate(1.2vw, -4.5%);
}

.image1_on{
opacity: 100%;
}

p{
  position: relative;
  font-family: 'selecta';
  text-align: justify;
  width: 19.5%;
  left: .5%;
}

.image1 img{
  width: 15vw;
}

.barre1{
  position: absolute;
  background-color: black;
  top: 60%;
  left: 82.25%;
  height: 20em;
  width: .5em;
  filter: blur(.5px);
  opacity: 0%;
}

.emblem{
  position: absolute;
  left: 40.5%;
  top: 50%;
  filter: grayscale(0%);
  opacity: 0%;
}

.emblem img{
  width: 15vw;
}

.bangkok{
  width: 45em;
  position: absolute;
  top: 280%;
  left: 82.25%;
  opacity: 0%;
}
.sunset{
  width: 85em;
  position: fixed;
  top: 100%;
  left: 82.25%;
  opacity: 0%;
}

.rond1{
  position: fixed;
  background-color: var(--main);
  height: 2em;
  width: 2em;
  left: 5%;
  bottom: 5%;
  border-radius: 50%;
}

.rond2{
  position: fixed;
  background-color: var(--main);
  height: 2em;
  width: 2em;
  left: 7.5%;
  bottom: 5%;
  border-radius: 50%;
}

.rond3{
  position: fixed;
  background-color: var(--main);
  height: 2em;
  width: 2em;
  left: 10%;
  bottom: 5%;
  border-radius: 50%;
}


.scroll-container {
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100vw;
  background-color: #47cf47;
z-index: +99;
}



.scroll-item1:nth-child(1) {
  transform: translate3d(-400px, -50%, -200px);
}
.scroll-item1:nth-child(2) {
  transform: translate3d(-3000px, -50%, -1000px);
}
.scroll-item1:nth-child(3) {
  transform: translate3d(-2000px, -50%, 0);
}
.scroll-item1:nth-child(4) {
  transform: translate3d(-1000px, -50%, 1000px);
}
.scroll-item1:nth-child(5) {
  transform: translate3d(0, -50%, 2000px);
}

.bouton0{
  font-family: 'selecta';
  position: fixed;
  background-color: #ffef3f;
  height: 2.5vw;
  width: 3.5vw;
  left: 5%;
  top: 30%;
  border-radius: 50px;
  /* cursor: pointer; */
  z-index: +998;
  transform: translateY(-50%);

}
.bouton0:hover{
  scale: 1.5;
  transform: translateY(-35%);
}
.bouton{
  font-family: 'selecta';
  position: fixed;
  background-color: #ff9900;
  height: 2.5vw;
  width: 3.5vw;
  left: 5%;
  top: 40%;
  border-radius: 50px;
  /* cursor: pointer; */
  z-index: +998;
  transform: translateY(-50%);

}
.bouton:hover{
  scale: 1.5;
  transform: translateY(-35%);
}
.bouton2{
  font-family: 'selecta';
  position: fixed;
  background-color: #286cfd;
  height: 2.5vw;
  width: 3.5vw;
  left: 5%;
  top: 50%;
  border-radius: 50px;
  /* cursor: pointer; */
  z-index: +998;
  transform: translateY(-50%);
}
.bouton2:hover{
  scale: 1.5;
  transform: translateY(-35%);
}

.bouton3{
  font-family: 'selecta';
  position: fixed;
  background-color: #c6b59b;  
  height: 2.5vw;
  width: 3.5vw;
  left: 5%;
  top: 60%;
  border-radius: 50px;
  /* cursor: pointer; */
  z-index: +998;
  transform: translateY(-50%);
}
.bouton3:hover{
  scale: 1.5;
  transform: translateY(-35%);
}
.bouton4{
  font-family: 'selecta';
  position: fixed;
  background-color: #fa96ff;  
  height: 2.5vw;
  width: 3.5vw;
  left: 5%;
  top: 70%;
  border-radius: 50px;
  /* cursor: pointer; */
  z-index: +998;
  transform: translateY(-50%);
}
.bouton4:hover{
  scale: 1.5;
  transform: translateY(-35%);
}


/* PAGE1 */ /* PAGE1 */ /* PAGE1 */ /* PAGE1 */ /* PAGE1 */ /* PAGE1 */ /* PAGE1 *//* PAGE1 */ /* PAGE1 */ /* PAGE1 */ /* PAGE1 */ /* PAGE1 */

.carousel {
  position: absolute;
  width: 50vw;
  height: 90vh;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -50%);
  position: fixed;
  z-index: +2;
}

.carousel img {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* transition: opacity 0.5s ease-in-out; */
}

.carousel img.active {
  opacity: 1;
}

.carousel img.active:hover {
  scale: 1;
}

.prev{
  background-color: var(--main);
  font-family: "Terminal";
  position: fixed;
  left: 25%;
  transform: translate(-50%);
  top: 47.5%;
  /* cursor: pointer; */
  height: 2vw;
  width: 2vw;
  /* background-color: white;
  border: solid var(--main) 2px; */
  font-size: 5em;
  align-items: center;
align-content: center;
align-self: center;
color: var(--main);
  border-radius: 50px;
  z-index: +9;
}

.prev:hover{
  /* height: 2.5vw;
  width: 2.5vw; */
  scale: 1.5;
}
.next:hover{
scale: 1.5;
}


.next{
  background-color: var(--main);
  font-family: "Terminal";
  position: fixed;
  left: 75%;
  transform: translate(-50%);
  top: 47.5%;
  /* cursor: pointer; */
  height: 2vw;
  width: 2vw;
  /* background-color: white;
  border: solid var(--main) 2px; */
  font-size: 5em;
  color: var(--main);
  align-items: center;
align-content: center;
align-self: center;
  border-radius: 50px;
  z-index: +9;
}

.fondcouleur{
  width: 50%;
  height: 90%;
  left: 25%;
  top: 10%;
  position: fixed;
  background-color: var(--main);
}
.texth42{
  display: block;
  /* display: none; Todo remove */
  position:absolute;
  left: 50%;
  width: 70vw;
  top: 7.5%;
  color: var(--main);
  text-align: center;
  transform: translate(-50%, -50%);
  font-family: "Build";
  font-size: 5vw;
  z-index: 99999999;
  /* transform: translate(-50%); */
}
.texth43{
  /* display: none; Todo remove */
  display: block;
  position:absolute;
  left: 50%;
  width: 70vw;
  top: 87.5%;
  color: var(--main);
  text-align: center;
  transform: translate(-50%, -50%);
  font-family: "Build";
  font-size: 5vw;
  z-index: 99999999;
  /* transform: translate(-50%); */
}
.texth42:hover{
scale: 1.05;
  transform: translate(-48%, -48%);
}
.texth42on{
  display: none;
  position:absolute;
  left: 50%;
  width: 70vw;
  top: 50%;
  color: var(--2);
  text-align: center;
  transform: translate(-50%, -50%);
  font-family: "Build";
  font-size: 5vw;
  z-index: 99999999;
  /* transform: translate(-50%); */
}
.texth43on{
  display: none;
  position:absolute;
  left: 50%;
  width: 70vw;
  top: 50%;
  color: var(--2);
  text-align: center;
  transform: translate(-50%, -50%);
  font-family: "Build";
  font-size: 5vw;
  z-index: 99999999;
  /* transform: translate(-50%); */
}

h4{
  position:fixed;
  left: 50%;
  width: 70vw;
  top: 2.5%;
  color: var(--main);
  text-align: center;
  transform: translate(-50%);
  font-family: "Build";
  font-size: 5vw;
  z-index: 4;
  /* transform: translate(-50%); */
}
h4:hover{
  scale: 1.1;
  transform: translate(-45%);
}
h42:hover{
  scale: 1.1;
  transform: translate(-45%,-45%);
}

h5{
  position: absolute;
  left: 1%;
  width: 70vw;
  top: 1vh;
  color: var(--main);
  text-align: left;
  font-family: "Build";
  font-size: 5vw;
  z-index: 4;
  /* transform: translate(-50%); */
}

#mySVG{
  position: fixed;
  left: 50%;
  top: 50%;
transform: translate(-50%, -50%);
  width: 130%;
  z-index: +9998;
  fill: none;
  stroke-dasharray: 0 2 0;
stroke: black;
stroke-width: 5px;
animation-name: drawPath;
filter: blur(1.5px);
}

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

/* img{
  border-radius: 15px;
  border-top: solid var(--main) 5px;
} */

img{
  filter: grayscale(75%);
}
img:hover{
  filter: grayscale(0%);
  scale: 1.5;
}




/* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */ /* PHONE */

@media only screen and (max-width: 600px) {
  /* Vos styles spécifiques pour les téléphones ici */

  .texth42{
    display: block;
    /* display: none; Todo remove */
    position:absolute;
    left: 50%;
    width: 70vw;
    top: 7.5%;
    color: var(--main);
    text-align: center;
    transform: translate(-50%, -50%);
    font-family: "Build";
    font-size: 1.75em;
    z-index: 99999999;
    /* transform: translate(-50%); */
  }
  .texth43{
    /* display: none; Todo remove */
    display: block;
    position:absolute;
    left: 50%;
    width: 70vw;
    top: 82.5%;
    color: var(--main);
    text-align: center;
    transform: translate(-50%, -50%);
    font-family: "Build";
    font-size: 1.75em;
    z-index: 99999999;
    /* transform: translate(-50%); */
  }
  h4{
    font-size: 1.75em;
  }

  h2{
    position:fixed;
    left: 70%;
    top: 0;
    color: var(--main);
    text-align: center;
    transform: translate(10vw, 15%);
    font-family: "Build";
    font-size: 1.5em;
    z-index: 4;
    /* transform: translate(-50%); */
  }

  .link{
    background-color: var(--main);
    font-family: "Build";
    font-size: 1em;
    color: white;
    width: 3em;
    height: 2em;
    border-radius: 50px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 80.5vh;
    z-index: +999;
    /* cursor: pointer; */
  }
  .link:hover{
    scale: 1.15;
  }
  
  .link p{
    position: relative;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
  }

  .immobile{
    width: 0%;
  }

  .carousel {
    position: absolute;
    width: 100vw;
    height: 90vh;
    left: 50%;
    top: -10%;
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: +2;
  }
  
  .carousel img {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* transition: opacity 0.5s ease-in-out; */
  }
  .fondcouleur{
    width: 100%;
    height: 50%;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    position: fixed;
    background-color: var(--main);
  }

  .prev{
    font-family: "Terminal";
    position: fixed;
    left: 7.5%;
    transform: translate(-50%);
    top: 40%;
    /* cursor: pointer; */
    height: 5vh;
    width: 5vh;
    /* background-color: white;
    border: solid var(--main) 2px; */
    font-size: 3em;
    align-items: center;
  align-content: center;
  align-self: center;
  color: var(--main);
    border-radius: 50px;
    z-index: +9;
  }
  
  .prev:hover{
    /* height: 2.5vw;
    width: 2.5vw; */
    scale: 1.25;
  }
  .next:hover{
  scale: 1.25;
  }
  
  
  .next{
    font-family: "Terminal";
    position: fixed;
    left: 92.5%;
    transform: translate(-50%);
    top: 40%;
    /* cursor: pointer; */
    height: 5vh;
    width: 5vh;
    /* background-color: white;
    border: solid var(--main) 2px; */
    font-size: 3em;
    color: var(--main);
    align-items: center;
  align-content: center;
  align-self: center;
    border-radius: 50px;
    z-index: +9;
  }


  .bouton0{
    font-family: 'selecta';
    position: fixed;
    background-color: #ffef3f;
    height: 7.5vw;
    width: 10vw;
    left: 20%;
    top: 85%;
    border-radius: 100px;
    /* cursor: pointer; */
    z-index: +998;
    transform: translate(-50%, -50%);
  }
  .bouton0:hover{
    transform: translate(-35%, -35%);
  }
  .bouton{
    font-family: 'selecta';
    position: fixed;
    background-color: #ff9900;
    height: 7.5vw;
    width: 10vw;
    left: 35%;
    top: 85%;
    border-radius: 100px;
    /* cursor: pointer; */
    z-index: +998;
    transform: translate(-50%, -50%);
  }
  .bouton:hover{
    transform: translate(-35%, -35%);
  }
  .bouton2{
    font-family: 'selecta';
    position: fixed;
    background-color: #286cfd;
    height: 7.5vw;
    width: 10vw;
    left: 50%;
    top: 85%;
    border-radius: 100px;
    /* cursor: pointer; */
    z-index: +998;
    transform: translate(-50%, -50%);
  }
  .bouton2:hover{
    transform: translate(-35%, -35%);
  }
  .bouton3{
    font-family: 'selecta';
    position: fixed;
    background-color: #c6b59b;  
    height: 7.5vw;
    width: 10vw;
    left: 65%;
    top: 85%;
    border-radius: 100px;
    /* cursor: pointer; */
    z-index: +998;
    transform: translate(-50%, -50%);
  }
  .bouton3:hover{
    transform: translate(-35%, -35%);
  }
  .bouton4{
    font-family: 'selecta';
    position: fixed;
    background-color: #fa96ff;  
    height: 7.5vw;
    width: 10vw;
    left: 80%;
    top: 85%;
    border-radius: 100px;
    /* cursor: pointer; */
    z-index: +998;
    transform: translate(-50%, -50%);
  }

.bouton4:hover{
  transform: translate(-35%, -35%);
}





/* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */ /* PAGE2 */


.infoplan1{
  position:fixed;
  left: 83.5%;
  width: 50%;
  top: 22vh;
  font-size: 1.5em;
  transform: translate(-122.5%);
  font-family: "Build";
}
.numeroplan1{
  position:fixed;
  left: 73.25%;
  top: 22vh;
  font-size: 1.5em;
  transform: translate(300%);
  font-family: "Build";
}
.infoplan2{
  position:fixed;
  left: 38%;
  top: 14vh;
  font-size: 1.5em;
  transform: translate(1%);
  font-family: "Build";
}
.numeroplan2{
  position:fixed;
  left: 31.25%;
  top: 14vh;
  font-size: 1.5em;
  transform: translate(-175%);
  font-family: "Build";
}
.infoplan3{
  position:fixed;
  left: 30.15%;
  top: 44.75vh;
  font-size: 1.5em;
  transform: translate(36%);
  font-family: "Build";
}
.numeroplan3{
  position:fixed;
  left: 50.75%;
  top: 44.75vh;
  font-size: 1.5em;
  transform: translate(-300%);
  font-family: "Build";
}
.infoplan4{
  position:fixed;
  left: 67.5%;
  top: 52.5vh;
  font-size: 1.5em;
  transform: translate(-140%);
  font-family: "Build";
}
.numeroplan4{
  position:fixed;
  left: 40.15%;
  top: 52.5vh;
  font-size: 1.5em;
  transform: translate(190%);
  font-family: "Build";
}
.infoplan5{
  position:fixed;
  left: 80.75%;
  top: 75.5vh;
  font-size: 1.5em;
  transform: translate(-125%);
  font-family: "Build";
}
.numeroplan5{
  position:fixed;
  left: 74.25%;
  top: 75.5vh;
  font-size: 1.5em;
  transform: translate(290%);
  font-family: "Build";
}


.pagefin p{
  position: relative;
  text-align: left;
  width: 95%;
  left: 2.5%;
  font-size: 1em;
}




.emblem{
  position: absolute;
  left: 40.5%;
  top: 50%;
  filter: grayscale(0%);
  opacity: 0%;
}

.emblem img{
  width: 25vh;
}

.image1{
 left: 0vw;
 transform: translate(0, 0);
}

.image1 img{
  width: 25vh;
}

.bangkok{
  width: 35em;
  position: absolute;
  top: 320%;
  left: 82.25%;
  opacity: 0%;
}

.cityhall{
  position: absolute;
  bottom: -74vh;
  left: 35%;
  opacity: 0%;
  /* cursor: pointer; */
}

.cityhall img{
  width: 25vh;
}

.city{
  position: fixed;
  bottom: -174vh;
  left: 0;
  opacity: 0%;
  /* cursor: pointer; */
}

.city img{
  width: 50vh;
}


.vendeuse{
  position: fixed;
  bottom: -174vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.vendeuse img{
  width: 35vh;
}

.klong{
  position: fixed;
  bottom: 44vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.klong img{
  width: 35vw;
}

.watarun{
  position: fixed;
  bottom: 44vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.watarun img{
  width: 35vw;
}

.image1 img:hover{
  scale: 1.1;
transform: translate(1.2vw, -4.5%);
}

.rue{
  position: fixed;
  bottom: 40vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.rue img{
  width: 30vw;
}

.bato{
  position: absolute;
  bottom: -284vh;
  left: 80.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.bato img{
  width: 20vw;
}

.riviere{
  position: fixed;
  bottom: 40vh;
  opacity: 0%;
  left: 36.25%;
  /* cursor: pointer; */
}

.riviere img{
  width: 30vw;
}

.kuala{
  position: fixed;
  bottom:-1vh;
  opacity: 0%;
  left: 36.25%;
  /* cursor: pointer; */
}

.kuala img{
  width: 20vw;
}
.bloc{
  top: 55vh;
}

.bloc img{
  height: 40vh;
  display: block;
}



.selangor{
  position: fixed;
  bottom:-1vh;
  opacity: 0%;
  left: 36.25%;
  /* cursor: pointer; */
}

.selangor img{
  width: 60vh;
}

.statue{
  position: absolute;
  left: 5.5%;
  top: 50%;
  filter: grayscale(0%);
  opacity: 0%;
}

.statue img{
  width: 35vh;
}


.lumpur{
  position: absolute;
  bottom: -435vh;
right: -1%;
  /* cursor: pointer; */
}

.lumpur img{
  width: 45vh;
}

.temple{
  position: fixed;
  bottom: 44vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.temple img{
  width: 30vh;
}

.klong{
  position: fixed;
  bottom: 44vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.klong img{
  width: 45vh;
}

.watarun{
  position: fixed;
  bottom: 44vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.watarun img{
  width: 35vh;
}

.image1 img:hover{
  scale: 1.1;
transform: translate(1.2vw, -4.5%);
}

.rue{
  position: fixed;
  bottom: 52vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.rue img{
  width: 30vh;
}

.bato{
  position: absolute;
  bottom: -284vh;
  left: 80.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.bato img{
  width: 40vh;
}

.train{
  position: fixed;
  bottom: 8vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.train img{
  width: 35vh;
}

.foret{
  position: fixed;
  bottom: -1vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.foret img{
  width: 45vh;
}

.jardin{
  position: fixed;
  bottom: 63.5vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.jardin img{
  width: 30vh;
}

.singapore{
  position: fixed;
top: 63.5vh;
  left: 36.25%;
  opacity: 0%;
  /* cursor: pointer; */
}

.singapore img{
  width: 30vh;
}

.eau{
  position: fixed;
  left: 5.5%;
  top: 10%;
  filter: grayscale(0%);
  opacity: 0%;
}

.eau img{
  width: 35vh;
}

.mansion{
  position: fixed;
  left: 50.5%;
  top: 50%;
  filter: grayscale(0%);
  opacity: 0%;
}

.mansion img{
  width: 35vh;
}

.montagne{
  position: absolute;
  left: 50.5%;
  top: 730%;
  filter: grayscale(0%);
  opacity: 100%;
}

.montagne img{
  width: 35vh;
}

.nature{
  position: absolute;
  left: 0%;
  top: 627%;
  filter: grayscale(0%);
  opacity: 100%;
}

.nature img{
  width: 40vh;
}

.national{
  position: fixed;
  left: 5.5%;
  top: 60%;
  filter: grayscale(0%);
  opacity: 0%;
}

.national img{
  width: 25vh;
}

.activite{
  position: fixed;
  left: 5.5%;
  top: 16.5%;
  filter: grayscale(0%);
  opacity: 0%;
}

.activite img{
  width: 30vh;
}

.port{
  position: absolute;
  left: 10.5%;
  top: 860%;
  filter: grayscale(0%);
  opacity: 100%;
}

.port img{
  width: 55vh;
}

.rond-anim{
  position: absolute;
  top: 150vh;
  left: 50%;
  width: 5.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  /* animation: anim 3s infinite 0s forwards;  */
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 
.rond-anim2{
  position: absolute;
  top: 270vh;
  left: 50%;
  width: 5.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  /* animation: anim 3s infinite 0s forwards; */
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 

.rond-anim2{
  position: absolute;
  top: 270vh;
  left: 50%;
  width: 5.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  /* animation: anim 3s infinite 0s forwards; */
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 

.rond-anim3{
  position: absolute;
  top: 370vh;
  left: 50%;
  width: 5.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  /* animation: anim 3s infinite 0s forwards; */
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 
.rond-anim4{
  position: absolute;
  top: 470vh;
  left: 50%;
  width: 5.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  /* animation: anim 3s infinite 0s forwards; */
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 
.rond-anim5{
  position: absolute;
  top: 570vh;
  left: 50%;
  width: 5.25em;
  height: 1.25em;
   background-color: var(--2); 
  border: solid 4px var(--2);
  border-radius: 50px;
  z-index: +999; 
  /* animation: anim 3s infinite 0s forwards; */
  animation: name duration timing-function delay iteration-count direction fill-mode;
} 




@keyframes anim {
  0%{
    left: 0.5%;
  }
  50%{
left: 85%;
  }
  100%{
    left: 0.5%;
  }
}

#mySVG{
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
transform: translate(-50%, -50%);
  width: 130%;
  z-index: +9998;
  fill: none;
  stroke-dasharray: 0 2 0;
stroke: black;
stroke-width: 5px;
animation-name: drawPath;
}

.step01{
  display: none;
}
.step02{
  display: none;
}
.step03{
  display: none;
}
.step04{
  display: none;
}
.step05{
  display: none;
}

.pagefin{
  display: block;
background: rgba(255, 255, 255, 0.39);
border-radius: 16px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(55px);
border: 1px solid rgba(255, 255, 255, 0.9);
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: +9999;
  left: 50%;
  /* border-radius: 50px; */
  top: 50%;
  overflow-Y: scroll;
  transform: translate(-50%, -50%);
} 
.pagefin p{
  position: relative;
  text-align: left;
  width: 90%;
  left: 42.5%;
  font-size: 1.5em;
  margin-top: 2vh;
}

.refresh{
  text-align: center;
  background-color: var(--2);
  font-family: "Build";
  font-size: 1.5em;
  color: black;
  width: 10em;
  transform: translate(-50%, 20%);
  height: 2em;
  border-radius: 50px;
  position: relative;
  margin-bottom: 6vh;
 left: 50%;
  top: 0%;
  z-index: +999;
  text-decoration: none;
}

.refresh p{
  position: relative;
  font-size: 1.5 em;
  font-family: "Build";
  top: 50%;
  width: 100vw;
  text-align: left;
  color: black;
  transform: translate(-20%,-49.75%);
  font-size:  1em;
}

#sitesuivant{
  background-color: var(--main);
  font-family: "Build";
  font-size: .75em;
  color: white;
  width: 5em;
  height: 2em;
  border-radius: 50px;
  border: 0px;
  position: absolute;
  left: 65%;
  transform: translate(-50%);
  top: 855vh;
  z-index: +999;
  cursor: none;
}
#sitesuivant:hover{
  scale: 1.15;
}

#sitesuivant p{
  position: relative;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-size: .75em;
}

.progress-bar {
  position: fixed;
  top: .75%;
  transform: translateY(0%);
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--main);
  z-index: 998;
  display: block;
}

}