/* Header */

html, body, #wrapper { 

	background-color: #f3f3f3; 
	width: 100%;
	
}

/* Navigation */

#nav {

	margin: 0 auto;
	width: 980px;
	position: relative;
	
}

#nav-left, #nav-right {

	margin: 0;
	position: absolute;
	top: 185px;
	padding: 0;
	width: 300px;
}

#nav-left { left: 0; }
#nav-right { right: 0; }

#nav-left li {

	float: right;
	display: inline-block;
	padding: 0 0 0 25px;
	
}

#nav-right li {

	float: left;
	display: inline-block;
	padding: 0 25px 0 0;

}

#nav li a {

	color: #fff;
	text-decoration: none;
	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 600; 
	font-style: normal;
	font-variant: small-caps;
	text-transform: lowercase;
	font-size: 14px;
	letter-spacing: 1px;
	opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s; 
	display: inline-block;
	position: relative;
	
}

#nav li a:hover { color: #baadbd; top: 1px; }

/* Logo */

#header {

	height: 290px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	top: 0;
	width: 100%;
	background-color: #f3f3f3;
	min-width: 980px;
	
}

#header-content {

	height: 280px;
	background-color: #1e1e1e; 
	display: block;
	margin: 0;
	position: relative;
	
}

#header-content h1 {

	margin: 0 auto;
	padding: 55px 0 0 0;
	width: 282px;
	height: 180px;
	position: absolute;
	left: 50%;
	margin-left: -141px;
	
}

#header-content h1 a {

	display: block;
	width: 282px;
	height: 180px;
	background: url(../images/logo.png) no-repeat;
	overflow: hidden;
	outline: 0;
	text-indent: -9999px;
	
}

.divider {

	height: 10px;
	background: url(../images/divider.gif) repeat;
	
}

/* Content */

#content {

	margin: 0 auto 0;
	position: relative;
	
}

#web-print { 

	width: 980px;
	height: 31px;
	background: url(../images/web-print.gif) no-repeat;
	margin: 0 auto 35px;
	text-indent: -9999px;
	
}

#intro-container {

	height: 420px;
	background-color: #fff;
	border-bottom: 1px solid #e6e6e6;
	min-width: 980px;
	
}

#intro {

	width: 980px;
	margin: 0 auto;
	padding-top: 50px;
	height: 370px;
	position: relative;
	overflow: hidden;
	
}

#intro-mpu {

	background: url(../images/mpu.png) no-repeat;
	width: 637px;
	height: 299px;
	position: absolute;
	bottom: -150px;
	right: 0;

}

#intro h4 {

	width: 285px;
	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 500; 
	font-style: italic;
	color: #67586b;
	font-size: 24px;
	margin-top: 50px;
	line-height: 40px;
	
}

#intro h5 {

	width: 285px;
	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 500; 
	font-style: italic;
	color: #ab9fad;
	font-size: 20px;
	margin: 15px 0 40px 0;
	
}

#intro .button {

	display: inline-block;
	padding: 10px 20px;
	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 600; 
	font-style: normal;
	font-variant: small-caps;
	text-transform: lowercase;
	text-decoration: none;
	letter-spacing: 2px;
	font-size: 14px;
	color: #fff;
	text-align: center;
	background-color: #1e1e1e;
	
}


#content-container {

	width: 980px;
	margin: 0 auto;
	padding-top: 40px;
	
}

/* Portfolio Grid */

#portfolio-grid .row figure {

	width: 280px;
	height: 195px;
	background: url(../images/figure.gif) no-repeat;
	margin: 0 40px 25px 0;
	float: left;
	display: block;
	font-family: 'Archer SSm A', 'Archer SSm B'; font-weight: 500; font-style: italic;
	font-size: 21px;
	padding: 10px;
	
}

#portfolio-grid figure:last-of-type { margin-right: 0 !important; }

.lt-ie9 #portfolio-grid .row figure { margin: 0 13px 0 13px !important; }

#portfolio-grid .row figure a {

	display: block;
	width: 280px;
	height: 180px;
	overflow: hidden;
	position: relative;
	
}

#portfolio-grid .row figure a img {

	display: block;
	width: 280px;
	height: 180px;
	position: absolute;
	z-index: 1;
	
}
	

#portfolio-grid .row figure a span {

	background: url(../images/zoom.png) 0 0 no-repeat;
	width: 280px;
	height: 180px;
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -9999px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s; 
	
}

#portfolio-grid .row figure a:hover span { background-position: 0 -180px; }

/* Services */

#services-container {

	background: url(../images/services.gif) #ab9fad repeat-x;
	margin: 50px 0 0 0;
	min-width: 980px;
	
}

div.design { background-color: #ab9fad !important; }
div.development { background-color: #988a9a !important; }
div.identity { background-color: #867988 !important; }

#services {

	width: 980px;
	padding: 40px 0;
	margin: 0 auto;
	position: relative;
	
}

#services ul {

	width: 980px;
	height: 96px;
	margin: -85px 0 0 0;
	padding: 0;
	position: absolute;
	
}

#services ul li {

	float: left;
	margin: 0;
	padding: 0;
	height: 96px;
	margin-right: 40px;
	width: 300px;
	text-align: center;
	list-style: none;
	position: relative;
	
}

#services ul li:last-of-type { margin-right: 0 !important; }

.lt-ie9 #services ul li { margin: 0 13px; }

#services ul li span.overlay {

	display: block;
	-moz-border-radius: 48px;
	-khtml-border-radius: 48px;
	-webkit-border-radius: 48px;
	border-radius: 48px;
	height: 96px;
	width: 96px;
	background-color: #67586b;
	opacity: 0;
	position: absolute;
	left: 50%;
	margin-left: -48px;
	top: 0;
	z-index: 1;
	transition: all 2s;
	-webkit-transition: all 2s; 
	
}

#services ul li.active span.overlay { opacity: 0.2; }

#services ul li a {

	display: block;
	position: absolute;
	top: 8px;
	left: 50%;
	margin-left: -40px;
	-moz-border-radius: 40px;
	-khtml-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	background-color: #67586b;
	height: 80px;
	width: 80px;
	z-index: 2;
	transition: all 0.7s;
	-webkit-transition: all 0.7s; 
	overflow: hidden;
	outline: 0;
	
}

#services ul li.active a {  background-color: #1e1e1e; }

#services ul li a:hover { background-color: #1e1e1e; }
#services ul li:hover span.overlay { opacity: 0.2; }

#services a span {

	width: 80px;
	height: 80px;
	display: block;
	text-indent: -9999px;
	
}

#services #design a span { background: url(../images/design.png) 50% 50% no-repeat; }	
#services #development a span { background: url(../images/development.png) 50% 50% no-repeat; }	
#services #identity a span { background: url(../images/identity.png) 50% 50% no-repeat; }	

.lt-ie9 #services-scroll { padding-top: 25px; }

#services-scroll div { display: none; }
#services-scroll div.active { display: block; }

#services-scroll h4 {

	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 500; 
	font-style: normal;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 6px;
	font-size: 28px;
	margin: 50px 0 20px;
	
}

#services-scroll p {

	width: 710px;
	margin: 0 auto;
	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 400; 
	font-style: italic;
	color: #dedbdf;
	font-size: 20px;
	text-align: center;
	line-height: 36px;
	margin-bottom: 25px;

}

/* Process */

#process-container {

	background-color: #1e1e1e;
	min-width: 980px;
	
}

#process {

	width: 980px;
	background: url(../images/process.png) no-repeat;
	margin: 0 auto;
	padding: 135px 0 25px;
	
}

#process ul {

	margin: 0;
	padding: 0;
	
}

#process li {

	float: left;
	width: 260px;
	list-style: none;
	background: url(../images/process-icons.png) no-repeat;
	padding-left: 140px;
	height: 120px;
	overflow: hidden;
	margin-bottom: 50px;
	
}

#process-design { background-position: 0 -140px !important; }
#process-develop { background-position: 0 -280px !important; }
#process-deploy { background-position: 0 -420px !important; }


#process li:nth-of-type(odd) { margin: 0 80px 50px 65px; }

#process h2 {

	margin: 25px 0 6px;
	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 500; 
	font-style: normal;
	text-transform: uppercase;
	color: #fff;
	font-size: 24px;
	letter-spacing: 5px;
	
}

#process p {

	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 500; 
	font-style: italic;
	font-size: 12px;
	line-height: 22px;
	margin: 0;
	color: #ab9fad;

}

/* Contact */

#contact-container {

	background-color: #171717;
	min-width: 980px;
	
}

#contact {

	width: 980px;
	margin: 0 auto;
	padding: 70px 0;
	
}

#contact h4 {

	font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B',helvetica,arial,sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	font-size: 28px;
	letter-spacing: 5px;
	text-align: center;
	text-transform: uppercase;
	margin: 0 0 30px 0;

}

#contact div {

	text-align: center;
	
}

#contact div span {

	display: inline-block;
	margin: 0 14px;
	height: 32px;
	padding-left: 50px;
	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 500; 
	font-style: normal;
	text-transform: lowercase;
	color: #fff;
	font-size: 16px;
	letter-spacing: 1px;
	
}

#contact div span.email { background: url(../images/email.gif) 0 0 no-repeat; }
#contact div span.tel { background: url(../images/tel.gif) 0 0 no-repeat; position: relative; top: -2px; }

#contact div span a {

	color: #fff;
	text-decoration: none;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	
}

#contact div span a:hover { color: #bea8c4; }

/* Copyright */

#copyright {

	background-color: #0e0e0e;
	min-width: 980px;
	width: 100%;
	text-align: center;
	padding: 35px 0;
	font-family: 'Archer SSm A', 'Archer SSm B',georgia,times new roman,serif;
	font-weight: 500; 
	font-style: normal;
	font-size: 10px;
	letter-spacing: 1px;
	color: #7d7d7d;
	
}

/* Scroll to Top */

#back-top {

	position: fixed;
	bottom: 20px;
	right: 40px;

}

#back-top a {

	width: 108px;
	display: block;
	text-align: center;
	font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B',helvetica,arial,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	outline: 0;
	
}

#back-top a:hover {

	color: #ab9fad;
	
}

#back-top span {
	width: 60px;
	height: 60px;
	display: block;
	margin: 0 auto 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	background: url(../images/top.png) #67586b 50% 50% no-repeat;
	opacity: 0.3;
	
}

#back-top a:hover span {

	opacity: 1;
	
}