controlSelector {
  position: absolute;
  display: block;
  height: 100%;
  top: 40px;
  margin-left: -60px;
  opacity: 0;
  transition: 250ms all ease-out;
  padding: 0px 10px;
  /*	font-family: 'Khula', sans-serif;*/
}
controlSelector:hover {
  opacity: 1;
}
.narrow controlSelector {
  text-align: right;
}

controls {
  display: block;
  margin: 0px 0px 24px 0px;
}

control {
  display: block;
  width: 20px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin: 0px 6px 6px 0px;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.5;
  transition: 250ms all ease-out;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 100%;
}

control.on,
control:hover {
  opacity: 1;
}
control.on {
  height: 50px;
  background: none;
}
control.selected {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(105, 95, 85, 1);
  background: rgba(255, 250, 237, 1);
}