#e2{

}

.e2{
    opacity:0;
    overscroll-behavior: contain;
}
  
.e2-f1{
    width: 100%;
    position: absolute;
    z-index: 10;
}

.e2-f1 img{
    display: block;
    width:100%;
}

.e2-bomba{
    width:100%;
    position: absolute;
    z-index: 11;
    opacity: 1;
}
  
.e2-bomba img{
    width:42%;
    margin-left: 33%;
}

.e2-f2{
    width: 100%;
    position: absolute;
    z-index: 12;
}

.e2-f2 img{
    display: block;
    width:100%;
    /* animation: swing 4s infinite alternate cubic-bezier(0.004, 0.03, 0.00515, 0.0955); */
}

.e2-f3{
    width: 100%;
    position: absolute;
    z-index: 12;
    overflow: hidden;
}

.e2-f3>img{
    visibility: hidden;
    width:100%;
}

.e2-olas{
    width: 110%;
    position: absolute;
    bottom: 0;
    left: -5%;
    height: 40%;
    z-index: 13;
    background-color: #615323;
}

.e2-olas img{
    position: absolute;
}

.e2-ola1{
    left:-10px;
    top:-20%;
    width:110%;
    animation: wave 4s 0.1s infinite linear;
}

.e2-ola2{
    left:-10px;
    top:-15%;
    width:130%;
    animation: wave 7.11111s 0.1s infinite linear;
}

.e2-ola3{
    left:-20px;
    top:-5%;
    width:160%;
    animation: wave 6.22222s 0.1s infinite linear;
}

.e2-ola4{
    left:-90px;
    top:0%;
    width:200%;
    animation: wave 5.77778s 0.1s infinite linear;
}

.e2-ola5{
    left:-10px;
    top:20%;
    width:190%;
    animation: wave 4.88889s 0.1s infinite linear;
}

.e2-ola6{
    left:-40px;
    top:40%;
    width:180%;
    animation: wave 9.88889s 0.1s infinite linear;
}

.e2-ola7{
    left:-10px;
    top:60%;
    width:150%;
    animation: wave 3.88889s 0.1s infinite linear;
}

.e2-balsa{
    left:-90%;
    top:-15%;
    width:60%;
    animation: wave 11.88889s 1s infinite linear;
}