.range-slider,.range-slider-surface {
   *zoom: 1;
   margin: 20px 0;
   padding-top: 1.5em;
   position: relative;
   text-align: center;
}

.range-slider:before,
.range-slider:after,
.range-slider-surface:before,
.range-slider-surface:after {
   content: " ";
   display: table;
}

.range-slider:after,
.range-slider-surface:after{
   clear: both;
}

@media (min-width: 640px) {

   .range-slider,
   .range-slider-surface{
      padding-top: 3.5em;
   }
}

@media (min-width: 1024px) {

   .range-slider,
   .range-slider-surface {
      padding-top: 1.5em;
   }
}

.range-slider .track,
.range-slider-surface .track {
   bottom: 15px;
   height: 6px;
   left: 0;
   margin-bottom: -3px;
   position: absolute;
   width: 0;
   z-index: 50;
}

@media (min-width: 640px) {

   .range-slider .track,
   .range-slider-surface .track{
      bottom: 15px;
   }
}

@media (min-width: 1024px) {

   .range-slider .track,
   .range-slider-surface .track {
      bottom: 15px;
   }
}

.range-slider .track--full,
.range-slider-surface .track--full {
   background: #aaa;
   width: 96% !important;
   left :3% !important
}

.range-slider .track--included,
.range-slider-surface .track--included {
   background: #17A2B8;
   border-radius: 3px;
   width: 96% !important;
   left :2% !important
}

.range-slider .slider-thumb,
.range-slider-surface .slider-thumb{
   background: #555;
   border-radius: 50%;
   cursor: pointer;
   display: none;
   display: block\9;
   height: 30px;
   left: 0;
   position: absolute;
   width: 30px;
   z-index: 101;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {

   .range-slider .slider-thumb,
   .range-slider-surface .slider-thumb {
      display: block;
   }
}

@media (min-width: 640px) {

   .range-slider .slider-thumb,
   .range-slider-surface .slider-thumb{
      height: 30px;
      width: 30px;
   }
}

@media (min-width: 1024px) {

   .range-slider .slider-thumb,
   .range-slider-surface .slider-thumb{
      height: 30px;
      width: 30px;
   }
}

.range-slider [type=range],
.range-slider-surface [type=range] {
   -webkit-appearance: none;
   background: none;
   height: 30px;
   margin: 0;
   outline: none;
   padding: 0;
   pointer-events: none;
   position: relative;
   width: 100%;
   z-index: 75;
}

@media (min-width: 640px) {

   .range-slider [type=range],
   .range-slider-surface [type=range]{
      height: 30px;
   }
}

@media (min-width: 1024px) {

   .range-slider [type=range],
   .range-slider-surface [type=range] {
      height: 30px;
   }
}

.range-slider [type=range]:focus,
.range-slider-surface [type=range]:focus {
   outline: none;
}

.range-slider [type=range]::-moz-focus-outer,
.range-slider-surface [type=range]::-moz-focus-outer {
   border: 0;
}

.range-slider [type=range]:first-of-type,
.range-slider-surface [type=range]:first-of-type {
   float: left;
   margin-bottom: -30px;
}

@media (min-width: 640px) {

   .range-slider [type=range]:first-of-type,
   .range-slider-surface [type=range]:first-of-type {
      margin-bottom: -30px;
   }
}

@media (min-width: 1024px) {

   .range-slider [type=range]:first-of-type,
   .range-slider-surface [type=range]:first-of-type {
      margin-bottom: -30px;
   }
}

.range-slider [type=range]:last-of-type,
.range-slider-surface [type=range]:last-of-type {
   float: right;
   margin-bottom: 0;
}

.range-slider [type=range]::-webkit-slider-runnable-track,
.range-slider-surface [type=range]::-webkit-slider-runnable-track {
   background: none;
   border: 0;
   height: 6px;
   z-index: -1;
}

.range-slider [type=range]::-ms-fill-lowe,
.range-slider-surface [type=range]::-ms-fill-lowe{
   background: none;
   border: 0;
}

.range-slider [type=range]::-ms-fill-upper,
.range-slider-surface [type=range]::-ms-fill-upper {
   background: none;
   border: 0;
}

.range-slider [type=range]::-ms-track,
.range-slider-surface [type=range]::-ms-track {
   background: transparent;
   border: 0;
   border-color: transparent;
   color: transparent;
   height: 6px;
   z-index: -1;
}

.range-slider [type=range]:focus::-ms-fill-lower,
.range-slider-surface [type=range]:focus::-ms-fill-lower{
   background: none;
   border: 0;
}

.range-slider [type=range]:focus::-ms-fill-upper,
.range-slider-surface [type=range]:focus::-ms-fill-upper{
   background: none;
   border: 0;
}

.range-slider [type=range]::-moz-range-track,
.range-slider-surface [type=range]::-moz-range-track {
   -moz-appearance: none;
   background: none;
   border: 0;
   height: 6px;
   z-index: -1;
}

.range-slider [type=range]::-webkit-slider-thumb,
.range-slider-surface [type=range]::-webkit-slider-thumb{
   -webkit-appearance: none;
   background: #555;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   height: 30px;
   margin-top: -12px;
   outline: 0;
   pointer-events: all;
   position: relative;
   width: 30px;
   z-index: 100;
}

@media (min-width: 640px) {

   .range-slider [type=range]::-webkit-slider-thumb,
   .range-slider-surface [type=range]::-webkit-slider-thumb {
      height: 30px;
      margin-top: -12px;
      width: 30px;
   }
}

@media (min-width: 1024px) {

   .range-slider [type=range]::-webkit-slider-thumb,
   .range-slider-surface [type=range]::-webkit-slider-thumb {
      height: 30px;
      margin-top: -12px;
      width: 30px;
   }
}

.range-slider [type=range]::-ms-thumb,
.range-slider-surface [type=range]::-ms-thumb{
   background: #555;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   height: 30px;
   margin-top: 0;
   pointer-events: all;
   position: relative;
   width: 30px;
   z-index: 100;
}

@media (min-width: 640px) {

   .range-slider [type=range]::-ms-thumb,
   .range-slider-surface [type=range]::-ms-thumb {
      height: 30px;
      width: 30px;
   }
}

@media (min-width: 1024px) {

   .range-slider [type=range]::-ms-thumb,
   .range-slider-surface [type=range]::-ms-thumb {
      height: 30px;
      width: 30px;
   }
}

.range-slider [type=range]::-moz-range-thumb,
.range-slider-surface [type=range]::-moz-range-thumb {
   -moz-appearance: none;
   background: #555;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   height: 30px;
   margin-top: -12px;
   pointer-events: all;
   position: relative;
   width: 30px;
   z-index: 100;
}

@media (min-width: 640px) {

   .range-slider [type=range]::-moz-range-thumb,
   .range-slider-surface [type=range]::-moz-range-thumb {
      height: 30px;
      margin-top: -12px;
      width: 30px;
   }
}

@media (min-width: 1024px) {

   .range-slider [type=range]::-moz-range-thumb,
   .range-slider-surface [type=range]::-moz-range-thumb {
      height: 30px;
      margin-top: -12px;
      width: 30px;
   }
}

.range-slider .output,
.range-slider output,
.range-slider-surface .output,
.range-slider-surface output{
   background: transparent;
   border: 0px solid #aaa;
   border-radius: 4px;
   color: #aaa;
   display: inline-block;
   height: 2.5em;
   left: 50%;
   line-height: 2.5em;
   padding: 0 0.75em;
   position: absolute;
   text-align: center;
   top: 0;
   transform: translate(-50%, 0);
}