@charset "UTF-8";
/* CSS Document */

div.subpage {padding:0 0 20px 0; margin:0 0 20px 0;   position:relative;}


/* Perch and Rescue */
div#boat {width:51px; height:23px; background: url(../images/boat.png) no-repeat; position: absolute; top: 643px; left: 705px;}
@keyframes boatmove {from {left: 705px;} to{left: 2250px;}}
@-moz-keyframes boatmove {from {left: 705px;} to{left: 2250px;}}
@-webkit-keyframes boatmove {from {left: 705px;} to{left: 2250px;}}
div#boat {animation:boatmove 60s linear infinite alternate; -webkit-animation:boatmove 60s linear infinite alternate; -moz-animation:boatmove 60s linear infinite alternate;}


/* Permanent Wave */
div.element {position:absolute; background-repeat:no-repeat; background-position:center center;}
div#heatwave {width:161px; height:73px; background:url(../images/heat-wave.png); top:151px; left:463px;}
@keyframes heatmove {from {top: 151px; opacity:1} to{top: 141px; opacity:0;}}
@-moz-keyframes heatmove {from {top: 151px; opacity:1} to{top: 141px; opacity:0;}}
@-webkit-keyframes heatmove {from {top: 151px; opacity:1} to{top: 141px; opacity:0;}}
div#heatwave {animation:heatmove 2s ease infinite; -webkit-animation:heatmove 2s ease infinite; -moz-animation:heatmove 2s ease infinite;}


/* Hero Sub */
div#sign {width:66px; height:93px; background: url(../images/sign.png) no-repeat; position: absolute; top: 343px; left: 385px; transform-origin:bottom center; -webkit-transform-origin:bottom center; -moz-transform-origin:bottom center;}
div#squid {width:72px; height:114px; background: url(../images/squid.png) no-repeat; position: absolute; top: 1190px; left: 223px;}
div#eel {width:304px; height:40px; background: url(../images/eel.png) no-repeat; position: absolute; top: 1781px; left: 0;}
div#dot {width:12px; height:12px; background: url(../images/dot.png) no-repeat; position: absolute; top: 2074px; left: 603px;}
/* sign animation */
@-moz-keyframes signflap {from {-moz-transform:rotate(-10deg);} to{-moz-transform:rotate(15deg);}}
@-webkit-keyframes signflap {from {-webkit-transform:rotate(-10deg);} to{-webkit-transform:rotate(15deg);}}
/* squid animation */
@keyframes squidmove {from {top: 1190px; left: 223px;} to{top: 1159px; left: 232px;}}
@-moz-keyframes squidmove {from {top: 1190px; left: 223px;} to{top: 1159px; left: 232px;}}
@-webkit-keyframes squidmove {from {top: 1190px; left: 223px;} to{top: 1159px; left: 232px;}}
/* eel animation */
@keyframes eelmove {from {background-position: -70px 0;} to{background-position: 0 0;}}
@-moz-keyframes eelmove {from {background-position: -70px 0;} to{background-position: 0 0;}}
@-webkit-keyframes eelmove {from {background-position: -70px 0;} to{background-position: 0 0;}}
/* dot animation */
@keyframes blink {from {opacity:0.3;} to{opacity:1;}}
@-moz-keyframes blink {from {opacity:0.3;} to{opacity:1;}}
@-webkit-keyframes blink {from {opacity:0.3;} to{opacity:1;}}
div#sign {animation:signflap 3s ease-in-out infinite alternate; -webkit-animation:signflap 3s ease-in-out infinite alternate; -moz-animation:signflap 3s ease-in-out infinite alternate;}
div#squid {animation:squidmove 2s linear infinite alternate; -webkit-animation:squidmove 2s linear infinite alternate; -moz-animation:squidmove 2s linear infinite alternate;}
div#eel {animation:eelmove 3.5s ease-in-out infinite alternate; -webkit-animation:eelmove 3.5s ease-in-out infinite alternate; -moz-animation:eelmove 3.5s ease-in-out infinite alternate;}
div#dot {animation:blink 1s ease infinite alternate; -webkit-animation:blink 1s ease infinite alternate; -moz-animation:blink 1s ease infinite alternate;}


/* Spacecraft Wheezes Back To Earth Today */
div#earth {width:128px; height:127px; background: url(../images/earth.png) no-repeat; position: absolute; top: 385px; left: 273px;}
div#mars {width:462px; height:232px; background: url(../images/mars.png) no-repeat; position: absolute; top: 678px; left: 978px;}
@keyframes planetfade {from {opacity:0.3;} to{opacity:1;}}
@-moz-keyframes planetfade {from {opacity:0.3;} to{opacity:1;}}
@-webkit-keyframes planetfade {from {opacity:0.3;} to{opacity:1;}}
div#earth, div#mars {animation:planetfade 1.5s ease infinite alternate; -webkit-animation:planetfade 1.5s ease infinite alternate; -moz-animation:planetfade 1.5s ease infinite alternate;}


/* Seven Billion Population Benchmark */
div.checkpoint {width:124px; height:71px; position:absolute; background-repeat:no-repeat; background-position:center center; opacity:0;}
div#onebil {background:url(../images/1.png); top:500px; left:0;}
div#twobil {background:url(../images/2.png); top:347px; left:664px;}
div#threebil {background:url(../images/3.png); top:500px; left:816px;}
div#fourbil {background:url(../images/4.png); top:194px; left:920px;}
div#fivebil {background:url(../images/5.png); top:347px; left:970px;} 
div#sixbil {background:url(../images/6.png); top:449px; left:1020px;}
div#sevenbil {background:url(../images/7.png); top:41px; left:1124px;}
div#eightbil {background:url(../images/8.png); top:245px; left:1175px;}
div#ninebil {background:url(../images/9.png); top:41px; left:1326px;}
/* specify one animation */
@keyframes onem {from {opacity:0; top:480px;} to {opacity:1; top:500px;}}
@-moz-keyframes onem {from {opacity:0; top:480px;} to {opacity:1; top:500px;}}
@-webkit-keyframes onem {from {opacity:0; top:480px;} to {opacity:1; top:500px;}}
/* specify two animation */
@keyframes twom {from {opacity:0; top:327px;} to {opacity:1; top:347px;}}
@-moz-keyframes twom {from {opacity:0; top:327px;} to {opacity:1; top:347px;}}
@-webkit-keyframes twom {from {opacity:0; top:327px;} to {opacity:1; top:347px;}}
/* specify three animation */
@keyframes threem {from {opacity:0; top:480px;} to {opacity:1; top:500px;}}
@-moz-keyframes threem {from {opacity:0; top:480px;} to {opacity:1; top:500px;}}
@-webkit-keyframes threem {from {opacity:0; top:480px;} to {opacity:1; top:500px;}}
/* specify four animation */
@keyframes fourm {from {opacity:0; top:174px;} to {opacity:1; top:194px;}}
@-moz-keyframes fourm {from {opacity:0; top:174px;} to {opacity:1; top:194px;}}
@-webkit-keyframes fourm {from {opacity:0; top:174px;} to {opacity:1; top:194px;}}
/* specify five animation */
@keyframes fivem {from {opacity:0; top:327px;} to {opacity:1; top:347px;}}
@-moz-keyframes fivem {from {opacity:0; top:327px;} to {opacity:1; top:347px;}}
@-webkit-keyframes fivem {from {opacity:0; top:327px;} to {opacity:1; top:347px;}}
/* specify six animation */
@keyframes sixm {from {opacity:0; top:429px;} to {opacity:1; top:449px;}}
@-moz-keyframes sixm {from {opacity:0; top:429px;} to {opacity:1; top:449px;}}
@-webkit-keyframes sixm {from {opacity:0; top:429px;} to {opacity:1; top:449px;}}
/* specify seven animation */
@keyframes sevenm {from {opacity:0; top:21px;} to {opacity:1; top:41px;}}
@-moz-keyframes sevenm {from {opacity:0; top:21px;} to {opacity:1; top:41px;}}
@-webkit-keyframes sevenm {from {opacity:0; top:21px;} to {opacity:1; top:41px;}}
/* specify eight animation */
@keyframes eightm {from {opacity:0; top:225px;} to {opacity:1; top:245px;}}
@-moz-keyframes eightm {from {opacity:0; top:225px;} to {opacity:1; top:245px;}}
@-webkit-keyframes eightm {from {opacity:0; top:225px;} to {opacity:1; top:245px;}}
/* specify nine animation */
@keyframes ninem {from {opacity:0; top:21px;} to {opacity:1; top:41px;}}
@-moz-keyframes ninem {from {opacity:0; top:21px;} to {opacity:1; top:41px;}}
@-webkit-keyframes ninem {from {opacity:0; top:21px;} to {opacity:1; top:41px;}}
/* speficy drop */
div#onebil {animation:onem 1s ease-out; -webkit-animation:onem 1s ease-out; -moz-animation:onem 1s ease-out; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#twobil {animation:twom 1s ease-out 0.6s; -webkit-animation:twom 1s ease-out 0.6s; -moz-animation:twom 1s ease-out 0.6s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#threebil {animation:threem 1s ease-out 1s; -webkit-animation:threem 1s ease-out 1s; -moz-animation:threem 1s ease-out 1s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#fourbil {animation:fourm 1s ease-out 0.3s; -webkit-animation:fourm 1s ease-out 0.3s; -moz-animation:fourm 1s ease-out 0.3s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#fivebil {animation:fivem 1s ease-out; -webkit-animation:fivem 1s ease-out; -moz-animation:fivem 1s ease-out; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#sixbil {animation:sixm 1s ease-out 0.5s; -webkit-animation:sixm 1s ease-out 0.5s; -moz-animation:sixm 1s ease-out 0.5s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#sevenbil {animation:sevenm 1s ease-out; -webkit-animation:sevenm 1s ease-out; -moz-animation:sevenm 1s ease-out; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#eightbil {animation:eightm 1s ease-out 0.3s; -webkit-animation:eightm 1s ease-out 0.3s; -moz-animation:eightm 1s ease-out 0.3s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#ninebil {animation:ninem 1s ease-out 0.7s; -webkit-animation:ninem 1s ease-in 0.7s; -moz-animation:ninem 1s ease-out 0.7s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}