@keyframes shake-fish-right {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(0px, 3px) rotate(0deg);
  }
  20% {
    transform: translate(-2px, -7px) rotate(0deg);
  }
  30% {
    transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(0px, -3px) rotate(0deg);
  }
  50% {
    transform: translate(-2px, 11px) rotate(0deg);
  }
  60% {
    transform: translate(-4px, -2px) rotate(0deg);
  }
  70% {
    transform: translate(-0px, 9px) rotate(0deg);
  }
  80% {
    transform: translate(-2px, 1px) rotate(0deg);
  }
  90% {
    transform: translate(0px, 12px) rotate(0deg);
  }
}

@keyframes shake-fish-right-big {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(0px, 3px) rotate(0deg);
  }
  20% {
    transform: translate(-2px, -8px) rotate(0deg);
  }
  30% {
    transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(0px, -3px) rotate(0deg);
  }
  50% {
    transform: translate(-3px, 13px) rotate(0deg);
  }
  60% {
    transform: translate(-6px, -5px) rotate(0deg);
  }
  70% {
    transform: translate(-0px, 9px) rotate(0deg);
  }
  80% {
    transform: translate(-4px, 1px) rotate(0deg);
  }
  90% {
    transform: translate(0px, 12px) rotate(0deg);
  }
}
.shake.shake-fish-r-10 {
  animation-name: shake-fish-right;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-fish-r-12 {
  animation-name: shake-fish-right;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-fish-r-b-13 {
  animation-name: shake-fish-right-big;
  animation-duration: 13s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-fish-r-b-15 {
  animation-name: shake-fish-right-big;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

.shake.shake-hard_12 {
  animation-name: shake-hard;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake.shake-hard_15 {
  animation-name: shake-hard;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

.shake.shake-hard_10 {
  animation-name: shake-hard;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

@keyframes shake-hard {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(6px, -8px) rotate(0deg);
  }
  20% {
    transform: translate(10px, -3px) rotate(0deg);
  }
  30% {
    transform: translate(4px, -3px) rotate(0deg);
  }
  40% {
    transform: translate(9px, -5px) rotate(0deg);
  }
  50% {
    transform: translate(-4px, 9px) rotate(0deg);
  }
  60% {
    transform: translate(2px, 9px) rotate(0deg);
  }
  70% {
    transform: translate(-2px, 9px) rotate(0deg);
  }
  80% {
    transform: translate(9px, -6px) rotate(0deg);
  }
  90% {
    transform: translate(-6px, -4px) rotate(0deg);
  }
}

.shake.shake-vertical_12 {
  animation-name: shake-waves;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

.shake.shake-vertical_14 {
  animation-name: shake-vertical;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

.shake.shake-vertical_15 {
  animation-name: shake-waves;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

.shake.shake-vertical_16 {
  animation-name: shake-vertical;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

.shake.shake-vertical_13 {
  animation-name: shake-vertical;
  animation-duration: 13.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}


@keyframes shake-vertical {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(0px, 3px) rotate(0deg);
  }
  20% {
    transform: translate(0px, -7px) rotate(0deg);
  }
  30% {
    transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(0px, -3px) rotate(0deg);
  }
  50% {
    transform: translate(0px, 11px) rotate(0deg);
  }
  60% {
    transform: translate(0px, -2px) rotate(0deg);
  }
  70% {
    transform: translate(0px, 9px) rotate(0deg);
  }
  80% {
    transform: translate(0px, 1px) rotate(0deg);
  }
  90% {
    transform: translate(0px, 12px) rotate(0deg);
  }
}

@keyframes shake-waves {
  0% {
    transform: translate(0px, 0px) rotate(-2deg);
  }
  10% {
    transform: translate(0px, 3px) rotate(-2deg);
  }
  20% {
    transform: translate(0px, -7px) rotate(-2deg);
  }
  30% {
    transform: translate(0px, 2px) rotate(-2deg);
  }
  40% {
    transform: translate(0px, -3px) rotate(-2deg);
  }
  50% {
    transform: translate(0px, 11px) rotate(-2deg);
  }
  60% {
    transform: translate(0px, -2px) rotate(-2deg);
  }
  70% {
    transform: translate(0px, 9px) rotate(-2deg);
  }
  80% {
    transform: translate(0px, 1px) rotate(-2deg);
  }
  90% {
    transform: translate(0px, 12px) rotate(-2deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(-2deg);
  }
}


.fadeinout {
  animation-name: fadeinout;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

@keyframes fadeinout {
  20% {
    opacity: 0.5;
  }
  40% {
    opacity: 0.25;
  }
  60% {
    opacity: 0;
  }
  90% {
    opacity: 0.1;
  }
}




.rand_big_small {
  animation-name: rand_bigsmall;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

.rand_big_small_3 {
  animation-name: rand_bigsmall_3;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}



@keyframes rand_bigsmall {
  0% {
    transform: scale(0.99);
  }
  10% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.97);
  }
  30% {
    transform: scale(1.05);
  }
  40% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(0.99);
  }
  60% {
    transform: scale(0.95);
  }
  70% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.95);
  }
  90% {
    transform: scale(1.05);
  }
}

@keyframes rand_bigsmall_3 {
  0% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(0.99);
  }
  10% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(1);
  }
  20% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(0.97);
  }
  30% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(1.05);
  }
  40% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(0.95);
  }
  50% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(0.99);
  }
  60% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(0.95);
  }
  70% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(1);
  }
  80% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(0.95);
  }
  90% {
    transform: translate(355px, 90px) rotate(-2.2deg) scale(1.05);
  }
}

.b1-bubble {
  -webkit-animation:b1-bubble 7500ms linear infinite;
  animation:b1-bubble 7500ms linear infinite;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  display: inline-block;
  left: 490px;
  width: 3.5px;
  height: 2.1px;
  position: absolute;
  top: 250px;
  background-image: url(../../images/jungle/bubble1-1.png);
  background-size: cover;
}

.b2-bubble {
  -webkit-animation:b2-bubble 6500ms linear infinite;
  animation:b1-bubble 6500ms linear infinite;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  display: inline-block;
  left: 450px;
  width: 2.5px;
  height: 1.5px;
  position: absolute;
  top: 260px;
  background-image: url(../../images/jungle/bubble1-2.png);
  background-size: cover;
}

.b3-bubble {
  -webkit-animation:b3-bubble 5500ms linear infinite;
  animation:b1-bubble 5500ms linear infinite;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  display: inline-block;
  left: 430px;
  width: 3.1px;
  height: 2.1px;
  position: absolute;
  top: 200px;
  background-image: url(../../images/jungle/bubble1-3.png);
  background-size: cover;
}


.b4-bubble {
  -webkit-animation:b4-bubble 7500ms linear infinite;
  animation:b1-bubble 7500ms linear infinite;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  display: inline-block;
  left: 520px;
  width: 4.6px;
  height: 2.9px;
  position: absolute;
  top: 180px;
  background-image: url(../../images/jungle/bubble1-4.png);
  background-size: cover;
}


.b5-bubble {
  -webkit-animation:b5-bubble 6000ms linear infinite;
  animation:b1-bubble 6000ms linear infinite;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  display: inline-block;
  left: 500px;
  width: 5.5px;
  height: 3.6px;
  position: absolute;
  top: 130px;
  background-image: url(../../images/jungle/bubble1-5.png);
  background-size: cover;
}
@keyframes b1-bubble{
    0%{ transform:translate3d(5px, 180px, 0); opacity:0; width: 7px;height: 4.2px;}
    13%{ transform:translate3d(2px, 160px, 0); opacity:0.2;  width: 14px;height: 8.4px;}
    20%{ transform:translate3d(5px, 140px, 0) opacity:0.4;rotate(45deg); width: 17.5px;height: 10.5px;}
    31%{ transform:translate3d(0px, 110px, 0);opacity:0.6;  }
    40%{ transform:translate3d(8px, 80px, 0);  opacity:0.8;width: 21px;height: 12.6px;}
    54%{ transform:translate3d(3px, 70px, 0); opacity:1;rotate(30deg);}
    60%{ transform:translate3d(8px, 50px, 0); width: 35px;height: 21px;}
    76%{ transform:translate3d(8px, 40px, 0); opacity:0.4; }
    81%{ transform:translate3d(6px, 20px, 0); opacity:0.2; }
    100%{ transform:translate3d(3px, 10px, 0); opacity:0; }
}

@keyframes b2-bubble{
    0%{ transform:translate3d(5px, 200px, 0);opacity:0.2; width: 5px;height: 3px;}
    13%{ transform:translate3d(3px, 190px, 0); opacity:0.4;  width: 7.5px;height: 4.5px;}
    20%{ transform:translate3d(4px, 185px, 0); opacity: 0.6;}
    34%{ transform:translate3d(-1px, 170px, 0) rotate(10deg); opacity:0.8}
    40%{ transform:translate3d(3px, 130px, 0);  opacity:1;  width: 12.5px;height: 7.5px;}
    56%{ transform:translate3d(5px, 110px, 0); rotate(45deg); }
    61%{ transform:translate3d(8px, 95px, 0); width: 20px;height: 12px;}
    70%{ transform:translate3d(8px, 65px, 0); rotate(25deg); opacity:0.6; width: 25px;height: 15px;}
    80%{ transform:translate3d(3px, 50px, 0); opacity:0.4; }
    100%{ transform:translate3d(6px, 40px, 0); opacity:0; }
}


@keyframes b3-bubble{
    0%{ transform:translate3d(0px, 150px, 0);opacity:0; width: 9.3px;height: 6.3px;}
    13%{ transform:translate3d(2px, 120px, 0); rotage(90deg); opacity:0.2;  width: 12.4px;height: 8.4px;}
    20%{ transform:translate3d(3px, 100px, 0); opacity:0.4;  width: 15.5px;height: 10.5px;}
    31%{ transform:translate3d(1px, 90px, 0) rotage(45deg); opacity: 0.6;  }
    46%{ transform:translate3d(8px, 80px, 0);  opacity:0.8;width: 27.7px;height: 14.7px;}
    54%{ transform:translate3d(3px, 60px, 0);   opacity: 1;width: 31px;height: 21px;}
    60%{ transform:translate3d(-1px, 40px, 0);opacity:0.4; }
    76%{ transform:translate3d(2px, 30px, 0); opacity:0.25; }
    80%{ transform:translate3d(1px, 20px, 0); opacity:0; }
    100%{ transform:translate3d(4px, 5px, 0);  }
}

@keyframes b4-bubble{
    0%{ transform:translate3d(0px, 100px, 0);opacity:0.2; width: 9.2px;height: 5.8px;}
    13%{ transform:translate3d(2px, 70px, 0); rotage(90deg); opacity:0.4;  width: 16.4px;height: 11.6px;}
    24%{ transform:translate3d(3px, 50px, 0); opacity:0.6; }
    30%{ transform:translate3d(1px, 40px, 0) rotage(45deg); opacity:0.8;  width: 46px;height: 29px;}
    44%{ transform:translate3d(8px, 30px, 0);opacity:1;}
    53%{ transform:translate3d(3px, 10px, 0);}
    67%{ transform:translate3d(-1px, 10px, 0); }
    71%{ transform:translate3d(2px, 5px, 0); opacity:0.8; }
    82%{ transform:translate3d(1px, 0px, 0); opacity: 0.2; }
    100%{ transform:translate3d(4px, 0px, 0); opacity:0; }
}

@keyframes b5-bubble{
    0%{ transform:translate3d(0px, 75px, 0);opacity:0.3; width: 16.5px;height: 10.8px;}
    13%{ transform:translate3d(2px, 70px, 0); rotage(75deg); opacity:0.6;  width: 27.5px;height: 18px;}
    22%{ transform:translate3d(3px, 68px, 0); opacity:0.9;}
    33%{ transform:translate3d(1px, 60px, 0) opacity:1;  }
    40%{ transform:translate3d(8px, 50px, 0);rotage(15deg);  width: 55px;height: 36px;}
    56%{ transform:translate3d(3px, 38px, 0);}
    60%{ transform:translate3d(-1px, 14px, 0); }
    70%{ transform:translate3d(2px, 10px, 0); opacity:0.8; }
    83%{ transform:translate3d(1px, 3px, 0); opacity: 0.2; }
    100%{ transform:translate3d(4px, 0px, 0); opacity:0; }
}