html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Bellefair', "Times New Roman", serif;
        font-size: 14pt;
        counter-reset: sequence;
        margin: 0px;
        color: #3D1832;
    }

    #content {margin: 0px;}
    #content a {
      color:#847;
      text-decoration:none;
    }

    #content a:hover {color: #F0B;}

    #top {height: 1px;}
    #banner {
      display: none;
      width: 100%;
      margin-top: 46px;
      border-top: solid 16px #3D1832;
      border-bottom: solid 16px #3D1832;
    }

    #quoteStart {margin-top: 6vh}
    .after-gap {margin-bottom: 6vh}

    .section-bar {
      border: 6px solid #9255F6;
      width: 100%;
    }

    .parallax {
          background-image: url("../../images/LeRoyGraham-aspect.jpg");
          background-attachment: fixed;
          background-position: center 45px;
          background-repeat: no-repeat;
          background-size: contain;
          -webkit-background-size: contain;
          -moz-background-size: contain;
          -o-background-size: contain;
          text-align: center;
          padding-top: 53%;
    }

    h2.sequence-item {
        text-align: left;
        font-weight: normal;
        font-size: 120%;
        color: #3D1832;
    }

    h2.sequence-item::before {
        counter-increment: sequence;
        content: "Sequence " counter(sequence) " ";
        border-width: 2px 3vw 0 0;
        border-style: solid;
        margin-right: .25em;
        border-color: #9255F6;
    }

    h1, h2, h3 {
      text-align: center;
      color: #3D1832;
    }

    span.inline-heading {font-weight: bold;}
    .center-text {text-align: center;}
    .sequence-item-div {
      clear: both;
      padding:3vh 0 5vh 0;
    }

    .sequence-item-img {
      float: left;
      padding-right: 1vw;
    }

    ul.dashed {
      list-style: none;
      padding-left: 1em;
      padding-bottom: 1em;
      color: #3D1832;
      display: flex;
      flex-wrap: wrap;
    }

    ul.dashed > li::before {
        content: "\2013  ";
    }

    .member {
      background: #fbf0fb;
      cursor: pointer;
      padding: 9px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      text-align: center;
      font-family: "Bellefair", "Times New Roman", serif;
      font-size: 14pt;
      font-weight: normal;
    }

    .member.not-a-button:hover {
      background-color: #fbf0fb;
      color: rgb(64, 60, 58);
      cursor: default;
    }

    .active, .member:hover {
      background-color: #9255F6;
      color: #fff;
    }

    .member-data {
      padding-right: 24px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }

    .member-data::after {
      display: block;
      text-align: center;
      margin-bottom: 10vh;
      content: url("../../images/lavender-quadrefoil.png");
    }

    .member-data img {
      padding-right: 1em;
      max-width: 260px;
    }

    .member-data p {
      min-width: 50%;
    }

    .date-years {
      padding-right: 1em;
      font-weight: bold;
      font-size: smaller;
    }
  /************ Menu Stuff ************/
    .topnav {
      background-color: #3D1832;
      overflow: hidden;
      position: fixed;
      top: 0;
      width: 100%;
      min-width: 210px;
      z-index: 1;
    }

    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 16px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a.long-item {
      line-height: .9;
      padding: 10px 16px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    .topnav a.active {
      background-color: #9255F6;
      color: white;
    }

    .topnav .icon {
      display: none;
    }

    .topnav .lang-switch {
      display: block;
      position: absolute;
      right: 0px;

    }

    .section {
      padding-top: 60px;
      padding-bottom: 60px;
      width:60%;
      margin: auto;
    }
/************** modal list *******************/
/*** from here https://codepen.io/JohnUberbacher/pen/BQOeKw I think ***/

.listwrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

}

.box {
  background: #eeeeee;
  padding: 9px;
  text-align: center;
  width: 45%;
}


.button {
  color:#000000!important;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.1s ease-out;
}

.button:hover {
  background: #ff3a3a;
}

.button:not(.nodata)::before {
  font-family: "Font Awesome 5 Free";
  font-size:10pt;
  font-weight: 900;
  content: "\f05a";
  padding-right: .5em;
  color: #cfb2ff
}

.nodata {
  color:#000000!important;
  text-decoration: none;
  cursor: default;
}

.nodata:hover {background-color: inherit}


.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 60px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 80%;
  max-height: 80%;
  overflow: hidden;
  position: relative;
  transition: all 1s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .member-data {
  max-height: 70vh;
  overflow: auto;
}

/************** Media Queries ****************/
    @media (hover: none){
      button.info-button::after {
        font-family: "Font Awesome 5 Free";
        font-size:10pt;
        font-weight: 900;
        content: "\f05a";
        padding-left: 1em;
        color: #9255F6;
      }
    }

    @media screen and (min-width: 1400px) {
      .section {width: 800px;}
      .popup {
        width: 60%;
        max-width: 800px;}
      }

    @media screen and (max-width: 600px){
      .box {
        width: 100%;
      }
      .sequence-item-img {
        float: none;
        width: 95%;
      }
    }

    @media screen and (max-width: 480px){
      .section {
        width: 95%;
        margin: auto;
      }

      .popup {
        width: 85%;
      }
    }

    @media screen and (max-width: 1024px) {
      #banner {display: block;}

      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }

      .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
      }

      .topnav .lang-switch {
        display: block !important;
        position: absolute;
        top: 0;
        right: 48px;
      }

      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }

      .parallax {
        display:none;
      }

      .section-bar {
        display: none;
      }

      .section::after {
        display: block;
        text-align: center;
        margin-top: 10vh;
        content: url("../../images/lavender-quadrefoil.png");
      }

    }