body {
/* fonts */
/* colors */
--body-bgc: #F8F8F8;
--body-col: #444;
--link-default: inherit;
--link-hover : #cc0000;
--h1---bgc: var(--body-bgc);
--main-bgc: #f8f8f8;
--main-col: #111;
--head-bgc: #f8f8f8;
--foot-bgc: var(--main-bgc);
--foot-col: var(--main-col);
--footer-menus-a-hover: var(--link-hover);
--footer-bottom-col: var(--body-col);
--footer-bottom-bgc: #f8f8f8;
--side-bgc: #f8f8f8;
--side-col: var(--body-col);
--menu-bgc: #f8f8f8;
--border-col: #939392;
/* measurements */
--header-height: 6rem;
--sticky-header-height: 4rem;
}
@media (max-width: 46rem) {
body {
--header-height: 4rem;
}
}
:root {
/* Fluid type scale calculator: Calculated font sizes
@link https://utopia.fyi/type/calculator?c=320,18,1.2,1920,32,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* Step -2 : 12.5px → 20.48px */
--step--2 : clamp(0.7813rem, 0.6815rem + 0.4988vw, 1.28rem);
/* Step -1 : 15px → 25.6px */
--step--1 : clamp(0.9375rem, 0.805rem + 0.6625vw, 1.6rem);
/* Step 0 : 18px → 32px */
--step-0 : clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
/* Step 1 : 21.6px → 40px */
--step-1 : clamp(1.35rem, 1.12rem + 1.15vw, 2.5rem);
/* Step 2 : 25.92px → 50px */
--step-2 : clamp(1.62rem, 1.319rem + 1.505vw, 3.125rem);
/* Step 3 : 31.104px → 62.5px */
--step-3 : clamp(1.944rem, 1.5516rem + 1.9623vw, 3.9063rem);
/* Step 4 : 37.3248px → 78.125px */
--step-4 : clamp(2.3328rem, 1.8228rem + 2.55vw, 4.8828rem);
/* Step 5 : 44.7898px → 97.6563px */
--step-5 : clamp(2.7994rem, 2.1385rem + 3.3042vw, 6.1035rem);
/* Fluid Space Calculator: Individual space values
@link https://utopia.fyi/space/calculator?c=320,18,1.2,1920,32,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* Space 3xs : 5px → 8px */
--space-3xs : clamp(0.3125rem, 0.275rem + 0.1875vw, 0.5rem);
/* Space 2xs : 9px → 16px */
--space-2xs : clamp(0.5625rem, 0.475rem + 0.4375vw, 1rem);
/* Space xs : 14px → 24px */
--space-xs : clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
/* Space s : 18px → 32px */
--space-s : clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
/* Space m : 27px → 48px */
--space-m : clamp(1.6875rem, 1.425rem + 1.3125vw, 3rem);
/* Space l : 36px → 64px */
--space-l : clamp(2.25rem, 1.9rem + 1.75vw, 4rem);
/* Space xl : 54px → 96px */
--space-xl : clamp(3.375rem, 2.85rem + 2.625vw, 6rem);
/* Space 2xl : 72px → 128px */
--space-2xl : clamp(4.5rem, 3.8rem + 3.5vw, 8rem);
/* Space 3xl : 108px → 192px */
--space-3xl : clamp(6.75rem, 5.7rem + 5.25vw, 12rem);
/* One-up pairs */
/* Space 3xs-2xs: 5px → 16px */
--space-3xs-2xs: clamp(0.3125rem, 0.175rem + 0.6875vw, 1rem);
/* Space 2xs-xs : 9px → 24px */
--space-2xs-xs : clamp(0.5625rem, 0.375rem + 0.9375vw, 1.5rem);
/* Space xs-s : 14px → 32px */
--space-xs-s : clamp(0.875rem, 0.65rem + 1.125vw, 2rem);
/* Space s-m : 18px → 48px */
--space-s-m : clamp(1.125rem, 0.75rem + 1.875vw, 3rem);
/* Space m-l : 27px → 64px */
--space-m-l : clamp(1.6875rem, 1.225rem + 2.3125vw, 4rem);
/* Space l-xl : 36px → 96px */
--space-l-xl : clamp(2.25rem, 1.5rem + 3.75vw, 6rem);
/* Space xl-2xl : 54px → 128px */
--space-xl-2xl : clamp(3.375rem, 2.45rem + 4.625vw, 8rem);
/* Space 2xl-3xl: 72px → 192px */
--space-2xl-3xl: clamp(4.5rem, 3rem + 7.5vw, 12rem);
/* Custom pairs */
/* Space s-l : 18px → 64px */
--space-s-l : clamp(1.125rem, 0.55rem + 2.875vw, 4rem);
}
/* Fluid Grid Calculator:
@link https://utopia.fyi/grid/calculator?c=320,18,1.2,1920,32,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--grid-max-width: 124.00rem;
--grid-gutter : var(--space-s-l, clamp(1.125rem, 0.5721rem + 2.7644vw, 4rem));
--grid-columns : 12;
}
.u-container {
max-width: var(--grid-max-width);
padding-inline: var(--grid-gutter);
margin-inline: auto;
}
.u-grid {
display: grid;
gap: var(--grid-gutter);
}
html {
text-size-adjust: none;
}
input,
button,
textarea,
select {
font-family: inherit;
font-size: inherit;
}
/* Global defaults */
body {
text-decoration-skip-ink: auto;
font-optical-sizing: auto;
font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
font-kerning: normal;
}
button, input, label {
line-height: 1.1;
}
/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 300;
font-stretch: condensed;
font-size-adjust: 0.514;
font-variant-numeric: lining-nums;
text-wrap: balance;
}
h1 {
/* font-variant-ligatures: discretionary-ligatures; */
font-size-adjust: 0.521; /* check if this changes with an optical sizing axis */
}
h1.uppercase {
font-variant-caps: titling-caps;
}
h1, .h1 {
font-size: var(--step-4);
font-weight: 400;
}
h2, .h2 {
font-size: var(--step-2);
}
h3, .h3 {
font-size: var(--step-1);
}
h4, .h4 {
font-size: var(--step-1);
}
h5, .h5 {
font-size: var(--step-0);
}
/* spacing */
.sb-xs { padding-block-start: var(--space-xs); }
.sb-s { padding-block-start: var(--space-s); }
.sb-m { padding-block-start: var(--space-m); }
.sb-l { padding-block-start: var(--space-l); }
.sb-xl { padding-block-start: var(--space-xl); }
.sa-xs { padding-block-end: var(--space-xs); }
.sa-s { padding-block-end: var(--space-s); }
.sa-m { padding-block-end: var(--space-m); }
.sa-l { padding-block-end: var(--space-l); }
.sa-xl { padding-block-end: var(--space-xl); }
/* OpenType utility classes */
.dlig { font-variant-ligatures: discretionary-ligatures; }
.hlig { font-variant-ligatures: historical-ligatures; }
.dlig.hlig { font-variant-ligatures: discretionary-ligatures historical-ligatures; }
.pnum { font-variant-numeric: proportional-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.lnum { font-variant-numeric: lining-nums; }
.onum { font-variant-numeric: oldstyle-nums; }
.zero { font-variant-numeric: slashed-zero; }
.pnum.zero { font-variant-numeric: proportional-nums slashed-zero; }
.tnum.zero { font-variant-numeric: tabular-nums slashed-zero; }
.onum.zero { font-variant-numeric: oldstyle-nums slashed-zero; }
.lnum.zero { font-variant-numeric: lining-nums slashed-zero; }
.tnum.lnum.zero { font-variant-numeric: tabular-nums lining-nums slashed-zero; }
.frac { font-variant-numeric: diagonal-fractions; }
.afrc { font-variant-numeric: stacked-fractions; }
.ordn { font-variant-numeric: ordinal; }
.smcp { font-variant-caps: small-caps; }
.hist { font-variant-alternates: historical-forms; }
.ss01 { font-variant-alternates: styleset(cursive); }
.ss02 { font-variant-alternates: styleset(swoopy); }
.cv01 { font-variant-alternates: character-variant(ampersand); }
.cv02 { font-variant-alternates: character-variant(capital-q); }
.salt1 { font-variant-alternates: stylistic(two-story-g); }
.salt2 { font-variant-alternates: stylistic(straight-y); }
.swsh1 { font-variant-alternates: swash(swishy); }
.swsh2 { font-variant-alternates: swash(flowing); }
.ornm1 { font-variant-alternates: ornaments(clover); }
.ornm2 { font-variant-alternates: ornaments(fleuron); }
.nalt1 { font-variant-alternates: annotation(circled); }
.nalt2 { font-variant-alternates: annotation(boxed); }
:root {
--opentype-case: off;
--opentype-sinf: off;
}
.case { --opentype-case: on; }
.sinf { --opentype-sinf: on; }
* {
font-feature-settings: "case" var(--opentype-case, off), "sinf" var(--opentype-sinf, off);
}
/* Generic helper classes */
.centered {
text-align: center;
text-wrap: balance;
}
.uppercase {
text-transform: uppercase;
--opentype-case: on;
}
.smallcaps {
font-variant-caps: all-small-caps;
font-variant-numeric: oldstyle-nums;
}
/* Prose styling defaults */
.prose {
text-wrap: pretty;
font-variant-numeric: oldstyle-nums proportional-nums;
font-size-adjust: 0.507;
}
strong, b, th {
font-weight: 500;
font-size-adjust: 0.514; /* Check for the different weights you may be using */
}
/* Sup and sub */
@supports ( font-variant-position: sub ) {
sub, .sub {
vertical-align: baseline;
font-size: 100%;
line-height: inherit;
font-variant-position: sub;
}
}
@supports ( font-variant-position: super ) {
sup, .sup {
vertical-align: baseline;
font-size: 100%;
line-height: inherit;
font-variant-position: super;
}
}
.chemical {
--opentype-sinf: on;
}
/* Tables, times and maths */
td, math, time[datetime*=":"] {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}
/* Quotes */
/* :lang(en) > * { quotes: '“' '”' '‘' '’' ; } /* “Generic English ‘style’” */
:lang(fr) > * { quotes: '«\00202F' '\00202F»' '“' '”'; } /* « French “style” » */
:lang(en-GB) > * { quotes: '‘' '’' '“' '”' ; } /* ‘British “style”’ */
q::before { content: open-quote }
q::after { content: close-quote }
.quoted p:first-of-type::before {
content: '“';
}
.quoted p:last-of-type::after {
content: '”';
}
.quoted p:first-of-type::before {
margin-inline-start: -0.87ch;
}
.quoted p {
hanging-punctuation: first last;
}
@supports(hanging-punctuation: first last) {
.quoted p:first-of-type::before {
margin-inline-start: 0;
}
}
/* Hyphenation - Remember to set lang */
.prose {
hyphens: auto;
hyphenate-limit-chars: 7 4 3;
hyphenate-limit-lines: 2;
hyphenate-limit-zone: 8%;
hyphenate-limit-last: always;
}
.prose pre, .prose code, .prose var, .prose samp, .prose kbd,
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
-webkit-hyphens: manual;
hyphens: manual;
}
/* Dark mode and inverted text */
:root {
--vf-grad: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--vf-grad: -100; /* Grade is font-specific. */
}
}
.inverted {
--vf-grad: -100;
}
* {
font-variation-settings: "GRAD" var(--vf-grad, 0);
}
/* @layer content-first { */
html {
text-size-adjust: none;
scrollbar-color: #1C232D #777;
}
@media screen and (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
html, body {
min-height:100%;
}
/* deathshadow reset */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img,figure,figcaption{
margin:0;
padding:0;
}
img, fieldset {
border:none;
}
*, *:after, *:before {
box-sizing:border-box;
}
img {
background-color: #f8f8f8;
}
/* mtness content-first */
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
body > h1 { order: 25; background-color: var(--h1---bgc); }
body > aside { order: 10; background-color: var(--side-bgc); }
body > header { order: 20; background-color: var(--head-bgc); }
body > main { order: 30; background-color: var(--main-bgc); z-index: 1; display: flex; flex-flow: column; flex: 1; }
body > footer { order: 40; background-color: var(--foot-bgc); }
/* } */
/* @layer sticky { */
/* mtness sticky header */
#header {
position:sticky;
top:0;
height: 0;
z-index: 2;
/*transition: .1s padding ease-in-out;*/
}
/* second sticky */
/*
main > section.second-sticky {
position:sticky;
top:5rem;
padding:1rem 0;
background:#AEC;
}
*/
body > aside {
padding: 1rem;
text-align: center;
background-color: var(--color-bg);
}
main {
padding-block-start: var(--header-height);
}
main > section {
/*position: sticky;*/
/*top: 6rem;*/
/* padding:1rem 0; */
/* background:#AEC; */
}
main > *:first-child:not(.bg,.hero) {
margin-block-start: var(--space-l);
}
main > *:not(details) + *:not([class*="bg"]) {
margin-block-start: var(--space-l);
}
main > *:not(details,[class*="bg"]):has( + *[class*="bg"] ) {
margin-block-end: var(--space-xl);
}
/* disabled until further notice, lets see if this is needed at all
main > section:not(.layout-row) > *:not(details) + * {
margin-block-start: var(--space-l);
}
*/
#footer {
/* position:sticky; */
position:static;
bottom:0;
padding:1rem;
z-index: 0;
}
/* prefers-color-scheme: light */
/* #header { background:#fff; }
#content{ background:#fff; }
#footer { background:#eee; }
*/
#aside { background-color: var(--aside-bgc); }
/*
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] #header {background:#333;}
html[data-theme="dark"] #footer {background:#000;}
html[data-theme="dark"] #aside {background:#444;}
}
*/
/* } */
body,
.page-row-navigation {
grid-template-rows: [page-top] max-content [contents-top] max-content [contents-bottom] max-content [page-bottom];
}
body {
--screen-margin : 1.5rem;
--screen-inset-width : 5fr;
--page-margin : 3rem;
--page-inset-left-min : 3rem;
--page-inset-left-max : 10rem;
--page-inset-right-min: 3rem;
--page-inset-right-max: 10rem;
--body-outset : 3rem;
--body-margin : 1.5rem;
--body-content-min : 30rem;
--body-content-max : 46rem;
--body-max-width : 2560px;
margin: 0 auto;
max-width: var(--body-max-width);
}
body .sidebar.sidebar-navigation {
grid-column: page-start/body-start;
grid-row : content-top/page-bottom;
}
body .grid {
display: grid;
gap: 0;
grid-template-columns:
[screen-start]
var(--screen-margin)
[screen-inset-start]
var(--screen-inset-width)
[page-start page-inset-start body-outset-start body-start body-content-start]
var(--page-margin)
minmax( var(--page-inset-left-min), var(--page-inset-left-max) )
var(--body-outset)
var(--body-margin)
minmax(
calc( var(--body-content-min) / 2 )
,
calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
)
[center-line]
minmax(
calc( var(--body-content-min) / 2 )
,
calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
)
[body-content-end]
var(--body-margin)
[body-end]
var(--body-outset)
[body-outset-end]
minmax( var(--page-inset-right-min), var(--page-inset-right-max) )
[page-inset-end]
var(--page-margin)
[page-end]
var(--screen-inset-width)
[screen-inset-end]
var(--screen-margin)
[screen-end];
}
@media (max-width: 78rem) {
body .grid {
grid-template-columns:
[screen-start] var(--screen-margin)
[screen-inset-start page-start page-inset-start]
minmax( var(--page-inset-left-min), var(--page-inset-left-max) )
[body-outset-start]
var(--body-outset)
[body-start]
var(--body-margin)
[body-content-start]
minmax(
calc( var(--body-content-min) / 2 )
,
calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
)
[center-line]
minmax(
calc( var(--body-content-min) / 2 )
,
calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
)
[body-content-end]
var(--body-margin)
[body-end]
var(--body-outset)
[body-outset-end]
minmax( var(--page-inset-right-min), var(--page-inset-right-max) )
[page-inset-end page-end screen-inset-end]
var(--screen-margin) [screen-end];
}
}
@media (max-width: 46rem) {
body {
--screen-margin: .75rem;
}
body .grid {
grid-template-columns:
[screen-start] var(--screen-margin)
[screen-inset-start page-start page-inset-start body-outset-start body-start body-content-start] minmax(0px, 1fr) [center-line] minmax(0px, 1fr) [body-content-end body-end body-outset-end page-inset-end page-end screen-inset-end]
var(--screen-margin) [screen-end];
}
}
.page-full {
grid-column: screen-start/screen-end !important;
}
.grid > * {
grid-column: body-content-start/body-content-end;
}
.grid .content {
grid-column : body-content-start/body-content-end;
grid-row : content-top/content-bottom;
align-content: flex-start;
}
.grid .column-body {
grid-column: body-content-start/body-content-end;
}
.grid .column-body-outset {
grid-column: body-outset-start/body-outset-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-page {
grid-column: page-start/page-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-page-inset {
grid-column: page-inset-start/page-inset-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-screen {
grid-column: screen-start/screen-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-screen-inset {
grid-column: screen-inset-start/screen-inset-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-screen-inset.shaded {
grid-column: screen-start/screen-end;
padding: 1em;
background: #009de4;
z-index: 998;
transform: translate3d(0, 0, 0);
margin-bottom: 1em;
overflow: hidden;
}
.grid .column-screen-inset.shaded {
}
@media (min-width: 992px) {
.column-before {
grid-column: page-start/body-start;
z-index: 998;
}
.margin-caption,
.aside,
aside:not(.footnotes):not(.sidebar),
.column-margin {
grid-column: body-end/page-end;
z-index: 998;
}
}
.grid .column-body-outset-right,
.grid .column-body-right {
grid-column: body-content-start/body-outset-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-page-inset-right {
grid-column: body-content-start/page-inset-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-page-right {
grid-column: body-content-start/page-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-screen-inset-right {
grid-column: body-content-start/screen-inset-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-screen-right {
grid-column: body-content-start/screen-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.left {
text-align: left;
padding-left: 1em;
}
.grid .column-body-outset-left,
.grid .column-body-left {
grid-column: body-outset-start/body-content-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-page-inset-left {
grid-column: page-inset-start/body-content-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-page-left {
grid-column: page-start/body-content-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-screen-inset-left {
grid-column: screen-inset-start/body-content-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.grid .column-screen-left {
grid-column: screen-start/body-content-end;
z-index: 998;
transform: translate3d(0, 0, 0);
}
.right {
text-align: right;
padding-right: 1em;
}
.sidebar.margin-sidebar {
grid-column: body-end/page-end;
grid-row: content-top/page-bottom;
}
.sidebar {
will-change: top;
transition: top 200ms linear;
position: sticky;
overflow-y: auto;
padding-top: 0;
max-height: 100vh;
}
@media (max-width: 767.98px) {
.sidebar.margin-sidebar {
margin: 0 var(--screen-margin);
}
}
.layout-row:not(.grid),
.layout-row.grid > div {
--min: 10ch;
--gap: 0;
display: grid;
gap: var(--gap);
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.layout-row.g-75-25 { grid-template-columns: calc(75% - var(--gap) / 2 ) calc(25% - var(--gap) / 2); }
.layout-row.g-66-33 { grid-template-columns: calc(100% / 3 * 2 - var(--gap) / 2 ) calc(100% / 3 - var(--gap) / 2 ); }
.layout-row.g-33-66 { grid-template-columns: calc(100% / 3 - var(--gap) / 2) calc(100% / 3 * 2 - var(--gap) / 2); }
.layout-row.g-25-75 { grid-template-columns: calc(25% - var(--gap) / 2 ) calc(75% - var(--gap) / 2); }
.layout-row > * img {
display: block;
width: 100%;
height: auto;
}
.layout-row.txt-img,
.layout-row.img-txt {
gap: 0;
}
/* three elements necessary for the t3 translation anchor */
.txt-img:not(.container).grid > div > :nth-child(1),
.txt-img:not(.container):not(.grid) > :nth-child(1) {
order: 2;
}
.txt-img:not(.container).grid > div > :nth-child(2),
.txt-img:not(.container):not(.grid) > :nth-child(2) {
order: 1;
}
.txt-img:not(.container).grid > div > :nth-child(3),
.txt-img:not(.container):not(.grid) > :nth-child(3) {
order: 0;
}
@media (max-width: 104rem) {
.layout-row:not(.grid),
.layout-row.grid > div {
grid-auto-flow: row;
}
.txt-img > :nth-child(1) {
order: 0;
}
.txt-img > :nth-child(2) {
order: 1;
}
}
.bg-img.fixed {
background-attachment: fixed;
}
.bg-img {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.full-height {
height: 100vh;
display: grid;
place-items: center;
background-color: #eee;
}
/* ---------------------------------------------------------------------------- */ /* txtimg positioning */
.above-center .img {
}
.above-center .img img {
width: 100%;
height: auto;
}
.above-left .img img {
margin-inline: 0 auto;
}
.above-right .img img {
margin-inline: auto 0;
}
.below-center .img {
margin-inline: auto;
}
.below-center .img img {
width: 100%;
height: auto;
}
.below-left .img img {
margin-inline: 0 auto;
}
.below-right .img img {
margin-inline: auto 0;
}
.align-left {
width: 50%;
margin-top: 0;
margin-right: 1rem;
float: left;
}
.align-right {
margin-top: 0;
margin-left: 1rem;
float: right;
}
.align-left img,
.align-right img {
width: 100%;
height: auto;
display: block;
}
.align-left.half,
.align-right.half {
width: 50%;
}
.align-left.phi,
.align-right.phi {
width: 40%;
}
.align-left.quarter,
.align-right.quarter {
width: 25%;
}
.align-left.outset.column-body {
margin-right: 2rem;
margin-left: calc( -1 * var(--body-outset) - var(--body-margin) );
}
.align-right.outset.column-body {
margin-right: calc( -1 * var(--body-outset) - var(--body-margin) );
margin-left: 2rem;
}
.align-left.outset.column-page {
margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) );
}
.align-right.outset.column-page {
margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) );
}
.align-left.outset.column-screen-inset {
margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) );
}
.align-right.outset.column-screen-inset {
margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) ) );
}
.align-left.outset.column-screen {
margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) - var(--screen-margin) );
}
.align-right.outset.column-screen {
margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) - var(--screen-margin) );
}
.column-before img,
.column-margin img,
.beside-left .column-body img,
.beside-right .column-body img {
width: 100%;
height: auto;
display: block;
}
div[class*="col-"] {
display: grid;
gap: .5rem;
align-items: center;
text-align: center;
}
.imgs.col-2 { grid-template-columns: repeat(2, 1fr); }
.imgs.col-3 { grid-template-columns: repeat(3, 1fr); }
.imgs.col-4 { grid-template-columns: repeat(4, 1fr); }
.imgs.col-5 { grid-template-columns: repeat(5, 1fr); }
.imgs.col-6 { grid-template-columns: repeat(6, 1fr); }
.imgs.col-7 { grid-template-columns: repeat(7, 1fr); }
.imgs.col-8 { grid-template-columns: repeat(8, 1fr); }
@media screen and (min-width: 1024px + 1px) {
.align-left.half-bleed {
width: 75%;
margin-left: -25%;
float: left;
}
.align-left.half-bleed .caption {
text-align: right;
}
.align-right.half-bleed {
width: 75%;
margin-right: -25%;
float: right;
}
.align-right.half-bleed .caption {
text-align: left;
}
.align-half,
.align-full,
.align-full-left,
.align-full-right,
.align-half-left,
.align-half-right {
margin-left: calc(((100vw - (2* var(--colsize)) + 3rem) / 2) * -1);
width: 100vw;
display: grid;
grid-template-columns:
[full-start] minmax(1rem, 1fr)
[wide-start] minmax(0, 1fr)
[content-start] minmax(0, calc( (2* var(--colsize)) + 3rem)) [content-end]
minmax(0, 1fr) [wide-end]
minmax(1rem, 1fr) [full-end];
}
.align-half > * {
grid-column: wide;
}
.align-full > * {
grid-column: full;
}
.align-full-left {
width: calc(100vw - 6rem);
}
.align-full-left a {
grid-column: full-start/content-end;
}
.align-full-left .caption {
grid-column: content-start/content-end;
text-align: right;
}
.align-full-right {
padding-left: 4.5rem;
width: calc(100vw - 3rem);
}
.align-full-right a {
grid-column: content-start/full-end;
grid-row: 1;
}
.align-full-right .caption {
grid-column: content-start/full-end;
align-self: end;
text-align: left;
padding-right: 1rem;
}
.align-half-left a {
grid-column: full-start/wide-end;
}
.align-half-left .caption {
grid-column: full-start/wide-end;
grid-row: 2;
text-align: right;
}
.align-half-right a {
grid-column: wide-start/full-end;
}
.align-half-right .caption {
grid-column: wide-start/full-end;
grid-row: 2;
text-align: left;
}
}
@media screen and (max-width: 1024px) {
.align-left.half-bleed {
width: 100%;
}
.align-right.half-bleed {
width: 100%;
}
.align-half,
.align-full,
.align-full-left,
.align-full-right,
.align-half-left,
.align-half-right {
margin-left: -1.5rem;
width: 100vw;
}
}
@media screen and (min-width: 1680px + 1px) {
.align-full-left {
width: calc(100vw - 6rem);
}
.align-full-left a {
grid-column: full-start/content-end;
margin-bottom: 1.25rem;
}
.align-full-left .caption {
grid-column: content-end/full-end;
align-self: end;
text-align: left;
padding-left: 1rem;
padding-bottom: 1.25rem;
}
.align-full-right {
padding-left: 4.5rem;
width: calc(100vw - 3rem);
}
.align-full-right a {
grid-column: content-start/full-end;
grid-row: 1;
margin-bottom: 1.25rem;
}
.align-full-right .caption {
grid-column: full-start/content-start;
grid-row: 1;
align-self: end;
text-align: right;
padding-right: 1rem;
padding-bottom: 1.25rem;
}
}
.imgs {
margin: 1rem 0;
display: grid;
gap: 1rem;
grid-template-columns: repeat(
var(--grid-type, auto-fit),
minmax(min(var(--imgwidth, 10rem), 100%), 1fr)
);
grid-auto-rows: auto;
container-type: inline-size;
}
.layout-row .txt {
max-width: 100%;
display:grid;
justify-items: center;
align-content: center;
padding: max(1rem, 3vw);
}
/* ---------------------------------------------------------------------------- */ /* copyright hover */
figure {
position: relative;
}
.img {
position: relative;
display: block;
align-items: center;
top: 0;
object-fit: contain;
}
.img > a,
.img > div,
.img img {
display: block;
position: relative;
}
.beside-right .img img,
.beside-left .img img,
.txt-beside-right .img img,
.txt-beside-left .img img {
width: 100%;
height: auto;
}
.img .copy {
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
width: 100%;
text-align: right;
z-index: 1;
mix-blend-mode: difference;
color: #fff;
}
.copy .trigger {
display : inline-block;
padding: 2px 6px 2px 4px;
opacity: 1;
}
.copy .data {
position: absolute;
width: auto;
max-width: 85%;
bottom: 0;
right: 0;
padding: 2px 6px 2px 4px;
opacity: 0;
background-color : #8888;
}
@media only screen and (max-width: 991px) {
.copy .data {
max-width: 96%;
}
}
.copy:hover {
mix-blend-mode: unset;
transition: .2s mix-blend-mode ease-in-out;
}
.copy:hover .trigger,
.copy:hover .trigger {
opacity: 0;
transition: .2s opacity ease-in-out;
}
.copy:hover .data,
.copy:hover .data {
opacity: 1;
transition: .2s opacity ease-in-out;
}
figure.img > figcaption {
position: relative;
bottom: 0;
}
/* ---------------------------------------------------------------------------- */ /* video facades */
.videoEmbed {
position:relative;
overflow:hidden;
aspect-ratio:var(--aspect-ratio);
max-height:90vh;
margin:1rem auto;
font-family:arial,helvetica,sans-serif;
background-color:#000;
background-image:var(--video-poster);
background-size:cover;
background-repeat: no-repeat;
background-position: center;
}
.videoEmbed > * {
box-sizing:border-box;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:0;
}
.videoEmbed header {
display: none;
}
.videoEmbed a span {
display: none;
position:absolute;
left:0;
bottom:1rem;
z-index:99;
padding:1rem;
line-height:1.5rem;
text-decoration:none;
background:#222;
color:#EEE;
transition:background 0.3s;
}
.videoEmbed a:focus span,
.videoEmbed a:hover span {
background:#444;
}
.videoEmbed a b,
.videoEmbed button {
background-color:transparent;
color:transparent;
cursor:pointer;
}
.videoEmbed button {
background: left 2rem bottom 2rem no-repeat;
transition: all 0.3s;
box-shadow: inset 0 0 32px 2px #0003;
filter: drop-shadow(0 0 1px #0008 );
}
.videoEmbed button:focus,
.videoEmbed button:hover {
/*scale:1.1;*/
background-color: #fff0;
filter: drop-shadow(0 0 1px #fff3 );
}
.videoEmbed header {
padding:0.5rem;
color:#FFF;
text-shadow:
-0.0625em -0.0625em 0.125em #000,
0.0625em -0.0625em 0.125em #000,
0.0625em 0.0625em 0.125em #000,
-0.0625em 0.0625em 0.125em #000,
0 0 0.25em #000;
}
.videoEmbed a b {
display:inline-block;
font-size:1.25em;
vertical-align:top;
background:center no-repeat;
background-size:contain;
}
.videoEmbed.vimeo span {
background:#025;
}
.videoEmbed.vimeo a:focus span,
.videoEmbed.vimeo a:hover span {
background:#008;
}
.videoEmbed.vimeo button {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%0A%0A%3Cpath fill='%23fff' d='M19 12a1 1 0 0 1-.496.864l-12 7A1 1 0 0 1 5 19V5a1 1 0 0 1 1.504-.864l12 7A1 1 0 0 1 19 12' /%3E%0A%0A%3C/svg%3E%0A");
background-size:1.5rem;
}
.videoEmbed.vimeo a b {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 24' fill='%230BF' %3E%3Cpath d='m 15.72,9.431 c -0.069,1.514 -1.127,3.588 -3.172,6.22 -2.114,2.749 -3.903,4.124 -5.367,4.124 -0.906,0 -1.673,-0.837 -2.3,-2.512 C 4.463,15.728 4.044,14.194 3.626,12.659 3.161,10.985 2.662,10.147 2.128,10.147 c -0.116,0 -0.524,0.245 -1.221,0.733 L 0.176,9.937 C 0.943,9.263 1.7,8.588 2.445,7.912 3.469,7.028 4.237,6.562 4.75,6.515 5.96,6.399 6.705,7.227 6.985,8.998 c 0.302,1.912 0.511,3.101 0.628,3.566 0.349,1.586 0.733,2.378 1.152,2.378 0.326,0 0.815,-0.515 1.467,-1.543 0.651,-1.029 1,-1.812 1.047,-2.349 0.093,-0.888 -0.256,-1.333 -1.047,-1.333 -0.373,0 -0.757,0.085 -1.151,0.255 0.764,-2.504 2.224,-3.721 4.38,-3.652 1.598,0.047 2.351,1.084 2.259,3.111' id='path4' /%3E%3Cpath d='m 22.281,1.918 c -0.023,0.58 -0.314,1.136 -0.874,1.669 -0.628,0.602 -1.373,0.903 -2.234,0.903 -1.327,0 -1.968,-0.579 -1.921,-1.737 0.022,-0.602 0.378,-1.182 1.064,-1.738 0.687,-0.555 1.449,-0.834 2.288,-0.834 0.489,0 0.896,0.192 1.223,0.574 0.325,0.382 0.477,0.77 0.454,1.163 z m 3.038,12.419 c -0.652,1.232 -1.548,2.349 -2.689,3.349 -1.56,1.349 -3.119,2.024 -4.679,2.024 -0.723,0 -1.275,-0.233 -1.659,-0.699 -0.384,-0.465 -0.565,-1.069 -0.541,-1.814 0.022,-0.767 0.261,-1.954 0.715,-3.56 0.454,-1.605 0.682,-2.466 0.682,-2.582 0,-0.605 -0.21,-0.908 -0.629,-0.908 -0.139,0 -0.536,0.245 -1.188,0.733 L 14.528,9.937 c 0.745,-0.674 1.49,-1.349 2.235,-2.025 1.001,-0.884 1.746,-1.35 2.236,-1.397 0.768,-0.069 1.332,0.157 1.693,0.679 0.36,0.523 0.494,1.2 0.402,2.035 -0.303,1.415 -0.629,3.212 -0.978,5.392 -0.024,0.998 0.337,1.496 1.082,1.496 0.326,0 0.908,-0.344 1.746,-1.033 0.699,-0.574 1.269,-1.114 1.712,-1.62 l 0.663,0.873' id='path6' /%3E%3Cpath d='m 47.127,14.336 c -0.652,1.233 -1.548,2.349 -2.689,3.349 -1.56,1.349 -3.12,2.024 -4.679,2.024 -1.514,0 -2.247,-0.837 -2.2,-2.513 0.022,-0.745 0.168,-1.639 0.436,-2.686 0.267,-1.048 0.413,-1.862 0.436,-2.444 0.024,-0.883 -0.245,-1.326 -0.806,-1.326 -0.607,0 -1.331,0.722 -2.172,2.165 -0.887,1.514 -1.367,2.98 -1.436,4.4 -0.05,1.002 0.05,1.77 0.293,2.305 -1.624,0.047 -2.762,-0.221 -3.411,-0.803 -0.582,-0.512 -0.848,-1.361 -0.801,-2.549 0.02,-0.745 0.136,-1.49 0.343,-2.235 0.205,-0.745 0.319,-1.408 0.342,-1.991 0.05,-0.861 -0.268,-1.292 -0.944,-1.292 -0.583,0 -1.213,0.664 -1.888,1.991 -0.676,1.326 -1.049,2.712 -1.119,4.155 -0.05,1.305 0.04,2.212 0.25,2.724 -1.598,0.047 -2.733,-0.29 -3.404,-1.01 -0.558,-0.603 -0.812,-1.52 -0.765,-2.751 0.02,-0.603 0.129,-1.445 0.321,-2.524 0.192,-1.08 0.299,-1.921 0.321,-2.525 0.05,-0.417 -0.06,-0.627 -0.314,-0.627 -0.14,0 -0.536,0.236 -1.188,0.707 L 21.215,9.937 c 0.117,-0.092 0.849,-0.768 2.2,-2.025 0.978,-0.907 1.641,-1.373 1.99,-1.396 0.606,-0.047 1.094,0.203 1.467,0.75 0.372,0.547 0.559,1.182 0.559,1.903 0,0.233 -0.02,0.454 -0.07,0.664 0.349,-0.535 0.756,-1.002 1.222,-1.398 1.071,-0.93 2.27,-1.455 3.597,-1.571 1.141,-0.093 1.955,0.174 2.445,0.803 0.395,0.512 0.581,1.246 0.558,2.2 0.163,-0.139 0.338,-0.291 0.525,-0.454 0.534,-0.628 1.058,-1.128 1.57,-1.501 0.861,-0.629 1.759,-0.978 2.689,-1.048 1.118,-0.093 1.921,0.173 2.41,0.8 0.418,0.51 0.605,1.241 0.559,2.191 -0.024,0.65 -0.181,1.595 -0.472,2.836 -0.292,1.241 -0.436,1.953 -0.436,2.139 -0.024,0.488 0.023,0.824 0.139,1.009 0.117,0.186 0.395,0.278 0.838,0.278 0.326,0 0.907,-0.344 1.746,-1.034 0.698,-0.573 1.269,-1.113 1.712,-1.619 l 0.664,0.872' id='path8' /%3E%3Cpath d='m 52.295,10.654 c 0.022,-0.625 -0.233,-0.938 -0.767,-0.938 -0.698,0 -1.407,0.481 -2.127,1.442 -0.721,0.961 -1.093,1.882 -1.116,2.762 -0.013,0 -0.013,0.151 0,0.452 1.139,-0.417 2.127,-1.053 2.964,-1.911 0.674,-0.741 1.022,-1.344 1.046,-1.807 z m 7.927,3.646 c -0.675,1.117 -2.002,2.232 -3.981,3.348 -2.467,1.418 -4.971,2.126 -7.508,2.126 -1.885,0 -3.237,-0.628 -4.051,-1.885 -0.582,-0.861 -0.861,-1.885 -0.838,-3.072 0.023,-1.885 0.862,-3.677 2.515,-5.377 1.815,-1.862 3.957,-2.794 6.425,-2.794 2.282,0 3.492,0.93 3.632,2.787 0.093,1.184 -0.559,2.404 -1.956,3.658 -1.49,1.371 -3.365,2.241 -5.622,2.612 0.418,0.581 1.046,0.871 1.885,0.871 1.676,0 3.504,-0.426 5.483,-1.279 1.42,-0.599 2.538,-1.221 3.353,-1.866 l 0.663,0.871' id='path10' /%3E%3Cpath d='m 65.755,11.828 c 0.023,-0.63 -0.064,-1.207 -0.262,-1.732 -0.198,-0.524 -0.484,-0.788 -0.855,-0.788 -1.188,0 -2.166,0.642 -2.933,1.925 -0.653,1.05 -1.003,2.17 -1.048,3.358 -0.024,0.584 0.081,1.098 0.314,1.54 0.255,0.514 0.616,0.77 1.083,0.77 1.047,0 1.944,-0.617 2.689,-1.854 0.628,-1.027 0.965,-2.1 1.012,-3.219 z m 3.946,0.132 c -0.093,2.139 -0.884,3.987 -2.374,5.544 -1.49,1.557 -3.342,2.336 -5.553,2.336 -1.839,0 -3.236,-0.593 -4.19,-1.779 -0.698,-0.883 -1.083,-1.987 -1.152,-3.311 -0.118,-2 0.604,-3.836 2.165,-5.51 1.676,-1.859 3.782,-2.789 6.32,-2.789 1.629,0 2.863,0.547 3.702,1.639 0.792,1 1.152,2.29 1.082,3.87' id='path12' /%3E%3C/svg%3E%0A");
}
.videoEmbed.youtube button {
background-image:url("data:image/svg+xml,%3Csvg width='159' height='110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z' fill='%23f00'/%3E%3Cpath d='m105 55-40.8-23.4v46.8z' fill='%23fff'/%3E%3C/svg%3E%0A");
background-size: 4rem 3rem;
}
.videoEmbed.youtube a b {
margin-left:0.25rem;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.9 113.39'%3E%3Cg fill='%23fff'%3E%3Cpath d='M64.792 80.99V32.396l42.082 24.297zm93.803-63.285a20.285 20.285 0 00-14.32-14.32C131.642 0 80.99 0 80.99 0S30.337 0 17.705 3.385a20.286 20.286 0 00-14.32 14.32C0 30.338 0 56.693 0 56.693S0 83.049 3.385 95.68A20.285 20.285 0 0017.705 110c12.632 3.386 63.285 3.386 63.285 3.386s50.652 0 63.285-3.386a20.284 20.284 0 0014.32-14.32c3.385-12.632 3.385-38.988 3.385-38.988s0-26.355-3.385-38.988m94.473 74.326c.887-2.314 1.332-6.098 1.332-11.35V58.556c0-5.097-.445-8.822-1.332-11.178-.888-2.355-2.452-3.533-4.69-3.533-2.163 0-3.69 1.178-4.577 3.533-.888 2.356-1.332 6.081-1.332 11.178V80.68c0 5.25.424 9.035 1.275 11.35.848 2.318 2.392 3.475 4.633 3.475 2.239 0 3.803-1.157 4.691-3.475zm-17.953 11.122c-3.207-2.16-5.486-5.52-6.835-10.079-1.352-4.554-2.027-10.617-2.027-18.185v-10.31c0-7.644.771-13.784 2.316-18.417 1.544-4.633 3.956-8.011 7.24-10.135 3.282-2.123 7.587-3.186 12.916-3.186 5.251 0 9.459 1.082 12.626 3.243 3.165 2.162 5.482 5.542 6.95 10.136 1.466 4.595 2.2 10.715 2.2 18.36v10.31c0 7.567-.714 13.65-2.142 18.243-1.43 4.595-3.747 7.955-6.951 10.077-3.205 2.124-7.548 3.186-13.03 3.186-5.64 0-10.06-1.082-13.263-3.243m248.053-57.981c-.81 1.005-1.352 2.646-1.621 4.923-.272 2.278-.404 5.734-.404 10.367v5.097h11.697V60.46c0-4.555-.155-8.011-.463-10.367-.309-2.355-.868-4.014-1.678-4.98-.812-.966-2.067-1.449-3.766-1.449-1.7 0-2.954.503-3.765 1.506zm-2.025 29.886v3.591c0 4.557.132 7.974.404 10.251.269 2.279.828 3.94 1.68 4.982.849 1.041 2.16 1.564 3.938 1.564 2.392 0 4.035-.927 4.923-2.781.887-1.853 1.37-4.942 1.447-9.268l13.785.812c.077.62.116 1.469.116 2.548 0 6.565-1.795 11.47-5.387 14.712-3.589 3.242-8.669 4.865-15.232 4.865-7.876 0-13.398-2.47-16.564-7.414-3.168-4.94-4.75-12.586-4.75-22.935V63.589c0-10.657 1.641-18.436 4.924-23.342 3.281-4.903 8.9-7.355 16.854-7.355 5.482 0 9.691 1.004 12.626 3.012 2.933 2.01 5 5.137 6.197 9.383 1.197 4.247 1.796 10.117 1.796 17.607v12.163h-26.757m-284.953-1.33l-18.187-65.68h15.869l6.37 29.77c1.623 7.339 2.82 13.594 3.591 18.766h.464c.54-3.706 1.738-9.922 3.591-18.65l6.603-29.886h15.869l-18.417 65.68v31.51h-15.754v-31.51M322.115 34.23v71.007h-12.511l-1.39-8.688h-.347c-3.399 6.564-8.496 9.845-15.291 9.845-4.71 0-8.185-1.543-10.425-4.633-2.24-3.087-3.359-7.915-3.359-14.48V34.23h15.985v52.126c0 3.168.348 5.426 1.043 6.776.695 1.353 1.853 2.027 3.475 2.027 1.39 0 2.722-.423 3.996-1.275 1.274-.849 2.22-1.928 2.838-3.241V34.229h15.986m81.995.001v71.007h-12.511l-1.391-8.688h-.345c-3.402 6.564-8.498 9.845-15.292 9.845-4.711 0-8.186-1.543-10.426-4.633-2.24-3.087-3.358-7.915-3.358-14.48V34.23h15.985v52.126c0 3.168.347 5.426 1.041 6.776.696 1.353 1.855 2.027 3.476 2.027 1.391 0 2.723-.423 3.996-1.275 1.275-.849 2.22-1.928 2.839-3.241V34.229h15.985'%3E%3C/path%3E%3Cpath d='M365.552 20.908h-15.87v84.329h-15.637v-84.33h-15.869V8.05h47.376v12.858m76.811 53.636c0 5.174-.215 9.229-.639 12.162-.424 2.937-1.139 5.021-2.143 6.255-1.004 1.236-2.357 1.854-4.053 1.854a7.404 7.404 0 01-3.65-.927c-1.12-.618-2.026-1.544-2.722-2.78V50.796c.54-1.93 1.467-3.513 2.78-4.749 1.313-1.234 2.74-1.853 4.285-1.853 1.623 0 2.876.637 3.766 1.91.886 1.275 1.505 3.418 1.853 6.43.348 3.011.523 7.297.523 12.857zm14.652-28.964c-.967-4.478-2.531-7.721-4.692-9.73-2.163-2.007-5.136-3.011-8.919-3.011-2.935 0-5.676.83-8.224 2.49a16.926 16.926 0 00-5.908 6.545h-.117l.001-37.416h-15.405v100.777h13.204l1.622-6.717h.347c1.235 2.393 3.088 4.285 5.56 5.675 2.47 1.39 5.213 2.085 8.225 2.085 5.404 0 9.382-2.491 11.931-7.471 2.548-4.982 3.823-12.76 3.823-23.341V64.23c0-7.953-.484-14.17-1.448-18.65'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
.form .input {
position: relative;
}
input::placeholder {
color: transparent;
}
.form .input textarea,
.form .input input {
width: 100%;
padding: 1rem 0.5rem .5rem;
margin-bottom: 2rem;
border: none;
border-bottom: 1px solid #000;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
outline: none;
background: transparent;
}
.form .input textarea {
min-height: 5rem;
field-sizing: normal; /* used to be `form-sizing` but changed to this */
}
.form .input textarea:focus,
.form .input input:focus {
background-color: #00000008;
}
.form .input label:has(+ input, +textarea) {
position: absolute;
top:0;
left: 0;
padding: 1rem 0;
pointer-events: none;
transition: .5s;
}
.form .input label:has(+ input:focus),
.form .input label:has(+ input:not(:placeholder-shown)),
.form .input label:has(+ input:focus:not(:placeholder-shown)),
.form .input label:has(+ textarea:focus),
.form .input label:has(+ textarea:not(:placeholder-shown)),
.form .input label:has(+ textarea:focus:not(:placeholder-shown)) {
top: -1.8rem;
left: 0;
color: #444;
font-size: .75rem;
}
.form .form-control .error {
border-color: #800;
}
.form-control span.error {
position: relative;
top: -1.9rem;
font-size: .9rem;
color: #800;
display: inline-block;
width: 100%;
text-align: right;
}
.form .form-check label {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: 2rem;
font-size: .95rem;
}
.form .form-check input {
width: unset;
margin: unset;
border: unset;
padding: unset;
}
.form .form-check input[type="checkbox"],
.form .form-check input[type="radio"] {
-webkit-appearance:none;
appearance:none;
position:relative;
display:inline-block;
line-height:1em;
height:1em;
width:1em;
vertical-align:top;
text-align:center;
border: 0.0625em solid #666;
border-radius: 0.25em;
transition: all 0.5s;
cursor:pointer;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
box-shadow: 0 0 2px 1px #000;
}
input[type="checkbox"]:before,
input[type="radio"]:before {
content:"";
position:relative;
display:block;
transition:all 0.5s;
}
input[type="checkbox"]:not(.switch):before {
content:"\2714";
top:-0.1em;
left:0.1em;
color:#333;
transform:scale(0);
transform-origin:50% 65%;
}
input[type="checkbox"]:not(.switch):checked {
/*background:#CFC;*/
}
input[type="checkbox"]:not(.switch):checked:before {
transform:scale(1.25);
}
input[type="checkbox"].alternate:before {
content:"\1F5D9";
top:-0.1125em;
left:-0.0625em;
color:#F00;
transform:scale(0);
}
input[type="checkbox"].alternate:checked {
background:#FCC;
}
input[type="checkbox"].alternate:checked:before {
transform:scale(0.8);
}
input[type="checkbox"].switch {
width:1.5em;
background:#FCC;
border:0.125em solid #C00;
border-radius:1em;
}
input[type="checkbox"].switch:before {
position:absolute;
left:0;
top:0;
width:0.75em;
height:0.75em;
background:#C00;
border:0.125em solid #FCC;
border-radius:50%;
}
input[type="checkbox"].switch:checked {
background:#8F8;
border-color:#0A0;
}
input[type="checkbox"].switch:checked:before {
left:0.5em;
background:#0A0;
border-color:#8F8;
}
input[type="radio"] {
padding:0.125em;
border-width:0.125em;
border-radius:50%;
background:#FFF;
}
input[type="radio"]:before {
width:100%;
height:100%;
border-radius:50%;
background:#06C;
transform:scale(0);
}
input[type="radio"]:checked:before {
transform:scale(1);
}
.form-control:has(textarea) {
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
display: grid;
}
.form-control:has(textarea)::after {
/* Note the weird space! Needed to preventy jumpy behavior */
content: attr(data-replicated-value) " ";
/* This is how textarea text behaves */
white-space: pre-wrap;
/* Hidden from view, clicks, and screen readers */
visibility: hidden;
}
.form-control:has(textarea) > textarea {
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
resize: none;
/* Firefox shows scrollbar on growth, you can hide like this. */
overflow: hidden;
}
.form-control:has(textarea) > textarea,
.form-control:has(textarea)::after {
/* Identical styling required!! */
border: 1px solid black;
font: inherit;
padding: 1rem 0.5rem .5rem;
margin-bottom: 2rem;
/* Place on top of each other */
grid-area: 1 / 1 / 2 / 2;
}
.form .submit {
}
.form .submit button {
border: 1px solid #000;
border-radius: 3rem;
padding: .5rem 3rem;
cursor: pointer;
background-color: #000;
color: #eee;
transition: all .2s ease-in-out;
&:hover {
background-color: #0001;
color: #000;
}
}
header nav {
--menu-bgc : var(--head-bgc);
--menu-a-col : #000;
--menu-a-bgc : ;
--menu-a-col-hover : #888;
--menu-a-bgc-hover : ;
--menu-a-col-focus : ;
--menu-a-bgc-focus : ;
--menu-a-em-col : ;
--menu-a-em-col-hover : ;
--menu-a-em-col-focus : ;
--menu-dd-bgc : var(--menu-bgc);
--menu-dd-a-col : var(--main-col);
--menu-dd-a-bgc : ;
--menu-dd-a-col-hover : var(--menu-a-col-hover);
--menu-dd-a-bgc-hover : ;
--menu-dd-a-col-focus : ;
--menu-dd-a-bgc-focus : ;
--menu-dd-a-em-col : #ff00ff;
--menu-dd-a-em-col-hover: ;
--menu-dd-a-em-col-focus: ;
--menu-dd-ul-bgc : var(--menu-bgc);
}
menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
menu.dd {
background-color: var(--menu-bgc);
}
menu li {
display: block;
position: relative;
text-decoration: none;
transition-duration: .25s;
}
/* Styling links */
menu a {
text-decoration: none;
color: var(--menu-a-col);
font-size: 1.2rem;
display: block;
padding: .25rem .5rem;
}
menu li:hover > a,
menu a:hover,
menu a:focus {
color: var(--menu-a-col-hover);
}
/* navigation title */
menu li > a span {
display: inline-block;
line-height: 1.1;
}
/* Declarative Sentence */
menu li > a em {
font-size: 0.8rem;
color: var(--menu-a-em-col);
margin: 0;
display: block;
opacity: 0.8;
}
menu.dd li > [aria-haspopup="true"] {
padding-right: 1.5rem;
position: relative;
}
menu.dd li > [aria-haspopup="true"] + button {
text-indent: 4rem;
border: 0;
background-color: unset;
background-image: url('data:image/svg+xml;charset=utf-8,'); /* found here: https://iconmonstr.com/arrow-25-svg/ or https://www.svgrepo.com/svg/348084/chevron-right/ */
background-repeat: no-repeat;
background-position: center;
background-size: .8rem;
position: absolute;
right : .25rem;
top : 1rem;
width : 1rem;
height: 1rem;
font-size: 1rem;
transform: rotate(90deg);
overflow: hidden;
display: block;
cursor: pointer;
/* filter: invert(1); */
}
menu.dd li > [aria-haspopup="true"]:hover + button,
menu.dd li:hover > [aria-haspopup="true"] + button {
transform: rotate(270deg);
filter: invert(39%) sepia(38%) saturate(554%) hue-rotate(355deg) brightness(90%) contrast(85%); /* https://codepen.io/sosuke/pen/Pjoqqp */
}
menu.dd li li > [aria-haspopup="true"] + button,
menu.dd li li > [aria-haspopup="true"] + button {
filter: invert(1);
transform: rotate(0deg);
opacity: 0.8;
}
menu.dd li li > [aria-haspopup="true"]:hover + button,
menu.dd li li:hover > [aria-haspopup="true"] + button {
transform: rotate(180deg);
}
/* Dropdown Styles */
menu .dropdown {
position: absolute;
top: 100%;
left: 0;
display: none;
list-style: none;
min-width: 34rem;
/* z-index: 10; */
}
menu ul {
background-color: var(--menu-dd-bgc);
}
menu ul ul {
background-color: var(--menu-dd-ul-bgc);
}
menu .dropdown li {
width: 100%;
}
menu .dropdown a {
padding: 1rem;
color: var(--menu-dd-a-col);
text-align: left;
}
menu .dropdown a:hover,
menu .dropdown a:focus {
background-color: var(--menu-dd-a-bgc-hover);
color: var(--menu-dd-a-col-hover);
}
/* Media Query for Accessibility (Make dropdowns keyboard accessible) */
@media (hover: none) {
menu li > a:focus + .dropdown, li > a:focus-within + .dropdown {
display: block;
}
}
/* Hover state for better user feedback */
menu li:hover > button {
background-color: #00ffcc;
color: #111;
}
/* Ensure submenu links aren't focusable unless expanded */
menu .dropdown a {
display: block;
padding: .5rem 2.5rem;
}
menu button[aria-expanded="false"] + .dropdown a {
tabindex: -1; /* Prevents focus when submenu is closed */
}
menu button[aria-expanded="true"] + .dropdown a {
tabindex: 0; /* Allows focus when submenu is open */
}
@media (min-width: 78rem) {
#mainMenuOpen {
display:none;
}
menu.dd li ul ul,
menu.dd li:hover ul ul {
/* display: none; /* we just want 1 level dropdowns here */
top: -1px; /* .dropdown border width */
left: 100%;
}
/* Show dropdown on hover/focus */
menu li:hover > .dropdown,
menu li:focus-within > .dropdown {
display: block;
}
/* Ensure submenus are initially hidden and not focusable */
.dropdown {
display: none;
visibility: hidden; /* Makes it invisible but not focusable */
pointer-events: none; /* Prevents interaction when hidden */
}
/* Hover on li to show dropdown */
menu li:hover > .dropdown,
menu button[aria-expanded="true"] + .dropdown {
display: block;
visibility: visible;
pointer-events: auto;
}
}
/* mobile menu magic */
@media (max-width: 104rem) {
:root {
overscroll-behavior: none;
}
body {
overscroll-behavior-y: contain;
}
/* menu overflow magic */
html.menu-open {
overflow: hidden;
}
body.menu-open {
/*overflow: scroll;*/
height: 100%;
}
body > aside {
order: 20;
}
body > header {
overflow: hidden;
}
header #logo,
.sticky header #logo,
.menu-open header #logo {
position: fixed;
top: 0;
z-index: 12345;
width: calc(100vw - var(--scrollbar-width));
}
.menu-open #header {
height: 100vh; /* fallback for IEos < 15.4 */
height: 100dvh;
overflow: auto;
}
body #menu {
height: unset;
}
#mainMenuOpen {
position: fixed;
top: 0;
right: 0;
right: var(--scrollbar-width);
display:block;
flex-grow:0;
font-family: initial;
font-size:2em;
line-height:1.75rem;
border:0;
background:inherit;
color: inherit;
padding: 1rem;
width: 4rem;
height: 4rem;
cursor: pointer;
z-index: 123456;
translate: -.25rem;
transition: top .2s ease-in;
}
#mainMenuOpen:after {
content:"\2261";
display: block;
width: 2rem;
height: 2rem;
}
.menu-open #mainMenuOpen:after {
content:"\2715";
font-size: .66em;
line-height: 1.8rem;
}
#mainMenuOpen + #nav {
position:absolute;
top:-100%;
left:0;
width:100%;
min-height:100%;
min-height: fill-available;
overflow:auto;
display:flex;
align-items:center;
justify-content:flex-start;
opacity:0;
/* background:#000; */
transition: opacity 0s;
z-index: 234;
padding: 4rem 0;
}
#mainMenuOpen:focus + #nav {
transition: opacity 0.3s ease-in;
}
#mainMenuOpen:focus + #nav,
#mainMenuOpen + #nav.active,
#mainMenuOpen + #nav:focus-within {
top:0;
opacity:1;
}
/*
.menu-open #mainMenuOpen + #nav:after {
content:"\1F5D9";
display:block;
position:fixed;
top: 0;
right: 0;
font-size: 1.9rem;
padding: 1rem;
line-height:1;
cursor: pointer;
pointer-events:auto;
filter: invert(1);
}
*/
#nav {
flex-flow: column;
}
#nav menu.dd {
}
#nav menu li {
float: unset;
position: relative;
}
#nav menu.utilities li {
display: block;
}
menu.dd {
--hover-bg: #fff;
--hover-fg: inherit;
flex-flow: column;
}
menu.dd li > [aria-haspopup="true"] + button {
right: 1.05rem;
padding: 1rem;
}
menu.dd li > [aria-haspopup="true"] + button[aria-expanded="false"] {
}
menu.dd li > [aria-haspopup="true"]:hover + button,
menu.dd li:hover > [aria-haspopup="true"] + button {
transform: rotate(270deg);
}
menu.dd li li > [aria-haspopup="true"] + button {
transform: rotate(90deg) translateX(-0.5rem);
}
menu.dd li > [aria-haspopup="true"] + button[aria-expanded="true"] {
transform: rotate(270deg);
}
menu.dd li li:hover > [aria-haspopup="true"] + button {
transform: rotate(270deg) translateX(0.5rem);
}
menu.dd li li > [aria-haspopup="true"] + button[aria-expanded="true"] {
transform: rotate(270deg) translateX(0.5rem);
}
menu .dropdown {
min-width: 100%;
}
menu button[aria-expanded="false"] + .dropdown {
display: none;
visibility: hidden;
pointer-events: auto;
}
menu button[aria-expanded="true"] + .dropdown {
display: block;
visibility: visible;
pointer-events: auto;
}
menu li button + .dropdown,
menu li li button + .dropdown {
position: relative;
top: 0;
left: 0;
}
}
nav.breadcrumbs {
}
/* main heading styling */
*:focus {
outline-color: invert;
outline-style: solid;
outline-offset: -2px;
outline-width: thin;
}
body > h1 {
position: absolute;
top: 0;
font-size: 1rem;
text-align: center;
max-height: var(--header-height);
max-width: var(--body-max-width);
overflow: hidden;
}
@media screen and (max-width: 70rem) {
body > h1 {
display: none;
}
}
/* accessible skip link */
.skiplink {
position: absolute;
left: -9999px;
z-index: 999;
padding: 1em;
background-color: black;
color: white;
opacity: 0;
}
.skiplink:focus {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
/* --- */
#header {
padding: 0;
z-index: 1234;
}
#header:after {
position: absolute;
top: 6rem;
content: "";
border-bottom: 1px solid #ddd;
width: calc(100% - 2 * var(--screen-margin) );
display: block;
margin: 0 var(--screen-margin);
transition: .2s top ease-in-out;
}
.sticky #header:after {
top: 4rem;
}
#header .header {
grid-column: screen;
display: grid;
/*grid-template-columns: 1fr 4fr;*/
grid-template-rows: 6rem;
height: 6rem;
width: 100%;
background-color: var(--head-bgc);
transition: .2s all ease-in-out;
}
@media screen and (max-width: 78rem) {
main {
padding-block-start: 0;
}
#header {
height: 4rem;
}
#header .header {
grid-column: screen-start/screen-end;
grid-template-columns: 1fr 4rem;
grid-template-rows : 4rem;
height: 4rem;
}
}
.sticky #header {
box-shadow: 0 0 32px rgba(0,0,0,.067);
}
/* logo */
#logo {
grid-column: screen-start / page-start;
z-index: 123;
height: 6rem;
transition : all .2s ease-in-out;
}
#logo > a {
position : relative;
top : 0;
left : calc( var(--screen-margin) + 0.25rem);
display : inline-block;
background: transparent url('../../../_assets/614ae5ba4ce3d4e541961e0b8a836850/img/gmsvision-architekturvisualisierung-logo.svg') center center / 100% auto no-repeat;
border : none;
width : 12rem;
height : 6rem;
/*text-indent: -1000%; */
overflow : hidden;
transition : all .2s ease-in-out;
translate: -.125rem .1rem; /* adjust here for visual pairing with the menu button */
}
@media screen and (min-width: 104.001rem) {
.sticky #logo {
height: 4rem;
}
.sticky #logo a {
height: 4rem;
width: 8rem;
top : 0;
}
.sticky #header .center {
height: 4rem;
}
.sticky #menu {
height: 4rem;
margin-top: 0;
}
.sticky #nav {
}
}
@media screen and (max-width: 104rem) {
#logo {
width: 100%;
height: 4rem;
}
#logo a {
top: .5rem;
height: 3rem;
translate: 0;
background-position: center left;
background-size: auto 1.75rem;
line-height: 2.25rem;
}
#mainMenuOpen + #nav {
justify-content: space-around;
}
}
@media screen and (max-width: 104rem) {
#logo {
}
#menu #nav .primary {
transform: translateX(0);
}
#menu #nav .secondary {
transform: translateX(0);
}
}
#menu {
background-color : var(--menu-bgc);
height : 6rem;
width : 100%;
grid-column: page-start / screen-end;
transition: .2s all ease-in-out;
}
@media screen and (max-width: 104rem) {
#menu {
height: 4rem;
}
menu a {
text-align: center;
}
}
/* header nav layout */
#nav {
--nav-gap: .25rem;
display: grid;
height : 100%;
grid-template-columns:
[screen-start screen-inset-start page-start]
var(--page-margin)
[page-inset-start]
minmax( var(--page-inset-left-min), var(--page-inset-left-max) )
[body-outset-start]
var(--body-outset)
[body-start]
var(--body-margin)
[body-content-start]
minmax(
calc( var(--body-content-min) / 2 )
,
calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
)
[center-line]
minmax(
calc( var(--body-content-min) / 2 )
,
calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
)
[body-content-end]
var(--body-margin)
[body-end]
var(--body-outset)
[body-outset-end]
minmax( var(--page-inset-right-min), var(--page-inset-right-max) )
[page-inset-end]
var(--page-margin)
[page-end]
var(--screen-inset-width)
[screen-inset-end]
var(--screen-margin)
[screen-end];
;
padding: 0;
transition: .2s all ease-in-out;
}
@media screen and (max-width: 70rem) {
#nav {
display: none;
}
}
#nav menu a {
font-weight: 300;
font-size: 1.25rem;
}
#nav .primary {
grid-column: page-start / center-line;
align-content: center;
/* margin-top: 1.5rem; */
/* background: linear-gradient(to bottom,#888 0%,#888 2px,#fff 2px,#fff 100%) */
width: 100%;
transform: translateX(-.5rem);
}
#nav menu li > a em {
display: none;
}
#nav .secondary {
grid-column: center-line / page-end;
justify-self: end;
align-content: center;
/* margin-right: 2.5rem; */
/* background: linear-gradient(to bottom,#888 0%,#888 2px,#fff 2px,#fff 100%) */
transform: translateX(.5rem);
}
#nav .utilities {
grid-column: page-end / screen-inset-end;
justify-self: end;
align-content: center;
list-style: none;
}
.sticky #nav .utilities {
}
#nav .utilities li {
display: inline;
}
#nav .utilities li a {
display: inline-block;
padding: .25rem;
text-decoration: none;
font-size: 0.8rem;
}
#nav .utilities li a:hover {
color: #009de4;
}
@media (max-width:112rem) {
#nav .secondary {
transform: translateX(0);
}
#nav .utilities li {
line-height: .9;
}
}
/* above header message area */
@media (min-width:60rem) {
body > aside {
z-index: 23;
}
}
#footer {
bottom : 0;
padding: 0;
background-color: var(--foot-bgc);
color : var(--foot-col);
}
#footer:before {
content: "";
border-top: 1px solid #c8c8c8;
width: calc(100% - 2 * var(--screen-margin) );
display: block;
margin: 0 var(--screen-margin);
}
#footer .center {
grid-column: screen;
width: 100%;
/* max-width: 1600px; */
margin: 0 auto;
}
/* footer menus */
#footer .menus {
font-size: 1rem;
display: flex;
justify-content: space-between;
}
#footer .menus .center {
}
#footer .menus .center > :nth-child(1){
text-align: left;
}
#footer .menus .center > :nth-child(2){
text-align: center;
}
#footer .menus .center > :nth-child(3){
text-align: right;
}
#footer .menus h2,
#footer .menus h3 {
/* margin-block-end: .5rem; */
font-family: var(--font);
font-size: 1rem;
font-weight: 300;
color: inherit;
}
#footer .menus h2 {
font-size: var(--step-1);
}
#footer .menus p + p {
margin-block-start: var(--space-3xs);
}
#footer .menus ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer .menus li {
margin: 0;
}
#footer .menus a {
text-decoration: none;
color: inherit;
}
#footer .menus a:hover {
color: #fff;
color: var(--footer-menus-a-hover);
}
#footer .contact {
}
#footer .contact h5 {
margin-block-start: var(--space-3xs);
font-size: 1rem;
}
@media screen and (max-width: 40rem) {
#footer .menus .center > div:empty {
display: none;
}
#footer address span[itemprop="address"] {
display: none;
}
#footer .menus .center > div:nth-child(1),
#footer .menus .center > div:nth-child(2),
#footer .menus .center > div:nth-child(3) {
text-align: center;
}
#footer .contact {
flex-flow: column;
gap: 2rem
}
}
/* social icons */
#social:before {
content: "";
border-top: 2px solid #e7e7e7;
display: block;
margin: 0 auto var(--space-l) ;
width: 4rem;
}
#social {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
/*padding: 2em 0;*/
margin: 6rem 0;
}
#social.logolist ul {
display: flex;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
#social.logolist li {
display: inline-block;
padding: 0 .01rem;
margin: 0;
}
#social.logolist li a {
--logo-size: 1.5rem;
display: block;
width: var(--logo-size);
height: var(--logo-size);
line-height: var(--logo-size);
opacity: 0.66;
transition: all 0.1s ease-out;
overflow: hidden;
text-indent: 4rem;
background-repeat: no-repeat;
background-position: center center;
}
#social.logolist li a:hover {
opacity: 1;
}
/* icons from here: https://simpleicons.org/ */
#social a[href*="facebook"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,'); }
#social a[href*="twitter"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,'); }
#social a[href*="instagram"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,'); }
#social a[href*="vimeo"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,'); }
#social a[href*="flickr"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,'); }
#social a[href*="pinterest"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,'); }
#social a[href*="linkedin"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,'); }
#social a[href*="youtube"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,'); }
@media screen and (max-width: 70rem) {
#social.logolist ul {
gap: .9rem;
}
#social.logolist li a {
margin: 0 auto !important;
transform: scale(0.75);
}
}
#back-to-top {
position: fixed;
bottom: 0;
right: 0;
grid-column: screen-inset-start / screen-inset-end;
padding: var(--screen-margin);
font-size: .925rem;
color: inherit;
text-decoration: none;
text-align: right;
outline: 0;
opacity: 0;
transition: .2s opacity ease-in;
&:after {
content: "↑";
padding: 0 0 0 .25rem;
}
&:hover {
opacity: .75;
}
}
.sticky #back-to-top {
opacity: .5;
}
/* footer bottom */
#footer .bottom {
font-size : 1rem;
font-weight : var(--font-weight-regular);
padding : 1.5rem 0 2rem;
background-color: var(--footer-bottom-bgc);
color : var(--footer-bottom-col);
/*text-shadow : 0 0 1px #0008;*/
position : relative;
/*top: 2.5rem;*/
}
#footer .bottom a {
text-decoration: none;
color: inherit;
}
#footer .bottom a:hover {
color: var(--footer-menus-a-hover);
}
#footer .bottom .center {
display: grid;
grid-template-columns:
[screen-start]
var(--screen-margin)
[screen-inset-start]
var(--screen-inset-width)
[page-start]
var(--page-margin)
[page-inset-start]
minmax( var(--page-inset-left-min), var(--page-inset-left-max) )
[body-outset-start]
var(--body-outset)
[body-start]
var(--body-margin)
[body-content-start]
minmax(
calc( var(--body-content-min) / 2 )
,
calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
)
[center-line]
minmax(
calc( var(--body-content-min) / 2 )
,
calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
)
[body-content-end]
var(--body-margin)
[body-end]
var(--body-outset)
[body-outset-end]
minmax( var(--page-inset-right-min), var(--page-inset-right-max) )
[page-inset-end]
var(--page-margin)
[page-end]
var(--screen-inset-width)
[screen-inset-end]
var(--screen-margin)
[screen-end];
;
}
#footer .menus {
grid-column: page-start / page-end;
grid-row: 1;
}
#footer .copy {
grid-column: screen-inset-start / page-start;
justify-self: start;
grid-row: 1;
}
#footer .legal {
grid-column: page-end / screen-inset-end;
justify-self: end;
grid-row: 1;
}
@media screen and (max-width: 96rem) {
#footer .bottom .center {
grid-template-columns: unset;
padding: 0 var(--screen-margin);
}
#footer .copy {
grid-column: 1;
}
#footer .menus {
grid-column: 2;
}
#footer .legal {
grid-column: 3;
}
}
@media screen and (max-width: 70rem) {
#footer .menus {
grid-column: unset;
grid-row: 1;
flex-flow: column;
}
#footer .menus div + div {
margin-block-start: var(--space-s);
}
#footer .copy {
grid-column: unset;
justify-self: start;
grid-row: 3;
}
#footer .legal {
grid-column: unset;
justify-self: start;
grid-row: 2;
}
#footer .bottom {
padding: 2rem var(--screen-margin);
/*font-size: .9rem;*/
/*font-weight: 500;*/
}
#footer .bottom ul {
gap: .5rem;
}
#footer .bottom .center {
padding: 0;
grid-template-columns: 1fr;
grid-template-areas:
"legal"
"copy";
}
#footer .legal,
#footer .copy {
margin-block-start: var(--space-s);
justify-self: left;
}
#footer .copy {
margin-block-start: var(--space-s);
display: inline;
}
#footer .social {
margin-block: 2rem;
}
#footer .bottom {
font-size: 1rem;
}
}
#footer address {
display: inline;
font-style: normal;
}
#footer address > * {
display: inline-flex;
margin-inline-start: .5rem;
gap: .5rem;
}
#footer address a {
display: inline;
}
#footer .bottom ul {
list-style: none;
}
#footer .bottom li {
margin: 0;
}
#footer .bottom li a {
display: inline-block;
transition: color .1s ease-in-out;
}
main h1 {
font-size: var(--step-1);
/*margin-block-start: var(--space-m)*/
}
main .tagline {
text-align: center;
font-weight: normal;
font-size: var(--step-0);
}
hr, hr.title_break.bold {
border-width: 0;
border-top-width: 0;
border-color: #e7e7e7;
border-top-color: rgb(231, 231, 231);
border-top: 2px solid #e7e7e7;
display: block;
margin: 1rem auto;
width: 4rem;
}
main {
text-wrap: balance;
}
main > .header:not(details) + section {
margin-block-start: var(--space-2xs);
}
section > *:not(a) + *:not(details, iframe) {
margin-block-start: 1rem;
}
section > *:not(a) + h2 {
margin-block-start: var(--space-xl);
}
section > *:not(a) + h3 {
margin-block-start: var(--space-l);
}
section > *:not(a) + h3 {
margin-block-start: var(--space-m);
}
section > * + iframe {
display: block;
}
main a {
color: inherit;
}
main a:hover {
color: inherit;
}
main ol,
main ul {
margin: var(--space-s) var(--space-s);
}
/* hide translation anchors */
main a:empty,
header a:empty,
footer a:empty {
display: none !important;
}
.white-bg {
background-color: #fff;
}
.grey-bg {
background-color: #EAEAEA;
}
.layout-row:not(.grid), .layout-row.grid > div {
--gap: 1.5rem;
}
.layout-row .imgs {
margin: 0;
}
main a.btn,
main input.btn,
main button.btn,
main a.button,
main .loadmore a,
main .news-projectlist-view .loadmore a {
text-decoration: none;
border: 1px solid #1C232D;
border-radius: 3rem;
padding: .5rem 4rem;
cursor: pointer;
color: #1C232D;
position: relative;
transition: all 0.3s;
}
main .news-projectlist-view .loadmore a:hover,
main a.btn:hover,
main a.button:hover,
main button.btn:hover,
main input.btn:hover,
main .loadmore a:hover {
background-color: #1C232D;
color: #f8f8f8;
border: 1px solid #222;
}
main a.btn.white {
background-color: transparent;
border: 1px solid #f6f6f6;
color: #f6f6f6;
}
main a.btn.white:hover {
background-color: #fff8;
border: 1px solid #1C232D;
color: #1C232D;
}
.loadmore {
text-align: center;
}
body main > .cta {
min-height: calc(100vh - 15rem);
background-color: unset;
position: relative;
overflow: hidden;
}
body main > .cta.grid.column-screen {
grid-column: screen-inset-start / screen-inset-end;
}
body main > .cta > div {
display: flex;
flex-flow: column;
justify-content: center;
}
body main > .cta:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: center center / cover no-repeat url(/fileadmin/_processed_/4/e/csm_Innenraumvisualisierung_Lichtstudie_Penthaus_Berlin_1_c4444096a3.jpg);
opacity: 0.1;
}
body main > .cta p + p {
margin-block-start: var(--space-m);
}
@media screen and (max-width: 70rem) {
main a.btn,
main input.btn,
main button.btn,
main a.button,
main .loadmore a,
main .news-projectlist-view .loadmore a {
padding: .5rem 1.5rem;
}
}
/* ------------------------------------------------------------------------- */ /* caballero accordion collapsible */
section details {
position:relative;
overflow:hidden;
max-width: 100%;
--detailContentHeight:auto;
border-top:1px solid #d8d8d8;
}
section details:last-child {
border-bottom:1px solid #d8d8d8;
}
section summary {
text-align: left;
font-size: var(--step--1);
font-weight: 350;
position:relative;
display:block; /* turns off the open indicator on modern UA's */
padding: 1rem 3em .5em 0;
background-color : var(--main-bgc);
cursor : pointer;
z-index : 1;
transition: .2s background-color ease-in-out;
}
section summary::-webkit-details-marker {
display:none;
}
section summary:hover {
background-color : #fafafa;
}
section summary:focus {
outline:none;
}
section summary:after {
position:absolute;
top:.5rem;
right:1rem;
content: '+';
display:inline-block;
color: inherit;
font-size : 1.75rem;
transition:transform 0.2s;
}
section details[open]:not(.closed) > summary {
background-color : #f8f8f8;
}
section details[open]:not(.closed) > summary:after {
transform-origin: center center;
transform: rotateZ(45deg);
}
section details > div {
overflow:hidden; /* wrap margins */
transition:margin-top 0.3s;
padding: 0 1rem 1rem 0;
}
section details > div > * > *:first-child:is(h2,h3,h4,h5,h6) {
display: none;
}
section details.closed > div {
margin-top:var(--detailContentHeight);
}
.accordion p:has(a.btn) {
text-align: left;
margin-block: 2rem 4rem;
}
/* ------------------------------------------------------------------------- */ /* splide hero */
/* hero */
.hero {
margin: -2rem auto 0;
background: #888;
width: 100%;
height: calc(100vh - 5.5rem);
overflow: hidden;
position: relative;
}
.hero > .title {
position: absolute;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: self-start;
grid-column: page-start / page-end;
margin: 0;
color: #fff;
text-shadow: 0 0 8rem #000;
z-index: 2;
}
.hero > .title a {
margin-block-start: 3rem;
}
.hero > div {
grid-column: screen-start / screen-end;
}
.hero .title {
}
@media (max-width: 46rem) {
.hero .title h2 {
font-size: 1.275rem;
}
}
.hero > * + * {
margin-block-start: 0;
}
.hero .bg {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #0004;
z-index: 1;
}
.hero > .imgs {
grid-column: screen-start / screen-end;
margin: 0;
}
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.1);
aspect-ratio: 16/9;
}
.hero .splide,
.hero .splide__track,
.hero .splide__slide {
height: 100%;
overflow: hidden;
}
.hero .splide__slide img {
transform: scale(1.1)
}
.hero .splide__slide.is-active img {
transform: scale(1.25) !important;
transition: transform 7s ease-out;
}
.icon-scroll {
position: absolute;
top: 90vh;
width: 32px;
height: 64px;
margin-left: -16px;
margin-top: -32px;
box-shadow: inset 0 0 0 1px #fff;
border-radius: 25px;
border: 0;
background-color: transparent;
cursor: pointer;
transform: scale(0.5);
z-index: 123;
grid-column: screen-inset-start / screen-inset-end;
}
.icon-scroll, .icon-scroll::before {
position: absolute;
left: 50%;
}
.icon-scroll::before {
content: '';
width: 6px;
height: 6px;
background: #fff;
margin-left: -3px;
top: 6px;
border-radius: 3px;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
@-webkit-keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(46px);
transform: translateY(46px);
}
}
@keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(46px);
transform: translateY(46px);
}
}
.hero + section {
scroll-margin-top: 8rem;
}
/* ------------------------------------------------------------------------- */ /* paginator */
main ul.f3-widget-paginator {
display: flex;
justify-content: center;
list-style: none;
border-radius: 0.25rem;
margin: 4rem auto;
}
main ul.f3-widget-paginator li {
background: none;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
padding: 0;
margin: 0 4px;
text-align: center;
}
main ul.f3-widget-paginator li a {
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
padding: 0;
text-decoration : none;
color: inherit;
display : inline-block;
}
main ul.f3-widget-paginator li a i {
font-style: normal;
}
main ul.f3-widget-paginator li.current {
z-index: 2;
color: #fff;
text-decoration: none;
background-color: #ddd;
width: 38px;
height: 38px;
line-height: 38px;
}
main ul.f3-widget-paginator li.disabled {
z-index: 2;
color: #ccc;
text-decoration: none;
}
main ul.f3-widget-paginator li a:hover {
z-index: 2;
color: #444;
text-decoration: none;
background-color: #ddd;
border-color: #ddd;
}
/* ------------------------------------------------------------------------- */ /* slick slider start */
.pagets__index .splide.slider {
background-color: #222;
width: 100%;
height: calc(100vh - 6rem);
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.pagets__index .slider:not(.slick-initialized) {
overflow: hidden;
}
.pagets__index .slider .image-wrap {
position: relative;
display: block;
width: 100%;
height: 100vh;
}
.pagets__index .slider .image-wrap .image {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
background-size: cover;
}
@media (orientation: landscape) {
.architekturvisualisierung-1 { background-image: url(/fileadmin/content/Bilder-2020/desktop/01-architekturvisualisierung-1.jpg); }
.architekturvisualisierung-2 { background-image: url(/fileadmin/content/Bilder-2020/desktop/01-architekturvisualisierung-2.jpg); }
.fotointegration-1 { background-image: url(/fileadmin/content/Bilder-2020/desktop/02-fotointegration-1.jpg); }
.fotointegration-2 { background-image: url(/fileadmin/content/Bilder-2020/desktop/02-fotointegration-2.jpg); }
.innenraumvisualisierung-1 { background-image: url(/fileadmin/content/Bilder-2020/desktop/03-innenraumvisualisierung-1.jpg); }
.innenraumvisualisierung-2 { background-image: url(/fileadmin/content/Bilder-2020/desktop/03-innenraumvisualisierung-2.jpg); }
.produktvisualisierung-1 { background-image: url(/fileadmin/content/Bilder-2020/desktop/04-produktvisualisierung-1.jpg); }
.produktvisualisierung-2 { background-image: url(/fileadmin/content/Bilder-2020/desktop/04-produktvisualisierung-2.jpg); }
.virtual-reality { background-image: url(/fileadmin/content/Bilder-2020/desktop/05-virtual-reality.jpg); }
.animation { background-image: url(/fileadmin/content/Bilder-2020/desktop/06-animation.jpg); }
}
@media (orientation: portrait) {
.architekturvisualisierung-1 { background-image: url(/fileadmin/content/Bilder-2020/mobile/01-architekturvisualisierung-1.jpg); }
.architekturvisualisierung-2 { background-image: url(/fileadmin/content/Bilder-2020/mobile/01-architekturvisualisierung-2.jpg); }
.fotointegration-1 { background-image: url(/fileadmin/content/Bilder-2020/mobile/02-fotointegration-1.jpg); }
.fotointegration-2 { background-image: url(/fileadmin/content/Bilder-2020/mobile/02-fotointegration-2.jpg); }
.innenraumvisualisierung-1 { background-image: url(/fileadmin/content/Bilder-2020/mobile/03-innenraumvisualisierung-1.jpg); }
.innenraumvisualisierung-2 { background-image: url(/fileadmin/content/Bilder-2020/mobile/03-innenraumvisualisierung-2.jpg); }
.produktvisualisierung-1 { background-image: url(/fileadmin/content/Bilder-2020/mobile/04-produktvisualisierung-1.jpg); }
.produktvisualisierung-2 { background-image: url(/fileadmin/content/Bilder-2020/mobile/04-produktvisualisierung-2.jpg); }
.virtual-reality { background-image: url(/fileadmin/content/Bilder-2020/mobile/05-virtual-reality.jpg); }
.animation { background-image: url(/fileadmin/content/Bilder-2020/mobile/06-animation.jpg); }
}
.slider .caption {
position: absolute;
bottom: 10vh;
left: 2vw;
padding: .75rem 1.5rem;
color: #fff;
text-align: left;
text-shadow: 0 0 48px #000;
background-color: #fff4;
}
main .slider .caption h2 {
color: #fff;
font-size: 24px;
text-align: left;
text-transform: initial;
padding: 0;
}
main .slider .caption h2 a.button {
padding: 1px 6px;
font-size: 0.7em;
}
main .slider .caption h3 {
color: #fff;
font-size: 16px;
font-family: "Roboto",sans-serif;
font-weight: normal;
text-align: left;
}
@media (max-width: 768px) {
main .slider .caption h2 a.button {
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
font-size: 0.6em;
}
main .slider .caption h3 {
font-size: 14px;
line-height: 1.2;
}
.slider .caption {
/* transform: scale(0.7); */
}
main .slider .caption {
bottom: unset;
top: 64vh;
}
main .slick-prev,
main .slick-next {
top: 50%;
}
main .icon-scroll {
top: 95vh;
}
main .slick-dotted ul.slick-dots {
bottom: 5vh;
}
}
/* ------------------------------------------------------------------------- */ /* news */
.news-list-view {
margin: 0;
display: grid;
grid-template-columns: repeat(var(--grid-type, auto-fit), minmax(min(38rem, 100%), 1fr));
gap: 1.5rem;
}
.news .view-more-button {
margin: 2rem 0 0;
display: none;
}
.news-list-view a {
aspect-ratio: 16/9;
display: block;
width: 100%;
height: auto;
position: relative;
}
.news-list-view .news-img-wrap {
aspect-ratio: 16/9;
overflow: hidden;
transition: opacity 0.75s ease, translate 0.5s ease;
transition-delay: calc(0.2s * (sibling-index() - 1));
@starting-style {
opacity: 0;
translate: 0 1em;
}
}
.news-list-view img {
width: 100%;
height: auto;
}
.news-list-view a .title {
position: absolute;
top: 0;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #000b;
font-size: var(--step-0);
font-stretch: condensed;
color: #fff;
text-decoration: none;
text-align: center;
padding: 2rem;
opacity: 0;
transition: opacity .2s ease-in;
}
.news-list-view a:hover .title {
opacity: 1;
}
.news-list-view a .title span {
font-size: var(--step--2);
font-weight: 300;
}
.news-list-view a .title span:before {
display: block;
content: "";
border-width: 0;
border-top-width: 0;
border-top: 1px solid #888;
display: block;
margin: 1rem auto;
width: 1.5rem;
}
.news-list-view a img {
transition: .4s ease-in-out;
}
.news-list-view a:hover img {
opacity: .5;
transform: scale(1.06);
}
.news-single .header {
margin-block-end: var(--space-l);
}
.news-single h1 {
margin-block-end: var(--space-xxs);
}
.news-single .meta {
display: none;
}
.news-single .first.news-img {
grid-column: screen-inset-start/screen-inset-end;
display: block;
}
main .news-text-wrap {
margin-block: var(--space-s);
}
main .news-text-wrap > * + * {
margin-block-start: var(--space-s);
}
/* preview fix */
main > .news-single {
grid-column: screen-start/screen-end;
}
.news-single img {
width: 100%;
height: auto;
}
.news-single .news-img-wrap {
grid-column: page-start/page-end;
}
.news-single h2 {
font-size: var(--step-0);
font-weight: 300;
}
.news-single h2 strong {
font-weight: 400;
}
.news-single .news-img-wrap {
display: flex;
flex-flow: column;
gap: 2rem;
margin-block-end: var(--space-2xl);
}
.news-single .news-img-wrap .mediaelement {
overflow: hidden;
}
.news-single .news-img-wrap .mediaelement a {
display: block;
width: 100%;
height: 100%;
}
.news-single .news-img-wrap .mediaelement a img {
display: block;
transition: .4s ease-in-out;
}
.news-single .news-img-wrap .mediaelement a:hover img {
opacity: .5;
transform: scale(1.06);
}
.news-single .pager {
list-style: none;
margin: 0 0 4rem;
text-align: center;
grid-column: page-start / page-end;
position: relative;
grid-template-columns: 1fr 1fr 1fr;
}
.news-single .pager .news-img-wrap {
margin-block-end: 0;
}
.news-single .pager a {
text-decoration: none;
padding-bottom: .25rem;
}
.news-single .pager .prev {
grid-column: 1;
text-align: left;
}
.news-single .pager .prev span {
font-size: 2rem;
transition: .2s ease-in-out;
}
.news-single .pager .prev:hover span {
opacity: .25;
}
.news-single .pager .next {
grid-column: 3;
text-align: right;
}
.news-single .pager .next span {
font-size: 2rem;
transition: .2s ease-in-out;
}
.news-single .pager .next:hover span {
opacity: .25;
}
@media screen and (max-width: 96rem) {
.news-single .pager {
grid-template-columns: 1fr 1fr;
}
.news-single .pager .prev span {
font-size: 1rem;
}
.news-single .pager .next {
grid-column: 2;
text-align: right;
padding-bottom: .5rem;
}
.news-single .pager .next span {
z-index: 1;
font-size: 1rem;
}
.news-single .news-list-view {
gap: .75rem;
}
}
.news-related-wrap {
margin-block-start:var(--space-2xl);
grid-column: screen-inset-start / screen-inset-end;
}
.news-related-wrap h4 {
grid-column: page-start / page-end;
}
.news-related ul {
grid-column: screen-start / screen-end;
list-style: none;
grid-template-columns: 1fr 1fr 1fr;
}
/* ------------------------------------------------------------------------- */ /* videobox */
.textmedia .mediaelement {
overflow: hidden;
background-color: #000;
}
.textmedia .videoEmbed.vimeo button {
background: unset;
}
.textmedia .mediaelement div {
margin: 0;
}
.videoEmbed {
transform: scale(1.0);
transition: all .2s ease-in-out;
}
.videoEmbed:hover {
transform: scale(1.1);
opacity: .66;
}
.videobox {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
display: block;
}
.mediaelement:not(.image):after {
content: "";
position: absolute;
bottom: 1.55rem;
left: 1.25rem;
width: 2rem;
height: 2rem;
background: center center / 1.5rem auto no-repeat url('../../../_assets/614ae5ba4ce3d4e541961e0b8a836850/img/play.svg');
}
/* ------------------------------------------------------------------------- */ /* panobox */
.panobox {
position: relative;
overflow: hidden;
}
.panobox img {
transform: scale(1.0);
transition: transform .2s ease-in-out;
}
.panobox:hover img {
transform: scale(1.1);
}
.panobox:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: center center / 6rem auto no-repeat url('../../../_assets/614ae5ba4ce3d4e541961e0b8a836850/img/360.svg') #0004;
}
/* ------------------------------------------------------------------------- */ /* image comparison slider */
#u12 .layout-row h2 {
display: none;
}
.cd-image-container-wrap {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
/* border: 2px solid #f8f8f8; /*set your border style*/
}
.cd-image-container {
position: relative;
left: -32px;
width: calc(100% + 64px);
margin: 0;
overflow: hidden;
}
#parallax3.parallaxParent > * {
/* height: auto; */
}
.cd-image-container img {
width: 100%;
display: block;
padding: 0 32px;
}
.parallaxParent .cd-image-container img { }
.parallaxParent .cd-image-container > img { /* width: 50%; */ }
.parallaxParent .cd-image-container .cd-resize-img img {
display: block;
padding: 0 32px;
width: calc(200vh + 22px);
}
.cd-image-label {
position: absolute;
bottom: 0;
right: 0;
color: #ffffff;
padding: 1em;
margin: 0 33px;
opacity: 0;
transform: translateY(20px);
transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
visibility: hidden;
}
.is-visible .cd-image-label {
opacity: 1;
transform: translateY(0);
font-size: .8rem;
}
.cd-resize-img {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
overflow: hidden;
transform: translateZ(0);
backface-visibility: hidden;
}
#u12 .cd-resize-img img {
position: absolute;
left: 0;
top: 0;
display: block;
height: 100%;
width: auto;
max-width: none;
}
#u12 .cd-image-container > img {
width: calc(100% + 1px);
}
.cd-resize-img .cd-image-label {
right: auto;
left: 0;
}
.is-visible .cd-resize-img {
width: 50%;
animation: cd-bounce-in 0.7s;
}
@keyframes cd-bounce-in {
0% {
width: 0;
}
100% {
width: 50%;
}
}
.cd-handle {
position: absolute;
height: 44px;
width: 44px;
/* center the element */
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: -22px;
border-radius: 50%;
background: rgb(0, 0, 0) url('../../../_assets/614ae5ba4ce3d4e541961e0b8a836850/img/cd-arrows.svg') no-repeat center center; /* rgb(141, 145, 153) */
cursor: move;
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
opacity: 0;
transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
/* change background color when element is active */
background-color: #666;
}
.is-visible .cd-handle {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}
/* ------------------------------------------------------------------------- */ /* custom content */
#c1 {
font-weight: 500;
font-stretch: condensed;
margin-block-start: var(--space-l);
}
#c1 h2 {
color: #222;
letter-spacing: 0;
}
#c1 i {
display: none;
}
#c1 blockquote {
font-size: var(--step--1);
}
#c2586 {
position: relative;
}
#c2586 h2 {
text-align: left;
translate: 0 -2rem;
font-size: 1.5rem;
font-weight: 400;
}
#c2586 .img {
display: flex;
justify-content: center;
}
#c2586 img {
max-width: 140px;
}
/* ------------------------------------------------------------------------- */ /* leistungen */
#u12 .grey-bg > div {
background-color: #e6e6e6;
margin-inline: var(--screen-margin);
--gap: 0;
font-size: 1.25rem;
}
#u12 .grey-bg div .videoEmbed {
margin: 0;
}
#u12 .grey-bg div:has(.above-center) {
display: grid;
justify-content: center;
align-items: center;
text-align: center;
}
#u12 .grey-bg div:has(.above-center) h3 {
margin-block-end: var(--space-s);
}
#u12 section.text > :not(a) + :not(details, iframe) {
margin-block-start: .5rem;
}
#u12 .grey-bg .above-center p a {
display: inline-block;
margin-block-start: var(--space-s);
text-decoration: none;
border: 1px solid #000;
border-radius: 3rem;
padding: .25rem 3rem;
transition: all 0.3s;
}
#u12 .grey-bg .above-center p a:hover {
background-color: #fff;
}
#u12 .layout-row > div .text {
margin: 2rem;
}
#u12 .layout-row > div .imgs {
margin: 0;
}
@media (max-width: 104rem) {
.txt-img .layout-row > :nth-child(1) {
order: 1;
}
.txt-img .layout-row > :nth-child(2) {
order: 0;
}
}
/* ------------------------------------------------------------------------- */ /* leistungen */
.menu_subpages_images ul {
margin: 0 1.5rem;
list-style: none;
display: grid;
grid-template-columns: repeat( var(--grid-type, auto-fit), minmax(min(54rem, 100%), 1fr) );
gap: 1.5rem;
}
.menu_subpages_images ul li {
}
.menu_subpages_images ul li a {
display: block;
text-decoration: none;
}
.menu_subpages_images ul li a .item {
overflow: hidden;
}
.menu_subpages_images ul li a img {
display: block;
width: 100%;
height: auto;
transition: .4s ease-in-out;
}
.menu_subpages_images ul li h3 {
display: none;
}
.menu_subpages_images a:hover img {
opacity: .5;
transform: scale(1.06);
}
/* ------------------------------------------------------------------------- */ /* animation video hero */
.video.hero {
max-width: 100%;
height: unset;
aspect-ratio: 16/9;
margin-top: 6rem;
order: 22;
}
.video.hero iframe {
width: 100%;
height: auto;
aspect-ratio: 16/9;
border: 0;
}
@media (max-width: 78rem) {
.video.hero {
margin-top: 4rem;
}
}
.layout-row .text a:not(:empty) {
display: inline-block;
text-decoration: none;
border: 1px solid #000;
border-radius: 3rem;
margin: 1rem 0 0 0;
padding: .5rem 3rem;
cursor: pointer;
color: #000;
position: relative;
transition: all 0.3s;
}
.layout-row .text a:hover {
background-color: #fcfcfc;
}
/* ------------------------------------------------------------------------- */ /* workflow */
#u8623 .grey-bg.layout-row.grid > div {
--gap: 0;
}
#u8623 .grey-bg {
grid-column: screen-inset-start/screen-inset-end;
font-size: 1rem;
}
#u8623 .grey-bg ul {
margin: 0 var(--space-s);
}
#u8623 .grey-bg *:not(li, a) + * {
margin-block-start: 2rem;
}
#u8623 .grey-bg .img {
width: 100%;
}
@media (max-width: 104rem) {
#u8623 .img-txt > div > :nth-child(1) {
order: 2;
}
#u8623 .img-txt > div > :nth-child(2) {
order: 1;
}
#u8623 .img-txt > div > :nth-child(3) {
order: 0;
}
}
/* ---------------------------------------------------------------------------- */ /* txt align */
.text-center {
text-align: center;
}
.text-end {
text-align: right;
}
.text-justify {
text-align: justify;
}