.thermometer {
  width: 28px;
  background: #EEE;
  height: 180px;
  position: relative;
  border: 3px solid #DDD;
  z-index: 1;
  margin-bottom: 50px;
}
/*.thermometer:before, .thermometer:after {
  position: absolute;
  content: "";
  border-radius: 50%;
}*/
/*.thermometer:before {
  width: 100%;
  height: 34px;
  bottom: 6px;
  background: #EEE;
  z-index: -1;
}*/
/*.thermometer:after {
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background-color: #90C29E;
  bottom: -31px;
  border: 6px solid #DDD;
  z-index: -3;
  left: 50%;
}*/
/*.thermometer.orange:after {
  background-color: #F4BD8C;
}*/
.thermometer.orange .temperature {
  background: linear-gradient(#E89E5C, #F4BD8C) no-repeat bottom;
}
.thermometer .graduations {
  height: 59%;
  top: 20%;
  width: 50%;
}
.thermometer .graduations, .thermometer .graduations:before {
  position: absolute;
  border-top: 2px solid rgba(0, 0, 0, 0.5);
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}
.thermometer .graduations:before {
  content: "";
  height: 34%;
  width: 100%;
  top: 32%;
}
.thermometer .temperature {
  bottom: 0;
  background: linear-gradient(#B4DABF, #90C29E) no-repeat bottom;
  width: 100%;
  background-size: 100% 240px;
  transition: all 1.5s ease-in-out;
}
.thermometer .temperature, .thermometer .temperature:before, .thermometer .temperature:after {
  position: absolute;
}
.thermometer .temperature:before {
  content: attr(data-value);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 1em;
  line-height: 1;
  transform: translateY(50%);
  left: calc(100% + 1em / 1.5);
  top: calc(-1em + 5px - 5px * 2);
}
.thermometer .temperature:after {
  content: "";
  border-top: 0.4545454545em solid transparent;
  border-bottom: 0.4545454545em solid transparent;
  border-right: 0.6666666667em solid rgba(0, 0, 0, 0.7);
  left: 100%;
  top: calc(-1em / 2.2 + 5px);
}
.thermometer .temperature {
  min-height: 18px;
}


@media screen and (max-width: 600px) {
  .thermometer {
    height: 160px;
    transform: rotate(90deg);
    margin-left: calc(50% - 28px);
    margin-top: -60px;
    margin-bottom: -30px;
  }
  .thermometer .temperature:before {
    transform: rotate(-90deg);
    margin-left: -10px;
  }
}