@charset "UTF-8";

/* FONT */
/** {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}*/

:root {
    --m-green-rgb: 31, 145, 93;
    --m-blue-rgb: 59, 118, 181;
    --m-link: #337ab7;
    --m-blue: #2778CE;
    --m-blue-alt: #3B76B5;
    --m-light-blue: #DAE7F7;
    --m-dark-blue: #113459;
    --m-red: #CE0E2D;
}

div.kidney {
    --m-primary: #C7E3FF;
    --m-secondary: #E6F2E2;
    --m-primary-text: #1F915D;
    --m-primary-dark-text: #113459;
    --m-secondary-dark-text: #0a5044;
    --m-secondary-text: #3B76B5;
    --m-button-background: #2778ce;
}

div.liver {
    --m-primary: #d2eaca;
    --m-secondary: #e6f3ff;
    --m-primary-text: #2778ce;
    --m-primary-dark-text: #0a5044;
    --m-secondary-dark-text: #113459;
    --m-secondary-text: #1f915d;
    --m-button-background: #1f915d;
}

/* LAYOUT - CARRIED OVER FROM BOOTSTRAP */
html {
    font-size: 10px;
}

div.microsites {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;

    font-size: 14px;
    line-height: 1.42857143;
    background: #FFF;
    margin: 0;
}

    div.microsites .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }

    div.microsites .container, .container-fluid {
        padding-right: 15px;
        padding-left: 15px;
        margin-left: auto;
        margin-right: auto;
    }

    div.microsites .container-fluid:after, .row:before, .row:after {
        content: "";
        display: table;
        clear: both;
    }

    div.microsites .row {
        margin-right: -15px;
        margin-left: -15px;
    }

    div.microsites .col-sm-6 {
        width: 50%;
    }

    div.microsites .col-md-5 {
        width: 41.67%;
    }

    div.microsites .col-sm-7 {
        width: 58.33%;
    }

    div.microsites .col-sm-4 {
        width: 33.33%;
    }

    div.microsites .col-md-offset-1, .col-sm-offset-1 {
        margin-left: 8.33%;
    }

    div.microsites h1 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    div.microsites .btn {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    div.microsites a {
        color: var(--m-link);
        text-decoration: none;
    }

    div.microsites ul {
        margin-top: 0;
    }

    div.microsites p {
        margin-top: 0;
        margin-bottom: 1.5em;
    }

    div.microsites blockquote ol:last-child, div.microsites blockquote p:last-child, blockquote ul:last-child {
        margin-bottom: 0;
    }

    div.microsites h2 {
        font-weight: 500;
        line-height: 1.1;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    div.microsites .col-sm-1, div.microsites .col-sm-10, div.microsites .col-sm-11, div.microsites .col-sm-12, div.microsites .col-sm-2, div.microsites .col-sm-3, div.microsites .col-sm-4, div.microsites .col-sm-5, div.microsites .col-sm-6, div.microsites .col-sm-7, div.microsites .col-sm-8, div.microsites .col-sm-9 {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
    }

    div.microsites .col-sm-3 {
        width: 25%;
    }

    div.microsites .col-sm-9 {
        width: 75%;
    }


/* HEADER */
.microsites header {
    background: var(--m-primary);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4;
    border-bottom: 4px solid #FFF;
}

.microsites :where(header, .intro-ribbon, .blue-bg) .container-fluid:before, .microsites :where(header, .intro-ribbon, .blue-bg) .container-fluid:after,
.microsites :where(header, .intro-ribbon, .blue-bg) .row:before, .microsites :where(header, .intro-ribbon, .blue-bg) .row:after {
    position: absolute;
}

.microsites header .row {
    display: flex;
    align-items: center;
    min-height: 10rem;
    justify-content: space-between;
    gap: .4rem;
}

.microsites header .social-links {
    min-width: 46rem;
}

    .microsites header .social-links, .microsites header .social-links ul {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }

        .microsites header .social-links p {
            font-size: 1.5rem;
            color: var(--m-dark-text);
            text-align: right;
            margin: 0 1.6rem 0 0;
        }

            .microsites header .social-links p b {
                display: block;
            }

        .microsites header .social-links ul li a {
            background: #FFF;
            width: 6rem;
            height: 6rem;
            border-radius: 4px;
            border: 1px solid #89B8EB;
            position: relative;
            margin-left: .8rem;
            display: block;
            transition: all .2s ease;
        }

            .microsites header .social-links ul li a:hover {
                background: #89B8EB;
            }

            .microsites header .social-links ul li a:before {
                content: "";
                position: absolute;
                top: 50%;
                right: 50%;
                transform: translate(50%, -50%);
                width: 2.6rem;
                height: 2.6rem;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                transition: all .2s ease;
            }

            .microsites header .social-links ul li a.facebook:before {
                background-image: url(images/icons/facebook-f.svg);
            }

            .microsites header .social-links ul li a.twitter:before {
                background-image: url(images/icons/twitter.svg);
            }

            .microsites header .social-links ul li a.instagram:before {
                background-image: url(images/icons/instagram.svg);
            }

            .microsites header .social-links ul li a.email:before {
                background-image: url(images/icons/envelope.svg);
            }

.microsites header .btn {
    font-size: 1.5rem;
    line-height: 1.9rem;
    min-width: 17.2rem;
    max-width: 20.6rem;
    white-space: initial;
    padding: 1rem 1.2rem;
    background: var(--m-button-background);
}

.microsites .about-page header .col-sm-8 {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 1.8rem;
}

.microsites .about-page header .btn.arrow-left {
    padding: 1.9rem 3.6rem 1.9rem 6rem;
    position: relative;
    width: auto;
    max-width: 100%;
    border-color: #89B8EB;
}

    .microsites .about-page header .btn.arrow-left:before {
        content: "";
        height: 2.6rem;
        width: 2.2rem;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        background: url(images/icons/arrow-left.svg) no-repeat center;
        background-size: contain;
        left: 2.8rem;
        transition: all .2s ease;
    }


/* GENERAL LAYOUT/STYLES */
.microsites header .container-fluid, .microsites .intro-ribbon .container-fluid, .green .container-fluid, .callouts .container-fluid, .microsites div.footer .container-fluid {
    max-width: 118.2rem;
    width: 100%;
    padding-left: 5rem;
    padding-right: 5rem;
}

.blue-bg .container-fluid, .donation-types .container-fluid {
    max-width: 110rem;
    width: 100%;
    padding-left: 5rem;
    padding-right: 5rem;
}

/*body {
    color: #000;
}*/

div.microsites .row > *[class*=' col-']:first-child, div.microsites .row > *[class^='col-']:first-child {
    padding-left: 0;
}

div.microsites .row > *[class*=' col-']:not(.white-background):last-child, div.microsites .row > *[class^='col-']:not(.white-background):last-child {
    padding-right: 0;
}

.microsites main {
    padding-top: 10.4rem;
}

.microsites.story-home main {
    padding-bottom: 6.5rem;
}

.microsites h1 {
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--m-dark-text);
}

div.microsites ul {
    padding-left: 0;
}

ul li {
    /*list-style-type: none;*/
}

/* BUTTONS */
.microsites .btn {
    background: var(--m-blue);
    color: #FFF;
    font-size: 1.6rem;
    font-weight: 500;
    padding: .8rem 1.2rem;
    position: relative;
    transition: all .2s ease;
}

    .microsites .btn:hover, .microsites .donation-types .btn:hover {
        background: var(--m-dark-blue);
        border-color: var(--m-dark-blue);
        color: #FFF;
    }

    .microsites .btn.outline {
        background: #FFF;
        border-color: #C7E3FF;
        color: var(--m-dark-blue);
    }

        .microsites .btn.outline:hover {
            background: var(--m-dark-blue);
            border-color: var(--m-dark-blue);
            color: #FFF;
        }

    .microsites .btn.arrow-down {
        padding-right: 3.3rem;
    }

        .microsites .btn.arrow-down:after {
            content: "";
            position: absolute;
            width: 1.2rem;
            height: 1.6rem;
            background: url(images/icons/arrow-down.svg) no-repeat center;
            background-size: contain;
            top: 1rem;
            right: 1.5rem;
            transition: all .2s ease;
        }

    .microsites .btn[target="_blank"] {
        padding-right: 3.2rem;
    }

        .microsites .btn[target="_blank"]:after {
            content: "";
            width: 1.4rem;
            height: 1.6rem;
            background: url(images/icons/arrow-up-right-from-square.svg) no-repeat center;
            background-size: contain;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 1rem;
            opacity: .5;
            transition: all .2s ease;
        }

        .microsites .btn[target="_blank"]:hover:after,
        .microsites .btn.arrow-down:hover:after,
        .microsites.about-page header .btn.arrow-left:hover:before,
        .microsites header .social-links ul li a:hover:before,
        .rotator-container button:hover:before {
            filter: grayscale(1) brightness(5);
        }


/* HOME PAGE */
div.microsites .intro-ribbon {
    background-color: var(--m-light-blue);
    background-image: url(images/clouds.png);
    background-size: cover;
    background-position: 50% 65%;
    padding-top: 1.8rem;
    padding-bottom: 2.6rem;
}

    div.microsites .intro-ribbon img {
        width: 28rem;
        max-width: 100%;
        border-radius: 16px;
        border: 4px solid #FFF;
        box-shadow: 0 3px 6px rgba(0,0,0,.16);
    }

    div.microsites .intro-ribbon .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    div.microsites .intro-ribbon .main-image {
        align-self: flex-start;
        position: sticky;
        top: 12.2rem;
        height: 400px;
        width: 400px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    div.microsites .intro-ribbon blockquote {
        border-left: 0;
        padding: 0 0 0 3.8rem;
        margin: 0 0 0 5rem;
        position: relative;
        max-width: 58rem;
    }

        div.microsites .intro-ribbon blockquote p {
            font-size: 2rem;
            font-style: italic;
            color: var(--m-dark-blue);
        }

            div.microsites .intro-ribbon blockquote p b {
                color: var(--m-blue-alt);
            }

.microsites .green-rotator-container {
    display: flex;
    flex-direction: column-reverse;
}

.microsites .green {
    background-color: var(--m-secondary);
    padding-top: 5rem;
    padding-bottom: 6.5rem;
    position: relative;
    overflow: hidden;
}

.microsites .rotator-container + .green {
    padding-bottom: 18rem;
}

.microsites .green:before, .microsites .green:after {
    content: "";
    position: absolute;
    width: 94.9rem;
    height: 94.9rem;
    background: url(images/logo-background.svg) no-repeat center;
    background-size: contain;
    z-index: 0;
}

.microsites .green.background-gradient:before {
    background-image: linear-gradient(to bottom, rgba(230, 242, 226, 0) 40%, var(--m-secondary)), url(images/logo-background.svg);
}

.microsites .green:before {
    left: -53.1rem;
    top: -23.6rem;
}

.microsites .green:after {
    right: 16%;
    transform: translateX(50%);
    bottom: -43.8rem;
}

.microsites .green .container-fluid {
    z-index: 2;
}

.microsites .green h2 {
    color: var(--m-primary-text);
    font-size: 2.4rem;
    font-weight: 700;
    margin: 3.2rem 0 1.4rem;
}

.microsites #overflow-content {
    max-height: 41rem;
    overflow: hidden;
    transition: all .4s ease;
    position: relative;
}

    .microsites #overflow-content.overflow-gradient:after {
        content: "";
        position: absolute;
        pointer-events: none;
        bottom: 0;
        left: 0;
        right: 0;
        height: 8rem;
        background-image: linear-gradient(to bottom, rgba(230, 242, 226, 0), var(--m-secondary));
        transition: opacity .4s ease;
        opacity: 1;
    }

    .microsites #overflow-content.overflow-gradient.expanded:after {
        opacity: 0;
    }

.microsites #overflow-content-hero {
    max-height: 30rem;
    overflow: hidden;
    transition: all .4s ease;
    position: relative;
}

    .microsites #overflow-content-hero.overflow-gradient:after {
        content: "";
        position: absolute;
        pointer-events: none;
        bottom: 0;
        left: 0;
        right: 0;
        height: 8rem;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF);
        transition: opacity .4s ease;
        opacity: 1;
    }

    .microsites #overflow-content-hero.overflow-gradient.expanded:after {
        opacity: 0;
    }

    .microsites #overflow-content.expanded, .microsites #overflow-content-hero.expanded {
        max-height: 100%;
    }

.microsites .green button:not(.btn), .microsites button.read-more-toggle-hero {
    font-size: 1.8rem;
    font-style: italic;
    color: var(--m-link);
    background: none;
    border: 0;
    padding: 0;
    display: table;
    margin-top: 10px;
    cursor: pointer;
    display: none;
}

.microsites button.read-more-toggle-hero {
    padding-left: 3.8rem;
    margin-left: 5rem;
}

.microsites .green p {
    font-size: 1.8rem;
    color: var(--m-secondary-dark-text);
}

    .microsites .green p b {
        color: var(--m-primary-text);
    }

.microsites .green .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.microsites .green-container-overflow {
    display: none;
}

.microsites .green .white-background {
    background: #FFF;
    border-radius: 1.6rem;
    padding: 3.3rem 4rem 4.5rem;
    z-index: 2;
    position: relative;
    max-width: 44.9rem;
}

.microsites .white-background h2 {
    font-size: 2.4rem;
    margin-bottom: 1.3rem;
    font-weight: 700;
    color: var(--m-secondary-text);
    margin-top: 0;
}

.microsites .white-background p {
    font-size: 1.6rem;
    color: var(--m-dark-blue);
}

.microsites .white-background .btn {
    font-size: 1.5rem;
}

    .microsites .white-background .btn + .btn {
        margin-top: .8rem;
    }

div.microsites .callouts {
    padding-top: 4.5rem;
}

    div.microsites .callouts h2 {
        text-align: center;
        font-size: 2.4rem;
        color: var(--m-dark-blue);
        margin-bottom: 2.7rem;
    }

    div.microsites .callouts ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.6rem;
        margin-bottom: 1rem;
    }

        div.microsites .callouts ul li {
            width: calc(25% - 1.2rem);
            text-align: center;
            font-size: 1.6rem;
            position: relative;
            padding: 8.5rem 2rem 2rem;
            border-radius: 1.6rem;
        }

            div.microsites .callouts ul li p {
                margin-bottom: 0;
            }

            div.microsites .callouts ul li:nth-child(odd) {
                background: rgba(59, 118, 181, 0.16);
                color: var(--m-dark-blue);
            }

            div.microsites .callouts ul li:nth-child(even) {
                background: rgba(31, 145, 94, 0.16);
                color: #0A5044;
            }

            div.microsites .callouts ul li.icon:before {
                content: "";
                position: absolute;
                top: 2rem;
                right: 50%;
                transform: translateX(50%);
                width: 6rem;
                height: 4.8rem;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }

            div.microsites .callouts ul li.icon:nth-child(odd):before {
                filter: invert(40%) sepia(45%) saturate(728%) hue-rotate(170deg) brightness(96%) contrast(88%);
            }

            div.microsites .callouts ul li.icon:nth-child(even):before {
                filter: invert(43%) sepia(100%) saturate(305%) hue-rotate(100deg) brightness(87%) contrast(98%);
            }

            div.microsites .callouts ul li.icon.money-check-pen:before {
                background-image: url(images/icons/money-check-pen.svg);
            }

            div.microsites .callouts ul li.icon.star:before {
                background-image: url(images/icons/star.svg);
            }

            div.microsites .callouts ul li.icon.notes-medical:before {
                background-image: url(images/icons/notes-medical.svg);
            }

            div.microsites .callouts ul li.icon.bed:before {
                background-image: url(images/icons/bed.svg);
            }

            div.microsites .callouts ul li.icon.handshake:before {
                background-image: url(images/icons/handshake.svg);
            }

            div.microsites .callouts ul li.icon.user-group:before {
                background-image: url(images/icons/user-group.svg);
            }

            div.microsites .callouts ul li.icon.lifering:before {
                background-image: url(images/icons/life-ring.svg);
            }

            div.microsites .callouts ul li.icon.scale:before {
                background-image: url(images/icons/scale-balanced.svg);
            }

            div.microsites .callouts ul li.icon.hand-holding-medical:before {
                background-image: url(images/icons/hand-holding-medical.svg);
            }

            div.microsites .callouts ul li.icon.hourglass:before {
                background-image: url(images/icons/hourglass.svg);
            }

            div.microsites .callouts ul li.icon.van:before {
                background-image: url(images/icons/van-shuttle.svg);
            }

            div.microsites .callouts ul li.icon.users:before {
                background-image: url(images/icons/users.svg);
            }

    div.microsites .callouts .row.buttons {
        padding-top: 3.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .8rem;
    }

        div.microsites .callouts .row.buttons .btn {
            white-space: nowrap;
        }


/* ABOUT PAGE */
.microsites.about-page main p {
    font-size: 1.6rem;
}

.microsites .about .intro {
    font-size: 2rem;
}

.microsites .about .about-top {
    max-width: 71rem;
    text-align: center;
}

.microsites .about h2 {
    font-size: 2.8rem;
    font-weight: 700;
}

.microsites .about ol {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 8.4rem;
    counter-reset: options;
    margin: 4.4rem 0;
}

    .microsites .about ol li {
        list-style-type: none;
        font-size: 1.6rem;
        background: var(--m-light-blue);
        border-radius: 5px;
        padding: 7rem 2.5rem 4rem;
        max-width: 24rem;
        position: relative;
    }

        .microsites .about ol li:first-child:after {
            content: "or";
            font-style: italic;
            font-size: 1.6rem;
            color: #000;
            position: absolute;
            right: -5rem;
            top: 50%;
            transform: translateY(-50%);
        }

        .microsites .about ol li:before {
            counter-increment: options;
            content: counter(options);
            position: absolute;
            right: 50%;
            transform: translateX(50%);
            font-size: 4rem;
            top: 3rem;
            font-weight: 700;
            color: var(--m-red);
            line-height: 1;
        }

.microsites .blue-bg {
    margin-top: 6rem;
    padding-bottom: 9rem;
    position: relative;
}

    .microsites .blue-bg .row {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 8.4rem;
        position: relative;
        z-index: 2;
    }

        .microsites .blue-bg .row .col {
            width: calc(50% - 4.2rem);
        }

    .microsites .blue-bg:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 12.7rem;
        background: var(--m-light-blue);
    }

    .microsites .blue-bg img {
        max-width: 100%;
        height: auto;
        border: 8px solid var(--m-light-blue);
    }

    .microsites .blue-bg h3 {
        font-size: 1.6rem;
        font-weight: 700;
        margin: 3.2rem 0 2rem;
    }

    .microsites .blue-bg ul li {
        font-size: 1.6rem;
        padding-left: 2.8rem;
        position: relative;
        margin-bottom: 1.8rem;
    }

        .microsites .blue-bg ul li:before {
            content: "\2022";
            position: absolute;
            top: -1px;
            left: 1.8rem;
        }

.microsites .donation-types {
    padding-top: 6.8rem;
}

    .microsites .donation-types img {
        max-width: 100%;
    }

    .microsites .donation-types h2 {
        text-align: center;
        font-weight: 700;
        font-size: 2.8rem;
        position: relative;
        margin-top: 0;
        margin-bottom: 6rem;
    }

        .microsites .donation-types h2 span {
            display: table;
            margin: 0 auto;
            padding: 0 2rem;
            z-index: 1;
            background: #FFF;
            position: relative;
        }

        .microsites .donation-types h2:before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(0,0,0,.2);
        }

    .microsites .donation-types .row {
        padding-bottom: 7rem;
    }

        .microsites .donation-types .row + .row {
            padding-top: 7rem;
            border-top: 1px solid rgba(0,0,0,.2);
        }

    .microsites .donation-types .btn {
        background: var(--m-red);
        display: table;
        margin-top: 2.5rem;
        min-width: 20rem;
    }

        .microsites .donation-types .btn + p {
            margin-top: 4.5rem;
        }

.microsites .donate-cta {
    background: var(--m-dark-blue);
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: #FFF;
    border-bottom: 4px solid #FFF;
}

    .microsites .donate-cta h2 {
        font-weight: 700;
        margin-top: 0;
        font-size: 2.8rem;
    }

    .microsites .donate-cta p {
        max-width: 65rem;
        margin: 0 auto 2rem;
    }

    .microsites .donate-cta .btn {
        background: #FFF;
        color: #000;
        display: table;
        margin: 2rem auto;
    }

        .microsites .donate-cta .btn:hover {
            background: #000;
            color: #FFF;
        }

    .microsites .donate-cta img {
        width: 35.6rem;
        max-width: 100%;
    }

/* ROTATOR / LIGHTBOX */
.microsites .rotator-container {
    width: 126.2rem;
    max-width: 100%;
    position: relative;
    margin-top: -10.4rem;
}

.microsites .rotator {
    z-index: 1;
    max-width: 109.6rem;
    margin: 0 auto;
    width: calc(100% - 15rem);
}

    .microsites .rotator > div {
        position: relative;
        z-index: 1;
    }

        .microsites .rotator > div > * {
            padding: 0 7px;
        }

    .microsites .rotator:not(.enabled) {
        display: flex;
        position: relative;
        z-index: 1;
    }

        .microsites .rotator:not(.enabled) ~ button {
            display: none;
        }

    .microsites .rotator > a {
        width: 20%;
        margin: 0 7px;
        display: inline-block;
        z-index: 1;
    }

div.microsites .rotator .rotator-image {
    width: 100%;
    padding-bottom: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 4px solid #FFF;
    cursor: pointer;
}

div.microsites .rotator-container button {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: #FFF;
    border: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s ease;
    z-index: 1;
    cursor: pointer;
}

    div.microsites .rotator-container button:hover {
        background: #3B76B5;
    }

    div.microsites .rotator-container button:before {
        content: "";
        width: 2.4rem;
        height: 2.7rem;
        background: url(images/icons/arrow-left.svg) no-repeat center;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: 50%;
        transition: all .2s ease;
    }

    div.microsites .rotator-container button.siema-prev {
        margin-right: 2rem;
        left: 2rem;
    }

    div.microsites .rotator-container button.siema-next {
        margin-left: 2rem;
        right: 2rem;
    }

    div.microsites .rotator-container button.siema-prev:before {
        transform: translate(50%, -50%);
    }

    div.microsites .rotator-container button.siema-next:before {
        transform: translate(50%, -50%) rotate(180deg);
    }

div.microsites .rotator-container {
    width: 100%;
}

div.microsites .rotator img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* simple lightbox */
div.microsites.hidden-scroll {
    overflow: hidden
}

div.microsites .sl-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    display: none;
    z-index: 1035
}

div.microsites .sl-wrapper {
    z-index: 1040;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed
}

    div.microsites .sl-wrapper * {
        box-sizing: border-box
    }

    div.microsites .sl-wrapper button {
        border: 0 none;
        background: transparent;
        font-size: 28px;
        padding: 0;
        cursor: pointer
    }

        div.microsites .sl-wrapper button:hover {
            opacity: 0.7
        }

    div.microsites .sl-wrapper .sl-close {
        display: none;
        position: fixed;
        right: 30px;
        top: 30px;
        z-index: 10060;
        margin-top: -14px;
        margin-right: -14px;
        height: 44px;
        width: 44px;
        line-height: 44px;
        font-family: Arial,Baskerville,monospace;
        color: #000;
        font-size: 3rem
    }

    div.microsites .sl-wrapper .sl-counter {
        display: none;
        position: fixed;
        top: 30px;
        left: 30px;
        z-index: 1060;
        color: #000;
        font-size: 1rem
    }

    div.microsites .sl-wrapper .sl-navigation {
        width: 100%;
        display: none
    }

        div.microsites .sl-wrapper .sl-navigation button {
            position: fixed;
            top: 50%;
            margin-top: -22px;
            height: 44px;
            width: 22px;
            line-height: 44px;
            text-align: center;
            display: block;
            z-index: 10060;
            font-family: Arial,Baskerville,monospace;
            color: #000
        }

            div.microsites .sl-wrapper .sl-navigation button.sl-next {
                right: 5px;
                font-size: 2rem
            }

            div.microsites .sl-wrapper .sl-navigation button.sl-prev {
                left: 5px;
                font-size: 2rem
            }

@media (min-width: 35.5em) {
    div.microsites .sl-wrapper .sl-navigation button {
        width: 44px
    }

        div.microsites .sl-wrapper .sl-navigation button.sl-next {
            right: 10px;
            font-size: 3rem
        }

        div.microsites .sl-wrapper .sl-navigation button.sl-prev {
            left: 10px;
            font-size: 3rem
        }
}

@media (min-width: 50em) {
    div.microsites .sl-wrapper .sl-navigation button {
        width: 44px
    }

        div.microsites .sl-wrapper .sl-navigation button.sl-next {
            right: 20px;
            font-size: 3rem
        }

        div.microsites .sl-wrapper .sl-navigation button.sl-prev {
            left: 20px;
            font-size: 3rem
        }
}

div.microsites .sl-wrapper.sl-dir-rtl .sl-navigation {
    direction: ltr
}

div.microsites .sl-wrapper .sl-image {
    position: fixed;
    -ms-touch-action: none;
    touch-action: none;
    z-index: 10000
}

    div.microsites .sl-wrapper .sl-image img {
        margin: 0;
        padding: 0;
        display: block;
        border: 0 none;
        width: 100%;
        height: auto
    }

@media (min-width: 35.5em) {
    div.microsites .sl-wrapper .sl-image img {
        border: 0 none
    }
}

@media (min-width: 50em) {
    div.microsites .sl-wrapper .sl-image img {
        border: 0 none
    }
}

div.microsites .sl-wrapper .sl-image iframe {
    background: #000;
    border: 0 none
}

@media (min-width: 35.5em) {
    div.microsites .sl-wrapper .sl-image iframe {
        border: 0 none
    }
}

@media (min-width: 50em) {
    div.microsites .sl-wrapper .sl-image iframe {
        border: 0 none
    }
}

div.microsites .sl-wrapper .sl-image .sl-caption {
    display: none;
    padding: 10px;
    color: #fff;
    background: rgba(0,0,0,0.8);
    font-size: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

    div.microsites .sl-wrapper .sl-image .sl-caption.pos-top {
        bottom: auto;
        top: 0
    }

    div.microsites .sl-wrapper .sl-image .sl-caption.pos-outside {
        bottom: auto
    }

div.microsites .sl-wrapper .sl-image .sl-download {
    display: none;
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #000;
    z-index: 1060
}

div.microsites .sl-spinner {
    display: none;
    border: 5px solid #333;
    border-radius: 40px;
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    opacity: 0;
    position: fixed;
    top: 50%;
    width: 40px;
    z-index: 1007;
    -webkit-animation: pulsate 1s ease-out infinite;
    -moz-animation: pulsate 1s ease-out infinite;
    -ms-animation: pulsate 1s ease-out infinite;
    -o-animation: pulsate 1s ease-out infinite;
    animation: pulsate 1s ease-out infinite
}

div.microsites .sl-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

div.microsites .sl-transition {
    transition: -moz-transform ease 200ms;
    transition: -ms-transform ease 200ms;
    transition: -o-transform ease 200ms;
    transition: -webkit-transform ease 200ms;
    transition: transform ease 200ms
}

@-webkit-keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0
    }

    50% {
        opacity: 1
    }

    100% {
        transform: scale(1.2);
        opacity: 0
    }
}

@keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0
    }

    50% {
        opacity: 1
    }

    100% {
        transform: scale(1.2);
        opacity: 0
    }
}

@-moz-keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0
    }

    50% {
        opacity: 1
    }

    100% {
        transform: scale(1.2);
        opacity: 0
    }
}

@-o-keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0
    }

    50% {
        opacity: 1
    }

    100% {
        transform: scale(1.2);
        opacity: 0
    }
}

@-ms-keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0
    }

    50% {
        opacity: 1
    }

    100% {
        transform: scale(1.2);
        opacity: 0
    }
}

.microsites .sl-wrapper .sl-image .sl-caption {
    display: block;
    position: absolute;
    padding: .7rem 1.2rem;
    width: 100%;
    margin: 0 auto;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0,.85);
    font-size: 1.4rem;
    color: #fff;
    font-style: italic;
    font-weight: 500;
    text-align: left;
}

.microsites .sl-overlay {
    background: #000;
    opacity: .9;
}

.microsites .sl-wrapper .sl-close, .microsites .sl-wrapper .sl-navigation button {
    color: #FFF;
}

.microsites .sl-wrapper .sl-close {
    font-size: 5.2rem;
}

.microsites .sl-wrapper .sl-navigation button.sl-next, .microsites .sl-wrapper .sl-navigation button.sl-prev {
    font-size: 7.2rem;
}


/* FOOTER */
.microsites div.footer {
    background: var(--m-dark-blue);
    color: #919FB3;
    height: 6.5rem;
    display: flex;
    align-items: center;
}

    .microsites div.footer .row .col-sm-3 {
        line-height: 0;
    }

    .microsites div.footer p {
        top: 0;
        font-size: 1.3rem;
        margin: 0;
        line-height: 15px;
        color: rgba(255,255,255,.8);
    }

    .microsites div.footer a, .microsites div.footer span {
        color: #FFF;
        font-size: 1.3rem;
        margin: 0;
    }

        .microsites div.footer a:hover {
            text-decoration: underline;
        }

    .microsites div.footer .container-fluid .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.microsites .footer-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .microsites .footer-left nav ul {
        display: flex;
        margin-bottom: 0;
    }

div.microsites > div > div.footer nav li:not(:last-of-type) span:before, div.microsites > div > div.footer nav li:first-of-type:before {
    content: "|";
    margin: 0 0.5em;
    color: #919FB3;
}

.microsites div.footer img {
    opacity: 1;
    max-width: 100%;
}

.microsites div.footer a:hover img {
    opacity: .7;
}


@media (max-width: 1250px) {
    .microsites h1 {
        font-size: 3rem;
    }

    .microsites header .social-links {
        min-width: 38rem;
    }

        .microsites header .social-links ul li a {
            width: 4.5rem;
            height: 4.5rem;
        }

        .microsites header .social-links p {
            margin: 0 .5rem 0 0;
        }

    .microsites .rotator-container {
        margin-top: -8%;
    }

    .microsites .green:after {
        right: -2%;
    }
}

@media (max-width: 1000px) {
    div.microsites .col-md-offset-1 {
        margin-left: 0;
    }

    div.microsites .col-md-5 {
        width: 50%;
    }

    .microsites .footer-left {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .microsites header .row {
        min-height: 13rem;
    }

    .microsites main {
        padding-top: 13rem;
    }

    div.microsites > div.footer nav li:first-of-type:before {
        content: none;
    }

    .microsites header .social-links {
        display: block;
        min-width: 20rem;
    }

        .microsites header .social-links p {
            text-align: center;
            margin: 0 0 .4rem;
        }

        .microsites header .social-links ul li:first-child a {
            margin-left: 0;
        }

    .microsites .rotator-container {
        margin-top: -9.75%;
    }

    .microsites .donation-types h2:before {
        content: none;
    }
}

@media (max-width: 768px) {
    div.microsites .row > div[class*=' col-'], div.microsites .row > div[class^='col-'], .row > section[class^='col-'] {
        padding-left: 0;
        padding-right: 0;
    }

    .microsites :is(.green, .white-background, .callouts, .about, .donation-types, .donate-cta) h2 {
        line-height: 1.2;
        font-size: 2.2rem;
    }

    div.microsites .col-sm-6, div.microsites .col-sm-3, div.microsites .col-sm-4, div.microsites .col-sm-7 {
        width: 100%;
    }

    div.microsites .col-sm-offset-1 {
        margin-left: 0;
    }

    div.microsites .col-sm-1, div.microsites .col-sm-10, div.microsites .col-sm-11, div.microsites .col-sm-12, div.microsites .col-sm-2, div.microsites .col-sm-3, div.microsites .col-sm-4, div.microsites .col-sm-5, div.microsites .col-sm-6, div.microsites .col-sm-7, div.microsites .col-sm-8, div.microsites .col-sm-9 {
        float: none;
    }

    div.microsites .callouts .row.buttons .btn {
        white-space: initial;
    }

    .microsites header {
        position: relative;
    }

        .microsites header .row {
            height: auto;
            display: block;
            padding-top: 2rem;
            padding-bottom: 2rem;
            text-align: center;
        }

    .microsites h1 {
        font-size: 2.6rem;
        margin-top: 0;
    }

    .microsites header .social-links {
        margin-bottom: 1.6rem;
    }

    .microsites header .btn {
        max-width: 100%;
    }

    .microsites header .social-links p b {
        display: inline-block;
    }

    .microsites.about-page header .col-sm-8 {
        flex-direction: column;
        align-items: center;
    }

        .microsites.about-page header .col-sm-8 .btn {
            width: 29rem;
            max-width: auto;
        }

    .microsites main {
        padding-top: 0;
    }

    div.microsites .intro-ribbon .main-image {
        position: relative;
        top: 0;
    }

    div.microsites .intro-ribbon .row {
        display: block;
    }

    div.microsites .intro-ribbon img {
        width: 30rem;
        margin: 0 auto 2rem;
        display: block;
    }

    div.microsites .intro-ribbon blockquote {
        margin: 0 auto 2rem;
        padding-left: 0;
    }

        div.microsites .intro-ribbon blockquote p {
            font-size: 1.8rem;
        }

        .intro-ribbon blockquote:before {
            left: -2.8rem;
        }

    .microsites .green {
        padding-top: 2.6rem;
    }

        .microsites .green .row {
            display: block;
        }

        .microsites .green .white-background {
            margin: 3rem auto 0;
            width: 100%;
            max-width: 100%;
            padding: 2.3rem 3rem 3.5rem;
        }

    .microsites .white-background .btn {
        display: table;
    }

    .microsites .green h2 {
        margin-top: 2rem;
    }

    .microsites .green p {
        font-size: 1.6rem;
    }

    .microsites .green:after {
        transform: translateX(0);
        right: -15.5rem;
    }

    .microsites #overflow-content, .microsites #overflow-content-hero {
        max-height: 100%;
    }

    .microsites .green button:not(.btn), .microsites button.read-more-toggle-hero {
        display: none !important;
    }

    .microsites #overflow-content.overflow-gradient:after, .microsites #overflow-content-hero.overflow-gradient:after {
        content: none;
    }

    .microsites .rotator-container {
        margin-top: -17.5%;
    }

    .microsites .blue-bg {
        padding-bottom: 5.8rem;
    }

        .microsites .blue-bg .row {
            flex-direction: column;
        }

            .microsites .blue-bg .row .col {
                width: 100%;
            }

    div.microsites .callouts ul {
        padding: 0 1.6rem;
    }

        .callouts ul li {
            width: calc(50% - .8rem);
        }

    div.microsites .callouts .row.buttons {
        flex-direction: column;
        gap: 1.4rem;
    }

    div.microsites .buttons .btn {
        display: block;
        text-align: center;
        width: 100%;
    }

    .microsites .btn {
        white-space: initial;
    }

    .microsites .about ol {
        flex-direction: column;
        align-items: center;
        gap: 6rem;
    }

        .microsites .about ol li:first-child:after {
            top: auto;
            right: 50%;
            transform: translateX(50%);
            bottom: -4rem;
        }

    .microsites .blue-bg img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .microsites .donation-types .row:nth-child(even) {
        display: flex;
        flex-direction: column-reverse;
    }

    .microsites .donation-types .row img {
        display: block;
        margin: 0 auto 2.5rem;
    }

    .microsites .donation-types .btn {
        margin-left: auto;
        margin-right: auto;
    }

    .microsites div.footer {
        height: auto;
    }

        .microsites div.footer .container-fluid .row {
            display: block;
            padding: 2rem;
            text-align: center;
        }

        .microsites div.footer .footer-left {
            width: 100%;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.6rem;
        }

        .microsites div.footer span {
            display: inline;
        }
}

@media (max-width: 500px) {
    div.microsites .callouts ul li {
        width: 100%;
    }

    .microsites .footer-left nav ul {
        flex-direction: column;
    }

        .microsites .footer-left nav ul li {
            margin-top: .25rem;
        }

    div.microsites > div.footer nav li:not(:last-of-type) span:before, div.microsites > div.footer nav li:first-of-type:before {
        content: none;
    }
}
