/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Fonts 
------------------------------------------------------------*/

/* Base
------------------------------------------------------------*/

/* Base Type Styles Using Modular Scale ---------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td { margin: 0; padding: 0; font-size: 14px; }

p { font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-size: 14px; line-height: 1.6; margin-bottom: 17px; }

h1, h2, h3, h4, h5, h6 { font-family:  Helvetica, Arial, sans-serif; font-weight: bold; text-rendering: optimizeLegibility; line-height: 1.1; margin-bottom: 20px; margin-top: 0; }

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; }

h1 { font-size: 38px; }
h2 { font-size: 34px; }
h3 { font-size: 23px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }
hr { border: solid #000; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }

.subheader { line-height: 1.3; color: #6f6f6f; font-weight: 300; margin-bottom: 17px; }

em, i { font-style: italic; line-height: inherit; }

strong, b { font-weight: bold; line-height: inherit; }

small { font-size: 60%; line-height: inherit; }

/* Lists ---------------------- */
ul, ol { font-size: 14px; font-family: Helvetica, Arial, sans-serif; line-height: 1.6; margin-bottom: 17px; list-style-position: inside;margin-left: 17px; }

ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; }

.content ul {
	margin-left: 0;	
}

.content ul li {
	background: url(../images/bullet.gif) no-repeat 0 6px;	
	padding: 0 0 0 14px;
}
ul.square, ul.circle, ul.disc { margin-left: 17px; }

ul.square { list-style-type: square; }

ul.square li ul { list-style: inherit; }

ul.circle { list-style-type: circle; }

ul.circle li ul { list-style: inherit; }

ul.disc { list-style-type: disc; }

ul.disc li ul { list-style: inherit; }

ul.no-bullet { list-style: none; }

ul.large li { line-height: 21px; }

ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }

/* Blockquotes ---------------------- */
blockquote, blockquote p { line-height: 1.5; color: #6f6f6f; }

blockquote { margin: 0 0 17px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }

blockquote cite { display: block; font-size: 13px; color: #555555; }

blockquote cite a, blockquote cite a:visited { color: #555555; }

abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222222; border-bottom: 1px solid #ddd; cursor: help; }

abbr { text-transform: none; }

/* Links ---------------------- */

a { color: #000; text-decoration: none; line-height: inherit; }

a:hover { opacity: .8; }

a:focus { color: #ef6e4b; outline: none; }

p a, p a:visited { line-height: inherit; } 


/* Structure 
------------------------------------------------------------*/
body {
	width  : 100%;
	height : 100%;
}


body {
	font-family: 'Syncopate', sans-serif;
	color: #000;
	background: #fff;
	width  : 100%;
	height : 100%;
	margin: 0 auto;
	min-width: 960px;
	padding: 0;
	overflow-x: hidden;
}


.page {
	background: #fff;
	width: 960px;
	margin: 0 auto;
	padding: 10px 0;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
	
}

.aside {
	float: left;
	width: 210px;	
}

.main {
	float: right;
	width: 	740px;
}

.logo {
	margin: 20px 0 10px 0;	
}

.social {
	overflow: hidden;	
	margin: 0 0 20px;
}

.social ul {
	margin: 0;
	padding: 0;	
}

.social li {
	float: left;
	display: inline-block;
	list-style: none;
	padding: 0;
	margin: 0 5px 0 0;	
}

.social a {
	display: block;
	width: 26px;
	height: 26px;
	overflow: hidden;
	text-indent: -9999px;	
}

.icon-email a {
	background: url(../images/icon-social.png) no-repeat 0 0;
}

.icon-linkedin a{
	background: url(../images/icon-social.png) no-repeat -26px 0;
}

.nav {
	overflow: hidden;
	float: right;
	margin: 0 0 10px;
	width: 100%;

}

.inner .nav {
	margin: 0 0 30px;	
}

.nav ul {
	margin: 0;
	padding: 0;	
}

.nav li {
	float: left;
	display: inline-block;
	padding: 13px 20px;
	margin: 0;
	list-style: none;
	line-height: 1;	
}

.nav li:first-child {padding-left: 0;}
.nav li:last-child {padding-right: 0;}

.nav a {
	color: #9c867a;
	font-size: 15px;
	text-transform: uppercase;
	padding: 0 ;
	display: block;
	border-bottom: 1px solid #52575b;
		
}


.about .nav .selected a {color: #cad22b; border-bottom-color: #cad22b;}
.branding .nav .selected a {color: #cad22b; border-bottom-color: #cad22b;}
.contact .nav .selected a {color: #8dc63f; border-bottom-color: #8dc63f;}
.interactive .nav .selected a {color: #f7941f; border-bottom-color: #f7941f;}
.marketing .nav .selected a {color: #017cb6; border-bottom-color: #017cb6;}
.print .nav .selected a {color: #f7941f; border-bottom-color: #f7941f;}


.nav-2 {
	width: 100%;
	position: relative;
	clear: both;
	height: 540px;
	margin: 0 0 10px;

}

.nav-2 ul {
	margin: 0;
	padding: 0;	
}

.nav-2 li {
	display: inline-block;
	padding: 0;
	margin: 0;
	list-style: none;	
}

.nav-2 a {
	text-indent: -9999px;
	display: block;
	position: absolute;
		
}

.nav-2 .nav-about a { left: 202px; top: 0; background: url(../images/nav-about.jpg) no-repeat 0 0; width: 76px; height: 543px;} 
.nav-2 .nav-about a:hover { background: url(../images/nav-about-h.jpg) no-repeat 0 0;} 

.nav-2 .nav-print a { left: 0; top: 0; background: url(../images/nav-print.jpg) no-repeat 0 0; width: 191px; height: 368px;} 
.nav-2 .nav-print a:hover { background: url(../images/nav-print-h.jpg) no-repeat 0 0; }  
  
.nav-2 .nav-branding a { left: 288px;top: 159px;background: url(../images/nav-branding.jpg) no-repeat 0 0; width: 164px; height: 382px;}   
.nav-2 .nav-branding a:hover { background: url(../images/nav-branding-h.jpg) no-repeat 0 0;}   


.nav-2 .nav-marketing a { right: 0; top: 0; background: url(../images/nav-marketing.jpg) no-repeat 0 0; width: 455px; height: 148px;} 
.nav-2 .nav-marketing a:hover { background: url(../images/nav-marketing-h.jpg) no-repeat 0 0;}
 
.nav-2 .nav-interactive a { right: 0; top: 158px; background: url(../images/nav-interactive.jpg) no-repeat 0 0; width: 278px; height: 382px;}
.nav-2 .nav-interactive a:hover { background: url(../images/nav-interactive-h.jpg) no-repeat 0 0; } 
   
.nav-2 .nav-contact a { left: 0; top: 378px; background: url(../images/nav-contact.jpg) no-repeat 0 0; width: 191px; height: 163px;}  
.nav-2 .nav-contact a:hover {background: url(../images/nav-contact-h.jpg) no-repeat 0 0;}


.footer {
	clear: both;
	overflow: hidden;
}

.footer ul {
	padding: 0;
	margin: 0;
	float: right;	
}

.footer li {
	float: left;
	border-right: 1px solid #000;	
	margin: 10px 0;
	padding: 0 10px;
	display: inline-block;
	color: #000;
	font-size: 11px;
}
.footer li:last-child {border: none; padding-right: 0;}

.footer a {
	color: #000;	
}

.content {
	width: 100%;
	clear: both;
	overflow: hidden;	
}

/* -- MISC -- */
.col_2 {
	float: left;
	width: 48%;	
}

.col_2.last {float: right;}


/* Forms -- */

.webform {
	overflow: hidden;	
	clear: both;
}
.row {
	margin: 0 0 10px;
	overflow: hidden;
}

.input-1 {
	background: none;
	border: none;
	border-bottom: 1px solid #9c867a;
	padding: 5px;
	width: 100%		
}


/* -- About -- */

.content-header  {
	margin: 0 0 30px;	
}
.content-header img {
	position: relative;
	z-index: 1;	
}
.h-about {
	background: url(../images/header-about.gif) no-repeat 0 0;
	height: 55px;
    position: relative;
    text-indent: -9999px;
    width: 171px;
    z-index: 2;
	margin: -30px 0 0 30px;

}

/* -- Contact -- */

.h-contact {
	background: url(../images/header-contact.gif) no-repeat 0 0;
	height: 55px;
    position: relative;
    text-indent: -9999px;
    width: 215px;
    z-index: 2;
	margin: -330px 0 0 147px;

}

.contact-col {
	float: right;
	width: 410px;	
}

/* -- Interactive -- */

.h-interactive {
	background: url(../images/header-interactive.gif) no-repeat 0 0;
	height: 55px;
    text-indent: -9999px;
    width: 253px;
	margin: 15px 0 0 15px;

}

/* -- Print -- */

.h-print {
	background: url(../images/header-print.gif) no-repeat 0 0;
	height: 55px;
    text-indent: -9999px;
    width: 127px;
	margin: 15px 0 0 85px;

}


/* -- Branding -- */

.h-branding {
	background: url(../images/header-branding.gif) no-repeat 0 0;
	height: 55px;
    text-indent: -9999px;
    width: 177px;
	margin: 15px 0 0 75px;

}

/* -- Marketing -- */

.h-marketing {
	background: url(../images/header-marketing.gif) no-repeat 0 0;
	height: 55px;
    text-indent: -9999px;
    width: 370px;
	margin: 15px 0 0 15px;

}

/* -- Portfolio Items --*/

.portfolio-header {
	position: absolute;
	z-index: 2;
}
.item {
	width: 177px;
	height: 177px;
	overflow: hidden;	
    margin: 0 10px 10px 0;
    overflow: hidden;
    position: relative;
	z-index: 1;
	float: left;
}

.item.first {margin-left: -80px;}

.item.last {
	margin-right: 0;	
}


.overlay {
    background: none repeat scroll 0 0 rgba(128, 130, 133, 0.90);
    color: #000;
    height: 100%;
    padding: 0;
    position: absolute;
    top: 100%;
    transition-duration: 0.5s;
    width: 100%;
    z-index: 1;
}

.overlay a {
    display: block;
    height: 100%;
    width: 100%;
	color: #000;
	margin: -50% 0 0 0;
	
}

.overlay div {
	position: absolute;
	top: 5%;
	left: 5%;	
	font-size: 11px;
	text-align: center;
	width: 90%;
}

.overlay strong {
	display: block;
}

.item:hover > .overlay {
    top: 50%;
    transition-duration: 0.2s;
}