/*currently only prefixed for webkit*/
body {
	display: -webkit-flex;
	-webkit-justify-content: center;
	
}
.range-container {
	width: 90%;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	margin-top: 2rem;
}

.label-container {
	-webkit-flex-basis: 100%;
	display: -webkit-flex;
	-webkit-flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	margin-top: 2rem;
	left: -0px;

}

.label {
	color: black;
	font-size:7px;
	margin-top: 1rem;
	text-align: right;
	left:-4px;
	max-width: 1rem;
	-webkit-tap-highlight-color: transparent; /*gets rid of black flash on click of track*/
}
.slider-container {
	position: relative;
	height: 100%;
	width: 100%;
}
.slider {
	position: absolute;
	left:0;
	width: 100%;
}

.range-fill {
	position:absolute;
	top:1px;
	left:4px;
	background-color: #4CAF50;
	height: 9px;
	pointer-events: none;
	border-radius: 10px;
}

input[type=range] {
	-webkit-appearance: none;
	-webkit-flex-basis: 100%;
	-webkit-tap-highlight-color: transparent;
	background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 10rem;
    height: 1rem;
    background: #4CAF50;
    border: 2px solid #4CAF50;
    border-radius: 10px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 50%;
    background: #f36f21;
    margin-top: -1.8rem;
border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0px 5px 5px -3px #d9d9d9;
}

input[type=range]:focus {
    outline: none;
}

/*MEDIA QUERIES*/

@media (min-width:992px){ 
	.range-container {
		width: 70%;
		max-width: 60rem;
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		margin-top: 5rem;
	}
	.label-container {
	margin-top: 2rem;
	left:-4px;
	}
	.label {
		font-size: 15px;
		max-width: 18rem;
		left:-4px;
	}
	.slider-container {
		height: 2.5rem;
		top:9px;
	}
	.range-fill {
		border-radius: 20px;
		height: 16px;
		position:absolute;
	top:1px;
	}
	input[type=range]::-webkit-slider-thumb {
		width: 4rem;
		height: 4rem;
	}
	input[type=range]::-webkit-slider-runnable-track {
		width: 102rem;
		height: 1.6rem;
		border-radius: 20px;
	}
}

@media(min-width:1200px){
	.range-container {
		width: 80%;
	}
	.label {
		max-width: 5rem;
		left:-4px;
text-align:right;
	}
}