#pin-box-h {
  margin-left: 0;
}

.pin-box {

  display: block;

}

/* horizontal */

.range-slider {

  display: block;
  position: absolute;

}

.range-slider-track .before {

  display: block;
  position: absolute;
  top: 31px;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #DBAA00;

}

.range-slider-track .after {
  display: block;
  position: absolute;
  top: 31px;
  right: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #cccac9;
}

.range-slider-track .segment {
  display: block;
  position: absolute;
  top: 31px;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #5a8314;
}

.range-slider .dragger span {
  font-family: "HelveticaNeueW01-55Roma", "Helvetica Neue Regular", Helvetica, Arial, "sans-serif";
  font-size: 12px;
  text-shadow: none;
  position:absolute;
  
  background-color: #474C55;
  border-color: #474C55;
  color: white;
  text-align: center;
  line-height: 12px;
  border-radius: 3px;
  z-index: 100;

}

.range-slider-horizontal .dragger span {

  bottom: 70%;
  left: 50%;
  /* width: 3em;
  height: 1em; */
  padding: 6px 7px 5px 7px;
  margin: 0 0 .5em -1.8em;

}

.range-slider .dragger span:before {

  content: "";
  display: block;
  border: .25em solid transparent;
  border-top-color: inherit;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -.25em;
  z-index: 100;

}

/* vertical */

.range-slider-vertical {

  display: inline-block;
  vertical-align: middle;

}

.range-slider-vertical .range-slider-track {

  left: 0;
  width: 64px;
  height: 100%;
  margin:0 auto;
  position: absolute;

}

.range-slider-vertical .before {

  position: absolute;
  display: block;
  top: 0;
  right: auto;
  left: 31px;
  width: 4px;
  height: 100%;

}

.range-slider-vertical .after {

  position: absolute;
  display: block;
  top: 0;
  right: auto;
  left: 31px;
  width: 4px;
  height: 100%;

}

.range-slider-vertical .segment {

  position: absolute;
  display: block;
  top: 0;
  right: auto;
  left: 31px;
  width: 4px;
  height: 100%;

}

.range-slider-vertical .range-slider-track .dragger span {

  font-family: "HelveticaNeueW01-55Roma", "Helvetica Neue Regular", Helvetica, Arial, "sans-serif";
  font-size: 12px;
  text-shadow: none;
  position:absolute;
  left: 72%;
  top: 35%;
  padding: 6px 7px 5px 7px;
  margin: -.2em 0 0 .5em;
  background-color: #474C55;
  border-color: #474C55;
  color: white;
  text-align: center;
  line-height: 12px;
  border-radius: 3px;
  
}

.range-slider-vertical .dragger span:before {
  border-color: transparent;
  border-right-color: inherit;
  top: 50%;
  right: 100%;
  bottom: auto;
  left: auto;
  margin-top: -.25em;
  margin-left: 0;
}