* { -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:#5b7479; line-height:1.5; margin-bottom:1em }
h2       { font-size:150%; color:#5b7479; line-height:1.5; margin-bottom:1em }
h3       { font-size:100%; color:#5b7479; line-height:1.5; margin-bottom:1em }

a:link     { color:#670180}
a:visited { color:#670180}
a:hover  { color:#000000}
img        { max-width:100%; height:auto; border:0 }

.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-nav { grid-column:1/-1; background:#ffffff; padding:0; text-align:center } */

.navbar img  { display:block; width:60%;height:auto;margin-right:auto;margin-left:auto;padding:2rem 1rem }

.navbar a { display:block;color:#007298; text-decoration:none;background:white; width:100%; padding:1rem; text-align:center; text-decoration:none; 
text-transform:uppercase; border-top:1px solid #e7e7e7; border-right:1px solid #e7e7e7; border-left:1px solid #e7e7e7 }

.navbar a:nth-child(6) { border-bottom:1px solid #e7e7e7 }

.navbar a:link { color:#670180}
.navbar a:visited { color:#670180}
.navbar a:hover { background:#670180; color:white }
.navbar a.selected {background:#670180; color:white }

.banner { visibility:hidden;background:invisible;width:100%;height:70px }

.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-sidebar-left {
  grid-column: 1/-1;
  background: #ffffff;
  padding: 1rem;
  text-align:center
}

.page-sidebar-right {
  grid-column: 1/-1;
  background: #ffffff;
  padding: 1rem;
  text-align:center
}

.page-footer { grid-column: 1/-1 }
.page-footer { width:100%;height:250px; background-color:#ffffff;background-image:url("images/waves.png"); 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: 1000px) {

.page-wrap { display:grid; grid-template-columns: min-content 1fr min-content; grid-template-rows: min-content  min-content 1fr min-content }
.page-nav { grid-column: 1/-1; grid-row:1/2; height:200px;  display: flex; align-self: center }

.navbar {
  width:100%;
  height: 200px;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1em;
  align-items: center;
  justify-content: center;
}

.navbar img  { width:200%;height:auto;padding:1rem }

.navbar a { padding:1rem;color:#670180; text-decoration:none;background:transparent; border:none }
.navbar a:link { color:#670180}
.navbar a:visited { color:#670180}
.navbar a:hover { background:#670180; color:white;border-radius:10px }
.navbar a.selected {background:#670180; color:white;border-radius:10px }

.navbar a:nth-child(6) { border-bottom:none }

.banner { visibility: visible;
        width: 100%;
        height: 70px;
        background: #6495ed;
        margin-bottom: 2em;
        -webkit-box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
        box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
    }

.page-sidebar-left { grid-column: 1/2; grid-row: 3/4  }
.page-main { grid-column: 2/3; grid-row: 3/4 }
.page-sidebar-right { grid-column: 3/4; grid-row: 3/4 }

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

.page-main { padding:4em 20% 2em 20%; background-color:white }
.page-main h1 { font-size:150%; text-transform:uppercase }
.page-main ol { font-size:100%; list-style-type:decimal }
.page-main ul { margin-left:20px; 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-footer { grid-column: 1/-1; grid-row:4/5 }

.page-footer { width:100%;height:267px; background-color:#ffffff;background-image:url("images/waves.png"); 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 }

.page-sidebar-left { padding:2rem; background-color:#fff }
.page-main    { padding:2rem; background-color:#fff }
.page-sidebar-right { padding:2rem; background-color:#fff }

}