section .inner div {
    opacity: 0;
    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-animation-name: Drop;
    animation-name: Drop;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
#rain .inner div {
    position: absolute;
    display: block;
    width: 10px;
    height: 15px;
    background: url("rain.png") no-repeat;
}

#rain .inner div.flake2,
#rain .inner div.flake4,
#rain .inner div.flake6,
#rain .inner div.flake8,
#rain .inner div.flake12,
#rain .inner div.flake14,
#rain .inner div.flake16,
#rain .inner div.flake18 {
    background-size: 3spx 9px !important;
}
.flake1 {
    left: 500px;
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
}

.flake2 {
    left: 520px;
    -webkit-animation-duration: 1.35s;
    animation-duration: 1.35s;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.flake3 {
    left: 540px;
    -webkit-animation-duration: 1.45s;
    animation-duration: 1.45s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.flake4 {
    left: 560px;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.flake5 {
    left: 580px;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.flake6 {
    left: 630px;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.flake7 {
    left: 650px;
    -webkit-animation-duration: 1.35s;
    animation-duration: 1.35s;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.flake8 {
    left: 680px;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.flake11 {
    left: 700px;
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.flake12 {
    left: 720px;
    -webkit-animation-duration: 1.05s;
    animation-duration: 1.05s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.flake13 {
    left: 740px;
    -webkit-animation-duration: 1.65s;
    animation-duration: 1.65s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.flake14 {
    left: 760px;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.flake15 {
    left: 380px;
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.flake16 {
    left: 430px;
    -webkit-animation-duration: 1.15s;
    animation-duration: 1.15s;
    -webkit-animation-delay: 1.35s;
    animation-delay: 1.35s;
}

.flake17 {
    left: 450px;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.flake18 {
    left: 480px;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

@-webkit-keyframes Drop {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    25% {
        -webkit-transform: translateY(137.5px);
        transform: translateY(137.5px);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateY(225px);
        transform: translateY(225px);
        opacity: 1;
    }
    75% {
        -webkit-transform: translateY(312.5px);
        transform: translateY(312.5px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(400px);
        transform: translateY(400px);
        opacity: 0.3;
    }
}

@keyframes Drop {
  0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
  }
  25% {
      -webkit-transform: translateY(137.5px);
      transform: translateY(137.5px);
      opacity: 1;
  }
  50% {
      -webkit-transform: translateY(225px);
      transform: translateY(225px);
      opacity: 1;
  }
  75% {
      -webkit-transform: translateY(312.5px);
      transform: translateY(312.5px);
      opacity: 1;
  }
  100% {
      -webkit-transform: translateY(400px);
      transform: translateY(400px);
      opacity: 0.3;
  }
}


.square3 {
   width: 150%;
   height: 150%;
   background: black;
   position: absolute;top:620px;left:-100px;
}