@charset "utf-8";

/* Content styles */
html {overflow-y:scroll; height:100%;}
body {	
	color:#3b3b3b;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size:14px;	
	margin:0px;
	height:100%;
}

:focus { -moz-outline-style: none;}
img:focus { -moz-outline-style: none;}

a {color:#472A61; text-decoration:none;}
a:hover {text-decoration:underline;}
a:focus, a:hover, a:active { outline:none;}

hr {background-color:#cccccc;border:none;color:#cccccc;height:1px;}

.clear {clear:both;}
.invisible{position : absolute; top : -1000px; width:1px; height:1px; overflow:hidden;}

/* Blog Styles */

.alignleft {float:left; margin-right:15px; margin-bottom:5px;}
.alignright {float:right; margin-left:15px; margin-bottom:5px;}

/* Structure Styles */

.wrapper {border-top:40px solid #fff; background:#e9e9e9;}

	.header {width:1140px; margin:auto; height:126px; position:relative;}
		.header .logo {width:183px; height:69px; position:absolute; left:478px; top:32px;}
			.header .logo a {display:block; width:183px; height:69px; background:url(../images/structure/logo.png) no-repeat;}
				.header .logo a:hover {text-decoration:none; opacity:0.8;}
		.header .nav-left {position:absolute; width:447px; border-top:1px solid #BBBDCA; border-bottom:1px solid #BBBDCA; top:52px; left:0; text-align:center;}
			.header .nav-left a {display:inline-block; text-transform:uppercase; height:39px; line-height:39px; font-size:13px; font-weight:500; color:#686D95; font-family: 'Montserrat', sans-serif; margin:0px 30px;}
			.header .nav-left a:hover {text-decoration:none; color:#472A61;}
			.header .nav-left .current {color:#472a61;}
		.header .nav-right {position:absolute; width:447px; border-top:1px solid #BBBDCA; border-bottom:1px solid #BBBDCA; top:52px; right:0; text-align:center;}
			.header .nav-right a {display:inline-block; text-transform:uppercase; height:39px; line-height:39px; font-size:13px; font-weight:500; color:#686D95; font-family: 'Montserrat', sans-serif; margin:0px 30px}
			.header .nav-right a:hover {text-decoration:none; color:#472A61;}
			.header .nav-right .current {color:#472a61;}
			
	.content {width:1140px; margin:auto; padding-bottom:50px; -webkit-box-sizing:}
		.content * { border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
		
		.content h2 {font-size:15px; line-height:23px; font-weight:400; text-transform:uppercase; margin-bottom:20px; font-family: 'Cardo', serif;}
		.content p {padding-bottom:20px;}
		.content strong {font-weight:500;}
		.content a {text-decoration:underline;}
		.content ul {list-style:square; margin-left:23px;}
		.content ul li {padding-bottom:5px;}
		.content .credit {font-size:0.8em;}
		
		.content .home1 {float:left; width:420px; height:288px; background:url(../images/home/1.jpg) no-repeat; margin:0px 9px 9px 0px;}
		.content .home2 {float:left; display:table; width:288px; height:288px; background:#BBBDCA; margin:0px 9px 9px 0px;}
			.content .home2 .textbox {display:table-cell; vertical-align:middle; text-align:center; color:#fff; font-size:18px; text-transform:uppercase; line-height:27px;}
				.content .home2 .textbox p {padding:30px;}
				.content .home2 .textbox span {display:block; width:50px; height:7px; background:#fff; margin:auto;}
		.content .home3 {float:right; width:413px; height:572px; background:url(../images/home/3.jpg) no-repeat;}
		.content .home4 {float:left; width:470px; height:275px; background:url(../images/home/4.jpg) no-repeat; margin-right:9px;}
		.content .home5 {float:left; width:238px; height:275px; background:url(../images/home/5.jpg) no-repeat; margin-right:9px;}
		
		
		.content .large-textbox {float:left; width:852px; height:590px; background:#fff; padding:60px; line-height:20px; margin-bottom:10px;}
			.content .large-textbox .column1 {width:45%; float:left;}
			.content .large-textbox .column2 {width:45%; float:right;}
		.content .large-opposite {float:right;}
			
		.content .small-textbox {float:right; width:278px; height:590px; background:#fff; line-height:20px; margin-bottom:10px;}
			.content .small-textbox .textarea {padding:30px;}
				.content .small-textbox .textarea span {display:block; width:50px; height:7px; background:#F6F5ED; margin-bottom:30px;}
		.content .small-opposite {float:left;}
		
		.content .bluebg {background:#979BB8;}
		.content .brownbg {background:#866649;}
		.content .greybg {background:#9F9A9C;}
		section.portfolio-row {display: block; clear: both; width: 100%; margin-bottom:20px;}
		.content .portfolio-title-box {float:left; display:table; width:277px; height:289px; text-align:center; text-transform:uppercase; line-height:27px; margin-right:10px; margin-bottom:10px;}
			.content .portfolio-title-box .textbox {display:table-cell; position:relative; vertical-align:middle; text-align:center; color:#fff; font-size:18px; text-transform:uppercase; line-height:27px;}
				.content .portfolio-title-box .textbox p {padding:30px;}
				.content .portfolio-title-box .textbox span {display:block; width:50px; height:7px; background:#fff; margin:auto;}
				.content .portfolio-title-box .textbox a {display:block; position:absolute; top:0px; width:100%; height:289px; text-decoration:none;}
					.content .portfolio-title-box .textbox a:hover {background:#fff; opacity:0.2;}
		.content .portfolio-img {float:left; width:277px; height:289px; margin-right:10px; margin-bottom:10px;}
			.content .portfolio-img a:hover {opacity:0.8;}
		.content .portfolio-last {margin-right:0px;}
		.content .portfolio-content {float:left; width:277px; height:588px; background:#fff; margin-right:10px; margin-bottom:10px; padding:67px 36px 0px 36px; text-align:left;}
			.content .portfolio-content span {display:block; width:50px; height:7px; background:#F6F5ED; margin-bottom:49px;}
			.content .portfolio-content p {line-height:1.6em;}
			.content .portfolio-content a {display:inline-block; background:#4e4e4e; color:#fff; font-family: 'Montserrat', sans-serif; font-size:12px; text-transform:uppercase; padding:8px 13px; margin-right:4px; margin-top:20px; text-decoration:none;}
			.content .portfolio-content a:hover {text-decoration:none; background:#472A61;}
			.content .portfolio-content .photo-credit {background:none; color:#472A61; font-family: 'Cardo', serif; font-size:inherit; text-transform:none; padding:0px; margin:0px 0px 0px 0px; text-decoration:underline;}
			.content .portfolio-content .photo-credit:hover {text-decoration:underline; background:none;}
	
		.description-2col {float:left; width:564px; height:588px; background:#fff; margin-right:10px; margin-bottom:10px; padding:67px 36px 0px 36px; text-align:left;}
		.description-3col {float:left; width:851px; height:588px; background:#fff; margin-right:10px; margin-bottom:10px; padding:67px 36px 0px 36px; text-align:left;}
		.description-4col {background:#fff; margin-bottom:10px; padding:36px; text-align:left;}
			.descriptionbox span {display:block; width:50px; height:7px; background:#F6F5ED; margin-bottom:49px;}
			.descriptionbox p {line-height:1.6em;}
			.descriptionbox a {display:inline-block; background:#4e4e4e; color:#fff; font-family: 'Montserrat', sans-serif; font-size:12px; text-transform:uppercase; padding:8px 13px; margin-right:4px; margin-top:20px; text-decoration:none;}
			.descriptionbox a:hover {text-decoration:none; background:#472A61;}
		.beforeafter-img {float:left; width:277px; height:289px; margin-right:10px; margin-bottom:10px; position:relative;}
			.beforeafter-img img {position:absolute; top:0; left:0;}
			.beforeafter-img .titlearea {display:table; position:absolute; top:0; left:0; width:277px; height:289px;}
				.beforeafter-img .titlebox {display:table-cell; vertical-align:middle; text-align:center; color:#fff; font-size:15px; text-transform:uppercase; line-height:27px;}
					.beforeafter-img .titlebox span {position:relative; display:block; width:50px; height:7px; background:#fff; margin:auto; z-index:2;}
					.beforeafter-img .titlebox p {position:relative; padding:30px; z-index:2;}
					.beforeafter-img .titlebox div {position:absolute; top:0; left:0; width:277px; height:289px; background:#000; opacity:0.5; z-index:1;}
						.beforeafter-img a:hover .titlearea {display:none;}
					
	.footer {background:#fff; padding:33px 0px; text-align:center; color:#a6a6a6; font-size:11px; text-transform:uppercase; font-family: 'Open Sans', sans-serif;}
		.footer a {color:#a6a6a6;}
		.footer a:hover {text-decoration:none; color:#000;}
		.footer .contact-details {margin-bottom:10px;}
		
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin: 5px 0px;} 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }		
		
img.mbl{display:none;}	

#inspiration-content h1{font-size: 40px; line-height: 1.6; color: #452861; margin-bottom: 20px;}	

.inspiration-block{background-size:cover!important; background-position:center center!important; width:100%; display:block; position:relative; height:350px; margin: 100px 0px;}

.inspiration-block .textbox {position: absolute; width: 390px; padding: 50px; background: #9f9a9c; top: -35px; right: 40px; min-height: 345px; color: #fff;}
.inspiration-block.alt .textbox{right:auto; left: 40px; background:#979bb8;}
.inspiration-block .textbox h3 {text-transform: uppercase; font-size: 30px; margin-bottom: 20px; font-family: 'Cardo', serif;}
.inspiration-block .textbox h3:after{content:""; display:block; width: 85px; height: 5px; margin-bottom: 20px; background: #fff; margin-top: 15px;}
.inspiration-block .textbox p {line-height: 1.6;}
.inspiration-block .textbox a {color: #fff; text-decoration: none; padding: 16px; border: 2px solid #c1bebf; border-radius: 30px; display: block; text-align: center; margin-top: 20px;
text-transform: uppercase; font-weight:500;}
.inspiration-block .textbox a:hover{background: #c1bebf;}
.inspiration-block.alt .textbox a{border-color:#c1c3d4;}
.inspiration-block.alt .textbox a:hover{background: #c1c3d4;}

.inspiration-block.main{margin: 0px!important;}
.inspiration-content{display: block; background:#fff; clear: both; width: 100%;}
.inspiration-content p{line-height:1.6;}
.inspiration-content .portfolio-content{float:none; display:inline-block;}
.inspiration-content .rightside {display: inline-block; width: 800px; vertical-align: top; padding: 67px 36px;}
.inspiration-content .rightside img{max-width: 100%; height: auto; text-align:center; margin:auto;}
		
/*MEDIA QUERIES*/
@media (max-width: 1180px){
	.header, .content, .footer{width: 96%!important; margin-left:2%!important; margin-right: 2%!important;}
	.header{height:196px;}
	.header .nav-left, .header .nav-right{top:122px; width:50%;}
	.header .nav-left a, .header .nav-right a{margin:0px 20px;}
	.header .logo{left:calc(50% - 91.5px);}
	
	.content .home1{width:34%; margin:0px 1% 1% 0px;}
	.content .home2{width:30%; margin:0px 1% 1% 0px;}
	.content .home3{width: 34%;}
	.content .home4{width:40%; margin-right: 1%;}
	.content .home5{background-size:cover; width:24%; margin-right: 1%;}
	
	.content .portfolio-content{width:100%!important; height:auto!important; padding-bottom:67px!important;}
	
	.content .large-textbox{height:auto!important; width: 69%;}
	.content .small-textbox{height:100%; width:30%; background:none;}
	.content .small-textbox.about{background: #fff;}
	
	.portfolio-row{display:table!important;}
	.content .portfolio-img{float:none!important; display:inline-block!important; width: 32.3%!important; height: auto!important; margin-right: 1%;}
	.portfolio-img img {height: auto!important; width: 100%!important;}
	.content .portfolio-title-box{float: left!important; display: table!important; width: 100%!important; height:auto!important; margin-right:0;}
	.content .portfolio-title-box .textbox a{height:100%!important;}
	
	.beforeafter-img, .beforeafter-img img, .beforeafter-img .titlearea, .beforeafter-img .titlebox div{max-width: 230px; max-height: 230px;} 
	.content .beforeafter-img.portfolio-last{margin-right:10px;}
	
	.inspiration-content .portfolio-content{width: 30%!important;}
	.inspiration-content .rightside {width: 68%;}
}

@media (max-width: 1000px) {


}

@media (max-width: 991px) {
	.content .large-textbox{height:auto!important; width: 100%;}
	.content .small-textbox{height:auto!important; width:100%;}
	.content .small-textbox.about{text-align: center; padding-top:20px;}
	.content .small-textbox .textarea span{margin: 0px auto 30px;}
	
	img.dsktp{display:none;}
	img.mbl{display:block; max-width: 100%; margin:auto; height:auto;}
}

@media (max-width: 767px) {
	.header {height: 340px!important;}
	.header .nav-left{width:100%!important; border-bottom: none;}
	.header .nav-right{width:100%!important; top:215px!important; border-top: none;}
	.header .nav-left a, .header .nav-right a{margin:10px 0px!important; display:block; line-height:1.6; height:auto;}
	
	.content .home1{width: 100%; margin: 0px 0px 1% 0px; background-size: cover; background-position: center center;}
	.content .home2{width: 100%; margin: 0px 0px 1% 0px;}
	.content .home3{width: 30%; background-size: cover; height: 275px;}
	.content .home4{width: 30%; margin-right: 1%; background-size: cover; background-position: center left;}
	.content .home5{background-size: cover; width: 38%; margin-right: 1%;}
	
		.content .large-textbox .column1, .content .large-textbox .column2{width: 100%;}
	.content{text-align:center;}
		.content .large-textbox, .content .small-textbox{text-align:left;}
	.beforeafter-img{float:none!important; display:inline-block!important; margin:auto!important;}
	
	.inspiration-block{margin: 400px 0px;}

	.inspiration-block .textbox {width: 100%!important; top: -350px!important; right: auto; left:0!important; min-height: 100%!important;}
	.inspiration-block.alt .textbox{right:auto; left: 0!important;}
	.inspiration-block .textbox h3 {text-transform: uppercase; font-size: 30px; margin-bottom: 20px;}
	.inspiration-block .textbox h3:after{margin: 20px auto!important;}
	
	.inspiration-content .portfolio-content{width: 96%!important; padding: 15px 2%!important; height:auto!important;}
	.inspiration-content .rightside {width: 96%; text-align:left; padding: 15px 2%!important;}
	
	.footer{line-height:1.6;}

}

@media (max-width: 650px) {


}

@media (max-width: 575px) {


}

@media (max-width: 450px) {


}

@media (max-width: 400px) {

}