/* General Lightbox Styling */
.dwiSplash #splash-260409 {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Side B (Lightbox Content) */
.dwiSplash #splash-260409 .side-b {
    position: relative;
    /* Important for positioning the close button inside */
    background: #fff;
    padding: 0;
    /* Remove padding to align image properly */
    width: 100%;
    height: 100%;
    text-align: center;
    /*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); */
    overflow: hidden;
    /* Ensure close button aligns well */
}

.dwiSplash .side-b-inner {
    background: url('fh-lightbox.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.dwiSplash #splash-260409 .wrapper,
.dwiSplash #splash-260409 .content-block {
    width: 100%;
    height: 100%;
}

/* Hide Side A (Title Section) in Desktop */
.dwiSplash #splash-260409 .side-a {
    display: none;
}

.dwiSplash #splash-260409 .register {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}

.dwiSplash #splash-260409 .register:focus {
    outline: 1.4px dashed #fff;
    outline-offset: -1.4px;
}

/* MOBILE STYLING */
@media screen and (max-width: 725px) {
    div.header {
        margin-bottom: 108px;
    }

    #offCanvas {
        top: 191px;
    }

    #offCanvas.scrolled {
        top: 187px;
    }

    .dwiSplash {
        max-height: 108px;
    }

    .dwiSplash #splash-260409 {
        max-height: 108px;
        top: 0;
        width: 100%;
        height: initial;
    }

    /* Hide Lightbox (Side B) on Mobile */
    .dwiSplash #splash-260409 {
        background: none;
        /* Remove overlay */
        align-items: flex-start;
        /* Stick to top */
    }

    .dwiSplash #splash-260409 .side-b {
        display: none;
    }

    /* Show Side A (Title) on Mobile, Stick to Top */
    .dwiSplash #splash-260409 .side-a {
        display: flex;
        position: fixed;
        top: 88px;
        left: 0;
        padding: 0px;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        width: 100%;
        font-family: 'CircularXXWeb-Medium', 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    }

    .has-sticky-header .dwiSplash #splash-260409 .side-a {
        top: 84px;
    }

    .dwiSplash #splash-260409 .side-a .donation-banner {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px;
        width: 100%;
        background-color: #1b365d;
        color: #fff;
    }

    .dwiSplash #splash-260409 .side-a .banner-content p {
        margin: 0;
        font-size: 18px;
        line-height: 1.5;
        color: #fff;
    }

    .dwiSplash #splash-260409 .side-a .donate-button {
        background-color: transparent;
        font-size: 18px;
        line-height: 1.5;
        color: #fff;
        cursor: pointer;
        border-bottom: 1.4px solid #fff;
    }

    .dwiSplash #splash-260409 .side-a .donate-button:focus {
        outline: 1.4px dashed #fff;
    }

    .dwiSplash #splash-260409 .side-a .vertical-line {
        height: 80px;
        width: 1px;
        background-color: rgba(255, 255, 255, 1);
        margin-right: 15px;
    }

    .dwiSplash #splash-260409 .side-a .close-icon {
        position: absolute;
        top: 24px;
        right: 24px;
        font-size: 22px;
        line-height: 22px;
        font-weight: 100;
        cursor: pointer;
        color: #fff;
    }

    .dwiSplash #splash-260409 .side-a .close-icon:hover {
        text-decoration: none;
    }

    .dwiSplash #splash-260409 .side-a .close-icon:focus {
        outline: 1.4px dashed #fff;
        text-decoration: none;
    }
}

@media (min-width: 725px) {
    .dwiSplash #splash-260409 {
        position: fixed;
        top: unset;
        right: 23px;
        bottom: 87px;
        width: 45vw;
        height: calc(45vw * (533 / 800));
        max-width: calc((100vh - 64px - 87px) * (800 / 533));
        max-height: calc(100vh - 64px - 87px);
    }

    .dwiSplash #splash-260409 .close {
        display: block;
        position: absolute;
        top: calc(45vw * (533 / 800) * (32 / 533));
        right: calc(45vw * (32 / 800));
        width: calc(45vw * ((63 * .6) / 800));
        height: calc(45vw * (533 / 800) * ((55 * .6) / 533));
        text-indent: -9999px;
        background: url('fh-close.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .dwiSplash #splash-260409 .close:focus {
        outline: 1.4px dashed #fff;
        text-decoration: none;
    }
}

@media (min-width: 1270px) {
    .dwiSplash #splash-260409 {
        width: 800px;
        height: 533px;
    }

    .dwiSplash #splash-260409 .close {
        top: 32px;
        right: 32px;
        width: calc(63px / 2);
        height: calc(55px / 2);
    }
}