@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Outfit:wght@400;500&family=PT+Sans:wght@400;700&display=swap');
 
body {font: 110%; color: #333; background-color:#fff; margin: 0; padding: 0; text-align: center; }
html {margin:0; font-size:18px;}
h1, h2, h3, h4, h5, h6 { font-family: Acme, Geneva, sans-serif; font-weight: bold; text-align: center; padding-top: 4px; }
h1 {font-size:288%; color:#fff; }
h2 {font-size:188%; color:#060; }
h3 {font-size:150%; color:#F30;}
@media only screen and (min-width:601px) and (max-width:720px) { h1 {font-size:165%; } }
@media only screen and (max-width:600px) { h1 {font-size:125%; } }
@media only screen and (max-width:720px) { h2 {font-size:125%; } }
@media only screen and (max-width:720px) { h3 {font-size:125%; } }
p { font-family: Outfit, 'PT Sans', Geneva, SunSans-Regular, Arial, sans-serif; color:#fff; }
a, a:hover, a:visited, a:active {color:#ff0; }

img {max-width: 100%; height: auto; border:none; }
video {max-width:100%; height:auto; border:none; }
* {box-sizing: border-box;}
input {border-radius:8px; width:100%; padding:5px; margin: 5px 0 5px 0; background-color:#eee; color:#555; font-size:100%; }
textarea {border-radius:8px; width:100%; padding:5px; margin: 5px 0 5px 0; background-color:#eee; color:#555; font-size:100%; }
input[type=text]:focus, input[type=password]:focus { background-color: #d2d2d2; outline: none; font-size:100%;}
select {border-radius:8px; width:auto; min-width:75%; padding:5px; margin: 5px 0 5px 0; background-color:#eee; color:#555; font-size:100%; border:none; }

#container {width:90%; background:none; margin: 0 auto; border: none; text-align: center; }
@media only screen and (min-width:641px) and (max-width: 1024px) {container {width:80%;} }
@media only screen and (min-width:1025px) {container {width:75%;} }

#mainContent {padding:20px 40px 40px 40px; margin-top:72px; margin-left:0; margin-right:0; margin-bottom:36px; border:.1px #000; border-radius:24px; background-color:rgba(0,0,0,0.5);}
@media only screen and (max-width:600px) { #mainContent {margin-top:36px; padding:10px 18px 10px 18px; } }
#mainContent p {color:#fff; }
@media only screen and (max-width:690px) { #mainContent p {margin:8px; } }
#mainContent h1, p {margin-left:132px; margin-right:12px; }
@media only screen and (min-width:601px) and (max-width:690px) { #mainContent h1 {font-size:165%; margin:12px; } }
@media only screen and (max-width:600px) { #mainContent h1 {font-size:130%; margin:6px; } }

#mainContent-w {padding:20px 40px 40px 40px; margin-top:72px; margin-left:0; margin-right:0; margin-bottom:36px; border:.1px #000; border-radius:24px; background-color:rgba(255,255,255,0.5);}
@media only screen and (max-width:600px) { #mainContent-w {margin-top:36px; padding:10px 18px 10px 18px; } }
#mainContent-w p {color:#000; }
@media only screen and (max-width:690px) { #mainContent-w p {margin:8px; } }
#mainContent-w h1, p {margin-left:132px; margin-right:12px; }
@media only screen and (min-width:601px) and (max-width:690px) { #mainContent-w h1 {font-size:165%; margin:12px; } }
@media only screen and (max-width:600px) { #mainContent-w h1 {font-size:130%; margin:6px; } }
#mainContent-w a, a:hover, a:visited, a:active {color:#090; }


#mainContent-clr {padding:20px 40px 40px 40px; margin-top:88px; margin-left:0; margin-right:0; margin-bottom:36px; border:none; }
#mainContent-clr h1, h2, h3, p {color:#fff; margin:auto; }

#header {border-width: .1px; padding: 0 10px 0 10px; color:#333; height:60px; width:100%; margin:0; position:fixed; top:0; left:0; z-index:2;   }
@media only screen and (max-width:800px) {#header {padding:2px; }}
@media only screen and (max-width:800px) {#header .fltimgl {max-width:20%; height:auto; min-width:136px; padding:0; }}

#mySidenav a {
    position: absolute; /* Position them relative to the browser window */
    left: -24px; /* Position them outside of the screen */
    transition: 0.5s; /* Add transition on hover */
    padding: 4px; /* 15px padding */
    width: 142px; /* Set a specific width */
	height: 42px;
	vertical-align:middle;
	text-align:right;
    text-decoration: none; /* Remove underline */
    font-size: 16px; /* Increase font size */
	font-weight:bold;
	font-family: Outfit, 'PT Sans', Geneva, SunSans-Regular, Arial, sans-serif; 
    color: white; /* White text color */
	opacity: 0.7; filter: alpha(opacity=70);
    border-radius: 0 8px 8px 0; /* Rounded corners on the top right and bottom right side */
	overflow:hidden;
	z-index:3;}
#mySidenav img {border-radius: 8px; width:31px; height:31px; object-fit:cover; padding:2px; border:none; vertical-align:middle; }
#mySidenav a:hover { left: 0; opacity: 1; filter: alpha(opacity=100); color:#ff0;  /* On mouse-over, make the elements appear as they should */}
@media only screen and (max-width:600px) {#mySidenav a {opacity: 1; filter: alpha(opacity=100); width:110px } }
#sn1 { top: 10px; background-color: #060;/* green */} /* The about link: 20px from the top with a green background */
#sn2 { top: 56px; background-color: #309; /* MP purple */}
#sn3 { top: 102px; background-color: #f30; /* orange */ }
#sn4 { top: 148px; background-color: #0CC; /* teal */ }
#sn5 { top: 194px; background-color: #039; /* blue */ }
#sn6 { top: 240px; background-color: #900; /* red */ }
#sn7 { top: 286px; background-color: #006; /* navy */ }

.modal {display:none; width:100%; height:auto; margin:0; padding:0; position:fixed; left:0; top:0;  background-image: linear-gradient(180deg, #eee, #fff); color:#333; font-weight:bold; border-radius:12px;  } 	
.modal-content {background-image: linear-gradient(180deg, #eee, #fff); margin:0 auto; border:1px solid #060; border-radius:12px;}
.modal-content p {margin:8px 48px 8px 4px; width:100%; text-align:center;}
.close {color:#333; position:relative; top:0; right:4px; font-size:36px; font-weight:bold; margin:0 0 4px 8px; padding:0; }
.close:hover, .close:focus {color:#060; text-decoration:none; cursor:pointer; }
@media only screen and (min-width:690px) {#myBtn {display:none; }}
button {padding:0; margin:12px; border:0;}
#myModal {display:none; }
.modal a:link { display:inline; padding:0 8px 2px 12px; margin:0;  font:100% Outfit, 'PT Sans', Geneva, SunSans-Regular, Arial, sans-serif; color:#060; text-decoration:none; font-weight:bold;  }
.modal a:visited { display:inline; padding:0 8px 2px 12px; margin:0;  font:100% Outfit, 'PT Sans', Geneva, SunSans-Regular, Arial, sans-serif; color:#060; text-decoration:none; font-weight:bold;}
.modal a:hover { display:inline; padding:0 8px 2px 12px; margin:0;  font:100% Outfit, 'PT Sans', Geneva, SunSans-Regular, Arial, sans-serif; color:#e2e2e2; text-decoration:none; font-weight:bold; background-color:#060; }
.modal a:active { display:inline; padding:0 8px 2px 12px; margin:0;  font:100% Outfit, 'PT Sans', Geneva, SunSans-Regular, Arial, sans-serif; color:#060; text-decoration:none; font-weight:bold; }

#btm_cont1 {width:54px; height:54px; margin:10px; padding:0; z-index:3; position:fixed; bottom:72px; right:0px; }
@media only screen and (max-width:720px) {#btm_cont1 {width:48px; height:48px; bottom:2px; right:2px; } }
@media only screen and (max-width:720px) {#btm_cont1 img{width:48px; height:48px; } }
#btm_cont2 {width:54px; height:54px; margin:10px; padding:0; z-index:3; position:fixed; bottom:72px; right:58px; }
@media only screen and (max-width:720px) {#btm_cont2 {width:48px; height:48px; bottom:2px; right:52px; } }
@media only screen and (max-width:720px) {#btm_cont2 img{width:48px; height:48px; } }

#footer {padding: 0 10px; border-top-style:ridge; border-top-width: 2px; height:auto; border:.1px #000; border-radius:24px; background-color:rgba(0,0,0,0.6)}
#footer p {margin: 0; padding: 8px 0; font-size:100%; text-align:left; color:#fff; font-weight:bold; } 
#footer a:hover {color:#f30; }	
#footer img {max-width:50%; height:auto; }

#flt_rt {padding: 0px; width:30%; margin-left:8px; margin-right:8px; float:right;}
@media only screen and (max-width:720px) { #flt_rt {padding:2px 8px 2px 8px; width:100%; float:none;} }
#flt_rt p { margin: 0; padding: 8px 0; font-weight:bold; text-align:right; }
#flt_lft {padding: 0px; width:67%; margin-right:8px; float:left;}
@media only screen and (max-width:720px) { #flt_lft {padding:2px 8px 2px 8px; width:100%; margin:0 8px; float:none;} }
#flt_lft p { margin: 0; padding: 8px 0; font-weight:bold; text-align:left; }

.main-img {	background-image:url(/images/bg-720x1280-lawn.png); background-size:cover; background-position:center; background-attachment:fixed; }
@media only screen and (min-width:1921px) {.main-img {	background-image:url(/images/bg-2560x1200-lawn.png); background-size:cover; background-position:center; background-attachment:fixed; } }
@media only screen and (min-width:800px) and (max-width:1920px) {.main-img {	background-image:url(/images/bg-1920x1200-lawn.png); background-size:cover; background-position:center; background-attachment:fixed; } }
@media only screen and (min-width:640px) and (max-width:799px) {.main-img {	background-image:url(/images/bg-800x600-lawn.png); background-size:cover; background-position:center; background-attachment:fixed; } }
	
#image_bar {padding: 8px; background-color:#000;}
#image_bar_ctr { padding: 8px; background-color:#000; width:50%; text-align:center; font-weight:bold; color:#FFF; margin:0 auto; }
#image_bar p { margin: 0; padding: 14px 0; font-size:14pt; font-weight:bold; color:#1e1e1e; }
#bg_prod { padding: 0px; margin-left:8px; text-align:left; width:680px; height:455px; z-index:0; }

.bg-blk-gr {background-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(51,51,51,0.8)); color:#fff; font-weight:bold; border-radius:8px; }
.bg-blk-gr-btn {background-image: linear-gradient(180deg, black, #333); color:#ff0; font-weight:bold; padding:8px; width:auto; border:#000 .5px thin; border-radius:4px; }
.bg-white {background-color:#fff; color:#333; font-weight:bold; border-radius:8px;}
.bg-white-gr {background-color:#eee; background-image: linear-gradient(180deg, #eee, #deccff); color:#333; font-weight:bold; border-radius:8px;}
.bg-grn {background-color:rgba(0,102,0,0.7); background-image:linear-gradient(180deg, rgba(0,102,0,0.7), rgba(0,153,0,0.7)); color:#fff; font-weight:bold; border-radius:8px; border:inset 2px #060; }
#illustrated.bg-white p{color:#333; text-align:left; }
.big {font-size:140%; }
.bold {font-weight:bold; }
.blk {color:#000; }
.caption {text-align:center; color:#900; font-weight:bold;  }
.caption-lft-red {text-align:left; color:#900; font-weight:bold; }
.caption-rt-red {text-align:right; color:#900; font-weight:bold; }
.center {text-align:center; }
.clr {clear:both; }

.cta { display:inline-block; padding:4px; margin:0; font:140%; color:#F30; text-decoration:none; font-weight:bold; border-radius:12px; background-color:#fff; border:inset 2px #060; }
.cta:hover { display:inline-block; padding:4px; margin:0;  font:140%; color:#fff; text-decoration:none; font-weight:bold;  border-radius:12px;  background-color:#f30; border:inset 2px #060;}
.cta a {color:#f30; }
.cta:hover a:hover {color:#fff; }
.cta a:visited {color:#f30; }
@media only screen and (max-width:799px) { .cta {font-size:120%; padding:4px; }}
@media only screen and (max-width:799px) { .cta:hover {font-size:120%; padding:4px; }}
.cta a:active {color:#f30; }
.dkgrn {color:#090; }
.float_lft {float:left; text-align:left;}
.float_rt {float:right; text-align:right;}
.flt_gmw {float:left; width:68.57%; height:auto; }
.flt_gmn {float:left; width:31.43%; height:auto; }
.fltimgl {float:left; padding:0 8px 0 8px; }
.fltimgr {float:right; padding:0 8px 0 8px; }
.fltl25 {float:left; width:24%; margin:0 auto; text-align:center; padding:4px; }
@media only screen and (min-width:740px) and (max-width:820px) {.fltl25 {float:left; width:48%; margin:0 auto;  text-align:center; padding:4px; } }
@media only screen and (max-width:739px) { .fltl25 {float:none; width:100%; margin:0 auto; text-align:center; padding:4px; } }
.fltl50 {float:left; width:48%; margin:8px; text-align:center; padding:4px; }
@media only screen and (min-width:740px) and (max-width:820px) {.fltl50 {float:left; width:48%; margin:0 auto;  text-align:center; padding:4px; } }
@media only screen and (max-width:739px) { .fltl50 {float:none; width:100%; margin:0 auto; text-align:center; padding:4px; } }
.fltr50 {float:left; width:48%; margin:8px; text-align:center;}
@media only screen and (min-width:740px) and (max-width:820px) {.fltr50 {float:left; width:48%; margin:0 auto; } }
@media only screen and (max-width:739px) { .flrl50 {float:none; width:100%; margin:0 auto;} }

.gm {width:68%; margin:0 auto; text-align:center; padding:0;}
@media only screen and (max-width:1200px) { .gm {width:100%; margin:0 auto; text-align:center; } }
.gm p {margin:0; }
.grnbrt {color:#6F0; }
.hidem {display:inline; }
@media only screen and (max-width:601px) {.hidem {display:none; }}
.hidet {display:inline; }
@media only screen and (max-width:800px) {.hidet {display:none; }}
.showt {display:none; }
@media only screen and (max-width:800px) {.showt {display:inline; }}
.hidew {display:none; }
@media only screen and (max-width:720px) {.hidew {display:inline; }}
.hidenav {display:inline; }
@media only screen and (max-width:690px) {.hidenav {display:none; }}
.shownav {display:none; }
@media only screen and (max-width:690px) {.shownav {display:inline; }}
.imgpad-ctr {vertical-align:middle; padding:0 8px 4px 8px; }
.imgmax50 {max-width:50%; height:auto; }
.imgmax75 {max-width:75%; height:auto; }
@media only screen and (max-width:690px) {.imgtab {width:36px; height:36px; }}
.orange {color:#f30; }
.overtop {float:right; z-index:3;   }
.padtopbtm {margin:16px 0 16px 0; }
.padtopbtm48 {margin:48px 0 48px 0; }
.padlft {margin-left:12px; }
.pad12 {padding:12px; }
.pleft {text-align:left; }
.pright {text-align:right; }
.red {color:#900; }
.rndcrnrs {border-radius:8px; }
.smaller {font-size:smaller; }
.small10 {font-size:12pt; }
.yellow {color:#ff0; text-shadow: 1px 1px 2px black; }