* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }

body {
  background: #ffffff;
  padding: 0;
  height: 100vh;
  margin: 0;
  color:black; font-family:Helvetica,Arial,sans-serif; font-size:100%
}

body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
}

p, li, h1, h2, h3 { font-family:Helvetica,Arial,sans-serif; line-height:1.5 }
p         { font-size:100%; color:#000000; line-height:1.5; margin-bottom:1em }
h1       { font-size:200%; color:#007298; line-height:1.5; margin-bottom:1em }
h2       { font-size:150%; color:#007298; line-height:1.5; margin-bottom:1em }
h3       { font-size:100%; color:#007298; line-height:1.5; margin-bottom:1em }

a:link     { color:#007298 }
a:visited { color:#007298 }
a:hover  { color:#000000}

.page-wrap {
  background: white;
  height: 100vh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: min-content min-content min-content 1fr min-content min-content min-content;
  gap: 0px;
}

.page-top { grid-column: 1/-1;position:-webkit-sticky;position:sticky;top:0;z-index:10 }
.page-top { width:100%;min-height:40px; background-color:#007298;display:flex;align-items:center;justify-content:center }
.page-top p { color:#ffffff; font-size:100%; font-weight:bold;text-align:center; align-self:flex-middle; padding:1em }

.page-nav { grid-column:1/-1; background:#ffffff; padding:0; text-align:center }

.page-nav img  { display:block; max-width:80%;height:auto;margin-right:auto;margin-left:auto;padding:2rem 1rem }

.banner { grid-column: 1/-1 }

.banner   { display:table-cell;vertical-align:bottom;width:100%;background-color:#348f41;padding:0px }
.banner p  { display:block; padding:1em;background-color:#348f41; color:white;font-size:100%;text-align:center }
.banner img { float:none }

.banner2    { display:table;width:100%;height:20px;vertical-align:middle;background-color:#348f41 }
.banner2 p { color:white;font-size:100%;padding:2em; margin:0; width:100%; text-align:center }

.page-main {
  grid-column: 1/-1;
  background: #ffffff;
  text-align: left;
  padding: 1rem;
}

.page-main { clear:both; padding:20px }
.page-main h1 { font-size:150%; text-transform:uppercase }
.page-main ol { font-size:100%; list-style-type:decimal }
.page-main ul { margin-left:2px; font-size:100%; list-style-type:circle; margin-bottom:2em }
.page-main li { font-size:100%; line-height:1.5; margin-bottom:1em; margin-left:0px; list-style-position:outside }
.page-main li li { margin-top: 1em }
.page-main img { max-width:100% }

.home-text { font-size:100% }

.page-footer { grid-column: 1/-1 }
.page-footer { width:100%;height:267px; background-color:#ffffff;background-image:url("images/waves.jpg"); border:0; background-repeat:repeat-x;background-position:left bottom; display:flex;align-items:center;justify-content:center }
.page-footer p { color:#ffffff; font-size:100%; text-align:center; align-self:flex-middle; margin-bottom:-160px }

/********************************************************************* For medium and large sizes */
@media only screen and (min-width: 800px) {

.page-nav img  { display:block; max-width:40%;height:auto;margin-right:auto;margin-left:auto;padding:2rem 1rem }
p         { font-size:100% }

}