.style__panel--l79Ph {
    width: 100%;
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 0 5px #000;
    perspective: 2px;
}

.style__text-container--1DwRZ {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    padding: 20px;
    color: white;
    background: rgba(0,0,0,0.52157);
    font-size: 36px;
}

.style__splash--2uOnJ {
    height: 300vh;
}

.style__parallax--NAo15::after {

    /* Display and position the pseudo-element */
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
    transform: translateZ(-4px) scale(5);
    /* Force the background image to fill the whole element. */
    background-size: cover;
    /* Keep the image from overlapping sibling elements. */
    z-index: -14;
}

.style__drew-berry-atpase--24xZN::after {
    background-image: url("/assets/drew_berry_ATP_synthase.png");
}

.style__tem--3cAv0::after {
    background-image: url("/assets/TEM.jpg");
}

.style__david-goodsell-mito--9xOJu::after {
    background-image: url("/assets/david-goodsell-mito.png");
}

.style__drew-berry-atpase--24xZN::after {
    background-image: url("/assets/drew_berry_ATP_synthase.png");
}
.style__panel--2JU9s {
    width: 100%;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    z-index: 30;
}

.style__solid-background--9pzDc {
    background: var(--panel-bg-color);
    overflow: hidden;
}

.style__text-container--1DObo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    padding: 20px;
}

.style__panel--2BkwI {
    width: 100%;
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
    background: var(--section-bg-color);
    color: white;
    z-index: 30;
}

.style__text-container--2fqzR {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    padding: 40px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}

.style__text-container--2fqzR .style__title--2Qt4m {
    flex: 3 1;
    margin-left: 15%;
}

.style__text-container--2fqzR .style__title--2Qt4m h4{
    text-transform: uppercase;
}

.style__text-container--2fqzR .style__learning-goals--1Nlj3 {
    flex: 1 1;
    font-size: 18px;
    font-weight: 200;
}

.style__chart--x5oOn {
    position: sticky;
    width: 100%;
    height: 100vh;
    top: 10%;
    text-align: center;
    z-index: 33;

    /* Safari workarounds: */
    display: block;
    position: -webkit-sticky;
    opacity: 1;
    transition: opacity 500ms ease-out;
}

.style__background--2k-gu {
    background: var(--light-purple);
}

.style__fade--3Hkzu {
    opacity: 0.0;
    z-index: var(--underneath);
}

.style__chart--x5oOn.style__constrain--2O-Ff {
    max-width: 67.67%;
    box-sizing: border-box;
    padding: 3em;
}

.style__img-overlay-wrap--1d1_y {
    position: relative;
    display: inline-block;
    /* <= shrinks container to image size */
    transition: transform 150ms ease-in-out;
}

.style__img-overlay-wrap--1d1_y .style__img-background--1YMUU {
    /* <= optional, for responsiveness */
    display: block;
    max-width: 100%;
    height: auto;
}

.style__img-overlay-wrap--1d1_y .style__svg-overlay--VzLbD {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}

.style__img-overlay-wrap--1d1_y .style__svg-overlay--VzLbD.style__active--3Pa1H {
    display: block;
}


.style__panel--3Cuor {
    width: 100%;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    z-index: 30;
}

.style__solid-background--9N9nU {
    background: var(--panel-bg-color);
    overflow: hidden;
}

.style__text-container--1Y69P{
    flex: 1 1;
    margin: auto;
    padding: 1em;
}

.style__image-container--1H4iy {
    flex: 2 1;
    margin: auto 2em;
    text-align: center;
}

.style__image-container--1H4iy img {
    max-height: 90vh;

}
.style__chart--gpatm {
    width: 100%;
    height: 90vh;
    top: 0;
    text-align: center;
    z-index: 33;
    display: block;
}



.style__panel--1fOIR {
    width: 33.33%;
    position: absolute;
    right: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.style__solid-background--3kH-s {
    background: var(--panel-bg-color);
    overflow: hidden;
}

.style__text-container--15tRY{
    flex: 1 1;
    margin: auto;
    padding: 1em;
}

.style__image-container--2IV0d {
    flex: 2 1;
    margin: auto 2em;
}

.style__image-container--2IV0d img {
    width: 100%;
}
.mixins__input-button-wrapper--s5Vdt {
    position: relative;
    height: 70px;
    padding: 0 20px - 1px;
    color: #3b3649;
    line-height: 70px - 2px;
    background: #f2f2f2;
    cursor: pointer;
    transition: color 0.3s, background 0.3s, border-color 0.3s;
    display: flex;
    box-sizing: border-box;
    margin: 20px 6px;
}

.mixins__input-button-wrapper-span--3Wm8X {
    margin: auto;
    padding: 0 10px;
}

.mixins__input-button--3yZi3 {
    -webkit-appearance: none;
    display: block;
    width: 0;
    height: 0;
    margin-left: 0;
    pointer-events: none;
}

.mixins__input-button-wrapper-disabled--1OCYq {
    cursor: not-allowed;
}

.mixins__input-button-wrapper-not-answer--1WKVi {
    color: lightgray;
}

.mixins__input-button-wrapper-checked--3Jmbq {
    border: solid 6px var(--input-button-border-color-selected);
    margin:  20px 0;
}

.mixins__input-button-wrapper-correct--S4dP1 {
    border: solid 6px var(--input-button-border-color-correct);
    margin: 20px 0;
}

.mixins__input-button-wrapper-incorrect--Hpk-d {
    border: solid 6px var(--input-button-border-color-incorrect);
    margin: 20px 0;
}

.mixins__input-button-wrapper-right-answer--2rp8o {
    border: solid 6px var(--input-button-border-color-selected);
    margin: 20px 0;
}

.style__container--i6ijg{

    display: inline-block;
    line-height: unset;
}

.style__radio-button-wrapper--1HnGK {
}

.style__text--1a5nk {
}

.style__radio-button--2c8dk {

}
.style__disabled--IYDB9 {
}
.style__not-answer--2yYY4 {
}
.style__checked--20_4P {
}

.style__correct--IxG1q {
}

.style__incorrect--BhgQ5 {
}

.style__right-answer--2r-8s {
}

.style__container--i6ijg.style__image-buttons--2TcEu {
    display: flex;
    align-items: center;

}
.style__image-buttons--2TcEu .style__radio-button-wrapper--1HnGK {
    height: 20vh;
    width: 200px;
    overflow: hidden;
}

.style__image-buttons--2TcEu .style__radio-button-wrapper--1HnGK img {
    height: 100%;
    width: 100%;
}

.style__question-image--3b_3a {
    height: 20vh;
}

.style__question-image--3b_3a img {
    height: 100%;
}

.style__container--ELwB- {
    display: inline-block;
    line-height: unset;
    margin: 20px;
}

.style__checkbox-button-wrapper--2iyMr {
}

.style__text--gNV73 {
}

.style__checkbox-button--37L1w {
}

.style__disabled--2Dfdg {
}

.style__not-answer--2jLa5 {
}

.style__checked--3tuDs {
}

.style__correct--3_ScY {
}

.style__incorrect--1nCxE {
}

.style__right-answer--3Ifkn {
}

.style__container--ELwB-.style__image-buttons--qF2TO {
    display: flex;
}

.style__image-buttons--qF2TO .style__checkbox-button-wrapper--2iyMr {
    height: 300px;
    width: 300px;
    overflow: hidden;
}

.style__image-buttons--qF2TO img {
    height: 100%;
    width: 100%;
}

.style__question-image--2a71v {
    height: 200px;
}

.style__question-image--2a71v img {
    height: 100%;
}
.style__container--3d1fq {
    min-width: 410px;
    display: flex;
    flex-flow: column;
}

.style__hypothesis--2uCxz{
    color: var(--disabled-button-bg-color);
}
.style__container--1BC-F {
    min-width: 410px;
    display: flex;
    flex-flow: column;
}

.style__container--2BVJi {
    min-width: 410px;
    display: flex;
    flex-flow: column;
}

.style__submit--121t2 {
    -webkit-appearance: none;
    border: none;
    width: 140px;
    height: 44px;
    text-transform: uppercase;
    background-color: var(--active-button-bg-color);
    font-size: 18px;
    text-align: center;
    color: var(--active-button-text-color);
    margin: 6px;
    cursor: pointer;
}

.style__submit--121t2.style__disabled--3RcLu {
    background-color: var(--disabled-button-bg-color);
    color: var(--disabled-button-text-color);
    cursor: not-allowed;
}
.style__container--33Quq {
    -webkit-appearance: none;
    border: none;
    width: 140px;
    height: 44px;
    text-transform: uppercase;
    background-color: var(--active-button-bg-color);
    font-size: 18px;
    text-align: center;
    color: var(--active-button-text-color);
    margin: 6px;
    cursor: pointer;
}

.style__container--33Quq.style__disabled--2Uij5 {
    background-color: var(--disabled-button-bg-color);
    color: var(--disabled-button-text-color);
    cursor: not-allowed;
}
.style__container--3v4b0 {
    position: absolute;
    display: flex;
    bottom: 0;
    right: 25%;
    width: 50%;
    justify-content: space-evenly;
    margin-bottom: 20px;
    z-index: 40;
}

.style__item--2SVQY {
    margin: auto 2px;
}

.style__slider--2wO3I {
    flex: 3 1;
    margin: auto 10px;
}
.style__container--3Wq98 {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-flow: column;
}

.style__container--3Wq98 .plot-container {
    padding-bottom: 20px!important;
    background: rgba(255, 255, 255, 0.7);
}
.style__container--1NRli {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.style__panel--2J_hC {

    position: sticky;
    width: 100%;
    height: 100vh;
    top: 0;
    text-align: center;
    z-index: 33;
    display: block;
    position: -webkit-sticky;
    opacity: 1;
    max-width: 67.67%;
    box-sizing: border-box;
    padding: 3em;
}


.style__fade--yyXXC {
    opacity: 0.0;
    transition: opacity 200ms ease-out;
    z-index: var(--underneath);
}

.style__panel--2J_hC div {
    width: 50vw;
    height: 80vh;
    padding: 40px;
}

.style__panel--2J_hC div canvas {
    height: 100%;
}
.style__container--2eGY4 {
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: relative;
    font-size: 20px;
    margin: 0 auto 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
    perspective: 2px;
    height: 100vh;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body,
main {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--light-purple);
    font-family: var(--typeface);
    color: var(--text-color)
}


:root {
    --dark-purple: #3b3649;
    --white: #ffffff;
    --light-purple: #bab5c9;
    --dark-gray: #3b3649;

    /* typography */
    --text-color: var(--dark-gray);

    /* buttons */
    --disabled-button-bg-color: #7a7688;
    --disabled-button-text-color: var(--light-purple);
    --active-button-bg-color: var(--dark-purple);
    --active-button-text-color: var(--light-purple);
    /* checkbox and radio buttons */
    --input-button-bg-color: #f2f2f2;
    --input-button-border-color-selected: var(--dark-gray);
    --input-button-border-color-correct: #2cc102;
    --input-button-border-color-incorrect: #d0011a;

    /* panels */
    --section-bg-color: var(--dark-purple);
    --section-text-color: var(--white);
    --panel-bg-color: var(--light-purple);
}
:root {
    --typeface: 'Overpass', sans-serif;
}

.section-title {
    font-family: 'Overpass-Light';
    font-weight: 800;
}

:gobal(.typography__section-subtitle--2MFuY) {
    font-family: 'Overpass-ExtraBold';
}