/* Main Styles */
:root {
             --red: #de0100;
      --header-red: rgba(218,3,0,1);
            --blue: #1404bd;
     --header-blue: rgba(19,11,181,1);
 --WA-flag-grn-hex: #008457;
--WA-flag-grn-rgba: rgba(0,132,87,1);
}

  html, body, header, nav, section, div, h1, h2, h3, h4, h5, h6, p, hr, button {
  box-sizing: border-box;
  display: block;
  margin: 0;
  border: 0;
  padding: 0;
  font-size: large;
  text-align: left;
  }

body {
  width: auto;
  margin: 0 auto; 
  border: 0; 
  padding: 0;
  font-family: 'Lato', 'Arial', sans-serif;
  background: rgba(200,200,200,.5);
  }

section {
  display: none; 
  width: clamp(320px, 100vw, 100%);
  margin: 0 auto;
  padding: 1rem; 
  background: #ffffff;
  }

/* Header Styles */
header {
  display: grid;
  grid-template-columns: 100px auto auto 2rem;
  width: 100%;
  position: sticky;
  top: 0px;
  z-index: 99;
  background-color: rgba(19,11,181,1); 
  }

header div#STRIPES {
  grid-column-start: 1;
  grid-column-end: 5;
  border-top: 15px solid rgba(255,255,255,1);
  border-bottom: 3.5px solid white;
  padding-top: 7.5px;
  background: var(--header-red);
  }
  
header img#LOGO {
  justify-content: end;
  position: relative;
  top: -25.5px;
  width: clamp(50px, calc(44.5px + 6vw), 94px);
  margin-left: 1rem;
  margin-top: 0; 
  margin-bottom: 0; 
  }

header h1 {
  display: inline;
  margin: 0; 
  justify-content: center;
  align-content: center;
  padding: 0 1rem .2rem 1rem;
  color: #ffffff; 
  background-color: rgba(19,11,181,1); 
  font-weight: 900; 
  font-size: clamp(11pt, 4vw, 1.7rem); 
  line-height: clamp(11pt, 4vw, 1.7rem);
  text-align: center;
  }
	
button {
  display: block;
  width: 5.5rem;
  margin: 0px;
  border: none;
  border-width: 0px;
  padding: 0.1rem .2rem .2rem .1rem;
  color: white;
  background: #1404bd;
  line-height: 1.7rem;
  cursor: pointer;
  }

header button#HAMBURGER {
  display: block;
  width: 1.5rem;
  margin-left: 100%;
  justify-content: end;
  color: white;
  }
	
/* @media break @ 852px */
header nav#MENU {
  display: none;
  width: 9rem;
  position: absolute;
	top: calc(66px + 5vw);
  right: 0;
  z-index: 99;
  padding-bottom: 3rem;
  text-align: right;
  justify-content: end;
  align-content: center;
  color: white;
  }
  
nav button {
  display: inline-block;
  margin: 0;
  text-align: center;
  background: radial-gradient(ellipse, hsl(240, 100%, 40%) 0%, hsl(245, 86%, 30%) 100%);  
  box-shadow: 1px 1px 3px hsl(240, 100%, 7%),
             -1px -1px 3px hsl(245, 86%, 72%);
  }
  
nav button:hover {
  background: radial-gradient(ellipse, hsl(240, 100%, 70%) 0%, hsl(245, 86%, 60%) 100%);
  }

nav button.current {
  width: 5.44rem;
  font-weight: 600;
  background: radial-gradient(ellipse, hsl(240, 100%, 70%) 0%, hsl(245, 86%, 60%) 100%);
  box-shadow: -1px -1px 3px hsl(240, 100%, 27%),
   0px 0px 0px hsl(245, 86%, 68%);
  }

nav button.current:hover {
  font-weight: 600;
  background: radial-gradient(ellipse, hsl(240, 100%, 70%) 0%, hsl(245, 86%, 60%) 100%);
  cursor: default;
  }

nav button.active {
  padding: 0rem .2rem .2rem .6rem;
  }

nav button:disabled {
  cursor: default;
  }

/* hamburger menu animates to X when open */
button.hide hr:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  }

button.hide hr:nth-child(2) {
  opacity: 0;
  }

button.hide hr:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  }

button hr {
  margin: 5px 0;
  border: 1px solid white;
  }

section.current {
  display: block;
  }

section h1 {
  text-align: center;
  margin: 0 auto;
  }

p {
  padding: 1rem 0rem;
  }


/* ABOUT */
section#HOME {
  background: rgba(0,132,87,.9) url('images/forest.jpg'); 
  background-size: cover;
  background-position: 0px 70px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  }

section#HOME div, section#HOME p {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: rgba(0,132,87,.75);
  opacity: .9;
  }

section#HOME p {
  color: white;
  font-weight: 900;
  text-shadow: 
  1px 1px 1px rgba(0,0,0,.9),
  2px 2px 4px rgba(0,132,87,.9), 
  3px 3px 6px rgba(0,132,87,.9); 
  padding: 1em 5vw;
  }

section#HOME div p {
  background: none;
  margin: 0;

section#HOME div {
    margin: 0;
    padding: 0;
  }
  
}
section#HOME img#MAP {
  display: block;
  position: relative;
  width: clamp(30px, 45%, 180px);
  margin-left: 9vw;
  margin-right: 9vw;
  padding-top: .5rem;
  padding-left: .1rem;
  padding-bottom: 1rem;
  float: right;
  }

section#HOME a:link {
  color: rgb(255, 255, 255);
  text-decoration: underline;
  text-shadow: 1px 1px 1px black,
             -1px -1px 1px rgb(0, 100, 0)
,
             -2px -2px 3px rgb(0, 100, 0)
;
  }

section#HOME a:hover {
  color: blue;
  text-shadow: 1px 1px 4px white;
  }
  
section#HOME a span {
  background: rgba(0, 96, 0, .2);
}

section#PLATFORM {
  background: url('images/constitution.jpg');
  background-size: cover;
  background-position: 0px 70px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  }

section#PLATFORM div {
  max-width: 1024px;
  background-color: rgba(255,255,244,.9);
  opacity: .9;
  margin: 1rem auto;
  padding: 1rem 5vw;
  }

section#PLATFORM h2, section#PLATFORM h3 {
  font-size: larger;
  font-weight: 900;
  }

section#PLATFORM h3, section#PLATFORM p {
  color: black;
  font-weight: 900;
  text-shadow: 
  1px 1px 1px rgba(255,255,255,.9),
  2px 2px 4px rgba(255,255,244,.7); 
  }

section#PLATFORM p {
  padding-top: 0;
  }


  shadow {
  box-shadow: -2px -1px 8px 0 rgba(255, 255, 255, 0.6), 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
  }

section#CALENDAR {
  padding: 0;
  text-align: center;
}

section#CALENDAR iframe {
  width: clamp(320px, 90%, 1024px);
  margin: 0 auto 3rem;
  }
  
section#CALENDAR h2, section#CALENDAR p {
  width: clamp(300px, 90%, 1024px);
  margin: 0 auto;
  padding: 1rem;
}

@media only screen and (min-width: 412px) {

}