@charset "utf-8";
/* CSS Document */
	
@font-face {
	font-family: jersey;
	src:url('../font/Jersey%20M54.eot?#iefix') format('embedded-opentype'), 
		url('../font/Jersey%20M54.ttf') format('truetype');
}

@font-face {
	font-family: interstate; 
	src:url('../font/Interstate-BoldCondensed.ttf');
}
	
html {
	height: 100%;
}

body {
	background: url(../image/background.jpg) no-repeat scroll 50% 1%;
	background-size: cover;
	background-attachment: fixed;
	font-family: interstate;
	text-transform: uppercase;
	color: #120b07;
	margin: 0;
	height: 100%;
}

header {
	background-color: #6a5343;
	width: 100%;
	height: 98px;
	margin-top: 0px;
	position: fixed;
	z-index: 9999;
}

	#logo {
		width: 66px;
		height: 66px;
		margin: 16px;
		margin-left: 7.2%;
		margin-right: 12px;
		float: left;
	}
	
		#logoBox {
			width: 368px;
			height: 98px;
			margin: 16px;
			margin-left: 13.2%;
			margin-top: 0px;
			position: fixed;
		}
	
		header h1 {
			font-size: 54px;
			margin: 0px;
			margin-top: 4px;
			color: #FFFFFF;
		}
		
		header h2 {
			font-family: interstate;
			font-size: 25px;
			letter-spacing: 1.7px;
			margin-top: -14px;
			color: #b0a29b;
		}
		
		#menu {
			width: 496px;
			margin-right: 7.2%;
			float: right;
		}
		
		#menu p {
			margin: 26px;
			font-size: 35px;
			font-family: interstate;
			float: left;
			color: #b0a29b;
		}
		
		#menu p:hover {
			color: #FFFFFF;
		}
		
		#menu a {
			text-decoration: none;
		}

#topBar {
	width: 100%;
	margin-top: 98px;
	position: fixed;
	z-index: 9998;
}

#content {
	width: 100%;
	height: 100%;
}

	h1 {
		font-size: 48px;
		font-family: jersey;
	}
	
	h3 {
		font-size: 40px;
		color: #120b07;
		margin: 24px;
		margin-left: 4%;
		font-family: jersey;
	}
	
	h4 {
		font-size: 32px;
		font-family: interstate;
		color: #FFFFFF;
		margin: 16px;
		display: none;
	}
	
	hr {
		border: 4px solid #6a5343;
		margin-bottom: 16px;
	}

	.page {
		width: 100%;
		background-color: #b0a29b;
	}
	
	.pageContent {
		margin-left: 7.2%;
		margin-right: 7.2%;
		width: 85.4%;
	}

	#home {
		width: 100%;
		height: 96.2%;
		float: left;
	}
	
		#work {
			margin-left: 7.2%;
			margin-top: 176px;
			border-left: #FFFFFF 8px solid;
		}
		
			#work h2 {
				font-family: jersey;
				font-size: 62px; 
				letter-spacing: 16px; 
				color: #FFFFFF;
				margin: 24px;
				margin-left: 4%;				
			}
		
		#fotocredit {
			float: left;
			font-size: 14px;
			font-style: italic;
			text-transform: none;
			position: absolute;
			bottom: 16px;
			color: #b0a29b;
			margin-left: 7.2%;
		}
	
	#bottomBar {
		width: 100%;
		height: auto;
		float: left;
	}
	
		#about {
			height: auto;
			float: left;
		}
		
			#about h2 {
				color: #FFFFFF;
				margin-top: 0px;
				margin-bottom: 8px;
			}
			
			ul {
				float: left;
				list-style-type: square;
				margin: 16px;
				margin-top: 0px;
			}
	
		#portfolio {
			
			height: auto;
			float: left;
		}
		
			#portfolio a {
				color: #FFFFFF;
				text-decoration: none;
			}
			
			#portfolio a:hover {
				text-decoration: underline;
			}
		
			.itemDetailBox {
				width: 100%;
				height: 0px;
				display: none;
				margin-bottom: 48px;
				border-bottom: 8px solid #6a5343;
				border-top: 8px solid #6a5343;
			}
			
				.leftBox {
					width: 24%;
					height: auto;
					float: left;
					margin-right: 1.4%;
				}
				
					.leftBox p {
						font-family: interstate;
						text-align: justify;
						margin: 16px;
						margin-top: 0px;
					}
				
					.titelPlaceholder {
						font-size: 20px;
						color: #6a5343;
						margin-bottom: 0px !important;
					}
					
					.detailContent {
						text-transform: none;
						display: none;
					}
				
				.middleBox {
					width: 71%;
					height: 568px;
					margin-right: 1.4%;
					float: left;
				}
				
					.itemDetailImage {
						margin-top: 16px;
						margin-bottom: 16px;
						text-align: center;
					}
					
						.itemDetailImage img {
							width: auto;
							max-height: 537px;
							display: none;
						}
						
						iframe {
							display: none;
						}
						
				.rightBox {
					width: 2.1%;
					height: 568px;
					float: left;
				}
				
					.closeBtn {
						width: 100%;
						height: auto;
						margin-top: 16px;
						background-color: #0f0b09;
						cursor: pointer;
					}
					
					.closeBtn:hover {
						background-color: #6a5343;
					}
				
						.closeBtn img {
							width: 100%;
						}
		
			.portfolioItem {
				width: 276px;
				height: 276px;
				float: left;
				margin: 0.5%;
				background-color: #3f3a34;
				cursor: pointer;
			}
			
				.itemRollover {
					width: 276px;
					height: 276px;
					z-index: 1;
					position: absolute;
					background-image: url(../image/rollover.png);
					background-size: 420%;
					background-position: center;
					transition: background-size 0.2s ease-in-out 0s;
				}
				
				.itemRollover:hover {
					background-size: 100%;
					transition: background-size 0.2s ease-in-out 0s;
				}
				
					.itemTitle {
						font-size: 12px;
						text-align: center;
						color: #FFFFFF;
						opacity: 0;
						margin-top: 232px;
						transition: all 0.2s ease-in 0s;
					}
					
					.itemRollover:hover .itemTitle{
						opacity: 1;
						margin-top: 224px;
						transition: all 0.2s ease-out 0.2s;
					}
			
				.itemImage {
					width: 276px;
					height: 276px;
					z-index: 2;
				}
				
					.itemImage img {
						width: 100%;
						height: 100%;
					}
			
		#contact {
			height: auto;
			float: left;
		}
		
		#leftContactBox, #leftAboutBox {
			width: 49.4%;
			float: left;
			text-transform: none;
			font-size: 20px;
			text-align: justify;
			margin-bottom: 98px;
		}
		
			form {
				margin-bottom: 0px;
			}
		
			.textfield {
				width: 98.8%;
				height: 40px;
				margin-bottom: 16px;
				font-family: interstate;
				font-size: 24px;
			}
			
			.textbox {
				width: 98.8%;
				height: 120px;
				margin-bottom: 16px;
				font-family: interstate;
				font-size: 24px;
				resize: none;				
			}
			
			.submitbutton {
				width: 48.4%;
				height: 40px;
				margin-bottom: 16px;
				font-family: interstate;
				font-size: 24px;
				color: #FFFFFF;
				background-color: #120c07;
				cursor: pointer;
    			border: none;
			}
			
			.submitbutton:hover {
				background-color: #6a5343;
			}
			
			#formResponse {
				display: none; 
				text-transform: none;
			}
			
		#rightContactBox, #rightAboutBox {
			width: 49.4%;
			float: right;
			text-transform: none;
			font-size: 20px;
			text-align: justify;
		}
		
			#rightContactBox p, #leftAboutBox p {
				margin: 0px;
			}
		
#bottomBarDark {
	width: 100%;
	height: auto;
	float: left;
	background-color: #b0a29b;
}		

footer {
	background-color: #6a5343;
	width: 100%;
	height: 136px;
	float: left;
	text-align: center;
}

	#logoFooter {
		width: 58px;
		height: 58px;
		margin-top: 16px;
	}