:root { /* Heights */ --vr-bw-height-small: 240px; --vr-bw-height-medium: 480px; --vr-bw-height-large: 720px; /* Colors */ --vr-bw-bgcolor-1: #f0f0f0; --vr-bw-bgcolor-2: #777777; --vr-bw-bgcolor-3: #323232; --vr-bw-color-inverted: #FFF; --vr-bw-color-headline-inverted: #FFF; /* Padding */ --vr-bw-padding-small: 3rem; --vr-bw-padding-medium: 5rem; --vr-bw-padding-large: 8rem; /* Width */ --vr-bw-padding-inline: 1rem; --vr-bw-indent-max-width: 760px; --vr-bw-content-max-width: 1120px; --vr-bw-breakout-max-width: 1480px; --vr-bw-content-size: calc( (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2 ); --vr-bw-breakout-size: calc( (var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2 ); } @media screen and (max-width: 599px) { :root { --vr-bw-padding-inline: .5rem; } } .content-background-wrapper { position: relative; /* Background base */ /* Background scaling */ /* Background position */ /* Background opacity */ /* Bacgkround beside */ /* Background color */ /* Foreground base */ /* Height */ /* Content width */ /* Vertical alignment */ /* Padding */ /* Color */ } .content-background-wrapper .content-background-wrapper-bg { position: absolute; inset: 0; } .content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { position: absolute; inset: 0; object-fit: cover; object-position: 50% 50%; display: block; width: 100%; height: 100%; } .-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-fit: contain; } .-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-fit: fill; } .-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-fit: none; } .-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 0 0; } .-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 50% 0; } .-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 100% 0; } .-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 0 50%; } .-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 50% 50%; } .-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 100% 50%; } .-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 0 100%; } .-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 50% 100%; } .-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img, .content-background-wrapper .content-background-wrapper-bg video { object-position: 100% 100%; } .-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg { opacity: 0.1; } .-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg { opacity: 0.2; } .-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg { opacity: 0.3; } .-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg { opacity: 0.4; } .-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg { opacity: 0.5; } .-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg { opacity: 0.6; } .-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg { opacity: 0.7; } .-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg { opacity: 0.8; } .-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg { opacity: 0.9; } .-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg { opacity: 1; } .content-background-wrapper.-bg-beside-content .content-background-wrapper-bg { inset: 0 auto 0 0; width: 50%; } .-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg { inset: 0 0 0 auto; } .content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments { padding-left: 50%; } .-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments { padding-left: 0; padding-right: 50%; } .content-background-wrapper.-alt-color-1 { background-color: var(--vr-bw-bgcolor-1); } .content-background-wrapper.-alt-color-2 { background-color: var(--vr-bw-bgcolor-2); } .content-background-wrapper.-alt-color-3 { background-color: var(--vr-bw-bgcolor-3); } .content-background-wrapper.-alt-color-black { background-color: #000; } .content-background-wrapper.-alt-color-black .content-background-wrapper-fg, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5, .content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6 { color: #FFFFFF; } .content-background-wrapper.-alt-color-white { background-color: white; } .content-background-wrapper.-alt-color-white .content-background-wrapper-fg, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5, .content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6 { color: #000000; } .content-background-wrapper .content-background-wrapper-fg { position: relative; box-sizing: border-box; } .-mh-small.content-background-wrapper .content-background-wrapper-fg { min-height: var(--vr-bw-height-small); } .-mh-medium.content-background-wrapper .content-background-wrapper-fg { min-height: var(--vr-bw-height-medium); } .-mh-large.content-background-wrapper .content-background-wrapper-fg { min-height: var(--vr-bw-height-large); } .-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg { min-height: 100svh; } .-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg { min-height: 66.666svh; } .-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg { min-height: 50svh; } .-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg { min-height: 33.333svh; } .-mh-ratio.content-background-wrapper .content-background-wrapper-fg { /*display: flow-root;*/ } .-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { display: table; content: ""; padding-top: 100%; float: left; } .-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 42.857%; } .-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 62.5%; } .-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 56.25%; } .-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 37.5%; } .-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 80%; } .-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 75%; } .-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 66.666%; } .-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 20%; } .-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 25%; } .-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 33.333%; } .-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 50%; } .-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before { padding-top: 100%; } .content-background-wrapper .content-background-wrapper-fg .content-grid { width: 100%; display: grid; grid-template-columns: [full-width-start] minmax(var(--vr-bw-padding-inline), 1fr) [breakout-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size)) [content-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size)) [indent-start] min(100% - var(--vr-bw-padding-inline) * 6, var(--vr-bw-indent-max-width)) [indent-end] minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size)) [content-end] minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size)) [breakout-end] minmax(var(--vr-bw-padding-inline), 1fr) [full-width-end]; } .content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: content; position: relative; } .-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: indent; } .-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: breakout; } .-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: breakout/indent; } .-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: indent/breakout; } .-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: breakout/content; } .-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: content/breakout; } .-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: full-width; } @media screen and (max-width: 599px) { .-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: full-width; } .-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: full-width/content; } .-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: content/full-width; } .-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: full-width/content; } .-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { grid-column: content/full-width; } .-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { padding: 0 calc(var(--vr-bw-padding-inline) * 2); } .-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2); } .-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0; } .-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2); } .-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid > .fragments { padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0; } } .content-background-wrapper .content-background-wrapper-fg { display: flex; align-items: flex-start; } .-va-center.content-background-wrapper .content-background-wrapper-fg { align-items: center; } .-va-bottom.content-background-wrapper .content-background-wrapper-fg { align-items: flex-end; } .-va-stretch.content-background-wrapper .content-background-wrapper-fg { display: flex; align-items: stretch; } .-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid { flex: 1; } .-padding.content-background-wrapper .content-background-wrapper-fg .fragments { padding: var(--vr-bw-padding-small) 0; } .-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments { padding: var(--vr-bw-padding-medium) 0; } .-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments { padding: var(--vr-bw-padding-large) 0; } .-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments { padding: var(--vr-bw-padding-small) 0 0; } .-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments { padding: var(--vr-bw-padding-medium) 0 0; } .-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments { padding: var(--vr-bw-padding-large) 0 0; } .-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments { padding: 0 0 var(--vr-bw-padding-small); } .-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments { padding: 0 0 var(--vr-bw-padding-medium); } .-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments { padding: 0 0 var(--vr-bw-padding-large); } .-color-inverted.content-background-wrapper .content-background-wrapper-fg { color: var(--vr-bw-color-inverted); } .-color-inverted.content-background-wrapper .content-background-wrapper-fg h1, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h2, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h3, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h4, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h5, .-color-inverted.content-background-wrapper .content-background-wrapper-fg h6 { color: var(--vr-bw-color-headline-inverted); }