body {
  font: 1rem/1.4 Montserrat, sans-serif;
}

main {
  width: 800px;
  margin: 0 auto;
}

#controls {
  text-align: center;
}

#controls > * {
  width: 250px;
  float: left;
}

.slave {
  opacity: 0.5;
  transition: 0.25s;
}

.slave:hover {
  opacity: 1;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #ccc;
  border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background: #222;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: -4px;
}
input[type=range].active::-webkit-slider-thumb {
  background: #304ffe;
  box-shadow: 0 0 3px #005;
}
input[type=range].active::-webkit-slider-runnable-track {
  background: #ccc;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #ccc;
  border-radius: 4px;
}
input[type=range]::-moz-range-thumb {
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  background: #222;
  cursor: pointer;
}
input[type=range].active::-moz-range-thumb {
  background: #304ffe;
  box-shadow: 0 0 3px #005;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #ccc;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: transparent;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  background: #ccc;
  border-radius: 4px;
  margin: 0;
}
input[type=range]::-ms-thumb {
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  background: #304ffe;
  cursor: pointer;
}
input[type=range].active::-ms-fill-lower,
input[type=range].active::-ms-fill-upper {
  background: #ccc;
}

.slave input[type=range]::-webkit-slider-track {
  height: 2px;
}
.slave input[type=range]::-webkit-slider-thumb {
  background: #00c853;
  box-shadow: 0 0 2px #050;
}
.slave input[type=range]::-moz-range-track {
  height: 2px;
}
.slave input[type=range]::-moz-range-thumb {
  background: #00c853;
  box-shadow: 0 0 2px #050;
}
.slave input[type=range]::-ms-track {
  height: 2px;
}
.slave input[type=range]::-ms-thumb {
  background: #00c853;
  box-shadow: 0 0 2px #050;
}