body {
    overflow: hidden;
}

.white {
    color: #fff;
}




.mobile {
    display: none;


}



#splash-250910,
#splash-250910 * {
    box-sizing: border-box;
}

#splash-250910 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #1b365d;
    z-index: 10000;
}

#splash-250910 .splash-250910__top {
    display: flex;
    gap: clamp(50px, 3vw, 40px);
    flex-direction: column;
}





#splash-250910 .splash-250910__skyline {
    display: none;
}




#splash-250910 .splash-250910__header {
    font-size: clamp(24px, 9vh, 155px);
}





#splash-250910 .splash-250910__header {

    line-height: 1;
    color: #ffb500;
    font-family: "TiemposHeadline-SemiBold", Arial, "Helvetica Neue", sans-serif;
}

#splash-250910 .yellow {
    color: #ffb500;

    font-family: 'CircularXXWeb-Bold', 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
}

#splash-250910 .splash-250910__side-a p {
    font-size: clamp(18px, 6.25vh, 67.49px);
    line-height: 1.15;
    color: #ffffff;
    font-family: 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    margin: 0;







}




#splash-250910 .splash-250910__donate {

    width: clamp(40px, min(42vw, 24vh), 520px);
    max-width: 90vw;
    height: auto;
    cursor: pointer;


}





#splash-250910 .splash-250910__side-a .p2 {
    font-size: clamp(16px, 5.4vh, 58px);


}

#splash-250910 .splash-250910__side-a .p3 {
    font-size: clamp(12px, 4.44vh, 48px);



}

#splash-250910 .splash-250910__side-a .p4 {
    margin: 0;
}

#splash-250910 .splash-250910__side-a {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 1vw, 40px);


}


#splash-250910 .splash-250910__side-c {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-content: center;
    justify-content: flex-start;


}



#splash-250910 .splash-250910__side-b {
    align-content: center;
}

#splash-250910 .splash-250910__bottom {
    display: flex;
    gap: 25px;
    flex-direction: row;
}

#splash-250910 #splash-250910__cancel {
    font-size: clamp(8px, 2vh, 27.88px);
    cursor: pointer;
    color: #ffffff !important;
    font-family: 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    font-weight: 300;



}

#splash-250910 #splash-250910__cancel span {
    font-family: 'CircularXXWeb-Bold', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    font-weight: 900;
}

#splash-250910 #splash-250910__close {
    cursor: pointer;
}


#splash-250910 .wrapper {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    padding: 5%;
    text-align: inherit;


}

#splash-250910 .wrapper .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}

#splash-250910 .wrapper .close:before,
#splash-250910 .wrapper .close:after {
    content: " ";
    position: absolute;
    top: 6px;
    left: 16px;
    width: 2px;
    height: 22px;
    background-color: #fff;
}

#splash-250910 .wrapper .close:before {
    transform: rotate(45deg);
}

#splash-250910 .wrapper .close:after {
    transform: rotate(-45deg);
}

#splash-250910 .content-block {
    position: relative;
    width: 100%;
    height: 100vh;
    font-size: 0;
    line-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#splash-250910 .content-block .side-a,
#splash-250910 .content-block .side-b {
    display: block;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    vertical-align: top;
    box-sizing: border-box;
}

#splash-250910 .content-block .side-a {
    background-color: transparent;
    background-image: url('https://s3-us-west-1.amazonaws.com/awa-fred-hutch/splash/2024.11/cefa51ef7e99.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

#splash-250910 .content-block .side-a>.title {
    position: absolute;
    bottom: 4.25vh;
    left: 2.2vw;
    width: auto;
    height: 5.5vh;
}

#splash-250910 .content-block .side-a>.title>img {
    display: block;
    width: auto;
    height: 100%;
}

#splash-250910 .content-block .side-b {}

#splash-250910 .content-block .side-b .alignment {
    position: absolute;
    top: 50%;
    width: 100%;
    height: auto;
    text-align: center;
    transform: translateY(-50%);
    padding: 0;
}

#splash-250910 .content-block .side-b h2 {
    display: inline-block;
    position: relative;
    width: 100%;
    height: auto;
    font-family: 'CircularXXWeb-Medium', 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    font-size: 4.8vh;
    line-height: 1.1em;
    margin: 0 0 24px 0;
}

#splash-250910 .content-block .side-b .box {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 60vh;
    height: auto;
    margin: 0 0 3vh 0;
    padding: 3vh 0;
    background-color: #1b365d;
}

#splash-250910 .content-block .side-b .headline {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 540px;
    min-width: calc(100% - 60px);
    margin: 0 0 12px 0;
    padding: 0 20px;
}

#splash-250910 .content-block .side-b .headline>h1 {
    display: inline-block;
    position: relative;
    width: auto;
    font-family: "TiemposHeadline-SemiBold", Arial, "Helvetica Neue", sans-serif;
    font-size: 7.5vh;
    font-weight: 100;
    line-height: 1.2em;
    color: #123660;
    margin: 0;
}

#splash-250910 .content-block .side-b .box p {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 50vh;
    height: auto;
    font-family: 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    font-size: 2.8vh;
    line-height: 1.2em;
    color: #fff;
    margin: 0 0 2.8vh 0;
    padding: 0 14px;
}

#splash-250910 .content-block .side-b .box p>strong {
    font-family: 'CircularXXWeb-Medium', 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    font-weight: bold;
}

#splash-250910 .content-block .side-b .box p>span.clear-lg {
    display: block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

#splash-250910 .content-block .side-b .box .timer {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0 0 3vh 0;
    padding: 8px 0;
    background-color: #1b365d;
}

#splash-250910 .content-block .side-b .box .timer>img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
}

#splash-250910 .content-block .side-b .box .cta {
    display: block;
    position: absolute;
    bottom: -3vh;
    left: 0;
    width: 100%;
    margin: 0;
}

#splash-250910 .content-block .side-b .box .cta .donate-now {
    display: inline-block;
    padding: 0;
    border-radius: 40px;
    background-color: #fff;
}

#splash-250910 .content-block .side-b .box .cta .donate-now>button {
    display: block;
    font-family: 'CircularXXWeb-Bold', 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    font-size: 2.4vh;
    font-stretch: normal;
    letter-spacing: 0.6px;
    line-height: 2.8vh;
    text-align: center;
    text-decoration: none;
    color: #097999;
    padding: 1.6vh 20px;
    border: 0;
    vertical-align: text-top;
    background: none;
    cursor: pointer;
}

#splash-250910 .content-block .side-b .cancel {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    margin: 2.6vh 0 0 0;
    padding: 0;
}

#splash-250910 .content-block .side-b .cancel a.link,
#splash-250910 .content-block .side-b .cancel a.link:hover {
    font-family: 'CircularXXWeb-Regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
    font-size: 1.8vh;
    line-height: 1.4em;
    text-decoration: none;
    padding: 4px 12px;
    color: #fff !important;
}

#splash-250910 .content-block .side-b .cancel a.link>span {
    font-family: 'CircularXXWeb-Bold', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
}

#splash-250910 .content-block .side-b .logo {
    display: inline-block;
    width: 100%;
    height: 6.4vh;
    margin: 0 auto 36px auto;
    padding: 0;
    background-image: url('https://s3-us-west-1.amazonaws.com/awa-fred-hutch/splash/2024.11/logo.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3) {
    #splash-250910 .content-block .side-a {
        flex: 0 0 54vh;
    }

    #splash-250910 .content-block .side-a>.title {
        position: absolute;
        bottom: 4.6vh;
        left: 3vw;
        width: 100%;
        max-width: 42%;
        height: auto;
    }

    #splash-250910 .content-block .side-a>.title>img {
        width: 100%;
        height: auto;
    }

    #splash-250910 .content-block .side-b {
        flex: 1 1 auto;
        padding: 0 20px;
    }

    #splash-250910 .content-block .side-b .alignment {
        width: calc(100% - 40px);
    }

    #splash-250910 .content-block .side-b h2 {
        font-size: 3.8vh;
    }

    #splash-250910 .content-block .side-b .headline>h1 {
        font-size: 6.4vh;
    }

    #splash-250910 .content-block .side-b .box {
        max-width: 40vw;
    }
}

@media only screen and (max-aspect-ratio: 1/1) {
    #splash-250910 .content-block {
        flex-direction: column;
    }

    #splash-250910 .wrapper .close {
        border: 1px solid #fff;
    }

    #splash-250910 .wrapper .close:before,
    #splash-250910 .wrapper .close:after {
        background-color: #fff;
    }

    #splash-250910 .content-block .side-a {
        background-image: url('https://s3-us-west-1.amazonaws.com/awa-fred-hutch/splash/2024.11/cefa51ef7e99-mobile.jpg');
        background-size: cover;
        background-position: center top;
        flex: 0 0 44%;
        height: auto;
    }

    #splash-250910 .content-block .side-a>.title {
        bottom: 2.4vh !important;
        left: 4vw;
        width: 34vw;
        height: auto;
    }

    #splash-250910 .content-block .side-a>.title>img {
        width: 100%;
        height: auto;
    }

    #splash-250910 .content-block .side-b {
        flex: 0 0 56%;
        height: auto;
        padding: 0 16px;
    }

    #splash-250910 .content-block .side-b .alignment {
        top: 0;
        width: calc(100% - 32px);
        height: auto;
        transform: none;
    }

    #splash-250910 .content-block .side-b h2 {
        font-size: 3.8vh;
        margin: 3vh 0 2.4vh 0;
    }

    #splash-250910 .content-block .side-b h2>br {
        display: none;
    }

    #splash-250910 .content-block .side-b .headline>h1 {
        font-size: 5.4vh;
    }

    #splash-250910 .content-block .side-b .box {
        width: 100%;
        max-width: 580px;
        min-width: calc(100% - 60px);
        padding: 2.2vh 0 2.6vh 0;
    }

    #splash-250910 .content-block .side-b .giving-tuesday>img {
        width: 90%;
        margin: 0 auto;
    }

    #splash-250910 .content-block .side-b .box p {
        width: 100%;
        font-size: 2vh;
        line-height: 1.2em;
        margin: 0 0 2.2vh 0;
        padding: 0 24px;
    }

    #splash-250910 .content-block .side-b .box p>span.clear-lg {
        display: inline-block;
        width: auto;
        height: auto;
        font-size: inherit;
        line-height: inherit;
    }

    #splash-250910 .content-block .side-b .box .timer {
        margin: 0 0 2vh 0;
        padding: 6px 0;
    }

    #splash-250910 .content-block .side-b .box .timer>img {
        width: 80%;
        margin: 0 auto;
    }

    #splash-250910 .content-block .side-b .cancel {
        margin: 2vh 0 0 0;
    }

    #splash-250910 .content-block .side-b .cancel a.link,
    #splash-250910 .content-block .side-b .cancel a.link:hover {
        font-size: 1.6vh;
        line-height: 1.2em;
        padding: 0.6vh 12px;
    }

    #splash-250910 .content-block .side-b .box .cta .donate-now>button {
        font-size: clamp(16px, 2.82vh, 30.5px);
        line-height: 2.6vh;
        padding: 1.4vh 20px;
    }

    #splash-250910 .content-block .side-b .logo {
        height: 5.2vh;
        margin: 3.6vh auto 2.4vh auto;
    }
}

@media only screen and (min-aspect-ratio: 9/16) and (max-aspect-ratio: 15/16) {
    .mobile-splash #splash-250910 .content-block {
        height: 90vh;
    }

    .mobile-splash #splash-250910 .content-block .side-a {
        height: 44%;
    }

    .mobile-splash #splash-250910 .content-block .side-b {
        height: 56%;
    }

    .mobile-splash #splash-250910 .content-block .side-b .headline>h1 {
        font-size: 4vh;
    }
}

@media only screen and (max-aspect-ratio: 7/10) {
    #splash-250910 .content-block .side-b h2 {
        font-size: 5.6vw;
    }

    #splash-250910 .content-block .side-b .box .timer {
        margin: 0 0 2vh 0;
    }

    #splash-250910 .content-block .side-b .box p {
        margin: 0 0 2vh 0;
    }

    .mobile-splash #splash-250910 .content-block .side-b .headline>h1 {
        font-size: 4vh;
    }
}

/*  iPhone 6, 6s, 7, 8  */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    .mobile-splash #splash-250910 .content-block {
        height: 90vh;
    }

    .mobile-splash #splash-250910 .content-block .side-a {
        height: 44%;
    }

    .mobile-splash #splash-250910 .content-block .side-b {
        height: 56%;
    }
}

/*  iPhone 6+, 6s+, 7+, 8+  */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    .mobile-splash #splash-250910 .content-block {
        height: 90vh;
    }

    .mobile-splash #splash-250910 .content-block .side-a {
        height: 44%;
    }

    .mobile-splash #splash-250910 .content-block .side-b {
        height: 56%;
    }
}

/*  iPhone X , XS, 11 Pro, 12 Mini  */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    .mobile-splash #splash-250910 .content-block {
        height: 84vh;
    }

    .mobile-splash #splash-250910 .content-block .side-a {
        height: 44%;
    }

    .mobile-splash #splash-250910 .content-block .side-b {
        height: 56%;
    }
}

/*  iPhone XR, 11  */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) and (orientation: portrait) {
    .mobile-splash #splash-250910 .content-block {
        height: 86vh;
    }

    .mobile-splash #splash-250910 .content-block .side-a {
        height: 44%;
    }

    .mobile-splash #splash-250910 .content-block .side-b {
        height: 56%;
    }
}

/*  iPad Pro  */
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    #splash-250910 .content-block .side-a>.title {
        bottom: 6vh;
    }
}


/* Logo scales with viewport height like headings */
#splash-250910 .splash-250910__logo,
#splash-250910 .splash-250910__logo img {
    width: clamp(160px, 40vh, 520px);
    max-width: 250px;
    height: auto;
    margin-bottom: 3%;
}

/* Keep skyline at 800x500 ratio and shrink to fit side-c */
#splash-250910 .splash-250910__skyline-desktop {
    display: block;
    /* make sure it's actually visible */
    width: min(100%, 800px);
    /* never exceed container or 800px */
    aspect-ratio: 800 / 500;
    /* lock 800x500 */
    height: auto;
    /* derived from aspect-ratio */
    max-height: 100%;
    /* don't exceed container height */
    object-fit: contain;
    /* no cropping or distortion */
    margin: 0;
}

@media (max-width: 768px) {
    #splash-250910 .splash-250910__skyline-desktop {
        width: 60%;
        /* you had this intent on mobile */
        margin: 0 auto;
        /* center it */
    }
}


@media (max-width: 1024px) and (orientation: portrait) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }
}




@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #splash-250910 .splash-250910__skyline-desktop {
        display: none;
    }
}







/* iPad Mini portrait */
@media only screen and (min-device-width: 744px) and (max-device-width: 744px) and (orientation: portrait) {
    .desktop {
        display: block;
    }

    #splash-250910 .splash-250910__side-c {
        display: none;
    }

    #splash-250910 .splash-250910__header {
        font-size: clamp(24px, 7vh, 155px);
    }


    #splash-250910 .wrapper {
        text-align: center;
    }


    #splash-250910 #splash-250910__donate {
        margin: auto;
        margin-top: 25px;
    }

    #splash-250910 .splash-250910__bottom {
        margin-top: 10%;
    }


}




@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {


    .desktop {
        display: block;
    }

    #splash-250910 .splash-250910__side-c {
        display: none;
    }

    #splash-250910 .splash-250910__header {
        font-size: clamp(24px, 10vh, 155px);
    }

    #splash-250910 .splash-250910__skyline {

        display: none;
        max-width: 50%;
        margin: auto;
        margin-bottom: 35px;
    }


    #splash-250910 .wrapper {
        text-align: center;
    }


    #splash-250910 #splash-250910__donate {
        margin: auto;
        margin-top: 40px;
    }



}






/* ------------------------------
   iPhone-specific overrides
   ------------------------------ */

/* Make .desktop visible on all recent iPhones (both Pro and non‑Pro) */
@media only screen and (orientation: portrait) and ((device-width: 375px) or (device-width: 390px) or (device-width: 393px) or (device-width: 414px) or (device-width: 428px) or (device-width: 430px)) {
    .desktop {
        display: block !important;
    }




    /* If needed, keep mobile hidden to avoid double rendering */
    /* .mobile { display: none !important; } */
}

@media only screen and (orientation: landscape) and ((device-width: 375px) or (device-width: 390px) or (device-width: 393px) or (device-width: 414px) or (device-width: 428px) or (device-width: 430px)) {
    .desktop {
        display: block !important;
    }



    /* .mobile { display: none !important; } */
}

/* Hide skyline on iPhones that are NOT Pro (common non‑Pro logical widths: 390px, 428px) */
@media only screen and ((device-width: 390px) or (device-width: 428px)) {

    #splash-250910 .splash-250910__skyline,
    #splash-250910 .splash-250910__skyline-desktop {
        display: none !important;
    }
}



/* Phones in portrait (iPhone-focused) */
@media only screen and (max-width: 430px) and (orientation: portrait) {
    .desktop {
        display: block !important;
    }

    #splash-250910 .splash-250910__header {
        font-size: clamp(24px, 6vh, 140px);
    }


    /* styles for iPhone portrait */

    #splash-250910 .splash-250910__skyline-desktop,
    #splash-250910 .splash-250910__side-c {
        display: none !important;
    }

    #splash-250910 .splash-250910__skyline {
        display: block;
        max-width: 50%;
        margin: auto;
        margin-bottom: 35px;
    }

    #splash-250910 .splash-250910__side-a .p1,
    #splash-250910 .splash-250910__side-a .p2,
    #splash-250910 .splash-250910__side-a .p3 {
        font-size: clamp(16px, 5.4vh, 24px);
    }

    #splash-250910 .splash-250910__side-a .p4 {
        line-height: 1;
    }

    #splash-250910 .wrapper {
        text-align: center;
    }


    #splash-250910 #splash-250910__donate {
        margin: auto;
        margin-top: 20px;
        max-width: 40%;
    }



}




/* iPhone 11 portrait */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    #splash-250910 .splash-250910__header {
        font-size: 62px;
        margin-bottom: 10px;
    }

    #splash-250910 .splash-250910__side-a .p1,
    #splash-250910 .splash-250910__side-a .p2,
    #splash-250910 .splash-250910__side-a .p3 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    #splash-250910 #splash-250910__donate {
        margin-bottom: 15px;
    }
}