@charset "utf-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Lato');
/* CSS Document */
:root {
	font-family: 'Lato', sans-serif;
	color: #665;
	font-size: 15px;
	box-sizing: border-box;
  --hover-color: #8cc63f;
}
* {box-sizing: border-box;transition: all 100ms ease-in-out;}
body {
	font-size: 100%;
	margin: 0px;
	padding: 0px;
/*	background: #e9e9e9;*/
	background-image: linear-gradient(180deg,#ececec 0%, #e9e9e9 100%);
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body[data-state="1"] #container #login,
body[data-state="2"] #container #login,
body[data-state="3"] #container #login,
#login,
body[data-state="0"] #container #welcome,
body[data-state="2"] #container #welcome,
body[data-state="3"] #container #welcome,
#welcome,
body[data-state="0"] #container #form,
body[data-state="1"] #container #form,
body[data-state="3"] #container #form,
#form,
body[data-state="0"] #container #thanks,
body[data-state="1"] #container #thanks,
body[data-state="2"] #container #thanks,
#thanks { 
  display: none; 
}
body[data-state="0"] #container #login,
body[data-state="1"] #container #welcome,
body[data-state="2"] #container #form,
body[data-state="3"] #container #thanks {
  display: flex;
}


body div#wrapper {
  justify-content: center;
}


#spinner {
  background: #00000055;
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s linear;
}
#spinner.show {
  opacity: 1;
  pointer-events: all;
}

.spinner {
  width: 200px;
  height: 50px;
  margin: 10rem auto;
  background: white;
  padding: 4rem;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 
      0 3px 8px rgba(0,0,0,0.3),
      0 10px 80px rgba(0,0,0,0.2);
}


section {display: none;}
section.active {display: flex;}

header {
  margin-bottom: 1rem;
  position: fixed;
  
  display: grid;
  grid-template-areas: 'logo title contact';
  
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem; 
  width: 100%;
  background-image: linear-gradient(180deg, #fff 0px, #fff 50%, #f3f3f3 85%, #ccc 100%);
  z-index: 400;
  gap: 0.5rem;
}




  header .header_logo {
    grid-area: logo;
  }
  header .header_title {
    grid-area: title;
  }
  header .header_contact {
    grid-area: contact;
  }

@media (max-width: 532px) {
  div.logo img {
    max-height: 35px;
  }
  body header .header_title {
    display: none;
  }
  header {
    grid-template-areas: 'logo contact' 'title title';
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  body header .header_logo img {
    height: 35px;
    transform: translateY(0);
    margin-left: 1rem;
  }
  body #permissionWrap .header .cologo img,
  body #aboutYou .header .cologo img,
  body #fileUploadWrapper .header .cologo img,
  body .section .header .cologo img,
  body #alladdresses .header .cologo img,
  body #submitSection .header .cologo img,
  body .section > .header .cologo img {
    height: 20px;
  }
  body #allAddresses > .header,
  body #permissionWrap > .header,
  body #aboutYou > .header,
  body #fileUploadWrapper > .header,
  body .submitSection > .header,
  body .section > .header {
    flex-wrap: wrap;
    flex-direction: column;
    margin: 0 0 1rem 0;
  }
  
  
  header .header_logo {}
  header .header_title {}
  
  body .header_contact {
    margin-right: 1rem;
  }
  body .header_phone {
    gap: 0.25rem;
  }
  body .header_phone a {
    font-size: 0.8rem;
  }
  
  body .header_email {
    gap: 0.25rem;
  }
  body .header_email a {
    font-size: 0.55rem;
  }
}


header .header_logo {
	display: block;
	padding-bottom: 0rem;
	z-index: 2;
  order: 1;
}
header .header_logo img {
	height: 50px;
  transform: translateY(-6px);
}

header .header_title {
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  opacity: 0.75;
  margin: 0 auto;
  order: 2;
}
body[data-state="0"] header .header_title {
  opacity: 0;
}

header .header_contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  order: 3;
}
header .header_contact a {
  text-decoration: none;
  color: #616161;
}
header .header_contact a:hover { color: var(--hover-color); }
.header_phone {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem
  
}
.header_phone a {
  font-size: 1.1rem;
}
.header_email {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  
  
}
.header_email a {
  font-size: 0.65rem;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
}

#header {
}
#header > img {
	display: inline-block;
	margin: 10px 0px;
/*	width: 18rem;*/
	height: auto;
}

legend {
  margin: 0;
}

div.logo img {
/*	width: 20rem;*/
/*	height: auto;*/
/*	text-align: center;*/
}

#termsModal {
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 100vw;
  background: #e9e9e9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 300;
  opacity: 1;
  transform: translateX(0px);
  transition: opacity transform 500ms linear;
  padding-top: 50px;
}
#termsModal.hidden {
  opacity: 0;
  transform: translateX(-100px);
  pointer-events: none;
}
#termsModal panel h3 {
  text-align: left;
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0;
}
#termsModal panel {
  width: 100%;
  height: calc(100vh - 0rem);
  padding: 4rem;
  line-height: 1.7;
  overflow-y: scroll;
}
#termsModal panel p {
  font-size: 0.9rem;
}

button#modalClose {
  border: 2px solid #aaa;
  background: none;
  font-size: 0.8rem;
}
button#modalClose:hover {
  background: #fafafa;
}

#container {
  background: #f4f4f4;
  width: auto;
  max-width: 640px;
/*  margin: 8rem 1rem 2rem 1rem;*/
  margin: 100px auto 24px auto ;
  box-shadow: 
      0 3px 8px rgba(0,0,0,0.3),
      0 10px 80px rgba(0,0,0,0.2);
  border-radius: 8px;
  border: 2px solid #f4f4f4;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #d6d6d6;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
/*  width: 780px;*/
}


@media (max-width: 532px) {
  
  #container {
    width: calc(100% - 10px);
    margin: 50px auto;
    padding: 0.25rem;
  }
  body #container #login {
	margin: 0 0rem;
  }
  div#loginForm {
    padding: 0rem 0;
  }
  #form > div {
    padding: 0.5rem;
    margin: 0.25rem auto 0.25rem;
  }
}

#container #login {
	width: 300px;
	margin: 0 2rem;
  display: none;
  justify-content: center;
  align-items: center;
}
body[data-state='0'] #login {
  display: flex;
  width: 100%;
}

div#loginForm {
	display: flex;
  flex-direction: column;
	border: none;
	text-align:left;
	padding: 1.8rem 0;
}

div#loginForm label {
	display: inline-block;
/*	width: 6rem;*/
	text-align: left;
	font-size: 1rem;
	padding: 0.66rem 0.66rem 0.66rem 0px;
	margin-top: 10px;
}

div#loginForm label:nth-child(2n) {
	padding: 1.32rem 0.66rem 0.66rem 0px;
}

div#loginForm input {
/*    width: 18.66rem;*/
    font-family: 'Lato';
    font-size: 1.2rem;
    line-height: 1.5rem;
	padding: 0.6rem 0.6rem;
    color: #555;
    background-color: #e7e7e7;
    box-shadow: 
		inset 0 2px 22px #dddddd,
		inset 0 0 7px #d0d0d0,
		inset 0 2px 4px #bbb,
		inset 0 0 0 1000px #f7f7f7;
	border-left: 1px solid #f2f2f2;
	border-right: 1px solid #f2f2f2;
	border-top: 2px solid #d6d6d6;
	border-bottom: 4px solid white;
	border-radius: 5px;
	text-shadow: 0 2px 4px rgba(0,0,0, 0.2);
}

div#loginForm input[type="text"],
div#loginForm input[type="password"] {
	display: inline-block;
/*	width: 18.67rem;*/
}

button.inline-button {
  display: inline;
  border: 0;
  background: none;
  text-transform: lowercase;
  font-size: inherit;
  padding: 0.25rem 0 0.25rem 0;
  border-bottom: 1px dotted #33333333;
  border-radius: 0;
}
button.inline-button:hover {
  background: none;
  border: 0;
  border-bottom: 1px solid #333;
}

button#submit-button {
	display: flex;
  justify-content: center;
  align-items: center;
	font-size: 1.2rem;
	width: 7rem;
	padding: 0.5rem 0.33rem 0.65rem 0.33rem;
	background: #333;
	color: white;
	cursor: pointer;
	margin-top: 2.2rem;
	margin-left: 11.6rem;
	transition: all 100ms ease-in-out;
	border-radius: 5px;
	border-top: 2px solid #666;
	border-bottom: 2px solid #000;
	border-left: 2px solid #444;
	border-right: 2px solid #444;
	box-shadow: 0 3px 7px #d0cece;
}

#welcome input[type="submit"] {
	display: block;
	font-size: 1.2rem;
	padding: 0.5rem 0.33rem 0.65rem 0.33rem;
	background: #333;
	color: white;
	width: 18rem;
	cursor: pointer;
	transition: all 100ms ease-in-out;
	border-radius: 5px;
	border-top: 2px solid #666;
	border-bottom: 2px solid #000;
	border-left: 2px solid #444;
	border-right: 2px solid #444;
	box-shadow: 0 3px 7px #d0cece;
}



div#loginForm button[type="submit"]:hover,
#welcome input[type="submit"]:hover {
	background: #619d01;
	box-shadow: 0 3px 8px 0px rgba(59, 128, 23, 0.4);
	border-top: 2px solid rgb(140, 204, 36);
	border-bottom: 2px solid rgb(68, 100, 16);
	border-left: 2px solid rgb(132, 183, 50);
	border-right: 2px solid rgb(132, 183, 50);
	text-shadow: 0 3px 4px rgb(68, 100, 16);
}


@media (max-width: 532px) {
  #welcome input[type="submit"] {
    
  }
  
}

/* THANKS PAGE */


section.thanks .header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

section.thanks .header .logo {
  margin-right: auto;
  transform: translateY(-8px);
}
section.thanks .header .logo img {
  height: 45px;
}
section.thanks .header .cologo {
  margin-left: auto;
}
section.thanks .header .cologo img {
  height: 35px;
  mix-blend-mode: multiply;
}

section.thanks {
	font-size: 1.0rem;
	display: flex ;
	
	background: #f4f4f4;
	width: 100%;
	margin: 0 auto 1rem;
	align-items: center;
	box-shadow: 
		0 3px 8px rgba(0,0,0,0.3),
		0 10px 80px rgba(0,0,0,0.2);
	border-radius: 8px;
	border: 2px solid #f4f4f4;
	border-top: 2px solid #ffffff;
	border-bottom: 2px solid #d6d6d6;
	flex-direction: column;
	padding: 20px 20px 20px 20px;
}
.blurb {
/*	flex-flow: row;*/
	width: calc(100% - 4rem);
	text-align: center;
  box-shadow: 0 0 16px 8px rgba(95, 142, 19, .2);
  border-radius: 5px;
  margin-top: 1rem
}
.blurb p {
	text-align: center;
	font-weight: 400;
	line-height: 1.7;
	padding-left: 2rem;
	padding-right: 2rem;
  text-wrap: balance;
}
.blurb p:first-child {
	margin-top: 20px;
}
.thankYou {
	text-align: center;
/*	padding-top: 30px;*/
	color: rgba(95, 142, 19, 1);
}
.blurb p span.thanksDate {
	font-style: italic;
	color: rgba(95, 142, 19, 1);
	display: inline-block;
	
}
.thanksLinks {
	width: 100%;
	margin: 20px auto 20px;
	display: flex;
    flex-direction: row;
    flex-flow: wrap;
	align-items: center;
	justify-content: center;
}
.thanksLinks .link {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  padding: 0.5rem 2rem;
  width: 100%;
}
.thanksLinks .link p {
  display: block;
/*  margin: 1rem auto;*/
  line-height: 1.5;
  text-align: left;
  text-wrap: balance;
  width: auto;
}
.thanksLinks button {
    display: block;
	font-size: 0.8rem;
	text-decoration: none;
	text-align: center;
	background: #414141;
	color: #e9e9e9;
	border: 1px solid rgba(95, 142, 19, 0.4);
	border-top: 1px solid #444;
	border-bottom: 1px solid #000000;
	padding: 24px 16px;
	width: auto;
    max-width: 160px;
    min-width: 160px;
	box-shadow: 0 5px 30px rgba(0,0,0,0.3);
	transition: all 150ms ease-out;
	border-radius: 5px;
  margin: auto 0 auto auto;
}
.thanksLinks button span {
  color: rgb(193, 245, 108);
/*  font-weight: 600;*/
  font-size: 1.2em;
  letter-spacing: 0.7px;
}

.thanksLinks button:hover span {
  color: rgb(0, 0, 0);
}
.thanksLinks button:hover {
	color: rgb(47, 57, 31);
	border: 1px solid rgba(95, 142, 19, 1);
	box-shadow: 0 12px 30px -5px rgba(95, 142, 19, 0.3);
}

@media (max-width: 530px) {

  .thanksLinks .link {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 0;
    padding: 0.5rem 2rem;
    width: 100%;
  }
  .thanksLinks .link p {
    text-align: center;
  }
  .thanksLinks button {
    margin: 0 auto;
    max-width: 100%;
  }
}


/* WELCOME PAGE */
section.welcome {
/*  width: clamp(420px, 700px, 800px);*/
  width: 100%;
	padding: 50px;
	margin-top: 3rem;
}
section.welcome h4 {
	line-height: 1.5;
	padding: 0 30px;
	margin-bottom: 4rem;
	width: 90%;
	text-align: center;
	font-size: 1.6rem;
	
}
section.welcome p {
	display: block;
	width: 90%;
	font-size: 0.9rem;
	line-height: 1.5;
	padding-bottom: 1rem;
	text-align: left;
	margin: 0 0;
}
section.welcome p span.boxout {
	display: block;
	color: rgba(95, 142, 19, 1);
	font-style: italic;
	border: 1px solid rgba(95, 142, 19, 0.2);
	padding: 30px;
	margin: 1rem 0;
}
section.welcome a {
	text-decoration: none;
	color: rgba(95, 142, 19, 1);
	border-bottom: 2px solid rgba(95, 142, 19, 0.2);
	padding-bottom: 5px;
/*	margin-bottom: 15px;*/
  font-size: 16px;
}
section.welcome a:hover {
	text-decoration: none;
	color: rgba(95, 142, 19, 1);
	border-bottom: 2px solid rgba(95, 142, 19, 0.6);
	padding-bottom: 5px;
/*	margin-bottom: 15px;*/
}

section.welcome button {
  margin-top: 2rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 2rem auto;
  background: rgba(95, 142, 19, 1);
  color: white;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

section.welcome button:hover {
  background: rgb(124, 178, 37);
}


/* FOOTER */

.footer {
	position: relative;
	background: #e9e9e9;
	width: 100%;
	box-shadow: 0 -20px 80px -10px rgba(0,0,0,0.15);
}
.footer p {
	display: block;
	width: 36.67rem;
	margin: 0 auto;
	padding: 2rem 1rem;
	color: #666;
}
.footer p a {
	color: #666;
	text-decoration: none;
	border-bottom: 1px dotted #666;
	padding-bottom: 3px;
	transition: 200ms ease-in;
	
}
.footer p a:hover {
	color: #709831;
	border-color: #709831;
}

/* VIEW PAGE */



body.view header div.logo {
	display: block;
	position: relative;
	width: 13.33rem;
	height: auto;
	margin: 0.67rem auto 2rem;
	padding-bottom: 0.67rem
	z-index: 2;
}
body.view header div.logo img {
	display: block;
	width: 13.33rem;
	height: auto;
}

body.view header div.logo:before {
	display: none;
}