#sail-scene {
	
}

#sailboat {
	margin-top: -60px;
   //animation: boat 2s infinite ease-in-out alternate;
	animation: rockboat 4s infinite ease-in-out alternate;
}
@keyframes rockboat {
  0% {
    transform: rotate(0deg) translateY(0px);
  }
  100% {
    transform: rotate(4deg) translateY(3px);
  }
}

.side,
.strip {
  fill: #CD564C;
}

.cap {
  fill: #ffffff;
}

.captain {
  fill: #ABD8E6;
}

.sail1 {
  fill: #1E90C7;
  //animation: sail 2.5s infinite ease-in-out alternate;
}
.sail2 {
 	fill: #ffffff;
   //animation: sail 1.8s infinite ease-in-out alternate;
}

/*
.sailpost {
  animation: sailpost 2.5s infinite ease-in-out alternate;
} 
*/


@keyframes boat {
  0% {
    transform: translateY(-3px);
	 transform: rotate(-0.5deg);
  }
  100% {
    transform: translateY(3px);
	 transform: rotate(0.5deg);
	 
  }
}


@keyframes sailpost {
  0% {
    transform: translateX(0px) skewX(0deg);
  }
  100% {
    transform: translateX(1px) skewX(1deg);
  }
}


#whale {
	position: absolute;
	top: 100px;
	left: 200px;
}


.bottom {
  animation: bottom 2.3s infinite ease-in-out alternate;
}

.top {
  animation: whale 2.3s infinite ease-in-out alternate;
}

.ripple {
  display:none;
}

/*
.top,
.bottom {
   animation: ripple 2s infinite ease-in-out alternate;
}
*/ 

@keyframes whale {
  0% {
        transform: skewX(-6deg) ;
  }
  100% {
      transform: skewX(6deg);
  }
}

@keyframes bottom {
  0% {
        transform: scale(1.00) translateX(-19px);
  }
  100% {
      transform: scale(1.101) translateX(-7px) translateY(-17px);
  }
}

@keyframes sail {
  0% {
    transform: translateX(1px) skewX(-0.5deg);
  }
  100% {
    transform: translateX(1px) skewX(0.5deg);
  }
}


#sharkfin {
  position: absolute;
  top: 60px;
  left: 20px;
  animation: shark 10s;
  animation-delay: 3s;
  transform: rotate(25deg);
  display:none;
}



@keyframes shark {
   0% {
    transform: rotate(25deg);
    margin-right: 0px;
    opacity: 1.0;
    
  }
  90% {
    margin-right: 300px;
    transform: scale(0.1) rotate(25deg);
  }
  95% {
    transform: scale(0.0) rotate(25deg);
  }
}

#buoy {
  position: absolute;
  left: 35px;
  top: 30px;
  animation: buoy 2.5s infinite ease-in-out alternate;
}

@keyframes buoy {
  0% {
    transform: rotate(-5deg) translateY(0px);
  }
  100% {
    transform: rotate(5deg) translateY(3px);
  }
}