#banner { height: 28vw; background: url(/res/img/gum/banner.jpg) center/cover; display: flex; justify-content: center; align-items: center; }
    #banner > x-c { color: white; font-size: 45px; font-weight: bold; position: relative; margin-top: 8vw; }

#simple-stick { display: flex; background: #FD6A1D; height: 454px; justify-content: center; padding: 0 40px; }
    #simple-stick > x-img { background: url(/res/img/gum/2-sticks.png) center/contain no-repeat; width: 450px; }
    #simple-stick > x-c { align-self: center; margin-left: 45px; color: white; max-width: 520px; }
        #simple-stick > x-c > x-h { font-size: 45px; font-weight: bold; line-height: 1em; }
        #simple-stick > x-c > x-t { margin: 30px 0 40px; font-size: 20px; }
        #simple-stick > x-c > x-img { text-align: center; display: block; }

#hero-kit { background: url(/res/img/gum/wavy-bg.jpg) center/cover; display: flex; align-items: flex-start; justify-content: center; padding: 150px 40px 100px; }
    #hero-kit > x-c { width: 450px; margin-right: 50px; font-size: 20px; }
        #hero-kit > x-c > x-btn { display: block; margin-top: 40px; }
    #hero-kit > img { max-width: 50vw; }

#video-w { display: flex; justify-content: center; align-items: center; height: 43vw; background: url(/res/img/gum/stick-circle.jpg) center/cover; }
    #video-w > .youtube-w-w { width: 60vw; }

#chew-match-cure { background: #FD6A1D; }
    #chew-match-cure > img { display: block; margin: 0 auto; max-width: 100%; }

#add-drive { background: #177EC0; padding: 140px 40px 95px; display: flex; justify-content: center; align-items: center; }
    #add-drive > x-c { width: 1160px; height: 573px; background: url(/res/img/gum/gum-hands.jpg) center/cover; border-radius: 62px; display: flex; flex-direction: column; padding: 100px 40px 52px 600px; align-items: flex-end; color: white; box-sizing: border-box; }
        #add-drive > x-c > x-h { font-size: 45px; font-weight: bold; }
        #add-drive > x-c > x-t { font-size: 20px; margin-top: 20px; }
        #add-drive > x-c > x-btn { margin-top: 40px; }
            #add-drive > x-c > x-btn > .btn-g { background: no-repeat; border: solid 2px white; }

#footer > .a > .t > .contact { margin-top: 20px; }
    #footer > .a > .t > .contact > .logo { display: none; }
#footer > .a > .logos { text-align: center; }
    #footer > .a > .logos > .gol { border-right: solid 1px; padding-right: 25px; }
    #footer > .a > .logos > .doublemint { margin: 0 25px; }

#form { max-width: 700px; margin: 80px auto; }
    #form > .line { display: flex; margin-bottom: 25px; }
        #form > .line > x-field { flex: 1; }
            #form > .line > x-field > x-lbl { display: block; font-size: 16px; font-weight: bold; margin-bottom: 5px; }
            #form > .line > x-field > input, #form > .line > x-field > textarea { border: solid 1px #BABABC; border-radius: 6px; height: 40px; width: 100%; box-sizing: border-box; padding: 0 10px; background: #F7F7F7; font-size: 16px; }
            #form > .line > x-field > textarea { height: 300px; padding: 10px; }
    #form > .email-line > x-field { max-width: 340px; margin: 0 auto; }
    #form > x-btn { text-align: center; display: block; }





@media (max-width:1249px) {
    hi { font-size: 35px; }
    #add-drive > x-c { padding-left: 48vw }
}

@media(min-width:1024px) {
    #form > .line > x-field:not(:last-child) { margin-right: 16px; }
}

@media (max-width:1023px) {
    #banner { height: 310px; /* background-image: url(/res/img/gum/banner-m.jpg); */ overflow: hidden; }
        #banner > x-c { width: 300px; text-align: center; font-size: 30px; margin-top: 140px; /* overflow: hidden; */ }

    #simple-stick { flex-direction: column; height: auto; padding-top: 35px; align-items: center; }
        #simple-stick > x-img { width: 300px; height: 240px; flex: none; order: 2; margin-top: 20px; background-position: top; }
        #simple-stick > x-c { display: contents; text-align: center; }
            #simple-stick > x-c > x-h { font-size: 24px; order: 1; }
            #simple-stick > x-c > x-t { font-size: 15px; margin: 20px 0 40px; order: 3; }

    #hero-kit { flex-direction: column; padding: 60px 30px; align-items: center; }
        #hero-kit > x-c { width: auto; margin: 0 0 40px; font-size: 15px; }
            #hero-kit > x-c > x-btn { text-align: center; }
        #hero-kit > img { max-width: 300px; margin-right: 20px; }

    #video-w { height: 114vw; background-image: url(/res/img/gum/stick-circle-m.jpg); }
        #video-w > .youtube-w-w { width: 100%; }

    #add-drive { padding: 0; }
        #add-drive > x-c { width: auto; height: 524px; border-radius: 0; padding: 50px 40px; box-sizing: border-box; text-align: center; align-items: center; background-image: url(/res/img/gum/gum-hands-mob.jpg); }
            #add-drive > x-c > x-h { font-size: 24px; }
            #add-drive > x-c > x-t { font-size: 15px; width: auto; margin-top: auto; }

    #footer > .a > .logos { padding: 10px 0 0; text-align: center; }
        #footer > .a > .logos > .gol { border: none; border-bottom: solid 1px white; padding: 0 0 20px; }
        #footer > .a > .logos > .doublemint { margin: 20px 0; }
    #footer > .a > .t > .contact > .join-w { display: none; }

    #form { padding: 0 20px; }
        #form > .line { flex-direction: column; margin: 0; }
            #form > .line > x-field { margin-bottom: 20px; }
        #form > .email-line > x-field { max-width: none; margin: 0 0 20px; }
}

@media(min-width:768px) {
    #banner > x-c > img { display: none; }
}

@media (max-width:767px) {
    #banner { height: 410px; background-image: url(/res/img/gum/banner-mob.jpg); }
        #banner > x-c > img { position: absolute; width: 120px; right: -50px; top: -180px; }
}