/*ANIMATIONS*/
  .flyboarding {  
    display: block;
    position: absolute;
    width: 5%;
    height: 11%;
    left: 26.2%;
    top: 4%;
    background: url(../img/anim/jetskynew.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 3;
  }

  .flyboardboat {  
    display: block;
    position: absolute;
    width: 4%;
    height: 4%;
    left: 24.2%;
    top: 13%;
    background: url(../img/anim/flyboardsky.svg) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
  }

  .swingball {  
    display: block;
    position: absolute;
    width: 3%;
    height: 6%;
    left: 45.2%;
    top: 41.4%;
    opacity: 0.8;
    background: url(../img/anim/swingball.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
  }
  .swingball2 {  
    display: block;
    position: absolute;
    width: 3%;
    height: 4.5%;
    left: 23.6%;
    top: 34%;
    opacity: 0.8;
    background: url(../img/anim/swingball.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
  }

  .swimring-man1 {  
    display: block;
    position: absolute;
    width: 1.6%;
    height: 3%;
    left: 56.2%;
    top: 42.4%;;
    background: url(../img/anim/swimring-man1.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
  }
  .swimring-lady1 {  
    display: block;
    position: absolute;
    width: 1.2%;
    height: 2%;
    left: 24.6%;
    top: 37.5%;
    background: url(../img/anim/swimring-lady1.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
  }

  .paddleboarding1 {  
    display: block;
    position: absolute;
    width: 3%;
    height: 5%;
    left: 73.5%;
    top: 85%;
    background: url(../img/anim/paddleboarding1.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
    /*transform: translate(-280%,125%) rotateX(0deg);*/
  -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);
                }
    
}

.bananaride {  
    display: block;
    position: absolute;
    width: 6.5%;
    height: 8.2%;
    left: 77%;
    top: 5%
    background: url(../img/anim/bananaride.svg) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
    /*transform: translate(0%,0%) rotateZ(-20deg);*/
  -webkit-animation: bananaride1a 10s infinite linear;
  -moz-animation: bananaride1a 10s infinite linear;
  -o-animation: bananaride1a 10s infinite linear;
  -ms-animation: bananaride1a 10s infinite linear;
  animation: bananaride1a 10s infinite linear;
  
}

 @keyframes bananaride1a{

  0%
    {
        
-webkit-transform: translate(0%) rotateY(0deg) rotateZ(-20deg);
                transform: translate(0%) rotateY(0deg) rotateZ(-20deg);
                }    

    100%
    {
        
-webkit-transform: translate(205%,105%) rotateY(10deg) rotateZ(-20deg);
                transform: translate(205%,105%) rotateY(10deg) rotateZ(-20deg);
                }       
} 

.swimming-man1 {
    display: block;
    position: absolute;
    width: 4%;
    height: 4.6%;
    left: 86%;
    top: 68.65%;
    background: url(../img/anim/swimmingman2.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
    opacity: 0.7;
    transform: rotateX(45deg);
    -webkit-animation: swimmer1b 18s infinite linear;
    -moz-animation: swimmer1b 18s infinite linear;
    -o-animation: swimmer1b 18s infinite linear;
    -ms-animation: swimmer1b 18s infinite linear;
    animation: swimmer1b 18s infinite linear;
}
@keyframes swimmer1b {
  0% {
    -webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
    transform: translate(0%) rotateY(0deg) rotateZ(0deg)
  }

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

}


.kayaking {  
    display: block;
    position: absolute;
    width: 2.5%;
    height: 4.2%;
    left: 88%;
    top: 64%;
    background: url(../img/anim/kayaking.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
    /*transform: translate(0%,0%) rotateY(180deg);*/
  -webkit-animation: kayaking1a 50s infinite linear;
  -moz-animation: kayaking1a 50s infinite linear;
  -o-animation: kayaking1a 50s infinite linear;
  -ms-animation: kayaking1a 50s infinite linear;
  animation: kayaking1a 50s infinite linear;  
}

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

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

}

.yatch {  
    display: block;
    position: absolute;
    width: 4.5%;
    height: 7.2%;
    left: 25%;
    top: 5%;
    background: url(../img/anim/yatch.svg) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
    /*transform: translate(0%,0%) rotateY(180deg);*/
  -webkit-animation: yatch 50s infinite linear;
  -moz-animation: yatch 50s infinite linear;
  -o-animation: yatch 50s infinite linear;
  -ms-animation: yatch 50s infinite linear;
  animation: yatch 50s infinite linear;  
}

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

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

}

.jetskyman {  
    display: block;
    position: absolute;
    width: 3%;
    height: 5%;
    left: 71%;
    top: 76%;
    background: url(../img/anim/jetskyman.svg) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 4;
     /*transform: translate(0%,0%) rotateY(0deg);*/
  -webkit-animation: jetskyman1 6s infinite linear;
  -moz-animation: jetskyman1 6s infinite linear;
  -o-animation: jetskyman1 6s infinite linear;
  -ms-animation: jetskyman1 6s infinite linear;
  animation: jetskyman1 6s infinite linear;
  }

  @keyframes jetskyman1{

  0%
    {
        
-webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
                transform: translate(0%) rotateY(0deg) rotateZ(0deg);

                }

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


.helicopter2 {  
    display: block;
    position: absolute;
    width: 4%;
    height: 7%;
    left: 25.85%;
    top: 13%;
    background: url(../img/anim/helicopter.gif) center center no-repeat transparent;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    z-index: 10;
     /*transform: translate(0%,0%) rotateX(0deg);*/
  -webkit-animation: helicopter2a 60s infinite linear;
  -moz-animation: helicopter2a 60s infinite linear;
  -o-animation: helicopter2a 60s infinite linear;
  -ms-animation: helicopter2a 60s infinite linear;
  animation: helicopter2a 60s infinite linear;  
}

@keyframes helicopter2a{

  0%
    {        
-webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
                transform: translate(0%) rotateY(0deg) rotateZ(0deg);

                }

    5%
    {        
-webkit-transform: translate(0%) rotateY(0deg) rotateZ(0deg);
                transform: translate(0%) rotateY(0deg) rotateZ(0deg);

                }

    15%
    {
        
-webkit-transform: translate(10%,-88%) scale(1.8);
                transform: translate(10%,-88%) scale(1.8);
                }

    20%
    {
        
-webkit-transform: translate(10%,-88%) scale(1.8);
                transform: translate(10%,-88%) scale(1.8);
                }

    100%
    {
        
-webkit-transform: translate(100%,80%) scale(1.8);
                transform: translate(100%,80%) scale(1.8);
                }
    
}



.pulse-board {
  fill: white;
  fill-opacity: 0;
  transform-origin: 50% 50%;
  animation-duration: 2s;
  animation-name: pulse-board;
  animation-iteration-count: infinite;
}

@keyframes pulse-board {
  from {
    stroke-width: 3px;
    stroke-opacity: 1;
    transform: scale(0.3);
  }
  to {
    stroke-width: 0;
    stroke-opacity: 0;
    transform: scale(2);
  }
}