/* General */
* { box-sizing: border-box; }
html { height: 100%; font-size: 15px; }
body { margin: 0; padding: 0; height: 100%; line-height: 1.25rem; font-family: 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 400; color: #333; }
main { flex-grow: 1; }
input { margin: 0; padding: .25rem .5rem; /*height: 2.5rem; line-height: 2rem; */ font-family: 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 400; color: #333; border: 1px solid #333; border-radius: .25rem; width:50%; }
textarea { margin: 0; padding: .5rem; /*height: 7rem; line-height: 1.25rem; */ font-family: 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 400; color: #333; border: 1px solid #333; border-radius: .25rem;  width:50%; }
input.error,
textarea.error { border-color: #F75955; }
div.hint { display: block; margin: 0 0 2rem; padding: .75rem; line-height: 1.125rem; font-size: .875rem; text-align: center; color: #FFF; border-radius: .25rem; background: #F75955; }
.base { display: flex; flex-direction: column; width: 100%; min-height: 100%; }
.faded { opacity: .75; }
.wrapper { margin: 0 auto; max-width: 80rem; }

/* Buttons */
.actions { display: flex; align-items: center; justify-content: center; margin: 3rem 0; width: 100%; }
.actions .button { padding: .5rem 1rem; font-size: 1.125rem; font-weight: 600; color: #FFF; cursor: pointer; text-decoration: none; border: 0; border-radius: .25rem; background: #5598F7; }
.actions .button.neutral { background: #999; }

/* Header: Page */
header.page { position: relative; z-index: 10; flex-shrink: 0; width: 100%; color: #FFF; background: #2E65C5; }
header.page .wrapper { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2rem; }
header.page .wrapper > * { min-width: 33%; }
header.page .logo { text-align: center; }
header.page .title { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 1rem 0 .5; line-height: 1.5rem; font-size: 1.125rem; text-align: center; }
header.page .title span { opacity: .75; }
header.page .details { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.375rem; font-size: .963rem; text-align: center; }
header.page .hero { width: 100%; max-height: 20rem; overflow: hidden; border-top: 4px solid rgba(255, 180, 20, .75); }
header.page .hero .photo { display: flex; align-items: flex-end; justify-content: center; }
header.page .hero img  { display: block; width: 100%; height: auto; }
header.page nav { position: relative; z-index: 10; background: #143393; }
header.page nav .wrapper { flex-direction: row; justify-content: flex-start; padding: 1rem 2rem; line-height: 1.5rem; }
header.page nav .wrapper > * { min-width: auto; }
header.page nav .menu { position: relative; z-index: 1; margin: 0 .25rem 0 0; width: 2.25rem; height: 1.5rem; }
header.page nav .menu .toggler { display: block; width: 100%; height: 100%; cursor: pointer; background: no-repeat left url(../media/navMenu.webp); background-size: 1.5rem; }
header.page nav .menu input { visibility: hidden; }
header.page nav .menu input:checked + ul { display: block; }
header.page nav .menu ul { position: absolute; top: 2.5rem; left: -.5rem; z-index: 2; display: none; margin: 0; padding: 0; list-style: none; background: #143393; }
header.page nav .menu li { padding: .5rem 1.5rem .5rem .5rem; font-size: .813rem; white-space: nowrap; cursor: default; border-top: 1px solid #FFF; }
header.page nav .menu li.current { background: #FBB813; }
header.page nav .menu li.done { background: #2E65C5; }
header.page nav .menu li .item { color: #FFF; text-decoration: none; opacity: .5; }
header.page nav .menu li.current .item { color: #333; opacity: 1; }
header.page nav .menu li.done .item { opacity: 1; }
header.page nav .navi { display: block; max-width: 9rem; font-size: 1.125rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
header.page nav .next { display: none; margin: 0 0 0 .5rem; opacity: .5;  }
header.page nav .step { margin-left: auto; font-size: .75rem; white-space: nowrap; }
/* header.page nav .progress { position: absolute; bottom: 0; left: 0; z-index: 11; display: block; width: 100%; height: 4px; background: rgba(255, 180, 20, .89); } */

/* Footer: Page */
footer.page { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 0; line-height: 1rem; font-size: .875rem; color: #FFF; text-align: center; border-top: 3px solid rgba(255, 180, 20, .75); background: #333; }
footer.page small { font-size: .625rem; }

/* Page: Index */
.index article { padding: 2rem 2rem 3rem; max-width: 50rem; line-height: 2rem; text-align: center; }
.index article p { margin: 0 0 1.5rem; }

/* Page: Form */
.form form { padding: 2rem 2rem 3rem; max-width: 60rem; border: 0; }
.form fieldset { padding: 0; border: 0; }
.form fieldset > .title { flex-basis: 100%; margin: 0 0 1rem; font-size: 1.063rem; font-weight: 700; color: #5598F7; }
.form .section { flex-basis: 100%; margin: 0 0 2rem; }
.form .section > .title { margin: 0 0 1rem; padding: 0 0 1rem; width: 100%; font-size: 1rem; font-weight: 700; color: #143393; border-bottom: 1px solid #CCC; }
.form .section.only-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.form .section p { margin: 0 0 1rem; line-height: 1.5rem; }
.form .notes { margin: 0 0 1rem; line-height: 1.5rem; font-size: 1.125rem; color: #666; }
.form .notes p { margin: 0 0 1rem;  }
.form .notes p.notice { padding: .25rem .75rem; color: #000; text-align: center; border-radius: .25rem; background: rgba(255, 180, 20, .75); font-size: 0.75rem; }
.form .fields { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
/*.form .field { display: flex; flex-basis: 100%; flex-direction: column; margin: 0 0 .5rem; line-height: 2rem; } */
.form .field { display: flex; flex-basis: 100%; flex-direction: row; margin: 0 0 .5rem; line-height: 2rem; }
/*.form label {  display: flex; align-items: center; min-height: 2rem; font-size: .938rem; color: #666; } */
.form label {  display: flex; align-items: center; min-height: 2rem; font-size: .938rem; color: #666; width: 50%; }
.form label > * { line-height: 1.125rem; }
.form .checkbox { position: relative; z-index: 1; flex-direction: row; overflow: hidden; }
.form .checkbox input { position: relative; z-index: 2; margin: 0; padding: 0; width: 2rem; height: 2rem; opacity: 0; }
.form .checkbox .mark { position: absolute; top: .25rem; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; overflow: hidden; border: 2px solid #999; border-radius: .25rem; }
.form .checkbox input:checked ~ .mark { border-color: #333; background: no-repeat center url(../media/checkIcon.webp); background-size: 1rem; }
.form .checkbox input:checked ~ label { color: #333; }
.form .error label { color: #F75955; }
.form .error input,
.form .error textarea { border-color: #F75955; }
.form .actions { justify-content: space-between; margin: 0 0 1rem; }
.form .actions button { margin: 0 0 0 .5rem; }

/* Queries */
@media screen and (min-width: 640px){
    html { font-size: 16px; }
    header.page .wrapper { flex-direction: row; }
    header.page .logo { text-align: left; }
    header.page .details { align-items: flex-end; }
    header.page nav .navi { display: block; max-width: 20rem; }
    .form fieldset { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .form .section:not(.only-child),
    .form .section.only-child .field { flex-basis: 48%; }
    .form .section.only-child .title { flex-basis: 100%; }
    .form .actions,
    .form .notes,
    .form .hint { flex-basis: 100%; }
}