/* northern gas networks infographic 1 ipad  */



body, html {

min-width:768px;

}



h2.appear {

opacity:1 !important;

top:auto !important;

}



p.appear, ul.appear, .appear {

opacity:1 !important;

}



.infopanel.panel1 {

height:400px;

}



.infopanel.panel2 {

height:1160px;

}



.infopanel.panel3 {

height:650px;

}



.infopanel.panel4 {

height:830px;

}



.infopanel.panel5 {

height:1040px;

}



.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:700px;

}



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

font-size:42px;

line-height:50px;

}



.contentarea p {

font-size:16px;

line-height:23px;

top:56px;

}



.infopanel.panel2 {

height:830px;

}



.littlegraves {

width:400px;

height:270px;

top:50px;

}



.littlegraves .littlegrave {

width:35px;

height:45px;

background-size:contain;

}



.panel2 .textblock p {

font-size:24px;

line-height:30px;

top:120px;

}



.panel2 .textblock h2 {

font-size:120px;

line-height:120px;

}



.panel2 .textblock {

width:280px;

}



.panel2 .textblock1 {

top:74px;

}



.panel2 .textblock2 {

left:0px;

top:400px;

}



.beds {

width:400px;

bottom:30px;

}



.bed1, .bed2, .bed3 {

background-size:80%;

}



.bed3 {

left:auto;

right:0px;

}



.bed2 {

left:155px;

bottom:122px;

}



.infopanel.panel2 {

height:700px;

}



.panel3 .textblock1 {

top:50px;

width:500px;

}



.flames {

left:-140px;

}



.infopanel.panel3 {

height:1250px;

}



.panel3 .textblock2 {

top:500px;

width:300px;

left:40px;

height:215px;

}



.fireandpipe {

left:355px;

top:438px;

}



.infopanel.panel3 {

height:1100px;

}



.heart {

top:760px;

}



.grave {

left:115px;

}



.brain {

left:210px;

top:810px;

}



.panel3 .textblock3 {

width:320px;

right:0px;

left:auto;

top:790px;

}



.panel3 .textblock3 h2 {

width:320px;

}



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

top:115px;

}



.panel4 .textblock1 {

top:50px;

}



.panel4 .contentarea h2 {

letter-spacing:0px;

}



.oven {

left:0px;

top:140px;

}



.panel4 .textblock2 {

right:0px;

width:420px;

top:150px;

}



.panel4 .textblock2 ul {

width:420px;

padding:0px;

}



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

width:380px;

font-size:24px;

line-height:30px;

background-position:left 4px;

}



.panel4 .textblock3 {

top:500px;

width:700px;

}



.panel4 .textblock3 ul {

right:0px;

top:23px;

}



.panel4 .textblock3 h2 {

font-size:42px;

line-height:50px;

}



.shootButton {

top:150px;

}



.panel5 .textblock1 {

top:50px;

}



.textblock1 {

top:50px;

}



.panel5 .textblock2 h2 {

font-size:120px;

line-height:120px;

}



.panel5 .textblock2 {

top:130px;

width:270px;

}



.panel5 .textblock2 p {

top:130px;

font-size:24px;

line-height:30px;

}



.alarm {

width:400px;

top:190px;

right:0px;

}



.alarminner {

width:200px;

height:200px;

background-size:contain;

}



.alarmsounds {

width:400px;

background-size:contain;

}



.panel5 .textblock3 {

width:700px;

top:520px;

}



.phone {

top:720px;

left:0px;

}



.panel5 .textblock4 {

top:800px;

right:20px;

width:360px;

}



.panel6 .contentarea .textblock1 {

top:50px;

width:500px;

}



.panel6 .tracks {

width:700px;

background-size:100% auto;

left:0px;

top:340px;

background-position:center top;

}



.panel6 .contentarea .dial {

left:70px;

top:190px;

}



.panel6 .contentarea .textblock p {

font-size:23px;

line-height:30px;

}



.panel6 .contentarea .textblock2 {

top:240px;

left:260px;

width:400px;

}



.panel6 .contentarea .textblock3 {

top:447px;

left:20px;

width:320px;

}



.panel6 .hospital {

width:110px;

height:168px;

background-size:contain;

top:455px;

left:370px;

}



.panel6 .hospital .hospitalinner {

width:110px;

height:168px;

background-size:contain;

background-position:center top;

}



.panel6 .hospital .cross {

left:0px;

top:8px;

}



.panel6 .tree1 {

top:543px;

left:490px;

}



.panel6 .tree2 {

top:543px;

left:631px;

}



.panel6 .tree3 {

top:510px;

left:550px;

}



.panel6 .contentarea .textblock5 {

width:360px;

left:330px;

top:862px;

}



.panel6 .contentarea .textblock4 {

top:645px;

width:700px;

left:0px;

right:0px;

margin:0 auto;

}



.panel6 .contentarea .textblock4 .number {

font-size:75px;

top:30px;

}



.panel6 .contentarea .textblock4 .smallp {

font-size:16px;

line-height:23px;

top:110px;

width:480px;

right:0px;

margin:0 auto;

}



.panel6 .tool3 {

left:0px;

top:900px;

}



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

background-size:70%;

}



.panel6 .tool2 {

top:850px;

left:200px;

}



.panel6 .tool1 {

top:900px;

left:100px;

}



.infopanel.panel6 {

height:1180px;

}



.panel6 .van {

top:1053px;

left:0px;

animation:vandrive 9s infinite linear;

-webkit-animation:vandrive 9s infinite linear;

}



@keyframes vandrive {

0% {left:800px;}

50% {left:0px;}

100% {left:800px;}

}



@-webkit-keyframes vandrive {

0% {left:800px;}

50% {left:0px;}

100% {left:800px;}

}



.panel7 .textblock1 {

width:700px;

top:50px;

}



.panel7 .textblock h2 {

font-size:42px;

line-height:50px;

}



.panel7 .textblock2 {

top:310px;

height:270px;

width:380px;

}



.panel7 .textblock p {

top:56px;

}



.panel7 .boat {

top:345px;

}



@keyframes boatswam {

0% {right:-500px;}

40% {right:0px;}

60% {right:0px;}

100% {right:-500px;}

}



@-webkit-keyframes boatswam {

0% {right:-500px;}

40% {right:0px;}

60% {right:0px;}

100% {right:-500px;}

}



.panel7 .textblock3 {

top:670px;

width:460px;

right:30px;

}



.panel7 .bbq {

top:560px;

left:30px;

}



.panel7 .textblock4 {

left:0px;

top:940px;

}



.panel7 .textblock4 p {

font-size:23px;

line-height:30px;

font-family:"VAGRoundedLight";

width:340px;

left:45px;

}



.panel7 .caseandalarm {

right:-120px;

top:900px;

}



.infopanel.panel7 {

height:1250px;

}



.panel8 .greenills {

width:700px;

}



.panel8 .greenills .tree1 {

left:20px;

}



.panel8 .greenills .tree2 {

left:70px;

}



.panel8 .greenills .tree3 {

left:450px;

}



.panel8 .greenills .tree4 {

left:490px;

}



.panel8 .textblock1 {

width:700px;

top:50px;

height:100px;

}



.panel8 .textblock1 h2 {

font-size:93px;

line-height:90px;

}



.panel8 .textblock1 p {

font-size:27px;

line-height:34px;

width:500px;

left:0px;

right:0px;

margin:0 auto;

top:100px;

}



.infopanel.panel8 {

height:260px;

}