

/**
 *
 * Content.
 *
 */

.slider-wrapper {
/*  margin: 50px 0 30px 30px; */
  margin: auto;
  position: relative;
  width: 250px;
}

.vertical-wrapper {
/*  height: 400px;*/
  height: 85vh;
  width: auto;
}

















/**
 *
 * Verical slider Orbio overide .
 *
 **/


.box_slider {
  background-color: #fff;
  margin-bottom: 30px;
  min-height: 75px;
  position: relative;

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/**
 *
 * Custom slider.
 *
 */

.range-min,
.range-max {
  padding-top: 1px !important;
}

.range-bar.power-ranger {
  background-color: transparent;
  margin: auto;
}

.power-ranger .range-quantity {
  background-color: transparent;
}

.power-ranger .range-handle {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgba(0, 0, 0, 0);
  background-image: url("../vertical_slider_files/silhouette.jpg");
  background-origin: padding-box;
  background-repeat: no-repeat;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0px 5px #5a4ec7;
  -webkitbox-shadow: 0 0px 5px rgba(57, 12, 147, 1);
  
}



@media screen and (max-width: 320px) {
    .power-ranger .range-handle {
      left: -23px;
      width: 50px;
      height: 50px;
      background-size: 50px 50px, cover;
    }
}  
@media screen and (min-width: 321px) and (max-width: 484px) {
    .power-ranger .range-handle {
      left: -26px;
      width: 55px;
      height: 55px;
      background-size: 55px 55px, cover;
    }
}

@media screen and (min-width: 485px) and (max-width: 569px) {
    .power-ranger .range-handle {
      left: -29px;
      width: 60px;
      height: 60px;
      background-size: 60px 60px, cover;
    }
}  

@media screen and (min-width: 570px) and (max-width: 639px) {
    .power-ranger .range-handle {
      left: -31px;
      width: 65px;
      height: 65px;
      background-size: 65px 65px, cover;
    }
}  
  
@media screen and (min-width: 640px) {
    .power-ranger .range-handle {
      left: -33px;
      width: 70px;
      height: 70px;
      background-size: 70px 70px, cover;
    }
}  
