body {
    margin:0;
    background:#2f283a;
    text-align:center;
    font-family:'Selfica Light','sans-serif';
    color:#f5f5f5;
}
* {
    box-sizing:border-box;
}
.loading {
    position:absolute;
    left:0;top:0;
    width:100%;
    height:100vh;
    background:rgb(0, 0, 0);
    line-height:100vh;
    opacity:1;
    transition:opacity .6s;
}
.loading > div {
    line-height:normal;
    display:inline-block;
}
.progress {
    display:block;
    margin:auto;
    position:relative;
    border:#fcfcfc 2px solid;border-radius:0;
    background:#050505;
    opacity:1;
    width:25rem;
    height:6vh;
}
.progress>span {
    font-weight:bold;
    font-size:1.2em;
    color:rgb(0,0,0);
    position:absolute;
    left:50%;top:50%;
    transform:translateX(-50%) translateY(-50%);
    z-index:99;
}
.progress .bar {
    z-index:98;
    background:#3c6dbb;
    border-radius:2px;
    position:absolute;
    top:0;left:0;
    height:100%;
}
.progress .bar {
    background:#fcfcfc;
    border-radius:0;
    top:5px;left:5px;
    height:calc(100% - 10px);
}

#content {
    display:block;
    position:absolute;
    left:50%;top:50%;
    transform:translateX(-50%) translateY(-50%);
}
#content canvas {
    z-index:1;
}
#content #map {
    position:absolute;
    top:.2rem;right:.2rem;
    height:2.5em;
    cursor:pointer;
}
#content #speaker {
    position:absolute;
    top:.2rem;left:.2rem;
    height:1em;
    cursor:pointer;
}
#content #plan {
    background:#c69d67;
    border:2px solid #815524;
}
#content .dialog {
    box-sizing:border-box;
    position:absolute;
    width:calc(100% - 1rem); height:5em;
    left:50%;bottom:1rem;
    transform:translateX(-50%);
    background:#c69d67;
    border:3px solid #815524;
    padding:.3em .5em;
    text-align:left;
    color:#0a0a0a;
    cursor:pointer;
}
#content .dialog figure {
    margin:0;
    margin-right:1em;
    display:inline-block;
    text-align:center;
    float:left;
    overflow:hidden;
}
/*
#content .dialog figure span {
    width:90px;
    display:inline-block;
    overflow:hidden;
}
*/
#content .dialog figure img {
    height:3em;
    background:#d3c2ab;
    border:2px solid #fff;
    vertical-align:middle;
}
#content .dialog p {
    display:inline-block;
    margin:0;padding:0;
    float:left;
    max-width:calc(100% - 8em);
}
#content .dialog img.arrow_next {
    position:absolute;
    right:.3em;
    bottom:.3em;
    width:2em;
    cursor:pointer;
}
#content .dialog img.cross_exit {
    position:absolute;
    right:.3em;
    top:.3em;
    width:.8em;
    cursor:pointer;
}