/* @font-face
{
	font-family: 'AvenirPro';
	src: url('fonts/AvenirNextLTPro-Regular.otf');
	font-weight: normal;
	font-style: normal;
}
*/

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

body {
background: url(src-pozadi.png) #0e78c6 no-repeat;
margin: 0;
padding: 0;
font-family: 'Open Sans', Arial, Sanf-serif;
font-size: 0.95em;
}

@media (max-width: 1280px) {
    body {
        width: 1280px;
    }
}

.hide {
display: none !important;
position: relative;
top: -50px;
left: 0;
z-index: -999;
background: #00b54d;
padding: 10px;
color: #fff;
width: 100%;
margin: 0;
max-width: 300px;
}

div#lighthouse .hide {
top: -50px;
width: 250px !important;
float: right;
margin: 0 100px 0 0;
}

@media (max-width: 1575px) {
div#lighthouse .hide {float: left !important;}
}

div#sail1 .hide {
top: 170px;
}

div#sail2 .hide {
left:100px;
top:-25px;

width: 170px !important;
}

div#sail3 .hide {
top: 70px;
}

div#flag1 .hide {
top: -25px;
left: -60px;
}

div#boat .hide {
left: 250px;top: -95px;
}

div#boat2 .hide {
top: -120px;
}

.hide a {
color: #fff;
text-decoration: none;
}

.show {
display: block !important;
z-index: 999;
}

.paused {
   -ms-animation-play-state:paused !important;
   -o-animation-play-state:paused !important;
   -moz-animation-play-state:paused !important;
   -webkit-animation-play-state:paused !important;
  animation-play-state: paused !important;
}

span.botl {
background: url(buble_bot_l.png) top center no-repeat transparent;
width: 100%;
height: 30px;
}

span.botr {
background: url(buble_bot_r.png) top right no-repeat transparent;
width: 100%;
height: 30px;
}

video {
display: none;
}

div#lighthousebg {
background: url(src-majak1.png) -50px 0;
height: 1060px;
}

div#lighthouse {
background: url(lighthouse2.png) -50px 0 no-repeat;
width:709px;
height:206px;
left: 0;
top: 346px;
z-index:11;
position: absolute;
cursor: pointer;
}

@-webkit-keyframes clouds {
    0%   {background-position:0 0;}
    100% {background-position:2000px 0;}
}

@-moz-keyframes clouds {
    0%   {background-position:0 0;}
    100% {background-position:2000px 0;}
}

@-o-keyframes clouds {
    0%   {background-position:0 0;}
    100% {background-position:2000px 0;}
}

@keyframes clouds {
    0%   {background-position:0 0;}
    100% {background-position:2000px 0;}
}

div#clouds {
background: url(src-mraky.png);
height: 1060px;
-webkit-animation: clouds 80s linear infinite; /* Chrome, Safari, Opera */
-moz-animation: clouds 80s linear infinite;
-o-animation: clouds 80s linear infinite;
animation: clouds 80s linear infinite;
}

div#light {
background: url(light.png);
width:1161px;
height:289px;
top: 220px;
z-index:8;
left:-50px;
position: absolute;
display: block;
-webkit-animation: light 10s ease 4s infinite; /* Chrome, Safari, Opera */
animation: light 10s ease 4s infinite;
-moz-animation: light 10s ease 4s infinite;
-o-animation: light 10s ease 4s infinite;
}

@-webkit-keyframes light {
    0%   {-webkit-transform: rotate3d(0,1,0,0);}
    100% {-webkit-transform: rotate3d(0,1,0,180deg);}
}

@-moz-keyframes light {
    0%   {-moz-transform: rotate3d(0,1,0,0);}
    100% {-moz-transform: rotate3d(0,1,0,180deg);}
}

@-o-keyframes light {
    0%   {-o-transform: rotate3d(0,1,0,0);}
    100% {-o-transform: rotate3d(0,1,0,180deg);}
}

@keyframes light {
    0%   {transform: rotateY(0deg);}
    100% {transform: rotateY(180deg);}
}

div#wrapper {
width: 1280px;
margin: 0 auto;
position: relative;
}

#wrapper div {
position: absolute;
display: block;
cursor: pointer;
}

div#seagull1 {
background: url(racek1.png);
width:64px;
height:58px;
right: -70px;
top: 200px;
}

div#seagull2 {
background: url(racek2.png);
width:68px;
height:76px;
right: -130px;
top: 130px;
}

div#seagull3 {
background: url(racek3.png);
width:65px;
height:60px;
right: -200px;
top: 80px;
}

.seagulls {
-webkit-animation: seagul 15s linear 2s infinite; /* Chrome, Safari, Opera */
animation: seagul 15s linear 2s infinite;
-moz-animation: seagul 15s linear 2s infinite;
-o-animation: seagul 15s linear 2s infinite;
}

@-webkit-keyframes seagul {
    0%   {-webkit-transform: translate(0,0) scale(0.01,0.01);}
    25%   {-webkit-transform: translate(-300px,50px) rotate(-30deg) scale(1,1);}
    50%   {-webkit-transform: translate(-800px,-50px) rotate(30deg);}
    80%   {-webkit-transform: translate(-1800px,50px) rotate(-20deg);}
    100%   {-webkit-transform: translate(-1800px,50px) rotate(-20deg);}
}

@-moz-keyframes seagul {
    0%   {-moz-transform: translate(0,0) scale(0.1,0.1);}
    25%   {-moz-transform: translate(-300px,50px) rotate(-30deg) scale(1,1);}
    50%   {-moz-transform: translate(-800px,-50px) rotate(30deg);}
    80%   {-moz-transform: translate(-1800px,50px) rotate(-20deg);}
    100%   {-moz-transform: translate(-1800px,50px) rotate(-20deg);}
}

@-o-keyframes seagul {
    0%   {-o-transform: translate(0,0) scale(0.1,0.1);}
    25%   {-o-transform: translate(-300px,50px) rotate(-30deg) scale(1,1);}
    50%   {-o-transform: translate(-800px,-50px) rotate(30deg);}
    80%   {-o-transform: translate(-1800px,50px) rotate(-20deg);}
    100%   {-o-transform: translate(-1800px,50px) rotate(-20deg);}
}

@keyframes seagul {
    0%   {transform: translate(0,0) scale(0.1,0.1);}
    25%   {transform: translate(-300px,50px) rotate(-30deg) scale(1,1);}
    50%   {transform: translate(-800px,-50px) rotate(30deg);}
    80%   {transform: translate(-1800px,50px) rotate(-20deg);}
    100%   {transform: translate(-1800px,50px) rotate(-20deg);}
}

div#logo {
background: url(logo.png);
width:340px;
height:148px;
left: 200px;
top: 90px;
}

p#mute {
width:340px;
height:148px;
left: 200px;
top: 50px;
position: absolute;
color:#fff;
cursor: pointer;
}

div.flags {
position: absolute;
display: block;
width: 231px;
height: 109px;
z-index: 13;
}

div#flag1 {
background: url(src-vitr1.png) no-repeat;
right: 130px;
top: 30px;
-webkit-animation: firstflag 3s ease infinite; /* Chrome, Safari, Opera */
-moz-animation: firstflag 3s ease infinite;
-o-animation: firstflag 3s ease infinite;
animation: firstflag 3s ease infinite;
}

@-webkit-keyframes firstflag {
    0%   {background: url(src-vitr1.png);}
    25%  {background: url(src-vitr2.png);}
    50%  {background: url(src-vitr3.png);}
    75% {background: url(src-vitr4.png);}
    100% {background: url(src-vitr1.png);}
}

@-moz-keyframes firstflag {

}

@-o-keyframes firstflag {

}

@keyframes firstflag {

}

div#flag2 {
background: url(src-vitr2.png) no-repeat;
right: 0;
top: 150px;
-webkit-animation: secflag 2s linear infinite; /* Chrome, Safari, Opera */
animation: secflag 2s linear infinite;
-moz-animation: secflag 2s linear infinite;
-o-animation: secflag 2s linear infinite;
}

@-webkit-keyframes secflag {
    0%   {background: url(src-vitr2.png);}
    25%  {background: url(src-vitr3.png);}
    50%  {background: url(src-vitr4.png);}
    75% {background: url(src-vitr1.png);}
    100% {background: url(src-vitr2.png);}
}

@-moz-keyframes secflag {

}

@-o-keyframes secflag {

}

@keyframes secflag {

}

div#flag3 {
background: url(src-vitr3.png) no-repeat;
right: 130px;
top: 270px;
-webkit-animation: thirdflag 2.5s linear infinite; /* Chrome, Safari, Opera */
animation: thirdflag 2.5s linear infinite;
-moz-animation: thirdflag 2.5s linear infinite;
-o-animation: thirdflag 2.5s linear infinite;
}

@-webkit-keyframes thirdflag {
    0%   {background: url(src-vitr3.png);}
    25%  {background: url(src-vitr4.png);}
    50%  {background: url(src-vitr1.png);}
    75% {background: url(src-vitr2.png);}
    100% {background: url(src-vitr3.png);}
}

@-moz-keyframes thirdflag {

}

@-o-keyframes thirdflag {

}

@keyframes thirdflag {

}

div#piratewave {
background: url(piratewave.png);
width: 343px;
height: 96px;
right: 0;
top: 583px;
z-index: 11;
-webkit-animation: piratewave 10s ease-in infinite; /* Chrome, Safari, Opera */
animation: piratewave 10s ease-in infinite;
-moz-animation: piratewave 10s ease-in infinite;
-o-animation: piratewave 10s ease-in infinite;
}

@-webkit-keyframes piratewave {
    0%   {background-position: 0 0; opacity: 1;}
    20%   {opacity: 0.05;}
    80% {opacity: 0;}
    90% {opacity: 0.2;}
    100% {background-position: 343px 0; opacity: 1;}
}

@-moz-keyframes piratewave {
    0%   {background-position: 0 0; opacity: 1;}
    20%   {opacity: 0.05;}
    80% {opacity: 0;}
    90% {opacity: 0.2;}
    100% {background-position: 343px 0; opacity: 1;}
}

@-o-keyframes piratewave {
    0%   {background-position: 0 0; opacity: 1;}
    20%   {opacity: 0.05;}
    80% {opacity: 0;}
    90% {opacity: 0.2;}
    100% {background-position: 343px 0; opacity: 1;}
}

@keyframes piratewave {
    0%   {background-position: 0 0; opacity: 1;}
    20%   {opacity: 0.05;}
    80% {opacity: 0;}
    90% {opacity: 0.2;}
    100% {background-position: 343px 0; opacity: 1;}
}

div#pirateship {
background: url(pirateship.png) 0 15px no-repeat;
width: 198px;
height: 203px;
right: 10px;
top: 420px;
z-index: 10;
-webkit-animation: pirateship 10s ease-in infinite; /* Chrome, Safari, Opera */
animation: pirateship 10s ease-in infinite;
-moz-animation: pirateship 10s ease-in infinite;
-o-animation: pirateship 10s ease-in infinite;
}

@-webkit-keyframes pirateship {
    0%   {-webkit-transform: rotate(0deg);}
    30%   {-webkit-transform: rotate(-3deg);}
    70% {-webkit-transform: rotate(3deg);}
    100%   {-webkit-transform: rotate(0deg);}
}

@-moz-keyframes pirateship {
    0%   {-moz-transform: rotate(0deg);}
    30%   {-moz-transform: rotate(-3deg);}
    70% {-moz-transform: rotate(3deg);}
    100%   {-moz-transform: rotate(0deg);}
}

@-o-keyframes pirateship {
    0%   {-o-transform: rotate(0deg);}
    30%   {-o-transform: rotate(-3deg);}
    70% {-o-transform: rotate(3deg);}
    100%   {-o-transform: rotate(0deg);}
}

@keyframes pirateship {
    0%   {transform: rotate(0deg);}
    30%   {transform: rotate(-3deg);}
    70% {transform: rotate(3deg);}
    100%   {transform: rotate(0deg);}
}

div#sail1 {
background: url(lod-obj1.png) no-repeat;
width: 280px;
height: 460px;
right: 645px;
top: 190px;
z-index: 12;
-webkit-animation: boat 10s ease-in 1s infinite; /* Chrome, Safari, Opera */
animation: boat 10s ease-in 1s infinite;
-moz-animation: boat 10s ease-in 1s infinite;
-o-animation: boat 10s ease-in 1s infinite;
}

div#sail2 {
background: url(lod-obj2.png) no-repeat;
width: 301px;
height: 532px;
right: 520px;
top: 115px;
z-index: 11;
-webkit-animation: boat 10s ease-in infinite; /* Chrome, Safari, Opera */
animation: boat 10s ease-in infinite;
-moz-animation: boat 10s ease-in infinite;
-o-animation: boat 10s ease-in infinite;
}

div#sail3 {
background: url(lod-obj3.png) no-repeat;
width: 383px;
height: 624px;
right: 185px;
top: 50px;
z-index: 12;
-webkit-animation: boat 10s ease 2s infinite; /* Chrome, Safari, Opera */
animation: boat 10s ease 2s infinite;
-moz-animation: boat 10s ease 2s infinite;
-o-animation: boat 10s ease 2s infinite;
}

div#stozar {
background: url(lod-obj4.png) no-repeat;
width: 12px;
height: 328px;
right: 525px;
top: 325px;
z-index: 11;
-webkit-animation: boat 10s ease-in infinite; /* Chrome, Safari, Opera */
animation: boat 10s ease-in infinite;
-moz-animation: boat 10s ease-in infinite;
-o-animation: boat 10s ease-in infinite;
}

div#kotva {
background: url(lod-obj6.png) no-repeat;
width: 175px;
height: 101px;
right: 775px;
top: 680px;
z-index: 11;
}

div#boat {
background: url(lod-obj5-1.png) no-repeat;
width: 688px;
height: 122px;
right: 230px;
top: 605px;
z-index: 12;
-webkit-animation: boat 10s ease-in infinite; /* Chrome, Safari, Opera */
animation: boat 10s ease-in infinite;
-moz-animation: boat 10s ease-in infinite;
-o-animation: boat 10s ease-in infinite;
}

div#boat2 {
background: url(lod-obj5-2.png) no-repeat;
width: 688px;
height: 60px;
right: 61px;
top: 727px;
z-index: 12;
-webkit-animation: boat 10s ease-in infinite; /* Chrome, Safari, Opera */
animation: boat 10s ease-in infinite;
-moz-animation: boat 10s ease-in infinite;
-o-animation: boat 10s ease-in infinite;
}

@-webkit-keyframes boat {
    0%   {-webkit-transform: translate(0,0);}
    50%   {-webkit-transform: translate(10px,0);}
    100%   {-webkit-transform: translate(0,0);}
}

@-moz-keyframes boat {
    0%   {-moz-transform: translate(0,0);}
    50%   {-moz-transform: translate(10px,0);}
    100%   {-moz-transform: translate(0,0);}
}

@-o-keyframes boat {
    0%   {-o-transform: translate(0,0);}
    50%   {-o-transform: translate(10px,0);}
    100%   {-o-transform: translate(0,0);}
}

@keyframes boat {
    0%   {transform: translate(0,0);}
    50%   {transform: translate(10px,0);}
    100%   {transform: translate(0,0);}
}

div#boatwave {
background: url(boatwave.png) no-repeat;
width: 917px;
height: 63px;
right: 100px;
top: 745px;
z-index: 13;
-webkit-animation: boatwave 5s linear infinite; /* Chrome, Safari, Opera */
animation: boatwave 5s linear infinite;
-moz-animation: boatwave 5s linear infinite;
-o-animation: boatwave 5s linear infinite;
}

@-webkit-keyframes boatwave {
    0%   {-webkit-transform: translate(0,0);}
    50%   {-webkit-transform: translate(10px,0);}
    100%   {-webkit-transform: translate(0,0);}
}

@-moz-keyframes boatwave {
    0%   {-moz-transform: translate(0,0);}
    50%   {-moz-transform: translate(10px,0);}
    100%   {-moz-transform: translate(0,0);}
}

@-o-keyframes boatwave {
    0%   {-o-transform: translate(0,0);}
    50%   {-o-transform: translate(10px,0);}
    100%   {-o-transform: translate(0,0);}
}

@keyframes boatwave {
    0%   {transform: translate(0,0);}
    50%   {transform: translate(10px,0);}
    100%   {transform: translate(0,0);}
}

div#wreckwaveback {
background: url(wreckwaveback.png) no-repeat;
width: 210px;
height: 99px;
left: 90px;
top: 690px;
z-index: 14;
-webkit-animation: wreckwaveback 15s ease-in infinite; /* Chrome, Safari, Opera */
animation: wreckwaveback 15s ease-in infinite;
-moz-animation: wreckwaveback 15s ease-in infinite;
-o-animation: wreckwaveback 15s ease-in infinite;
}

@-webkit-keyframes wreckwaveback {
    0%   {-webkit-transform: translate(0,0);opacity:0;}
    50%   {-webkit-transform: translate(0,-10px);opacity:1;}
    100%   {-webkit-transform: translate(0,0); opacity:0;}
}

@-moz-keyframes wreckwaveback {
    0%   {-moz-transform: translate(0,0);opacity:0;}
    50%   {-moz-transform: translate(0,-10px);opacity:1;}
    100%   {-moz-transform: translate(0,0);opacity:0;}
}

@-o-keyframes wreckwaveback {
    0%   {-o-transform: translate(0,0);opacity:0;}
    50%   {-o-transform: translate(0,-10px);opacity:1;}
    100%   {-o-transform: translate(0,0);opacity:0;}
}

@keyframes wreckwaveback {
    0%   {transform: translate(0,0);opacity:0;}
    50%   {transform: translate(0,-10px);opacity:1;}
    100%   {transform: translate(0,0);opacity:0;}
}

div#wreck {
background: url(wreck.png) no-repeat;
width: 263px;
height: 259px;
left: 20px;
top: 500px;
z-index: 15;
opacity: 1;
}

div#wreckwavefront {
background: url(wreckwavefront.png) no-repeat;
width: 359px;
height: 119px;
left: -100px;
top: 700px;
z-index: 16;
-webkit-animation: wreckwavefront 12s ease-in infinite; /* Chrome, Safari, Opera */
animation: wreckwavefront 12s ease-in infinite;
-moz-animation: wreckwavefront 12s ease-in infinite;
-o-animation: wreckwavefront 12s ease-in infinite;
}

@-webkit-keyframes wreckwavefront {
    0%   {-webkit-transform: translate(0,0);opacity:0;}
    50%   {-webkit-transform: translate(10px,-10px);opacity:1;}
    100%   {-webkit-transform: translate(0,0); opacity:0;}
}

@-moz-keyframes wreckwavefront {
    0%   {-moz-transform: translate(0,0);opacity:0;}
    50%   {-moz-transform: translate(10px,-10px);opacity:1;}
    100%   {-moz-transform: translate(0,0);opacity:0;}
}

@-o-keyframes wreckwavefront {
    0%   {-o-transform: translate(0,0);opacity:0;}
    50%   {-o-transform: translate(10px,-10px);opacity:1;}
    100%   {-o-transform: translate(0,0);opacity:0;}
}

@keyframes wreckwavefront {
    0%   {transform: translate(0,0);opacity:0;}
    50%   {transform: translate(10px,-10px);opacity:1;}
    100%   {transform: translate(0,0);opacity:0;}
}

div#rightwave {
background: url(rightwave.png) no-repeat;
width: 188px;
height: 83px;
right: 10px;
top: 680px;
z-index: 16;
-webkit-animation: rightwave 9s ease-in infinite; /* Chrome, Safari, Opera */
animation: rightwave 9s ease-in infinite;
-moz-animation: rightwave 9s ease-in infinite;
-o-animation: rightwave 9s ease-in infinite;
}

@-webkit-keyframes rightwave {
    0%   {-webkit-transform: translate(0,0);opacity:0;}
    50%   {-webkit-transform: translate(35px,5px);opacity:1;}
    100%   {-webkit-transform: translate(50px,20px); opacity:0;}
}

@-moz-keyframes rightwave {
    0%   {-moz-transform: translate(0,0);opacity:0;}
    50%   {-moz-transform: translate(35px,5px);opacity:1;}
    100%   {-moz-transform: translate(50px,20px); opacity:0;}
}

@-o-keyframes rightwave {
    0%   {-o-transform: translate(0,0);opacity:0;}
    50%   {-o-transform: translate(35px,5px);opacity:1;}
    100%   {-o-transform: translate(50px,20px); opacity:0;}
}

@keyframes rightwave {
    0%   {transform: translate(0,0);opacity:0;}
    50%   {transform: translate(35px,5px);opacity:1;}
    100%   {transform: translate(50px,20px); opacity:0;}
}

div#centralwave {
background: url(centralwave.png) no-repeat;
width: 374px;
height: 186px;
right: 330px;
top: 740px;
z-index: 16;
-webkit-animation: centralwave 18s ease infinite; /* Chrome, Safari, Opera */
animation: centralwave 18s ease infinite;
-moz-animation: centralwave 18s ease infinite;
-o-animation: centralwave 18s ease infinite;
}

@-webkit-keyframes centralwave {
    0%   {-webkit-transform: translate(0,0);opacity:0;}
    50%   {-webkit-transform: translate(-10px,-15px);opacity:1;}
    100%   {-webkit-transform: translate(10px,-5px); opacity:0;}
}

@-moz-keyframes centralwave {
    0%   {-moz-transform: translate(0,0);opacity:0;}
    50%   {-moz-transform: translate(-35px,5px);opacity:1;}
    100%   {-moz-transform: translate(-50px,20px); opacity:0;}
}

@-o-keyframes centralwave {
    0%   {-o-transform: translate(0,0);opacity:0;}
    50%   {-o-transform: translate(-35px,5px);opacity:1;}
    100%   {-o-transform: translate(-50px,20px); opacity:0;}
}

@keyframes centralwave {
    0%   {transform: translate(0,0);opacity:0;}
    50%   {transform: translate(-35px,5px);opacity:1;}
    100%   {transform: translate(-50px,20px); opacity:0;}
}

div#sharkleft {
background: url(shark_l.png) no-repeat;
width: 273px;
height: 197px;
left: 330px;
top: 860px;
z-index: 17;
-webkit-animation: sharkleft 24s ease infinite; /* Chrome, Safari, Opera */
animation: sharkleft 24s ease infinite;
-moz-animation: sharkleft 24s ease infinite;
-o-animation: sharkleft 24s ease infinite;
}

@-webkit-keyframes sharkleft {
    0%   {-webkit-transform: translate(0,0);}
    15%   {-webkit-transform: translate(-10px,-80px);}
    30%   {-webkit-transform: translate(-10px,-80px);}
    50%   {-webkit-transform: translate(-10px,-40px);}
    100%   {-webkit-transform: translate(0,0);}
}

@-moz-keyframes sharkleft {
    0%   {-moz-transform: translate(0,0);}
    15%   {-moz-transform: translate(-10px,-80px);}
    30%   {-moz-transform: translate(-10px,-80px);}
    50%   {-moz-transform: translate(-10px,-40px);}
    100%   {-moz-transform: translate(0,0);}
}

@-o-keyframes sharkleft {
    0%   {-o-transform: translate(0,0);}
    15%   {-o-transform: translate(-10px,-80px);}
    30%   {-o-transform: translate(-10px,-80px);}
    50%   {-o-transform: translate(-10px,-40px);}
    100%   {-o-transform: translate(0,0);}
}

@keyframes sharkleft {
    0%   {transform: translate(0,0);}
    15%   {transform: translate(-10px,-80px);}
    30%   {transform: translate(-10px,-80px);}
    50%   {transform: translate(-10px,-40px);}
    100%   {transform: translate(0,0);}
}

div#sharkright {
background: url(shark_r.png) no-repeat;
width: 273px;
height: 197px;
right: 100px;
top: 860px;
z-index: 17;
-webkit-animation: sharkleft 20s ease 2s infinite; /* Chrome, Safari, Opera */
animation: sharkleft 20s ease 2s infinite;
-moz-animation: sharkleft 20s ease 2s infinite;
-o-animation: sharkleft 20s ease 2s infinite;
}

div#sharkwaveleft {
background: url(shark_l_wave.png) no-repeat;
width: 594px;
height: 256px;
left: 140px;
top: 820px;
z-index: 18;
-webkit-animation: sharkwaveleft 10s ease infinite; /* Chrome, Safari, Opera */
animation: sharkwaveleft 10s ease infinite;
-moz-animation: sharkwaveleft 10s ease infinite;
-o-animation: sharkwaveleft 10s ease infinite;
}

@-webkit-keyframes sharkwaveleft {
    0%   {-webkit-transform: translate(0,0);}
    50%   {-webkit-transform: translate(10px,0);}
    100%   {-webkit-transform: translate(0,0);}
}

@-moz-keyframes sharkwaveleft {
    0%   {-moz-transform: translate(0,0);}
    50%   {-moz-transform: translate(10px,0);}
    100%   {-moz-transform: translate(0,0);}
}

@-o-keyframes sharkwaveleft {
    0%   {-o-transform: translate(0,0);}
    50%   {-o-transform: translate(10px,0);}
    100%   {-o-transform: translate(0,0);}
}

@keyframes sharkwaveleft {
    0%   {transform: translate(0,0);}
    50%   {transform: translate(10px,0);}
    100%   {transform: translate(0,0);}
}

div#sharkwaveright {
background: url(shark_r_wave.png) 50px 0 no-repeat;
width: 568px;
height: 247px;
right: 0;
top: 820px;
z-index: 18;
-webkit-animation: sharkwaveright 8s ease 2s infinite; /* Chrome, Safari, Opera */
animation: sharkwaveright 8s ease 2s infinite;
-moz-animation: sharkwaveright 8s ease 2s infinite;
-o-animation: sharkwaveright 8s ease 2s infinite;
}

@-webkit-keyframes sharkwaveright {
    0%   {-webkit-transform: translate(0,0);}
    50%   {-webkit-transform: translate(10px,0);}
    100%   {-webkit-transform: translate(0,0);}
}

@-moz-keyframes sharkwaveright {
    0%   {-moz-transform: translate(0,0);}
    50%   {-moz-transform: translate(10px,0);}
    100%   {-moz-transform: translate(0,0);}
}

@-o-keyframes sharkwaveright {
    0%   {-o-transform: translate(0,0);}
    50%   {-o-transform: translate(10px,0);}
    100%   {-o-transform: translate(0,0);}
}

@keyframes sharkwaveright {
    0%   {transform: translate(0,0);}
    50%   {transform: translate(10px,0);}
    100%   {transform: translate(0,0);}
}

div#frontwave {
background: url(frontwave.png) 0 0 no-repeat;
width: 280px;
height: 129px;
right: 150px;
top: 790px;
z-index: 20;
-webkit-animation: frontwave 24s linear infinite; /* Chrome, Safari, Opera */
animation: frontwave 24s linear infinite;
-moz-animation: frontwave 24s linear infinite;
-o-animation: frontwave 24s linear infinite;
}

@-webkit-keyframes frontwave {
    0%   {-webkit-transform: translate(0,0); opacity: 0;}
    40%   {opacity: 1;}
    80%   {-webkit-transform: translate(-400px,50px);opacity: 1;}
    100%   {-webkit-transform: translate(-500px,70px); opacity: 0;}
}

@-moz-keyframes frontwave {
    0%   {-moz-transform: translate(0,0); opacity: 0;}
    40%   {opacity: 1;}
    80%   {-moz-transform: translate(-400px,50px);opacity: 1;}
    100%   {-moz-transform: translate(-500px,70px); opacity: 0;}
}

@-o-keyframes frontwave {
    0%   {-o-transform: translate(0,0); opacity: 0;}
    40%   {opacity: 1;}
    80%   {-o-transform: translate(-400px,50px);opacity: 1;}
    100%   {-o-transform: translate(-500px,70px); opacity: 0;}
}

@keyframes frontwave {
    0%   {transform: translate(0,0); opacity: 0;}
    40%   {opacity: 1;}
    80%   {transform: translate(-400px,50px);opacity: 1;}
    100%   {transform: translate(-500px,70px); opacity: 0;}
}

#botlinks {
    position: absolute;
    z-index: 999999;
    top: 900px;
    left: 50px;
}

#botlinks a {
    color: #fff;
    font-size: 1.7em;
    font-weight: bold;
    display: inline-block;
    padding-bottom: 10px;
}