/*  =Woo hoo Styles
  ------------------------------------------------------ */
@import url('fonts.css');

body {
	margin:0;
	background:#20282f none top left repeat-x;
	font:200 15px / 1 'Helvetica Neue', 'Helvetica', Arial, Sans-serif;
	color:#96a7b3;
}

.inside {
	padding:50px;
}
.clear { clear:both; }
.clear:after {
	display:block;
	width:100%;
	content:' ';
	clear:both;
	height:0px;
}
.alignleft {
	float:left;
}
.alignright {
  float:right;
}


a {
	color:#3c99ea;
	text-decoration:none;
	-o-transition:all .33s ease-in-out;
	-moz-transition:all .33s ease-in-out;
	-webkit-transition:all .33s ease-in-out;
}

a:hover {
	color:#AE9B1B;
}

::-moz-selection {
	color: #fff;
	color: rgba(255,255,255,.85);
	background: rgba(0,0,0,.20);
	}
::selection {
	color: #fff;
	color: rgba(255,255,255,.85);
	background: rgba(0,0,0,.20);
	}

h1, h2, h3, h4, h5 {
	font-family:'GothamMediumRegular', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	font-weight:400;
	text-transform:uppercase;
}

#header {
	border-left:7px solid #3c99ea;
	background:transparent url(../img/black_25.png) repeat;
	-o-transition:border-color .33s ease-in-out;
	-moz-transition:border-color .33s ease-in-out;
	-webkit-transition:border-color .33s ease-in-out;
}
#header:hover {
	border-left:7px solid #AE9B1B;
}

.links {
	position:fixed;
	z-index:10000;
	top:0;
	right:20px;
}
.link {
	background-color:#000;
	background-color:rgba(0,0,0,.50);
	background-position: center center;
	background-repeat:no-repeat;
	padding:17px 0;
	width:45px;
	display:block;
	float:left;
	margin:0 0 0 1px;
	-ms-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	
}
.link:hover {
	background-color:#3c99ea;
}
.link.twitter {
	background-image:url(../img/twitter_icon.png);
}
.link.dribbble {
	background-image:url(../img/dribbble_icon.png);
}
.link.email {
	background-image:url(../img/email_icon.png);
}

#content {
	border-left:7px solid #1F4C85;
}

#masthead {
	padding:20px 0 40px;
	width:1000px;
	height:300px;
}

.big_text {
	font:100 60px 'GothamLightRegular', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	color:#CBD8E5;
	text-transform:uppercase;
	letter-spacing:.15em;
	line-height:100px;
	text-align:right;
	width:600px;
	margin:0;
	float:left;
	display:none;
}

.big_text .ampersand {
	float:left;
	font-size:18px;
	color:#3c99ea;
	text-align:center;
	line-height:50px;
	background:#181f24;
	width:50px;
	margin:24px 19px 0 20px;
	letter-spacing:0;
	-ms-border-radius: 100px;
	-o-border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	
}
.byline {
	float:left;
	line-height:20px;
	text-transform:capitalize;
	color:#3c99ea;
	border-left:1px solid #181f24;
	margin:25px 0 0 20px;
	padding:68px 0 68px 45px;
	display:none;
	font:100 22px 'WisdomScriptAIRegular', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
}
.byline a {
	color:#3c99ea;
}


.section {
	background:#181e23;
	position:relative;
}
.section_title {
	font-size:14px;
	color:#303c46;
	border-bottom:1px solid #20282f;
	padding:0 0 15px 0;
	margin:0 0 25px 0;
}
.previewer {
	background: url('../img/preview_bg.png') no-repeat bottom center;
	width: 889px;
	height: 750px;
	position:relative;
	padding:70px 0 0 0;
	margin:0 auto;
}
.previewer_navigation a {
	display:block;
	width:24px;
	height:24px;
	position:absolute;
	background:transparent url(../img/preview_nav.png) no-repeat;
}
.previewer_navigation .project_next {
	background-position:center right;
	right:50px;
}
.previewer_navigation .project_prev {
	background-position:center left;
	left:50px;
}
.project_images_shadow {
	display:none;
	width:813px;
	z-index:1000;
	height:515px;
	position:absolute;
	left:50%;
	margin-left:-410px;
	top:210px;
	border:1px solid rgba(255,255,255, .10);
	-ms-box-shadow: inset 0 0 25px rgba(0,0,0,.75);
	-o-box-shadow: inset 0 0 25px rgba(0,0,0,.75);
	-moz-box-shadow: inset 0 0 25px rgba(0,0,0,.75);
	-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,.75);
	box-shadow: inset 0 0 25px rgba(0,0,0,.75);
}
.project_images {
	position:absolute;
	top:106px;
	left:36px;
}
.link_hover {
	background: url('../img/link_hover.png') no-repeat scroll top left;
	width: 150px;
	height: 150px;
	display:block;
	position:absolute;
	left:50%;
	margin-left:-75px;
	top:35%;
}
.project_images img {
	-o-transition:opacity .33s ease-in-out;
	-moz-transition:opacity .33s ease-in-out;
	-webkit-transition:opacity .33s ease-in-out;
}
.project_images a:hover img {
	filter:alpha(opacity=20);
	-o-opacity:.20;
	-ms-opacity:.20;
	-moz-opacity:.20;
	opacity:.20;
	
}
.project_titles {
	position:absolute;
	text-align:center;
	width:889px;
	top:-5px;
	font-size:24px;
	font-style:italic;
	font-weight:100;
	line-height:36px;
	letter-spacing:.1em;
}
.project_titles div {
	width:889px;
	left:50% !important;
	position:absolute;
	margin-left:-445px;
}

#colophon .section_content {
	padding:5% 5% 0 5%;  
}
#colophon img {
	border:10px solid #20282f;
	float:left;
	margin:0 5% 4% 0 ;
}
#colophon h3 {
	color:#CBD8E5;
	margin:25px 0 20px;
}
#colophon sup {
	font:100 29px 'Georgia', 'Times New Roman', Times, Serif;
	color:#fff;
	position:relative;
	top:10px;
	margin:0 4px 0 0 ;
}
#colophon p {
	line-height:23px;
	letter-spacing:.1em;
}
#colophon a {
	padding:0 0 1px 0;
}

#colophon a:hover {
	color:#AE9B1B;
	border-bottom:1px solid #AE9B1B;
}

#projects .third {
	float:left;
	width:19%;
	min-height:180px;
	margin:1%;
	padding:2%;
	background:#20282f;
	-ms-border-radius: 4px   ;
	-o-border-radius: 4px   ;
	-moz-border-radius: 4px   ;
	-webkit-border-radius: 4px   ;
	border-radius: 4px   ;
}
#projects p {
	line-height:23px;
	letter-spacing:.1em;
}

#audience .list {
	list-style:none;
	padding:0;
	float:left;
	width:23%;
	margin:0 5%;
}
#audience .list li {
	letter-spacing:.12em;
	white-space:pre;
	font:100 13px 'GothamLightRegular', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	line-height:30px;
}
#audience .list li:before {
	content:' - ';
	color:#3c99ea;
}

#footer {
	font-size:11px;
	text-align:center;
	color:#272f38;
	background:#151a1f;
}

#footer a {
	color:#303945;
	text-decoration:none;
}
#footer a:hover {
	color:#384452;
}

@media all and (max-width: 700px) {
	html, body {
		width:100%;
	}
	body {
		width:100%;
		overflow-x:hidden;
	}
	.links {
		right:5px;
	}
	.inside {
		padding:20px;
	}
	#masthead {
		width:auto !important;
		padding:0px 0 10px;
		height:auto;
	}
	.big_text {
		font-size:185%;
		float:none;
		width:100% !important;
		line-height:60px;
		text-align:left;
	}
	.big_text span {
		font-size:74%;
	}
	.big_text .ampersand {
		margin-top:5px;;
	}
	.byline {
		float:none;
		border-top:1px solid #181f24;
		border-left:none;
		margin:25px 0 0 0;
		padding:25px 0 0 0;
		display:none;
		text-align:center;
	}
	
	.previewer {
		background:none;
		width: 18em;
		height: 14em;
		padding:10px 0 0 0;
		margin:0 auto;
		position:relative !important;
	}
	.link_hover {
		display:none;
	}
	.previewer_navigation .project_next {
		right:20px;
		z-index:1000;
	}
	.previewer_navigation .project_prev {
		left:20px;
		z-index:1000;
	}
	.project_images_shadow { display:none; }
	.project_images {
		position:relative !important;
		top:30px;
		left:0;
	}
	.project_images a {
		width:100%;
	}
	.project_images img {
		width:98% !important;
		border:5px solid #20282f;
	}
	.project_titles {
		width:100% !important;
		z-index:100;
		top:-5px;
		font-size:16px;
	}
	.project_titles div {
		width:100% !important;
		left:0px !important;
		margin-left:0px !important;
	}
	
	#colophon img {
		max-width:34%;
		border-width:5px;
	}
	#colophon h3 {
		margin:0 0 5px;
		font-size:16px;
	}
	#colophon p {
		line-height:21px;
	}
	
	#projects .third {
		float:none;
		width:90%;
		margin-bottom:3%;
		min-height:100px;
		padding:5%;
		
	}
	#projects p {
		line-height:23px;
		letter-spacing:.1em;
	}
	
  	#audience .list {
		float:none;
		width:95%;
	}
}