body {
  cursor: pointer;
  overflow: hidden;
  background: #99ccff;
  padding: 0px;
  margin: 0;
}

/*///////////////////////////////////////////////////////////////////////////////////*/

#sun {
	position: absolute;
	top: 0px;
	left: 0%;
	width: 100%;
	height: 80%;
	background-repeat: no-repeat;   
  background: -webkit-radial-gradient(bottom, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);
  background: -moz-radial-gradient(bottom, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);
  background: -ms-radial-gradient(bottom, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);
  
  z-index: 10;
  opacity: 0.5;
  }

#sunDay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80%;
  background-repeat: no-repeat;   
  background: -webkit-radial-gradient(bottom, circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  background: -moz-radial-gradient(bottom, circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  background: -ms-radial-gradient(bottom, circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  
    z-index: 999;
     opacity: 0.5;
}


#sunSet {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80%;
  background-repeat: no-repeat;   
    background: -webkit-radial-gradient(bottom, circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);
    background: -moz-radial-gradient(bottom, circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);
    background: -ms-radial-gradient(bottom, circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);
   
    z-index: 999;
     opacity: 0.3;
}

#sky {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80%;
  z-index: 5; 
   background: -webkit-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%); 
   background: -moz-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%); 
   background: -ms-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%); 
   background: linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%); 
   opacity: 0.52;
}


#horizon {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 80%;
  background-repeat: no-repeat;  
  z-index: 5; 
   background: -webkit-linear-gradient(bottom, rgba(212,87,43,0.9) 0%, rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%);
   background: -moz-linear-gradient(bottom, rgba(212,87,43,0.9) 0%, rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%);
   background: -ms-linear-gradient(bottom, rgba(212,87,43,0.9) 0%, rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%);
   background: linear-gradient(bottom, rgba(212,87,43,0.9) 0%, rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%);
   opacity: 0.99;
}

#waterDistance {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20%;
  background-repeat: no-repeat; 
   background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%);  
   background: -moz-linear-gradient(90deg, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%); 
   background: -ms-linear-gradient(90deg, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%); 
  z-index: 20;
}

#water {
  overflow: hidden;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20%;
  background-repeat: no-repeat;   
    background: -webkit-linear-gradient(bottom, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); 
    background: -moz-linear-gradient(bottom, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); 
    background: -ms-linear-gradient(bottom, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); 
    background: linear-gradient(bottom, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); 

  z-index: 10;
}

#waterReflectionContainer {
  -webkit-perspective: 30;
  perspective: 30;
  -webkit-perspective-origin: 50% -12%;
  perspective-origin: 50% -12%;
  overflow: hidden;
  position: absolute;
  top: 80%;
  left: -3%;
  width: 103%;
  height: 20%;
  z-index: 25;
}

#waterReflectionMiddle {
  position: absolute;
  top: 0px;
  left: -50%;
  width: 200%;
  height: 25%;
  background-repeat: no-repeat;   
   background: -webkit-radial-gradient(50% 0px, rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,0.4) 35%,rgba(176,91,48,0.1) 45%,rgba(141,88,47,0.0) 60%,rgba(116,82,63,0.0) 70%,rgba(44,65,68,0.0) 80%,rgba(7,19,31,0.0) 100%); 
   background: -moz-radial-gradient(50% 0px, rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,0.4) 35%,rgba(176,91,48,0.1) 45%,rgba(141,88,47,0.0) 60%,rgba(116,82,63,0.0) 70%,rgba(44,65,68,0.0) 80%,rgba(7,19,31,0.0) 100%); 
   background: -ms-radial-gradient(50% 0px, rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,0.4) 35%,rgba(176,91,48,0.1) 45%,rgba(141,88,47,0.0) 60%,rgba(116,82,63,0.0) 70%,rgba(44,65,68,0.0) 80%,rgba(7,19,31,0.0) 100%); 
   
  z-index: 999;
  opacity: 0.7;
  -webkit-transform: rotateX(45deg); 
}

#waterReflectionMiddleThin {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;   
   background: -webkit-linear-gradient(left, rgba(69,70,61,0.0) 3%,rgba(216,100,38,0.10) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,rgba(253,254,225,1) 52%, rgba(024,194,214,1) 55%, rgba(034,204,234,0.10) 65%, rgba(034,204,234,0.10) 60%, rgba(034,204,234,0.0) 97%); 
   background: -moz-linear-gradient(left, rgba(69,70,61,0.0) 3%,rgba(216,100,38,0.10) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,rgba(253,254,225,1) 52%, rgba(024,194,214,1) 55%, rgba(034,204,234,0.10) 65%, rgba(034,204,234,0.10) 60%, rgba(034,204,234,0.0) 97%); 
   background: -ms-linear-gradient(left, rgba(69,70,61,0.0) 3%,rgba(216,100,38,0.10) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,rgba(253,254,225,1) 52%, rgba(024,194,214,1) 55%, rgba(034,204,234,0.10) 65%, rgba(034,204,234,0.10) 60%, rgba(034,204,234,0.0) 97%); 
   background: linear-gradient(left, rgba(69,70,61,0.0) 3%,rgba(216,100,38,0.10) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,rgba(253,254,225,1) 52%, rgba(024,194,214,1) 55%, rgba(034,204,234,0.10) 65%, rgba(034,204,234,0.10) 60%, rgba(034,204,234,0.0) 97%); 

  z-index: 999;

  -webkit-transform: rotateX(45deg);
  -moz-transform: rotateX(45deg);
  -ms-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

#division {
  height: 5px;
  width: 100%;
  position: absolute;
  top: 50%;
  bottom: 50%;
  background-color: rgba(000,14,24,0.0);
  z-index: 9999;
  cursor: ns-resize;
}

#coor {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  color: #fff;
}

#oceanRipple {
  background-image: repeating-linear-gradient(175deg,rgba(165,165,165,0.08) 43%, rgba(175,175,175,0.08) 45%, rgba(235,235,235,0.08) 49%, rgba(195,195,195,0.08) 50%, rgba(165,165,165,0.08) 54%);
  opacity: 0.5;
  position: absolute;
  left: 0%;
  bottom: 0px;
  width: 100%;
  height: 50%;
  z-index: 10;
}

#wholeship {
  bottom: 20%;
  height: 105px;
  position: absolute;
  width: 450px;
  z-index: 99999;
}

#ship-container div {
  position: absolute;
}

.hull {
  border-right: 10px solid transparent;
  border-top: 25px solid #cc3333;
  border-left: 16px solid transparent;
  width: 350px;
  height: 0px;
  top: 80px;
  left: 50px;
}

.hull:after {
  content: '';
  display: block;
  position: absolute;
  top: -40px;
  left: -23px;
  border-right: 10px solid transparent;
  border-top: 17px solid #333333;
  border-left: 7px solid transparent;
  width: 376px;
  height: 0px;
}

.hull:before {
  content: '';
  display: block;
  position: absolute;
  top: -43px;
  left: -24px;
  border-right: 1px solid transparent;
  border-top: 3px solid #0066cc;
  border-left: 1px solid transparent;
  width: 393px;
  height: 0px;
}

.hull-top {
  width: 395px;
  height: 5px;
  background: #333333;
  top: -48px;
  left: -25px;
}

.hull-top:after {
  content: '';
  display: block;
  position: absolute;
  height: 5px;
  width: 20px;
  background: red;
  -webkit-transform: skewX(-40deg);
  -moz-transform: skewX(-40deg);
  background: #333333;
  right: -4px;
}

.porthole {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  top: 12px;
  z-index: 2;
}

.p1 {
  left: 25px;
}

.p2 {
  left: 50px;
}

.p3 {
  left: 75px;
}

.p4 {
  left: 100px;
}

.p5 {
  left: 125px;
}

.p6 {
  left: 150px;
}

.p7 {
  left: 175px;
}

.p8 {
  left: 200px;
}

.p9 {
  left: 225px;
}

.p10 {
  left: 250px;
}

.p11 {
  left: 275px;
}

.p12 {
  left: 300px;
}

.p13 {
  left: 325px;
}

.p14 {
  left: 350px;
}

.compartments-lower {
  top: 46px;
  left: 55px;
  background-color: #cccccc;
  border-top: solid 1px #999;
  height: 10px;
  width: 350px;
  position: absolute;
  z-index: 99;
}

.door {
  width: 5px;
  height: 7px;
  background: #999999;
  border-radius: 50% 50% 0 0;
  -webkit-border-radius: 50% 50% 0 0;
  -moz-border-radius: 50% 50% 0 0;
  top: 3px;
  z-index: 2;
}

.d1 {
  left: 25px;
}

.d2 {
  left: 50px;
}

.d3 {
  left: 75px;
}

.d4 {
  left: 100px;
}

.d5 {
  left: 125px;
}

.d6 {
  left: 150px;
}

.d7 {
  left: 175px;
}

.d8 {
  left: 200px;
}

.d9 {
  left: 225px;
}

.d10 {
  left: 250px;
}

.d11 {
  left: 275px;
}

.d12 {
  left: 300px;
}

.d13 {
  left: 325px;
}

.compartments-upper {
  top: 34px;
  left: 65px;
  background-color: #cccccc;
  border-top: solid 2px #999;
  height: 10px;
  width: 325px;
  position: absolute;
  z-index: 99;
}

.cph {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #999999;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  top: 2px;
  z-index: 2;
}

.cp1 {
  left: 27px;
}

.cp2 {
  left: 51px;
}

.cp3 {
  left: 76px;
}

.cp4 {
  left: 102px;
}

.cp5 {
  left: 128px;
}

.cp6 {
  left: 152px;
}

.cp7 {
  left: 177px;
}

.cp8 {
  left: 202px;
}

.cp9 {
  left: 227px;
}

.cp10 {
  left: 252px;
}

.cp11 {
  left: 277px;
}

.cp12 {
  left: 302px;
}

.smokestack {
  top: 0px;
  background-color: #ff9933;
  border-top: solid 4px #333;
  height: 30px;
  width: 15px;
  position: absolute;
  z-index: 99;
}

.ss1 {
  left: 100px;
}

.ss2 {
  left: 175px;
}

.ss3 {
  left: 275px;
}

.ss4 {
  left: 350px;
}

#ship-container {
  -webkit-animation: 5s ease-in-out 0s normal none infinite rockship;
  -moz-animation: 5s ease-in-out 0s normal none infinite rockship;
}

#wholeship {
  -webkit-animation: moveship 30s linear infinite;
  -moz-animation: moveship 30s linear infinite;
  -o-animation: moveship 30s linear infinite;
}

@keyframes moveship {
  from {
    left: -50%;
  }
  to {
    left: 100%;
  }
}

@keyframes rockship {
  0% {
    -webkit-transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-.25deg);
  }
  20% {
    -webkit-transform: rotate(-.5deg);
  }
  30% {
    -webkit-transform: rotate(-.75deg);
  }
  40% {
    -webkit-transform: rotate(-.5deg);
  }
  50% {
    -webkit-transform: rotate(-.25deg);
  }
  60% {
    -webkit-transform: rotate(0deg);
  }
  70% {
    -webkit-transform: rotate(.25deg);
  }
  80% {
    -webkit-transform: rotate(.5deg);
  }
  90% {
    -webkit-transform: rotate(.25deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}



.smoke {
  -webkit-animation-name: smoke;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  background-color: rgba(255, 255, 255, 1);
  bottom: 35px;
  left:0;
  border-radius: 10px;
  height: 15px;
  width: 15px;
}

@-webkit-keyframes smoke {
  0% {
    bottom: 30px;
  }
  50% {
    background-color: rgba(255, 255, 255, 0.2);
    height: 30px;
    width: 30px;
    bottom: 120px;
    left:-50px;
  }
  100% {
    background-color: rgba(255, 255, 255, 0);
    height: 60px;
    width: 60px;
    bottom: 260px;
    left:-100px;
  }
}

.smoke1 {
  -webkit-animation-delay: 1600ms;
  -webkit-animation-duration: 3s;
}

.smoke2 {
  -webkit-animation-delay: 1300ms;
  -webkit-animation-duration: 3s;
}

.smoke3 {
  -webkit-animation-delay: 1000ms;
  -webkit-animation-duration: 3s;
}

.smoke4 {
  -webkit-animation-delay: 700ms;
  -webkit-animation-duration: 3s;
}


#cloud1{
  width:300px;
  height:100px;
  background:#e5f3ff;
  margin:140px 0 0 0;
  border-radius:50px;
   -webkit-transform:translateX(-400px);
  -webkit-animation: move 7s linear infinite ;
  display:block-inline;
}
#cloud1:before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  background:#e5f3ff;
  border-radius:50%;
  margin:-100px 0 0 20px;
}
#cloud1:after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:#e5f3ff;
  border-radius:50%;
  margin:-60px 0 0 165px;
}
#cloud2{
  width:200px;
  height:70px;
  background:#e5f3ff;
  margin:60px 0 0 300px;
  border-radius:50px;
  -webkit-transform:translateX(-520px);
  -webkit-animation: move 12s linear infinite ;
  display:block-inline;
}
#cloud2:before{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:#e5f3ff;
  border-radius:50%;
  margin:-70px 0 0 20px;
}
#cloud2:after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  background:#e5f3ff;
  border-radius:50%;
  margin:-40px 0 0 100px;
}
@-webkit-keyframes move {
  0%{-webkit-transform:translateX(-340px);opacity:0;}
  20%{opacity:1;}
  90%{opacity:1;}
  100%{-webkit-transform:translateX(1650px);opacity:0;}
}