/* =============================================================================
   CSS Reset
   ========================================================================== */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	font-variant: normal;
	text-align: left;
	}
	
* { box-sizing: border-box; }	

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, div {
	display: flex;
	}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
	content: ''; content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
	
a { text-decoration: none; }

img { display: block; width: 100%; }

.site { word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; }

html, body { font-size: 14px; width: 100%; min-height: 100vh; -webkit-text-size-adjust: 100%; color: #616059; background: #D6D2CB; font-family: 'Open Sans', sans-serif; font-weight: 300; }


/* =============================================================================
   General Site Construction
   ========================================================================== */
   
/* Type Base */

h1 { color: #fff; font-size: 1em; line-height: 1.5em; text-align: center; margin: 40px 0 30px; font-weight: 300; }
h2, h3 { color: #25303E; font-size: 1em; font-weight: 600; letter-spacing: 2px; margin-bottom: 0.5em; }
h4 { font-size: 1em; line-height: 1em; font-weight: 600; letter-spacing: 2px; }

p { line-height: 1.5em; }
p + p { margin-top: 0.25em; }
.contact a { font-size: 0.85em; }

header { flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: url('../img/hero-cavendish-square.jpg') no-repeat; background-position: center bottom;  background-size: auto 100%; padding: 60px 40px 40px; }
header .logo { width: 50%; max-width: 170px; }
header .nav { color: #fff; font-size: 0.85em; font-weight: 600; letter-spacing: 3px; margin-bottom: 30px; text-align: center; line-height: 2em; }
header .nav a { color: #fff; }
header .nav a:hover { color: #D6D2CB; }
.scroll { width: 38px; }
.scroll:hover { opacity: 0.6; }

.content { position: relative; }

section { padding: 50px 7.5%; flex-direction: column; align-items: center; }
section h2, section p { text-align: center; }
section p { width: 85%; }

article { background: #fff; flex-direction: column; margin-top: 40px; position: relative; }
article p { text-align: left; width: 100%; }
.one-third {flex-direction: column; padding: 25px 15px 15px; position: relative; }
.two-thirds { align-items: flex-start; }
.graphics .one-third, .interiors .one-third { order: 2; }
.graphics .two-thirds, .interiors .two-thirds { order: 1; }
.service-img-wrap { flex-direction: row; align-items: flex-start; margin-top: 40px; }
.graphics .service-img-wrap { justify-content: flex-end; margin-top: 20px; }
.service-img-wrap img { width: calc(50% - 5px); }
.graphics .service-img-wrap img { width: 65%; }
.service-img-wrap img:first-child { margin-right: 10px; }
#scroll, #signage, #graphics, #electrical, #interiors { position: absolute; top: -80px; }
.graphics p { width: 92.5%; }
.chip { position: absolute; left: 10px; top: -25px; width: 46px; height: 40px; background: url('../img/icon-arrow-up.svg') no-repeat; }    
   
   
.contact { flex-direction: column; align-items: center; padding: 75px 7.5%; background: url('../img/contact-fret-cut.jpg') no-repeat; background-position: center bottom;  background-size: auto 100%; }
.contact h4, .contact p { color: #fff; text-align: center; }
.contact h4 { margin-bottom: 1.5em; }
.contact p { margin-bottom: 2em; }
.contact a { color: #fff; }
.contact a.button { border: 1px solid #fff; font-weight: 600; letter-spacing: 3px; padding: 10px 20px; }
.contact a img { display: inline-block; margin-bottom: -2px; margin-right: 15px; height: 12px; width: auto; }   
   
footer { background: #25303E; padding: 70px 17.5% 95px; flex-direction: column; align-items: center; }
footer .logo { width: 50%; max-width: 170px; padding-bottom: 40px; }
footer p { text-align: center; color: #D6D2CB; font-size: 0.7em; }
footer .footer-nav { font-size: 0.85em; font-weight: 600; letter-spacing: 3px; margin-bottom: 30px; }
footer p a { color: #D6D2CB; }
footer p a:hover { color: #fff; }

@media only screen and (min-width: 360px) {
	
	header { padding: 60px 50px 40px; }
	
}/* 360 End */ 	

@media only screen and (min-width: 375px) {
	
	h1 { margin: 50px 0 40px; }
	header .nav { margin-bottom: 40px; line-height: 2.25em; }
	
}/* 375 End */

@media only screen and (min-width: 414px) {	
	
	h1 { font-size: 1.15em; }
	
}/* 414 End */

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 812px) and (orientation : portrait) {
	    
	h1 { font-size: 1.15em; margin: 60px 0 50px; }
	header .nav { margin-bottom: 60px; }
	    
}/* iPhone X Portrait End */

@media only screen and (max-width: 567px) {
	
	.footer-nav span { display: none; }
	
}/* Max 567 End */	

@media only screen and (min-width: 568px) {
	
	header { padding: 60px 65px 40px; }
	section p { width: 90%; }
	article p { width: 100%; }
	.graphics p { width: 100%; }
	.one-third { padding: 30px 20px 20px; }
	.service-img-wrap img { width: calc(50% - 10px); }
	.graphics .service-img-wrap img { width: 65%; }
	.service-img-wrap img:first-child { margin-right: 20px; }
	footer { padding: 70px 12.5% 95px; }
	.footer-nav br { display: none; }
	.footer-nav { line-height: 2.5em; }	

}/* 568 End */

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px) and (orientation : landscape) {
	
	header .logo { max-width: 150px; }    
	h1 { font-size: 1.15em; margin: 40px 0 30px; }
	header .nav { margin-bottom: 40px; }
	    
}/* iPhone 5/SE Portrait End */	

@media only screen and (min-width: 667px) {
	
	footer { padding: 70px 16% 95px; }
	
}/* 667 End */	

@media only screen and (max-width: 730px) {
	
	.nav-stack { display: none; }
	
}/* Max 730 End */

@media only screen and (min-width: 700px) {

	.contact { background-size: 100% auto; }

}/* 700 End */

@media only screen and (min-width: 731px) {
	
	header { padding: 60px 85px 40px; }
	header .nav br { display: none; }
	.contact { padding: 75px 15%; }
	footer { padding: 70px 20% 95px; }

}/* 731 End */

@media only screen 
    and (min-device-width : 411px) 
    and (max-device-width : 736px) and (orientation : landscape) {
	    
	    header { padding: 50px 85px 40px; }
	    h1 { margin: 30px 0 20px; }
	    header .nav { margin-bottom: 30px; }
	    
}/* iPhone 6/7/8+ Pixel2 Landscape End */		    

@media only screen and (min-width: 768px) {
	
	/* Type Base */
	h1 { font-size: 1.75em; }
	h2, h3 { font-size: 1em; }
	h4 { font-size: 1em; }
	p { font-size: 1em; }
	
	.graphics p { width: 97.5%; }
	.electrical p { width: 95%; }
	.contact a { font-size: 0.85em; }
	
}/* 768 End */	

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) and (orientation : portrait) {
	  
	  header .logo { max-width: 200px; }
	  h1 { margin: 80px 0 80px; padding: 0 20px; }  
	    
}/* iPad Portrait End */		    

@media only screen and (min-width: 1024px) {
	
	/* Type Base */
	h1 { max-width: 800px; margin: 75px 0; }
	
	#scroll, #signage, #graphics, #electrical, #interiors { position: absolute; top: -100px; }
	
	section { padding: 75px 7.5%; }
	section p { width: 70%; }
	
	article { flex-direction: row; margin-top: 50px; }
	article p { width: 100%; }
	.graphics p { width: 95%; }
	.graphics .one-third, .interiors .one-third { order: 1; }
	.graphics .two-thirds, .interiors .two-thirds { order: 2; }
	.one-third { width: 33.3333%; padding: 25px; }
	.service-img-wrap { margin-top: auto; }
	.graphics .service-img-wrap { justify-content: flex-start; margin-top: auto; }
	.two-thirds { width: 66.6666%; align-items: flex-start; }
	
	.signage .chip, .electrical .chip { top: 15px; left: -25px; background: url('../img/icon-arrow-left.svg') no-repeat; }
	.graphics .chip, .interiors .chip { top: 15px; right: -35px; left: auto; background: url('../img/icon-arrow-right.svg') no-repeat; }
	
	.contact { padding: 125px 15%; }	 
	
}/* 1024 End */

@media only screen 
    and (min-device-width : 1024px) 
    and (max-device-width : 1366px) and (orientation : portrait) {
	  
	  header .logo { max-width: 225px; }
	  h1 { font-size: 2.25em; margin: 120px 0; max-width: 750px; } 
	  header .nav { font-size: 1em; margin-bottom: 120px; } 
	  .scroll { width: 50px; }
	    
}/* iPad Pro Portrait End */

@media only screen and (min-width: 1280px) {
	
	section { padding: 75px 10%; }
	
}/* 1280 End */

@media only screen and (min-width: 1366px) {
	
	section p { max-width: 650px; }
	.signage p { width: 95%; }
	.interiors p { width: 95%; }
	article { max-width: 1080px; }
	.contact { padding: 150px 15%; }
	
}/* 1366 End */	

@media only screen and (min-width: 1440px) {
	
}/* 1440 End */

@media only screen and (min-width: 1600px) {
	
	header { background-size: 100% auto; }
	
}/* 1440 End */