.rd-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  transform: rotateY(0);
}
.rd-window {
  background: url('//c1.staticflickr.com/1/748/20187533514_09ca5b0575_m.jpg');
  background-size: cover;
  background-position: 50%;
  width: 100%;
  height: 100%;
  transform: rotateY(0);
  transition: -webkit-filter 600ms;
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
}
.raindrops {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(0);
  transition: -webkit-filter 600ms;
}
.borders {
  position: absolute;
}
@keyframes raindrop-fall {
  0% {
    opacity: 0;
    transform: rotate(180deg) scale(0.2, 0.2) rotateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(180deg) scale(1, 1) rotateY(0);
  }
}
@keyframes raindrop-falling {
  0%,
  15% {
    transform: translateY(0);
  }
  30%,
  45% {
    transform: translate(6vh, -30vh);
    background-position-y: 30%;
  }
  60%,
  70% {
    transform: translate(12vh, -60vh);
    background-position-y: 60%;
  }
  80%,
  89% {
    transform: translate(16vh, -80vh);
    background-position-y: 80%;
  }
  100% {
    transform: translate(20vh, -100vh);
    background-position-y: 100%;
  }
}
.raindrop {
  position: absolute;
  opacity: 0;
  animation: raindrop-fall 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: forwards;
}
.raindrop:before,
.raindrop:after {
  min-width: 5px;
  min-height: 6px;
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
}
.raindrop:before {
  box-shadow: 0.2px -1px 0px 1px rgba(50, 50, 50, 0.6);
  transform: scale(0.95, 1);
}
.raindrop:after {
  background: black;
  background-image: url('//c1.staticflickr.com/1/748/20187533514_09ca5b0575_m.jpg');
  background-size: 5vw 5vh;
  transition: background-size 1s;
  opacity: 0.6;
}
.raindrop:hover:after {
  background-size: 600%;
}
body .raindrop:nth-child(1) {
  left: 58.21367201vw;
  top: 95.90128781vh;
  animation-delay: 6s;
}
body .raindrop:nth-child(1):before,
body .raindrop:nth-child(1):after {
  width: 2vw;
  height: 2.58988529vw;
  max-width: 10px;
  max-height: 12.94942647px;
  background-position: 58.21367201% 95.90128781%;
  animation: raindrop-falling 30s 14s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(2) {
  left: 6.59256084vw;
  top: 32.288986vh;
  animation-delay: 3s;
}
body .raindrop:nth-child(2):before,
body .raindrop:nth-child(2):after {
  width: 0.6vw;
  height: 0.73156641vw;
  max-width: 3px;
  max-height: 3.65783203px;
  background-position: 6.59256084% 32.288986%;
  animation: raindrop-falling 76.66666667s 29.66666667s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(3) {
  left: 36.49323046vw;
  top: 74.5256182vh;
  animation-delay: 12s;
}
body .raindrop:nth-child(3):before,
body .raindrop:nth-child(3):after {
  width: 0.8vw;
  height: 1.01762617vw;
  max-width: 4px;
  max-height: 5.08813084px;
  background-position: 36.49323046% 74.5256182%;
  animation: raindrop-falling 60s 32s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(4) {
  left: 80.13546972vw;
  top: 53.34683807vh;
  animation-delay: 26s;
}
body .raindrop:nth-child(4):before,
body .raindrop:nth-child(4):after {
  width: 1.4vw;
  height: 1.7908615vw;
  max-width: 7px;
  max-height: 8.95430751px;
  background-position: 80.13546972% 53.34683807%;
  animation: raindrop-falling 38.57142857s 37.42857143s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(5) {
  left: 70.91607739vw;
  top: 75.0664542vh;
  animation-delay: 15s;
}
body .raindrop:nth-child(5):before,
body .raindrop:nth-child(5):after {
  width: 1.2vw;
  height: 1.47804101vw;
  max-width: 6px;
  max-height: 7.39020505px;
  background-position: 70.91607739% 75.0664542%;
  animation: raindrop-falling 43.33333333s 28.33333333s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(6) {
  left: 82.73310253vw;
  top: 14.17459801vh;
  animation-delay: 24s;
}
body .raindrop:nth-child(6):before,
body .raindrop:nth-child(6):after {
  width: 1.6vw;
  height: 2.02956695vw;
  max-width: 8px;
  max-height: 10.14783476px;
  background-position: 82.73310253% 14.17459801%;
  animation: raindrop-falling 35s 34s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(7) {
  left: 39.0655014vw;
  top: 78.21408966vh;
  animation-delay: 5s;
}
body .raindrop:nth-child(7):before,
body .raindrop:nth-child(7):after {
  width: 2.4vw;
  height: 2.95719858vw;
  max-width: 12px;
  max-height: 14.78599292px;
  background-position: 39.0655014% 78.21408966%;
  animation: raindrop-falling 26.66666667s 11.66666667s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(8) {
  left: 30.89063223vw;
  top: 61.84676873vh;
  animation-delay: 29s;
}
body .raindrop:nth-child(8):before,
body .raindrop:nth-child(8):after {
  width: 1.6vw;
  height: 2.12879752vw;
  max-width: 8px;
  max-height: 10.64398761px;
  background-position: 30.89063223% 61.84676873%;
  animation: raindrop-falling 35s 39s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(9) {
  left: 84.60017402vw;
  top: 88.94197649vh;
  animation-delay: 24s;
}
body .raindrop:nth-child(9):before,
body .raindrop:nth-child(9):after {
  width: 2vw;
  height: 2.67016539vw;
  max-width: 10px;
  max-height: 13.35082695px;
  background-position: 84.60017402% 88.94197649%;
  animation: raindrop-falling 30s 32s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(10) {
  left: 43.91270765vw;
  top: 7.71021735vh;
  animation-delay: 1s;
}
body .raindrop:nth-child(10):before,
body .raindrop:nth-child(10):after {
  width: 1vw;
  height: 1.21036018vw;
  max-width: 5px;
  max-height: 6.05180088px;
  background-position: 43.91270765% 7.71021735%;
  animation: raindrop-falling 50s 17s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(11) {
  left: 77.3033956vw;
  top: 28.63656931vh;
  animation-delay: 24s;
}
body .raindrop:nth-child(11):before,
body .raindrop:nth-child(11):after {
  width: 2.2vw;
  height: 2.69165925vw;
  max-width: 11px;
  max-height: 13.45829626px;
  background-position: 77.3033956% 28.63656931%;
  animation: raindrop-falling 28.18181818s 31.27272727s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(12) {
  left: 91.14158066vw;
  top: 27.12151274vh;
  animation-delay: 11s;
}
body .raindrop:nth-child(12):before,
body .raindrop:nth-child(12):after {
  width: 1.2vw;
  height: 1.64576265vw;
  max-width: 6px;
  max-height: 8.22881324px;
  background-position: 91.14158066% 27.12151274%;
  animation: raindrop-falling 43.33333333s 24.33333333s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(13) {
  left: 54.06395431vw;
  top: 25.33027613vh;
  animation-delay: 12s;
}
body .raindrop:nth-child(13):before,
body .raindrop:nth-child(13):after {
  width: 2.4vw;
  height: 3.08337907vw;
  max-width: 12px;
  max-height: 15.41689533px;
  background-position: 54.06395431% 25.33027613%;
  animation: raindrop-falling 26.66666667s 18.66666667s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(14) {
  left: 54.37246738vw;
  top: 37.27121018vh;
  animation-delay: 3s;
}
body .raindrop:nth-child(14):before,
body .raindrop:nth-child(14):after {
  width: 0.6vw;
  height: 0.7236341vw;
  max-width: 3px;
  max-height: 3.61817052px;
  background-position: 54.37246738% 37.27121018%;
  animation: raindrop-falling 76.66666667s 29.66666667s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(15) {
  left: 0.70674115vw;
  top: 84.53167395vh;
  animation-delay: 18s;
}
body .raindrop:nth-child(15):before,
body .raindrop:nth-child(15):after {
  width: 1.2vw;
  height: 1.5209083vw;
  max-width: 6px;
  max-height: 7.60454148px;
  background-position: 0.70674115% 84.53167395%;
  animation: raindrop-falling 43.33333333s 31.33333333s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(16) {
  left: 33.78050264vw;
  top: 46.35514896vh;
  animation-delay: 8s;
}
body .raindrop:nth-child(16):before,
body .raindrop:nth-child(16):after {
  width: 0.8vw;
  height: 1.01246363vw;
  max-width: 4px;
  max-height: 5.06231814px;
  background-position: 33.78050264% 46.35514896%;
  animation: raindrop-falling 60s 28s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(17) {
  left: 50.75858974vw;
  top: 56.80399349vh;
  animation-delay: 4s;
}
body .raindrop:nth-child(17):before,
body .raindrop:nth-child(17):after {
  width: 1.6vw;
  height: 2.23523414vw;
  max-width: 8px;
  max-height: 11.17617071px;
  background-position: 50.75858974% 56.80399349%;
  animation: raindrop-falling 35s 14s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(18) {
  left: 71.73276952vw;
  top: 28.29592082vh;
  animation-delay: 22s;
}
body .raindrop:nth-child(18):before,
body .raindrop:nth-child(18):after {
  width: 0.6vw;
  height: 0.83932301vw;
  max-width: 3px;
  max-height: 4.19661503px;
  background-position: 71.73276952% 28.29592082%;
  animation: raindrop-falling 76.66666667s 48.66666667s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(19) {
  left: 32.4749629vw;
  top: 47.44468418vh;
  animation-delay: 3s;
}
body .raindrop:nth-child(19):before,
body .raindrop:nth-child(19):after {
  width: 2.4vw;
  height: 3.20532492vw;
  max-width: 12px;
  max-height: 16.02662458px;
  background-position: 32.4749629% 47.44468418%;
  animation: raindrop-falling 26.66666667s 9.66666667s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
body .raindrop:nth-child(20) {
  left: 1.85058584vw;
  top: 54.0254067vh;
  animation-delay: 4s;
}
body .raindrop:nth-child(20):before,
body .raindrop:nth-child(20):after {
  width: 1vw;
  height: 1.29424192vw;
  max-width: 5px;
  max-height: 6.47120961px;
  background-position: 1.85058584% 54.0254067%;
  animation: raindrop-falling 50s 20s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}