:root {
    --ccgreen: #009e6c;
    --taupe: #d9c9a9;
    --darksage: #b2c4a9;
    --sage: #eef4e8;
    --mint: #eef4e8;
}

.cc {
    background: var(--white);
    color: var(--main_bg_color);
}

.bg_img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate3d(-50%, -25rem, 0) rotateZ(12deg);
    /* 	perspective-origin: 50% 18%; */
    max-width: 96rem;
    width: 92vw;
    z-index: 999;
    backface-visibility: hidden;
}

.bg_img img {
    /* 	transform: rotateZ(8deg); */
}

/* .proj_intro {
    grid-template-columns: 1fr 3fr 3fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "flush-2 intro_text text_2 filler"
        "blank meta meta .";
} */

/* .proj_intro .text {
    padding-top: 0;
    padding-right: calc(var(--gridGap) / 2);
}

.proj_intro .proj_meta {
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.text_2 {
    padding-left: calc(var(--gridGap) / 2);
    grid-area: text_2;
} */

/*Animating section one*/
.large_section {
    position: relative;
    padding-top: 25vh;
    /* 	padding: calc(4*var(--base_line_height)) 0; */
    color: var(--main_text_color);
}

.large_section .figure_main {
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--gridSize));
    grid-gap: var(--gridGap);
}

.text_objective {
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--gridSize));
    grid-row: repeat(2, auto);
    grid-row-gap: var(--gridGap);
    padding-top: 10vh;
    padding-bottom: 30vh;
}

.text_objective .text {
    grid-column: 2 / 6;
}

.text_objective .goals {
    grid-column: 2 / var(--cols);
    justify-content: space-between;
    grid-row: 2;
}

.text_objective .each_goal {
    flex: 1 0 30%;
    max-width: 30%;
    position: relative;
}

.text_objective .each_goal:before {
    position: absolute;
    left: -1em;
    top: -1em;
    content: "";
    z-index: -1;
    right: -1em;
    bottom: -1em;
    /* 	border-radius: var(--base_font_size); */
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
    transition: all 0.15s ease-in;
}

.text_objective .each_goal:hover:before {
    background: var(--ccgreen);
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

.large_section:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4vw;
    right: 4vw;
    z-index: -1;
    background: var(--secondary_bg_color);
    /* 	background: #CFDDED; */
}

hr.darker {
    background: var(--main_bg_color);
}

.large_section .figure_main img {
    grid-column: 2 / 8;
    border-radius: 4rem;
}

.large_section .interviews {
    margin: 0 auto 0;
    max-width: calc(50% + 2 * var(--gridGap));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flash_cards {
    padding: calc(1 * var(--base_line_height)) 0
        calc(2 * var(--base_line_height));
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.flash_card {
    padding: calc(1 * var(--base_line_height)) calc(1 * var(--base_line_height))
        calc(1 * var(--base_line_height));
    max-width: 35rem;
    background: var(--brand_color);
    font-size: var(--medium_font_size);
    line-height: calc(1 * var(--base_line_height));
    color: var(--main_bg_color);
    transform-origin: left top;
    display: inline-flex;
    flex: 1 0 35rem;
}

.flash_card p {
    position: relative;
    padding-top: 5rem;
}

.flash_card p:before {
    content: open-quote;
    font-size: 10rem;
    line-height: 1;
    display: block;
    color: var(--text_shadow);
    font-weight: bold;
    font-family: var(--serif);
    position: absolute;
    top: 0;
    left: 0;
}

.flash_card:first-of-type {
    background: var(--taupe);
    transform: rotate(3.5deg);
}

.flash_card:nth-of-type(2) {
    background: var(--sage);
    transform: rotate(-3.5deg) translate3d(-3.2rem, 7rem, 0);
}

.flash_card:nth-of-type(3) {
    background: var(--mint);
    transform: rotate(-2.25deg) translate3d(-1.6rem, 0rem, 0);
}

.flash_card:nth-of-type(4) {
    background: var(--darksage);
    transform: rotate(4.25deg) translate3d(0rem, 0rem, 0);
}

.grid_appear_container {
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /*     width: 120rem; */
    margin-top: 25rem;
    padding-bottom: 15vh;
}

.large_section .grid_appear {
    position: relative;
    display: grid;
    grid-gap: calc(var(--gridGap) / 1);
    grid-template-columns: repeat(9, var(--gridSize));
    align-items: center;
}

.grid_appear figure {
}

.grid_appear img {
    display: block;
}

.grid_appear > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-row: 1;
}

.grid_appear figure {
    width: 25rem;
    filter: drop-shadow(3px 7px 6px rgba(0, 0, 0, 0.35));
    border-radius: 2.5rem;
    overflow: hidden;
}

.grid_appear .grid_cell.large {
    grid-column: 3 / 4;
    width: 40rem;
}

.grid_appear .grid_cell_1 {
    grid-column: 1 / 2;
}

.grid_appear .grid_cell_2 {
    grid-column: 2 / 3;
}

.grid_appear .grid_cell_3 {
    grid-column: 4 / 5;
}

.grid_appear .grid_cell_4 {
    grid-column: 5 / 6;
}

.grid_appear .grid_cell_5 {
    grid-column: 6 / 7;
}

.grid_appear .grid_cell_6 {
    grid-column: 7 / 8;
}

.grid_appear .grid_cell.large figure {
    width: 37.5rem;
}

.ipad-story {
    display: grid;
    grid-gap: calc(var(--gridGap) / 1);
    grid-template-columns: repeat(var(--cols), var(--gridSize));
    align-items: center;
    /* 	padding-left: 4vw; */
}

.ipad-story .figure_wall.no_padding {
    /* 	margin-right: -4vw; */
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 0;
    padding-right: 0;
}

.ipad-story .text {
    grid-column: 2 / 5;
    flex-direction: column;
    justify-content: flex-start;
}

.cycle-wrapper {
    /* 	width: 80%; */
    position: relative;
}
.rw-sentence {
    margin: 0;
    text-align: left;
}
.rw-words {
    display: inline;
    text-indent: 10px;
}
.rw-words-1 span {
    position: absolute;
    opacity: 0;
    /* 	overflow: hidden; */
    color: var(--brand_color);
    -webkit-animation: rotateWord 12s linear infinite 0s;
    -ms-animation: rotateWord 12s linear infinite 0s;
    animation: rotateWord 12s linear infinite 0s;
    height: 1em;
}
.rw-words-1 span:nth-child(2) {
    -webkit-animation-delay: 2s;
    -ms-animation-delay: 2s;
    animation-delay: 2s;
}
.rw-words-1 span:nth-child(3) {
    -webkit-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
}
.rw-words-1 span:nth-child(4) {
    -webkit-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.rw-words-1 span:nth-child(5) {
    -webkit-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}
.rw-words-1 span:nth-child(6) {
    -webkit-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}

.objective_two {
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--gridSize));
}

.objective_two .heading {
    grid-column: 3 / span 4;
    grid-row: 1;
}

.objective_two .problem_statement {
    grid-column: 3 / span 4;
    grid-row: 2;
}

.objective_two .text {
    grid-column: 2 / span 6;
    grid-row: 3;
    flex-direction: row;
    padding-top: 5.0625vh;
    padding-bottom: 10.125vh;
}

.objective_two figure {
    grid-column: 1 / -1;
    grid-row: 4;
}

@-webkit-keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(0.25em);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -webkit-transform: translateY(-0.25em);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(0.25em);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -webkit-transform: translateY(-0.25em);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(0.25em);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -webkit-transform: translateY(-0.25em);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 768px) {
    .proj_heading {
        padding-top: 30vh;
        min-height: inherit;
    }
    .bg_img {
        transform: translate3d(-50%, -12.5vh, 0) rotateZ(21deg);
    }
    .proj_intro {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro_text" "text_2"
            "meta" "meta";
    }
    .text,
    .text_2 {
        padding: 0;
    }
    .proj_intro .proj_meta {
        flex-direction: column;
    }
    .text_objective .text,
    .text_objective .goals {
        grid-column: 1 / -1;
        flex-direction: column;
    }
    .text_objective .each_goal {
        flex: 1 0 100%;
        max-width: 100%;
    }
    .large_section .interviews {
        max-width: 100%;
    }
    .flash_cards {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .flash_card {
        max-width: 50%;
    }
}