/* HEADER */

.Header{background:rgba(123, 96, 46, 0.9); height:136px; position:fixed; top:0; left:0; right:0; z-index:9; transition:height 0.25s;}
.Header .frame{height:100%; position:relative;}
.Header .site-logo{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.Header .site-logo img{display:block; width:181px; height:94px; transition:width 0.25s, height 0.25s;}


.Header .main-nav{margin:0 20px; padding:0; list-style:none; position:absolute; top:57px; left:0; right:0; line-height:20px; transition:top 0.25s;}
.Header .main-nav li{margin:0 20px; padding:0; display:block;}
.Header .main-nav li:nth-child(-n+4){float:left;}
.Header .main-nav li:nth-child(n+5){float:right;}
.Header .main-nav a{display:block; font:700 16px/20px 'Montserrat', sans-serif; color:#fff; text-transform:uppercase;}
.Header .main-nav a:hover{color:#3b311f;}

.sticky .Header{height:97px;}
.sticky .Header .site-logo img{width:112px; height:58px;}
.sticky .Header .main-nav{top:38px;}

@media screen and (max-width: 1070px){
	.Header .main-nav li{margin:0 10px;}
}

@media screen and (max-width: 960px){
	.Header .main-nav{display:none;}

	.Header{height:97px;}
	.Header .site-logo img{width:112px; height:58px;}
	.Header .main-nav{top:38px;}

	/* Mobile nav order fix */
	.Header .main-nav li:nth-child(5){position:relative; top:100px;}
	.Header .main-nav li:nth-child(7){position:relative; bottom:100px;}
}



/* FOOTER */

.Footer{background:#f3f3f3;}
.Footer .about{padding:60px 90px 60px 0; overflow:hidden;}
.Footer .about p{margin:0;}
.Footer .about a{font:700 16px/20px 'Montserrat', sans-serif; text-transform:uppercase;}

.Footer .contact{float:right; width:500px; max-width:40%; box-sizing:border-box; padding-top:60px;}
.Footer .contact .phone-email{padding-bottom:25px;}
.Footer .contact .phone-email a{font:700 21px/40px 'Montserrat', sans-serif;}

.Footer .contact .social-media{float:left; padding-right:10px;} 
.Footer .contact .social-media img{margin-right:15px; margin-top: 10px; opacity:1; transition:opacity 0.25s;} 
.Footer .contact .social-media a:hover img{opacity:0.5} 

.Footer .contact .footer-links{font-size:14px; margin-top:-5px;} 
.Footer .contact .footer-links a{font-weight:400; margin-right:20px;} 

.Footer .contact .copyright{font-size:14px;} 

@media screen and (max-width: 960px){
	.Footer .about{display:none;}
	.Footer .contact{float:none; width:auto; max-width:initial; padding:30px 0 15px;}
}

@media screen and (max-width: 480px){
	.Footer .contact .social-media{float:none; padding:0 0 15px 0;}
	.Footer .contact .phone-email a{font:700 18px/36px 'Montserrat', sans-serif;}
}



/* MOBILE NAV */

#nav-toggle{display:none;}
.Header .mobile-nav-toggle{display:none;}

@media screen and (max-width: 960px){
	.Header .mobile-nav-toggle{display:block; position:absolute; top:33px; right:15px; width:30px; height:30px; background:url(../img/mobile-nav-toggle.png);}

	#nav-toggle:checked + .Header .mobile-nav-toggle::after{content:""; position:fixed; top:0; left:0; bottom:0; right:0; background:url(../img/close.png) top 33px right 15px no-repeat rgba(0,0,0,0.9);}
	#nav-toggle:checked + .Header .main-nav{display:block; position:fixed; z-index:1; top:100px !important; left:10%; right:10%; padding:20px 0; background:#7b602e;}
	#nav-toggle:checked + .Header .main-nav li{display:block; float:none; text-align:center; padding:15px 0;}
	#nav-toggle:checked + .Header .main-nav li a:hover{color:#fff;}
}



/* COMMON BANNER & CONTENT */

.Common-Banner{background:url(../img/interior-banner.jpg) center center; background-size:cover; position:relative;}
.Common-Banner .spacer{width:100%; height:auto; min-height:350px; display:block;}
.Common-Banner .heading{font:700 30px/30px 'Montserrat', sans-serif; position:absolute; top:65%; left:50%; width:600px; text-align:center; transform:translate(-50%, -50%);}
.Common-Banner .heading i{font:400 40px/40px 'Courgette', sans-serif; color:#7b602e; position:relative; left:5px; top:2px;}

.Common-Content .frame{padding:30px 0;}

@media screen and (max-width: 960px){
	.Common-Banner .spacer{min-height:250px;}
	.Common-Banner .heading{font-size:20px; line-height:20px; width:90%;}
	.Common-Banner .heading i{display:block; font-size:25px; line-height:25px;}
	.Common-Content .frame{padding:15px 0;}
}

/* PAGE TESTIMONIAL */

.Page-Testimonial{background:#f6ebd6;}
.Page-Testimonial .frame{max-width:830px; padding:60px 0 30px; text-align:center; margin: -15px auto 0 auto;}

@media screen and (max-width: 480px){
.Page-Testimonial .frame{padding:40px 0 15px;}
}



/* GALLERY */

.Gallery-Links{text-align:center; padding:15px 0 30px;}
.Gallery-Links a{text-align:center; display:inline-block; border:2px solid #3b311f; font:700 18px/24px 'Montserrat', sans-serif; padding:8px 16px; margin:0 5px; text-transform:uppercase;}
.Gallery-Links a:hover, .Gallery-Links a.active{color:#7b602e; border-color:#7b602e;}

.Gallery-Images{margin:0 -15px 30px; overflow:hidden;}
.Gallery-Images a{display:block; float:left; width:25%; box-sizing:border-box; padding:15px;}
.Gallery-Images a:focus{outline:none;}
.Gallery-Images a:hover img{opacity:0.25;}
.Gallery-Images img{width:100%; display:block; opacity:1; transition:opacity 0.25s;}

@media screen and (max-width: 960px){
	.Gallery-Links{padding-bottom:15px;}
	.Gallery-Links a{display:block; margin-bottom:15px;}

	.Gallery-Images{margin-bottom:15px; padding:0 5px;}
	.Gallery-Images a{width:50%;}
}

@media screen and (max-width: 480px){
	.Gallery-Images a{width:100%;}
	.Gallery-Links{padding:15px 0 0px;}
.Gallery-Links a{font:700 14px/18px 'Montserrat', sans-serif; padding:8px 8px;}
}
