/* My raining animation heavily borrows from, with his permission, Alex Bergen's brilliant 
rain cloud animation. His site is alexberg.in  */

#animation {
    position: relative;
    width: 100%;
    height: 100%;
    top: -5em;
    left: 2em;
    z-index: 1;
}

.drops {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    margin-top: 50px;
    margin-left: -20px;
}

.drops div {
    position: absolute;
    width: 6px;
    height: 20px;
    /* border-radius: 80% 0 55% 50% / 55% 0 80% 50%; */
    border-radius: 90% 50% 30% 50% / 90% 50% 80% 50%;
    background-color: rgba(233,234,245,1);
    margin-top: -5px;
    /*margin-left: -5px;*/
}

.drops div:before {
    content: "";
    /* border-bottom: 20px solid rgba(233,234,245,1);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent; */
    position: absolute;
    /* margin-top: -16px; */
}


.drops div:nth-of-type(1){
    margin-left: -100px;
    animation: drip 1s ease-in -0.0s infinite normal none;
	-webkit-animation: drip 1s ease-in -0.0s infinite normal none;
}

.drops div:nth-of-type(2){
    margin-left: 100px;
    animation: drip 1.1s ease-in -0.1s infinite normal none;
	-webkit-animation: drip 1.1s ease-in -0.1s infinite normal none;
}

.drops div:nth-of-type(3){
    margin-left: -75px;
    animation: drip 1s ease-in -0.2s infinite normal none;
	-webkit-animation: drip 1s ease-in -0.2s infinite normal none;
}

.drops div:nth-of-type(4){
    margin-left: 60px;
    animation: drip 1.2s ease-in -0.3s infinite normal none;
	-webkit-animation: drip 1.2s ease-in -0.3s infinite normal none;
}

.drops div:nth-of-type(5){
    margin-left: 30px;
    animation: drip 1s ease-in -0.4s infinite normal none;
	-webkit-animation: drip 1s ease-in -0.4s infinite normal none;
}

.drops div:nth-of-type(6){
    margin-left: -20px;
    animation: drip 1.3s ease-in -0.5s infinite normal none;
	-webkit-animation: drip 1.3s ease-in -0.5s infinite normal none;
}

.drops div:nth-of-type(7){
    margin-left: 10px;
    animation: drip 1s ease-in -0.6s infinite normal none;
	-webkit-animation: drip 1s ease-in -0.6s infinite normal none;
}

.drops div:nth-of-type(8){
    margin-left: -40px;
    animation: drip 1.2s ease-in -0.7s infinite normal none;
	-webkit-animation: drip 1.2s ease-in -0.7s infinite normal none;
}

.drops div:nth-of-type(9){
    margin-left: 50px;
    animation: drip 1s ease-in -0.8s infinite normal none;
	-webkit-animation: drip 1s ease-in -0.8s infinite normal none;
}

.drops div:nth-of-type(10){
    margin-left: -65px;
    animation: drip 1.1s ease-in -0.9s infinite normal none;
	-webkit-animation: drip 1.1s ease-in -0.9s infinite normal none;
}

@keyframes drip {
	100% { -webkit-transform: translate( 0px , 1000px );} 
	0% { -webkit-transform: translate( 0px , 0px );} 
}

@-webkit-keyframes drip {
	100% { -webkit-transform: translate( 0px , 1000px );} 
	0% { -webkit-transform: translate( 0px , 0px );} 
}