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

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

body {
    background: #373737;
    overflow-x: hidden;
    font-size: 16px;
    color: #fff;
    font-family: Montserrat, Verdana, sans-serif;
}


.wrapper {
    position: relative;
}


/* Font Styles ------------------------- */

/* normal */
@font-face {
    font-family: Montserrat;
    src: url(font/Montserrat-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

/* bold */
@font-face {
    font-family: Montserrat;
    src: url(font/Montserrat-Bold.ttf);
    font-weight: 500;
    font-style: normal;
}

/* italic */
@font-face {
    font-family: Montserrat;
    src: url(font/Montserrat-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}

/* semibold */
@font-face {
    font-family: Montserrat;
    src: url(font/Montserrat-SemiBold.ttf);
    font-weight: 600;
    font-style: normal;
}

/* extra bold */
@font-face {
    font-family: Montserrat;
    src: url(font/Montserrat-ExtraBold.ttf);
    font-weight: 900;
    font-style: normal;
}


p {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 150%;
    font-size: 1em;
    color: #000;
}

.bubble p {
    margin-top: 6px;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: min(1em, 1.5vw)
}


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

li {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 150%;
    font-size: 1em;
    margin-left: 19px;
}

h1 {
    font-size: 2.5em;
    font-weight: 900;
    margin: 0;
    color: #2294b8;
}

h2 {
    font-size: 1.875em;
    font-weight: 600;
    margin: 0;
    color: #333333;
}

h3 {
    font-size: 2em;
    font-weight: normal;
    color: #000;
    line-height: 130%;
    margin: 0;
}


h4 {
    font-size: 1.4em;
    font-weight: normal;
    color: #000;
    line-height: 150%;
}



.white { color:#fff; }
.black { color:#000000; }

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

.bold {font-weight: bold;}
.itl {	font-style: italic;}
.lte { font-weight: lighter; }


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

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

.section {
    position: relative;
}


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


.ie11_message {
    display: none;
    padding: 2em;
    text-align: center;
}
.ie11 .ie11_message {display: block;}
.ie11 .form_wrapper {display: none;}



@keyframes mouse-wheel{0%{opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0)}100%{opacity: 0;-webkit-transform: translateY(.5em);-ms-transform: translateY(.5em);transform: translateY(8px)}}
#mouse_anim{height: 2.625em;width: 1.5em;border-radius: .875em;transform: none;border: .125em solid #000;margin: 1.25em auto 0;}
#mouse_wheel{display: block;margin: .3125em auto;background: #000;position: relative;height: .25em;width: .125em;border: .125em solid #000;-webkit-border-radius: .5em;border-radius: .5em;-webkit-animation: mouse-wheel .8s linear infinite;-moz-animation: mouse-wheel .8s linear infinite;animation: mouse-wheel .8s linear infinite}



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

#main_wrapper {
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
    background: #dddddd;
    box-shadow: 0 0 8px rgba(0,0,0,0.50), 
                0 0 16px rgba(0,0,0,0.20), 
                0 0 32px rgba(0,0,0,0.20),
                0 0 64px rgba(0,0,0,0.20);
}

.outer_section {
    background: #dddddd;
}

.section img.main {
    width: 100%;
    height: auto;
}

.comic .wrapper {
    margin: 0 3vw;
}

.bubble {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

button {
    background: #ff0735;
    border: 4px solid #000;
    text-align: center;
    padding: 10px 20px;
    cursor: pointer;
    display: block;
    position: relative;
    transition: background 0.5s;
}

button p {
    margin: 0;
    color: #fff;
    font-weight: bold;
    font-family: Montserrat, Verdana, sans-serif;
    font-size: 15px;;
}

button:hover {
    background: #000;
}


/* ----------------------------------
         CUSTOM SECTIONS
---------------------------------- */

#top_bar {
    height: 120px;
    background: #000;
    padding: 30px 30px 24px 30px;
    box-sizing: border-box;
}


/* Title ------------------------------------ */
#title_screen {
    height: calc(100vh - 130px);
    background: #ffd401 url(../images/1-Image.jpg) 50% 0% / 100% auto no-repeat;
    border-bottom: 10px solid #000;
}

#title_screen .burst {
    width: 100%;
    height: 100%;
    background: url(../images/1-Text_Bubble_1.png) 50% 50% / cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 29% 0 30%;
    box-sizing: border-box;
}

#title_screen .form_wrapper {
    width: 100%;
    max-width: 650px;
    margin-top: 35px;
}

#title_screen form div {
    border-bottom: 2px solid #000;
    margin-bottom: 25px;
    display: flex;
}

#title_screen label p {
    margin: 0 10px 0 0;
    font-weight: bold;
    position: relative;
    display: inline-block;
    flex-shrink: 0
}

#title_screen input {
    flex-grow: 1;
    border: none;
    font-family: Montserrat, Verdana, sans-serif;
    font-size: 1em;
}

#title_screen input:focus {
    border: none;
    outline: none;
}

#title_screen button {
    margin: 30px auto 0;
}
/* ----------------------------------
          SECTION: PART 1
---------------------------------- */

/* Box 1------------------------------------ */
#box_1 {
    padding: 80px 20px 70px;
}

/* Box 2 ------------------------------------ */
#box_2 .a {
    width: 28%;
    height: 43%;
    position: absolute;
    top: 6%;
    left: 31%;
    background: url(../images/2-Text_Bubble_1.png) 50% 50% / contain no-repeat;
    padding: 0.7% 2% 4% 4%;
}

#box_2 .b {
    width: 29%;
    height: 38%;
    position: absolute;
    top: 48.2%;
    left: 43.8%;
    background: url(../images/2-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 3.7% 4% 0.5% 2%;
}


/* Box 3 ------------------------------------ */
#box_3 .wrapper {
    margin: 0 3vw 0 0px;
}

#box_3 .a {
    width: 21%;
    height: 35%;
    position: absolute;
    top: 11%;
    left: 33%;
    background: url(../images/3-Text_Bubble_1.png) 50% 50% / contain no-repeat;
    padding: 0.6% 2% 3.6% 4%;
}

#box_3 .b {
    width: 26%;
    height: 33%;
    position: absolute;
    top: 52%;
    left: 43%;
    background: url(../images/3-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 1.2% 6% 0.5% 2%;
}


/* ----------------------------------
     SECTION: HORIZONTAL SCROLL
---------------------------------- */

#horizontal_scroll {
    xoverflow-x: hidden;
    background: url(../images/4-Image.jpg) 50% 50% / 100% 100% no-repeat;
    height: 50vw;
    max-height: 951px;
    margin: 3vw 0;
}



#horizontal_scroll .container {
    width: calc(300% + 40vw);
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    xoverflow: hidden;
}

#horizontal_scroll .wrapper {
    height: 100%;
}


#box_4, #box_5, #box_6 {
  width: 100%;
  height: 100%; 
}

#box_4, #box_5 {
  margin-right: 20vw;
}

/* Box 4 ------------------------------------ */
#box_4 .man, #box_6 .man {
    position: absolute;
    bottom: 2%;
    left: -19%;
    width: 92%;
    height: auto;
}

#box_4 .bubble {
    width: 52%;
    height: 56%;
    position: absolute;
    top: 9%;
    left: 36%;
    background: url(../images/4-Text_Bubble_1.png) 50% 50% / contain no-repeat;
    padding: 0.4% 6% 1.5% 13%;
}


/* Box 5 ------------------------------------ */
#box_5 .woman {
    position: absolute;
    top: 1.9%;
    right: 4%;
    height: calc(100% - 4%);
    width: auto;
}

#box_5 .bubble {
    width: 46%;
    height: 50%;
    position: absolute;
    top: 22%;
    left: -12%;
    background: url(../images/4-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 0.5% 11% 1.6% 5%;
}



/* Box 6 ------------------------------------ */
#box_6 .bubble {
    width: 41%;
    height: 44%;
    position: absolute;
    top: 16%;
    left: 40%;
    background: url(../images/4-Text_Bubble_3.png) 50% 50% / contain no-repeat;
    padding: 0.3% 5% 1.2% 11%;
}



/* ----------------------------------
          SECTION: PART 2
---------------------------------- */

/* Box 7 ------------------------------------ */

#box_7 .onomatopoeia {
    width: 20%;
    height: auto;
    position: absolute;
    top: 26%;
    left: 23%;
}


#box_7 .a {
    width: 20%;
    height: 37%;
    position: absolute;
    top: 11%;
    left: 47%;
    background: url(../images/5-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 0.8% 6% 1% 5%;
}



/* Box 8 ------------------------------------ */

#box_8 .a {
    width: 39%;
    height: 37%;
    position: absolute;
    top: 0%;
    left: 32%;
    background: url(../images/6-Text_Bubble_1.png) 50% 50% / contain no-repeat;
    padding: 0.4% 2% 4% 4%;
}

#box_8 .b {
    width: 17%;
    height: 28%;
    position: absolute;
    top: 30%;
    left: 75%;
    background: url(../images/6-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 4% 3% 0.5% 3.5%;
}

/* Box 9 ------------------------------------ */

#box_9 .a {
    width: 29%;
    height: 77%;
    position: absolute;
    top: 13%;
    left: 18%;
    background: url(../images/7-Text_Bubble_1.png) 50% 50% / contain no-repeat;
    padding: 0.4% 3% 0.4% 8%;
}

#box_9 .b {
    width: 26%;
    height: 58%;
    position: absolute;
    top: -4%;
    left: 47%;
    background: url(../images/7-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 5% 12% 4% 5%;
}

/* Box 10 ------------------------------------ */

#box_10 .a {
    width: 21%;
    height: 32%;
    position: absolute;
    top: 3%;
    left: 28%;
    background: url(../images/8-Text_Bubble_1.png) 50% 50% / contain no-repeat;
    padding: 0.4% 3% 3.6% 4%;
}

#box_10 .b {
    width: 24%;
    height: 47%;
    position: absolute;
    top: 41%;
    left: 40%;
    background: url(../images/8-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 0.4% 4% 3.7% 3%;
}

/* Box 11 ------------------------------------ */

#box_11 .a {
    width: 27%;
    height: 18%;
    position: absolute;
    top: 10%;
    left: 33%;
    background: url(../images/9-Text_Bubble_1.png) 50% 50% / contain no-repeat;
    padding: 0.4% 3% 3.6% 5%;
}

#box_11 .b {
    width: 22%;
    height: 19%;
    position: absolute;
    top: 29%;
    left: 40%;
    background: url(../images/9-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 0.4% 4% 3.6% 2%;
}

#box_11 .c {
    width: 38%;
    height: 19%;
    position: absolute;
    top: 48%;
    left: 32%;
    background: url(../images/9-Text_Bubble_3.png) 50% 50% / contain no-repeat;
    padding: 3.6% 3% 0.5% 5%;
}

#box_11 .d {
    width: 28%;
    height: 20%;
    position: absolute;
    top: 70%;
    left: 45%;
    background: url(../images/9-Text_Bubble_4.png) 50% 50% / contain no-repeat;
    padding: 3.5% 5% 0.4% 3%;
}


/* Box 12 ------------------------------------ */

#box_12 .a {
    width: 37%;
    height: 22%;
    position: absolute;
    top: 0%;
    left: 24%;
    background: url(../images/10-Text_Bubble_1.png) 50% 50% / contain no-repeat;
    padding: 0.4% 3% 3.6% 5%;
}

#box_12 .b {
    width: 17%;
    height: 18%;
    position: absolute;
    top: 18%;
    left: 51%;
    background: url(../images/10-Text_Bubble_2.png) 50% 50% / contain no-repeat;
    padding: 0.4% 4% 3.5% 2%;
}

#box_12 .c {
    width: 33%;
    height: 22%;
    position: absolute;
    top: 32%;
    left: 25%;
    background: url(../images/10-Text_Bubble_3.png) 50% 50% / contain no-repeat;
    padding: 0.6% 3% 3.6% 5%;
}

#box_12 .d {
    width: 25%;
    height: 18%;
    position: absolute;
    top: 51%;
    left: 38%;
    background: url(../images/10-Text_Bubble_4.png) 50% 50% / contain no-repeat;
    padding: 0.5% 4% 3.7% 2%;
}

#box_12 .e {
    width: 35%;
    height: 32%;
    position: absolute;
    top: 61.3%;
    left: 18%;
    background: url(../images/10-Text_Bubble_5.png) 50% 50% / contain no-repeat;
    padding: 3.8% 3% 0.6% 5%;
}

#box_12 .onomatopoeia {
    width: 20%;
    height: auto;
    position: absolute;
    top: 69%;
    left: 53%;
}


/* ----------------------------------
       SECTION: USER REPONSE 1
---------------------------------- */
.user_response textarea {
    width: 100%;
    height: 79%;
    border: 2px solid #b1b8bb;
    box-sizing: border-box;
    font-family: Montserrat, Verdana, sans-serif;
    padding: 10px;
}

.user_response form {
    height: 100%;
}

.user_response {
    width: min(1050px, 80%);
    height: max(300px, 28vw);
    position: relative;
    background: #fff;
    padding: 2vw;
    border: 9px solid #000;
    border-top-width: 20px;
    box-sizing: border-box;
}

.user_response button {
    margin: -24px auto 0;
}

.user_response label {
    xposition: relative;
}

.user_response label p {
    margin: 0 10px 10px 0;
    font-weight: bold;
    position: relative;
    display: inline-block;
}

.user_response label img {
    position: absolute;
    right: -85px;
    bottom: -3px;
}

.user_response .done, #title_screen .done {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.user_response .done img, #title_screen .done img {
    margin-bottom: 10px;
}



#first_response {
    background: url(../images/11-Image.png) 50% 0% / 100% auto no-repeat, linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1) 51%);
    min-height: 71vw;
    padding: 1px 0;
    margin-top: -2vw;
}

#first_response .bubble {
    width: 41%;
    height: 23.7vw;
    position: absolute;
    top: 11vw;
    left: 14%;
    background: url(../images/11-Text_Bubble.png) 50% 50% / contain no-repeat;
    padding: 0.5% 11% 1.4% 5%;
}

#first_response .user_response {
    margin: 39vw auto 3vw;
}




/* ----------------------------------
           SECTION: PART 3
---------------------------------- */

/* Box 13 ------------------------------------ */
#box_13 {
    background: #fcd700 url(../images/12-Image.jpg) 50% 0% / 100% auto no-repeat;
    border-bottom: 10px solid #000;
    padding: 140px 0;
}

#box_13 .box {
    border: 9px solid #000;
    background: #fff;
    width: min(980px, 90%);
    margin: 0 auto;
    position: relative;
}

#box_13 .box:before {
    content: '';
    position: absolute;
    background: #000;
    left: -17px;
    top: 5px;
    width: 9px;
    height: calc(100% + 20px);
}

#box_13 .box:after {
    content: '';
    position: absolute;
    background: #000;
    left: -9px;
    top: 100%;
    width: 100%;
    height: 25px;
}

#box_13 .red_bar {
    background: #ff0735;
    text-align: center;
    padding: 30px 20px 10px;
    position: relative;
    margin-bottom: 20px;
}

#box_13 .red_bar h1 {
    color: #fff;
}

#box_13 .red_bar:after {
    content: '';
    position: absolute;
    bottom: -19px;
    left: 0;
    width: 100%;
    height: 20px;
    background: #ff0735;
    clip-path: polygon(0 0%, 100% 0%, 0% 100%);
}

#box_13 .content {
    padding: 50px 14% 70px;
}

hr {
    border: none;
    border-top: 3px dotted #000;
    height: 3px;
    width: 108%;
    margin: 25px 0 25px -4%;
}

#box_13 p {
    color: #333333;
}

#box_13 .stars {
    position: absolute;
    width: 18%;
    height: auto;
    top: -10%;
    left: -21%;
}


/* Box 14 ------------------------------------ */
#box_14 {
    background: url(../images/13-Image.jpg) 50% 0% / cover no-repeat;
    padding: 60px 0 15vw;
}

#box_14 .wrapper {
    width: min(980px, 90%);
    margin: 0 auto;
    position: relative;
}


#box_14 .top {
    text-align: center;
    padding: 0 15%;
    margin-bottom: 60px;
}

#box_14 .box {
    margin-bottom: 40px;
}

#box_14 .box.a {
    background: url(../images/13-Box_1.png) 50% 50% / 100% 100% no-repeat;
    padding: 6% 7% 3% 9%;
}

#box_14 .box.b {
    background: url(../images/13-Box_2.png) 50% 50% / 100% 100% no-repeat;
    padding: 6% 9% 4% 7%;
}

#box_14 .box.c {
    background: url(../images/13-Box_3.png) 50% 50% / 100% 100% no-repeat;
    padding: 6% 7% 3% 9%;
}


#box_14 p {
    margin-top: 8px;
    margin-bottom: 0;
}



/* ----------------------------------
       SECTION: USER REPONSE 2
---------------------------------- */


#second_response {
    background: url(../images/14-Image.png) 50% 0% / 100% auto no-repeat, linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1) 51%);
    min-height: 83vw;
    padding: 1px 0;
    margin-top: -15vw;
}

#second_response .bubble {
    width: 52%;
    height: 30.7vw;
    position: absolute;
    top: 5vw;
    left: 37%;
    background: url(../images/14-Text_Bubble.png) 50% 50% / contain no-repeat;
    padding: 1% 6% 2.2% 13%;
}

#second_response .user_response {
    margin: 45vw auto 3vw;
}

/* ----------------------------------
            MEDIA QUERIES
---------------------------------- */
/* 4K */
@media only screen and (min-width: 3500px) {

    body {
        xfont-size: 24px;
    }
}


/* thinner than the wrapper */
@media only screen and (max-width: 1300px) {

    .bubble p {
        line-height: 110%;
    }
}


/* mobile */
@media only screen and (max-width: 1024px) {
    
    body {
        xfont-size: 18px;
    }
    h1, h2, h3, h4, p, ul, li, span {
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

}


@media only screen and (max-width: 1024px) and (orientation: portrait) {
    #title_screen .burst {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 768px) {
    
    #box_13 .stars {
        display:none;
    }

}