.ocean .wave {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 500px;
    height: 100px;
    background: url(../media/wave4.png);
    /*background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M0.28,149.52 C149.99,150.00 255.36,-58.69 400.96,18.27 L499.72,150.50 L1.41,152.47 Z'/%3E%3C/svg%3E");*/
    background-size: 1000px 100px;
}

    .ocean .wave.wave1 {
        animation: animate 25s linear infinite;
        z-index: 20;
        opacity: 0.8;
        animation-delay: 0s;
        bottom: 0;
    }

    .ocean .wave.wave2 {
        animation: animate2 10s linear infinite;
        z-index: 19;
        opacity: 0.5;
        animation-delay: -5s;
        bottom: 10px;
    }

    .ocean .wave.wave3 {
        animation: animate 30s linear infinite;
        z-index: 18;
        opacity: 0.2;
        animation-delay: -2s;
        bottom: 15px;
    }
    .ocean .wave.wave4 {
        animation: animate2 20s linear infinite;
        z-index: 17;
        opacity: 0.7;
        animation-delay: -5s;
        bottom: 20px;
    }

@keyframes animate {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 1000px;
    }
}

@keyframes animate2 {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -1000px;
    }
}



/*.ocean {
    height: 8%;*/ /* change the height of the waves here */
    /*width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
}

.wave {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
    position: absolute;
    width: 200%;
    height: 100%;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
}

    .wave:nth-of-type(2) {
        bottom: 0;
        animation: wave 18s linear reverse infinite;
        opacity: 0.5;
    }

    .wave:nth-of-type(3) {
        bottom: 0;
        animation: wave 20s -1s linear infinite;
        opacity: 0.5;
    }

@keyframes wave {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(-50%);
    }
}*/