#banner {
  width:160px;
  height:600px;
  margin:40px auto 40px;
  background-image:url(../images/background.png);
  background-position:center;
  background-repeat: no-repeat;
  overflow:hidden;
  position:relative;
  box-shadow:1px 1px 4px rgba(200,164,40,0.8);
  text-align:center;  
}

#banner h2 {
  font-family:"Myriad Pro", Arial, serif;
  color:#622d15;
  font-size:40px;
  font-weight:600;
  line-height:40px;
  margin-top:110px;
  -webkit-animation:h2-animation 5s 1 ease-in-out;
  -moz-animation:h2-animation 5s 1 ease-in-out;
  -o-animation:h2-animation 5s 1 ease-in-out;  
  animation:h2-animation 5s 1 ease-in-out;
  
}

#banner h2 .smaller {
  
  font-size:38px; line-height:36px;font-weight:normal;
}

#banner ul#crab {
  width:96px;
  height:84px;
  overflow:visible;
  z-index:1;
  position:absolute;
  -webkit-animation:boat-in-animation 15s 1 ease-in-out;
  -moz-animation:boat-in-animation 15s 1 ease-in-out;  
  animation:boat-in-animation 15s 1 ease-in-out;
}

#banner ul#crab li{
  width:96px;
  height:84px;
  z-index:2;
  position:relative;
  top:0px;
left:0px;
background-image:url(../images/boat.png);  
background-repeat:no-repeat; 
-webkit-animation:boat-animation 2.5s infinite ease-out;
-moz-animation:boat-animation 2.5s infinite ease-out;
animation:boat-animation 2.5s infinite ease-out;

}

#banner #water {
  position:absolute;
  top:382px;
  -webkit-animation:water-in-animation 2s 1 ease-out;
  -moz-animation:water-in-animation 2s 1 ease-out;
  animation:water-in-animation 2s 1 ease-out;
  
}

#banner #water-back {
  width:200px;
  height:75px;
  background-image:url(../images/water-back.png);
  background-repeat:repeat-x;
  z-index:1;
  position:absolute;
  top:0px;
  left:-22px;
  -webkit-animation:water-back-animation 3s infinite ease-in-out;
  -moz-animation:water-back-animation 3s infinite ease-in-out;
  animation:water-back-animation 3s infinite ease-in-out;
  
}

#banner #water-front {
  width:200px;
  height:368px;
  background-image:url(../images/water-front.png);
  background-repeat:repeat-x;
  z-index:3;
  position:absolute;
  top:2px;
  left:-30px;
  -webkit-animation:water-front-animation 2s infinite ease-in-out;
  -moz-animation:water-front-animation 2s infinite ease-in-out;
  animation:water-front-animation 2s infinite ease-in-out;
  
}

#banner #content {
  width:100%;
  position:absolute;
  bottom:0px;
  z-index:4;
  -webkit-animation:content-in-animation 15s 1 ease-in-out;
  -moz-animation:content-in-animation 15s 1 ease-in-out;
  animation:content-in-animation 15s 1 ease-in-out;
  
}

#banner #content h3{
  color:#ffffff;
  font-family:"Myriad Pro", Arial, serif;
  font-style:italic;
  font-size:33px;
  line-height:32px;
  text-shadow:0px 1px 1px #097381;
  
}

#banner #content a:link, #banner #content a:visited {
  display:inline-block;
  height: 20px;
  padding:15px;
   font-family:"Myriad Pro", Arial, serif;
   font-style:italic;
    font-size:18px;
  line-height:18px;
  color:#ffffff;
  background-color:#ffffff;
  border-radius:4px;
  margin:20px 0px;
  border:1px solid #ffffff;
  background:rgba(255,255,255,0.2);
  
}

#banner #content a:hover, #banner #content a:active {
  background-color:#ffffff;
  color:#00c0d9;
  
}

/* webkit animations */

@-webkit-keyframes h2-animation{
  0% {opacity:0; font-size:0px;}
  90% {opacity:0; font-size:0px;}
  95% {opacity:1; font-size:40px;}
  100% {font-size:40px;}  
  
}

@-webkit-keyframes content-in-animation{
  0% {opacity:0;}
  90% {opacity:0;}
  95% {opacity:1;}
  100% {opacity:1;}  
  
}

@-webkit-keyframes water-in-animation{
  0% {top:600px; left:-10px;}
  100% {top:380px; left:0px;}  
  
}

@-webkit-keyframes water-front-animation{
  0% {top:2px; left:-30px;}
  25% {top:0px; left:-32px;}
  75% {top:4px; left:-34px;}
  100% {top:1px; left:-30px;}    
}

@-webkit-keyframes water-back-animation{
  0% {top:0px; left:-20px;}
  25% {top:-2px; left:-22px;}
  75% {top:2px; left:-24px;}
  100% {top:-1px; left:-20px;}    
}

@-webkit-keyframes boat-in-animation{
  0% {left:-150px;}
  25% {left:-150px;}
  75% {left:310px;}
  75.0001% {left:-100px;}  
  90% {left:10px;}
  100% {left:10px;}  
}

@-webkit-keyframes boat-animation{
  0% {top:0px;left:0px;}
  25% {top:-2px;left:-2px;}
  75% {top:2px;left:-2px;}
  100% {top:-1px;left:1px;}  
}


/* moz animations */

@-moz-keyframes h2-animation{
  0% {opacity:0; font-size:0px;}
  90% {opacity:0; font-size:0px;}
  95% {opacity:1; font-size:40px;}
  100% {font-size:40px;}  
  
}

@-moz-keyframes content-in-animation{
  0% {opacity:0;}
  90% {opacity:0;}
  95% {opacity:1;}
  100% {opacity:1;}  
  
}

@-moz-keyframes water-in-animation{
  0% {top:600px; left:-10px;}
  100% {top:380px; left:0px;}  
  
}

@-moz-keyframes water-front-animation{
  0% {top:2px; left:-30px;}
  25% {top:0px; left:-32px;}
  75% {top:4px; left:-34px;}
  100% {top:1px; left:-30px;}    
}

@-moz-keyframes water-back-animation{
  0% {top:0px; left:-20px;}
  25% {top:-2px; left:-22px;}
  75% {top:2px; left:-24px;}
  100% {top:-1px; left:-20px;}    
}

@-moz-keyframes boat-in-animation{
  0% {left:-150px;}
  25% {left:-150px;}
  75% {left:310px;}
  75.0001% {left:-100px;}  
  90% {left:10px;}
  100% {left:10px;}  
}

@-moz-keyframes boat-animation{
  0% {top:0px;left:0px;}
  25% {top:-2px;left:-2px;}
  75% {top:2px;left:-2px;}
  100% {top:-1px;left:1px;}  
}

/* animations */

@keyframes h2-animation{
  0% {opacity:0; font-size:0px;}
  90% {opacity:0; font-size:0px;}
  95% {opacity:1; font-size:40px;}
  100% {font-size:40px;}  
  
}

@keyframes content-in-animation{
  0% {opacity:0;}
  90% {opacity:0;}
  95% {opacity:1;}
  100% {opacity:1;}  
  
}

@keyframes water-in-animation{
  0% {top:600px; left:-10px;}
  100% {top:380px; left:0px;}  
  
}

@keyframes water-front-animation{
  0% {top:2px; left:-30px;}
  25% {top:0px; left:-32px;}
  75% {top:4px; left:-34px;}
  100% {top:1px; left:-30px;}    
}

@keyframes water-back-animation{
  0% {top:0px; left:-20px;}
  25% {top:-2px; left:-22px;}
  75% {top:2px; left:-24px;}
  100% {top:-1px; left:-20px;}    
}

@keyframes boat-in-animation{
  0% {left:-150px;}
  25% {left:-150px;}
  75% {left:310px;}
  75.0001% {left:-100px;}  
  90% {left:10px;}
  100% {left:10px;}  
}

@keyframes boat-animation{
  0% {top:0px;left:0px;}
  25% {top:-2px;left:-2px;}
  75% {top:2px;left:-2px;}
  100% {top:-1px;left:1px;}  
}