*{box-sizing:border-box}h1,h2,h3,h4{font-family:Ubuntu,Verdana,Muli,serif}h1{font-size:1.2rem;padding-left:1.9rem;background:transparent url(../images/logo-kompas-arah-kiblat-pointer.png) 0% 50% no-repeat;background-size:1.8rem;line-height:2rem}html{font-family:Ubuntu,Tahoma,Muli,sans-serif;font-size:16px;background-color:#000;color:#fff;background-size:cover;height:100%}[class^=column-]{display:inline-block}.column-33{width:33.33333%}.column-25{width:25%}.column-20{width:20%}.column-50{width:50%}.label{font-size:.5rem}body{padding:0;margin:0;height:100%}header{padding:.5rem;background-color:rgba(0,0,0,.2);position:fixed;top:0;right:0;left:0;transition:-webkit-transform .5s ease-out 0s;transition:transform .5s ease-out 0s}header p{font-size:smaller}.container{padding:5rem 1rem 8rem;overflow:hidden;height:100%;transition:-webkit-transform .5s ease-out 0s;transition:transform .5s ease-out 0s}.compass{position:relative;width:100%;height:100%;text-align:center}.compass__rose{position:absolute;top:0;left:0;right:0;bottom:0}.compass__rose__dial{height:100%;width:100%}.compass__pointer{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%}.btn{border:0;color:#fff;cursor:pointer;text-align:center;height:4rem;background-color:transparent;background-position:50% 50%;background-repeat:no-repeat;background-size:auto 50%;-webkit-tap-highlight-color:transparent;outline:none}.btn svg *{transition:fill .5s ease-out 0s}.btn--hide{display:none}.btn--hide.show{display:inline-block}.btn:active{background-color:rgba(127,127,127,.5)}.btn__icon{height:50%;width:100%}.btn__icon--active{display:none}.btn__icon--inactive{display:block}.btn.active .btn__icon--active{display:block}.btn.active .btn__icon--inactive{display:none}.status{position:fixed;left:0;right:0;bottom:0}.position{padding-bottom:.5rem;text-transform:uppercase;text-align:center}.options{}.options__btn{border-top:1px solid rgba(255,255,255,.1)}.popup{display:none;position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.8)}.popup.popup--show{display:block}.popup__content{max-width:300px;margin:0 auto;background-color:#fff;color:#000}.popup__contents{padding:1rem}.popup__inner{}.popup__inner--hide{display:none}.popup__close{display:block;padding:1rem;text-align:right;width:100%;border:0;background:0 0;outline:none}.popup__close:hover{text-decoration:underline;cursor:pointer}html.nightmode{background:#000;color:#fff}html.nightmode .container{transform:translateY(-2rem);-webkit-transform:translateY(-2rem)}html.nightmode header{transform:translateY(-4rem);-webkit-transform:translateY(-4rem)}html.nightmode .label{color:rgba(127,127,127,.8)}html.nightmode .btn svg *{fill:rgba(127,127,127,.5)}