html,
    body,
    h1,
    h2,
    h3,
    h4,
    h5 {
      font-family: "Raleway", sans-serif;
    }
    * {
      box-sizing: border-box;
    }

    /** Notification Banner Logic */
    .army-bar-container:last-child {
      align-items: center;
      justify-content: center;
    }

    .banner-wrapper {
      width: 100%;
      max-width: 100%;
      height: 2.7rem;   /* Remember to keep the heights of this and banner span the same */
      overflow: hidden;
      position: absolute;
    }

    .banner {
      display: flex;
      flex-direction: column;
      animation: changeText 12s infinite;


      &:hover {
        animation-play-state: paused;
      }
    }

    .banner span {
      height: 2.7rem;   /* Keep height the same as banner-wrapper */
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 1rem;
      box-sizing: border-box;
    }

    @keyframes changeText {
      0%, 50%   { transform: translateY(-5%); }
      55%, 95%  { transform: translateY(-55%); }
      100%      { transform: translateY(-5%); }
    }

    /* disables a class' animations */
    .disable-anim {
      animation: none;
    }

    .banner.disable-anim {
      transform: translateY(-5%);
    }

    /* JS Modal Logic */
    dialog {
      width: 100%;
      height: 100%;
      position: relative;
      border: none;
      background: none;
      overflow: hidden;
    }

    dialog::backdrop {
      background-color: #d3d3d3af;
      backdrop-filter: blur(5px);
    }

    .modal-dialog {
      display: flex;
      align-items: space-around;
      justify-content: center;
      flex-wrap: wrap;
    }

    .modal-dialogcontainer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .modal-dialogcaption {
      width: 33%;
      max-height: 650px;
      text-align: left;
      background: #000;
      color: #fff;
      overflow-y: auto;

      /* Scrollbar Logic for non-webkit browsers */
      scrollbar-color: #dededeb9;
      scrollbar-width: 10px;
    }

    .modal-dialogcaption::-webkit-scrollbar {
      width: 10px;
    }

    .modal-dialogcaption::-webkit-scrollbar-thumb {
      background: #dededeb9;
    }

    .modal-dialogcaption > div {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
      width: auto;
      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;
    }

    .modal-dialogcaption > p {
      align-items: center;
      width: auto;
      margin-left: 20px;
      margin-right: 20px;
      padding-right: 5px;
    }

    .modal-close {
      position: relative;
      width: 50px;
      height: 50px;
      font-size: xx-large;
      font-weight: 700;
      text-decoration: none;
      text-align: center;
    }

    .modal-close:hover {
      color: #b3b3b3;
    }

    .subtitle {
      max-width: 17rem;
    }

    /* CSS-Only Modal Logic */

    .center {
      margin: 0 auto;
    }

    /* Slideshow container */
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }

    /* Hide the images by default */
    .mySlides {
      display: none;
    }

    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active,
    .dot:hover {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @keyframes fade {
      from {
        opacity: 0.4;
      }
      to {
        opacity: 1;
      }
    }

    h2 {
      margin-top: 4px !important;
      margin-bottom: 4px !important;
    }

    td {
      font-size: 18px;
    }

    .newSubmission {
      background-color: #de80a6;
      font-weight: 800;
      padding: 10px;
    }

    nav#mySidebar {
        z-index: 3; 
        width: 260px
    }

    img.w3 {
        width: 235px; 
        display: flex; 
        justify-self: center;
        z-index: 3;
    }

    .w3-container.w3-row {
        display: flex;
        justify-content: center;
    }

    .w3-main {
        margin-left: 260px; 
        margin-top: 43px
    }

    .w3-container.w3-light-grey {
        padding-top: 22px
    }

    .mySlides.fade img {
        width: 100%;
    }

    /* -- about page -- */

.awardsheading {
  margin-left: 16px;
}

h4 {
  text-decoration: underline;
  margin-top: 20px;
}

h6 {
  text-decoration: none;
  font-size: 14px;
  color: darkgreen;
  font-weight: bold;
}

.table-center {
  position: relative;
}

.content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#AwardsTopLinks {
  /*		background-color: aqua;*/
  padding-top: 0;
  margin-top: 0;
  font-weight: 500;
}

/* -- registration -- */


/* -- agenda -- */
td{
    /*border-style: solid;*/
    border: 1px solid grey;
    border-collapse: collapse;
    margin-right: 14pt;
 }
 
 tr p {
    margin-top: 5pt;
    margin-bottom: 5pt;
 }
 
 table {
    border-style: solid;
    border: 3px solid black;
 }

 .imagetable {
    border: none;
 }

 .imagetable td {
    border: none;
 }

 .tdspacer {
    padding-left:40px;
 }

 /* Desktops */
 @media (max-width: 84em) {
  /* About Page */
  .content-center {
    margin-left: 60em;
  }

  /* Agenda Page */
  table.table-center {
    margin-left: 10%;
  }
 }

 /* Landscape Tablets */
 @media (max-width: 75em) {
  /* About Page */
  .content-center {
    margin-left: 0em;
  }
 }

 /* Tablets */
 @media (max-width: 59em) {
  /* About Page */
  .content-center {
    margin-left: 0em;
  }
 } 

 /* Smaller Tablets */
 @media (max-width: 44em) {
  /* Biographies Page */
  .modal-dialog {
    flex-direction: column;
  }

  .subtitle {
    max-width: 50em;
  }

  /* About Page */
  .content-center {
    margin-left: 0em;
  }
 }

 /* Phone Screens */
 @media (max-width: 34em) {
  /* Biographies Page */
  dialog {
    position: absolute;
    max-height: 100vh;
    overflow-y: scroll;

    /* Scrollbar Logic for non-webkit browsers */
    scrollbar-color: #dededeb9;
    scrollbar-width: 10px;
  }

  dialog::-webkit-scrollbar {
      width: 10px;
    }

  dialog::-webkit-scrollbar-thumb {
    background: #dededeb9;
  }

  .modal-dialogcontainer {
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
  }

  .modal-dialogcaption {
    width: 97.6%;
    max-height: 3000px;
    overflow-y: visible;
  }

  /* About Page */
  .content-center {
    margin-left: 0em;
  }
 }