.events-coming-soon {
	aspect-ratio: 455 / 381;
	width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.home-page-slider {
    display: flex;
    align-items: stretch;
}
.home-page-slider .home-page-main-callout .fade-bg {
    height: fit-content;
}

@media (max-width: 1200px) {
    .home-page-slider .home-page-main-callout .fade-bg {
        margin-top: 20px;
    }
}

@media (max-width: 1025px) {
    .home-page-slider {
        display: block;
    }
}

/** ------------ ydop.css [rcdev-charly] add style for events plugin --------- **/
body.home .home-page-main-sidebar .flex-container {
	width: 100%;
}
body.home .home-page-main-sidebar .tribe-events-view.tribe-events-widget {
	margin: 0;
}
body.home .home-page-main-sidebar .tribe-compatibility-container .tribe-events-widget-events-list__view-more {
	text-align: center;
}
.tribe-events-widget .tribe-events-widget-events-list__event-date-tag-month,
.tribe-common .tribe-common-h2, 
.tribe-common .tribe-common-b2,
.tribe-common .tribe-common-h7, 
.tribe-common .tribe-common-h8 {
	font-family: 'Oswald', sans-serif !important;
}
.tribe-common .tribe-common-h7, 
.tribe-common .tribe-common-h8 {
	font-size: 18px !important;
    font-weight: normal !important;
}
.tribe-common .tribe-common-h7 .tribe-events-widget-events-list__event-title-link, 
.tribe-common .tribe-common-h8 .tribe-events-widget-events-list__event-title-link {
	border-bottom: none !important;
}
body.home .home-page-main-sidebar .well.flex-container {
	padding: 25px 40px 20px 20px;
    width: 100%;
}
body.home .home-page-main-sidebar .tribe-events-widget-events-list__event .tribe-button-wrapper {
	margin-top: 5px;
}
body.home .home-page-main-sidebar .tribe-events-widget-events-list__event .tribe-button-wrapper a.tribe-button {
	color: #f10023;
    text-decoration: underline;
}
body.tribe-events-page-template #wrap-calendar .community-event-content {
    margin-bottom: 20px;
    font-family: 'Oswald', sans-serif !important;
}
body.tribe-events-page-template #wrap-calendar .community-event-content h1 {
	margin-top: 0;
    margin-bottom: 10px;
}
body.tribe-events-page-template #wrap-calendar {
    width: 100%;
    float: none;
}
body.tribe-events-page-template #wrap-calendar .tribe-common-l-container.tribe-events-l-container {
    padding: 0;
}
body.tribe-events-page-template #wrap-calendar .tribe-common-l-container.tribe-events-l-container article.type-tribe_events {
    max-width: none;
    width: auto;
}
body.tribe-events-page-template #wrap-calendar .tribe-common-l-container header.tribe-events-header {
    padding: 20px 25px 25px 25px;
    margin-bottom: 20px;
}
body.tribe-events-page-template #wrap-calendar .tribe-common-l-container header.tribe-events-header .tribe-events-header__messages {
    margin: 0;
}
body.tribe-events-page-template .tribe-events-calendar-list .tribe-common-g-row article header {
    background: transparent;
}
body.tribe-events-page-template #wrap-mini-cal {
    display: none;
}
body.single.single-tribe_events article#wrap-calendar .post-entry #content {
    background: transparent;
}
body.single.single-tribe_events .tribe_events .tribe-events-single-event-description.tribe-events-content {
    background: transparent;
}

/** ------------ ydop.css homepage hero section --------- **/
.hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    margin-bottom: 30px;
    margin-top: 30px;
}

@media screen and (max-width: 980px) {
    .home .hero-section h1 {
        font-size: 30px;
    }
}

/* --- Section heights --- */
.hero-section--ratio {
    aspect-ratio: 16 / 9;
}
.hero-section--compact {
    min-height: 300px;
}
.hero-section--tall {
    min-height: 500px;
}

/* --- Background image --- */
.hero-section__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}
/* When a video is present it covers the box, so the image (kept in the
   markup as the mobile fallback) is hidden by default on larger screens. */
.hero-section--has-video .hero-section__image {
    display: none;
}

/* --- Background video --- */
.hero-section__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.hero-section__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* scale a 16:9 iframe so it always covers the box (no letterboxing).
       scale(1.4) overshoots the box so YouTube's control bar — which sits at
       the bottom edge of the video — is cropped out of view, including the
       play/pause UI that flashes while the player buffers on load. */
    width: 100vw;
    height: 56.25vw;          /* 16:9 based on width */
    min-width: 177.78vh;      /* 16:9 based on height */
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    user-select: none;
}
/* Transparent shield over the video: blocks hover/clicks from ever
   surfacing the YouTube controls or context menu. */
.hero-section__video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* --- Overlay --- */
.hero-section__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.hero-section--overlay-light .hero-section__overlay {
    background: rgba(0, 0, 0, 0.25);
}
.hero-section--overlay-medium .hero-section__overlay {
    background: rgba(0, 0, 0, 0.5);
}
.hero-section--overlay-dark .hero-section__overlay {
    background: rgba(0, 0, 0, 0.7);
}
.hero-section--overlay-none .hero-section__overlay {
    background: transparent;
}

/* --- Content wrapper / positioning --- */
.hero-section__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    padding: 40px;
    box-sizing: border-box;
}
.hero-section__content {
    max-width: 760px;
    color: #fff;
    background-color: rgba(0, 0, 0, .42);
    padding: 18px 10px;
    border: 1px solid rgba(255, 255, 255, .2);
}
.hero-section__content > *:last-child {
    margin-bottom: 0;
}
.hero-section__content h1,
.hero-section__content h2,
.hero-section__content h3 {
    color: #fff;
    margin-top: 0;
}
.hero-section__content a {
    color: #fff;
    text-decoration: underline;
}

/* Horizontal + vertical alignment of the content block */
.hero-section--pos-center .hero-section__inner {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-section--pos-top .hero-section__inner {
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}
.hero-section--pos-bottom .hero-section__inner {
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}
.hero-section--pos-left .hero-section__inner {
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}
.hero-section--pos-right .hero-section__inner {
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .hero-section__inner {
        padding: 0;
    }
    .hero-section--tall {
        min-height: 360px;
    }
    .hero-section__content {
        max-width: 100%;
    }
}

/* Up to 765px: when "Show Video On Mobile" is off, hide both the video and
   the image so only the content box shows. Above 765px the video plays. */
@media (max-width: 765px) {
    .hero-section--hide-video-mobile .hero-section__video,
    .hero-section--hide-video-mobile .hero-section__image {
        display: none;
    }
    /* No media behind the content, so collapse the box to its content height
       instead of holding the 16:9 / compact / tall reserved space. */
    .hero-section--hide-video-mobile {
        aspect-ratio: auto;
        min-height: 0;
    }
}