@import url("style.css");


/* --------------------------------- Parent Div--------------------------------- */
.sub-body2{
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(163,175,243,1) 0%, rgba(220,182,232,1) 100.2% );
  z-index: 1;
}

main{
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex ;
  justify-content: center;
  align-items: center;
}

.svg-size{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover{
  pointer-events: none;
}


/* -------------------------------- Paris 01 -------------------------------- */
#_1{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  opacity: 0;
}

#_1:hover{
  transform: translate3d(0, -10%, 0);
}

#_1:hover polygon{
  fill: rgb(226, 81, 81);
}

#_1 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 02 -------------------------------- */
#_2{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s , opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 300ms;
  opacity: 0;
}

#_2:hover{
  transform: translate3d(0, -10%, 0);
}

#_2:hover polygon{
  fill: rgb(226, 81, 81);
}

#_2 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 03 -------------------------------- */
#_3{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s , opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 600ms;
  opacity: 0;
}

#_3:hover{
  transform: translate3d(0, -10%, 0);
}

#_3:hover polygon{
  fill: rgb(226, 81, 81);
}

#_3 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 04 -------------------------------- */
#_4{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s , opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 900ms;
  opacity: 0;
}

#_4:hover{
  transform: translate3d(0, -10%, 0);
}

#_4:hover polygon, #_4:hover rect{
  fill: rgb(226, 81, 81);
}

#_4 polygon, #_4 rect{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 05 -------------------------------- */
#_5{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s , opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 1200ms;
  opacity: 0;
}

#_5:hover{
  transform: translate3d(0, -10%, 0);
}

#_5:hover polygon{
  fill: rgb(226, 81, 81);
}

#_5 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 06 -------------------------------- */
#_6{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s , opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 1500ms;
  opacity: 0;
}


#_6:hover{
  transform: translate3d(0, -10%, 0);
}

#_6:hover polygon{
  fill: rgb(226, 81, 81);
}

#_6 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 07 -------------------------------- */
#_7{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s , opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 1800ms;
  opacity: 0;
}

#_7:hover{
  transform: translate3d(0, -10%, 0);
}

#_7:hover polygon{
  fill: rgb(226, 81, 81);
}

#_7 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 08 -------------------------------- */
#_8{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 2100ms;
  opacity: 0;
}

#_8:hover{
  transform: translate3d(0, -10%, 0);
}

#_8:hover polygon{
  fill: rgb(226, 81, 81);
}

#_8 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 09 -------------------------------- */
#_9{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 2400ms;
  opacity: 0;
}

#_9:hover{
  transform: translate3d(0, -10%, 0);
}

#_9:hover polygon{
  fill: rgb(226, 81, 81);
}

#_9 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 10 -------------------------------- */
#_10{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 2700ms;
  opacity: 0;
}

#_10:hover{
  transform: translate3d(0, -10%, 0);
}

#_10:hover polygon{
  fill: rgb(226, 81, 81);
}

#_10 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 11 -------------------------------- */
#_11{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 3000ms;
  opacity: 0;
}

#_11:hover{
  transform: translate3d(0, -10%, 0);
}

#_11:hover polygon{
  fill: rgb(226, 81, 81);
}

#_11 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 12 -------------------------------- */
#_12{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 3300ms;
  opacity: 0;
}

#_12:hover{
  transform: translate3d(0, -10%, 0);
}

#_12:hover polygon{
  fill: rgb(226, 81, 81);
}

#_12 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 13 -------------------------------- */
#_13{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 3600ms;
  opacity: 0;
}

#_13:hover{
  transform: translate3d(0, -10%, 0);
}

#_13:hover polygon{
  fill: rgb(81, 226, 173);
}

#_13 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 14 -------------------------------- */
#_14{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 3900ms;
  opacity: 0;
}

#_14:hover{
  transform: translate3d(0, -10%, 0);
}

#_14:hover polygon{
  fill: rgb(226, 81, 81);
}

#_14 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 15 -------------------------------- */
#_15{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 4200ms;
  opacity: 0;
}

#_15:hover{
  transform: translate3d(0, -10%, 0);
}

#_15:hover polygon{
  fill: rgb(226, 81, 81);
}

#_15 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 16 -------------------------------- */
#_16{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 4500ms;
  opacity: 0;
}

#_16:hover{
  transform: translate3d(0, -10%, 0);
}

#_16:hover polygon{
  fill: rgb(226, 81, 81);
}

#_16 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 17 -------------------------------- */
#_17{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 4800ms;
  opacity: 0;
}

#_17:hover{
  transform: translate3d(0, -10%, 0);
}

#_17:hover polygon{
  fill: rgb(226, 81, 81);
}

#_17 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 18 -------------------------------- */
#_18{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 5100ms;
  opacity: 0;
}

#_18:hover{
  transform: translate3d(0, -10%, 0);
}

#_18:hover polygon{
  fill: rgb(226, 81, 81);
}

#_18 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 19 -------------------------------- */
#_19{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 5400ms;
  opacity: 0;
}

#_19:hover{
  transform: translate3d(0, -10%, 0);
}

#_19:hover polygon{
  fill: rgb(226, 81, 81);
}

#_19 polygon{
  transition: fill 1s ease-in-out;
}

/* -------------------------------- Paris 20 -------------------------------- */
#_20{
  transition: transform 2s ease-in-out;
  animation: fall 0.25s, opacity 1.5s ease;
  animation-fill-mode: backwards, forwards;
  animation-delay: 5700ms;
  opacity: 0;
}


#_20:hover{
  transform: translate3d(0, -10%, 0);
}

#_20:hover polygon{
  fill: rgb(226, 81, 81);
}

#_20 polygon{
  transition: fill 1s ease-in-out;
}

/* ---------------------------- Animation Falling --------------------------- */
@keyframes fall {
  from {
    transform: translateY(-30%);
    visibility:hidden;
  }

  to {
    transform: translateY(0%);
    visibility: visible;
  }
}

@keyframes opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

svg g{
  animation: pe 7.5s linear;
  animation-fill-mode:forwards;
}

@keyframes pe {
  from {
    pointer-events: none;
  }

  to {
    pointer-events: auto;
  }
}

/* ----------------------------------- P13 Map ---------------------------------- */
.quit{
  position: absolute;
  left: 20px;
  bottom: 0;
  font-size: 3em;
  cursor: pointer;
  transition: transform ease-in-out 0.5s;
}

.quit:hover{
  transform: scale(1.2);
}

.p13-map{
  width: 98%;
  height: 97%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: all 1s ease-in-out;
  border-radius: 30px;
  background: rgba(212, 212, 212, 0.7);
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.p13-dn{
  transform: translateX(-120%);
}

/* -------------------------------- Panneaux -------------------------------- */
.c-pointer{
  cursor: pointer;
}

.pan-infos{
  transition: all 0.5s ease-in-out;
}

.off{
  visibility: collapse;
  opacity: 0;
}

/* ------------------------------- Side Infos ------------------------------- */
.wrapper{
  width: 30%;
  height: 80%;
  position: absolute;
  left: 2%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1s ease-in-out;
}

.infos-container{
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: auto;
  padding: 1% 5%;
  background: rgba( 255, 255, 255, 0.45 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 11.5px );
  -webkit-backdrop-filter: blur( 11.5px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  scrollbar-color: transparent transparent;
}

.infos-windows{
  height: 25%;
  width: 100%;
  background-color:#e5e5e4;
  border-radius: 20px;
  padding: 3%;
  margin: 4% 0 4% 0;
}

.infos-windows .title-infos h2{
  font-family: "RobotoMono-Regular", Roboto Mono;
  font-size: 1em;
}

.infos-windows .title-infos{
  width: 70%;
  height: 20%;
  background-color: #bfbebf;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  display: flex;
  flex-direction: column;
}

.infos-windows .txt-infos{
  width: 100%;
  height: 75%;
  padding: 5% 0;
  font-family: 'Roboto', sans-serif;
}

.close-container{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba( 255, 255, 255, 0.45 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 11.5px );
  -webkit-backdrop-filter: blur( 11.5px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  position: absolute;
  bottom: -9%;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

.pop-out{
  transform: translateX(-120%);
}

.close-container:hover{
  background-color: white;
}

.close-container:hover > i{
  transform: rotate(180deg);
}

.close-container i{
  transition: all 0.5s ease-in-out;
}

@media only screen and (max-width: 1280px){
  .infos-windows .txt-infos{
    font-size: 0.8em;
  }

  .wrapper{
    height: 78%;
  }

  .close-container{
    bottom: -10%;
  }

}

@media only screen and (max-width: 834px){
  .p13-map{
    justify-content: center;
  }

  .wrapper{
    width: 96%;
    height: 80%;
  }

  .close-container{
    bottom: -9%;
  }  

}

@media only screen and (max-width: 375px){
  .p13-map{
    justify-content: center;
  }
  .wrapper{
    width: 96%;
    height: 70%;
  }
  .infos-windows .title-infos h2{
    font-size: 0.8em;
  }

  .close-container{
    bottom: -16%;
  }

  .infos-windows .txt-infos{
  font-size: 0.7em;
  }
}