/* ------------------ CSS3--------------------  #             
Date: Oct. 7, 2013                				#
Version: 3.0                                    #
Author: Elliot Obeng - UX / UI Designer			#
Description: Online Portfolio of Elliot Obeng   #
												#
												#
												#
----------------------------------------------  */ 


	html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}									
	
	article, aside, figure, footer, header, hgroup, nav, section { display: block; }

	img,
	object,
	embed { max-width: 100%; }

	html { overflow-y: scroll; }


	body { background: #ffffff; font: 13px/28px 'Roboto',Arial, sans-serif; font-style: normal; font-weight: 300; letter-spacing: 0.03em; }

	h1{ font: 14px/28px 'Roboto',Arial, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0.03em;}
	h2{ font: 15px/30px 'Roboto',Arial, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0.03em;}
	h3{ font: 13px/30px 'Roboto',Arial, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0.03em;}
	p{ font: 15px/30px 'Roboto',Arial, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0.03em;}
	p.asics { font: 14px/28px 'Roboto',Arial, sans-serif; font-style: normal; font-weight: 300; letter-spacing: 0.03em;}
	h2.asics { font: 16px/30px 'Roboto',Arial, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0.03em; padding-bottom: 7px;}


	body, select, input, textarea { color: #686868; }

	button, input, select, textarea {margin: 0;}

	hr { border: solid; #222222; border-width: 1px 0 0; clear: both; margin: 0px 0px 20px 0; height: 0; width: 15%; margin-left: 160px; }

	ul { list-style: none; line-height: 2.0em; }
	
	a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
	
	del { text-decoration: line-through; }
	
	abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }



/*---------------------------------------------------------------------------------* Header *--------------------------------------------------------------------------------------------*/


	#header-container { background: #ffffff; height: 86px; width: 100%;  top: 0px; padding: 25px 0; position: fixed; z-index:300; opacity: .96;}
	
	.top-wrapper { margin-top: -25px;  border-top: 6px solid #222222;}
	
	.wrapper { margin: 0; padding: 0px 72px; border-bottom: 1px solid #efefef;}


	#home header { margin: 0 auto; max-width: 1200px; }
	header { height: 130px; }
	
	#logo-holder { float: left; }
	#logo { display: block; height: 29px; margin: 60px 0; width: 272px; }
	#logo a { 
		font-family: 'GreycliffCF-ExtraBold', Arial, sans-serif;
		src: url(font/GreycliffCF-ExtraBold.ttf);
		color: #222222;
		font-style: black;
		font-weight: 900; 
		font-size: 32px;
		line-height: 15px;
		text-transform: uppercase;
	}
	
	#nav-wrapper { float: right; }
	
	#nav { padding: 40px 0; display: inline-block; }
	#nav li { float: left; padding: 15px 22px; }
	#nav a { 
		font-family: 'Roboto',Arial, sans-serif;
		color: #222222;
		font-style: black;
		font-weight: 900; 
		font-size: 14px;
		line-height: 15px;
		letter-spacing: 0.14em; 
		padding: 2px;
		text-transform: uppercase;
	}
	#nav a:hover { color: #999999; }


/*---------------------------------------------------------------------------------* Design Grid *--------------------------------------------------------------------------------------------*/



.pg-wrap {padding-bottom: 0px}
.design-grid { border-radius: 10px; height: auto; display: block; padding: 220px 10px 0px 0px;}
.design-grid a { border-radius: 10px; margin-top: auto; padding: 0px 10px 0px 0px;}
	


/*---------------------------------------------------------------------------------* Design Hover *--------------------------------------------------------------------------------------------*/

	
	#design-hover {
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	}

	#design-hover:hover{
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	}

	
	#design-hover {
		background-color: #ffffff;
		position: absolute;
		text-align: center;
		width: 100%;
		height: 100%;
	}
	
	.four.columns .portrait #design-hover { border-radius: 10px; height: 100%; left: .0%; top: .0%; bottom: 10.0%; width: 100%; }
	.eight.columns .landscape #design-hover { border-radius: 10px;  height: 100%; left: .0%; top: .0%; bottom: 10.0%; width: 100%; }
	
	
	
	#design-hover:hover { opacity: .96; }
	
	.hover-description {
		position: absolute;
		text-align: center;
		top: 40%;
		width: 100%;
	}
	
	.hover-description h2 { color: #434343; font-size: 20px; font-weight: 400; margin-bottom: 20px; padding: 0px;}
	.hover-description h3 { color: #999999; font-size: 12px; font-family: 'GreycliffCF'; font-weight: 200; margin-bottom: 0px; }
	
	.cv{margin-left: 200px;}


	
/*---------------------------------------------------------------------------------* Footer *--------------------------------------------------------------------------------------------*/

	.cv{margin-left: 290px;}

	#footer-wrap { margin-top: 2px; }
	#footer-wrap #footer { padding: 28px 0; border-bottom: 1px solid #efefef; }
		
	#footer-wrap #bottom { height: 36px; padding: 24px 0; }
	#bottom { color: #434343; font: 14px/36px 'Roboto'; font-weight: 400; font-style: normal; letter-spacing: 0.16em; margin-bottom: 0px; margin-left: 70px; text-transform: uppercase; text-align: center;  }
	#bottom  { float: center; }
	#footer .container { padding-bottom: 0px; }
	
	#bottom a { color: #434343; padding-right: 70px; text-align: center; font: 14px/36px 'Roboto'; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; }
	#bottom a:hover { color: #999999; }


button{width:auto;overflow:visible;}.ie7 img{-ms-interpolation-mode:bicubic;}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache", false, true));}.clearfix:before,.clearfix:after{content:"020";display:block;height:0;overflow:hidden;}.clearfix:after{clear:both;}.clearfix{zoom:1;}a,a:visited{color:#666666;text-decoration:none;outline:0;-webkit-transition:color 0.2s linear;-moz-transition:color 0.2s linear;-o-transition:color 0.2s linear;-ms-transition:color 0.2s linear;transition:color 0.2s linear;}a:hover,a:focus{color:#333;}p a,p a:visited{line-height:inherit;}small{font-size:75%;color:#666666;font-family:'Open Sans';font-weight:300;letter-spacing:0.1em;text-transform:uppercase;}strong,th{font-weight:bold;}td,td img{vertical-align:top;}pre,code,kbd,samp{font-family:monospace, sans-serif;}button,input,select,textarea{margin:0;}button{width:auto;overflow:visible;}.ie7 img{-ms-interpolation-mode:bicubic;}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache", false, true));}.clearfix:before,.clearfix:after{content:"020";display:block;height:0;overflow:hidden;}.clearfix:after{clear:both;}.clearfix{zoom:1;}



/*---------------------------------------------------------------------------------* Projects *--------------------------------------------------------------------------------------------*/



/*------------------------------------------------- Asics ------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#asics { background: url("../img/asics-header-img.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


/*------------------------------------------------- UCD ------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#ucd { background: url("../img/User-Centered-Designs.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


/*------------------------------------------------- HealthMarket------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#sterl { background: url("../img/sterl-header.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


/*------------------------------------------------- Mobli------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#mobli { background: url("../img/mobli-banner-2.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


/*------------------------------------------------- KS Photo------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#ks-photo { background: url("../img/ks-banner.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


/*------------------------------------------------- Courtside------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#csj { background: url("../img/csj-banner-1.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


/*------------------------------------------------- Find Dine------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#fd-ban { background: url("../img/fd-banner-img.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 0px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}




/*------------------------------------------------- DSafe------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#ds-ban { background: url("../img/dsafe-header.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 0px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}



/*------------------------------------------------- Adobe------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#av-ban { background: url("../img/aviary-header.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 0px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}

/*------------------------------------------------- Neue Amour------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#na-ban { background: url("../img/neue-banner.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 0px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


/*------------------------------------------------- eBay------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#io-ban { background: url("../img/io-header-img-3.png") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 0px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


/*------------------------------------------------- Sneaker Catalog------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#snkr-ban { background: url("../img/snkr-banner.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 0px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}





/*------------------------------------------------- Google------------------------------------------------------------ */

.project-banner { height: 530px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
#googledesign { background: url("../img/google-design-header.jpg") no-repeat center center; background-size: cover; position: fixed; top:136px; height: 530px; }
#content {position: relative; background: #ffffff;}
.asics-run{margin-top: 40px; margin-bottom: 0px;  padding-right: 59px;}
.asics-run-role{margin-top: 40px; margin-bottom: 20px;}



/*------------------------------------------------- Button, Video , Bottom Nav ------------------------------------------------------------ */


.button{text-align: left;}
.download-app{border:1px solid #aaa;text-align:center;font-weight:300;line-height:20px;margin-top:25px;padding-top:15px;padding-bottom:15px;padding-left:20px;padding-right:20px;width:200px;text-transform:uppercase;font-size:13px;letter-spacing:2px;font-family:'Roboto', Helvetica, Arial, sans-serif;display:inline-block;}
.download-app a{text-decoration:none;color:#555;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;transition:.3s;}
.download-app a:hover{color: #989898;}

.asic-text{margin-top: 50px;}



.video-container {position: relative; top:0;left:0%;overflow: hidden;}
video{position:relative;height:400px;width:100% z-index:0;}
video.fillWidth{width:100%;}

/* Project Nav Bottom */

#proj-nav-btm { border-top: 1px solid #efefef; height: 5px; margin-top: 10px; }
.navigation-bottom{ margin-top: 20px;}





/*--------------------------------------------------------------------------------- Media Queries!--------------------------------------------------------------------------------------------*/
					

                    /* 960 Screens */                


@media only screen and (min-width: 960px) and (max-width: 1250px) {



	.description { padding: 72px; }
	.project-banner { height: 500px; }
	blockquote, blockquote p { font-size: 18px; line-height: 28px; }
	blockquote p { padding: 0 24px; }
	.logo-space { padding-bottom: 48px; padding-top: 84px; }
	.work-heading p { padding: 0 0px 72px; }
	p.lead { width:100%; }
	.work-grid a { padding: 83px 0;}
	.cv{margin-left: 0px;}
	body{overflow-x: hidden;}


}

					/* Tablet */

@media only screen and (min-width: 768px) and (max-width: 959px) {

	body{overflow-x: hidden;}
	.description { padding: 72px 24px; }
	.project-banner  { height: 500px; }
	.logo-space { padding-top: 36px; padding-bottom: 46px; }

    #hover { display:none;}
	.work-heading p { font-size: 20px; line-height: 32px; padding-bottom: 54px; width: 100%; }
	.design-grid { padding-top: 224px; }
	#home #footer-container { margin-top: 36px; }
	

	#footer h3 { font-size: 13px; }
	.cv{margin-left: 250px;}

	#proj-nav-btm { border-top: 1px solid #efefef; padding: 5px 0; height: 10px; margin-top: 5px; }
	.navigation-bottom{ margin-top: 20px;}
	
	.social{margin-left: -65px;  }


	
}

			/* All Mobile Sizes (devices and browser) */


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

	body{overflow-x: hidden;}
	h1 { font-size: 18px; line-height: 28px; }
	.design-grid { padding-top: 224px; }

	#logo { margin-bottom: 30px; }
	#nav-wrapper { float: left; clear: both; }
	#nav { padding: 10px; }
	#nav li { padding: 10px 28px 10px; clear: both;}


	p { line-height: 22px; }
	#hover { display:none; }
	.fade { opcaity: 1; }
	#home #footer-wrap, #proj-nav-btm { margin-top: 24px; }
	#footer .container .one-third { margin-bottom: 14px; }
	#footer p, #footer h3 { text-align: left; }
	#footer h3 { margin-bottom: 6px; font-size: 12px; }
	#footer p { margin-bottom: 18px; }
	#footer-container #footer { padding: 36px 0 24px; }
	#footer-container #bottom { height: auto; padding-bottom: 0px; }
	#bottom .copyright { float: none; margin: 0 auto; padding-bottom: 24px; text-align: center; overflow-x: hidden; overflow-y: scroll;}

	/* Homepage */
	.work-heading p { font-size: 18px; line-height: 28px; padding: 0 0 48px 0; width: 100%; }
	.design-grid { padding-top: 265px; }
	#header-container { background: #ffffff; height: 183px; width: 100%;  top: 0px; padding: 24px 0; position: fixed; z-index:300; opacity: .9;}
	#about-footer-wrap { margin-top: 235px; }
	#about-footer-wrap #about-footer { padding: 148px 0; border-bottom: 1px solid #dad9d9; overflow-x: hidden; overflow-y: scroll; }	
	#about-footer-wrap #about-bottom { height: 36px; padding: 24px 0; overflow-x: hidden; overflow-y: scroll;}
	.cv{margin-left: 0px;}


	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#asics { background: url("../img/asics-header-img.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	#proj-nav-btm { border-top: 1px solid #efefef; padding: 0px 0; height: 5px; margin-top: 40px; }
	.navigation-bottom{ margin-top: 20px;}


	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ucd  { background: url("../img/User-Centered-Designs.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	#proj-nav-btm { border-top: 1px solid #efefef; padding: 0px 0; height: 5px; margin-top: 40px; }
	.navigation-bottom{ margin-top: 20px;}

	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#sterl { background: url("../img/sterl-header.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#mobli { background: url("../img/mobli-banner-2.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}

	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ks-photo { background: url("../img/ks-banner.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#csj { background: url("../img/csj-banner-1.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#fd-ban { background: url("../img/fd-banner-img.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ds-ban { background: url("../img/dsafe-header.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#av-ban { background: url("../img/aviary-header.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}

	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#na-ban { background: url("../img/neue-banner.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}

	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#io-ban { background: url("../img/io-header-img-3.png") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}

	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#snkr-ban { background: url("../img/snkr-banner.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}

	.project-banner { height: 540px; margin: 150px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#googledesign { background: url("../img/google-design-header.jpg") no-repeat center center; background-size: cover; position: fixed; top:200px; height: 540px; }
	#content {position: relative; background: #ffffff;}
	.asics-run{margin-top: 40px; margin-bottom: 20px;  padding-right: 59px;}
	.asics-run-role{margin-top: 40px; margin-bottom: 20px;}


	

/* Mobile Landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) { 

	
	header { height: 206px; }
	body{overflow-x: hidden;}
	#logo { margin-bottom: 30px; }
	#nav { padding-top: 0px; }
	#nav li { padding: 10px 28px 10px 0; }
	#nav-wrapper { float: left; clear: both; }
	
	#bottom .social { float: none; text-align: center; }
	#bottom a { padding: 0 13px; font-size: 11px; }
	.cv{margin-left: 0px;}

	#bottom { float: left; font-size: 12px; text-align: center; height: 36px; padding: 4px 0; }
	#bottom a { padding: 0 13px 0px ; text-align: center; line-height: 26px; overflow-x: hidden; overflow-y: scroll;}
	.cv{margin-left: 0px;}



	header { height: 239px; }
	.wrapper { padding: 0px 36px; }
	#nav-wrapper { float: left; clear: both; }
	#nav { padding: 10px; }
	#nav li { padding: 6px 28px 6px 0; clear: both;}
	#logo { margin-bottom: 16px; margin-left: 10px; }
	

	#header-container { background: #ffffff; height: 193px; width: 100%;  top: 0px; padding: 24px 0; position: absolute; z-index:300; opacity: .96;}
	#about-footer-wrap { margin-top: 235px; }
	#about-footer-wrap #about-footer { padding: 148px 0; border-bottom: 1px solid #f6f6f6; overflow-x: hidden; overflow-y: scroll;}
		
	#about-footer-wrap #about-bottom { height: 36px; padding: 24px 0;}
	.design-grid { padding-top: 320px; }
	.design-grid a { padding: 10px 0;} 
	
	#bottom { font-size: 12px; text-align: center; height: 36px; padding: 14px 0; }
	#bottom a { float: none; padding: 0 13px 0px ; text-align: left; line-height: 26px; overflow-x: hidden; overflow-y: scroll;}
	.cv{margin-left: 0px;}



	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#asics { background: url("../img/asics-header-img.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 430px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ucd { background: url("../img/User-Centered-Designs.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#sterl { background: url("../img/sterl-header.jpg") no-repeat center center; background-size: cover; position: absolute; top:80px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#mobli{ background: url("../img/mobli-banner-2.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ks-photo{ background: url("../img/ks-banner.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#csj { background: url("../img/csj-banner-1.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}


	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#fd-ban { background: url("../img/fd-banner-img.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ds-ban { background: url("../img/dsafe-header.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#av-ban { background: url("../img/aviary-header.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#na-ban { background: url("../img/neue-banner.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#io-ban { background: url("../img/io-header-img-3.png") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#snkr-ban { background: url("../img/snkr-banner.jpg.png") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 540px; margin: 36px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#googledesign { background: url("../img/google-design-header.jpg") no-repeat center center; background-size: cover; position: absolute; top:90px; height: 430px; }
	#content {position: relative; background: #ffffff;}



	#proj-nav-btm { border-top: 1px solid #efefef; padding: 0px 0; height: 10px; margin-top: 4px; }
	.navigation-bottom{ margin-top: 20px;}

	.next { margin-left: 300px; }


	.social{margin-left: 75px; padding-right: 5px;  }
	
}

/* Mobile Portrait */
@media only screen and (max-width: 479px) {




	header { height: 227px; }
	body{overflow-x: hidden;}
	.wrapper { padding: 0px 36px; }
	#nav-wrapper { float: left; clear: both; }
	#nav { padding: 10px; margin-left: 0px;}
	#nav li { padding: 6px 28px 6px 0; clear: both;}
	#logo { margin-bottom: 16px; margin-left: 10px; }
	#logo-holder { float: left; }
	#logo { display: block; height: 29px; margin: 40px 0; width: 272px; }
	#logo a { 
		font-family: 'GreycliffCF-ExtraBold', Arial, sans-serif;
		src: url(font/GreycliffCF-ExtraBold.ttf);
		color: #222222;
		font-style: black;
		font-weight: 900; 
		font-size: 32px;
		line-height: 15px;
		text-transform: uppercase;
	}
	

	#header-container { background: #ffffff; height: 147px; width: 100%;  top: 0px; padding: 24px 0; position: absolute; z-index:300; opacity: .96;}
	#about-footer-wrap { margin-top: 235px; }
	#about-footer-wrap #about-footer { padding: 148px 0; border-bottom: 1px solid #f6f6f6; overflow-x: hidden; overflow-y: scroll;}
		
	#about-footer-wrap #about-bottom { height: 36px; padding: 24px 0;}
	.design-grid { padding-top: 320px; }
	.design-grid a { padding: 10px 0;} 
	
	#bottom { font-size: 12px; text-align: center; height: 36px; padding: 0px 0; }
	#bottom a { float: center; padding: 8px ; text-align: center; line-height: 36px; overflow-x: hidden; overflow-y: scroll;}
	.cv{margin-left: 0px;}


	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#asics{ background: url("../img/asics-header-img.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}


	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ucd { background: url("../img/User-Centered-Designs.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}


	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#sterl { background: url("../img/sterl-header.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}


	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#mobli{ background: url("../img/mobli-banner-2.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}


	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ks-photo { background: url("../img/ks-banner.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#csj { background: url("../img/csj-banner-1.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#fd-ban { background: url("../img/fd-banner-img.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}


	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#ds-ban { background: url("../img/dsafe-header.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}


	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#av-ban { background: url("../img/aviary-header.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#na-ban { background: url("../img/neue-banner.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 330px; margin: 40px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#io-ban { background: url("../img/io-header-img-3.png") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}

	.project-banner { height: 330px; margin: 40px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#snkr-ban { background: url("../img/snkr-banner.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}


	.project-banner { height: 330px; margin: 20px 20px 0px 0px 0px; padding: 0; position: relative; z-index: 0;}
	.full-image { background-size: cover; height: 100%; position: absolute; top: 200; width: 100%; z-index: 30px;}
	#googledesign { background: url("../img/google-design-header.jpg") no-repeat center center; background-size: cover; position: absolute; top:82px; height: 230px; }
	#content {position: relative; background: #ffffff;}



	.social{margin-left: -65px; padding-right: 10px; }

	#proj-nav-btm { border-top: 1px solid #efefef; padding: 0px 0; height: 10px; margin-top: 25px;}
	.next { margin-left: 200px; }


}

@media all and (orientation: landscape) {
	body{overflow-x: hidden;}
	
}