@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);

html {

	width:100%;

	height:100%;

}

body {

	margin:0;

	width:100%;

	height:100%;

	font-family: 'Open Sans', sans-serif;

	font-size:14px;

	background:#fff;

	color: #333;

	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */

	-webkit-text-size-adjust: 100%;

}



/* Globals 

-------------------------------------*/

p {

	color:#333;

	line-height:22px;

	margin:0 0 15px 0;

}

h1 {

	font-size:30px;

	color:#333;

	line-height:30px;

	margin:0 0 15px 0;

	text-transform:uppercase;

	font-weight:normal;

}

h2 {

	font-size:22px;

	color:#333;

	line-height:24px;

	margin:0 0 10px 0;

	text-transform:uppercase;

}

h3 {

	font-size:20px;

	color:#333;

	line-height:24px;

	margin:0px 0 15px 0;

}

ul li {margin:0 0 10px 25px;}

ol li {margin:0 0 10px 25px;}

.clear {clear:both;}

.clearfix {clear:both; padding:15px 0 0 0;}



/* Nav

-------------------------------------*/

#header-wrap {

	position:relative;

	z-index:999;

	background:rgba(91,88,59, 0.8);

	height:80px;

	padding:0 0 20px 0;

	border-top:15px solid #000;

	margin:40px 0 40px 0;

}

#nav {

	margin:41px 0 0 0;

	list-style-type:none;

	float:right;

}

#nav li  {

	margin:0 0 0 0;

	display:inline;

	float:left;

}

#nav li a {

	font-size:20px;

	color:#fff;

	text-decoration:none;

	padding:37px 24px 0 24px;	

}

#nav li a.current {border-top:15px solid #a3991e;}







/* Structure 

-------------------------------------*/



.container {position:relative; width:1200px; margin:0 auto;}

.col-sm-3 {width:46%; margin:0 2% 2% 0; float:left;}



/* Custom

-------------------------------------*/

#slideshow {

	width:100%; position:absolute; top:0; height:1220px; overflow:hidden; z-index:100;

}

.cycle-slideshow {

	width:100%;

}

.cycle-slideshow div {

	position:relative;

}

.slide1 {

	width:100%;

	height:1337px;

	background:url(../images/slide1.jpg) no-repeat top center;

}

.slide2 {

	width:100%;

	height:1337px;

	background:url(../images/slide2.jpg) no-repeat top center;

}

.slide3 {

	width:100%;

	height:1337px;

	background:url(../images/slide3.jpg) no-repeat top center;

}

#inner-wrap {

	width:100%; position:absolute; top:0; height:250px; overflow:hidden; z-index:100; background:url(../images/slide2.jpg) no-repeat center center;

}

#titles {position:relative; z-index:300; margin:100px 0 0 0;}

.title {color:#fff; text-shadow:1px 1px 2px #333; background:rgba(164,153,30,0.5); font-size:40px; text-transform:uppercase; padding:20px; float:left;}

#thumbs {width:1200px; left:50%; margin:0 0 0 -600px; position:absolute; top:440px; z-index:400; height:300px;}

.thumb-col {width:250px; float:right; margin:0 0 0 20px;}

.two {padding:140px 0 0 0;}

.one{padding:210px 0 0 0;}

.four{padding:140px 0 0 0;}

.thumb-col img {border:10px solid #fff; margin:0 0 20px 0;}

.blank {width:100%; height:40px; margin:0 0 20px 0;}

.green {background:rgba(164,153,30,0.5);}

.white {background:rgba(255,255,255,0.6);}

.logo {

	float:left;

	margin:15px 0 0 0;

}

.line {width:100%; height:10px; background:#a3981e; position:relative; z-index:400;}

#content h1, #inner-content h1 {

	position:relative; 

	z-index:400;

	font-size:30px;

	color:#333;

	line-height:30px;

	margin:0 0 15px -20px;

	text-transform:uppercase;

	font-weight:normal;

	background:#fff;

	top:-20px;

	float:left; padding:0 20px;

}

#content {

	background:#fff; position:relative; z-index:200; margin:520px 0 0 0; padding:200px 0 100px 0;	

}

#inner-content {

	background:#fff; position:relative; z-index:200; margin:100px 0 0 0; padding:60px 0 60px 0;	

}

.hide {display:none;}

.main {width:600px; float:left;}

.aside {width:440px; float:right; position:relative; z-index:600; margin:-300px 0 50px 0;}

.aside img {border:10px solid #fff; margin:0 0 20px 0;}

.col {width:47%; float:left; margin:1% 3% 2% 0;}

.img-l {float:left; margin:0 20px 20px 0; padding:4px; border:1px solid #ccc;}



a.box {width:31%; float:left; height:40px; transition:all .5s; text-align:center; padding:70px 0 30px 0; margin:0 2% 2% 0; border:1px solid #666;

 color:#ddd; font-size:24px; padding:60px 0 60px 0; text-transform:uppercase; text-decoration:none; text-shadow:2px 2px 2px #555;}

a.box:hover {color:#fff; box-shadow:0 0 15px #888; padding:56px 0 64px 0; font-size:30px; text-shadow:1px 1px 1px #000;}

.ba {background:url(../images/ba-bg.jpg) no-repeat center center;}

.lawn {background:url(../images/lawn-bg.jpg) no-repeat center center;}

.paving {background:url(../images/paving-bg.jpg) no-repeat center center;}

.natural {background:url(../images/natural-bg.jpg) no-repeat center center;}

.walls {background:url(../images/walls-bg.jpg) no-repeat center center;}

.planting {background:url(../images/planting-bg.jpg) no-repeat center center;}

#gallery ul {list-style-type:none; margin:0 0 0 0;}

#gallery li {margin:0 30px 30px 0; display:inline; float:left;}

#gallery li img {width:164px; height:100px; transition:all .5s; box-shadow:0 0 5px #999;}
#gallery.gallery2 li img {width: 328px !important; height: auto !important; transition:all .5s; box-shadow:0 0 5px #999;}

#gallery li img:hover {box-shadow:0 0 15px #333;}

#footer-wrap {clear:both; position:relative; z-index:500; width:100%; border-top:20px solid #000; height:50px; padding:30px 0 30px 0; background:rgba(91,88,59,0.8);}

.copy {font-size:12px; color:#ccc; float:left; padding:20px 0 0 30px;}

.designer {font-size:12px; color:#ccc; float:right; padding:20px 30px 0 0;}

.designer a {color:#ccc; text-decoration:none; }

.bord {height:96px !important; border:2px solid #777561;}

.contact-form {width:100%;}

.contact-form input, .contact-form textarea { 

	width: 90% ; margin:0 0 15px 0; 

}

.contact-form select {width: 96% ; }

.contact-form textarea {height:120px;}

.contact-form label {display: block; margin-bottom: 5px; color:#333; font-size:16px; clear:both; padding:0 0 5px 0;  }

.contact-form .req {color:red;}

.contact-form { 

	margin: 30px 0 0 0;

	

}

.contact-form input, .contact-form textarea, .contact-form select{ 

	background: none repeat scroll 0 0 #FFFFFF; 

	border: 1px solid #C9C9C9; 

	color: #545658; 

	padding: 8px; 

	font-size: 14px; 

	border-radius: 2px 2px 2px 2px; 

}

#submit { 

	display:block;

	background: #444; 

	color: #fff; 

	cursor: pointer; 

	height: 30px; 

	padding: 0; 

	text-shadow: 0 1px 0 #000; 

	width: 120px; 

	position:relative;

	float:left;

	left:0px;

}

#submit:hover { 

	background: #666; 

	

}

#blog #inner-wrap {
height: 180px;
}
#blog #inner-content {
margin: 0;
padding: 30px 0 0 0;
}/*

#blog .container {
overflow: hidden;
padding-top: 30px;
}
*/
.primary{ float: left; width: 70%; padding: 30px 0; }
.secondary{ float: right; width: 25%; padding: 20px; border-bottom: 10px solid #eee; background: #f1f1f1; overflow: hidden; margin-top: 30px;}
.secondary h2{ margin-bottom: 20px; }

#blogroll{ min-height: 400px;}

.block{ overflow: hidden; margin: 0 0 30px 0; padding: 20px; border-bottom: 10px solid #eee; background: #f1f1f1; position: relative; }

.block .thumb{ float:left; margin: 0 20px 20px 0; }
.block .thumb img{ width: 100%; height: auto;}

.block .info{}
.block.summary .info{ overflow: hidden; }

.block h1,
.block h2,
.block h3,
.block h4,
.block p,
.block small,
.block li{
	margin: 0 0 20px 0;
	position: static !important;
}
.block h1,
.block h2,
.block h3,
.block h4{
	background: none !important;
}


.block.article p{
	overflow: hidden;
	clear: both;
}
.block ul,
.block ol{}

.block li{
	list-style: disc;
	margin-left: 20px;
	padding-left: 20px;
}

.block h2,
.block h3,
.block h4{
	line-height: 1.2em;
	font-weight: normal;
}

.block h1{}
.block h2{}
.block h3{}
.block h4{}

.block .clear{ clear: both; overflow: hidden; margin: 0; padding: 0;}

.block p{}
.block p.callto{}
.block p.callto a {
display: inline-block;
zoom: 1;
text-decoration: none;
text-transform: uppercase;
padding: 5px 10px;
background: #a3991e;
color: #333;
font-weight: bold;
border-radius: 5px;
}
.block p.callto a:hover{ color: #000; background: #c6ba25;}

.block.summary h1{ margin: 0 0 10px 0; line-height: 1em; background: none !important; }
.block small { margin-bottom: 20px; display: block; }
.block.summary small {
margin: 0 0 10px 0;
display: inline-block;
width: 50px;
height: 35px;
border-radius: 25px;
-o-border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background: #333;
color: #fff;
text-align: center;
font-size: 11px;
padding-top: 15px;
position: absolute !important;
left: 10px; top: 10px;
}
.block.summary p{ margin: 0 0 10px 0; }

.posts{ list-style: none; }
.posts li {
margin: 0;
padding: 0;
border-top: 1px solid #c1c1c1;
}
.posts li a{ text-decoration: none; display: block;
padding: 10px; color: #333; }
.posts li a:hover{
	background: #a3991e;
	color: #000;
}

.facebook {
	display: inline-block;
	zoom: 1;
	background: url(../images/facebook.jpg) center center no-repeat;
	padding: 2px 3px;
	text-indent: -9999px;
	width: 70px;
	height: 20px;
	line-height: 20px;
}


/* mods 12115 */

#slider{
	position: absolute;
	top: 0;
	left: 0;
}

.slicknav_menu{ display: none; }

#gallery ul{
	text-align: left;
}
#gallery ul li{
	float: none;
	display: inline-block;
	*display: inline;
	zoom: 1;
	margin: 0 20px 20px 0;
}
#gallery ul li a{}
#gallery ul li a img{ 
width: 164px !important; 
height: 100px !important; }
#gallery ul li a img.bord{ border: none; }

@media only screen and (max-width: 1200px) {
	
.container {
	position: relative;
	width: auto;
	margin: 0;
	padding-left: 10px;
	padding-right: 10px;
}
	
#header-wrap {
	position: relative;
	z-index: 999;
	background: rgba(91,88,59, 0.95);
	height: 80px;
	padding: 0 0 20px 0;
	border-top: 15px solid #000;
	margin: 20px 0 20px 0;
}
.logo {
margin-left: 10px;
}
#nav li a {
	padding-left: 15px;
	padding-right: 15px;
}

#thumbs {
	top: 70%;
	width: 90%;
	margin: 0;
	left: 90px;
	height: auto;
}
.thumb-col {
	width: 20%;
	margin: 0 0 0 20px;
}

.thumb-col img {
	border: 5px solid #fff;
	margin: 0 0 10px 0;
	width: 90%; 
	height: auto;
}

.four {
	padding: 100px 0 0 0;
}
.two {
	padding: 100px 0 0 0;
}
.one {
	padding: 140px 0 0 0;
}

#content {
	padding: 100px 0 60px 0;
	margin: 530px 0 0 0;
}
#inner-content {
	padding: 60px 0;
	margin-top: 100px;
}

#content h1, #inner-content h1 {
	margin: 0 0 10px -10px;
	padding: 0 10px;
}

#content .container,
#inner-content .container{
	padding: 0 20px;
}

#footer-wrap {
	width: auto;
	border-top: 10px solid #000;
	height: auto;
	padding: 0;
	overflow: hidden;
}

.copy,
.designer {
	padding: 10px;
	margin: 0;
}

.beforeafter-banner{
	text-align: left;
	width: 100%;
}
.beforeafter-banner img{
	display: block;
	margin: 0 20px 20px 0;
	width: 40%;
}

.value-meal .col img{ 
margin: 0 20px 20px 0 !important; }

.primary{ width: 60%;}
.secondary{ width: 30%;}

#blog #inner-content .container{
	padding-top: 0;
}

#inner-wrap {
background: url(../images/mobile-banner.jpg) no-repeat center center;
}	

#gallery.gallery2 li{
	width: 30%;
}

#gallery.gallery2 li img{
	width: 100% !important;
	height: auto !important;
	max-width: 328px !important;
	max-height: 100px !important;
}

	
/* end 1200 */	
}

@media only screen and (max-width: 1024px) {
	
#nav{ display: none; }	
.slicknav_menu{ 
	display: block; 
	z-index: 5555; 
	position: fixed; 
	width: 100%;
	margin: 0; 
	padding: 0; 
	top: 0; left: 0; 
	background: #000;
	height: 40px;
}

.slicknav_btn {
	margin: 0;
	text-shadow: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	background-color: transparent;
	display: block;
	width: 100%;
	
	padding: 0; margin: 0;
	height: 40px;
	text-align: center;
}

.slicknav_menu .slicknav_menutxt {
	display: none;
}

.slicknav_menu .slicknav_icon {
	float: none;
	margin: 13px auto 0 auto;
	display: inline-block;
	*display: inline;
	zoom: 1;
}

.slicknav_menu .slicknav_icon-bar {
	display: block;
	width: 40px;
	height: 3px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background: #a3991e;
	margin: 0 0 3px 0;
}

.slicknav_nav {
	margin: 0;
	padding: 0;
	background: rgba(91,88,59, 1);
}
.slicknav_nav li {
	padding: 0;
	margin: 0;
}
.slicknav_nav li a{
	padding: 10px;
	margin: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	text-align: center;
}
.slicknav_nav li a:hover{
	background: #a3991e;
	color: #fff;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

#slider{
	margin-top: 40px;
	position: relative;
	top: 0;
	left: 0;
}

#header-wrap {
	height: auto;
	border-top: none;
	margin: 0;
	padding: 20px 0 20px 0;
	overflow: hidden;
	text-align: center;
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
}
.logo {
	margin: 0;
	padding: 0;
	float: none;
}




#thumbs{
	display: none;
}

#thumbs2{
	display: block !important;
	margin: 0; padding: 0;
	text-align: center !important;
	list-style: none;
	position: relative;
	margin-top: -80px;
	z-index: 7777;
}
#thumbs2 li {
	margin: 0;
	padding: 0;
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 16%;
	float: none;
	margin: 5px;
	padding: 5px;
	background: #fff;
}
#thumbs2 li img{
	width: 100%;
	height: auto;
}

#content {
padding: 60px 0;
margin: 0;
}

#inner-content {
	padding-top: 150px;
}


#inner-wrap {
height: 210px;
z-index: 300;
}

#blog .container .summary  .thumb{
	width: 30%;
}
#blog .container .summary  .thumb img{
	width: 100%;
	 height: auto;
}
#blog #inner-content .container{
	padding-top: 130px;
}	
.responsive{
	width: 95%;
	height: auto;
}



/* end 1024 */
}

@media only screen and (max-width: 800px) {

.value-meal{}
.value-meal .col{
	float: none;
	width: 100%;
	overflow: hidden;
}
.value-meal .col h3{}
.value-meal .col img{ float: left;
margin: 0 20px 20px 0;
width: 30% !important;
}

.primary,
.secondary{ float: none; width: auto; mar}

.primary{ margin-bottom: 0; }
.secondary{ 
margin-top: 0; 
margin-bottom: 30px; 
}



/* end 800 */
}
@media only screen and (max-width: 600px) {	
#thumbs2 li {
	width: 19%;
}
#thumbs2 li:last-child {
	display: none;
}
}


@media only screen and (max-width: 767px) {	

#thumbs2{
	margin-top: 0;
}
#content {
padding: 20px 0;
margin: 0;
}

#content h1, #inner-content h1 {
margin-bottom: 0;
padding: 0 10px;
}
.copy, .designer {
padding: 0 10px;
float: none;
}
.designer {
padding-bottom: 10px;
}
.copy {
padding-top: 10px;
}

.albums a {
	width: 45%;
}
#gallery.gallery2 li{
	width: 45%;
}

/* end 767 */	
}


@media only screen and (max-width: 479px) {	

.beforeafter-banner img{
	width: 90%;
	height: auto;
}

.logo{
	max-width: 360px;
	width: 100%;
	height: auto;
}

.albums a {
	width: 90%;
}

#blog .block.summary  .thumb{
	float: left;
}
#blog .block .info{
	overflow: visible;
}
#blog .block .info h1{
	font-size: 20px;
	line-height: 1em;
	margin-bottom: 20px;
	float: none;
}

#contact{}
#contact .col{ float: none; width: auto; overflow: hidden; margin-bottom: 40px; }

#thumbs2 li {
	width: 29%;
}

#gallery ul li{ width: 45%; margin: 0 10px 10px 0; }
#gallery ul li a img{ 
width: 95% !important; 
height: auto !important; 
}

#gallery.gallery2 li{
	width: 95%;
}
#gallery.gallery2 li img{
	width: 100% !important;
	height: auto !important;
	max-height: 100px !important;
}

/* end 479 */	
}


@media only screen and (max-width: 300px) {	
#blog .block.summary  .thumb{
	float: none;
	width: 50%;
}
#blog .block .info{
	float: none;
}

.block.summary small {
left: 170px;
top: 10px;
}
/* end 300 */	
}