/* northern gas networks infographic 1 mobile  */



body, html {

min-width:320px;

}



h2.appear, h3.appear {

opacity:1 !important;

top:auto !important;

}



p.appear {

opacity:1 !important;

}



.infopanel.panel1 {

height:400px;

}



.infopanel.panel2 {

height:800px;

}



.infopanel.panel3 {

height:650px;

}



.infopanel.panel4 {

height:1400px;

}



.infopanel.panel5 {

height:1450px;

}



.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; }

}



.orangeBubble {

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;

}



.contentarea {

width:300px;

}



.contentarea h2, .panel3 .textblock2 h2, .contentarea h2, .panel3 .textblock3 h2 {

font-size:38px;

line-height:42px;

}



.contentarea p {

font-size:16px;

line-height:23px;

top:56px;

}



.infopanel.panel2 {

height:830px;

}



.littlegraves {

width:150px;

height:375px;

top:20px;

}



.littlegraves .littlegrave {

width:27px;

height:32px;

background-size:contain;

margin-right:2px;

margin-bottom:6px;

}



.panel2 .textblock p {

font-size:20px;

line-height:26px;

top:100px;

}



.panel2 .textblock h2 {

font-size:100px;

line-height:100px;

}



.panel2 .textblock {

width:280px;

}



.panel2 .textblock1 {

top:90px;

width:130px;

right:10px;

height:240px;

}



.panel2 .textblock2 {

left:0px;

top:430px;

right:0px;

margin:0 auto;

width:260px;

}



.beds {

width:300px;

bottom:10px;

height:240px;

}



.bed1, .bed2, .bed3 {

background-size:80%;

}



.bed3 {

left:auto;

right:0px;

top:0px;

}



.bed2 {

left:155px;

bottom:122px;

display:none;

}



.infopanel.panel2 {

height:860px;

}



.panel3 .textblock1 {

top:50px;

width:270px;

}



.panel3 .textblock1 p {

top:65px;

font-size:26px;

line-height:36px;

}



.flames {

left:-325px;

top:340px;

}



.infopanel.panel3 {

height:1250px;

}



.panel3 .textblock2 {

left:0px;

top:430px;

}



.fireandpipe {

left:50px;

top:625px;

width:350px;

height:135px;

}



.pipes {

width:350px;

height:135px;

background-size:contain;

}



.fireflames {

left:27px;

top:30px;

width:50px;

height:50px;

background-size:contain;

}



.littlefire {

width:100px;

height:125px;

background-size:contain;

top:50px;

left:50px;

}



.infopanel.panel3 {

height:1320px;

}



.heart {

top:1180px;

width:90px;

height:129px;

background-size:contain;

left:20px;

}



.grave {

left:140px;

width:90px;

height:117px;

background-size:contain;

}



.brain {

left:190px;

top:1120px;

width:110px;

height:90px;

background-size:cover;

}



.panel3 .textblock3 {

width:300px;

right:0px;

left:auto;

top:830px;

}



.panel3 .textblock3 h2 {

width:300px;

}



.panel3 .textblock2 p, .panel3 .textblock3 p {

top:103px;

}



.panel4 .textblock1 {

top:50px;

width:300px;

}



.panel4 .contentarea h2 {

letter-spacing:0px;

}



.oven {

left:0px;

right:0px;

margin:0 auto;

top:535px;

width:246px;

}



.panel4 .textblock2 {

right:0px;

width:300px;

top:150px;

}



.panel4 .textblock2 ul {

width:300px;

padding:0px;

}



.panel4 .textblock2 ul li, .panel4 .textblock3 ul li {

width:260px;

font-size:24px;

line-height:30px;

background-position:left 4px;

}



.panel4 .textblock3 {

top:850px;

width:300px;

height:600px;

}



.panel4 .textblock3 ul {

right:0px;

top:134px;

}



.panel4 .textblock3 h2 {

font-size:42px;

line-height:50px;

width:300px;

}



.shootButton {

top:380px;

width:300px;

left:0px;

background-size:contain;

}



.shootButton:hover {

top:390px;

}



.panel5 .textblock1 {

top:50px;

}



.textblock1 {

top:50px;

}



.panel5 .textblock2 h2 {

font-size:120px;

line-height:120px;

}



.panel5 .textblock2 {

top:130px;

width:270px;

left:0px;

right:0px;

margin:0 auto;

}



.panel5 .textblock2 p {

top:130px;

font-size:24px;

line-height:30px;

}



.alarm {

width:400px;

top:460px;

right:-50px;

}



.alarminner {

width:200px;

height:200px;

background-size:contain;

}



.alarmsounds {

width:400px;

background-size:contain;

}



.panel5 .textblock3 {

width:300px;

top:685px;

height:250px;

}



.panel5 .textblock3 p {

top:180px;

width:300px;

}



.phone {

top:950px;

left:0px;

right:0px;

margin:0 auto;

width:280px;

height:240px;

background-size:contain;

}



.phone .phonetophalf {

width:280px;

background-size:contain;

left:0px;

}



.phone .phonelowerhalf {

width:280px;

background-size:contain;

left:0px;

}



.panel5 .textblock4 {

top:1220px;

right:0px;

width:300px;

}



.panel5 .textblock4 p {

width:260px;

left:0px;

right:0px;

margin:0 auto;

}



.panel5 .textblock4 .urllink {

top:75px;

}



.panel6 .contentarea .textblock1 {

top:50px;

width:300px;

}



.panel6 .tracks {

width:440px;

background-size:100% auto;

left:-60px;

top:340px;

background-position:center top;

background-image:url(images/mobile/pipes.png);

height:1278px;

}



.panel6 .contentarea .dial {

left:10px;

top:220px;

}



.panel6 .contentarea .textblock p {

font-size:16px;

line-height:23px;

text-align:center;

}



.panel6 .contentarea .textblock2 {

top:250px;

left:180px;

width:110px;

}



.panel6 .contentarea .textblock3 {

top:477px;

left:0px;

right:0px;

margin:0 auto;

width:260px;

}



.panel6 .hospital {

width:80px;

height:122px;

background-size:contain;

top:607px;

left:170px;

}



.panel6 .hospital .hospitalinner {

width:80px;

height:122px;

background-size:contain;

background-position:center top;

}



.panel6 .hospital .cross {

left:0px;

top:8px;

width:70px;

}



.panel6 .tree1 {

top:643px;

left:0px;

}



.panel6 .tree2 {

top:643px;

left:81px;

}



.panel6 .tree3 {

top:510px;

left:550px;

}



.panel6 .contentarea .textblock5 {

width:200px;

left:0px;

top:1290px;

}



.panel6 .contentarea .textblock4 {

top:760px;

width:300px;

left:0px;

right:0px;

margin:0 auto;

}



.panel6 .contentarea .textblock4 .number {

font-size:45px;

top:30px;

}



.panel6 .contentarea .textblock4 .smallp {

font-size:16px;

line-height:23px;

top:100px;

width:300px;

right:0px;

margin:0 auto;

}



.panel6 .tool3 {

left:0px;

top:1170px;

}



.panel6 .tool3, .panel6 .tool2, .panel6 .tool1 {

background-size:70%;

}



.panel6 .tool2 {

top:1110px;

left:160px;

}



.panel6 .tool1 {

top:1440px;

left:90px;

}



.infopanel.panel6 {

height:1660px;

}



@keyframes vandrivea {

0% {left:-20px;}

50% {left:120px;}

100% {left:-20px;}

}



@-webkit-keyframes vandrivea {

0% {left:-20px;}

50% {left:120px;}

100% {left:-20px;}

}



.panel6 .van {

top:1015px;

left:100px;

animation:vandrivea 4s infinite linear;

-webkit-animation:vandrivea 4s infinite linear;

width:180px;

height:86px;

background-size:contain;

}



.panel7 .textblock1 {

width:300px;

top:50px;

left:0px;

right:auto;

}



.panel7 .textblock h2 {

font-size:26px;

line-height:30px;

}



.panel7 .textblock2 {

top:440px;

height:270px;

width:300px;

left:0px;

right:auto;

}



.panel7 .textblock p {

top:39px;

}



.panel7 .boat {

top:245px;

}



@keyframes boatswam {

0% {right:-200px;}

40% {right:0px;}

60% {right:0px;}

100% {right:-200px;}

}



@-webkit-keyframes boatswam {

0% {right:-200px;}

40% {right:0px;}

60% {right:0px;}

100% {right:-200px;}

}



.panel7 .textblock3 {

top:1056px;

width:300px;

left:0px;

right:0px;

}



.panel7 .bbq {

top:710px;

left:0px;

right:0px;

margin:0 auto;

}



.panel7 .textblock4 {

left:0px;

top:1575px;

width:300px;

right:0px;

}



.panel7 .textblock4 p {

font-size:23px;

line-height:30px;

font-family:"VAGRoundedLight";

width:280px;

left:0px;

right:0px;

margin:0 auto;

text-align:center;

}



.panel7 .caseandalarm {

right:-120px;

top:1320px;

}



.infopanel.panel7 {

height:1900px;

}



.panel8 .greenills {

width:300px;

}



.panel8 .textblock1 {

width:300px;

top:50px;

height:100px;

}



.panel8 .textblock1 h2 {

font-size:43px;

line-height:40px;

}



.panel8 .textblock1 p {

font-size:23px;

line-height:30px;

width:280px;

left:0px;

right:0px;

margin:0 auto;

top:50px;

}



.infopanel.panel8 {

height:230px;

}



.panel5 .textblock3 h2 {

font-size:26px;

line-height:33px;

font-family:"VAGRoundedLight";

}



.panel4 .textblock3 h2 {

top:30px !important;

}