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

:root {
    --default-width: calc(100% - 10vw);
    --default-block-margin: min(140px, 12vw);
    --default-small-margin: min(75px, 12vw);
    --navy: #00376f;
    --green: #4aa02c;
    --spring-green: #46a65b;
    --teal: #006e76;
    --dk-blue: #00376f;
    --med-blue: #149ce4;
    --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;
}
.wrapper {
    margin-inline: auto;
    position: relative;
    box-sizing: border-box;
}
.section {position: relative;}


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


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

/* TODO animation */.blue_gradient {background-image: linear-gradient(to right, var(--dk-blue), var(--med-blue), var(--dk-blue));}
.blue_gradient_reverse {background-image: linear-gradient(to right, var(--med-blue), var(--dk-blue), var(--med-blue));}

.green_gradient {background-image: linear-gradient(to right, var(--teal), var(--spring-green), var(--teal));}
.green_gradient_reverse {background-image: linear-gradient(to right, var(--spring-green), var(--teal), var(--spring-green));}

.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;
    margin-inline: auto;
}

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

.border {
    width: 100%;
    height: min(30px, 90vw);
    display: block;
    position: relative;
    background-size: 200%;
    background-position: 0% 0%;
    z-index: 1;
}
.top_border {margin-bottom: -1px;}
.bottom_border {margin-top: -1px;}
.bottom_border::after {
    content: '';
    width: 100%;
    height: min(20px, 3vw);
    position: absolute;
    left: 0;
    top: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}

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

.tappy_hand {
    pointer-events: none;
    position: absolute;
}

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

.balance {text-wrap: balance;}


#bg_0 {background: url(../images/0_bg_HD.jpg) 50% 50% / cover no-repeat;}

/* ------------------
     MARK: 1-Intro
--------------------- */
#panel_1 .wrapper {
    /* padding-block: var(--default-block-margin); */
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr) min(970px, 100%) minmax(0,1fr);
}

#panel_1 .col_big {
    padding-block: var(--default-block-margin);
}

#logo_1 {
    max-width: 100%;
}
#line_1 {
    max-width: 100%;
    margin-block: min(50px, 5vw) min(50px, 3.5vw);
}
#textbox_1 {
    width: 100%;
}

.col_small {
    position: relative;
}

#lanyard_1 {
    position: absolute;
    top: -350px;
    left: 0%;
    z-index: 2;
}

@media only screen and (max-width: 1600px) {
    #lanyard_1 {
        width: 18vw;
        left: unset;
        right: -2vw;
        top: -5%;
    }
}
@media only screen and (max-width: 1335px) {
    #lanyard_1 {
        display: none;
    }
}
/* ----------------------
   MARK: 2 Mission
------------------------- */

#panel_2 .wrapper.text {
    width: 100%;
    padding-top: min(110px, 12vw);
    padding-bottom: min(200px, 27vw);
    background: url(../images/2_bg_HD.jpg) 50% 0% / cover no-repeat;
}
#textbox_2 {width: min(800px, var(--default-width));}

#bend_2_1 {
    width: 71.6%;
    position: absolute;
    top: 0;
    left: 0;
}
#bend_2_2 {
    width: 5.8%;
    position: absolute;
    bottom: 0;
    right: 0;
}

#ignite_border {
    /* width: 100%; */
    min-height: min(180px, 9vw);
    container-name: ignite;
    container-type: inline-size;
    height: unset;
}

#ignite_border .wrapper {
    width: min(1550px, var(--default-width));
    gap: 0px min(11px, 1vw);
    margin-top: max(-137px, -17vw);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: min(70px, 7vw);
}

#ignite_border .wrapper > div {
    display: flex;
    align-items: flex-end;
}

#ignite_border img {
    width: min(243px, 29vw);
    flex-grow: 0;
}

/* @container ignite (width < 1550px) and (width > 1050px) { */
@container ignite (1050px < width < 1750px) {
    #ignite_border .wrapper {
        width: min(1200px, var(--default-width));
    }
}

/* @media only screen and (max-width: 1500px) {
    #ignite_border .wrapper {
        width: min(1550px, var(--default-width));
        align-items: flex-end;
        gap: min(1px, 4vw) min(15px, 4vw);
        margin-top: max(-137px, -17vw);
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }
}
 */

/* ----------------------
   MARK: 3 Brochure
------------------------- */
#panel_3 .wrapper {
    width: min(1000px, var(--default-width));
    padding-block: var(--default-small-margin);
}

/* ----------------------
   MARK: 4 Video
------------------------- */
#panel_4 .wrapper {
    width: 100%;
    padding-block: var(--default-block-margin);
    background: url(../images/3_bg_HD.jpg) 50% 0% / cover no-repeat;
}

.video_wrapper {
    width: min(1280px, var(--default-width));
    position: relative;
    margin: 0;
    box-shadow: var(--bs);
}
#video_4 video {
    width: 100%;
    height: auto;
    cursor: pointer;
}
#video_4 > img {
    width: 100%;
    height: auto;
    display: block;
}


.sticker_wrapper {
    position: absolute;
    top: 9%;
    left: -7.8%;
    width: 17.8%;
    aspect-ratio: 228 / 423;
    pointer-events: none;
}

.sticker_wrapper img {
    position: absolute;
    width: 76.3%;
}

#sticker_4_1 {
    top: 0%;
    right: 0;
}

#sticker_4_2 {
    top: 30%;
    left: 0%;
}

#sticker_4_3 {
    top: 62%;
    right: 3%;
}


/* ----------------------
   MARK: 5 PowerPoint
------------------------- */
#panel_5 .wrapper {
    width: min(970px, var(--default-width));
    padding-block: var(--default-block-margin) var(--default-small-margin);
}


/* ----------------------
   MARK: 6 PP Interactive
------------------------- */

#panel_6 .wrapper {
    width: min(1500px, var(--default-width));
    xpadding-block: var(--default-block-margin);
}

#base_6 {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(transparent, transparent) padding-box, linear-gradient(51deg, var(--spring-green) 0%, var(--teal) 100%) border-box;
    border: min(20px, 2.5vw) solid transparent;
    box-shadow: var(--bs);

}

#powerpoint_wrapper {
    position: absolute;
    width: 48.3%;
    aspect-ratio: 719 / 407;
    border: 3px solid var(--navy);
    top: 15.8%;
    left: 26.1%;
    box-sizing: border-box;
    overflow: hidden;
}

#powerpoint_wrapper img {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

#presenting_6 {
    width: 20.5%;
    position: absolute;
    bottom: -2%;
    left: -0.7%;
}


/* ----------------------
   MARK: 7 Email Blast
------------------------- */
#panel_7 .wrapper {
    width: min(1030px, var(--default-width));
    padding-block: var(--default-block-margin) var(--default-small-margin);
}



/* ----------------------
   MARK: 8 Eblast Laptop
------------------------- */
#base_8 {
    width: 100%;
    display: block;
}
#eblast_wrapper {
    width: 28%;
    height: 50%;
    position: absolute;
    top: 20%;
    left: 39.9%;
    xoutline: 1px solid red;
    clip-path: polygon(0% 0%, 99% 2.5%, 97.6% 96%, 0% 91.7%);
}

#eblast_wrapper img {
    width: 112%;
    position: absolute;
    top: 0px;
    left: 0px;
}


/* ---------------------
    MARK: 9 Result
------------------------ */
#panel_9 {
    padding-block: var(--default-block-margin) var(--default-small-margin);
    box-sizing: border-box;
}
#panel_9 .wrapper {
    width: min(1490px, var(--default-width));
    min-height: min(1222px, 114dvh);
    background: url(../images/6_image_HD.jpg) 50% 50% / cover no-repeat;
    padding: min(50px, 5vw);
    box-shadow: var(--bs);
}
#textbox_9 {width: min(775px, 100%);}

#bend_9_1 {
    width: 40.3%;
    position: absolute;
    top: 0;
    right: 0;
}
#bend_9_2 {
    width: 40.1%;
    position: absolute;
    bottom: 0;
    left: 0;
}



/* ---------------------
    MARK: 10 At the End
------------------------ */

#panel_10 .wrapper {
    width: min(770px, var(--default-width));
    padding-bottom: var(--default-small-margin);
}

#panel_10 h3 {
    margin-block: 0.6em;
}



/* ---------------------
    MARK: 11 Let’s Chat
------------------------ */
#panel_11 {
    background: linear-gradient(58deg, #1e5049 40%, #049653 60%);
}

.chat_layout .wrapper {
    width: min(900px, var(--default-width));
    padding-block: min(90px, 12vw);
}
.chat_layout .textbox {
	width: 100%;
	display: flex;
	position: relative;
	margin: auto;
	color:#fff;
	gap: 20px min(50px, 5vw);
	/* align-items: center; */
}
.closing {
	max-width: 70%;
	flex-shrink: 0;
}



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



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

    .col_small {display: none;}
    
    #panel_1 .wrapper {
        grid-template-columns: 1fr;
    }
    #panel_1 .col_big {
        width: min(100%, var(--default-width));
        margin-inline: auto;
    }
}

/* MARK: 768 */
/* TABLET PORTAIT */
@media only screen and (max-width: 768px) {
    
    #bg_0 {background: url(../images/0_bg_MOB.jpg) 50% 50% / cover no-repeat;}

    #panel_2 .wrapper.text {
        background: url(../images/2_bg_MOB.jpg) 50% 0% / cover no-repeat;
    }
    #panel_4 .wrapper {
        background: url(../images/3_bg_MOB.jpg) 50% 0% / cover no-repeat;
    }

    #powerpoint_wrapper {
        width: 79%;
        aspect-ratio: 719 / 408;
        border: 2px solid var(--navy);
        top: 16.4%;
        left: 11%;
    }
    #presenting_6 {
        width: 41%;
    }

    #eblast_wrapper {
        width: 52.3%;
        height: 50%;
        top: 20.2%;
        left: 31%;
        clip-path: polygon(6% 0%, 99% 2.5%, 97.6% 96%, 1.7% 91.7%);
    }

    #panel_9 .wrapper {
        min-height: 78dvh;
        background: url(../images/6_image_MOB.jpg) 50% 50% / cover no-repeat;
        padding: min(50px, 5vw);
    }
}

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

    .box_style {text-align: start;}    

    #panel_9 .wrapper {
        min-height: unset;
        padding-block: 25vw;
    }

    .chat_layout .wrapper {padding-bottom: 16vw;}
	.chat_layout .textbox {
		gap: 7vw;
		flex-direction: column;
		text-align: center;
	}
	.closing {max-width: 100%;}
}