@font-face { font-family: MonserratL; src: url('font/Montserrat-Light.ttf'); }
@font-face { font-family: MonserratM; src: url('font/Montserrat-Medium.ttf'); }
@font-face { font-family: MonserratR; src: url('font/Montserrat-Regular.ttf'); } 
@font-face { font-family: MonserratS; src: url('font/Montserrat-SemiBold.ttf'); } 
@font-face { font-family: MonserratB; src: url('font/Montserrat-Bold.ttf'); } 
@font-face { font-family: Cabin;      src: url('font/Cabin-Regular.ttf'); } 

html, body {
    font-family: MonserratM, Arial, sans-serif;
    font-size: 16px;
    background-color: #fff;
    color: rgb(33, 33, 41);
}

/* pre-load ui images */
body:after {
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url('img/Icon_Finger.svg')
            url('img/Icon_Gyro.svg')
            url('img/Icon_Min.svg')
            url('img/Icon_Max.svg')
            url('img/Icon_HotspotA.svg')
            url('img/Logo.png');
}

.bold {
    font-family: MonserratB, Arial, sans-serif;
    color: rgb(66, 66, 82);
}


#panoElem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.logo {
    pointer-events: none;
    display: inline-block;
}

.uiTopElem {
    pointer-events: none;
    position:absolute;
    width:100%;
    top: 0;
    left:0;
    text-align: center;
}

.uiBottomElem {
    pointer-events: none;
    position:absolute;
    width:100%;
    bottom: 0;
    left:0;
    text-align: center;
}

.uiButton {
    pointer-events: auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
    background-position: center bottom;
    height: 2.2rem;
    width: 3rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

#gyroToggleElem{
    width: 3.6rem;
    float: right;
    border-radius: 0 0 0 2px ;
    background-color: rgba(255, 255, 255, 0.8);
    padding-left: 0.8rem;
}

#gyroToggleElem.enabled {
    background-image:url('img/Icon_Finger.svg');
}

#gyroToggleElem.disabled {
    background-image:url('img/Icon_Gyro.svg');
}

#fullscreenToggleElem{
    float: right;
    background-color: rgba(255, 255, 255, 0.8);
    padding-right: 0.8rem;
}

#fullscreenToggleElem.enabled {
    background-image:url('img/Icon_Min.svg');
}

#fullscreenToggleElem.disabled {
    background-image:url('img/Icon_Max.svg');
}

#sceneNameElem, #sceneListElem {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    padding-top: 0.5rem;
    padding-bottom: 0.8rem;
    font-size: 1.2rem;
    text-align: left;
    float: left;
    border-radius: 0 0 2px 0;
    background-color: rgba(255, 255, 255, 0.8);
}

#sceneNameElem {
    pointer-events: auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

#sceneListElem {
    padding-bottom: 1rem;
}

.sceneListEntryElem {
    pointer-events: auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    padding-bottom: 0.666rem;
}

.hide {
    position: absolute;
    display: none;
    width:0;
    height:0;
    overflow:hidden;
    z-index:-1;
    background-color: none;
}

.show {
    display: block;
}

.link-hotspot {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    opacity: 0.9;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.link-hotspot-icon {
width: 100%;
height: 100%;
cursor: pointer;
}