* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #888;
}
#table {
  margin-top: calc(50vh - 15vw);
  width: 100%;
}
.row {
  width: 100%;
}
.dial {
  font-size: 14px;
  width:8px;
  height: 50%;
  position: absolute;
  top:0;
  left: calc(50% - 4px);
  background-color: #BA4545;
  transform-origin: 50% 100%;
  -webkit-transition: transform .75s, box-shadow .75s;
  transition: transform .75s, box-shadow .75s;
  border-radius: 4px;
  
}
.pos-0 {
	  -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.pos-1 {
	  -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    box-shadow: 2px -2px 2px rgba(0,0,0,.3);
}
.pos-2 {
	  -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    box-shadow: -2px -2px 2px rgba(0,0,0,.3);
}
.pos-3 {
	  -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    box-shadow: -2px 2px 2px rgba(0,0,0,.3);
}
.cell {
  position: relative;
  width: 5%;
  height: 5vw;
  float: left;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-shadow: inset 5px 5px 5px rgba(0,0,0,.2), 2px 2px 2px rgba(0,0,0,.5);
  background-color: #fff;
}