/* Mobile Hide and Show */
  .mobileShow {display:none;}
  @media screen and (max-width: 900px) {
    .mobileShow {display:block;}
  }
  
  .mobileHide {display: flex; justify-content: center;}
  @media screen and (max-width: 900px) {
    .mobileHide {display: none;}
  }
  
  /* ADA */
  .screenreader-text {position:absolute; left:-999px; width:1px; height:1px; top:auto;}
  .screenreader-text:focus {color:black; display:inline-block; height:auto; width:auto; position:static; margin:auto;}
  
    * {
      box-sizing: border-box; 
      border-radius: 4px;
    }
    html, body {
        margin: 0;
        padding: 0;
    }
    
    html {
      font-family: Open Sans, sans-serif; 
      background-color: #2d2d2d; 
      color: white;
    }
    
    body {
     display: flex;
     justify-content: center;
     align-items: center; 
    }
    
    @media screen and (min-width: 901px) {
      body {
      height: 100vh;
      max-height: 100vh;
    }
  }

    .slideshow-container {
      max-width: 100%;
      width: 100%;
      position: relative;
      margin: auto;
      text-align: center;
    }

    .mySlides, .mySlidesAltV2, .mySlidesAltV3, .mySlidesAltV4 {
      display: none;
    }
    .mySlides active, .mySlidesAltV2 active, .mySlidesAltV3 active, .mySlidesAltV4 active  {
      display: block;
    }
    
    .mySlides img, .mySlidesAltV2 img, .mySlidesAltV3 img, .mySlidesAltV4 img  {
      max-width: 100%;
    }
    
    img {
     border-radius: 10px;
     border: 1px solid transparent;
     vertical-align: middle;
    
    }
    
    .page-container {
        max-width:90%;
        display: flex;
        justify-content: center;
        align-items: center; 
        flex-direction: column;
    }
    
    .flex-container {
        display: flex;
        flex-direction: row;
        width: 100%; 
        justify-content: center; 
        align-items: center; 
        margin: 0 auto 0 auto;
        gap: 0 4rem;
    }
    
    .flex-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
       }
    
    .flex-item-50 {
        width: 50%!important;
    }
    
    .flex-item h1 {
       padding: 0;
       margin: 0;
    }

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

    .text, .textAltV3  {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      top: 8px;
      /* If you want the caption on the bottom of the slide
      bottom: 8px; 
      */
      width: fit-content;
      text-align: center;
      background-color: black;
      box-shadow: white 0 0 3px 1px;
    }

    .numbertext, .numbertextAltV3 {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 1%;
      left: 1%;
      /* If you want the slide progressions count on the bottom-right of the slide
      bottom: 1%;
      right: 1%;
      */
      background-color: #336699;
      border: 1px solid transparent;
    }
    
    .textAltV2, .textAltV4  {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px; 
      /* If you want the caption on the top of the slide
        top: 8px;
      */
      width: fit-content;
      text-align: center;
      background-color: black;
      box-shadow: white 0 0 3px 1px;
    }

    .numbertextAltV2, .numbertextAltV4 {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      bottom: 1%;
      right: 1%;
      /* If you want the slide progressions count on the top left of the slide
      top: 1%;
      left: 1%;
      */
      background-color: #336699;
      border: 1px solid transparent;
    }

    .active {
      background-color: #717171;
    }
    
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    
    @media only screen and (max-width: 300px) {
      .text, .textAltV2, .textAltV3,  .textAltV4  {font-size: 11px}
    }
    
    .active {
      opacity: 1;
      box-shadow: #B9DCD2 0 0 4px 4px; 
    }
      
    @media screen and (max-width: 900px) {
  
      .page-container {
        max-width:100%;
        width: 100%;
        margin-top: 1.5rem;
      }
  
    .flex-container {
        flex-direction: column;
        width: 100%!important;
        gap: 1.5rem 0;
    }
    .flex-item-50 {
        width: 95%!important;
        margin: 0 auto
    }
    
  }