/* northern gas networks infographic 1 */



body, html {

width:100%;

min-width:960px;

overflow-x:hidden;

height:auto;

position:relatieve;

}



body, html, div, p, a, h1, h2, h3, h4, h5 img {

margin:0px;

padding:0px;

text-decoration:none;

border:none;

outline:none;

font-family:"VAGRoundedBold";

color:white;

text-align:center;

}



p {

font-family:"VAGRoundedLight";

}



@font-face{

font-family:"VAGRoundedThin";

src:url("Fonts/739798/86f553bb-9889-4e15-8969-ee64b49110e1.eot?#iefix");

src:url("Fonts/739798/86f553bb-9889-4e15-8969-ee64b49110e1.eot?#iefix") format("eot"),url("Fonts/739798/5674c507-56c6-44d0-a73f-536f772201a4.woff") format("woff"),url("Fonts/739798/901e337a-35a9-4313-b7f2-e7557b153a9b.ttf") format("truetype"),url("Fonts/739798/82ff45d7-0bff-43e7-9dae-e19141e58f73.svg#82ff45d7-0bff-43e7-9dae-e19141e58f73") format("svg");

}

@font-face{

font-family:"VAGRoundedLight";

src:url("Fonts/739801/44b3f5eb-d85f-4909-809d-6c122c12ea63.eot?#iefix");

src:url("Fonts/739801/44b3f5eb-d85f-4909-809d-6c122c12ea63.eot?#iefix") format("eot"),url("Fonts/739801/1a4c2794-fc7f-4a89-ab1c-0be23dbee8b1.woff") format("woff"),url("Fonts/739801/6023c3ba-862b-4de6-b8c6-59ae434b7629.ttf") format("truetype"),url("Fonts/739801/0f3940be-21d0-4e65-9247-2dc7c12caef3.svg#0f3940be-21d0-4e65-9247-2dc7c12caef3") format("svg");

}

@font-face{

font-family:"VAGRoundedBold";

src:url("Fonts/739804/643a3fec-739a-44e6-9f17-e26e0c711eef.eot?#iefix");

src:url("Fonts/739804/643a3fec-739a-44e6-9f17-e26e0c711eef.eot?#iefix") format("eot"),url("Fonts/739804/55c27d30-e9d4-405b-a4a2-954120b0bb2c.woff") format("woff"),url("Fonts/739804/12f01f1a-0c0c-44ee-9d95-8c597ae8d67e.ttf") format("truetype"),url("Fonts/739804/fdd56b34-68a5-4fee-b9ce-30b282397623.svg#fdd56b34-68a5-4fee-b9ce-30b282397623") format("svg");

}





.infographicContainer {

width:100%;

float:left;

position:relative;

height:auto;

}



.infopanel {

width:100%;

height:680px;

position:relative;

float:left;

overflow:hidden;

}



.infopanel.panel1 {

background:url(images/gradientBlue.png) repeat-x left center;

}



.infopanel.panel2 {

background:#3e3080;

height:1400px;

}



.infopanel.panel3 {

background:url(images/gradienthorizontal.png) repeat-y center top;

height:990px;

}



.infopanel.panel4 {

background:#3da435;

height:1200px;

}



.tracks {

width:100%;

height:3460px;

background:url(images/tracks.png) no-repeat center top;

position:absolute;

top:680px;

left:0px;

z-index:1;

}



@keyframes bubbleBounce

{

0% { top:-500px; }

100% { top:150px; }

}



@-webkit-keyframes bubbleBounce

{

0% { top:-500px; }

100% { top:150px; }

}



@keyframes bubbleShadow

{

0% { opacity:0; }

100% { opacity:1; }

}



@-webkit-keyframes bubbleShadow

{

0% { opacity:0; }

100% { opacity:1; }

}



.greenBubble {

width:290px;

height:290px;

position:absolute;

left:0px;

right:0px;

margin:0 auto;

top:150px;

background:url(images/greenBubble.png) no-repeat center center;

animation:bubbleBounce 0.7s 1 ease-out;

-webkit-animation:bubbleBounce 0.7s 1 ease-out;

}





.greenBubble h1 {

font-size:29px;

width:290px;

height:250px;

position:relative;

float:left;

font-family:"VAGRoundedBold";

display:none;

}



.greenBubble h1 span.keepingthe {

width:290px;

text-align:center;

height:30px;

position:absolute;

top:50px;

left:0px;

}



.greenBubble h1 span.north {

font-size:76px;

width:290px;

height:80px;

position:absolute;

left:0px;

top:73px;

letter-spacing:3px;

}



.greenBubble h1 span.cooking {

width:290px;

height:60px;

font-size:52px;

position:absolute;

left:0px;

top:150px;

}



.greenBubble h1 span.gas {

font-size:35px;

line-height:35px;

width:290px;

height:35px;

position:absolute;

left:0px;

top:210px;

}



.shadow {

width:274px;

height:81px;

background:url(images/shadow.png) no-repeat center center;

position:absolute;

left:0px;

right:0px;

top:435px;

margin:0 auto;

animation:bubbleShadow 0.7s 1 ease-out;

-webkit-animation:bubbleShadow 0.7s 1 ease-out;

}



.contentarea h2 {

font-size:58px;

color:#FFED00;

text-align:center;

line-height:58px;

width:100%;

position:absolute;

left:0px;

top:0px;

height:58px;

transition:all 0.4s ease-in;

-moz-transition:all 0.4s ease-in;

-webkit-transition:all 0.4s ease-in;

-ms-transition:all 0.4s ease-in;

-o-transition:all 0.4s ease-in;

}



.contentarea p {

color:#FFED00;

font-family:"VAGRoundedLight";

font-size:19px;

line-height:26px;

text-align:center;

width:100%;

position:absolute;

top:62px;

left:0px;

transition:all 0.6s ease-in;

-moz-transition:all 0.6s ease-in;

-webkit-transition:all 0.6s ease-in;

-ms-transition:all 0.6s ease-in;

-o-transition:all 0.6s ease-in;

}



.contentarea h2.appear {

top:50px;

opacity:0;

}



.contentarea p.appear {

opacity:0;

}



.textblock {

width:285px;

height:155px;

position:absolute;

left:0px;

right:0px;

top:50px;

margin:0 auto;

}



.panel1 .littleills {

width:960px;

height:175px;

position:absolute;

bottom:0px;

left:0px;

right:0px;

margin:0 auto;

}



.panel1 .littlestreet {

width:268px;

height:54px;

background:url(images/slide1/street.png);

position:absolute;

left:-200px;

bottom:0px;

}



.panel1 .littleills div {

transition:all 0.3s ease-in;

-moz-transition:all 0.3s ease-in;

-webkit-transition:all 0.3s ease-in;

-ms-transition:all 0.3s ease-in;

-o-transition:all 0.3s ease-in;

}



.panel1 .littleills .office {

transition:all 0.6s ease-in;

-moz-transition:all 0.6s ease-in;

-webkit-transition:all 0.6s ease-in;

-ms-transition:all 0.6s ease-in;

-o-transition:all 0.6s ease-in;

}



.panel1 .littleills .appear {

bottom:-60px;

}



.panel1 .littleills .office.appear {

bottom:-200px;

}



.panel1 .littleills .tree3.appear, .panel1 .littleills .tree4.appear, .panel1 .littleills .littleoffice.appear, .panel1 .littleills .secondoffice.appear {

bottom:-145px;

}



.panel1 .tree1 {

bottom:0px;

left:88px;

width:42px;

height:58px;

position:absolute;

background:url(images/slide1/tree1.png);

}



.panel1 .tree2 {

bottom:0px;

left:134px;

width:31px;

height:41px;

position:absolute;

background:url(images/slide1/tree2.png);

}



.panel1 .office {

bottom:0px;

left:213px;

width:73px;

height:175px;

position:absolute;

background:url(images/slide1/officeBlock.png);

}



.panel1 .tree3 {

bottom:0px;

left:657px;

width:53px;

height:109px;

position:absolute;

background:url(images/slide1/tree3.png);

}



.panel1 .tree4 {

bottom:0px;

left:699px;

width:42px;

height:144px;

position:absolute;

background:url(images/slide1/tree4.png);

}



.panel1 .tree5 {

bottom:0px;

left:730px;

width:31px;

height:60px;

position:absolute;

background:url(images/slide1/tree5.png);

}



.panel1 .littleoffice {

bottom:0px;

left:795px;

width:44px;

height:85px;

position:absolute;

background:url(images/slide1/office2.png);

}



.panel1 .littleoffice.secondoffice {

left:850px;

}



.panel1 .tree6 {

bottom:0px;

left:940px;

width:31px;

height:41px;

position:absolute;

background:url(images/slide1/tree2.png);

}



.panel1 .tree7 {

bottom:0px;

left:980px;

width:31px;

height:41px;

position:absolute;

background:url(images/slide1/tree2.png);

}



.panel1 .tree8 {

bottom:0px;

left:1017px;

width:42px;

height:58px;

position:absolute;

background:url(images/slide1/tree1.png);

}



.infopanel .contentarea {

width:960px;

height:100%;

position:absolute;

top:0px;

left:0px;

right:0px;

margin:0 auto;

}



.panel2 .littlehouse {

position:absolute;

top:537px;

right:-130px;

width:114px;

height:92px;

background:url(images/slide2/littlehouse.png) no-repeat center center;

z-index:10;

}



.panel2 .littleshadowhouse {

position:absolute;

top:537px;

right:-60px;

width:114px;

height:92px;

background:url(images/slide2/shadowhouse.png) no-repeat center center;

}



.panel2 .littleshadowhouse.shadowhouse2 {

right:-200px;

}



.panel2 .van {

width:220px;

height:104px;

background:url(images/slide2/van.png) no-repeat center center;

position:absolute;

right:60px;

top:525px;

}



.panel2 .calendar {

width:112px;

height:132px;

background:url(images/slide2/calendar.png);

position:absolute;

top:730px;

right:180px;

}



.panel2 .calendar .days {

width:112px;

height:40px;

font-size:40px;

position:absolute;

left:0px;

top:65px;

text-align:center;

color:#FFED00;

}



.panel2 .wheel {

width:72px;

height:72px;

background:url(images/wheel.png) no-repeat center center;

position:absolute;

right:198px;

top:1127px;

}



.panel2 .aeroplane {

width:72px;

height:64px;

position:absolute;

left:-80px;

bottom:-80px;

background:url(images/slide2/aeroplane.png) no-repeat center center;

}



.panel2 .aeroplaneholder {

width:400px;

height:400px;

position:absolute;

left:0px;

top:1270px;

}





.panel2 .woman {

width:34px;

height:58px;

background:url(images/slide2/woman.png) no-repeat center center;

position:relative;

float:left;

margin-right:4px;

}



.panel2 .man {

width:23px;

height:58px;

position:relative;

float:left;

margin-right:4px;

background:url(images/slide2/man.png) no-repeat center center;

}



.panel2 .person7 {

margin-right:0px;

}



.panel2 .littlepeople {

top:795px;

left:230px;

position:absolute;

height:58px;

width:230px;

}



.panel2 .contentarea .textblock2 {

left:90px;

top:535px;

right:auto;

margin:0px;

}



.panel2 .contentarea .textblock2 p, .panel2 .contentarea .textblock2 h2, .panel2 .contentarea .textblock4 p, .panel2 .contentarea .textblock4 h2 {

text-align:left;

}



.panel2 .contentarea .textblock3 {

left:203px;

top:870px;

right:auto;

margin:0px;

}



.panel2 .contentarea .textblock4 {

right:0px;

margin:0px;

left:auto;

width:155px;

top:743px;

height:240px;

}



.panel2 .contentarea .textblock4 p {

top:0px;

}



.panel2 .contentarea .textblock5 {

top:1120px;

margin:0px;

right:auto;

width:390px;

}



.panel3 .coins {

width:105px;

height:92px;

position:absolute;

left:309px;

top:40px;

}



.panel3 .coinstrip {

height:52px;

position:absolute;

left:0px;

bottom:10px;

width:34px;

}



.panel3 .coinstrip2 {

left:36px;

bottom:4px;

}



.panel3 .coinstrip3 {

left:72px;

}



.panel3 .coin {

width:34px;

height:9px;

position:absolute;

left:0px;

bottom:0px;

background:url(images/slide3/coin.png) no-repeat center center;

opacity:0;

}



.panel3 .coin2 {

bottom:8px;

}



.panel3 .coin3 {

bottom:16px;

}



.panel3 .coin4 {

bottom:24px;

}



.panel3 .coin5 {

bottom:32px;

}



.panel3 .coin6 {

bottom:40px;

}



.panel3 .coin7 {

bottom:48px;

}



.panel3 .coin8 {

bottom:56px;

}



.panel3 .coin9 {

bottom:64px;

}



.panel3 .cointopper {

width:34px;

height:13px;

background:url(images/slide3/coinTop.png) no-repeat center center;

position:absolute;

left:0px;

bottom:39px;

opacity:0;

}



.panel3 .coinstrip2 .cointopper {

bottom: 71px;

}



.panel3 .coinstrip3 .cointopper {

bottom:47px;

}



.panel3 .littlevans {

width:600px;

height:62px;

position:absolute;

left:485px;

top:735px;

}



.panel3 .littlevan {

width:128px;

height:62px;

background:url(images/slide3/miniVan.png) no-repeat center center;

position:absolute;

bottom:0px;

left:50px;

}



.panel3 .littlevan2 {

left:195px;

}



.panel3 .littlevan3 {

left:340px;

}



.panel3 .littlevan4 {

left:485px;

}



.panel3 .warningsign {

width:96px;

height:122px;

position:absolute;

left:900px;

top:390px;

}



.panel3 .warningsign .lowerpart {

width:78px;

height:76px;

position:absolute;

bottom:0px;

left:0px;

right:0px;

margin:0 auto;

background:url(images/slide3/warningsignLower.png);

}



.panel3 .warningsign .upperpart {

width:57px;

height:57px;

position:absolute;

top:0px;

left:0px;

right:0px;

margin:0 auto;

background:url(images/slide3/warningsignUpper.png);

}



.panel3 .warningsign .shakers {

width:96px;

height:27px;

position:absolute;

left:0px;

top:15px;

}



.panel3 .warningsign .shakeleft {

width:8px;

height:27px;

background:url(images/slide3/warningsignshakeleft.png) no-repeat left top;

position:absolute;

left:0px;

top:0px;

}



.panel3 .warningsign .shakeright {

width:8px;

height:27px;

background:url(images/slide3/warningsignshakeright.png) no-repeat left top;

position:absolute;

right:0px;

top:0px;

}



.panel3 .contentarea h2, .panel3 .contentarea p {

color:#3E3080;

}



.panel3 .contentarea .textblock1 {

left:200px;

right:auto;

margin:0px;

width:345px;

top:135px;

}



.panel3 .contentarea .textblock2 {

left:80px;

right:auto;

margin:0px;

top:385px;

width:500px;

}



.panel3 .contentarea .textblock2 h2 {

width:130px;

font-size:100px;

height:100px;

text-align:left;

line-height:100px;

}



.panel3 .contentarea .textblock2 p {

width:270px;

top:5px;

left:135px;

text-align:left;

height:100px;

}



.panel3 .contentarea .textblock3 {

left:auto;

right:0px;

margin:0px;

width:400px;

top:575px;

}



.panel3 .contentarea .textblock4 {

left:120px;

right:auto;

margin:0px;

top:760px;

}



.panel4 {

overflow:visible;

}



.panel4 .greenills {

width:960px;

height:62px;

position:absolute;

left:0px;

top:-62px;

}



.panel4 .greenills div {

transition:all 0.5s ease-in;

-webkit-transition:all 0.5s ease-in;

-moz-transition:all 0.5s ease-in;

-o-transition:all 0.5s ease-in;

-ms-transition:all 0.5s ease-in;

}

.panel4 .greenills .littlestreet {

position:absolute;

right:-120px;

bottom:0px;

width:268px;

height:54px;

background:url(images/slide4/greenStreet.png) no-repeat center center;

}



.panel4 .greenills .largetree {

width:42px;

height:58px;

position:absolute;

left:-80px;

bottom:0px;

background:url(images/slide4/largeTree.png) no-repeat center center;

}



.panel4 .greenills .littletree {

width:31px;

height:41px;

position:absolute;

left:0px;

bottom:0px;

background:url(images/slide4/littleTree.png) no-repeat center center;

}



.panel4 .greenills .tree2 {

left:-30px;

}



.panel4 .greenills .tree3 {

left:700px;

}



.panel4 .greenills .tree4 {

left:740px;

}



.panel4 .greenills .appear {

bottom:-100px;

}



.panel4 .wheel {

width:72px;

height:72px;

background:url(images/wheel.png) no-repeat center center;

position:absolute;

left:446px;

top:665px;

}



.panel4 .contentarea .textblock1 {

left:auto;

right:95px;

margin:0px;

top:95px;

width:300px;

}



.panel4 .contentarea .textblock2 {

right:auto;

margin:0px;

top:290px;

left:100px;

}



.panel4 .contentarea .textblock2 h2 {

font-size:100px;

line-height:90px;

text-align:right;

}



.panel4 .contentarea .textblock2 p {

text-align:right;

top:90px;

}



.panel4 .contentarea .textblock3 {

right:80px;

margin:0px;

top:450px;

left:auto;

width:330px;

}



.panel4 .contentarea .textblock4 {

top:800px;

width:450px;

}



.panel4 .contentarea .textblock4 h2 {

font-size:42px;

line-height:42px;

}



.panel4 .contentarea .textblock4 p {

top:56px;

width:315px;

left:0px;

right:0px;

margin:0 auto;

}



/* animations */



/* spin wheel */



@keyframes spinwheel

{

0% { transform:translate(0deg); -webkit-transform:translate(0deg); -moz-transform:translate(0deg); -o-transform:translate(0deg); -ms-transform:translate(0deg); }

100% { transform:translate(360deg); -webkit-transform:translate(360deg); -moz-transform:translate(360deg); -o-transform:translate(360deg); -ms-transform:translate(360deg); }

}



@-webkit-keyframes spinwheel /* Safari and Chrome */

{

0% { -webkit-transform:rotate(0deg); }

100% { -webkit-transform:rotate(360deg); }

}



.wheel {

animation:spinwheel 4s infinite linear;

-webkit-animation:spinwheel 4s infinite linear;

}



@keyframes aeroplanebob

{

0% { transform:translate(0deg); -webkit-transform:translate(0deg); -moz-transform:translate(0deg); -o-transform:translate(0deg); -ms-transform:translate(0deg); }

100% { transform:translate(10deg); -webkit-transform:translate(10deg); -moz-transform:translate(10deg); -o-transform:translate(10deg); -ms-transform:translate(10deg); }

}



@-webkit-keyframes aeroplanebob /* Safari and Chrome */

{

0% { -webkit-transform:rotate(0deg); }

50% { -webkit-transform:rotate(10deg); }

100% { -webkit-transform:rotate(0deg); }

}



.aeroplane {

/*animation:aeroplanebob 0.5s infinite linear; */

/*-webkit-animation:aeroplanebob 0.5s infinite linear; */

}







@keyframes aeroplanefly

{

0% { transform:translate(0deg); -webkit-transform:translate(0deg); -moz-transform:translate(0deg); -o-transform:translate(0deg); -ms-transform:translate(0deg); }

60% {opacity:1;}

100% { transform:translate(360deg); -webkit-transform:translate(360deg); -moz-transform:translate(360deg); -o-transform:translate(360deg); -ms-transform:translate(360deg); }

}



@-webkit-keyframes aeroplanefly /* Safari and Chrome */

{

0% { -webkit-transform:translate(0px, 0px); opacity:1;}

60% {opacity:1;}

100% { -webkit-transform:translate(600px, -400px); opacity:0;}

}



.aeroplane {

animation:aeroplanefly 3s infinite linear;

-webkit-animation:aeroplanefly 3s infinite linear;

}



@keyframes vanDrive

{

0% { right:60px; }

20% { right:60px; }

60% { right:-500px; }

0% { right:60px; }

}



@-webkit-keyframes vanDrive /* Safari and Chrome */

{

0% { right:60px; }

20% { right:60px; }

60% { right:-500px; }

0% { right:60px; }

}



.panel2 .van {

animation:vanDrive 9s infinite linear;

-webkit-animation:vanDrive 9s infinite linear;

}





@keyframes calendarwobble

{

0% { transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); }

25% { transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); -ms-transform:rotate(-3deg); }

75% { transform:rotate(3deg); -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); -ms-transform:rotate(3deg); }

100% { transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); }

}



@-webkit-keyframes calendarwobble /* Safari and Chrome */

{

0% { -webkit-transform:rotate(0deg); }

25% { -webkit-transform:rotate(-3deg); }

75% { -webkit-transform:rotate(3deg); }

100% { -webkit-transform:rotate(0deg); }

}



.calendar {

animation:calendarwobble 0.5s infinite linear;

-webkit-animation:calendarwobble 0.5s infinite linear;

}



@keyframes coin1appear

{

0% { opacity:0; }

10% { opacity:0; }

11% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin1appear /* Safari and Chrome */

{

0% { opacity:0; }

10% { opacity:0; }

11% { opacity:1; }

100% { opacity:1; }

}



@keyframes coin2appear

{

0% { opacity:0; }

15% { opacity:0; }

16% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin2appear /* Safari and Chrome */

{

0% { opacity:0; }

15% { opacity:0; }

16% { opacity:1; }

100% { opacity:1; }

}



@keyframes coin3appear

{

0% { opacity:0; }

20% { opacity:0; }

21% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin3appear /* Safari and Chrome */

{

0% { opacity:0; }

20% { opacity:0; }

21% { opacity:1; }

100% { opacity:1; }

}



@keyframes coin4appear

{

0% { opacity:0; }

25% { opacity:0; }

26% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin4appear /* Safari and Chrome */

{

0% { opacity:0; }

25% { opacity:0; }

26% { opacity:1; }

100% { opacity:1; }

}



@keyframes coin5appear

{

0% { opacity:0; }

30% { opacity:0; }

31% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin5appear /* Safari and Chrome */

{

0% { opacity:0; }

30% { opacity:0; }

31% { opacity:1; }

100% { opacity:1; }

}



@keyframes coin6appear

{

0% { opacity:0; }

35% { opacity:0; }

36% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin6appear /* Safari and Chrome */

{

0% { opacity:0; }

35% { opacity:0; }

36% { opacity:1; }

100% { opacity:1; }

}



@keyframes coin7appear

{

0% { opacity:0; }

40% { opacity:0; }

41% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin7appear /* Safari and Chrome */

{

0% { opacity:0; }

40% { opacity:0; }

41% { opacity:1; }

100% { opacity:1; }

}



@keyframes coin8appear

{

0% { opacity:0; }

45% { opacity:0; }

46% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin8appear /* Safari and Chrome */

{

0% { opacity:0; }

45% { opacity:0; }

46% { opacity:1; }

100% { opacity:1; }

}



@keyframes coin9appear

{

0% { opacity:0; }

50% { opacity:0; }

51% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coin9appear /* Safari and Chrome */

{

0% { opacity:0; }

50% { opacity:0; }

51% { opacity:1; }

100% { opacity:1; }

}



@keyframes coinStrip1Topper

{

0% { opacity:0; }

50% { opacity:0; }

51% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coinStrip1Topper /* Safari and Chrome */

{

0% { opacity:0; }

30% { opacity:0; }

31% { opacity:1; }

100% { opacity:1; }

}



@keyframes coinStrip2Topper

{

0% { opacity:0; }

55% { opacity:0; }

56% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coinStrip2Topper /* Safari and Chrome */

{

0% { opacity:0; }

55% { opacity:0; }

56% { opacity:1; }

100% { opacity:1; }

}





@keyframes coinStrip3Topper

{

0% { opacity:0; }

35% { opacity:0; }

36% { opacity:1; }

100% { opacity:1; }

}



@-webkit-keyframes coinStrip3Topper /* Safari and Chrome */

{

0% { opacity:0; }

35% { opacity:0; }

36% { opacity:1; }

100% { opacity:1; }

}



.coinstrip1 .cointopper {

animation:coinStrip1Topper 7s infinite linear;

-webkit-animation:coinStrip1Topper 7s infinite linear;

}



.coinstrip2 .cointopper {

animation:coinStrip2Topper 7s infinite linear;

-webkit-animation:coinStrip2Topper 7s infinite linear;

}



.coinstrip3 .cointopper {

animation:coinStrip3Topper 7s infinite linear;

-webkit-animation:coinStrip3Topper 7s infinite linear;

}



.coin1 {

animation:coin1appear 7s infinite linear;

-webkit-animation:coin1appear 7s infinite linear;

}



.coin2 {

animation:coin2appear 7s infinite linear;

-webkit-animation:coin2appear 7s infinite linear;

}



.coin3 {

animation:coin3appear 7s infinite linear;

-webkit-animation:coin3appear 7s infinite linear;

}



.coin4 {

animation:coin4appear 7s infinite linear;

-webkit-animation:coin4appear 7s infinite linear;

}



.coin5 {

animation:coin1appear 7s infinite linear;

-webkit-animation:coin5appear 7s infinite linear;

}



.coin6 {

animation:coin2appear 7s infinite linear;

-webkit-animation:coin6appear 7s infinite linear;

}



.coin7 {

animation:coin3appear 7s infinite linear;

-webkit-animation:coin7appear 7s infinite linear;

}



.coin8 {

animation:coin4appear 7s infinite linear;

-webkit-animation:coin8appear 7s infinite linear;

}



.coin9 {

animation:coin9appear 7s infinite linear;

-webkit-animation:coin9appear 7s infinite linear;

}



.coinstrip2 .coin1 {

animation:coin1appear 7s infinite linear;

-webkit-animation:coin1appear 7s infinite linear;

}



.coinstrip2 .coin2 {

animation:coin2appear 7s infinite linear;

-webkit-animation:coin2appear 7s infinite linear;

}



.coinstrip2 .coin3 {

animation:coin3appear 7s infinite linear;

-webkit-animation:coin3appear 7s infinite linear;

}



.coinstrip2 .coin4 {

animation:coin4appear 7s infinite linear;

-webkit-animation:coin4appear 7s infinite linear;

}



.coinstrip2 .coin5 {

animation:coin1appear 7s infinite linear;

-webkit-animation:coin5appear 7s infinite linear;

}



.coinstrip2 .coin6 {

animation:coin2appear 7s infinite linear;

-webkit-animation:coin6appear 7s infinite linear;

}



.coinstrip2 .coin7 {

animation:coin3appear 7s infinite linear;

-webkit-animation:coin7appear 7s infinite linear;

}



.coinstrip2 .coin8 {

animation:coin4appear 7s infinite linear;

-webkit-animation:coin8appear 7s infinite linear;

}



.coinstrip2 .coin9 {

animation:coin9appear 7s infinite linear;

-webkit-animation:coin9appear 7s infinite linear;

}



.coinstrip3 .coin1 {

animation:coin1appear 7s infinite linear;

-webkit-animation:coin1appear 7s infinite linear;

}



.coinstrip3 .coin2 {

animation:coin2appear 7s infinite linear;

-webkit-animation:coin2appear 7s infinite linear;

}



.coinstrip3 .coin3 {

animation:coin3appear 7s infinite linear;

-webkit-animation:coin3appear 7s infinite linear;

}



.coinstrip3 .coin4 {

animation:coin4appear 7s infinite linear;

-webkit-animation:coin4appear 7s infinite linear;

}



.coinstrip3 .coin5 {

animation:coin1appear 7s infinite linear;

-webkit-animation:coin5appear 7s infinite linear;

}



.coinstrip3 .coin6 {

animation:coin2appear 7s infinite linear;

-webkit-animation:coin6appear 7s infinite linear;

}



@keyframes warningsignshake

{

0% { transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); }

25% { transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); -ms-transform:rotate(-6deg); }

75% { transform:rotate(6deg); -webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); -ms-transform:rotate(6deg); }

100% { transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); }

}



@-webkit-keyframes warningsignshake /* Safari and Chrome */

{

0% { transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); }

25% { transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); -ms-transform:rotate(-6deg); }

75% { transform:rotate(6deg); -webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); -ms-transform:rotate(6deg); }

100% { transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); }

}



.warningsign .shakers {

animation:warningsignshake 0.6s infinite linear;

-webkit-animation:warningsignshake 0.6s infinite linear;

}



@keyframes littlevan1 {

0% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

20% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

90% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

100% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

}



@-webkit-keyframes littlevan1 {

0% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

20% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

90% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

100% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

}



@keyframes littlevan2 {

0% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

10% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

30% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

90% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

100% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

}



@-webkit-keyframes littlevan2 {

0% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

10% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

30% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

90% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

100% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

}



@keyframes littlevan3 {

0% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

20% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

40% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

90% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

100% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

}



@-webkit-keyframes littlevan3 {

0% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

20% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

40% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

90% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

100% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

}



@keyframes littlevan4 {

0% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

30% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

90% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

100% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

}



@-webkit-keyframes littlevan4 {

0% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

30% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

70% { transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); }

90% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

100% { transform:translate(70px, 0px); -moz-transform:translate(70px, 0px); -webkit-transform:translate(70px, 0px); -ms-transform:translate(70px, 0px); -o-transform:translate(70px, 0px); }

}



.littlevans .littlevan1 {

animation:littlevan1 9s infinite linear;

-webkit-animation:littlevan1 9s infinite linear;

}



.littlevans .littlevan2 {

animation:littlevan2 9s infinite linear;

-webkit-animation:littlevan2 9s infinite linear;

}



.littlevans .littlevan3 {

animation:littlevan3 9s infinite linear;

-webkit-animation:littlevan3 9s infinite linear;

}



.littlevans .littlevan4 {

animation:littlevan4 9s infinite linear;

-webkit-animation:littlevan4 9s infinite linear;

}