:root {
      --na-bg-color: #eefbff;
      --na-banner-color: #aaddfa;
      --na-banner-text-color: #ffffff;
      --na-extra-color: #085f91;
      --na-extra-text-color: #ffffff;
      --na-form-input-color: #ffffff;
      --na-font-size: 16px;
}

body,h1,h2,h3,h4,h5,p {font-family: "Lato",sans-serif}

body {
        max-width:1080px; 
	margin: 0 auto !important; 
	float: none !important;
        color:#000!important;
        background-color:var(--na-bg-color) !important;     
}

.na-col2  {
           color:var(--na-banner-text-color)!important;
           background-color:var(--na-banner-color)!important;
}
.na-col2:hover  {
            color:var(--na-extra-text-color)!important;
            background-color:var(--na-extra-color)!important;
}

.na-col3  {
           color:var(--na-extra-text-color)!important;
           background-color:var(--na-extra-color)!important;
}
.na-col3:hover  {
            color:var(--na-banner-text-color)!important;
            background-color:var(--na-banner-color)!important;
}
.na-col4  {
           color:var(--na-extra-text-color)!important;
           background-color:var(--na-extra-color)!important;
}

.na-leftbar {
            border-left:6px solid var(--na-banner-color)!important;
}

.na-line {
          border-top: 2px solid var(--na-extra-color)!important;
}

.na-banner-col {
           color:var(--na-banner-text-color)!important;
           background-color:var(--na-banner-color)!important;
}


/* calculates the gap needed at the top of the content 
to make sure that all of it can be seen before scrolling*/  
.maincontent{
   max-width:inherit;
   margin-top:clamp(84px,14vw,149.3px);
}

/* this deals with the position Maxwell's head on the banner */
.toppic2 {
   clip-path:ellipse(45% 50%);
    shape-outside:ellipse(55% 60%);
    height:clamp(72px,12vw,128px);
    width:auto;
  position: fixed;
  top: clamp(12px,2vw,21.3px);
  left: calc(52vw + min(35vw,378px));
  z-index: 2;
}

/* helps with position of text and icon on the banner */
.barcenter {
display:inline-block;
padding:clamp(4.5px,0.74vw,8px);
text-align:center;
align-self:center;
margin:clamp(3px,0.5vw,5.4px);
line-height:0.95;
color:white;
font-size:clamp(30px,5vw,54px);
text-shadow:2px 2px 4px #000000;
}

/* formats the special header that is added by default to pages */
#specialhead {
     text-align: right;
     font-style: italic;
     color: var(--na-extra-color);
} 

/* list spacing */
ul,ol {
  margin-left: -1em;
  margin-top:0em;
}
li {
  line-height:1.25;
}


/* links */
a:link {color: blue; text-decoration: none;}
a:visited {color: blue; text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: underline;}
a img{cursor: pointer}
a img:hover{opacity: 0.6; transition: 0.3s}
a p img{cursor: pointer}
a p img:hover{opacity: 0.6; transition: 0.3s}

/* tables */
td {vertical-align:top;}
.natable {border-collapse:collapse; rules:all;border: solid 2px var(--na-extra-color)}
.natable td,th {padding: 5px; border: solid 2px var(--na-extra-color);text-align:center;}

figcaption {
   font-size:14px;
   color:#222;
}

/* accordian-type items */
details > summary {
  padding: 3px 3px;
  margin-top:6px;
  margin-bottom:6px;
  max-width: inherit;
  background-color:var(--na-banner-color);
  color:#000;
  border: 0.5em solid var(--na-banner-color);
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  font-weight: 500;
  font-size:16px;
}

details > summary:hover {
  padding: 3px 3px;
  margin-top:6px;
  margin-bottom:6px;
  max-width: inherit;
  background-color:var(--na-extra-color);
  color: var(--na-extra-text-color);
  border: 0.5em solid var(--na-extra-color);
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  font-weight: 500;
  font-size:16px;
}

details[open] > summary {
  padding: 3px 3px;
  margin-top:6px;
  margin-bottom:6px;
  max-width: inherit;
  background-color:var(--na-extra-color);
  color: var(--na-extra-text-color);
  border: 0.5em solid var(--na-extra-color);
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  font-weight: 500;
}

[open]::details-content{
  background-color: var(--na-bg-color);
  max-width: inherit;
  padding: 4px 0px 4px 4px;
  border-left: 2px solid var(--na-extra-color);
}

details > p {
  background-color: var(--na-bg-color);
  max-width: inherit;
  padding: 4px 4px 4px 4px;
}

details .w3-row-padding .w3-threequarter{
@media (min-width:601px){width:calc(74.99% - 16px)};
}
details .w3-row-padding .w3-twothird{
@media (min-width:601px){width:calc(66.66% - 16px)};
}
details .w3-row-padding .w3-half{
@media (min-width:601px){width:calc(49.99% - 16px)};
}
details .w3-row-padding .w3-third{
@media (min-width:601px){width:calc(33.33% - 16px)};
}
details .w3-row-padding .w3-quarter{
@media (min-width:601px){width:calc(24.99% - 16px)};
}

    

/* try to set things up for photo thumb gallery */
.photothumbrow {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create 5 equal columns that sit next to each other */
.photothumb {
  -ms-flex: 20%; /* IE10 */
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
  text-align:center;
  display:block;
  float:left;
}

.thumbimg{
width:95%;
border-radius: 10%; 
border: 5px solid var(--na-extra-color);
}

.outlineimg{
outline-color: var(--na-extra-color);
outline-style: solid;
outline-width: thick;
background-color: white;
}

/* Responsive layout - makes a 4 column-layout instead of 5 columns */
@media screen and (max-width: 800px) {
  .photothumb {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 25%;
  }
}

/* Responsive layout - makes a two column l */
@media screen and (max-width: 600px) {
  .photothumb {
    -ms-flex: 33%;
    flex: 33%;
    max-width: 33%;
  }
}

.mySlides {display:none;}
.mySlideGallery {display:none;}

div.scroll {
  background-color: var(--na-bg-color);
  height: 480px;
  width: 95%;  
  overflow-y: auto;
}