/* =========================================================
   BEYONDERS PAGE
========================================================= */


/* =========================================================
   JAR - IMAGE + TEXT
========================================================= */

.beyonders-jar {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:45px;
    max-width:900px;
    margin:40px auto;
}

.beyonders-jar-image {
    flex:0 0 38%;
    text-align:center;
}

.beyonders-jar-image img {
    display:block;
    width:100%;
    max-width:540px;
    height:auto;
    margin:0 auto;
}

.beyonders-jar-text {
    flex:1 1 0;
}

.beyonders-jar-text p {
    text-align:center;
}


/* =========================================================
   BIG QUOTE - VIDEO + QUOTE
========================================================= */

.beyonder-big-quote {
    font-family:'Olive', sans-serif;
    font-size:44px;
    line-height:1.05;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center !important;
    margin:35px 0 0;
    -webkit-text-stroke:.8px currentColor;
}


/* =========================================================
   SPLIT VIDEO + QUOTE
========================================================= */

.beyonder-feature {
    display:flex;
    align-items:center;
    gap:50px;
    max-width:1000px;
    margin:40px auto;
}

.beyonder-feature-media {
    flex:0 0 48%;
}

.beyonder-feature-media .videobox.single {
    width:100%;
    float:none;
    margin:0;
}

.beyonder-feature-media video {
    display:block;
    width:100% !important;
    height:auto !important;
}

.beyonder-feature-quote {
    flex:1 1 0;
    text-align:center;
}

.beyonder-feature-quote p:first-child {
    font-family:'Olive', sans-serif;
    font-size:42px;
    line-height:1.1;
    font-weight:bold;
    margin:0 0 25px;
    -webkit-text-stroke:.8px currentColor;
}

.beyonder-feature-quote p:last-child {
    text-align:center;
}


/* =========================================================
   BADASS DECLARATION + VIDEO
========================================================= */

.beyonder-badass {
    display:flex;
    align-items:center;
    gap:50px;
    max-width:1000px;
    margin:40px auto;
}

.beyonder-badass-quote {
    flex:1 1 0;
    text-align:center;
}

.beyonder-badass-quote p {
    font-family:'Olive', sans-serif;
    font-size:42px;
    line-height:1.08;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center;
    margin:0;
    -webkit-text-stroke:.8px currentColor;
}

.beyonder-badass-media {
    flex:0 0 48%;
}

.beyonder-badass-media .videobox.single {
    width:100%;
    float:none;
    margin:0;
}

.beyonder-badass-media video {
    display:block;
    width:100% !important;
    height:auto !important;
}


/* =========================================================
   REFLECTIVE CENTERED STORY
========================================================= */

.beyonder-john {
    max-width:900px;
    margin:40px auto;
    text-align:center;
}

.beyonder-john-video {
    width:70%;
    margin:0 auto;
}

.beyonder-john-video .videobox.single {
    width:100%;
    float:none;
    margin:0;
}

.beyonder-john-video video {
    display:block;
    width:100% !important;
    height:auto !important;
}

.beyonder-john-statement {
    max-width:700px;
    margin:35px auto 0;
}

.beyonder-john-big {
    font-family:'Olive', sans-serif;
    font-size:44px;
    line-height:1.05;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center !important;
    margin:0 0 20px;
    -webkit-text-stroke:.8px currentColor;
}

.beyonder-john-statement p:not(.beyonder-john-big) {
    text-align:center;
}


/* =========================================================
   VIDEO SPOTLIGHT + QUOTE
========================================================= */

.beyonder-spotlight {
    margin:40px auto;
}

.beyonder-spotlight .videobox.single {
    width:70%;
    float:none;
    margin:0 auto;
}

.beyonder-spotlight video {
    display:block;
    width:100% !important;
    height:auto !important;
}

.beyonder-spotlight-quote {
    max-width:800px;
    margin:35px auto 0;
    text-align:center !important;
    font-size:1.35rem;
    line-height:1.6;
}


/* =========================================================
   VIDEO + BIG TRANSFORMATION + LONG STORY
   SHERI
========================================================= */

.beyonder-sheri {
    max-width:900px;
    margin:40px auto;
}

.beyonder-sheri-video {
    width:70%;
    margin:0 auto;
}

.beyonder-sheri-video .videobox.single {
    width:100%;
    float:none;
    margin:0;
}

.beyonder-sheri-video video {
    display:block;
    width:100% !important;
    height:auto !important;
}

.beyonder-sheri-big {
    font-family:'Olive', sans-serif;
    font-size:40px;
    line-height:1.1;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center !important;
    margin:35px 0 30px;
    -webkit-text-stroke:.8px currentColor;
}

.beyonder-sheri-story {
    max-width:760px;
    margin:0 auto;
}

.beyonder-sheri-story p {
    text-align:left;
    margin:1rem 0;
}


/* =========================================================
   VIDEO + BIG TRANSFORMATION + LONG STORY
   CINDY
========================================================= */

.beyonder-cindy {
    max-width:900px;
    margin:40px auto;
}

.beyonder-cindy-video {
    width:70%;
    margin:0 auto;
}

.beyonder-cindy-video .videobox.single {
    width:100%;
    float:none;
    margin:0;
}

.beyonder-cindy-video video {
    display:block;
    width:100% !important;
    height:auto !important;
}

.beyonder-cindy-big {
    font-family:'Olive', sans-serif;
    font-size:44px;
    line-height:1.05;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center !important;
    margin:40px 0 35px;
    -webkit-text-stroke:.8px currentColor;
}

.beyonder-cindy-story {
    max-width:760px;
    margin:0 auto;
}

.beyonder-cindy-story p {
    text-align:left;
    margin:1rem 0;
}


/* =========================================================
   VIDEO + BIG TRANSFORMATION + LONG STORY
   JOANNE
========================================================= */

.beyonder-joanne {
    max-width:900px;
    margin:40px auto;
}

.beyonder-joanne-video {
    width:70%;
    margin:0 auto;
}

.beyonder-joanne-video .videobox.single {
    width:100%;
    float:none;
    margin:0;
}

.beyonder-joanne-video video {
    display:block;
    width:100% !important;
    height:auto !important;
}

.beyonder-joanne-big {
    font-family:'Olive', sans-serif;
    font-size:44px;
    line-height:1.05;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center !important;
    margin:40px 0 35px;
    -webkit-text-stroke:.8px currentColor;
}

.beyonder-joanne-story {
    max-width:760px;
    margin:0 auto;
}

.beyonder-joanne-story p {
    text-align:left;
    margin:1rem 0;
}


/* =========================================================
   PHOTO + STORY - MELANY
========================================================= */

.beyonder-melany {
    display:flex;
    align-items:center;
    gap:55px;
    max-width:1000px;
    margin:40px auto;
}

.beyonder-melany-image {
    flex:0 0 38%;
    text-align:center;
}

.beyonder-melany-image img {
    display:block;
    width:100%;
    max-width:400px;
    height:auto;
    margin:0 auto;
}

.beyonder-melany-story {
    flex:1 1 0;
}

.beyonder-melany-story p {
    text-align:left;
    margin:1rem 0;
}


/* =========================================================
   PHOTO + BIG QUOTE + STORY
   IMAGE LEFT
========================================================= */

.beyonder-photo-quote {
    display:flex;
    align-items:center;
    gap:55px;
    max-width:1000px;
    margin:40px auto;
}

.beyonder-photo-quote-image {
    flex:0 0 40%;
    text-align:center;
}

.beyonder-photo-quote-image img {
    display:block;
    width:100%;
    max-width:400px;
    height:auto;
    margin:0 auto;
}

.beyonder-photo-quote-content {
    flex:1 1 0;
}

.beyonder-photo-quote-big {
    font-family:'Olive', sans-serif;
    font-size:42px;
    line-height:1.08;
    font-weight:bold;
    letter-spacing:1px;
    text-align:left !important;
    margin:0 0 30px;
    -webkit-text-stroke:.8px currentColor;
}

.beyonder-photo-quote-story p {
    text-align:left;
    margin:1rem 0;
}


/* =========================================================
   TEXT-ONLY BEYONDER
   Full section uses light blue
========================================================= */

.e6f1f1 {
    position:relative;
    float:left;
    width:100%;
    margin:0;
    padding:1rem 6rem;
    background:#e6f1f1;
    box-sizing:border-box;
}

.beyonder-text-only {
    max-width:1000px;
    margin:15px auto 35px;
}

.beyonder-text-only-statement {
    background:transparent;
    padding:20px 20px 10px;
    margin:0 auto 20px;
    box-sizing:border-box;
    text-align:center;
}

.beyonder-text-only-statement p {
    font-family:'Olive', sans-serif;
    font-size:44px;
    line-height:1.08;
    font-weight:bold;
    letter-spacing:1px;
    color:#2a8181;
    text-align:center !important;
    margin:0;
    -webkit-text-stroke:.8px #2a8181;
}

.beyonder-text-only-story {
    max-width:760px;
    margin:0 auto;
}

.beyonder-text-only-story p {
    text-align:left;
    margin:1rem 0;
}


/* =========================================================
   CIRCULAR GRADUATE PHOTO
========================================================= */

.beyonder-circle-image {
    display:block;
    width:300px;
    height:300px;
    object-fit:cover;
    border-radius:50%;
    margin:0 auto;
}


/* =========================================================
   PHOTO + BIG QUOTE + STORY
   IMAGE RIGHT
========================================================= */

.beyonder-photo-quote-right {
    display:flex;
    align-items:center;
    gap:55px;
    max-width:1000px;
    margin:40px auto;
    box-sizing:border-box;
}

.beyonder-photo-quote-right-content {
    flex:1 1 0;
    order:1;
}

.beyonder-photo-quote-right-image {
    flex:0 0 40%;
    order:2;
    text-align:center;
}

.beyonder-photo-quote-right-image .beyonder-circle-image {
    display:block;
    width:300px;
    height:300px;
    max-width:none;
    object-fit:cover;
    border-radius:50%;
    margin:0 auto;
}

.beyonder-photo-quote-right-big {
    font-family:'Olive', sans-serif;
    font-size:42px;
    line-height:1.08;
    font-weight:bold;
    letter-spacing:1px;
    text-align:center !important;
    margin:0 0 30px;
    -webkit-text-stroke:.8px currentColor;
}

.beyonder-photo-quote-right-story p {
    text-align:left;
    margin:1rem 0;
}


/* =========================================================
   EASTER EGG
========================================================= */

.beyonder-easter-egg a {
    color:#e0593a;
    font-weight:bold;
    text-decoration:underline;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px) {

    /* JAR */

    .beyonders-jar {
        flex-direction:column;
        gap:25px;
    }

    .beyonders-jar-image,
    .beyonders-jar-text {
        width:100%;
    }

    .beyonders-jar-image img {
        max-width:100%;
    }


    /* BIG QUOTE */

    .beyonder-video-wrap {
        width:100%;
    }

    .beyonder-big-quote {
        width:100%;
        font-size:28px;
        line-height:1.1;
    }


    /* SPLIT VIDEO + QUOTE */

    .beyonder-feature {
        flex-direction:column;
        gap:25px;
    }

    .beyonder-feature-media {
        flex:0 0 100%;
        width:100%;
    }

    .beyonder-feature-quote {
        width:100%;
    }

    .beyonder-feature-quote p:first-child {
        font-size:32px;
    }


    /* BADASS */

    .beyonder-badass {
        flex-direction:column;
        gap:25px;
    }

    .beyonder-badass-quote,
    .beyonder-badass-media {
        width:100%;
    }

    .beyonder-badass-quote p {
        font-size:32px;
    }


    /* JOHN */

    .beyonder-john-video {
        width:100%;
    }

    .beyonder-john-big {
        font-size:32px;
    }


    /* SPOTLIGHT */

    .beyonder-spotlight .videobox.single {
        width:100%;
    }

    .beyonder-spotlight-quote {
        font-size:1.2rem;
        line-height:1.5;
    }


    /* SHERI */

    .beyonder-sheri-video {
        width:100%;
    }

    .beyonder-sheri-big {
        font-size:30px;
        line-height:1.1;
    }

    .beyonder-sheri-story {
        width:100%;
    }


    /* CINDY */

    .beyonder-cindy-video {
        width:100%;
    }

    .beyonder-cindy-big {
        font-size:32px;
        line-height:1.1;
    }

    .beyonder-cindy-story {
        width:100%;
    }


    /* JOANNE */

    .beyonder-joanne-video {
        width:100%;
    }

    .beyonder-joanne-big {
        font-size:32px;
        line-height:1.1;
    }

    .beyonder-joanne-story {
        width:100%;
    }


    /* MELANY */

    .beyonder-melany {
        flex-direction:column;
        gap:30px;
    }

    .beyonder-melany-image,
    .beyonder-melany-story {
        width:100%;
    }

    .beyonder-melany-image img {
        max-width:100%;
    }


    /* PHOTO + QUOTE - IMAGE LEFT */

    .beyonder-photo-quote {
        flex-direction:column;
        gap:30px;
    }

    .beyonder-photo-quote-image,
    .beyonder-photo-quote-content {
        width:100%;
    }

    .beyonder-photo-quote-image img {
        max-width:100%;
    }

    .beyonder-photo-quote-big {
        font-size:32px;
        line-height:1.1;
        text-align:center !important;
    }


    /* TEXT-ONLY */

    .e6f1f1 {
        padding:1rem 2rem;
    }

    .beyonder-text-only {
        width:100%;
    }

    .beyonder-text-only-statement {
        padding:40px 25px;
        margin-bottom:35px;
    }

    .beyonder-text-only-statement p {
        font-size:32px;
        line-height:1.1;
    }

    .beyonder-text-only-story {
        width:100%;
    }


    /* PHOTO + QUOTE - IMAGE RIGHT */

    .beyonder-photo-quote-right {
        flex-direction:column;
        gap:30px;
    }

    .beyonder-photo-quote-right-content {
        width:100%;
        flex:0 0 100%;
        order:1;
    }

    .beyonder-photo-quote-right-image {
        width:100%;
        flex:0 0 100%;
        order:2;
    }

    .beyonder-photo-quote-right-image .beyonder-circle-image {
        width:300px;
        height:300px;
        max-width:100%;
    }

    .beyonder-photo-quote-right-big {
        font-size:32px;
        line-height:1.1;
        text-align:center !important;
    }

}