body, h1, h2, a {
  color: #000;
}

html, body, div {
  margin: 0;
  padding: 0;
}

.thermometer {
  position: relative;
  height: auto;
  margin: 15px;
  transform: rotate(-80deg);
  top: 0px;
  left: -100px;
}

.thermometer-body {
  width: auto;
  height: 32px;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: #bdc3c7;
  border-radius: 0 22px 22px 0;
  border: 5px solid #c0392b;
  border-left: none;
}
.primary .thermometer-body {
  border-color: #e74c3c;
}
.thermometer-body:before {
  content: " ";
  width: 64px;
  height: 64px;
  position: absolute;
  top: -21px;
  left: -54px;
  z-index: 2;
  background: #e74c3c;
  border-radius: 50%;
  border: 5px solid #c0392b;
  box-shadow: inset 0 0 0 4px #bdc3c7;
}
.primary .thermometer-body:before {
  background: #e74c3c;
  border-color: #e74c3c;
}

.rtl {
  direction: rtl;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  direction: ltr;
  width: 250px;
  height: 16px;
  position: relative;
  top: 5px;
  left: -1px;
  background-color: #fff;
  color: #fff;
  border-radius: 0 16px 16px 0;
}
progress[value]::-webkit-progress-bar {
  background-color: #fff;
  border-radius: 0 16px 16px 0;
}
progress[value]::-webkit-progress-value {
  background-color: #e74c3c;
  border-radius: 0 32px 8px 0;
}
.primary progress[value]::-webkit-progress-value {
  background-color: #e74c3c;
}
progress[value]::-moz-progress-bar {
  background-color: #e74c3c;
  border-radius: 0 32px 8px 0;
}
.primary progress[value]::-moz-progress-bar {
  background-color: #e74c3c;
}

progress[value="100"]::-webkit-progress-value {
  border-radius: 0 16px 16px 0;
}
progress[value="100"]::-moz-progress-bar {
  border-radius: 0 16px 16px 0;
}

progress[value="0"]::-webkit-progress-bar:before {
  content: "0%";
  position: absolute;
  top: -2px;
  left: -40px;
}

progress[value="25"]::-webkit-progress-bar:before {
  content: "25%";
  position: absolute;
  top: -2px;
  left: -40px;
}

progress[value="50"]::-webkit-progress-bar:before {
  content: "50%";
  position: absolute;
  top: -2px;
  left: -40px;
}

progress[value="75"]::-webkit-progress-bar:before {
  content: "75%";
  position: absolute;
  top: -2px;
  left: -40px;
}

progress[value="100"]::-webkit-progress-bar:before {
  content: "100%";
  position: absolute;
  top: -2px;
  left: -40px;
}

.animated {
  position: relative;
  width: 350px;
  height: 350px;
  margin: auto;
}

.tempstuff {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 10;
}

.warm, .koud {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.scenery {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
}

#warm, #koud {
  opacity: 0;
  transition: opacity 1s;
}

#warm.fade, #koud.fade {
  opacity: 1;
}

button {
  margin-left: 155px;
  padding: 6px 16px;
  background-color: transparent;
  border: none;
  padding-top: 80px;
  font-size: 34px;
  font-weight: 700;
  border-radius: 32px;
  color: #c0392b;
}
.primary button {
  background-color: transparent;
  border: none;
}
button:hover {
  color: #c0392b;
}
.primary button:hover {
  color: #e74c3c;
}
button:disabled, .primary button:disabled {
  background-color: none;
  color: none;
}

/*# sourceMappingURL=temperatuur.css.map */