@charset "utf-8";
/* CSS Document */

/*<style type="text/css" media="all">*/

* {
	margin: 0; 
	padding: 0;
	box-sizing: border-box;
}

html {
     overflow-y: -moz-scrollbars-vertical;
     overflow-y: scroll;
	 overflow-x: hidden;
}

body {
	background-color: #ededed;
}

/* Begin text elements*/
h1 {
	font-size: 40px;
	line-height: 40px;
	padding: 25px 0;
}

h1 a {
	text-decoration: none;
	color: #1E1C1C;	
}

h2 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	line-height: 24px;
	padding-bottom: 10px;
}

h3 {
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	font-size: 19px;
	line-height: 19px;
	padding-top: 10px;
	padding-bottom: 5px;
	
}

h4 {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 16px;
	padding: 4px 0;
	color: #686868;
}

p {
	font-family: 'Roboto', sans-serif;
	color: #333333;
	font-size: 16px;
	line-height: 24px;
	padding-bottom: 5px;
}

	.bold {
		font-weight: bold;
		font-family: 'Roboto Condensed', sans-serif;
	}

	.lower {
		text-transform:lowercase;
	}
	
ul {
	list-style-position: outside;
	font-size: 16px;
	line-height: 24px;
	padding-bottom: 5px;
	padding-left: 18px;	
}

li {
	font-family: 'Roboto', sans-serif;
	color: #333333;
}

/* End text elements*/

#header {
	max-width: 980px;
	margin: 0 auto;
	overflow: hidden;
}
	#headerLeft {
		float: left;
		position: relative;
		left: 2.04%;
	}
	
		#logo {
			font-family: 'Roboto Condensed', sans-serif;
		}

	#headerRight {
		float: right;
		overflow: hidden;
		position: relative;
		right: 2.04%;
	}
		
		#navigation {
			overflow: hidden;
			float: right;
		}

			#navigation ul li {
		 		list-style-type: none;
				padding: none;
				display: inline;
				overflow: hidden;
				float: left;
				margin-top: 30px;
			}
			
			#navigation ul li a {
				font-family: 'Roboto Condensed', sans-serif;
				font-size: 16px;
				text-transform: uppercase;
				font-weight: bold;
				padding: 10px 25px;
				display: block;
				text-decoration: none;
				color: #1E1C1C;	
				}
				
			#navigation ul li a:hover{
				background-color: #F4F4F4;
			}	
			
			.current {
				background-color: white;
			}

#contentContainer {
	width: 100%;
	background-color: white;
}	
	
	#content {
		max-width: 980px;
		margin: 0 auto;
		background-position: center;
		background-repeat: repeat-y;
		overflow: hidden;
		padding: 15px 20px;
	}
	
	#portfolioItems {
		width: 100%;
	}
	
		.feature {
			background-color:  #FCFCFC;
			float: left;
			width: 300px;
			margin-right: 20px;
			margin-bottom: 30px;
			box-shadow: 0 2px 2px 2px #ededed;
		}
		
		.feature:nth-child(3n) {
			margin-right: 0px;
		}
		
			.featureDescription {
				min-height: 115px;
			}
		
				.feature h3 {
					text-transform: none;
					padding-left: 2%;
					padding-right: 2%;
				}
				
				.feature p {
					padding-left: 2%;
					padding-right: 2%;
				}
				
				.feature a {
					text-decoration: none;
					color: black;
				}
				
				.feature a:hover {
					color: #85cedc;	
					background-color: #85cedc;
				}
							

		
		#mainContent {
			width: 720px;	
			float: left;
			padding-right: 20px;
		}		
			
			#mainContent p {
				padding-bottom: 16px;
			}
		
			.portfolio-process-image  img {
				max-width: 700px;
				width: 100%;
			}
			
				.multipleImages {
					position: relative;
				}
				
				.leftButton {
					position: absolute;
					top: 50%;
					left: 0%;
				}
				
				.rightButton {
					position: absolute;
					top: 50%;
					right: 0%;
				}
			
			.caption {
				font-size: 12px;
				margin-bottom: 12px;
				max-width: 700px;
			}
					
			#portfolioSubNav {
				padding-top: 8px;
				padding-bottom: 10px;
			}
			
				#portfolioSubNav h3 {
					color: black;
					font-weight: normal;
				}
				
				#portfolioSubNav a {
					text-decoration: none;
					font-family: 'Roboto Condensed', sans-serif;
					font-size: 16px;
					color: #686868;
				}
				
				#portfolioSubNav a:hover {
					color: #85cedc;
				}
		
		#sidebar {
			width: 220px;
			float: left;
		}
		
		#sidebar img {
			max-width: 100%;	
		}
		
#footer {
	background-color: #ededed;
	max-width: 980px;
	margin: 0 auto;
	padding: 10px 20px 40px 20px;
}

/* page - specific CSS*/

/* Home */
.intro {
	font-size: 30px;
	line-height: 36px;
	padding-bottom: 20px;
	font-weight: bold;
}


/*  Resume  */
	.details {
		padding: 0 20px 15px 45px;
	}

#sidebar p {
	padding: 0;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 19px;
	line-height: 19px;
}

	#sidebar p a {
		display: block;
		background-color: #ededed;
		padding: 10px;
		text-decoration: none;
		font-weight: bold;
		color: black;
	}

		#sidebar p a:hover {
			background-color: #85cedc;
		}
	
/* 	.roleDetails {
		padding-left: 18px;
	} */
	
	.extraTopPadding {
		display: block;
		padding-top: 10px;
	}

/* Desktop below 1016px */
@media screen and (max-width: 1024px) {
	#header {
		width: 100%;
		padding: 0 2.04%;
	}
	
		#headerLeft {
				width: 100%;
				float: none;
				text-align: center;
				position: initial;
				
			}
	
		#headerRight {
			float: none;
			position: initial;
			width: 100%;
			text-align: center;
		}
		
			#navigation {
				display: inline-block;
				float: none;
				margin: 0 auto;
				overflow: hidden;
			}
			
				#navigation ul li {
					margin: 0;
				}
		
		.feature:nth-child(3n) {
			margin-right: 20px;
		}
		
		.feature:nth-child(2n) {
			margin-right: 0px;
		}
	
	#content {
		margin: 0 auto;
		padding: 15px 2.04%;
		width: 90%;
	}

		#mainContent {
			width: 100%;	
			float: none;
			padding-right: 20px;
		}
			.multipleImages {
				max-width: 700px;
				width: 100%;
			}
				
		#portfolioItems {
			min-width: 620px;
			max-width: 75%;
			margin: auto;
		}
	
		#sidebar {
			float: none;
			clear: both;
			margin: 0 auto;	
		}
	
		.hideWhenSmall {
			display: none;
		}
	
	#footer {
		text-align: center;
		padding: 10px 2.04% 40px 2.04%;
	}

}

/* Tablet below 800px */
@media screen and (max-width: 800px) {
	#header {
		padding: 0 2.04%;
	}

	#content {
		padding: 15px 2.04;
		width: 90%;
	}
	
		.feature {
			float: none;
			margin-left: auto;
			margin-right: auto;
		}
	
			.feature:nth-child(3n) {
				margin-right: auto;
			}
			
			.feature:nth-child(2n) {
				margin-right: auto;
			}
	
		#portfolioItems {
			min-width: inherit;
			max-width: inherit;
			margin: auto;
		}
	
	#footer {
		padding: 10px 2.04% 40px 2.04%;
	}
	
}

/* Below 600px*/
@media screen and (max-width: 600px) {

}