@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,700&subset=latin,latin-ext);
.about:after,.abstract:after,.footer ul:after,.main .container:after,.projects .project:after,.projects .single:after,.projects:after,.services .service:after,.services:after,.slider:after,.team .member .image:after,.team:after {
	clear: both;
	content: ".";
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	overflow: hidden
}
.projects .project div img.active,.projects .project div img:hover {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: gray;
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
	filter: grayscale(100%)
}
#imagelightbox {
	position: fixed;
	z-index: 9999;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background-clip: padding-box;
	-webkit-box-shadow: 0 4px 0 rgba(0,0,0,.09);
	-moz-box-shadow: 0 4px 0 rgba(0,0,0,.09);
	box-shadow: 0 4px 0 rgba(0,0,0,.09)
}
#imagelightbox-overlay {
	background-color: rgba(255,255,255,.5);
	position: fixed;
	z-index: 9998;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}
#imagelightbox-close {
	width: 2.5em;
	height: 2.5em;
	text-align: left;
	text-indent: -9999px;
	position: fixed;
	z-index: 10000;
	top: 2.5em;
	right: 2.5em;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background-clip: padding-box
}
#imagelightbox-close:after,#imagelightbox-close:before {
	width: 2px;
	background-color: #fff;
	content: '';
	position: absolute;
	top: 20%;
	bottom: 20%;
	left: 50%;
	margin-left: -1px
}
#imagelightbox-close:before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg)
}
#imagelightbox-close:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
#imagelightbox-loading,#imagelightbox-loading div {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%
}
#imagelightbox-loading {
	width: 2.5em;
	height: 2.5em;
	position: fixed;
	z-index: 10003;
	top: 50%;
	left: 50%;
	padding: .625em;
	-webkit-box-shadow: 0 0 2.5em rgba(0,0,0,.35);
	-moz-box-shadow: 0 0 2.5em rgba(0,0,0,.35);
	box-shadow: 0 0 2.5em rgba(0,0,0,.35);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
#imagelightbox-loading div {
	width: 1.25em;
	height: 1.25em;
	background-color: #fff;
	-webkit-animation: imagelightbox-loading .5s ease infinite;
	-moz-animation: imagelightbox-loading .5s ease infinite;
	-o-animation: imagelightbox-loading .5s ease infinite;
	animation: imagelightbox-loading .5s ease infinite
}
@-webkit-keyframes imagelightbox-loading {
	from {
		opacity: .5;
		-webkit-transform: scale(.75)
	}
	50% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	to {
		opacity: .5;
		-webkit-transform: scale(.75)
	}
}
@-moz-keyframes imagelightbox-loading {
	from {
		opacity: .5;
		-moz-transform: scale(.75)
	}
	50% {
		opacity: 1;
		-moz-transform: scale(1)
	}
	to {
		opacity: .5;
		-moz-transform: scale(.75)
	}
}
@-o-keyframes imagelightbox-loading {
	from {
		opacity: .5;
		-o-transform: scale(.75)
	}
	50% {
		opacity: 1;
		-o-transform: scale(1)
	}
	to {
		opacity: .5;
		-o-transform: scale(.75)
	}
}
@keyframes imagelightbox-loading {
	from {
		opacity: .5;
		transform: scale(.75)
	}
	50% {
		opacity: 1;
		transform: scale(1)
	}
	to {
		opacity: .5;
		transform: scale(.75)
	}
}
body,div,form,h1,h2,h3,h4,h5,h6,li,p,ul {
	margin: 0;
	padding: 0
}
ul {
	list-style-type: none
}
body {
	font-size: 16px;
	font-family: "Titillium Web",sans-serif;
	text-align: center;
	color: #5f5e5d;
	background: #272727 url(images/pattern_bamboo1.jpg)
}
h1,h2,h3,h4,h5 {
	font-weight: 700;
	text-transform: uppercase;
	color: #333
}
div {
	width: auto;
	height: auto;
	margin: 0 auto
}
a {
	text-decoration: none;
	outline: 0;
	color: #5f5e5d
}
a:hover {
	text-decoration: none
}
.main {
	text-align: left
}
.main .container {
	max-width: 960px
}
@media all and (max-width:960px) {
	.main .container {
		width: 96%
	}
}
.header,.main {
	background: #f5f5f5 url(images/pattern_lightpaperfibres.jpg)
}
.header {
	width: 100%;
	z-index: 10;
	padding-top: 38px;
	position: relative
}
@media all and (max-width:680px) {
	.header {
		padding-top: 150px;
		background: #272727
	}
}
.header h1 {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -75px;
	width: 150px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}
.header h1:hover {
	top: -6px
}
@media all and (max-width:680px) {
	.header h1:hover {
		top: 0
	}
}
.header h1 a {
	width: 150px;
	height: 150px;
	display: block;
	text-indent: -9999px;
	background: #272727 url(images/logo.png)
}
.menu {
	background: #32bfb7
}
.menu ul {
	text-align: center
}
.menu ul li {
	display: inline-block
}
.menu .left-side {
	padding-right: 105px
}
@media all and (max-width:680px) {
	.menu .left-side {
		padding-right: 0
	}
}
.menu .right-side {
	padding-left: 105px
}
@media all and (max-width:680px) {
	.menu .right-side {
		padding-left: 0
	}
}
.menu li a {
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 25px 15px;
	display: block;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}
@media all and (max-width:800px) {
	.menu li a {
		padding: 25px 5px
	}
}
@media all and (max-width:680px) {
	.menu li a {
		padding: 15px 10px
	}
}
.menu li a.active,.menu li a:hover {
	color: #272727
}
.slider {
	background: #fff url(images/1429167_13698346.jpg) 50% 0 no-repeat fixed;
	background-size: cover
}
.slider .container {
	position: relative;
	max-width: none
}
.slider .container .slides li {
	padding: 176px 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover
}
@media all and (max-width:600px) {
	.slider .container .slides li {
		padding: 76px 0
	}
}
.slider .container .slides li div {
	text-align: center;
	width: 46.0417%;
	padding: 10px 0;
	text-transform: uppercase;
	color: #fff;
	font-size: 36px;
	line-height: 40px;
	border-bottom: 5px solid #fff;
	border-top: 5px solid #fff
}
@media all and (max-width:600px) {
	.slider .container .slides li div {
		font-size: 24px;
		line-height: 30px;
		width: 80%
	}
}
.slider .container .slides li div strong {
	font-size: 42px
}
@media all and (max-width:600px) {
	.slider .container .slides li div strong {
		font-size: 28px
	}
}
.slider .container .flex-direction-nav {
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -26px
}
.slider .container .flex-direction-nav a {
	background-color: #32bfb7;
	font-family: FontAwesome;
	font-size: 3em;
	color: #fff;
	text-align: center;
	display: block;
	position: absolute;
	width: 50px;
	height: 52px
}
.slider .container .flex-direction-nav a.flex-prev:before {
	content: "\f104"
}
.slider .container .flex-direction-nav a.flex-next:before {
	content: "\f105"
}
.slider .container .flex-direction-nav a:hover {
	opacity: .9
}
.slider .container .flex-direction-nav .flex-prev {
	left: 5.20833%
}
.slider .container .flex-direction-nav .flex-next {
	right: 5.20833%
}
.page {
	padding: 50px 0
}
.about,.abstract,.projects,.services,.team {
	margin-bottom: 50px
}
.abstract {
	width: 46.0417%;
	text-align: center
}
@media all and (max-width:600px) {
	.abstract {
		width: 60%
	}
}
@media all and (max-width:400px) {
	.abstract {
		width: 80%
	}
}
.abstract h2 {
	font-size: 20px
}
.abstract h3 {
	font-size: 28px;
	margin-bottom: 15px
}
.abstract blockquote {
	font-style: italic
}
.about h2,.abstract h2,.contact h2 {
	text-align: center;
	overflow: hidden;
	color: #4d4d4d;
	font-weight: 400;
	text-transform: none
}
.about h2:after,.about h2:before,.abstract h2:after,.abstract h2:before,.contact h2:after,.contact h2:before {
	background: #4d4d4d;
	content: "";
	display: inline-block;
	height: 2px;
	position: relative;
	vertical-align: middle;
	width: 50%
}
.about h2:before,.abstract h2:before,.contact h2:before {
	right: 1.25em;
	margin-left: -50%
}
.about h2:after,.abstract h2:after,.contact h2:after {
	left: 1.25em;
	margin-right: -50%
}
.about h3,.abstract h3,.contact h3 {
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 2px solid #4d4d4d;
	color: #333
}
.services {
	text-align: center;
	background: #272727 url(images/pattern_bamboo1.jpg);
	color: #fff
}
.services h2 {
	background: #53c8bf;
	line-height: 76px;
	font-size: 20px;
	color: #fff
}
.services h3 {
	font-size: 16px;
	display: inline-block;
	color: #32bfb7;
	margin: 0 26px 5px
}
.services h3 i {
	color: #fff;
	padding-bottom: 28px;
	margin-bottom: 26px;
	background: url(images/i-border.png) center bottom no-repeat
}
.services .service {
	padding: 34px 0
}
.services .service .container div {
	border: 1px solid #32bfb7;
	float: left;
	width: 30%;
	min-height: 298px;
	margin-right: 5%;
	padding: 45px 26px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
.services .service .container div:hover {
	background: #32bfb7
}
.services .service .container div:hover h3 {
	color: #5f5e5d
}
.services .service .container div:hover p {
	color: #fff
}
.services .service .container div:last-child {
	margin-right: 0
}
@media all and (max-width:800px) {
	.services .service .container div {
		width: 100%;
		margin-bottom: 5%
	}
}
.services .service p {
	font-size: 14px;
	line-height: 20px;
	color: #9b9b9b
}
.projects {
	margin-bottom: 25px;
	text-align: center
}
.projects a {
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 700
}
.projects ul.button-group li {
	display: inline-block
}
.projects ul.button-group li a {
	padding: 3px 5px;
	border: 2px solid transparent;
	color: #272727;
	display: block;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}
.projects ul.button-group li a.active,.projects ul.button-group li a:hover {
	border: 2px solid #32bfb7
}
.projects .project {
	margin-top: 18px;
	z-index: 5;
	padding-bottom: 25px
}
.projects .project div {
	width: 25%;
	float: left
}
@media all and (max-width:600px) {
	.projects .project div {
		width: 50%
	}
}
@media all and (max-width:320px) {
	.projects .project div {
		width: 100%
	}
}
.projects .project div img {
	width: 100%;
	height: auto;
	float: left
}
.projects .single {
	text-align: left;
	margin-top: 40px
}
.projects .single .image {
	width: 50%;
	float: left
}
@media all and (max-width:800px) {
	.projects .single .image {
		width: 100%;
		float: none
	}
}
.projects .single .image img {
	width: 100%;
	height: auto
}
.projects .single .details {
	width: 45.83333%;
	float: right
}
@media all and (max-width:800px) {
	.projects .single .details {
		width: 100%;
		float: none
	}
}
.projects .single a {
	text-transform: none;
	color: #32bfb7;
	font-style: italic
}
.projects .single a:hover {
	text-decoration: underline
}
.projects .single h2 {
	padding: 0 5px;
	line-height: 74px;
	border-bottom: 2px solid #4d4d4d;
	border-top: 2px solid #4d4d4d;
	position: relative
}
.projects .single h2 a {
	position: absolute;
	right: 5px;
	width: 13px;
	color: #32bfb7
}
.projects .single h2,.projects .single p {
	margin-bottom: 25px
}
.projects .single ul {
	margin-left: 25px
}
.projects .single li {
	padding: 2px 0
}
.projects .single li i {
	margin-right: 6px;
	color: #32bfb7
}
.projects .single li:last-child {
	padding-left: 12px;
	background: 0 0;
	font-style: italic;
	font-size: 15px
}
.about {
	text-align: center
}
.about .title {
	width: 50%
}
.about h2 {
	font-size: 20px
}
.about h3 {
	font-size: 22px
}
.about h3,.about p {
	margin-bottom: 50px
}
.team h4 {
	line-height: 22px;
	margin-bottom: 16px
}
.team h4 span {
	color: #5f5e5d;
	font-style: italic;
	text-transform: none;
	font-weight: 400
}
.team .member {
	width: 25%;
	float: left;
	text-align: center;
	overflow: hidden
}
@media all and (max-width:800px) {
	.team .member {
		width: 50%;
		margin-bottom: 20px
	}
}
@media all and (max-width:320px) {
	.team .member {
		width: 100%;
		margin-bottom: 20px
	}
}
.team .member .image {
	margin-bottom: 20px;
	border-bottom: 5px solid #32bfb7;
	position: relative
}
.team .member .image img {
	float: left;
	z-index: 5;
	width: 100%;
	text-align: center
}
.team .member .image p {
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(51,51,51,.9);
	padding: 25px;
	position: absolute;
	top: 0;
	color: #fff;
	display: none;
	font-size: .8em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
@media all and (max-width:800px) {
	.team .member .image p {
		font-size: .7em
	}
}
@media all and (max-width:320px) {
	.team .member .image p {
		font-size: 1em
	}
}
.team .member li {
	display: inline-block;
	margin: 0 2px
}
.team .member li a {
	font-family: FontAwesome;
	font-size: 14px;
	display: block;
	width: 14px;
	padding: 3px;
	text-align: center;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	color: #2b2b2b;
	background: #32bfb7
}
.team .member li a:hover {
	color: #32bfb7;
	background: #2b2b2b
}
.contact {
	background: #32bfb7;
	padding: 28px 0
}
.contact .title h2 {
	font-size: 20px;
	color: #333
}
.contact .title h2:after,.contact .title h2:before {
	background: #333
}
.contact .title h3 {
	border-bottom: none;
	font-size: 28px;
	padding-bottom: 20px
}
.contact .form {
	width: 52.08333%;
	text-align: center
}
@media all and (max-width:600px) {
	.contact .form {
		width: 100%
	}
}
.contact .error,.contact .message {
	margin: 2% 2% 10px
}
.contact .error.active {
	color: #ee2828;
	background: #fddede;
	padding: 5px 10px
}
.contact button,.contact input,.contact textarea {
	font-family: "Titillium Web",sans-serif;
	font-size: 18px;
	color: #fff
}
.contact input,.contact textarea {
	padding: 3px 8px;
	background: #32bfb7;
	border: 1px solid #fff;
	outline: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
.contact input::-webkit-input-placeholder,.contact textarea::-webkit-input-placeholder {
	color: #fff
}
.contact input::-moz-placeholder,.contact textarea::-moz-placeholder {
	color: #fff
}
.contact input:-ms-input-placeholder,.contact textarea:-ms-input-placeholder {
	color: #fff
}
.contact input {
	width: 46%;
	margin: 0 2% 2%;
	float: left
}
@media all and (max-width:600px) {
	.contact input {
		width: 100%;
		margin: 0 0 2%;
		float: none
	}
}
.contact textarea {
	width: 96%;
	height: 100px;
	margin-bottom: 2%;
	resize: none
}
@media all and (max-width:600px) {
	.contact textarea {
		width: 100%;
		float: none
	}
}
.contact button {
	padding: 7px 50px;
	border: 3px solid #333;
	background: #333;
	font-weight: 700;
	color: #32bfb7;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}
.contact button:hover {
	color: #fff
}
.footer {
	text-align: center;
	font-size: 15px;
	background: #272727 url(images/pattern_bamboo1.jpg);
	color: #fff
}
.footer .container {
	padding: 50px 0;
	position: relative
}
@media all and (max-width:400px) {
	.footer .container {
		padding: 30px 0
	}
}
.footer .social {
	width: 45%
}
@media all and (max-width:800px) {
	.footer .social {
		width: 80%
	}
}
@media all and (max-width:600px) {
	.footer .social {
		width: 90%
	}
}
@media all and (max-width:400px) {
	.footer .social {
		width: 90%
	}
}
.footer h4 {
	margin-bottom: 5px;
	color: #fff
}
.footer p,.footer ul {
	margin-bottom: 50px
}
.footer ul {
	background: #313130
}
.footer ul li {
	font-size: 14px;
	padding: 14px;
	display: inline-block
}
@media all and (max-width:400px) {
	.footer ul li {
		padding: 14px 10px
	}
}
.footer ul li a {
	display: block;
	color: #fff;
	width: 26px;
	height: 30px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}
.footer ul li a:hover {
	color: #32bfb7
}
.footer .copyright {
	color: #5f5e5d;
	margin-bottom: 0
}
.back {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 99
}
.back .container {
	position: relative
}
.back a {
	width: 50px;
	height: 50px;
	background: #32bfb7;
	text-align: center;
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}
.back a:hover {
	bottom: -6px
}
.anchor {
	display: block;
	height: 0
}