/* northern gas networks infographic 1 ipad  */



body, html {

min-width:768px;

}



h2.appear {

opacity:1 !important;

top:auto !important;

}



p.appear {

opacity:1 !important;

}





.infopanel.panel1 {

height:430px;

}



.infopanel.panel2 {

height:760px;

}



.infopanel.panel3 {

height:650px;

}



.infopanel.panel4 {

height:780px;

}



.tracks {

height:2180px;

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

top:430px;

background-size:auto 100%;

z-index:1;

}



@keyframes bubbleBounce

{

0% { top:-300px; }

100% { top:70px; }

}



@-webkit-keyframes bubbleBounce

{

0% { top:-300px; }

100% { top:70px; }

}



@keyframes bubbleShadow

{

0% { opacity:0; }

100% { opacity:0.7; }

}



@-webkit-keyframes bubbleShadow

{

0% { opacity:0; }

100% { opacity:0.7; }

}



.greenBubble {

width:230px;

height:230px;

background-size:contain;

top:70px;

}



.shadow {

width:230px;

background-size:100% auto;

background-position:left top;

top:290px;

opacity:0.7;

}



.panel1 .littleills {

height:120px;

}



.panel1 .littlestreet {

width:180px;

background-size:contain;

height:35px;

background-repeat:no-repeat;

left:-40px;

}



.panel1 .tree1 {

left:140px;

height:50px;

width:36px;

background-size:contain;

}



.panel1 .tree2 {

height:35px;

width:40px;

background-repeat:no-repeat;

background-position:left bottom;

background-size:contain;

left:179px;

}



.panel1 .office {

width:50px;

height:120px;

background-size:contain;

left:219px;

}



.panel1 .tree3 {

width:36px;

height:75px;

left:480px;

background-size:contain;

}



.panel1 .tree4 {

height:99px;

width:29px;

background-size:contain;

left:512px;

}



.panel1 .tree5 {

width:21px;

height:41px;

background-size:contain;

left:535px;

}



.panel1 .littleoffice {

width:34px;

height:66px;

left:575px;

background-size:contain;

}



.panel1 .littleoffice.secondoffice {

left:619px;

}



.panel1 .tree6 {

width:24px;

height:31px;

left:665px;

background-size:contain;

background-repeat:no-repeat;

background-position:center center;

}



.panel1 .tree7 {

width:24px;

height:31px;

background-size:contain;

left:695px;

background-repeat:no-repeat;

background-position:center center;

}



.panel1 .tree8 {

width:33px;

height:45px;

background-size:contain;

left:726px;

}



.infopanel .contentarea {

width:720px;

}



.textblock {

width:240px;

top:30px;

}



.contentarea h2 {

font-size:42px;

line-height:58px;

}



.contentarea p {

font-size:16px;

line-height:23px;

top:56px;

}



.panel2 .contentarea .textblock2 {

left:78px;

top:290px;

}



.panel2 .van {

width:144px;

height:68px;

background-size:contain;

top:269px;

right:140px;

animation:vanDrive 6s infinite linear;

-webkit-animation:vanDrive 6s infinite linear;

}



@keyframes vanDrive

{

0% { right:140px; }

20% { right:140px; }

60% { right:-300px; }

100% { right:140px; }

}



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

{

0% { right:140px; }

20% { right:140px; }

60% { right:-300px; }

100% { right:140px; }

}



.panel2 .littleshadowhouse {

width:74px;

height:61px;

top:276px;

background-size:contain;

right:60px;

}



.panel2 .littlehouse {

width:74px;

height:61px;

top:276px;

background-size:contain;

right:10px;

}



.panel2 .littleshadowhouse.shadowhouse2 {

right:-43px;

}



.panel2 .littlepeople {

top:418px;

left:181px;

height:43px;

}



.panel2 .woman {

width:25px;

height:43px;

background-size:contain;

}



.panel2 .man {

width:18px;

background-size:contain;

height:43px;

}



.panel2 .calendar {

width:66px;

height:78px;

background-size:contain;

top:427px;

right:160px;

}



.panel2 .calendar .days {

width:66px;

font-size:30px;

top:35px;

}



.panel2 .contentarea .textblock3 {

top:465px;

left:152px;

}



.panel2 .contentarea .textblock4 {

width:140px;

top:465px;

}



.panel2 .contentarea .textblock5 {

top:620px;

width:340px;

}



.panel2 .wheel {

width:60px;

height:60px;

background-size:contain;

right:163px;

top:622px;

}



.panel3 .coins {

top:15px;

left:225px;

}



.panel3 .littlevans {

left:377px;

top:519px;

}



.panel3 .contentarea .textblock1 {

top:105px;

width:445px;

left:57px;

}



.panel3 .contentarea .textblock2 {

left:40px;

top:275px;

}



.panel3 .contentarea .textblock2 h2 {

font-size:90px;

line-height:90px;

}



.panel3 .contentarea .textblock2 p {

left:122px;

}



.panel3 .warningsign {

top:265px;

left:580px;

}



.panel3 .contentarea .textblock4 {

left:70px;

top:450px;

}



.panel3 .contentarea .textblock3 {

width:300px;

top:407px;

}



.panel3 .littlevan {

width:87px;

height:41px;

background-size:contain;

left:0px;

}



.panel3 .littlevan2 {

left:105px;

}



.panel3 .littlevan3 {

left:210px;

}



.panel3 .littlevan4 {

left:315px;

}



.panel4 .greenills .tree1 {

left:20px;

}



.panel4 .greenills .tree2 {

left:70px;

}



.panel4 .greenills .tree3 {

left:450px;

}



.panel4 .greenills .tree4 {

left:490px;

}



.panel4 .greenills .littlestreet {

right:130px;

}



.panel4 .contentarea .textblock1 {

right:65px;

width:250px;

top:45px;

}



.panel4 .contentarea .textblock2 {

left:70px;

top:190px;

}



.panel4 .contentarea .textblock3 {

width:250px;

right:65px;

top:305px;

}



.panel4 .contentarea .textblock4 {

top:540px;

width:260px;

}



.panel4 .contentarea .textblock4 h2 {

width:240px;

margin:0 auto;

right:0px;

margin:0 auto;

}

.panel4 .contentarea .textblock4 p {

width:260px;

top:90px;

}



.panel4 .wheel {

width:60px;

height:60px;

background-size:contain;

top:470px;

left:0px;

right:0px;

margin:0 auto;

}