/* Makes header smaller than default. */
@media all and (min-width: 992px) {
	.theme-header .zpcontainer {
		padding:10px 15px !important;
	}
	.theme-header-topbar {
		padding:8px 0px !important;
	}
}
/* Home Page Code ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.cycling-text {
  animation-name: fadeInOut;
  animation-duration: 3s; /* Ensure this matches the time specified in code snippet */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
/* Blog Adjustments ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media all {
    .theme-blog-comment {
    display: none;   
    }
    .theme-blog-post-details-area {
    display: none;
    }
    .theme-blog-author-detail {
    display: none;
    }
    .theme-blog-heading-author {
    display: none;
    }
    .theme-blog-author-name {
    display: none;
    }
    .theme-blog-author {
    display: none;
    }
}
/* Custom Field + Button Config ------------------------------------------------------------------------------------------------------------------------------------------------------ */
.field-and-button-container {
    display: flex;
    position: relative;
	border: none;
	padding: none;
	margin: 0px 5% 0px;
}
.input-field {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #075C7E;
    padding: 0px;
}
.input-button {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    padding: 0px;
    cursor: pointer;
    color: #ffffff;
    background-color: #075C7E;
	transition: background-color 0.3s ease; /* Smooth transition over 0.3 seconds */
}
.input-button:hover {
	/* On hover: reduce brightness to 60% (or any value below 100%) */
    background-color: #004365;
}
input[type=number] {
    -moz-appearance:textfield;
}
/* Donation Pop-up config ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  overflow-y: scroll;
}
.modal-content {
  	background-color: #fefefe;
  	margin: 10% 20% auto;
  	padding: 30px;
  	border: 1px solid #888;
    min-width: 300px;
    z-index: 10;
}
.donation-form-label {
    float: left;
    color: #075C7E;
    justify-self: left;
}
.donation-form-fieldset {
	display: grid;
	justify-items: left;
	grid-template-columns: 1fr 29fr;
}
.donation-form-radio-label {
	text-align: left;
}
@media (max-width: 430px) {
	.modal-content {
  		margin: 7.5% 5% auto;
    	min-width: 300px;
    }
}
.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* Dynamic Content -----------------------------------------------------------------------------------------------------------------*/
.donation-checkbox {
    accent-color: #075C7E;
}
.checkbox-container{
	color:#333333;
}
.dyn-box-item {
    width: 32%;
    height: 500px;
    border: 2px;
}
.dyn-box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	gap: 20px;
    width: 75%;
}
.staff-box-container {
    display: grid;
    grid-auto-rows: 500px;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
    width: 75%;
}
.staff-box-item {
    border: 2px;
}
.staff-heading {
    display: inline-flex;
    color: #075C7E;
}
.staff-body {
    display: inline-flex;
	color:#075C7E;
    width:60%;
}
.payment-submit-button {
    background-color: #075C7E;
}
.staff-name {
    line-height: 1.5;
}
.staff-description {
    width: 90%;
}