#rain-phone{
   /* background-image: url('../../assets/img/tops/red-cloud-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;*/
    padding: 0px;
    margin: 0px;
} 

#rain-mobile-video {
    width: 100%;
}

/*adding rain img and making opacity 0*/ 
.rain-scope:before { 
    content: ""; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url(../../assets/img/tops/rain-300x300.png); 
    animation: rain 0.4s linear infinite; 
    opacity: 0; 
    z-index: 10;
}

.no-rain-scope {
    z-index: 11;
}

.rain-scope-fade:before{
    animation: stopRain 3s linear 1;
}

/*.rain-scope div {
    background-color: #00000000!important;
}*/
 
@keyframes rain { 
    0% { 
        background-position: 0 0; 
        opacity: 1; 
    } 

    100% { 
        background-position: 8% 80%; 
        opacity: 1; 
    } 
}

@keyframes stopRain {
    to { 
        background-position: 0 0; 
        opacity: 0; 
    } 
}

/* Extra small devices (portrait phones, less than 576px) */
@media (min-width: 576px) {
    #rain-mobile-video {
        width: 94%;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (min-width: 768px) {
    #rain-mobile-video {
        width: 75%;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 992px) {
    #rain-mobile-video {
        width: 50%;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1200px) {}