/* 
	Resets
	------
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, q, small, strike, strong, sub, sup, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, figure, figcaption, hgroup,
footer, header, nav, section, video, object {
	display: block;
}

body {
	line-height: 1;
}

a img {border: 0;}

figure {position: relative;}
figure img {width: 100%;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul{
	list-style: none;
}


/*GENERAL*/

.clear{
	clear:both;
}

.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

/*TYPOGRAPHIC PRESETS*/

@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('../fonts/League_Gothic-webfont.eot');
	src: local('☺'), url('../fonts/League_Gothic-webfont.woff') format('woff'), url('../fonts/League_Gothic-webfont.ttf') format('truetype'), url('../fonts/League_Gothic-webfont.svg#webfontg1D0kvjx') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Calluna';
	src: url('../fonts/calluna-regular-webfont.eot');
	src: local('☺'), url('../fonts/calluna-regular-webfont.woff') format('woff'), url('../fonts/calluna-regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


body {
	font-size: 100%;
	font-family: Calluna, Georgia, 'Times New Roman', serif ;
	line-height: 1.5em;
	color:#27190a;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'LeagueGothicRegular', 'Gill Sans', 'Lucida Grande', Trebuchet, sans-serif;
	text-transform: uppercase;
	font-weight: normal;	
	color: rgba(39, 25, 10, .85);
}

a{
	color:#f55d06;
	/*color: #00A8A7;*/
	text-decoration:none;
	-webkit-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
		-moz-transition:all 0.5s ease-in-out;
}

a:hover{
	color:#f57930;
	border-bottom:1px dotted #f57930;
}

a:focus {
	outline: 1px dotted invert;
}

/*LAYOUT*/

html, body{
	height:100%;
}

body{
	background: rgb(234,226,216) url(../img/bg.jpg) repeat left top;
	width: 100%;
}

#wrapper{
	min-height: 100%;
	height: auto;
	margin-bottom: -52px;
}

#content{
	width: 960px;
	margin: 0 auto 40px;
}

.push{
	height: 51px;
}


/*Generic classes*/

.action-button{
	display:block;
	margin-top: 20px;
	text-decoration: none;
	background-color: rgba(248,94,4,0.85);
	font-family: 'LeagueGothicRegular', Impact, Trebuchet, sans-serif;
	text-transform: uppercase;
	font-size: 1.9em;
	color: rgb(234,226,216);
	text-align: center;
	padding: 10px;
	-moz-border-radius: 3px;
		border-radius: 3px;
	-webkit-transition:all 0.7s ease-in-out;
		-o-transition:all 0.7s ease-in-out;
			-moz-transition:all 0.7s ease-in-out;
}

.action-button:hover{
	color:rgb(234,226,216);
	border-bottom:none;
	background-color:rgba(245,121,48,0.95);		
}



/*Header*/

header{
	height: 90px;
	width: 960px;
	background: transparent url(../img/bg-nav.png);
	overflow: hidden;
	margin: 0 auto;
}

header h1{
	float: left;
	padding: 10px 0;
}

header h1 a:hover{
	border:none;
}

nav{
	float: right;
	display: inline;
}

nav li{
	display: inline-block;
	font-family: 'LeagueGothicRegular', Impact, Trebuchet, sans-serif;
	text-transform: uppercase;
	font-size: 1.5em;
	letter-spacing: -0.01em;
	margin: 0 10px;
}


* html nav li { display: inline; zoom:1;}
*+html nav li { display: inline; zoom:1;}


nav li a{
	text-decoration: none;
	color: rgba(54,40,32,0.9);
	padding-top: 51px;
	display: block;
	-webkit-transition:none;
		-o-transition:none;
			-moz-transition:none;
				transition:none;
}

nav li.services a{
	background: url(../img/services-nav.png) no-repeat center 10px;
}

nav li.portfolio a{
	background: url(../img/portfolio-nav.png) no-repeat center 10px;
}

nav li.about a{
	background: url(../img/about-nav.png) no-repeat center 10px;
}

nav li.contact a{
	background: url(../img/contact-nav.png) no-repeat center 10px;
}

nav li a:hover{
	border: none;
	background-position: center -70px;
}

nav li.active{
	background-position: center -70px;
}


/*Content*/

#intro{
	margin-top: -10px;
	text-align: center;
	position: relative;
	height: 400px;
	background: url(../img/header-bottom-shadow.png) no-repeat bottom center;
}

#intro h1{
	opacity:0.9;
}

#intro h1 img{
	opacity: 0.95;
}

#intro h2{
	position: absolute;
	top: 150px;
	left: 410px;
	color: #f55d06;
	text-align: left;
	font-size: 2.2em;
	text-transform: none;
	/*text-shadow:0 1px #f2eee9;*/
	text-shadow:0 1px rgba(255,255,255,.5);
}

#intro p{
	position: absolute;
	top: 185px;
	left: 410px;
	width:415px;
	text-align: left;
	font-size: 1.2em;
	font-style: italic;
	line-height: 1.6em;
	color: #6b441b;
	text-shadow:0 1px #f2eee9;
	text-shadow:0 1px rgba(255,255,255,.5);
}

#recent-projects h2, #services h2, #hire-us h2{
	font-size: 2.25em;
	margin-bottom: 20px;
}

#recent-projects{
	margin-bottom: 35px;
}

#recent-projects ul{
	padding: 0 10px;
}

#recent-projects li{
	display: inline-block;
}

* html #recent-projects li { display: inline; zoom:1;}
*+html #recent-projects li { display: inline; zoom:1;}


#recent-projects li:nth-child(2){
	margin: 0 13px;
}

#recent-projects li a{
	display: block;
	text-decoration: none;
	width: 300px;
	background: url(../img/recent-projects-shadow.png) no-repeat 5px 211px;
	margin-bottom: 10px;
}

#recent-projects li a:hover{
	border:none;
	color:#f55d06;
}

#recent-projects li a img{
	width: 290px;
	padding: 5px;
	background: rgba(255,255,255,.8);
	border: 1px solid rgb(201,196,181);
	filter:alpha(opacity=100);
	opacity: 1;
	-webkit-transition:all 0.3s ease-in-out;
		-o-transition:all 0.3s ease-in-out;
			-moz-transition:all 0.3s ease-in-out;
}

#recent-projects li a:hover img{
	filter:alpha(opacity=60);
	opacity: .6;
}

#recent-projects li a h3{
	font-size: 1.7em;
	text-align: center;
	text-transform: none;
	text-shadow: 0 1px #F2EEE9;
	padding-top:5px;
	color: #A89072;
}

#recent-projects li a:hover h3{
	color:#f55d06;
}

#services{
	float: left;
	width: 630px;
	margin-right:20px;
}

#services ul{
	margin:25px 0 10px;
	overflow:hidden;
}

#services li{
	float: left;
	width: 190px;
	margin-bottom:10px;
	padding-left: 17px;
	background: url(../img/check1.png) no-repeat left top;
}

#services li:nth-child(3n+2){
	margin-left: 10px;
}

#services li:nth-child(3n){
	width: 155px;
	margin-left: 10px;
}

#services li:last-child{
	background: none;
	padding-left: 5px;
	font-family: 'LeagueGothicRegular', 'Gill Sans', 'Lucida Grande', Trebuchet, sans-serif;
	text-transform: uppercase;
	font-size: 1.5em;
}

/*#services li:before{
	content: "\2713";
	background-color: rgba(248, 94, 4, 0.85);
	width: 16px;
	height: 18px;
	padding-left:2px;
	line-height:18px;
	font-size:12px;
	float:left;
	margin:0 8px 0 0;
	text-align: center;
	border: 2px solid  rgb(232,232,232);
	color:  rgb(232,232,232);
	-moz-border-radius:50px;
		-webkit-border-radius: 50px;
			border-radius: 50px;
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
			box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
	-webkit-background-clip: padding-box;
}*/

#services li a{
	-webkit-transition: none;
}

#services li a:hover{
	border-bottom: none;
}

#hire-us{
	float: left;
	width: 310px;
}


/*Footer*/

footer{
	background-color: rgb(50,33,16);
	border-top: 1px solid rgb(23,17,12);
	position: relative;
	color: rgb(168,144,114);
	overflow: hidden;
	height: 51px;
}

footer:before{
	content: "";
	display: block;
	background: rgba(102,83,62);
	position: absolute;
	height: 1px;
	left: 0;
	top: 0;
	width: 100%;
}

footer #footer-content{
	width: 960px;
	margin: 10px auto;
	overflow: hidden;
}

footer small{
	float: left;
	padding-top: 3px;
	font-size: 0.9em;
}

footer small a{
	color: rgb(168,144,114);
}

footer #contact{
	float: right;
}

footer #contact li{
	display: inline-block;
	padding-right: 5px;
}

* html #contact li { display: inline; zoom:1;}
*+html #contact li { display: inline; zoom:1;}


footer #contact li:last-child{
	padding-right: 0;
}

footer #contact li a{
	color: #a89072;
	opacity: .8;
	filter:alpha(opacity=80);
	text-indent: -9999px;
	display: inline-block;
	width: 30px;
	height: 30px;
}

* html #contact li a{ display: inline; zoom:1;}
*+html #contact li a{ display: inline; zoom:1;}

footer #contact li.email a{
	background: url(../img/email.png) no-repeat left top;
}

footer #contact li.twitter a{
	background: url(../img/twitter.png) no-repeat left top;
}

footer #contact li a:hover{
	border: none;
	opacity: 1;
}


/* 
	Portfolio
	---------
*/

#portfolio #intro{
	height: 200px;
}

#portfolio p{
	margin-bottom: 1.5em;
}

#portfolio article{
	background: url(../img/hr.png) no-repeat center bottom;
	padding-bottom: 40px;
	overflow: hidden;
	margin:40px 0;
	zoom: 1;
}

*+html #portfolio article{
	position: r;
}

#portfolio article:last-of-type{
	background-image:none;
	padding-bottom: 0;
}

#portfolio .description{
	float: left;
	width: 330px;
}

#portfolio article:nth-child(2n+1) .description{
	float:right;
}

#portfolio article h2{
	font-size: 2.25em;
	text-align: right;
	line-height:1em;
}

#portfolio article .services{
	font-size: 1.3em;
	text-align: right;
	font-style: italic;
	color: #a89072;	
	margin-bottom: 20px;
	border-bottom: 1px dashed #a89072;
	padding-bottom: 5px;
	padding-right: 3px;
}

#portfolio article p{
	margin-bottom: 1em;
}

#portfolio .screenshot{
	background: url(../img/screenshot-shadow.png) no-repeat center bottom;
	width: 570px;
	float: right;
	padding-bottom: 15px;
}

#portfolio article:nth-child(2n+1) .screenshot{
	float:left;
}

#portfolio .main-screenshot{
	border: 1px solid #C9C4B5;
	display: block;
}

#portfolio .main-screenshot img{
	display: block;
	background-color: #ccc;
	border: 10px solid rgba(255, 255, 255, 0.8);
}


/* 
	Services
	--------
*/


#about #intro{
	height: 200px;
}

#about #about-us{
	overflow: hidden;
}

#about #services-list h2{
	font-size: 2.25em;
	letter-spacing: -0.01em;
	line-height:1em;
	margin-bottom: 10px;
}

#about #services-list li{
	margin: 20px 0;
	min-height: 205px;
	padding:0 0 10px 260px;
}

#about #services-list li.ux{
	background: url(../img/services-ux.png) no-repeat left top,
				url(../img/hr.png) no-repeat center bottom;
	margin-top: 40px;
}

#about #services-list li.design{
	background: url(../img/services-design.png) no-repeat left top,
				url(../img/hr.png) no-repeat center bottom;
}

#about #services-list li.frontend{
	background: url(../img/services-frontend.png) no-repeat left top,
				url(../img/hr.png) no-repeat center bottom;
}

#about #services-list li.branding{
	background: url(../img/services-branding.png) no-repeat left top,
				url(../img/hr.png) no-repeat center bottom;
}

#about #services-list li.management{
	background: url(../img/services-management.png) no-repeat left top;
	margin-bottom: 0;
	padding-bottom: 0;
}

#about #services-list li p{
	margin-bottom: 5px;
}



/* 
	About us
	--------
*/

#about #about-us article{
	margin: 20px 20px 0 0;
	float: left;
	width: 436px;
	background: rgba(255,255,255,0.3);
	padding: 15px 20px 20px 12px;
	border: 1px solid #dedbd2;
	border-bottom: 2px solid #c2bcab;
	min-height: 380px;
	-moz-border-radius: 10px;
		border-radius:10px;
}

*+html #about #about-us{
	position: relative;
	zoom: 1;
}

#about #about-us article:last-child{
	margin-right: 0;
}

#about #about-us article header{
	background: none;
	overflow: hidden;
	height: 190px;
	width: auto;
}
 
#about #about-us article img{
	float: left;
	margin-right: 10px;
}


#about #about-us hgroup{
	padding-top: 12px;
	margin-bottom: 10px;
}

#about #about-us article h3{
	font-size: 2.5em;
	margin-bottom: 0.3em;
}

#about-us article h4{
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: bold;
	text-transform: none;
	line-height: 1.5em;
	color: rgba(39, 25, 10, 0.8);
}

#about-us .social li{
	display: inline-block;
}

* html #about-us .social li { display: inline; zoom:1;}
*+html #about-us .social li { display: inline; zoom:1;}

#about-us .social li a{
	text-indent: -9999px;
	background: url(../img/about-us-icons.png) no-repeat left bottom;
	width: 29px;
	height: 30px;
	display: inline-block;
	-webkit-transition: none;
}


* html #about-us .social li a{ display: block; zoom:1;}
*+html #about-us .social li a{ display: block; zoom:1;}


#about-us .social li a:hover{
	border: none;
}

#about-us .social li.email a:hover{
	background-position: left 1px;
}

#about-us .social li.twitter a{
	background-position: -30px bottom;
}

#about-us .social li.twitter a:hover{
	background-position: -30px 1px;
}

#about-us .social li.dribbble a{
	background-position: -60px bottom;
}

#about-us .social li.dribbble a:hover{
	background-position: -60px 1px;
}

#about-us .social li.tumblr a{
	background-position: -90px bottom;
}

#about-us .social li.tumblr a:hover{
	background-position: -90px 1px;
}

#about-us .social li.forrst a{
	background-position: -120px bottom;
}

#about-us .social li.forrst a:hover{
	background-position: -120px 1px;
}

#about-us .social li.linkedin a{
	background-position: -150px bottom;
}

#about-us .social li.linkedin a:hover{
	background-position: -150px 1px;
}

#about-us .social li.slideshare a{
	background-position: -180px bottom;
}

#about-us .social li.slideshare a:hover{
	background-position: -180px 1px;
}

#about-us .description{
	padding-left: 8px;
}

#about-us .description p{
	margin-bottom: 5px;
}

/* 
	Contact
	-------
*/

#contact #intro{
	height: 200px;
}

#main-contact{
	float:left;
	margin:20px 20px 0 0;
	width:588px;
	background: rgba(255,255,255,0.3);
	padding: 20px 20px 0;
	border: 1px solid #dedbd2;
	border-bottom: 2px solid #c2bcab;
	-moz-border-radius: 10px;
		border-radius:10px;
}

#main-contact fieldset{	
	margin-bottom: 25px;
}

#main-contact fieldset.email{
	float: left;
	margin-right: 20px;
}

#main-contact fieldset.tel{
	float: left;
}

#main-contact fieldset.email input, #main-contact fieldset.tel input{
	width: 266px;
}

#main-contact label{
	text-align: left;
	font-weight: bold;	
	display:block;
	margin-bottom: 5px;
}

#main-contact label span{
	font-weight: normal;
	font-style: italic;
}

#main-contact input, #main-contact select{
	width: 568px;
	padding: 10px 8px;
	border: 1px solid rgb(202,196,186);
	background-color: rgb(237,229,218);
	font-size: 1em;
	background-image: -moz-linear-gradient(0% 12% 90deg, rgb(237,229,218), rgb(204,194,179));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(rgb(237,229,218)));
	-moz-border-radius: 5px;
		border-radius: 5px;
}

 #main-contact select{
 	width: auto;
 	height: 40px;
 	font-size: 1em;
 	padding: 10px;
 	margin-left: 10px;
 }
 
#main-contact textarea{
 	width: 568px;
 	padding: 10px 8px;
 	border: 1px solid rgb(202,196,186);
 	background-color: rgb(237,229,218);
 	font-size: 1em;
 	background-image: -moz-linear-gradient(0% 5% 90deg, rgb(237,229,218), rgb(204,194,179));
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 5%, from(#999), to(rgb(237,229,218)));
 	-moz-border-radius: 5px;
 		border-radius: 5px;
 }

#main-contact input:focus, #main-contact select:focus, #main-contact textarea:focus{
	background-image: none;
	outline: none;
}

#main-contact input[type="submit"]{
	float: right;
	width: auto;
	cursor: pointer;
	background-image: none;
	background-color: #f85e06;
	border: 1px solid rgba(255,255,255,0.4);
	font-family: 'LeagueGothicRegular', Impact, Trebuchet, sans-serif;
	font-size: 1.9em;
	color: #ede5da;
	padding: 0 20px;
	-moz-border-radius: 5px;
		border-radius: 5px;
	-webkit-appearance: none;
	-webkit-transition:all 0.7s ease-in-out;
		-o-transition:all 0.7s ease-in-out;
			-moz-transition:all 0.7s ease-in-out;
}

#main-contact input[type="submit"]:hover{
	color:rgb(234,226,216);
	background-color:rgba(245,121,48,0.95);		
}

#main-contact .placeholder{
	color: #aaa;
}


#main-contact .feedback li{
	color: #ff0000;
	background: url(../img/error-icon.png) no-repeat left top;
	padding-left: 30px;
	font-weight: bold;
	margin-bottom: 10px;
}

.success{
	background: url(../img/ok-icon.png) no-repeat left top;
	padding-left: 40px;
	font-weight: bold;
	height: 30px;
	padding-top: 5px;
}

.error{
	color: #ff0000;
	font-weight: bold;
}

#alternative-contact{
	float:right;
	width: 310px;
	margin-top: 20px;	
}

#alternative-contact li{
	background: url(../img/contact-icons.png) no-repeat left top;
	height: 29px;
	padding-top: 1px;
	padding-left: 35px;
	margin: 10px 0;
	font-weight: bold;
	font-size: 1.1em;
	font-family: Trebuchet, Arial, sans-serif;
}

#alternative-contact li a{
	color:#27190a;
}

#alternative-contact li a:hover{
	border: none;
}

#alternative-contact li.tel{
	background-position: left -31px;
}

#alternative-contact li.twitter{
	background-position: left -61px;
}