.ledmon-animation[data-animation="olas"] {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.olas-container {
    position: absolute;
    overflow: hidden;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 60px;
    z-index: 3;
    pointer-events: none;
}

.ola-capa {
    position: absolute;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 50% 100% !important;
    left: 0;
    bottom: 0;
    transform: rotate(180deg);
}

.ola-capa-1 {
    z-index: 3;
    opacity: 0.25;
    animation: moverOlas1 25s linear infinite;
}

.ola-capa-2 {
    z-index: 2;
    opacity: 0.5;
    animation: moverOlas2 10s linear infinite;
}

.ola-capa-3 {
    z-index: 1;
    opacity: 0.7;
    animation: moverOlas3 5s linear infinite;
}

@keyframes moverOlas1 {
    0% {
        transform: translateX(0) rotate(180deg);
    }
    100% {
        transform: translateX(-50%) rotate(180deg);
    }
}

@keyframes moverOlas2 {
    0% {
        transform: translateX(0) rotate(180deg);
    }
    100% {
        transform: translateX(-50%) rotate(180deg);
    }
}

@keyframes moverOlas3 {
    0% {
        transform: translateX(0) rotate(180deg);
    }
    100% {
        transform: translateX(-50%) rotate(180deg);
    }
}