/*
@mixin rangeThumb {
  width: 18px;
  height: 18px;
  margin: -8px 0  0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}

@mixin rangeTrack {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}
*/

.range {
  position: relative;
  width: 866px;
  height: 5px;
}

.range input {
  width: 100%;
  position: absolute;
  top: 2px;
  height: 0;
  -webkit-appearance: none;
}
/*   Thumb*/
  .range input::-webkit-slider-thumb {
    -webkit-appearance: none; /* needed again for Chrome & Safari */
   width: 18px;
   height: 18px;
   margin: -8px 0  0;
   border-radius: 50%;
   background: #eecf16;
   cursor: pointer;
   border: 0 !important;
  }

  .range input::-moz-range-thumb {
     width: 18px;
   height: 18px;
   margin: -8px 0  0;
   border-radius: 50%;
   background: #eecf16;
   cursor: pointer;
   border: 0 !important;
  }

  .range input::-ms-thumb {
     width: 18px;
   height: 18px;
   margin: -8px 0  0;
   border-radius: 50%;
   background: #eecf16;
   cursor: pointer;
   border: 0 !important;
  }

/*  Track*/
 .range input::-webkit-slider-runnable-track {
    width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
  }

  .range input::-moz-range-track {
    width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
  }

  .range input::-ms-track {
    width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
  }

  .range input:focus { /* override outline/background on focus */
    background: none;
    outline: none;
  }

  .range input::-ms-track { /* A little somethin' somethin' for IE */
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }


/* Labels below slider*/
.range-labels {
  margin: 0 -41px;
  padding: 0;
  list-style: none;
  display: inline-block;
}
 .range-labels li {
    position: relative;
    float: left;
    width: 90.25px;
    text-align: center;
    color: #b2b2b2;
    font-size: 14px;
    cursor: pointer;
}
.range-labels li::before {
      position: absolute;
      top: -32px;
      right: 0;
      left: 0;
      content: "";
      margin: 0 auto;
      width: 9px;
      height: 9px;
      background: #b2b2b2;
      border-radius: 50%;
    }
  
  
  .range-labels li.active {
    color: #eecf16;
  }
  
  .range-labels li.selected::before {
    background: #eecf16;
  }
  
  .range-labels li.active.selected::before {
    display: none;
  }