.waterpark {
  display: block;
  position: absolute;
  width: 25%;
  height: 19%;
  left: 71.8%;
  top: 71%;
  background: url(../../assets/anim/waterslide.png) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4
}

.turtle1 {
  display: block;
  position: absolute;
  width: 2.2%;
  height: 3.5%;
  left: 65%;
  top: 96%;
  opacity: 0.5;
  background: url(../../assets/anim/turtle1.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 3;
  -webkit-animation: turtle1a 80s infinite linear;
  -moz-animation: turtle1a 80s infinite linear;
  -o-animation: turtle1a 80s infinite linear;
  -ms-animation: turtle1a 80s infinite linear;
  animation: turtle1a 80s infinite linear
}

@keyframes turtle1a {
  0% {
    -webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
    transform: translate(0%) rotateY(0deg) rotateZ(0deg)
  }

  70% {
    -webkit-transform: translate(65%, -377%) rotateY(0deg) rotateZ(50deg);
    transform: translate(65%, -377%) rotateY(0deg) rotateZ(50deg)
  }

  100% {
    -webkit-transform: translate(220%, -495%) rotateY(0deg) rotateZ(100deg);
    transform: translate(220%, -495%) rotateY(0deg) rotateZ(100deg)
  }

}

.volleyball {
  display: block;
  position: absolute;
  width: 7%;
  height: 6%;
  left: 66.8%;
  top: 58%;
  background: url(../../assets/anim/volleyball.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 3
}

.paddleman-walk {
  display: block;
  position: absolute;
  width: 2.2%;
  height: 4.2%;
  left: 89.2%;
  top: 54.35%;
  background: url(../../assets/anim/paddleman-walk.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4;
  -webkit-animation: paddleman1a 30s infinite linear;
  -moz-animation: paddleman1a 30s infinite linear;
  -o-animation: paddleman1a 30s infinite linear;
  -ms-animation: paddleman1a 30s infinite linear;
  animation: paddleman1a 30s infinite linear
}

@keyframes paddleman1a {
  0% {
    -webkit-transform: translate(0%) rotateY(180deg) rotateZ(0deg);
    transform: translate(0%) rotateY(180deg) rotateZ(0deg)
  }

  100% {
    -webkit-transform: translate(-230%, 140%) rotateY(180deg) rotateZ(0deg);
    transform: translate(-230%, 140%) rotateY(180deg) rotateZ(0deg)
  }

}

.surfingman {
  display: block;
  position: absolute;
  width: 4%;
  height: 4.8%;
  left: 36.95%;
  top: 81.15%;
  background: url(../../assets/anim/surfing.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4;
  -webkit-animation: surfingman1a 12s infinite linear;
  -moz-animation: surfingman1a 12s infinite linear;
  -o-animation: surfingman1a 12s infinite linear;
  -ms-animation: surfingman1a 12s infinite linear;
  animation: surfingman1a 12s infinite linear
}

@keyframes surfingman1a {
  0% {
    -webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
    transform: translate(0%) rotateY(0deg) rotateZ(0deg)
  }

  100% {
    -webkit-transform: translate(195%, 225%) rotateY(0deg) rotateZ(0deg);
    transform: translate(195%, 225%) rotateY(0deg) rotateZ(0deg)
  }

}

.jetsky1 {
  display: block;
  position: absolute;
  width: 5%;
  height: 4%;
  left: 42.2%;
  top: 77.35%;
  background: url(../../assets/anim/jetsky.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4;
  -webkit-animation: Jetsky1a 10s infinite linear;
  -moz-animation: Jetsky1a 10s infinite linear;
  -o-animation: Jetsky1a 10s infinite linear;
  -ms-animation: Jetsky1a 10s infinite linear;
  animation: Jetsky1a 10s infinite linear
}

@keyframes Jetsky1a {
  0% {
    -webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
    transform: translate(0%) rotateY(0deg) rotateZ(0deg)
  }

  100% {
    -webkit-transform: translate(220%, 370%) rotateY(0deg) rotateZ(0deg);
    transform: translate(220%, 370%) rotateY(0deg) rotateZ(0deg)
  }

}

.paddleboarding1 {
  display: block;
  position: absolute;
  width: 3%;
  height: 5%;
  left: 78.3%;
  top: 65%;
  background: url(../../assets/anim/paddleboarding1.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4;
  -webkit-animation: paddleboarding1a 40s infinite linear;
  -moz-animation: paddleboarding1a 40s infinite linear;
  -o-animation: paddleboarding1a 40s infinite linear;
  -ms-animation: paddleboarding1a 40s infinite linear;
  animation: paddleboarding1a 40s infinite linear
}

@keyframes paddleboarding1a {
  0% {
    -webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
    transform: translate(0%) rotateY(0deg) rotateZ(0deg)
  }

  100% {
    -webkit-transform: translate(-280%, 125%) rotateY(0deg) rotateZ(0deg);
    transform: translate(-280%, 125%) rotateY(0deg) rotateZ(0deg)
  }

}

.swimming-man2 {
  display: block;
  position: absolute;
  width: 4%;
  height: 5.4%;
  left: 65.5%;
  top: 67.55%;
  background: url(../../assets/anim/swimmingman2.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4;
  opacity: 0.7;
  -webkit-animation: swimmer1a 20s infinite linear;
  -moz-animation: swimmer1a 20s infinite linear;
  -o-animation: swimmer1a 20s infinite linear;
  -ms-animation: swimmer1a 20s infinite linear;
  animation: swimmer1a 20s infinite linear
}

@keyframes swimmer1a {
  0% {
    -webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
    transform: translate(0%) rotateY(0deg) rotateZ(0deg)
  }

  100% {
    -webkit-transform: translate(-185%, 60%) rotateY(0deg) rotateZ(0deg);
    transform: translate(-185%, 60%) rotateY(0deg) rotateZ(0deg)
  }

}

.beach-volleyball {
  display: block;
  position: absolute;
  width: 4%;
  height: 6.8%;
  left: 30.75%;
  top: 73.95%;
  background: url(../../assets/anim/beach-volleyball.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4
}

.talking-people {
  display: block;
  position: absolute;
  width: 1.4%;
  height: 5.3%;
  left: 45.75%;
  top: 66.55%;
  background: url(../../assets/anim/talking-people.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4
}

.flyboard-boat {
  display: block;
  position: absolute;
  width: 5%;
  height: 10.4%;
  left: 52.5%;
  top: 67.55%;
  background: url(../../assets/anim/flyboard1.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 4
}

.kidsplash1 {
  display: block;
  position: absolute;
  width: 2.1%;
  height: 4.2%;
  left: 79.85%;
  top: 81.95%;
  background: url(../../assets/anim/kidsplash1.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 5
}

.kidsplash2 {
  display: block;
  position: absolute;
  width: 1.8%;
  height: 3.4%;  
  left: 91.5%;
  top: 77.5%;
  background: url(../../assets/anim/kidsplash1.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  z-index: 5
}

.girljump {
  display: block;
  position: absolute;
  width: 1.5%;
  height: 4.2%;
  left: 72.85%;
  top: 79.75%;  
  background: url(../../assets/anim/girljump.gif) center center no-repeat transparent;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
    z-index: 5
}