body{
    margin:0px;
    padding:0px;
    position: absolute; 
    height:100%;
    width:100%;
    background-size:cover;
    font-style: regular;
    font-family:"Myriad Pro", Myriad,"Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color:#ffffff;
    /*background-color:#f0f0f1;*/
}

.webgl-content,#loadingBlock,#errorBrowserBlock{
    padding:0px;
    position:absolute;
    height:100vh;
    width:100vw;
    background-color:#ffffff;
    /*background-color:#f0f0f1;*/
}

#gameContainer,canvas{
    position:absolute;
    height:100%;
    width:100%;
    background-color:#ffffff;
    /*background-color:#f0f0f1;*/
}

#fullScreenButton{
    height:50px;
    width:50px;
    position:absolute;
    z-index:1;
    bottom:5px;
    right:5px;
    background-color:transparent;
    background-image:url("../img/fullScreen_on.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size:30px 30px;
    border:none;
    cursor: pointer;
}

.subtitle{
    color:#1896a7;
    font-size:2.3vh;
    padding-bottom:2.3vh;
    padding-top:1vh;
    display: block;
    height:10vh;
    width:40vw;
    margin:auto;
    text-align: center;
}

.logo{
    height:30vh;
    width:auto;
    display: block;
    margin:auto;
    margin-top:10vh;
    margin-bottom:8vh;
}

#loadingBlock,#errorBrowserBlock{
    /*background-image:url("../img/background.png");*/
    background-size:cover;
}

#emptyBar{
    background: url("../img/progressEmpty.png") no-repeat right;
    float: right; 
    width: 60%; 
    height: 100%; 
    display: inline-block;
}

#fullBar{
    background: url("../img/progressFull.png") no-repeat right;
    float: left; 
    width: 40%; 
    height: 100%; 
    display: inline-block;
}

#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
    height:25vh;
    width:40vw;
    margin:auto;
    text-align: center;
}

#progressBar{
    height:8vh;
    color:#666666;
    font-size:4vh;
}

#warningBrowserBlock,#warningMobileBlock,#errorContent{
    margin-top:15vh;
    color:#666666;
    font-size:2.3vh;
}

.browserIcons{
    display: inline-flex;
    margin-top:2vh;
}

.browserIcons a{
    width:150px;
}

#errorContent{
    font-size:3vh;
    margin-top:5vh;
}

.centered{
    height: 100%;
    max-width:770px;
    margin-left:auto;
    margin-right:auto;
}


.playVideoBtn{
    background: url('../img/RIGHTarrow.png') no-repeat scroll 0 0 transparent;
    position:fixed; 
    width: 500px;
    height:413px; 
    top:50%; 
    left:50%; 
    margin-top: -206px;
    margin-left: -250px; 
    border:none;
    display: none;
}

.notification{
    display: none;
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    z-index: 1000;
    background: #a3cf62;
    padding: 20px;
    font-family: Verdana;
    font-size: 19px;
    min-height: 300px;
    border-radius: 10px 10px 30px 30px;
}

.signInPanel {
    display: block;
    position: relative;
    top: 4vh;
    z-index: 1000;
    background-color: white;
    padding: 2px;
    font-family: Helvetica;
    width: 60vmin;
    height: 40vmin;
    margin: auto;
    border: 1px solid gray;
    border-radius: 5px;
    color: #3B4E61;
}

.signInBorder {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 18px;
    border: 2px solid #11437D;
    border-radius: 5px;
    height: 100%;
}

.signInHeader {
    height: 16%;
    color: #3B4E61;
    font-family: Helvetica;
    font-size: 3vmin;
}
#closeSignIn {
    border: none;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 3vmin;
    height: 3vmin;
    background-color: white;
    background-image: url("img/times.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#closeSignIn:hover {
    background-color: #F5F5F5;
}
.signInInput {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    font-family: Helvetica;
    font-size: 3vmin;
    color: #3B4E61;
    text-indent: 6vmin;
}
.signInInput::placeholder {
    font-style: italic;
    color: #32323280;
}
.signInError {
    font-family: Helvetica;
    font-size: 2vmin;
    font-style: italic;
    color: red;
}
#signInForm {
    position: relative;
    height: 67%;
}
#signInForm>div {
    height: 25%;
}
.signInInputContainerUser {
    position: relative;
    background-color: #ECEFF4;
    border: 2px solid #D3DCE6;
    width: 100%;
    height: 70%;
    background-image: url("img/envelope.png");
    background-position: 1vmin center;
    background-repeat: no-repeat;
    background-size: 3vmin auto;
}
.signInInputContainerPw {
    position: relative;
    background-color: #ECEFF4;
    border: 2px solid #D3DCE6;
    width: calc(100% - 5vmin);
    height: 70%;
    background-image: url("img/lock-alt.png");
    background-position: 1vmin center;
    background-repeat: no-repeat;
    background-size: auto 3vmin;
}
.signInInputContainerUser > input:focus {
    outline: none;
}
.signInInputContainerPw > input:focus {
    outline: none;
}
.showHidePw {
    position: absolute;
    width: 4vmin;
    height: 4vmin;
    right: -5vmin;
    top: 0.5vmin;
    border: none;
    background-color: white;
    background-image: url("img/eye.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.showHidePw:hover {
    background-color: #F5F5F5;
}
.showPw {
    background-image: url("img/eye.png");
}
.hidePw {
    background-image: url("img/eye-slash.png");
}
#signInButton {
    width: 100%;
    height: 80%;
    background-color: #11437D;
    color: white;
    border: 1px solid gray;
    border-radius: 5px;
    font-family: Helvetica;
    font-size: 3.2vmin;
}
.signInFooter {
    height: 16%;
    color: #3B4E61;
}
#forgotPassword {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #3B4E61;
    font-family: Verdana;
    font-size: 2.4vmin;
    border: none;
    background-color: white;
}
#forgotPassword:hover {
    background-color: #F5F5F5;
}
.register-panel {
    position: relative;
    font-family: Arial, sans-serif;
    color: #3B4E61;
    z-index: 1000;
    margin-top: 2vmin;
    display: flex;
    gap: 1vmin;
    padding-left: 1vmin;
    padding-right: 1vmin;
}
.reg-left {
    width: 15%;
    background: #EEEEEE;
}

.reg-dialog {
    width: 80vmin;
    flex: 1 1 80%;
    background: white;
    padding: 2px;
    border: 1px solid gray;
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.reg-dialog-border {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 1.6vmin;
    border: 2px solid #11437D;
    border-radius: 5px;
    height: 100%;
}
.reg-right {
    width: 20vmin;
    flex: 1 1 20%;
    background: white;
    padding: 2px;
    border: 1px solid gray;
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 1.6vmin;
    display: flex;
    flex-direction: column;
}
.reg-right-border {
    padding: .8vmin;
    border: 2px solid #11437D;
    border-radius: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vmin;
}
.reg-row {
    display: flex;
    gap: 2.4vmin;
}
.reg-row-spacer {
    flex-grow: 100;
    padding: 1vmin;
    color: red;
    font-style: italic;
    font-size: 1.6vmin;
}
.reg-header {
    font-size: 3vmin;
    margin-bottom: 2vmin;
}
.reg-close {
    border: none;
    width: 3vmin;
    height: 3vmin;
    background-color: white;
    background-image: url("img/times.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.reg-close:hover {
    background-color: #F5F5F5;
}
.reg-input-container {
    flex: 1 1 50%;
    background-color: #ECEFF4;
    border: 2px solid #D3DCE6;
    height: 4vmin;
    background-position: left;
    background-position-x: 4px;
    background-repeat: no-repeat;
    background-size: auto 3vmin;
}
.reg-input-container > input:focus {
    outline: none;
}
.icon-key {
    background-image: url("img/key.png");
}
.icon-school {
    background-image: url("img/school.png");
}
.icon-user {
    background-image: url("img/user-circle.png");
}
.icon-mail {
    background-size: 3vmin;
    background-image: url("img/envelope.png");
}
.icon-lock {
    background-image: url("img/lock-alt.png");
}
.reg-input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    font-size: 2.4vmin;
    color: #3B4E61;
    text-indent: 5vmin;
}
.reg-input::placeholder {
    font-style: italic;
    font-size: 2.4vmin;
    color: #32323280;
}
.reg-code {
    text-transform: uppercase;
}
.reg-show-hide-pw {
    margin-left: 10px;
    width: 4vmin;
    height: 4vmin;
    border: none;
    background-color: white;
    background-image: url("img/eye.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.reg-show-hide-pw:hover {
    background-color: #F5F5F5;
}
.reg-show-pw {
    background-image: url("img/eye.png");
}
.reg-hide-pw {
    background-image: url("img/eye-slash.png");
}
.reg-pw-col {
    flex: 1 1 50%;
    display: flex;
}
.reg-error {
    height: 2.4vmin;
    padding: .4vmin;
    flex: 1;
    color: red;
    font-style: italic;
    font-size: 1.6vmin;

}
.reg-agree {
    border: 1px solid gray;
    border-radius: 5px;
    display: flex;
    gap: 20px;
    flex-direction: column;
    font-size: 2.4vmin;
    padding: 1.6vmin;
}
.reg-checkbox {
    width: 2.4vmin;
    height: 2.4vmin;
}
.reg-link {
    align-self: center;
    padding: .4vmin;
}
.register-button {
    background-color: #11437D;
    color: white;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 3vmin;
    padding: .4em;
    width: 100%;
}
.reg-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 2.4vmin;
    padding-bottom: 2vmin;
}
.already-registered-button {
    color: #3B4E61;
    font-size: 2.4vmin;
    border: none;
    background-color: white;
}
.already-registered-button:hover {
    background-color: #F5F5F5;
}
.pw-row {
    display: flex;
    gap: 1vmin;
}
.pw-icon {
    width: 2vmin;
    height: 2vmin;
    background-repeat: no-repeat;
    background-size: 1.6vmin 1.6vmin;
    background-position: center;
}
.add-code {
    display: block;
    position: relative;
    top: 4vh;
    z-index: 1000;
    background-color: white;
    padding: 2px;
    font-family: Arial, sans-serif;
    width: 60vmin;
    margin: auto;
    border: 1px solid gray;
    border-radius: 5px;
    color: #3B4E61;
}
.add-code-border {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 1.6vmin;
    border: 2px solid #11437D;
    border-radius: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1vmin;
}
.add-code-header {
    font-size: 3vmin;
}
.add-code-row {
    display: flex;
    margin-bottom: 2.4rem;
}
.add-code-row-spacer {
    flex-grow: 999;
}
.add-code-close {
    border: none;
    width: 3vmin;
    height: 3vmin;
    background-color: white;
    background-image: url("img/times.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.add-code-close:hover {
    background-color: #F5F5F5;
}
.add-code-msg {
    font-size: 2.4vmin;
}
.add-code-input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    font-size: 3vmin;
    color: #3B4E61;
    text-indent: 6vmin;
    text-transform: uppercase;
}
.add-code-input::placeholder {
    font-style: italic;
    color: #32323280;
    text-transform: none;
}
.add-code-error {
    padding: .4vmin;
    font-size: 2vmin;
    font-style: italic;
    color: red;
    height: 8vmin;
}
.add-code-input-wrapper {
    position: relative;
    background-color: #ECEFF4;
    border: 2px solid #D3DCE6;
    width: 100%;
    height: 70%;
    background-image: url("img/key.png");
    background-position: 1vmin center;
    background-repeat: no-repeat;
    background-size: 3vmin auto;
}
.add-code-input-wrapper > input:focus {
    outline: none;
}
.add-code-button {
    background-color: #11437D;
    color: white;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 3vmin;
    padding: .4em;
    width: 100%;
}

/* When aspect-ratio is smaller than 4/3*/

/*@media (max-aspect-ratio: 4/3){
    
    .webgl-content{
        -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%);
        -webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
    }
    
    .keepRatio{
        width:100%;
        padding-top: 75%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .webgl-content,#loadingBlock,#errorBrowserBlock{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height:100%;
    }

    .logo{
        width:25vw;
        height:auto;
        margin-top:1vh;
    }
    
    .subtitle{
        font-size:2vw;
        height:10vw;
        padding-bottom:1vw;
        padding-top: 1vw;
    }

    .subtitle,#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
        width:80vw;
    }
    
    #progressBar{
        height:6vw;
        margin-top: 2vw;
        font-size:3vw;
    }
    
    #emptyBar,#fullBar{
        height: 2vw; 
    }
    
    #warningBrowserBlock,#warningMobileBlock,#errorContent{
        margin-top:3vw;
        font-size:2vw;
    }
    
    .browserIcons{
        margin-top:1vw;
    }
    
    .browserIcons a{
        width:15vw;
    }
    
    .browserIcons a img{
        width:8vw;
    }
}*/


/* When aspect-ratio is bigger than 16/9*/

/*@media (min-aspect-ratio: 16/9){
    body{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
    }
    
    .keepRatio{
        width:178vh;
        height:100%;
        margin:0 auto;
    }
    
    .webgl-content,#gameContainer,canvas,#loadingBlock,#errorBrowserBlock{
        width: inherit;
    }
    
    .webgl-content{
    -webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
    }
    
    .subtitle,#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
        width:100vh;
    }
}*/