/* northern gas networks infographic 1 mobile  */



body, html {

min-width:320px;

}



.tracks {

height:3304px;

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

top:400px;

background-size:auto 100%;

z-index:1;

}



.panel1 .littleils {



}

.infopanel.panel2 {

height:1450px;

}



.infopanel.panel3 {

height:920px;

}



.infopanel .contentarea {

width:300px;

}



.infopanel.panel1 {

height:400px;

}



.infopanel.panel4 {

height:980px;

}



.panel1 .office {

left:63px;

}



.panel1 .littlestreet {

left:300px;

}



.panel1 .tree3 {

left:5px;

}



.panel1 .tree2 {

left:115px;

}



.panel1 .tree1 {

left:145px;

}



.textblock {

top:40px;

}



@keyframes vanDrive

{

0% { left:100px; }

20% { left:100px; }

60% { left:-280px; }

100% { left:100px; }

}



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

{

0% { left:100px; }

20% { left:100px; }

60% { left:-280px; }

100% { left:100px; }

}



.panel2 .van {

top:395px;

right:auto;

left:100px;

animation:vanDrive 7s infinite linear;

-webkit-animation:vanDrive 7s infinite linear;

}



.panel2 .littlehouse {

top:403px;

right:210px;

}



.panel2 .littleshadowhouse {

top:403px;

right:260px;

}



.panel2 .littleshadowhouse.shadowhouse2 {

right:160px;

}



.panel2 .contentarea .textblock2 {

top:250px;

left:0px;

}



.panel2 .littlepeople {

top:510px;

left:0px;

right:0px;

margin:0 auto;

width:180px;

}



.panel2 .contentarea .textblock3 {

left:0px;

right:0px;

margin:0 auto;

top:565px;

}



.panel2 .contentarea .textblock4 {

top:1004px;

width:300px;

text-align:center;

}



.panel2 .contentarea .textblock4 p {

text-align:center;

}



.panel2 .contentarea .textblock5 {

top:1180px;

left:165px;

width:140px;

}



.panel2 .contentarea .textblock5 h2 {

text-align:left;

font-size:32px;

line-height:33px;

}



.panel2 .contentarea .textblock5 p {

text-align:left;

top:40px;

}





.panel2 .wheel {

left:0px;

right:0px;

margin:0 auto;

top:1360px;

}



.panel2 .calendar {

top:860px;

left:0px;

right:0px;

margin:0 auto;

width:112px;

height:132px;

}



.panel2 .calendar .days {

width:112px;

top:65px;

font-size:45px;

}



.panel3 .coins {

left:0px;

right:0px;

margin:0 auto;

top:62px;

}



.panel3 .contentarea .textblock1 {

left:0px;

right:0px;

margin:0 auto;

width:300px;

top:152px;

}



.panel3 .warningsign {

top:425px;

left:180px;

}



.panel3 .contentarea .textblock4 {

top:700px;

}



.panel3 .contentarea .textblock3 {

top:555px;

left:0px;

right:0px;

margin:0 auto;

}



@keyframes littlevan1 {

0% { transform:translate(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 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(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 0px); }

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

}



@-webkit-keyframes littlevan1 {

0% { transform:translate(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 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(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 0px); }

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

}



@keyframes littlevan2 {

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

10% { transform:translate(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 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(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 0px); }

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

}



@-webkit-keyframes littlevan2 {

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

10% { transform:translate(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 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(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 0px); }

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

}



@keyframes littlevan3 {

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

20% { transform:translate(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 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(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 0px); }

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

}



@-webkit-keyframes littlevan3 {

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

20% { transform:translate(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 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(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 0px); }

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

}



@keyframes littlevan4 {

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

30% { transform:translate(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 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(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 0px); }

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

}



@-webkit-keyframes littlevan4 {

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

30% { transform:translate(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 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(10px, 0px); -moz-transform:translate(10px, 0px); -webkit-transform:translate(10px, 0px); -ms-transform:translate(10px, 0px); -o-transform:translate(10px, 0px); }

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

}





.panel3 .littlevans {

left:0px;

top:624px;

left:-26px;

width:340px;

}



.panel3 .littlevan {

width:75px;

height:38px;

}



.panel3 .littlevan2 {

left:90px;

}



.panel3 .littlevan3 {

left:180px;

}



.panel3 .littlevan4 {

left:270px;

}



.panel3 .contentarea .textblock2 {

left:0px;

top:354px;

}



.panel3 .contentarea .textblock2 h2 {

font-size:42px;

line-height:58px;

}



.panel3 .contentarea .textblock2 p {

left:0px;

top:56px;

width:180px;

}



.panel3 .warningsign {

top:415px;

left:190px;

}



.panel3 .contentarea .textblock3 {

top:545px;

}



.panel3 .contentarea .textblock4 {

left:0px;

right:0px;

margin:0 auto;

top:720px;

}



.panel4 .contentarea .textblock1 {

width:260px;

left:0px;

right:0px;

top:40px;

margin:0 auto;

}



.panel4 .contentarea .textblock4 {

top:690px;

}



.panel4 .contentarea .textblock3 {

left:0px;

top:450px;

right:0px;

margin:0 auto;

}



.panel4 .contentarea .textblock2 {

left:0px;

right:0px;

margin:0 auto;

top:280px;

}



.panel4 .contentarea .textblock2 p {

text-align:center;

top:70px;

}



.panel4 .contentarea .textblock2 h2 {

font-size:70px;

line-height:70px;

text-align:center;

}



.panel4 .wheel {

top:640px;

}



.panel4 .greenills {

width:320px;

}



.panel4 .greenills .littlestreet {

right:-130px;

}



.panel4 .contentarea .textblock4 h2 {font-size:35px; line-height:38px;}



.panel4 .contentarea .textblock4 {

top:705px;

}



.panel4 .contentarea .textblock4 p {

top:75px;

}