/* CSS VARIABLES */
.form-group { margin:5px 0 5px 0; }
.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

:root {
	--primary: #ddd;
	--dark: black;
	--light: #fff;
	--shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
	--accents: #2D4167;
	--bodycolor: #64A641;
}

html {
	box-sizing:border-box;
	font-family: Verdana, sans-serif;
	color: var(--dark);
	scroll-behavior: smooth;
}

body {
	background: var(--bodycolor);
	margin: 10px 10px;
	line-height:1.4;
	background-image:url('siteimages/body-bg.jpg');
	background-repeat:repeat-x;
}

.btn {
	background: var(--accents);
	color: var(--light);
	padding: 0.6rem 1.3rem; /* first num is top/bottom, second is left/right */
	text-decoration: none;
	border: 0;
	border:1px black solid;
	border-radius:10px;
}

.btn:hover {
	background: var(--primary);
	color: var(--dark);	
}

h1{
	font-size: 30px;
	font-weight: bold;
	background-color: transparent;
	color: var(--accents);
	margin:4px 0px 10px 0px; 
}

h2{
	font-size: 24px;
	font-weight: bold;
	background-color: transparent;
	color: var(--accents);
	margin:4px 0px 0px 0px; 
}

h3{
	font-size: 20px;
	font-weight: bold;
	background-color: transparent;
	color: var(--accents);
	margin:4px 0px 0px 0px; 
}

h4{
	font-size: 18px;
	font-weight: bold;
	padding-bottom:0px;
	background-color: transparent;
	color: var(--accents);
	margin:4px 0px 0px 0px; 
}

p { text-align: left; font-size:18px; }
ul { font-size: 18px; }
ol { font-size: 18px; }

img {
	max-width: 100%;
	height: auto;
}

.wrapper {
	display:grid;
	grid-gap: 20px;
}

a {	color:blue; }
a:hover { color:red; }

.pagesummary {
	margin:5px auto 5px auto; font-size:12px; line-height:1.2; text-align: center; color: black; max-width:980px; font-weight:bold;
}

/* --- NEW ANIMATION STYLES START --- */
.hidden {
  opacity: 0;
  /* Apply a transition to all transform and opacity changes */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Initial state for elements sliding from the left */
.slide-in-left {
  transform: translateX(-100%);
}

/* Initial state for elements sliding from the right */
.slide-in-right {
  transform: translateX(100%);
}

/* Final state for animated elements when they become visible */
.show {
  opacity: 1;
  transform: translateX(0);
}
/* --- NEW ANIMATION STYLES END --- */

/* HEADER */
.pageheader {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items:center;
}

.logo {
	font-size:2rem;
	grid-row-gap:20px;
}

.headercontent {
	font-size:20px;
	text-align:center;
	font-weight:bold;
	grid-row-gap:20px;
}

.headercontent a {
	color:black;
	text-decoration:none;
}

.headercontent p {
	text-align:center
}

.headermiddle p {
	text-align:center;
}


/*NAV STYLES*/

/* Sticky Nav*/
div.sticky {
  position: -webkit-sticky; /*Safari*/
  position: sticky;
  top: 0;
  background: var(--bodycolor);
  z-index:9999;
}

#cssmenu {
  max-width: 715px;
  margin:auto;
  font-family: Verdana, sans-serif;
  line-height: 1;
  background: transparent;
/*float:left;*/
}

nav p { text-align: left; font-size:14px; }
 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: transparent;
  position:relative;
  z-index:3;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

@media(max-width: 768px) {
	nav ul { background-color:black; }
}

nav ul li {
  margin: 0 2px 0 2px;
  display: inline-block;
  float: left;
  background-color:transparent;
}

nav a {
  display: block;
  padding: 0 20px;
  color: white;
  font-size: 16px;
  line-height: 48px;
  text-decoration: none;
 font-family: Verdana, sans-serif;
 background-color: var(--accents);
 border:1px black solid;
	border-radius:10px;
}

li.dd, span.dd a{background:var(--bodycolor);color:white;}

li.dd a:hover{background-color:white;color:black;}

li.dd a{line-height: 1.4; padding:12px 10px 12px 30px; background-color:var(--accents); }

nav ul li ul li:hover { background-color:var(--bodycolor); color:black; }

nav a:hover { background-color:#eeefef; color:black; }

nav ul ul {
  display: none;
  position: absolute;
  top: 52px;
}

nav ul li.dd {margin:0; border:medium var(--bodycolor) solid;}

@media(max-width: 768px) {
	nav ul li.dd {
	margin:0;
	border:medium black solid;
	border-radius:12px;
	}
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
  z-index:9999;
}

nav ul ul ul li {
  position: relative;
  z-index:9999;
  top: -60px;
  left: 170px;
}

nav li > a:after { content: ''; }

nav li > a:only-child:after { content: ''; }


/* Media Queries For Nav
--------------------------------------------- */

@media all and (max-width : 768px) {

nav { margin: 0; }

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: var(--accents);
  padding: 0 20px;
  color: #FFF;
  font-size: 16px;
  line-height: 50px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: #000000; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 99.5%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: white }

nav a:hover { background-color: white; color:black }

nav ul li ul li .toggle,
 nav ul ul a { background-color: white; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

label.toggledd{
background-color:#727201 !important;
}

span.toggledd a{
display:none !important;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 99%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}

/************************************************************************************
NAV
*************************************************************************************/

.menu li {
	margin-top:2px;
	margin-bottom:2px;
}

nav-main {
	margin-left:0px;
	font-family: Verdana, sans-serif;
}

#nav-wrap {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin-left: -20px;
	padding-top: 3px;
	padding-bottom: 3px;
}
#nav li {
	list-style: none;
	float: none;
	margin-right: 5px;
	background-color: white;
	padding-left: 5px;
	padding-right: 5px;
}

/* nav link */
#nav a {
	padding: 2px 15px;
	display: block;
	color: white;
	background-color: var(--accents);
	text-decoration:none;
	border: 1px solid black;
	border-radius:10px;
}

#nav a:hover {
	background-color: #eeefef;
	color: black;
}

/* nav dropdown */
#nav ul {
	background-color: var(--accents);
	padding: 0px;
	position: absolute;
	border: solid 0px #ccc;
	display: none; /* hide dropdown */
	width: 200px;
	margin-left:0px;
	color:white;
}

#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}

#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/* BOXES 
.boxes {
	display:grid;
	grid-gap:20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
	background: var(--primary);
	text-align:center;
	padding: 1.5rem 2rem;
	box-shadow: var(--shadow);
	border-radius: 12px;
}
*/
.boxes {
	display:flex;  
    flex-wrap:wrap;
    justify-content:center;
}

.box {
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 50%, rgba(208, 208, 208, 1) 100%);
	text-align:center;
	padding: 1.5rem 2rem;
	box-shadow: var(--shadow);
	flex-basis:45%;
    margin:5px;
	border-radius: 0px;
}

.box p {
	text-align:left;
}

.box ul li {
	text-align:left;
}


@media(max-width: 1580px) {
.box { flex-basis:40%; }
}

@media(max-width: 1000px) {
.box { flex-basis:39%; }
}

@media(max-width: 710px) {
.box { flex-basis:100%; }
}

/* TOP CONTAINER */
.top-container {
	display:grid;
	grid-gap:20px;
	grid-template-columns: 1fr 1fr;
	align-items:start;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 50%, rgba(208, 208, 208, 1) 100%);
	box-shadow: var(--shadow);
	padding:2rem;
	border-radius: 0;
}

/* INFO */
.info {
	background: var(--primary);
	box-shadow: var(--shadow);
	padding:3rem;
}

/* PARALLAX */
.parallax {
    min-height: 500px;
    background: transparent;
    margin:-52px -3rem -3rem -3rem;
}

.parallax-inner {
    position:relative;
    z-index:2;
    padding:24px 48px 30px 48px;
    margin:0;
    color:black;
}

p.parallax-inner {
    max-width:1280px;
    margin-top:-20px;
    margin-bottom:-20px;
    margin-left:auto;
    margin-right:auto;
}


h2.parallax-inner {
    margin-top:-20px;
    margin-bottom:-20px;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

h3.parallax-inner {
    margin-top:-20px;
    margin-bottom:-20px;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

/* FOOTER */
.footer {
	display:grid;
	width:100%;
	grid-gap: 20px;
	grid-template-columns:.75fr 1.5fr .75fr;
	padding-top:1rem;
	padding-bottom:1rem;
	justify-items:center;
	align-items:center;
	background-color:var(--dark);
	color: var(--light);
	line-height: 2.5em;
	grid-template-areas: "links nap social";
}

@media screen and (max-width: 1400px) {
	.footer { 
	grid-template-columns:1fr 1fr 1fr;
	grid-template-areas:
	"links links links"
	"social social social"
	"nap nap nap";
	 }
}

.links { grid-area: links; }
.nap { grid-area: nap; }
.social { grid-area: social; line-height:1; }

footer a {
	color:white;
}

footer a:hover {
	color:yellow;
}

/* INNERPAGES */
.innerpage {
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 50%, rgba(208, 208, 208, 1) 100%);
	box-shadow: var(--shadow);
	display: grid;
	grid-gap: 30px;
	grid-template-columns: 1fr;
	padding:1rem 3rem 1rem 3rem;
}

/* CONTACT PAGE */
.contactpage {
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 50%, rgba(208, 208, 208, 1) 100%);
	box-shadow: var(--shadow);
	display: grid;
	grid-gap: 30px;
	grid-template-columns: 1fr 1fr 1fr;
	padding:1rem;
	justify-items:center;
	align-items:center;
}

/* MEDIA QUERIES */

@media(max-width: 1000px) {
	.contactpage { grid-template-columns:1fr; }
	.top-container { grid-template-columns: 1fr; }
}

@media(max-width: 970px) {
	.pageheader { grid-template-columns:1fr; }
}

@media(max-width: 700px) {
	.main-nav ul { grid-template-columns:1fr; }
	.logo p { text-align:center; }
	.headercontent {
		font-size:20px;
		text-align:center;
	}
	.headercontent p{
		text-align:center;
	}

	.info .btn {
		display:block;
		text-align:center;
		margin: auto;
	}
}

@media(max-width: 568px) {
	.headercontent a { color: blue;	text-decoration:underline; }
	.top-container { padding:2rem; }
	.info { padding:2rem; }
	.innerpage { padding:2rem; }
}

@media(max-width: 500px) {

}

@media screen and (min-width: 1400px) {
h1 { font-size: 40px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
p { font-size: 24px; }
ul { font-size: 24px; }
ol { font-size: 24px; }
}

@media screen and (max-width: 780px) {
	.img-justification-right2 { text-align: center }
	.img-justification-left2 { text-align: center }
	div.img-justification-right2 { float: none; margin-left: auto; margin-right: auto; }
	div.img-justification-left2 { float: none; margin-left: auto; margin-right: auto; }
}

@media screen and (min-width: 780px) {
	.img-justification-right2 { float:right; margin-left:5px; margin-right:5px; }
	.img-justification-left2 { float:left; margin-left:5px; margin-right:5px; }
	div.img-justification-right2 { float:right; margin-left:5px; margin-right:5px; }
	div.img-justification-left2 { float:left; margin-left:5px; margin-right:5px; }
}

@media screen and (max-width: 1280px) {
	.img-justification-right { text-align: center!important }
	.img-justification-left { text-align: center!important }
	div.img-justification-right { float: none; margin-left: auto; margin-right: auto; }
	div.img-justification-left { float: none; margin-left: auto; margin-right: auto; }
}

@media screen and (min-width: 1280px) {
	.img-justification-right { float:right; margin-left:5px; margin-right:5px; }
	.img-justification-left { float:left; margin-left:5px; margin-right:5px; }
	div.img-justification-right { float:right; margin-left:5px; margin-right:5px; }
	div.img-justification-left { float:left; margin-left:5px; margin-right:5px; }
}

/*SLIDESHOW*/
.mySlides {display:none;}
.w3-content{max-width:980px;margin:auto}
.w3-rest{overflow:hidden}
.w3-layout-container{display:table;width:100%}.w3-layout-row{display:table-row}.w3-layout-cell,.w3-layout-col{display:table-cell}
.w3-layout-top{vertical-align:top}.w3-layout-middle{vertical-align:middle}.w3-layout-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}
.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}
.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}
.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-animate-fading{-webkit-animation:fading 6s infinite;animation:fading 6s infinite}
@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{-webkit-animation:opac 0.8s;animation:opac 0.8s}
@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;-webkit-animation:animateleft 0.4s;animation:animateleft 0.4s}
@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}
@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}
@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s}
@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}