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

:root {
    --default-width: calc(100% - 10vw);
    --default-block-margin: min(110px, 10vw);
    --blue: #5076ce;
    --orange: #ff7646;
    --bs: 6px 8px 20px 0px rgba(0, 0, 0, 0.35);
    --fs: 6px 6px 10px rgba(0, 0, 0, 0.5);
}

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

html {background: #fff;}
body {color: #000;}

#main_wrapper {
    width: 100%;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
}
.section {
    position: relative;
    margin-top: -2px;
}
.wrapper {
    max-width: var(--default-width);
    position: relative;
    margin-inline: auto;
    box-sizing: border-box;
}


/* ----------------------------------
        MARK: Font Styles
---------------------------------- */
h2 {
    font-kerning: none; 
    text-rendering: optimizeSpeed;
}

h2 + h3 {margin-top: 0.1em;}
h4 + p {margin-top: 0.3em;}
h4 + h4 {margin-top: 0.7em;}

.bold {font-weight: 800;}


/* ----------------------------------
        MARK: Colors
---------------------------------- */
.white {color: #fff;}
.black {color: #000;}
.blue {color: var(--blue);}
.orange {color: var(--orange);}

.white_bg {background-color: #fff;}


/* ----------------------------------
        MARK: Misc Default Styles
---------------------------------- */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

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

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


/* ----------------------------------
        MARK: Custom Code
---------------------------------- */
.fixed_bg {
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
}
.inline_img {
    height: auto;
    position: relative;
    display: block;
    margin-inline: auto;
}
.full_width {width: 100%;}

.textbox {
    position: relative;
    display: block;
    margin-inline: auto;
}

video {
    border: 0;
    outline: 0;
    display: block;
}

.box_style {
    background-color: #fff;
    position: relative;
    padding: min(70px, 6vw) min(70px, 6vw);
    box-sizing: border-box;
    box-shadow: var(--bs);
    margin-inline: auto;
}

.perspective {perspective: 1500px;}
.perspective > * {transform-style: preserve-3d;}


/* ------------------
    MARK: Panel #1
--------------------- */
#panel_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: min(50px, 6vw);
    box-sizing: border-box;
}
#panel_1 .wrapper {
    width: min(860px, 100%);
    padding-top: min(50px, 6vw);
}
#textbox_1 div {
    position: relative;
    display: inline-flex;
}
.burst1_style {
    width: min(34px, 5%);
    height: auto;
    display: block;
    position: absolute;
    margin-bottom: 8%;
}
#burst_1L {right: calc(100% + min(25px, 2vw));}
#burst_1R {left: calc(100% + min(25px, 2vw));}
#textbox_1 h5.hand {--min-font-size: 38;}
#bog_video_1 {width: max(102%, 625px);}

h5 {
    margin-block: 0 !important;
    padding-right: 0.1em; /* the 'n' extends outside of box so extra padding needed to prevent clipping */
}
#textbox_1 h1 {
    margin-bottom: -0.35em;
}


/* ------------------
    MARK: Panel #2
--------------------- */
#panel_2 {
    background: url(../images/2-BG_HD.jpg) 50% 0% / cover no-repeat;
    overflow: hidden;
}
@media only screen and (min-width: 1921px) {
    #panel_2 {background: url(../images/2-BG_HD.jpg) 50% 60% / cover no-repeat;}
}
#panel_2 .wrapper {
    width: min(960px, 80%);
    padding-top: min(132px, 5vw);
    padding-bottom: 32px;
}
#panel_2 .wrapper .inner {
    position: relative;
    aspect-ratio: 960 / 739;
    padding: min(150px, 12vw) min(100px, 8vw) min(150px, 12vw) min(90px, 8vw);
    box-sizing: border-box;
}
#textBG_2 {
    width: 118.238%;
    position: absolute;
    margin-right: 4%;
}
#textbox_2 {z-index: 2;}
#ball_2 {
    width: min(373px, 39%);
    position: absolute;
    left: 83%;
    bottom: -5%;
}
#balls_2 {
    width: min(468px, 49%);
    position: absolute;
    right: 95.5%;
    bottom: 3%;
}
#coffee_container {
    width: min(895px, 94%);
    position: absolute;
    left: 76%;
    bottom: 6%;
}
#steam_2 {position: absolute;}

.gradient_wave {
    width: 203%;
    height: auto;
    display: block;
    position: relative;
    margin: 0;
    z-index: 2;
}
.gradient_wave svg {
    width: 100%;
    display: block;
}


/* ------------------
    MARK: Panel #3
--------------------- */
#outter_3 {
    mask-image: url(../images/wave-mask.svg);
    mask-size: 203%;  /* same size and animations as .gradient_wave */
    mask-repeat: no-repeat;
    mask-position: 0% 0%;
    margin-top: -4.5vw;
    z-index: 2;
}
#panel_3 {
    width: min(1920px, 100%);
    margin-inline: auto;
    padding-bottom: min(115px, 8vw);
    box-sizing: border-box;
}
#bg_3 {
    width: max(104.0625%, 1350px);
    position: absolute;
    margin-top: 5%;
    margin-left: -3%;
}
#placement_3 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#panel_3 .wrapper {
    width: min(615px, 42vw);
    min-height: min(1138px, 64vw);
}
#img_container_3 {
    width: auto;
    height: 100%;
    aspect-ratio: 717/1138;
    position: absolute;
    left: calc(100% + 40px);
}
#img_container_3 img {position: absolute;}
#coffee_ring_3 {
    width: 80.2%;
    top: 5.9%;
    left: 0;
}
#pic_3_1 {
    width: 55.9%;
    top: 10.6%;
    left: 3.9%;
}
#pic_3_2 {
    width: 47.8%;
    top: 27.9%;
    right: 0;
}
#badge_3 {
    width: 62.8%;
    bottom: 0;
    left: 22.6%;
}


/* ------------------
    MARK: Panel #4
--------------------- */
#bg_4 {background: url(../images/4-BG_HD.jpg) 50% 50% / cover no-repeat;}
#panel_4 {
    background: 
        url(../images/4-SeamTop.png) 50% 0% / 100% auto no-repeat, 
        url(../images/4-SeamBottom.png) 50% 100% / 100% auto no-repeat;
    z-index: 2;
}
#cover_4 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
#panel_4 .wrapper {
    width: min(1168px, 100%);
    padding-bottom: 80px;
}
#textbox_4 {
    width: min(834px, 85%);
    margin-bottom: min(44px, 5vw);
}
#video_4 {
    position: relative;
    margin: 0;
    box-sizing: border-box;
    box-shadow: var(--bs);
}
#video_4 video {
    width: 100%;
    height: auto;
    position: relative;
    cursor: pointer;
    z-index: 2;
}
#pic_4 {
    width: min(523px, 38vw);
    position: absolute;
    right: 86%;
    bottom: -24%;
}


/* ------------------
    MARK: Panel #5
--------------------- */
#panel_5 {
    padding-block: min(200px, 12vw) var(--default-block-margin);
    box-sizing: border-box;
}
#panel_5 .wrapper {
    width: min(1490px, 100%);
    max-width: calc(100% - 3vw);
}
#bg_5 {filter: drop-shadow(var(--fs));}
#panel_5 .inner {
    width: min(770px, 60%);
    position: absolute;
}
#textbox_5 {
    padding-block: min(140px, 8vw);
    z-index: 2;
}
#doodle_5_1 {
    width: min(367px, 21vw);
    position: absolute;
    top: 78%;
    right: 88%;
}
#doodle_5_2 {
    width: min(385px, 21vw);
    position: absolute;
    bottom: 61%;
    left: 87%;
}


/* ------------------
    MARK: Panel #6
--------------------- */
#panel_6 .wrapper {
    width: min(1300px, 100%);
    max-width: 80vw;
    min-height: min(710px, 70dvh);
    padding-block: calc(var(--default-block-margin) * 1.25) var(--default-block-margin);
}
#textbox_6 {
    width: min(945px, 75%);
    margin-top: 4%;
}
#textbox_6 h3 {margin-top: 1em;}
#panel_6 .inline_img {position: absolute;}
#bg_6 {
    width: 126.7%;
    top: 0;
    margin-left: 1vw;
}
#doodle_6_1 {
    width: 285px;
    top: 16%;
    right: 98.5%;
}
#doodle_6_2 {
    width: 105px;
    top: 8%;
    left: 98%;
}
#pic_6_1 {
    width: min(279px, 18vw);
    bottom: 2%;
    right: min(99%, 77vw);
}
#pic_6_2 {
    width: min(426px, 26vw);
    bottom: 7%;
    left: min(99%, 70vw);
}
#paper_6_1 {
    width: 473px;
    bottom: -3%;
    left: -5vw;
}
#paper_6_2 {
    width: 473px;
    bottom: -4%;
    right: -5vw;
}


/* ------------------
    MARK: Panel #8
--------------------- */
#panel_7 {background: linear-gradient(49deg, rgb(31,60,128) 1%, rgb(56,89,167) 68%, rgb(80,118,206) 100%);}
.chat_layout .wrapper {
    width: min(800px, var(--default-width));
    padding-block: var(--default-block-margin);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px 50px;
    align-items: center;
}


/* 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;}



/* ----------------------------------
        MARK: MEDIA QUERIES
---------------------------------- */

/* TABLET LANDSCAPE */
@media only screen and (max-width: 1024px) {
    .show_on_HD {display: none;}
    .show_on_MOB {display: block;}
	p, ul, li {line-height: 140%;}
    #panel_3 {padding-bottom: 0;}
    #bg_3 {
        width: 118.75%;
        top: 4.75vw;
        left: 0;
        margin-top: 0;
        margin-left: 0;
    }
        #panel_3 .wrapper {
        width: 100%;
        min-height: unset;
        display: block;
        max-width: 100%;
    }
    #img_container_3 {
        width: 100vw;
        height: auto;
        aspect-ratio: 768 / 446;
        position: relative;
        left: 0;
    }
    #coffee_ring_3 {
        width: 55.5%;
        top: -15.4%;
        left: 2%;
    }
    #pic_3_1 {
        width: 37%;
        top: 2%;
        left: 72%;
    }
    #pic_3_2 {
        width: 32%;
        top: 2%;
        left: 25%;
        right: unset;
    }
    #badge_3 {
        width: 37%;
        bottom: 13%;
        left: 48%;
    }
    #textbox_3 {
        width: var(--default-width);
        padding-block: var(--default-block-margin) calc(var(--default-block-margin) * 1.5);
        box-sizing: border-box;
    }
    #panel_4 .wrapper {padding-block: 20vw;}
    #pic_4 {display: none;}
    #doodle_5_1 {top: 29vw;}
    #doodle_5_2 {bottom: 29vw;}
    #panel_6 .wrapper {min-height: unset;}
}


/* TABLET PORTAIT */
@media only screen and (max-width: 768px) {
    #textBG_2, #bg_5, #doodle_6_1, #doodle_6_2, #paper_6_1, #paper_6_2, #bg_6, #pic_6_1, #pic_6_2 {display: none;}
    #panel_2 {background: url(../images/2-BG_MOB.jpg) 50% 75% / cover no-repeat;}
    #coffee_container {
        width: min(895px, 86%);
        left: 55%;
        bottom: 7.5%;
    }
    #balls_2 {
        width: min(468px, 62%);
        right: 63.5%;
    }
    #ball_2 {
        width: min(373px, 39%);
        left: 57%;
    }
    #bg_4 {background: url(../images/4-BG_MOB.jpg) 50% 50% / cover no-repeat;}
    #panel_5 .wrapper {
        background: url(../images/5-Pop_MOB.png) 0% 20% / cover no-repeat;
        max-width: var(--default-width);
        padding-block: 20vw;
    }
    #panel_5 .inner {
        width: min(770px, 68vw);
        position: relative;
    }
    #doodle_5_1, #doodle_5_2 {width: 18vw;}
    #doodle_5_1 {top: 39vw;}
    #doodle_5_2 {bottom: 39vw;}
    #panel_6 {background: #edecea url(../images/6-Book_MOB.jpg) 50% 0% / 100% auto no-repeat;}
    #panel_6 .wrapper {
        max-width: var(--default-width);
        padding-block: 29vw 10vw;
    }
    #textbox_6 {width: 100%;}
}


/* PHONE */
@media only screen and (max-width: 650px) {
    #coffee_container, #doodle_5_1, #doodle_5_2 {display: none;}
    .box_style {text-align: start;}
    #panel_2 .wrapper {
        width: 100%;
        padding-block: 14vw;
    }
    #panel_2 .wrapper .inner {
        aspect-ratio: unset;
        padding: 0;
    }
    #ball_2 {
        left: 77%;
        bottom: 5%;
    }
    #balls_2 {bottom: 3%;}
    #textbox_4 {width: 90%;}
    #panel_5 .inner {width: var(--default-width);}
    .chat_layout .wrapper {
        padding-bottom: calc(var(--default-block-margin) + 4vw);
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* SMALL PHONES */
@media only screen and (max-width: 350px) {
    #textbox_1 h1 {--min-font-size: 35;}
    #textbox_1 h5.hand {--min-font-size: 33;}
    #textbox_4 {width: 100%;}
}