*{margin:0;padding:0;}
html, body {
  width:100%;
  height:100%;
  font-size: 0;
  font-family: Helvetica, sans-serif;
  background:#f5f5f5;
}

.btn {
  width:25px;
  height:25px;
  border-radius:50%;
  margin:5px 5px 0 0;
}
.btn1 { background:#571e84; }
.btn2 { background:#d10007; }
.btn3 { background:#cc51a7; }
.btn4 { background:#ff9416; }
.btn5 { background:#4bb7ec; }
.btn6 { background:#ffdb1e; }
.btn7 { background:#006c96; }
.btn5 { background:#3d962e; }

.step {
  margin:0;
  padding:0;
  display:inline-block;
  position: relative;
}

#container {
  position:relative;
  width:100%;
  height:100%;
}

#toy {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#playhead {
  position:absolute;
  top:0px;
  left:-4px;
  width:33px;
  height:215px;
  background:rgba(200,200,200,0.3);
  border-radius:50px;
}

#controls {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
  width:200px;
  opacity:0.25;
  pointer-events: none;
}

button {
  position:relative;
  width:30px;
  height:30px;
  padding:2px;
  outline: none;  
  background:none;
  border:0px;
  overflow:visible;
}


#pauseTxt {
  display:none
}

#tempo {
  position:relative;
  width:90px;
  top:-4px;
  margin:10px;
}