@font-face {
  font-family: 'n27regular_italic';
  src: url('../assets/N27 Webfont Complete/webfont files/n27-regularitalic-webfont.eot');
}

@font-face {
  font-family: 'n27light';
  src: url('../assets/N27 Webfont Complete/webfont files/n27-light-webfont.eot');
}

@font-face {
  font-family: 'n27bold';
  src: url('../assets/N27 Webfont Complete/webfont files/n27-bold-webfont.eot');
}

/****FONTS*****/
@font-face {
  font-family: "n27regular";
  src: url("../assets/N27 Webfont Complete/webfont files/n27-regular-webfont.ttf");
}
@font-face {
  font-family: "n27thin";
  src: url("../assets/N27 Webfont Complete/webfont files/n27-thin-webfont.ttf");
}

@keyframes animation-bar1 {
  0% {
    height: 1em
  }

  25% {
    height: 2em
  }

  50% {
    height: 1em
  }

  100% {
    height: 1em
  }
}
@keyframes animation-bar2 {
  0% {
    height: .5em
  }

  25% {
    height: 2.5em
  }

  50% {
    height: .5em
  }

  100% {
    height: .5em
  }
}
@keyframes animation-bar3 {
  0% {
    height: 1em
  }

  25% {
    height: 1.8em
  }

  50% {
    height: 1em
  }

  100% {
    height: 1em
  }
}
@keyframes animation-bar4 {
  0% {
    height: 1.6em
  }

  25% {
    height: 0.2em
  }

  50% {
    height: 1.6em
  }

  100% {
    height: 1.6em
  }
}
@keyframes animation-bar5 {
  0% {
    height: 2em
  }

  25% {
    height: 2.5em
  }

  50% {
    height: 0.2em
  }

  100% {
    height: 2em
  }
}
/*********************/
*,a {
  margin: 0;
  padding: 0;
  text-decoration: none !important;
  font-family: 'n27regular', sans-serif;
  list-style-type:none;
}
html{
  height: 100%;
  width: 100%;
  display: flex;
}

body{
  height: 100%;
  width: 100%;

  display: flex;
  background-color: black;

  color: white;

  opacity: 1;
  --transition-duration: 3s;
  --transition-property: opacity;

  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
}

body.fade{
  opacity: 0;
}

/******** HOME *******/

#wrapper{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  --background: blue;
}

#top-vignette{
  height: 50%;
  width: 100%;
  top: 0;
  position: absolute;
  display: flex;
  z-index: 2;
  pointer-events: none;


  box-shadow: inset -2px 147px 43px -18px rgba(0, 0, 0, 0.4);
}
#bottom-vignette{
  height: 50%;
  width: 100%;
  bottom: 0;
  position: absolute;
  display: flex;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 40px -206px 48px -47px rgba(0,0,0,0.4);
}
#top-menu{

  width: 100%;
  height: 10%;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding-left: 2%;
  padding-right: 2%;
  box-sizing: border-box;
  z-index: 4;

  --background: red;
}
#menu-button{
  z-index: 4;
}
#menu-button:hover{
  cursor: pointer;
}
#about{
  display: flex;
  width: 10vw;
  height: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  --background: red;
}

#logo{
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1%;

  --background: red;
}
#logo a{
  display: flex;

  justify-content: center;
  align-items: center;
}
#logo a img{

  width: 50%;
}

#about-link{
  z-index: 4;
}
#sound-bars:hover{
  cursor: pointer;
}
#sound-bars {
  position:absolute;
  width: 3em;
  height: 2em;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow:hidden;
  box-sizing: border-box;
  margin-right: 20px;
  z-index: 4;

  right: 5%;
  top: 25%;
}

.bar {
  position:relative;
  bottom:-50%;
  width: 2px;
  margin: 0.1em;

  background-color: white;
}
#bar-1 {
  height: 1em;
  animation-delay: 0.2s;
  animation: 1.5s infinite animation-bar1;
}
#bar-2 {
  height: 1em;
  animation-delay: 0.4s;
  animation: 2s infinite animation-bar2;
}

#bar-3 {
  height: 1em;
  animation-delay: 1s;
  animation: 1.3s infinite animation-bar3;
}
#bar-4 {
  height: 2.6em;
  animation-delay: 0.8s;
  animation: 1.5s infinite animation-bar4;
}
#bar-5 {
  height: 3em;
  animation-delay: 0.5s;
  animation: 1.5s infinite animation-bar5;
}
.paused{
  -webkit-animation-play-state:paused !important;
  -moz-animation-play-state:paused !important;
  -o-animation-play-state:paused !important;
  animation-play-state:paused !important;
}
/*---------------------*/
#bottom-menu{
  width: 96%;
  height: 10%;
  position: absolute;
  bottom: 0;
  --bottom: 1%;
  display: flex;
  flex-direction: column;
  --justify-content: space-between;
  align-items: center;
  padding-left: 1%;
  padding-right: 1%;
  margin-left: 2%;
  margin-right: 2%;
  box-sizing: border-box;
  z-index: 2;

  border-top: solid 1px white;


  --background: red;
}

#bottom-middle-menu p{
  text-align: center;
}
#location{
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 3%;
}
#right-middle-menu{
  display: flex;
  flex-direction: column;
  align-items: end;
}

a{
  font-size: 20;
  color: white;
}
a.deactivated{
  color: #9A9A9A;
}
/**************** MENU ******************/

#menu-wrapper{
  position: absolute;
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%;
  left: 0;
  padding-top: 12%;
  padding-left: 6%;
  padding-right: 6%;
  box-sizing: border-box;
  z-index: 4;
  transition: all .3s;

  background: black;
}
.active-menu{
  --visibility:hidden !important;
  display: flex !important;
}

#menu-wrapper>p{
  margin-bottom: 1.5%;
  font-family: 'n27regular';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  --line-height: 0px;
}

#menu-sub-wrapper{
  display: flex;
  height: 90%;
  justify-content: space-between;

  --background: red;
}

#img-container{
  --display: flex;
  width: 40%;
  --height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  transition: all .5s ease-in-out;

  --background: red;
}

#items{
  width: 60%;

  --background: purple;
}
.item-wrapper{
  display: flex;

  --background: grey;
}

.item{
  padding-left: 2%;
  padding-right: 2%;

  border-bottom: solid 1px white;
  border-top: solid 1px white;

}
#first-item{
  --border-top: solid 1px white;
}
#second-item{
  --border-bottom: none !important;
}
#third-item{
  --border-top: solid 1px white;
}
.item h2{
  --font-size: 4vw;
  --font-weight: normal;
  font-family: 'n27regular', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 60px;
  --line-height: 0px;

}
.item h2:hover{
  cursor: pointer;
}
#section-processing{
  display: flex;
}
#section-processing span:nth-of-type(1){
  margin-right: 15%;
}
.p-reference{
  --font-size: 1vw;
  --margin-bottom: 4%;

  font-family: 'n27regular', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 22px;
  line-height: 150%;
}
.p-reference a{
  font-family: 'n27thin', sans-serif;
  font-weight: bold;
}
.p-reference::before {
  content: "→ ";
}

.menu-section{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .3s;
}

.item:hover section{
  opacity: 1;
  max-height: 378px;
  transition: all .2s;
}
.item:hover{
  transition: none;
}
.inactive-item{
  opacity: 0.2;
}

/**************** ABOUT ******************/
#about-wrapper{
  position: absolute;
  display: none;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  left: 0;
  padding-top: 12%;
  padding-left: 6%;
  padding-right: 6%;
  box-sizing: border-box;
  z-index: 4;
  transition: all .3s;

  background: black;
}
.active-about{
  --visibility:hidden !important;
  display: flex !important;
}
.top-line{
  display: flex;
  width: 100%;
  border-top: solid 1px white;
}
#about-wrapper>p{
  margin-bottom: 1.5%;
}
#about-sub-wrapper{
  display: flex;
  justify-content: space-between;
  height: 80%;
  padding-top: 3%;
  padding-left: 3%;
  padding-right: 3%;

  --background: blue;
}

.about-block{
  display: flex;
  flex-direction: column;
  width: 30%;

  --background: purple;
}
.about-block-text{
  padding-top: 10%;
  padding-bottom: 10%;

  font-family: 'n27regular';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
}
#about-super-links{
  display: flex;
  flex-direction: column;

  font-family: 'n27regular';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  padding-bottom: 10%;
}

#about-more-info{
  padding-bottom:0 !important;
}

.about-block-text img{
  height: 1.3em;
}
.about-block h1{
  --font-size: 2vw;
  --font-weight: normal;
  font-family: 'n27regular';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  --line-height: 0px;

}
#about-button:hover{
  cursor: pointer;
}

.about-links{
  margin-top: 5%;
  color: red;
}

#about-wrapper .pellicule{
  display: flex;
  margin: 1%;
  width: 98%;

  box-sizing: border-box;
}


/**************** 360 ******************/
/* cursor:  grab;*/
#vr-container{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
}

#ui {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;

}

/******************* infos ****************/
.ibw{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2 !important;
}
.ibw-vignette{
  position: relative;
  height: 100%;
  width: 100%;
  background: blue;
}
.ibw a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.info-room-name{
  display: flex;
  margin-top: 15%;
  font-family: "n27light", sans-serif;
  font-weight: 100;
  visibility: hidden;

  --transition: all .2s ;
}

.info-button-wrapper{
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #D9D9D9;
  border-radius: 100%;
}
/* Position initiales des rooms et infos à faire en js*/

.info-button-wrapper:hover + p{
  visibility: visible ;
}

.plus-button{
  font-family: "n27thin",sans-serif;
  font-weight: 100;
  font-size: 25px;
}

.info-button{
  height: 45px;
  width: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #D9D9D9;
  color: black;
  border-radius: 100%;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s  ease-in-out;

}


.ibw:hover .info-button{
  height: 60px;
  width: 60px;
  cursor: pointer;
  overflow: hidden;
}


/**/
#bottom-menu section{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6%;
}
.bottom-menu-item .bottom-p:nth-of-type(1){
  margin-bottom: 5%;
}
.bottom-p, #where-am-i{
  font-size: 13px;
}
.pap{
  font-size: 13px;
}
.pellicule{
  height: min(1vw,10px);
  width: 100%;
  background-image: url('../assets/images/white-unfilled.svg');
}

/************* Pop up ************/

#popup-wrapper, #popup-wrapper-2{
  position: absolute;
  left: 45%;
  top: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: content-box;
  width: 30%;
  padding: 0.2% 0.8% 0.2% 0.8%;
  cursor: move;

  font-family: 'n27regular', sans-serif;
  z-index: 10;

  background-color: rgba(0,0,0,0.9);
}


#popup-action, #popup-action-2{
  display: flex;
  justify-content: flex-end;
}

#close-popup, #close-popup-2{
  margin-right: 1.2%;
}

#popup-sub-wrapper, #popup-sub-wrapper-2{
  display: flex;
  flex-direction: column;
  padding-left: 5%;
  padding-right: 6%;
  padding-bottom: 1%;
  padding-top: 1%;
  box-sizing: content-box;
}
#carrousel-close,#carrousel-close-2{
  display: none;
}
#carrousel, #carrousel-2{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 52%;
  margin-top: 2%;
}

#carrousel-img-container, #carrousel-img-container-2{
  border: solid 1px white;
  height: 25vh;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all .5s ease-in-out;
}

#carrousel-actions, #carrousel-actions-2{
  display: flex;
  justify-content: space-between;
  margin-top: 5%;
  margin-bottom: 7%;

  font-family: 'n27regular', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 0px;
  font-weight: bold;
  font-size: 14px;
}
#carrousel-previous, #carrousel-previous-2,
#carrousel-next, #carrousel-next-2,
#carrousel-close, #carrousel-close-2{

  font-family: 'n27thin', sans-serif;
  font-weight: bold;
}

#carrousel-previous:hover, #carrousel-previous-2:hover{
  cursor: pointer;
}

#carrousel-next:hover, #carrousel-next-2:hover{
  cursor: pointer;
}
#popup-title, #popup-title-2{
  font-family: 'n27regular', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 30px;

  --font-size: 3vh;
  margin-bottom: 2%;
}
#popup-text, #popup-text-2{
  font-family: 'n27regular', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;


  max-height: 250px;
  overflow-y: scroll;
}
#carrousel-actions{

}
#carrousel-img-list, #carrousel-img-list-2{
  display:none;
}
#close-popup:hover, #close-popup-2:hover{
  cursor: pointer;
}
.show-hide-popup{
  display: none !important;
}

/*********** DRAG WRAPPER *********/

#drag-wrapper{
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 3;

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

#drag-wrapper:hover{
  cursor: pointer;
}
#mobile-shadow{
  display:none;
}
#sub-drag-wrapper{
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;

  z-index: 3;
  background: rgba(0,0,0,0.8);

}
#sub-drag-box{
  display: flex;
  flex-direction: column;
  height: 40%;
  z-index: 4;
  align-items: center;
  justify-items: center;

  --background: blue;
}
#sub-drag-box p{
  margin: 8% 0 8% 0;
}
#preview-line{
  display: flex;
  height: 35%;
  width: 0;

  border: solid 1px white;
}
#preview-360{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;

  --background: purple;
}

#circle-container{
  display: flex;
  height: 65px;
  width: 65px;
  justify-items: space-between;
  justify-content: center;
  align-items: center;
  border: solid 1px #D9D9D9;
  border-radius: 100%;
  margin: 0 5% 0 5%;
}

#circle-container div{
  display: flex;
  height: 50px;
  width: 50px;
  justify-items: space-between;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color:black;
  background:#D9D9D9;

  font-family: 'n27regular';
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 0px;

}
#second-navigation{
  position: absolute;
  right: 2%;
  bottom: 17%;
  z-index: 4;
  --background: blue;
}
#arrow-pointer{
  position: absolute;
  right: 15%;
  margin-top: 10%;
}
#sound-tutorial{
  position: absolute;
  right: 2%;
  top: 12%;
  z-index: 4;
  --background: blue;
}
#sound-arrow-pointer{
  position: absolute;
  right: 36%;
  top: -150%;
  margin-bottom: 7%;
}

.drag-visibility{
  visibility: hidden;
  opacity: 0;
}
.drag-wrapper-visibility{
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
#left-chevron{
  display:none;
}
#right-chevron{
  display:none;
}




/******************************************** MOBILE SCREEN ********************************************/



@media screen and (max-width: 499px) {


  /* DRAG WRAPPER */
  #preview-line{
    display: flex;
    height: 35%;
    width: 0;

    border: solid 0.5px white;
  }
  #circle-container{
    height: 60px;
    width: 60px;
  }
  #circle-container div{
    height: 45px;
    width: 45px;

  }

  /** bottom bar **/
  #where-am-i{
    font-size:14px;
  }
  #location{
    width:100%;
    font-size: 20px;
    font-weight: 700;
    margin-top: 3%;
  }

  #second-navigation{
    display: none;
  }
  #sound-tutorial{
    display: none;
  }

  #bottom-menu{
    width:100%;
    height: 12%;
    position: absolute;

    margin-left:0 ;
    margin-right:0 ;
  }

  #bottom-menu section{
    width: 100%;
    display: flex;
    --justify-content: space-between;
    justify-content:center;
    align-items: center;
    margin-top: 0.6%;
    margin-left:0 ;
    margin-right:0 ;
  }

  #bottom-left-menu{
   display:none;
  }

  #right-middle-menu{
    display:none;
  }
  /*.special-show {
    visibility: hidden;
    opacity: 0 !important;
  }*/
  .pellicule{
    height: max(2vw,10px);
    width: 99%;
    background-image: url('../assets/images/white-unfilled.svg');
  }

  /*menu*/
  #top-menu{
    height:6%;
    padding-left: 0;
    padding-right: 0;
  }
  #mobile-shadow{
    position:absolute;
    height:95%;
    top: 0;
    width:100%;
    display:flex;
    background-color: rgba(0,0,0,0.85);
    z-index:2;
  }
  #menu-button{
    margin-left:10px;
  }
  #about-button{
    z-index:3;
    position:absolute;
    right:10px;
    top:28%;
    margin-right:0;

  }
  #logo a img{
    position:absolute;
    margin-top:28%;
    width: 55%;
  }


  #sound-bars{
    position:absolute;
    top:-11%;
    right:40%;
  }

  .pap{
    display:none;
  }
  /*** menu ***/

  #menu-wrapper{
    padding-top:50%;

    padding-left:0;
    padding-right:0;

    --background:blue;
  }
  #menu-wrapper>p{
    margin-left:5%;
  }

  #menu-sub-wrapper{
    margin-top: 4%;

    --background:red;
  }

  #items{
    width: 100%;
    height:85%;
    padding:0;
    margin:0;
    overflow-x:hidden;

    --background: purple;
  }

  .item h2{
    display:flex;
    width:100%;
    font-size: 25px;

    --background:green;
  }
  #first-item h2{
    width:400px;
    --background:yellow;
  }
  #third-item h2{
    width:300px;
    --background:yellow;
  }

  #img-container{
    display:none;
  }
  .p-reference{
    font-size:18px;
  }

  /**ABOUT**/
  #about-wrapper{
    margin:0;
    padding:20% 0 0 0;

  }
  .top-line{
    margin-top:15%;
  }

  #about-wrapper .pellicule{
    margin-bottom:6%;
    --background:purple;
  }

  #about-sub-wrapper{
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    --height: 68%;
    padding-top: 3%;
    padding-left: 3%;
    padding-right: 3% ;
    overflow-y:scroll;
    padding-bottom:25%;

    --background: blue;

  }
  .about-block{
    width:100%;

    --background: green;
  }

  .about-block:nth-of-type(2){
    margin-top:10%;

    --background:red;
  }
  /* POPUP ACTIONS*/
  #close-popup, #close-popup-2{
    display: none;
  }
  #popup-wrapper, #popup-wrapper-2{
    left: 1% !important;
    top: 17% !important;
    width: 96%;


    --background:red;
    --visibility:visible;
  }

  #carrousel-close, #carrousel-close-2{
    display: flex;
  }
}