:root {
    --gray-8: #888888;
    --gray-2: #222222;
    --cyan-9: #00cccc;
    --size-2: 10px;
    --size-4: 20px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fff;
    position: relative;
    padding-bottom: 58px;
    min-height: 100vh;
}
/* use .header */
.header {
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 0px;
}
header h1 {
    font-size: 48px;
    margin-bottom: 30px;
}
header p {
    font-size: 22px;
}
main {
    width: 90vw;
    margin: 0 auto;
    padding: 30px 20px;
    /* min-height: calc(100vh - 211px - 58px); */
}
article {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}
article:last-child {
    margin-bottom: 0;
}
article h3 {
    margin: 10px 0 25px 0;
}
article p {
    margin-top: 16px;
    line-height: 24px;
}
/* use .footer */
.footer {
    text-align: center;
    background-color: #333;
    color: #ffffff;
    position: absolute;
    bottom: 0;
    width: 100%;
    /* position: fixed;
    z-index: 1; */
}

.navbar {
    height: 30px; /* set a smaller height */
    padding: 8px 16px; /* reduce the top/bottom padding */
    margin: 0 auto; /* center the navbar horizontally */
}


@media(max-width:768px) {
    header { padding: 20px 10px; height: 10px}
    header h1 { font-size: 10px; margin-bottom: 0px; }
    header p { font-size: 18px; }
    main { width: 100vw; padding: 20px; }
    article { margin-bottom: 16px; font-size: 14px; }
    article h3 { margin: 10px 0 20px 0; }
    article p { margin-top: 16px; line-height: 20px; }
}
ul {
    padding: 0;
    margin: 0;
}
li {
    display: inline-block;
    width: auto;
    list-style: outside none none;
}

.container h3:not(:last-child)::before{
    content:'|';
}
.container h3 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 20px;
}

.help-icon {
    position: relative;
    top: -25px;
    left: 10px;
    font-size: 18px;
    color: #999;
    cursor: pointer;
}


/* modal */
.modal {
/* padding: 1em;*/
    width: 90%;
    max-width: 1200px;
/* border: 0;
 box-shadow: 0 0 1em rgb(0 0 0 / .3);*/

& > * {
      margin: 0 0 0.5rem 0;
  }
}

/*.modal::backdrop {
    background: rgb(0 0 0 / 0.4);
}*/
.modal:before {
    content: "";
    background: rgb(0 0 0 / 0.4);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.buttonx {
    border: 0;
    cursor: pointer;
    background: var(--gray-8);
    color: var(--gray-2);
    font-weight: 700;
    padding: var(--size-2) var(--size-4);
}
.share-button:hover,
.share-button:focus {
    background: var(--cyan-9);
}

.header-custom-color {
    color: lightgrey;
}

#slideshow {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
/*    height: 100vh;  */         /* Take at least the full height of the viewport */
}

img.responsive {
    max-width: 250%; /* Make image responsive */
    max-height: 250px; /* Maximum height */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    margin: auto; /* Margin auto for centering inside the flex container */
}

.share-button {
     background-color: #EFEFEF; /* RGB 239, 239, 239 */
 }

/* style.css */
.filter-options {
    display: none;
}

#events-section.expanded .filter-options {
    display: block;
}

.filter-toggle {
    cursor: pointer;
}

.toggle-icon {
    font-weight: bold;
}

.toggle-icon {
    transition: transform 0.3s;
}

#discover-section.expanded .toggle-icon {
    transform: rotate(180deg);
}

#eventTableModal {
    display: table;
}

/*
.map-container: This rule targets the element with the class map-container. This represents the main container that holds the iframe.
.map-container iframe: This rule specifically targets any iframe elements that are children of the .map-container element.
The first rule defines the container and sets its width, initial height, aspect ratio using padding, and relative positioning.
The second rule styles the iframe child element within the container, positioning it absolutely and setting its size to fill the entire container space.
This combination of rules enables you to create a responsive iframe that automatically adapts its height based on the available width of the container,
maintaining the desired aspect ratio. This approach is commonly used for displaying videos or maps within a responsive layout.
*/
 .map-container {
     width: 100%;
     height: 0;
     padding-bottom: 75%; /* Adjust the aspect ratio as needed */
     position: relative;
 }
.map-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

/*

*/
<!-- Bootstrap CSS for detail modal dialog -->
     /* .modal-dialog and .modal-body controls the dialog */
 .modal-dialog {
     max-width: 1200px; /* Set the desired max-width */
     width: 95%; /* Adjust the width for smaller screens */
     margin: 0.50rem auto;
 }
.modal-body {
    margin: 2px;
    padding: 2px;
}
.modal-header {
    background-color: #007bff;
    color: #fff;
}
.modal-header h5 {
    font-weight: bold;
}
.modal-footer {
    background-color: #f8f9fa;
    border-top: none;
}

<!-- style for museum list -->
     /* Modal */
     /* Modal Content/Box */
 .modal-content {
     background-color: #fefefe;
     margin: 5% auto; /* 10% from the top and centered */
     padding: 5px;
     border: 1px solid #888;
     width: 90%; /* Could be more or less, depending on screen size */
 }

/* Close Button */
.close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    color: white;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Museums List */
.museums-list {
    height: 100px; /* Set a fixed height for the container */
    overflow: auto; /* Enable scrolling */
}

/* controls the size of the table text font in the modal */
.table-text-size {
    font-size: 11px;
}
.custom-font {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    /* Add any other font-related styles as needed */
}

<!-- Desktop/tablet CSS -->
 table tbody tr td:nth-child(1):hover {
     background-color: #e6f2ff;
 }

<!-- Mobile CSS -->
@media only screen and (max-width: 768px) {
    table tbody tr td:nth-child(1):active {
        background-color: #e6f2ff;
    }
}

td input[type="hidden"] {
    display: none;
}

.font-custom {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
}
.red-row {
      background-color: red !important;
      color: white;
}
.useraddedactivity-row {
    background-color: yellow;
}
.ads-row {
    background-color: greenyellow;
}

.filter-options {
    display: none;
}

#share-section.expanded .filter-options {
    display: block;
}