@charset "utf-8";
/* CSS Document */


* {
box-sizing: border-box;
}
body {
padding: 5px;
}

.container-fluid {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.leftcolumn {
width: 20%;
padding-right: 20px;
}

.centercolumn {
width: 60%;
padding: 0 20px;
}
.rightcolumn {
width: 20%;
padding-left: 20px;
}
/* Responsive Styles */
@media screen and (max-width: 800px) {
.container-fluid {
flex-direction: column;
            }
.leftcolumn, .centercolumn, .rightcolumn {
width: 100%;
}
/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: transparent;
padding: 20px;
margin-top: 20px;
}
}

/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {   
width: 100%;
padding: 0;
}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}

.card {
background-color: transparent;
padding: 20px;
margin-top: 20px;
}

.card1 {background-color: transparent;
padding: 20px;
margin-top: 20px;
}
.cardH {background-color: #012d43;
padding: 20px;
margin-top: 20px;
border: 2px solid #ae914b; /* 2px solid black border */
border-radius: 5px; /* Optional: adds rounded corners to the border */
}
.cardR {
background-color: rgba(174, 145, 75, 0.1); /* Background color with 80% opacity */
padding: 20px;
margin-top: 20px;
border: 1px solid #ae914b; /* 2px solid black border */
border-radius: 5px; /* Optional: adds rounded corners to the border */
}
.cardW {background-color: #FFFFFF;
padding: 20px;
margin-top: 20px;
border: 2px solid #ae914b; /* 2px solid black border */
border-radius: 5px; /* Optional: adds rounded corners to the border */
}

.section {
border-bottom: 2px solid #ae914b;
margin-top: 1em;
}

img {
max-width: 100%;
height: auto;
}
/* adjust image size for screens 600px or less */
@media screen and (max-width: 600px) {
img {
max-width: 50%;
}
}

.sub-menu {
margin-left: 5px;
font-size: 0.812em; /* set the desired font size in pixels */
}

/* Buttons */
.button {
display: inline-block;
border-radius: 4px;
background-color: #012d43;
 border: 1px solid #ae914a; /* add border to the button */
 color: #FFFFFF;
text-decoration: underline;
text-decoration-color: #ae914a;
 text-align: center;
	font-family: "Libre Baskerville", sans-serif;
 font-size: 0.875em;
 padding: 16px;
 width: auto; /* size button to fit text */
 transition: all 0.5s;
 cursor: pointer;
 margin: 5px;
}

button span {
 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.5s;
}

button span:after {
 content: '»';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -15px;
 transition: 0.5s;
}

button:hover span {
 padding-right: 15px;
}

button:hover span:after {
 opacity: 1;
 right: 0;
}
</style>
<style type="text/css">img {
  max-width: 100%;
  height: auto;
}

/* adjust image size for screens 600px or less */
@media screen and (max-width: 600px) {
  img {
    max-width: 50%;
  }
}
    
/* Underline for Tables */

    
    

 /* Original list style */
.original-list li:nth-child(odd) {
color: #ae914a;
text-decoration: underline;
text-decoration-color: #012d43;
padding-left: 20px; /* Adjust value as needed for indentation */
}
.original-list li:nth-child(even) {
color: #012d43;
text-decoration: underline;
text-decoration-color: #012d43;
padding-left: 20px; /* Adjust value as needed for indentation */
}
/* Custom bullet style */
.custom-bullet-list {
list-style-type: none; /* Remove default bullets */
padding: 0; /* Remove default padding */
}
.custom-bullet-list li {
color: #012d43; /* Set default text color */
position: relative; /* Positioning for the bullet */
padding-left: 20px; /* Space for the custom bullet */
margin-bottom: 5px; /* Adjust the value to increase/decrease space */
}
.custom-bullet-list li:nth-child(odd)::before {
content: ''; /* Required for the pseudo-element */
position: absolute; /* Position it absolutely */
left: 0; /* Align bullets to the left */
top:30%; /* Center bullets vertically */
transform: translateY(-50%); /* Offset for proper alignment */
height: 8px; /* Height of the bullet */
width: 8px; /* Width of the bullet */
background-color: #ae914a; /* Bullet color for odd items */
border-radius: 50%; /* Make it a circle */
}
.custom-bullet-list li:nth-child(even)::before {
content: ''; /* Required for the pseudo-element */
position: absolute; /* Position it absolutely */
left: 0; /* Align bullets to the left */
top: 30%; /* Center bullets vertically */
transform: translateY(-50%); /* Offset for proper alignment */
height: 8px; /* Height of the bullet */
width: 8px; /* Width of the bullet */
background-color: #012d43; /* Bullet color for even items */
border-radius: 50%; /* Make it a circle */
}
.custom-bullet-list a {
text-decoration: none; /* Remove default underline */
border-bottom: 2px solid #ae914b; /* Add a custom underline */
padding-bottom: 2px; /* Optional: Adds space between text and underline */
}

.custom-bullet-list a:hover {
border-bottom: 2px solid #012d43; /* Optional: Different underline on hover */
}

/* Iframe for maps */

.iframe-container {
display: flex;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
justify-content: space-between; /* Distribute space evenly */
align-items: flex-start; /* Align items to the top */
margin: 20px; /* Optional margin for spacing */
}

.iframe-wrapper {
flex: 1 1 300px; /* Allow the item to grow and shrink, with a base size of 300px */
margin: 10px; /* Margin between items */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for better visual separation */
border-radius: 8px; /* Optional rounded corners */
overflow: hidden; /* Ensures rounded corners work */
}

.iframe-wrapper iframe {
width: 100%; /* Make iframe take full width of its container */
height: 400px; /* Fixed height for the iframes; adjust as necessary */
border: none; /* Remove default border */
}

.iframe-wrapper caption {
display: block; /* Make caption a block element */
text-align: center; /* Center text */
margin: 8px 0; /* Margin for spacing */
font-size: 14px; /* Font size for caption */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.iframe-wrapper {
flex: 1 1 100%; /* Full width on smaller screens */
}
.iframe-wrapper iframe {
height: 300px; /* Adjust height for smaller screens */
}
}

/* Custom Navigation */
.custom-navigation {
    list-style-type: none; /* Remove default bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.custom-navigation li {
    margin-bottom: 10px; /* Space between items (for desktop view) */
}

.custom-navigation li a {
    text-decoration: none; /* Remove default underline */
    color: #FFFFFF; /* Text color */
    background-color: #012d43; /* Background color */
    position: relative; /* To position the pseudo-element */
    padding: 10px 15px; /* Add padding for a better touch target */
    display: block; /* Make the link a block element for full clickable area */
    border: 2px solid #ae914b; /* Border color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}

.custom-navigation li a:hover {
    background-color: #ae914b; /* Change background color on hover */
    color: #FFFFFF; /* Maintain text color on hover */
}

/* Media query for mobile view */
@media (max-width: 768px) {
    .custom-navigation {
        display: block; /* Use block layout for vertical stacking */
        padding: 10px; /* Add some padding for aesthetics */
    }

    .custom-navigation li {
        margin: 5px 0; /* Space between items vertically */
    }

    .custom-navigation li a {
        text-align: center; /* Center the text */
        display: block; /* Ensure the link is a block element */
        border: 2px solid #ae914b; /* Border color */
    }

    .custom-navigation li a:hover {
        background-color: #ae914b; /* Change background color on hover */
        color: #FFFFFF; /* Maintain text color on hover */
    }
}

/* .Link Container Style Sheet (More Pages Link / Images) */
* {
    box-sizing: border-box;
}

.linkContainer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0; /* Adjust margins if needed */
}

.linkContainer a {
    flex: 0 1 calc(25% - 0px); /* Change from 1 to 0 to allow flexibility on larger screens */
    margin: 20px; /* Margin around each link */
    display: flex; /* Allow content inside link to center */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

.imageWrapper {
flex: 1 1 calc(50% - 10px); /* 2 columns on mobile devices */
box-sizing: border-box; /* Include padding and borders in the element's total width */
margin-bottom: 20px; /* Space between rows */
text-align: center; /* Center align the captions */
}
img {
max-width: 700 px; /* Set a max width for images to fill the container */
height: auto; /* Maintain aspect ratio */
}
.caption {
font-size: 0.8125em; /* Adjust caption font size */
color: #ae914b; /* Caption text color */
margin-top: 5px; /* Space between image and caption */
max-width: 90%; /* Ensure captions do not exceed the width of the image */
overflow-wrap: break-word; /* Break long words onto the next line if necessary */
}
@media (min-width: 600px) {
.imageWrapper {
flex: 1 1 calc(33.33% - 10px); /* 3 columns on larger screens */
}
}

/* Media query for mobile devices */
@media (max-width: 768px) {
.linkContainer a {
flex: 1 1 100%;
max-width: none;
}
}
/* Help Button Style Sheet */
.resizable-image {
max-width: 80%;
height: auto;
display: block;
}
.image-container {
padding-right: 400px; /* Adjust the amount of padding as per your preference */
}
 
@media only screen and (max-width: 600px) {
.resizable-image {
max-width: 50%;
}
}
@media only screen and (max-width: 400px) {
.resizable-image {
max-width: 75%;
}
}
/* Banner Container Style Sheet */
.banner-container {
    position: relative;
    width: 100%;
    height: 60vh; /* Adjust this value based on how much of the screen you want to fill */
    overflow: hidden;
}

.banner-images {
    display: flex;
    transition: transform 0.10s ease-in-out;
    height: 100%;
}

.banner-image {
    min-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .banner-container {
        height: 40vh; /* Responsive height adjustment for mobile */
    }
}