html, body { height: 100%; }
body {
    margin: 0;
    background:#000;
    overflow: hidden;
    cursor:crosshair;
}


.content{
   width:100%;
   height:100%;
   position:fixed;
   top:0;
   left:0;
   z-index:20;
   background:url(../pics/content.png?v2) 50% 50% no-repeat;
   background-size:100% auto;
   z-index:50;
}

.content .action-btn{
   width:21.5%;
   height:13%;
   position:absolute;
   top:65%;
   left:12.5%;
   background:url(../pics/action-btn.png) 0 0 no-repeat;
   background-size:100% auto;
}

.content .action-btn:after{
   content:'';
   width:100%;
   height:100%;
   display:block;
   position:absolute;
   top:0;
   left:0;
   z-index:10;
   background:url(../pics/action-btn_hover.png) 0 0 no-repeat;
   background-size:100% auto;
   opacity:0;
   -webkit-transition:all 0.25s;
   -moz-transition:all 0.25s;
   transition:all 0.25s;
}

.content .action-btn:hover:after{
   opacity:1;
}

.moving-zone,
.moving-zone-radar{
    position: absolute;
    top:-22%; left:-20%;
    width:135%; height:140%;
    margin:0px;
    perspective:800px;
    z-index:10;
}

.moving-zone-radar{
   z-index:20;
   top:0;
   left:0;
   width:100%;
   height:100%;
}


.popup,
.popup-radar{
    position: absolute;
    width:100%;
    height:100%;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transform-style: preserve-3d;
    background:50% 50% no-repeat;
    background-size:cover;
    z-index:40;
}

.popup-radar{
   background:url(../pics/drone-ui.png) 50% 50% no-repeat;
   background-size:99% auto;
   opacity:0.75;
}