@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Poppins:wght@500&display=swap');





*{

	margin:0;

	padding:0;

	box-sizing:border-box;

	transition-duration: .3s;

	font-family:poppins;

}

a{

	text-decoration: none;

	margin:0;

	padding:0;

}

.observed{

	opacity:.0;

}

.observed2{

	opacity: 0;

}

.show{

	animation: pageelementfade 600ms ease-in-out forwards;

}

.phone-number-link{

	color: white;

}

.phone-number-link:visited{

	color: white;

}

.phone-number-link:active{

	color: white;

}

















/*                                    navigation section        */











/*                                 mobile navigation section  */



.hamburger-menu-container{

	display: none;

	width:30px;

	height:30px;

	cursor: pointer;

}

.hamburger-line{

	height:5px;

	width:100%;

	border-radius:10px;

	background-color:white;

}





/*  mobile nav menu  */ 







.mobile-navigation-menu-container{

	z-index:20000px;

	height:100vh;

	width:350px;

	position: absolute;

	left:-350px;

	top:0;

	/*background:linear-gradient(45deg, black, #0e0e0e);*/

	background-color: rgb(0,0,0, .95);

	transition-duration:.7s;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;



}

#exit-icon{

	position: absolute;

	top:30px;

	right:30px;

	max-width:18px;

	cursor: pointer;

}



.mobile-nav-inner-container{

	display: flex;

	flex-direction: column;

	align-items: left;

	position: relative;

	left:-40px;

}



#mobile-nav-logo{

	position: relative;

	top:-30px;

	font-size:15px;

	color:white;

}

.mobile-nav-links{

	display: flex;

	flex-direction: column;

	align-items: left;



}

.mobile-nav-link{

	font-size:24px;

	color:white;

	font-weight: 600;

	margin:.7rem 0;

}



.mobile-social-icons{

	display: flex;

	align-items: center;

	margin-top:1.5rem;

}

.mobile-nav-social-icon{

	max-height:21px;

	margin:0 .5rem;



}







.navigation-container{

	z-index:500;

	width:100%;

	position: fixed;

	display: flex;

	justify-content: center;

	padding:1rem 3rem;

	

	box-shadow: 0 2px 5px 0 black;

	background-color:black;

}



#navigation-logo{

	z-index:-6000;

	margin-top:.2rem;

	padding:0 2rem;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	animation-delay: 500ms;

	animation: navlogofade 1000ms ease-in-out forwards;

}

#navigation-logo img{

	max-height:100px;

}



.logo-words{

	display: flex;

	justify-content: space-around;

	flex-direction: column;

	align-items: left;

	color:white;

	margin-left:15px;

	

}

.logo-letters{

	font-size:16px;

	text-align: left;

	font-weight:300;

}

.logo-highlight{

	color:#E17B00;

}

#logo-png{

	max-width:280px;

		padding:0 2rem;



}

#navigation-logo:hover{

	opacity:.7;

	

}











/* navigation links and icon section   */



.navigation-links-icons-section{

	display: flex;

	align-items: center;

}



.navigation-links{

	display: flex;

	align-items: center;

	justify-content: space-around;

}

.nav-link{

	font-family: oswald;

	font-weight:450;

	font-size:15px;

	color:white;

	margin:0 1rem;

	letter-spacing: 2px;

	position: relative;

	



}



.nav-link:hover{

	color:#F6B100;

}



.active-nav-link{

	color:#E6A200;

	margin:0 1.3rem;

	border:2px solid #E6A200;

	border-radius: 5px;

	padding:.3rem .6rem;

}

.active-nav-link-mobile{

	color:#E6A200;

	margin:0;

	

}





.navigation-icons{

	display: flex;

	align-items: center;

	padding:0 1rem;

}









/*                                       front page main attraction section    */







.main-attraction-container{

	height:700px;

	width:100%;

	background-color:rgb(0,0,0, .6);

	background-size:cover;

	/*border-bottom:1px solid black;*/

	display:grid;

	grid-template-columns: 1fr 1fr;

	position: relative;

	margin:0 auto;







}



.main-attraction-container-background{

	z-index:-10;

	position: absolute;

	top:0;

	left:0;

	width:100%;

	height:100%;

	background-image:url(photos/br/pic38.jpg);

	background-size:cover;

	transition-duration: .5s;



}







.main-attraction-hero-section{

	margin-top:4.5rem;

	position: relative;

	height:100%;

	width:100%;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	animation-delay: 700ms;

	animation:pageelementfade 1000ms ease-in-out forwards;

	



	

}



.hero-section-about-container{

	

	

	width:80%;

	height:100px;

	margin:0 auto;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	position: relative;

}

/*.hero-section-about-container h1{



	color:white;

	font-size:35px;

	line-height: 1.2;

	text-align: center;



	}

	*/



	.hero-section-about-container img{

		max-height:130px;

		margin-left:2rem;

	}

	

.small-hero-text{

	font-size:18px;

	/*color:#D5D5D5;*/

	color:#41F33B;

	font-weight:100;

	margin-top:1rem;

	padding-left:40px;

	text-transform: uppercase;

	font-family: oswald;

}





.main-attraction-services-container{

	/*position: absolute;

	top:50%;

	left:55%;

	transform: translate(-50%, -50%);*/

	width:80%;

	height:200px;

	display:grid;

	grid-template-columns: 1fr 3fr 1fr;

	align-items: center;

	transition-duration: .5s;

	margin-bottom:2rem ;

	margin-left:45px;

	position:relative;



	



}

.ft-services{

	

	color:#b1b1b1;

	font-size:18px;

	width:100%;

	margin:0 2.5rem 0 0;

	position: absolute;

	text-align: center;

	bottom:-45%;



}

.services-bracket-png{

	max-height:25px;

	margin:0 auto;

}



.service-slide-container{  

	margin:auto;

	height:100%;

	width:340px;

	position: relative;

	top:40%;

	overflow: hidden;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;







	

}



.service-slide-boxes-container{

	width:2040px;

	height: 100%;

	position: absolute;

	top:-3px;

	display:flex;

	transition:.5s;

	left:-1700px;

	







}



.service-slide-box{

	width:340px;

}

.service-h1{

	font-size:30px;

	color:#ffb700;

	letter-spacing: 2px;

	text-align: center;

}



.estimate-section{



	height:100%;

	position: relative;

	animation-delay: 400ms;

	animation:pageelementfade 1000ms ease-in-out forwards;



}

.estimate-inner-box{

	position: absolute;

	top:50%;

	left:50%;

	transform:translate(-50%, -50%);

	width:80%;

	height:40%;

	display: flex;

	flex-direction: column;

	justify-content: space-around;

	text-align: center;

}

.estimate-inner-box h1{

	color:white;

	font-size:40px;

	padding-bottom: .8rem;

}

.estimate-inner-box p{

	color:#cecece;

	width:60%;

	margin:0 auto;

	line-height: 1.2

}

.estimate-box-divider{

	position: relative;

	width:80%;

	height:2px;

	border-radius:2px;

	background-color:#0068AE;

	margin:0 auto;

	top:-30px;

}

.estimate-email-box{

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: space-around;

	width:50%;

	margin: 0 auto;

}

.estimate-email-box input, .subscribe-btn{

	width:100%;

	padding:.3rem;

	margin:.4rem 0;

	border-radius:3px;

	border:none;

	outline:none;

}

.estimate-email-box a img{

	max-height:25px;

	margin-right:15px;

}

.visit-facebook-btn{

	background-color:#0062BF;

	color:white;

	font-weight: 500;

	letter-spacing: 2px;

	padding:.5rem;

	cursor: pointer;

	font-size:13px;

	height:50px;

	display: flex;

	justify-content: center;

	align-items: center;

	width:100%;

	border-radius:3px;

	border-radius:25px;

	



}

.visit-facebook-btn:hover{

	background-color:black;

}

.estimate-email-box .subscribe-btn{

	background-color:#0068AE;

	color:white;

	font-weight: 500;

	letter-spacing: 2px;

	padding:.5rem;

	cursor: pointer;

	font-size:13px;

	height:50px;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	border-radius:25px;

	

}

.estimate-email-box .subscribe-btn:hover{

	background-color:black;

	

}

.estimate-email-box h3{

	font-size:14px;

	color:white;

	letter-spacing: 2px;

	margin:1rem auto;

	width:100%;

}



/*                                             home page services section     */





.home-page-services-container{





	height:auto;

	width:100%;

	/*background:linear-gradient(to top, #A32200, #EB4500);*/

	background:linear-gradient(to top, #F7FBFC, white);

}

.home-page-services-inner-container{

	padding:6rem 1rem 4rem 1rem;

	width:90%;

	

	margin:0 auto;

	



}

.services-header-box{

	margin:0 auto;

	text-align: center;

	opacity: 0;



}

.home-page-services-inner-container h1{

	color:black;

	font-size:35px;

	font-weight:800;

	

}

.header-dots{

	max-height:10px;

	position: relative;

	bottom:0;

}





/* services grid */



.grid-of-services-hp{

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	padding:.2rem 0 2rem 0;

	

}

.service-grid-box{

	height:200px;

	width:300px;

	margin:0 auto;

	display: grid;

	grid-template-rows: 1fr 1fr;

	text-align: center;

	padding:2rem 0 1rem 0;

	opacity: 0;

}

.service-display-box{

	height:150px;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items:center;

}

.service-grid-box h1{

	font-size:25px;

	color:black;

}



.service-desc-box{

	height:50px;

	margin:0 auto;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	text-align: center;

	width:100%;



	



}

.service-grid-box-line{

	position: relative;

	top:-20px;

	margin:0 auto;

	height:3px;

	border-radius:10px;

	width:30%;

	background-color:#2DC700 ;



}

.service-desc-box p{

	padding:.5rem 0 .8rem 0;

	font-size:15px;

	/*color:#cfcfcf;*/

	color:#7f7f7f;

	position: relative;

	bottom:0;

	width:70%;

	

}

.service-call-container{

	width:95%;

	margin:5rem auto 2rem auto;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	box-shadow:0 3px 7px 0 #919191;

}



.services-section-give-call{

	width:100%;

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	text-align: center;

	margin:2rem auto 0 auto;

	padding:1.5rem 2rem;

	/*border:1px solid #cdcdcd;*/

	border-radius:10px;

	/*box-shadow:0 4px 8px 0 #dedede;*/

	font-family:oswald;

	background-color:white;



}

.services-section-give-call h4{

	font-size:18px;

	padding:.3rem .6rem;

	border-radius:10px;

}

#service-phone-number{

	background-color:#0093A8;

	color:white;

	margin-top:1.4rem;

	padding:.5rem 1.4rem;

	border-radius:20px;

	cursor: pointer;

	display: flex;

	align-items: center;



}

#service-phone-number p a{

	color:white;

}

#service-phone-number img{

	max-height: 17px;

	padding-right:10px;

}



/*                                             mission statement section  */



.hp-mission-section-container{

	

	width:100%;

	padding:3.5rem 0;

	background:linear-gradient(45deg, #036407, #029908);

	display: flex;

	flex-direction: column;

	justify-content: space-around;



}

.mission-section{

	display: flex;

	justify-content: center;

	align-items: center;

	height:600px;

}

.hp-mission-section-container h1{

	font-weight:800;

	font-size: 40px;

	text-align: center;

	padding:4rem 0 1rem 0;

	color:white;

	line-height:1.1;



}

.mission-header-box{

	display: flex;

	flex-direction: column;

	align-items: center;

	position: relative;

	width:60%;

	margin:4rem auto;



}

.mission-header-dec{

	width:150px;

	height:150px;

	border-top:2px solid white;

	border-left:2px solid white;

	border-top-left-radius:5px;

	position: absolute;

	top:15px;

	left:-4px;

	



}



.mission-header-dec-bottom{

	width:150px;

	height:150px;

	border-bottom:2px solid white;

	border-right:2px solid white;

	border-top-left-radius:5px;

	position: absolute;

	bottom:0px;

	right:-4px;

	



}

.mission-highlight{

	color:#F5931A;

	font-family: oswald;

}

.header-dots2{

	max-height:10px;

	width:100px;

	





}

.mission-section{

	padding:2rem 0 0 0;

	width:900px;

	position: relative;

	margin:0 auto;

}

.mission-container{

	border:1px solid white;

	margin:1rem 0;

	padding:.4rem 1.5rem 3rem 1.5rem;

	text-align: center;

}



.mission-container p{

	

	

	

	text-indent: 20px;

}

.mission-statement{

	/*background:linear-gradient(35deg, #312100, #5B3E00);*/

	background:linear-gradient(35deg, #160C00, #3E2200);

	border:1px solid #160C00;

	position: absolute;

	top:10px;

	left:0;

	width:480px;

	z-index:2;

	background-color:yellow;

	box-shadow:0 4px 9px 0 #004103;

	border-top-left-radius:4px;

	border-top-right-radius:25px;



}

#mission-s-header{

	color:white;

	font-family:oswald;

}

.mission-statement p{

	color:#eeeeee;

	line-height: 1.7;

}

.about-us{

	z-index:1;

	/*background-color:#F9E100;*/

	background:linear-gradient(55deg, #D6B500, #F9E100);

	position: absolute;

	right:0;

	top:60px;

	width:500px;

	box-shadow:0 2px 7px 0 #004103;

	border:1px solid #F9E100;

	border-bottom-right-radius:15px;

	padding:0 2rem 2rem 5rem;

	display: flex;

	flex-direction: column;

	justify-content: center;

}

.about-us h1, p{

	color:black;

}

.about-us h1{

	font-family:oswald;

	font-size:34px;

}

.about-us-span{

	font-size:14px;

	display: block;

	text-align: center;

	margin:.5rem 0 0 0;

	color:black;

	font-family:oswald;



}

.about-us-fbook-btn{

	display: flex;

	align-items: center;

	color:#F9E100;



	font-weight:500;

	font-size:18px;

	padding:.4rem .9rem;

	border-radius:17px;

	margin:1rem auto 0 auto;

	font-family:oswald;

	border:2px solid black;

	background-color: black;



}

.about-us-fbook-btn p{

	color:#003691;

	font-size:23px;

}

.about-us-fbook-btn:hover{

	opacity: .7;



}

.about-us-fbook-btn:hover p{

	margin-left:15px;

}



/*                                           contact boxes info section on home page   */





.home-page-contact-boxes-container{

	width:99.5%;

	height:250px;

	display: grid;

	grid-template-columns: 1fr 1fr 1fr;

	margin:.2rem auto;

	

}

.home-page-contact-box{

	background:linear-gradient(40deg, #0F6300, #158C00);

	border-radius:2px;

	position: relative;

}

#phone-box{

    margin:0 .2rem;

}

.contact-box-inner-box{

	position: absolute;

	top:50%;

	left:50%;

	transform:translate(-50%, -50%);

	display: flex;

	align-items: center;

	justify-content: space-around;

	width:70%;

}









/*                                                services page    */





.services-container{

	width:100%;

	height:auto;



}



.services-top-page-section-container{

	

	padding:5rem 0 0rem 0;

	width:100%;



	

}

.service-list-section{

	background:linear-gradient(to top, #E7E4B0, white);



	width:100%;

	padding:6rem 0;

	display: flex;

	flex-direction: column;

	justify-content: space-around;

	align-items: center;



}

.service-list-header-container{

	margin:0 auto;

	border:1px solid white;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	position: relative;

}

.service-list-header-container h1{

	font-size:45px;



}

.service-header-dec-bottom{

	position: absolute;



	bottom:-10px;

	right:-20px;

	border-bottom:1px solid #249100;

	border-right:4px solid #249100;

	height:50px;

	width:70px;

}

.service-header-dec-top{

	position: absolute;



	top:-10px;

	left:-20px;

	border-top:1px solid #249100;

	border-left:4px solid #249100;

	height:50px;

	width:70px;

}

.service-list-header-container h5{

	font-size:15px;



}

.service-page-list-services{

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

	width:85%;

	padding:5rem 0 2rem 0;

	animation: pageelementfade 600ms ease-in-out forwards;





}

.service-page-service{

	width:200px;

	height:100px;

	font-size:18px;

	color:black;

	font-family:oswald;

	text-align: center;



	margin:.5rem auto;

	

}



/* most popular services  */



.most-popular-services-section{





	width:100%;

	padding:2rem 0 2rem 0;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	/*background:linear-gradient(to top, #7A2500, #C63E01);*/

	/*background:linear-gradient(to top, #D6D5B9, #E7E4B0);*/

	background-color:black;





}

.most-popular-header-container{

	width:100%;

	text-align: center;

	padding:1.5rem 0 3rem 0;



}

.most-popular-header-container h1{

	color:#FFBB0D;

	font-size:40px;

}

.most-popular-header-container p{

	font-size:12px;

	color:white;

	position: relative;

	top:-10px;

}

.squiggle-box{

	display: flex;

	align-items: center;

	justify-content: center;

	position: relative;

	bottom:-10px;

	margin:0 auto;

	width:100%;

}

.squiggle-box img{

	max-width:90px;

}

.popular-services-container{

	height:1140px;

	width:75%;

	margin-top:2rem;

	padding:1.5rem 0;

	position: relative;



}

.popular-box{

	border:1px solid white;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;padding:2rem 1.5rem;

	/*box-shadow:0 3px 8px 0 darkgrey;*/

}

.popular-box p{

	text-indent:45px;

	font-weight:100;

	opacity:.8;

}

.popular-box h1{

	padding:.9rem 0;

}

#drainage-box{

	position: absolute;

	top:0;

	left:0;

	width:550px;

	z-index:10;

	background-color: black;

	border-top-left-radius:15px;

	border:1px solid #151515;

}

#drainage-box h1{

	color:white;

}

#drainage-box p{

	font-size:15px;

	color:#e9e9e9;

}

#installation-box{

	width:520px;

	position: absolute;

	right:0;

	top:190px;

	background:linear-gradient(55deg, #004771, #00639E);

	z-index:9;

	border:1px solid #004771;

	border-bottom-right-radius:20px;



}

#installation-box h1, p{

	color:white;

}

#mulching-box{

	position: absolute;

	top:430px;

	left:0;

	background:linear-gradient(10deg, #044B00, #068100);

	border:1px solid #044B00;

	width:500px;

	z-index:8;

	border-bottom-left-radius:24px;

}

#mulching-box h1, p{

	color:white;

}

#shrub-box{

	position: absolute;

	top:680px;

	right:0;

	width:520px;

	z-index:7;

	background:linear-gradient(45deg, #6C1B00, #A32900);

	border:1px solid #6C1B00;

	border-bottom-right-radius:12px;

}

#shrub-box h1, p{

	color:white;

}

#shrub-box h1{

	text-align: center;

}

.services-page-give-call-container{



	position: absolute;

	top:820px;

	left:20px;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	border:1px solid #FFBB0D;

	border-radius:12px;

	padding: 1rem;

}

.services-page-give-call-container h2, p{



	font-size:19px;

	color:white;

}

.services-page-give-call-container h2{

	

	font-weight: 300;

}

.services-page-give-call-container p{

	font-size:15px;

	border-radius:20px;

	padding:.6rem 1.3rem;

	background-color:#00938F;

	margin-top:.6rem;

}







/*                                           gallery page   */









.photo-viewer-container{

	position: fixed;

	top:0;

	left:0;

	z-index:200000;

	width:100%;

	height:100%;

	display: none;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	background-color:rgba(0,0,0, 0.9);

}



.photo-viewer{

	max-width: 98%;

	max-height:98%;



	border:1px solid black;

	

	background-size: cover;

	opacity:0;

	position: relative;

}

.photo-viewer-animation{

	animation:photoviewer 500ms ease-in-out forwards;

}

.button-container{

	position: absolute;

	top:0;

	left:0;

	width:100%;

	height: 100%;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

}

.next-previous-img-btns{

	display: flex;

	justify-content: space-between;

	align-items: center;

	width:95%;

    top:-10%;

	position: relative;

	margin:0 auto;

	z-index:25;

}

#next-img{

	position: absolute;

	top:0;

	right:0;



}

#previous-img{

	position: absolute;

	top:0;

	left:0;

}

.nxt-prev-btn{

	font-size:40px;

	color:white;

	padding:2rem 1rem;

	background-color:rgba(0,0,3, .5);

	cursor: pointer;

}

.nxt-prev-btn:hover{

	opacity: .7;

	transform:scale(1.09);

}



.exit-icon{

	position: absolute;

	top:5%;

	right:5%;

	cursor:pointer;

	background-color:black;

	border-radius:7px;

	padding:.8rem;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;



}

.exit-icon:hover{

	opacity:.7;

}

.exit-icon img{

	max-width:20px;

}



.gallery-page-container{







	height:auto;

	width:100%;

	background:linear-gradient(to top, #E0D9B9, white);

	padding:4rem 0 1rem 0;

}



.gallery-header-container{

	

	margin:0 auto;

	width:100%;

	height:500px;

	display: flex;

	align-items: center;

	flex-direction: column;

	justify-content: center;

	padding:3rem 1rem;

	position: relative;

	background-color:rgb(0,0,0, .7);

	background-image:url(photos/br/backgrounds/galleryheaderbackground2.jpg);

	background-size:cover;

	border-bottom:20px solid black;



	

}

.gallery-header-inner{

	margin:0 auto;

	width:70%;

	display: flex;

	align-items: center;

	justify-content: space-around;

	animation-delay: 1s;

	animation: pageelementfade 500ms ease-in-out forwards;



}

.header-box{

	position: relative;

}

.gv-gallery-header{

	color:white;

}



.gallery-header-container h1{

	font-size:40px;

	font-weight:600;

	color:white;

}

.sc-highlight{

	color: #D4D4D4;

	font-weight:800;



}

.fbook-photo-link-btn{

	padding:.5rem 1rem;

	border-radius:20px;

	font-size:15px;

	background:linear-gradient(40deg, #034E96, #0062BF);

	color:white;

	display: flex;

	justify-content: space-around;

	align-items: center;

	width:210px;

	margin:10px 0;



}

.fbook-photo-link-btn img{

	max-height:17px;

}

.fbook-photo-link-btn:hover{

	

	transform: translate(0, -7px);

	opacity: .8;

}



.gallery-header-info{

	display: flex;

	align-items: left;

	margin-left:20px;

	position: relative;



	

}

.gallery-header-divider{

	position: absolute;

	left:-30px;

	top:0;

	height:100%;

	width:3px;

	border-radius:4px;

	background-color:#FFC133;

	



}

.gallery-header-info p{

	

	font-size:17px;

	/*color:#4e4e4e;*/

	color:white;

	text-align: left;

}





/*     top of page photo slide viewer   */





.non-opaque-gallery-image{

	opacity: 1;

}





/* slide btns  */



.slide-buttons-container{

	position: relative;

	

	z-index:5000;

	margin:0 auto;

	width:100%;

	display: none;

	align-items: center;

	justify-content: space-between;

	transition-duration:.3s;





}

.slide-btn{

	font-size:55px;

	color:white;

	font-weight:800;

	cursor:pointer;

	padding:.4rem;

	background-color:rgb(175, 189, 202, 0.7);

}

.slide-btn:hover{

	background-color:black;

	opacity: .7;



}





.gallery-top-page-photo-slider-container{





	height:500px;

	width:100%;

	/*border:1px solid white;*/

	margin:0 auto 3rem auto;

	position: relative;

	overflow: hidden;

	border-radius:4px;

	background-color:#656565;



}

.gallery-top-page-photo-slider-container:hover .slide-buttons-container{

	display: flex;



}



.gallery-slider-inner-container{

	width:600px;

	height:100%;

	position:relative;

	margin:0 auto;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	border-radius:8px;

	

	

	

}



.slide-boxes-container{

	height:100%;

	width:6000px;

	

	position: absolute;

	left:-4800px;



	display: flex;

	transition-duration: 800ms;

}

.gallery-slide-box{

	width:600px;

	width:100%;

	height:100%;

	background-size:cover;



}



/*         gallery photo grid section   */













.gallery-photo-grid-container{

	width:100%;

	height:auto;

	padding:2rem 0;

	





}

.gallery-photo-grid {

	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	width:90%;

	height:90%;

	margin:0 auto;

	grid-gap:5px;

}

.photo-grid-box{

	width:300px;

	height:300px;

	margin:0 auto;

	background-size:cover;

	cursor:pointer;

	border-radius: 4px;

}

.photo-grid-box:hover{

	opacity:.8;

	text-transform: scale(1.02)



}

.left-two-box-grid{

	display: grid;

	grid-template-rows:1fr 1fr;

	grid-gap:5px;

}

.right-four-box-grid{

	display: grid;

	grid-template-columns: 1fr 1fr;

	grid-template-rows: 1fr 1fr;

	grid-gap:5px;

}

.box{

	border-radius:3px;

	background-size:cover;

	cursor:pointer;

}

.box:hover{

	opacity:.8;

	text-transform: scale(1.02)

}









/*                                                   contact page   */







.contact-page-container{



	width:100%;

	padding:10rem 0 1rem 0;

	/*background:linear-gradient(45deg, #C3C7C7, white );*/

	background-color:#E7E7E7;

}



.contact-form--contact-info-container{

	opacity:0;

	margin:0 auto;

	width:90%;

	display:grid;

	grid-template-rows: 1fr 5fr;

	border-radius:15px;

	border:1px solid #C7C7C7;

	box-shadow:0 5px 10px 0 #C0C0C0;

	padding:2rem .5rem;

	background-color:#F2F2F2;

	animation:pageelementfade 1000ms ease-in-out forwards;

	animation-delay:500ms;



}

.contact-header-section{

	

	width:100%;

	text-align: center;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

}

.contact-header-section h1{

	font-size:32px;

	color:#FFD100;

	background-color:#00A4C9;

	padding:.7rem 1.9rem;

	border-radius:33px;



}

.td-highlight{

	color:white ;

}

.contact-us-grid{

	width:100%;

	display: grid;

	grid-template-columns: 1fr 4fr;

}

.contact-icon-section{

	

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: space-around;

	padding:1.5rem 0;

	position: relative;

}

.contact-info-box{

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	margin:2rem 0;

	text-align:center;

	

	

}

.contact-divider{

	width:1px;

	height:70%;

	position: absolute;

	top:20%;

	right:-20px;

	background-color:#6b6b6b;

	border-radius: 5px;

}

.contact-info-box img{

	margin:0 auto;

	margin-bottom:15px;

}

.contact-info-box h2{

	font-size:15px;

	margin-bottom:2px;

}

.contact-info-box p{

	font-size: 12px;

	color:#6C6C6C;

}

.message-divider{

	height:3px;

	width:60%;

	background-color:#17B6FF;

	margin:1.5rem 0;

	border-radius:20px;

}

.contact-form-section{

	padding:4rem 0 0 4rem;

	



}

.contact-form-section h1{

	font-size:25px;

	margin-bottom:1rem;



}

.contact-form-section p{

	font-size:15px;

	margin-bottom:1rem;

	color:#525252;



}

form{

	display: flex;

	flex-direction: column;

}

form .form-input{

	font-size:15px;

	padding:.8rem .6rem;

	background-color:#e2e2e2;

	border: none;

	margin:.2rem 0;

	border-radius:3px;

	outline-color: white;

}

.form-input:focus{

	outline-color: #D98E00;

}

#submit{

	border:none;

	margin-top:15px;

	padding:.8rem 1rem;

	border-radius:20px;

	background-color:#00ABCE ;

	color:white;

	width:100px;

	cursor:pointer;

	text-align: center;



}





/* back to home page */

.contact-back-to-home-container{

	display: flex;

	background-color:white;

	align-items: center;

	justify-content: center;

	margin:8rem auto;

	padding:.3rem 0;

	text-align: center;

	cursor: pointer;

	width:60%;

	border-radius: 25px;

	box-shadow:0 2px 5px 0 #868686;





}

.contact-back-to-home-container h1{

	color:black;

	font-size:18px;

	font-weight:500;



}

.go-to-span{

	padding:3px 0 0 12px;

	color:orange;

	font-size:25px;

	font-weight:800;

	transition-duration: .3s;

}

.contact-back-to-home-container:hover .go-to-span{

	margin-left:15px;

}





/*                                                           map section    */



.map-section-container{

	display: grid;

	grid-template-columns: 1fr 1fr;

	width:100%;

}

.contact-divs-section{

	display: flex;

	flex-direction: column;

	justify-content: space-around;

	width:100%;

	height: 100%;

	background-image:url(photos/br/backgrounds/pic11.jpg);

	background-size: cover;

	background-repeat: no-repeat;

	background-position: center;



}

.map-info-box{

	margin:0 auto;

	height:100%;

	width: 100%;

	display:grid;

	grid-template-columns: 1fr 2fr;

	align-items: center;

	border:1px solid rgb(255,255,255,0.4);

	



}

.map-icon-container{

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

}

.contact-icon{

	max-width:40px;

	

	



}



.contact-box-info-box{

	text-align: left;

	display: flex;

	flex-direction: column;



	justify-content: center;

	



}

.contact-box-info-box h2{

	color:white;

	font-size:21px;

	



}

.contact-box-info-box p{

	font-size:15px;

	color:white;

}





.map-section iframe{



	

}









/*                                                 FOOTER  */







footer{

	position: relative;

	bottom:0;

	width:100%;

	height:350px;

	text-align: center;

	background-color:black;/*linear-gradient(3deg, black, #0e0e0e);*/

	display:flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	border-top:1px solid #4F4F4F;

}



footer p{

	font-size:14px;

	color:#b6b6b6;

}

footer span{

	color:#AD3E00;

}

.footer-main-container{



	display: grid;

	grid-template-columns: 1fr 1fr 1fr;

	width:70%;

	/*border:1px solid white;*/

	padding:2rem 0;

	margin:0 auto;

}

.footer-logo-container{

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;



}

.footer-logo-container img{

	max-width:120px;

}

.footer-divider{

	height:100%;

	width:1px;

	background-color:#575757;

	margin:0 auto;

}

.footer-links-container{

	

}

.footer-links-list{

	display: flex;

	flex-direction: column;

	justify-content: space-around;

	text-align: left;

}

.footer-link-icon img{

	margin-top:10px;

	max-height:20px;

}

.footer-link-icon img:hover{

	opacity:.7;

}

.footer-link{

	color:#BABABA;

	font-size:12px;

	line-height:1.2;





}

.footer-link:hover{

	opacity:.8;

	

}

.footer-link-divider{

	margin-bottom: 5px;

	height:.5px;

	width:80px;

	background-color:inherit;

}

.copyright-container{

	width:80%;

	line-height: 1.2;

}

.copyright-logo{

	color:#CACACA;

	font-size:14px;

}

.copyright-container p:nth-child(2){

	font-size: 13px;

}



/*                                                      media queries   */



/* 1000px */



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







	/*         front page main attraction section    */







.main-attraction-container{

	display: flex;

	flex-direction: column;

	padding:0 0 6rem 0;

	height:1000px;

}

.main-attraction-hero-section{

	padding-top:11rem;



}



	.hero-section-about-container img{

		max-height:90px;

		margin-left:0rem;

	}

.small-hero-text{

	padding:0;

}

.ft-services{

	margin:0 auto;

}

.main-attraction-services-container{

	margin-left: 0;

	margin-right:0;

}



.estimate-section{



}



.estimate-inner-box{

	margin-bottom:2rem;

	width:95%;

}

.estimate-email-box{

	width:60%;

}



.estimate-header-info{

	margin:0 0 1.5rem 0;

	

}

.estimate-header-info p{

	width:60%;

}

.estimate-box-divider{

	top:7px;

	width:100%;

}





/* services page */

.popular-services-container{

	height:auto;

	width:75%;

	margin-top:2rem;

	padding:1.5rem 0;

	



}



#drainage-box, #installation-box, #mulching-box, #shrub-box{

	width:100%;

	position: relative;

	top:0;

	bottom:0;

	left:0;

	right:0;

}

.services-page-give-call-container{

	position: static;

	margin-top:4rem;

}



/* mission section  */

.mission-header-box{

	width:90%;

}

.mission-section{

	flex-direction: column;

	width:100%;

	/*height:1000px;*/

	height:auto;



}

.mission-statement{

	position: static;

	top:0;

	left:0;

	margin:0 auto;

	width:90%;

}

.about-us{

	position: static;

	margin:0 auto;

	width:80%;

	padding:1rem 2rem 3rem 2rem;

	border-bottom-left-radius:5px;

}







/* map section */

.map-section-container{

	display:flex;

	flex-direction: column;

	align-items: center;

	

	

}

.contact-divs-section{

	width: 100%;

}

.map-info-box{

	text-align: center;

	margin:0 auto;

	padding:.5rem 0;

	grid-template-columns: 1fr 1fr;

	height:200px;





}

.contact-box-info-box{



}

iframe{

	width:100%;

}

/* gallery page  */



.photo-viewer{

	/*max-width:500px;*/

}





/*footer*/

.footer-main-container{

	width:70%;

}



















}



/* 800px  */







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











	/* mobile navigation menu  */



.hamburger-menu-container{

	

	display: flex;

	flex-direction: column;

	justify-content: space-around;

}

.hamburger-menu-container:hover{

	opacity: .7;

}



/*main navigation links  */



.navigation-container{

	display: flex;

	justify-content: space-between;

	align-items: center;

}

#navigation-logo{

	text-align: center;

	line-height: 1;

}



.navigation-links{

	display: none;

}



.navigation-icons{

	padding:0;

}









/*         front page main attraction section    */







.main-attraction-container{

	display: flex;

	flex-direction: column;

	

}

.main-attraction-hero-section{

	

}

.ft-services{

	margin:0 auto;

}

.main-attraction-services-container{

	

	margin-right:0;

}



.estimate-inner-box{

	margin-bottom:2rem;

}



.estimate-header-info{

	margin:0 0 1.5rem 0;

	

}

.estimate-header-info p{

	width:60%;

}



.map-section-container{



}

.contact-box-info-box h2{

	font-size:16px;



}

.contact-box-info-box p{

	font-size:12px;



}









/*                       gallery page   */



.gallery-header-container{

	

}

.gallery-header-inner{

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	text-align: center;



}

.gallery-header-info{

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	text-align: center;

	margin:2rem auto .5rem auto;

}

.gallery-header-info p{

	text-align: center;

}

.gallery-header-divider{

	position: relative;

	height:2px;

	width:100%;

	left:0;

	top:-10px;



}

.fbook-photo-link-btn{

	margin:0 auto;

}





.gallery-top-page-photo-slider-container{





	height:300px;

	width:100%;

	



}



.gallery-slider-inner-container{

	

	width:380px;

	height:100%;

	position:relative;

	margin:0 auto;

	

	

	

}

.slide-boxes-container{

	width:3800px;

	left:-3040px;

}

.gallery-slide-box{

	width:380px;

}



/* gallery grid */

.gallery-photo-grid-container{



	height:auto;

}



.gallery-photo-grid{

	display: flex;

	flex-direction: column;

	justify-content: center;

	padding:2rem 0;

}

.box{

	height:350px;

}

.left-two-box-grid{

	display: flex;

	flex-direction: column;

	justify-content: center;

}

.right-four-box-grid{

	display: flex;

	flex-direction: column;

	justify-content: center;

}

.photo-grid-box{

	width:100%;

}





















/*                                           contact boxes info section on home page   */





.home-page-contact-boxes-container{

	width:99%;

	height:auto;

	display: flex;

	flex-direction: column;

	margin:.2rem ;

}



.home-page-contact-box{

	height:150px;

	width:100%;







	

}

.contact-box-inner-box{

	display: grid;

	grid-template-columns: 1fr 2fr;

	text-align: center;

	width:60%;





}

.contact-box-info-box{

	text-align: left;



}



#phone-box{

	margin:.2rem 0;

	

}



/* contact page  */

.contact-form--contact-info-container{

	grid-template-rows: 1fr ;

}

.contact-header-section{

	padding:3rem 0;

}



.contact-us-grid{

	grid-template-columns: 1fr;

	grid-template-rows: 1fr 1fr;

}

.contact-icon-section{

	

	width: 100%;

	padding:.5rem 0;

}

.contact-info-box{

	margin:1.5rem 0;

	height:150px;

	width:98%;

	border:1px solid #CACACA;

	border-radius:10px;

	box-shadow:0 3px 7px 0 #868686;



}

.contact-info-box p{

	

	text-align: center;

}

.contact-divider{

	height:1px;

	width:80%;

	bottom:0;

	margin:0 auto;

	display: none;

}

.contact-form-section{

	padding:2rem .2rem;

}



}



/*                       500px media query   */





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







/*navigation  */



#navigation-logo{

	z-index:-6000;

	margin-top:.2rem;

	padding:0;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	animation-delay: 500ms;

	animation: navlogofade 1000ms ease-in-out forwards;

}

#navigation-logo img{

	max-height:60px;

}



.logo-words{

	display: flex;

	justify-content: space-around;

	flex-direction: column;

	align-items: left;

	color:white;

	margin-left:15px;

	

}

.logo-letters{

	font-size:13px;

	text-align: left;

	font-weight:300;

}

.logo-highlight{

	color:#E17B00;

}

#logo-png{

	max-width:100px;

		padding:0;



}







	/* home-page  */







	.main-attraction-services-container{



		width:100%;

	}

	.service-h1{

		font-size:26px;



	}

	.services-bracket-png{



		opacity:0;

	}



	.estimate-header-info h1{

		font-size:28px;

	}

	

	





	/* services page  */



	.service-list-header-container h1{

		font-size:32px;

	}

	.service-header-dec-bottom{

	

	height:30px;

	width:50px;

}

.service-header-dec-top{

	

	height:30px;

	width:50px;

}



}









/*                                        animations     */





@keyframes navlinkdecfade{



	from{

		opacity: 0;

	}

	to{

		opacity: 1;

	}

}









/* background image fade in out */



@keyframes backgroundfade{

	0%{

		opacity: 0;

	}



	100%{

		opacity: 1;

	}

	

}





/*    service header fade   */



@keyframes servicefadein {



	0%{

		opacity: 1;

	}

	50%{

		opacity:0;

	}

	100%{

		opacity: 1;

	}

}



@keyframes servicefadeout{

	0%{

		opacity:1;

	}

	100%{

		opacity:0;

	}

}



@keyframes test {

	0%{

		left:-90%;

	}

	100%{

		left:-80%;

	}

}







/*    element fade on page animation   */



@keyframes  pageelementfade{





	0%{

		opacity:0;

		transform:translate(0%, -10%);

	}

	100%{

		opacity:1;

		transform:translate(0%, 0%);

	}

}







/* naviagtion logo fade  */



@keyframes navlogofade {

	0%{

		transform: translate(0, -10px);

	}

	100%{

		transform: translate(0, 0);

	}

}



@keyframes photoviewer{



	0%{

		opacity: 0;

	}

	100%{

		opacity:1;

	}

}



@keyframes nextPrevBtnFade{

	0%{

		opacity: 1;

	}

	100%{

		opacity: 0;

	}

}

@keyframes nextPrevBtnShow{



	0%{

		opacity: 0;

	}

	100%{

		opacity: 1;

	}



}