body{background-color: #000;}
.block {
  margin-top: 40px;
	text-align: center;
}
h1{color: #fff; text-align: center;}
.block:before {
	content: '\200B';
	/*   content: '';
	margin-left: -0.25em; */
	display: inline-block;
	vertical-align: middle;
 }
.centered {
	display: inline-block;
	vertical-align: middle;
 }

.knob-surround {
  position: relative;
  display:inline-block;
  background-color: red;
  width: 6.0em;
  height: 6.0em;
  border-radius: 50%;
  border: solid 1.05em #030;
  margin:1em;
  margin-top: 3em;
  background: #ffffff;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #001d00), color-stop(1, #001300));
  background: -ms-linear-gradient(bottom, #001d00, #001300);
  background: -moz-linear-gradient(center bottom, #001d00 0%, #001300 100%);
  background: -o-linear-gradient(#001300, #001d00);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001300', endColorstr='#001d00', GradientType=0);
  -webkit-box-shadow: 0 0.2em 0.1em 0.05em rgba(0, 255, 0, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0.2em 0.1em 0.05em rgba(0, 255, 0, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0.2em 0.1em 0.05em rgba(0, 255, 0, 0.1) inset, 0 -0.2em 0.1em 0.05em rgba(0, 0, 0, 0.5) inset, 0 0.5em 0.65em 0 rgba(0, 0, 0, 0.3);
}
.knoblabel{
  position:absolute;
  top:-2.2em;
  left:-1em;
  width:200%;
  height:1em;
  color:lime;
  font-size:1.4em;
}
.knobvalue{
  position: absolute;
  top: 7.6em;
  left: -3.7em;
  width: 200%;
  height: 1em;
  color: lime;
  text-align: center;
  padding: auto;
  font-size: 0.8em;
  font-weight: 900;
  letter-spacing: 1px;
}
.knob {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #060;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  z-index: 10;
}
.knob:before {
  content: "";
  position: absolute;
  bottom: 13%;
  left: 19.5%;
  width: 8%;
  height: 8%;
  background-color: #00d800;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0.4em 0 #00c300;
  -moz-box-shadow: 0 0 0.4em 0 #00c300;
  box-shadow: 0 0 0.4em 0 #00c300;
}

.tick {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  overflow: visible;

}
.tick:after {
  content: "";
  width: .06em;
  height: .8em;
  background-color: rgba(0, 255, 0, 0.2);
  position: absolute;
  top: -0.9em;
  left: 50%;
  -webkit-transition: all 180ms ease-out;
  -moz-transition: all 180ms ease-out;
  -o-transition: all 180ms ease-out;
  transition: all 180ms ease-out;
}
.activetick:after {
  background-color: #0F0;
  -webkit-box-shadow: 0 0 0.20em 0.0em #090;
  -moz-box-shadow: 0 0 0.15em 0.04em #090;
  box-shadow: 0 0 0.15em 0.04em #090;
  -webkit-transition: all 50ms ease-in;
  -moz-transition: all 50ms ease-in;
  -o-transition: all 50ms ease-in;
  transition: all 50ms ease-in;
}

.tick:nth-child(1) {
  -webkit-transform: rotate(-140deg);
  -moz-transform: rotate(-140deg);
  -o-transform: rotate(-140deg);
  -ms-transform: rotate(-140deg);
  transform: rotate(-140deg);
}
.tick:nth-child(2) {
  -webkit-transform: rotate(-130deg);
  -moz-transform: rotate(-130deg);
  -o-transform: rotate(-130deg);
  -ms-transform: rotate(-130deg);
  transform: rotate(-130deg);
}
.tick:nth-child(3) {
  -webkit-transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
  -o-transform: rotate(-120deg);
  -ms-transform: rotate(-120deg);
  transform: rotate(-120deg);
}
.tick:nth-child(4) {
  -webkit-transform: rotate(-110deg);
  -moz-transform: rotate(-110deg);
  -o-transform: rotate(-110deg);
  -ms-transform: rotate(-110deg);
  transform: rotate(-110deg);
}
.tick:nth-child(5) {
  -webkit-transform: rotate(-100deg);
  -moz-transform: rotate(-100deg);
  -o-transform: rotate(-100deg);
  -ms-transform: rotate(-100deg);
  transform: rotate(-100deg);
}
.tick:nth-child(6) {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.tick:nth-child(7) {
  -webkit-transform: rotate(-80deg);
  -moz-transform: rotate(-80deg);
  -o-transform: rotate(-80deg);
  -ms-transform: rotate(-80deg);
  transform: rotate(-80deg);
}
.tick:nth-child(8) {
  -webkit-transform: rotate(-70deg);
  -moz-transform: rotate(-70deg);
  -o-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  transform: rotate(-70deg);
}
.tick:nth-child(9) {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.tick:nth-child(10) {
  -webkit-transform: rotate(-50deg);
  -moz-transform: rotate(-50deg);
  -o-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  transform: rotate(-50deg);
}
.tick:nth-child(11) {
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  transform: rotate(-40deg);
}.tick:nth-child(12) {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.tick:nth-child(13) {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.tick:nth-child(14) {
  -webkit-transform: rotate(-100deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.tick:nth-child(16) {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
}
.tick:nth-child(17) {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}
.tick:nth-child(18) {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.tick:nth-child(19) {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}
.tick:nth-child(20) {
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  -o-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
}
.tick:nth-child(21) {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.tick:nth-child(22) {
  -webkit-transform: rotate(70deg);
  -moz-transform: rotate(70deg);
  -o-transform: rotate(70deg);
  -ms-transform: rotate(70deg);
  transform: rotate(70deg);
}
.tick:nth-child(23) {
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  -ms-transform: rotate(80deg);
  transform: rotate(80deg);
}
.tick:nth-child(24) {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.tick:nth-child(25) {
  -webkit-transform: rotate(100deg);
  -moz-transform: rotate(100deg);
  -o-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  transform: rotate(100deg);
}
.tick:nth-child(26) {
  -webkit-transform: rotate(110deg);
  -moz-transform: rotate(110deg);
  -o-transform: rotate(110deg);
  -ms-transform: rotate(110deg);
  transform: rotate(110deg);
}
.tick:nth-child(27) {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.tick:nth-child(28) {
  -webkit-transform: rotate(130deg);
  -moz-transform: rotate(130deg);
  -o-transform: rotate(130deg);
  -ms-transform: rotate(130deg);
  transform: rotate(130deg);
}
.tick:nth-child(29) {
  -webkit-transform: rotate(140deg);
  -moz-transform: rotate(140deg);
  -o-transform: rotate(140deg);
  -ms-transform: rotate(140deg);
  transform: rotate(140deg);
}