.body {font-family: 'Montserrat', sans-serif;background:#f8f8f8;padding:0px;max-width:100%;margin:0 0 0 0;color:black;}

h2 {font-weight:600;text-align:center;}

.container {margin:2px 25px 25px 25px;min-height: 600px;}

.siteBrand {text-align:center;vertical-align: middle;display: block;width:100vw;height:250px;}

.siteBrand video {
  width: 100vw;
  height:305px;
  overflow: hidden;
  margin:0px;
  position:absolute;
  left:0;
  top:34px;
  object-fit: cover;
  z-index: -999;
}

.logoContainer {
	width:90vw;
	margin:25px auto 0px auto;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	vertical-align: middle;
	z-index:999;
}

.emptyBox {
	text-align: left;
	vertical-align: middle;
}

.ribbonBox {
	text-align: left;
	vertical-align: middle;
}

.logo {
	
}

.ribbonImage {
	width:75px;
	margin-top:25px;
}

.cancerBox {
	width:90%;
	text-align: center;
	margin:20px auto 10px auto;
}

.cancerbox img {
	width:25%;
	margin: 10px;
}


.logoImage {
	max-width: 495px;
}

.footerLogo {max-width: 150px;}

.siteHeaderBar {width:100vw;height:75;padding:10px;background-image: url("/jclawncare/assets/images/blackGrass.jpg");background-position:center;background-repeat: none;background-size:cover;display: grid;grid-template-columns: 1fr 1fr;}

.siteHeaderBar h1 {color:white;text-shadow: 2px 2px black;margin-top:5px;margin-left:25px;
}

.serveDiv p {
	font-style: italic;
	color:white;
	text-align: right;
	margin-right: 25px;
}

.contactButtonContainer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:20px;
}

.contactButton {
	width:90%;
	border-radius: 12px;
	background: #ebebebe5;
	color:black;
	text-align: center;
	font-weight: bold;
	padding:15px 0px 15px 0px;
	display: block;
}

.contactButton:hover {
	background: #ebebeb7d;
	color:#555;
}

.mainHeader {text-align: left;height:60px;font-size:1.5em;color:white;border-radius:6px;font-family: 'Montserrat', sans-serif;padding:10px 5px 10px 5px;
z-index:9;grid-column-start: 1;grid-column-end: 4;}

.topBar {background: green;width:100vw;height:65px;z-index: 999;font-size:9px;padding:8px 0px 0px 40px;display:grid;grid-template-columns: 1fr 1fr 1fr; gap:25px;}

.siteNav {padding:0px 10px 0px 0px;grid-column-start: 1;grid-column-end: 4;display: block;width:100vw;text-align: center;background: black;border-bottom:2px solid #F0580D;height: fit-content;z-index: 999;} 

.topBar div {
	text-align: center;
	font-size:16px;
	color:white;
	padding:6px;
	font-weight: 600;
}

.topBar div a {
	color:white;
	text-decoration: none;
}

.topBar div a:hover {
	color:rgb(119, 222, 119);
	text-decoration: underline;
}

.topBar div img {
	height: 40px;
	vertical-align: middle;
}

.announcementBox {
	background: black;color:white;
	width:100vw;
	margin:0px -25px 0px -25px;
	text-align: center;
}

.footerSocial {display: inline-block;width:30px;margin-right: 4px;}

.lawnBox {background-image:url('/jclawncare/assets/images/lawnTab.jpg');background-size: cover;background-position:center;color:black;padding:25px;text-align: center;list-style: none !important;}
.snowBox {background-image:url('/jclawncare/assets/images/snowTab.jpg');background-size: cover;background-position:center;color:black;padding:25px;text-align: center;list-style: none !important;}
.landscapeBox {background-image:url('/jclawncare/assets/images/landscapeTab.jpg');background-size: cover;background-position:center; color:black;padding:25px;text-align: center;list-style: none !important;}

.lawnBox ul {margin-block-start: 0em;padding-inline-start: 0px;line-height: 150%;list-style: none !important;}
.snowBox ul {margin-block-start: 0em;padding-inline-start: 0px;line-height: 150%;list-style: none !important;}
.landscapeBox ul {margin-block-start: 0em;padding-inline-start: 0px;line-height: 150%;list-style: none !important;}

.contentBox {opacity: 1.0 !important;color:black;text-align: center;}
.contentBox ul {margin-block-start: 0em;padding-inline-start: 0px;line-height: 150%;list-style: none !important;}

.announcementBox {
	padding:25px;
}

.estimateBox {
	padding:25px;
	text-align: center;
}

.estimateBox p {
	line-height: 150%;
}

.estimateBox img {
	height:85px;
	width:85px;
	margin:10px auto 15px auto;
}

.estimateBox a {font-weight: bold;color:#F0580D;}

.grassSlide {
	background-image:url('/jclawncare/assets/images/grassSlide.jpeg');background-size: cover;background-position:center;height:250px;width:100vw;margin:5px -25px 35px -25px;
}

.aboutBox {
	line-height: 140%;
}

.singleColumn {
	display: grid;
	grid-template-columns: 1fr;
	gap:25px;
}

.doubleColumn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:25px;
	margin-bottom:15px;
}

.tripleColumn {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:0px;
	margin:0px -25px 0px -25px;
}

.searchResult {clear:left;max-width:100%;margin:auto;min-height:80px;display: block;margin-bottom:10px;color:white;margin-top:10px;padding:15px;}
	
.searchResult:hover {background: #efefef;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	0 2px 2px rgba(0,0,0,0.11), 
	0 4px 4px rgba(0,0,0,0.11), 
	0 6px 8px rgba(0,0,0,0.11),
	0 8px 16px rgba(0,0,0,0.11);border-radius:5px;}

.searchResultTitle {color:#89c174;text-decoration: underline;font-size: 1.25em;}
.searchResultDesc {color: #454545;line-height: 2.25em;
}
.searchResultData {
	color:#ccc;text-decoration: underline;
}

.searchBar {text-align: center;position: relative;clear:left;width:auto;display: inline-block;}

.searchField {padding:10px;font-size:.6em;height:32px;border: 0px;border-radius: 5px;width:375px;margin:4px;border:1px solid #acacac;}
.searchButton {
	width:50px;
	height:30px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	  0 2px 2px rgba(0,0,0,0.11), 
	  0 4px 4px rgba(0,0,0,0.11), 
	  0 6px 8px rgba(0,0,0,0.11),
	  0 8px 16px rgba(0,0,0,0.11);
	  color:black;
	  font-weight:300;
	  background-color:white;
	  font-size:.6em;
	  text-align: center;
	  text-decoration: none;
	  border-radius:3px;
	  padding:7px 10px 15px 10px;
	  display: inline-block;
	  margin-left:10px;
	  border:0px;
  }
	  
.searchButton:hover {
	background:#e6e6e6;
	}
	
	.featuredPhotos {display: inline-grid;grid-template-columns: 1fr 1fr;grid-row-start: 4;grid-row-end: 5;grid-column-start: 1;grid-column-end: 4;}
	.leftFeaturedPhoto {grid-column-start: 1;grid-row-start: 2;grid-row-end: 3;grid-column-end: 3;background: green;}
	.rightFeaturedPhoto {grid-column-start: 2;grid-row-start: 2;grid-row-end: 3;grid-column-end: 3;background: rgb(87, 3, 0);}
	.rightFeaturedPhoto2 {grid-column-start: 2;grid-row-start: 3;grid-row-end: 4;grid-column-end: 3;background: rgba(168, 13, 206, 0.803);}
	
.adminHeader {text-align: center;font-size:1.5em;color:white;font-family: 'Montserrat', sans-serif;width:100vw;height:90px;background:darkgray;margin: 0px;padding-top:5px;}


.mainSlider {height:fit-content !important;width:100vw;margin:0px -25px 0px -25px;grid-column-start: 1;grid-row-start: 2;grid-row-end: 3;grid-column-end: 4;overflow: hidden;display: block;padding:0px;}
.slideItem {width:100px;height:450px !important;display: inline-block;background: white;padding:0px;}
.slideItem img {position: absolute;z-index: 1;width:100vw;}
.slideBox {width:100vw;text-align:center;display: block;position: absolute;margin:150px 0px 0px 0px;z-index: 99;}
.slideText {font-size:42px;font-weight: bold;color:white;text-shadow: 1px 1px 13px black;}
.slideButton {font-size:18px;text-align: center;color:white;font-weight: bold;background:#F0580D;padding:12px;border-radius: 8px;margin-top:35px;display: none;text-decoration: none;}
.slideButton:hover {
	background:#c14304;
}

.formButton {font-size:18px;text-align: center;color:white;font-weight: bold;background:#F0580D;padding:12px;border-radius: 8px;margin-top:15px;display: inline-block;text-decoration: none;}
.formButton:hover {
	background:#c14304;
}

 #notificationBox {
		display: none;width:350px;top:25px;right:25px;height:85px;
		box-shadow: 0 1px 1px #0000001c, 
		  0 2px 2px #0000001c, 
		  0 4px 4px #0000001c, 
		  0 6px 8px #0000001c,
		  0 8px 16px #0000001c;
		padding:5px 15px 15px 15px;
		text-align: left;
		background: #2d2d2df3;
		color:white;
		position: absolute;
		border-radius: 8px;
	}
	
#notificationBox h2 {	
	color:white;
	margin-top:10px;
	margin-bottom:5px;
	display: block;
	font-size:16px;
	text-align: left;
}

#notificationBox p {	
color:white;
text-align: left;
line-height: 17px;
font-size:14px;
margin-top:5px;
}

  /* Style the navigation menu */
 
nav {
	margin:0 0px;
	padding:px 0px 0px 0px;
	width:fit-content
	height:auto;
	display:inline-block;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	
  }
  
  nav ul {
	margin:0;padding:0;
	list-style-type:none;
	display:inline-block;
  }
  
  nav ul li {
	position:relative;
	display:inline-block;
	color:white;
	padding:0px;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight:bold
	;text-decoration: none;
	display:inline-block;
	width:auto;
	text-shadow: 2px 2px #333;
  }
  
  //li > a:after { content: ''; } /* Change this in order to change the Dropdown symbol */
  
  li > a:only-child:after { content: ''; }
  
  nav ul li a {
	padding:30px 20px 30px 20px;
	display:inline-block;
	color:white;
	text-decoration:none;
  }
  
  nav ul li a:hover {
	background:#F0580D;
	color:white;
  }
  
  nav ul li ul {
	display:none;
	position:absolute;
	
	border: 1px solid #dedede;
	text-align: left;
  }
  
  nav ul li ul li {
	text-align: left;
	
	margin-left:0px;
  }
  
  nav ul li ul li a:hover {
	  padding:40px 20px 30px 20px;
	  background:#F0580D;
	  color:white;
  }
  
  nav ul li:hover ul {
	display:block;
  }
  
  


.aboutHero {grid-column-start: 1;grid-column-end: 2;padding:10px;vertical-align: middle;text-align: center;}
.aboutHero h2 {text-align: left;color:#A50E0E;font-weight: 600;font-size: 2em;}
.aboutHero2 {grid-column-start: 2;grid-column-end: 4;padding:10px;vertical-align: middle;}
.aboutHeroPhoto {
	grid-column-start: 1;grid-column-end: 4;background-image: url('/polley/assets/uploads/slide2.jpg');background-size: cover;background-position: bottom right;text-align: center;height:100%;}

.aboutHeroPhoto p {color:white;font-size:1.8em;font-style:italic;font-weight: 600;
}

.featuredHeroTitle {font-size: 16px;font-weight: bold;vertical-align: middle;text-transform: uppercase;}

.featuredText {display:block;position: absolute;z-index:50;background: #a50e0e;color:white;width:100%;height:55px;padding-top:1px;bottom:0px;}

.featuredHero1 {
	margin:25px;grid-column-start: 1;grid-column-end: 2;text-align: center;color:white;
	overflow: hidden;margin-left:50px;height:250px;height:280px;background-size: cover;display: inline-block;position: relative;
}
.featuredHero2 {
	margin:25px;grid-column-start: 2;grid-column-end: 3;text-align: center;color:white;
	overflow: hidden;height:250x;margin-left:10px;margin-right:10px;height:280px;background-image: url('/polley/assets/uploads/slide4.jpg');background-size: cover;display: inline-block;position: relative;
}
.featuredHero3 {
	margin:25px;grid-column-start: 3;grid-column-end: 4;text-align: center;color:white;
	overflow: hidden;height:250px;margin-right:50px;height:280px;background-image: url('/polley/assets/uploads/slide2.jpg');background-size: cover;display: inline-block;position: relative;
}

.servicesHeader {grid-column-start: 1;grid-column-end: 4;font-size:1.5em;}

.servicesHero1 {
	margin:25px;grid-column-start: 1;grid-column-end: 2;text-align: center;color:black;background: white;
	overflow: hidden;margin-left:50px;height:250px;height:280px;display: inline-block;position: relative;border:1px solid #ccc;
}
.servicesHero2 {
	margin:25px;grid-column-start: 2;grid-column-end: 3;text-align: center;color:black;background: white;
	overflow: hidden;height:250x;margin-left:10px;margin-right:10px;height:280px;display: inline-block;position: relative;border:1px solid #ccc;
}
.servicesHero3 {
	margin:25px;grid-column-start: 3;grid-column-end: 4;text-align: center;color:black;background: white;
	overflow: hidden;height:250px;margin-right:50px;height:280px;display: inline-block;position: relative;border:1px solid #ccc;
}

.servicesPhoto {padding:5px 5px 5px 5px;width:100%;height:80%;}

.servicesText {display:block;position: absolute;z-index:50;background: white;color:black;width:100%;height:55px;padding-top:1px;bottom:0px;}

.contactHero {
	grid-column-start: 1;grid-column-end: 4;color: rgb(88, 88, 88);
	border-radius: 5px;background: rgb(223, 223, 223);margin:25px;padding:45px;text-align: center;
}

.brandsHero {
	grid-column-start: 1;grid-column-end: 4;color: rgb(88, 88, 88);
	padding:45px;text-align: center;
}

.brandsHeader {font-size:1.5em;}

#map {
	width:100%;
	border-radius: 8px;
	height:350px;
}

.inputText {
	border:1px solid #dcdcdc;
	padding:8px 10px 8px 10px;
	border-radius: 8px;
	font-size:18px;
}

textArea {
	border:1px solid #dcdcdc;
	padding:8px 10px 8px 10px;
	border-radius: 8px;
	font-size:18px;
}

.footerLeft {
	grid-column-start: 1;grid-column-end: 3;color: white;
	padding:25px;text-align: left;
}

.footerRight {
	grid-column-start: 3;grid-column-end: 4;color: white;
	padding:25px;text-align: left;
	vertical-align: top;
}

.footerColumn{
	width:33%;margin:auto;
	max-width:33%;
	padding:5px;text-align: left !important;color: white;
	vertical-align: top;display: inline-block;
}

.footerHeader {font-weight: 600;font-size: 20px;text-transform: uppercase;}

.hammer {width:60px;text-align: center;}

.gridButton {
	width:30px;
	display: inline-block;
	  margin-top:25px;
	  position: absolute;
	  top:7px;
	  right:165px;
	  border:0px;
}

.loginButton {
	width:80px;
	height:10px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	  0 2px 2px rgba(0,0,0,0.11), 
	  0 4px 4px rgba(0,0,0,0.11), 
	  0 6px 8px rgba(0,0,0,0.11),
	  0 8px 16px rgba(0,0,0,0.11);
	  color:black;
	  font-weight:300;
	  background-color:white;
	  font-size:.6em;
	  text-align: center;
	  text-decoration: none;
	  border-radius:3px;
	  padding:8px 12px 14px 12px;
	  display: inline-block;
	  margin-top:25px;
	  position: absolute;
	  top:5px;
	  right:45px;
  }
	  
.loginButton:hover {
	background:#e6e6e6;
	}

.standardButton {
	width:auto;
	height:auto;
	  color:black;
	  border:0px;
	  font-weight:300;
	  background-color:white;
	  font-size:.9em;
	  text-align: center;
	  text-decoration: none;
	  border-radius:12px;
	  
	  padding:15px 15px 15px 15px;
	  display: inline-block;
	  margin: auto;
	  margin-top:25px;
  }
  
  .mobileNavButton {
	  display: none;
  }
  
  .icon {
	  color:white;
  }
	  
.standardButton:hover {background:#e6e6e6;}
.contentBody {height:auto;display:block;}

.closeButton {float:right;margin-right:0px;margin-top:0px !important;font-weight: 600;font-size:1em;color: #454545;padding:2px 5px 2px 5px;border:1px solid #454545; border-radius: 3px;text-decoration: none;position: relative;}
.closeButton:hover {background:#454545;color:white;}

.row {display:block;margin-bottom:25px;clear:right;position:relative;}
.loginHero {max-width:100%;margin:auto;border-radius:5px;background: #131313;background-image:url('/assets/images/loginHero.jpg');background-size: cover;background-position: center;height:auto;display: block;margin-bottom:25px;color:white;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
0 2px 2px rgba(0,0,0,0.11), 
0 4px 4px rgba(0,0,0,0.11), 
0 6px 8px rgba(0,0,0,0.11),
0 8px 16px rgba(0,0,0,0.11);}
.mainHero {max-width:100%;margin:auto;border-radius:5px;background: #1391b9;background-image:url('/assets/images/caffiend.jpg');background-size: cover;background-position: center;height:325px;display: block;margin-bottom:25px;color:white;padding:25px;padding-top:75px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	0 2px 2px rgba(0,0,0,0.11), 
	0 4px 4px rgba(0,0,0,0.11), 
	0 6px 8px rgba(0,0,0,0.11),
	0 8px 16px rgba(0,0,0,0.11);}
.secondHero {max-width:46%;width:45%;margin:auto;border-radius:5px;background:#e28c2b;background-image:url('/assets/images/numbernow.jpg');background-size: cover;background-position: right;height:250px;display: inline-block;margin-bottom:25px;padding:2%;color:white;float:left;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	0 2px 2px rgba(0,0,0,0.11), 
	0 4px 4px rgba(0,0,0,0.11), 
	0 6px 8px rgba(0,0,0,0.11),
	0 8px 16px rgba(0,0,0,0.11);}
.thirdHero {max-width:46%;width:45%;margin:auto;border-radius:5px;background:#e54242;background-image:url('/assets/images/redescape.jpg');background-size: cover;background-position: right;height:250px;display: inline-block;margin-bottom:25px;color:white;padding:2%;float:right;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	0 2px 2px rgba(0,0,0,0.11), 
	0 4px 4px rgba(0,0,0,0.11), 
	0 6px 8px rgba(0,0,0,0.11),
	0 8px 16px rgba(0,0,0,0.11);}
.bottomHero {clear:left;max-width:100%;margin:auto;border-radius:5px;background: #89c174;height:200px;display: block;margin-bottom:25px;color:white;margin-top:25px;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	0 2px 2px rgba(0,0,0,0.11), 
	0 4px 4px rgba(0,0,0,0.11), 
	0 6px 8px rgba(0,0,0,0.11),
	0 8px 16px rgba(0,0,0,0.11);}
	
	.topHero {clear:left;max-width:100%;margin:auto;border-radius:5px;background: #50bbee;height:55px;display: block;margin-bottom:25px;color:white;margin-top:25px;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
		0 2px 2px rgba(0,0,0,0.11), 
		0 4px 4px rgba(0,0,0,0.11), 
		0 6px 8px rgba(0,0,0,0.11),
		0 8px 16px rgba(0,0,0,0.11);}

.loginModal {width:40vw;color:white;height:250px;display: none;border:1px solid #1f1f1f; border-radius: 5px;background: #151515;position: absolute;top:50px;padding:25px;left:28vw;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	  0 2px 2px rgba(0,0,0,0.11), 
	  0 4px 4px rgba(0,0,0,0.11), 
	  0 6px 8px rgba(0,0,0,0.11),
	  0 8px 16px rgba(0,0,0,0.11);z-index: 999;
  }

.loginButtonSmall {
	width:100px;
	height:35px;
		  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
			0 2px 2px rgba(0,0,0,0.11), 
			0 4px 4px rgba(0,0,0,0.11), 
			0 6px 8px rgba(0,0,0,0.11),
			0 8px 16px rgba(0,0,0,0.11);
			border:0px;
			color:#ccc;
			font-weight:300;
			background-color:#353535;
			font-size:.9em;
			text-align: center;
			text-decoration: none;
			border-radius:3px;
			padding:8px 15px 14px 15px;
			display: inline-block;
			position: absolute;
			bottom:25px;
			right:25px;
		}

.loginButtonSmall:hover {background: #7e7e7e;}
.loginModal a {color:#4b4b4b;font-size: .9em;display:block;margin-top:25px;}
.loginInput {width:100%;padding:10px;font-size:.9em;border-radius: 3px;border:0px;margin-top:5px;background: #464646;}

.footer {max-width:100vw;height:auto;background: #000000;color:white;padding:3px;margin:0 0 0 0;clear:left;display:grid;position:relative;bottom:0;grid-template-columns:1fr 1fr;}
.footer p {font-size:.9em;}

.mainHeroHead {font-size: 2em;font-weight: 600;}
.mainHeroSubhead {line-height:1.25em;font-size: 1.25em;}

/* APP PAGE */

.appPageIcon {border-radius: 5px;max-width:75px;margin-top:25px;text-align: center;}
.appPageTitle {font-size:2.5em;margin-top:0px;font-weight: 600;display:block;position:absolute;top:175px;right:50px;vertical-align: middle;text-align: right;}
.appPageSubhead {font-style: italic;font-size:1.25em;}	

.screensViewer {height:125px;background:gray;border-radius: 5px;padding:15px;margin-bottom:25px;
	display: grid;
	grid-gap: 16px;
	grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
	grid-auto-flow: row;
	grid-auto-columns: minmax(200px,1fr);
	overflow-x: scroll;
	overflow-y:hidden;
	margin-right:0px;
	overflow-wrap: break-word;
}
.screenShotSmall {width:200px !important;height:auto;margin-right:15px;display:grid;border-radius: 5px;}

.callToAction {background:black;color:white;width:auto;height:125px;display: block;border-radius: 5px;margin-top:25px;margin-bottom:25px;padding:20px;}

.pageTitleContainer {width:100%;text-align: left;grid-column-start: 1;grid-column-end: 4;padding:10px 75px 40px 75px;}

.pageTitleContainer img {
	border-radius:5px;
}

.testimonialBox {
	border:1px solid #ccc;
	padding:18px;
	border-radius: 8px;
	margin:15px 0px 15px 0px;
}

.testimonialBox:hover {
	background: #efefef;
}

.testimonialBox span {
	font-size:16px;
	line-height:1.5em;
}

.testimonialBox .authorText {
	font-weight:bold;
	font-size:18px;
	text-align:right;
	margin-top:0px;
	margin-bottom:0px;
}

.testimonialBox .authorTitle {
	font-style: italic;
	font-size:16px;
	text-align:right;
	margin-top:0px;
	display: block;
}

.testimonialBox .authorCompany {
	font-weight:bold;
	font-size:16px;
	text-align:right;
	display: block;
	margin-top:0px;
	color:#ccc;
	
}

.galleryItem {
	position: relative;
}

.galleryItem div {
	background: #F0580D;
	color:white;
	font-weight: bold;
	position: absolute;
	top:50%;
	padding:15px 15px 15px 15px;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	width:100%;
}

.galleryInsideContainer a {
	text-decoration: none !important;
}

.galleryItem:hover {
	opacity: .9;
}

.galleryInsideContainer {
	padding:10px 40px 10px 40px;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.galleryBox {
	width:100%;
	padding:10px;
}

.galleryBox img {
	max-width:100%;
	border-radius: 8px;
}

.galleryImage {
	width:auto;
}


.marketingContainer {
	display: block;
}

.pageMainBody {
padding-top:0px;
}

.pageSideBar {
	margin-top:40px;
	margin-bottom:35px;
	border-radius:5px;padding:25px;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	0 2px 2px rgba(0,0,0,0.11), 
	0 4px 4px rgba(0,0,0,0.11), 
	0 6px 8px rgba(0,0,0,0.11),
	0 8px 16px rgba(0,0,0,0.11);
	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	  grid-gap: 10px;
	  text-align: center;
}

.sidebarBox {display:inline-block;width:;padding:auto;}

.portfolioBoxContainer {
	padding:25px 0px 75px 0px;
	display: grid;
	grid-gap: 35px 35px;
	grid-template-columns: 1fr 1fr 1fr;
	}

.portfolioBox {border-radius: 5px;padding:20px;text-align: center;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
	0 2px 2px rgba(0,0,0,0.11), 
	0 4px 4px rgba(0,0,0,0.11), 
	0 6px 8px rgba(0,0,0,0.11),
	0 8px 16px rgba(0,0,0,0.11);}
.portfolioBox .portfolioHeader {background:#95bf7c;color:white;padding:10px;text-align: center;display:block;margin-left:-20px;margin-right:-20px;}
.portfolioBox .portfolioSubHead {background: #e2e2e2;color:color(srgb 0.398 0.398 0.398);font-size:.8em;padding:10px;text-align: center;display:block;margin-left:-20px;margin-right:-20px;margin-bottom:-20px;border-radius: 0px 0px 5px 5px;}
.portfolioBox .portfolioImage {width: calc(100% + 40px);
	  margin-left: calc(-20px);
	  margin-right: calc(-20px);
	  margin-top: -20px;
	  border-radius: 5px 5px 0px 0px;position: relative;}
	  
.portfolioBox .portfolioImage:hover {opacity: 0.9;}

.moreInfo {margin-left:25px;margin-top:10px;font-size:.9em;margin-bottom:8px;}

/*******************************************************************************
 SLIDESHOW STYLES
 ********************************************************************************/

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width: 100%;
  position: relative;
  min-height:450px;
  overflow: hidden;
  display:block;
  z-index:4;
  margin: 40px auto 35px auto;
  grid-column-start: 1;
  grid-column-end: 4;
}

.mySlides img {width: fit-content;}

/* Hide the images by default */
.mySlides {
  display: none;
  max-height: 450px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev {left:10px;}
/* Position the "next button" to the right */
.next {
  right: 25px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  background: #323232d6;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  display: none;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  display: none;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.8s ease;
}

.active, .dot:hover {
  background-color: #4d4d4d;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3.5s;
  animation-name: fade;
  animation-duration: 3.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/*******************************************************************************
 MOBILE STYLES
 ********************************************************************************/

@media only screen and (max-width: 991px) {
	
	.cancerbox img {
		width:90%;
		margin: 15px auto 15px auto;
	}
	
	.portfolioBoxContainer {
	grid-gap: 25px 25px;
	grid-template-columns: 1fr 1fr;
	}
	
	#myLinks {display: none;}
	
	.aboutImage {
		width:100%;
		display:block;
		float:none;
		height:250px;
		overflow: hidden;
	}
	
	.siteBrand {text-align: center;display: block;grid-column-start: 1;grid-column-end: 4;grid-row-start: 1;padding-top:0px;height:175px;padding-left:25px;padding-right:25px;}
	.sitebrand img {margin:0px;text-align: center;width:auto;max-height: 125px;}
	.siteNav {margin:auto;text-align: center;display: block;grid-column-start: 1;grid-column-end: 4;grid-row-start: 2;padding:0px 0px 0px 0px;}
	

	.mobileNavButton {
		  padding:25px;
		  display: block;
		  z-index: 999;
	  }
	  
	 .mobileNavButton:hover {
		cursor: pointer; 
	 }
	 
	 .topBar {
		 grid-template-columns: 1fr;
		 gap:0px;
		 padding:8px 5px 0px 5px;
	 }	  
	  .topBarLeft {
		  display: none;
	  }
	  
	  .topBarRight {
		  display: none;
	  }
	  
	  .doubleColumn {
		  display: grid;
		  grid-template-columns: 1fr;
		  gap:0px;
	  }
	  
	  .tripleColumn {
		  display: grid;
		  grid-template-columns: 1fr;
		  gap:0px;
		  margin:0px 0px 0px 0px;
		  width:100vw;
	  }
	  
	  .grassSlide {
		  margin:0px 0px 0px 0px;
			width:100vw;
	  }
	  
	  .aboutBox {
			margin:0px 0px 0px 0px;
			  width:100vw;
			  padding:20px;
		}
		
	.footer {
		display:grid;
		grid-template-columns: 1fr !important;
	}
	
	.footerLeft {
		grid-column-start:1;
		grid-column-end:4;
		text-align: center !important;
	}
	
	.footerRight {
		grid-column-start:1;
		grid-column-end:4;
		text-align: center !important;
	}
	
	.pageTitleContainer {
		padding:10px 10px 40px 10px;
	}
	
	.galleryInsideContainer {
		grid-template-columns: 1fr;
		padding:10px 10px 10px 10px;
		border-radius: 10px;
	}
	
	.galleryItem {
		height:250px;
		overflow: hidden;
	}
	
	.contactButtonContainer {
		display: grid;
		grid-template-columns: 1fr;
		gap:0px;
	}
	
	.contactButton {
		margin:10px auto 10px auto;
		text-align: center;
	}
	
	.careerWrapper {
		grid-template-columns: 1fr;
	}
	
	.doubleColumn div {
		margin-bottom:25px;
	}
	
	.careerWrapper input {
		margin-bottom: 10px;
	}
	
	.careerWrapper textarea {
		width:100%;
		height:100px;
	}
	
	  .slideItem {width:100px;height:175px !important;display: inline-block;background: white;padding:0px;margin-bottom:0px;}
	  .slideItem img {position: absolute;z-index: 1;width:100vw;}
	  .slideBox {width:100vw;text-align:center;display: block;position: absolute;margin:20px 0px 0px 0px;z-index: 99;}
	  .slideText {font-size:32px;font-weight: bold;color:white;text-shadow: 1px 1px 13px black;margin-top:40px;display: block;}
	  .slideButton {text-align: center;color:white;font-weight: bold;background:#F0580D;padding:12px;border-radius: 8px;margin-top:5px;display: none;text-decoration: none;}
	  .slideButton:hover {
		  background:#c14304;
	  }
	  
	  .estimateBox {
		  width:100vw;
	  }
	 
	  .announcementBox {margin-left:0px;margin-right:0px;}
	  
	  .mainSlider {
		   margin:3px 0px 3px 0px;grid-column-start: 1;grid-column-end: 4;grid-row-start: 3;
	   }
	 .footer {grid-column-start: 1;grid-column-end: 4;grid-row-start: 13;}
	 
	 /* Style the navigation menu */
	  
	 nav {
		 margin:0 0px;
		 padding:0px 0px 0px 0px;
		 width:100%;
		 height:auto;
		 display:block;
		 font-family: 'Barlow Semi Condensed', sans-serif;
		 text-align: center;float: none;
		 
	   }
	   
	   nav ul {
		 margin:0;padding:0;
		 list-style-type:none;
		 display:inline-block;
	   }
	   
	   nav ul li {
		 position:relative;
		 display:block;
		 color:black;padding:0px 0px 0px 0px;font-family: 'Barlow Semi Condensed', sans-serif;font-size: 15px;text-transform: uppercase;font-weight:bold;text-decoration: none;margin-left:0px;width:100vw;
	   }
	   
	   //li > a:after { content: ''; } /* Change this in order to change the Dropdown symbol */
	   
	   li > a:only-child:after { content: ''; }
	   
	   nav ul li a {
		 padding:20px 15px 20px 15px;
		 display:block;
		 width:100vw;
		 color:white;
		 text-decoration:none;
	   }
	   
	   nav ul li a:hover {
		 background: #F0580D;
	   }
	   
	   nav ul li ul {
		 display:none;
		 position:absolute;
		 padding:0px;
		 border: 1px solid #dedede;
		 text-align: left;
	   }
	   
	   nav ul li ul li {
		 text-align: left;padding:0px;
		 width:125px;
		 margin-left:0px;
	   }
	   
	   nav ul li ul li a:hover {
		   background: #ededed;
		   width:125px;
	   }
	   
	   nav ul li:hover ul {
		 display:block;
	   }
	 
	}

@media only screen and (max-width: 600px) {
	
	.portfolioBoxContainer {
	padding:25px 0px 75px 0px;
	display: grid;
	grid-gap: 35px 35px;
	grid-template-columns: 1fr;
	}

.moreInfo {margin-left:0px;margin-top:10px;font-size:.9em;margin-bottom:8px;}
	.container {max-width:95vw;margin:auto;min-height: 600px;margin-left:-0px;margin-right:-10px;margin-top:0px;
	
	.standardButton {
		width:90%;
	  }
	  
	  .topBar {padding:5px;}
	  
	  .loginButton {
		  width:80px;
		  height:10px;
			top:5px;
			right:25px;
		}
	
	.loginModal {width:78vw;color:white;height:250px;display: none;border:1px solid #1f1f1f; border-radius: 5px;background: #151515;position: absolute;top:70px;padding:25px;left:5vw;box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
		  0 2px 2px rgba(0,0,0,0.11), 
		  0 4px 4px rgba(0,0,0,0.11), 
		  0 6px 8px rgba(0,0,0,0.11),
		  0 8px 16px rgba(0,0,0,0.11);
	  }
	
	.gridButton {position: absolute;left:30px;top:10px;}
	.searchBar {display:none;position: absolute;top:30px;left:45px;}
	.mainHeader {text-align: center;font-size:1.5em;color:white;font-family: 'Barlow Semi Condensed', sans-serif;width:auto;height:90px;margin: 0px;padding-top:5px;}
	
	 
	.row {display:block;margin-bottom:25px;clear:none;position: inherit;width:90%;}

}
	
/*@media (prefers-color-scheme: dark) {
	
	body a {color: #a5a5a5;text-decoration: underline;}
	
	.body {background: #2a2a2aff;color: color(srgb 0.782 0.782 0.782);}
	
	.portfolioBox .portfolioSubHead {background: #4f4f4f;color:darkgray;}
}*/
	
}