.slider {
	position: relative;
}

.startamount,
.endamount {
    color: #575757;
    font-family: 'Roboto', sans-serif;
    font-size: .729vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25vw;
    margin: 0;
}

.startamount {
    position: absolute;
    left: 0;
    top: 25px;
}

.endamount {
    position: absolute;
    right: 0;
    top: 25px;
}

.setamount {
	position: absolute;
	top: -2.5em;
	left: 50%;
	width: 60px;
	height: 1em;
	text-align: center;
	color: red;
	font-weight: bold;
	white-space: nowrap;
}
.range {
	position: relative;
}

input[type='range'] {
    --thumb-height: 20px;
    --track-height: 2px;
    --track-color: #BDBDBD;
    --clip-edges: 2px;
  
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    color: #333333;
    position: relative;
    background: #fff0;
    overflow: hidden;
    transition: all ease 100ms;
    height: var(--thumb-height);
    margin-top: .521vw;
  }
  
  input[type='range']::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
    position: relative;
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
  }
  
  input[type='range']::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
  
    height: var(--thumb-height);
    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));
    clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));
    -webkit-appearance: none;
    appearance: none;
    transition: all ease 100ms;
    position: relative;
    background-color: currentColor;
    filter: brightness(100%);
  }
  
  input[type='range']::-moz-range-track,
  input[type='range']::-moz-range-thumb {
    height: var(--thumb-height);
  }
  
  input[type='range']::-moz-range-track,
  input[type='range']::-moz-range-thumb,
  input[type='range']::-moz-range-progress {
    background: #BDBDBD;
  }
  
  input[type='range']::-moz-range-track {
    appearance: none;
    transition: all ease 100ms;
    width: 100%;
    background: #BDBDBD;
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
  }
  
  input[type='range']::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
    background: currentColor;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
    cursor: grabbing;
    filter: brightness(100%);
  }
  
  input[type='range']::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
    filter: brightness(100%);
  }
  
  
  input[type='range']:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
  }
  
  input[type='range']:hover::-moz-range-thumb {
    filter: brightness(var(--brightness-hover));
  }
  
  input[type='range']:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
  }
  
  input[type='range']:active {
    cursor: grabbing;
  }
  
  input[type='range']:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
  }
  
  input[type='range']:active::-moz-range-thumb {
    filter: brightness(var(--brightness-down));
  }
  
  input[type='range']:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
  }
  
  input[type='range']:disabled {
    filter: grayscale(1);
    opacity: 0.3;
    cursor: not-allowed;
  }
  
  input[type='range']:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
  }
  
  input[type='range']:disabled::-moz-range-thumb {
    cursor: not-allowed;
  }

  .bubble {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 5px;
    color: #575757;
    font-family: 'Roboto', sans-serif;
    font-size: .729vw;
    font-weight: 400;
    line-height: 1.25vw;
  }
  .bubble::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    top: -1px;
    left: 50%;
  }

  @media (max-width: 767px) {
    .startamount,
    .endamount,
    .bubble {
        font-size: 12px !important;
        line-height: 14px !important;
    }
    
    .slider {
        margin-bottom: 40px;
    }
  }