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

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


/* Cream of Crops */
div#truck {width:423px; height:324px; background: url(../images/truck.png) no-repeat; position: absolute; top: 546px; left: 636px;}
@keyframes truckmove {from {top: 546px; left: 636px;} to{top: 535px; left: 655px;}}
@-moz-keyframes truckmove {from {top: 546px; left: 636px;} to{top: 535px; left: 655px;}}
@-webkit-keyframes truckmove {from {top: 546px; left: 636px;} to{top: 535px; left: 655px;}}
div#truck {animation:truckmove 2.5s ease-in-out infinite alternate; -webkit-animation:truckmove 2.5s ease-in-out infinite alternate; -moz-animation:truckmove 2.5s ease-in-out infinite alternate;}


/* 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;}


/* Red, White and Booze */
div.drip {width:52px; height:132px; background-repeat:no-repeat; position:absolute;}
div#beer {background:url(../images/beer.png); top:577px; left:1294px;}
div#spirit {background:url(../images/spirit.png); top:400px; left:1346px;}
div#wine {background:url(../images/wine.png); top:281px; left:1398px;}

/* beer animation */
@keyframes beerdrop {from {top: 537px;} to{top: 577px;}}
@-moz-keyframes beerdrop {from {top: 537px;} to{top: 577px;}}
@-webkit-keyframes beerdrop {from {top: 537px;} to{top: 577px;}}

/* spirit animation */
@keyframes spiritdrop {from {top: 351px;} to{top: 400px;}}
@-moz-keyframes spiritdrop {from {top: 351px;} to{top: 400px;}}
@-webkit-keyframes spiritdrop {from {top: 351px;} to{top: 400px;}}

/* wine animation */
@keyframes winedrop {from {top: 251px;} to{top: 281px;}}
@-moz-keyframes winedrop {from {top: 251px;} to{top: 281px;}}
@-webkit-keyframes winedrop {from {top: 251px;} to{top: 281px;}}

div#beer {animation:beerdrop 2s ease-in-out infinite alternate; -webkit-animation:beerdrop 2s ease-in-out infinite alternate; -moz-animation:beerdrop 2s ease-in-out infinite alternate;}
div#spirit {animation:spiritdrop 2.5s ease-in-out infinite alternate; -webkit-animation:spiritdrop 2.5s ease-in-out infinite alternate; -moz-animation:spiritdrop 2.5s ease-in-out infinite alternate;}
div#wine {animation:winedrop 1.6s ease-in-out infinite alternate; -webkit-animation:winedrop 1.6s ease-in-out infinite alternate; -moz-animation:winedrop 1.6s ease-in-out infinite alternate;}


/* Red, White and Booze */
div.badge {position:absolute; background-repeat:no-repeat; background-position:center center; opacity:0;}
div#wyo {width:176px; height:72px; background:url(../images/wyo.png); top:309px; left:167px;}
div#calif {width:211px; height:72px; background:url(../images/calif.png); top:188px; left:488px;}

/* specify wyo animation */
@keyframes wyom {from {opacity:0; top:289px;} to {opacity:1; top:309px;}}
@-moz-keyframes wyom {from {opacity:0; top:289px;} to {opacity:1; top:309px;}}
@-webkit-keyframes wyom {from {opacity:0; top:289px;} to {opacity:1; top:309px;}}

/* specify calif animation */
@keyframes califm {from {opacity:0; top:168px;} to {opacity:1; top:188px;}}
@-moz-keyframes califm {from {opacity:0; top:168px;} to {opacity:1; top:188px;}}
@-webkit-keyframes califm {from {opacity:0; top:168px;} to {opacity:1; top:188px;}}

/* speficy drop */
div#wyo {animation:wyom 1s ease-out 0.3s; -webkit-animation:wyom 1s ease-out 0.3s; -moz-animation:wyom 1s ease-out 0.3s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#calif {animation:califm 1s ease-out 0.5s; -webkit-animation:califm 1s ease-out 0.5s; -moz-animation:califm 1s ease-out 0.5s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}


/* 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;}

/* Opportunity Index */
a.frame {display:block; width:120px; height:120px; background:url(../images/highlight-frame.png) no-repeat; position:absolute;}
a#wash {top:167px; left:112px;}
a#nev {top:268px; left:213px;}
a#minn {top:167px; left:516px;}
a#miss {top:571px; left:617px;}
a#conn {top:268px; left:1122px;}
@keyframes framefade {from {opacity:0.7;} to{opacity:1;}}
@-moz-keyframes framefade {from {opacity:0.7;} to{opacity:1;}}
@-webkit-keyframes framefade {from {opacity:0.7;} to{opacity:1;}}
a.frame {animation: framefade 1s ease infinite alternate; -moz-animation: framefade 1s ease infinite alternate; -webkit-animation: framefade 1s ease infinite alternate;}
a.frame:hover {animation:paused; -moz-animation:paused; -webkit-animation:paused;}
a.frame span.popup {display:none; width:514px; position:absolute; z-index:99;}
a#wash:hover span.popup {display:block; height:504px; background:url(../images/washington.png) no-repeat; top:-91px; left:0;}
a#nev:hover span.popup {display:block; height:605px; background:url(../images/nevada.png) no-repeat; top:-91px; left:0;}
a#minn:hover span.popup {display:block; height:605px; background:url(../images/minnesota.png) no-repeat; top:-91px; left:-394px;}
a#miss:hover span.popup {display:block; width:514px; height:605px; background:url(../images/mississippi.png) no-repeat; top:-394px; left:-394px;}
a#conn:hover span.popup {display:block; width:514px; height:605px; background:url(../images/connecticut.png) no-repeat; top:-91px; left:-394px;}


/* 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;}


/* Seven Steps to Slim */
div#figure {width:107px; height:129px; background: url(../images/figure.png) no-repeat; position: absolute; top: 35px; left: 1011px; transform-origin:54px 70px; -webkit-transform-origin:54px 70px; -moz-transform-origin:54px 70px;}
@-moz-keyframes figureshake {from {-moz-transform:rotate(2deg);} to {-moz-transform:rotate(-2deg);}}
@-webkit-keyframes figureshake {from {-webkit-transform:rotate(2deg);} to {-webkit-transform:rotate(-2deg);}}
div#figure {animation:figureshake 0.05s ease-in-out infinite alternate; -webkit-animation:figureshake 0.05s ease-in-out infinite alternate; -moz-animation:figureshake 0.05s ease-in-out infinite alternate;}


/* Speed Bump */
div#pointer {width:21px; height:143px; background: url(../images/pointer.png) no-repeat; position: absolute; top: 660px; left: 1226px; transform-origin:12px 132px; -webkit-transform-origin:12px 132px; -moz-transform-origin:12px 132px;}
div#bar {width:347px; height:51px; background: url(../images/bar.png) no-repeat; position: absolute; top: 780px; left: 1062px;}
@-moz-keyframes pswing {0% {-moz-transform:rotate(-80deg);} 15% {-moz-transform:rotate(-40deg);} 30% {-moz-transform:rotate(-60deg);} 45% {-moz-transform:rotate(-45deg);} 60% {-moz-transform:rotate(-53deg);} 75% {-moz-transform:rotate(-48deg);} 90% {-moz-transform:rotate(-51deg);} 100% {-moz-transform:rotate(-50deg);}}
@-webkit-keyframes pswing {0% {-webkit-transform:rotate(-80deg);} 15% {-webkit-transform:rotate(-40deg);} 30% {-webkit-transform:rotate(-60deg);} 45% {-webkit-transform:rotate(-45deg);} 60% {-webkit-transform:rotate(-56deg);} 75% {-webkit-transform:rotate(-50deg);} 90% {-webkit-transform:rotate(-54deg);} 100% {-webkit-transform:rotate(-53deg);}}
div#pointer {animation:pswing 5.5s ease-in-out; -webkit-animation:pswing 5.5s ease-in-out; -moz-animation:pswing 5.5s ease-in-out; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}


/* Tablet Usage */
div#eyes {width:23px; height:6px ;background:url(../images/eye-close-open.gif) no-repeat center center; position: absolute; top: 1659px; left: 183px;}



/* Cutting the Strings */
div#innerglow {width:1078px; height:762px; background:url(../images/inner-glow.png) no-repeat; position:absolute; top:41px; left:262px; z-index:99;}
div#screenglow {width:29px; height:30px; background:url(../images/glow-screen.png) no-repeat; position:absolute; top:823px; left:787px;}
div#one {width:175px; height:119px; background:url(../images/first-bar.png) no-repeat; position:absolute; top:685px; left:710px; z-index:1;}
div#two {width:409px; height:142px; background:url(../images/second-bar.png) no-repeat; position:absolute; top:523px; left:590px; z-index:2;}
div#three {width:627px; height:190px; background:url(../images/third-bar.png) no-repeat; position:absolute; top:362px; left:476px; z-index:3;}
div#four {width:866px; height:236px; background:url(../images/fourth-bar.png) no-repeat; position:absolute; top:201px; left:362px; z-index:4;}
div#five {width:1094px; height:283px; background:url(../images/fifth-bar.png) no-repeat; position:absolute; top:40px; left:247px; z-index:5;}
@keyframes barfade {from {opacity:0;} to{opacity:1;}}
@-moz-keyframes barfade {from {opacity:0;} to{opacity:1;}}
@-webkit-keyframes barfade {from {opacity:0;} to{opacity:1;}}
div#screenglow {animation:barfade 1.2s ease infinite; -webkit-animation:barfade 1.2s ease infinite alternate; -moz-animation:barfade 1.2s ease infinite alternate;}
div#one, div#two, div#three, div#four, div#five {opacity:0; animation:barfade 1s ease; -webkit-animation:barfade 1s ease; -moz-animation:barfade 1s ease; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#one {animation-delay:0.5s; -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s;}
div#two {animation-delay:1.5s; -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s;}
div#three {animation-delay:2.3s; -webkit-animation-delay:2.3s; -moz-animation-delay:2.3s;}
div#four {animation-delay:2.9s; -webkit-animation-delay:2.9s; -moz-animation-delay:2.9s;}
div#five {animation-delay:3.4s; -webkit-animation-delay:3.4s; -moz-animation-delay:3.4s;}


/* Choom Gang Rules */
div#smoke {width:185px; height:95px; background: url(../images/smoke.png) no-repeat; position: absolute; top: 1118px; left: 30px; }
@keyframes smokefade {from {opacity:1;} to {opacity:0;}}
@-moz-keyframes smokefade {from {opacity:1;} to {opacity:0;}}
@-webkit-keyframes smokefade {from {opacity:1;} to {opacity:0;}}
div#smoke {animation:smokefade 4s linear infinite; -webkit-animation:smokefade 4s linear infinite; -moz-animation:smokefade 4s linear infinite;}


/* Gas Pumping Infographic */
div#mini-y {width:251px; height:146px; background: url(../images/yellow-mini.png) no-repeat; position: absolute; top: 313px; left: 324px;}
div#mini-b {width:251px; height:146px; background: url(../images/blue-mini.png) no-repeat; position: absolute; top: 501px; left: 252px;}
/* yellow mini */
@keyframes ymove {from {left: 324px;} to{left: 416px;}}
@-moz-keyframes ymove {from {left: 324px;} to{left: 416px;}}
@-webkit-keyframes ymove {from {left: 324px;} to{left: 416px;}}
/* blue mini */
@keyframes bmove {from {left: 252px;} to{left: 322px;}}
@-moz-keyframes bmove {from {left: 252px;} to{left: 322px;}}
@-webkit-keyframes bmove {from {left: 252px;} to{left: 322px;}}
div#mini-y {animation:ymove 1s ease-in-out 0.5s; -webkit-animation:ymove 1s ease-in-out 0.5s; -moz-animation:ymove 1s ease-in-out 0.5s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#mini-b {animation:bmove 1s ease-in-out 0.5s; -webkit-animation:bmove 1s ease-in-out 0.5s; -moz-animation:bmove 1s ease-in-out 0.5s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}