/* The Crab Story */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6. Page structure
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body {background: #fff;overflow-x: hidden;  }


#wrapper {position: relative;}

/* content: when i set this to relative, it moves everything down, but allows blocks to be shown on mobile*/
#Pagecontent {
	display:none;
	position: relative; 
	padding: 0;
	margin: 0 auto; 
	width: 100%; 
}	

.story-block{
	z-index: 60;
}

.story-block h1{
	z-index: 50;
	font-size: 3.5em;
	color: #fe1342;
	
}

/* Z-index overrides */
.contain-to-grid.fixed{
	z-index: 500;
}

.top-bar{
	z-index: 400;
}

.contact {
  z-index: 40;
   }

.footer{
	z-index: 30
}

/* Adjusted type  */  

.chapter{
	padding: 40px 0; 	
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7. Independent content sections
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.imagewrapper{


margin:0 auto 0 auto;
padding-bottom: 70px;
background: url(bg/white-line.gif)  50% 0 repeat-y;

}

.imagewrapper p{
	background: #fff;
	padding: 40px 30px 80px 30px;
	font-size: 1.4em;
	
	
}

.imagewrapper-last{

margin:0 auto 300px auto;
padding-bottom: 0px;
background: url(bg/white-line.gif)  50% 0 repeat-y;

}


img{
	
	text-align: center;
}

.heart {

		width:61px;
		height:60px;
		margin-top: -60px;
		display: block;


}

.story-block  img.heart{

	margin: -60px auto 0 auto; 

	max-width:61px; 

/* 	width:100%;  */

	height:auto; 

 



}

.buttons{  
	  
	display: block;
	margin:0 auto; 
	padding-bottom: 200px;
	}
	
.buttons a{
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;  }
		
.buttons a{ 
	background:rgba(254, 19, 66, 1) url(bg/left-button-arrow2.png) no-repeat 95% 50% ; 
	color:#fff; 
	display:block;  
	text-align: center; 
	padding: 40px 70px 40px 40px;
	  
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; 
	}
.buttons a:hover{ 
background-color:#340101; 
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

7. Extra information slide

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.infoslide {
      	position: relative;
		margin-right:0;
}



.infoslide button{
		cursor: pointer;
		height:52px; 
   	 	font-size: .7em;
		line-height: 170%;
   	 	width: 52px;
    	background: url(info-hover3.png) 2px 2px no-repeat;
    	text-align: center;
    	padding:15px;
    	border: none;
    	float:right;
    	margin:-93px 10px 0 0;
}


.infoslide button:hover{
    	background: url(info-hover3.png)  -49px 2px no-repeat ;
    	border: none;
}

.infoslide .project_description{
        position: relative;
        background: #f9fbef;
        top:-35px;
    }


.story-block .project_description p{ 

		font-size: 1.1em;
		padding:10px 30px 30px 30px;
		margin-bottom: 0;
		background: #f9fbef;
    }   

    
.project_description h4{ 
		margin-top: 0;
		margin-bottom: 0;
		padding:30px 0 0 30px;
		color:#340101;
    }   


.finaltitle{
	
	background: #fff;
	padding:10px 30px 30px 30px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7. Extra information slide
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* etc */


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6. Page structure and Parallax styles
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



/** section block styles **/

/*the left transitions, to ease out the width resize*/	
#parallax1 div, #parallax-backgrounds div{
		-webkit-transition: left 0.3s ease-in-out; 
		-moz-transition: left 0.3s ease-in-out; 
		-o-transition: left 0.3s ease-in-out; 
		transition: left 0.3s ease-in-out;
		}

#parallax1{
		-webkit-transition: width 0.3s ease-in-out; 
		-moz-transition: width 0.3s ease-in-out; 
		-o-transition: width 0.3s ease-in-out; 
		transition: width 0.3s ease-in-out;
		}

/*Global parallax div styles.*/		
#parallax1{	position: fixed;left: 50%; top:0;width: 1200px;margin-left: -600px;}
#parallax2{	position: fixed;left: 50%; top:0;width: 1200px;margin-left: -600px;}


/** parallax bg absolute positioning **/
#parallax1 div, #parallax2 div{position: absolute;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7. Independent content sections
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* .intro {height:3700px} */
/*
.chapter1 {height:7900px}
.chapter2 {height:5000px}
.chapter3 {height:2900px}
.chapter4 {height:4700px}
.chapter5 {height:6000px}
.chapter6 {height:3900px}
*/





#parallax-backgrounds{
		position:fixed;	 
		z-index: 1;
		top: 0;	
		width:100%;
		}
/* .intro{background: #88cbe8} */
.chapter2{background: #b3cdd7}
.chapter3{background: #e2edf1}
.chapter4{background: #81b7e6}

.chapter5{background: #ddebf4}
.chapter6{background:#c2e4f2}

/*
#main-bg{
		position: absolute;
		width:1900px;
}
*/
		
 #main-bg 	{
		top: 0px; 
		/*
height:1912px;
		z-index: 900;
*/
		background: url(bg/jungle1.jpg) repeat-y center top  ;  
		background-attachment: fixed;
		
		} 

		
.chapter2 #main-bg 	{
		top: 500px; 
		height:1300px;
		 
		} 		



.chapter3 #main-bg 	{
		top: 300px; 
		height:1174px;
		
		} 		

.chapter4 #main-bg 	{
		top: 0px; 
		height:2300px;
		
		} 
		
.chapter5 #main-bg 	{
		top: 500px; 
		height:1900px;
		 
		} 

.chapter6 #main-bg 	{
		top: 0; 
		height:1800px;
		
		} 
		
					

/* triangle styles 1 */
#parallax1 { z-index: 5;  }

#parallax1 div{width: 474px; height:266px; background: url(bg/pattern2.png) 0 0 no-repeat;}
	/** add touch and no touch classes later **/
	.parallax1-2{top: 340px; 	margin-left: 5px;  	}
	.parallax1-3 {top: 2600px; 	margin-left: 925px;  }
	.parallax1-4 {top: 4500px;   margin-left: 1244px; }
	.parallax1-5 {top: 9900px; 	margin-left: -325px;  }
	
/* triangle styles 1 */
#parallax2 { z-index: 6;  }

#parallax2 div{width: 474px; height:266px; background: url(bg/pattern2.png) 0 0 no-repeat;}
	/** add touch and no touch classes later **/
	.parallax2-2{top: 100px; 	margin-left: 44px;  	}
	.parallax2-3 {top: 1200px; 	margin-left: 125px;  }
	.parallax2-4 {top: 4600px;   margin-left: 744px; }
	.parallax2-5 {top: 7100px; 	 margin-left: 100px;}
	
	

#loading{
	visibility:hidden;
	width: 16px;
	height:16px;
}