/* Wave Animation */
.wave-container {
    height: 90px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 10;
    overflow: hidden;
}

.wave {
    background: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 198"%3E%3Cpath fill="%23ffffff" d="M0,86c125,0,125,56,250,56s125-56,250-56s125,56,250,56s125-56,250-56s125,56,250,56s125-56,250-56s125,56,250,56v56h-2000V86z"%3E%3C/path%3E%3C/svg%3E') repeat-x;
    position: absolute;
    width: 6400px;
    height: 198px;
    bottom: 0px;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.wave:nth-of-type(2) {
    bottom: 10px;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 0.7;
}

@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@keyframes swell {

    0%,
    100% {
        transform: translate3d(0, -5px, 0);
    }

    50% {
        transform: translate3d(0, 5px, 0);
    }
}