/* BASIC
*/
html, body {
	height: 100%;
	background-color: none;
}


* { margin:0; padding:0; }
body { background: rgba(0,0,0,0.00);}
	img{ border:none; }
	img a:hover{ border:none; background-color: #fff; color: #fff; background: none;
	-webkit-transition: background 0.5s linear;
	-moz-transition: background 0.5s linear;
	-o-transition: background 0.5s linear;
	transition: background 0.5s linear;	
	}
	
/*OLD LOADER*/

	#supersized-loader { 
		position:absolute; 
		top:50%; left:50%; 
		z-index:10; 
		width:70px; 
		height:70px; 
		margin:-30px 0 0 -30px; 
		text-indent:-999em; 
		background-color:#111; 
		background:rgba(0,0,0,0.8) url(../img/progress.gif) no-repeat center center;
		-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
		}
	

#content_pages { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; padding-top: 0%; 
		background-color: none;
		}
		
		#content_pages  a:link{ background-color:none;  }	
		#content_pages  a:active{ background-color:none;}	
		#content_pages  a:hover{ background-color:none; text-decoration:none;
			}	
			

#page {  overflow:hidden; z-index:8; width:100%; height: 1000px;
		margin-top: 0%; margin-bottom: 0%; float: center; padding-left: 0px;
		background-color:#fff;
		}		

#home { overflow:hidden;  width:100%; height: 750px;
		margin-top: 0%;float: center; 
		}

#motion { overflow:hidden;  width:100%; height: 700px;
		margin-top: 0%;float: center; 
		}

	#scroll_down { 
			padding-bottom: 0px; margin:0 auto; 
			width:100%; 
			bottom:0; left:0; z-index:2000; 
			background: none; 
			}




			
/****FULSCREEN****/

	#fullscreen { 
			margin-right: 60px;
			margin-bottom: 49px;
			bottom: 0;

			z-index:7000; 
 			padding-top: 4px;
			 right:0; 
			background: none; 
			position: fixed;
			}


	#controls-wrapper2 { 
			padding-bottom: 0px; padding-left: 60px; margin:0 auto; 
			height:140px; width:100%; 
			bottom:0; left:0; z-index:10; 
			background: none; 
			position:fixed;
			border-bottom: 0px solid #000;
			}
		
		#controls2 { overflow:hidden; height:100%; text-align:left; z-index:100; 
					padding-bottom: 0px; /* Increase padding to give thumbnails room */ 
					}


	#controls-wrapper { 
			padding-bottom: 0px; margin:0 auto; 
			height:70px; width:100%; 
			bottom:0; left:0; z-index:200; 
			background:none; 
			position:fixed;
			border-bottom: 10px solid #000;
			}


	#controls { overflow:hidden; height:100%; text-align:left; z-index:5; padding-top:0px; /* Increase padding to give thumbnails room */ }
		

			
	#slidecounter { background-color: rgba(0,0,0,0.0); padding-left:60px; float:left; margin:19px 10px 18px 20px;
			color:#000; font:23px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold; text-shadow:#000 0 -1px 0;
			}
			
	#slidecaption2 { margin-top: 0px; padding-top: 5px; padding-left:200px; padding-right: 60px; padding-bottom: 15px;
			color:#ccc; font:14px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:300; text-shadow:#000 0 .5px 0; 
			z-index: -2000; overflow:hidden; float:left; 
			background-color: rgba(0,0,0,0.0); 
			}

	#scroll_up {
    	position: fixed;
    	padding-top: 14px;
    	padding-left: 14px;
    	right: 0;
    	top: 0;
	}
	#scroll_down {
    	position: fixed;
   		padding-top: 14px;
    	padding-left: 14px;
    	right: 0;
    	top: 0;
	}
		#navigation2 { 
			background-color: rgba(0,0,0,0.0); 
			padding-top: 41px; padding-bottom: 0px; padding-right: 61px; 
			margin-left: 0px; margin-bottom: 0px; margin-top: 0px;  margin-right: 0px;
			z-index: 5000; top: 0; right:0; position:fixed; float:right; text-align: right; 
			cursor: pointer;
			-moz-opacity: 1;
			opacity: 1;			
			}				
		#navigation2_bottom { 
			background-color: rgba(0,0,0,0.0); 
			padding-bottom: 60px; padding-right: 60px; 
			margin-left: 0px; margin-bottom: 0px; margin-top: 0px;  margin-right: 0px;
			z-index: 5000; bottom: 0; right:0; position:fixed; float:right; text-align: right; 
			-moz-opacity: 1;
			opacity: 1;			
			}	

		#navigation2 a:active { border-bottom:0px solid #ccc; border-top:0px dotted #000;	cursor: pointer;
			}	

		#navigation2 a:hover { border-bottom:0px solid #ccc; border-top:0px solid #fff; padding-top: 9px;	cursor: pointer;
			-moz-opacity: .7;
			opacity: .7;
			
 			-webkit-transition: background 0.8s linear;
			-moz-transition: background 0.8s linear;
			-o-transition: background 0.8s linear;
			transition: background 0.8s linear;	
			}			

		#navigation2 a:link { text-decoration: none; border-bottom:0px solid #ccc; border-top:0px dotted #000;	cursor: pointer;
			}
			
		
		#reel2 { 
			background-color: rgba(0,0,0,0.0);
			top: 0; left:0;
			width: 100%;
			height: 800px;
			padding-top: 0px; 
			overflow:hidden; float:left; text-align: left; text-decoration: none;  line-height: 25px;
			color:#fff; font: "Georgia", Times, serif; font-size: 60px; font-weight:400; text-shadow:#000 0 .5px 0; 
			border-bottom:0px solid #000; border-top:0px dotted #000; z-index: -2000;
			position: fixed;
			}	


		#slidecaption { 
			background-color: rgba(0,0,0,0.0);
			top: 0; left:0;
			padding-top: 10%; padding-left: 60px; padding-right: 0px; padding-bottom: 0px; 
			overflow:hidden; float:left; text-align: left; text-decoration: none;  line-height: 25px;
			color:#fff; font: "Georgia", Times, serif; font-size: 60px; font-weight:400; text-shadow:#000 0 .5px 0; 
			border-bottom:0px solid #000; border-top:0px dotted #000; z-index: 0;
			position: fixed;
			}			

		#slidecaption a:active { border-bottom:0px dotted #000; border-top:0px dotted #000;
			}
			
		#slidecaption a { 
			margin-left: 0px; 
			border-bottom:3px solid #ccc; border-top:3px dotted #fff; color:#444; 
			background-color: none; 
			padding-right: 6px; padding-left: 6px;  padding-bottom: 6px;
			}
			
		#slidecaption a:hover { 
			margin-left: 0px; 
			line-height: 25px;
			color:#111; 
			background-color: none; 		
			padding-right: 6px; padding-left: 6px; padding-bottom: 3px; padding-top: 3px;		 
			-webkit-transition: background 0.4s linear;
			-moz-transition: background 0.4s linear;
			-o-transition: background 0.4s linear;
			transition: background 0.4s linear;	
			}			

		#slidecaption a:link { 
			text-decoration: none; 
			border-bottom:0px dotted #000; border-top:0px dotted #000;
			}				
			

	/*Thumbnail Navigation*/	
		#nextthumb,#prevthumb {padding-right: 60px; z-index:6; display:none; position:fixed; bottom:12px; height:20px; width:100px; overflow:hidden; background:none; border:2px solid #fff; -webkit-box-shadow:0 0 5px #000; }
			#nextthumb { right:12px; }
			#prevthumb { left:12px; }
				#nextthumb img, #prevthumb img { width:150px; height:auto;  }
				#nextthumb:active, #prevthumb:active { bottom:10px; }
				#navigation > :hover,#nextthumb:hover, #prevthumb:hover { cursor:pointer; }		
			
	/*BOTTOM BAR*/
	#bottom-wrapper { margin:0 auto; height:10px; width:100%; bottom:0; left:0; z-index:4; background-color: #fff; background:none; }
		

			
	#slidecounter { float:left; color:#888; font:23px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold; text-shadow:#000 0 -1px 0; margin:19px 10px 18px 20px; }


	#controls-wrapper3 { 
		padding-bottom: 0px; margin:0 auto; 
		height:30px; 
		width:100%; 
		bottom:0; 
		left:0; 
		z-index:4; 
		background: rgba(0,0,0,0.0) 0%; 
		position:fixed; }
	
	#controls-wrapper3 figure a img { 
		background:none;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
}

	#controls-wrapper3 figure a:hover img {background:none;
	-webkit-transform: scale( 1.5 );
	-moz-transform: scale( 1.5 );
	-o-transform: scale( 1.5 );
	transform: scale( 1.5 );
	
	-webkit-box-shadow: 4px 4px 10px rgba( 0, 0, 0, 0.5);
	-moz-box-shadow: 4px 4px 10px rgba( 0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba( 0, 0, 0, 0.5);
}

	
	#left { padding-bottom: 0px; margin:0 auto; height:100%; width:15px; bottom:0; left:0; top: 0px; box-shadow: #777 0px 0px 0px;
	background: #111111; position:fixed; float: left; z-index: 9000; }

	#right { padding-bottom: 0px;  height:100%; width:15px; bottom:0; right:0;  top: 0px;	box-shadow: #777 2px 2px 2px;
	background: #111111; position:fixed; float: right; z-index: 8000; }

	#upper { padding-bottom: 0px; margin:0 auto; height:15px; 
	width:100%; top:0; left:0; z-index:4; 
	background: #111111; position:fixed; float: left; 
	}

	#bottom { padding-bottom: 0px; margin:0 auto; height:15px; 
	width:100%; bottom:0; left:0; z-index:4; 
	background: #111111; position:fixed; float: left; 
	}



@media screen and (max-width:380px) {

   		#upper {		
			height:0px;		
   }
 		#bottom {		
			height:0px;		
   }
   
		#left, #right{		
			width: 0px;	
   }   
   
}
	
	
#scale figure a img, #rotate figure a img, #skews figure a img {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#scale figure a:hover img {
	-webkit-transform: scale( 1.5 );
	-moz-transform: scale( 1.5 );
	-o-transform: scale( 1.5 );
	transform: scale( 1.5 );
	
	-webkit-box-shadow: 4px 4px 10px rgba( 0, 0, 0, 0.5);
	-moz-box-shadow: 4px 4px 10px rgba( 0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba( 0, 0, 0, 0.5);
}			
													
	
	#right-wrapper { float: right; height:100%; margin-left: 99.2%; width:20px; bottom:0; left:0; z-index:4; background:none; position:fixed; }
						
	#left-wrapper { float: left; margin:0 auto; height:100%; width:10px; bottom:0; left:0; z-index:4; background-color: #fff; background:none; position:fixed; }


#page_process {  
		padding-top: 0px;
		overflow:hidden; z-index:8; width:100%; height: 100%;
		margin: 0px auto; float: center; 
		background-color:#fff;	
		}
		

#page_work { overflow:hidden; z-index:8; width:100%; height: 1200px;
		margin-top: 0%; margin-bottom: 0%; float: center; padding-left: 0px;
		background-color:#fff;
		}


	
.hero {  		 
		margin: 0px auto; 
		float: center;
		background-color:#fff;

	padding-right: 0px;
	padding-left: 0px;

   -webkit-column-count: 1;
   -webkit-column-gap:   0px;
   -moz-column-count:    1;
   -moz-column-gap:      0px;
   column-count:         1;
   column-gap:           0px; 
   
   z-index: -7000;
		}
		
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
.hero img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0px;
  margin-top: 0px;	
}
}


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
.hero img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0px;
  margin-top: 0px;	
}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
.hero img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0px;
  margin-top: 0px;	
}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
.hero img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0px;
  margin-top: 0px;	
}
}





@media (max-width: 1200px) {
  .hero {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;
  }
}
@media (max-width: 1000px) {
  .hero  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;
  }
}
@media (max-width: 800px) {
  .hero  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;

  }
}
@media (max-width: 400px) {
  .hero  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;
  }
}
		


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
.work {  		 
		margin: 0px auto; 
		float: center;
		background-color:#fff;

	padding-right: 0px;
	padding-left: 0px;

   -webkit-column-count: 1;
   -webkit-column-gap:   0px;
   -moz-column-count:    1;
   -moz-column-gap:      0px;
   column-count:         1;
   column-gap:           0px; 
		}
}


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
.work {  		 
		margin: 0px auto; 
		float: center;
		background-color:#fff;

	padding-right: 60px;
	padding-left: 60px;

   -webkit-column-count: 1;
   -webkit-column-gap:   0px;
   -moz-column-count:    1;
   -moz-column-gap:      0px;
   column-count:         1;
   column-gap:           0px; 
		}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
.work {  		 
		margin: 0px auto; 
		float: center;
		background-color:#fff;

	padding-right: 60px;
	padding-left: 60px;

   -webkit-column-count: 1;
   -webkit-column-gap:   0px;
   -moz-column-count:    1;
   -moz-column-gap:      0px;
   column-count:         1;
   column-gap:           0px; 
		}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
.work {  		 
		margin: 0px auto; 
		float: center;
		background-color:#fff;

	padding-right: 60px;
	padding-left: 60px;

   -webkit-column-count: 1;
   -webkit-column-gap:   0px;
   -moz-column-count:    1;
   -moz-column-gap:      0px;
   column-count:         1;
   column-gap:           0px; 
		}
}





/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */ 		 
.work img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0px;
  margin-top: 0px;	
	}
}


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
.work img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 20px;
  margin-top: 20px;	
	}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
.work img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 20px;
  margin-top: 20px;	
	}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
.work img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 20px;
  margin-top: 20px;	
	}
}


		


@media (max-width: 1200px) {
  .work {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;
  }
}
@media (max-width: 1000px) {
  .work  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;
  }
}
@media (max-width: 800px) {
  .work  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;

  }
}
@media (max-width: 400px) {
  .work  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;

  }


.work2 {  		 
		margin: 0px auto; 
		float: center;
		background-color:#fff;

	padding-right: 60px;
	padding-left: 60px;

   -webkit-column-count: 1;
   -webkit-column-gap:   60px;
   -moz-column-count:    1;
   -moz-column-gap:      60px;
   column-count:         1;
   column-gap:           60px; 
		}
		

.work2 img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 60px;
  margin-top: 60px;	
}


@media (max-width: 1200px) {
  .work2 {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;
  }
}
@media (max-width: 1000px) {
  .work2  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;
  }
}
@media (max-width: 800px) {
  .work2  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;

  }
}
@media (max-width: 400px) {
  .work2  {
   -webkit-column-count: 1;
   -moz-column-count:    1;
   column-count:         1;

  }
  
  
		.project{ 
			width:700px;
				padding-top:100px; 
				padding-bottom:300px; 
				padding-left:0px; 
				padding-top:100px; 
				
				text-align: left;
				float: center; 
				display: inline-block;
 				letter-spacing:0.00em;	
 				background-color:#fff;	
				}

		#project{ 
			width:700px;
				padding-top:150px; 
				padding-bottom:300px; 
				padding-left:0px; 
				margin-top: 120px; 


				float: center; 
				display: inline-block;
 				letter-spacing:0.00em;	
 				background-color:#fff;	
				}
		
		#project img{ 
				padding-top:120px; 
				padding-bottom:40px; 
				padding-left:0px; 
				padding-right:0px; 
				margin-top: 100px;
				float: center;	
				background-color:#fff;	
				}		
				
		#project a:link{ 
				background-color:none; 
				border-color:none; 
				color:#777; 
				text-decoration: underline; 
				}	
				
		#project a:active{ 
				background-color:none; 
				border-color:none; 
				color:#777; 
				text-decoration: underline; 
				}	
				
		#project a:hover{ 
				background-color:#000; color:#fff; 
				-webkit-transition: background 0.8s linear;
				-moz-transition: background 0.8s linear;
				-o-transition: background 0.8s linear;
				transition: background 0.8s linear;		
				}