:root {
  /* mobile */
  --drop_widthm: 65px;
  --droptext_margin0m: 0px 0px 0px 120px;
  --droptext_margin1m: -74px 0px 0px 190px;
  --droptext_margin2m: -116px 0px 0px 120px;
  --droptext_margin3m: -177px 0px 0px 190px;
  --droptext_margin4m: -26px 0px 0px 120px;
  --drop_margin0m: -40px 0px 0px 30px;
  --drop_margin1m: -100px 0px 0px 100px;
  --drop_margin2m: -160px 0px 0px 30px;
  --drop_margin3m: -220px 0px 0px 100px;
  --drop_margin4m: -70px 0px 0px 30px;
  /* tablet   */
  --drop_width: 65px;
  --droptext_margin0: 84px 0px 0px 497px;
  --droptext_margin1: 81px 0px 0px 183px;
  --droptext_margin2: 33px 0px 0px 561px;
  --droptext_margin3: -19px 0px 0px 252px;
  --droptext_margin4: -553px 0px 0px 112px;
  --drop_margin0: 41px 0px 0px 423px;
  --drop_margin1: 41px 0px 0px 104px;
  --drop_margin2: 0 0px 0px 487px;
  --drop_margin3: -54px 0px 0px 177px;
  --drop_margin4: -597px 0px 0px 40px;
  --drop_animation0: slide-bottom0 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
  --drop_animation1: slide-bottom1 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
  --drop_animation2: slide-bottom2 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
  --drop_animation3: slide-bottom3 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
  --drop_animation4: slide-bottom4 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
  --drop_transl0: translateY(0px);
  --drop_transl1: translateY(100px);
  --drop_transl2: translateY(300px);
  --drop_transl3: translateY(500px);
  --drop_transl4: translateY(700px);
  --drop_transl5: translateY(680px);
}
.watername0 {
  position: absolute;
  margin: var(--droptext_margin0m);
}
.watername1 {
  position: absolute;
  margin: var(--droptext_margin1m);
}
.watername2 {
  position: absolute;
  margin: var(--droptext_margin2m);
}
.watername3 {
  position: absolute;
  margin: var(--droptext_margin3m);
}
.watername4 {
  position: absolute;
  margin: var(--droptext_margin4m);
}

.waterdrop0 {
  position: absolute;
  margin: var(--drop_margin0m);
  width: var(--drop_widthm);
}
.waterdrop1 {
  position: absolute;
  margin: var(--drop_margin1m);
  width: var(--drop_widthm);
}

.waterdrop2 {
  position: absolute;
  margin: var(--drop_margin2m);
  width: var(--drop_widthm);
}

.waterdrop3 {
  position: absolute;
  margin: var(--drop_margin3m);
  width: var(--drop_widthm);
}
.waterdrop4 {
  position: absolute;
  margin: var(--drop_margin4m);
  width: var(--drop_widthm);
}

/* /////////////////////// */
/* fallender tropfen */
/* /////////////////////// */
/* wt0 */
.slide-bottom0 {
	-webkit-animation: var(--drop_animation0);
	        animation: var(--drop_animation0);
}
@-webkit-keyframes slide-bottom0 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl1);
            transform: var(--drop_transl1);
  }
}
@keyframes slide-bottom0 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl1);
            transform: var(--drop_transl1);
  }
}
/* wt1*/
.slide-bottom1 {
	-webkit-animation: var(--drop_animation1);
	        animation: var(--drop_animation1);
}2@-webkit-keyframes slide-bottom1 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);;
  }
  100% {
    -webkit-transform: var(--drop_transl2);
            transform: var(--drop_transl2);
  }
}
@keyframes slide-bottom1 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl2);
            transform: var(--drop_transl2);
  }
}
/* wt2 */
.slide-bottom2 {
	-webkit-animation: var(--drop_animation2);
	        animation: var(--drop_animation2);
}
@-webkit-keyframes slide-bottom2 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl3);
            transform: var(--drop_transl3);
  }
}
@keyframes slide-bottom2 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl3);
            transform: var(--drop_transl3);
  }
}
/* wt3 */
.slide-bottom3 {
	-webkit-animation: var(--drop_animation3);
	        animation: var(--drop_animation3);
}
@-webkit-keyframes slide-bottom3 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl4);
            transform: var(--drop_transl4);
  }
}
@keyframes slide-bottom3 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl4);
            transform: var(--drop_transl4);
  }
}
/* wt4 */
.slide-bottom4 {
	-webkit-animation: var(--drop_animation4);
	        animation: var(--drop_animation4);
}
@-webkit-keyframes slide-bottom4 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl5);
            transform: var(--drop_transl5);
  }
}
@keyframes slide-bottom4 {
  0% {
    -webkit-transform: var(--drop_transl0);
            transform: var(--drop_transl0);
  }
  100% {
    -webkit-transform: var(--drop_transl5);
            transform: var(--drop_transl5);
  }
}
@media only screen and (min-width: 768px) {
  .watername0 {
    position: absolute;
    margin: var(--droptext_margin0);
  }
  .watername1 {
    position: absolute;
    margin: var(--droptext_margin1);
  }
  .watername2 {
    position: absolute;
    margin: var(--droptext_margin2);
  }
  .watername3 {
    position: absolute;
    margin: var(--droptext_margin3);
  }
  .watername4 {
    position: absolute;
    margin: var(--droptext_margin4);
  }

  .waterdrop0 {
    position: absolute;
    margin: var(--drop_margin0);
    width: var(--drop_width);
  }
  .waterdrop1 {
    position: absolute;
    margin: var(--drop_margin1);
    width: var(--drop_width);
  }
  .waterdrop2 {
    position: absolute;
    margin: var(--drop_margin2);
    width: var(--drop_width);
  }
  .waterdrop3 {
    position: absolute;
    margin: var(--drop_margin3);
    width: var(--drop_width);
  }
  .waterdrop4 {
    position: absolute;
    margin: var(--drop_margin4);
    width: var(--drop_width);
  }

  /* /////////////////////// */
  /* fallender tropfen */
  /* /////////////////////// */
  /* wt0 */
  .slide-bottom0 {
  	-webkit-animation: var(--drop_animation0);
  	        animation: var(--drop_animation0);
  }
  @-webkit-keyframes slide-bottom0 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl1);
              transform: var(--drop_transl1);
    }
  }
  @keyframes slide-bottom0 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl1);
              transform: var(--drop_transl1);
    }
  }
  /* wt1*/
  .slide-bottom1 {
  	-webkit-animation: var(--drop_animation1);
  	        animation: var(--drop_animation1);
  }2@-webkit-keyframes slide-bottom1 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);;
    }
    100% {
      -webkit-transform: var(--drop_transl2);
              transform: var(--drop_transl2);
    }
  }
  @keyframes slide-bottom1 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl2);
              transform: var(--drop_transl2);
    }
  }
  /* wt2 */
  .slide-bottom2 {
  	-webkit-animation: var(--drop_animation2);
  	        animation: var(--drop_animation2);
  }
  @-webkit-keyframes slide-bottom2 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl3);
              transform: var(--drop_transl3);
    }
  }
  @keyframes slide-bottom2 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl3);
              transform: var(--drop_transl3);
    }
  }
  /* wt3 */
  .slide-bottom3 {
  	-webkit-animation: var(--drop_animation3);
  	        animation: var(--drop_animation3);
  }
  @-webkit-keyframes slide-bottom3 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl4);
              transform: var(--drop_transl4);
    }
  }
  @keyframes slide-bottom3 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl4);
              transform: var(--drop_transl4);
    }
  }
  /* wt4 */
  .slide-bottom4 {
  	-webkit-animation: var(--drop_animation4);
  	        animation: var(--drop_animation4);
  }
  @-webkit-keyframes slide-bottom4 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl5);
              transform: var(--drop_transl5);
    }
  }
  @keyframes slide-bottom4 {
    0% {
      -webkit-transform: var(--drop_transl0);
              transform: var(--drop_transl0);
    }
    100% {
      -webkit-transform: var(--drop_transl5);
              transform: var(--drop_transl5);
    }
  }
}