Difference between revisions of "Team:FAFU-CHINA/cat/css/style"

(Created page with "→‎Begin Ad 1: #ad-1 { width: 100%; height: 320px; margin: 0px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background-r...")
 
 
Line 1: Line 1:
 
/* Begin Ad 1 */
 
/* Begin Ad 1 */
  
 +
#sideMenu, #top_title {
 +
        display: none;
 +
    }
 
#ad-1 {
 
#ad-1 {
 
width: 100%;
 
width: 100%;

Latest revision as of 03:13, 20 October 2016

/* Begin Ad 1 */

  1. sideMenu, #top_title {
       display: none;
   }
  1. ad-1 {

width: 100%; height: 320px; margin: 0px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background-repeat: repeat; overflow: hidden; position: relative; box-shadow: 1px 1px 4px rgba(0,0,0,0.4); }

  1. ad-1 #content {

width: 1200px; float: none; text-align: center; z-index: 4; position: relative; overflow: visible; } #ad-1 #content h2 { font-family: 'Alfa Slab One', cursive; color: #d51313; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px #fff; -webkit-animation: h2-animation 7s 1 ease-in-out; -moz-animation: h2-animation 7s 1 ease-in-out; -o-animation: h2-animation 7s 1 ease-in-out; -ms-animation: h2-animation 7s 1 ease-in-out; animation: h2-animation 7s 1 ease-in-out; } #ad-1 #content h3 { font-family: 'Boogaloo', cursive; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; margin: 0 auto; -webkit-animation: h3-animation 10s 1 ease-in-out; -moz-animation: h3-animation 10s 1 ease-in-out; -o-animation: h3-animation 10s 1 ease-in-out; -ms-animation: h3-animation 10s 1 ease-in-out; animation: h3-animation 10s 1 ease-in-out; } #ad-1 #content form { margin: 30px 0 0 6px; position: relative; -webkit-animation: form-animation 12s 1 ease-in-out; -moz-animation: form-animation 12s 1 ease-in-out; -o-animation: form-animation 12s 1 ease-in-out; -ms-animation: form-animation 12s 1 ease-in-out; animation: form-animation 12s 1 ease-in-out; } #ad-1 #content #email { width: 158px; height: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: 'Lucida Grande', sans-serif; color: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border:1px solid #a2917d; outline: none; box-shadow: -1px -1px 1px #fff; background-color: #c7b29b; background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); background-image: -o-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); background-image: -moz-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); background-image: -webkit-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); background-image: -ms-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); } #ad-1 #content #email:focus { background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); background-image: -o-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); background-image: -moz-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); background-image: -webkit-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); background-image: -ms-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);

} #ad-1 #content #submit { height: 50px; float: left; padding: 0 20px; font-size: 20px; font-family: 'Boogaloo', cursive; color: #137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%); background-image: -o-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%); background-image: -moz-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%); background-image: -webkit-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%); background-image: -ms-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%); cursor: pointer; } #ad-1 #content #submit:hover { background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); }

  1. ad-1 ul#water{

} #ad-1 li#water-back { width: 3000px; height: 84px; background-image: url(../images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; left: -20px; -webkit-animation: water-back-animation 3s infinite ease-in-out; -moz-animation: water-back-animation 3s infinite ease-in-out; -o-animation: water-back-animation 3s infinite ease-in-out; -ms-animation: water-back-animation 3s infinite ease-in-out; animation: water-back-animation 3s infinite ease-in-out; } #ad-1 li#water-front { width: 3000px; height: 158px; background-image: url(../images/ad-1/water-front.png); background-repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left:-30px; -webkit-animation: water-front-animation 2s infinite ease-in-out; -moz-animation: water-front-animation 2s infinite ease-in-out; -o-animation: water-front-animation 2s infinite ease-in-out; -ms-animation: water-front-animation 2s infinite ease-in-out; animation: water-front-animation 2s infinite ease-in-out; }

  1. ad-1 ul#boat {

width: 249px; height: 215px; z-index: 2; position: absolute; bottom: 25px; left: 20px; overflow: visible; -webkit-animation: boat-in-animation 3s 1 ease-out; -moz-animation: boat-in-animation 3s 1 ease-out; -o-animation: boat-in-animation 3s 1 ease-out; -ms-animation: boat-in-animation 3s 1 ease-out; animation: boat-in-animation 3s 1 ease-out; } #ad-1 ul#boat li { width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); position: absolute; bottom: 0px; left: 0px; overflow: visible; -webkit-animation: boat-animation 2s infinite ease-in-out; -moz-animation: boat-animation 2s infinite ease-in-out; -o-animation: boat-animation 2s infinite ease-in-out; -ms-animation: boat-animation 2s infinite ease-in-out; animation: boat-animation 2s infinite ease-in-out; } #ad-1 #question-mark { width: 24px; height: 50px; background-image: url(../images/ad-1/question-mark.png); position: absolute; right: 34px; top: -30px; -webkit-animation: question-mark-animation 4s 1 ease-in-out; -moz-animation: question-mark-animation 4s 1 ease-in-out; -o-animation: question-mark-animation 4s 1 ease-in-out; -ms-animation: question-mark-animation 4s 1 ease-in-out; animation: question-mark-animation 4s 1 ease-in-out; }

  1. ad-1 #clouds {

position: absolute; top: 0px; z-index: 0; }

  1. ad-1 #cloud-group-1 {

width: 100%; position: absolute; left:0px; -webkit-animation: cloud-group-1-animation 30s infinite linear; -moz-animation: cloud-group-1-animation 30s infinite linear; -o-animation: cloud-group-1-animation 30s infinite linear; -ms-animation: cloud-group-1-animation 30s infinite linear; animation: cloud-group-1-animation 30s infinite linear; }

  1. ad-1 #cloud-group-2 {

width: 100%; position: absolute; left: 1200px; -webkit-animation: cloud-group-2-animation 30s infinite linear; -moz-animation: cloud-group-2-animation 30s infinite linear; -o-animation: cloud-group-2-animation 30s infinite linear; -ms-animation: cloud-group-2-animation 30s infinite linear; animation: cloud-group-2-animation 30s infinite linear; } #ad-1 .cloud-1 { width: 172px; height: 121px; background-image: url(../images/ad-1/cloud-1.png); position: absolute; top: 10px; left: 40px; } #ad-1 .cloud-2 { width: 121px; height: 75px; background-image: url(../images/ad-1/cloud-2.png); position: absolute; top: -25px; left: 300px; } #ad-1 .cloud-3 { width: 132px; height: 105px; background-image: url(../images/ad-1/cloud-3.png); position: absolute; top: -5px; left: 530px; }

/* WebKit Animations */

@-webkit-keyframes h2-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes h3-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes form-animation { 0% {opacity: 0; right: -400px;} 90% {opacity: 0; right: -400px;} 95% {opacity: 0.5; right: 20px;} 100% {opacity: 1; right: 0px;} } @-webkit-keyframes boat-in-animation { 0% {left: -200px;} 100% {left: 20px;} } @-webkit-keyframes boat-animation { 0% {bottom: 0px; left: 0px;} 25% {bottom: -2px; left: -2px;} 70% {bottom: 2px; left: -4px;} 100% {bottom: -1px; left: 0px;} } @-webkit-keyframes question-mark-animation { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes cloud-group-1-animation { 0% {left: 0px;} 99.9999% {left: -720px;} 100% {left: 0px;} } @-webkit-keyframes cloud-group-2-animation { 0% {left: 720px;} 99.9999% {left: 0px;} 100% {left: 720px;} } @-webkit-keyframes water-back-animation { 0% {bottom: 10px; left: -20px;} 25% {bottom: 8px; left: -22px;} 70% {bottom: 12px; left: -24px;} 100% {bottom: 9px; left: -20px;} } @-webkit-keyframes water-front-animation { 0% {bottom: -70px; left: -30px;} 25% {bottom: -68px; left: -32px;} 70% {bottom: -72px; left: -34px;} 100% {bottom: -69px; left: -30px;} }

/* FireFox Animations */

@-moz-keyframes h2-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes h3-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes form-animation { 0% {opacity: 0; right: -400px;} 90% {opacity: 0; right: -400px;} 95% {opacity: 0.5; right: 20px;} 100% {opacity: 1; right: 0px;} } @-moz-keyframes boat-in-animation { 0% {left: -200px;} 100% {left: 20px;} } @-moz-keyframes boat-animation { 0% {bottom: 0px; left: 0px;} 25% {bottom: -2px; left: -2px;} 70% {bottom: 2px; left: -4px;} 100% {bottom: -1px; left: 0px;} } @-moz-keyframes question-mark-animation { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes cloud-group-1-animation { 0% {left: 0px;} 99.9999% {left: -720px;} 100% {left: 0px;} } @-moz-keyframes cloud-group-2-animation { 0% {left: 720px;} 99.9999% {left: 0px;} 100% {left: 720px;} } @-moz-keyframes water-back-animation { 0% {bottom: 10px; left: -20px;} 25% {bottom: 8px; left: -22px;} 70% {bottom: 12px; left: -24px;} 100% {bottom: 9px; left: -20px;} } @-moz-keyframes water-front-animation { 0% {bottom: -70px; left: -30px;} 25% {bottom: -68px; left: -32px;} 70% {bottom: -72px; left: -34px;} 100% {bottom: -69px; left: -30px;} }

/* Opera Animations */

@-o-keyframes h2-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes h3-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes form-animation { 0% {opacity: 0; right: -400px;} 90% {opacity: 0; right: -400px;} 95% {opacity: 0.5; right: 20px;} 100% {opacity: 1; right: 0px;} } @-o-keyframes boat-in-animation { 0% {left: -200px;} 100% {left: 20px;} } @-o-keyframes boat-animation { 0% {bottom: 0px; left: 0px;} 25% {bottom: -2px; left: -2px;} 70% {bottom: 2px; left: -4px;} 100% {bottom: -1px; left: 0px;} } @-o-keyframes question-mark-animation { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } @-o-keyframes cloud-group-1-animation { 0% {left: 0px;} 99.9999% {left: -720px;} 100% {left: 0px;} } @-o-keyframes cloud-group-2-animation { 0% {left: 720px;} 99.9999% {left: 0px;} 100% {left: 720px;} } @-o-keyframes water-back-animation { 0% {bottom: 10px; left: -20px;} 25% {bottom: 8px; left: -22px;} 70% {bottom: 12px; left: -24px;} 100% {bottom: 9px; left: -20px;} } @-o-keyframes water-front-animation { 0% {bottom: -70px; left: -30px;} 25% {bottom: -68px; left: -32px;} 70% {bottom: -72px; left: -34px;} 100% {bottom: -69px; left: -30px;} }

/* IE Animations */

@-ms-keyframes h2-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-ms-keyframes h3-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-ms-keyframes form-animation { 0% {opacity: 0; right: -400px;} 90% {opacity: 0; right: -400px;} 95% {opacity: 0.5; right: 20px;} 100% {opacity: 1; right: 0px;} } @-ms-keyframes boat-in-animation { 0% {left: -200px;} 100% {left: 20px;} } @-ms-keyframes boat-animation { 0% {bottom: 0px; left: 0px;} 25% {bottom: -2px; left: -2px;} 70% {bottom: 2px; left: -4px;} 100% {bottom: -1px; left: 0px;} } @-ms-keyframes question-mark-animation { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes cloud-group-1-animation { 0% {left: 0px;} 99.9999% {left: -720px;} 100% {left: 0px;} } @-ms-keyframes cloud-group-2-animation { 0% {left: 720px;} 99.9999% {left: 0px;} 100% {left: 720px;} } @-ms-keyframes water-back-animation { 0% {bottom: 10px; left: -20px;} 25% {bottom: 8px; left: -22px;} 70% {bottom: 12px; left: -24px;} 100% {bottom: 9px; left: -20px;} } @-ms-keyframes water-front-animation { 0% {bottom: -70px; left: -30px;} 25% {bottom: -68px; left: -32px;} 70% {bottom: -72px; left: -34px;} 100% {bottom: -69px; left: -30px;} }

/* Animations */

@keyframes h2-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @keyframes h3-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @keyframes form-animation { 0% {opacity: 0; right: -400px;} 90% {opacity: 0; right: -400px;} 95% {opacity: 0.5; right: 20px;} 100% {opacity: 1; right: 0px;} } @keyframes boat-in-animation { 0% {left: -200px;} 100% {left: 20px;} } @keyframes boat-animation { 0% {bottom: 0px; left: 0px;} 25% {bottom: -2px; left: -2px;} 70% {bottom: 2px; left: -4px;} 100% {bottom: -1px; left: 0px;} } @keyframes question-mark-animation { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } @keyframes cloud-group-1-animation { 0% {left: 0px;} 99.9999% {left: -720px;} 100% {left: 0px;} } @keyframes cloud-group-2-animation { 0% {left: 720px;} 99.9999% {left: 0px;} 100% {left: 720px;} } @keyframes water-back-animation { 0% {bottom: 10px; left: -20px;} 25% {bottom: 8px; left: -22px;} 70% {bottom: 12px; left: -24px;} 100% {bottom: 9px; left: -20px;} } @keyframes water-front-animation { 0% {bottom: -70px; left: -30px;} 25% {bottom: -68px; left: -32px;} 70% {bottom: -72px; left: -34px;} 100% {bottom: -69px; left: -30px;} }

/* End Ad 1 */

/* Begin Ad 2 */

  1. ad-2 {

width: 160px; height: 600px; margin: 40px auto 40px; background-image: url(../images/ad-2/background.png); background-position: center; background-repeat: no-repeat; overflow: hidden; position: relative; box-shadow: 1px 1px 4px rgba(0,0,0,0.4); text-align: center; }

  1. ad-2 h2 {

font-family: 'Alfa Slab One', cursive; color: #137dd5; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px #fff; margin-top: 110px; -webkit-animation: h2-animation-2 10s 1 ease-in-out; -moz-animation: h2-animation-2 10s 1 ease-in-out; -o-animation: h2-animation-2 5s 1 ease-in-out; -ms-animation: h2-animation-2 5s 1 ease-in-out; animation: h2-animation-2 5s 1 ease-in-out; }

  1. ad-2 ul#boat {

width: 96px; height: 84px; overflow: visible; z-index: 2; position: absolute; top: 326px; left: 10px; -webkit-animation: boat-in-animation-2 15s 1 ease-in-out; -moz-animation: boat-in-animation-2 15s 1 ease-in-out; -o-animation: boat-in-animation-2 15s 1 ease-in-out; -ms-animation: boat-in-animation-2 15s 1 ease-in-out; animation: boat-in-animation-2 15s 1 ease-in-out; } #ad-2 ul#boat li { width: 96px; height: 84px; z-index: 2; position: relative; top: 0px; left: 0px; background-image: url(../images/ad-2/boat.png); -webkit-animation: boat-animation-2 2.5s infinite ease-out; -moz-animation: boat-animation-2 2.5s infinite ease-out; -o-animation: boat-animation-2 2.5s infinite ease-out; -ms-animation: boat-in-animation-2 2.5s infinite ease-out; animation: boat-animation-2 2.5s infinite ease-out; }

  1. ad-2 #water {

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

  1. ad-2 #content {

width: 100%; position: absolute; bottom: 0px; z-index: 4; -webkit-animation: content-in-animation-2 15s 1 ease-in-out; -moz-animation: content-in-animation-2 15s 1 ease-in-out; -o-animation: content-in-animation-2 15s 1 ease-in-out; -ms-animation: content-in-animation-2 15s 1 ease-in-out; animation: content-in-animation-2 15s 1 ease-in-out; } #ad-2 #content h3 { color: #fff; font-family: 'Boogaloo', cursive; font-size: 30px; line-height: 32px; text-shadow: 0px 0px 4px #137dd5; } #ad-2 #content a:link, #ad-2 #content a:visited { display: inline-block; height: 20px; padding: 15px; font-family: 'Boogaloo', cursive; font-size: 20px; line-height: 20px; color: #137dd5; text-shadow: 1px 1px 0px #fff; background-color: #fff; border-radius: 5px; margin: 20px 0px; box-shadow: 2px 2px 0px #137dd5; border: 1px solid #fff; background-image: linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%); background-image: -o-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%); background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%); background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%); background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%); } #ad-2 #content a:hover, #ad-2 #content a:active { background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%); background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%); background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%); background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%); background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%); }

/* WebKit Animations */

@-webkit-keyframes h2-animation-2 { 0% {opacity: 0; font-size: 0px;} 90% {opacity: 0; font-size: 0px;} 95% {opacity: 1; font-size: 60px;} 100% {font-size: 50px;} } @-webkit-keyframes content-in-animation-2 { 0% {opacity: 0;} 90% {opacity: 0;} 95% {opacity: 1;} 100% {opacity: 1;} } @-webkit-keyframes water-in-animation-2 { 0% {top: 600px; left: -10px;} 100% {top: 380px; left: 0px;} } @-webkit-keyframes water-front-animation-2 { 0% {top: 2px; left: -30px;} 25% {top: 0px; left: -32px;} 70% {top: 4px; left: -34px;} 100% {top: 1px; left: -30px;} } @-webkit-keyframes water-back-animation-2 { 0% {top: 0px; left: -20px;} 25% {top: -2px; left: -22px;} 70% {top: 2px; left: -24px;} 100% {top: -1px; left: -20px;} } @-webkit-keyframes boat-in-animation-2 { 0% {left: -150px;} 7% {left: -150px;} 75% {left: 310px;} 75.0001% {left: -100px;} 90% {left: 10px;} 100% {left: 10px;} } @-webkit-keyframes boat-animation-2 { 0% {top: 0px; left: 0px;} 25% {top: -2px; left: -2px;} 70% {top: 2px; left: -2px;} 100% {top: -1px; left: -1px;} }

/* FireFox Animations */

@-moz-keyframes h2-animation-2 { 0% {opacity: 0; font-size: 0px;} 90% {opacity: 0; font-size: 0px;} 95% {opacity: 1; font-size: 60px;} 100% {font-size: 50px;} } @-moz-keyframes content-in-animation-2 { 0% {opacity: 0;} 90% {opacity: 0;} 95% {opacity: 1;} 100% {opacity: 1;} } @-moz-keyframes water-in-animation-2 { 0% {top: 600px; left: -10px;} 100% {top: 380px; left: 0px;} } @-moz-keyframes water-front-animation-2 { 0% {top: 2px; left: -30px;} 25% {top: 0px; left: -32px;} 70% {top: 4px; left: -34px;} 100% {top: 1px; left: -30px;} } @-moz-keyframes water-back-animation-2 { 0% {top: 0px; left: -20px;} 25% {top: -2px; left: -22px;} 70% {top: 2px; left: -24px;} 100% {top: -1px; left: -20px;} } @-moz-keyframes boat-in-animation-2 { 0% {left: -150px;} 7% {left: -150px;} 75% {left: 310px;} 75.0001% {left: -100px;} 90% {left: 10px;} 100% {left: 10px;} } @-moz-keyframes boat-animation-2 { 0% {top: 0px; left: 0px;} 25% {top: -2px; left: -2px;} 70% {top: 2px; left: -2px;} 100% {top: -1px; left: -1px;} }

/* Opera Animations */

@-o-keyframes h2-animation-2 { 0% {opacity: 0; font-size: 0px;} 90% {opacity: 0; font-size: 0px;} 95% {opacity: 1; font-size: 60px;} 100% {font-size: 50px;} } @-o-keyframes content-in-animation-2 { 0% {opacity: 0;} 90% {opacity: 0;} 95% {opacity: 1;} 100% {opacity: 1;} } @-o-keyframes water-in-animation-2 { 0% {top: 600px; left: -10px;} 100% {top: 380px; left: 0px;} } @-o-keyframes water-front-animation-2 { 0% {top: 2px; left: -30px;} 25% {top: 0px; left: -32px;} 70% {top: 4px; left: -34px;} 100% {top: 1px; left: -30px;} } @-o-keyframes water-back-animation-2 { 0% {top: 0px; left: -20px;} 25% {top: -2px; left: -22px;} 70% {top: 2px; left: -24px;} 100% {top: -1px; left: -20px;} } @-o-keyframes boat-in-animation-2 { 0% {left: -150px;} 7% {left: -150px;} 75% {left: 310px;} 75.0001% {left: -100px;} 90% {left: 10px;} 100% {left: 10px;} } @-o-keyframes boat-animation-2 { 0% {top: 0px; left: 0px;} 25% {top: -2px; left: -2px;} 70% {top: 2px; left: -2px;} 100% {top: -1px; left: -1px;} }

/* IE Animations */

@-ms-keyframes h2-animation-2 { 0% {opacity: 0; font-size: 0px;} 90% {opacity: 0; font-size: 0px;} 95% {opacity: 1; font-size: 60px;} 100% {font-size: 50px;} } @-ms-keyframes content-in-animation-2 { 0% {opacity: 0;} 90% {opacity: 0;} 95% {opacity: 1;} 100% {opacity: 1;} } @-ms-keyframes water-in-animation-2 { 0% {top: 600px; left: -10px;} 100% {top: 380px; left: 0px;} } @-ms-keyframes water-front-animation-2 { 0% {top: 2px; left: -30px;} 25% {top: 0px; left: -32px;} 70% {top: 4px; left: -34px;} 100% {top: 1px; left: -30px;} } @-ms-keyframes water-back-animation-2 { 0% {top: 0px; left: -20px;} 25% {top: -2px; left: -22px;} 70% {top: 2px; left: -24px;} 100% {top: -1px; left: -20px;} } @-ms-keyframes boat-in-animation-2 { 0% {left: -150px;} 7% {left: -150px;} 75% {left: 310px;} 75.0001% {left: -100px;} 90% {left: 10px;} 100% {left: 10px;} } @-ms-keyframes boat-animation-2 { 0% {top: 0px; left: 0px;} 25% {top: -2px; left: -2px;} 70% {top: 2px; left: -2px;} 100% {top: -1px; left: -1px;} }

/* Animations */

@keyframes h2-animation-2 { 0% {opacity: 0; font-size: 0px;} 90% {opacity: 0; font-size: 0px;} 95% {opacity: 1; font-size: 60px;} 100% {font-size: 50px;} } @keyframes content-in-animation-2 { 0% {opacity: 0;} 90% {opacity: 0;} 95% {opacity: 1;} 100% {opacity: 1;} } @keyframes water-in-animation-2 { 0% {top: 600px; left: -10px;} 100% {top: 380px; left: 0px;} } @keyframes water-front-animation-2 { 0% {top: 2px; left: -30px;} 25% {top: 0px; left: -32px;} 70% {top: 4px; left: -34px;} 100% {top: 1px; left: -30px;} } @keyframes water-back-animation-2 { 0% {top: 0px; left: -20px;} 25% {top: -2px; left: -22px;} 70% {top: 2px; left: -24px;} 100% {top: -1px; left: -20px;} } @keyframes boat-in-animation-2 { 0% {left: -150px;} 7% {left: -150px;} 75% {left: 310px;} 75.0001% {left: -100px;} 90% {left: 10px;} 100% {left: 10px;} } @keyframes boat-animation-2 { 0% {top: 0px; left: 0px;} 25% {top: -2px; left: -2px;} 70% {top: 2px; left: -2px;} 100% {top: -1px; left: -1px;} }

/* End Ad 2 */