.waves {
    height: 60px;
    width: 100%;
    margin-top: 0px;
    z-index: 10;
    position: relative;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-color: #000000;
}
.waves svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.waves use {
    animation: move-forever 4s linear infinite;
    fill: rgba(0, 0, 0, 1);
}
.waves .wave1 use {
    fill: rgba(255,255,255, .1);
    animation-delay: -2s;
    animation-duration: 8s;
}
.waves .wave2 use {
    fill: rgba(255, 255, 255, 0.2);
    animation-delay: -2s;
    animation-duration: 4s;
}
.waves .wave3 use {
    fill: #fdeeef;
    animation-delay: -2s;
    animation-duration: 4s;
}
@keyframes move-forever {
    0% { transform: translate(85px, 0%); }
    100% { transform: translate(-90px, 0%); }
}
@media (max-width: 768px) {
    .waves { height: 30px; margin-top: 0px; }
}
@media (max-width: 480px) {
    .waves { height: 20px; margin-top: 0px; }
}