.LastP {
    position: absolute;
    bottom: -64px;
    left: 60px;
    width: 390px;
    font-style: italic;
    font-size: 13px !important;
}

.LastP2 {
position: absolute;
bottom: 111px;
left: 378px;
color: #fff !important;
width: 340px;
font-style: italic;
font-size: 13px !important;
}

#animationBox{
    height: 612px;
    position: relative;
    top: -10px;
    width: 100%;
    z-index: 3;
    overflow-y:hidden;
    overflow-x:scroll;
}

#scrollBar{
    background-color:#11415d;
    position:absolute;
    bottom:0;
    height:43px;
    width:100%;
    z-index:100;
    display:none;
}

#scrollBar .left{
  width:46px;
  height:43px;
  position:absolute;
  left:0;
  background-image:url('../images/animation/left-arrow.png');
  cursor:pointer;
}

#scrollBar .right{
    width:46px;
    height:43px;
    position:absolute;
    right:0;
    background-image:url('../images/animation/right-arrow.png');
    cursor:pointer;
}

#scrollBar #track{
    position:absolute;
    left:46px;
    height:43px;
    width:100%;
}

#scrollBar #track div{
    background-image:url('../images/animation/scrollShark.png');
    position:relative;
    top:0;
    left:0;
    width:111px;
    height:43px;
}


#islandOverlayImage{
    background-image: url("../images/animation/islandOverlay.png");
    height: 133px;
    left: 3476px;
    margin-top: 32px;
    position: absolute;
    width: 512px;
    z-index: 20 !important;
}

#stboat{
    background-image: url("../images/animation/stboat.png");
    height: 111px;
    left: 1280px;
    position: absolute;
    width: 103px;
    z-index: 3 !important;
   /* top: 67px; */
    top:483px;
}


#control{
    background-image: url("../images/animation/control_stage_1.png");
    height: 112px;
    position: absolute;
    right: 5%;
    width: 194px;
    z-index: 0 !important;
}

#control.stage-2{
    background-image: url("../images/animation/control_stage_2.png");
}

#control.clicked{
    background-image: url("../images/animation/control.png");
}

#control.left{
    background-image: url("../images/animation/control_stage_left.png");
}

#control.right{
    background-image: url("../images/animation/control_stage_right.png");
}



#fleet1{
    background-image: url("../images/animation/fleet.png");
    height: 41px;
    left: 4246px;
    position: absolute;
    top: 138px;
    width: 52px;
    z-index: 2 !important;
    display:none;
}

#fleet2{
    background-image: url("../images/animation/fleet.png");
    height: 41px;
    left: 4509px;
    position: absolute;
    top: 138px;
    width: 52px;
    z-index: 2 !important;
    display:none;
}

div#boat2{
    background-image: url("../images/animation/boat.png");
    background-size: 150px 114px;
    height: 114px;
    left: 4314px;
    position: absolute;
    top: 63px;
    width: 150px;
    z-index: 3;
    display:none;
}

#Ani{
    width: 7069px;
    height:100%;
    position:relative;
    overflow:hidden;
}

#waves{
    height: 427px;
    position: absolute;
    top: 574px;
    width: 100%;
}

#waves div.front{
    width:120%;
    height:100%;
    background-image:url('../images/animation/wave-front.png');
    position:absolute;
    top:0;
    z-index:3;
    opacity:1.0;
}

#waves div.back{
    width:120%;
    height:100%;
    background-image:url('../images/animation/wave-back.png');
    position:absolute;
    top:-22px;
    left:-70px;
    z-index:2;
}

#clouds{
    height: 150px;
    position: absolute;
    top: 900;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

#clouds .cloud{
    width:193px;
    height:111px;
    color:white;
    position:absolute;
    display:none;
    background-image: url('../images/animation/cloud.png');
}

#clouds .cloud.small{
    width:100px;
    height:58px;
    color:white;
    position:absolute;
    display:none;
    background-image: url('../images/animation/cloud.png');
    background-size:100px 58px;
}

#clouds .cloud.seagull{
    width:64px;
    height:101px;
    color:white;
    position:absolute;
    display:none;
    background-image: url('../images/animation/seagull.png');
    background-size:64px 101px;
}

#clouds .cloud.seagull-small{
    width:33px;
    height:52px;
    color:white;
    position:absolute;
    display:none;
    background-image: url('../images/animation/seagull.png');
    background-size:33px 52px;
}

div#landmass{
    background-image: url('../images/animation/islandBackground.png');
    width:7070px;
    height:850px;
    position:absolute;
    z-index:10;
    top:800px;
}

div#plantLife{
    background-image: url('../images/animation/plantLife.png');
    width:7070px;
    height:850px;
    position:absolute;
    z-index:10;
    display:none;
}

div#seafloor{
    background-image: url('../images/animation/seafloor.png');
    width:7070px;
    height:850px;
    position:absolute;
    z-index:10;
    display:none;
}

div#foreground{
    background-image: url('../images/animation/foreground.png');
    width:7070px;
    height:850px;
    position:absolute;
    z-index:20;
    display:none;
}

div#scholl-of-fish{
    background-image: url("../images/animation/schoolFish.png");
    height: 270px;
    width: 734px;
    z-index: 9;
    position: absolute;
    bottom: -35px;
    left: 1198px;
    display:none;
}

div#textBoxes h3{
    font-family:'Passion One';
    font-size:45px;
}

div#textBoxes h4{
    font-family:'Passion One';
    font-size:41px;
}

div#textBoxes p{
    font-family:'Maven Pro';
    font-size:16px;
}

div#textBoxes p strong{
    font-weight:bold;
}

div#textBoxes div{
    position:absolute;
    display:none;
}

div#textBoxes .one{
    color: #FFFFFF;
    height: 225px;
    left:210px;
    top: 295px;
    width: 220px;
    z-index: 20;
}

div#textBoxes .two{
    color: #FFFFFF;
    height: 225px;
    left: 639px;
    top: 471px;
    z-index: 20;
    text-align: center;
}

div#textBoxes .two p{
    color:#79a4bf;
}

div#textBoxes .two p strong {
color: #fff;
font-size: 13px;
}
div#textBoxes .two h3{
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5);
}

div#textBoxes .three{
    background-image: url("../images/animation/text-three.png");
    color: #FFFFFF;
    height: 128px;
    left: 2042px;
    top: 386px;
    width: 179px;
    z-index: 20;
}

div#textBoxes .four{
    color: #FFFFFF;
    height: 334px;
    left: 3480px;
    text-align: center;
    top: 206px;
    width: 495px;
    z-index: 20;
    -webkit-font-smoothing: antialiased;
    font-smooth: always;
    font-weight: normal;
}

div#textBoxes .four div{
    position:relative;
    padding-bottom:40px;
}

div#textBoxes .four div small{
    font-family:'Maven Pro';
    font-size:15px;
    display:block;
    margin-top:5px;
}

div#textBoxes .four div p strong {
    font-family:'Passion One';
    font-size:24px !important;
    line-height:28px
}

div#textBoxes .four div.top h3{
    font-size:70px !important;
}

div#textBoxes .four div.bottom h3{
    font-size:60px !important;
}

div#textBoxes .last{
    color: #FFFFFF;
    display: block !important;
    height: 225px;
    right: 390px;
    text-align: left;
    top: 258px;
    z-index:93;
    width: 381px;
}

div#textBoxes .last div{
    display:block !important;
}

div#textBoxes .last p{
    padding:5px 35px 5px 0px;
    text-align:left;
    margin-bottom:15px;
}

div#textBoxes .last a.sign{
    background-color:#d02c00;
    color:white;
    display:block;
    padding:10px 20px;
    font-family:'Passion One';
    font-size:22px;
    float:left;
}

div#textBoxes .last a.sign:hover {
    background-color: white;
    color:#d02c00;
    display:block;
    padding:10px 20px;
    font-family:'Passion One';
    font-size:22px;
    float:left;
}

div#textBoxes .last div.share{
color: #FFFFFF !important;
display: block !important;
font-family: 'Passion One';
font-size: 20px;
position: absolute;
right: 0;
width: 210px;
top: 109px;
}

div#textBoxes .last div.links{
    display: block;
    position: absolute;
    top: 180px;
    width:101%;
}

div#textBoxes .last div.links a{
    color:white;
    font-family:'Maven Pro';
    font-size:18px;
    width:47%;
    display:inline-block;
    float:left;
    background-image: url("../images/animation/sharklink.png");
    background-repeat:no-repeat;
    background-position:0 0 ;
    text-indent:75px;
    margin:5px 0px;
    padding:5px 0;
}

div#textBoxes .last div.links a:hover {
    color: white;
    background-image: url("../images/animation/sharklinkb.png");
}


div#textBoxes .longlineBottom{
    display: block !important;
    left: 4314px;
    text-align: left;
    top: 535px;
    z-index: 11;
    color:white;
}

div#textBoxes .longlineRight{
    color: #FFFFFF;
    display: block !important;
    left: 4927px;
    text-align: left;
    top: 190px;
    z-index: 11;
    width: 285px;
}

div#textBoxes .longlineRight h3{
    font-size:24px !important;
}

div#textBoxes .longlineRight p{
    font-family:'Maven Pro';
    font-size:17px;
    line-height:20px;
    padding-bottom:12px;
}

div#textBoxes .longlineRight strong{
    font-family: 'Passion One';
    font-size:24px;
}

div#textBoxes .longlineRight p.large{
    font-family:'Maven Pro';
    font-size:17px;
    line-height:20px;
    position:absolute;
    top:180px;
}

div#textBoxes .longlineRight p.large small {
font-size: 14px;
line-height: 15px;
display: block;
}

div#textBoxes .longlineRight #countUp{
    font-size:80px;
    display:block;
    font-family:'Passion One';
    clear:both !important;
    position:relative;
    top:-14px;
}

div#sharks{
    height: 298px;
    left: 519px;
    position: absolute;
    top: 200px;
    width: 1085px;
    z-index: 999;
}

div#sharks .blueShark{
    background-image: url("../images/animation/blue-shark.png");
    width:313px;
    height:123px;
    position: absolute;
    top:0;
    z-index:10;
}

div#sharks .shortfitmako{
    background-image: url("../images/animation/shortfin-mako.png");
    width:346px;
    height:133px;
    position: absolute;
    top:0;
    z-index:10;
}

div#sharks .tope{
    background-image: url("../images/animation/tope-shark.png");
    width:285px;
    height:111px;
    position: absolute;
    top:0;
    z-index:10;
}

div#sharks .catshark{
    background-image: url("../images/animation/cat-shark.png");
    width:311px;
    height:83px;
    position: absolute;
    top:165px;
    z-index:9;
}

div#sharks .smoothound{
    background-image: url("../images/animation/smoothhound-shark.png");
    width:326px;
    height:85px;
    position: absolute;
    top:165px;
    z-index:9;
}

div#sharks .blueShark.hover{
    background-image: url("../images/animation/blue-shark2.png");
}

div#sharks .shortfitmako.hover{
    background-image: url("../images/animation/shortfin-mako2.png");
}

div#sharks .tope.hover{
    background-image: url("../images/animation/tope-shark2.png");
}

div#sharks .catshark.hover{
    background-image: url("../images/animation/cat-shark2.png");
}

div#sharks .smoothound.hover{
    background-image: url("../images/animation/smoothhound-shark2.png");
}




div.round-fish-school{
    background-image: url("../images/animation/fish-school-round.png");
    height: 403px;
    left: 1905px;
    position: absolute;
    top: 207px;
    width: 435px;
    z-index: 9;
}


div.stat-two-shark{
    background-image: url("../images/animation/bigSharkTwoWhite.png");
    top: 240px;
    left: 1856px;
    height:207px;
    width:499px;
    position: absolute;
    z-index:10;
    display:none;
}

div.stat-two-shark-orange{
    top: 240px;
    left: 1856px;
    height:207px;
    width:499px;
    position: absolute;
    z-index:10;
}

div.stat-two-shark-orange div.img{
  width:0%;
  overflow:hidden;
}

div#map{
    background-image: url("../images/animation/map.png");
    height: 398px;
    left: 2703px;
    position: absolute;
    top: 700px;
    width: 535px;
    z-index: 9;
}

div#map-pie-box{
    height: 184px;
    left: 2747px;
    position: absolute;
    top: 316px;
    width: 184px;
    z-index: 9;
}

img#map-stats-overlay {
    height: 398px;
    left: 2703px;
    position: absolute;
    top: 188px;
    width: 535px;
    z-index: 20;
}

div#boat{
    background-image: url("../images/animation/boat.png");
    height: 137px;
    left: 3434px;
    position: absolute;
    top: 41px;
    width: 181px;
    z-index: 2;
}

div#mapBubbles,
div#mapBubblesSink{
    height: 398px;
    left: 2703px;
    position: absolute;
    top: 188px;
    width: 535px;
    z-index: 10;
}

div#mapBubbles div{
    background-image: url("../images/animation/map-bubble.png");
    width:43px;
    height:40px;
    position: absolute;
    color:white;
    font-size:19px;
    text-align:center;
    padding-top:12px;
    font-family:'Passion One';
    display:none;
}

div#mapBubblesSink div{
    width:6px;
    height:6px;
    position: absolute;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    background-color:#c83e19;
    display:none;
}

div#mapBubbles div.open{
    width:43px;
    height:40px;
}

div#mapBubbles div.Portugal{
    left: 234px;
    top: 251px;
}

div#mapBubbles div.Spain{
    left: 270px;
    top: 286px;
}

div#mapBubbles div.France{
    left: 323px;
    top: 223px;
}

div#mapBubbles div.UK{
    left: 299px;
    top: 144px;
}

div#mapBubbles div.Ireland{
    left: 250px;
    top: 120px;
}

div#mapBubbles div.Belgium{
    left: 343px;
    top: 162px;
}

div#mapBubbles div.Italy{
    left: 395px;
    top: 258px;
}

div#mapBubbles div.Greece{
    left: 458px;
    top: 286px;
}

div#mapBubblesSink div.Portugal{
    left: 251px;
    top: -10px;
}

div#mapBubblesSink div.Spain{
    left: 287px;
    top: -10px;
}

div#mapBubblesSink div.France{
    left: 340px;
    top: -10px;
}

div#mapBubblesSink div.UK{
    left: 316px;
    top: -10px;
}

div#mapBubblesSink div.Ireland{
    left: 267px;
    top: -10px;
}

div#mapBubblesSink div.Belgium{
    left: 360px;
    top: -10px;
}

div#mapBubblesSink div.Italy{
    left: 414px;
    top: -10px;
}

div#mapBubblesSink div.Greece{
    left: 473px;
    top: -10px;
}

div#graph{
    background-image: url("../images/animation/graphbackground.png");
    height: 358px;
    left: 5515px;
    position: absolute;
    top: 206px;
    width: 615px;
    z-index: 10;
    display:none;
}

div#pieoverlay{
    background-image: url("../images/animation/pieoverlay.png");
    height: 174px;
    left: 2754px;
    position: absolute;
    top: 290px;
    width: 173px;
    z-index: 10;
    display:none;
}

div#graphLable{
    height: 358px;
    left: 5276px;
    position: absolute;
    top: 221px;
    width: 222px;
    z-index: 10;
    color: white;
    text-align: right;
    font-size:28px;
    font-family:'Passion One';
    display:none;
}

div#graphLable img{
    display:none;
}

div#graphLable img.Green{
    position: absolute;
    top: 75px;
    left: 105px;
}

div#graphLable img.Red{
    position: absolute;
    top: 120px;
    left: 105px;
}

div#graphLable img.Blue{
    position: absolute;
    top: 165px;
    left: 105px;
}

div.GreenLine{
    background-image: url("../images/animation/graph_green_line.png");
    height: 358px;
    left: 5515px;
    position: absolute;
    top: 206px;
    width: 0;
    z-index: 11;
}

div.blueLine{
    background-image: url("../images/animation/graph_blue_line.png");
    height: 358px;
    left: 5515px;
    position: absolute;
    top: 206px;
    width: 0;
    z-index: 11;
}

div.RedLine{
    background-image: url("../images/animation/graph_red_line.png");
    height: 358px;
    left: 5515px;
    position: absolute;
    top: 206px;
    width: 0;
    z-index: 11;
}

div#graphPoints{
    height: 358px;
    left: 5515px;
    position: absolute;
    top: 206px;
    width: 595px;
}

div#graphPoints div.point {
    height:10px;
    width:11px;
    background-image: url("../images/animation/graph_dot.png");
    position:absolute;
    z-index:20;
    display:none;
}

div#graphPoints div.point div{
    background-image: url("../images/animation/graphOverlay.png");
    color: #0E2F70;
    font-family: 'Passion One';
    font-size: 20px;
    height: 55px;
    left: -58px;
    position: relative;
    top: -54px;
    width: 65px;
    text-align: center;
    padding-top: 5px;
    display:none;
}

div#graphPoints div.point:hover div{
    display:block !important;
}

div#graphPoints div.point.green1{ left: 50px; top: 69.5px; }
div#graphPoints div.point.green2{ left: 94px; top: 60.5px; }
div#graphPoints div.point.green3{ left: 137px; top: 122px; }
div#graphPoints div.point.green4{ left: 179px; top: 130px; }
div#graphPoints div.point.green5{ left: 222px; top: 134px; }
div#graphPoints div.point.green6{ left: 265px; top: 155px; }
div#graphPoints div.point.green7{ left: 308px; top: 139px; }
div#graphPoints div.point.green8{ left: 351px; top: 130px; }
div#graphPoints div.point.green9{ left: 393px; top: 124px; }
div#graphPoints div.point.green10{ left: 437px; top: 107px; }
div#graphPoints div.point.green11{ left: 480px; top: 60.5px; }
div#graphPoints div.point.green12{ left: 523px; top: 29.5px; }
div#graphPoints div.point.green13{ left: 566px; top: 25.5px; }

div#graphPoints div.point.red1{ left: 50px; top: 155.5px; }
div#graphPoints div.point.red2{ left: 94px; top: 148px; }
div#graphPoints div.point.red3{ left: 137px; top: 203px; }
div#graphPoints div.point.red4{ left: 179px; top: 204px; }
div#graphPoints div.point.red5{ left: 222px; top: 202px; }
div#graphPoints div.point.red6{ left: 265px; top: 225px; }
div#graphPoints div.point.red7{ left: 308px; top: 226px; }
div#graphPoints div.point.red8{ left: 351px; top: 210px; }
div#graphPoints div.point.red9{ left: 393px; top: 203px; }
div#graphPoints div.point.red10{ left: 437px; top: 184px; }
div#graphPoints div.point.red11{ left: 480px; top: 142px; }
div#graphPoints div.point.red12{ left: 523px; top: 114px; }
div#graphPoints div.point.red13{ left: 566px; top: 109px; }

div#graphPoints div.point.blue1{ left: 50px; top: 273px; }
div#graphPoints div.point.blue2{ left: 94px; top: 285px; }
div#graphPoints div.point.blue3{ left: 137px; top: 294px; }
div#graphPoints div.point.blue4{ left: 179px; top: 289px; }
div#graphPoints div.point.blue5{ left: 222px; top: 284px; }
div#graphPoints div.point.blue6{ left: 265px; top: 282px; }
div#graphPoints div.point.blue7{ left: 308px; top: 277px; }
div#graphPoints div.point.blue8{ left: 351px; top: 260px; }
div#graphPoints div.point.blue9{ left: 393px; top: 251px; }
div#graphPoints div.point.blue10{ left: 437px; top: 231px; }
div#graphPoints div.point.blue11{ left: 480px; top: 186px; }
div#graphPoints div.point.blue12{ left: 523px; top: 151px; }
div#graphPoints div.point.blue13{ left: 566px; top: 139px; }


div#dropLines{
    left: 4173px;
    position: absolute;
    top: 159px;
    z-index: 10;
}
div#dropLines img{
    float:right;
    width:1%;
    height:256px;
}

div#dropLineBoat{
    background-image: url("../images/animation/boat.png");
    height: 137px;
    left: 4723px;
    position: absolute;
    top: 41px;
    width: 181px;
    z-index: 2;
}

div#fishSetOne{
    background-image: url("../images/animation/fishsetone.png");
    height: 211px;
    left: 4291px;
    position: absolute;
    top: 272px;
    width: 552px;
    z-index: 10;
    display:none;
}

div#fishSetTwo{
    background-image: url("../images/animation/fishsettwo.png");
    display: none;
    height: 310px;
    left: 4223px;
    position: absolute;
    top: 247px;
    width: 583px;
    z-index: 11;
}

#mobileImage{
    z-index:9999;
    width:100%;
    position:absolute;
    display:none;
}

#animationBox.mobile{
    height:675px;
}