@keyframes pulse {
    0% {
        transform: translateY();
        animation-timing-function: ease-in;
    }
    50% {
        transform: translateY(10px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateY();

    }
}
/* Percentage Start */
input[type="text"] {
  background-color: transparent;
  margin-top: 30px;
  border: 0;
  border-bottom: solid 1px #8080ff;
  text-align: center;
  color: #518bf0;
  text-shadow: 0 0 3px #518bf0;
  width: 45px;
  display: inline-block;
}
input:focus {
  outline: 0;
  border-bottom: dashed 1px #ff8080;
}
input::-moz-selection {
  color: #1a1a1a;
  background-color: #c6e4ee;
}
input::selection {
  color: #1a1a1a;
  background-color: #c6e4ee;
}
::-webkit-input-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}
:-moz-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}
::-moz-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}
:-ms-input-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}
.wrapper {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-align: center;
  align-items: center;
  -o-box-pack: center;
  justify-content: center;
  -o-box-orient: vertical;
  flex-direction: column;
  /*height: 60%;*/
}
.green, .green100 {
  margin: 15px;
}
.green .progress,
.green100 .progress,
.red .progress,
.orange .progress {
  position: relative;
  border-radius: 50%;
}
.green .progress,
.green100 .progress,
.red .progress,
.orange .progress {
  width: 250px;
  height: 250px;
}
.green .progress, .green100 .progress {
  /*border: 5px solid #A7D11D;*/
  border: 5px solid #9DC41B;
}
.green .progress, .green100 .progress {
  box-shadow: 0 0 30px #9DC41B;
  /*box-shadow: 0 0 80px 5px #276123;*/
}
.green .progress,
.green100 .progress,
.red .progress,
.orange .progress {
  transition: all 1s ease;
}
.green .progress .inner,
.green100 .progress .inner,
.red .progress .inner,
.orange .progress .inner {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  border-radius: 50%;
}
.green .progress .inner,
.green100 .progress .inner,
.red .progress .inner,
.orange .progress .inner {
  width: 240px;
  height: 240px;
}
.green .progress .inner,
.green100 .progress .inner,
.red .progress .inner,
.orange .progress .inner {
  /*border: 5px solid #1a1a1a;*/
  border: 5px solid #fff;
}
.green .progress .inner,
.green100 .progress .inner,
.red .progress .inner,
.orange .progress .inner {
  transition: all 1s ease;
}
.green .progress .inner .water,
.green100 .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
  position: absolute;
  z-index: 1;
  width: 200%;
  height: 200%;
  left: -50%;
  border-radius: 40%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: spin;
  animation-name: spin;
}
.green .progress .inner .water,
.green100 .progress .inner .water {

  top: 25%;
}
.green .progress .inner .water,
.green100 .progress .inner .water {
  background: rgba(167,209,12,0.5);
}
.green .progress .inner .water,
.green100 .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
  transition: all 1s ease;
}
.green .progress .inner .water,
.green100 .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
.green .progress .inner .water,
.green100 .progress .inner .water {
  box-shadow: 0 0 20px #9DC41B;
}
.green .progress .inner .glare,
.green100 .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
  position: absolute;
  top: -120%;
  left: -120%;
  z-index: 5;
  width: 200%;
  height: 200%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 50%;
}
.green .progress .inner .glare,
.green100 .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
  background-color: rgba(255,255,255,0.15);
}
.green .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
  transition: all 1s ease;
}
.green .progress .inner .percent,
.green100 .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: 'robotocondbold';
  text-align: center;
  z-index: 2;
}

.green .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
  line-height: 240px;
  /*font-size: 92.3076923076923px;*/
  font-size: 6.2rem;
}
.green100 .progress .inner .percent {
  line-height: 240px;
  /*font-size: 92.3076923076923px;*/
  font-size: 5rem;
}
.green .progress .inner .percent,
.green100 .progress .inner .percent {
  color: #6A8513;
}
.green .progress .inner .percent,
.green100 .progress .inner .percent {
  text-shadow: 0 0 10px #6A8513;
}
.green .progress .inner .percent,
.green100 .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
  transition: all 1s ease;
}
.red {
  margin: 15px;
}
.red .progress {
  border: 5px solid #ed3b3b;
}
.red .progress {
  box-shadow: 0 0 20px #AB2E07;
}
.red .progress .inner .water {
  top: 75%;
}
.red .progress .inner .water {
  background: rgba(237,59,59,0.5);
}
.red .progress .inner .water {
  box-shadow: 0 0 20px #9b0e0e;
}
.red .progress .inner .percent {
  color: #a30f0f;
}
.red .progress .inner .percent {
  text-shadow: 0 0 10px #AB2E07;
}
.orange {
  margin: 15px;
}
.orange .progress {
  border: 5px solid #f07c3e;
}
.orange .progress {
  box-shadow: 0 0 20px #E68E35;
}
.orange .progress .inner .water {
  top: 50%;
}
.orange .progress .inner .water {
  background: rgba(240,124,62,0.5);
}
.orange .progress .inner .water {
  box-shadow: 0 0 20px #F6B900;
}
.orange .progress .inner .percent {
  color: #a8430d;
}
.orange .progress .inner .percent {
  text-shadow: 0 0 10px #E68E35;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.explain {
    padding-top: 163px;
    font-size: 0.9rem;
}
/* Percentage End*/

/*Arrow Animation Start*/
.pfeil {
  position: absolute;
  width: 6.87rem;
  height: 11.9rem;
  opacity: 0;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-animation: move-pfeil 4s ease-out infinite;
          animation: move-pfeil 4s ease-out infinite;
}
.pfeil:first-child {
  -webkit-animation: move-pfeil 4s ease-out 1.0s infinite;
          animation: move-pfeil 4s ease-out 1.0s infinite;
}

.pfeil:nth-child(2) {
  -webkit-animation: move-pfeil 4s ease-out 2.5s infinite;
          animation: move-pfeil 4s ease-out 2.5s infinite;
}
@-webkit-keyframes move-pfeil {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    -webkit-transform: translateX(3.62rem);
            transform: translateX(3.62rem);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(11.6rem) scale(0.5);
            transform: translateX(11.6rem) scale(0.5);
  }
}
@keyframes move-pfeil {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    -webkit-transform: translateX(3.62rem);
            transform: translateX(3.62rem);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(11.6rem) scale(0.5);
            transform: translateX(11.6rem) scale(0.5);
  }
}
.pfeildown {
  position: absolute;
  width: 3rem;
  height: 2rem;
  /*opacity: 0;*/
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-animation: move-pfeildown 2s ease-out infinite;
          animation: move-pfeildown 2s ease-out infinite;
}
.pfeildown:first-child {
  -webkit-animation: move-pfeildown 2s ease-out 0.5s infinite;
          animation: move-pfeildown 2s ease-out 0.5s infinite;
}

.pfeildown:nth-child(2) {
  -webkit-animation: move-pfeildown 2s ease-out 1s infinite;
          animation: move-pfeildown 2s ease-out 1s infinite;
}
@-webkit-keyframes move-pfeildown {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2rem) scale(0.5);
            transform: translateY(2rem) scale(0.5);
  }
}
@keyframes move-pfeildown {
    25% {
        opacity: 1;
    }

    33.3% {
        opacity: 1;
        -webkit-transform: translateY(1.2rem);
        transform: translateY(1.2rem);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(4.0rem) scale(0.5);
        transform: translateY(4.0rem) scale(0.5);
    }
}
.pfeilup {
  position: absolute;
  margin-top: 20px;
  width: 3rem;
  height: 2rem;
  /*opacity: 0;*/
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-animation: move-pfeilup 2s ease-out infinite;
          animation: move-pfeilup 2s ease-out infinite;
}
.pfeilup:first-child {
  -webkit-animation: move-pfeilup 2s ease-out 0.5s infinite;
          animation: move-pfeilup 2s ease-out 0.5s infinite;
}

.pfeilup:nth-child(2) {
  -webkit-animation: move-pfeilup 2s ease-out 1s infinite;
          animation: move-pfeilup 2s ease-out 1s infinite;
}
@-webkit-keyframes move-pfeilup {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    -webkit-transform: translateY(-3rem);
            transform: translateY(-3rem);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2rem) scale(0.5);
            transform: translateY(-2rem) scale(0.5);
  }
}
@keyframes move-pfeilup {
    25% {
        opacity: 1;
    }

    33.3% {
        opacity: 1;
        -webkit-transform: translateY(-1.2rem);
        transform: translateY(-1.2rem);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-4.0rem) scale(0.5);
        transform: translateY(-4.0rem) scale(0.5);
    }
}
/*Arrow Animation End*/

/*Diagramm Start*/
#canvas2, #canvas1 {
    background-color: rgba(255,255,255,0.5);
    padding: 12px;
}
.cwrapper {
    border: 1px solid rgba(255,255,255,0.5);
    padding: 12px;
}
.btnDataDays {
    background: #009DDA;
    background-image: -webkit-linear-gradient(top, #60AAE2, #5799CC );
    background-image: -moz-linear-gradient(top, #60AAE2, #5799CC);
    background-image: -ms-linear-gradient(top, #60AAE2, #5799CC);
    background-image: -o-linear-gradient(top, #60AAE2, #5799CC);
    background-image: linear-gradient(to bottom, #60AAE2, #5799CC);
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    color: #fff;
    font-size: 16px;
    padding: 8px;
    text-decoration: none;
    border: 2px solid #ccc;
    margin: 0px 4px 4px 2px;
    font-family: 'robotocondbold';
}
.btnDataDays:hover {
    background: #a6ca33;
    color: #fff;
}
.btnDataDays:focus {
    background: #a6ca33;
    color: #fff;
}
/*Diagramm End*/
@media screen and (min-width: 962px) {
    .arrarr {
        height: 140px;
    }
    .arrarrup {
        height: 7rem; 
        margin: 0rem 10rem; 
        padding-top: 4rem;
    }
    .arrarrdown {
        height: 7rem; 
        margin: 0.5rem 10rem; 
        /*padding-top: 1rem;*/
    }

    /* Percentage Start */
    .wrapper {
        margin: 50px 0px 0px 50px;
    }

    input[type="text"] {
      background-color: transparent;
      margin-top: 10px;
      border: 0;
      border-bottom: solid 1px #8080ff;
      text-align: center;
      color: #518bf0;
      text-shadow: 0 0 3px #518bf0;
      width: 45px;
      display: inline-block;
    }
    .green .progress,
    .green100 .progress,
    .red .progress,
    .orange .progress {
      width: 200px;
      height: 200px;
    }
	.green .progress .inner,
	.green100 .progress .inner,
	.red .progress .inner,
	.orange .progress .inner {
	  width: 190px;
	  height: 190px;
	}
	.green .progress .inner .percent,
	.red .progress .inner .percent,
	.orange .progress .inner .percent {
	  line-height: 180px;
	  font-size: 5.2rem;
	}
    .green100 .progress .inner .percent {
      line-height: 180px;
      font-size: 4rem;
    }
	.explain {
		padding-top: 133px;
		font-size: 0.8rem;
	}
    /* Percentage End */

    	/*Arrow Animation Start*/
	.pfeil {
	  position: absolute;
	  width: 4.66rem;
	  height: 8.13em;
	  opacity: 0;
	  -webkit-transform: scale(0.3);
			  transform: scale(0.3);
	  -webkit-animation: move-pfeil 4s ease-out infinite;
			  animation: move-pfeil 4s ease-out infinite;
	}
	.pfeil:first-child {
	  -webkit-animation: move-pfeil 4s ease-out 1.0s infinite;
			  animation: move-pfeil 4s ease-out 1.0s infinite;
	}

	.pfeil:nth-child(2) {
	  -webkit-animation: move-pfeil 4s ease-out 2.5s infinite;
			  animation: move-pfeil 4s ease-out 2.5s infinite;
	}
	@-webkit-keyframes move-pfeil {
	  25% {
		opacity: 1;
	  }
	  33.3% {
		opacity: 1;
		-webkit-transform: translateX(5.43rem);
				transform: translateX(5.43rem);
	  }
	  100% {
		opacity: 0;
		-webkit-transform: translateX(7.9rem) scale(0.5);
				transform: translateX(7.8rem) scale(0.5);
	  }
	}
	@keyframes move-pfeil {
	  25% {
		opacity: 1;
	  }
	  33.3% {
		opacity: 1;
		-webkit-transform: translateX(3.62rem);
				transform: translateX(3.62rem);
	  }
	  100% {
		opacity: 0;
		-webkit-transform: translateX(7.9rem) scale(0.5);
				transform: translateX(7.9rem) scale(0.5);
	  }
	}

	/*Arrow Animation End*/
}
@media only screen and (min-width: 1262px ) {
    .arrarr {
        height: 140px;
    }
    .arrarrup {
        height: 7rem; 
        margin: 0rem 10rem; 
        padding-top: 4rem;
    }
    .arrarrdown {
        height: 6rem; 
        margin: 0rem auto; 
    }

    /* Percentage Start */
    .wrapper {
        margin-left: 50px;
    }

    input[type="text"] {
      background-color: transparent;
      margin-top: 10px;
      border: 0;
      border-bottom: solid 1px #8080ff;
      text-align: center;
      color: #518bf0;
      text-shadow: 0 0 3px #518bf0;
      width: 45px;
      display: inline-block;
    }
    .green .progress,
    .green100 .progress,
    .red .progress,
    .orange .progress {
      width: 200px;
      height: 200px;
    }
	.green .progress .inner,
	.green100 .progress .inner,
	.red .progress .inner,
	.orange .progress .inner {
	  width: 190px;
	  height: 190px;
	}
	.green .progress .inner .percent,
	.red .progress .inner .percent,
	.orange .progress .inner .percent {
	  line-height: 180px;
	  font-size: 5rem;
	}
    .green100 .progress .inner .percent {
      line-height: 180px;
      font-size: 4rem;
    }
	.explain {
		padding-top: 133px;
		font-size: 0.8rem;
	}
    /* Percentage End */

    	/*Arrow Animation Start*/
	.pfeil {
	  position: absolute;
	  width: 4.66rem;
	  height: 8.13em;
	  opacity: 0;
	  -webkit-transform: scale(0.3);
			  transform: scale(0.3);
	  -webkit-animation: move-pfeil 4s ease-out infinite;
			  animation: move-pfeil 4s ease-out infinite;
	}
	.pfeil:first-child {
	  -webkit-animation: move-pfeil 4s ease-out 1.0s infinite;
			  animation: move-pfeil 4s ease-out 1.0s infinite;
	}

	.pfeil:nth-child(2) {
	  -webkit-animation: move-pfeil 4s ease-out 2.5s infinite;
			  animation: move-pfeil 4s ease-out 2.5s infinite;
	}
	@-webkit-keyframes move-pfeil {
	  25% {
		opacity: 1;
	  }
	  33.3% {
		opacity: 1;
		-webkit-transform: translateX(5.43rem);
				transform: translateX(5.43rem);
	  }
	  100% {
		opacity: 0;
		-webkit-transform: translateX(7.9rem) scale(0.5);
				transform: translateX(7.8rem) scale(0.5);
	  }
	}
	@keyframes move-pfeil {
	  25% {
		opacity: 1;
	  }
	  33.3% {
		opacity: 1;
		-webkit-transform: translateX(3.62rem);
				transform: translateX(3.62rem);
	  }
	  100% {
		opacity: 0;
		-webkit-transform: translateX(7.9rem) scale(0.5);
				transform: translateX(7.9rem) scale(0.5);
	  }
	}

	/*Arrow Animation End*/
}
@media only screen and (min-width: 1400px ) {
    .arrarr {
        height: 200px;
    }
    .arrarrup {
        height: 10rem; 
        margin: 0rem 11.5rem; 
        padding-top: 5rem;
    }
    .arrarrdown {
        height: 6rem; 
        /*margin: 3rem 10rem;*/ 
        margin: -2rem 0rem 0rem 14em;
        padding-top: 1rem;
    }
    #wf {
        margin-top: 4em;
    }
    .bb1,.bb2,.bb3 {
        height: 30%;
    }
    .bc1,.bc2,.bc3,.bc4 {
        height: 23%;
    }
    /* Percentage Start */
    input[type="text"] {
      background-color: transparent;
      margin-top: 30px;
      border: 0;
      border-bottom: solid 1px #8080ff;
      text-align: center;
      color: #518bf0;
      text-shadow: 0 0 3px #518bf0;
      width: 45px;
      display: inline-block;
    }
    input:focus {
      outline: 0;
      border-bottom: dashed 1px #ff8080;
    }
    input::-moz-selection {
      color: #1a1a1a;
      background-color: #c6e4ee;
    }
    input::selection {
      color: #1a1a1a;
      background-color: #c6e4ee;
    }
    ::-webkit-input-placeholder {
      color: #7aa6f3;
      text-shadow: 0 0 3px #7aa6f3;
    }
    :-moz-placeholder {
      color: #7aa6f3;
      text-shadow: 0 0 3px #7aa6f3;
    }
    ::-moz-placeholder {
      color: #7aa6f3;
      text-shadow: 0 0 3px #7aa6f3;
    }
    :-ms-input-placeholder {
      color: #7aa6f3;
      text-shadow: 0 0 3px #7aa6f3;
    }
    .wrapper {
      display: -ms-flexbox;
      display: box;
      display: flex;
      -o-box-align: center;
      align-items: center;
      -o-box-pack: center;
      justify-content: center;
      -o-box-orient: vertical;
      flex-direction: column;
      margin: 0;
      /*height: 60%;*/
    }
    .green, .green100 {
      margin: 15px;
    }
    .green .progress,
    .green100 .progress,
    .red .progress,
    .orange .progress {
      position: relative;
      border-radius: 50%;
    }
    .green .progress,
    .green100 .progress,
    .red .progress,
    .orange .progress {
      width: 250px;
      height: 250px;
    }
    .green .progress, .green100 .progress {
      /*border: 5px solid #A7D11D;*/
      border: 5px solid #9DC41B;
    }
    .green .progress, .green100 .progress {
      box-shadow: 0 0 30px #9DC41B;
      /*box-shadow: 0 0 80px 5px #276123;*/
    }
    .green .progress,
    .green100 .progress,
    .red .progress,
    .orange .progress {
      transition: all 1s ease;
    }
    .green .progress .inner,
    .green100 .progress .inner,
    .red .progress .inner,
    .orange .progress .inner {
      position: absolute;
      overflow: hidden;
      z-index: 2;
      border-radius: 50%;
    }
    .green .progress .inner,
    .green100 .progress .inner,
    .red .progress .inner,
    .orange .progress .inner {
      width: 240px;
      height: 240px;
    }
    .green .progress .inner,
    .green100 .progress .inner,
    .red .progress .inner,
    .orange .progress .inner {
      /*border: 5px solid #1a1a1a;*/
      border: 5px solid #fff;
    }
    .green .progress .inner,
    .green100 .progress .inner,
    .red .progress .inner,
    .orange .progress .inner {
      transition: all 1s ease;
    }
    .green .progress .inner .water,
    .green100 .progress .inner .water,
    .red .progress .inner .water,
    .orange .progress .inner .water {
      position: absolute;
      z-index: 1;
      width: 200%;
      height: 200%;
      left: -50%;
      border-radius: 40%;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-name: spin;
      animation-name: spin;
    }
    .green .progress .inner .water,
    .green100 .progress .inner .water {

      top: 25%;
    }
    .green .progress .inner .water,
    .green100 .progress .inner .water {
      background: rgba(167,209,12,0.5);
    }
    .green .progress .inner .water,
    .green100 .progress .inner .water,
    .red .progress .inner .water,
    .orange .progress .inner .water {
      transition: all 1s ease;
    }
    .green .progress .inner .water,
    .green100 .progress .inner .water,
    .red .progress .inner .water,
    .orange .progress .inner .water {
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
    }
    .green .progress .inner .water,
    .green100 .progress .inner .water {
      box-shadow: 0 0 20px #9DC41B;
    }
    .green .progress .inner .glare,
    .green100 .progress .inner .glare,
    .red .progress .inner .glare,
    .orange .progress .inner .glare {
      position: absolute;
      top: -120%;
      left: -120%;
      z-index: 5;
      width: 200%;
      height: 200%;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      border-radius: 50%;
    }
    .green .progress .inner .glare,
    .green100 .progress .inner .glare,
    .red .progress .inner .glare,
    .orange .progress .inner .glare {
      background-color: rgba(255,255,255,0.15);
    }
    .green .progress .inner .glare,
    .red .progress .inner .glare,
    .orange .progress .inner .glare {
      transition: all 1s ease;
    }
    .green .progress .inner .percent,
    .green100 .progress .inner .percent,
    .red .progress .inner .percent,
    .orange .progress .inner .percent {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-family: 'robotocondbold';
      text-align: center;
    }

    .green .progress .inner .percent,
    .red .progress .inner .percent,
    .orange .progress .inner .percent {
      line-height: 240px;
      /*font-size: 92.3076923076923px;*/
      font-size: 6.2rem;
    }
    .green100 .progress .inner .percent {
      line-height: 240px;
      /*font-size: 92.3076923076923px;*/
      font-size: 5rem;
    }
    .green .progress .inner .percent,
    .green100 .progress .inner .percent {
      color: #6A8513;
    }
    .green .progress .inner .percent,
    .green100 .progress .inner .percent {
      text-shadow: 0 0 10px #6A8513;
    }
    .green .progress .inner .percent,
    .green100 .progress .inner .percent,
    .red .progress .inner .percent,
    .orange .progress .inner .percent {
      transition: all 1s ease;
    }
    .red {
      margin: 15px;
    }
    .red .progress {
      border: 5px solid #ed3b3b;
    }
    .red .progress {
      box-shadow: 0 0 20px #AB2E07;
    }
    .red .progress .inner .water {
      top: 75%;
    }
    .red .progress .inner .water {
      background: rgba(237,59,59,0.5);
    }
    .red .progress .inner .water {
      box-shadow: 0 0 20px #9b0e0e;
    }
    .red .progress .inner .percent {
      color: #a30f0f;
    }
    .red .progress .inner .percent {
      text-shadow: 0 0 10px #AB2E07;
    }
    .orange {
      margin: 15px;
    }
    .orange .progress {
      border: 5px solid #f07c3e;
    }
    .orange .progress {
      box-shadow: 0 0 20px #E68E35;
    }
    .orange .progress .inner .water {
      top: 50%;
    }
    .orange .progress .inner .water {
      background: rgba(240,124,62,0.5);
    }
    .orange .progress .inner .water {
      box-shadow: 0 0 20px #F6B900;
    }
    .orange .progress .inner .percent {
      color: #a8430d;
    }
    .orange .progress .inner .percent {
      text-shadow: 0 0 10px #E68E35;
    }
    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes spin {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    .explain {
        padding-top: 163px;
        font-size: 0.9rem;
    }
    /* Percentage End*/

    /*Arrow Animation Start*/
    .pfeil {
      position: absolute;
      width: 6.87rem;
      height: 11.9rem;
      opacity: 0;
      -webkit-transform: scale(0.3);
              transform: scale(0.3);
      -webkit-animation: move-pfeil 4s ease-out infinite;
              animation: move-pfeil 4s ease-out infinite;
    }
    .pfeil:first-child {
      -webkit-animation: move-pfeil 4s ease-out 1.0s infinite;
              animation: move-pfeil 4s ease-out 1.0s infinite;
    }

    .pfeil:nth-child(2) {
      -webkit-animation: move-pfeil 4s ease-out 2.5s infinite;
              animation: move-pfeil 4s ease-out 2.5s infinite;
    }
    @-webkit-keyframes move-pfeil {
      25% {
        opacity: 1;
      }
      33.3% {
        opacity: 1;
        -webkit-transform: translateX(3.62rem);
                transform: translateX(3.62rem);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateX(11.6rem) scale(0.5);
                transform: translateX(11.6rem) scale(0.5);
      }
    }
    @keyframes move-pfeil {
      25% {
        opacity: 1;
      }
      33.3% {
        opacity: 1;
        -webkit-transform: translateX(3.62rem);
                transform: translateX(3.62rem);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateX(11.6rem) scale(0.5);
                transform: translateX(11.6rem) scale(0.5);
      }
    }
    .pfeildown {
      position: absolute;
      width: 3rem;
      height: 2rem;
      /*opacity: 0;*/
      -webkit-transform: scale(0.3);
              transform: scale(0.3);
      -webkit-animation: move-pfeildown 2s ease-out infinite;
              animation: move-pfeildown 2s ease-out infinite;
    }
    .pfeildown:first-child {
      -webkit-animation: move-pfeildown 2s ease-out 0.5s infinite;
              animation: move-pfeildown 2s ease-out 0.5s infinite;
    }

    .pfeildown:nth-child(2) {
      -webkit-animation: move-pfeildown 2s ease-out 1s infinite;
              animation: move-pfeildown 2s ease-out 1s infinite;
    }
    @-webkit-keyframes move-pfeildown {
      25% {
        opacity: 1;
      }
      33.3% {
        opacity: 1;
        -webkit-transform: translateY(3rem);
                transform: translateY(3rem);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateY(2rem) scale(0.5);
                transform: translateY(2rem) scale(0.5);
      }
    }
    @keyframes move-pfeildown {
        25% {
            opacity: 1;
        }

        33.3% {
            opacity: 1;
            -webkit-transform: translateY(1.2rem);
            transform: translateY(1.2rem);
        }

        100% {
            opacity: 0;
            -webkit-transform: translateY(4.0rem) scale(0.5);
            transform: translateY(4.0rem) scale(0.5);
        }
    }
    .pfeilup {
      position: absolute;
      width: 3rem;
      height: 2rem;
      /*opacity: 0;*/
      -webkit-transform: scale(0.3);
              transform: scale(0.3);
      -webkit-animation: move-pfeilup 2s ease-out infinite;
              animation: move-pfeilup 2s ease-out infinite;
    }
    .pfeilup:first-child {
      -webkit-animation: move-pfeilup 2s ease-out 0.5s infinite;
              animation: move-pfeilup 2s ease-out 0.5s infinite;
    }

    .pfeilup:nth-child(2) {
      -webkit-animation: move-pfeilup 2s ease-out 1s infinite;
              animation: move-pfeilup 2s ease-out 1s infinite;
    }
    @-webkit-keyframes move-pfeilup {
      25% {
        opacity: 1;
      }
      33.3% {
        opacity: 1;
        -webkit-transform: translateY(-3rem);
                transform: translateY(-3rem);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateY(-2rem) scale(0.5);
                transform: translateY(-2rem) scale(0.5);
      }
    }
    @keyframes move-pfeilup {
        25% {
            opacity: 1;
        }

        33.3% {
            opacity: 1;
            -webkit-transform: translateY(-1.2rem);
            transform: translateY(-1.2rem);
        }

        100% {
            opacity: 0;
            -webkit-transform: translateY(-4.0rem) scale(0.5);
            transform: translateY(-4.0rem) scale(0.5);
        }
    }
    /*Arrow Animation End*/
}
@media screen and (max-width: 961px) {
    .arrarr, .arrarrup, .arrarrdown {
        display: none;
    }
    .arrarrmobile {
        display: block;
        height: 40px;
        margin: 0px auto;
        width: 30px;
    }
    .explain {
        text-align: center;
        padding-top: 86px;
        font-size: 0.7rem;
    }
    /* Percentage Start */
    .wrapper {
        margin: 0px auto;
    }
    .green .progress,
    .green100 .progress,
    .red .progress,
    .orange .progress {
        width: 180px;
        height: 180px;
    }
	.green .progress .inner,
	.green100 .progress .inner,
	.red .progress .inner,
	.orange .progress .inner {
	    width: 170px;
	    height: 170px;
	}
	.green .progress .inner .percent,
	.red .progress .inner .percent,
	.orange .progress .inner .percent {
	    line-height: 160px;
	    font-size: 4.5rem;
	}
    /* Percentage End */
    .pfeildownm {
        position: absolute;
        width: 1.5rem;
        height: 1rem;
        /*opacity: 0;*/
        -webkit-transform: scale(0.3);
                transform: scale(0.3);
        -webkit-animation: move-pfeildownm 2s ease-out infinite;
                animation: move-pfeildownm 2s ease-out infinite;
    }
    .pfeildownm:first-child {
        -webkit-animation: move-pfeildownm 2s ease-out 0.5s infinite;
                animation: move-pfeildownm 2s ease-out 0.5s infinite;
    }

    .pfeildownm:nth-child(2) {
        -webkit-animation: move-pfeildownm 2s ease-out 1s infinite;
                animation: move-pfeildownm 2s ease-out 1s infinite;
    }
    @-webkit-keyframes move-pfeildownm {
        25% {
        opacity: 1;
        }
        33.3% {
        opacity: 1;
        -webkit-transform: translateY(1.5rem);
                transform: translateY(1.5rem);
        }
        100% {
        opacity: 0;
        -webkit-transform: translateY(1rem) scale(0.5);
                transform: translateY(1rem) scale(0.5);
        }
    }
    @keyframes move-pfeildownm {
        25% {
            opacity: 1;
        }

        33.3% {
            opacity: 1;
            -webkit-transform: translateY(0.6rem);
            transform: translateY(0.6rem);
        }

        100% {
            opacity: 0;
            -webkit-transform: translateY(2.0rem) scale(0.5);
            transform: translateY(2.0rem) scale(0.5);
        }
    }
    .pfeilupm {
      position: absolute;
	  margin-top: 20px;
	  width: 1.5rem;
	  height: 1rem;
	  /*opacity: 0;*/
	  -webkit-transform: scale(0.3);
			  transform: scale(0.3);
	  -webkit-animation: move-pfeilupm 2s ease-out infinite;
			  animation: move-pfeilupm 2s ease-out infinite;
	}
	.pfeilupm:first-child {
	  -webkit-animation: move-pfeilupm 2s ease-out 0.5s infinite;
			  animation: move-pfeilupm 2s ease-out 0.5s infinite;
	}

	.pfeilupm:nth-child(2) {
	  -webkit-animation: move-pfeilupm 2s ease-out 1s infinite;
			  animation: move-pfeilupm 2s ease-out 1s infinite;
	}
	@-webkit-keyframes move-pfeilupm {
	  25% {
		opacity: 1;
	  }
	  33.3% {
		opacity: 1;
		-webkit-transform: translateY(-1.5rem);
				transform: translateY(-1.5rem);
	  }
	  100% {
		opacity: 0;
		-webkit-transform: translateY(-1rem) scale(0.5);
				transform: translateY(-1rem) scale(0.5);
	  }
	}
	@keyframes move-pfeilupm {
		25% {
			opacity: 1;
		}

		33.3% {
			opacity: 1;
			-webkit-transform: translateY(-0.6rem);
			transform: translateY(-0.6rem);
		}

		100% {
			opacity: 0;
			-webkit-transform: translateY(-2.0rem) scale(0.5);
			transform: translateY(-2.0rem) scale(0.5);
		}
	}
}
@media only screen and (max-width: 599px) {
/* Percentage Start */
    .wrapper {
        margin: 0px auto;
    }
    .green .progress,
    .green100 .progress,
    .red .progress,
    .orange .progress {
        width: 150px;
        height: 150px;
    }
	.green .progress .inner,
	.green100 .progress .inner,
	.red .progress .inner,
	.orange .progress .inner {
	    width: 140px;
	    height: 140px;
	}
	.green .progress .inner .percent,
	.red .progress .inner .percent,
	.orange .progress .inner .percent {
	    line-height: 125px;
	    font-size: 2.2rem;
	}
    .green100 .progress .inner .percent {
      line-height: 125px;
      font-size: 2.2rem;
    }
    /* Percentage End */
    .pfeildownm {
        position: absolute;
        width: 1.5rem;
        height: 1rem;
        /*opacity: 0;*/
        -webkit-transform: scale(0.3);
                transform: scale(0.3);
        -webkit-animation: move-pfeildownm 2s ease-out infinite;
                animation: move-pfeildownm 2s ease-out infinite;
    }
    .pfeildownm:first-child {
        -webkit-animation: move-pfeildownm 2s ease-out 0.5s infinite;
                animation: move-pfeildownm 2s ease-out 0.5s infinite;
    }

    .pfeildownm:nth-child(2) {
        -webkit-animation: move-pfeildownm 2s ease-out 1s infinite;
                animation: move-pfeildownm 2s ease-out 1s infinite;
    }
    @-webkit-keyframes move-pfeildownm {
        25% {
        opacity: 1;
        }
        33.3% {
        opacity: 1;
        -webkit-transform: translateY(1.5rem);
                transform: translateY(1.5rem);
        }
        100% {
        opacity: 0;
        -webkit-transform: translateY(1rem) scale(0.5);
                transform: translateY(1rem) scale(0.5);
        }
    }
    @keyframes move-pfeildownm {
        25% {
            opacity: 1;
        }

        33.3% {
            opacity: 1;
            -webkit-transform: translateY(0.6rem);
            transform: translateY(0.6rem);
        }

        100% {
            opacity: 0;
            -webkit-transform: translateY(2.0rem) scale(0.5);
            transform: translateY(2.0rem) scale(0.5);
        }
    }
    .pfeilupm {
      position: absolute;
	  margin-top: 20px;
	  width: 1.5rem;
	  height: 1rem;
	  /*opacity: 0;*/
	  -webkit-transform: scale(0.3);
			  transform: scale(0.3);
	  -webkit-animation: move-pfeilupm 2s ease-out infinite;
			  animation: move-pfeilupm 2s ease-out infinite;
	}
	.pfeilupm:first-child {
	  -webkit-animation: move-pfeilupm 2s ease-out 0.5s infinite;
			  animation: move-pfeilupm 2s ease-out 0.5s infinite;
	}

	.pfeilupm:nth-child(2) {
	  -webkit-animation: move-pfeilupm 2s ease-out 1s infinite;
			  animation: move-pfeilupm 2s ease-out 1s infinite;
	}
	@-webkit-keyframes move-pfeilupm {
	  25% {
		opacity: 1;
	  }
	  33.3% {
		opacity: 1;
		-webkit-transform: translateY(-1.5rem);
				transform: translateY(-1.5rem);
	  }
	  100% {
		opacity: 0;
		-webkit-transform: translateY(-1rem) scale(0.5);
				transform: translateY(-1rem) scale(0.5);
	  }
	}
	@keyframes move-pfeilupm {
		25% {
			opacity: 1;
		}

		33.3% {
			opacity: 1;
			-webkit-transform: translateY(-0.6rem);
			transform: translateY(-0.6rem);
		}

		100% {
			opacity: 0;
			-webkit-transform: translateY(-2.0rem) scale(0.5);
			transform: translateY(-2.0rem) scale(0.5);
		}
	}
}