/* ----------------------------------
         STYLES
---------------------------------- */

:root {
    --yellow: #ffc41f;
    --blue: #307fa9;
	--base-font-size: 16;
}

* {
    margin: 0px;
    padding: 0px;
}

html, body, #main_wrapper{ min-height: 100%; height: 100%; }

body {
    background: #82bbb4;
    overflow-x: hidden;
    font-size: 16px;
    color: #fff;
    overscroll-behavior: none;
}

#main_wrapper {
    background:#111111;
    overflow:hidden;
}

/* Font Styles ------------------------- */
h1, h2, h3, h4, h5, p, li {
    --max-font-size: 16;
    --min-font-size: 16;
    --max-screen-width: 1400;
    --min-screen-width: 320;
    --font-size-calc:calc( (var(--min-font-size) * 1px) + (var(--max-font-size) - var(--min-font-size)) * ((100vw - (var(--min-screen-width) * 1px)) / (var(--max-screen-width) - var(--min-screen-width))));
    --clamp-max: calc( (var(--max-font-size) / var(--base-font-size)) * 1em);
    --clamp-min: calc( (var(--min-font-size) / var(--base-font-size)) * 1em);
    font-size:clamp(var(--clamp-min), var(--font-size-calc), var(--clamp-max));
}

p {
    margin: 0;
    line-height: 150%;
    --max-font-size: 18;
    --min-font-size: 16;
    color: #313131;
}

p + p {
    margin-top: 20px;
}

p.emphasis {
    font-weight: bold;
    font-style: italic;
}

p.small {
    font-size: 1em;
}

ul {
    margin-top: 15px;
    margin-bottom: 15px;
    line-height: 150%;
}

li {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 150%;    
    --max-font-size: 18;
    --min-font-size: 16;
    margin-left: 19px;
}

h1 {
    --max-font-size: 150;
    --min-font-size: 64;
    font-weight: bold;
    margin: 0;
    line-height: 100%; /* TODO */
}

html:lang(es-es) h1,
html:lang(it-it) h1,
html:lang(th-th) h1,
html:lang(vi-vn) h1,
html:lang(es-mx) h1,
html:lang(pt-br) h1,
html:lang(fr-fr) h1 {
    --max-font-size: 110;
    --min-font-size: 55;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    h1 {
        --max-font-size: 96;
        --min-font-size: 64;
        --max-screen-width: 1000;
        --min-screen-width: 600;
    }

    html:lang(es-es) h1,
    html:lang(it-it) h1,
    html:lang(th-th) h1,
    html:lang(vi-vn) h1,
    html:lang(es-mx) h1,
    html:lang(pt-br) h1,
    html:lang(fr-fr) h1 {
        --max-font-size: 68;
        --min-font-size: 51;
    }
}

h2 {
    --max-font-size: 50;
    --min-font-size: 32;
    font-weight: bold;
	margin: 0;
    line-height: 120%;
}

h3 {
    --max-font-size: 30;
    --min-font-size: 24;
    font-weight: bold;
	margin: 0;
    line-height: 120%;
}

h4 {
    --max-font-size: 24;
    --min-font-size: 20;
    font-weight: bold;
	margin: 0;
    line-height: 120%;
}

h2 + p {
    margin-top: 0.6em;
}

.legal p {
    font-size:.625em;
    margin: 1em 0;
    color:#111111;
}

.white { color:#fff; }
.black { color:#000000; }
.blue { color:var(--blue); }
.lt_blue { color:#00adef; }
.lt_blue2 { color:#69d6ff; }
.dk_blue { color:#003b70; }
.gray { color:#555555; }
.dk_gray { color:#333333; }
.yellow { color:#feda00; }
.green { color:#74a72d; }
.orange { color:#ffa300;  }
.dk_orange { color:#fb4b02; }
.purple { color: #180153; }

.nomargin { margin: 0 !important; }
.notopmargin, .nomargintop {margin-top: 0 !important;}
.nobottommargin, .nomarginbottom {margin-bottom: 0 !important;}


/* Misc Default Styles ------------------------- */

.left {text-align: left;}
.center, .c {text-align: center;}
.right {text-align: right;}


/* Wrap all tables in a div with this class so they display correctly on mobile */
.chart {overflow-x: auto;}

.vc {
    display: flex;
    align-items: center;
}

.hc {
    display: flex;
    justify-content: center;
}

.vhc {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----------------------------------
            CUSTOM CODE
---------------------------------- */

#scroll_container {
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    overscroll-behavior: none;
}

.section {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 100%;
    xoutline: 1px solid red;
}

.wrapper {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

.proxy {
    position: absolute;
    visibility: hidden;
}

.z1 {
    z-index: 1;
}
.z2 {
    z-index: 2;
}
.z3 {
    z-index: 3;
}
.z4 {
    z-index: 4;
}

:root {
    --zIndexMaster: 5;
}

#box_4 {z-index: var(--zIndexMaster);}
#box_5 {z-index: calc(var(--zIndexMaster) - 1);}
#background_5 {z-index: calc(var(--zIndexMaster) - 1);}
#background_9 {z-index: calc(var(--zIndexMaster) - 2);}
#box_15 {z-index: calc(var(--zIndexMaster) - 3);}
#box_16 {z-index: calc(var(--zIndexMaster) - 4);}





/* Instructions Global ------------------ */
.instructions_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    z-index: 10;
}
.instructions_wrapper img {
    cursor: help;
    width: min(158px, 30vw);
    pointer-events: auto;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    .instructions_wrapper img {
        width: 11vw;
        min-width: 90px;
    }
}

.instructions_wrapper .instr_text {
    background: rgb(0 0 0 / 0.9);
    border: 2px solid var(--yellow);
    padding: 1em;
    max-width: min(400px, 43vw);
    pointer-events: none;
}

.instructions_wrapper .instr_text p {
    color: var(--yellow);
    font-style: italic;
}

/* Count up timer Global ------------------ */
.timer_style svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.timer_style svg text {
    fill: #fff;
}

/* Scrolling textboxes ------------------ */
.overflow {
    overflow: auto;
    overscroll-behavior: none;
    scrollbar-width: thin;
    scrollbar-color: #b2b2b2 transparent;
    padding-right: 11px;
    mask-image: linear-gradient(to bottom, black calc(100% - 30px), transparent 100%); /* gradient alpha mask to make scrolling textboxes more obvious */
    padding-bottom: 25px;
    box-sizing: border-box;
}

.overflow.dark_mode {
    scrollbar-color: #535353 transparent;
}

.wrapper.text .content.overflow {
    max-height: 100%;
}



/* Box 1 ------------------ */
#box_1 {
    display: flex;
}

#box_1 .wrapper.text {
    background: #82bbb4;
    width: min(800px, 100vw);
    padding-inline: min(90px, 12vw) min(30px, 4vw);
}

#split_1 {
    opacity: 0; /* starts hidden until splitText is set up */
}

.split_line {
    overflow: hidden;
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%);
}

/* fixes clipped letters */
html:lang(en-us) .split_line,
html:lang(it-it) .split_line,
html:lang(de-de) .split_line,
html:lang(fr-fr) .split_line {
    padding-bottom: 0.15em;
}


/* not supported in FF, also didn't fix issue, saving for future reference */
/* html:lang(en-us) .split_line {
    text-box-trim: trim-end;
    text-box-edge: text;
} */

#box_1 .wrapper.image {
    position: relative;
}

#box_1 .wrapper.image .bg {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    object-fit: cover;
}

#box_1 .wave_wrapper {
    position: relative;
    height: 100%;
}

#box_1 #wave_1 {
    left: -2px;
}

#box_1 .wave_wrapper .cover {
    position: absolute;
    top: 0;
    right: calc(100% - 1px);
    width: 50vw;
    background: #82bbb4;
    height: 100%;
}

#box_1 #wave_4 {
    position: relative;
}

#boat_1 {
    position: absolute;
    top: 10%;
    left: 0px;
    width: 21%;
}

#sand_2 {
    width: 370%;
    height: 100%;
    background: #f5efe6 url(../images/1-Sand2.jpg) 0% 50% / auto 100% no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

#box_1 .wrapper.info {
    position: absolute;
    top: 0px;
    right: 0px;
    width: min(515px, 100%, 80vw);
}

#box_1 .wrapper.info .outer {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_1 .wrapper.info .outer {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 75px;
        text-align: center;
    }
}

@media only screen and (max-width: 600px) {
    #box_1 .wrapper.info .outer {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 95px;
        text-align: center;
    }
}


#box_1 .wrapper.info .icon {
    position: relative;
}
#box_1 .wrapper.info .icon .arrows {
    position: absolute;
    top: -91px;
    left: 11px;
}
#box_1 .wrapper.info h4 {
    color: black;
}

/* Box 2 ------------------ */
#box_2 {
    display: flex;
}
#box_2 .wrapper.image {

}

#box_2 .laptop {
    position: relative;
}
#laptop_2 {
    max-width: 140vw;
    max-height: 67vh;
}
#badge_2 {
    position: absolute;
    top: 18%;
    left: 41%;
    width: 19.6%;
}
#mic_2 {
    position: absolute;
    top: 12%;
    left: 9%;
    width: 20.7%;
}
#mouth_2 {
    position: absolute;
    top: -34%;
    left: 19%;
    width: 24.4%;
}
#headphones_2 {
    position: absolute;
    top: 61%;
    left: 90%;
    width: 38.9%;
}

#box_2 .wrapper.text {
    width: min(575px, 95vw);
    left: -13vh;
    padding-top: 11vh;
}

#box_2 .wrapper.text .box {
    background: url(../images/2-Paper.png) 50% 50% / 100% 100% no-repeat;
    padding: 5% 4% 5% 16%;
    box-sizing: border-box;
    height: min(400px, 46vh);
}

#box_2 .wrapper.text .content {
    max-height: 85%;
}


/* Box 3 ------------------ */
/* Fixes any gaps between sections  */
#box_3:before {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    right: 100%;
    width: 100vw;
    background: #f5efe6;
    z-index: -1;
}

#box_3 {
    display: flex;
    background: #f5efe6;
    padding-right: 100px;
}
#box_3 .wrapper {
    z-index: 1;
}
#box_3 .wrapper.text {
    margin-right: 50px;
    width: min(350px, 90vw);
}
#box_3 .wrapper.text .content {
    height: min(380px, 37vh);
    position: relative;
    margin-bottom: min(70px, 8vh);
}



#box_3 h3 {
    margin-top: 0.8em;
    margin-bottom: 0.1em;
}

#box_3 .bg {
    position: absolute;
    top: 1%;
    left: -60vh;
    height: 105%;
    width: auto;
    z-index: 1;
    pointer-events: none;
}

#box_3 .phone {
    position: relative;
    height: 100%;
}

#phone_3 {
    max-width: 100vw;
    max-height: 115vh;
}

#num_3 {
    position: absolute;
    top: 33%;
    left: 16.4%;
    width: 67%;
    height: 9%;
}


#box_3 .phone .start {
    position: absolute;
    top: 50%;
    left: 38%;
    width: 24%;
    cursor: pointer;
}
#burst_3 {
    width: 173%;
    position: absolute;
    top: -32%;
    left: -38%;
    pointer-events: none;
}

#start_3 {
    width: 100%;
    cursor: pointer;
}

#hand_3 {
    width: 99%;
    position: absolute;
    top: 59%;
    left: -72%;
}

#box_3 .instructions_wrapper {
    position: absolute;
    bottom: 13%;
    left: -51%;
}


/* Box 4 - Wedding time ------------------ */
#box_4 .wrapper.images {
    aspect-ratio: 1679 / 1080;
    margin-left: -11vh;
    pointer-events: none;
}
#box_4 .wrapper.images img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: auto;
}


#box_4 .wrapper.text {
    width: min(583px, 114vw);
    position: absolute;
    right: 11%;
    top: 0;
}

#box_4 .wrapper.text .circle {
    background: url(../images/3-Circle.png) 50% 50% / contain no-repeat;
    width: 100%;
    aspect-ratio: 583 / 610;
    xpadding: 19% 14% 31% 15%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-inline: 15%;
}

#box_4 .wrapper.text .circle .content {
    max-height: 50%;
    margin-bottom: 16%;
}

#hand_4 {
    width: 130%;
    position: absolute;
    top: 61%;
    left: -7%;
}




/* Background 5 ------------------ */
#background_5 {
    position: relative;
    margin-left: -20vh;
    display: flex;
    background: linear-gradient(to right, #231843 0%, #231843 80%, transparent 80%); /* extend bg color to fix bg img gaps at odd layout sizes */
}
#background_5 .bg {
    position: absolute;
    top: 0;
    height: 100%;
}

#bg_5_ocean {
    right: 14%;
    min-width: 89%;
    object-fit: fill;
}
#bg_5_purple {
    right: 0;
}

/* Box 5 - Select photos ------------------ */
#box_5 {
    margin-left: 36vh;
    margin-right: 1vh;
}

#box_5 .wrapper.outer {

}

#box_5 .wrapper.photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(570px, 92vw);
    height: min(100%, 90vh);
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_5 .wrapper.photos {
        width: 76vw;
        grid-template-columns: repeat(4, 1fr);
        gap: 1vw;
    }
}


#box_5 .wrapper.photos .photo_box {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    filter: saturate(1);
}

#box_5 .photo_box .photo {
    width: 109%;
    position: absolute;
    top: 0;
    left: 0;
    max-height: 122%;
    object-fit: contain;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#photo_5_4.photo_box .photo {left: -7%;}

#box_5 .photo_box .burst {
    width: 110%;
    position: absolute;
    top: -13%;
    left: -6%;
    pointer-events: none;  
    opacity: 0;
}

#box_5 .instructions_wrapper {
    position: absolute;
    top: 23%;
    left: -15vh;
}





/* Box 6 - Phone ------------------ */
#box_6 .inner {
    position: relative;
    margin-top: 17vh;
}

#box_6 .phone {
    position: relative;
    height: 100%;
}

#phone_6 {
    max-width: 100vw;
    max-height: 115vh;
}

#num_6 {
    position: absolute;
    top: 13.8%;
    left: 13.8%;
    rotate: -4.2deg;
    width: 59%;
    height: 7%;
}


/* Box 7 - Load up ------------------ */
#doodle_7 {
    position: absolute;
    top: -6%;
    left: -25%;
    width: 110%;
    height: auto;
}
#box_7 .wrapper.text {

}

#box_7 .wrapper.text .notepad {
    background: url(../images/4-Paper.png) 50% 50% / 100% 100% no-repeat;
    height: min(843px, 94vh);
    width: min(547px, 90vw);
    padding: 16% min(15%, 4vw) 35% min(15%, 4vw);
    box-sizing: border-box;
    display: flex;
    place-items: center;
    margin-top: 5vh;
}

#box_7 .wrapper.text .content {
    max-height: 65%;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_7 .wrapper.text .notepad {
        padding: 9% min(15%, 4vw) 21% min(15%, 4vw);
    }
    #box_7 .wrapper.text .content {
        max-height: 90%;
    }
}




/* Box 8 - Connect camera ------------------ */
#box_8 {
    margin-left: 11vh;
    padding-right: 29vh;
}

@media only screen and (orientation: portrait) {
    #box_8 {
        margin-left: 21vh;
    }
}


#box_8 .devices {
    position: relative;
    margin-bottom: 13vh;
}

#laptop_8 {
    max-height: 67vh;
    max-width: 140vw;
}

#camera_8 {
    position: absolute;
    width: 136%;
    top: 48.7%;
    left: -37%;
}

#camera_8_base {
    width: 100%;
    height: auto;
}

#camera_8_reveal,
#camera_8_svg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
}

#zap_8_1 {
    width: 8.7%;
    position: absolute;
    top: 51%;
    left: 31%;
}

#zap_8_2 {
    width: 21.4%;
    position: absolute;
    top: -15%;
    left: 76%;
}

#drag_8 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32.58%;
    xoutline: 1px solid yellow;
}
#hand_8 {
    width: 100%;
}

#box_8 .instructions_wrapper {
    position: absolute;
    top: 67%;
    left: 28%;
}

#box_8  .instructions_wrapper .instr_text {
    max-width: min(320px, 43vw);
}



/* Background 9 ------------------ */
#background_9 {
    position: relative;
    margin-left: -7vh;
    display: flex;
}

#bg_9_wood {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% - 7vh);
    background: url(../images/6-RepeatableBG.jpg) 100% 50% / auto 100% repeat-x;
}

#bg_9_wood .endcap {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    translate: calc(100% - 1px);
}

/* Box 9 - Wake up / coffee ------------------ */
#paper_9 {
    width: auto;
    height: 107%;
    position: absolute;
    top: -21%;
    right: -85%;
}
#coffee_9 {
    height: min(1059px, 125vh);
    width: auto;
    position: relative;
}
#box_9 .text {
    position: absolute;
    width: 60%;
    height: 50%;
    top: 18%;
    left: 19%;
}
#box_9 .text .content {
    max-height: 100%;
    max-width: 72vw;
}
#phone_9 {
    position: absolute;
    max-width: 100vw;
    object-fit: contain;
    width: 69.3%;
    top: 8%;
    left: 12%;
}

#phone_9 .phone_img, #snooze_9 {
    width: 100%;
}
#snooze_9 {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}

#num_9 {
    position: absolute;
    top: 15%;
    left: 29.1%;
    rotate: 3.7deg;
    width: 57%;
    height: 7%;
}
#phone_9 .instructions_wrapper {
    position: absolute;
    top: 39%;
    left: 14%;
}

/* Box 10 - Rate photo ------------------ */
#button_10 {
    width: 13.3%;
    position: absolute;
    top: -1%;
    right: -8%;
}

#box_10 .device {
    position: relative;
    height: 118%;
    max-height: 1000px;
}
#device_10 {
    height: 100%;
    width: auto;
    position: relative;
}
#box_10 .star_wrapper {
    width: auto;
    position: absolute;
    top: 38%;
    left: 30.4%;
    rotate: -2.4deg;
}
#box_10 .star_wrapper svg {
    width: 4%;
    cursor: pointer;
}

#box_10 .star_wrapper svg path {
    fill: transparent;
    stroke: #000;
}
#box_10 .star_wrapper svg.filled path {
    fill: #FFC107;
    stroke: #FFC107;
}

#box_10 .instructions_wrapper {
    position: absolute;
    top: 56%;
    left: 10%;
}

#hand_10 {
    width: 20%;
    position: absolute;
    top: 45%;
    left: 27%;
}

#star_10 {
    width: 27%;
    position: absolute;
    top: 19%;
    left: 24%;
    user-select: none;
    pointer-events: none;
}

/* Box 11 - Phone ------------------ */
#box_11 {
    margin-left: 10vh;
}

#box_11 .phone {
    margin-top: 10%;
}

#box_11 .inner {
    position: relative;
}

#phone_11 {
    max-width: 100vw;
    max-height: 115vh;
}

#num_11 {
    position: absolute;
    top: 12%;
    left: 21.5%;
    width: 62%;
    height: 11%;
    rotate: 3.1deg;
}


/* Box 12 - Edit those videos ------------------ */

#box_12 .wrapper.text {
    width: min(440px, 72vw);
    margin-left: min(90px, 8vw);
    margin-right: min(144px, 26vw);
}

#box_12 .wrapper.text .overflow {
    max-height: min(480px, 49vh);
    position: relative;
}

#pen_12 {
    position: absolute;
    bottom: 80%;
    left: 0px;
    width: 38.9%;
}

#paper_12 {
    position: absolute;
    top: 0px;
    left: -50%;
    width: 195%;
}

#button_12_1, #button_12_2 {
    position: absolute;
    top: -3%;
    left: 101%;
    width: min(107.5%, 43vh);
    pointer-events: none;
}


/* Box 13 - Drag and drop numbers ------------------ */
#box_13 .content, #drop_wrapper_13, #box_13 .bottom_wrapper {
    position: relative;
}

#box_13 .content {
    width: min(550px, 81vw);
    aspect-ratio: 1.3;
}

#paper_13 {
    position: absolute;
    top: -35%;
    left: -14%;
    width: 129%;
    min-height: 154%;
    object-fit: fill;
}

#drop_wrapper_13 {
    display: flex;
    align-items: center;
    width: min(100%, 110vh);
   margin-inline: auto;
}

#drop_wrapper_13 .drop_13_style {
    position: relative;
}

#drop_wrapper_13 .square {
    width: 100%;
}

#drop_wrapper_13 .percent {
    width: 23%;
}

#drop_wrapper_13 .num {
    position: absolute;
    top: -10%;
    left: 4%;
    width: 98%;
    opacity: 0;
    pointer-events: none;
}
#drop_13_2 {
    margin-inline: 12px 8px;
}
#reveal_text_13 {
    max-height: min(480px, 37vh);
    margin-top: 20px;
    padding-inline: 10%;
    opacity: 0;
}

#drag_wrapper_13 {
    position: absolute;
    width: min(100%, 94vh);
    aspect-ratio: 2.8;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#box_13  .drag_13_style {
    position: absolute;
    top: 0;
}
#drag_13_0 {left: -1%; width: 34%;}
#drag_13_3 {left: 34%; width: 33%;}
#drag_13_2 {left: 74%; width: 31%;}

#box_13 .instructions_wrapper {
    position: absolute;
    top: 89%;
    left: 0%;
}
#hand_13 {
    position: absolute;
    top: 113%;
    left: 92%;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_13 .instructions_wrapper {
        top: 18%;
        left: 100%;
    }
    #hand_13 {
        top: 55%;
        left: 105%;
    }
}

/* Box 14 - Edit those videos --------------------- */
#box_14 .wrapper {
    margin-left: 53vh;
}

#paper_14 {
    width: min(944px, 120vw);
    position: relative;
    margin-top: -4%;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #paper_14 {
        margin-top: -9%;
    }
}

#notebook_14 {
    width: min(136%, 119vh);
    position: absolute;
    top: -25%;
    left: max(-53%, -42vh);
}

#crumpled_paper_14 {
    width: min(92.8%, 82vh);
    position: absolute;
    top: 45%;
    right: 61%;
}

#cup_14 {
    width: min(41%, 40vh);
    position: absolute;
    top: 35%;
    left: 109%;
}

#doodle_14 {
    width: min(216%, 188vh);
    position: absolute;
    top: -7%;
    left: max(-46%, -41vh);
    pointer-events: none;
}

#box_14 .laptop {
    width: 184.9%;
    position: absolute;
    top: max(35%, 38vh);
    left: -44%;
    pointer-events: none;
}
#laptop_14 {
    width: min(100%, 161vh);
}

#box_14 .content {
    position: absolute;
    width: min(86%, 70vw);
    height: 26%;
    top: 9%;
    left: 7%;
}

@media only screen and (max-width: 600px) and (orientation: portrait) {
    #box_14 .laptop {
        top: max(52%, 38vh);
    }
    #paper_14 {
        height: 57vh;
        object-fit: fill;
    }
    #box_14 .content {
        height: 40%;
    }
}


/* Box 15 - Edit those videos --------------------- */
#bg_15 {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    min-height: 100vh;
    object-fit: cover;
    object-position: center right;
}

#box_15 {
    display: flex;
}

#box_15 .resize {
    margin-left: -7vh;
    margin-right: 33vh;
    position: relative;
}

#resize_landscape {
    position: relative;
    max-width: 135vw;
    max-height: 100vh;
}

#resize_portrait {
    width: 100%;
    max-height: 100vh;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
}

#resize_button {
    width: min(182px, 23vw, 32vh);
    position: absolute;
    bottom: 3%;
    left: 44%;
    cursor: pointer;
}


#box_15 .wrapper.text {
    width: min(570px, 76vw);
    display: flex;
    align-items: flex-end;
    /* margin-left: max(-60vh, -90vw); */
    margin-left: min(46vh, 73vw);
}

#box_15 .wrapper.text .box {
    width: 100%;
    background: url(../images/9-Paper.png) 50% 0% / 100% auto no-repeat;
    padding: 12% 9% 9%;
    box-sizing: border-box;
    height: 50vh;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_15 .wrapper.text {
        width: min(570px, 51vw);
    }
    #box_15 .wrapper.text .box {
        height: 98vh;
    }
}


#box_15 .instructions_wrapper {
    position: absolute;
    bottom: 9%;
    left: 7%;
}


/* BG 16 --------------------- */
#background_16 {
    position: relative;
    display: flex;
}

#bg_16 {
    width: calc(60% + 33vh);
    height: 100vh;
    position: absolute;
    top: 0;
    left: -33vh;
    min-height: 100vh;
    object-fit: cover;
    object-position: 50% 60%;
}

#bg_17 {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    object-fit: cover;
    object-position: 50% 5%;
}


/* Box 16 - Let’s talk business --------------------- */


#box_16 .wrapper {
    margin-left: 2vh;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_16 .wrapper {
        margin-left: 51vh;
    }
}


#paper_16 {
    width: min(836px, 120vw);
    position: relative;
    margin-top: -40%;
}

#zoom_tag_16 {
    width: 41.9%;
    position: absolute;
    top: 6%;
    left: -25%;
}

#laptop_16 {
    width: 162.2%;
    position: absolute;
    top: 39%;
    left: -34%;
}

#box_16 .content {
    position: absolute;
    width: min(73%, 70vw);
    height: 25%;
    top: 9%;
    left: 12%;
}

@media only screen and (max-width: 600px) and (orientation: portrait) {
    #laptop_16 {
        top: 56%;
    }
    #box_16 .content {
        height: 45%;
    }
    #paper_16 {
        height: 85vh;
        object-fit: fill;
    }
    #zoom_tag_16 {
        left: -32%;
    }
}



/* Box 17 - Virtual backgrounds --------------------- */
#box_17 .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-left: 5vh;
    margin-right: 18vh;
}

#box_17 .box {
    background: url(../images/10-LilPaper.png) 50% 50% / 100% 100% no-repeat;
    height: min(422px, 47vh);
    width: min(450px, 90vw);
    padding: 14% 12% 15%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    place-items: center;
}

#box_17 .box .overflow {
    max-height: 100%;
}

#box_17 .box.align_end {
    align-self: flex-end;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_17 .box {
        padding: 9% 12% 8%;
    }
}



/* Box 18 - Phone ------------------ */
#background_18 {
    position: relative;
    margin-left: -15vh;
    display: flex;
}

#bg_18 {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    min-height: 100vh;
    object-fit: cover;
    object-position: center left;
}



/* Box 18 - Phone ------------------ */
#box_18 {
    display: flex;
}

#box_18 .inner {
    position: relative;
}

#phone_18 {
    max-width: 100vw;
    max-height: 115vh;
}

#num_18 {
    position: absolute;
    top: 13.8%;
    left: 14.7%;
    rotate: -4.3deg;
    width: 61%;
    height: 10%;
}


/* Box 19 - Podcast ------------------ */
#box_19 {
    display: flex;
    margin-left: -7vh;
}

#mic_19 {
    height: 100%;
    margin-top: 3%;
}

#box_19 .wrapper.text {
    margin-left: 1%;
}
@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_19 .wrapper.text {
        margin-left: max(11%, -19vh);
    }
}
#paper_19 {
    width: min(773px, 100vw);
    min-height: 81vh;
    position: relative;
    margin-top: 6%;
}
#button_19_1 {
    width: min(38.4%, 50vh);
    position: absolute;
    top: 35%;
    left: -18%;
}
#button_19_2 {
    width: min(36.6%, 50vh);
    position: absolute;
    top: 53%;
    left: -31%;
}
#thumb_19_1 {
    width: 37.8%;
    position: absolute;
    top: 65%;
    left: -13%;
}
#thumb_19_2 {
    width: 27.2%;
    position: absolute;
    top: 45%;
    right: -21%;
}
#headphone_19 {
    width: min(66.8%, 60vh);
    position: absolute;
    top: -10%;
    right: -41%;
}
#box_19 .wrapper.text .content {
    position: absolute;
    width: min(66%, 70vw);
    height: 70%;
    top: 19%;
    left: 7%;
}

#box_19 .postit_wrapper_outer {
    width: min(727px, 100vw);
    position: relative;
    margin-left: max(-14vh, -18vw);
    z-index: 2;
}

#box_19 .postit_click_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    xwidth: min(294px, 95vw);
    height: 76vh;
    aspect-ratio: 0.35;
    position: absolute;
    top: 10vh;
    left: 0vh;
}

#box_19 .postit_click_wrapper.noclick {
    pointer-events: none;
}

#box_19 .postit_click_wrapper .postit {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

#box_19 .postit img {
    height: 117%;
    width: auto;
    position: absolute;
    top: -5%;
    left: 0;
}

#box_19 .postit_wrapper_outer h2 {
    color: #000;
    position: relative;
}


#box_19 .postit_popup_wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#box_19 .postit_popup_style {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#box_19 .postit_popup_style > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: contain;
}

#box_19 .postit_popup_style .content {
    position: relative;
    width: 70%;
    max-height: min(68%, 71vw);
}
@media only screen and (max-height: 600px) and (orientation: landscape) {
    #box_19 .postit_click_wrapper {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        height: 82vh;
        aspect-ratio: 1.05;
        top: 14vh;
    }
    #box_19 .postit_popup_style .content {
        width: 50%;
    }

}


#box_19 .postit_popup_style .X {
    margin-top: 1em;
    cursor: pointer;
}

#box_19 .instructions_wrapper {
    position: absolute;
    top: 2%;
    left: -9%;
}

#box_19:after {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: calc(100% - 1px);
    width: 100vw;
    background: #010101;
    z-index: -1;
}

/* Box 20 - You did it ------------------ */

#bg_20 {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: -25vh;
}

#box_20 .wrapper {
    margin-left: 5vh;
    background: #fff;
}

/* Fixes any gaps between sections  */
#box_20 .wrapper:after {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: calc(100% - 1px);
    width: 50vw;
    background: #fff;
    z-index: -1;
}


#circle_20 {
    position: relative;
    width: min(1033px, 500vw);
    margin-left: 9vh;
    margin-top: -12vh;
}

#pool_20 {
    width: 64.7%;
    position: absolute;
    bottom: -11%;
    right: -4%;
    max-height: 65vh;
    object-fit: contain;
    background-position: bottom right;
}

#box_20 .wrapper_inner {
    position: absolute;
    width: min(55%, 70vw);
    top: 14%;
    left: 23%;

}

#box_20 .content {
    max-height: 34vh;
}
#box_20 .close_wrapper {
    margin-top: 1em;
}

#box_20 .close_wrapper h3 {
    border: 2px solid white;
    padding: 0.1em 1em;
    display: inline-block;
    cursor: pointer;
    background: #00aacc;
    transition: 0.25s ease-out all;
    will-change: transform;
}

@media (hover: hover) {
    #box_20 .close_wrapper h3:hover {
        scale: 1.1;
    }
}


#button_20_1 {
    width: 206px;
    position: absolute;
    top: 67%;
    left: 19%;
}
#button_20_2 {
    width: 205px;
    position: absolute;
    top: 55%;
    left: 8%;
}



/* Box 21 - Phone ------------------ */

#box_21 {
    display: flex;
    margin-left: -6vh;
    padding-right: 5vh;
}

#bg_21 {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: -12vh;
}
#box_21 .phone  {
    margin-top: 6%;
}

#box_21 .phone .inner {
    position: relative;
}

#phone_21 {
    max-width: 92vw;
    max-height: 115vh;
}

#num_21 {
    position: absolute;
    top: 35%;
    left: 14.9%;
    width: 70%;
    height: 9%;
}

#button_21_1 {
    width: 205px;
    position: absolute;
    top: -1%;
    left: -35%;
}
#button_21_2 {
    width: 172px;
    position: absolute;
    top: -3%;
    left: -57%;
}


/* Legal box ------------------ */
#box_legal {
    width: min(700px, 90vw);
    background: #f5efe6;
    border-left: 0.8em solid var(--yellow);
    padding-inline: min(35px, 5vw);
    box-sizing: border-box;
    word-break: break-word;
}

#box_legal .wrapper {
    width: 100%;
}

#box_legal .content {
    max-height: 75%;
}
#box_legal p, #box_legal li {
    color: #000;
	font-size: .8125em;
	margin: .5em 0;
}
#box_legal ul {
    margin-left: 4px;
    padding-left: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
}


/* UI Bar ------------------ */
#ui_bar {
    width: min(50px, 8vw);
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    xbackground: url(../images/0-BG.jpg) 50% 0% / cover no-repeat;
    padding: min(10px, 1vw);
    box-sizing: border-box;
    box-shadow: 3px 0px 8px 0px rgba(0, 0, 0, 0.45);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 1fr;
    row-gap: 10px;
}

/* Nav X ------------------ */
#nav_X {
    width: 100%;
    z-index: 1;
    cursor: pointer;
}

#nav_X svg {
    width: 100%;
    stroke: #fff;
}

/* Progress Bar ------------------ */
/* #progress_bar {
    width: min(50px, 8vw);
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    xbackground: url(../images/0-BG.jpg) 50% 0% / cover no-repeat;
    padding: min(10px, 1vw);
    box-sizing: border-box;
    box-shadow: 3px 0px 8px 0px rgba(0, 0, 0, 0.45);
} */

#progress_bar .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
}

#progress_bar .bar_wrapper {
    border: 1px solid white;
    border-radius: 20px;
    height: 100%;
    background: rgb(255 255 255 / 22%);
    position: relative;
}

#progress_bar .bar_wrapper .inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: 100%;
    padding: 15% 1%;
    box-sizing: border-box;
    position: relative;
}

#progress_bar .bar_wrapper .circle_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#progress_bar .circle_container img {
    width: 75%;
}
#progress_bar .circle_container img.flip {
    scale: 1 -1;
}
#progress_bar .circle_container .circle {
    width: 20%;
    border-radius: 50%;
    aspect-ratio: 1;
    border: 1px solid white;
}

#sun_moon {
    width: 90%;
    aspect-ratio: 1;
    position: absolute;
    top: 1%;
    left: 5%;
}

#sun_moon img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    #progress_bar .circle_container:nth-child(2),
    #progress_bar .circle_container:nth-child(3),
    #progress_bar .circle_container:nth-child(4) {
        display: none;
    }
}


/* Quiz section ---------- */
#quiz_box {
    margin-inline: auto;
    margin-top: 2em;
	margin-bottom: 3em;
	text-align: center;
}

#quiz_box .startQuiz {
    display: inline-block;
}

#quiz_box .startQuiz p {
    font-size: 1.2em;
    line-height: 100%;
    font-weight: bold;
    color: #0071C5;
    padding: 0.75em 1.5em;
    margin: 0;
    background-color: #fff;
    box-shadow: 0.2em -0.325em 0.075em 0em rgba(0, 0, 0, 0.25);
    cursor: pointer;
    xletter-spacing: 0.065em;
	xborder-radius: .625rem;
}

#quiz_box.locked {
    filter: saturate(0%);
    pointer-events: none;
}

#quiz_locked_message {
    opacity: 0;
}
#quiz_box.locked #quiz_locked_message {
    opacity: 1;
}

/*#quiz_box p:hover {background-color: #659E44;}
#quiz_box p:active {background-color: #89D359;}*/



/* Keep these near the bottom to make sure your custom code doesn't accidentally overwrite these classes */
.show_on_HD {display: block;}
.show_on_MOB {display: none;}

/* ----------------------------------
            MEDIA QUERIES
---------------------------------- */


/* mobile */
@media only screen and (max-width: 1024px) {
	p, ul, li {line-height: 140%;}
    .show_on_MOB {display: block;}
    .show_on_HD {display: none;}

    #legal_wrapper_full {
        padding-block: 2vw;
    }



}