.event-flex-wrapper .col-1 .event-month {
	text-transform: uppercase; }
    
.event-button-wrapper > a:hover, .post-button-wrapper > a.custom-button:hover {
	background-color: var(--green-secondary);
	color: #FFF; }

.post-button-wrapper > a.custom-button {
	border-radius: 0 0; }

.carousel-container {
  	position: relative;
  	margin: 0 auto; }

.carousel {
  	display: flex;
  	transition: transform 0.5s ease-in-out;
  	gap: 1em; }

.carousel-item {
	transition: all 400ms ease-in-out; }

.carousel-item {
	display: flex;
	flex-direction: column;
	transition: all 0.5s ease-in-out; 
	border-radius: 5px 5px; }

.carousel-navigation {
	margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between; }

.carousel-prev, .carousel-next, .carousel-dots .dot {
	outline: none; }

.carousel-prev:focus-within, .carousel-next:focus-within, .carousel-dots .dot:focus-within {
    outline: 2px solid #000;  }

.carousel-prev,
.carousel-next {
    color: #FFF;
    background: none;
    border: 2px solid #FFF;
    font-size: 2rem;
    cursor: pointer; }

.carousel-prev {
    /*left*/right: /*10px*/ 5px; }

/*.carousel-next {
    right: 10px;  }*/

.carousel-dots {
    display: flex;
    justify-content: flex-start; }

.dot {
	width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--green-secondary);
	margin: 0 5px;
	cursor: pointer; }

.dot.active, .dot:hover {
   background-color: var(--white); }

.carousel-prev:hover, .carousel-next:hover {
	color: var(--beige);
    border-color: var(--beige); }

.carousel-item h3 {
    margin-top: 1.5em;
    margin-left: 1.5em;
    display: inline-block;
    padding: 0.5em 1em;  
    color: #FFF;
    border-radius: 5px 5px;
    text-transform: uppercase;
    align-self: flex-start; }

.carousel-item h3.event {
 	background: var(--green-secondary); }
 
.carousel-item h3.news {
 	background: var(--sand); }
    
.event-flex-wrapper {
	display: flex;
    flex-grow: 1; }

.carousel-news-content, .event-flex-wrapper {
	padding: 1.5em 1.5em; }
    
.event-flex-wrapper .col-1 {
    min-width: 8%;
    margin-right: 1.5em; }
    
.event-flex-wrapper .col-1 span {
    display: block;
    text-align: center; }
    
.event-flex-wrapper .col-1 span.event-num {
    font-size: 2rem;
    line-height: 2rem; }
    
.event-flex-wrapper .col-2 {
    width: 80%; }
    
.event-flex-wrapper .col-2 p.date-and-time-wrapper {
    padding-bottom: 0; }
    
.event-flex-wrapper .col-2 span.event-date {
	margin-left: 5px; }
    
.col-2 p.event-location strong {
	margin-right: 5px; }    
    
.event-flex-wrapper .col-2 .event-excerpt {
    padding-top: 1em; }
    
.custom-button {
  display: inline-block;
  text-decoration: none;
  margin-top: 10px; }
  
.event-button-wrapper {
    display: flex;
    gap: 0.35em;
    justify-content: space-between }
    
.event-button-wrapper > a, .post-button-wrapper > a {
    background-color: var(--beige);
    text-align: center;
    display: inline-block; 
    text-transform: uppercase; }
    
.event-button-wrapper > a, .post-button-wrapper > a, .event-button-wrapper > a:hover, .post-button-wrapper > a:hover {
	padding: 0.5em 0 !important; }
    
.event-button-wrapper > a {
	width: 50%; }
    
.event-button-wrapper > a:only-child {
	width: 100%; }

.post-button-wrapper {
    margin-top: auto; }
    
.post-button-wrapper > a {
    width: 100%; 
    text-transform: uppercase; }
    
@media screen and (min-width: 981px) {
	 .carousel-item{
          flex: 0 0 33.33%; /* Initially show 3 items */ }
	
	.carousel-prev, .carousel-next {
		border-radius: 50%;	}
   /* .carousel-item.active {
	flex: 0 0 33.33%; }*/ 
}        
@media screen and (max-width: 980px) and (min-width: 768px) {
    .carousel-item, .carousel-item {
        flex: 0 0 50%; }
	/*.carousel-item, .carousel-item.active {
        flex: 0 0 50%; }*/	
	
	.carousel-container {
		overflow-x: hidden; }
}
@media screen and (min-width: 768px) {
	.carousel-item h2 {
        font-size: 2rem;
        line-height: 2.5rem; }
}
@media screen and (max-width: 767px) {
	.carousel-container {
		overflow: hidden; }
	
  /* .carousel-item.active {
        flex: 0 0 100%; }*/
 	.carousel-item {
        flex: 0 0 100%;
	width: 100%; }	
}