body{margin:0;padding:0;background-color:#000;font:12px/20px Lato,Verdana,Arial,geneva,sans-serif;font-weight:400;text-align:left;color:#818991;overflow:hidden}a:link{transition:color .5s ease;color:#0cf;text-decoration:none}a:active{color:#0cf;text-decoration:none;outline:0}a:visited{color:#0cf;text-decoration:none}body.isDesktop a:hover{color:#fff;text-decoration:none}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h2{margin:0;padding:0;font:24px/28px Lato,Verdana,Arial,geneva,sans-serif;font-weight:700;color:#fff}h3{margin:0;padding:0;font:16px/20px Lato,Verdana,Arial,geneva,sans-serif;font-weight:700;color:#fff}#webglmessage{display:block;position:absolute;top:50%;left:50%;padding:20px;margin:0;width:100%;max-width:400px;transform:translate(-50%,-50%);font:12px/20px Lato,Verdana,Arial,geneva,sans-serif;font-weight:400;color:#687581;background-color:#000;text-align:center}#interactive{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;opacity:0}#iss_labels{position:absolute;top:0;left:0}#iss_target{position:absolute;top:0;left:0;width:100px;height:100px;background:url(../img/target-iss.png);background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;opacity:0}#hud-darken{position:absolute;top:50%;left:50%;width:1300px;height:1300px;transform:translate(-50%,-50%);overflow:hidden}#hud{position:absolute;top:50%;left:50%;height:650px;width:650px;transform:translate(-50%,-50%);overflow:hidden;opacity:0}#hud-ring,#hud-ring-inner{position:absolute;top:0;left:0;width:100%;height:100%}#roll{position:absolute;top:50px;left:50%;width:80px;transform:translateX(-50%);text-align:center;text-shadow:0 0 10px #000}#pitch{position:absolute;top:50%;right:40px;width:100px;transform:translateY(-50%);text-align:center;text-shadow:0 0 10px #000}#yaw{position:absolute;bottom:50px;left:50%;width:80px;transform:translateX(-50%);text-align:center;text-shadow:0 0 10px #000}#pyr{position:absolute;top:50%;left:50px;width:80px;text-align:left;transform:translateY(-50%);text-shadow:0 0 10px #000}#roll-label{position:absolute;top:20px;left:50%;width:80px;transform:translateX(-50%);text-align:center;font-size:12px}#pitch-label{position:absolute;top:50%;right:25px;width:10px;transform:translateY(-50%);text-align:center;word-wrap:break-word;font-size:12px;line-height:12px}#yaw-label{position:absolute;bottom:20px;left:50%;width:80px;transform:translateX(-50%);text-align:center;font-size:12px}#pyr-label{position:absolute;top:50%;left:25px;width:10px;text-align:center;transform:translateY(-50%);word-wrap:break-word;font-size:12px;line-height:18px}#range{position:absolute;top:70%;left:15%;width:80px;margin:0;text-align:center;text-shadow:0 0 10px #000}#rate{position:absolute;top:70%;right:15%;width:80px;margin:0;text-align:center;text-shadow:0 0 10px #000}.error{font-size:18px;color:#2aff00}.rate{font-size:12px;color:#24d2fd;transition:color 1s ease}.rate.caution{color:orange}.rate.warning{color:red}.distance{font:12px/18px Lato,Verdana,Arial,geneva,sans-serif;color:#2aff00}.label{font-size:10px;color:#ccc}#range .rate{color:#2aff00}.readout{font-size:18px;color:#fff}#hud-worms{display:none;position:absolute;top:50%;left:50%;width:650px;height:650px;margin:-325px 0 0 -325px;opacity:0}.hud-worm{position:absolute;top:0;left:0}.hud-worm circle{fill:none;stroke:#24d2fd;stroke-width:10;transition:stroke 1s ease}.hud-worm circle.caution{stroke:orange}.hud-worm circle.warning{stroke:red}#hud-tips{display:block;position:absolute;top:50%;left:50%;width:300px;height:300px;margin:-150px 0 0 -150px}#hud-tips .circle{fill:none;stroke:#24d2fd;stroke-width:2}#hud-tips .arrow{position:absolute;top:-35px;left:-20px;width:40px;height:70px;opacity:0}#hud-tips .arrow path{fill:none;stroke:#24d2fd;stroke-width:2}.hud-tip{position:absolute;top:0;left:0;opacity:0}#tip-translatex-neg,#tip-translatex-pos,#tip-translatey-neg,#tip-translatey-pos,#tip-translatez{position:absolute;top:50%;left:50%;margin:0}#tip-translatez{transform-style:preserve-3d;perspective:800px;backface-visibility:hidden}#tip-translate-backward-up{transform:rotate(45deg) rotateX(65deg)}#tip-translate-forward-up{transform:rotate(45deg) rotateX(65deg)}#tip-translate-backward-right{transform:rotate(135deg) rotateX(65deg)}#tip-translate-forward-right{transform:rotate(135deg) rotateX(65deg)}#tip-translate-backward-down{transform:rotate(225deg) rotateX(65deg)}#tip-translate-forward-down{transform:rotate(225deg) rotateX(65deg)}#tip-translate-backward-left{transform:rotate(315deg) rotateX(65deg)}#tip-translate-forward-left{transform:rotate(315deg) rotateX(65deg)}#tip-translate-forward-down .arrow,#tip-translate-forward-left .arrow,#tip-translate-forward-right .arrow,#tip-translate-forward-up .arrow{transform:rotate(90deg)}#tip-translate-backward-down .arrow,#tip-translate-backward-left .arrow,#tip-translate-backward-right .arrow,#tip-translate-backward-up .arrow{transform:rotate(-90deg)}.arrow3d path{stroke-width:3!important}span.blue{color:#24d2fd}span.green{color:#2aff00;font-weight:700}span.red{color:red}#translation-status{position:absolute;left:30px;top:95px;width:300px;text-align:center;background-color:rgba(0,0,0,.5);padding:5px 0;border-radius:8px;z-index:1;display:none}.translation-position{display:inline-block;width:32%}.translation-position .label{font-size:18px}#buttons{position:absolute;top:10px;right:10px;width:100%;text-align:right}.btn{display:inline-block;padding:10px;margin:10px;background-color:#036;color:#fff;font-family:Lato,Verdana,arial;font-size:10px;cursor:pointer}#fail,#intro,#success{display:none;position:absolute;top:50%;left:50%;margin:0;width:100%;max-width:500px;font-size:12px;font-weight:400;transform:translate(-50%,-50%);text-align:center}#fail,#success{background-color:rgba(0,0,0,.8);padding:10px;border-radius:8px}#fail h2{color:red}#success h2{color:#0cf}#fail p,#intro p,#success p{display:block;text-align:center;width:95%;margin:0 auto;text-shadow:0 0 10px rgba(0,0,0,.5)}#intro p strong{color:#aab3bc;color:#999ea2}.message-button{display:block;position:relative;width:150px;margin:20px auto;padding:15px;background-color:#151c23;border:2px solid #455253;color:#fff;border-radius:5px;cursor:pointer}.text-button{display:inline-block;font:10px/16px Lato,Verdana,Arial,geneva,sans-serif;font-weight:700;text-transform:uppercase;cursor:pointer;margin:0 5px;transition:color 1s cubic-bezier(.19,1,.22,1);color:#818991}body.isDesktop .text-button:hover{color:#fff}#logoSVG{width:100%;max-width:485px;height:auto;margin-bottom:10px}.stroke_white{fill:none;stroke:#fff;stroke-width:.5}.fill_white{fill:#fff}.shadow{position:absolute;top:50%;left:50%;width:250px;height:250px;transform:translateX(-50%) translateY(-50%);transition:opacity 2s cubic-bezier(.19,1,.22,1);opacity:.5;pointer-events:none}#translation-controls{position:absolute;bottom:180px;left:180px;z-index:1;opacity:0}#rotation-controls{position:absolute;bottom:180px;right:180px;z-index:1;opacity:0}#rotation-controls svg,#translation-controls svg{width:100%;height:100%;backface-visibility:hidden;transform-origin:50% 0;will-change:transform;transform:translateY(0) translateZ(0) rotateX(0);transition:all 2s cubic-bezier(.19,1,.22,1)}.button{display:block;position:absolute;top:50%;left:50%;width:160px;height:96px;transform-style:preserve-3d;cursor:pointer}#translate-left-button,#translate-right-button,#yaw-left-button,#yaw-right-button{width:96px;height:160px}#roll-left-button,#roll-right-button,#translate-backward-button,#translate-forward-button{width:85px;height:85px}#pitch-up-button{transform:translateX(-50%) translateY(-50%) translateY(-110px)}#pitch-down-button{transform:translateX(-50%) translateY(-50%) translateY(110px)}#yaw-left-button{transform:translateX(-50%) translateY(-50%) translateX(-110px)}#yaw-right-button{transform:translateX(-50%) translateY(-50%) translateX(110px)}#roll-left-button{transform:translateX(-50%) translateY(-50%) translateX(-75px) translateY(-200px)}#roll-right-button{transform:translateX(-50%) translateY(-50%) translateX(75px) translateY(-200px)}#translate-up-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateY(-110px)}#translate-down-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateY(110px)}#translate-left-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(-110px)}#translate-right-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(110px)}#translate-forward-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(75px) translateY(-200px)}#translate-backward-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(-75px) translateY(-200px)}#pitch-up-button svg,#translate-up-button svg{transform-origin:50% 80%}#pitch-down-button svg,#translate-down-button svg{transform-origin:50% 20%}#translate-right-button svg,#yaw-right-button svg{transform-origin:20% 50%}#translate-left-button svg,#yaw-left-button svg{transform-origin:80% 50%}#roll-right-button svg,#translate-forward-button svg{transform-origin:0 100%}#roll-left-button svg,#translate-backward-button svg{transform-origin:100% 100%}#rotation-controls.hidden #pitch-up-button svg,#translation-controls.hidden #translate-up-button svg{transform:translateZ(-100px) rotateX(90deg)}#rotation-controls.hidden #pitch-down-button svg,#translation-controls.hidden #translate-down-button svg{transform:translateZ(-100px) rotateX(-90deg)}#rotation-controls.hidden #yaw-right-button svg,#translation-controls.hidden #translate-right-button svg{transform:translateZ(-100px) rotateY(90deg)}#rotation-controls.hidden #yaw-left-button svg,#translation-controls.hidden #translate-left-button svg{transform:translateZ(-100px) rotateY(-90deg)}#rotation-controls.hidden #roll-right-button svg,#translation-controls.hidden #translate-forward-button svg{transform:rotateY(90deg) scale(.75,.75)}#rotation-controls.hidden #roll-left-button svg,#translation-controls.hidden #translate-backward-button svg{transform:rotateY(-90deg) scale(.75,.75)}#rotation-controls.hidden .button svg,#translation-controls.hidden .button svg{opacity:0}#rotation-controls.hidden #precision-rotation,#translation-controls.hidden #precision-translation{transform:translate(-50%,-50%) rotate(0) scale(.75,.75);opacity:0}#rotation-controls.hidden .shadow,#translation-controls.hidden .shadow{opacity:0}.button:active svg{transition:none!important}.tip{display:none}.bg,.edge,.fg,.tip{transition-property:fill;transition-duration:.5s;transition-timing-function:linear}.bg,.edge,.fg,.tip{fill-rule:evenodd}.fg{fill:#fff}.edge{opacity:.25}.tip{fill:none;fill:transparent}.rate1,.rate2,.rate3{fill:transparent}.button.active .bg,.button:active .bg{fill:#fff}.button.active .fg,.button:active .fg{fill:#232b33}.button.active .bg,.button.active .fg,.button.active .tip,.button:active .bg,.button:active .fg,.button:active .tip{transition:none}#rotation-controls.large .tip,#translation-controls.large .tip{fill:#ffa100;fill:#b8babb}#rotation-controls.large .button:active .tip,#translation-controls.large .button:active .tip{fill:#b8babb}#roll-left-button #rate1,#roll-left-button #rate2,#roll-left-button #rate3,#roll-right-button #rate1,#roll-right-button #rate2,#roll-right-button #rate3{display:none}@keyframes rate-pulse{0%{opacity:0}25%{opacity:1}50%{opacity:0}}#precision-rotation,#precision-translation,#toggle-rotation,#toggle-translation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#precision-rotation,#precision-translation{width:210px;height:210px;pointer-events:none;transition:all .5s cubic-bezier(.19,1,.22,1)}#precision-rotation-status,#precision-translation-status{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%) translateY(0);width:80px;text-align:center;font-size:10px;color:#818991;color:#000;transition:all .5s cubic-bezier(.19,1,.22,1)}#precision-rotation-status.large,#precision-translation-status.large{transform:translateX(-50%) translateY(-50%) translateY(55px);color:#ffa100}#toggle-rotation,#toggle-translation{width:72px;height:72px;cursor:pointer}.toggle-inner,.toggle-outer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);will-change:transform;transition:all 750ms cubic-bezier(.19,1,.22,1)}.toggle-outer{box-sizing:border-box;width:100%;height:100%;border-radius:8px;background:linear-gradient(to bottom,#687582,#232b33)}.toggle-outer-extra{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:80%;border-radius:8px;background:linear-gradient(to bottom,#000,#151c22)}.toggle-inner{width:20%;height:20%;background-color:#fff;border-radius:2px}#toggle-rotation:active .toggle-outer,#toggle-translation:active .toggle-outer{border-color:#fff;transition-property:none}#rotation-controls.large #toggle-rotation:active .toggle-outer,#rotation-controls.large #toggle-translation:active .toggle-outer{background-color:#ffa100}#toggle-rotation:active .toggle-inner,#toggle-translation:active .toggle-inner{width:35%;height:35%}#toggle-rotation{width:80px;height:80px}#toggle-rotation .toggle-inner,#toggle-rotation .toggle-outer,#toggle-rotation .toggle-outer-extra{border-radius:50%}#rotation-controls.hidden #toggle-rotation:active .toggle-outer,#translation-controls.hidden #toggle-translation:active .toggle-outer{background-color:#151c22}#rotation-controls.hidden #toggle-rotation:active .toggle-inner,#translation-controls.hidden #toggle-translation:active .toggle-inner{width:35%;height:35%}#rotation-controls.hidden #toggle-rotation:active .toggle-inner,#rotation-controls.hidden #toggle-rotation:active .toggle-outer,#translation-controls.hidden #toggle-translation:active .toggle-inner,#translation-controls.hidden #toggle-translation:active .toggle-outer{transform:translate(-50%,-50%) scale(.5,.5);opacity:0}#rotation-controls.hidden #toggle-rotation .toggle-outer,#translation-controls.hidden #toggle-translation .toggle-outer{opacity:0;width:35%;height:35%}#rotation-controls.hidden #toggle-rotation .toggle-inner,#translation-controls.hidden #toggle-translation .toggle-inner{background-color:transparent;width:35%;height:35%}#precision-rotation{transform:translate(-50%,-50%) rotate(-45deg)}.dot{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:4px;background-color:#00d0ff;transition:all .5s cubic-bezier(.19,1,.22,1)}#dot1{transform:translate(-38px,-38px)}#dot2{transform:translate(38px,-38px)}#dot3{transform:translate(38px,38px)}#dot4{transform:translate(-38px,38px)}#rotation-controls.large #precision-rotation{transform:translate(-50%,-50%) rotate(0)}#rotation-controls.large #precision-rotation .dot{background-color:#ffa100}#rotation-controls.large #precision-rotation #dot1{transform:translate(-70px,-70px)}#rotation-controls.large #precision-rotation #dot2{transform:translate(70px,-70px)}#rotation-controls.large #precision-rotation #dot3{transform:translate(70px,70px)}#rotation-controls.large #precision-rotation #dot4{transform:translate(-70px,70px)}#precision-translation{transform:translate(-50%,-50%) rotate(45deg)}.triangle{position:absolute;top:50%;left:50%;width:0;height:0;margin:-4px 0 0 -4px;transition:all .5s cubic-bezier(.19,1,.22,1)}#triangle1{border-top:8px solid #00d0ff;border-right:8px solid transparent;transform:translate(-35px,-35px)}#triangle2{border-top:8px solid #00d0ff;border-left:8px solid transparent;transform:translate(35px,-35px)}#triangle3{border-bottom:8px solid #00d0ff;border-left:8px solid transparent;transform:translate(35px,35px)}#triangle4{border-bottom:8px solid #00d0ff;border-right:8px solid transparent;transform:translate(-35px,35px)}#translation-controls.large #precision-translation{transform:translate(-50%,-50%) rotate(0)}#translation-controls.large #precision-translation #triangle1{border-top:8px solid #ffa100;transform:translate(-68px,-68px)}#translation-controls.large #precision-translation #triangle2{border-top:8px solid #ffa100;transform:translate(68px,-68px)}#translation-controls.large #precision-translation #triangle3{border-bottom:8px solid #ffa100;transform:translate(68px,68px)}#translation-controls.large #precision-translation #triangle4{border-bottom:8px solid #ffa100;transform:translate(-68px,68px)}#tip-translatex-pos{transform:translateX(25px) rotate(180deg) scale(1,1)}#tip-translatex-neg{transform:translateX(-25px) rotate(0) scale(1,1)}#tip-translatey-pos{transform:translateY(25px) rotate(-90deg) scale(1,1)}#tip-translatey-neg{transform:translateY(-25px) rotate(90deg) scale(1,1)}#hud-tips.rotation-large .hud-tip .circle,#hud-tips.translation-large .arrow path{stroke:#ffa100}#preloader{display:block;position:absolute;top:0;left:0;width:100%;height:100%}#preloader-inner{display:block;position:absolute;top:50%;left:50%;width:50px;height:50px;margin:0;text-align:center;transform:translate(-50%,-50%);opacity:0}#preloader-circle{display:block;position:relative;width:50px;height:50px;margin:0 auto 0 auto}.circle-grey{stroke:#232323}.circle-color{stroke:#24d2fd}#preloader-percent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:10px/14px Lato,Verdana,Arial,geneva,sans-serif;color:#fff;text-align:center}.modal-close{position:absolute;top:20px;right:20px;width:24px;height:24px;cursor:pointer}.modal-close svg{width:25px;height:25px;fill:#fff}.modal{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;font:14px/20px Lato,Verdana,Arial,geneva,sans-serif;font-weight:400;overflow:hidden;visibility:hidden;z-index:5512}.modal-inner{display:block;position:absolute;top:50%;left:50%;width:90%;max-width:500px;margin:0;transform:translate(-50%,-50%);text-align:center}.instruction-item{width:100%;visibility:hidden}.instruction-item h3{font:24px/28px Lato,Verdana,Arial,geneva,sans-serif}.instruction-item p{margin:10px 0 10px 0}.instruction-item img{display:inline-block;width:100%;height:auto}#instruction1{display:inline-block}#instructions-nav{display:block;margin-top:10px;width:100%}#instructions-status{display:inline-block;margin:0 25px;font:12px/24px Lato,Verdana,Arial,geneva,sans-serif;vertical-align:top}#instructions-nav .arrow{display:inline-block;width:24px;height:24px;cursor:pointer;color:#fff;line-height:24px;vertical-align:top}#instructions-nav .arrow svg{width:24px;height:24px;fill:#fff}#settings{z-index:5510}.setting{margin:15px 0 0 0;font:10px/18px Lato,Verdana,Arial,geneva,sans-serif;cursor:pointer}.setting span{font:12px/18px Lato,Verdana,Arial,geneva,sans-serif;font-weight:700;transition:color .5s ease,background-color .5s ease}.setting.active span{color:#24d2fd}#navball{position:absolute;top:0;right:30px;height:200px;width:300px;text-align:center;visibility:hidden;z-index:1}#options{display:block;position:absolute;top:30px;left:30px;width:300px;text-align:center;visibility:hidden;z-index:1}.icon{position:relative;display:inline-block;width:30px;height:30px;margin:0 5px 0 5px;border-radius:100%;font:18px/30px Lato,Verdana,Arial,geneva,sans-serif;color:#fff;font-weight:700;background-color:#151c23;border:2px solid #455253;text-align:center;cursor:pointer;vertical-align:top}.icon svg{width:20px;height:20px;margin:5px 0 0 0}.icon svg path{fill:#fff}@media screen and (max-width:1200px),(max-height:650px){#hud-darken{height:900px;width:900px}#hud{height:450px;width:450px}#pyr{width:68px;left:38px}#pitch{width:68px;right:30px}#roll{top:35px}#yaw{bottom:35px}#roll-label{top:10px;font-size:8px}#pitch-label{right:18px;width:6px;font-size:8px;line-height:8px}#yaw-label{bottom:10px;font-size:8px}#pyr-label{left:18px;width:6px;font-size:8px;line-height:16px}.distance{line-height:16px}#range .label,#rate .label{line-height:14px}#navball{right:10px;width:230px;height:150px}#navball canvas{width:150px;height:150px}#options{top:10px;left:10px;width:230px}#translation-controls{bottom:125px;left:125px}#translation-status{top:70px;left:10px;width:230px}#rotation-controls{bottom:125px;right:125px}.button{width:120px;height:72px}#translate-left-button,#translate-right-button,#yaw-left-button,#yaw-right-button{width:72px;height:120px}#roll-left-button,#roll-right-button,#translate-backward-button,#translate-forward-button{width:64px;height:64px}#pitch-up-button{transform:translateX(-50%) translateY(-50%) translateY(-82px)}#pitch-down-button{transform:translateX(-50%) translateY(-50%) translateY(82px)}#yaw-left-button{transform:translateX(-50%) translateY(-50%) translateX(-82px)}#yaw-right-button{transform:translateX(-50%) translateY(-50%) translateX(82px)}#roll-left-button{transform:translateX(-50%) translateY(-50%) translateX(-56px) translateY(-150px)}#roll-right-button{transform:translateX(-50%) translateY(-50%) translateX(56px) translateY(-150px)}#translate-up-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateY(-82px)}#translate-down-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateY(82px)}#translate-left-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(-82px)}#translate-right-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(82px)}#translate-forward-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(56px) translateY(-150px)}#translate-backward-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(-56px) translateY(-150px)}#toggle-rotation,#toggle-translation{width:54px;height:54px}#toggle-rotation{width:60px;height:60px}#precision-rotation,#precision-translation{width:105px;height:105px}.dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:2.5px}#dot1{transform:translate(-28px,-28px)}#dot2{transform:translate(28px,-28px)}#dot3{transform:translate(28px,28px)}#dot4{transform:translate(-28px,28px)}#rotation-controls.large #precision-rotation #dot1{transform:translate(-53px,-53px)}#rotation-controls.large #precision-rotation #dot2{transform:translate(53px,-53px)}#rotation-controls.large #precision-rotation #dot3{transform:translate(53px,53px)}#rotation-controls.large #precision-rotation #dot4{transform:translate(-53px,53px)}.triangle{margin:-3px 0 0 -3px}#triangle1{border-top:6px solid #00d0ff;border-right:6px solid transparent;transform:translate(-26px,-26px)}#triangle2{border-top:6px solid #00d0ff;border-left:6px solid transparent;transform:translate(26px,-26px)}#triangle3{border-bottom:6px solid #00d0ff;border-left:6px solid transparent;transform:translate(26px,26px)}#triangle4{border-bottom:6px solid #00d0ff;border-right:6px solid transparent;transform:translate(-26px,26px)}#translation-controls.large #precision-translation #triangle1{border-top:6px solid #ffa100;transform:translate(-51px,-51px)}#translation-controls.large #precision-translation #triangle2{border-top:6px solid #ffa100;transform:translate(51px,-51px)}#translation-controls.large #precision-translation #triangle3{border-bottom:6px solid #ffa100;transform:translate(51px,51px)}#translation-controls.large #precision-translation #triangle4{border-bottom:6px solid #ffa100;transform:translate(-51px,51px)}#precision-rotation-status,#precision-translation-status{transform:translateX(-50%) translateY(-50%) translateY(0)}#precision-rotation-status.large,#precision-translation-status.large{transform:translateX(-50%) translateY(-50%) translateY(40px)}#hud-tips{width:225px;height:225px;margin:-112px 0 0 -112px}#hud-worms{width:450px;height:450px;margin:-225px 0 0 -225px}#tip-translatex-pos{transform:translateX(25px) rotate(180deg) scale(.75,.75)}#tip-translatex-neg{transform:translateX(-25px) rotate(0) scale(.75,.75)}#tip-translatey-pos{transform:translateY(25px) rotate(-90deg) scale(.75,.75)}#tip-translatey-neg{transform:translateY(-25px) rotate(90deg) scale(.75,.75)}#tip-translatez{transform:scale(.75,.75)}}@media screen and (max-height:500px){.instruction-item img{width:auto;height:200px}}@media screen and (max-width:850px),(max-height:450px){#hud-darken{height:650px;width:650px}#hud{height:325px;width:325px}#pyr{left:25px;width:60px}#pitch{right:20px;width:60px;width:50px}#roll{top:30px}#yaw{bottom:30px}#range{left:12%}#rate{right:12%}.error{font:14px/16px Lato,Verdana,Arial,geneva,sans-serif}.distance,.rate{font:10px/14px Lato,Verdana,Arial,geneva,sans-serif}#range .label,#rate .label{line-height:14px;font-size:8px}#roll-label{top:4px;font-size:6px}#pitch-label{right:13px;width:5px;font-size:6px;line-height:6px}#yaw-label{bottom:4px;font-size:6px}#pyr-label{left:13px;width:5px;font-size:6px;line-height:10px}#navball{width:150px;height:100px}#navball canvas{width:100px;height:100px}#options{width:150px}#translation-controls{bottom:80px;left:80px}#translation-status{top:40px;left:10px;width:160px}.translation-position{width:30%}#rotation-controls{bottom:80px;right:80px}.button{width:80px;height:48px}#translate-left-button,#translate-right-button,#yaw-left-button,#yaw-right-button{width:48px;height:80px}#roll-left-button,#roll-right-button,#translate-backward-button,#translate-forward-button{width:40px;height:40px}#pitch-up-button{transform:translateX(-50%) translateY(-50%) translateY(-55px)}#pitch-down-button{transform:translateX(-50%) translateY(-50%) translateY(55px)}#yaw-left-button{transform:translateX(-50%) translateY(-50%) translateX(-55px)}#yaw-right-button{transform:translateX(-50%) translateY(-50%) translateX(55px)}#roll-left-button{transform:translateX(-50%) translateY(-50%) translateX(-37px) translateY(-100px)}#roll-right-button{transform:translateX(-50%) translateY(-50%) translateX(37px) translateY(-100px)}#translate-up-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateY(-55px)}#translate-down-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateY(55px)}#translate-left-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(-55px)}#translate-right-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(55px)}#translate-forward-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(37px) translateY(-100px)}#translate-backward-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(-37px) translateY(-100px)}#toggle-rotation,#toggle-translation{width:36px;height:36px}#toggle-rotation{width:40px;height:40px}#precision-rotation,#precision-translation{width:105px;height:105px}.dot{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:2px}#dot1{transform:translate(-19px,-19px)}#dot2{transform:translate(19px,-19px)}#dot3{transform:translate(19px,19px)}#dot4{transform:translate(-19px,19px)}#rotation-controls.large #precision-rotation #dot1{transform:translate(-35px,-35px)}#rotation-controls.large #precision-rotation #dot2{transform:translate(35px,-35px)}#rotation-controls.large #precision-rotation #dot3{transform:translate(35px,35px)}#rotation-controls.large #precision-rotation #dot4{transform:translate(-35px,35px)}.triangle{margin:-2px 0 0 -2px}#triangle1{border-top:4px solid #00d0ff;border-right:4px solid transparent;transform:translate(-18px,-18px)}#triangle2{border-top:4px solid #00d0ff;border-left:4px solid transparent;transform:translate(18px,-18px)}#triangle3{border-bottom:4px solid #00d0ff;border-left:4px solid transparent;transform:translate(18px,18px)}#triangle4{border-bottom:4px solid #00d0ff;border-right:4px solid transparent;transform:translate(-18px,18px)}#translation-controls.large #precision-translation #triangle1{border-top:4px solid #ffa100;transform:translate(-33px,-33px)}#translation-controls.large #precision-translation #triangle2{border-top:4px solid #ffa100;transform:translate(33px,-33px)}#translation-controls.large #precision-translation #triangle3{border-bottom:4px solid #ffa100;transform:translate(33px,33px)}#translation-controls.large #precision-translation #triangle4{border-bottom:4px solid #ffa100;transform:translate(-33px,33px)}#precision-rotation-status,#precision-translation-status{transform:translateX(-50%) translateY(-50%) translateY(0);font-size:8px}#precision-rotation-status.large,#precision-translation-status.large{transform:translateX(-50%) translateY(-50%) translateY(27px)}#hud-tips{width:150px;height:150px;margin:-75px 0 0 -75px}#hud-worms{width:325px;height:325px;margin:-162.5px 0 0 -162.5px}#tip-translatex-pos{transform:translateX(25px) rotate(180deg) scale(.5,.5)}#tip-translatex-neg{transform:translateX(-25px) rotate(0) scale(.5,.5)}#tip-translatey-pos{transform:translateY(25px) rotate(-90deg) scale(.5,.5)}#tip-translatey-neg{transform:translateY(-25px) rotate(90deg) scale(.5,.5)}#tip-translatez{transform:scale(.5,.5)}#hud-tips .arrow path,#hud-tips .circle{stroke-width:6}.arrow3d path{stroke-width:6!important}.icon{width:24px;height:24px;margin:0 5px 0 0;font:16px/24px Lato,Verdana,Arial,geneva,sans-serif}.icon svg{width:20px;height:20px;margin:2px 0 0 0}#navball{right:5px}#options{left:5px}}@media screen and (max-width:320px),(max-height:400px){#translation-controls{bottom:70px;left:70px}#navball,#options{width:120px}#rotation-controls{bottom:70px;right:70px}.button{width:64px;height:38px}#translate-left-button,#translate-right-button,#yaw-left-button,#yaw-right-button{width:38px;height:64px}#roll-left-button,#roll-right-button,#translate-backward-button,#translate-forward-button{width:34px;height:34px}#pitch-up-button{transform:translateX(-50%) translateY(-50%) translateY(-44px)}#pitch-down-button{transform:translateX(-50%) translateY(-50%) translateY(44px)}#yaw-left-button{transform:translateX(-50%) translateY(-50%) translateX(-44px)}#yaw-right-button{transform:translateX(-50%) translateY(-50%) translateX(44px)}#roll-left-button{transform:translateX(-50%) translateY(-50%) translateX(-30px) translateY(-80px)}#roll-right-button{transform:translateX(-50%) translateY(-50%) translateX(30px) translateY(-80px)}#translate-up-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateY(-44px)}#translate-down-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateY(44px)}#translate-left-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(-44px)}#translate-right-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(44px)}#translate-forward-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(30px) translateY(-80px)}#translate-backward-button{transform:translateX(-50%) translateY(-50%) rotate(0) translateX(-30px) translateY(-80px)}#toggle-rotation,#toggle-translation{width:28px;height:28px}#toggle-rotation{width:30px;height:30px}#precision-rotation,#precision-translation{width:84px;height:84px}#dot1{transform:translate(-15px,-15px)}#dot2{transform:translate(15px,-15px)}#dot3{transform:translate(15px,15px)}#dot4{transform:translate(-15px,15px)}#rotation-controls.large #precision-rotation #dot1{transform:translate(-28px,-28px)}#rotation-controls.large #precision-rotation #dot2{transform:translate(28px,-28px)}#rotation-controls.large #precision-rotation #dot3{transform:translate(28px,28px)}#rotation-controls.large #precision-rotation #dot4{transform:translate(-28px,28px)}#triangle1{transform:translate(-14px,-14px)}#triangle2{transform:translate(14px,-14px)}#triangle3{transform:translate(14px,14px)}#triangle4{transform:translate(-14px,14px)}#translation-controls.large #precision-translation #triangle1{transform:translate(-27px,-27px)}#translation-controls.large #precision-translation #triangle2{transform:translate(27px,-27px)}#translation-controls.large #precision-translation #triangle3{transform:translate(27px,27px)}#translation-controls.large #precision-translation #triangle4{transform:translate(-27px,27px)}#precision-rotation-status,#precision-translation-status{transform:translateX(-50%) translateY(-50%) translateY(0);font-size:6px}#precision-rotation-status.large,#precision-translation-status.large{transform:translateX(-50%) translateY(-50%) translateY(22px)}.instruction-item img{width:auto;height:150px}}@media screen and (orientation:landscape) and (max-height:400px){#navball{right:10px;width:120px}#options{left:10px;width:120px}}