.retrostick {
  float:left;
  padding: 4px;
  width: 151px;
  height: 150px;
}

.retrostick-base {
  border-radius: 4px;
  position:relative;
  width:100%;
  height:100%;
  background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(18,18,18) 0%, rgb(28,30,33) 21%, rgb(37,41,47) 40%, rgb(26,27,30) 74%, rgb(21,20,21) 100%);
  border: 2px outset #303030
}

.retrostick-base-joint {
  position: absolute;
  top: 43px;
  left: 40px;
  width: 75px;
  height: 75px;
  border-radius: 75px;
  background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(0,0,0) 0%, rgb(21,21,21) 87%, rgb(0,0,0) 100%);
  border: 1px solid rgb(51, 51, 51);
}

.retrostick-base-joint > div{
  position: absolute;
  top: 7%;
  left: 9%;
  width: 80%;
  height: 80%;
  border-radius: 50px;
  background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(0,0,0) 0%, rgb(21,21,21) 87%, rgb(0,0,0) 100%);
}

.retrostick-base-joint > div > div{
  width: 24px;
  height: 25px;
  border-radius: 25px;
  position: absolute;
  top: 10px;
  left: 12px;
  background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(0,0,0) 0%, rgb(21,21,21) 87%, rgb(0,0,0) 100%);
}

.retrostick-stick {
  width: 15px;
  height: 5px;
  background-image:-webkit-linear-gradient( 180deg, rgb(207,213,215) 16%, rgb(146,152,154) 23%, rgb(37,41,47) 54%, rgb(146,152,154) 71%, rgb(33,36,41) 91%, rgb(17,18,21) 94%, rgb(0,0,0) 100%);
  position: absolute;
  bottom: 0px;
  left: 69px;
  border-radius: 0 0 10px 10px;
  box-shadow: 5px 3px 16px rgba(50, 50, 50, 0.63);
}

.retrostick-stick-wrap {
  width: 150px;
  height: 150px;
  -webkit-transform-origin: 77px 145px;
  -moz-transform-origin: 77px 145px;
  -moz-transform-origin: 77px 145px;
  transform-origin: 77px 145px;
  position: absolute;
  bottom: 71px;
  left: 0px;
}

.retrostick-ball {
  position:absolute;
  top:50px;
  left:50px;
  background-color:red;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-image:-webkit-radial-gradient( 39% 58%, circle closest-side, rgb(220,72,72) 4%, rgb(223,36,49) 39%, rgb(212, 31, 31) 56%, rgb(118,6,17) 120%, rgb(65,10,18) 149%);
  box-shadow: 1.5px 2.598px 7.2px 0.8px rgba(0, 0, 0, 0.16);
  z-index: 2;
}

.retrostick-dir-note {
  font-family:arial;
  font-size:10px;
  color:#323232;
  position:absolute;
  text-shadow: 1px 0px 0px rgba(139, 139, 139, 1);
}

.retrostick-dir-backward-left,
.retrostick-dir-backward,
.retrostick-dir-backward-right { top:137px; z-index:1;}
.retrostick-dir-forward-left,
.retrostick-dir-forward,
.retrostick-dir-forward-right {top:0;}
.retrostick-dir-forward-left{left:3px;}
.retrostick-dir-forward{left:50px;}
.retrostick-dir-forward-right {left:127px;}
.retrostick-dir-backward-left {left:3px;}
.retrostick-dir-backward {left:50px;}
.retrostick-dir-backward-right {left:127px;}

.retrostick-ball-to-center {
  -webkit-transition: all 0.3s ease-out;
  background-color:red;
}

.retrostick-stick-to-center {
  -webkit-transition: height 0.3s ease-out;
  background-color:red;
}

.retrostick-bottom-left{position:absolute; bottom:25px; left:25px;}
.retrostick-bottom-right{position:absolute; bottom:25px; right:25px;}
.retrostick-top-left{top:125px; left:125px;}
.retrostick-top-right{top:125px; right:125px;}