/* origianl code from https://www.youtube.com/watch?v=pdtYsnrwrKw*/

.levels {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #fffcf9;
  flex-direction: column;
}

.levels img {
  z-index: 1;
}

.hidden {
  display: none;
}

.slidecontainer {
  width:60%;
  position: absolute;
  justify-content: center;
  top: 280px;
  z-index: 1;
}

.data {
  position: absolute;
  color: transparent;
  font-family: "Merriweather", serif;
  font-size: 20vw;
  -webkit-text-fill-color: none; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #f7c0ce;
  z-index: 0;
}

#grams {
  font-size: 5vw;
}

/* The slider itself */
.slider{
  -webkit-appearance: none;
  width: 250px;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;

}
.slidecontainer{  
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
.number {
  font-size: 2em;
  background: red;
}
/* Mouse-over effects */
.slidecontainer:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.end-cube{
  position: absolute;
  width: 20px;
  height:20px;
  border: solid #1C1AA9 5px;
  background: #FFDD02;
  z-index:0;
  top:25px;
  right:-5px;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
/*.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4f5354;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #bfc0c1;
  cursor: pointer;
}
*/
input[type=range].slider {
  width: 100%;
  margin: 35.8px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range].slider:focus {
  outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
  background: #1c1aa9;
  border: 0.2px solid rgba(1, 1, 0, 0);
  border-radius: 1.3px;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
input[type=range].slider::-webkit-slider-thumb {
  margin-top: -80px;
  width: 150px;
  height: 150px;
  background: url('https://uploads-ssl.webflow.com/5ed8171611a0683a250e530b/5f1c8a6c9bfb9a4d8b8d1c3e_Slider.png');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-transition: -webkit-transform .5s ease-in-out;
    -ms-transition: -ms-transform .5s ease-in-out;
    transition: transform .5s ease-in-out; 
}

input[type=range].slider::-webkit-slider-thumb:hover{
  transform:rotate(45deg);
}

input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: #1c1aa9;
}
input[type=range].slider::-moz-range-track {
  background: #1c1aa9;
  border: 0.2px solid rgba(1, 1, 0, 0);
  border-radius: 1.3px;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
input[type=range].slider::-moz-range-thumb {
  width: 80px;
  height: 80px;
  background: #35c18b;
  border: 5px solid #1c1aa9;
  cursor: pointer;
}
input[type=range].slider::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 36.8px 0;
  color: transparent;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
input[type=range].slider::-ms-fill-lower {
  background: #1c1aa9;
  border: 0.2px solid rgba(1, 1, 0, 0);
  border-radius: 2.6px;
}
input[type=range].slider::-ms-fill-upper {
  background: #1c1aa9;
  border: 0.2px solid rgba(1, 1, 0, 0);
  border-radius: 2.6px;
}
input[type=range].slider::-ms-thumb {
  width: 80px;
  height: 80px;
  background: #35c18b;
  border: 5px solid #1c1aa9;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range].slider:focus::-ms-fill-lower {
  background: #1c1aa9;
}
input[type=range].slider:focus::-ms-fill-upper {
  background: #1c1aa9;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range].slider {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

@media screen and (max-width: 480px){
  
  .levels img{transform:scale(0.8);}
  
  input[type=range].slider {
    width: 100%;
  }
  
  input[type=range].slider::-webkit-slider-thumb{
    transform:scale(0.6);
  }
  input[type=range].slider::-webkit-slider-thumb：hover{
    transform:none;
  }
  
  .end-cube{
    transform:scale(0.6);
    top:28px;
  }
  #landfill{
    font-size: 30vw;
  }
  }