@charset "UTF-8";
/* CSS Document */

body {
background: #747373;
margin:0 auto;
height: 100%;
color:#000;
font-size:100%;
font-family: 'cormorantregular', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
text-align: left;
padding: 0;
margin:0;}

p {margin: 0 0 15px 0; line-height: 160%; font-size: 140%;}
	
ul {margin: 10px 0 20px 0; line-height: 160%; padding: 0 0 0 10px;}
li {margin: 0 0 5px 13px;}

ul li p {margin: 0 0 0 0; line-height: 130%;}

strong {
   font-family: 'cormorantsemibold', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight:normal;}
	
em, i {    
	/*font-family: 'source_serif_prolight_italic', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight:normal;*/}


a, a:link, a:visited {color:#8a4527; text-decoration: none;}
a:hover {color:#747373;}
a:focus, a:active {color:#a65430;}


   .container {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
	  -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap;
	  margin-left: auto;
      margin-right: auto;}

	@media (min-width: 1200px) {
      .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;}
    }
	
	@media (max-width: 1250px) {
      .container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;}
	}
	 
 .c1 {width: 100%;} /*header*/
 .c2 {} /*header h1*/
 .c3 {width: 100%;} /*nav*/
 .c4 {width: 100%} /*content*/
 .c5 {}
 .c6 {width: 350px} /*column_l*/
 .c7 {width: 65%} /*column_r*/
 .c7a {width: 87%} /*column_1*/
 .c8 {width: 100%;} /*footer*/


#wrapper {
	background:#fff;
	padding:0;
	clear:both;	}
	

header {
	padding: 0;
	margin: 0;
	position:relative;
    font-family: 'robotobold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#621e00;
	background: #fff}
	
header h1, header nav {display:inline-block;}

header h1 {
	font-size:215%;
    font-family: 'robotobold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin:20px 0 0;
	color:#00573d;
	line-height:110%;}

header h1 a, header h1 a:link, header h1 a:visited {color:#00573d; text-decoration: none;}
header h1 a:hover {color:#4c8675; text-decoration:none;}
header h1 a:focus, header h1 a:active {color:#00573d;}
	
header h2 {
	font-size:110%;
	font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin:0 0 7px 1.5%;
	line-height:110%;
	color:#222;}

.caps {font-size: 75%;}

.logo {
  width:350px;
  margin: 20px 20px 15px 8%;
  float: left;}

.logo img {width:100%; height:auto;}

.social_head {	
	float: right; 
	position: absolute; 
	right: 8%; 
	top: 13px;}

.social_head img {
	width: 24px; 
	height: auto;
	margin: 0 0 0 15px;}


#head_image_home {
	min-height: 600px;
	background: #86725e url("images/header-home.jpg") repeat-x left bottom;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;}

#head_image_services {background: #86725e url("images/header-services.jpg") repeat-x left bottom;}
#head_image_hardscapes {background: #86725e url("images/header-hardscapes.jpg") repeat-x left bottom;}
#head_image_artisan {background: #86725e url("images/header-artisan.jpg") repeat-x left bottom;}
#head_image_water {background: #86725e url("images/header-water.jpg") repeat-x left bottom;}
#head_image_design {background: #86725e url("images/header-design.png") repeat-x left bottom;}
#head_image_upgrades {background: #86725e url("images/header-upgrades.jpg") repeat-x left bottom;}
#head_image_interiors {background: #86725e url("images/header-interiors.jpg") repeat-x left bottom;}

#head_image_featured {background: #86725e url("images/header-featured.jpg") repeat-x left bottom;}

#head_image_services, #head_image_hardscapes, #head_image_artisan, #head_image_water, #head_image_design, #head_image_upgrades, #head_image_interiors, #head_image_featured {
	min-height: 450px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;}

#head_image_page {background: #86725e url("images/header-page.jpg") repeat-x left bottom;}
#head_image_about {background: #86725e url("images/header-about.jpg") repeat-x left bottom;}

#head_image_page {	
	min-height: 350px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;}

#head_image_about {	
	min-height: 450px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;}


h1 {	
    font-family: 'cinzelregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#621e00;
	margin:0 0 10px;
	font-size:260%;
	line-height:100%;}
	
h2 {	
    font-family: 'cinzelregular', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight:normal;
	color:#621e00;
	margin:0 0 10px 0;
	font-size:190%;
	line-height:140%;}

h3 {
    font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#621e00;
	margin:0 0 20px 0;
	font-size:145%;}
	
h4 {
	font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#621e00;
	margin:0 0 5px 0;
	font-size:130%;}

h5 {
    font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:7px 0 0 0;
	font-size:120%;}

h6 {
	font-weight:normal;
	font-size:90%;
	line-height:110%;
	margin: 0 0 10px;}

.small {font-size:80%;}
	

/*#content {
	width: 1200px;
	text-align:left;
	min-height: 400px;
	margin: 0;}  not being used, poss delete */
	
.pagehead {
	font-family: 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*font-family: 'source_serif_prosemibold', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";*/
	font-weight:normal;
	margin:0 0 5px; 
	font-size:180%;}


.image_container {
	width: 100%;
	padding: 40px 14% 20px; 
	text-align: center;}

.image_container_service {
	width: 100%;
	padding: 0 16% 10px; 
	text-align: center;}


.item_container {
	width: 100%;
	padding: 30px 17% 40px;}


.title_container {
	width: 100%;
	padding: 10px 17% 0;}

.title_container h1 {color: #fff;}

.title_container h1 a, .title_container h1 a:link, .title_container h1a:visited {color:#fff; text-decoration: none;}
.title_container h1 a:hover {color:#aaa;}
.title_container h1 a:focus, .title_container h1 a:active {color:#a65430;}

.title_sub {font-size: 80%;}


.grey {background-color:#e1e1e1;}
.rust {background-color:#8a4527;}

.photo_l {width:500px; float:left; margin: 0 30px 0 0;}
.photo_r {width:500px; float:right; margin: 0 0 0 30px;}

.photo_l, .photo_r img {width:100%; height:auto;}


.one_col {margin:20px 10% 0;}
.one_col img {width:100%; height:auto;}

.two_col {width:50%; margin: 0; float:left;}

.three_col_index {width:25%; margin: 0 4% 20px;}
.three_col {width:33%; margin: 0; float:left;}

.six_col {width:13.5%; margin: 0 1.5%; float:left;}

/*.five_col_index {width:17%; margin: 0 1.5%;}
.five_col {width:17%; margin: 0 1.5%; float:left;}*/


.highlight {float:left; margin: 5px 4% 15px;}
.highlight img {width:100%; height:auto; margin: 10px 0;}
.highlight p {margin:0;}

.service {float:left;}
.service img {width:100%; height:auto; margin: 10px 0;}
.service p {margin:0;}

.highlight h1 {
    font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin:0; 
	font-size:150%;
	text-transform: uppercase;}

.service h2 {
    font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin:0; 
	font-size:130%;
	text-transform: uppercase;
	line-height:110%;}

.service .highlight {margin: 5px 0 15px;}

.service { 
    font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	z-index:100;
	/*padding: 0 0 7px 0;*/
	margin:0; 
	font-size:130%;
	text-transform: uppercase;
	line-height:110%;}

.service:after {
	content:"";
	display:table;
	clear:both;}

.service ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	line-height: 100%;}
	
.service ul li {
	margin: 0;
	display:inline-block;
	float: left;
	margin: 0;
	width:16.6%;}

.service a, nav a:link, nav a:visited {
	display:block;
	padding:10px 8%;
	text-decoration:none;}
	

.gallery_photo {width:100%; margin:0 0 20px 0;}
.gallery_photo_l, .gallery_photo_r {width:48%;}
.gallery_photo img, .gallery_photo_l img, .gallery_photo_r img {
	width:100%; 
	height:auto;
	margin: 0;}

.gallery_photo_l {
	float:left;
	margin:0 10px 20px 0;}

.gallery_photo_r {
	float:right;
	margin:0 0 20px 10px;}

.gallery_main {margin-bottom: 30px;}


.estimate {
	float: right; 
	position: absolute; 
	right: 8%; 
	top: 100px;
	font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 125%;}

.estimate a, .estimate a:link, .estimate a:visited {
	color:#ffffff; 
	background-color: #621e00; 
	border-radius: 25px;
	padding:6px 30px 9px; 
	text-decoration: none;}
.estimate a:hover {
	color:#621e00; 
	background-color: #ccc;}


.photo_sm {
	float:left;
	width:125px;
	margin:10px 20px 0 0;}

.photo_sm img {width: 100%; height: auto;}


.divider {
	width:60%;
	margin: 50px 20% 20px;
	border-top: #a65430 1px solid;}

.divider2 {
	width:100%;
	margin: 5px 0 10px;
	border-top: #a65430 1px solid;}

.divider3 {
	width:40%;
	margin: 20px 30%;
	border-top: #a65430 1px solid;}

.divider4 {
	width:60%;
	margin: 40px 20% 40px;
	border-top: #a65430 1px solid;}


nav {
	padding: 0;
	margin: 0;
	background:#747373;
	text-align:center;
	font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:100%;
	letter-spacing: .05em;
	text-transform:uppercase;}

nav:after {
	content:"";
	display:table;
	clear:both;}

nav ul {
	display: inline-block;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;}
	
nav ul li {
	margin: 0;
	display:inline-block;
	padding: 0;}

nav ul ul {
	display: none;
	position: absolute; 
	margin:0;
	text-align:left;
	top:100%;}
	
nav ul li:hover > ul {display:inherit;}
	
nav ul ul li {
   	/*width: 220px;*/ /*without width specified here submenu will be as wide as items in menu. specified here in .services and .about*/
	display:list-item;
	position: relative;
	background-color:#8a4527;
	letter-spacing: 0;}
	
nav a, nav a:link, nav a:visited {
	display:block;
	padding:17px 20px;
	color:#fff;
	font-size:125%;
	line-height:18px;
	text-decoration:none;}

nav a:hover {
	color:#fff;
	background-color: #8a4527;}

.submenu {font-size:90%;}
.submenu a, .submenu a:link, .submenu a:visited {background-color: #8a4527; padding:12px 20px;}
.submenu a:hover {color:#fff; background-color: #747373;}	

.services {margin: 0 0 0 -69px; width: 200px;}

.menu {display:none;}


.hidden {visibility:hidden; position:absolute;}
.m_hidden { }
.s_hidden { }

.clear {clear:both;}
.c_hidden { }

.f_hidden { }
.icon {visibility:hidden;position:absolute;}


.footer_container {margin: 0;}

.social_foot {	
	float: right;}

.social_foot img {
	width: 24px; 
	height: auto;
	margin: 0 0 0 15px;}

#footer img, #contact img {vertical-align:middle; padding:0 0 2px;}

#footer {
	/*footer bg comes from body bg*/
	font-family: 'robotolight', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 75%;
	background: #747373;
	color:#fff;
	bottom: 0;
	clear:both;}

#footer .space {padding:0 10px;}

#footer p {margin:0; color:#fff;}

#footer strong {font-family: 'robotobold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;}

#footer a, #footer a:link, #footer a:visited {color:#b0e0b5; text-decoration: none;}
#footer a:hover {color:#b0e0b5; text-decoration: underline;}
#footer a:focus, a:active {color:#fff;}

#footer_content {
	width: 100%;
	text-align:left;
	margin: 30px 17% 40px;}

#footer h5 {
    font-family: 'cormorantsemibold', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight:normal;
	color:#fff;
	margin:0;
	font-size:190%;}


.space {padding:0 20px 0 0;}

.design {font-size:85%; float:right;}
.design a, .design a:link, .design a:visited {color:#005e7f;}
.design a:hover {color:#bf1e2d;}

.copyright {
	font-family: 'robotolight', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 20px 0; 
	text-align: right;}


/*mailchimp form*/
#mc_embed_signup {
	color: #000;
	clear:left; 
	width:300px;
	margin: 0;}

#mc_embed_signup form {margin: 0;}

#mc_embed_signup p {color: #000;}

#mc_embed_signup h2 {
	font-family: 'robotomedium', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#d1e9d4;
	margin:0;
	font-size:130%;
	line-height:130%;}

.indicates-required {color: #000; font-size: 85%; margin-bottom: 10px;}
.mc-field-group {color: #000; margin-bottom: 5px;}


@font-face {
    font-family: 'cinzelregular';
    src: url('fonts/Cinzel-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cormorantlight';
    src: url('fonts/Cormorant-Light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cormorantregular';
    src: url('fonts/Cormorant-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cormorantmedium';
    src: url('fonts/Cormorant-Medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cormorantsemibold';
    src: url('fonts/Cormorant-SemiBold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'robotolight';
    src: url('fonts/roboto-light-webfont.woff2') format('woff2'),
         url('fonts/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight_italic';
    src: url('fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/roboto-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium';
    src: url('fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold';
    src: url('fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}