﻿

.ocean {
    text-align: center;
    color: white;
    /*margin-bottom: -30px;*/
    margin-bottom: 0px;
    height: 10%;
    /*bottom: auto;*/
    bottom: 0;
    width: 100%;
    position: absolute;
    background: #035b73;
}

.wave {
    background: url(https://inventorymanage.000webhostapp.com/image/wave.svg) repeat-x;
    position:absolute;
    top: -190px;
    width: 6400px;
    height: 180px;
    /*padding-top:100px !important;*/
    margin-top:50px;
    margin-bottom:23px;
    -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

    .wave:nth-of-type(2) {
        top: -198px;
        -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
        animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
        opacity: 1;
    }

@-webkit-keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@-webkit-keyframes swell {
    0%, 100% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d();
    }

    50% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
}

@keyframes swell {
    0%, 100% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    50% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
}
