.river {
    background: linear-gradient(0deg, #0D6CC0 90%, transparent 90%);
    top: 40%;
    width: 100%;
    height: 60%;
    position: absolute;
}

.riverWrapper {
    position: relative;
    z-index: 0;
}

.water {
    position: absolute;
    width: 100vw;
    height: 200px;
    background-repeat: repeat-x;
    animation: wave 60s linear 0s infinite normal;
}

.w1 {
    top: 2px;
    background-image: url('../images/wave1.svg');
}

.w2 {
    top: 52px;
    animation-duration: 40s;
    background-image: url('../images/wave2.svg');
}

.w3 {
    top: 102px;
    animation-duration: 30s;
    background-image: url('../images/wave3.svg');

}

.w4 {
    top: 162px;
    animation-duration: 20s;
    background-image: url('../images/wave4.svg');
}

@keyframes wave {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: 100vw;
    }
}


@media (max-width: 768px) {
    .water {
        background-size: 300vw;
    }
}