html { scroll-behavior: auto; }
#banner { background-image: url(/res/img/about-hostevent-banner.jpg); }
    #banner > x-c { top: 35%; max-width: 600px; }

#form { width: 810px; margin: 40px auto 180px; font-size: 18px; }
    #form > x-h1 { color: #F2246B; font-size: 72px; }
    #form > x-h2 { font-size: 24px; font-weight: bold; margin: 10px 0 30px; }
    #form > x-complete { display: block; margin: 20px 0; line-height: 1.6em; }
    #form input, #form select { border: solid 1px #66A4CE; border-radius: 10px; height: 59px; font-size: 18px; padding: 0 20px; min-width: 0; outline: none; }
        #form input[type=checkbox], #form input[type=radio] { width: 28px; height: 28px; padding: 0; vertical-align: -6px; accent-color: #F2246B; }
    #form > hr { margin: 40px 0; height: 1px; border: 0; border-top: 1px solid #93bad6; }
    #form input.err { border-color: red; }
    #form f-ctrls { align-items: center; justify-content: space-between; }
        #form f-ctrls > .cancel { font-size: 20px; color: #F2246B; }

f-row { display: flex; margin-bottom: 40px; }
    f-row input, f-row select, f-row > f-fields, f-row > x-chk { flex: 1; }
    f-row > f-fields { display: flex; }
    f-row input[type="date"], f-row .cc-w { flex: none; }
    f-row > x-chk > label { padding: 12px 0 0 10px; display: block; }
    f-row > x-lbl { margin-right: 20px; align-self: center; }

x-lbl-field { margin-top: 30px; display: block; }
    x-lbl-field > x-lbl { line-height: 1.6em; margin-bottom: 20px; }
    x-lbl-field > f-row > label { width: 400px; }
    x-lbl-field > textarea { border: solid 1px #66A4CE; width: 100%; border-radius: 10px; height: 140px; padding: 10px 20px; font-size: 18px; }

@media(min-width:1024px) {
    f-row input:not(:last-child), f-row select:not(:last-child), f-row f-fields:not(:last-child) { margin-right: 20px; }
}

@media(max-width:1023px) {
    #banner { background-image: url(/res/img/about-hostevent-mobile-banner.jpg); }
        #banner:after { content: ''; width: 96px; height: 10px; background: #4C5173; display: block; margin: 20px auto 0; }
    #form { width: auto; margin-top: 0; margin-bottom: 100px; }
        #form > x-h1 { font-size: 36px; text-align: center; }
        #form > x-complete { text-align: center; }
        #form > x-h2 { font-size: 18px; }
        #form input, #form select { margin-bottom: 22px; flex: none; }
        #form .masked-phone > f-fields > .cc-w { margin-bottom: 0; }

    f-row { flex-direction: column; margin: 0; }
        f-row > f-fields { display: block; }
            f-row > f-fields > select, f-row > f-fields > input { width: 100%; }
        f-row > x-lbl { align-self: flex-start; margin-bottom: 15px; }
    x-lbl-field > f-row > label { width: auto; }
    .masked-phone > x-chk > label { padding-top: 0; }
}