html, body { margin:0; padding:0; }
body { font-family:'Barlow',sans-serif; font-size:24px; background-color:#faf8f9; color:#00343a; }
body.dark { background-color:#00343a; color:#faf8f9; }

div.logo { position:fixed; z-index:998; top:0; left:0; width:100px; height:100px; background-color:#00343a; overflow:hidden; }
div.logo.custom { background-color:transparent; }
div.logo img { display:block; width:100%; height:auto; margin:0; padding:0; border:0; }

a { text-decoration:none; color:inherit; }
a.grey { color:#00343a; }
a:hover { color:#00343a; }
.button { display:inline-block; margin-right:3px; padding:28px; padding-top:14px; padding-bottom:14px; border:0; outline:none; cursor:pointer; font-size:0.75em; line-height:1em; font-weight:bold; color:#faf8f9; background-color:#00343a; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; }
.button:hover { background-color:#00343a; color:#faf8f9; }
.button.light { background-color:#00343a; color:#faf8f9; }
.button.light:hover { background-color:#00343a; color:#faf8f9 }

.button.grey { background-color:#eae3dd; color:#00343a; }
.button.grey:hover { background-color:#00343a; color:#faf8f9; }

hr { margin:0; margin-top:100px; margin-bottom:100px; padding:0; border:0; border-top:1px solid #00343a; }

h1,
h2,
h3 { color:#00343a; font-size:2.25em; line-height:1.07em; margin-top:0; }
h1.maxmargin,
h2.maxmargin,
h3.maxmargin { margin-bottom:1.5em; }
h1.nomargin,
h2.nomargin,
h3.nomargin { margin-bottom:0; }
h3 { font-size:1em; }
body.light div.wrapper > div.left h1,
body.dark div.wrapper > div:not(.light) h1,
body.dark div.wrapper > div:not(.light) h2,
body.dark div.wrapper > div:not(.light) h3 { color:#00343a; }

h1 a,
h2 a,
h3 a { color:inherit; text-decoration:inherit; }

.warning { display:block; padding:10px; background-color:#00343a; color:#fff; }

.small { font-size:0.75em; }
.large { font-size:1.25em; }

.box { display:block; overflow-wrap: break-word; font-size:1.25em; border:6px solid #00343a; padding:10px; color:#00343a; font-weight:bold; text-align:center; }

div.navigation { position:absolute; top:0; right:20px; z-index:999; font-size:0.6em; }
div.navigation ul { position:relative; display:block; overflow:hidden; list-style:none; margin:0; padding:0; }
div.navigation ul li { position:relative; display:block; float:left; margin:0; padding:0; margin-right:40px; }
div.navigation ul li a { position:relative; display:block; border-top:6px solid transparent; padding-top:20px; font-weight:bold; }
div.navigation ul li a:hover,
div.navigation ul li a.selected { border-color:#00343a; color:inherit; }

div.wrapper { position:relative; z-index:900; width:100%; max-width:1200px; margin:auto; }
div.wrapper.full,
div.wrapper.color,
div.wrapper.white,
div.wrapper.image { max-width:100%; }
div.wrapper.color { background-color:#00343a; color:#faf8f9; }
div.wrapper.white { background-color:#fff; }

div.wrapper + div.wrapper.arrow { margin-top:-70px; padding-top:150px; overflow:hidden; }
div.wrapper + div.wrapper.arrow:before { position:absolute; content:""; top:0; left:50%; margin-left:-1500px; border-top:150px solid #faf8f9; border-left:1500px solid transparent; border-right:1500px solid transparent; }
div.wrapper.white + div.wrapper.arrow:before { border-top-color:#fff; }
div.wrapper.color + div.wrapper.arrow:before { border-top-color:#00343a; }

div.wrapper div.left,
div.wrapper div.right { position:relative; z-index:2; width:50%; float:left; }
div.wrapper div.right { float:right; }
div.wrapper div.clear { display:block; clear:both; }

div.wrapper div.left.fixed,
div.wrapper div.right.fixed { position:fixed; float:none; max-width:600px; top:0; }
div.wrapper div.left.fixed { right:50%; }
div.wrapper div.right.fixed { left:50%; }
div.wrapper div.left.fixed-bottom,
div.wrapper div.right.fixed-bottom { top:auto; bottom:0; }

div.wrapper > div.light { background-color:#fff; color:#00343a; }
div.wrapper > div.light + div.background { z-index:1; content:""; position:fixed; top:0; bottom:0; left:50%; right:0; background-color:#fff; }
body.dark div.wrapper > div.light { background-color:#faf8f9; }
body.dark div.wrapper > div.light + div.background { background-color:#faf8f9; }

div.wrapper div.content { position:relative; z-index:2; margin:0; padding:0; padding-left:130px; padding-right:130px; padding-top:150px; padding-bottom:100px; }
div.wrapper div.content.narrow { padding-left:250px; padding-right:250px; }
div.wrapper div.left div.content { padding-left:130px; padding-right:30px; }
div.wrapper div.right div.content { padding-left:100px; padding-right:60px; }

div.wrapper div.content > :last-child,
div.wrapper div.content > :last-child { margin-bottom:0; padding-bottom:0; }

div.wrapper div.content > div.main { position:relative; padding-right:250px; }

div.wrapper div.content > div.main > div.service { position:absolute; right:0; width:200px; margin-bottom:50px; }
div.wrapper div.content > div.main > div.service .button { display:block; margin:0; margin-bottom:10px; background-color:#00343a; color:#faf8f9; text-align:center; }
div.wrapper div.content > div.main > div.service .button:hover { background-color:#00343a; }

div.wrapper div.content > div.main > div.service .button.primary { background-color:#00343a; }
div.wrapper div.content > div.main > div.service .button.primary:hover { background-color:#00343a; }

div.wrapper div.content > div.main > div.service .button.secondary { background-color:#00343a; }
div.wrapper div.content > div.main > div.service .button.secondary:hover { background-color:#00343a; }

div.wrapper div.content > div.main > div.service .button.tertiary { background-color:#999999; }
div.wrapper div.content > div.main > div.service .button.tertiary:hover { background-color:#00343a; }

.input { position:relative; display:block; color:#999999; font-weight:bold; margin-bottom:90px; }
.input.nomargin { margin-bottom:0; }
.input.lessmargin { margin-top:-70px; }
.input.focus,
.input.focus .input { color:#00343a; }

.input > .sub { position:absolute; top:100%; left:0; right:0; margin-top:10px; font-weight:normal; font-size:0.8em; }

body.dark div.wrapper > div:not(.light) .input { color:#00343a; }
body.dark div.wrapper > div:not(.light) .input.focus { color:#faf8f9; }

.input.line { border-top:1px solid #00343a; margin-top:40px; padding-top:20px; }

.input a { text-decoration:underline; }
.input a:hover { color:inherit; }

.input > span:not([class]),
.input > span[class=""],
.input > span[class="shown"] { position:absolute; left:-50px; }
.input > span.break { display:block; clear:both; }

.input input[type=text],
.input input[type=date],
.input input[type=datetime-local],
.input select,
.input textarea { width:100%; outline:none; border:0; margin:0; padding:0; padding-top:1em; padding-bottom:1em; background-color:inherit; font-family:inherit; font-size:inherit; font-weight:normal; color:inherit; border-bottom:2px solid #999999; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; }
.input textarea { overflow:hidden; resize: none; }

.input.double input[type=text],
.input.double input[type=date],
.input.double input[type=datetime-local],
.input.double select,
.input.double textarea { width:47%; margin-right:6%; float:left; }
.input.double input[type=text] + *,
.input.double input[type=date] + *,
.input.double input[type=datetime-local] + *,
.input.double select + *,
.input.double textarea + * { margin-right:0; }

.input.tripple input[type=text],
.input.tripple input[type=date],
.input.tripple input[type=datetime-local],
.input.tripple select,
.input.tripple textarea { width:31%; margin-right:3%; float:left; }
.input.tripple input[type=text] + * + *,
.input.tripple input[type=date] + * + *,
.input.tripple input[type=datetime-local] + * + *,
.input.tripple select + * + *,
.input.tripple textarea + * + * { width:32%; margin-right:0; }

.input.focus input[type=text],
.input.focus input[type=date],
.input.focus input[type=datetime-local],
.input.focus select,
.input.focus textarea { border-color:#00343a; }

.input select { z-index:4; position:relative; background-color:transparent; }
.input select + span.select { z-index:3; position:absolute; bottom:1.67em; right:0; font-weight:bold; font-size:0.6em; line-height:1.67em; }

.input.focus[data-help]:before { content:attr(data-help); position:absolute; z-index:1; left:100%; top:-5px; margin-left:30px; width:200px; padding:20px; font-size:0.6em; font-weight:normal; background-color:#00343a; color:#faf8f9; }
.input.focus[data-help]:after { content:""; position:absolute; z-index:1; top:0; left:100%; border-top:30px solid #00343a; border-left:15px solid transparent; margin-top:0.5em; margin-left:15px; }

.input fieldset { margin:0; padding:0; border:0; display:block; overflow:hidden; }
.input fieldset > legend { display:none; }

.input input[type=checkbox],
.input input[type=radio] { position:absolute;width:0;height:0;visibility:hidden; }

.input input[type=checkbox] + label,
.input input[type=radio] + label { position:relative; display:block; cursor:pointer; margin-top:20px; border:2px solid #999999; border-radius:1.5em; line-height:1.1em; text-align:center; font-weight:normal; padding:0.7em 2.5em }

.input.double input[type=checkbox] + label,
.input.double input[type=radio] + label { box-sizing:border-box; width:47%; margin-right:6%; float:left; }
.input.double legend + input[type] + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.double legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label { margin-right:0; }

.input.tripple input[type=checkbox] + label,
.input.tripple input[type=radio] + label { box-sizing:border-box; width:31%; margin-right:3%; float:left; }
.input.tripple legend + input[type] + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
.input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label { width:32%; margin-right:0; }

@media screen and (max-width: 840px) {
    .input.tripple input[type=checkbox] + label,
    .input.tripple input[type=radio] + label,
    .input.tripple legend + input[type] + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label { width:47%; margin-right:6%; }

    .input.tripple legend + input[type] + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label,
    .input.tripple legend + input[type] + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label + * + label { margin-right:0; }
}

.input input[type=checkbox] + label:before,
.input input[type=radio] + label:before { display:none; content:""; font-family:Arial; line-height:1.5em; position:absolute; top:0.5em; left:0.5em; width:1.5em; height:1.5em; border-radius:50%; }
.input input[type=checkbox] + label:hover:before,
.input input[type=radio] + label:hover:before { display:block; background-color:#999999; }
.input input[type=checkbox]:checked + label:before,
.input input[type=radio]:checked + label:before { display:block; content:"✓"; color:#faf8f9; background-color:#00343a; opacity:0.5; }

.input.block input[type=checkbox] + label,
.input.block input[type=radio] + label { padding:0.7em; }
.input.block input[type=checkbox] + label:before,
.input.block input[type=radio] + label:before { display:none; content:""; font-family:Arial; line-height:1.5em; position:absolute; top:0.5em; left:0.5em; width:1.5em; height:1.5em; border-radius:50%; }
.input.block input[type=checkbox] + label:hover,
.input.block input[type=radio] + label:hover { background-color:#999999; }
.input.block input[type=checkbox]:checked + label,
.input.block input[type=radio]:checked + label { background-color:#00343a; border-color:#00343a; color:#faf8f9; }

.input.focus input[type=checkbox] + label,
.input.focus input[type=radio] + label { border-color:#00343a; }
.input.focus input[type=checkbox]:checked + label:before,
.input.focus input[type=radio]:checked + label:before { opacity:1; }

body.dark div.wrapper > div:not(.light) .input input[type=text],
body.dark div.wrapper > div:not(.light) .input input[type=date],
body.dark div.wrapper > div:not(.light) .input input[type=datetime-local],
body.dark div.wrapper > div:not(.light) .input select,
body.dark div.wrapper > div:not(.light) .input textarea { border-color:#00343a; }
body.dark div.wrapper > div:not(.light) .input.focus input[type=text],
body.dark div.wrapper > div:not(.light) .input.focus input[type=date],
body.dark div.wrapper > div:not(.light) .input.focus input[type=datetime-local],
body.dark div.wrapper > div:not(.light) .input.focus select,
body.dark div.wrapper > div:not(.light) .input.focus textarea { border-color:#faf8f9; }

body.dark div.wrapper > div:not(.light) .input input[type=checkbox] + label,
body.dark div.wrapper > div:not(.light) .input input[type=radio] + label { border-color:#00343a; }
body.dark div.wrapper > div:not(.light) .input input[type=checkbox] + label:hover:before,
body.dark div.wrapper > div:not(.light) .input input[type=radio] + label:hover:before { background-color:#00343a; }
body.dark div.wrapper > div:not(.light) .input input[type=checkbox]:checked + label:hover:before,
body.dark div.wrapper > div:not(.light) .input input[type=radio]:checked + label:hover:before { background-color:#00343a; }
body.dark div.wrapper > div:not(.light) .input.focus input[type=checkbox] + label,
body.dark div.wrapper > div:not(.light) .input.focus input[type=radio] + label { border-color:#faf8f9; }

.input ::placeholder { color:#999999; opacity:0.5; }
.input ::-webkit-input-placeholder { color:#999999; opacity:0.5; }
.input :-ms-input-placeholder { color:#999999; opacity:0.5; }
.input.focus ::placeholder { opacity:1; }
.input.focus ::-webkit-input-placeholder { opacity:1; }
.input.focus :-ms-input-placeholder { opacity:1; }

body.dark div.wrapper > div:not(.light) .input ::placeholder { color:#00343a; opacity:0.5; }
body.dark div.wrapper > div:not(.light) .input ::-webkit-input-placeholder { color:#00343a; opacity:0.5; }
body.dark div.wrapper > div:not(.light) .input :-ms-input-placeholder { color:#00343a; opacity:0.5; }
body.dark div.wrapper > div:not(.light) .input.focus ::placeholder { opacity:1; }
body.dark div.wrapper > div:not(.light) .input.focus ::-webkit-input-placeholder { opacity:1; }
body.dark div.wrapper > div:not(.light) .input.focus :-ms-input-placeholder { opacity:1; }

.input.main { color:#00343a; }
.input.main input[type=text],
.input.main input[type=date],
.input.main input[type=datetime-local],
.input.main select,
.input.main textarea { border-color:#00343a; font-weight:bold; }

.subtitle,
div.wrapper div.content > div.main .input.main { width:80%; }

.subtitle { color:#00343a; font-weight:bold; padding-top:1em; padding-bottom:1em; border-bottom:2px solid #00343a; margin-bottom:90px; }

.data { position:relative; display:block; font-size:0.75em; }
.data > .row { position:relative; overflow:hidden; padding-top:0.75em; margin-top:0.75em; border-top:1px solid #eae3dd; }
.data > .row:first-child { border-top:0; margin-top:0; padding-top:0; }
.data > .row.title { font-weight:bold; }
.data > .row > .col { position:relative; float:left; }
.data > .row > .col.col-10 { width:10%; }
.data > .row > .col.col-15 { width:15%; }
.data > .row > .col.col-20 { width:20%; }
.data > .row > .col.col-25 { width:25%; }
.data > .row > .col.col-30 { width:30%; }
.data > .row > .col.col-35 { width:35%; }
.data > .row > .col.col-40 { width:40%; }
.data > .row > .col.col-45 { width:45%; }
.data > .row > .col.col-50 { width:50%; }
.data > .row > .col.col-55 { width:55%; }
.data > .row > .col.col-60 { width:60%; }
.data > .row > .col.col-65 { width:65%; }
.data > .row > .col.col-70 { width:70%; }
.data > .row > .col.col-75 { width:75%; }
.data > .row > .col.col-80 { width:80%; }
.data > .row > .col.col-85 { width:85%; }
.data > .row > .col.col-90 { width:90%; }
.data > .row > .col.col-100 { width:100%; }

.tick { display:inline-block; position:relative; font-family:Arial; width:1.2em; height:1.2em; border:2px solid #00343a; border-radius:50%; box-sizing:border-box; }
.tick:before { display:block; font-size:0.75em; color:#faf8f9; position:absolute; transform:translateY(-50%); top:50%; left:0; right:0; text-align:center; }

.tick[data-status=pending] { background-color:#00343a; border-color:transparent; cursor:pointer; }
.tick[data-status=pending]:before { content:"?"; }

.tick[data-status=checked] { background-color:#00343a; border-color:transparent; cursor:pointer; }
.tick[data-status=checked]:before { content:"✓"; }

.tick[data-status=unchecked] { background-color:#999999; border-color:transparent; cursor:pointer; }
.tick[data-status=unchecked]:before { content:"×"; }

.tick[data-status=checked-pending] { background-color:transparent; border-color:#999999; cursor:pointer; }
.tick[data-status=checked-pending]:before { content:"✓"; color:#999999; }

.tick[data-status=unchecked-pending] { background-color:transparent; border-color:#999999; cursor:pointer; }
.tick[data-status=unchecked-pending]:before { content:"×"; color:#999999; }

div.wrapper div.block { position:relative; overflow:hidden; margin-bottom:1em; }
div.wrapper div.block.left,
div.wrapper div.block.right { width:auto; float:none; }
div.wrapper div.block img { display:block; margin-bottom:1em; }
div.wrapper div.block.left img { float:left; width:40%; margin-right:10%; }
div.wrapper div.block.right img { float:right; width:40%; margin-left:10%; }
div.wrapper div.block.left img + *,
div.wrapper div.block.right img + * { float:left; width:50%; }

div.block:last-child div.block:last-child,
div.block:last-child div.block:last-child > div.left,
div.block:last-child div.block:last-child > div.right { margin-bottom:0; }

div.block div.block div.left,
div.block div.block div.right { width:45%; margin-bottom:20px; }
div.block div.block div.left { margin-right:5%; }
div.block div.block div.right { margin-left:5%; }
div.block div.block div.left > *,
div.block div.block div.right > * { margin:1em; }

div.block.color div.left,
div.block.color div.right { background-color:#fff; }

.white div.block.color div.left,
.white div.block.color div.right { background-color:#faf8f9; }

div.block.color.highlight div.left,
div.block.color.highlight div.right { background-color:#00343a; color:#faf8f9; }

p > img { display:block; width:90%; max-width:300px; margin:auto; margin-top:3em; margin-bottom:2em; }

[data-more-show] { display:none !important; }
[data-more-show].shown { display:block !important; }

[data-sort] > [data-multi] { position:relative; overflow:hidden; padding-right:30px; }
[data-sort] > [data-multi]:before { cursor:pointer; color:#999999; opacity:0.5; content:'☰'; position:absolute; bottom:1em; right:0; margin-bottom:1px; }

.legal h2 { font-size:1.5em; margin-top:2em; }

ul.images { padding:0; list-style:none; overflow:hidden; }
ul.images > li { float:left; margin-right:10px; margin-bottom:10px; }
ul.images > li img { height:60px; width:auto; }

table.graph td { margin:0; padding:0; padding-right:3px; }
table.graph tr + tr td { padding-top:3px; }
table.graph .bar { position:relative; height:150px; min-width:1px; width:100%; border-bottom:2px solid #999999; }
table.graph .bar .value { position:absolute; z-index:10; bottom:-2px; left:0; right:0; background-color:#00343a; }
table.graph .bar .value.base { z-index:1; background-color:#eae3dd; }
table.graph td:hover .bar .value:not(.base) { background-color:#00343a; }

table.graph .bar .value span { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-size:0.8em; font-weight:bold; }
table.graph td:hover .bar .value:not(.base) span { background-color:#fff; padding:1px 3px; bottom:9px; }

table.graph td.past + td:not(.past) .bar:before { position:absolute; display:block; content:""; left:-3px; width:1px; top:2px; bottom:-2px; border-left:1px dotted #00343a; }

@media screen and (max-width: 1299px) {
    .input.focus[data-help]:before { width:160px; }
}
@media screen and (max-width: 1199px), screen and (max-height: 900px) {
    body { font-size:22px; }
}
@media screen and (max-width: 1023px) {
    body { font-size:20px; }
    
    div.logo { width:80px; height:80px; }

    div.wrapper div.content.narrow { padding-left:200px; padding-right:200px; }
    div.wrapper div.left div.content { padding-left:110px; padding-right:30px; }
    div.wrapper div.right div.content { padding-left:80px; padding-right:50px; }

    .input.focus[data-help]:before { padding:15px; width:120px; }

    div.wrapper div.content > div.main { padding-right:180px; }
    div.wrapper div.content > div.main > div.service { width:150px; }
}
@media screen and (max-width: 899px) {
    body { font-size:18px; }

    div.logo { width:60px; height:60px; }

    div.wrapper div.content.narrow { padding-left:150px; padding-right:150px; }
    div.wrapper div.left div.content { padding-left:80px; padding-right:30px; }
    div.wrapper div.right div.content { padding-left:60px; padding-right:40px; }

    .input.focus[data-help]:before { left:0; top:100%; margin:0; margin-top:15px; padding:15px; width:100%; box-sizing:border-box; }
    .input.focus[data-help]:after { left:0px; top:100%; margin-top:5px; border:0; border-bottom:10px solid #00343a; border-right:30px solid transparent; }

    .input > span:not([class]),
    .input > span[class=""],
    .input > span[class="shown"] { left:-30px; }

    .data > .row > .col.name { width:50%; }
    .data > .row > .col.date { width:30%; }
    .data > .row > .col.signup { width:20%; }
}
@media screen and (max-width: 799px) {
    body { font-size:16px; }

    div.navigation { font-size:0.7em; }
    .input.focus[data-help]:before { padding:10px; font-size:0.7em; }
}
@media screen and (max-width: 699px) {
    body { font-size:15px; }

    div.logo { width:40px; height:40px; }

    div.navigation { top:0; right:0; }
    div.navigation:not(.shown) { cursor:pointer; }
    div.navigation:before { position:absolute; cursor:pointer; top:5px; right:5px; content:"☰"; display:block; font-size:20px; text-align:center; line-height:28px; width:30px; height:30px; border:0px solid #00343a; color:#00343a; }
    div.navigation:hover:before { border-color:#00343a; color:#00343a; }
    div.navigation:not(.shown) > * { display:none !important; }

    div.navigation.shown { position:fixed; z-index:999; top:0; left:0; right:0; bottom:0; background-color:#00343a; color:#faf8f9; }
    div.navigation.shown:before { content:"×"; font-size:40px; color:inherit; }
    div.navigation.shown:hover:before { color:inherit; }
    div.navigation.shown ul { margin-top:60px; }
    div.navigation.shown ul li  { float:none; margin:15px; text-align:center; font-size:2em; }
    div.navigation.shown ul li a:hover { color:#00343a; }

    div.wrapper div.left,
    div.wrapper div.right { position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; float:none!important; width:auto!important; max-width:100%!important; }

    div.wrapper div.content,
    div.wrapper div.content.narrow { padding-top:70px; padding-bottom:70px; padding-left:60px; padding-right:25px; }
    div.wrapper div.left:not(.light) + div.right:not(.light) div.content,
    div.wrapper div.left.light + div.right.light div.content { padding-top:0; }
    div.wrapper div.left div.content,
    div.wrapper div.right div.content { padding-left:60px; padding-right:25px; }

    div.block div.block div.left,
    div.block div.block div.right { margin:0; width:auto; overflow:hidden; margin-top:1em; }
    div.block div.block { margin:0; }

    div.wrapper > div.light + div.background { display:none; }
    div.wrapper > div.left.columnonly + div.right.light + div.background { display:block; left:0; width:100%; }

    .input > span:not([class]),
    .input > span[class=""],
    .input > span[class="shown"] { position:inherit; left:auto; padding-right:10px; }
    .input > span[class="shown"] { display:inline !important; }

    .button { font-size:0.9em; padding:24px; padding-top:12px; padding-bottom:12px; }

    .columnonly { display:none!important; }
}

@media screen and (max-width: 599px) {
    div.wrapper div.content > div.main { padding-right:160px; }
    div.wrapper div.content > div.main > div.service { width:140px; }
}

@media screen and (max-width: 499px) {
    h1 { font-size:2em; }

    div.wrapper div.content > div.main .input.main { width:auto; }

    div.wrapper div.content > div.main { padding-right:0; }
    div.wrapper div.content > div.main > div.service { position:relative; width:auto; margin-top:60px; }

    div.wrapper div.block.left img,
    div.wrapper div.block.right img  { float:none; width:90%; margin:auto; margin-top:3em; margin-bottom:2em; }
    div.wrapper div.block.left img + *,
    div.wrapper div.block.right img + * { float:none; width:auto; }

    .subtitle,
    div.wrapper div.content > div.main .input.main { width:100%; }
}
@media screen and (max-width: 399px) {
    h1 { font-size:1.7em; }

    .data > .row > .col.name { width:70%; }
    .data > .row > .col.date { display:none; }
    .data > .row > .col.signup { width:30%; }
}

@media screen and (min-width: 500px) {
    .mobileonly { display:none!important; }
}
@media screen and (max-width: 499px) {
    .desktoponly { display:none!important; }
}