:root {
    --card-bg-color: #202f36;
    --ef-blue-dark: #136a8c;
    --ef-blue-light: #8fe1f6;
    --ef-blue-medium: #187c9e;
    --ef-purple-dark: #924aa6;
    --ef-purple-light: #cdd2ea;
    --ef-yellow: #feae40;
    --ef-white: #f7f7f7;
    --study-number-color: #fffb;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.study-summaries h3 {
    line-height: 8vh;
    line-height: inherit;
    color: white;
    font-size: 3vmin;
    font-weight: 500;
}

.intro.alt h1 {
    /* font-weight: 100;
            opacity: 0.85;
            font-style: italic; */
}

.intro.alt .description {
    color: #3335;
    background: white;
    box-shadow: inset 0 3px 10px -6px rgba(0, 0, 0, .2), inset 0 -3px 10px -6px rgba(0, 0, 0, 0.2);
}

#EdFundLogoStatic {
    position: relative;
    height: 33vh;
    height: calc(6vw + 6vh + 3vmin);
    display: inline-flex;
    right: 1vw;
}

@keyframes littleBounce {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateY(calc((6vw + 6vh + 3vmin)/-20));
    }
}

.card-container {
    position: relative;
    width: 88vmin;
    height: 48vmin;
    perspective: 200vmin;
    margin-bottom: .25em;
    transition: all 500ms;
    transform-origin: top left;
    /* overflow: hidden; */
}

.thumb-container-wrapper {
    position: relative;
    width: 44vmin;
    height: 24vmin;
}

.thumb-container {
    position: relative;
    width: 44vmin;
    height: 24vmin;
}

.thumb-container:not(.full)::before,
.thumb-container:not(.full)::after {
    content: '';
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.thumb-container:not(.full):hover .card-container {
    filter: brightness(1.1);
}

.thumb-container .card-container {
    transition: inherit;
    transform: scale(.5);
}

.full-close {
    display: none;
}

.thumb-container.full {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.35);
    background-color: #fff2;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .5s;
}

.thumb-container.full .card-container {
    transition: transform 200ms;
    transform: scale(1.12);
    transform-origin: center;
}

.thumb-container.full .card-container .full-close {
    display: inline;
    cursor: pointer;
    float: right;
    position: relative;
    top: -1.3em;
    right: 4%;
    transition: transform 270ms cubic-bezier(.54, 1.03, .7, 1.21), opacity 200ms cubic-bezier(0, 1, 0, 1);
    padding-bottom: 1em;
}

.thumb-container.full .card-container .full-close>i {
    display: inline;
    background: #263238;
    background: var(--card-bg-color);
    color: #ffffff55;
    border-color: #ffffff55;
    border: 1px solid;
    border-bottom: none;
    padding: .6vmin .9vmin;
    padding: .75vmin 3vmin 1vmin 3vmin;
    border-radius: 100px 100px 0 0;
    font-size: calc(.6vw + .6vh + 0.3vmin);
    transition: none;
}

.thumb-container.full .card-container .full-close>i:hover {
    filter: brightness(1.15);
    color: #ffffff99;
    cursor: pointer;
    border-color: #fff5;
}

.thumb-container.full .card-container .full-close.hide {
    transform: translate(0, 5vmin);
    opacity: 0;
    transition: transform 200ms ease-in, opacity 200ms cubic-bezier(1, 0, 1, 0);
}

body.scroll-locked {
    overflow: hidden;
}

.cards {
    transition: all .5s ease;
    transform-origin: 100% 50%;
    /* transform: scale(.6); */
}

.cards>.card-divider {
    position: absolute;
    display: flex;
    align-items: center;
    height: 75vh;
    justify-content: center;
    left: 0;
    width: 100%;
    line-height: 1.2;
}

.cards>.card-divider>.description {
    max-height: 80%;
    display: flex;
    position: relative;
    justify-content: left;
    align-items: center;
    align-self: center;
    flex-direction: column;
    text-align: left;
}

.card-container.horizonal {
    /* --card-bg-color: #305665; */
    /* --card-bg-color: #819098; */
    /* pointer-events: none; */
    /* opacity: .85; */
}

.card-container.horizonal~.card-container.horizonal {
    margin-top: inherit;
}

.card-container.horizonal .text:before {
    background: #f4f4f4;
    border-bottom-color: #f4f4f4;
    border-bottom-width: 13vmin;
}

.card-container.horizonal .text:after {
    background: #f4f4f4;
    border-top-color: #f4f4f4;
}

.card-container.horizonal .card__content:before {
    background: #f4f4f4;
    border-bottom-color: #f4f4f4;
    border-bottom-width: 13vmin;
}

.card-container.horizonal .card__content:after {
    background: #f4f4f4;
    border-top-color: #f4f4f4;
    border-top-width: 12vmin;
    z-index: 0;
}

.card-container.horizonal .coming-soon {
    position: relative;
    bottom: 1vh;
    color: #8fe1f6;
    font-size: 2.5vmin;
}

.card-container.horizonal .horizon-summary {
    padding: 3em;
    background-color: #f4f4f4;
    color: #000;
    font-family: Inter;
    font-weight: 300;
    height: 100%;
    overflow-y: auto;
}

.card-container.horizonal .horizon-summary h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* transform: rotate(-25deg); */
    font-size: 8vmin;
    font-family: "Inter";
    font-family: "Novecento";
    font-weight: 300;
    -webkit-text-stroke: .5vmin var(--ef-blue-dark);
    color: #333;
    paint-order: stroke fill;
    text-transform: uppercase;
}

.cards.mirrored>.card-container.horizonal .horizon-summary {
    padding: 3em 4em;
}

.card-container.horizonal .card--back .logo {
    mix-blend-mode: plus-lighter;
}

.card-container.horizonal .horizon-summary .principal-investigator {
    font-style: italic;
    margin-bottom: 1.5vh;
    font-size: .85em;
}

.card-container.horizonal .horizon-summary h3 {
    width: 100%;
    font-size: 4vmin;
    margin-bottom: 1.5vh;
    font-family: "Inter";
    position: relative;
}

.card-container.horizonal .horizon-summary>* {
    position: relative;
    z-index: 1;
}

.card-container.horizonal .horizon-summary p {
    line-height: 1.5;
    font-size: 2.3vmin;
    margin-bottom: 1.5vh;
    position: absolute;
    inset: 0 0 auto;
    padding: 5vmin;
    color: #121212;
    /* background: #f4f4f4; */
    font-weight: 400;
    mix-blend-mode: multiply;
    height: 60%;
    display: flex;
    top: 20%;
    align-items: center;
}

.cards.mirrored {
    transform-origin: 0 50%;
}

.cards.mirrored .card {
    border-radius: 5vmin 500px 500px 5vmin;
}

.card {
    cursor: default;
    position: absolute;
    overflow: hidden;
    display: flex;
    width: 88vmin;
    height: 48vmin;
    border-radius: 500px 5vmin 5vmin 500px;
    color: white;
    outline: 1px solid transparent;
    background: #263238;
    background: var(--card-bg-color);
    box-shadow: inset 0.15vmin 0.15vmin 0.1vmin rgba(255, 255, 255, 0.25);
    backface-visibility: hidden;
    /* transition: transform 800ms cubic-bezier(0.63, -0.32, 0.4, 1.39); */
    transition: transform 800ms cubic-bezier(0.63, -0.25, 0.44, 1.27);
}

.card:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -0.5vmin;
    left: 2vmin;
    right: 2vmin;
    height: 1vmin;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.35);
    -webkit-filter: blur(0.5vmin);
    filter: blur(0.5vmin);
    z-index: -1;
}

.card--front {
    transform: rotateY(0deg);
}

.card--front--flip {
    transform: rotateY(-180deg);
}

.cards.mirrored .card--front--flip {
    transform: rotateY(180deg);
}

.card--back {
    border-radius: 10vmin 100vmin 100vmin 10vmin;
    border-radius: 1.5vmin;
    transform: rotateY(180deg);
    background-position: 10vmin 10vmin;
}

.cards.mirrored .card--back {
    border-radius: 100vmin 10vmin 10vmin 100vmin;
    border-radius: 2vmin;
    transform: rotateY(-180deg);
}

.card--back--flip {
    transform: rotateY(0);
}

.cards.mirrored .card--back--flip {
    transform: rotateY(-0);
}

.card__content {
    height: 100%;
    width: 100%;
}

.cards.mirrored .card__content:before,
.cards.mirrored .card__content:after {
    right: 0;
    left: inherit;
}

.cards.mirrored .card__content:before {
    border-radius: 0 1vmin 0 0;
}

.cards.mirrored .card__content:after {
    border-radius: 0 0 1vmin 0;
}

.card__content:before,
.card__content:after {
    content: "";
    height: 100%;
    box-sizing: content-box;
    position: absolute;
    left: 0;
    width: 2.5vmin;
    height: 12vmin;
    position: relative;
}

.card__content:before {
    background: #27ae60;
    background: #fdbc4e;
    top: 0;
    border-radius: 1vmin 0 0 0;
    border-bottom: 12vmin solid #f1c40f;
    border-bottom: 12vmin solid #187C9E;
}

.card__content:after {
    background: #9b59b6;
    background: #A5DEF1;
    bottom: 0;
    border-radius: 0 0 0 1vmin;
    border-top: 10vmin solid #3498db;
    border-top: 10vmin solid #79437e;
    z-index: -1;
}

.logo,
.text {
    flex: 0 1 auto;
    align-self: center;
}

.logo {
    height: 100%;
    width: 25%;
    padding-left: 4vmin;
    padding-left: 6vmin;
    display: grid;
    align-content: center;
    font-size: 14vmin;
}

.card--back .logo {
    position: absolute;
    right: 0;
    scale: 4;
    mix-blend-mode: overlay;
    opacity: 0.05;
    padding-left: 4vmin;
    transition: all 800ms 500ms;
}

.card--back.card--back--flip .logo {
    scale: 4;
    opacity: 0.16;
}

.cards.mirrored .card--back .logo {
    left: 0;
    right: inherit;
}

.logo__img {
    display: block;
    height: 100%;
    width: 100%;
    fill: white;
}

.text {
    width: 70%;
    padding: 2vmin 6.5vmin 2vmin 3vmin;
    text-transform: uppercase;
}

.cards.mirrored .text {
    padding: 2vmin 2vmin 2vmin 10.25vmin;
}

.cards.mirrored .text header.head {
    text-align: left;
}

.text:before,
.text:after {
    box-sizing: content-box;
    content: "";
    position: absolute;
    right: 0;
    width: 4%;
    height: 12vmin;
}

.cards.mirrored {
    margin-left: .25em;
}

.cards.mirrored .logo {
    order: 1;
}

.cards.mirrored .text:before,
.cards.mirrored .text:after {
    left: 0;
}

.cards.mirrored .text:before {
    border-radius: 1vmin 0 0 0;
}

.cards.mirrored .text:after {
    border-radius: 0 0 0 1vmin;
}

.text:before {
    background: #27ae60;
    background: #fdbc4e;
    top: 0;
    border-radius: 0 1vmin 0 0;
    border-bottom: 12vmin solid #f1c40f;
    border-bottom: 12vmin solid #187C9E;
}

.text:after {
    background: #9b59b6;
    background: #A5DEF1;
    bottom: 0;
    border-radius: 0 0 1vmin 0;
    border-top: 12vmin solid #3498db;
    border-top: 12vmin solid #79437e;
}

.head {
    text-align: right;
}

.head__name {
    margin-bottom: 2vmin;
    font-size: 5.4vmin;
    font-weight: 400;
    white-space: nowrap;
}

.head__name__fn {
    font-weight: 700;
}

.head__subtitle {
    opacity: 0.75;
    font-size: 2.85vmin;
    font-family: "Inter", sans-serif;
    font-weight: 100;
    text-transform: none;
}

/* "Special Education" overflows, force overflow to the left */
.head__name {
    direction: rtl;
}

.btn-close-study-summaries {
    font-size: 2vmin;
    color: #ffffff55;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 4%;
    height: 100%;
    background: #263238;
    background: var(--card-bg-color);
    z-index: 3;
}

.btn-close-study-summaries:hover {
    filter: brightness(1.15);
    color: #ffffff99;
    cursor: pointer;
}

.cards.mirrored .btn-close-study-summaries {
    right: inherit;
    left: 0;
}

.bar-open-study-summaries {
    position: absolute;
    top: 0;
    right: 0;
    width: 4%;
    height: 100%;
    z-index: 3;
}

.bar-open-study-summaries:hover {
    backdrop-filter: brightness(1.1);
    cursor: pointer;
}

.cards.mirrored .bar-open-study-summaries {
    right: inherit;
    left: 0;
}

.study-summaries::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    z-index: 1;
}

.study-summaries>li {
    list-style: none;
    position: relative;
    height: 12vmin;
    transition: height 100ms ease;
    overflow: hidden;
}

.study-summaries>li.grow {
    height: 48vmin;
    transition: height 100ms linear;
}

.study-summaries>li.grow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: 100%;
    background: linear-gradient(-100deg, rgba(0, 0, 0, 0.275), rgba(0, 0, 0, 0.15));
    opacity: .5;
    z-index: 1
}

.study-summaries>li.grow a {
    opacity: 0;
}

.study-summaries>li.shrink {
    height: 0;
    opacity: 0.1;
    transition: all 100ms linear;
}

.study-summaries>li.shrink a {
    opacity: 0;
}

.cards.mirrored .study-summaries>li {
    text-align: right;
}

.study-summaries>li.dive {
    z-index: 1;
    position: absolute;
}

.study-summaries>li.dive a {
    z-index: 1;
    animation: diveInOut 400ms linear;
    animation-fill-mode: forwards;
}

.study-summaries>li>a {
    text-decoration: none;
    display: inline-block;
    outline: none;
    color: white;
    font-size: 3vmin;
    line-height: 10vmin;

    font-size: 2.5vmin;
    line-height: 4vmin;
    height: 12vmin;

    padding-left: 2.45vmin;
    padding-right: 4%;
    cursor: pointer;
    transition: padding 300ms, backdrop-filter 300ms;
    position: relative;
    transform-origin: top center;
    width: 100%;
    z-index: 2;
}

.study-summaries>li>a>h2 {
    display: inline-block;
    min-width: 14vmin;
}

.study-summaries>li.study-1>a>h2,
.study-summaries>li.study-2>a>h2,
.study-summaries>li.study-3>a>h2 {
    text-transform: lowercase;
}

.study-summaries>li>a>div {
    margin-left: 1vmin;
    display: inline;
}

.study-summaries>li.issue-overview>a {
    padding-top: 2.2vmin;
}

.study-summaries>li.issue-overview>a>h2 {
    font-size: 4.5vmin;
}

.study-summaries>li:not(.issue-overview)>a {
    /* font-size: 2.25vmin; */
    display: flex;
    align-items: center;
    gap: 1.3vmin;
}

.study-summaries>li:not(.issue-overview)>a>h2::before {
    content: attr(data-study-number);
    font-size: 8em;
    position: absolute;
    top: 2vmin;
    left: -2vmin;
    display: flex;
    opacity: .14;
    color: var(--study-number-color);
    mix-blend-mode: soft-light;
}

.study-summaries>li>a:hover,
.study-summaries>li>a:focus {
    /* padding-right: 4vmin; */
    padding-left: 3.0vmin;
    backdrop-filter: brightness(.9);
}

.cards.mirrored .study-summaries>li>a:hover,
.cards.mirrored .study-summaries>li>a:focus {
    /* padding-right: 4vmin; */
    padding-right: 3.0vmin;
}

.study-summaries>li:first-child {
    background: #27ae60;
    background: #fdbc4e;
    border-radius: 1vmin 0 0;
}

.cards.mirrored .study-summaries>li:first-child {
    border-radius: 0 1vmin 0 0;
}

.study-summaries>li:nth-child(2) {
    background: #f1c40f;
    background: #187C9E;
}

.study-summaries>li:nth-child(3) {
    background: #3498db;
    background: #79437e;
}

.study-summaries>li:nth-child(4) {
    background: #9b59b6;
    background: #A5DEF1;
    border-radius: 0 0 0 1vmin;
}

.cards.mirrored .study-summaries>li:nth-child(4) {
    border-radius: 0 0 1vmin 0;
}

.note {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
    font-size: 3.5vmin;
    opacity: 0;
    pointer-events: none;
    animation: fadeInOut 4s;
    animation-fill-mode: forwards;
}

.btn-study-summaries {
    color: rgb(17 24 39 / 1);
    font-weight: 500;
    text-align: center;
    padding-top: 1.5vmin;
    padding-bottom: 1.5vmin;
    padding-left: 3vmin;
    padding-right: 3vmin;
    background-color: rgb(190, 190, 190);
    border-radius: 1.1vmin;
    align-items: center;
    display: inline-flex;
    margin-top: 3vmin;
    cursor: pointer;
    font-size: 2.1vmin;
    transition: all 200ms;
    border: none;
}

.btn-study-summaries>i {
    transform-origin: left;
    margin-left: 0.5rem;
    transition: transform 400ms cubic-bezier(0.63, -0.32, 0.4, 1.39);
}

.cards.mirrored .btn-study-summaries>i {
    margin-right: 0.5rem;
    margin-left: inherit;
}

.btn-study-summaries:hover {
    background-color: rgb(220, 220, 220);
}

.btn-study-summaries:hover>i {
    transform: rotateY(180deg) translateX(-1.2vmin);
}

@keyframes diveInOut {
    0% {
        transform: perspective(none) rotateX(0) scale(1);
    }

    25% {
        transform: perspective(200px) rotateX(30deg) scale(1.4);
        height: 10vh;
    }

    50% {
        transform: perspective(200px) rotateX(20deg) scale(1.6);
        height: 20vh;
    }

    100% {
        transform: perspective(200px) rotateX(0) scale(2);
        height: 30vh;
    }

    100% {
        transform: perspective(none) rotateX(0) scale(1);
        height: 60vh;
    }
}

@keyframes scaleUp {
    from {
        transform: perspective(200px) rotateX(-90deg) scale(0);
    }

    to {
        transform: perspective(none) rotateX(0) scale(1);
    }
}

@keyframes fadeInOut {
    0% {
        top: 0;
        opacity: 0;
    }

    25%,
    75% {
        top: 10%;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        top: 20%;
        opacity: 0;
    }
}

.chevron-container {
    position: relative;
    width: 28px;
    height: 56px;
}

.chevron {
    position: absolute;
    width: 28px;
    height: 8px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: moveChevron 3s ease-out infinite;
}

.chevron:first-child {
    animation: moveChevron 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
    animation: moveChevron 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #fff;
}

.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
}

.chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}

@keyframes moveChevron {
    25% {
        opacity: 1;

    }

    33% {
        opacity: 1;
        transform: translateY(30px);
    }

    67% {
        opacity: 1;
        transform: translateY(40px);
    }

    100% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}

#rotate-device {
    display: none;
    background: linear-gradient(to top, #aaa, #ddd);
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Inter;
}

main.is-portrait section {
    display: none;
}

main.is-portrait #rotate-device {
    display: flex;
}

.phone {
    height: 50px;
    width: 100px;
    border: 3px solid white;
    border-radius: 10px;
    animation: rotate 1.5s ease-in-out infinite alternate;
    /* display: none; */
}

#RotateEdFundLogo {
    transform: rotate(90deg) scale(.3) translateX(-180%);
}

#rotate-device .message {
    color: white;
    font-size: 1.3em;
    margin-top: 40px;
    /* display: none; */
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(-90deg)
    }

    100% {
        transform: rotate(-90deg)
    }
}

@media only screen and (max-device-width: 812px) and (orientation: landscape) {

    .phone,
    .message {
        display: block;
    }
}

/* Add this CSS to handle the expanded state */
#issue-overview.expanded {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    z-index: 10;
    overflow: auto;
}

#issue-overview.expanded h3 {
    display: none;
    /* Hide the original heading */
}

#issue-overview.expanded .description {
    display: block;
}

.card-back-details {
    display: none;
    font-family: "Inter";
    font-weight: 300;
    width: 100%;
    position: absolute;
    height: 100%;
}

.card-back-details::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: 100%;
    /* background: linear-gradient(100deg, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.035));
            background: linear-gradient(100deg, rgba(0, 0, 0, 0.375), rgba(0, 0, 0, 0.185)); */
    background: linear-gradient(100deg, rgba(0, 0, 0, 0.275), rgba(0, 0, 0, 0.15));
    z-index: 1;
}

.card-back-details.issue-overview {
    background: #fdbc4e;
}

.card-back-details.issue-overview .inner h3>i {
    background-color: #0006;
    color: transparent;
    text-shadow: 0px 1px 1px #feae4088;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    margin-left: .5vmin;
    opacity: .75;
    font-size: 3vmin;
}

.card-back-details.study-1 {
    background: #187C9E;
}

.card-back-details.study-2 {
    background: #79437e;
}

.card-back-details.study-3 {
    background: #A5DEF1;
}

.card-back-details.active {
    display: block;
}

.card-back-details .inner {
    padding: 0.25em;
    /* transform: scale(.5); */
    transition: all 300ms;
    /* backdrop-filter: brightness(0.75); */
    font-size: 2.5vmin;
    height: 100%;
    padding: 1em;
    padding-right: 2em;
    position: relative;
    z-index: 2;
    overflow-y: auto;
}

.card-back-details .inner::before {
    color: var(--study-number-color);
    font-family: "Novecento";
    font-weight: 900;
    font-size: 100vmin;
    position: fixed;
    top: -44vmin;
    left: -11vmin;
    display: flex;
    opacity: .15;
    mix-blend-mode: overlay;
}

.study-1 .inner::before {
    content: '1';
    color: var(--ef-blue-dark);
    filter: brightness(3);
    opacity: .08;
}

.study-2 .inner::before {
    content: '2';
    color: var(--ef-purple-dark);
    filter: brightness(2);
    opacity: .08;
}

.study-3 .inner::before {
    content: '3';
    color: var(--ef-blue-light);
    filter: brightness(4);
    opacity: .075;
}

.card-back-details .inner .close {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
    padding: .5em;
    opacity: .75;
}

.card-back-details .inner .close:hover {
    opacity: 1;
    cursor: pointer;
}

.card-back-details .inner h3,
.card-back-details .inner p {
    margin-bottom: 1em;
}

.card-back-details .inner h3 {
    width: 100%;
    font-size: 4vmin;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    font-family: "Inter";
    position: relative;
}

.card-back-details .inner h3.top {
    margin-top: 0;
}

.card-back-details .inner .toggle-more {
    position: relative;
    display: block;
    color: white;
    margin-top: 1em;
    transform: rotate(0deg);
    transition: all 200ms;
}

.card-back-details .inner .toggle-more a {
    display: inline-block;
    width: 2em;
    width: 100%;
    padding: 0 .1em;
}

.card-back-details .inner .toggle-more a:hover {
    filter: brightness(1.1);
}

.card-back-details .inner .toggle-more a i {
    transform-origin: center;
    transform: rotate(0deg);
    transition: all 200ms;
}

.card-back-details .inner .toggle-more.active a i {
    transform: rotate(180deg);
}

.card-back-details .inner .toggle-more>a {
    color: #f1c40f;
}

.card-back-details .study-citation {
    font-size: .6em;
    line-height: 1.3;
    color: #121212;
    padding: 2vmin 2vmin 2vmin 0;
    position: relative;
}

.card-back-details .study-citation::before {
    background-color: #fffa;
    content: '';
    width: 104%;
    position: absolute;
    left: -3vmin;
    display: block;
    height: 100%;
    z-index: -1;
    top: 0;
    border: 1px solid #fff2;
}

.card-back-details li {
    list-style: none;
    position: relative;
    padding: 0 0 0 2em;
    margin: 0 0 0.5em 10px;
    transition: 0.12s;
    line-height: 1.2;
    font-size: 2vmin;
    margin-bottom: 1.5vh;
}

.card-back-details li::before {
    position: absolute;
    content: "•";
    font-family: Arial;
    color: #FFF;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 2em;
    opacity: 0.5;
    line-height: 0.75;
    transition: 0.5s;
}

.card-back-details li:hover {
    color: #FFF;
}

.card-back-details li:hover::before {
    transform: scale(1.25);
    opacity: 1;
    text-shadow: 0 0 4px;
    transition: 0.1s;
}

.italics {
    font-style: italic;
}

.study-citation .publication,
.study-citation .volume {
    font-style: italic;
}

.card-back-details .inner p {
    line-height: 1.2;
    font-size: 2vmin;
    margin-bottom: 1.5vh;
}

.card-back-details a {
    color: white;
}

.curator {
    /* font-size: 1.5vmin;
            line-height: 2.2vmin;
            opacity: .5;
            padding-top: 1vmin; */

    font-size: 2.1vmin;
    line-height: 2.2vmin;
    padding-top: 2vmin;
    text-transform: none;
    font-family: 'Inter';
    /* christopher hack */
    font-size: 1.9vmin;
}

.curator .caption {
    color: var(--ef-yellow);
}

.study-summaries .issue-overview h3 {
    line-height: 2.7vmin;
    margin-left: 2.5vmin;
}

.hidden {
    display: none;
}

.study-tag {
    font-weight: 300;
}

section.story {
    font-weight: 300;
    color: #383838;
    color: #ffffffe5;
    padding: 2em 20vw;
}

section.story.research-area-card {
    padding-top: 0;
    padding-bottom: 6vmin;

    /* background: #0003;
            background: linear-gradient(0deg, #0003, #0000002a, #0003); */

    /* background-color: #fff4;
            transform: skewY(5deg); */
}

/* section.story.research-area-card::before {
            content: '';
            background-color: #0001;
            transform: skewY(-10deg) translate(-20vw, -20%);
            position: absolute;
            width: 100%;
            height: 100%;
        } */

section.story.research-area-card::before {
    background: #fffa;
    background: linear-gradient(to top, #ffff, #fff9, #ffff);
    opacity: .1;
    width: 100vw;
    height: 37vmin;
    content: '';
    position: absolute;
    display: inline-block;
    left: 0;
    z-index: 0;
    transform: skewY(2.5deg);
}

section.story.research-area-card::after {
    background: linear-gradient(to top, #ffff, #fffa, #ffff);
    opacity: 0.10025;
    display: inline-block;
    width: 100vw;
    height: 37vmin;
    content: '';
    position: absolute;
    left: 0;
    z-index: 0;
    transform: skewY(-2deg) translateY(-33vmin);
    transform-origin: left;
}

/* section.story.research-area-card>* {
            transform: skewY(-5deg);
        } */

section.story>p,
section.umbrella>p {
    margin-bottom: 3.5vh;
    text-align: justify;
    font-family: "Inter";
    font-size: calc(1vw + 1vh + .5vmin);
    line-height: 1.618033989;
}

section.umbrella>p {
    line-height: 1.35;
}

section.story>div.card-thumb {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-top: 5vmin;
    padding-bottom: 5vmin;
    z-index: 1;
    position: relative;
}

section.story>div.card-thumb>p {
    font-family: "Inter";
    font-size: calc(.8vw + .8vh + .4vmin);
    line-height: 1.618033989;
    margin-left: 3vmin;
    align-self: center;
    max-width: 59vmin;
}

section.story>.question {
    margin-top: 6vh;
    margin-bottom: 3vh;
    font-family: "Castoro";
    line-height: 1;
    font-size: calc(1.95vw + 1.75vh + 1vmin);
    font-style: italic;
    color: #feae40e5;
}

section.story>p:first-of-type {
    font-size: calc(1vw + 1vh + .5vmin);
    line-height: 1.618033989;
    text-align: justify;
    /* margin-bottom: calc(3vw + 3vh + 1.5vmin); */
}

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    section.story>p:first-of-type::first-letter {
        -webkit-initial-letter: 3;
        initial-letter: 3;
        margin-right: 1vmax;
        font-family: "Castoro", serif;
    }
}

section.story>h2 {
    /* margin: 6vh auto;
            line-height: 1;
            font-size: calc(1.8vw + 1.8vh + .9vmin);
            margin-top: 20vh;
            position: relative; */
    margin: 6vmin auto;
    line-height: 1;
    font-size: calc(2.2vw + 2.2vh + 1.2vmin);
    position: relative;
    display: flex;
}

section.story>h2>i {
    /* transform: scale(2); */
    font-size: calc(4.4vw + 4.4vh + 2.4vmin);
    transform-origin: left 1vmin;
    color: #feae40;
    position: relative;
    z-index: -1;
    float: left;
    opacity: .9;
    margin-right: 3vmin;
    text-shadow: 0 0 black;
    filter: drop-shadow(1px 1px 0px black);
}

section.story>h2>.research-area {
    display: inline-block;
    font-weight: 300;
    /* left: 0;
            position: absolute; */
}

section.story>h2>.research-area>b {
    font-weight: bold;
}

/* .research-area-break {
            display: block;
            width: 100%;
            height: 1px;
            background: #0003;
            margin-top: 3vh;
            margin-bottom: 3vh;
        } */


.research-area-break {
    margin: auto;
    margin-top: 5vmin;
    width: 80%;
    position: relative;
}

.research-area-break .shadow {
    overflow: hidden;
    height: 20px;
}

.research-area-break .shadow:after {
    content: '';
    display: block;
    margin: -25px auto 0;
    width: 100%;
    height: 25px;
    border-radius: 125px/12px;
    box-shadow: 0 0 8px #000c;
}

@media screen and (max-width: 1100px) {

    section.intro,
    section.story,
    section.umbrella {
        padding-right: 10vw;
        padding-left: 10vw;
    }

    .research-area-break {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {

    section.intro,
    section.story,
    section.umbrella {
        padding-right: 3vw;
        padding-left: 3vw;
    }

    section.story>p {
        /* font-size: calc(1.5vw + 1.5vh + .75vmin); */
    }
}

section.story.research-area-card~.research-area-break {
    margin-top: 15vmin;
}

.bg-blur {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #0003, #0000002a, #0003);
    background: linear-gradient(0deg, #fffa, #fffc, #fffa);
    backdrop-filter: blur(5px);
    z-index: 0;
    transition: all .5s;
}

.bg-blur.active {
    display: block;
    transition: all .5s;
}

.blur {
    filter: blur(5px);
}

.intro .downloads {
    position: absolute;
    bottom: 10vmin;
    display: block;
    text-align: center;
    font-size: calc(.8vw + .8vh + .4vmin);
}

.intro .downloads .message {
    font-size: calc(.7vw + .7vh + .35vmin);
    font-family: "Inter";
    color: #fffc;
    text-transform: uppercase;
}

.intro .downloads .links {
    width: 100vw;
    color: var(--ef-blue-light);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5vmin;
    margin-top: 5px;
}

.intro .downloads .links a {
    color: var(--ef-blue-light);
    text-decoration: none;
    cursor: pointer;
}

.intro .downloads .links div::after {
    content: "\f019";
    margin-left: .75vmin;
    font-family: var(--fa-style-family-classic);
}