.slider-container {
	position: relative;
  display: inline-block;
  width: 60px;
  height: 200px;
}

.slider-container input[type=submit] {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 200px;
	/* background: coral; */
}

.slider-container input[type=submit]:hover {
  background-color: rgba(255,0,0,0.4);
}

.slider-container intput[type=submit]:active {
  background-color: rgba(255,0,0,0.6);
}


#slider {
  fill:none;
}

#depth-slider-centre,
#freq-slider-centre, 
#phase-slider-centre, 
#aa-slider-centre, 
#aa-nav-slider-center {
  fill:#b8000f;
  stroke:#000;
  stroke-width:2px;
}

#depth-slider-up-1,
#freq-slider-up-1,
#phase-slider-up-1,
#aa-slider-up-1,
#aa-nav-slider-up-1 {
  fill:#0060ff;
  stroke:#000;
  stroke-width:2px;
}

#depth-slider-down-1,
#freq-slider-down-1,
#phase-slider-down-1,
#aa-slider-down-1,
#aa-nav-slider-down-1 {
  fill:#0060ff;
  stroke:#000;
  stroke-width:2px;
}

#depth-slider-up-2,
#freq-slider-up-2,
#phase-slider-up-2,
#aa-slider-up-2,
#aa-nav-slider-up-2 {
  fill:#7eb419;
  stroke:#000;
  stroke-width:2px;
}

#depth-slider-down-2,
#freq-slider-down-2,
#phase-slider-down-2,
#aa-slider-down-2,
#aa-nav-slider-down-2 {
  fill:#7eb419;
  stroke:#000;
  stroke-width:2px;
}

#depth-slider-up-3,
#freq-slider-up-3,
#phase-slider-up-3,
#aa-slider-up-3,
#aa-nav-slider-up-3 {
  fill:#b41919;
  stroke:#000;
  stroke-width:2px;
}

#depth-slider-down-3,
#freq-slider-down-3,
#phase-slider-down-3,
#aa-slider-down-3,
#aa-nav-slider-down-3 {
  fill:#b41919;
  stroke:#000;
  stroke-width:2px;
}

/* depth */

.button-depth-slider-up-3 {
	clip-path: url(#depth-slider-path-up-3);
}

.button-depth-slider-up-2 {
	clip-path: url(#depth-slider-path-up-2);
}

.button-depth-slider-up-1 {
	clip-path: url(#depth-slider-path-up-1);
}

.button-depth-slider-centre {
	clip-path: url(#depth-slider-path-centre);
}

.button-depth-slider-down-3 {
	clip-path: url(#depth-slider-path-down-3);
}

.button-depth-slider-down-2 {
	clip-path: url(#depth-slider-path-down-2);
}

.button-depth-slider-down-1 {
	clip-path: url(#depth-slider-path-down-1);
}

/* freq */
.button-freq-slider-up-3 {
	clip-path: url(#freq-slider-path-up-3);
}

.button-freq-slider-up-2 {
	clip-path: url(#freq-slider-path-up-2);
}

.button-freq-slider-up-1 {
	clip-path: url(#freq-slider-path-up-1);
}

.button-freq-slider-centre {
	clip-path: url(#freq-slider-path-centre);
}

.button-freq-slider-down-3 {
	clip-path: url(#freq-slider-path-down-3);
}

.button-freq-slider-down-2 {
	clip-path: url(#freq-slider-path-down-2);
}

.button-freq-slider-down-1 {
	clip-path: url(#freq-slider-path-down-1);
}

/* phase */
.button-phase-slider-up-3 {
	clip-path: url(#phase-slider-path-up-3);
}

.button-phase-slider-up-2 {
	clip-path: url(#phase-slider-path-up-2);
}

.button-phase-slider-up-1 {
	clip-path: url(#phase-slider-path-up-1);
}

.button-phase-slider-centre {
	clip-path: url(#phase-slider-path-centre);
}

.button-phase-slider-down-3 {
	clip-path: url(#phase-slider-path-down-3);
}

.button-phase-slider-down-2 {
	clip-path: url(#phase-slider-path-down-2);
}

.button-phase-slider-down-1 {
	clip-path: url(#phase-slider-path-down-1);
}

/* aa */
.button-aa-slider-up-3 {
	clip-path: url(#aa-slider-path-up-3);
}

.button-aa-slider-up-2 {
	clip-path: url(#aa-slider-path-up-2);
}

.button-aa-slider-up-1 {
	clip-path: url(#aa-slider-path-up-1);
}

.button-aa-slider-centre {
	clip-path: url(#aa-slider-path-centre);
}

.button-aa-slider-down-3 {
	clip-path: url(#aa-slider-path-down-3);
}

.button-aa-slider-down-2 {
	clip-path: url(#aa-slider-path-down-2);
}

.button-aa-slider-down-1 {
	clip-path: url(#aa-slider-path-down-1);
}

/* aa-nav */
.button-aa-nav-slider-up-3 {
	clip-path: url(#aa-nav-slider-path-up-3);
}

.button-aa-nav-slider-up-2 {
	clip-path: url(#aa-nav-slider-path-up-2);
}

.button-aa-nav-slider-up-1 {
	clip-path: url(#aa-nav-slider-path-up-1);
}

.button-aa-nav-slider-centre {
	clip-path: url(#aa-nav-slider-path-centre);
}

.button-aa-nav-slider-down-3 {
	clip-path: url(#aa-nav-slider-path-down-3);
}

.button-aa-nav-slider-down-2 {
	clip-path: url(#aa-nav-slider-path-down-2);
}

.button-aa-nav-slider-down-1 {
	clip-path: url(#aa-nav-slider-path-down-1);
}