:root { --input: rgba(200,200,200,0.9); --hover: var(--brack); --text: var(--white); --textaction: var(--white); --lowlink: var(--cafe); --youSay: var(--brock) ; }
* { }
.bkg ~ * { color: inherit; }
body.front { color: white; }
.login { color: white; }
main a { color: white; }
main .bkg { position: fixed; }
main .veil { position: fixed !important; }
h2 { font-family: Annie; font-size: 3em; }
.VP { grid-template-rows: 1fr 2fr; grid-gap: 5rem; place-items: unset; place-content: unset; padding: 0; width: max-content; height: max-content; min-height: 100vh; }
.VP > div { position: relative; height: auto; margin: auto; }
.VP > div:first-of-type { margin-bottom: 0 !important; }
.VP > div:last-of-type { margin-top: 0 !important; justify-content: space-around; }
.VP div, .VP h2, .VP p { width: max-content; margin: auto !important; }
.vsplit { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.vsplit > div { position: relative; height: 100%; width: 100%; padding: 9em 2em 3em; display: grid; place-content: center; }
.vsplit .bkg { position: absolute; padding: 0 !important; display: block; top: 0; bottom: 0; right: 0; left: 0; }
.vsplit .veil { position: absolute; }
.fs.third { grid-gap: 0.1rem; }
.fs.third > div { overflow: hidden; position: relative; }
.fs.third > div .bkg { position: absolute; left: unset; right: unset; }
.fs.third > div .bkg + .veil { position: absolute !important; background-color: rgba(4, 0, 0, 0.3); }
.fs.third > div > div:last-child { max-width: calc(100% - 6em); }
@media only screen and (orientation: landscape) { .fs.third { grid-template: 1fr / 1fr 1fr 1fr; }
.fs.third > div > div:last-child { margin: 55vh auto auto; }
}
@media only screen and (orientation: portrait) { .fs.third { grid-template: 1fr 1fr 1fr / 1fr; }
.fs.third > div > div:last-child { margin: 12vh auto auto; }
}
.front .overlay { background-color: var(--lowbkg); position: absolute; max-width: unset; min-height: 100vh; }
.front .fineprint { opacity: 0.5; padding: 1em; }
.front .backdrop { opacity: 0.3; color: #543; z-index: 0; }
.front p.main { -webkit-filter: drop-shadow(1px 1px 2px black); }
@media only screen and (orientation: landscape) { .VP { grid-template-rows: 1fr 3fr; grid-gap: 3rem; padding-top: 5em; }
.VP > div:first-child > *:first-child { padding-top: 0; }
}
@media only screen and (max-width: 609px) { .VP { }
.VP > div > div { padding-bottom: 1em; }
h2 { font-size: 2.3em; }
}
.front button { background-color: transparent; }
.front input { color: var(--brown); font-variation-settings: "wght" 550; }
.front label svg { opacity: 0.5; font-size: 1em; margin-right: 0.5em; padding: 0; top: unset; }
.front :checked + label svg { opacity: 1; color: var(--action); }
ul { margin: 0 auto; }
@media only screen and (max-width: 981px) { .VP .backdrop { top: 30%; }
}
@media only screen and (max-width: 609px) { .VP .backdrop { top: 27%; }
}
.icons span { opacity: 0; }
.icons :hover span { opacity: 1; }
.basic .block label { font-size: 1em; }
.oneline { margin: auto; }
.feats { text-align: center; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); justify-content: center; }
.feats li { grid-template-rows: 4em auto 1fr auto; border: none; max-width: 16em; padding: 2em 1.2em; place-content: center; }
.feats li * { margin: auto; }
.feats li svg { width: 3.5em; padding: 0; margin: auto; }
.feats li p.quote { padding: 0; color: var(--cafli); font-size: 1.4em; }
.feats.recto { }
.feats.recto li { background-color: rgba(0, 0, 0, 0.1); color: var(--text); aspect-ratio: 1 / 1; min-height: unset; grid-template-rows: auto; padding: 2em; }
.feats.recto li:hover { }
.feats.recto li h4 { font-family: Annie; font-variation-settings: "wght" 150; position: relative; top: 0.7em; font-size: 1.2em; }
.feats.recto li svg { width: 5em; }
.recto li:hover div:nth-child(2) { display: grid; grid-template-rows: 3fr 1fr; grid-gap: 0.3em; place-content: center; width: inherit; }
.recto li .quote { font-family: Annie; }
.recto li .cta { opacity: 1; color: var(--text); padding: 0; font-variation-settings: "wght" 150; font-size: 1.2em; width: auto; }
.checks input[type] + label { font-variation-settings: "wght" 700; }
@media only screen and (max-width: 1201px) and (orientation: landscape) { .feats { grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); }
}
@media only screen and (max-width: 769px) { main { font-size: 0.85em; }
.VP { padding: 7em 2em 3em; }
.VP > div > div { padding-bottom: 1em; }
.backdrop { }
.feats li { aspect-ratio: unset; min-height: 20em; padding: 3em 1em; }
.feats.recto { grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); justify-content: center; width: 100%; }
.feats.recto li { min-height: unset; padding: 1em; }
.feats.recto li svg { width: 3.5em; }
.feats li p.quote { font-size: 1.2em; }
.feats.recto li .cta { bottom: 0.5em; }
.front .wide { max-width: calc(100vw - 4em); }
}
@media only screen and (max-width: 609px) { }
@media only screen and (max-width: 421px) { .feats li { aspect-ratio: unset; max-width: unset; padding: 1em; min-height: 8em; }
.VP { padding: 7em 1em 2em; grid-template-rows: 15vh auto; }
.backdrop { top: 25%; }
}
.front .footer.sub { position: relative; top: unset; height: auto; padding: 2em 1em; margin: 0; color: var(--text); -webkit-filter: none; }