@charset "utf-8";
body{
	margin:0;
	padding:0;
	font-family: "Arial Narrow";
	font-size:15px;
}
#outer {
	margin: 0px;
	padding: 0px;
	height:auto;
	width: 100%;
}
.header {
	margin: 0 auto;
	height: 2000px;
	width: 100%;
	height:auto;
	float:left;
}
.header-main {
	margin: 0 auto;
	height: auto;
	width: 1004px;

}
.hd-top {
	margin: 0 auto;
	height: 19px;
	width: 100%;
	float:left;
	background-color:#383838;
}
.hd-btm {
	float:left;
	height:auto;
	margin:0 auto;
	width:1004px;
}
.logo{
	float:left;
	padding:30px; 50px 80px; 0px;
	}
.search{
	float:right;
	width:300px;
	height:31px;
	margin-top:50px;}
.srch-bx{
	background-color: #E4E4E4;
	float: left;
	height: 31px;
	width: 221px;
	
	border: 1px solid #f9faf7;
	
}
	.srch-btn{
	float:right;
	width:71px;
	height:25px;
	color:#fff;
	text-align:center;
	padding-top:5px;
	background-color:#383838;
	margin-right:50px;}
.nav-out{
	width:100%;
	background-color:#66cd00;
	height:62px;
	float:left;
}
.nav-main{
	width:1004px;
	height:62px;
	margin:0 auto;
}
.nav-main ul{
	
	
	padding:0px; 
}
.srch-btn a{
	color:#fff;
	text-decoration:none;}
.nav-main li{
	list-style:none;
	display:inline;
}
.nav-main li a{
	text-decoration:none;
	color:#fff;
	font-size:20px;
	padding:25px 28px 23px 19px;
}
.nav-main li a:hover{
	background-color:#fff;
	color:#66cd00;
}

.mid{
	width:100%;
	float:left;
}
.slider {
	padding-top:28px;
	height:298px;
	width: 1004px;
	margin:0 auto;
}
.slide-img {
	float: left;
	height:295px;
	width:621px;
	border:3px solid #d1d4d4;
	margin-left: 16px;

	
}
.trends {
	float:right;
	height:auto;
	width:335px;
	background-color:#f9faf7;
	border:2px solid #e4e4e4;
	
}
.trends ul li {
	
	list-style-position: outside;
	list-style-image: url(images/arrow.png);
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	padding-bottom:0px;
}
.click-arw{
	float:right;
	width:42px;
	height:47px;
	padding-right: 16px;
	padding-top: 14px;

	
}
.red-ad{
	width:197px;
	float:left;
	padding-left:20px;
	color:#f70723;
	font-size:24px;
	font-weight:bold;
}
.ad-click{
	color:#383838;
	font-size:18px;
	font-weight:bold;
	padding-left: 20px;

}
.ad-click a{
	color:#383838;
	text-decoration:none;

}
.columns{
	background-color:#fff;
	border:1px solid #e4e4e4;
	margin-top:68px;
	width:600px;
	height:auto;
	float:left;
	margin-left: 18px;
	padding-bottom: 10px;

}
.col-hd{
	color:#383838;
	font-weight:bold;
	font-size:24px;
	width:540px;
	padding-left:15px;
	padding-top:15px;
	padding-bottom: 10px;
	
}
.black-col{
	padding-left:10px;
	width:600px;
	float:left;
	margin-top:25px;
	height:450;
	padding-bottom: 10px;
}
.rm{
	width:95px;
	float:right;
	font-size:16px;
	color:#66cd00;
	padding-top:25px;
	
}
.rm a{
	text-decoration:none;
	color:#66cd00;
}
.col1{
	width:280px;
	height:300px;
	float:left;
	padding-bottom: 10px;
}
.black{
	width:280px;
	height:37px;
	background-color:#383838;
	color:#66cd00;
	font-size:19px;
	font-weight:bold;
	padding-left:5px;
	padding-top:5px;
}
.col-txt{
	padding-left:5px;
	padding-top:15px;
	color:#535353;
	font-size:16px;

}
.use{
	font-size:14px;
	text-align:center;
	width:590px;
	margin-top:74px;
	height:60px;
	float:left;
color:#383838;
padding-left:15px;}
.use-other{
	font-size:14px;
	text-align:center;
	width:590px;
	margin-top:40px;
	height:60px;
	float:left;
color:#383838;
padding-left:15px;}
	
.black2{
	width:280px;
	height:37px;
	background-color:#383838;
	color:#66cd00;
	font-size:19px;
	font-weight:bold;
	padding-top:5px;
	padding-left:5px;
}
	
.line{
	float:left;
	margin-left:15px;
	margin-top:35px;
}
.col2{
	width:290px;
	height:300px;
	float:left;
	margin-left:0px;
	padding-left:5px;
	padding-bottom: 10px;
	
	
}
	
.dash{
	color:#cccccd; font-size:16px; font-family:Arial, Helvetica, sans-serif;}
h3{
	color:#66cd00;
	text-align:center;
	font-weight:bold;
	font-size:23px;
	
	}
	.big-box{
		width:100%;
		float:left;
		margin-top:10px;
		height:auto;
	}
	.box{
		width:1034px;
		margin:0 auto;
		height:1080px;
		height:auto;
	}
.left{
	float:left;
	width:621px;
	height:800px;
	
	
}	
.left p{
	float:left;
	width:621px;
	height:10px;
	color:#383838;
	font-size:31px;
	padding-left:29px;	
}			
.welcome{
	color:#292828;
	width:570px;
	float:left;
	padding-left:29px;
	padding-right:29px;
	padding-top:20px;
	font-size:18px;
	text-align:justify;
}
.links{
	float:left;
	width:621px;
	margin-top:30px;
	font-weight:bold;
	font-size:14px;
}
.left-link{
	padding-left:36px;
	color:#7bb31a;
	float:left;

}
.left-link a{
	
	color:#7bb31a;
	

}
.foot-link{
	color: rgb(56, 56, 56);
	float:left;
	

}
.foot-link a{
	
	color: rgb(56, 56, 56);
	text-decoration:none;

}
.right-link{
	color:#7bb31a;
	float:right;
}
.right-link a{
	color:#7bb31a;
}
.right{
	float:right;
	width:361px;
	height:auto;
	margin-left:5px;
}
.estimate{
	height:160px;
	width:335px;
	float:RIGHt;
	margin-top:20px;
	border:1px solid #e4e4e4;
	background-color:#f9faf7;
}
.free{
	
	background-color:#4799e5;
	float:left;
	height:52px;
	width:335px;
	text-align:center;
	color:#fff;
	font-size:31px;
	font-weight:bold;
	padding-top:10px;
	
	
}
.dropdwn{
	float:left;
	width:307px;
	height:40px;
	padding-left:30px;
	padding-top:20px;
		
		
}
select{
	border:1px solid #e4e4e4;
	background-color:#f9faf7;
	font-size:20px;
	color:#383838;
	width:287px;
	height:25px;
}
.drop-sel{
	border-radius:5px ;
	padding-bottom:3px;
	width:93px;
	height:23px;
	float:left;
	background-color:#383838;
	margin-left: 110px;
	text-align:center;
	font-size:17px;
	color:#fff;

}
.go-ad{
	margin-left:38px;
	margin-top:40px;
	float:left;
}
.project{
	float:left;
	width:361px;
	height:auto;
	border:1px solid #f6f6f5;
	background-color:#f9faf7;
	margin-top:25px;
	
	
	
}
.project p{
	padding-left:10px;.
	color:#383838;
	font-weight:bold;
	font-size:17px;
}
.advert{
	width:320px;
	margin-top:15px;
	color:#fff;
	height:138px;
	background-image:url(images/green.png);
	background-repeat:no-repeat;
	float:left;
	padding-left:33px;
	margin-left:24px;
	padding-top:7px;
	font-size:23px;
	font-weight:bold;
}
.foot-out{
	width:100%;
	float:left;
	background-color:#f6f6f6;
	height:auto;
	border:1px solid #d2d2d2;
	margin-top:30px;
}
.foot-main{
	width:1034px;
	line-height:24px;
	margin:0 auto;
	height:70px;
	
	
}
.footm{
	width:800px;
	line-height:24px;
	margin:0 auto;
	
	
	
	
	
}
.foot-nav{
	float:left;
	margin-left:30px;
	margin-top:30px;
	width:100px;
	height:auto;
}
.foot-nav2{
	float:left;
	margin-left:40px;
	margin-top:30px;
	width:100px;
	height:auto;
}
.shadow{
	float:left;
		margin-left:20px;
	margin-top:10px;
	height:100px;
	
}
.social{
	width:240px;
	height:auto;
	float:left;
	margin-top:32px;
	font-size:21px;
	color:#383838;
		margin-left:40px;
}
.fld{
	
	width:250px;
	float:left;
	font-size:17px;
}
.foot-txt{
	float:left;
	width:801px;
	margin-left:50px;
	margin-top:10px;
	text-align:center;
	font-size:14px;	
}
.inputnew1{ width:165px; height:29px; border:1px solid #e4e4e4 margin:0px 0px 5px 5px; padding:0px 0px 0px 5px; float:left; background-color:#f9faf7;}
.inputnew{ width:160px; height:25px; border:1px solid #e4e4e4; margin:5px 0px 5px 5px; padding:0px 0px 0px 5px;}
.sub{
	float:left;
	margin-left:100px;
	margin-top:10px;
}
.fld-txt{
	font-size:21px;
	color:#383838;
	width:50px;
	float:left;
}
.fld-area{
	
	width:250px;
	float:right;
}
.icons{
	width:240px;
	float:left;
	padding:11px 12px 14px 11px;}
.garden-table
{

	background-color:#fff;
	border:1px solid #e4e4e4;
	margin-top:40px;
width:600px;
	height:auto;
	float:left;
	font-size:14px;
	padding-left: 10px;
	margin-left:30px;
	padding-top:5px;
}
.garden-table td
{
	
	text-align:left;
	line-height:1.5em;
	
}
.left-other{
	float:left;
	width:621px;
	font-size: 14px;
	
	
	
}	
.left-other p{
	float:left;
	width:600px;
	color:#383838;
	font-size:14px;
	text-align: justify;
}			
.deck-sample
{
	padding-left:30px;
}
.deck-sample p{
	float:left;
	width:580px;
	padding-left:0px;
	color:#383838;
	font-size:16px; height:auto; line-height:1.5em
		
}		
.trends-main {
	float:left;
	
	width:335px;
	
	
}
.trends-main ul li {
	
	list-style-position: outside;
	list-style-image: url(images/arrow.png);
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	padding-bottom:0px;
}
@media (max-width: 767px) {
	* {
		margin: 0 auto !important;
		float: none !important;
	}
	.header-main, .left-other p, .foot-txt, .foot-link, .hd-btm, .logo img, .box, .right, .trends, .estimate, .dropdwn, .free, .advert, .project, .project img, .left-other, .use-other, .welcome, .garden-table, .foot-main, .footm{
		width: 100% !important;
	}
	.left-other p, .welcome, .foot-link {
		text-align: center !important;
	}
	.deck-sample {
		padding: 10px !important;
	}
	.estimate img, .use-other img, .deck-sample p, .trends img, .wildflower img, .slider, .slide-img, .left, .black-col, .columns, .use, .col2, .line, .col-hd, .left p, .welcome img  {
		width: 100% !important;
	}
	.slider, .left, .slide-img, .left p, .use, .black2, .col2 {
		height: auto !important;
	}
	.right {
		padding-right: 0px !important;
	}
	 .foot-main {
		height: auto !important;
	 }
	.use-other {
		height: auto !important;
		padding-left: 0px !important;
	}
	.left-other {
		padding-right: 0px !important;
	}
	.welcome {
		padding: 20px 0px !important;
	}
	.project, .foot-out, .trends, .slide-img {
		border: none !important;
	}
	.dropdwn, .advert, .use, .black-col, .col2, .black2, .col-hd, p {
		padding-left: 0px !important;
	}
	.advert {
		margin-left: 0px !important;
		background-size: cover !important;

	}
	.garden-table {
	  margin: 0px !important;
	  padding: 0px !important;
	}
	.garden-table td {
		padding-right: 0px !important;
		margin: 0px 20px !important;
	}
	.garden-table tr {
		display: grid;

	}
	.shadow, .click-arw, .search {
		display: none !important;
	}
	.nav-out {
		display: none !important;
	}
	.garden-table td, .textbox2, .slide-img img, .black2 {
		width:  100% !important;
	}
	
	
}

/* Add a black background color to the top navigation */
.topnav {
	background-color: #66cd00;
	overflow: hidden;
	display: none;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
	background-color: #66cd00;
	color: white;
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
	background-color: #4CAF50;
	color: white;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
	display: none;
  }
  /* When the screen is less than 767 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 767px) {
	.topnav a {display: none;}
	.topnav a.icon {
	  float: right;
	  display: block;
	}
    .topnav {
		display: block !important;
	}
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 767px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon {
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	.topnav.responsive a {
	  float: none;
	  display: block;
	  
	}
	
  }
  .bg-green{
  	background-color: #66cd00;
  }
  .nav-link{
  	color: white !important;
  }
  .nav-item{
  		cursor: pointer;
  }
  .nav-bar{
  	margin: auto;
  }
  .navbar-dark .navbar-nav .nav-link {
    font-size: 24px;
    padding-left: 15px;
    padding-right: 15px;
}
.nav-item:hover{
background-color: white;
}
.nav-link:hover{
color: #66cd00 !important;
}
@media (max-width: 767px){
	.Menu{
    display: inline-block !important;
	}
	.nav-link{
		border-bottom: 1px solid white;
    	font-size: 16px !important;
	}
}
.Menu{
	display: none;
}
.navbar-toggler{
	padding-right: 28px;
}
@media (min-width: 767px) and (max-width: 1000px){
	.bg-green{
		width: max-content;
	}
	}