/* ----------------------------------
        RESPONSIVE MODULE STYLES
---------------------------------- */

:root {
    --arrow-bar-height: 45px;
    --nav-tracker-height: 5px;
    --ui-height: calc(var(--arrow-bar-height) + var(--nav-tracker-height));
    --disclaimer-bar-height: 35px;
    --default-width: calc(100% - 10vw);
    --default-block: min(50px, 8vw);
    --blue: #1428a0;
    --red: #b60000;
    --periwinkle: #3e64ff;
    --lt-shadow: 0 2px 7px 3px rgb(0 0 0 / 25%);
    --black-border: 6px solid #000;
    --popup-close-width: min(62px, 14vw);
}

/* ----------------------------------
        MARK: Main Layout
---------------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

html, body, #main_wrapper, [data-overlayscrollbars-viewport] {
    overscroll-behavior: none;
}

body {
    background: #373737;
    overflow: hidden;
    height: 100dvh;
    color: #000;
}

#main_wrapper {
    /* position: absolute; */
    position: fixed; /* Gwen fix 10/2/2024 */
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background:#111111;
}

.page {
    display: flex;
    min-height: 100dvh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: var(--ui-height);
    box-sizing: border-box;
}


/* ----------------------------------
        MARK: Fonts
---------------------------------- */
p {
    --max-font-size: 20;
    margin-block: 10px;
    line-height: 150%;
}

ul {
    margin-block: 15px;
    line-height: 150%;
    margin-inline-start: 35px;
}

li {
    --max-font-size: 20;
    margin-block: 5px;
    line-height: 150%;
}

h1 {
	--max-font-size: 50;
	--min-font-size: 30;
	font-weight: bold;
	line-height: 110%;
}

h1.title {
	--max-font-size: 60;
	--min-font-size: 34;
}

h2 {
	--max-font-size: 30;
	--min-font-size: 24;
	font-weight: bold;
	line-height: 110%;
}

h3 {
	--max-font-size: 26;
	--min-font-size: 22;
	font-weight: bold;
	line-height: 130%;
}

h4 {
	--max-font-size: 22;
	--min-font-size: 18;
    font-weight: normal;
    line-height: 130%;
}

h5 {
	--max-font-size: 22;
	--min-font-size: 21;
    font-weight: normal;
    line-height: 130%;
}

.scene p:first-child {
    margin-top: 0;
}
.scene p:last-child {
    margin-bottom: 0;
}



.white { color:#fff; }
.black { color:#000000; }
.blue { color: var(--blue); }
.red { color: var(--red); }
.periwinkle { color: var(--periwinkle); }
.lt_blue { color:#00adef; }
.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; }

.white_bg { background-color: #fff; }

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

/* ----------------------------------
        MARK: Misc Defaults
---------------------------------- */

.bgStyle {
    position: fixed;
    overflow: hidden;
    width: 100vw;
    height: calc(100dvh - var(--ui-height));
    top: 0px;
    left: 0px;
}

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

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

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

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

.wrapper.vhc {
    margin-inline: auto;
}


/* Wrap all charts/tables in a div with this class if you want them to be swipeable on mobile */
.chart {overflow-x: auto;}

.touchandswipe {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.touchandswipe img {margin-inline-end: 0.5em;}
.touchandswipe.hide {display: none;}


/* ----------------------------------
    MARK: Custom Code
---------------------------------- */

.w100 {
    width: 100%;
    height: auto;
    display: block;
}

.white_textbox_style {
    background: #fff;
    color: #000;
    border: var(--black-border);
    box-sizing: border-box;
}

.inner {
    position: relative;
}


/*--------------------------
    MARK: 1-1 Samsung
----------------------------- */
#wrapper_1_1 {
    background: linear-gradient(to right, #153b99 0%, #153b99 49.6%, black 49.6%, black 50.1%, #750814 50.1%, #750814 100%);
}

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

#wrapper_1_1 .inner {
    width: min(1140px, var(--default-width));
    padding: min(50px, 5vw) min(65px, 4vw);
    margin-top: min(30vw, 180px);
    margin-bottom: var(--default-block);
    box-shadow: var(--lt-shadow);
}

.oled_logo {
    max-width: 80%;
    margin-bottom: 20px;
}


/* SCENE 1 END  ---------------------------------------------------- */


/*--------------------------
    MARK: 2-1 Colors
----------------------------- */
#wrapper_2_1 {
    background: #fff url(../images/2_bg_HD.jpg) 50% calc(100% - var(--ui-height)) / max(1000px, 100%) auto no-repeat;
    align-items: flex-end;
}

#wrapper_2_1 .inner {
    width: 100%;
    margin-top: var(--default-block);
}

#wrapper_2_1 .inner > div {
    margin-inline: auto;
    text-align: center;
}

#wrapper_2_1 .top_text {
    width: min(960px, var(--default-width));
}

#wrapper_2_1 .inner .spinner_wrapper {
    position: relative;
    margin-top: 30px;
}

#spinner_2 {
    position: relative;
    width: min(580px, 90%);
    margin-inline: auto;
    padding-bottom: min(220px, 20vw);
    box-sizing: border-box;
    z-index: 1;
}

#pinwheel_2, #pinwheel_2 img {
    width: 100%;
    aspect-ratio: 1;
    position: absolute;
}

#spinner_2 .center {
    position: relative;
    pointer-events: none;
    width: 100%;
}

#post {
    width: min(27px, 5.5vw);
    position: absolute;
    user-select: none;
    top: 45%;
    overflow: hidden;
}
#post img {
    width: 100%;
    height: auto;
    display: block;
}

#grass_2 {
    background: url(../images/2_GrassFront_HD.png) 50% 100% / auto 100% repeat-x;
    width: 100vw;
    height: min(116px, 7vw);
    position: absolute;
    bottom: var(--ui-height);
    left: 0;
}

.clicked {
    opacity: 0.4;
}

#cover_2_1,
#cover_3_1,
#cover_5_2 {display: none;}

#cover_2_1 {z-index: 2;}


@media only screen and (min-width: 1921px) {
    #wrapper_2_1 .inner .spinner_wrapper {
        height: min(74vh, 1010px);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    #spinner_2 {
        padding-bottom: 0;
    }
    #post {
        top: unset;
        bottom: 0;
        height: 70%;
    }
}


/*--------------------------
    MARK: 2 Popups
----------------------------- */
.popup {
    height: calc(100% - var(--ui-height));
    position: fixed;
    min-height: unset;
    padding-bottom: 0;
    z-index: 3;
}

.popup .popup_inner {
    position: relative;
    min-height: 100%;
}

.popup .text h1 {
    width: 90%;
    margin-inline: auto;
} 
.popup .X {
    cursor: pointer;
}

#scene_2_1 .X {
    width: var(--popup-close-width);
    height: auto;
    position: fixed;
    top: 4vw;
    right: 4vw;
    cursor: pointer;
    z-index: 2;
}

/*--------------------------
    MARK: 2-2 Contrast
    Popup
----------------------------- */
#popup_2_2 {background:#fff;}

#popup_2_2 .wrapper {
    display: grid;
    grid-template-columns: min(570px, 45%) 1fr;
    gap: min(130px, 7vw);
    width: min(1630px, var(--default-width));
    margin-block: var(--default-block);
    align-items: center;
}
#popup_2_2.popup .text h1 {width: 100%;} 
#popup_2_2 .text img {
    margin-top: 30px;
    max-width: 90%;
}

#device_2_2 {
    width: min(912px, 100%);
    height: auto;
    display: block;
}




/*--------------------------
    MARK: 2-3 Color
    Popup
----------------------------- */
#popup_2_3 {
    background: url(../images/2_POP2_bg_HD.jpg) 50% 50% / cover no-repeat;
}

#popup_2_3 .wrapper {
    display: grid;
    grid-template-columns: min(570px, 45%) 1fr;
    gap: 30px min(130px, 7vw);
    width: min(1630px, var(--default-width));
    margin-block: var(--default-block);
    align-items: center;
}

#popup_2_3.popup .text h1 {width: 100%;} 
#popup_2_3 .text .grid_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px min(75px, 4vw);
    margin-top: 30px;
    width: fit-content;
    justify-items: center;
}

#popup_2_3 .text .grid_wrapper img {
    width: min(192px, 100%);
}

#popup_2_3 .label h3 {
    --max-font-size: 38;
    --min-font-size: 24;
}


#before_after_2_3 {
    position: relative;
    display: inline-block;
}

#before_after_2_3 .device {
    width: min(912px, 100%);
    height: auto;
    display: block;
}


#before_after_2_3 .image {
    width: 81.2%;
    position: absolute;
    top: 2.2%;
    left: 9.4%;
}

#before_after_2_3 .drag {
    width: 8.14%;
    position: absolute;
    top: 2.1%;
    left: 46%;
}



/*--------------------------
    MARK: 2-4 Gamers
    Popup
----------------------------- */
#popup_2_4 {
    background: url(../images/2_POP3_bg_HD.jpg) 50% 50% / cover no-repeat;
}

#popup_2_4 .wrapper {
    width: min(1160px, var(--default-width));
    margin-block: var(--default-block);
}

#popup_2_4 .grid_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px min(50px, 6vw);
    margin-top: min(50px, 7vw);
}

#popup_2_4 .grid_wrapper img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: var(--lt-shadow);
}

#popup_2_4 .lcd {
    border: 2px solid #720d0f;
}
#popup_2_4 .oled {
    border: 2px solid #01f9ff;
}

/*--------------------------
    MARK: 2-5 Creators
    Popup
----------------------------- */
#popup_2_5 {
    background: url(../images/2_POP4_bg_HD.jpg) 50% 50% / cover no-repeat;
}

#popup_2_5 .wrapper {
    width: min(1320px, var(--default-width));
    margin-block: var(--default-block);
}

#popup_2_5 .grid_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: min(45px, 5vw);
    grid-auto-flow: row;
    grid-template-areas:
        "transition transition transition"
        "c1 c2 c3";
    margin-top: min(50px, 8vw);
}

.transition { grid-area: transition; }
.c1 { grid-area: c1; }
.c2 { grid-area: c2; }
.c3 { grid-area: c3; }

#popup_2_5 .transition .inner {
    margin-inline: auto;
    display: flex;
    align-items: center;
    width: min(100%, 975px);
    gap: 10px;
}

#popup_2_5 .transition .inner .icon {
    width: min(60px, 100%);
    height: auto;
    display: block;
}

#popup_2_5 .line_container {
    display: flex;
    flex-grow: 1;
    align-items: center;
}

.dashed_gradient_line {
    height: 2px; /* The thickness of the line */
    width: 100%;
    flex-grow: 1;

    /* A. The Line's Color: A smooth gradient from start to end */
    background: linear-gradient(to right, #ea9d39, #393839);

    /* B. Define the Dashing Pattern Variables */
    --dash-size: 8px; /* Length of the visible dash */
    --gap-size: 4px; /* Length of the gap */
    --repeat-length: calc(var(--dash-size) + var(--gap-size));

    /* C. The Mask-Image: A repeating pattern of black (show) and transparent (hide) */
    mask-image: linear-gradient(
        to right,
        black 0%, /* Start of the dash color (opaque) */
        black var(--dash-size),  /* End of the dash color */ 
        transparent var(--dash-size),  /* Start of the transparent gap */
        transparent var(--repeat-length) /* End of the transparent gap */  
    );

    /* D. Apply the repeat and size properties to the mask */
    mask-size: var(--repeat-length) 100%; /* Set the size of one dash-and-gap block */
    mask-repeat: repeat-x;

    /* Optional: For older browsers, you may need the vendor prefix 
    -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black var(--dash-size),
    transparent var(--dash-size),
    transparent var(--repeat-length)
    );
    -webkit-mask-size: var(--repeat-length) 100%;
    -webkit-mask-repeat: repeat-x;*/
}


#popup_2_5 .arrow {  
    width: min(25px, 100%);
    height: auto;
    display: block;  
    margin-left: -4px;
}

#popup_2_5 .comparison img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: var(--lt-shadow);
}

#popup_2_5 .comparison .labels {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 10px;
    gap: 0%;
}

#popup_2_5 .comparison .labels h3 {
    flex-basis: 50%;
    text-align: center;
}



/* SCENE 2 END  ---------------------------------------------------- */




/*--------------------------
    MARK: 3-1 Surface
----------------------------- */

#wrapper_3_1 {
    --frame-width: min(40px, 5vw);
    --border-radius: 20px;
    background: #fff;
}

#wrapper_3_1 .laptop_frame {
    background: #000;
    width: min(1820px, 100%);
    padding: var(--frame-width) var(--frame-width) 0 var(--frame-width);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

#wrapper_3_1 .camera {
    position: absolute;
    top: min(10px, 1vw);
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: min(20px, 3vw);
}


#wrapper_3_1 .laptop_content {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border: 8px solid #888888;
    background: #fff;
    border-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
    min-height: 100%;
}

#wrapper_3_1 .branch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#wrapper_3_1 .text_wrapper {
    width: min(1030px, 90%);
    padding-top: min(90px, 20vw);
    z-index: 1;
}


#wrapper_3_1 .flower_wrapper {
    display: inline-grid;
    width: min(960px, 90%);
    grid-template-columns: repeat(4, 1fr);
    gap: min(40px, 2vw);
    z-index: 1;
    margin-top: min(60px, 3vw);
    align-items: flex-end;
}

#wrapper_3_1 .ground_wrapper {
    position: relative;
    background: #8dcb5e url(../images/3_bg1_HD.jpg) 50% 0% / cover no-repeat;
    width: 100%;
    flex-grow: 1;
    margin-top: -75px;
    display: flex;
    justify-content: center;
}


#wrapper_3_1 .tree_style {
    position: absolute;
    top: 0;
    pointer-events: none;
}
#wrapper_3_1 .tree_left {
    right: min(1310px, 84%);
    width: 549px;
}
#wrapper_3_1 .tree_right {
    left: min(1400px, 92%);
    width: 465px;
}

.dark_style {
    pointer-events: none;
    background: rgb(0 0 0 / 50%);
}

/*--------------------------
    MARK: 3-1 Scratchoff
----------------------------- */
.scratchoff_wrapper {
    text-align: center;
}

.scratchoff_wrapper .scratchoff_inner {
    position: relative;
    display: inline-block;
    user-select: none;
    z-index: 1;
}

.scratchoff_wrapper .stem {
    display: block;
    margin-top: -30px;
    margin-inline: auto;
}
.scratchoff_wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

/*--------------------------
    MARK: 3 Popups
----------------------------- */

#scene_3_1 .popup {
    z-index: 1;
    background: rgb( 0 0 0 / 35%);
}

#scene_3_1 .popup .X {
    width: var(--popup-close-width);
    height: auto;
    position: absolute;
    top: 10px;
    right: 10px;
}


#scene_3_1 .popup_inner .wrapper {
    position: relative;
    width: min(1180px, var(--default-width));
    margin-block: var(--default-block);
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: flex-end;
    height: min(500px, 80vh);
    background-position: 0% 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: var(--lt-shadow);
}

#scene_3_1 .popup .text {
    width: 50%;
    max-height: 100%;
}

#scene_3_1 .popup .text .text_inner {
    --text-padding: min(40px, 4vw);
    padding: var(--text-padding) var(--text-padding) var(--text-padding) 0;
}

/*--------------------------
    MARK: 3-2 Touch
    Popup
----------------------------- */
#popup_3_2 .wrapper {
    background-image: url(../images/3_POP1_bg_HD.jpg);
}


/*--------------------------
    MARK: 3-3 Pooling
    Popup
----------------------------- */
#popup_3_3 .wrapper {
    background-image: url(../images/3_POP2_bg_HD.jpg);
}


/*--------------------------
    MARK: 3-4 Form
    Popup
----------------------------- */
#popup_3_4 .wrapper {
    background-image: url(../images/3_POP3_bg_HD.jpg);
}

/*--------------------------
    MARK: 3-5 Polarizer
    Popup
----------------------------- */
#popup_3_5 .wrapper {
    background-image: url(../images/3_POP4_bg_HD.jpg);
}


/* SCENE 3 END  ---------------------------------------------------- */



/*--------------------------
    MARK: 4-1 Time
----------------------------- */
#wrapper_4_1 {
    background: url(../images/4_bg_HD.jpg) 50% 50% / cover no-repeat;
}
#wrapper_4_1 .inner {
    width: min(1000px, var(--default-width));
    margin-block: var(--default-block);
}

#wrapper_4_1 .grid_wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px min(80px, 4vw);
    margin-top: min(45px, 6vw);
}

#wrapper_4_1 .grid_wrapper .box {
    display: flex;
    flex-direction: column;
    color: #fff;
    box-shadow: var(--lt-shadow);
}


#wrapper_4_1 .grid_wrapper .header {
    padding: 0.5em 1em;
}

#wrapper_4_1 .grid_wrapper .text {
    padding: 1em min(30px, 3vw);
    flex-grow: 1;
}

#wrapper_4_1 .grid_wrapper .box > img {
    width: 100%;
    display: block;
}

#wrapper_4_1 .grid_wrapper .box h2 {
    --max-font-size: 40;
    --min-font-size: 28;
}

#lcd_4_1 .header {
    background: #ff0000;
}

#lcd_4_1 .text {
    background: #b60000CC;
}


#oled_4_1 .header {
    background: #3e64ff;
}

#oled_4_1 .text {
    background: #1428a0CC;
}


/*--------------------------
    MARK: 4-2 Result
----------------------------- */
#wrapper_4_2 {
    background: url(../images/5_bg_HD.jpg) 50% 50% / cover no-repeat;
}
#wrapper_4_2 .inner {
    width: min(971px, var(--default-width));
    margin-block: var(--default-block);
}
#wrapper_4_2 .bike {
    width: 100%;
    display: block;
    margin-top: min(40px, 7vw);
}

/*--------------------------
    MARK: 4-3 Proof
----------------------------- */
#wrapper_4_3 {
    background: url(../images/6_bg_HD.jpg) 50% 50% / cover no-repeat;
}
#wrapper_4_3 .inner {
    width: min(900px, var(--default-width));
    margin-block: var(--default-block);
}

#wrapper_4_3 .top_text {
    margin-bottom: min(40px, 6vw);
}

#chart_4_3 {
    margin-top: 10px;
    overflow-x: auto;
}

#chart_4_3 img {
    width: min(900px, 200vw);
}

/* #chart_4_3 {
    display: grid;
    grid-template-columns: auto auto 1fr;
}

#chart_4_3 > div {
    border-top: 1px solid #666;
    
}

#chart_4_3 .colA,
#chart_4_3 .colB {
    padding-block: 14px;
}

#chart_4_3 .colA {
    padding-right: 5px;
}

#chart_4_3 .colB {
    padding-right: 5px;
}

#chart_4_3 p {
    font-weight: bold;
}

#chart_4_3 .colC {
    display: flex;
    align-items: center;
    gap: 10px;
}

#chart_4_3 .colC .bar {
    flex-grow: 1;
    height:  100%;
}
 */



/*--------------------------
    MARK: 4-4 Why
    reponse time matters to gamers
----------------------------- */
#wrapper_4_4 {
    background: white;
}
#wrapper_4_4 .laptop_frame {
    margin-top: min(100px, 8vw);
    width: min(1625px, var(--default-width));
    border: 6px solid #fff;
    border-bottom: none;
    padding: 15px;
    padding-bottom: 0;
    background: #000;
    box-shadow: var(--lt-shadow);
    display: flex;
    max-height: 1380px; /* to keep 4K screens from looking bizarre */
}

#wrapper_4_4 .laptop_frame .content {
    background: #0e2559 url(../images/7_Track_0e2559_HD.jpg) 50% 100% / 100% auto no-repeat;
    color: #fff;
    position: relative;
    padding-top: min(100px, 6vw);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#wrapper_4_4 .car_wrapper {
    width: 100%;
    height: min(430px, 23vw);
    position: relative;
    margin-top: min(120px, 40vw);
}

#wrapper_4_4 .hood {
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}



#wrapper_4_4 .wheel_wrapper {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
}
#wrapper_4_4 .wheel {
    width: min(859px, 53%);
}
#wrapper_4_4 .text {
    width: min(960px, 90%);
    margin-inline: auto;
    z-index: 1;
}

/*--------------------------
    MARK: 4-5 Why #2
    reponse time matters to creators
----------------------------- */
#wrapper_4_5 {
    background: white;
}
#wrapper_4_5 .inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto min-content min-content min-content auto;
    gap: 0px 0px;
    grid-auto-flow: row;
    width: 100%;
}


#wrapper_4_5 .text_wrapper {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#wrapper_4_5 .text_wrapper .text {
    width: min(1000px, var(--default-width));
    margin-block: var(--default-block);
}

#wrapper_4_5 .image_wrapper {
    grid-area: 2 / 1 / 5 / 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1;
}

#wrapper_4_5 .image_wrapper .image_inner {
    display: flex;
    align-items: center;
    gap: 8vw 13.9%;
    margin-bottom: var(--default-block);
    width: min(1225px, var(--default-width));
}

#wrapper_4_5 .device {
    position: relative;
    width: 48.9%;
}

#wrapper_4_5 .base {
    display: block;
    width: 100%;
}

#wrapper_4_5 .focus {
    position: absolute;
    top: 40.3%;
    left: 39.8%;
    width: 20.53%;
}

#wrapper_4_5 .focus .focus_circle {
    width: 100%;
}

#wrapper_4_5 .focus .shade_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0, -54%);
    width: 525.2%;
}

#wrapper_4_5 .focus .shade {
    width: 100%;
}

#wrapper_4_5 .zoom {
    width: 37.2%;
    margin-top: 2.5%;
    z-index: 1;
}
#wrapper_4_5 .zoom img {
    width: 100%;
    display: block;
}

#wrapper_4_5 .bg {
    grid-area: 3 / 1 / 6 / 2;
    background: url(../images/8_bg_HD.png) 50% 0% / cover repeat;
}

/* SCENE 4 END  ---------------------------------------------------- */


/*--------------------------
    MARK: 5-1 Eye Care
----------------------------- */
#wrapper_5_1 {
    --border: 4px solid #000;
    background: url(../images/9_bg_HD.jpg) 50% 50% / cover no-repeat;
    flex-direction: column;
    justify-content: center;
}
#wrapper_5_1 .top_text,
#wrapper_5_1 .wrapper,
#wrapper_5_1 .chart_outer {
    width: min(960px, var(--default-width));
    margin-block: var(--default-block);
    margin-inline: auto;
}

#wrapper_5_1 .full_width_bar {
    background: #000;
    color: white;
}

#chart_5_1 {
    display: grid;
    grid-template-columns: min(179px, 30vw) 1fr;
    grid-template-rows: 20px auto 20px auto 20px auto 20px;
    gap: 0px min(40px, 4vw);
}

#chart_5_1 .bar_outer, #chart_5_1 .border {
    border-left: var(--border);
}

#chart_5_1 .type img {
    width: min(158px, 100%);
}

#chart_5_1 .bar_outer {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

#chart_5_1 .bar {
    height: min(130px, 28vw);
    border: var(--border);
    border-left: none;
    box-sizing: border-box;
}

#lcd_bar_5_1 {
    background: url(../images/9_LCD_repeat.png) repeat;
    width: 100%;
}

#oled_lt_bar_5_1 {
    background: url(../images/9_OLED_Lt_repeat.png) repeat;
    width: 30.4%;
}

#oled_dk_bar_5_1 {
    background: url(../images/9_OLED_Dk_repeat.png) repeat;
    width: 7%;
}


/*--------------------------
    MARK: 5-2 Less Blue
----------------------------- */
#wrapper_5_2 {
    background: url(../images/10_bg_HD.jpg) 50% 50% / cover no-repeat;
}

#wrapper_5_2 .inner {
    width: min(1175px, var(--default-width));
    margin-block: var(--default-block);
}

#click_wrapper_5_2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px min(60px, 5vw);
    margin-top: min(30px, 5vw);
    position: relative;
    justify-items: center;
}

#wrapper_5_2 .click_wrapper .box_style {
    box-shadow: var(--lt-shadow);
    cursor: pointer;
    aspect-ratio: 556 / 487;
    width: min(556px, 100%);
}

#click_5_3 {
	 background: url(../images/10_btn1.jpg) 50% 50% / cover no-repeat;
}
#click_5_4 {
	 background: url(../images/10_btn2.jpg) 50% 50% / cover no-repeat;
}

#click_wrapper_5_2 .popup {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: 100%;
}


#click_wrapper_5_2 .popup .text .vc {
    height: 100%;
}
#click_wrapper_5_2 .popup .text .align {
    max-height: 100%;
}
#click_wrapper_5_2 .popup .text .align2 {
    padding: min(80px, 7vw) min(45px, 4vw);
}


#click_wrapper_5_2 .popup .image {
    border: var(--black-border);
    overflow: hidden;
}

#click_wrapper_5_2 .popup .image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.15);
    transform-origin: 20% 0%;
}

#click_wrapper_5_2 .popup .X {
    position: absolute;
    top: 14px;
    right: 18px;
    cursor: pointer;
    width: min(62px, 14%);
    z-index: 1;
}

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

.clicked3 {
    opacity: 0.7;
    filter: grayscale(0.6);
}

#popup_5_3 .text {
    border-left: none;
}

#popup_5_3 .text:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0;
    height: 100%;
    width: 3px;
    background: #000;
}
#click_wrapper_5_2 #popup_5_3 .image {
    border-right-width: 3px;
}
    

#popup_5_4 .text {
    border-right: none;
}

#popup_5_4 .text:after {
    content: '';
    position: absolute;
    right: 0px;
    top: 0;
    height: 100%;
    width: 3px;
    background: #000;
}
#click_wrapper_5_2 #popup_5_4 .image {
    border-left-width: 3px;
}



/*--------------------------
    MARK: 5-3 Gamers
    Popup
----------------------------- */


/*--------------------------
    MARK: 5-4 Creators
    Popup
----------------------------- */

/* SCENE 5 END  ---------------------------------------------------- */


/*--------------------------
    MARK: 6-1 Power
----------------------------- */

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

#wrapper_6_1 .inner {
    width: min(1150px, var(--default-width));
    margin-block: var(--default-block);
}

#wrapper_6_1 .description_wrapper {
    width: min(990px, 100%);
    margin-inline: auto;
}

#wrapper_6_1 .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px min(50px, 6vw);
    align-items: center;
    margin-top: min(65px, 6vw);
}

#wrapper_6_1 .row img {
    border: var(--black-border);
    box-shadow: var(--lt-shadow);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

/* SCENE 6 END  ---------------------------------------------------- */


/* ----------------------------------
    MARK: Quiz
---------------------------------- */
#wrapper_quiz {
    background: linear-gradient(to right, #4b3629 0%, #4b3629 49.6%, black 49.6%, black 50.1%, #326528 50.1%, #326528 100%);
}

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

#wrapper_quiz .inner {
    width: min(1140px, var(--default-width));
    padding: min(50px, 5vw) min(65px, 4vw);
    margin-block: var(--default-block);
    box-shadow: var(--lt-shadow);
}

#wrapper_quiz .butterfly {
    width: min(400px, 40vw);
    position: absolute;
    left: 89%;
    bottom: 75%;
    transform-origin: 30% 80%;
}

#quiz_box {
    margin-top: 20px;
    text-align: center;
}

#quizTitleButton {
    cursor: pointer;
    padding: 0.4em 1.7em;
    display: inline-block;
    position: relative;
}

#quizTitleButton p {
    margin: 0;
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
}

#quizTitleButton:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: var(--blue);
    transition: all 0.3s ease;
}



#legalButton {
    margin-top: 1em;
    cursor: pointer;
}

#legalButton p {
    color: #282828;
    transition: all 0.3s ease;
    user-select: none;
    display: inline-block;
}

@media (hover: hover) {
    #quizTitleButton:hover:after {
        height: 100%;
    }
    #quizTitleButton:hover p {
        color: #fff;
    }

    #legalButton p:hover {
        color: #000;
    }
}
/* QUIZ END  ---------------------------------------------------- */







/* 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 */
@media only screen and (max-width: 1024px) {

	p, ul, li {line-height: 140%;}
    .show_on_MOB {display: block;}
    .show_on_HD {display: none;}

    .hide_at_1024 {display: none;}

    #popup_2_2 .wrapper, #popup_2_3 .wrapper {
        grid-template-columns: 1fr;
    }
    #popup_2_3 .text .grid_wrapper {margin-inline: auto;}
    #popup_2_2 .wrapper,
    #popup_2_3 .wrapper,
    #popup_2_4 .wrapper,
    #popup_2_5 .wrapper {
        margin-top: calc(6vw + var(--popup-close-width));
    }
    #popup_2_2.popup .text .inner, #popup_2_3.popup .text .inner {width: 100%;}
    .popup .text h1 {width: 100%;}

    #wrapper_3_1 .flower_wrapper {
        width: min-content;
        grid-template-columns: repeat(2, 1fr);
        gap: min(40px, 2vw);
        margin-bottom: 30px;
    }
    
    .scratchoff_wrapper .stem,
    #wrapper_3_1 .tree_style {display: none;}

    #scene_3_1 .popup_inner .wrapper {
        height: unset;
        width: min(494px, var(--default-width));
        align-items: flex-start;
    }     

    #scene_3_1 .popup .text {
        width: 100%;
        height: calc(100dvh - var(--ui-height));
    }

    #scene_3_1 .popup .text .text_inner {
        padding: var(--text-padding);
        padding-top: calc(4vw + var(--popup-close-width));
        min-height: 100%;
        background-position: 50% 100%;
        background-size: 100% auto;
        background-repeat: no-repeat;
        padding-bottom: 100%;
        box-sizing: border-box;
    }

    /* Move location of background images on mobile due to scrollbar setup */
    #popup_3_2 .wrapper, 
    #popup_3_3 .wrapper,
    #popup_3_4 .wrapper,
    #popup_3_5 .wrapper {
        background-image: unset;
    }

    #popup_3_2 .wrapper .text_inner {
        background-image: url(../images/3_POP1_bg_TAB.jpg);
    }

    #popup_3_3 .wrapper .text_inner {
        background-image: url(../images/3_POP2_bg_TAB.jpg);
    }

    #popup_3_4 .wrapper .text_inner {
        background-image: url(../images/3_POP3_bg_TAB.jpg);
    }

    #popup_3_5 .wrapper .text_inner {
        background-image: url(../images/3_POP4_bg_TAB.jpg);
    }


}

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

    :root {
        --arrow-bar-height: 55px;
    }

    .hide_at_768 {display: none;}

    #wrapper_1_1 {
        background: linear-gradient(to right, #153b99 0%, #153b99 49.6%, black 49.6%, black 50.3%, #750814 50.3%, #750814 100%);
    }

    #wrapper_1_1 .bgStyle {
        background: url(../images/1_bg_MOB.jpg) 50% 0% / 100% auto no-repeat;
    }

    #wrapper_1_1 .inner {
        margin-top: 30vw;
        margin-bottom: var(--default-block);
    }

    #wrapper_2_1 {
        background: #fff url(../images/2_bg_MOB.jpg) 50% calc(100% - var(--ui-height)) / 100% auto no-repeat;
    }
    #grass_2 {
        background: url(../images/2_GrassFront_MOB.png) 50% 100% / contain no-repeat;
        height: auto;
        aspect-ratio: 768/183;
    }
    #spinner_2 {padding-bottom: min(220px, 26vw);}

    #popup_2_3 {
        background: url(../images/2_POP2_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }
    #popup_2_4 {
        background: url(../images/2_POP3_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }
    #popup_2_5 {
        background: url(../images/2_POP4_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }
    #popup_2_4 .text, #popup_2_5 .text {text-align: start;}
    #popup_2_2.popup .text .inner, #popup_2_3.popup .text .inner {text-align: start;}

    #popup_2_5 .grid_wrapper {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "transition c1"
            "transition c2"
            "transition c3";
    }

    #popup_2_5 .transition .inner {
        flex-direction: column;
        height: 100%;
    }

    #popup_2_5 .line_container {
        flex-direction: column;
    }


    .dashed_gradient_line {
        width: 2px;
        height: 100%;
        background: linear-gradient(to bottom, #ea9d39, #393839);
        mask-image: linear-gradient(to bottom,
         black 0%, /* Start of the dash color (opaque) */
          black var(--dash-size), /* End of the dash color */
           transparent var(--dash-size), /* Start of the transparent gap */
           transparent var(--repeat-length) /* End of the transparent gap */);
        mask-size: 100% var(--repeat-length) ;
        mask-repeat: repeat-y;
    }

    #popup_2_5 .arrow {
        transform: rotate(90deg);
        margin-left: 0px;
    }

    #wrapper_3_1 .ground_wrapper {
        background: url(../images/3_bg1_MOB.jpg) 50% 0% / cover no-repeat;
    }

    #wrapper_4_1 {
        background: url(../images/4_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }
    #wrapper_4_2 {
        background: url(../images/5_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }
    #wrapper_4_3 {
        background: url(../images/6_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }

    #wrapper_4_4 .laptop_frame .content {
        background-image: url(../images/7_Track_0e2559_MOB.jpg);
    }
    #wrapper_4_5 .bg {
        background-image: url(../images/8_bg_MOB.png);
    }


    #wrapper_4_5 .image_wrapper .image_inner {
        flex-direction: column;
    }

    #wrapper_4_5 .device {
        width: 100%;
    }

    #wrapper_4_5 .focus {
        top: 40.3%;
        left: 39.8%;
        width: 20.53%;
    }

    #wrapper_4_5 .focus .focus_circle {
        z-index: 1;
        position: relative;
    }

    #wrapper_4_5 .focus .shade_wrapper {
        transform: translate(-50%, 0);
        width: 315.2%;
    }

    #wrapper_4_5 .zoom {
        width: 76%;
        margin-top: 0;
    }

    #wrapper_5_1 {
        background: url(../images/9_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }
    #wrapper_5_2 {
        background: url(../images/10_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }
    #click_wrapper_5_2 {
        grid-template-columns: 1fr;
    }

    #click_wrapper_5_2 .popup {
        grid-template-columns: 1fr;
        grid-template-rows: 0.8fr 1fr;
        min-height: unset;
        height: calc(100dvh - var(--ui-height));
        box-sizing: border-box;
        position: fixed;
    }

    #popup_5_4 .text {
        order: 2;        
    }
    #popup_5_4 .image {
        order: 1;        
    }
    #click_wrapper_5_2 #popup_5_3 .image {
        border-right-width: 6px;
    }
    #click_wrapper_5_2 #popup_5_4 .image {
        border-left-width: 6px;
    }
    #popup_5_3 .text {
        border-left: var(--black-border);
    }
    #popup_5_4 .text {
        border-right: var(--black-border);
    }
    #popup_5_3 .text:after,
    #popup_5_4 .text:after {
        display: none;
    }

    #wrapper_6_1 .bgStyle {
        background: url(../images/11_bg_MOB.jpg) 50% 50% / cover no-repeat;
    }

    #wrapper_6_1 .row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #wrapper_quiz {
        background: linear-gradient(to right, #4b3629 0%, #4b3629 49.6%, black 49.6%, black 50.3%, #326528 50.3%, #326528 100%);
    }

    #wrapper_quiz .bgStyle {
        background: url(../images/12_bg_MOB.jpg) 50% 0% / 100% auto no-repeat;
    }

    #wrapper_quiz .butterfly {
        bottom: 89%;
    }


}

/* MARK: 550
   tiny mobile */
@media only screen and (max-width: 550px) {
    #text_1_1, #text_2_1, #text_3_1, #wrapper_4_1 .inner, #text_4_3, .touchandswipe, #text_4_4, #text_4_5, #wrapper_5_1 .top_text, #wrapper_6_1 .top_text, #wrapper_6_1 .row, #text_quiz {text-align: start!important;}

    .touchandswipe {justify-content: flex-start;}
    .oled_logo {
        margin-inline: auto;
        display: block;
    }

    #popup_2_4 .grid_wrapper {
        grid-template-columns: 1fr;
    }

    #popup_2_3 .wrapper .text,
    #popup_2_4 .wrapper .text,
    #popup_2_5 .wrapper .text {
        text-align: start;
    }
    #popup_2_3 .text .grid_wrapper {text-align: center;}
    #popup_2_5 .grid_wrapper {grid-template-columns: 12vw 1fr;}

    #wrapper_3_1 .flower_wrapper {
        grid-template-columns: 1fr;
    }

    #wrapper_3_1 .ground_wrapper {
        height: 70px;
    }

    #wrapper_4_1 .grid_wrapper {
        grid-template-columns: 1fr;
    }

}