/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
}
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;
}


body{
	width: 100%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #545454;
}
img{
	max-width: 100%;
	max-height: 100%;
}
.galleries-div img{max-width: 100%;}
h1{ font-size: 1.5em;}
h2{ font-size: 1.375em;}
h3{ font-size: 1.125em;}
h4{ font-size: 1.0em;}

p{
	font-size: 100%;
}
a{
	text-decoration: none;
	color: #545454;
}
footer a{text-decoration: none;}
footer li{text-decoration: none;}
* {box-sizing: border-box;}
.green{
	color: green;
}
.white{color: white;}
.black{color: black;}
.button{
	text-align: center;
	color: white;
	background-color:  green;
	padding: 20px;
	border-radius: 5px;
	margin-right: 20px;
}
.text .button{
	margin-right: 0px;
	border-radius: 5px;
	padding: 10px;
	font-size: 0.75em;
	margin-right: 1%;
}
h1, h2{
	margin-top: 10px;
	margin-bottom: 10px;
}
.upper-fold{
	position: relative;
}
.company-div, .main-div, .header-div{
	width: 100%;
}
.mobile{
	display: block;
}
.company-div{
	color: rgba(255, 255, 255, 0.4);
	color: white;
	background-color: #404040;
	font-size: 0.75em;
	padding-left: 10px;
}

.tagline{
	width: 100%;
	height: 20px;
	padding-top: 25px;
}
.location{
	display: none;
}
.mobile{
	width: 100%;
	height: 100px;
	padding-top: 25px;
}

.main-div{
	width: 100%;
	height: 300px;	
	position: relative;
	margin: auto;
	z-index: 0;
	background-color: #404040;
}
.myslide1, .myslide2{
	margin-top: 50px;
}
.text{
	text-align: center;
	position: absolute;
	bottom: 50px;
	z-index: 1;
	text-align: center;
	width: 100%;
	
}

.header-div{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 80px;
	top: 100px;
	background-color: white;
	padding: 20px 20px 0 10px;
	font-size: 1.0em; 
}
header ul li{
	display: inline-block;
	margin-right: 10%;
}
#last{
	margin-right: 0;
}

.logo{
	width: 70%;
	height: 40px;
}
.nav-button{
	width: 30%;
	margin-left: 70%;
	height: 40px;
	margin-top: -40px;
}
header nav{
	display: none;
	text-align: right;
	width: 100%;
}
.myslide1, .myslide2 {
	display: none;
}
#fade1{
	display: block;
}
.fade{
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
@-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}
@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}


.service-div{
	width: 100%;
}
.service-container{
	width: 90%;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
}
#services{
	width: 100%;
	height: 600px;
}
#services-inner{
	width: 100%;
	height: 580px;
	background-color : #eeeeee;
	padding-top: 10px;
	padding-bottom: 10px;
}
#services-inner2{
	width: 90%;
	height: 550px;
	background-color : white;
	margin: 10px auto;
	padding: 5%;
	box-shadow: 0px 3px 5px #eeeeee;
}

#lawn{
	width: 100%;
	height: 500px;
	display: block;
}	
#planting{
	width: 100%;
	height: 500px;
	display: block;
}
#irrigation{
	width: 100%;
	height: 500px;
	display: block;
}


.galleries-div{
	width: 100%;
	background-color: #404040;
}
.galleries{
	text-align: center;
	padding-top: 120px;
	padding-bottom: 120px;
}
.gallery-image{
	width: 90%;
	margin: 0 auto;
	
}
.image1{
	width: 100%;
	height: 300px;
	display: block;
}
.image2{
	width: 100%;
	height: 300px;
	display: none;
}	
.image3{
	width: 100%;
	height: 300px;
	display: none
}
.image4{
	width: 100%;
	height: 300px;
	display: none;
}		


.about-estimate-div{
	width: 100%;
	padding-top: 90px;
}
.about-estimate{
	width: 90%;
	margin: auto; 
}
.about{
	height: 500px;
	width: 100%;
}
.estimate-container{
	height: 500px;
	width: 100%;
	
}
.estimate{
	width: 96%;
	height: 460px;
	margin: auto;
}


.testimonial-div{
	width: 100%;
	background-color: #f7f7f7;
	padding-top: 50px;
	padding-bottom: 50px;
}
.testimonial{
	width: 90%;
	margin: 0 auto;
}
.testimonial-title{
	width: 100%;
	height: 30px;
}
.test-button{
	display: none;
}
.testimony{
	width: 100%;
}
.testimony1{
	width: 100%;
	height: 350px;
	background-color: white;
	padding: 50px 20px;
	display: block;
}
.testimony2{
	width: 100%;
	height: 350px;
	margin-left: 52%;
	background-color: white;
	padding: 50px 20px;
	display: none;
}
.test-right{text-align: right;}

footer{
	width: 100%;
	padding-top: 50px;
	background-color: #191919;
}
#footer{
	width: 90%;
	margin: 0 auto;
}
.about-us{
	width: 100%;
	height: 250px;
}
.extra-nav{
	width: 100%;
	height: 200px;
	
}	
.our-services{
	width: 100%;
	height: 250px;

}
.working-hours{
	width: 100%;
	height: 250px;

}	
.last-block-container{
	width: 100%;
	background-color: black;
}
.last-block {
	width: 90%;
	margin: 0 auto;
	height: 50px;
	padding-top: 15px;
}

input[type=text]{
	width: 70%;
	margin-bottom: 10px;
	padding: 10px 0;
	padding-left: 10px;
	border-radius: 2px;
}
textarea{
	width: 99%;
	height: 400px;
}
.test{
	display: block;
}


/* other pages */
.page-title{
	height: 200px;
	width: 100%;
	text-align: center;
	padding-top: 70px;
	background-color : #eeeeee;
}
.section{
	width: 100%;
	background-color : #eeeeee;
}
.breadcrumb-container{
	width: 100%;
	background-color : white;
}
.breadcrumb{
	width: 90%;
	margin: 0 auto;
	padding: 10px 0px;
	margin-bottom: 1px;
	
}
.content-container{
	width: 100%;
	background-color : white;
}
.content{
	width: 90%;
	margin: 0 auto;
	padding-top: 20px;
}
.content .description{
	height: 500px;
	width: 100%;
	padding-right: 10px; 
}
.content .image{
	height: 200px;
	width: 100%;
}

.main-content{
	height: 1000px;
	padding: 20px 40px;
}

.left, .right{
	width: 100%;
	height: 180px;
	text-align: left;
}
.right{
	margin-top: 40px;
}

textarea{
	width: 90%;
	height: 200px;
	margin-top: 5px;
}

.main-content input[type=text]{
	margin: 10px;
	width: 70%;
}

.additional{
	margin-top: 50px;
}

.service-content{
	width: 90%;
	margin: 0 auto;
	padding-top: 20px;
	height: 300px;
}

.service-content .nav{
	width: 20%;
	padding: 20px;
	height: 400px;
}
.service-content .service-description{
	width: 80%;
	height: 400px;
	margin-left: -20%;
	margin-top: -400px;
}
.service-description .service-image{
	width: 50%;
	margin-left: 50%;
	height: 400px;
	padding: 1%;
}
.service-description .main-description{
	width: 50%;
	margin-top: -400px;
	height: 400px;
	padding: 1%;
}
.buttonRight{
	margin-left: 70%;
}



@media screen and (min-width: 600px) {
	.mobile{display: block;}
	.location{display: none;}

  	.myslide1, .myslide2{
		margin-top: 0px;
		display: none;
	}
	.test{
		display: block;
	}
	.company-div{
		
		background-color: #404040;
		font-size: 0.75em;
	}
	.company-info{
		width: 80%;
		margin: 0 auto;
	}


	.main-div{
		width: 100%;
		height: 400px;	
		position: relative;
		margin: auto;
		z-index: 0;
		padding-top: 100px;
		background-color: white;
	}
	
	.text{
		text-align: center;
		position: absolute;
		bottom: 70px;
		z-index: 1;
		text-align: center;
		width: 100%;
	}

	.header-div{
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100px;
		top: 120px;
		background-color: #ccff00;
		padding: 40px 20px 0 10px;
		font-size: 1.0em; 
		background-image: url(images/headerbackground3.jpg);
	}
	header ul li{
		display: inline-block;
		margin-right: 3%;
	}
	#last{
		margin-right: 0;
	}
	
	/*
	.logo{
		width: 35%;
		height: 40px;
	}
	.nav-button{display: none;}
	header nav{
		width: 65%;
		margin-left: 35%;
		height: 40px;
		margin-top:  -40px;
		text-align: right;
		display: block;
		
	}
	*/
	
	.breadcrumb{
		width: 90%;
		margin: 0 auto;
		padding: 10px 0px;
		margin-bottom: 1px;
		
	}
	.content-container{
		width: 100%;
		background-color : white;
	}
	.content{
		width: 90%;
		margin: 0 auto;
		padding-top: 20px;
	
	}
	.content .description{
		height: 300px;
		width: 100%;
		padding-right: 10px; 
	}
	.content .image{
		height: 200px;
		width: 100%;
	}

	.main-content{
		height: 1000px;
		padding: 20px 40px;
	}

	.left, .right{
		width: 100%;
		height: 180px;
		text-align: left;
	}
	.right{
		margin-top: 40px;
	}

	textarea{
		width: 90%;
		height: 200px;
		margin-top: 5px;
	}

	.main-content input[type=text]{
		margin: 10px;
		width: 70%;
	}

	.additional{
		margin-top: 50px;
	}

	.service-content{
		width: 90%;
		margin: 0 auto;
		padding-top: 20px;
		height: 300px;
	}

	.service-content .nav{
		width: 20%;
		padding: 20px;
		height: 400px;
	}
	.service-content .service-description{
		width: 80%;
		height: 400px;
		margin-left: -20%;
		margin-top: -400px;
	}
	.service-description .service-image{
		width: 50%;
		margin-left: 50%;
		height: 400px;
		padding: 1%;
	}
	.service-description .main-description{
		width: 50%;
		margin-top: -400px;
		height: 400px;
		padding: 1%;
	}
	.buttonRight{
		margin-left: 70%;
	}


}


@media screen and (min-width: 860px){
	.button{
		text-align: center;
		color: white;
		background-color:  green;
		padding: 20px;
		border-radius: 5px;
		margin-right: 20px;
	}
	.text .button{
		text-align: center;
		color: white;
		background-color:  green;
		padding: 20px;
		border-radius: 5px;
		margin-right: 20px;
	}


	.test-button .button{	
		margin-right: 0px;
		border-radius: 0px;
	}

	
	.mobile{
		display: none;
	}
	.company-div{
		
		background-color: #404040;
		font-size: 0.75em;
	}
	.company-info{
		width: 80%;
		margin: 0 auto;
}

	.tagline{
		width: 40%;
		height: 80px;
		padding-top: 25px;
	}
	.location{
		width: 60%;
		height: 80px;
		margin: -80px 0 0 40%;
		text-align: right;
		padding-top: 25px;
		display: block;
	}
	.mobile{display: none;}


	.main-div{
		width: 100%;
		height: 550px;	
		position: relative;
		margin: auto;
		z-index: 0;
		padding-top: 0px;
		background-color: white;
	}
	
	.myslide1, .myslide2{
		margin-top: 0px;
		display: none;
	}
	.text{
		text-align: center;
		position: absolute;
		bottom: 200px;
		z-index: 1;
		text-align: center;
		width: 100%;
	}
	#bold{
	
		font-size: 1.5em;
	}
	.header-div{
		position: absolute;
		z-index: 1;
		width: 80%;
		height: 80px;
		left: 10%;
		top: 50px;
		background-image: url(images/headerbackground2.jpg);
		padding: 25px 20px 0 10px;
		font-size: 1.0em; 
	}
	header ul li{
		display: inline-block;
		margin-right: 10%;
	}
	#last{
		margin-right: 0;
	}

	.logo{
		width: 33.3%;
	}
	.nav-button{display: none;}
	header nav{
		width: 66.6%;
		margin-left: 33.3%;
		height: 40px;
		margin-top:  -40px;
		text-align: right;
		display: block;
		color: white;
	}
	
	.service-div{
		width: 100%;
	}
	.service-container{
		width: 90%;
		height: 90%;
		margin: 0 auto;
		padding-top: 40px;
	}
	#services{
		width: 38%;
		height: 600px;
		margin-right: 2%;
	}
	#services-inner{
		width: 100%;
		height: 420px;
		background-color : #eeeeee;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#services-inner2{
		width: 90%;
		height: 380px;
		background-color : white;
		margin: 10px auto;
		padding: 5%;
		box-shadow: 0px 3px 5px #eeeeee;
	}

	#lawn{
		width: 18%;
		height: 600px;
		margin-left: 40%;
		margin-top: -600px;
		margin-right: 2%;
	}	
	#planting{
		width: 18%;
		height: 600px;
		margin-left: 60%;
		margin-top: -600px;
		margin-right: 2%;
	}
	#irrigation{
		width: 18%;
		height: 600px;
		margin-left: 80%;
		margin-top: -600px;
	}

	
	.galleries-div{
		width: 100%;
		background-color: #404040;
	}
	.galleries{
		text-align: center;
		padding-top: 120px;
		padding-bottom: 120px;
	}
	.gallery-image{
		width: 90%;
		margin: 0 auto;
	
	}
	.image1{
		width: 23%;
		height: 350px;
		margin-right: 2%;
		display: block;
	}
	.image2{
		width: 23%;
		height: 350px;
		margin-left: 25%;
		margin-top: -350px;
		margin-right: 2%;
		display: block;
	}	
	.image3{
		width: 23%;
		height: 350px;
		margin-left: 50%;
		margin-top: -350px;
		margin-right: 2%;
		display: block;
	}
	.image4{
		width: 23%;
		height: 350px;
		margin-left: 75%;
		margin-top: -350px;
		display: block;
	}		


	.about-estimate-div{
		width: 100%;
		height: 720px;
		padding-top: 90px;
		padding-bottom: 90px;
	}
	.about-estimate{
		width: 90%;
		height: 500px;
		margin: auto; 
	}
	.about{
		height: 500px;
		width: 50%;
	}
	.estimate-container{
		height: 500px;
		width: 50%;
		margin-left: 50%;
		margin-top: -500px;
	}
	.estimate{
		width: 96%;
		height: 460px;
		margin: auto;
	}


	.testimonial-div{
		width: 100%;
		background-color: #f7f7f7;
		padding-top: 50px;
	}
	.testimonial{
		width: 90%;
		margin: 0 auto;
	}
	.testimonial-title{
		width: 70%;
		height: 30px;
	}
	.test-button{
		width: 30%;
		height: 30px;
		margin-top: -40px;
		margin-left: 70%;
		text-align: right;
	}
	.testimony{
		padding: 50px;
		width: 100%;
	}
	.testimony1{
		width: 48%;
		height: 300px;
		background-color: white;
		padding: 50px 20px;
		display: block;
	}
	.testimony2{
		width: 48%;
		height: 300px;
		margin-left: 52%;
		margin-top: -300px;
		background-color: white;
		padding: 50px 20px;
		display: block;
	}
	.test-right{text-align: right;}

	footer{
		width: 100%;
		padding-top: 50px;
		background-color: #191919;
	}
	#footer{
		width: 90%;
		margin: 0 auto;
	}
	.about-us{
		width: 25%;
		height: 300px;
	}
	.extra-nav{
		width: 25%;
		height: 300px;
		margin-left: 25%;
		margin-top: -310px;
	}	
	.our-services{
		width: 25%;
		height: 300px;
		margin-left: 50%;
		margin-top: -310px;
	}
	.working-hours{
		width: 25%;
		height: 300px;
		margin-left: 75%;
		margin-top: -310px;
	}	
	.last-block-container{
		width: 100%;
		background-color: black;
	}
	.last-block {
		width: 90%;
		margin: 0 auto;
		height: 50px;
		padding-top: 15px;
	}

	input[type=text]{
		width: 60%;
		margin-bottom: 10px;
		padding: 10px 0;
		padding-left: 10px;
		border-radius: 2px;
	}
	textarea{
		width: 80%;
		height: 400px;
	}
	.test{
		display: block;
	}

	
	.breadcrumb{
		width: 90%;
		margin: 0 auto;
		padding: 10px 0px;
		margin-bottom: 1px;
	
	}
	.content-container{
		width: 100%;
		background-color : white;
	}
	.content{
		width: 90%;
		margin: 0 auto;
		padding-top: 20px;

	}
	.content .image{
		height: 500px;
		width: 50%;
		margin-left: 50%;
		margin-top: -500px;
	}
	.content .description{
		height: 500px;
		width: 50%;
		
		padding-right: 10px; 
	}
	.main-content{
		height: 600px;
		padding: 20px 40px;
	}

	.left, .right{
		width: 45%;
		margin-right: 2%;
		height: 180px;
		text-align: left;
	}
	.right{
		margin-left: 48%;
		margin-top: -180px;
	}

	textarea{
		width: 80%;
		height: 200px;
		margin-top: 5px;
	}

	.main-content input[type=text]{
		margin: 10px;
		width: 60%;
	}

	.additional{
		margin-top: 50px;
	}

	.service-content{
		width: 90%;
		margin: 0 auto;
		padding-top: 20px;
		height: 300px;
	}

	.service-content .nav{
		width: 20%;
		padding: 20px;
		height: 400px;
	}
	.service-content .service-description{
		width: 80%;
		height: 400px;
		margin-left: -20%;
		margin-top: -400px;
	}
	.service-description .service-image{
		width: 50%;
		margin-left: 50%;
		height: 400px;
		padding: 1%;
	}
	.service-description .main-description{
		width: 50%;
		margin-top: -400px;
		height: 400px;
		padding: 1%;
	}
	.buttonRight{
		margin-left: 70%;
	}

}