@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@500&family=Lusitana:wght@700&family=Ramaraja&display=swap');

:root {
  --ts_green_background: rgb(0,102,52,.7);
  --ts_green_border: rgb(0,102,52,.9);
  --ts_green: rgb(0,102,52,1);
  --ts_button_green: #00FFAA;
  
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}



* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	transition: all ease-in-out 250ms;
}



body {
    font-family: basic-sans, sans-serif;
    min-height: 100vh;
    /* display: flex;*/
/*     justify-content: center;
    align-items: center; */
    font-size: 1.25rem;
    line-height: 1.5;
    color: #000000;
  }
  

html {
    box-sizing: border-box;
}
  
ul {
  list-style-type: none;
}

h1,
h2 {
  font-weight: 300;
  line-height: 1.2;
  margin: 0.5rem 0;
}

p {
  margin: 0.5rem 0;
}


/* img {
  width: 100%;
}
  */
img.logo {
  max-width: 100%;
  height: auto;
}


i{
	color: rgba(255,255,255,1);
}
 
 
i:focus, i:hover {
  color: rgba(255,255,255,.6);
}

 
 


.container {
  width: 100%;
  margin: 0 0 0 0;
  overflow: hidden;
 }


.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.flex-v {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
 /*  height: 100%;
 */
}
.flex-c {
  display: flex-columns;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.ahamburger{
	text-decoration:none !important;
	padding-right:10px;
}


#ahamburger{
	text-decoration:none !important;
	padding-right:10px;
}

#menuBurger{
	opacity:0;
}




#header {
display:block;
  background-color: rgb(0,102,52,.8);
  height: max(3rem,10vw);
  width: 100%;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
    font-family: 'Alegreya SC', serif;

    font-family: 'Lusitana', serif;

    font-family: 'Ramaraja', serif;  
}
#sub_header{
	display:none;

  background: linear-gradient(to bottom right, rgb(0,102,52,.8)50%,rgb(0,102,52,.2) );
  height: 100%;
  width: 100%;
  padding: 1rem;
  position: -webkit-sticky;
  position: sticky;
  top: max(3rem,10vw);
  z-index: 999;
    font-family: 'Alegreya SC', serif;

    font-family: 'Lusitana', serif;

    font-family: 'Ramaraja', serif;  
	font-size: 1.5 rem;
  text-decoration: none;

}

#sub_header a{
	margin-bottom: 2rem;
	text-decoration: none;
	color: #FFFFFF;
}
#footer {
  background-color: #FFFFFF;
  min-height: 10vw;	
  width: 100%;
  margin-top: auto;


}

.footer_line{
  width: 80%;
  color: #000000;
  margin: 1rem auto 0 auto;
}

#header img, #footer img {
  margin: 1vw auto 1vw 1vw; 
  height: 8vw;
} 

#header .page_title {
  margin: 1vw auto; 
  height: 8vw;
} 


/* #main_panel {
  margin-top: -10vw;
  height: min(50vw,100vh);
  overflow: hidden;
  display: grid; 
}  */ 

.main_four{
min-height:100%;
position:absolute;
top: 0;
width:100%;
  overflow: auto;

  grid-template-columns: auto;
  grid-template-rows: min-height(80vw) min-height(10vw) min-height(10vw) min-height(10vw);
  grid-template-areas: 
    "big_picture"
    "upper_text"
    "lower_text"
	"footer";
  margin-bottom: 0;  
}

.main_three{
min-height:100%;

position:absolute;
top: 0;
width:100%;
  overflow: auto;
  grid-template-columns: auto;
  grid-template-rows: min-height(80vw) min-height(10vw) min-height(10vw);
  grid-template-areas: 
    "big_picture"
    "upper_text"
    "lower_text";
  margin-bottom: 0;  
}


.main_two{
min-height:100%;

position:absolute;
top: 0;
width:100%;
min-height:105vh;
  overflow:auto;
  grid-template-columns: auto;
  grid-template-rows: height(80vw) min-height(10vw);
  grid-template-areas: 
    "big_picture"
    "upper_text";
  margin-bottom: 0; 

}


.main_one{
min-height:100%;

position:absolute;
top: 0;
/* min-height: 105vh; */
width:100%;
  overflow: auto;
  margin-bottom: 0;  
}


.big_picture_home{
    height: min(80vh,80vw);
    width: 100%;
    background: url(../images/more_008.webp) no-repeat bottom center; 
    background-size: cover;
    background-clip: border-box;
}

.big_picture_maint{
  height: min(80vh,80vw);
  width: 100%;
  background: url(../images/turf_and_play_eqpt.webp) no-repeat bottom center; 
  background-size: cover;
  background-clip: border-box;
}

.big_picture_design{
  height: min(80vh,80vw);
  width: 100%;
  background: url(../images/jon_header.webp) no-repeat bottom center; 
  background-size: cover;
  background-clip: border-box;
  opacity:.9;
}

.big_picture_contact{
	min-height: 80vh;
  width: 100%;
  background: url(../images/nowlin_16.webp) no-repeat bottom center; 
  background-size: cover;
  background-clip: border-box;
  overflow:auto;
}


.big_picture_employ{
  min-height: 80vh;
  width: 100%;
  background: url(../images/nowlin_16.webp) no-repeat bottom center; 
  background-size: cover;
  background-clip: border-box;
  overflow: auto;
}



.container-text-upper {
display:block;
position:relative;
	padding: 0;
	min-height: 10vw;
 
  /* overflow: auto; */
 }
 
 
.container-text-lower {
display:block;
	position: relative;
  padding: 0 10vw; 
  overflow: auto;
  /*  margin: 0 9vw; */
   /* overflow: auto; */
}
 

.upper_text{
    display: block;
    min-height: 10vw;
    color: #000000;
    font-size:  max(0.7rem,1.5vw);
    /* margin: 0 ; */
    z-index: 998;
    padding: 1vw 10vw; 
    margin: auto;
}

.lower_text{
  display: block;
  min-height: 10vw;
  color: #000000;
  background-color: #C5E0B4;
  font-size:  max(0.7rem,1.4vw);
  /* margin: 0 9vw; */
  z-index: 998;
  padding: 1vw;
  margin: auto;

}


#nav {
  margin: auto 1vh 1vh auto;
  font-size: max(0.5rem,2vw);
}

#nav .flex {
  justify-content: space-between;
}

#nav ul {
  display: flex;

}

#nav a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 10px;
  margin: 0 5px;
}

#nav a:focus, #nav a:hover {
  border-bottom: 2px solid white;
  color: rgba(255,255,255,.6);
}

#mobile_nav a:focus, #mobile_nav a:hover {
  color: rgba(255,255,255,.6);
}


#address{
  margin: 2vw auto auto 1vw;
  font-size: max(0.8rem,1.1vw); 
  line-height: 1.2; 
  background: url(../images/bglogotrees.gif) no-repeat bottom right;
}



/* .big_title li:nth-child(1){ */
.big_title{
  font-size: 3vw;
  color:#FFFFFF;
}

.big_title_small{
  font-size: 2.5vw;
  color:#FFFFFF;
}



.card_left, .card_right, .card_left_only{
	background-color:#000000;
	opacity:.9;
	width: 35%;
	min-height: 20vw;
	padding: 1.75em;
/* 	border: 1rem solid var(--ts_green_border); */
	font-size:  max(0.6rem,1.3vw);
	border-radius:1em;
	color:#FFFFFF;
}

.card_left_only{
	width: 85%;
}

.card_left_only h2{
	margin:2rem 0;
	/* border-bottom: 3px solid var(--ts_button_green); */
	box-shadow: 0px 15px 5px var(--ts_button_green) ;
outline: 3px solid black;
	cursor: pointer;
}



.cards_two{
	display: flex;
	flex-direction:row;
	justify-content: space-around;
	position:relative;
	top:min(25vh,15vw);
	align-items:start;
	overflow: auto;
	width: 100%;
	min-height:30vw;
}


@media (max-width: 600px) {
.cards_two{
	flex-direction:column;

	justify-content: center;
	position:relative;
	align-items:center;
	overflow: auto;
	width: 100%;
	min-height:20vw;

}

.card_left, .card_right{
	position:aabsolute;
	width: 90%;
	margin: 0 auto 5vh auto;
}


}


a.more_button{
	line-height:1.5;
	padding:.5em 2em;
	background-color:var(--ts_button_green);
	color:#000000;
	text-align:center;
	text-decoration:none;
	border-radius: 3rem;
	opacity:1;
	cursor: pointer;

}

a.more_button:hover, a.more_button:focus{
/* 	background-color:var(--ts_green_background); */
	background-color:#000000;
	color:#FFFFFF;
	border: 2px solid RGB(0,102,52,.2);
}



a.more_button2{
	line-height:1.5;
	padding:.5em 2em;
	background-color:var(--ts_button_green);
	color:#000000;
	text-align:center;
	text-decoration:none;
	border-radius: 3rem;
	opacity:1;
	cursor: pointer;
	margin-top:2rem;
}

a.more_button2:hover, a.more_button2:focus{
/* 	background-color:var(--ts_green_background); */
	background-color:#000000;
	color:#FFFFFF;
	border: 2px solid RGB(0,102,52,.2);
}




a.less_button{
	line-height: 1.5;
	padding:.5em 2em;
	background-color: var(--ts_button_green);
	color:#000000;
	text-align:center;
	text-decoration:none;
	border-radius: 3rem;
	opacity:1;
	cursor: pointer;

}

a.less_button:hover, a.less_button:focus{
/* 	background-color:RGB(0,102,52,.4); */
	background-color:#000000;
	color:#FFFFFF;
	border: 4px solid RGB(0,102,52,.4);

}

.center_wrapper{
	text-align:center;
}



.card_left div, .card_right div{
	text-align:center;
}



h3 {
	font-weight:bold;
	font-size: max(0.8rem,1.8vw);
	margin: 0 auto;
	color:RGB(0,102,52,.8);
	font-size:1.4rem;
	text-align: center;
}

}


ul.bullets{
	list-style-type: disc;
	margin-left:2em;
}

.points{
	min-height: 10vw;
	transform: scale(1); 
 transition: 3s ease-in-out;	 
}

.hidden_card_text{
    display: block;
    min-height: 10vw;
    color: #FFFFFF;
    font-size:  max(0.7rem,1.5vw);
    z-index: 998;
    padding: 1vw 5vw; 
    margin: 0 auto;
}


.container-points-more {
  padding: 10px;
	min-height: 10vw;
/* 	border:1em solid RGB(0,102,52,.6); */
	width:50%;
	margin:auto;
	box-shadow: 20px 10px 10px RGB(0,102,52,.2);
	background-color:#000000;
	opacity:.98;
/* 	border: 1rem solid var(--ts_green_border); */
	font-size:  max(0.6rem,1.3vw);
	border-radius:1em;
	color:#FFFFFF;

/* transform: scale(.01);  */
  /* overflow: auto; */
 }

.faqbody2{
	display: block;
	min-height: 10rem;
	background-color:RGB(120,120,120,.5);
	min-width:100%;
	padding: 1rem;
	margin-bottom: 2rem;
}

@media (max-width: 900px) {
	.container-points-more {
		width:80%;
	 }

}

@media (max-width: 900px) {
	.hidden_card_text{
		padding: .5vw 3vw; 
	}
}



.container-enviro-more {
	position: relative;
	padding: 0px;

 /* 	border:1em solid RGB(0,102,52,.6); */
	width:80%;
	margin:auto;
	background-color:#FFFFFF;
	opacity:1;
/* 	border: 1rem solid var(--ts_green_border); */
	font-size:  max(0.6rem,1.3vw);
	color:#000000;
	text-align:center;

/* transform: scale(.01);  */
  /* overflow: auto; */
 }

.before_after{
	width:70%;
	border-radius:50px;
}

@media (max-width: 600px) {
	.before_after{
		width:90%;
		border-radius:10px;
	}
}




.content{
	min-height:10em; /* Minimum height of the slider text on Maint page */
}



.element {
  -webkit-transform: value;
  -moz-transform:    value;
  -ms-transform:     value;
  -o-transform:      value;
  transform:         value;
}




.contact_box{
	position: relative;
	width:45%;
	min-height:52vh;
	margin:22vh auto 2vh auto;
	padding: 1rem 1.5rem;
	background-color:RGB(255,255,255,.8);
	border:1em solid RGB(0,102,52,.6);
}

.employ_box{
	position: relative;
	width:55%;
	margin:1vh auto 1vh auto;
	padding: 0  1.5rem 1rem 1.5rem;
	background-color:#E5E9D8;
	border:1em solid RGB(0,102,52,.6);
	border-radius: 1rem;

}

.job_box{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: 
		"title title title"
		"card1 card2 card3";
	grid-column-gap:1em;
	position: relative;
	width:55%;
	margin:1vh auto 1vh auto;
	padding: 0  1.5rem 1rem 1.5rem;
	background-color:#E5E9D8;
	border:1em solid RGB(0,102,52,.6);
	border-radius: 1rem;
	
}

h3{
	grid-area:title;
}

card1{
	grid-area:card1;
}
card2{
	grid-area:card2;
}
card3{
	grid-area:card3;
}



.job_listing{
	height:10vh;
	background: url(../images/PDF_icon.svg.png) center right no-repeat;
	background-color:white;
	background-size: 8vh auto;
	border-radius: 0.5rem;
	padding: 0.5rem 3rem 0.5rem 0.5rem;
}

.no_job_listing{
	height:10vh;
	background-color:white;
	background-size: 8vh auto;
	border-radius: 0.5rem;
	padding: 0.5rem 3rem 0.5rem 0.5rem;
}


@media (max-width: 1080px) {
	.contact_box, .employ_box{
	width:70%;
	min-height:55vh;
	}
}


@media (max-width: 600px) {
	.contact_box, .employ_box{
	width:90%;
	min-height:60vh;
	}
}

.contact_box label, .employ_box label{
	color:RGB(0,102,52,.8);
	font-size:1.4rem;
	width: 100%;
}

@media (max-width: 1080px) {
	.contact_box label{
	font-size:1.2rem;
	width:90%;
	}
}

@media (max-width: 576px){
	#menuBurger{
		display: block;
		opacity:1;
	}
	#ahamburger{
		margin-left:30%;
	}
	
	#nav{
		display: none;
	}
	#times{
		display: none ;
	}
	#mobile_nav{
		display: none ;
	}
	#sub_header{
		display: none ;
	}
	.big_title{
		text-align:center;
	}

}

@media (min-width: 577px){
	#menuBurger{
		display: none;
		opacity:0;
	}	
	#ahamburger{
		margin-left:auto;
	}

	#times{
		display: none !important;
	}
	#mobile_nav{
		display: none !important;
	}
	#sub_header{
		display: none !important;
	}

}

.contact_box input, .employ_box input{
	width:  100%;
	font-size:1.2rem;
	margin-bottom:1rem;
}

.contact_box textarea, .employ_box textarea{
	font-family: basic-sans, sans-serif;
	font-size:1.2rem;
	height: 6rem;
	width:  100%;
}

.contact_box  input[type="submit"], .employ_box  input[type="submit"] {
	line-height: 1.5;
	padding:.5rem 2rem;
	background-color:RGB(0,102,52,.6);
	color:#FFFFFF;
	text-align:center;
	text-decoration:none;
	border-radius: 1rem;
	width:10rem;

}

.contact_box  input[type="submit"]:hover, .employ_box  input[type="submit"]:hover{
	background-color:RGB(0,102,52,.4);
}


.contact_box  div a, .employ_box  div a  {
	line-height: 1.5;
	padding:.5rem 2rem;
	background-color:RGB(0,102,52,.6);
	color:#FFFFFF;
	text-align:center;
	text-decoration:none;
	border-radius: 1rem;
	width:10rem;

}


.contact_box  div a:hover, .employ_box  div a:hover{
	background-color:RGB(0,102,52,.4);
}


/* UTILITIES */


.ital{
    font-style: italic;
}

.small{
	font-size:0.8em;
	margin-bottom: 1rem;
}

.small_label{
	font-size:0.6em;
}



.bold{
	font-weight:bold;		
}

.co_text{
	position:relative;
	top:0;
	left:0;
}
.booked{
	z-index:10;
	position:absolute;
	top:50;
	color:red;
	font-size:3em;
	font-weight:bold;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: white;
	transform: rotate(-0.05turn);
}



a.texasnav{color:#000000;}
a.texasnav:hover{color:#FFFFFF;background-color:var(--ts_green);}
a.texasnav:visited{color:var(--ts_green);}
a.texasnav:visited:hover{color:#FFFFFF;background-color:var(--ts_green);}




.main_flex{
	display:flex;
	position:absolute;
	top: 0;
	min-height:100vh;
	width:100%;
	overflow: auto;
	flex-direction: column;
	margin-bottom: 0;  
}





section{
	display:block;
	min-height:100%;
}



.picture_home::before { content: "";}

.picture_maint::before { content: "";}

.picture_design::before { content: "";}

.picture_contact::before { content: "";}

.picture_employ::before { content: "";}


.picture_home{
	display:block;
	position:relative;
	height:85vh;	
	top:0;
    width: 100%;
    background: url(../images/more_008.webp) no-repeat bottom center; 
    background-size: cover;
    background-clip: border-box;
}

 
 
.container-text-lower {
	display:block;
	position: relative;
	padding: 0 10vw; 
	overflow: auto;
  /*  margin: 0 9vw; */
   /* overflow: auto; */
}
 

.upper_text{
    display: block;
    min-height: 10vw;
    color: #000000;
    font-size:  max(0.7rem,1.5vw);
    /* margin: 0 ; */
    z-index: 998;
    padding: 1vw 10vw; 
    margin: auto;
}

.lower_text{
	display: block;
	min-height: 10vw;
	color: #000000;
	background-color: #C5E0B4;
	font-size:  max(0.7rem,1.4vw);
	/* margin: 0 9vw; */
	z-index: 998;
	padding: 1vw;
	margin: auto;
}




























.picture_maint{
  
display:block;
position:relative;
 height:100vh;	/* <<< This appears to be the cause of the vertical slider bar over-run */
	
top:0;
    width: 100%;
    background: url(../images/turf_and_play_eqpt.webp) no-repeat bottom center;  
    background-size: cover;
    background-clip: border-box;
}

.picture_design{
display:block;
position:relative;
min-height:85vh;	
top:0;
    width: 100%;
    background: url(../images/turf_and_play_eqpt.webp) no-repeat bottom center;  
    background-size: cover;
    background-clip: border-box;
  opacity:.9;
}

.picture_contact{
	min-height: 80vh;
display:block;
position:relative;
top:0;
    width: 100%;
  background: url(../images/nowlin_16.webp) no-repeat bottom center; 
    background-size: cover;
    background-clip: border-box;
}


.picture_employ{
  background: url(../images/nowlin_16.webp) no-repeat bottom center; 
display:block;
position:relative;
height:85vh;	
top:0;
    width: 100%;
  background: url(../images/nowlin_16.webp) no-repeat bottom center; 
    background-size: cover;
    background-clip: border-box;
}