/* general */
* { box-sizing: border-box; }
* { outline: none; font: inherit; }
html { font-size: 1.25em; }
body { margin: 0; background-color: #fff; color: #000; }
body { font-family: Inter, sans-serif; font-weight: 400; }
a:not(.not *) { display: flex; }
div:not(.not *) { display: flex; flex-direction: column; }
div[row]:not(.not *) { flex-direction: row; }
input[hidden]:not(.not *) { display: none; }
label:not(.not *) { display: inline; }
div[grow]:not(.not *) { flex-grow: 1; }
h1:not(.not *) { flex-grow: 1; }
div[align=center]:not(.not *) { align-items: center; }
div[justify=center]:not(.not *) { justify-content: center; }
body > * { animation: 400ms in; }
@keyframes in { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1 } }
div[padding]:not(.not *) { padding: 16px; }
a[padding]:not(.not *) { padding: 16px; }
h1 { font-size: 2.5rem; font-weight: 600; margin: 0; }
h2 { font-size: 1.5rem; font-weight: 600; margin: 0; }
p { font-size: 1rem; font-weight: 400; margin: 0; }
div[space] { width: 16px; height: 16px; }
div[space-huge] { width: 80px; height: 80px; }
div[wrap] { flex-wrap: wrap; }
#main { background-color: #fff; }
#hero { margin-top: -88px; padding-top: 88px; }
#bar { z-index: 2; padding: 8px; color: #fff; }

div[radiogroup] { flex-direction: row; }
input[type=radio] + label:first-of-type { border-radius: 30px 0 0 30px; padding-left: 22px; }
input[type=radio] + label:last-of-type { border-radius: 0 30px 30px 0; padding-right: 22px; }
input[type=radio] + label { padding: 14px 14px; border: 2px solid #000; font-weight: 600; margin: 0 -1px; text-decoration: none; font-size: 0.8em; flex-grow: 1; text-align: center; }
input[type=radio]:checked + label { background-color: #000; color: #fff; }
input[type=text], input[type=tel] { padding: 14px 14px; border: 2px solid #000; font-weight: 600; font-size: 0.8em; border-radius: 30px; font-weight: 400; width: 100%; }

a:not(.not *) { display: flex; flex-direction: row; align-items: center; }
a { color: inherit; }
a svg { display: inline-block; padding: 8px; }
hr { border: none; background-color: #1b2227; background-clip: content-box; height: 8px; width: 100%; padding: 3px 16px; }
ul { margin: 0; padding: 8px; padding-left: 20px; }

/* specific */
html { --menu-count: 4; --menu-height: calc(32px + (32px + 32px) * var(--menu-count)); --menu-speed: calc(var(--menu-height) / 100px * 150ms); }
#mobile-menu { position: absolute; width: 100%; height: var(--menu-height); transform: translateY(calc(0px - var(--menu-height))); transition: var(--menu-speed) transform; }
#mobile-menu { background-color: #fff; }
#mobile-menu-box:checked + #mobile-menu { transform: translateY(0); }
#mobile-menu-box:checked ~ #main { transform: translateY(var(--menu-height)); }
#mobile-menu-box ~ #main { transform: translateY(0); transition: var(--menu-speed) transform; }
#mobile-menu-box ~ * [icon-x] { display: none; }
#mobile-menu-box:checked ~ * [icon-x] { display: unset; }
#mobile-menu-box:checked ~ * [icon-menu] { display: none; }
#desktop-menu { display: none; }
@media screen and (min-device-width: 1024px) {
	#desktop-menu { display: flex; }
}
#bar img, #foot img { height: 72px; }
#hero { background-color: #43a0a1; color: #fff; border: 8px solid #fff; }
#hero { background-image: url(/hero.jpg); }
#hero { background-position: 50% 50%; background-size: cover; }
#hero-text { text-shadow: 0 0 64px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.3); }
#more, #else { border: 8px solid transparent; background-color: #fff; color: #000; }
/*html:after { content: ''; position: fixed; width: 100%; z-index: -1; }
html:after { bottom: -50vh; height: 100vh; background-color: #1b2227; }
@keyframes in-wait { 0% { opacity: 0; } 99.9% { opacity: 0; } 100% { opacity: 1 } }
html:after { animation: 400ms in-wait; }*/
#foot { background-color: #1b2227; border: 8px solid #fff; padding: 8px; color: #fff; }
#privacy p { padding: 8px 0; }

[button-1] { background-color: #fff; color: #4a72a2; border-radius: 30px; padding: 16px 32px; text-shadow: none; font-weight: 600; text-decoration: none; }
[button-2] { padding: 12px 28px; border: 2px solid #fff; border-radius: 30px; font-weight: 600; text-decoration: none; }
[button-3], input[type=submit] { background-image: linear-gradient(220deg, #89d8d7 20%, #cdc783, #f9833f 80%); color: #fff; border-radius: 30px; padding: 16px 32px; box-shadow: 0 0 16px rgba(0, 0, 0, 0.025) inset; text-shadow: 0 0 16px rgba(0, 0, 0, 0.1); font-weight: 600; text-decoration: none; border: none; }

