body {
	padding: 0;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	color: #FFF;
	background: #F5F5F5;
}

#pagewrap {
	height: 100%;
	width: 100%;
	text-align: center;
}


/*Header Section*/

#headerwrap {
	width: 100%;
	background: #FFF;
	text-align: center;
}

#header900 {
	width: 900px;
	margin: auto;
	height: 190px;
}

#logo {
	float: left;
	font-weight: 400;
	font-size: 40px;
	color: #262626;
	font-family: 'Lato', sans-serif;
	margin-top: 100px;
}

#nav {
	float: right;
	font-weight: 600;
	font-size: 13px;
	color: #2d2d2d;
	margin-top: 108px;
}

#nav a {
	text-decoration: none;
	color: #2d2d2d;
}

#nav a:hover {
	color: #000;
}

ul li {
	list-style: none;
	display: inline;
}

li {
	margin-left: 30px;
	padding-left: 10px;

}

#selected {
	padding: 8px 9px;
	margin-right: -12px;
	border: 1px solid #ababab;
	border-radius: 3px;
}


/*Main Content Section*/

#content900 {
	width: 900px;
	padding-top: 60px;
	margin: auto;
}


/*Home Content Section*/

.intro {
	width: 900px;
	height: 460px;
	margin-bottom: 9px;
}

.introtext {
	text-align: left;
	width: 530px;
	font-size: 32px;
	line-height: 40px;
	float: left;
	position: absolute;
	padding: 140px 0 0 60px;

	-webkit-animation-name: introtext;
	-moz-animation-name: introtext;
	-o-animation-name: introtext;
	animation-name: introtext;

	-webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: both;

	-moz-animation-duration: 5s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-fill-mode: both;

	-o-animation-duration: 5s;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: linear;
    -o-animation-fill-mode: both;

	animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: both;
} 

	@-webkit-keyframes introtext {
		0% 	 { opacity: 0; }
		13%  { opacity: 0; }
		50%  { opacity: 1; }
		100% { opacity: 1; }
	}

	@-moz-keyframes introtext {
		0%   { opacity: 0; }
		13%  { opacity: 0; }
		50%  { opacity: 1; }
		100% { opacity: 1; }
	}
	
	@-o-keyframes introtext {
		0%   { opacity: 0; }
		13%  { opacity: 0; }
		50%  { opacity: 1; }
		100% { opacity: 1; }
	}

	@keyframes introtext {
		0%   { opacity: 0; }
		13%  { opacity: 0; }
		50%  { opacity: 1; }
		100% { opacity: 1; }
	}

.homefeatured {
	width: 900px;
	height: 225px;
	margin-bottom: 100px;
}

.hoverbold {
	font-weight: 600;
}

/*Featured Overview Section*/

.featuredgrid {
	width: 900px;
	height: 690px;
	margin-bottom: 100px;
}

.featuredleft {
	position: relative;
	float: left;
	margin-bottom: 10px;
}

.featuredright {
	position: relative;
	float: right;
	margin-bottom: 10px;
}



/*Clients Section*/

.workboxclients {
	width: 445px;
	height: 340px;
}

.detailsclients {
	position: absolute;
	text-align: center;
	width: 445px;
	top: 50%;
	z-index: 999;
	color: #fff;
	cursor: pointer;
}

.workboxclients .detailsclients {
	position:absolute;
	top:0;
	left:0;
	width: 445px;
	height: 340px;
	background: rgba(0, 0, 0, .1);
	opacity: 0;

	transition: opacity;
	transition-duration: 150ms;
	    
	-ms-transition: opacity;
	-ms-transition-duration: 150ms;
	    
	-moz-transition: opacity;
	-moz-transition-duration: 150ms;
	    
	-webkit-transition: opacity;
	-webkit-transition-duration: 150ms;
}

div.workboxclients .detailsclients:hover {
	opacity: 1;

	transition: opacity;
	transition-duration: 150ms;

	-ms-transition:opacity;
	-ms-transition-duration: 150ms;

	-moz-transition:opacity;
	-moz-transition-duration: 150ms;

	-webkit-transition: opacity;
	-webkit-transition-duration: 150ms;
}


/*Team Section*/

.teamgrid {
	width: 900px;
	margin-bottom: 160px;
}

.containerteam {
	width: 172px;
	height: 240px;
}

.name {
	color: #202020;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	margin-top: -5px;
}

.bio {
	width: 330px;
	float: left;
	font-size: 14px;
	line-height: 22px;
}

.link {
	text-decoration: none;
	color: #202020;
}

.portrait {
	float: left;
	margin-right: 25px;
	/*border-radius: 3px;*/
}

.portraitright {
	float: left;
	margin-right: 30px;
	margin-left: 20px;
	/*border-radius: 3px;*/
}

.teamleft {
	color: #8e8e8e;
	text-align: left;
	width: 450px;
	height: 90px;
	position: relative;
	float: left;
	margin-bottom: 60px;
}

.workboxteam {
	width: 172px;
	height: 240px;
}

.detailsteam {
	position: absolute;
	text-align: center;
	width: 172px;
	top: 50%;
	z-index: 999;
	color: #fff;
}

.workboxteam .detailsteam {
	position:absolute;
	top:0;
	left:0;
	width: 172px;
	height: 240px;
	opacity: 0;

	transition: opacity;
	transition-duration: 150ms;
	    
	-ms-transition: opacity;
	-ms-transition-duration: 150ms;
	    
	-moz-transition: opacity;
	-moz-transition-duration: 150ms;
	    
	-webkit-transition: opacity;
	-webkit-transition-duration: 150ms;
}

div.workboxteam .detailsteam:hover {
	opacity: 1;

	transition: opacity;
	transition-duration: 150ms;

	-ms-transition:opacity;
	-ms-transition-duration: 150ms;

	-moz-transition:opacity;
	-moz-transition-duration: 150ms;

	-webkit-transition: opacity;
	-webkit-transition-duration: 150ms;
}



.hovertextteam {
	padding-top: 110px;
	font-weight: 300;
	font-size: 12px;
}

.smallportrait {
	width: 48px;
	height: 56px;
	float: left;
	margin-right: 10px;
	position: relative;
}

/*Fade Master*/

.fade {
	-webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
	-moz-animation-duration: 4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
	-o-animation-duration: 4s;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
	animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: both;
    -webkit-animation-name: fade;
	-moz-animation-name: fade;
	-o-animation-name: fade;
	animation-name: fade;
} 

	@-webkit-keyframes fade {
		0%   { opacity: 0; }
		13%  { opacity: 0; }
		20%  { opacity: 1; }
		25%  { opacity: 1; }
		100% { opacity: 1; }
	}
	@-moz-keyframes fade {
		0%   { opacity: 0; }
		13%  { opacity: 0; }
		20%  { opacity: 1; }
		25%  { opacity: 1; }
		100% { opacity: 1; }
	}
	@-o-keyframes fade {
		0%   { opacity: 0; }
		13%  { opacity: 0; }
		20%  { opacity: 1; }
		25%  { opacity: 1; }
		100% { opacity: 1; }
	}
	@keyframes fade {
		0%   { opacity: 0; }
		13%  { opacity: 0; }
		20%  { opacity: 1; }
		25%  { opacity: 1; }
		100% { opacity: 1; }
	}


/*Work Section*/

img.workimage {
	margin-bottom: 6px;
	padding: 0;
}

.worktext {
	width: 900px;
	height: auto;
	margin-top: 30px;
	font-size: 14px;
	color: #8e8e8e;
	font-weight: 400;
}	

.worktextbold {
	color: #202020;
}

.worktext_box {
	width: 450px;
	float: left;
	text-align: left;
}

.worktext_boxleft {
	width: 450px;
	float: left;
	text-align: left;
	position: relative;
}

.workbuttons {
	width: 900px;
	height: 100px;
	float: left;
	margin-bottom: 100px;
}

.workbutton_left {
	margin-bottom: 100px;
	margin-top: 60px;
	width: 449px;
	height: 100px;
	float: left;
	background: #FFF;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-right: 1px solid #F5F5F5;
}

.workbutton_right {
	margin-bottom: 100px;
	margin-top: 60px;
	width: 449px;
	height: 100px;
	float: left;
	background: #FFF;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-left: 1px solid #F5F5F5;
}