:root {
    /* --scale: calc((100vw + 100vh) / 3000); */
}

@media only screen and (max-width: 600px) {
    /* Mobile */
    :root {
        /* --scale: calc((100vw + 100vh) / 1100); */
    }
}

html, body {
    padding: 0; margin: 0; height: 100%; overflow: hidden;
    font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;
    font-size: 10px; 
    background-color: #000000;
    background-image: url(../images/bg_intro.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

* {
    user-select: none;
    -webkit-user-select: none;
}

.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.visible {
    opacity: 1;
    pointer-events: all;
}



.loading {
    position: absolute;
    left: 50%; top: 50%; width: 7rem; height: 7rem;
    transform: translate(-50%,-50%);
    /* background-color: rgba(0,0,0,0.3); */
    border-radius: 50%;
    z-index: 1000;
}

.loading .spinner {
    position: absolute;
    left: 50%; top: 50%; width: 6.6rem; height: 6.6rem;
    transform: translate(-50%,-50%);
}

.loading .text {
    position: absolute;
    left: 50%; top: 50%; width: 100%; 
    transform: translate(-50%,-50%);
    font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;
    font-size: 1.4rem; 
    text-align: center;
}

#tour {
    position: absolute;
    width:100%; height:100%;
    z-index: 1;
}

#intro {
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; width: 33rem; height: auto;
    max-width: 100%; max-height: 100%;
    padding: 2rem;
    transform: translate(-50%,-50%);
    z-index: 10;
    background-color: rgba(0,0,0,0.0);
    text-align: center;
    border-radius: 0.8rem;
    transition: opacity 0.3s, transform 0.3s;
}

#intro:not(.visible) {
    transform: translate(-50%,-50%) scale(0.9);
}

#intro .logo {
    width: auto; height: auto;
    max-width: 100%; height: auto;
}

#intro .play {
    margin: 1rem 0 2rem 0;
}

#intro .begin {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #aaa;
}

#intro > img { height: 2rem; width: auto; }

#intro button {
    position: relative;
    background-color: rgba(255,255,255,0.1);
    border: 0;
    padding: 0 1.5rem 0 4.7rem;
    border-radius: 0.8rem;
    font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;
    font-size: 1.4rem; 
    line-height: 4rem;
    transition: background-color 0.3s;
    /* box-shadow: ; */
}

#intro button:focus {
    outline: 1px solid rgba(72, 141, 252, 0.5);
}

#intro button:active {
    background-color: rgba(255,255,255,0.3);
}

#intro button img {
    position: absolute;
    left: 1.4rem; top: 50%; transform: translateY(-50%);
    vertical-align: text-bottom;
    margin-right: 1rem;
    height: 2rem; width: auto;
}

#ui {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    z-index: 2;
}


#ctrls {
    position: absolute;
    box-sizing: border-box;
    left: 0; top: 0; width: 100%; height: 100%;
    z-index: 3;
}

#ctrls.visible {
    pointer-events: none!important;
}

#ctrls button {
    position: absolute;
    right: 1rem; width: 4rem; height: 4rem; line-height: 4rem;
    background-color: rgba(0,0,0,0.7);
    border: 0;
    border-radius: 0.8rem;
    transition: background-color 0.2s;
    /* box-shadow: 0 0 2px rgba(255,255,255,0.5); */
    pointer-events: all;
}

#ctrls button:focus {
    outline: 1px solid rgba(72, 141, 252, 0.5);
}

#ctrls button:active {
    background-color: rgba(40,40,40,0.7);
}


#ctrls button img {
    position: absolute;
    left: 50%; top: 50%; height: 2rem; width: auto;
    transform: translate(-50%,-50%);
    transform: scale(0);
    transition: transform 0.3s;
}

#ctrls button.audio {
    top: 6rem;
}

#ctrls button.playbtn {
    top: 11rem;
}

#ctrls button.gyrobtn {
    top: 16rem;
}

#ctrls button.gyrobtn img {
    height: 2.8rem; 
}

#ctrls button.audio.on img.on,
#ctrls button.audio.off img.off,
#ctrls button.playbtn.replay img.replay,
#ctrls button.playbtn.play img.play,
#ctrls button.playbtn.pause img.pause,
#ctrls button.gyrobtn.off img.off,
#ctrls button.gyrobtn.on img.on {
    transform: translate(-50%,-50%) scale(1);
}

#ctrls .title {
    position: absolute;
    left: 50%; bottom: 1rem; width: auto;
    transform: translate(-50%,0%) scale(1);
    background-color: rgba(0,0,0,0.2);
    line-height: 1.8rem; padding: 0.8rem 1.5rem;
    border-radius: 2rem;
    font-family: Arial, Helvetica, sans-serif; color:#FFFFFF;
    font-size: 1.8rem; 
    text-align: center;
}

body.menu_open #ctrls {
    opacity: 0!important;
    pointer-events: none!important;
}


#menu {
    position: absolute;
    top: 1rem; right: 1rem; width: 4rem; height: 4rem;
    max-width: 36rem;
    background-color: rgba(0,0,0,0.7);
    border: 0;
    border-radius: 0.8rem;
    transition: transform 0.3s, width 0.3s, height 0.3s, background-color 0.3s;
    pointer-events: all;
    overflow: hidden;
    z-index: 4;
}

body.menu_open #menu {
    background-color: rgba(0,0,0,0.5);
    top: 1rem; right: 1rem; width: 36rem; height: calc(100% - 2rem);
    max-width: calc(100vw - 2rem);
}

#menu > button {
    position: absolute;
    top: 1px; right: 1px; width: 3.8rem; height: 3.8rem;
    background-color: rgba(0,0,0,0.0);
    border: 0;
    border-radius: 0.8rem;
    transition: background-color 0.2s;
    pointer-events: all;
}

#menu > button:focus {
    outline: 1px solid rgba(72, 141, 252, 0.5);
}

#menu > button:active {
    background-color: rgba(40,40,40,0.7);
}


#menu > button .line1,
#menu > button .line2,
#menu > button .line3 {
    position: absolute;
    width: 2rem; height: 0.2rem; border-radius: 0.2rem;
    left: 50%; top: 50%; 
    transform: translate(-50%,-50%);
    transition: transform 0.3s;
    background-color: #FFFFFF;
}

#menu > button .line1 {transform: translate(-50%,-50%) translateY(-0.6rem); }
#menu > button .line3 {transform: translate(-50%,-50%) translateY(+0.6rem); }

body.menu_open #menu > button .line1 {transform: translate(-50%,-50%) translateY(-0.0rem) rotate(+45deg); }
body.menu_open #menu > button .line2 {transform: translate(-50%,-50%) scaleX(0); }
body.menu_open #menu > button .line3 {transform: translate(-50%,-50%) translateY(-0.0rem) rotate(-45deg); }

#menu .logo {
    position: absolute;
    left: 1rem; top: 1rem; width: calc(100% - 2rem); height: 13rem;
    background-image: url(../images/logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#menu .slide_menu_stage {
    position: absolute;
    left: 1rem; top: 15rem; width: calc(100% - 1rem); height: calc(100% - 16rem);
    background-color: rgba(255,255,255,0.0);
    opacity: 0;
    transition: opacity 0.3s
    
}

body.menu_open #menu .logo,
body.menu_open #menu .slide_menu_stage {
    opacity: 1;
}