@charset "UTF-8";


/* General + Layout */ 

body  
{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	background: #000;
	margin: 0;
	padding: 0;
	text-align: left; 
	color: #ddd;
    overflow-x: hidden;
}



/* Header */

#header 
{
	display: block;
	margin: 0;
	padding: 31px 3% 31px 3%;
	height: 44px;
	vertical-align: bottom;
}

#logo 
{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

#logo-name,
#sign-in 
{
	display: inline-block;
	position: relative;
	top: 13px;
	left: 10px;
	height: 44px;
	font-size: 22px;
	font-weight: 200;
	margin: 0;
	padding: 0;
	/* text-transform: lowercase; */
	/* font-family: 'Source Serif 4' */
}


#sign-in {
	font-size: 15px;
	float: right;
	left: 0;
	top: 19px;
	text-transform: initial;
}



#header #sign-in input {
	background: none;
	border: 0;
	font: inherit;
	margin: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
    border-radius: 0;
	text-transform: initial;
    outline: none;
    font-family: Helvetica, Arial, sans-serif;
	/* font-family: 'Source Serif 4'; */
}


#header #sign-in a {
	font-family: Helvetica, Arial, sans-serif;
    /* font-family: "Source Serif 4" */
}

#header #logo-name
{
	font-family: Helvetica, Arial, sans-serif;
}




/* Hero */

#hero, #hero-tall
{
	display: block;
	line-height: 350px;
	width: 100%;
	background: #434343 url("/images/hero-brooklyn-bridge.jpg") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#hero-tall
{
	line-height: 450px;
}


#hero-text, #hero-text-tall
{
	line-height: 1.3;
	font-size: 42px;
	font-weight: 500;
	color: #fff;
    height: 350px; 
	width: 2400px;
	padding: 0 3%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
	font-family: 'Source Serif 4';
}

#hero-text-tall
{
	height: 450px;
}


/* FOOTER */

#footer {
	display: block;
	padding: 20px 3%;
	/* background: #4d4d4d; */
	background: #000;
	color: #999;
	line-height: 200%;
	font-size: 15px;
	font-weight: 100;
    font-family: Helvetica, Arial, sans-serif;
}

#footer a,
#footer a:visited {
	color: #999;
}



#footer #copyright {
	display: block;
	float: right;
}



/* Home Projects */

#projects {
	display: block;
	margin: 0;
	padding: 40px 0 0 2%;
	width: 100%;
}

.project-sample {
	display: inline-block;
	width: 22%;
	margin: 0 2% 2% 0;
	padding: 0;
	vertical-align: top;
	text-align: center;
	font-weight: 300;
	font-size: 0px;
}

.project-sample img {
	width: 100%;
	padding-bottom: 6px;
}

.project-sign-in
{
	display: block;
	margin: 20px 0 20px 0;
	text-align: center;
	font-weight: 300;
	font-size: 16px;
}

.project-sign-in a
{
	display: inline;
	padding: 10px 25px;
	background: #434343;
    font-size: 15px;
    border-radius: 20px;

    /* font-family: "Source Serif 4" */
}

.project-sign-in a:hover
{
	background: #3fa9f5;
	color: #fff;
}


/* General */

a,
a.visted,
input.link {
	color: #bbb;
	text-decoration: none;
}

input.link {
	text-transform: uppercase;
}

a:hover,
input.link:hover,
#footer a:hover
{
	color: #3fa9f5;
}

.nobr 
{
	white-space: nowrap;
}

h1,
h2, 
h3
{
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 36px;
	font-weight: 100;
}

h1
{
    padding-right: 30px;
}

h2,
h3
{
	font-size: 24px;
	font-weight: 300;
	color: #fff;
	margin-bottom: 0;
	padding-bottom: 0;
}

h3
{
	font-size: 19px;
	margin-top: 20px;
}


p, li
{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 190%;
}

p.warning
{
    color: #FFAE52;
}

ul
{
	margin-top: -.9em;
}







/* Project Sample */

#project #projects 
{
	border-top: 10px solid #2d78ad;
	margin: 40px 0 10px 0;
	padding-top: 40px;
}

#project #hero 
{
	display: block;
	height: 10px;
	width: 100%;
	background: #2d78ad;
}

#project-content
{
	display: block;
	margin: 0 20%;
}

#project-content img
{
    -webkit-user-select: none; 
    -webkit-touch-callout: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;  
}

#project-content img.fullwidth
{
	width: 100%;
	max-width: 691px;
	margin: 20px 0;
	background-color: #bbb;
}

#project-content img.multiple
{
	margin-top: 0;
}

#project-content .hiddenimage
{
    display: block;
	width: 100%;
	max-width: 691px;
	margin: 0 0 20px 0;
	background-color: #444;
    color: #fff;
    height: 400px;
    line-height: 400px;
    text-align: center;
	font-size: 16px;
	font-weight: 100;
}


.nav-next-project, 
.nav-prev-project 
{
	display: inline-block;
	float: right;	
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 36px;
	font-weight: 100;
	position: relative;
	right: -.8em;
	top: -1px;
	margin: 0 0 0 -.8em;
}

.nav-prev-project 
{
	right: 0;
	left: -.8em;
	float: left;
	margin: 0 -.8em 0 0;
}


.project-sample a:hover img
{
	-webkit-filter: brightness(110%); /* Safari 6.0 - 9.0 */
	filter: brightness(110%);
}
.project-sample a:hover img.light 
{
	-webkit-filter: brightness(105%); /* Safari 6.0 - 9.0 */
	filter: brightness(105%);
}
.project-sample a:hover img.dark 
{
	-webkit-filter: brightness(120%); /* Safari 6.0 - 9.0 */
	filter: brightness(120%) saturate(2);
}




/* Project Case Study Media Queries */
@media all and (max-width: 1150px) {
	#project-content { margin: 0 20%; }
}

@media all and (min-width: 1000px) and (max-width: 1149px) {
	#project-content { margin: 0 20%; }
}

@media all and (min-width: 900px) and (max-width: 999px) {
	#project-content { margin: 0 15%; }
}

@media all and (min-width: 660px) and (max-width: 899px) {
	#project-content { margin: 0 10%; }
}

@media all and (min-width: 450px) and (max-width: 899px) {
	#project-content { margin: 0 10%; }
}

@media all and (max-width: 449px) {
	#project-content { margin: 0 3%; }
	
	.nav-next-project, 
	.nav-prev-project 
	{
        font-size: 34px;
        left: 0;
	}
}



/* Home and Project Nav Media Queries */

/* > 1300 */
/* 5 Project Column */
@media all and (min-width: 1300px) {
	.project-sample 
	{
		width: 17%;
		margin: 0 2% 2% 0;
	}
}


/* > 875 */
/* 4 Project Column */
@media all and (max-width: 1299px) and (min-width: 875px) {
	.project-sample 
	{
        width: 22%;
        margin: 0 2% 2% 0;
	}

}


/* 500 - 874 */
/* 3 Project Column */
@media all and (max-width: 874px) and (min-width: 500px) {
	.project-sample 
	{
		width: 30%;
		margin: 0 2% 3% 0;
	}
    /*
	#placer-box-1 { display: inline-block; }
	#placer-box-2 { display: inline-block; }
	#placer-box-3 { display: none; }
    */
}

/* < 659 */
/* 2 Project Column */
@media all and (max-width: 499px) {
	.project-sample 
	{
		width: 46%;
		margin: 0 2% 3% 0;
	}
}


/* 680 - 900 */
@media all and (max-width: 900px) and (min-width: 680px) {
	#hero 
	{
		line-height: 300px;
	}

	#hero-text
	{
		font-size: 40px;
    	height: 300px; 
	}

    #hero-tall
	{
		line-height: 400px;
	}

	#hero-text-tall
	{
		font-size: 40px;
    	height: 400px; 
	}
}

/* 570 - 680 */
@media all and (max-width: 680px) and (min-width: 570px) {
	#hero 
	{
		line-height: 275px;
	}

	#hero-text 
	{
		font-size: 36px;
    	height: 275px; 
	}

    #hero-tall
	{
		line-height: 325px;
	}

	#hero-text-tall
	{
		font-size: 36px;
    	height: 325px; 
	}
}

/* 450 - 569 */
@media all and (max-width: 569px) and (min-width: 450px) {
	#hero 
	{
		line-height: 220px;
	}

	#hero-text 
	{
		font-size: 34px;
    	height: 220px; 
	}

    #hero-tall 
	{
		line-height: 325px;
	}

	#hero-text-tall
	{
		font-size: 34px;
    	height: 325px; 
	}
}

/* < 450 */
@media all and (max-width: 449px) {
	#hero {
		line-height: 200px;
	}

	#hero-text 
	{
		font-size: 28px;
    	height: 200px; 
	}

    #hero-tall {
		line-height: 325px;
	}

	#hero-text-tall 
	{
		font-size: 28px;
    	height: 325px; 
	}

	/*
	.project-sample,
	.project-sign-in
	{
		font-size: 16px;
	}
	*/

	#logo-name {
		top: 13px;
		font-size: 22px;
	}
	#sign-in {
		/* top: 17px; */
	}
}

/* < 340 */
@media all and (max-width: 340px) {
	#hero-text, #hero-text-tall { font-size: 24px; }
}