/* 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;}
  }
  
    
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* 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;
       /* overflow: hidden; Hide scrollbars */
    }

    /* Ensure that html and body tags take up the full height and width of the viewport without causing overflow */
    html, body {
      width: 100vw; /* 100% of the viewport width */
      height: 100vh; /* 100% of the viewport height */
      margin: 0;
      padding: 0;
      overflow: hidden; /* Prevents scrollbars, be cautious as it might hide content */
    }

    html {
      font-family: Open Sans, sans-serif; 
      background-color: #2d2d2d; 
      color: white;
    }
    
    body {
     display: flex;
     justify-content: center;
     align-items: center; 
    }

    .mySlides {
      display: none;
      height: 95%!important;
      max-height: 95%!important;
      width: 95%!important;
      max-width: 95%!important;

    }

    .mySlides active {
      display: block;
    }
    
    .mySlides img {
    }
    
    img {
     border-radius: 10px;
     border: 1px solid transparent;
     vertical-align: middle;
     border-radius: 4px;
    
    }
    
    .page-container {
        max-width:100%;
        display: flex;
        justify-content: center;
        align-items: center; 
        flex-direction: column;
    }
    
    .flex-item h1 {
      padding: 0;
      margin: 0;
   }

   .flex-container {
    display: flex;
    flex-wrap: nowrap; /* Prevents items from wrapping */
    width: 100vw; /* Viewport width to ensure it fits the screen width */
    justify-content: space-between; /* Distributes space between items */
    align-items: center; /* Align items vertically */
    margin: 0 auto; /* Center the container */
    padding: 0; /* Adjust padding as needed */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

   .flex-item-50 {
    width: 50%; /* Occupies half of the container's width */
    height: 60vh; /* 60% of the viewport height */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    /* Add any padding or border as needed, but ensure it fits within the 50% width */
    padding: 4rem;
}

.flex-item-50l {
  width: 50%; /* Occupies half of the container's width */
  height: 60vh; /* 60% of the viewport height */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  /* Add any padding or border as needed, but ensure it fits within the 50% width */
  padding: 4rem 2rem 4rem 4rem;
}

.flex-item-50r {
  width: 50%; /* Occupies half of the container's width */
  height: 60vh; /* 60% of the viewport height */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  /* Add any padding or border as needed, but ensure it fits within the 50% width */
  padding: 4.3rem 4rem 4rem 2rem;
}

.slideshow-container {
  width: 100%; /* Full width of its parent */
  height: 60vh; /* Adjusted to a fixed height or percentage based on layout needs */
  max-width: 100%; /* Full width of its parent */
  max-height: 60vh; /* Adjusted to a fixed height or percentage based on layout needs */
  display: flex; /* Flexbox to help center content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  overflow: hidden; /* Prevent any overflow from causing scrollbars */
  position: relative; /* For positioning captions or controls */
  border: 3px solid #000;
  background-color: #000;
  border-radius: 4px;
}

.slideshow-container img {
  width: 100%; /* Max width is 100% of its parent */
  height: 100%; /* Max height is 100% of its parent */
  max-width: 100%; /* Max width is 100% of its parent */
  max-height: 100%; /* Max height is 100% of its parent */
  object-fit: contain; /* Maintains aspect ratio and fits content within bounds */
}

.slideshow-container svg {
  width: 100%; /* Max width is 100% of its parent */
  height: 100%; /* Max height is 100% of its parent */
  max-width: 100%; /* Max width is 100% of its parent */
  max-height: 100%; /* Max height is 100% of its parent */
  object-fit: contain; /* Maintains aspect ratio and fits content within bounds */
}
/*
{
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
*/

/* Example adjustment for numbertext if needed */
.numbertext {
  position: fixed;
  top: 1.25%;
  left: 1%;
  color: #f2f2f2;
  padding: 8px 12px;
  background-color: #336699;
}

/* Adjusted position for the caption text */
.text {
  position: fixed;
  top: 1.25%; /* Align with the top of numbertext */
  left: calc(1% + 5rem); /* Adjust this based on the actual width of numbertext plus 1.5rem */
  width: auto; /* Adjust width as needed */
  padding: 8px; /* Optional padding */
  color: white; /* Text color */
  background-color: rgba(0,0,0,0.5); /* Optional background for readability */
}
   
    /* The dots/bullets/indicators */
    .dot {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active {
      background-color: #717171;
    }
    
    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    .row {
      display: flex;
      flex-direction: row; /* Children in a row */
      width: 100%; /* Adjust if necessary */
      justify-content: center; /* Align children to the start of the container */
      align-items: center; /* Vertically align children in the middle */
    }
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* Six columns side by side */
    .column {
      width: 100%;
      padding: .25rem;
    }

    
    .icon-container {
        text-align: center;
        width: 100%;
        margin: 1.5rem auto;
    }
    
    .icon-container .icon {
        width: 6rem;
        height: 6rem;
        padding: .5rem;
        background-color: #336699;
        box-shadow: transparent 0 0 2px 2px;
        margin: 0 .5rem; 
        }
    
    /*
    .icon-container .icon:first-child {
       margin: 0 .5rem 0 0; 
    }
    */
    
    .icon-container .icon:hover {
        box-shadow: #B9DCD2 0 0 2px 2px;
        background-color: black;
     }
    
  
    .active,
    .demo:hover {
      opacity: 1;
      box-shadow: #B9DCD2 0 0 4px 4px; 
    }
    
    
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Fixed position */
      top: 0;
      left: 0;
      z-index: 1; /* Sit on top */
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
    }
    
/* Modal Content (image) */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5%; /* 5% padding all around */
  width: 90%; /* Maximum width */
  height: 90%; /* Maximum height */
  max-width: 100%; /* Maximum width */
  max-height: 100%; /* Maximum height */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* Include padding in width and height calculations */
}
    
    /* Caption of Modal Image */
    #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 2rem 0 0 0;
      height: 50px;
    }
    
      /* The Close Button */
      .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: white;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        background: red;
        padding: 0 1rem;
      }
      
      .close:hover,
      .close:focus {
        color: red;
        background: orange;
        text-decoration: none;
        cursor: pointer;
      }
          
    ul {
        list-style-type: none;
        margin: 2rem 0 1.5rem 0;
        /*
        padding: 0 .5rem 0 2rem;
        margin-bottom: 1.5rem;
        */
    }
    
    ul li {
      margin-bottom: .5rem;
      color: #e8f48c;
    }
    
    p {
      text-align:justify;
    }
    
    .kiosktitle-container {
      width: 100%;
      border: 1px solid transparent;
      padding: 1rem .5rem 1rem .5rem;
      color: #3f3f3f;
      background-color: #fff;
      text-align: center;
      box-shadow: #B9DCD2 0 0 10px 1px;
    }

    .kiosktitle-container p {
      text-align: center;
      margin: .5rem auto 0 auto;
      width: 100%;
    }
    
    /* Images container has fixed size and images fit into it and maintain aspect ratio -*/
    
    .thumbnail-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap; /* Allow the container to wrap items */
      width: 100%;
    }
    
    .image-wrapper {
      width: calc(16.66% - 2rem);
      height: 20vh;
      margin: 10vh 1rem 1rem 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden; /* Hide any overflow */
      border: 3px solid #3f3f3f;
    }
    
    
   .image-container {
      display: flex; /* Utilize flexbox for centering */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      width: 100%!important; /* Take full width of the parent */
      height: 100%!important; /* Take full height of the parent */
      padding: 0 1rem;
      background-color: #000;
    
    }
    
    .image-wrapper:hover {
      box-shadow: #B9DCD2 0 0 10px 1px;
    }

    .thumb {
      opacity: 0.85;
      box-shadow: transparent 0 0 4px 4px;
      cursor: pointer;
      max-width: 90%!important; /* Max width to the container width */
      max-height: 90%!important; /* Max height to the container height */
      object-fit: contain; /* Maintain aspect ratio without cropping */
    }
    
    #thumbnails {
      height: 40vh; /* Height relative to viewport height */
    }
   
      
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .text {font-size: 11px}
    }
  
    @media screen and (max-width: 900px) {
  
body, html {
  width: 100%;
  height: auto;
  overflow: visible;
}

.slideshow-container {
  height: 25rem;
  padding: 3.5rem;
}

      .page-container {
        max-width:100%;
        width: 100%;
        margin-top: 1.5rem;
      }
  
    .flex-container {
        flex-direction: column;
        width: 100%!important;
        gap: 1.5rem 0;
    }
  
    #thumbnails {
       display: none!important;
    }

    .flex-item h1 {
      width: 100%;
    }
    
   .flex-item-50 {
        width: 95%!important;
        margin: 0 auto;
        padding: 0;
        height: 60%;
    }
    .icon-container {
      margin: 1rem 0 2rem 0;
    }
    .icon-container .icon {
        width: 3rem;
        height: 3rem;
        padding: .5rem;
        background-color: #336699;
        box-shadow: transparent 0 0 2px 2px;
        margin: 0 .5rem; 
        }
  .kiosktitle-container {
      width: 90%;
      text-align: center;
      margin:auto;
    }
      ul {
        margin-bottom: 1.5rem;
      }
    }