.long-scroll {
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 24px;
	font-weight: lighter;
	color: #ffffff;
	text-align: center;
	background-color: #2194c5;
}

.long-scroll h1,
.long-scroll h2,
.long-scroll h3,
.long-scroll h4,
.long-scroll h5,
.long-scroll h6 {
	font-family: omnes_mediumregular, Helvetica, Arial, sans-serif;
	font-weight: normal;
	margin: 0;
}

.long-scroll h1 {
	font-size: 80px;
	line-height: 72px;
}

.long-scroll h2 {
	font-size: 42px;
	line-height: 35px;
}

#viewport {
	position: relative;
	width: 100%;
	/*height: 8370px;*/
	height: 14231px;
	overflow: hidden;
}

#main {
	position: relative;
	left: 50%;
	margin-left: -1000px;
	/*margin: 0 auto;*/
	width: 2000px;
	height: 8370px;
}

/* generic */

.text-holder {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -300px;
	width: 600px;
}

.text {
	/*position: absolute;*/
	display: block;
}

.object-text {
	position: relative;
	display: block;
}

.heading h2 {
	margin-bottom: 25px;
}

.button {
	font-size: 18px;
	line-height: 40px;
	text-align: center;
	left: 50%;
	margin-left: -87px;
	cursor: pointer;
}

.sprite,
.anisprite {
	position: absolute;
	background-repeat: no-repeat;
	z-index: 10;
}

/* map */
#map-open {
	position: fixed;
	bottom: 240px;
	right: 50px;
	cursor: pointer;
}

#map-holder {
	position: fixed;
	bottom: 240px;
	right: -740px;
	width: 545px;
	height: 368px;
	background: url(../images/map.png) top center no-repeat;
	background-size: 545px 368px;
}

#map {
	position: absolute;
	top: 0;
	right: 0px;
}

.marker {
	position: absolute;
	cursor: pointer;
}

#tap-marker {
	  left: 320px;
	top: 110px;
}

#housepop-marker {
	  right: -99999px;
}

#storage-marker {
	left: 207px;
	top: 60px;

}

#rain-marker {
	left: 88px;
	top: 85px;
}

#treatment-plant-marker {
	left: 124px;
	top: 193px;
}

#ground-marker {
	left: 355px;
	top: 230px;
}

#desalination-marker {
	left: 455px;
	top: 112px;
}
#recycled-marker {
	left: 212px;
	top: 217px;
}

#map-close {
	position: absolute;
	top: 0px;
	left: -45px;
	background: url(../images/map-close.jpg) top center no-repeat;
	cursor: pointer;
	z-index: 9999;
}

/* nav */
#nav-section {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 100px;
	height: 180px;
}

#nav-down {
	margin-top: 90px;
}


.nav-button {
	cursor: pointer;
}

/* mobile (tablet) first styles, set small bg, media query at the bottom overwrites this */
.main-background {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1;

	width: 1024px;
	margin-left: -512px;
}


.main-background .slice {
	width: 100%;
}

.main-background .one {
	background-image: url(../images/ipad/background_01.png);
	height: 2062px;
	background-size: 100%;
	background-repeat: no-repeat;
}

.main-background .two {
	background-image: url(../images/ipad/background_02.png);
	height: 1123px;
	background-size: 100%;
	background-repeat: no-repeat;
}

.main-background .three {
	background-image: url(../images/ipad/background_03.png);
	height:1231px;
	background-size: 100%;
	background-repeat: no-repeat;
}

.main-background .four {
	background-image: url(../images/ipad/background_04.png);
	 height:1480px;
	 background-size: 100%;
	 background-repeat: no-repeat;
}


.main-background .five {
	background-image: url(../images/ipad/background_05.png);
	 height:1646px;
	 background-size: 100%;
	 background-repeat: no-repeat;
}

.main-background .six {
	background-image: url(../images/ipad/background_06.png);
	 /* height:1398px; 126 diff */
	 height:1524px;
	 background-size: 100%;
	 background-repeat: no-repeat;
}

.main-background .seven {
	background-image: url(../images/ipad/background_07.png);
	 height:1776px;
	 background-size: 100%;
	 background-repeat: no-repeat;
}


.main-background .eight {
	background-image: url(../images/ipad/background_08.png);
	 height:1446px;
	 background-size: 100%;
	 background-repeat: no-repeat;
}

.main-background .nine {
	background-image: url(../images/ipad/background_09.png);
	 height:1943px;
	 background-size: 100%;
	 background-repeat: no-repeat;
}

/* layers */
/* default for a sprite is 10 */
.layer-midground.back {
	z-index: 15;
}
.layer-midground {
	z-index: 20;
}
.layer-midground.front {
	z-index: 25;
}

.layer-foreground {
	z-index: 30;
}
.layer-foreground.front {
	z-index: 33;
}

.layer-cloud.back {
	z-index: 42;
}
.layer-cloud {
	z-index: 45;
}
.layer-cloud.front {
	z-index: 48;
}

.layer-ui.back {
	z-index: 98;
}
.layer-ui {
	z-index: 100;
}
.layer-ui.front {
	z-index: 110;
}

#map-section .sprite,
#nav-section .sprite,
#intro-section .sprite,
#recycled-section .sprite,
#desalination-section .sprite,
#again-section .sprite {
	background-image:url(../images/sprite0.png);
}
.button {width:174px; height:40px; background-position: -2px -2px}
.cloud1 {width:399px; height:129px; background-position: -608px -2px}
.cloud2 {width:877px; height:284px; background-position: -737px -178px}
.cloud3 {width:733px; height:237px; background-position: -2px -178px}
.cloud4 {width:537px; height:174px; background-position: -1009px -2px}
.cloud5 {width:877px; height:284px; background-position: -2px -464px}
.down {width:97px; height:97px; background-position: -509px -2px}
.down2 {width:97px; height:97px; background-position: -311px -2px}
.map {width:545px; height:368px; }
.map-close {width:45px; height:47px; background-position: -178px -2px}
.marker0 {width:41px; height:66px; background-position: -268px -2px}
.marker1 {width:41px; height:66px; background-position: -225px -2px}
.up {width:97px; height:97px; background-position: -410px -2px}

#tap-section .sprite,
#storage-section .sprite,
#treatment-plant-section .sprite {
	background-image:url(../images/sprite1.png);
}
.cloud6 {width:877px; height:284px; background-position: -2px -2px}
.cloud7 {width:730px; height:237px; background-position: -881px -2px}
.mountains-left {width:1172px; height:493px; background-position: -2px -288px}
.mountains-right {width:1632px; height:513px; background-position: -2px -783px}
.purplepipe {width:924px; height:124px; background-position: -2px -1298px}
.tanktop {width:261px; height:17px; background-position: -928px -1298px}
.valve {width:145px; height:146px; background-position: -1191px -1298px}

/*#intro-section .sprite.raincloud,*/
/*#collection-section .sprite.raincloud,*/
/*#storage-section .sprite.raincloud,*/
/*#usage-section .sprite.raincloud,*/
/*#treatment--section .sprite.raincloud,*/
/*#again-section .sprite.raincloud {*/
	/*background-image:url(../images/sprite-rainclouds.png)*/
/*}*/
/*.raincloud1 {width:536px; height:299px; background-position: -2px -2px}*/
/*.raincloud2 {width:583px; height:376px; background-position: -540px -2px}*/
/*.raincloud3 {width:661px; height:326px; background-position: -2px -380px}*/
/*.raincloud4 {width:612px; height:292px; background-position: -2px -708px}*/

/* override */
#again-section .sprite.mountains-left,
#again-section .sprite.mountains-right {
	background-image:url(../images/sprite1.png);
}

/* animated sprites */
.anisprite {
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
.anisprite.bath_loop {
	background-image: url('../images/ani/bath_loop.png');
	width: 170px;
	height: 150px;
}

.anisprite.cows_drink {
	background-image: url('../images/ani/cows_drink.png');
	width: 372px;
	height: 206px;
}

.anisprite.farmer {
	background-image: url('../images/ani/farmer.png');
	width: 120px;
	height: 130px;
}

.anisprite.garden_sprinkler {
	background-image: url('../images/ani/garden_sprinkler.png');
	width: 250px;
	height: 350px;
}


.anisprite.gutter_drain_loop {
	background-image: url('../images/ani/gutter_drain_loop.png');
	width: 230px;
	height: 40px;
}

.anisprite.hiker {
	background-image: url('../images/ani/hiker.png');
	width: 110px;
	height: 110px;
}

.anisprite.hose_loop {
	background-image: url('../images/ani/hose.png');
	width: 130px;
	height: 90px;
}

.anisprite.pipe_1 {
	background-image: url('../images/ani/pipe_1.png');
	width: 210px;
	height: 100px;
}

.anisprite.pipe_2 {
	background-image: url('../images/ani/pipe_2.png');
	width: 100px;
	height: 450px;
}

.anisprite.pipe_3 {
	background-image: url('../images/ani/pipe_3.png');
	width: 40px;
	height: 70px;
}

.anisprite.pipe_4 {
	background-image: url('../images/ani/pipe_4.png');
	width: 40px;
	height: 210px;
}

.anisprite.pipe_5 {
	background-image: url('../images/ani/pipe_5.png');
	width: 190px;
	height: 40px;
}
.anisprite.pipe_6 {
	background-image: url('../images/ani/pipe_6.png');
	width: 160px;
	height: 50px;
}

.anisprite.pipe_7 {
	background-image: url('../images/ani/pipe_7.png');
	width: 140px;
	height: 460px;
}

.anisprite.pipe_8 {
	background-image: url('../images/ani/pipe_8.png');
	width: 50px;
	height: 400px;
}

.anisprite.pipe_9 {
	background-image: url('../images/ani/pipe_9.png');
	width: 90px;
	height: 508px;
}

.anisprite.pipe_10 {
	background-image: url('../images/ani/pipe_10.png');
	width: 120px;
	height: 260px;
}

.anisprite.pipe_11 {
	background-image: url('../images/ani/pipe_11.png');
	width: 230px;
	height: 130px;
}

.anisprite.pipewhitewash_loop {
	background-image: url('../images/ani/pipewhitewash_loop.png');
	width: 460px;
	height: 220px;
}

.anisprite.rain_cloud_loop {
	background-image: url('../images/ani/rain_cloud_loop.png');
	width: 430px;
	height: 340px;
}

.anisprite.shower_loop {
	background-image: url('../images/ani/shower_loop.png');
	width: 130px;
	height: 160px;
}

.anisprite.sitting_on_toilet {
	background-image: url('../images/ani/sitting_on_toilet.png');
	width: 82px;
	height: 110px;
}

.anisprite.sportsovel_sprinkler {
	background-image: url('../images/ani/ovelsprinkler.png');
	width: 200px;
	height: 150px;
}

.anisprite.water_pump {
	background-image: url('../images/ani/water_pump.png');
	width: 250px;
	height: 220px;
}

.anisprite.waterweave {
	background-image: url('../images/ani/waterweave.png');
	width: 900px;
	height: 100px;
}

.anisprite.windmillpump {
	background-image: url('../images/ani/windmillpump.png');
	width: 352px;
	height: 853px;
}

.anisprite.woosh_clipboard {
	background-image: url('../images/ani/woosh_clipboard.png');
	width: 100px;
	height: 110px;
}

.anisprite.woosh_cricket {
	background-image: url('../images/ani/woosh_cricket.png');
	width: 110px;
	height: 140px;
}

.anisprite.woosh_drinkwater {
	background-image: url('../images/ani/woosh_drinkwater.png');
	width: 110px;
	height: 110px;
}

.anisprite.worker_drink_water {
	background-image: url('../images/ani/worker_drink_water.png');
	width: 110px;
	height: 110px;
}

.anisprite.worker_testwater {
	background-image: url('../images/ani/worker_testwater.png');
	width: 110px;
	height: 110px;
}

.anisprite.worker_tiphat {
	background-image: url('../images/ani/worker_tiphat.png');
	width: 70px;
	height: 100px;
}

.anisprite.valve {
	background-image: url('../images/ani/valve.png');
	width: 145px;
	height: 146px;
}

.anisprite.orb {
	background-image: url('../images/ani/orb.png');
	width: 63px;
	height: 63px;
}

.anisprite.pipe-1 {
	background-image: url('../images/ani/pipe_1.png');
	width: 210px;
	height:100px;
}

.anisprite.pipe-2 {
	background-image: url('../images/ani/pipe_2.png');
	width: 100px;
	height: 450px;
}

.anisprite.pipe-3 {
	background-image: url('../images/ani/pipe_3.png');
	width: 40px;
	height: 70px;
}
.anisprite.pipe-4 {
	background-image: url('../images/ani/pipe_4.png');
	width: 40px;
	height: 210px;
}
.anisprite.pipe-5 {
	background-image: url('../images/ani/pipe_5.png');
	width: 190px;
	height: 40px;
}
.anisprite.pipe-6 {
	background-image: url('../images/ani/pipe_6.png');
	width: 160px;
	height: 50px;
}
.anisprite.pipe-7 {
	background-image: url('../images/ani/pipe_7.png');
	width: 140px;
	height: 460px;
}
.anisprite.pipe-8 {
	background-image: url('../images/ani/pipe_8.png');
	width: 40px;
	height: 282px;
}
.anisprite.pipe-9 {
	background-image: url('../images/ani/pipe_9.png');
	width: 90px;
	height: 508px;
}
.anisprite.pipe-10 {
	background-image: url('../images/ani/pipe_10.png');
	width: 120px;
	height: 266px;
}
.anisprite.pipe-11 {
	background-image: url('../images/ani/pipe_11.png');
	width: 230px;
	height: 130px;
}

.anisprite.pipe-12 {
	background-image: url('../images/ani/pipe_12.png');
	width: 140px;
	height: 167px;
}

.anisprite.groundwatersuck {
	background-image: url('../images/ani/groundwatersuck.png');
	width: 320px;
	height: 303px;
}


.anisprite.ground-blade {
	width:300px;
	height:300px;
	background:url(../images/blade.png) top center no-repeat;
}


/* invisible position divs (used for makers / scrolling to sections) */
.position {
	position: absolute;
	display: block;
	clear: both;
	width: 100%;
	z-index: 1000;
	margin-top:150px; /* quick fix for ipad */
}

/* these are tablet first styles,
bigger than tablet are declared at the bottom of this doc */
#intro-section .position 			{ top: -200px;   }
#housepop-section .position 			{ top: -200px;   }
#tap-section .position 				{ top: 2200px;  }
#storage-section .position 			{ top: 3215px;  }
#rain-section .position 			{ top: 4304px;  }
#treatment-plant-section .position 	{ top: 5662px;  }
#recycled-section .position 		{ top: 7428px;  }
#ground-section .position 			{ top: 9140px;  }
#desalination-section .position 	{ top: 10700px; }
#again-section .position 			{ top:12100px;  }

/* originals
#intro-section .position 			{ top:-200px;   }
#tap-section .position 				{ top: 2200px;  }
#storage-section .position 			{ top: 3215px;  }
#rain-section .position 			{ top: 4304px;  }
#treatment-plant-section .position 	{ top: 5662px;  }
#recycled-section .position 		{ top: 7428px;  }
#ground-section .position 			{ top: 9140px;  }
#desalination-section .position 	{ top: 10643px; }
#again-section .position 			{ top:12100px;  }

*/


/* intro */
#cloud1 {
	left: 235px;
	top: 150px;
}

#cloud2 {
	left: -350px;
	top: 560px;
}

#cloud3 {
	left: 270px;
	top: 795px;
}

#cloud4 {
	left: 1410px;
	top: 363px;
}

#cloud5 {
	left: 1545px;
	top: 600px;
}

#intro-text-holder {
	top: 98px;
	width: 730px;
	margin-left: -365px;
}

#intro-heading h1 {
	line-height: 77px;
}

#intro-text {
	margin-top: 20px;

}


#intro-scroll-text {
	margin-top: 20px;
}

#down-holder {
	position: absolute;
	left: 50%;
	margin-left: -49px;
	position: absolute;
	top:384px;
	display: block;
	width: 98px;
	height: 98px;
	margin-top:0;
}

#down,
#down2 {
	position: absolute;
	cursor: pointer;
}

#down2 {
	margin-left: -49px;
}

#intro-cloud-1 {
	top:425px;
	left:300px;
	position: absolute;
}

#intro-cloud-2 {
	top:585px;
	left:500px;
	position: absolute;
}

#intro-cloud-3 {
	top:380px;
	left:1400px;
	position: absolute;
}

#intro-gutter {
  left: 699px;
  top: 1683px;
}


#intro-house, #housepop-section {
	position: absolute;
	left: 1015px;
	top: 900px;
}

#intro-drop-drink {
	left: 1015px;
	top: 1225px;
}

#intro-orb {
	left: 1095px;
	top: 1255px;
}

/* tap water  */


#tap-raincloud-1 {
  left: 240px;
  top: 2240px;
}

#tap-raincloud-2 {
  left: 1370px;
  top: 2285px;
}

#tap-text-holder {
	top: 2498px;
	width: 614px;
	margin-left:-307px;
}

#tap-heading h2 {
	font-size:77px;
	margin-bottom: 40px;
}

#tap-drop-backpack {
	left: 919px;
	top: 2878px;
}


/* AR Positions : Storage */
#storage-text-holder {
	top: 3515px;
	width: 500px;
	margin-left: -250px;
}

#storage-text-holder h2 {
	font-size:77px;
}

#storage-valve {
	left: 921px;
	top: 4067px;
}

#storage-drop-hardhat {
	left: 1247px;
	top: 3982px;
}

#storage-pipe-1 {
	left: 1091px;
	  top: 4233px;
}

#storage-pipe-2 {
	left: 1331px;
	top: 4377px;
}

#storage-pipe-12 {
	left: 544px;
	top: 3850px;
}

/* AR Positions : Rain */

#rain-text-holder {
	top: 4604px;
	width: 500px;
	margin-left: -255px;
}

#rain-text-holder h2 {
	font-size: 38px;
	margin-bottom: 20px
}
#rain-text-holder p {
	margin:0;
	padding:0;
	line-height: 1.2;
}


#rain-drop-bath {
	left: 751px;
	top: 4872px;
}

#rain-gutter {
	left: 781px;
	top: 5619px;
}

#rain-drop-hose {
	left: 1312px;
	top: 5285px;
}

#rain-drop-toilet {
  left: 751px;
  top: 5118px;
}

#rain-drop-shower {
  left: 1118px;
  top: 4856px;
}

#rain-drop-drink {
	left: 1038px;
	top: 5130px;
}

#rain-garden-sprinkler {
	left: 745px;
	top: 5060px;
}

#rain-raincloud-1 {
	left: 298px;
	top: 4506px;
}

#rain-raincloud-2 {
	left: 1188px;
	top: 4506px;
}

#rain-watertank-orb {
	left: 593px;
	top: 5138px;
}
#rain-greytank-orb {
	left: 1291px;
	top: 5109px;
}

#rain-pipe-3 {
	left: 615px;
	top: 4945px;
}

#rain-pipe-4 {
	left: 507px;
	top: 5059px;
}

#rain-pipe-5 {
	left: 545px;
	top: 5297px;
}

#rain-pipe-6 {
	left: 1220px;
	top: 5278px;
	transform:scale(0.7,0.7);
	-ms-transform: scale(0.7,0.7); /* IE 9 */
	-webkit-transform:scale(0.7,0.7); /* Safari */
}


/* AR Positions treatment-plant */
#treatment-plant-text-holder {
	top: 5962px;
	width: 614px;
	margin-left: -307px;
}
#treatment-plant-text-holder h2 {
	font-size: 78px;
	margin-bottom: 40px;
}

#treatment-drop-testtube {
	left: 744px;
	top: 6319px;
}

#treatment-splash-1 {
	left: 557px;
	top: 7155px;
}

#treatment-splash-2 {
	left: 1118px;
	top: 7145px;
}

#treatment-orb {
	left: 825px;
	top: 6857px;
}

#treatment-pipe-7 {
	left: 540px;
	top: 6072px;
}
#treatment-pipe-8 {
	left: 1374px;
	top: 5920px;
}


/* recycled */
#recycled-text-holder {
	top:7728px;
	width: 600px;
	margin-left: -300px;
}
#recycled-text-holder h2 {
	font-size: 78px;
	margin-bottom: 40px;
}

#recycled-cloud-1 {
	top: 7608px;
	left:300px;
}

#recycled-cloud-2 {
	top: 7658px;
	left:1300px;
}

#recycled-sprinkler-1 {
	top: 8089px;
	left: 620px;
}
#recycled-sprinkler-2 {
	top: 8129px;
	left: 1249px;
}

#recycled-drop-cricket {
	top: 8335px;
	left: 886px;
}

#recycled-orb {
	top: 8452px;
	left: 1200px;
}
/* ground water  */
#ground-text-holder {
	top: 9440px;
	width: 500px;
	margin-left: -250px;
}
#ground-text-holder h2 {
	font-size: 78px;
	margin-bottom: 20px;
	line-height: 1;
}

#ground-windmill {
	top:9187px;
	left: 445px;
}

#ground-blade {
	top: 9150px;
	left: 510px;
}


#ground-cows {
	top: 9798px;
	left: 970px;
}

#ground-farmer {
	top: 9879px;
	left: 1340px;
}
#ground-orb {
	top: 9930px;
	left: 625px;
}

#ground-pipe-9 {
	top: 10150px;
	left: 612px;
}
#ground-groundwatersuck {
	top: 10600px;
	left: 500px;
}






/* desalination */
#desalination-section {

}
#desalination-text-holder {
	top: 10943px;
	width: 600px;
	margin-left: -300px;
}
#desalination-text-holder h2 {
	font-size: 78px;
	margin-bottom: 20px;
	line-height: 1;
}

#desalination-cloud-1 {
	top: 11002px;
	left:200px;
}

#desalination-cloud-2 {
	top:11119px;
	left:1300px;
}

#desalination-drop-clipboard {
	top: 11606px;
	left: 825px;
}
#desalination-drop-drink {
	top: 11575px;
	left: 1160px;
}

#desalination-orb {
	top: 11632px;
	left: 630px;
}

#desalination-pipe-10 {
	top: 11593px;
	left: 599px;
}

#desalination-pipe-11 {
	top: 11931px;
	left: 809px;
}
/* we need the class like this to properly override the background image */
#desalination-background-waves {
	position: absolute;
	left: -500px;
	top: 12180px;

	/*this tweens side to side some, so it repeats and it's bigger than its natural size*/
	background-image: url(../images/background-waves.png);
	background-repeat: repeat-x;
	width: 2900px;
	height:136px;
	display: block;
	z-index: 8;
}

/* we need the class like this to properly override the background image */
#desalination-foreground-waves {
	position: absolute;
	left: -500px;
	top: 12212px; /* plus 32 */
	display: block;
	/*this tweens side to side some, so it repeats and it's bigger than its natural size*/
	background-image: url(../images/foreground-waves.png);
	background-repeat: repeat-x;
	width: 2900px;
	height:136px;
	z-index: 9;
}

/* again */
#again-text-holder {
	top: 12342px;
	width:610px;
	margin-left:-310px;
}

#again-text-holder h2 {
	font-size: 78px;
	margin-bottom: 20px;
	line-height: 75px;
}

#again-waves {
	/* border: 1px solid red; */
	width: 100%;
	top: 11982px;
	left:0;
}
#again-cloud-1 {
	top: 12653px;
	left:400px;
}

#again-cloud-2 {
	top:12709px;
	left:1200px;
}

#start-again-button {
	margin-top: 45px;
}

#play-the-game-button {
	margin-top: 100px;
}
#play-the-game-button a {
	text-decoration: none;
	color: #FFFFFF;
}

#again-drop-drink {
	top: 13378px;
	left: 1050px;
}

#again-drop-hose {
	top: 13530px;
	left: 1280px;
}

#again-garden-sprinkler {
	top: 13314px;
	left: 807px;
}

#again-gutter {
	top: 13839px;
	left: 700px;
}



/* iPad landscape - commented out

@media only screen and (max-width: 1024px) {
	body {
		font-size: 18px;
		font-weight: normal;
	}

	.main-background {
		width: 1024px;
		margin-left: -512px;
	}

	.main-background .slice {
		height: 2790px;
	}

	.main-background .one {
		background-image: url(../images/background-1024_01.png);
	}

	.main-background .two {
		background-image: url(../images/background-1024_02.png);
	}

	.main-background .three {
		background-image: url(../images/background-1024_03.png);
	}

	.main-background .four,
	.main-background .five {
		display:none;
		background-image: none;
	}
}
*/

/* XL screen media query to fix bg tiles */
@media only screen and (min-width: 500px) and (max-width: 1200px) {
	#tap-raincloud-1 { left:440px; }
	#tap-raincloud-2 { left:1070px; }

}

@media only screen and (min-width: 2000px) {

	.bg-left {
		position: absolute;
		background: #0097db url(../images/repeat-left.png) top center repeat-x;
		width:50%;
		height: 14191px;
		z-index: 0;
		left:0;
	}
	.bg-right {
		position: absolute;
		background: #0097db url(../images/repeat-right.png) top center repeat-x;
		width:50%;
		height: 14191px;
		z-index: 0;
		right:0;
		top:0px;
	}

	#tap-x-large-bg-holder {
		display: block;
		position: absolute;
		left:50%;
		width:3120px;
		height: 680px;
		z-index: 5;

		margin-left: -1330px;
		top: 2380px;
		background: url(../images/x-large-bg-1.png) top center no-repeat;
	}

	#recycled-x-large-bg-holder {
		display: block;
		position: absolute;
		left:50%;
		width:2800px;
		height: 700px;
		z-index: 5;

		margin-left: -1370px;
		top:7460px;
		background: url(../images/x-large-bg-2.png) top center no-repeat;
	}


}

/* hot fix to test if hiding the pipe animations improved performance on iPad version 1. */
@media only screen and (max-width: 1024px) {

	.pipe-1,
	.pipe-2,
	.pipe-3,
	.pipe-4,
	.pipe-5,
	.pipe-6,
	.pipe-7,
	.pipe-8,
	.pipe-9,
	.pipe-10,
	.pipe-11,
	.pipe-12 {
		display: none;
	}
}
/* show large bgs - on bigger screens */
@media only screen and (min-width: 1025px) {

	body {
		font-size: 16px;
	}

	.main-background {
		position: absolute;
		left: 50%;
		top: 0;
		z-index: 1;
		margin-left: -1000px;
		width: 2000px;
	}

	.main-background .one {
		background-image: url(../images/background_01.png);
	}

	.main-background .two {
		background-image: url(../images/background_02.png);
	}

	.main-background .three {
		background-image: url(../images/background_03.png);
	}

	.main-background .four {
		background-image: url(../images/background_04.png);
	}

	.main-background .five {
		background-image: url(../images/background_05.png);
	}

	.main-background .six {
		background-image: url(../images/background_06.png);
	}

	.main-background .seven {
		background-image: url(../images/background_07.png);
	}

	.main-background .eight {
		background-image: url(../images/background_08.png);
	}

	.main-background .nine {
		background-image: url(../images/background_09.png);
	}


	.position {
		position: absolute;
		display: block;
		clear: both;
		width: 100%;
		z-index: 1000;
		margin-top:0; /* quick fix for ipad is now reset */
	}

	#intro-section .position {
		top:-200px;
	}

	#tap-section .position {
		top: 2200px;
	}

	#storage-section .position {
		top: 3215px;
	}

	#rain-section .position {
		top: 4304px;
	}

	#treatment-plant-section .position {
		top: 5662px;

	}

	#recycled-section .position {
		top: 7428px;

	}

	#ground-section .position {
		top: 9140px;
	}

	#desalination-section .position {
		top: 10643px;
	}

	#again-section .position {
		top:12100px;
	}

}