/* --- SLIDER --- */

.interactive-element .slider {
  position: relative;
  width: 425px;
  margin: 20px auto;
}

.interactive-element .ui-slider {
	background: #f26262;
	position: relative;
	height: 1px;
	margin: 20px 0 19px 0;
	cursor: pointer;
}

.interactive-element .ui-slider a {
	background: #f26262;
	display: block;
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
  cursor: pointer;
}

.interactive-element .slider .instruction {
  display: block;
  width: auto;
  color: #1f3038;
  font: 300 12px/16px 'Open Sans';
  text-align: center;
  cursor: default;
}

/* ------ MEDIA QUERIES ------ */

/* iPhone landscape */
@media screen and (max-width: 600px) {
  .interactive-element .slider {
    width: 300px;
  }
}

/* iPhone portrait */
@media screen and (max-width: 400px) {
  .interactive-element .slider {
    width: 200px;
  }
}