#Control-Area-3D {
  position    : absolute;
  left        : 30px;
  bottom      : 30px;
  width       : 120px;
  height      : 120px;
  visibility  : hidden;
  opacity     : 0;
  transition  : visibility 0s 0.3s, opacity 0.3s 0s;
}

#Control-Area-3D[shown] {
  visibility       : visible;
  opacity          : 1;
  transition       : visibility 0s 0s, opacity 0.3s 0s;
}

#Control-Area-3D .Control {
  width                         : 40px;
  height                        : 40px;
  overflow                      : hidden;
  position                      : absolute;
  font-family                   : 'Material Icons';
  font-weight                   : 400;
  font-style                    : normal;
  font-size                     : 24px;
  letter-spacing                : normal;
  text-transform                : none;
  word-wrap                     : normal;
  -moz-font-feature-settings    : 'liga';
  font-feature-settings         : 'liga';
  -webkit-font-feature-settings : 'liga';
  -webkit-font-smoothing        : antialiased;
  text-align                    : center;
  line-height                   : 40px;
  transition                    : all 0.2s;
  cursor                        : pointer;
  -webkit-border-radius         : 20px;
  -moz-border-radius            : 20px;
  border-radius                 : 20px;
  -webkit-user-select           : none;
  -moz-user-select              : none;
  -ms-user-select               : none;
}

#Control-Area-3D .Control:hover  { background-color: rgba(160,160,160,0.3); }
#Control-Area-3D .Control:active { background-color: rgba(160,160,160,0.5); }

#Control-Area-3D .Control.Left  { left : 0px;  top  : 30px;}
#Control-Area-3D .Control.Right { left : 60px; top  : 30px;}
#Control-Area-3D .Control.Up    { left : 30px; top  : 0px;}
#Control-Area-3D .Control.Down  { left : 30px; top  : 60px;}