@font-face {
  font-family: "ThaleahFat";
  src: url("/css/ThaleahFat.ttf") format("truetype");
}
/* @font-face {
font-family: 'Inter';
src: url('./Inter-Regular.woff2') format('woff2'),
     url('./Inter-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Inter';
src: url('./Inter-Bold.woff2') format('woff2'),
     url('./Inter-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
  font-family: 'Urbanist';
  src: url('./Urbanist-Regular.woff2') format('woff2'),
       url('./Urbanist-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Urbanist';
  src: url('./Urbanist-Bold.woff2') format('woff2'),
       url('./Urbanist-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
} */

#root {
z-index: 900;
position: relative;
}

#controller{
  z-index: 1;
}

#containerMenu
{
width: 30vh;
height: 20vh;
top: 12vw;
left: calc(95vw - 30vh);
position: absolute;
}

#camera1button, #camera2button, #buttonAbout, #buttonAbout2
{
color: #FFFFFF;
font-size: 1.5vh;
line-height: 4vh;
text-align: right;
cursor: pointer;
margin-right:0;
transition: left 0.25s ease, top 0.25s ease, margin-right 0.25s ease;
}

#camera1button:hover, #camera2button:hover, #buttonAbout:hover, #buttonAbout2:hover
{
margin-right:2vh;
}



#loaderBG
{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: #000000;
z-index: 400;
}

body, td, p, div
{
font-family: 'Inter', sans-serif;
}


body{
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
overflow: hidden;
width: 100vw;
height: 100vh;
}

#renderCanvas
{
width: 100vw;
height: 100vh;
position: absolute;
top: 0px;
left: 0px
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
/* mobile webkit */
background: transparent;
}


#topHeader
{
width: 50vmin;
height:25vmin;
top: 5vw;
left: 5vw;
position: absolute;
font-size: 5vmin;
color: #ffffff;
text-transform: uppercase;
font-weight: 200;
}


#htmlDate
{
width: 15vmin;
height: 3vmin;
top: calc(5vw + 12vmin);
left: 5vw;
position: absolute;
font-size: 2vmin;
color: #ffffff;
text-transform: uppercase;
font-weight: 400;
font-family: monospace, monospace;
}


#bottomHeader{
width: 98vmin;
height:1vmin;
bottom: 2vmin;
left: 5vw;
position: absolute;
font-size: 1vmin;
color: #ffffff;
text-transform: uppercase;
font-weight: 400;
}


#timelineDiv
{
width: 90vw;
height: 0.2vw;
position: absolute;
left: 5vw;
bottom: 7.9vh;
background-color: #FFFFFF;
}





#slide0
{

transform: rotate3d(0, 0, 0, 70deg);
}


#slide0, #slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7
{
top: 55vh;
color: #ffffff;
position: absolute;
width: 40vw;
height: 30vh;
font-size: 1.5vh;
transition: left 0.5s ease, top 0.5s ease, transform 0.5s ease, opacity 0.4s linear;
}

#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7
{
transform: rotate3d(1, 1, 1, 90deg);
left: 50vw;
opacity: 0;
}

.slideOverflow
{
position: absolute;
width: 40vw;
height: 30vh;
overflow-y: scroll;
}




#language_en{
color: #FFF;
position: absolute;
left: calc(75vw + 0px);
top: 5vw;
font-size: 2vmin;
width: 4vmin;
height: 5vmin;
cursor: pointer;
}

#language_es{
color: #FFF;
position: absolute;
left: calc(75vw + 5vmin);
top: 5vw;
font-size: 2vmin;
width: 4vmin;
height: 5vmin;
cursor: pointer;
}

#language_ar{
color: #FFF;
position: absolute;
left: calc(75vw + 10vmin);
top: 5vw;
font-size: 2vmin;
width: 4vmin;
height: 5vmin;
cursor: pointer;
}




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


@-ms-viewport {
  width: 373px;
}
@-o-viewport {
  width: 373px;
}
@viewport {
  width: 373px;
}

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

.babylonVRicon2
{
left: 335px !important;
z-index:3000 !important;
border: 1px solid #FF00FF;
}

.xr-button-overlay2
{
left: 335px !important;
}

}




.xr-button-overlay2
{
bottom: auto !important;
top: 5vw !important;
left: calc(100vw - 5vmin - 5vw) !important;
height: 5vmin !important;
width: 5vmin !important;
//right: 12px !important;
}

.babylonVRicon, .xr-button-overlay
{

cursor: pointer;

position: absolute;
height: 5vmin !important;
width: 5vmin !important;
margin: 0;
top: 5vw !important;
left: calc(100vw - 5vmin - 5vw);
border: 1px solid #ffffff;
background-image: url(vrButton.png);
background-size: 100%;
background-repeat:no-repeat;
background-position: center;
outline: none;
transition: transform 0.125s ease-out;

}


@media (orientation: portrait) {

#htmlDate {
top: 18vw !important;
}


#slide0, #slide1,#slide2,#slide3,#slide4,#slide5,#slide6,#slide7
{
color: #ffffff;
position: absolute;
width: 90vw !important;
top: 55vh !important;
height: 25vh !important;
font-size: 1.2vh !important;
}

.slideOverflow
{
color: #ffffff;
position: absolute;
width: 90vw !important;
height: 25vh !important;
font-size: 1.2vh !important;
overflow-y: scroll;
}




#language_en{
left: calc(60vw + 0px) !important;
font-size: 2.5vmin !important;
}
#language_es{
left: calc(60vw + 6vmin) !important;
font-size: 2.5vmin !important;
}
#language_ar{
left: calc(60vw + 12vmin) !important;
font-size: 2.5vmin !important;
}

}