@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'Barlow';
	src: url('../fonts/Barlow-Regular.ttf');
}

@font-face {
	font-weight: 500;
	font-style: normal;
	font-family: 'Barlow';
	src: url('../fonts/Barlow-Medium.ttf');
}

@font-face {
	font-weight: 500;
	font-style: italic;
	font-family: 'Barlow';
	src: url('../fonts/Barlow-MediumItalic.ttf');
}

@font-face {
	font-weight: bold;
	font-style: normal;
	font-family: 'Barlow';
	src: url('../fonts/Barlow-Bold.ttf');
}

@font-face {
	font-weight: 500;
	font-style: normal;
	font-family: 'Barlow Semi Condensed';
	src: url('../fonts/BarlowSemiCondensed-Medium.ttf');
}

@font-face {
	font-weight: 600;
	font-style: normal;
	font-family: 'Barlow Semi Condensed';
	src: url('../fonts/BarlowSemiCondensed-SemiBold.ttf');
}

@font-face {
	font-weight: 600;
	font-style: italic;
	font-family: 'Barlow Semi Condensed';
	src: url('../fonts/BarlowSemiCondensed-SemiBoldItalic.ttf');
}

@font-face {
	font-weight: bold;
	font-style: normal;
	font-family: 'Barlow Semi Condensed';
	src: url('../fonts/BarlowSemiCondensed-Bold.ttf');
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    background-color: #FFFFFF;
    margin: 0 auto;
    overflow-x: hidden;
}

#tooSmall {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20000;
    background-color: #00473B;
    font-family: 'Nunito Sans',sans-serif;
    color: #ffffff;
    padding: 0 24px;
    font-size: 24px;
    line-height: 1.25;
}

section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: auto;
    min-height: 100vh;
    z-index: 10;
}

section#disclaimer {
    display: block;
    padding: 30px 50px;
    text-align: center;
}

section#video {
    display: block;
    min-height: auto;
    margin-bottom: -5px;
}

section#video video {
    height: auto;
    width: 100%;
}

section#video .fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 120px;
    background: -moz-linear-gradient(360deg, rgba(243,245,244,1) 10%, rgba(243,245,244,0) 100%);
    background: -webkit-linear-gradient(360deg, rgba(243,245,244,1) 10%, rgba(243,245,244,0) 100%);
    background: linear-gradient(360deg, rgba(243,245,244,1) 10%, rgba(243,245,244,0) 100%);
    z-index: 30;
}

/* CELLS */

#cells {
    /* background-image: url('../images/Group\ 10.png');
    background-position: center center;
    background-repeat: no-repeat; */
    background-color: #FFFFFF;
    z-index: 5;
}

#cells .background {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(140, 156, 150, 0.1);
}

#cells_title {
    width: auto;
    max-width: 438px;
    height: auto;
}

.cells, .alt_cells {
    position: absolute;
    width: auto;
    height: auto;
    opacity: 0;
}
#rbc_1 {
    left: -106px;
    top: 86px;
}
#rbc_2 {
    left: auto;
    top: auto;
    bottom: 77px;
    right: 134px;
}
#cell_1 {
    left: 11px;
    top: 160px;
}
#cell_2 {
    left: auto;
    right: -105px;
    bottom: 192px;
}
#hspc_1 {
    left: -104px;
    bottom: 96px;
}
#hspc_2 {
    left: auto;
    right: -9px;
    top: 80px;
}
#hspc_3 {
    left: auto;
    right: 233px;
    top: 311px;
}
#platelets {
    left: 200px;
    bottom: 204px;
}

/* FLARE PARALLAX */
#flare {
    position: relative;
    min-height: 40vh;
    z-index: 1;
}

#juuj {
    position: absolute;
    top: 0 !important;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-image: url('../images/flare-background.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

#hspc1 {
    position: absolute;
    width: 50%;
    max-width: 545px;
    height: auto;
    top: 90px;
    left: 0;
    animation: x1lg 25s linear infinite alternate;
    z-index: 30;
}

#hspc2 {
    position: absolute;
    width: 32%;
    max-width: 315px;
    height: auto;
    top: 80px;
    left: 10%;
    animation: x2lg 20s linear infinite alternate;
    z-index: 20;
}

#hspc3 {
    position: absolute;
    width: 24%;
    max-width: 215px;
    height: auto;
    bottom: 30%;
    right: 20%;
    animation: x2lg 20s linear infinite alternate;
    z-index: 10;
}

#hspc1 img,
#hspc2 img,
#hspc3 img {
    width: 100%;
    height: auto;
}
#hspc1 img {
    animation: y1lg 20s linear infinite alternate;
}
#hspc2 img {
    animation: y2lg 20s linear infinite alternate;
}
#hspc3 img {
    animation: y3lg 20s linear infinite alternate;
}

#message {
    background-color: #F4F6F5;
    z-index: 10;
    min-height: auto;
    flex-direction: column;
    overflow: hidden;
    height: auto;
}

#message .title {
    position: absolute;
    top: 120px;
    font-family: 'Barlow Semi Condensed';
    font-weight: bold;
    color: #BD295E;
    font-size: 34px;
    line-height: 1.1;
    z-index: 10;
    text-align: center;
}

#message #arrow {
    position: relative;
    width: 2860px;
    height: 1275px;
    z-index: 1;
    margin-top: -8%;
    margin-bottom: -18%;
}

#website-video {
    width: 100vw;
    background-color: #FFFFFF;
    min-height: auto;
}

#website-video:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 10%;
    height: 100%;
    background-color: #FFFFFF;
    z-index: 5;
}

#website-video:after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 10%;
    height: 100%;
    background-color: #FFFFFF;
    z-index: 5;
}

#website-video #scrolling {
    width: 100vw;
    height: auto;
}

#cells_second {
    align-items: unset;
    justify-content: unset;
    display: block;
    text-align: center;
    /* background-image: url('../images/GUIDE.jpg'); */
    background-size: auto 100%;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #F4F6F5;
    height: 780px;
    min-height: auto;
}

#cells_second .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: #F4F6F5; */
}

#cells_second .cells, 
#cells_second .alt_cells {
    opacity: 0;
}
#arrow_line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:0;
    height: 100%;
    width: auto;
    opacity: 0;
}
#cs_rbc_1 {
    left: 50%;
    transform: translateX(168%);
    top: 205px;
    width: 266px;
}
#cs_rbc_2 {
    left: 50%;
    transform: translateX(48%);
    top: auto;
    bottom: -49px;
    width: 348px;
}
#cs_cell_1 {
    left: 50%;
    transform: translateX(-215px);
    top: 132px;
    width: 450px;
}
#cs_cell_2 {
    left: 50%;
    transform: translateX(-273px);
    bottom: 381px;
    width: 285px;
}
#cs_hspc_1 {
    left: 50%;
    transform: translateX(-178%);
    bottom: -46px;
    width: 412px;
}
#cs_hspc_2 {
    left: 50%;
    transform: translateX(60%);
    top: -21px;
}
#cs_hspc_3 {
    left: 50%;
    transform: translateX(-215%);
    top: 415px;
    width: 202px;
}
#cs_platelets {
    left: 50%;
    transform: translateX(225%);
    bottom: 166px;
}

#cells_second .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
    width: 94%;
    margin: 0 auto;
    padding: 125px 0;
    /* max-width: 1122px; */
}

#cells_second .title {
    width: 400px;
    font-family: 'Barlow Semi Condensed';
    text-transform: uppercase;
    font-weight: bold;
    color: #BD295E;
    font-size: 34px;
    line-height: 1.1;
    z-index: 10;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 1;
}

#video_callout {
    align-items: unset;
    justify-content: unset;
    display: block;
    text-align: center;
    background-color: #FFFFFF;
    background-image: url('../images/COSELA_Bkgrd_MOA_Image.jpg');
    background-size: 100% auto;
    background-position: center -160px;
    background-repeat: no-repeat;
}

#video_callout .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    row-gap: 2.5rem;
    align-items: center;
    justify-content: center;
    width: 94%;
    margin: 0 auto;
    padding: 75px 0 56px;
    /* max-width: 1122px; */
}

#video_callout .title {
    width: 400px;
    font-family: 'Barlow Semi Condensed';
    font-weight: bold;
    color: #BD295E;
    font-size: 34px;
    line-height: 1.1;
    z-index: 10;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 1;
}

#video_callout #moaVideoContainer {
    position: relative;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 2;
    margin: 0 auto;
}

#video_callout #moaVideoContainer.paused:before {
    position: absolute;
    content: '';
    background-image: url('../images/play-button.png');
    background-size: 124px 124px;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

#video_callout video {
    width: 100%;
    max-width: 1122px;
    height: auto;
    cursor: pointer;
}

#interactive {
    background-color: #F4F6F5;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 40% 60%;
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

#interactive .title {
    width: 359px;
    font-family: 'Barlow Semi Condensed';
    font-weight: bold;
    color: #BD295E;
    font-size: 34px;
    line-height: 1.1;
    z-index: 10;
    text-align: center;
    margin: 0 auto;
    grid-column-start: 1;
}

#interactive .animation {
    grid-column-start: 2;
}

#interactive .animation img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 2000px) {
    #cells_title {
        max-width: 584px;
    }
    #cells_second .title,
    #message .title, 
    #video_callout .title {
        font-size: 45px;
    }

    #interactive .title {
        font-size: 45px;
        width: 478px;
    }
}

@media screen and (max-width: 1600px) {
    #cells_title {
        max-width: 524px;
    }
    #cells_second .title,
    #message .title, 
    #video_callout .title {
        font-size: 40px;
    }

    #interactive .title {
        font-size: 40px;
        width: 418px;
    }
}


@media screen and (max-width: 1400px) {
    #cells_title {
        max-width: 524px;
    }
    #cells_second .title,
    #message .title, 
    #video_callout .title {
        font-size: 34px;
    }

    #interactive .title {
        font-size: 34px;
        width: 359px;
    }
    #video_callout {
        min-height: 70vh;
    }
}

@media screen and (max-width: 1200px) {
    #message #arrow {
        width: 2460px;
        height: auto;
        margin-bottom: -18%;
    }

    #cells_title {
        max-width: 444px;
    }
}

@media screen and (max-width: 1024px) {
    #flare {
        min-height: 60vh;
    }

    #cells_title {
        max-width: 424px;
    }

    #hspc1 {
        animation: x1md 20s linear infinite alternate;
    }
    #hspc1 img {
        animation: y1md 20s linear infinite alternate;
    }
    #hspc2 {
        animation: x2md 20s linear infinite alternate;
    }
    #hspc2 img {
        animation: y2md 20s linear infinite alternate;
    }
    #hspc3 {
        animation: x3md 20s linear infinite alternate;
    }
    #hspc3 img {
        animation: y3md 20s linear infinite alternate;
    }

    #message #arrow {
        width: 2160px;
        height: auto;
        margin-bottom: -18%;
    }

    #video_callout {
        min-height: 70vh;
    }
}


@media screen and (max-width: 800px) {
    #flare {
        min-height: 40vh;
    }

    #hspc1 {
        animation: x1sm 20s linear infinite alternate;
    }
    #hspc1 img {
        animation: y1sm 20s linear infinite alternate;
    }
    #hspc2 {
        animation: x2sm 20s linear infinite alternate;
    }
    #hspc2 img {
        animation: y2sm 20s linear infinite alternate;
    }
    #hspc3 {
        animation: x3sm 20s linear infinite alternate;
    }
    #hspc3 img {
        animation: y3sm 20s linear infinite alternate;
    }

    section {
        min-height: 50vh;
    }

    #cells {
        min-height: 80vh;
    }

    .cells, .alt_cells {
        transform: scale(60%);
    }


    #interactive {
        grid-template-columns: auto;
    }
    #interactive .title {
        grid-column-start: 1;
        grid-row-start: 1;
    }
    #interactive .animation {
        grid-column-start: 1;
        grid-row-start: 2;
    }

    #interactive .animation img {
        margin-top: 7rem;
        width: 100%;
        height: auto;
    }

    #video_callout {
        min-height: 70vh;
    }

    #video_callout .title {
        top: 16%;
    }
    #video_callout img {
        top: auto;
        bottom: 100px;
    }
}

@media only screen and (max-width: 768px) {
    #tooSmall {
        display: flex;
    }
}

@keyframes x1lg {
    100% {
      transform: translateX( calc(100vw - 545px));
    }
}
@keyframes x1md {
    100% {
      transform: translateX( calc(100vw - 512px));
    }
}
@keyframes x1sm {
    100% {
      transform: translateX( calc(100vw - 480px));
    }
}
@keyframes y1lg {
    100% {
      transform: translateY( calc(100vh - 545px));
    }
}
@keyframes y1md {
    100% {
      transform: translateY( calc(100vh - 509px));
    }
}
@keyframes y1sm {
    100% {
        transform: translateY( calc(100vh - 470px));
    }
}
@keyframes x2lg {
    100% {
        transform: translateX( 130% );
    }
}
@keyframes x2md {
    100% {
        transform: translateX( 130% );
    }
}
@keyframes x2sm {
    100% {
        transform: translateX( 130% );
    }
}
  
@keyframes y2lg {
    100% {
        transform: translate3d( -20%, -20% );
    }
}
@keyframes y2md {
    100% {
        transform: translate3d( -20%, -20% );
    }
}
@keyframes y2sm {
    100% {
        transform: translate3d( -20%, -20% );
    }
}
@keyframes x3lg {
    100% {
        transform: translateX( -50% );
    }
}
@keyframes x3md {
    100% {
        transform: translateX( -50% );
    }
}
@keyframes x3sm {
    100% {
        transform: translateX( -50% );
    }
}
@keyframes y3lg {
    100% {
        transform: translateY( -20% );
    }
}
@keyframes y3md {
    100% {
        transform: translateY( -20% );
    }
}
@keyframes y3sm {
    100% {
        transform: translateY( -20% );
    }
}