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

:root {
    --default-width: calc(100% - 10vw);
    --green: #27972a;
    --teal: #11889d;
    --bs: 6px 8px 20px 0px rgba(0, 0, 0, 0.35);
}

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

html {
    background: #fff;
}

body {
    overflow-x: hidden;
    color: #000;
}

.wrapper {
    margin-inline: auto;
    position: relative;
}


/* ----------------------------------
        MARK: Font Styles
---------------------------------- */

h1 {
	color: var(--green);
	letter-spacing: -0.01em;
}

h2 {
	color: var(--teal);
}

h3 {

}

h4 {
	color: var(--pink);
}


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


/* ----------------------------------
        MARK: Colors
---------------------------------- */
.white { color:#fff; }
.black { color:#000000; }

.white_bg { background-color: #fff; }

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


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

.section {
    position: relative;
}

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

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

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

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

.touchandswipe {
    display: flex;
    align-items: center;
    margin-top: min(40px, 6vw);
    margin-bottom: -3vw;
}
.touchandswipe img {margin-inline-end: 0.5em;}
.touchandswipe.hide {display: none;}


/* ----------------------------------
        MARK: Custom Code
---------------------------------- */
section {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    background: #fff;
}

svg {
    display: block;
}

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

.gradient_bar {
    width:100%;
    height: min(35px, 6vw);
    background-image: linear-gradient(to right, var(--green), var(--teal), var(--green));
    background-size: 190vw;
    background-position: 0% 0%;
    box-shadow: var(--bs);
    position: relative;
    z-index: 1;
}

/* ---------------
    MARK: Panel 1
   --------------- */

#video_1 {
    width: 102%;
    height: auto;
    position: absolute;
    top: 0px;
    left: -1%;
}

#panel_1 .wrapper {
    width: min(1000px, var(--default-width));
    padding-top: 10.2vw;
    padding-bottom: 25px;
}

#logo_1 {
    width: min(930px, 80%);
    margin-bottom: 15px;
}

#panel_1 .thin {
    width: min(830px, 100%);
    margin-inline: auto;
}


/* ---------------
    MARK: Panel 2
   --------------- */
#panel_2 {
    overflow: hidden;
}
#panel_2 .wrapper {
    width: min(1475px, var(--default-width));
    background: url(../images/2_paper_HD.png) 50% 0% / 100% auto no-repeat;
    padding-block: 40px min(75px, 10vw);
}
#panel_2 .bg {
    width: 100%;
    height: auto;
    max-height: 571px;
    object-fit: cover;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#decoration_2 {
    width: min(873px, 65%);
    margin-inline: auto;
    display: block;
}
#panel_2 .box {
    width: min(1060px, 72%);
    padding: min(70px, 6vw) min(80px, 4vw);
    margin-inline: auto;
    box-sizing: border-box;
    box-shadow: var(--bs);
}

#panel_2 h4 {
    color: var(--green);
}


/* ---------------
    MARK: Panel 3
   --------------- */

#panel_3 .bg {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: 0px;
    left: 0px;
    min-height: 24%;
    max-height: 33%;
}
#panel_3 .top_text.wrapper {
    width: min(1030px, var(--default-width));
    padding-block: min(138px, 14vw) min(40px, 6vw);
}


#panel_3 .interaction.wrapper {
    width: min(1655px, var(--default-width));
    padding-bottom: min(50px, 12vw);
}

#panel_3 .button_wrapper {
    position: relative;
}

#panel_3 .button_3_style {
    cursor: pointer;
    width: min(167px, 26vw);
    transition: opacity 0.2s ease;
}

#panel_3 .button_3_style.clicked {
    opacity: 0.5;
}
#panel_3 .button_3_style.active {
    opacity: 1;
}
#panel_3 .lockup_wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1655 / 387;
    margin-block: min(40px, 6vw) 15px;
}

#panel_3 .lockup_3_style {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
}

#panel_3 .lockup_text_wrapper {
    position: relative;
    width: min(830px, 100%);
    display: inline-grid;
}
#panel_3 .text_3_style {
    grid-area: 1 / 1;
}
#panel_3 h4 {
    color: var(--green);
}

#tappy_3 {
    width: min(75px, 14vw);
    position: absolute;
    top: 39%;
    left: 51%;
    pointer-events: none;
}


/* ---------------
    MARK: Panel 4
   --------------- */

#panel_4 .top_text.wrapper {
    width: min(800px, var(--default-width));
    padding-block: min(138px, 15vw) min(40px, 9vw);
}

#panel_4 .bar_wrapper.wrapper {
    width: min(1036px, var(--default-width));
    margin-bottom: min(50px, 9vw);
}

#bar_track4 {
    width: 100%;
    position: relative;
}

#drag_4 {
    position: absolute;
    top: 0px;
    left: 0;
    height: 100%;
    width: 1px;
}

#drag_4 img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(116px, 19vw);
}

#panel_4 .location_wrapper {
    width: min(1333px, var(--default-width));
    position: relative;
    padding-bottom: min(50px, 9vw);
}
#panel_4 .laptop_wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1333 / 638;
    max-height: 65vh;
}
#panel_4 .laptop_wrapper img {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    object-fit: contain;
}

#panel_4 .caption_wrapper {
    margin-top: max(-90px, -2vw);
    display: grid;
}

.caption_4_style {
    width: min(720px, 80%);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    margin-inline: auto;
    box-sizing: border-box;
    grid-area: 1 / 1;
}
.caption_4_style .image {
    position: relative;
    width: min(224px, 20vw);
}
.caption_4_style .image img {
    width: 123.6%;
    height: auto;
    position: absolute;
    top: 50%;
    right: -14%;
    transform: translate(0, -50%);
}
.caption_4_style .text {
    padding: min(25px, 5vw) min(25px, 5vw);
    color: #fff;
    box-shadow: var(--bs);
}

#caption_4_1 .text {
    background: #c32800;
}
#caption_4_2 .text {
    background: #2b8f13;
}
#caption_4_3 .text {
    background: #004858;
}

#tappy_4 {
    width: min(75px, 14vw);
    position: absolute;
    top: 4%;
    left: 7%;
    pointer-events: none;
}


/* ---------------
    MARK: Panel 5
   --------------- */

#panel_5 .wrapper {
    width: min(800px, var(--default-width));
    padding-block: min(100px, 6vw) min(40px, 8vw);
}

#video_5 {
    width: 100%;
}


/* ---------------
    MARK: Panel 6
   --------------- */
#panel_6 {
    padding-bottom: 35px; /* prevents video shadow from being cut off */
    overflow: hidden;
}

#panel_6 .wrapper {
    width: min(1000px, var(--default-width));
    padding-block: min(100px, 13vw) min(40px, 7vw);
}

#video_6 {
    width: min(1290px, var(--default-width));
    box-shadow: var(--bs);
    margin-inline: auto;
    cursor: pointer;
    border-style: solid;
    border-image-slice: 1;
    border-width: min(25px, 2vw);
    border-image-source: linear-gradient(60deg, var(--green), var(--teal));
}

#video_6 video {
    width: 100%;
}

/* ---------------
    MARK: Panel 7
   --------------- */

#panel_7 .wrapper {
    width: min(1170px, var(--default-width));
    padding-block: min(25px, 6vw) min(175px, 13vw);
}
#panel_7 .explore_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(30px, 8vw);
    margin-top: min(40px, 8vw);
}

#panel_7 .explore_wrapper .box {
    box-shadow: var(--bs);
    color: #fff;
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin-inline: auto;
}

#panel_7 .explore_wrapper .box img {
    width: 100%;
    height: auto;
    display: block;
}

#panel_7 .explore_wrapper .box .text {
    padding: min(25px, 5vw) 15px;
    background-image: linear-gradient(to right, var(--green), var(--teal));
    flex-grow: 1;
    text-align: center;
    color: #fff;
}


/* ---------------
    MARK: Panel 8
   --------------- */

#panel_8 .bg {
    background: url(../images/8_bg_HD.jpg) 50% 50% / cover no-repeat;
    padding-block: min(125px, 19vw);
}
#panel_8 .box.wrapper {
    width: min(775px, var(--default-width));
    padding: min(70px, 6vw) min(70px, 4vw);
    margin-inline: auto;
    box-sizing: border-box;
    box-shadow: var(--bs);
}


#moving_bar {
    width: 100%;
    padding-block: min(45px, 9vw);
    overflow: hidden;
}

#moving_bar .bar_wrapper {
    position: relative;
    width: 100%;
}

#placeholder_8 {
    width: min(152px, 25vw);
    visibility: hidden;
}

#moving_bar .inner {
    xwidth: 100%;
    display: flex;
    gap: min(30px, 5vw);
    flex-wrap: nowrap;
    position: absolute;
    top: 0;
    left: 0;
}

#moving_bar .inner .block {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
}

#moving_bar .inner .blue_glow {
    --color: #00ffff;
    --color-trans: #00ffff99;
}

#moving_bar .inner .yellow_glow {
    --color: #ffc74d;
    --color-trans: #ffc74d99;
}

#moving_bar .inner img {
    border: 2px solid var(--color);
    box-shadow: 0 0 12px 3px var(--color-trans);
    width: min(152px, 25vw);
}


/* ---------------
    MARK: Panel 9
   --------------- */

#panel_9 .wrapper {
    width: min(1490px, var(--default-width));
    background: url(../images/9_image_HD.jpg) 50% 50% / cover no-repeat;
    padding-block: min(330px, 34vw);
    box-shadow: var(--bs);
    margin-block: min(180px, 12vw) min(120px, 12vw);
}
#panel_9 .box {
    width: min(775px, var(--default-width));
    padding: min(70px, 6vw) min(70px, 4vw);
    margin-inline: auto;
    box-sizing: border-box;
    box-shadow: var(--bs);
}

#panel_9 h4 {
    color: var(--green);
}


/* ---------------
    MARK: Panel 10
   --------------- */

#panel_10 .wrapper {
    width: min(1170px, var(--default-width));
    padding-bottom: min(140px, 12vw);
}

#panel_10 h2 {color: var(--green);}

/* ---------------
    MARK: Panel 11
   --------------- */
#panel_11 {
    background: linear-gradient(58deg, #3c3686 40%, #655ebe 60%);
}
#panel_11 .wrapper {
    width: min(800px, var(--default-width));
    min-height: 260px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px 50px;
}

#panel_11 h3 {
    color: #fff;
}


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

/* TABLET */
@media only screen and (max-width: 1024px) {
	p, ul, li {line-height: 140%;}

    #panel_2 .wrapper {
        background-image: url(../images/2_paper_TAB.png);
    }

}

/* MARK: 768 */
/* MOBILE */
@media only screen and (max-width: 768px) {

    #panel_2 .wrapper {
        width: 100%;
        background-image: url(../images/2_paper_MOB.png);
    }
    #panel_2 .bg {display: none;}
    #panel_2 .box {
        width: var(--default-width);
    }
    #decoration_2 {
        width: 85%;
    }
    #panel_3 .lockup_wrapper {
        aspect-ratio: 768 / 317;
    }

    #panel_7 .explore_wrapper {
        grid-template-columns: 1fr;
    }
    #panel_8 .bg {
        background: url(../images/8_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }
    #panel_9 .wrapper {
        background: url(../images/9_image_MOB.jpg) 50% 21% / cover no-repeat;
    }
    #panel_11 .wrapper {
        min-height: unset;
        grid-template-columns: 1fr;
        padding-block: 6vw 12vw;
        text-align: center;
    }
}

/* MARK: 650 */
/* MOBILE */
@media only screen and (max-width: 650px) {

    #panel_2 .box, #panel_8 .box, #panel_9 .box {
        text-align: start;
    }

    .caption_4_style {
        width: 90%;
        grid-template-columns: 1fr;
    }

    .caption_4_style .image {
        display: none;
    }




}

/* PHONE */
@media only screen and (max-width: 500px) {
    #panel_3 .bg {
        min-height: 38%;
        max-height: 50%;
    }
}