html, body, main {
  height: 100%;
}

body {
  background-color: black;
}

#id_div_embedded_a-frame{
  position: absolute;
  width: 100%;
  height: 100%;
}

#id_chargement_bar{
  position: absolute;

  background-color:black;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: visible;
  opacity: 1;
  max-height: 100%;
  z-index : 2500;


  -webkit-backface-visibility: hidden;
  -webkit-animation: endLoadingAnimation 20s;
  -moz-animation: endLoadingAnimation 20s;
  -o-animation: endLoadingAnimation 20s;
  -ms-animation: endLoadingAnimation 20s;
  animation: endLoadingAnimation 20s;

  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  -ms-animation-delay: 20s;
  animation-delay: 20s;

}

#myEnterVRButton{
  display: none;
}

#myEnterARButton{
  display: none;
}

#html-spinner{
  position:absolute;
  bottom: 1vh;
  z-index: 950;
  width:10vh;
  height:10vh;
  border:2vh solid #151993;
  border-top:2vh solid white;
  border-radius:50%;


  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1.2s;
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-transition-property: -moz-transform;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1.2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  transition-property: transform;
  animation-name: rotate;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}
#div_html-spinner{
  margin-left: -10rem;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
/*
#html-para{
  position:absolute;
  width:40%;
  padding:5%;
  text-align:center;
  font-family: Verdana, sans-serif;
  font-size: 3.0vw;
  color:#a98bf0;


}*/

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  40% {
    opacity: 1
  }
  55% {
    opacity: 0
  }
  100% {
    opacity: 0;

  }
}

@keyframes endLoadingAnimation{
  /*visibility: visible;
 opacity: 1;
 max-height: 100%;*/
  0%{
    /*display: flex;*/
    visibility: visible;
    opacity: 1;
    max-height: 100%;
  }
  50% {
    visibility: visible;
    opacity: 1;
    width: 100%;
    height:100%;
    max-height: 100%;
  }
  100%{
    visibility: hidden;
    opacity: 0;
    width: 0;
    height:0;
    max-height: 0;

    background-color:black;
    /*display: none;*/
  }

    /*
    from {

                height:100%;
                width:100%;
                opacity:1;
             }
        to {
            opacity:0;
            width:0%;
            height:0%;

        }*/
}

#id_div_loading_page_1{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background: white;

  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 25s linear 1 0s;
  -moz-animation: imageAnimation 25s linear 1 0s;
  -o-animation: imageAnimation 25s linear 1 0s;
  -ms-animation: imageAnimation 25s linear 1 0s;
  animation: imageAnimation 25s linear 1 0s;

  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}

#id_img_fond_1{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  background: white;
  z-index:605;
  object-fit: cover;
}

#id_div_loading_page_1_title{
  position: absolute;
  width: 100%;
  height: 10vw;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  align-items: top;
  justify-content: center;
  z-index:606;
}

#id_p_loading_1_title{
  text-align:center;
  width:80%;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 3.5vmax;
  color:white;
}

#id_div_loading_page_1_description{
  position: absolute;
  width: 100%;
  height: 10vw;
  margin-top: 17.5vmax;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  align-items: top;
  justify-content: center;
  z-index:607;
}

#id_p_loading_page_1_description{
  width:80%;
  height: 30vmax;
  text-align : center;
  padding:1vmax;
  margin: 2vmax;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1.8vmax;
  color:white;
  word-wrap: break-word;
}

#id_div_loading_page_2{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background: white;

  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 25s linear 1 0s;
  -moz-animation: imageAnimation 25s linear 1 0s;
  -o-animation: imageAnimation 25s linear 1 0s;
  -ms-animation: imageAnimation 25s linear 1 0s;
  animation: imageAnimation 25s linear 1 0s;

  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  -ms-animation-delay: 10s;
  animation-delay: 10s;
}

#id_img_fond_2{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  background: white;
  object-fit: cover;
}

#id_div_loading_page_2_title{
  position: absolute;
  width: 100%;
  height: 10vmax;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  align-items: top;
  justify-content: center;
  z-index:615;
}

#id_p_loading_2_title{
  text-align:center;
  width:80%;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 3.5vmax;
  color:white;
}

#id_div_loading_page_2a_description{
  position: absolute;
  width: 100%;
  height: 10vmax;
  margin-top: 15vmax;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  align-items: top;
  justify-content: center;
  z-index:616;
}

#id_p_loading_page_2a_description{
  width:40%;
  height: 30vmax;
  text-align : center;
  margin-left: 2vmax;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2.0vmax;
  color:white;
  word-wrap: break-word;
}

#id_img_point_info{
  width : 6vmax;
  height : 6vmax;
}

#id_div_loading_page_2b_description{
  position: absolute;
  width: 100%;
  height: 10vmax;
  margin-top: 25vmax;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  align-items: top;
  justify-content: center;
  z-index:617;
}

#id_p_loading_page_2b_description{
  width:40%;
  height: 30vmax;
  text-align : center;
  margin-left: : 2vmax;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2.0vmax;
  color:white;
  word-wrap: break-word;
}

#id_img_point_acces{
  width : 6vmax;
  height : 6vmax;
}

#id_info_project{
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 0vw;
  opacity: 0;
  z-index:801;

  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 40s linear 1 0s;
  -moz-animation: imageAnimation 40s linear 1 0s;
  -o-animation: imageAnimation 40s linear 1 0s;
  -ms-animation: imageAnimation 40s linear 1 0s;
  animation: imageAnimation 40s linear 1 0s;

  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -o-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
}

#id_div_project_title{
  position: absolute;
  width: 100%;
  height: 10vw;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  align-items: top;
  justify-content: center;
  z-index:701;
}

#id_project_title{
  text-align:center;
  width:80%;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 3.5vw;
  color:white;
}

#id_project_description_and_illustration{
  position: absolute;
  margin-top: 7.5vw;
  display:flex;
  align-items: center;
  justify-content: center;
  z-index:601;
}

#id_img_fond_3{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  background: white;
  z-index:501;
  object-fit: cover;
}

#id_project_illustration{
  width:40%;
  height: 31.5vw;
  margin: 2vw;
  -webkit-box-shadow: 1px 1px 20px 20px rgba(255,255,255,0.25);
  box-shadow: 1px 1px 20px 20px rgba(255,255,255,0.25);
  object-fit: cover;
}

#id_project_description_text{
  width:40%;
  height: 30vw;
  display: flex;
  align-items: center;
  text-align : justify;
  padding:1vw;
  margin: 2vw;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2.0vw;
  color:white;
  word-wrap: break-word;
}