html, body, body * { box-sizing: border-box; padding:0 0 0 0; margin: 0 0 0 0; }

html { font-size: 100%; word-spacing: -1px; }
:hover, :focus, :active {  }

html {
	font-family: Raleway, "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	font-weight: normal; font-weight: 400; color: #333;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.04);}

body { margin: 2.5% 3.75%; font-size: 1em; line-height: 1.5; width: 92.5%; max-width: 1728px; background-color: white; }

p, ul, li { font-size:1em; }

a { color: teal; font-weight: normal; cursor: pointer; text-decoration: none; background: transparent; transition:color 0.2s ease; -moz-transition:color 0.2s ease; -webkit-transition:color 0.2s ease; -o-transition:color 0.2s ease; }
a:hover { text-decoration: underline; outline: 0; }
::-moz-selection { background: teal; color: #fff; text-shadow: none; }
::selection { background: teal; color: #fff; text-shadow: none; }
a:active, a:focus { position:relative; }

.footer { font-size:0.85em; margin-bottom:1.5em; }
.footer small a { color:#000; }

blockquote { background-color:#ADEBE7; padding:1.5em; margin:1.25em 0; }
blockquote p { font-size:0.9em;line-height:1.4; }
blockquote p:before { color: #fff; font-size:2.5em; line-height:0.0125; position:relative; top:0.5em; margin-right:0.125em; font-family: Oswald !important; content:"\201C"; opacity:0.9; margin-top:-1.25em; margin-bottom:-1.25em;}
blockquote p:after {color: #fff; font-size:2.5em; line-height:0.0125; position:relative; top:0.5em; margin-left:0.125em; font-family: Oswald !important; content:"\201D"; opacity:0.9; margin-top:-1.25em; margin-bottom:-1.25em;}

cite { font-size:0.8em; line-height:1.333; margin:0 0 0 0.5em; display:block; opacity:0.875;}
cite:before {content:"- ";}
cite:after {}

p { margin-bottom:1em; }

h1, h2, h3, h4, h5 { font-family: Oswald }
h1 { clear:both; margin-top:1em; font-weight: normal; font-size: 1.5em; color: #444; text-rendering: optimizeLegibility; line-height: 1.25; }
h2 { font-weight: normal; font-size: 1.25em; color: #777; margin: 0 0 1em 0; line-height: 1.125; }

.header { float:left; margin-bottom: 1.5em; }
.logo { float:left; width: 19%; margin-bottom:1em; opacity: 0.85; }
.logo img {  float:left; width: 100%; height:auto; }

#desktopnav { float:right; text-align:right; width:59%; font-family: "Oswald"; }
#desktopnav ul { float:right; list-style-type:none; margin:0; padding:0; font-size:1.25em; line-height:1.25; word-spacing:-2pt; text-align:right; }
#desktopnav ul li { float:left; margin-left:1em; }
#desktopnav ul li a { transition:0.5s ease; text-decoration:none; color:#333; border-bottom: solid 0.1425em #fff; }
#desktopnav ul li a:hover { transition:0.5s ease; border-bottom: solid 0.1425em teal; }

#home .home, #interiors .interiors, #kitchens .kitchens, #showers .showers, #exteriors .exteriors, #decks .decks, #pavers .pavers, #contact .contact { border-bottom: solid 0.1425em #000 !important; color:#000; }

.biopic { max-width:33.3%; width:12em; height:auto; margin:0 0 0.4em 0.8em; float:right; }

.main { float:left; clear:left; margin-bottom:1.5em; }

.left { float:left; width:48.7%; margin:0 1.2% 1em 0; }
.right { float:right; width:48.7%; margin:0 0 1em 1.2%; }

.left.lefthasgridzy { float:left; width:58.7%; margin:0 1.2% 1em 0; }
.left.leftoppositegridzy { float:left; width:38.7%; margin:0 1.2% 1em 0; }

.right.righthasgridzy { float:right; width:58.7%; margin:0 0 1em 1.2%; }
.right.rightoppositegridzy { float:right; width:38.7%; margin:0 0 1em 1.2%; }

#home .left { width:65.7%; margin:0 1.2% 1em 0; }
#home .right { width:31.7%; margin:0 0 1em 1.2%; }

.getintouch {  }
.getintouch .contactinfo {  }

.getintouch h2 { margin-bottom: auto; line-height:1.5 }

.footer { float:left; width:100%; }
.footer p { line-height:1.125; }
.footer .credit { line-height:2; opacity:0.7; font-size:0.75em; }


/* -- GRIDZY -------------------------------------------------- */

.gridzy {display:block; float:left; width: 100%; height: auto; margin-top: 0.5em; margin-bottom: 1em; }

.gridzy a {box-shadow:  0 0 0.5em rgba(0,0,0,0.03); z-index: 0;}

.gridzy a:after {content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; box-shadow: none;}
.gridzy a:hover:after {content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; box-shadow: none;}

.gridzy a img {filter: brightness(1); transition: filter 0.45s;}
.gridzy a:hover img {filter: brightness(1.04);}


/* -- CSS Animations ------------------------------------------- */

.delay05 { -webkit-animation-delay: .5s; animation-delay: .5s;}
.delay13 { -webkit-animation-delay: 1.3s; animation-delay: 1.3s;}
.delay22 { -webkit-animation-delay: 2.2s; animation-delay: 2.2s;}
.delay30 { -webkit-animation-delay: 3s; animation-delay: 3s;}

.animated { -webkit-animation-duration: 0.67s; animation-duration: 0.67s;
 -webkit-animation-fill-mode: both; animation-fill-mode: both; }

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }}

.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
from { opacity: 0;
-webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); }
to { opacity: 1;
 -webkit-transform: none; transform: none; }}

@keyframes fadeInDown {
from { opacity: 0;
-webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); }
to { opacity: 1;
-webkit-transform: none; transform: none; }}

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 1920px) {

.left { width:48.7%; }
.right { width:48.7%; }
}


/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 1600px) {

.left { width:48.7%; }
.right { width:48.7%; }
}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 1440px) {

.left { width:48.7%; }
.right { width:48.7%; }
}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 1280px) {

.left { width:37.5%; }
.right { width:59.9%; }
}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 1024px) {

#desktopnav ul { font-size:1.125em; }

.left { width:48.7%; }
.right { width:48.7%; }
}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 800px) {

#desktopnav ul { line-height:1.2; font-size:1.2em; }
#desktopnav ul li { float:none; margin-bottom: 0.2em; }
#desktopnav ul li a { float:none; color:#777; }
#desktopnav ul li a { transition:0.5s ease; color:#333; border-bottom: none; }
#desktopnav ul li a:hover { transition:0.5s ease; border-bottom: none; }
#home .home, #interiors .interiors, #kitchens .kitchens, #showers .showers, #exteriors .exteriors, #decks .decks, #pavers .pavers, #contact .contact { border-bottom: none !important; padding: 0 0.375em; margin-right: -0.18525em; background-color:teal; color: white; border-radius: 1px; }

.left { width:100%; margin:0 0 1em 0;}
.right { width:100%; }

#home .left { width: 100%; }
#home .right { width: 100%; }

.left.lefthasgridzy,
.right.righthasgridzy,
.left.leftoppositegridzy,
.right.rightoppositegridzy { width: 100%; }

.logo { width: 60%; }
#desktopnav { width:39%; }
}


/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 480px) {

#desktopnav ul { }

.logo { margin-top:2vh; margin-bottom: 3em; }

#desktopnav { margin-top:2vh; }

blockquote { padding:1.5em; margin: 1.5em -1.5em; }

h1 { font-size: 1.125em; }
h2 { font-size: 1em; }

}

/* -- Media query ------------------------------------------- */
@media only screen and (max-width: 360px) {

}