body{
    margin: 0px;
    padding: 0px;
    background-color: white;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@font-face{
    font-family: 'Nunito-Regular';
    src: url('font/Nunito-Regular.ttf')
}
#useFont{
    font-family: 'Nunito-Regular';
    font-size: 0pt;
}

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

html, body {
    overflow: hidden;
    height: 100%;
}

#main{
    position: fixed;
    top:0;
}

#start{



}

.ieWarning{
    font-family: 'Nunito', sans-serif;
    color: #3dcd58;
    font-size: 16pt;
}

.ieWarningDiv{

    /* border: 1px solid blue; */

    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 16pt;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    width: 100%;
    /* background-color: #3dcd58; */

    text-align: center;

    /* display: inline; */

}

#langHead{

    font-family: 'Nunito', sans-serif;
    color: #ffffff;

}

#langLine{

    font-family: 'Nunito', sans-serif;
    color: #cccccc;

}

#startImage{

    margin-top: 5px;

}

#backgroundStart{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('img/eaeStartBackground.png') ;
    background-position: center;
}

#langCont{

    /* border: 1px solid blue; */

    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 16pt;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    width: 100%;
    /* background-color: #3dcd58; */

    text-align: center;

    /* display: inline; */

}

#langDiv{

    /* border: 1px solid red; */

    width: 100%;
    background-color: #3dcd58;

    font-size: 26pt;
    padding: 6px;

    text-align: center;

    /* margin-bottom: 8px; */

    /* display: inline; */

}

#langDiv2{

    width: 100%;
    background-color:white;
    font-size: 15pt;
    padding: 0px;
    width: 100%;

    text-align: center;

}

#langDiv3{

    /* border: 1px solid red; */

    width: 100%;
    height: 4px;
    background-image: url('img/grad.png');

}

#langBut{

    font-family: 'Nunito', sans-serif;
    color: #3dcd58;
    text-decoration: none;
    
}

#langBut a:link { color: #3dcd58; text-decoration: none;}
#langBut a:visited { color: #3dcd58; text-decoration: none;}
#langBut a:hover { color: #3dcd58; text-decoration: none;}
#langBut a:active { color: #3dcd58; text-decoration: none;}

#loadingBar{
    position: fixed;
    width: 0px;
    height: 10px;
    background-color: #3dcd58;
    z-index: 202;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}

#mycanvas{
    height: 100%;
    width: 100%;
    position: fixed;
    z-index:2;
}

#homeButton{
    display: none;
}

.navDiv{
    display: flex;
    position: fixed;
    right: 0;
    z-index:28;
    font-family: 'Nunito', sans-serif;
    font-weight:400;
    margin-top:0px;
    margin-right:7px;
    font-size: 16px;;
    /* border: 1px solid blue; */
}

.navDiv a {
    text-decoration: none;
    /* text-transform: uppercase; */
    color: white;
    text-align: right;
    z-index:100;
  }
  
.navDiv a:hover {
    color: white;
    z-index:100;
}

.navButton {
    float: left;
    padding-left:10px;
    padding-right:20px;
    padding-top: 4px;
    padding-bottom: 7px;
    margin-top: 10px;
    z-index: 100;
    /* border: 1px solid red; */
}

#soundButtonDiv{
    /* border: 1px solid darkred; */
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 27;
    width:49px;
    height:49px;
    
    display: inline;
}
  
#soundButtonDiv2{
    /* border: 1px solid darkred; */
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 28;
    width:49px;
    height:49px;
    
    pointer-events: none;
}
.sIcon{
    /* padding:2px; */
    width:49px;
    height:49px;
    /* border: 3px solid green; */
}

#soundButtonOn{
    display: inline;
    /* z-index: 370; */
    
}

#soundButtonOff{
    display: none;
    pointer-events: none;
    /* z-index: 380; */
}



#colorTest1{
	position: absolute;
    top: 100px;
    left: 20px;
    z-index:12;
    opacity: 0;
}

#colorTest2{
	position: absolute;
    top: 300px;
    left: 20px;
    z-index:12;
    opacity: 0;
}

#colorTest3{
	position: absolute;
    top: 500px;
    left: 20px;
    z-index:12;
    opacity: 0;
}

#colorTest4{
	position: absolute;
    top: 700px;
    left: 20px;
    z-index:12;
    opacity: 0;
}

.testInput{
    width: 80px;
    text-align: center;
}

.pixi {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#backToDemo{
    display: inline;
}

#backToHub{
    display: none;
}

#logo{
    width:253px;
    height:49px;
    pointer-events: none;
}

#logo3{
    width:168px;
    height:32px;
    pointer-events: none;
    display: none;
}

.logoDiv{
    position: fixed;
    /* right: 0; */
    z-index:0;
    margin-top:0px;
    margin-left:0px;
    z-index: 100;
    /* width:220px; */
    /* height:150px; */
    
    pointer-events: none;
}

#learnMoreMobile{
    position: fixed;
    width: 177px;
    height: 32px;
}

#learnMoreMobileDiv{
    position: fixed;
    z-index: 100;
    bottom: 32px;
    left: 0px;
    pointer-events: none;
    display: none;
}

.topBarDiv{
    background-color: #3dcd58;
    position: fixed;
    z-index: 4;
    width:100%;
    height:49px;
    
    pointer-events: none;
}

#coverDiv{
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 95;
    background-color: white;
    pointer-events: none;
}

#videoDiv{
    position: fixed;
    width: 90%;
    max-width: 1040px;
    margin:0px auto;
    
    left:0;
    right:0;
    top: 50%;
    z-index:90;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /* background-color: black; */
    /* opacity:0; */
    pointer-events: none;
    /* border: 3px solid red; */
    opacity: 0;
    
    /* border: 1px solid black; */
    /* height:600px; */
}

#videoDiv1{
    /* border: 1px solid blue; */
    padding: 0px;
    margin: 0px;
    max-height: 585px;
    overflow: hidden;
    /* pointer-events: none; */
    /* background-color: white; */
}

/* #videoDiv2{
    padding: 12px;

    font-family: 'Nunito', sans-serif;
    font-weight:700;
    font-size:12px;
    line-height: 1.5;
    color:grey;
    text-align: justify;
} */

#videoDiv3{
    /* border: 1px solid green; */
    display: flex;
    position: fixed;

    text-align: left;
    font-family: 'Nunito', sans-serif;
    font-weight:200;
    font-size:14px;
    color: white;
}

.endButton{
    width: 100px;
    padding: 12px;  
    margin-right: 1px;
    margin-top:4px;
    background-color: #62b3e2;
    /* border: 3px solid red; */
    text-align: center;
    z-index:90;
}

#eaeButton{
    display:none;
}

#eaeButtonMobile{
    display:none;
    text-align: right;
}

#videoDiv3 a:link { color: white; text-decoration: none;}
#videoDiv3 a:visited { color: white; text-decoration: none;}
#videoDiv3 a:hover { color: white; text-decoration: none;}
#videoDiv3 a:active { color: white; text-decoration: none;}

#videoPlayer{
    /* position: fixed; */
    margin: 0px;
    /* border: 3px solid white; */
    /* border-top: 1px solid black; */
    /* width: 100%; */
    width: 100%;
    outline :none;
    
    /* opacity:0; */
}

@media (max-width:700px){

    .topBarDiv{
        display: none
    }

    .navButton{
        color: #3dcd58;
        margin-top: 0px;
        padding-top: 0px;
        padding-right:5px;
    }

    .navDiv{
        padding-top: 4px;
    }

    .navDiv a {
        color: #3dcd58;
      }
      
    .navDiv a:hover {
        color: #3dcd58;
    }

    #logo{
        display: none;
    }
    #logo3{
        display: inline;
    }
    #videoDiv{
        width: 65%;
    }
    .endButton{
        margin-top:0px;
        padding: 4px;  
    }

}

@media (max-width:414px){
    /* 
    #eaeButton2{
        display:none
    }

    #eaeButtonMobile{
        display:inline
    } */

}

.region1{
   
   height: 30px;
   position: relative;
}

.region2{
   
   height: 30px;
   padding-left: 3px;
   position: relative;
}

#globeImage{

    padding-top: 7px;
    height: 20px;
    width: 20px;
    
}

/* Dropdown Button */
.dropbtn {
    font-family: 'Nunito', sans-serif;
    background-color: white;
    color: #3dcd58;
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 5px;
    padding-bottom: 8px;
    font-size: 24px;
    border: none;
    
	display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    

  }

  /* Dropdown Content (Hidden by Default) */
.dropdown-content {
    /* margin-top: 4px; */
    font-family: 'Nunito', sans-serif;
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* border: 1px solid darkred; */
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: #919090;
    padding: 12px 76px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f3f3f3;}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */