/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Pixel Fable Parallax Scrolling Media Queries

Table of Contents:
1.iPhone4/Retina 
2.Global styles
3.Typography
4. Page Structure
5. Navigation
6. Parallax Styles
7. Augmented Reality and Video button styles
8. Easter Egg
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Browser styles
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/






/* Smartphones (portrait and landscape) */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {

#branding img {	margin: 5px 0 5px 20px;	float:left;	}
nav#primary{display: none}
#content article { float:left; position: static;  }

#title {padding: 100px 0 0 5%;  }
#many  {padding: 100px 10px 0 10px;  }
#power {padding: 100px 10px 0 10px;  }
#close {padding: 300px 10px 0 10px;  }	

#woman {width:95%; padding: 0; }	
#man { width:95%; padding: 0; }
#mother {width:95%; padding: 0; }

#lazyday { padding: 200px 10px 0 10px;  }
#beautiful { padding: 200px 10px 0 10px;  }
#singing { padding: 50px 0 0 0; }

#bewitched { padding: 200px 10px 0 10px;}
#suddenly { padding: 50px 10px 0 10px; }
#thatswhy {padding: 70px 10px 0 10px; }
														
#about {top: 13000px;  height:1700px;width:89%; padding: 200px 10px 0 10px; }

.columns{width:100%}



#title-bg{position: static; }
#many-bg{display:block; float:left}

/* backgrounds */
	#title-bg 	{background: url(../images/mobile/title-mountains-bg.jpg) no-repeat 440px 53px; width:2400px; height:205px; top: 00px;	left: 85%; }
	#many-bg 	{background:url(../images/mobile/title-mountains-bg.jpg) no-repeat 170px -152px; width:2400px; height:200px; top: 750px;	left: 25%; }
	
	#woman-bg {background:url(../images/mobile/pf-people.jpg) no-repeat 0 0;  width:300px; height:175px;  top: 3000px;left: 40%;}
	#man-bg {	background: #f0fafb url(../images/lo/pf-people.jpg) no-repeat 400px -272px;   height:315px;  border-top: 300px solid #f0fafb; border-bottom: 380px solid #f0fafb; left: 8%;}
	#mother-bg {background: #f7ede3 url(../images/lo/pf-people.jpg) repeat-x 0 -595px;  width:2400px; height:260px;   border-top: 200px solid #f7ede3; border-bottom: 420px solid #f7ede3; left: 10px;  }
	
	#lazyday-bg1 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; top: 5550px;left: 34%; padding:0;}
	#lazyday-bg2 { top: 6050px;left: 32%; padding:0 0 0  300px;}
	#lazyday-bg3 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; top: 6000px;left: 38%; padding:0;}
	#lazyday-bg4 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; top: 6200px;left: 59%; padding:0;}	
	
	#singing-bg{background: url(../images/lo/pf-people.jpg) repeat-x 0 -863px; width:472px; height:190px; top: 7200px;left: 40%;}
	
	#bewitched-bg{background: url(../images/mobile/title-mountains-bg.jpg) no-repeat 170px -152px; width:2400px; height:200px; top: 7800px;left: 25%;}
	#about-bg{ background: url(../images/lo/pf-people.jpg) no-repeat 0 -1053px; width:900px; height:458px;  top: 10100px; left: 45%; }

#parallax-triangle1, #parallax-triangle2, #parallax-wisp3, #parallax-wisp2, #parallax-wisp1{width: 500px;margin-left: -250px;}

h1{ font-size: 2.5em; line-height: 110%; margin: 60px 0 25px 0;}
h2{ font-size: 1.8em;  margin: 0 0 25px 0; }
p{ font-size: 1.8em; padding:20px 5px 20px 10px;}

#title p {font-size: .8em;  padding: 5px; width: 100%; }

.buttons .augmentedreality{display:none}
.buttons .vimeo {margin:-5px 0 0 75px}

}



/* Small Layout: 480-780px. */
@media only screen
and (min-width : 481px)
and (max-width : 778px) {

#branding img {	margin: 5px 0 5px 20px;	float:left;	}

nav#primary { margin:20px 5px 3px 0; }


#content article { float:left; position: static;  }
#title {padding: 100px 0 0 10%;  }
#many  {padding: 100px 10px 0 10px;  }
#power {padding: 100px 10px 0 10px;  }
#close {padding: 300px 10px 0 10px;  }	

#woman {width:95%; padding: 0; }	
#man { width:95%; padding: 0; }
#mother {width:95%; padding: 0; }

#lazyday { padding: 200px 10px 0 10px;  }
#beautiful { padding: 200px 10px 0 10px;  }
#singing { padding: 50px 0 0 0; }

#bewitched { padding: 200px 10px 0 10px;}
#suddenly { padding: 50px 10px 0 10px; }
#thatswhy {padding: 70px 10px 0 10px; }
														
#about {top: 13000px;  height:1700px;width:89%; padding: 200px 10px 0 10px; }




#title-bg{position: static; }
#many-bg{display:block; float:left}

/* backgrounds */
	#title-bg 	{background: url(../images/lo/title-mountains-bg.jpg) no-repeat 320px 53px; width:2400px; height:400px; top: 00px;	left: 25%; }
	#many-bg 	{background:url(../images/lo/title-mountains-bg.jpg) no-repeat 0 -346px; width:2400px; height:800px; top: 900px;	left: 25%; }
	
	#woman-bg {background:url(../images/lo/pf-people.jpg) no-repeat 100px 262px;  width:2400px; height:522px;  top: 3000px;left: 35%;}
	#man-bg {	background: #f0fafb url(../images/lo/pf-people.jpg) no-repeat 400px -272px;   height:315px;  border-top: 300px solid #f0fafb; border-bottom: 380px solid #f0fafb; left: 8%;}
	#mother-bg {background: #f7ede3 url(../images/lo/pf-people.jpg) repeat-x 0 -595px;  width:2400px; height:260px;   border-top: 200px solid #f7ede3; border-bottom: 420px solid #f7ede3; left: 10px;  }
	
	#lazyday-bg1 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; top: 5550px;left: 34%; padding:0;}
	#lazyday-bg2 { top: 6050px;left: 32%; padding:0 0 0  300px;}
	#lazyday-bg3 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; top: 6000px;left: 38%; padding:0;}
	#lazyday-bg4 {background: url(../images/hi/pf-images-sprite.png) no-repeat -519px -511px; top: 6200px;left: 59%; padding:0;}	
	
	#singing-bg{background: url(../images/lo/pf-people.jpg) repeat-x 0 -863px; width:472px; height:190px; top: 7200px;left: 40%;}
	
	#bewitched-bg{background: url(../images/lo/title-mountains-bg.jpg) no-repeat 0 -346px; width:2400px; height:800px; top: 7800px;left: 25%;}
	#about-bg{ background: url(../images/lo/pf-people.jpg) no-repeat 0 -1053px; width:900px; height:458px;  top: 10100px; left: 45%; }

#parallax-triangle1, #parallax-triangle2, #parallax-wisp3, #parallax-wisp2, #parallax-wisp1{width: 700px;margin-left: -350px;}

h1{ font-size: 4.7em; line-height: 110%; margin: 60px 0 25px 0;}
h2{ font-size: 3em;  margin: 0 0 25px 0; }
p{ font-size: 2.2em; padding:20px 5px 20px 10px;}

#title p {font-size: .8em;  padding: 5px; width: 100%; }



}





/* Medium Layout: 781-1024px. */
@media only screen
and (min-width : 779px)
and (max-width : 1280px) {

#content article { }

p{ font-size: 2.2em;}


#content article { float:left; position: static;   }

#title-bg{position: static; }
#many-bg{display:block; float:left}

#woman-bg{left: 25%;}
#man-bg{left: 1%;}


#about-bg{left: 45%;}


#parallax-triangle1, #parallax-triangle2, #parallax-wisp3, #parallax-wisp2, #parallax-wisp1{width: 1000px;margin-left: -500px;}


/* wisp styles 2 
#parallax-wisp2 {z-index: 40;  }   
	.wisp2-1 {top: 1240px;left: 10%;}
	.wisp2-2 {top: 2800px;left: -30%;}
	.wisp2-3 {top: 2243px;left: -25%;}
	.wisp2-4 {left: 40%;}
	.wisp2-5 {left: 60%;}
	.wisp2-6 {top: 3800px;left:   1%;}
	.wisp2-7 {top: 3890px;left:  10%;}
	.wisp2-8 {top: 6550px;left:  30%;}	
	.wisp2-9 {top: 6300px;left: -21%;}	*/
	
	
	

}

/* Wide Layout: 1124px. Padding: 15px.*/
@media only screen
and (min-width : 1281px)
and (max-width : 1600px) {

#content article {  }
#title-bg{position: static; }

}



/* Super Wide Layout: 1824px. Padding: 15px. */
@media only screen
and (min-width : 1601px) {

#content article { }
#title-bg{position: static;  }


}