.hero-with-slider/*
This is your custom Style Sheet. It's the last css resource loaded so you can
easily overwrite css selectors from other style sheets.
*/
img {
	width:  100%;
	height: auto;
}
.custom_video_header {
	margin-top: -20px;
}
@media (min-width: 992px) {
	.custom_video_header {
		margin-top: -42px;
	}
}
.custom-header .mylogo img, .side-header a img {
	filter:  brightness(0) invert(1);
}



.header>.header-content .header-logo {
	filter: brightness(0) invert(1);
}

.home_video {
	margin-top: 0;
}

@media (min-width: 768px) {
	.home_video {
		margin-top: 15px;
	}
}
.flickity-button { display: none;}
.hero-with-slider {padding-top: 0 !important;}
.hero-slider .carousel-cell:before {
    background: rgba(0,0,0,.1) !important;
}

.details-date,
.details-date-time,
.details-date-open,
.details-occurence {
  display: inline;
  margin-right: 8px; /* spacing between items */
  white-space: nowrap;
}

.h5-md {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}