@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 */
}
.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;
}

.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 */
<style type="text/css">a {
  text-decoration: underline;
  text-decoration-color: #ae914a;
		text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-color: #012d43;
		text-decoration-thickness: 2px;
		
}

 /* 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: #012d43; /* Default text 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 */
}

/* Tab styles */
.custom-navigation li a::after {
    content: ''; /* Empty content for the pseudo-element */
    display: block; /* Make it a block element */
    height: 2px; /* Thickness of the underline */
    width: 100%; /* Full width */
    background-color: transparent; /* Initial background color */
    position: absolute; /* Position it relative to the parent */
    bottom: -5px; /* Position the underline below the text */
    left: 0; /* Align to the left */
    transition: background-color 0.3s; /* Smooth color transition */
}

.custom-navigation li a:hover::after {
    background-color: #ae914b; /* Underline color on hover */
}

.custom-navigation li a.org-link {
    border-bottom: 2px solid #012d43; /* Fixed underline color */
}

.custom-navigation li a.org-link::after {
    display: none; /* Hide the pseudo-element's underline */
}

.custom-navigation li a.org-link:hover {
    color: #ae914b; /* Change text color on hover */
    border-bottom-color: #ae914b; /* Change underline 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 */
        /* Other styles remain as is */
    }

    .custom-navigation li a {
        border: 1px solid transparent; /* Keep border for hover effect */
        text-align: center; /* Center the text */
        display: block; /* Ensure the link is a block element */
    }

    .custom-navigation li a:hover {
        border-color: #ae914b; /* Change border color on hover */
        background-color: rgba(174, 145, 75, 0.1); /* Optional: subtle background on hover */
    }

    /* Specific style for the Organization link in mobile view */
    .custom-navigation li a.org-link:hover {
        background-color: rgba(174, 145, 75, 0.1); /* Optional: subtle background on hover */
    }
}