html, body { height: 100%; overflow: hidden; } .sample-corner { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .sample-corner.overlay { background: white; position: fixed; z-index: 9999; display: none; } #logo-button-wrapper { position: absolute; top: 50px; right: 50px; z-index: 1; width: fit-content; transform: scale(1.5); } #logo-button-wrapper img { max-width: 100px; margin-bottom: 6px; } #logo-button-wrapper .sample-corner-uiButton { width: 100%; min-width: 100px; height: 25px; background: #002c58; border-radius: 6px; text-align: center; cursor: pointer; position: relative; } #logo-button-wrapper .sample-corner-uiButton.fa:before { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sample-corner.overlay .close-sample-corner-overlay { position: absolute; top: 4px; right: 4px; font-size: 2rem; z-index: 1; cursor: pointer; } .sample-corner-canvas-wrap { position:relative; } .sample-corner-canvas-wrap > div { outline: none !important; } .sample-corner-webglCanvas { position:relative; width: 100%; height: 100%; overflow: hidden; outline: none !important; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .sample-corner-info-content { position:absolute; z-index: 5; border: 1px solid black; height: auto; padding-left: 15px; padding-right: 15px; border-radius: 0 9px 9px 9px; opacity: 1; background: white; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.247); -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.247); box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); transition: 0.5s opacity; background: rgb(00,44,88); color: white; width: max-content; max-width: 300px; } .sample-corner-info-content.topped { border-radius: 9px 9px 9px 0; } .sample-corner-info-content.lefted { border-radius: 9px 0 9px 9px; } .sample-corner-info-content.topped.lefted { border-radius: 9px 9px 0 9px; } body.touch .sample-corner-info-content { border-radius: 9px 9px 9px 9px; } .sample-corner-info-content.fade-in { opacity: 1; } .sample-corner-info-content h3 { font-family: OpenSans, Helvetica, Arial, sans-serif; font-size: 1rem; margin-top: 4px; font-weight: normal; } .sample-corner-info-content p { margin-bottom: 4px; font-family: OpenSans, helvetica, Arial, sans-serif; font-size: .9em; word-wrap: break-word; } .jumper { left: 0; top: 0; right: 0; bottom: 0; display: block; position: absolute; margin: 0; width: 30px; height: 30px; background-color: rgb(229, 237, 241); opacity: 0.75; border-radius: 100%; cursor: pointer; transition: all 0.5s ease; transition-property: background-color, opacity, height, width; } body.touch .jumper { width: 20px; height: 20px; } body.notouch:hover .jumper, body.touch .sample-corner.focus .jumper { opacity: 1; background-color: rgb(0, 44, 88); } .jumper.active, body.notouch .jumper:hover { width: 40px; height: 40px; } body.touch .jumper.active { width: 30px; height: 30px; } .jumper:before { color: white; font-size: 1rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s ease; transition-property: transform, font-size; } body.touch .jumper:before { font-size: 0.7rem; } body.notouch .jumper:hover:before, .jumper.active:before { font-size: 1.5rem; transform: translate(-50%, -50%) rotateZ(45deg); } body.touch .jumper.active:before { font-size: 1.2rem; } #loading-screen { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 20px; background: #002c58; border-left: 0 #004489 solid; border-right: 0 #004489 solid; box-sizing: border-box; animation: loading 2s linear infinite alternate; } #loading-screen.ending { height: 0px; opacity: 0; animation: loadingEnd 0.5s linear 1; } @keyframes loading { 0% { border-left-width: 0; border-right-width: 0; } 50% { border-left-width: 100vw; border-right-width: 0; } 51% { border-left-width: 100vw; border-right-width: 100vw; } 52% { border-left-width: 0; border-right-width: 100vw; } 100% { border-left-width: 0; border-right-width: 0; } } @keyframes loadingEnd { 0% { height: 20px; opacity: 1; } 99% { height: 20px; opacity: 0; } 100% { height: 0; opacity: 0; } }