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:25vh;*/
    height:50vh;
    width:auto;
    display: block;
    margin:auto;
    margin-top:2vh;
    margin-bottom:5vh;
}

#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;
}

#cleverErrorPanel {
    height: 30vmin;
}

#cleverErrorHeader {
    height: 8vmin;
}

#cleverErrorText {
    font-size: 3vmin;
}

#cleverSignInHeader {
    //height: 17vmin;
    padding-right: 2vmin;
}

#signInClever {
    width: 70vmin;
    height: 70vmin;
}

.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: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: white;
    padding: 20px;
    font-family: Verdana;
    width: 60vmin;
    height: 45vmin;
    margin: auto;
    border: 1px solid gray;
    border-radius: 5px;
    color: #3B4E61;
}
.dialog-input-container {
    margin-bottom: 1vmin;
}
.dialog-header {
   margin-bottom: 2vmin; 
}
.dialog label {
   margin-bottom: 1.5vmin;  
}
#ResetPassword .reg-right {
    position: absolute;
    top: 0px;
    left: 65vmin;
    width: 30vmin;
}
.signInHeader, .dialog-header {
    height: 9%;
    color: #3B4E61;
    font-family: Verdana;
    font-size: 3vmin;
    text-transform: uppercase;
}
.signInPanel label {
    margin-top: 3%;
    display: block;
    font-size: 2.7vmin;
}
.closeSignIn, .close-dialog {
    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: Verdana;
    font-size: 3vmin;
    color: #3B4E61;
    text-indent: 6vmin;
}
.signInInput::placeholder {
    font-style: italic;
    color: #32323280;
}
.signInError {
    padding-top: 3%;
    font-family: Verdana;
    font-size: 2vmin;
    font-style: italic;
    color: red;
}
.signInForm {
    position: relative;
    height: 80%;
}
.signInForm>div {
    height: 22%;
}
.signInInputContainerUser {
    position: relative;
    background-color: #ECEFF4;
    border: 2px solid #D3DCE6;
    width: 100%;
    height: 60%;
    background-image: url("img/id-card.png");
    background-position: left;
    background-repeat: no-repeat;
    background-size: auto 3vmin;
}
.signInInputContainerPw {
    position: relative;
    background-color: #ECEFF4;
    border: 2px solid #D3DCE6;
    width: calc(100% - 5vmin);
    height: 60%;
    background-image: url("img/lock-alt.png");
    background-position: left;
    background-repeat: no-repeat;
    background-size: auto 3vmin;
}
.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, .dialog .green-button, .gray-button {
    width: 100%;
    height: 7vmin;
    background-color: #03BD5B;
    color: white;
    border: 1px solid gray;
    border-radius: 5px;
    font-family: Verdana;
    font-size: 3.2vmin;
    font-weight: bold;
    text-shadow: 
    -1px -1px 0 #171717,
    1px -1px 0 #171717,
    -1px 1px 0 #171717, 
    1px 1px 0 #171717;
}
.gray-button {
    background-color: white;
    text-shadow: none;
    color: #3B4E61;
    margin-bottom: 2vmin;
}
.signInFooter {
    height: 16%;
    color: #3B4E61;
}
#blocker {
    z-index: 100;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #ffffffad;
    display:none;
}
#mainPanel {
    display:none;
    position: relative;
    background: white;
    width: 25vw;
    margin: auto;
}
#mainPanel > div {
    border: 3px solid #d9d9d9;
    border-radius: 10px;
    padding: .8vw;
    margin-top:1.5vw;
}
.main-panel-button {
    text-transform: uppercase;
    font-size: 1.4vw;
    color: white;
    border: 1px solid #998d80;
    width: 100%;
    padding: 1.2vw;
    border-radius: 5px;
    font-weight: bold;
}
#newAccountButton {
    background: #f57f00;
    text-shadow: -1px -1px 0 #121212, 1px -1px 0 #121212, -1px 1px 0 #121212, 1px 1px 0 #121212;
}
#newAccountButton:active {
    background:#cf6c01;
}
#newAccountButton:hover {
    background:#e77903;
}

#signInButton {
    background: #03b657;
    text-shadow: -1px -1px 0 #171717, 1px -1px 0 #171717, -1px 1px 0 #171717, 1px 1px 0 #171717;
}
#signInButton:active {
    background:#03a74f;
}
#signInButton:hover {
    background:#03af53;
}
#loginWithClever {
    border: none;
    height: 5vw;    
    background-color: white;
    background-image: url("img/LogInWithClever.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;   
}
.main-panel-info {
    background: #f7f7f7;
    margin-top: 1vw;
    padding: 0.7vw;
    font-size: 1.1vw;
    color: #3b4e61;
    letter-spacing: .08vw;
    line-height: 1.5vw;
}
.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;
}
.loading-spinner {
    display: block;
    margin: 0px;
    padding: 0px;
    position: absolute; 
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background-size: cover;
}
.loading-spinner-bg {
    display: block;
    margin: 0px;
    padding: 0px;
    position: absolute; 
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background-size: cover;
    background-color: #ffffff;
    opacity: 0.4;
    z-index: 10000;
}
.arrow-container {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    background-color: #3B4E61;
    border: 1px solid #000000;
    border-radius: 16px;
    z-index:10001;
}
.arrows {
    position: relative;
    left: 20px;
    top: 20px;
    width: 80px;
    height: 80px;
    background-image: url("img/sync-alt.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-animation: spin 1.2s linear infinite;
    animation: spin 1.2s linear infinite;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#regState {
    width:100%;
    height: 5vmin;
    color: #3B4E61;
    font-size: 2.4vmin;
}
.register-text-inputs {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.reg-column {
    display:none;
    flex:1;
    padding-right: 4vmin;
    padding-bottom: 2vmin;
}
.reg-row-item {
    display: block;
    height: 7.5vmin;
    padding: 1vmin;
}
.reg-grid-item {
    display: block;
    height: 9.5vmin;
    flex-basis: calc(50% - 2vmin);
}
.display-flex, .reg-state-row {
    display:flex;
}
.reg-state-row {
    padding-top: 3vmin;
}
.reg-state-label{
    display: block;
    width: 9vmin;
    font-size: 2.4vmin;
    align-content: center;
}
.reg-row-school-year {
    display: block;
    height: 14vmin;
    padding: 1vmin;
    padding-top: 4vmin;  
}
.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;
}
.school-year-instructions {
    font-size: 2vmin;
    padding-bottom: 1.2vmin;
}
.row-item-label {
    display: block;
    height: 2.4vmin;
    padding: .4vmin;
    flex: 1;
    font-size: 2.4vmin;
}
input[type="radio"] {
    margin: 0 1vmin 0 0;
}
.reg-item-container {
    flex: 1 1 50%;
    height: 4vmin;
}
.register-panel {
    width: 95%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    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: 4vmin;
    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: 0vmin;
}
.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, .dialog-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;
}
.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, .dialog-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-error, .dialog-error {
    height: 2.4vmin;
    color: red;
    font-style: italic;
    font-size: 1.6vmin;
}
.reg-agree {
    border: 1px solid gray;
    border-radius: 5px;
    display: flex;
    gap: 10px;
    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: #f57f00;
    color: white;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 3vmin;
    padding: .4em;
    width: 100%;
    font-weight: bold;
    text-shadow: 
    -1px -1px 0 #121212,
    1px -1px 0 #121212,
    -1px 1px 0 #121212, 
    1px 1px 0 #121212;
}
.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;
}
.dialog {
    display: none;
    top: 10vmin;
    left: 50%;
    width: 57vmin;
    position: absolute;
    transform: translate(-50%, 0);
    z-index: 1000;
    background-color: white;
    padding: 20px;
    font-family: Verdana;
    border: 1px solid gray;
    border-radius: 5px;
    color: #3B4E61;
}
.dialog p {
    font-size: 2.7vmin;
    margin: 5vmin 0;
}
.dialog .signInButton {
    height: 8vmin;
}
#resetPassword .reg-right{
    position: absolute;
    top: 0;
    left: 100%;
    width: 30vmin;
}
/* 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;
    }
}*/