@charset "utf-8";

/*	--------------------------------------------------
	Generic CSS Setup
	-------------------------------------------------- */
html {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
body {
	width: 100%;
	height: 100%;
	padding: 0 0 0 0px;
	margin: 0 0 0 0px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	color: #4e5256;
}
h1, h2, h3, h4, h5, td, form, td, tr, th, div, header, section, footer, p, textarea, fieldset{
	margin: 0 0 0 0px;
	padding: 0 0 0 0px;
	border: none;
}
td, form, td, tr, th, div, header, section, footer, p, textarea{
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 28px;
	color: #4e5256;
}
h1, h2, h3, h4, h5{
	color: #2b2827;
}
ul, li{
	margin: 0 0 0 0px;
	padding: 0 0 0 0px;
	list-style: none;
}
a {
	color: #2b2827;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a img{
	border: none;
}
.clearBoth {
	clear: both;
}
.widthWrapper {
    width: 1100px;
	margin: 0 auto 0 auto;
}
.colorGreen {
	color: #1aa79c;
}

#preloader  {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #eef0ee;
	z-index: 1100;
	height: 100%;
 }
.sk-wave {
	margin: 300px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
}
.sk-wave .sk-rect {
	background-color: rgba(92,168,57,1);
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
			animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-wave .sk-rect1 {
	-webkit-animation-delay: -1.2s;
			animation-delay: -1.2s; 
}
.sk-wave .sk-rect2 {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
}
.sk-wave .sk-rect3 {
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
}
.sk-wave .sk-rect4 {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
}
.sk-wave .sk-rect5 {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
}

@-webkit-keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); }
}

@keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); }
}


@keyframes animatedBackground {
    0% { background-position: 0 0; }
    50% { background-position: -100px 0; }
	100% { background-position: 0 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    50% { background-position: -100px 0; }
	100% { background-position: 0 0; }
}
@-webkit-keyframes animatedBackground {
   0% { background-position: 0 0; }
    50% { background-position: -100px 0; }
	100% { background-position: 0 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    50% { background-position: -100px 0; }
	100% { background-position: 0 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    50% { background-position: -100px 0; }
	100% { background-position: 0 0; }
}


/*	--------------------------------------------------
	Header and logo
	-------------------------------------------------- */
header {
	position: absolute;
	z-index: 1001;
	width: 100%;
	height: 105px;
	background: rgba(255,255,255,0.5);
}
header .logoWrapper {
    width: 114px;
	height: 45px;
	padding-top: 30px;
	float: left;
}


/*	--------------------------------------------------
	top navigation
	-------------------------------------------------- */
#topNavi {
	height: 110px;
	margin: 0 35px 0 0px;
	float: right;
	text-align: right;
}
#topNavi li{
	position: relative;
	width: 125px;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	vertical-align: text-top;
	text-align: center;
}
#topNavi li a{
	display: block;
	padding: 30px 0 40px 0px;
	color: #000000;
}
#topNavi li a.selected,
#topNavi li a:hover {
	background: url(../images/border04.png) no-repeat center 90px;
	text-decoration: none;
}
main,
.navbar-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
main {
  position: fixed;
  z-index: 1300;
  background-color: rgba(84,84,84,1);
  width: 100%;
  height: 100%;
  text-align: left;
  display: table;
  color: white;
}
.nav-hide { 
	display: none; 
}
main ul {
  display: table-cell;
  vertical-align: middle;
  padding-left: 0 !important;
}
main ul li { 
  list-style: none;
  margin: 0 30px 0 30px;
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
main ul li a {
	width: 100%;
	padding: 13px 0 14px 0px;
	font-size: 19px;
	color: inherit;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
}
main ul li a:hover {
	text-decoration: none;
	background: rgba(0,0,0,0.1);
}
.navbar-toggle {
	position: absolute;
	z-index: 1501;
    width: 25px;
    height: 15px;
    margin: 30px 5px 0 0px;
	right: 10%;
    cursor: pointer;
    display: none;
}
.bar1,
.bar2,
.bar3 {
  width: 100%;
  height: 2px;
  margin-bottom: 6px;
  background-color: #000000;
}


/*	--------------------------------------------------
	Footer
	-------------------------------------------------- */
footer {
	width: 100%;
	background: #535353;
	padding: 40px 0 25px 0px;
	clear: both;
}
footer .secLetsMeet {
	width: 135px;
	float:  left;
	font-size: 35px;
	font-weight: 300;
	text-transform: uppercase;
	color: #ffffff;
}
footer .secBrief {
	width: 450px;
	float:  left;
}
footer .secBrief p{
	font-size: 13px;
	line-height: 20px;
	color: #ffffff;
}
footer .secBrief strong{
	font-size: 14px;
	padding-bottom: 5px;
	display: block;
	color: #ffffff;
	font-weight: 400;
}
footer .secInfo {
	padding-bottom: 40px;
	float: right;
}
footer .secInfo ul{
	width: 210px;
	float: left;
}
footer .secInfo li{
	font-size: 13px;
	line-height: 20px;
	color: #ffffff;
}
footer .secInfo strong{
	font-size: 14px;
	padding-bottom: 10px;
	display: block;
	font-weight: 400;
}
footer .secInfo a{
	color: #ffffff;
}
footer .secInfo .socialLinks li{
	padding-left: 5px;
	display: inline-block;
}
footer .secSitemap {
	padding-top: 20px;
	border-top: 1px solid #464646;
	font-size: 11px;
	color: #cccccc;
	clear: both;
}


/*	--------------------------------------------------
	Slider Section
	-------------------------------------------------- */
#slider {
	position: relative;
	width: 100%;
	height: 100vh;
}
#slider .descHolder {
	position: absolute;
	z-index: 111;
	width: 100%;
	height: 100px;
	background: rgba(255,255,255,0.5);
	bottom: -100vh;
	margin: 0 0 0 0px;
	transition: ease .25s;
}
#slider:hover .descHolder {
	bottom: 0;
}
#slider .descHolder .widthWrapper{
	width: 1100px;
	margin: 15px auto 0 auto;
	text-align: left;
}
#slider .descHolder span{
	width: 320px;
	padding: 0 0 30px 0px;
	font-size: 15px;
	font-weight: 300;
	display: block;
	color: #ffffff;
}
#slider .descHolder h1{
	padding: 0 0 0 0px;
	font-size: 35px;
	line-height: 43px;
	font-weight: 300;
	color: #000000;
}
#slider .descHolder p{
	width: 320px;
	padding: 0 0 40px 0px;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 1px;
	color: #ffffff;
}
#slider .servHolder {
	position: absolute; 
	z-index: 1001; 
	width: 100%; 
	bottom: 100px;
}
#slider .servHolder h1{
	width: 600px;
	font-size: 28px; 
	line-height: 45px; 
	font-weight: 300; 
	color: #ffffff;
}
#slider .CTAHolder{
}
#slider .CTAHolder a{
	background: url(../images/border01.png) no-repeat left center;
	padding: 0 0 0 10px;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #000000;
	display: block;
}
#slider .CTAHolder a:hover{
	color: #ed6227;
	text-decoration: none;
}
#slider video{
	width: 110%;
	height: auto;
}


/*	--------------------------------------------------
	Banner Section
	-------------------------------------------------- */
.secBanner {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #707070;
}
.secBanner .widthWrapper {
	position: relative;
	width: 1100px;
	height: 100vh;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0px;
	text-align: center;
}
.secBanner .descHolder {
	position: absolute;
	bottom: 60px;
	width: 665px;
	text-align: left;
}
.secBanner h1{
	margin-bottom: 65px;
	font-size: 28px;
	line-height: 45px;
	font-weight: 300;
	color: #ffffff;
}
.secBanner p{
	font-size: 21px;
	font-style: 400;
	line-height: 30px;
	color: #ffffff;
}
.secBanner nav{
	width: 100%;
	background: none;
	box-shadow: none;
}
.secBanner nav li{
	margin: 0 50px 0 0px;
	display: inline-block;
	vertical-align: top;
}
.secBanner nav a{
	background: url(../images/border01.png) no-repeat left center;
	padding-left: 10px;
	font-size: 13px;
	line-height: 15px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #ffffff;
	display: block;
}
.secBanner nav a:hover,
.secBanner nav a.selected {
	color: #e76128;
	background-color: transparent;
	text-decoration: none;
}
.secBanner .linkReadMore {
	position: absolute;
	bottom: 115px;
	right: 0px;
}


/*	--------------------------------------------------
	Index Page
	-------------------------------------------------- */
#pageIndex {
	width: 100%;
	margin: 0 0 0 0px;
}
#pageIndex .secServices {
	background: #707070;
}
#pageIndex .secArchitecture {
	width: 1100px;
	min-height: 50vh;
	margin: 0 auto 0 auto;
	padding: 100px 0 100px 0px;
}
#pageIndex .secArchitecture .descHolder{
	width: 360px;
	padding: 80px 0 0 0px;
	float: left;
}
#pageIndex .secArchitecture .imgHolder{
	width: 700px;
	float: right;
}
#pageIndex .secArchitecture .imgHolder img{
	width: 100%;
	height: auto;
}

#pageIndex .secInterior {
	width: 1100px;
	min-height: 50vh;
	margin: 0 auto 0 auto;
	padding: 100px 0 100px 0px;
	clear: both;
}
#pageIndex .secInterior .descHolder{
	width: 360px;
	padding: 95px 0 0 0px;
	float: right;
}
#pageIndex .secInterior .imgHolder{
	position: relative;
	width: 483px;
	margin-top: -50px;
	float: left;
}


#pageIndex .secPlan {
	width: 1100px;
	min-height: 50vh;
	margin: 0 auto 0 auto;
	padding: 0 0 100px 0px;
}
#pageIndex .secPlan .descHolder{
	width: 360px;
	padding: 80px 0 0 0px;
	float: left;
}
#pageIndex .secPlan .imgHolder{
	width: 700px;
	float: right;
}
#pageIndex .secPlan .imgHolder img{
	width: 100%;
	height: auto;
}

#pageIndex .secManagement {
	width: 1100px;
	min-height: 50vh;
	margin: 0 auto 0 auto;
	padding: 100px 0 100px 0px;
	clear: both;
}
#pageIndex .secManagement .descHolder{
	width: 350px;
	padding: 60px 0 0 0px;
	float: right;
}
#pageIndex .secManagement .imgHolder{
	width: 693px;
	float: left;
}

#pageIndex .secArchitecture h2,
#pageIndex .secInterior h2,
#pageIndex .secPlan h2,
#pageIndex .secManagement h2{
	margin-bottom: 30px;
	font-size: 25px;
	color: #ffffff;
	letter-spacing: 3px;
	font-weight: 400;
}
#pageIndex .secArchitecture p,
#pageIndex .secInterior p,
#pageIndex .secPlan p,
#pageIndex .secManagement p{
	margin-bottom: 45px;
	font-size: 15px;
	line-height: 30px;
	font-weight: 300;
	color: #ffffff;
	letter-spacing: 1px;
}
#pageIndex .secArchitecture a.btnCTA,
#pageIndex .secInterior a.btnCTA,
#pageIndex .secPlan a.btnCTA,
#pageIndex .secManagement a.btnCTA{
	width: 200px;
	background: url(../images/border01.png) 0px 9px no-repeat;
	padding-left: 15px;
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	color: #ffffff;
	letter-spacing: 3px;
	display: block;
}


/*	--------------------------------------------------
	about Page
	-------------------------------------------------- */
#pageAbout {
	width: 100%;
}
#pageAbout .secBanner {
	background: url(../images/banner-about01.jpg) no-repeat;
	background-size: 100% auto;
}
#pageAbout .secContent {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 100px 0 100px 0px;
	text-align: center;
}
#pageAbout .secContent .imgHolder {
	width: 820px;
	margin: 0 auto 30px auto;
	text-align: center;
}
#pageAbout .secContent .imgHolder img{
	width: 100%;
	height: auto;
}
#pageAbout .secContent p{
	width: 820px;
	margin: 0 auto 40px auto;
	text-align: center;
	font-size: 18px;
	color: #2d2e2f;
	line-height: 30px;
}


/*	--------------------------------------------------
	People Page
	-------------------------------------------------- */
#pagePeople {
	width: 100%;
}
#pagePeople .secBanner {
	background: url(../images/banner-about01.jpg) no-repeat;
	background-size: 100% auto;
}
#pagePeople .secContent {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 100px 0 100px 0px;
	text-align: center;
}
#pagePeople .secContent ul{
	width: 100%;
	text-align: center;
}
#pagePeople .secContent li{
	position: relative;
	width: 210px;
	margin: 0 10px 10px 0px;
	text-align: center;
	display: block;
	float: left;
	overflow: hidden;
}
#pagePeople .secContent li:first-child{
	width: 430px;
}
#pagePeople .secContent li:nth-child(4),
#pagePeople .secContent li:nth-child(7),
#pagePeople .secContent li:nth-child(12),
#pagePeople .secContent li:nth-child(5n+2){
	margin: 0 0 10px 0px;
}
#pagePeople .secContent li:nth-child(2),
#pagePeople .secContent li:nth-child(5),
#pagePeople .secContent li:nth-child(10){
	margin: 0 10px 10px 0px;
}
#pagePeople .secContent li img{
	width: 100%;
    height: auto;
	display: block;
	margin: 0 auto 0 auto;
}
#pagePeople .secContent li .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(32,31,30,0.85);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .35s ease;
}
#pagePeople .secContent li:hover .overlay {
  height: 100%;
}
#pagePeople .secContent li .text {
	width: 85%;
	color: white;
	font-size: 13px;
	line-height: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#pagePeople .secContent li .text h3{
  font-size: 15px;
	font-weight: 300;
	color: #ed6227;
}
#pagePeople .secContent li .text h4{
  font-size: 13px;
	font-weight: 600;
	color: #9a9a9a;
	margin-bottom: 15px;
	letter-spacing: 1px;
}


/*	--------------------------------------------------
	Career Page
	-------------------------------------------------- */
#pageCareer {
	width: 100%;
}
#pageCareer .secBanner {
	background: url(../images/banner-about01.jpg) no-repeat;
	background-size: 100% auto;
}
#pageCareer .secContent {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 100px 0 100px 0px;
}
#pageCareer .secContent .secDetails {
	width: 695px;
	padding: 0 50px 30px 0px;
	float: left;
	border-right: 1px solid #f0f0f0;
}
#pageCareer .secContent .secDetails h2{
	margin: 0 0 20px 0px;
	font-size: 30px;
	font-weight: 300;
	color: #2b2827;
	line-height: 30px;
}
#pageCareer .secContent .secDetails h3{
	margin: 20px 0 20px 0px;
	font-size: 13px;
	color: #ed6227;
	line-height: 17px;
	font-weight: 600;
}
#pageCareer .secContent .secDetails p{
	margin: 0 0 40px 0px;
	font-size: 13px;
	line-height: 24px;
	color: #4e5256;
}
#pageCareer .secContent .secDetails li{
	background: url(../images/ico-listing01.png) no-repeat left top;
	margin: 0 0 13px 0px;
	padding-left: 15px;
	font-size: 13px;
	line-height: normal;
	color: #4e5256;
}

#pageCareer .secContent .secListing {
	width: 310px;
	float: right;
}
#pageCareer .secContent .secListing li{
	background: url(../images/border01.png) no-repeat left 2px;
	margin: 0 0 20px 0px;
	padding: 0 0 20px 10px;
	font-size: 13px;
	line-height: 17px;
	color: #4e5256;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-bottom: 1px solid #f0f0f0;
}
#pageCareer .secContent .secListing li a{
	color: #2b2827;
}
#pageCareer .secContent .secListing li a.selected,
#pageCareer .secContent .secListing li a:hover{
	color: #ed6227;
	text-decoration: none;
}
#pageCareer .secContent .secListing h2{
	margin: 55px 0 20px 0px;
	font-size: 30px;
	font-weight: 300;
	color: #2b2827;
	line-height: 18px;
}
#pageCareer .secContent .secListing strong{
	font-weight: 400;
}
#pageCareer .secContent .secListing p{
	margin: 0 0 25px 0px;
	font-size: 13px;
	line-height: 20px;
	color: #828588;
}


/*	--------------------------------------------------
	Project Page
	-------------------------------------------------- */
#pageProjectList {
	width: 100%;
}
#pageProjectList .bgArchitect {
	background: url(../images/banner-architecture.jpg) no-repeat;
	background-size: 100% auto;
}
#pageProjectList .bgInterior {
	background: url(../images/banner-interior.jpg) no-repeat;
	background-size: 100% auto;
}
#pageProjectList .bgMasterPlanning {
	background: url(../images/banner-master-planning.jpg) no-repeat;
	background-size: 100% auto;
}

#pageProjectList .secBrief {
	width: 1100px;
	margin: 85px auto 80px auto;
	text-align: center;
}
#pageProjectList .secListing {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 100px 0 100px 0px;
	text-align: center;
}
#pageProjectList .secListing ul{
	width: 100%;
	text-align: center;
}
#pageProjectList .secListing li{
	position: relative;
	width: 366px;
	height: 346px;
	text-align: center;
	display: block;
	overflow: hidden;
	float: left;
}
#pageProjectList .secListing li img{
	width: 100%;
    height: auto;
	display: block;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
#pageProjectList .secListing li .overlay {
	position: absolute;
	bottom: 0;
	left: 0;
  right: 0;
  background-color: rgba(32,31,30,0.85);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .35s ease;
}
#pageProjectList .secListing li:hover .overlay {
	height: 100%;
}
#pageProjectList .secListing li .text {
	width: 85%;
	color: white;
	font-size: 15px;
	line-height: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#pageProjectList .secListing li .text h3{
	font-size: 13px;
	font-weight: 600;
	color: #9a9a9a;
	margin-bottom: 5px;
	letter-spacing: 1px;
}
#pageProjectList .secListing li .text a{
	background: url(../images/border03.png) no-repeat center top;
	margin: 30px 0 0 0px;
	padding: 45px 0 0 0px;
	font-size: 15px;
	text-transform: uppercase;
	color: #ed6227;
	display: block;
}

#pageProjectDetails {
	width: 100%;
}
#pageProjectDetails .secFeaturedImage {
	width: 100%;
	height: 85vh;
	overflow: hidden;
}
#pageProjectDetails .secFeaturedImage img{
	width: 100%;
    height: auto;
}
#pageProjectDetails .secBrief {
	position: relative;
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 25px 0 25px 0px;
	border-bottom: 1px solid #e9e9e9;
}
#pageProjectDetails .secBrief .descHolder {
	width: 700px;
}
#pageProjectDetails .secBrief .typeHolder {
	width: 230px;
	margin-right: 50px;
	float: left;
}
#pageProjectDetails .secBrief .nameHolder {
	width: 400px;
	float: left;
}
#pageProjectDetails .secBrief h1{
	font-size: 25px;
	line-height: 30px;
	font-weight: 300;
	color: #2b2827;
}
#pageProjectDetails .secBrief p{
	font-size: 13px;
	line-height: 17px;
	color: #4e5256;
	letter-spacing: 2px;
	margin-bottom: 5px;
}
#pageProjectDetails .secBrief nav{
	position: absolute;
	width: auto;
	right: 0px;
	background: none;
	box-shadow: none;
}
#pageProjectDetails .secBrief nav li{
	margin: 0 50px 0 0px;
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
#pageProjectDetails .secBrief nav a{
	background: url(../images/border01.png) no-repeat left center;
	padding-left: 10px;
	font-size: 13px;
	line-height: 15px;
	font-weight: 400;
	text-transform: uppercase;
	color: #2b2827;
	display: block;
}
#pageProjectDetails .secBrief .btnNext a{
	background: url(../images/border01.png) no-repeat right center;
}
#pageProjectDetails .secBrief nav a:hover,
#pageProjectDetails .secBrief nav a.selected {
	color: #e76128;
	background-color: transparent;
	text-decoration: none;
}

#pageProjectDetails .secSpecs {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 70px 0 100px 0px;
}
#pageProjectDetails .secSpecs {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 70px 0 100px 0px;
}
#pageProjectDetails .secSpecs .specsHolder{
	width: 425px;
	margin: 0 40px 0 0px;
	float: left;
}
#pageProjectDetails .secSpecs h2{
	margin-bottom: 40px;
	font-size: 35px;
	font-weight: 300;
	color: #2b2827;
}
#pageProjectDetails .secSpecs li{
	padding: 15px 0 15px 0px;
	border-top: 1px solid #eae9e9;
	display: flex;
}
#pageProjectDetails .secSpecs li div:nth-child(odd){
	width: 45%;
	font-weight: 600;
	color: #ed6227;
}
#pageProjectDetails .secSpecs li div:nth-child(even){
	width: 55%;
	color: #4e5256;
	letter-spacing: 2px;
}
#pageProjectDetails .secSpecs .slidesHolder{
	width: 625px;
	height: 395px;
	float: right;
}
#pageProjectDetails .secSpecs .slidesHolder img{
	width: 100%;
	height: auto;
}
#pageProjectDetails .secSpecs .slides-pagination {
  bottom: 2vh;
}

/*	--------------------------------------------------
	Services Page
	-------------------------------------------------- */
#pageServices {
	width: 100%;
}
#pageServices .secBanner {
	background: url(../images/banner-services01.jpg) no-repeat;
	background-size: 100% auto;
}
#pageServices .secListing {
	width: 1100px;
	margin: 120px auto 100px auto;
}
#pageServices .secListing li{
	width: 245px;
	margin: 0 35px 0 0px;
	float: left;
}
#pageServices .secListing li:last-child{
	margin: 0 0 0 0px;
}
#pageServices .secListing .icoHolder {
	margin-bottom: 25px;
}
#pageServices .secListing h2{
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 300;
	text-transform: uppercase;
	color: #262424;
}
#pageServices .secListing p{
	font-size: 13px;
	line-height: 25px;
	color: #515256;
}


/*	--------------------------------------------------
	Contact Us Page
	-------------------------------------------------- */
#pageContact {
	width: 100%;
}
#pageContact .secBanner {
	background: url(../images/banner-contact.jpg) no-repeat;
	background-size: 100% auto;
}
#pageContact .secContent {
	width: 1100px;
	margin: 0 auto 0 auto;
	padding: 85px 0 85px 0px;
}
#pageContact .secContent .contactHolder{
	width: 320px;
	float: left;
}
#pageContact .contactHolder h2{
	margin-bottom: 15px;
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;
	color: #ea6228;
}
#pageContact .contactHolder h3{
	margin-bottom: 7px;
	font-size: 21px;
	font-weight: 300;
	color: #2e2216;
}
#pageContact .contactHolder p{
	margin-bottom: 25px;
	font-size: 13px;
	line-height: 23px;
	color: #222228;
}
#pageContact .contactHolder li{
	display: flex;
}
#pageContact .contactHolder li div:nth-child(1){
	width: 25px;
}
#pageContact .formContact {
	width: 675px;
	float: right;
}
#pageContact .formContact .secLeft {
	width: 48%;
	float: left;
}
#pageContact .formContact .secRight {
	width: 48%;
	float: right;
}
#pageContact .formContact input{
	width: 96%;
	height: 45px;
	padding: 0 2% 0 2%;
	margin: 0 0 25px 0px;
	background: #ffffff;
	color: #564f44;
	border: 1px solid #564f44;
}
#pageContact .formContact textarea{
	width: 100%;
	height: 165px;
	padding: 5px 2% 5px 2%;
	margin: 0 0 25px 0px;
	background: #ffffff;
	color: #564f44;
	border: 1px solid #474445;
}
#pageContact .formContact input[type="submit"]{
	width: 150px;
	height: 45px;
	padding: 0 0 0 0px;
	background: url(../images/bg_blank.png) #ea6228;
	border: none;
	font-size: 15px;
	letter-spacing: 2px;
	color: #ffffff;
}


/*	--------------------------------------------------
	404 Page
	-------------------------------------------------- */
#pageError {
	width: 100%;
}
#pageError .secContent {
	width: 30%;
	margin: 0px auto 100px auto;
	padding-top: 150px;
	text-align: center;
}
#pageError .icoHolder {
	text-align:  center;
}
#pageError h2{
	background: url(../images/border02.png) no-repeat center top;
	padding-top: 25px;
	margin: 35px 0 35px 0px;
	text-align: center;
}
#pageError h3{
	margin-bottom: 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-style: italic;
	line-height: 30px;
}
#pageError p{
	line-height: 25px;
	margin-bottom: 20px;
}
#pageError a{
	color: #5bbc2e;
}
#pageError footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	background: #353535;
	padding: 20px 0 20px 0px;
	text-align: center;
	font-size: 11px;
	color: #ffffff;
	clear: both;
}

/*	--------------------------------------------------
	For the screen of Mobile Potrait
	-------------------------------------------------- */
@media screen and (min-width: 200px) and (max-width: 780px) {
	.widthWrapper {
		width: 80%;
	}
	.navbar-toggle {
	  display: block;
	}

	.slides-pagination {
	    bottom: 15px;
		width: 80%;
	    left: 10%;
		text-align: left;
	}
	.slides-pagination a {
	  margin: 10px 15px 10px 0px;
	}
	header {
		height: 80px;
		background: rgba(255,255,255,0.35);
	}
	header .logoWrapper {
		width: 114px;
		height: 40px;
		padding-top: 20px;
		float: left;
	}
	header .logoWrapper img{
		width: auto;
		height: 40px;
	}
	#topNavi {
		display: none;
	}

	footer .secBrief {
		width: 100%;
		float:  none;
		margin-bottom: 30px;
	}
	footer .secInfo {
		width: 100%;
		padding-bottom: 0px;
		float: none;
	}
	footer .secInfo ul{
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}

	#slider {
		height: 450px;
	}
	#slider .descHolder {
		height: 150px;
		background: rgba(255,255,255,0.5);
		bottom: 0px;
	}
	#slider .descHolder .widthWrapper{
		width: 80%;
		margin: 15px auto 0 auto;
	}
	#slider .descHolder span{
		width: 100%;
		font-size: 11px;
		line-height: 18px;
		padding: 0 0 0 0px;
		font-weight: 300;
	}
	#slider .descHolder h1{
		width: 100%;
		padding: 0 0 5px 0px;
		font-size: 20px;
		line-height: 23px;
	}
	#slider .descHolder p{
		width: 100%;
		padding: 0 0 20px 0px;
	}
	#slider .servHolder {
		position: absolute; 
		z-index: 1001; 
		width: 100%; 
		bottom: 60px;
	}
	#slider .servHolder h1{
		width: 100%;
		font-size: 18px;
		line-height: 28px;
	}

	.secBanner {
		height: 450px;
	}
	.secBanner .widthWrapper {
		width: 80%;
		height: 100%;
		padding: 0 0 0 0px;
	}
	.secBanner .descHolder {
		bottom: 60px;
		height: auto;
		width: 100%;
		padding-top: 0px;
	}
	.secBanner h1{
		margin-bottom: 25px;
		font-size: 18px;
		line-height: 28px;
	}
	.secBanner p{
		font-size: 15px;
		line-height: 23px;
	}
	.secBanner nav{
		width: 100%;
		background: none;
		box-shadow: none;
	}
	.secBanner nav li{
		margin: 0 0 15px 0px;
		display: block;
		float: none;
	}
	.secBanner .linkReadMore {
		display: none;
	}

	#pageIndex .secArchitecture {
		width: 80%;
		padding: 80px 0 50px 0px;
	}
	#pageIndex .secArchitecture .descHolder{
		width: 100%;
		background: none;
		padding: 0 0 0 0px;
		float: none;
	}
	#pageIndex .secArchitecture .imgHolder{
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}
	#pageIndex .secArchitecture .imgHolder img{
		width: 100%;
		height: auto;
	}

	#pageIndex .secInterior {
		width: 80%;
		padding: 50px 0 50px 0px;
	}
	#pageIndex .secInterior .descHolder{
		width: 100%;
		background: none;
		padding: 0 0 0 0px;
		float: none;
	}
	#pageIndex .secInterior .imgHolder{
		width: 100%;
		margin-top: 0px;
		float: none;
		margin-bottom: 30px;
	}
	#pageIndex .secInterior .imgHolder img{
		width: 100%;
		height: auto;
	}
	#pageIndex .secInterior .imgHolder img:nth-child(2){
		display: none;
	}

	#pageIndex .secPlan {
		width: 80%;
		padding: 50px 0 50px 0px;
		clear: both;
	}
	#pageIndex .secPlan .descHolder{
		width: 100%;
		background: none;
		padding: 0 0 0 0px;
		float: none;
	}
	#pageIndex .secPlan .imgHolder{
		position: relative;
		width: 100%;
		margin-top: 0px;
		float: none;
		margin-bottom: 30px;
	}
	#pageIndex .secPlan .imgHolder img{
		width: 100%;
		height: auto;
	}
	#pageIndex .secPlan .imgHolder img:nth-child(2){
		display: none;
	}

	#pageIndex .secManagement {
		width: 80%;
		padding: 50px 0 80px 0px;
	}
	#pageIndex .secManagement .descHolder{
		width: 100%;
		padding: 0 0 0 0px;
		float: none;
	}
	#pageIndex .secManagement .imgHolder{
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}
	#pageIndex .secManagement .imgHolder img{
		width: 100%;
		height: auto;
	}

	#pageAbout .secBanner {
		background-size: auto 100%;
	}
	#pageAbout .secContent {
		width: 80%;
		margin: 0 auto 0 auto;
		padding: 70px 0 70px 0px;
		text-align: center;
	}
	#pageAbout .secContent .imgHolder {
		width: 100%;
	}
	#pageAbout .secContent p{
		width: 100%;
		font-size: 15px;
		line-height: 30px;
	}

	#pagePeople .secBanner {
		background-size: auto 100%;
	}
	#pagePeople .secContent {
		width: 80%;
		padding: 60px 0 60px 0px;
	}
	#pagePeople .secContent ul{
		width: 100%;
		text-align: center;
	}
	#pagePeople .secContent li{
		width: 100%;
		margin: 0 0 15px 0px;
		float: none;
	}
	#pagePeople .secContent li:first-child{
		width: 100%;
	}
	#pagePeople .secContent li:nth-child(4),
	#pagePeople .secContent li:nth-child(7),
	#pagePeople .secContent li:nth-child(12),
	#pagePeople .secContent li:nth-child(5n+2){
		margin: 0 0 15px 0px;
	}
	#pagePeople .secContent li:nth-child(2),
	#pagePeople .secContent li:nth-child(5),
	#pagePeople .secContent li:nth-child(10){
		margin: 0 0 15px 0px;
	}
	#pagePeople .secContent li img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto 0 auto;
	}

	#pageCareer .secBanner {
		background-size: auto 100%;
	}
	#pageCareer .secContent {
		width: 80%;
		margin: 0 auto 0 auto;
		padding: 60px 0 60px 0px;
	}
	#pageCareer .secContent .secDetails {
		width: 100%;
		padding: 0 0 30px 0px;
		float: none;
		border-right: none;
	}

	#pageCareer .secContent .secListing {
		width: 100%;
		float: none;
		border-top: 1px solid #f0f0f0;
	}

	#pageProjectList .bgArchitect {
		background-size: auto 100%;
	}
	#pageProjectList .bgInterior {
		background-size: auto 100%;
	}
	#pageProjectList .secBrief {
		width: 80%;
		margin: 65px auto 60px auto;
	}
	#pageProjectList .secListing {
		width: 80%;
		padding: 60px 0 60px 0px;
	}
	#pageProjectList .secListing li{
		position: relative;
		width: 100%;
		height: 250px;
		float: left;
		margin-bottom: 25px;
	}

	#pageProjectDetails .secFeaturedImage {
		height: 50vh;
	}
	#pageProjectDetails .secFeaturedImage img{
		width: auto;
		height: 100%;
	}
	#pageProjectDetails .secBrief {
		width: 80%;
	}
	#pageProjectDetails .secBrief .descHolder {
		width: 100%;
	}
	#pageProjectDetails .secBrief .typeHolder {
		width: 100%;
		margin-right: 0px;
		margin-bottom: 30px;
		float: none;
	}
	#pageProjectDetails .secBrief .nameHolder {
		width: 100%;
		float: none;
	}
	#pageProjectDetails .secBrief h1{
		font-size: 20px;
		line-height: 25px;
	}
	#pageProjectDetails .secBrief p{
		margin-bottom: 5px;
	}
	#pageProjectDetails .secBrief nav{
		position: relative;
		width: 100%;
		left: 0px;
	}
	#pageProjectDetails .secBrief nav li{
		margin: 0 50px 0 0px;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	#pageProjectDetails .secSpecs {
		width: 80%;
		padding: 70px 0 70px 0px;
	}
	#pageProjectDetails .secSpecs {
		width: 80%;
		padding: 70px 0 70px 0px;
	}
	#pageProjectDetails .secSpecs .specsHolder{
		width: 100%;
		margin: 0 40px 0 0px;
		float: none;
	}
	#pageProjectDetails .secSpecs .slidesHolder{
		width: 100%;
		float: none;
	}

	#pageServices .secBanner {
		background-size: auto 100%;
	}
	#pageServices .secListing {
		width: 80%;
		margin: 65px auto 60px auto;
	}
	#pageServices .secListing li{
		width: 100%;
		margin: 0 0 50px 0px;
		float: none;
	}
	#pageServices .secListing .icoHolder {
		margin-bottom: 15px;
	}
	#pageServices .secListing h2{
		margin-bottom: 10px;
	}

	#pageContact .secBanner {
		background-size: auto 100%;
	}
	#pageContact .secContent {
		width: 80%;
		padding: 65px 0 65px 0px;
	}
	#pageContact .secContent .contactHolder{
		width: 100%;
		float: none;
		margin-bottom: 50px;
	}
	#pageContact .contactHolder li{
		vertical-align: top;
	}
	#pageContact .formContact {
		width: 100%;
		float: none;
		border-top: 1px solid #f0f0f0;
		padding-top: 20px;
	}
	#pageContact .formContact .secLeft {
		width: 100%;
		float: none;
	}
	#pageContact .formContact .secRight {
		width: 100%;
		float: none;
	}
	#pageContact .formContact input[type="submit"]{
		width: 100%;
	}
}