/* Import other css */
@import url('reset.css');
@import url('comments.css');


/* GENERAL ------------------------------------------------------------*/

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

.clearfix{ clear:both; }

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


.wrapper{
	margin: 0 auto; 
	position: relative;
}

body{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
}



body p{
	margin-bottom: 21px;
}

body a{
	text-decoration: none;
	
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}



#logo{
	display: inline-block;
	padding-top: 40px;
	padding-bottom: 30px;
}

#logo:hover{ opacity: 0.8;}

h1,h2,h3,h4,h5,h6{
	font-family: Helvetica, Arial, sans-serif;
}

h1{ font-size: 48px;}

h2{ font-size: 36px; }

h3{ font-size: 24px; }

h4{ font-size: 21px; }

h5{ font-size: 18px; }

h6{ font-size: 14px; }

#main,
footer,
aside{ line-height: 1.5em; }


.wrapper {
	width: 940px;
}

.right{
	float: right;
}

.left{
	float: left;
}


.right:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.page-heading{
	text-align: left;
	margin-bottom: 15px;
	background: url(../img/div-line.png) repeat-x center center;
}


/* NAVIGATION ------------------------------------------------------------*/


nav{
	margin-top: 0px;
	height: 30px;
}

nav a{
	text-decoration: none;
}

#nav li{
	margin-right: 20px;
}

#nav>li>a{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20px;
	display: block;
	overflow: hidden;
	padding: 0px 0px 7px 0px;
}


/* HEADER ------------------------------------------------------------*/


.header-top{
	margin-top: 10px;
}

header .wrapper,
.footer-bottom{
	padding-top: 10px;
}

.header-top{
	margin-bottom: 50px;
	overflow: hidden;
}

.header-top .left{
	width: 50%;
	padding-top: 10px;
	float: left;
}

.header-top .right{
	width: 50%;
	float: right;
}



/* CONTACT CONTENT ------------------------------------------------------------*/

#contactForm{
	position: relative;
	width: 700px;
	float: left;
	margin-right: 20px;
}


/* MAIN ------------------------------------------------------------*/

#main{
	margin-bottom: 50px;
}

/* PORTFOLIO ------------------------------------------------------------*/

.portfolio-thumbs{
	width: 960px;
	padding-top: 0px;
}

.portfolio-thumbs figure{ width: 300px; }

.portfolio-thumbs figure{
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	line-height: 1.2em;
}

.portfolio-thumbs figure .thumb{
	display: block;
}

.portfolio-thumbs figure img{
	max-width: 100%;
	opacity: .999;
		
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.portfolio-thumbs figure a:hover img{
	opacity: 0.1;
	line-height: 0em;
}

.portfolio-thumbs figcaption{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.portfolio-thumbs figcaption strong,
.portfolio-thumbs figcaption span,
.portfolio-thumbs figcaption em{
	display: block;
	margin-left: 17px;
	margin-right: 17px;
}

.portfolio-thumbs figcaption strong{ 
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 7px;
	margin-top: 17px;
}

.portfolio-thumbs figcaption span{ 
	font-size: 11px;
	margin-bottom: 7px;
}

.portfolio-thumbs figcaption em{ 
	font-size: 11px;
	font-weight: bold;
	font-style: normal;
	position: absolute;
	bottom: 10px;
}


/* modernizr fix for ie 8 and earlier */

.no-opacity .portfolio-thumbs figcaption{
	display: none;
}

.no-opacity .portfolio-thumbs figure:hover figcaption{
	display: block;
}

.portfolio-thumbs figure .opener{
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 999;
}

.opacity .portfolio-thumbs figure .opener{ display: none; }

/* PROJECT ------------------------------------------------------------*/


.project-heading{
	margin: 40px 0px 40px 0px;
}


.project-heading h2{
	float: left;
	line-height: 40px;
}

.project-heading .launch{
	display: block;
	float: left;
	text-decoration: none;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}


.project-description{
	float: left;
	width: 700px;
	margin-bottom: 70px;
	margin-right: 20px;
}

.project-info{
	float: left;
	width: 220px;
	margin-bottom: 70px;
}

.project-info strong{ font-weight: bold; }

.project-pager{
	overflow: hidden;
	margin: 0px;
	padding-bottom: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 24px;
}

.project-pager a{
	text-decoration: none;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.project-pager a:hover{
	text-decoration: none;
}

.project-pager .prev-project{
	float: left;
}

.project-pager .next-project{
	float: right;
}


/* CONTACT ------------------------------------------------------------*/


#map_canvas{
	display: block;
	height: 300px;
	width: 100%;
	margin-bottom: 24px;
	margin-top: 40px;
}

.map-content{
	margin-bottom: 60px;
	padding-bottom: 40px;
	border-bottom: 1px solid #ccc;
}

.address-block li{
	padding-left: 20px;
}


/* FOOTER ------------------------------------------------------------*/


.footer-bottom{
	margin-top: 10px;
}

footer .wrapper,
.footer-bottom{
	padding-top: 10px;
}



/* FOOTER BOTTOM ------------------------------------------------------------*/

.footer-bottom{
	margin-bottom: 50px;
	overflow: hidden;
}

.footer-bottom .left{
	width: 100%;
	padding-top: 10px;
	float: left;
}