@charset "utf-8";

html, body{
	height: 100%;
	width: 100%;
	background-color: #f4f5f6;
}
html, body, header, footer, div, section, nav, p, ul, ol, li, h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 100%;
}
body{
	font-family: 'Raleway', sans-serif;
	color: #000000;
	font-size: 18px;
}
h1, h2, h3{ font-family: 'Raleway', sans-serif;}
h1{	font-size: 3.0em; }
h2{	font-size: 2.0em; }
h3{	font-size: 1.5em; }
ol, ul{ list-style: none; }
a{ text-decoration: none; }
	a:hover{ text-decoration: underline; }
	a img{ border: none; }
p{ 
	margin-top: 1.0em; 
	line-height: 1.6em;
}

/* basic grid */
	.row:after{
		display: block;
		content: " ";
		clear: both;
	}
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
		float: left;
		position: relative;
		min-height: 1px;
	} 
	.col-12 {width: 100%;}
	.col-11 {width: 91.66666667%;}
	.col-10 { width: 83.33333333%;}
	.col-9 {width: 75%;}
	.col-8 {width: 66.66666667%;}
	.col-7 {width: 58.33333333%;}
	.col-6 {width: 50%;}
	.col-5 {width: 41.66666667%;}
	.col-4 {width: 33.33333333%;}
	.col-3 {width: 25%;}
	.col-2 {width: 16.66666667%;}
	.col-1 {width: 8.33333333%;}
	
	.col-pull-12 {right: 100%;}
	.col-pull-11 {right: 91.66666667%;}
	.col-pull-10 {right: 83.33333333%;}
	.col-pull-9 {right: 75%;}
	.col-pull-8 {right: 66.66666667%;}
	.col-pull-7 {right: 58.33333333%;}
	.col-pull-6 {right: 50%;}
	.col-pull-5 {right: 41.66666667%;}
	.col-pull-4 {right: 33.33333333%;}
	.col-pull-3 {right: 25%;}
	.col-pull-2 {right: 16.66666667%;}
	.col-pull-1 {right: 8.33333333%;}
	.col-pull-0 {right: auto;}

	.col-push-12 {left: 100%;}
	.col-push-11 {left: 91.66666667%;}
	.col-push-10 {left: 83.33333333%;}
	.col-push-9 {left: 75%;}
	.col-push-8 {left: 66.66666667%;}
	.col-push-7 {left: 58.33333333%;}
	.col-push-6 {left: 50%;}
	.col-push-5 {left: 41.66666667%;}
	.col-push-4 {left: 33.33333333%;}
	.col-push-3 {left: 25%;}
	.col-push-2 {left: 16.66666667%;}
	.col-push-1 {left: 8.33333333%;}
	.col-push-0 {left: auto;}
/* end grid system */

.text-center{ text-align: center; }
.margin-top-20px{ margin-top: 20px; }
.margin-right-20px{ margin-right: 20px; }
.margin-bottom-20px{ margin-bottom: 20px; }
.margin-left-20px{ margin-left: 15px; }
.margin-top-15px{ margin-top: 15px; }
.margin-right-15px{	margin-right: 15px; }
.margin-bottom-15px{ margin-bottom: 15px; }
.margin-left-15x{ margin-left: 15px; }
.margin-right-5{ margin-right: 5px; }
.margin-bottom-5{ margin-bottom: 5px; }
.clearfix{
	clear: both;
	line-height: 0;
	font-size: 0;
}
.border-bottom{	border-bottom: 1px solid black; padding-bottom: 5px; }
.bold{ font-weight: bold; }

.headline{
	width: 100%; 
	border-bottom: 1px solid black;
	padding-bottom: 5px;
}
.wrapper{ border-bottom: 3px double #A9A9A9; }
.header-container{
	height: 95%;
	width: 100%;   
	border-bottom: 3px double #A9A9A9;
}
.intro-block{ padding: 50px 0; font-size: 1.5em;}
.story-column{
	padding: 15px;
	background-color: rgba(255, 255, 255, 1.00);
}

section{
	width: 980px;
	padding: 70px 0 25px 0;
	margin: 0 auto;
}

header{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	max-width: 900px;
	transform: translate(-50%, -50%);
	color: rgba(255,255,255,1.00);
}

#top-bar{
	position: fixed;
	background-color: #3B3B3B; /* fix for IE lameness */
	background-color: rgba(59, 59, 59, 0.75);
	z-index: 10;
	top: 0;
	width: 100%;
	height: 10px;
}

/* menu */
.menu{
	padding: 0 20px;
	margin: 10px 20px 0 0;
	height: 50px;
	background-color: #3B3B3B; /* fix for IE lameness */
	background-color: rgba(59, 59, 59, 0.75);
	}
	.menu ul{
		margin: 10px 0px 10px 15px;
	}
		.menu ul li{
			float: left;
			margin: 0 7px 0 7px;
		}
			.menu ul .menu-last{
				padding: 0;
			}
			.menu ul li a{
				color: #ffffff;
				text-shadow: #000000 3px 3px;
			}
				.menu ul li a img{
					font-size: 18px;
				}
#main-menu{
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);	
}				
#project-menu{ position: absolute; }

/* header */
#home-header{
	background-image: url("../images/nature-forest-trees-fog.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: scroll;
}	
	#home-header header{
		padding: 15px;
		background-color: rgba(67,67,67,0.75);
	}

/* about */
#about-wrapper{}

#about{}

ul.skills-list{
	margin-top: 1.0em;
}

ul.skills-list li{
	display: block;
	padding: 5px 10px;
	margin-bottom: 15px;
}
.skill1{
	background-color: red;
	width: 80%;
}
.skill2{
	background-color: red;
	width: 60%;
}
.skill3{
	background-color: red;
	width: 40%;
}
.skill4{
	background-color: red;
	width: 50%;
}
.skill5{
	background-color: red;
	width: 60%;
}


/* portfolio */
#portfolio-wrapper{
	background-color: #d6e6ff;
}
	
#portfolio{
}

.tabs{
	clear: both;
	border-bottom: 1px solid #A9A9A9;
	border-top: 1px solid #A9A9A9;
	padding: 20px 0;
	}
	.tabs li{
		display: inline-block;
		font-family: 'seaside_resort_nfregular', sans-serif;
		font-size: 35px;
		// text-shadow: 4px 4px #B9A601;
	}
		.tabs li a{
			color: #000000;
			padding: 5px 10px 10px 10px;
			margin: 0 10px 0 0;
		}
			.tabs li a:hover{
				text-decoration: none;
				background-color: #373737;
				color: #ffffff;
				text-shadow: none;
			}
			.tabs li a.current{
				text-decoration: none;
				background-color: #373737;
				color: #ffffff;
				text-shadow: none;
			}			
.panes{
	margin: 25px 0 0 0;
	font-size: 16px;
}

.bwWrapper {
	position: relative;
	display: inline-block;
	border: 1px solid #7b7b7b;
	margin-bottom: 5px;
}

.bwWrapper img{
	display: inline-block;
	vertical-align: top;
	width: 239px;
	height: 254px;
}	

.portfolio-description{
	display: none;
}
	.portfolio-description:after{
		display: table;
		content: "";
		clear: both;
	}
	.portfolio-description img, 
	.portfolio-description .description{
		float: left;
	}
	.portfolio-description img{
		width: 500px;
		border: 5px solid #fff;
	}
	.portfolio-description .description{
		width: 400px;
		padding: 0 10px;
		vertical-align: top;
	}
	.portfolio-description .description h2{
		font-size: 40px;
		margin-bottom: 10px;
		border-bottom: 1px solid #A9A9A9;
	}
	.portfolio-description .description h3{
		font-size: 30px;
		margin-bottom: 10px;
		border-bottom: 1px solid #A9A9A9;
	}
	.portfolio-description .description p{
		margin-top: 20px;
	}

	
#ux-wrapper{
}	
	#ux-process{
	}
	.section{
		background-color: #ffffff; /* fix for IE lameness */
		background-color: rgba(255, 255, 255, 0.85);
		padding: 15px;
		margin: 15px 0;
	}
		.section h1{
			font-size: 48px;
			margin: 0 0 15px 0;
			text-shadow: 4px 4px #ffffff;
			border-bottom: 1px solid #A9A9A9;
		}
		.section p{
			line-height: 24px;
			margin-bottom: 15px;
		}
		.section a{
			color: #b29600;
		}
		.section .column{
			display: inline-block;
			width: 23%;
			vertical-align: top;
			padding-right: 10px;
		}
		.column:last-child{
			padding-right: 0;
		}

	.circle {
		border-radius: 50%;
		width: 40px;
		height: 40px; 
		margin: 0 auto 15px auto;
		background-image: 
			radial-gradient(
    			#696969, black
    		);
    	color: #ffffff;
    	text-align: center;
    	line-height: 42px;
    	border: 3px solid black;
	}

/* case */
#case-wrapper{
	background-image: radial-gradient(#5b5b5b, black);
	color: #ffffff;	
	}
	#case-wrapper .headline{
		border-color: #ffffff;
	}

	.case-image{
		width: 100%;
		max-width: 495px;
		margin: auto;
	}

	.case-button{
		background-color: white;
		color: black;
		border-radius: 20px;
		border: 3px solid transparent;
		padding: 10px 20px;
		margin-top: 20px;
		text-align: center;
	}
		.case-button:hover{
			color: white;
			background-color: transparent;
			border: 3px solid white;
			text-decoration: none;
		}	

/* contact */		
#contact-wrapper{
	background-color: ;
	height: 50%;
}



/* ======== project page styling ======= */
.wires-wrapper{
	color: white;
}

.rubik{
	color: black;
	background-color: white;
	border-radius: 20px;
}
	.rubik p{
		margin: 20px 20px;
	}

#sky-header{
	background-color: rgba(5, 58, 138, 1.00); /* drk blue */
	background-image: url("../projects/sky-ai/images/*.png");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-attachment: scroll;
}

#soa-header{
	background-color: rgba(5, 58, 138, 1.00); /* drk blue */
	background-image: url("../projects/soa/images/Subaru_logo.png");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-attachment: scroll;
}
#soa-wires-wrapper{
	background-image:
		linear-gradient(#004890, #000000);	
}

#btp-header{
	background-color: #EBEBEB;
	background-image: url("../projects/btp/images/BeyondTrust_logo.png");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-attachment: scroll;
	color: #676767;
}
	#btp-header header{
		color: #676767;
	}

#dupont-header{
	background-color: white;
	background-image: url("../projects/dupont/images/DuPont_logo.png");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-attachment: scroll;
}
	#dupont-header header{
		color: black;
	}

#citi-header{
	background-color: rgba(5, 58, 138, 1.00); /* drk blue */
	background-image: url("../projects/citi/images/citi-project-bg.jpg");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-attachment: scroll;
}

#geo-header{
	background-color: rgba(5, 58, 138, 1.00); /* drk blue */
	background-image: url("../projects/geo-documentation/images/geo-blue-bg.jpg");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-attachment: scroll;
}

#compass-header{
	background-color: rgba(5, 58, 138, 1.00); /* drk blue */
	background-image: url("../projects/geo-documentation/images/geo-compass-bg.jpg");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-attachment: scroll;
}

#citi-wires-wrapper{
	background-image:
		linear-gradient(#053a8a, #00193f);	
}

.project-back-wrapper{ 
	background-image:
		linear-gradient(#0c0c0c, #3B3B3B);	
	color: #ffffff;	
	padding-bottom: 50px;
}

.project-back-wrapper .back{ 
	color: #ffffff;	
}