html { 
  background: url(images/background.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#page1 {
}

	
#headline {
	left:50%;
	margin-left:300px;

	}
	
#bottle-home {
	float:left;
	clear:both;
	}
	
#strawberries-home {
	clear:both;
	float:right;
	margin-top:-500px;
	}

		
	
#circle1 {
	clear:both;
	position:absolute;
	left:50%;
	margin-left:-164px;
	margin-top:150px;
	}
	
	
ul li a{
	text-indent: -9999px;
	margin-bottom:10px;
	display:inline-block;

	}
	

	
ul li a#strawberry {
	width: 154px;
	height: 153px;	
	background: url(images/images/strawberry.png);
	float:left;
	position:absolute;
	left:50%;
	margin-left:-250px;
	margin-top:120px;	

	}
	
ul li a#strawberry:hover {
	background: url(images/images/strawberry-hover.png);

	}


	
#headline2 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:900px;
	}

	
#circle2 {
	float:left;
	clear:both;

	}
	
#strawberriesPg2 {
	float:right;
	cursor:pointer;
	}
	
	
	
#bucket1 {
	float:right;
	clear:both;
	margin-top:-300px;


	}
	
#headline3 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:500px;
	}
	
	
#page3 {
	margin-top:1500px;
	margin-bottom:1000px;

	}
	
#circle3 {
	float:right;
	clear:both;
	margin-top:600px;
	}
	
#berryBucket {
	cursor:pointer;
	background: 0 0 no-repeat;
	position:absolute;
	margin-left:25px;
	margin-top:550px;
	clear:both;
	z-index:1;
	}
	
#berryBucket img {
	background: 0 0 no-repeat;
	position:absolute;
	margin-left:25px;
	margin-top:50px;
}

	


#page4 {
	margin-top:2000px;

	}	
	
#headline4 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:1400px;
	}
	
#step4Circle {
	 position:absolute;
	 margin-top:1500px;
	 z-index:-2;

	}
	
#step4Bucket {
	cursor:pointer;
 	position:absolute;
 	margin-top:1725px;
 	margin-left:100px;
 	

	}

#potStep4 {
	cursor:pointer;
	background: url(images/boiling-water.png) 0 0 no-repeat;
	width: 543px;
	height: 543px;
	float:right;
	margin-top:825px;
	margin-right:350px;
	animation: animate-pot 3.75s steps(9);

}

@keyframes animate-pot {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
}



#page5 {
	margin-top:1700px;

	}	
	
#headline5 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:2900px;
	}
	
#step5 {
	 position:absolute;
	 margin-top:2900px;

	}
	
#step5Covered {
	cursor:pointer;
	 position:absolute;
	 margin-top:3150px;
	 clear:both;
	 margin-left:175px;


	}
	
	
.clock {
	background: url(images/clock.png) 0 0 no-repeat;
 	float:right;
 	clear:both;
 	width: 301px;
	height: 324px;
 	margin-top:1100px;
 	margin-right:100px;
 	animation: animate-clock 15s steps(1000);


	}
	
@keyframes animate-clock {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
} 

#page6 {
	margin-top:2000px;

	}	
	
#headline6 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:3900px;
	}
	
#step6 {
	 position:absolute;
	 margin-top:4000px;
	 float:right;
	 margin-left:700px;

	}
	
#step6Bucket {
	cursor:pointer;
	 position:absolute;
	 margin-top:4000px;
	 float:left;
	 
		}
	
#step6Bucket2 {
 	position:absolute;
	 margin-top:4200px;
	 float:right;
	 margin-left:200px;
	}
	
#headline7 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:5100px;
	}

#step7 {
	position:absolute;
	margin-top:5200px;
}

#step7bucket {
	cursor:pointer;
	position:absolute;
	z-index:-1px;
	left:50%;
 	margin-left:-228px;
 	margin-top:5300px;	
}

#sugar {
	cursor:pointer;
	position:absolute;
	margin-top:5200px;
	margin-left:900px;
	
	}

#headline8 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:6000px;
	}

#step8 {
	cursor:pointer;
	position:absolute;
	margin-top:6200px;
	margin-left:500px;

}

#page8 {
	margin-bottom:500px;
	}

#step8bucket {
	position:absolute;
 	margin-top:6000px;
	background: url(images/mixing-bucket.png) 0 0 no-repeat;
	width: 461px;
	height: 684px;
	animation: animate-bucket 3.75s steps(44);
	
}


@keyframes animate-bucket {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
} 

#headline9 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:7200px;
	}



#step9 {
	position:absolute;
	margin-top:7200px;

}

#step9bucket {
	float:right;
	margin-right:-425px;
 	margin-top:5400px;
	background: url(images/mixing-bucket.png) 0 0 no-repeat;
	width: 461px;
	height: 684px;
	animation: animate-bucket 3.75s steps(44);
	
}

@keyframes animate-bucket {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
} 

#yeast {
	background: url(images/yeast-pouring.png) 0 0 no-repeat;
	height:396px;
	width:396px;
	position:absolute;
 	margin-top:7200px;
 	margin-left:800px;
 	animation: animate-bucket 3.75s steps(44);

}

@keyframes animate-yeast {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
} 

#hydrometer {
	position:absolute;
 	margin-top:7350px;
 	margin-left:450px;
}

#commentCircle {
	cursor:pointer;
	position:absolute;
 	margin-top:7500px;
 	margin-left:100px;
}


#page10 {
	height:860px;
	}


#headline10 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:8400px;
	}
	
#sealed-bucket {
	cursor:pointer;
	position:absolute;
 	margin-top:8600px;
 	margin-left: 450px;
 	
}

#page10 .clock {
 	animation: animate-clock 15s steps(49);
 	position:absolute;
 	margin-top:8500px;
 	width: 301px;
	height: 319px;
 	margin-left:900px;
}


#step10 {
	position:absolute;
 	margin-top:8400px;
}


#page11 {
	height:860px;
	}


#headline11 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:8800px;
	}
	
#step11 {
	cursor:pointer;
	position:absolute;
 	margin-top:8925px;
 	margin-left:400px;
}

#corking-bottle {
	position:absolute;
 	margin-top:8800px;
 	margin-left:100px;
	background: url(images/corking-bottle.png) 0 0 no-repeat;
	width: 130px;
	height: 580px;
	animation: animate-bottle 3.75s steps(44);
}

@keyframes animate-bottle {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
} 



#headline12 {
 	position:absolute;
 	left:50%;
 	margin-left:-189px;
 	margin-top:9050px;
	}

#step12 {
	position:absolute;
 	margin-top:9200px;
 	margin-left:700px;
}

#bottle-rack {
	position:absolute;
 	margin-top:9200px;
 	margin-left:100px;
}

	
	




