@media screen and (max-width:715px) {
    .ocean {
        display: none;
    }

    .wave {
        background: url("../assets/imagenes/wave_1.svg");
        position: absolute;
        width: 200%;
        height: 100%;
        animation: wave 3s - 3s linear infinite;
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    .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%);
        }
    }
}


/* waves */
@media only screen and (min-width:716px) and (max-width:5000px) {
    .ocean {
        height: 80px;
        /* change the height of the waves here */
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-x: hidden;
    }

    .wave {
        background: url("../assets/imagenes/wave_1.svg");
        position: absolute;
        width: 200%;
        height: 100%;
        animation: wave 3s - 3s linear infinite;
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    .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;
    }

    .wave52 {
        background: url("../assets/imagenes/wave_1.svg");
        position: absolute;
        width: 200%;
        height: 100%;
        animation: wave 3s - 3s linear infinite;
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

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

    .wave50: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%);
        }
    }
}