/* BASIS – Ressourcen */ /* BASIS – Ressourcen */ /* BASIS – Ressourcen */ @font-face { font-display: block; font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('fonts/montserrat-v26-latin-300.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'Montserrat'; font-style: italic; font-weight: 300; src: url('fonts/montserrat-v26-latin-300italic.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('fonts/montserrat-v26-latin-regular.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('fonts/montserrat-v26-latin-italic.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('fonts/montserrat-v26-latin-500.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('fonts/montserrat-v26-latin-500italic.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('fonts/montserrat-v26-latin-600.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: italic; font-weight: 600; src: url('fonts/montserrat-v26-latin-600italic.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('fonts/montserrat-v26-latin-700.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('fonts/montserrat-v26-latin-700italic.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('fonts/montserrat-v26-latin-800.woff2') format('woff2');} @font-face { font-display: block; font-family: 'Montserrat'; font-style: italic; font-weight: 800; src: url('fonts/montserrat-v26-latin-800italic.woff2') format('woff2');} @font-face { font-display: block; font-family: 'PlexSans'; font-style: normal; font-weight: 100; src: url('fonts/ibm-plex-sans-v19-latin-100.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: italic; font-weight: 100; src: url('fonts/ibm-plex-sans-v19-latin-100italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: normal; font-weight: 200; src: url('fonts/ibm-plex-sans-v19-latin-200.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: italic; font-weight: 200; src: url('fonts/ibm-plex-sans-v19-latin-200italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: normal; font-weight: 300; src: url('fonts/ibm-plex-sans-v19-latin-300.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: italic; font-weight: 300; src: url('fonts/ibm-plex-sans-v19-latin-300italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: normal; font-weight: 400; src: url('fonts/ibm-plex-sans-v19-latin-regular.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: italic; font-weight: 400; src: url('fonts/ibm-plex-sans-v19-latin-italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: normal; font-weight: 500; src: url('fonts/ibm-plex-sans-v19-latin-500.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: italic; font-weight: 500; src: url('fonts/ibm-plex-sans-v19-latin-500italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: normal; font-weight: 600; src: url('fonts/ibm-plex-sans-v19-latin-600.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: italic; font-weight: 600; src: url('fonts/ibm-plex-sans-v19-latin-600italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: normal; font-weight: 700; src: url('fonts/ibm-plex-sans-v19-latin-700.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSans'; font-style: italic; font-weight: 700; src: url('fonts/ibm-plex-sans-v19-latin-700italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: normal; font-weight: 100; src: url('fonts/ibm-plex-serif-v19-latin-100.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: italic; font-weight: 100; src: url('fonts/ibm-plex-serif-v19-latin-100italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: normal; font-weight: 200; src: url('fonts/ibm-plex-serif-v19-latin-200.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: italic; font-weight: 200; src: url('fonts/ibm-plex-serif-v19-latin-200italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: normal; font-weight: 300; src: url('fonts/ibm-plex-serif-v19-latin-300.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: italic; font-weight: 300; src: url('fonts/ibm-plex-serif-v19-latin-300italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: normal; font-weight: 400; src: url('fonts/ibm-plex-serif-v19-latin-regular.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: italic; font-weight: 400; src: url('fonts/ibm-plex-serif-v19-latin-italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: normal; font-weight: 500; src: url('fonts/ibm-plex-serif-v19-latin-500.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: italic; font-weight: 500; src: url('fonts/ibm-plex-serif-v19-latin-500italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: normal; font-weight: 600; src: url('fonts/ibm-plex-serif-v19-latin-600.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: italic; font-weight: 600; src: url('fonts/ibm-plex-serif-v19-latin-600italic.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: normal; font-weight: 700; src: url('fonts/ibm-plex-serif-v19-latin-700.woff2') format('woff2'); } @font-face { font-display: block; font-family: 'PlexSerif'; font-style: italic; font-weight: 700; src: url('fonts/ibm-plex-serif-v19-latin-700italic.woff2') format('woff2'); } /* BASIS – globale Einstellungen die überall zum Einsatz kommen können */ /* BASIS – globale Einstellungen die überall zum Einsatz kommen können */ /* BASIS – globale Einstellungen die überall zum Einsatz kommen können */ :root { --maxwidth: 1600px; /* maximale Spaltenbreite von row / grid innerhalb der 100vw-sections. kann mit fullwidth etc. außer kraft gesetzt werden wo nötig. */ --maxwidthlimit: clamp( calc( var(--maxwidth) * 0.5 ), 100vw, var(--maxwidth)); /* vor allem als gap-basis genutzt. skaliert zwischen NEU 0.5 / 0.25*maxwidth und maxwidth basiserend auf viewport. nicht kleiner als max/2, nicht größer als max.*/ --navheight:5rem; /* derzeit: javascript misst und überschreibt diese Variable dann im DOM! Funktion layoutinit(); */ --navoffset:2rem; /* für Abstand für Sticky-Elemente unterhalb des Menüs */ --gapratio: 0.015; /* wird mit maxwidthlimit multipliziert. Spaltenmaß-Starter für .row .grid, das sind effektiv x% der Breite, limitiert nach oben und unten per maxwidthlimit */ --radiusratio: 0.015; /* neu: wie gapratio handhaben, radien passen sich an maxwidthlimit-vw-breite an. */ --gapfactorrow: 2; /* neuer Ansatz mit OKLCH ausprobieren: https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/ */ /* neuer Ansatz mit OKLCH ausprobieren: https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/ */ /* neuer Ansatz mit OKLCH ausprobieren: https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/ */ /* --clr-warning-100: oklch(97% 0.02 80); --clr-warning-200: oklch(89% 0.05 80); --clr-warning-300: oklch(80% 0.12 80); --clr-warning-400: oklch(71% 0.19 80); --clr-warning-500: oklch(60% 0.27 80); --clr-warning-600: oklch(49% 0.19 80); --clr-warning-700: oklch(38% 0.12 80); --clr-warning-800: oklch(25% 0.05 80); --clr-warning-900: oklch(12% 0.02 80); */ --base-transition: all 0.125s ease-out; --color-weiss: hwb(206 100% 0%); --color-weiss-a50: hwba(206 100% 0% / 0.5); --color-grau-3: hwb(206 96% 2%); --color-grau-2: hwb(206 93% 5%); --color-grau-1: hwb(206 84% 11%); --color-grau: hwb(206 70% 22%); --color-grau--1: hwb(206 45% 45%); --color-grau--2: hwb(206 30% 64%); --color-grau--3: hwb(206 15% 81%); --color-schwarz: hwb(206 0% 100%); --color-rot-2: hwb(0 66% 0%); --color-rot-1: hwb(0 33% 0%); --color-rot: hwb(0 0% 0%); --color-rot--1: hwb(0 0% 33%); --color-rot--2: hwb(0 0% 66%); --color-orange-2: hwb(30 66% 0%); --color-orange-1: hwb(30 33% 0%); --color-orange: hwb(30 0% 0%); --color-orange--1: hwb(30 0% 33%); --color-orange--2: hwb(30 0% 66%); --color-gelb-2: hwb(50 66% 0%); --color-gelb-1: hwb(50 33% 0%); --color-gelb: hwb(50 0% 0%); --color-gelb--1: hwb(50 0% 33%); --color-gelb--2: hwb(50 0% 66%); --color-gruen-2: hwb(90 66% 4%); --color-gruen-1: hwb(90 33% 8%); --color-gruen: hwb(90 0% 16%); --color-gruen--1: hwb(90 0% 33%); --color-gruen--2: hwb(90 0% 66%); --color-tuerkis-2: hwb(180 66% 4%); --color-tuerkis-1: hwb(180 33% 8%); --color-tuerkis: hwb(180 0% 16%); --color-tuerkis--1: hwb(180 0% 33%); --color-tuerkis--2: hwb(180 0% 66%); --color-blau-2: hwb(205 66% 4%); --color-blau-1: hwb(205 33% 8%); --color-blau: hwb(205 0% 16%); --color-blau--1: hwb(205 0% 33%); --color-blau--2: hwb(205 0% 66%); --color-violett-2: hwb(260 66% 4%); --color-violett-1: hwb(260 33% 8%); --color-violett: hwb(260 0% 16%); --color-violett--1: hwb(260 0% 33%); --color-violett--2: hwb(260 0% 66%); --color-lila-2: hwb(300 66% 4%); --color-lila-1: hwb(300 33% 8%); --color-lila: hwb(300 0% 16%); --color-lila--1: hwb(300 0% 33%); --color-lila--2: hwb(300 0% 66%); --color-K4: fuchsia; --color-site: #b8c6d1; /* dunkel:#95a3ad basis-farbe für Text/Akzent auf Site */ --color-page: var(--color-site); /* basis-farbe für Text/Akzent auf Page. kann im body überschrieben werden für sonderfarben */ --color-selection: var(--color-weiss); --bg-selection: #95a3ad; /* --font-text: "PlexSans", sans-serif; --font-head: "PlexSans", sans-serif; --font-special: "PlexSerif", serif; */ --font-text: "PlexSans", sans-serif; --font-head: "PlexSans", sans-serif; --font-special: "PlexSans", serif; --font-factor: 1; /* textskalierung 1x REM aus html {} */ --cursor-default: default; --cursor-pointer: pointer; --duotone-fg: linear-gradient(45deg, var(--color-rot--2) 20%, var(--color-rot-1) 80%); --duotone-fg-blend: plus-lighter; --duotone-bg: linear-gradient(-45deg, var(--color-gelb-1) 20%, var(--color-weiss) 80%); --duotone-bg-blend: multiply; --duotone-filter: grayscale(100%) contrast(1.1) brightness(0.8); } /* DEVTOOLS - Anmerkungen etc. */ .k4-kommentar-on { position:fixed; z-index:1000; top:5px; right:5px; cursor:var(--cursor-pointer); width:25px; height:25px; border-radius:25px; background-color:var(--color-K4); display:grid; place-items:center; } .k4-kommentar { display:block; --font-factor:0.75; } /* BASIS – Presets, Resets, HTML, BODY */ /* BASIS – Presets, Resets, HTML, BODY */ /* BASIS – Presets, Resets, HTML, BODY */ *,*::before,*::after { box-sizing:border-box; } body { margin:unset; } body { cursor: var(--cursor-default); } hr { display: block; height: 1px; border: 0; border-top: 1px solid black; margin: 1em 0; padding: 0; } audio,canvas,iframe,img,svg,video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } blockquote cite { display:block; padding:0; } ::selection { background: var(--bg-selection); color:var(--color-selection); text-shadow: none; } html { caret-color: var(--bg-selection); color: var(--color-schwarz); font-family: var(--font-text); font-variant-numeric: proportional-nums; font-weight:300; font-size: 25px; line-height: 1.4; width:100%; /* entfernt ALLE overflow-meldungen in sections in firefox ... grund eher unbekannt.*/ overflow-x:hidden; /* hidden oder clip ... nicht sicher was besser ist */ overflow-y:hidden; scroll-behavior: smooth; scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: var(--color-weiss) var(--color-grau--1); } body { background-color: var(--color-grau-1); font-size:calc( var(--font-factor) * clamp(0.85rem, 1vw, 1rem) ); } /* ACHTUNG schriftgröße generell variabel gemacht. wenn das blöd ist: nur p, li ... siehe unten! */ body.basics { --color-page: var(--color-rot); } /*Seiten-Sonder-Akzentfarbe, basierend meist auf $cid */ body.notizen { --color-page: var(--color-K4); } /*Seiten-Sonder-Akzentfarbe, basierend meist auf $cid */ /* BASIS - Typografie */ /* BASIS - Typografie */ /* BASIS - Typografie */ p, li, th, td, h1, h2, h3, h4, h5, h6, ul, ol { margin:0; } p + p {margin-top:1em;} p { } /******************************** ANSEHEN. limit-chars und text-wrap geht jänner 2025 nicht in FF **************************************/ ul { list-style-type:disc; padding-left:1em; } ul > li::marker { } ol { list-style-type:decimal; } ol > li { padding-left: 0.33em; } a, a:any-link { text-decoration:none; color:var(--color-schwarz); cursor:var(--cursor-pointer); } p a, p a:any-link, label a, label a:any-link, .legal li a, .legal li a:any-link { /* zu testen ... unterstreicht alle Links, kollidiert aber mit Navigation, Dropdowns etc. wenn zu locker */ border-bottom:2px solid var(--color-grau); } p, li, th, td, cite, label, .col, input, textarea { /* ACHTUNG: habe ich auch zu body kopiert ... wenn das dort schwierigketien macht, nur hier */ font-size:calc( var(--font-factor) * clamp(0.85rem, 1vw, 1rem) ); } p, li, th, td, cite, label { text-wrap:pretty; /* chrome - verhindert Orphans widows ... ohne balanced */ hyphens: auto; hyphenate-limit-chars: 12 5 5; /*sehr grobe Erlaubnis für Trennung langer Wörter mit langen Vor/Nachsilben*/ hyphenate-limit-lines: 2; /* 2025 noch nicht unterstützt - maximal 2 Trennungen */ hyphenate-limit-zone: 50px; /* 2025 noch nicht unterstützt - innerhalb von 2em wird NICHT getrennt --> mehr Flattersatz als Rausatz? */ overflow-wrap: break-word; /* umbruch von überlangen Worten - alias zu word-wrap */ } .nohyphens { hyphens:none; } input, textarea, *[contenteditable="true"] { text-wrap:stable; /* Inputfelder, eigentlich nur textareas oder wenn etwas editable ist */ } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { text-rendering:optimizeLegibility; text-wrap:balance; text-align:center; font-family: var(--font-head); line-height:1.1; font-weight: 700; color: var(--color-page); } h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-text); } .h0 { font-size:calc( var(--font-factor) * clamp(3rem, 10vw, 10rem) ); line-height: 1; font-weight: 700; } h1, .h1 { font-size:calc( var(--font-factor) * clamp(2.5rem, 5vw, 5rem) ); line-height:1.1; } h2, .h2 { font-size:calc( var(--font-factor) * clamp(1.5rem, 3vw, 3rem) ); } h3, .h3 { font-size:calc( var(--font-factor) * clamp(1.25rem, 2vw, 2rem) ); } h4, .h4 { font-size:calc( var(--font-factor) * clamp(1rem, 1.5vw, 1.5rem) ); } h5, .h5 { font-size:calc( var(--font-factor) * clamp(1rem, 1.3vw, 1.3rem) ); } h6, .h6 { font-size:calc( var(--font-factor) * clamp(1rem, 1.15vw, 1.15rem) ); } /* H-containerquery sizes - mal testen ob das praktibel ist. die .col wird als container-inlinesize deklariert, die Hs passen sich dann alle(?) daran an statt der bisherigen fontsize? */ .container-inlinesize { container-type: inline-size; /*container-name: colcontainer;*/ } .container-size-5 { font-size:5cqw !important; } .container-size-75 { font-size:7.5cqw !important; } .container-size-10 { font-size:10cqw !important; } .container-size-125 { font-size:12.5cqw !important; } .container-size-15 { font-size:15cqw !important; } .container-size-175 { font-size:17.5cqw !important; } .container-size-20 { font-size:20cqw !important; } .container-size-225 { font-size:22.5cqw !important; } .container-size-25 { font-size:25cqw !important; } .container-size-275 { font-size:27.5cqw !important; } .container-size-30 { font-size:30cqw !important; } /* Tabellen */ table { width:100%; border-spacing:0px; border-collapse: collapse; --gapratio: 0.01; /* kann überschrieben weden mit .gap-xx, wird aber unten noch halbiert, weil feinere Abstufungen nötig */ table-layout:fixed; overflow-wrap: break-word; /* einzelne Worte umbrechen wenn es nicht anders geht */ } table.auto { table-layout:auto; } table th, table td { text-align:left; vertical-align:top; padding:calc( var(--maxwidthlimit) * var(--gapratio) * 0.5 ) 1rem; text-wrap:pretty; } table.streifen thead tr { background-color:var(--color-grau); } table.streifen tr:nth-child(2n) { background-color:var(--color-weiss); } table.streifen :not(thead) tr:nth-child(2n+1) { background-color:var(--color-grau-2); } table.linien tr:not(:last-child) { border-bottom:1px solid var(--color-grau); } @media (max-width:767px) { .table-responsive { overflow-x:scroll; } /* Scrollcontainer für Tabellen*/ .table-responsive table { min-width:200% !important; } /* oder width:200%; ... vielleicht das auch direkt in jeder Tabelle überschreiben, weil abhängig vom Inhalt */ } /* quotes und bubbles */ blockquote { position:relative; padding:0; margin:0; display:grid; grid-template-columns:auto 1fr; grid-template-areas: "sign text" ". cite"; grid-gap:1rem; font-family:var(--font-special); font-size:clamp(1rem, 1.7vw, 1.33rem); line-height:1.2; font-style:italic; text-wrap: balance; } blockquote:before { grid-area:sign; content:"»"; font-size:400%; text-align:right; line-height:0.25; font-weight:500; color:var(--color-page); } blockquote.noquote:before { content:""; } blockquote p { grid-area:text; } blockquote cite { grid-area:cite; font-family:var(--font-text); font-weight:600; color:var(--color-page); } blockquote cite:before { content:"— "; } .speechbubble { --handlesize:1em; background-color:var(--color-page); color:var(--color-weiss); padding:0.666em; padding-top:0.5em; position:relative; width:fit-content; margin-bottom:var(--handlesize); overflow:visible !important; } .speechbubble::after { content:""; position:absolute; left:1em; bottom:calc( var(--handlesize) * -1 ); width:var(--handlesize); height:var(--handlesize); background-image:conic-gradient(at 100% 100%, transparent 0deg, transparent 315deg, var(--color-page) 315deg, var(--color-page) 350deg, transparent 350deg ); } /*Datenschutz, Impressum*/ .legal { --font-factor:0.8; } .legal h1, .legal h2, .legal h3, .legal h4, .legal h5, .legal h6 { margin:2rem 0 1rem 0; text-align:left; } .legal h2, .legal h3, .legal h4, .legal h5, .legal h6 { font-family:var(--font-text); } .legal h2 { font-size:1.7rem; } .legal h3 { font-size:1.15rem; } .legal ul { list-style-type:disc; margin:0.5rem 0 0.5rem 0rem; } .legal p + p { margin-top: 0.5rem; } .legal b, .legal strong { font-weight:500; } /* BASIS – Stil-Addons für Blockelemente */ /* BASIS – Stil-Addons für Blockelemente */ /* BASIS – Stil-Addons für Blockelemente */ /* Hintergrund Farben, ... */ .bg-rot-2 { background-color: var(--color-rot-2) !important; } .bg-rot-1 { background-color: var(--color-rot-1) !important; } .bg-rot { background-color: var(--color-rot) !important; } .bg-rot--1 { background-color: var(--color-rot--1) !important; } .bg-rot--2 { background-color: var(--color-rot--2) !important; } .bg-orange-2 { background-color: var(--color-orange-2) !important; } .bg-orange-1 { background-color: var(--color-orange-1) !important; } .bg-orange { background-color: var(--color-orange) !important; } .bg-orange--1 { background-color: var(--color-orange--1) !important; } .bg-orange--2 { background-color: var(--color-orange--2) !important; } .bg-gelb-2 { background-color: var(--color-gelb-2) !important; } .bg-gelb-1 { background-color: var(--color-gelb-1) !important; } .bg-gelb { background-color: var(--color-gelb) !important; } .bg-gelb--1 { background-color: var(--color-gelb--1) !important; } .bg-gelb--2 { background-color: var(--color-gelb--2) !important; } .bg-gruen-2 { background-color: var(--color-gruen-2) !important; } .bg-gruen-1 { background-color: var(--color-gruen-1) !important; } .bg-gruen { background-color: var(--color-gruen) !important; } .bg-gruen--1 { background-color: var(--color-gruen--1) !important; } .bg-gruen--2 { background-color: var(--color-gruen--2) !important; } .bg-tuerkis-2 { background-color: var(--color-tuerkis-2) !important; } .bg-tuerkis-1 { background-color: var(--color-tuerkis-1) !important; } .bg-tuerkis { background-color: var(--color-tuerkis) !important; } .bg-tuerkis--1 { background-color: var(--color-tuerkis--1) !important; } .bg-tuerkis--2 { background-color: var(--color-tuerkis--2) !important; } .bg-blau-2 { background-color: var(--color-blau-2) !important; } .bg-blau-1 { background-color: var(--color-blau-1) !important; } .bg-blau { background-color: var(--color-blau) !important; } .bg-blau--1 { background-color: var(--color-blau--1) !important; } .bg-blau--2 { background-color: var(--color-blau--2) !important; } .bg-violett-2 { background-color: var(--color-violett-2) !important; } .bg-violett-1 { background-color: var(--color-violett-1) !important; } .bg-violett { background-color: var(--color-violett) !important; } .bg-violett--1 { background-color: var(--color-violett--1) !important; } .bg-violett--2 { background-color: var(--color-violett--2) !important; } .bg-lila-2 { background-color: var(--color-lila-2) !important; } .bg-lila-1 { background-color: var(--color-lila-1) !important; } .bg-lila { background-color: var(--color-lila) !important; } .bg-lila--1 { background-color: var(--color-lila--1) !important; } .bg-lila--2 { background-color: var(--color-lila--2) !important; } .bg-weiss { background-color: var(--color-weiss) !important; } .bg-grau-3 { background-color: var(--color-grau-3) !important; } .bg-grau-2 { background-color: var(--color-grau-2) !important; } .bg-grau-1 { background-color: var(--color-grau-1) !important; } .bg-grau { background-color: var(--color-grau) !important; } .bg-grau--1 { background-color: var(--color-grau--1) !important; } .bg-grau--2 { background-color: var(--color-grau--2) !important; } .bg-grau--3 { background-color: var(--color-grau--3) !important; } .bg-schwarz { background-color: var(--color-schwarz) !important; } .bg-site { background-color: var(--color-site) !important; } .bg-page { background-color: var(--color-page) !important; } .bg-K4, .bg-k4 { background-color: var(--color-K4) !important; } /* todo: das ist ausbaufähig ...*/ .bg-transparent { background-color:transparent !important; } .bg-glass { background-color: var(--color-weiss-a50); backdrop-filter:blur(10px); } .bg-textur { background-image:url('img/bild.jpg'); background-size:cover; background-repeat:no-repeat; } .bg-radial-weiss-grau-1 { background: radial-gradient(ellipse at 33% 33%, var(--color-weiss) 0%, var(--color-grau-1) 100%); } .bg-linear-rot { background: linear-gradient(var(--color-rot) 0%, var(--color-rot--1) 100%); } .bg-linear-orange { background: linear-gradient(var(--color-orange) 0%, var(--color-orange--1) 100%); } .bg-linear-gelb { background: linear-gradient(var(--color-gelb) 0%, var(--color-gelb--1) 100%); } .bg-linear-gruen { background: linear-gradient(var(--color-gruen) 0%, var(--color-gruen--1) 100%); } .bg-linear-tuerkis { background: linear-gradient(var(--color-tuerkis) 0%, var(--color-tuerkis--1) 100%); } .bg-linear-blau { background: linear-gradient(var(--color-blau) 0%, var(--color-blau--1) 100%); } .bg-linear-violett { background: linear-gradient(var(--color-violett) 0%, var(--color-violett--1) 100%); } .bg-linear-lila { background: linear-gradient(var(--color-lila) 0%, var(--color-lila--1) 100%); } .bg-linear-grau { background: linear-gradient(var(--color-grau) 0%, var(--color-grau--1) 100%); } /* Schatten ... https://shadows.brumm.af */ .shadow-100 { box-shadow: 0px 5.4px 4.5px -20px rgba(0, 0, 0, 0.07), 0px 13.8px 12.5px -20px rgba(0, 0, 0, 0.1), 0px 31.1px 30.1px -20px rgba(0, 0, 0, 0.13), 0px 99px 100px -20px rgba(0, 0, 0, 0.2); } .shadow-75 { box-shadow: 0px 4.1px 3.4px -15px rgba(0, 0, 0, 0.07), 0px 10.5px 9.4px -15px rgba(0, 0, 0, 0.1), 0px 23.5px 22.6px -15px rgba(0, 0, 0, 0.13), 0px 75px 75px -15px rgba(0, 0, 0, 0.2); } .shadow, .shadow-50 { box-shadow: 0px 2.7px 2.3px -15px rgba(0, 0, 0, 0.07), 0px 7px 6.3px -15px rgba(0, 0, 0, 0.1), 0px 15.7px 15.1px -15px rgba(0, 0, 0, 0.13), 0px 50px 50px -15px rgba(0, 0, 0, 0.2); } .shadow-33 { box-shadow: 0px 1.8px 1.5px -15px rgba(0, 0, 0, 0.07), 0px 4.6px 4.1px -15px rgba(0, 0, 0, 0.1), 0px 10.4px 9.9px -15px rgba(0, 0, 0, 0.13), 0px 33px 33px -15px rgba(0, 0, 0, 0.2); } .shadow-25 { box-shadow: 0px 1.4px 1.1px -15px rgba(0, 0, 0, 0.07), 0px 3.5px 3.1px -15px rgba(0, 0, 0, 0.1), 0px 7.8px 7.5px -15px rgba(0, 0, 0, 0.13), 0px 25px 25px -15px rgba(0, 0, 0, 0.2); } .shadow-20 { box-shadow: 0px 1.1px 0.9px -15px rgba(0, 0, 0, 0.07), 0px 2.8px 2.5px -15px rgba(0, 0, 0, 0.1), 0px 6.3px 6px -15px rgba(0, 0, 0, 0.13), 0px 20px 20px -15px rgba(0, 0, 0, 0.2); } .shadow-15 { box-shadow: 0px 0.8px 0.7px -15px rgba(0, 0, 0, 0.087), 0px 2.1px 1.9px -15px rgba(0, 0, 0, 0.125), 0px 4.7px 4.5px -15px rgba(0, 0, 0, 0.163), 0px 15px 15px -15px rgba(0, 0, 0, 0.25); } .shadow-10 { box-shadow: 0px 0.5px 0.5px -10px rgba(0, 0, 0, 0.105), 0px 1.4px 1.3px -10px rgba(0, 0, 0, 0.15), 0px 3.1px 3px -10px rgba(0, 0, 0, 0.195), 0px 10px 10px -10px rgba(0, 0, 0, 0.3); } /* Radius */ .radius-0 { border-radius: 0; overflow:hidden; background-clip: padding-box; } .radius-025 { border-radius: calc( 0.25 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-05 { border-radius: calc( 0.5 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-1 { border-radius: calc( 1 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-15 { border-radius: calc( 1.5 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-2 { border-radius: calc( 2 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-3 { border-radius: calc( 3 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-4 { border-radius: calc( 4 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-5 { border-radius: calc( 5 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-6 { border-radius: calc( 6 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-100 { border-radius: calc( 100 * var(--radiusratio) * var(--maxwidthlimit) ); overflow:hidden; background-clip: padding-box; } .radius-025rem { border-radius: 0.25rem; overflow:hidden; background-clip: padding-box; } .radius-05rem { border-radius: 0.5rem; overflow:hidden; background-clip: padding-box; } .radius-1rem { border-radius: 1rem; overflow:hidden; background-clip: padding-box; } .radius-15rem { border-radius: 1.5rem; overflow:hidden; background-clip: padding-box; } .radius-2rem { border-radius: 2rem; overflow:hidden; background-clip: padding-box; } .radius-3rem { border-radius: 3rem; overflow:hidden; background-clip: padding-box; } .radius-4rem { border-radius: 4rem; overflow:hidden; background-clip: padding-box; } .radius-5rem { border-radius: 5rem; overflow:hidden; background-clip: padding-box; } .radius-6rem { border-radius: 6rem; overflow:hidden; background-clip: padding-box; } .radius-7rem { border-radius: 7rem; overflow:hidden; background-clip: padding-box; } .radius-8rem { border-radius: 8rem; overflow:hidden; background-clip: padding-box; } .radius-9rem { border-radius: 9rem; overflow:hidden; background-clip: padding-box; } .radius-10rem { border-radius: 10rem; overflow:hidden; background-clip: padding-box; } .radius-025p { border-radius: 2.5%; overflow:hidden; background-clip: padding-box; } /*TODO: das erzeugt verzerrte Radien weil Höhe anders als Breite. Lösung vielleicht container-queries cqw-Einheit? Noch zu lernen ... */ .radius-5p { border-radius: 5%; overflow:hidden; background-clip: padding-box; } .radius-10p { border-radius: 10%; overflow:hidden; background-clip: padding-box; } .radius-20p { border-radius: 20%; overflow:hidden; background-clip: padding-box; } .radius-25p { border-radius: 25%; overflow:hidden; background-clip: padding-box; } .radius-33p { border-radius: 33%; overflow:hidden; background-clip: padding-box; } .radius-50p { border-radius: 50%; overflow:hidden; background-clip: padding-box; } /* clippath sammlung. todo: systematisieren? */ .clippath-1 { clip-path: polygon(20% 0%,95% 0%,100% 20%,80% 100%,5% 100%,0% 80%); } .clippath-2 { clip-path: polygon(20% 0%,100% 0%,100% 100%,0% 100%); } .clippath-2-flip { clip-path: polygon(0% 0%,100% 0%,80% 100%,0% 100%); } /* duotone-Bilder / videos */ .duotone { background-image: var(--duotone-bg); transition:all 0.33s ease-in-out; } .duotone img, .duotone video { filter:var(--duotone-filter); mix-blend-mode:var(--duotone-bg-blend); position:relative; transition:all 0.33s ease-in-out; } .duotone::before { content:''; background-image: var(--duotone-fg); mix-blend-mode:var(--duotone-fg-blend); position:absolute; height:100%; width:100%; z-index:1; transition:all 0.33s ease-in-out; } .duotone:hover { background-image: var(--duotone-bg); background-image-opacity:0; } .duotone:hover img, .duotone:hover video { filter:grayscale(0%) contrast(1); mix-blend-mode:normal; } .duotone:hover::before { opacity:0; } /* Border */ .border-0 { border:0px solid var(--color-page); } .border-1 { border:1px solid var(--color-page); } .border-15 { border:1.5px solid var(--color-page); } .border-2 { border:2px solid var(--color-page); } .border-3 { border:3px solid var(--color-page); } .border-4 { border:4px solid var(--color-page); } .border-t-0 { border-top: 1px solid var(--color-page); } .border-t-1 { border-top: 1px solid var(--color-page); } .border-t-15 { border-top: 1.5px solid var(--color-page); } .border-t-2 { border-top: 2px solid var(--color-page); } .border-t-3 { border-top: 3px solid var(--color-page); } .border-t-4 { border-top: 4px solid var(--color-page); } .border-b-0 { border-bottom: 1px solid var(--color-page); } .border-b-1 { border-bottom: 1px solid var(--color-page); } .border-b-15 { border-bottom: 1.5px solid var(--color-page); } .border-b-2 { border-bottom: 2px solid var(--color-page); } .border-b-3 { border-bottom: 3px solid var(--color-page); } .border-b-4 { border-bottom: 4px solid var(--color-page); } .border-l-0 { border-left: 1px solid var(--color-page); } .border-l-1 { border-left: 1px solid var(--color-page); } .border-l-15 { border-left: 1.5px solid var(--color-page); } .border-l-2 { border-left: 2px solid var(--color-page); } .border-l-3 { border-left: 3px solid var(--color-page); } .border-l-4 { border-left: 4px solid var(--color-page); } .border-r-0 { border-right: 1px solid var(--color-page); } .border-r-1 { border-right: 1px solid var(--color-page); } .border-r-15 { border-right: 1.5px solid var(--color-page); } .border-r-2 { border-right: 2px solid var(--color-page); } .border-r-3 { border-right: 3px solid var(--color-page); } .border-r-4 { border-right: 4px solid var(--color-page); } .border-color-page { border-color: var(--color-page); } .border-color-rot { border-color: var(--color-rot); } .border-color-weiss { border-color: var(--color-weiss); } .border-color-grau-2 { border-color: var(--color-grau-2); } .border-color-grau-1 { border-color: var(--color-grau-1); } .border-color-grau { border-color: var(--color-grau); } .border-color-grau--1 { border-color: var(--color-grau--1); } .border-color-grau--2 { border-color: var(--color-grau--2); } .border-color-schwarz { border-color: var(--color-schwarz); } /* Hover Mouseover */ .hover-25 { transition:var(--base-transition); transform: scale(var(--hover-scale)); } .hover-50 { transition:var(--base-transition); transform: scale(var(--hover-scale)); } .hover-75 { transition:var(--base-transition); transform: scale(var(--hover-scale)); } .hover-100 { transition:var(--base-transition); transform: scale(var(--hover-scale)); } .hover-25:hover { --hover-scale:1.025; } .hover-50:hover { --hover-scale:1.05; } .hover-75:hover { --hover-scale:1.075; } .hover-100:hover { --hover-scale:1.1; } /* BASIS - Stil-Addons für Text */ /* BASIS - Stil-Addons für Text */ /* BASIS - Stil-Addons für Text */ /* Ausrichtungen */ .t-left { text-align:left; } .t-right { text-align:right; } .t-center { text-align:center; } .t-justify { text-align:justify; } .t-balance { text-wrap: balance; } .t-pretty { text-wrap: balance; text-wrap: pretty; } .t-nobalance { text-wrap: wrap; } @media (max-width:1365px) { .t-xl-left { text-align:left; } .t-xl-right { text-align:right; } .t-xl-center { text-align:center; } .t-xl-justify { text-align:justify; } .t-xl-balance { text-wrap: balance; } .t-xl-pretty { text-wrap: balance; text-wrap: pretty; } .t-xl-nobalance { text-wrap: wrap; } } @media (max-width:1279px) { .t-l-left { text-align:left; } .t-l-right { text-align:right; } .t-l-center { text-align:center; } .t-l-justify { text-align:justify; } .t-l-balance { text-wrap: balance; } .t-l-pretty { text-wrap: balance; text-wrap: pretty; } .t-l-nobalance { text-wrap: wrap; } } @media (max-width:1023px) { .t-m-left { text-align:left; } .t-m-right { text-align:right; } .t-m-center { text-align:center; } .t-m-justify { text-align:justify; } .t-m-balance { text-wrap: balance; } .t-m-pretty { text-wrap: balance; text-wrap: pretty; } .t-m-nobalance { text-wrap: wrap; } } @media (max-width:767px) { .t-s-left { text-align:left; } .t-s-right { text-align:right; } .t-s-center { text-align:center; } .t-s-justify { text-align:justify; } .t-s-balance { text-wrap: balance; } .t-s-pretty { text-wrap: balance; text-wrap: pretty; } .t-s-nobalance { text-wrap: wrap; } } @media (max-width:479px) { .t-xs-left { text-align:left; } .t-xs-right { text-align:right; } .t-xs-center { text-align:center; } .t-xs-justify { text-align:justify; } .t-xs-balance { text-wrap: balance; } .t-xs-pretty { text-wrap: balance; text-wrap: pretty; } .t-xs-nobalance { text-wrap: wrap; } } /* Größen */ .t-200 { --font-factor:2.0; } .t-150 { --font-factor:1.5; } .t-140 { --font-factor:1.4; } .t-130 { --font-factor:1.3; } .t-120 { --font-factor:1.2; } .t-110 { --font-factor:1.1; } .t-100 { --font-factor:1.0; } .t-90 { --font-factor:0.9; } .t-80 { --font-factor:0.8; } .t-70 { --font-factor:0.7; } .t-60 { --font-factor:0.6; } .t-50 { --font-factor:0.5; } .t-40 { --font-factor:0.4; } .t-200p { font-size:200%; } .t-150p { font-size:150%; } .t-140p { font-size:140%; } .t-130p { font-size:130%; } .t-120p { font-size:120%; } .t-110p { font-size:110%; } .t-100p { font-size:100%; } .t-90p { font-size: 90%; } .t-80p { font-size: 80%; } .t-70p { font-size: 70%; } .t-60p { font-size: 60%; } .t-50p { font-size: 50%; } .t-40p { font-size: 40%; } .t-9vw { font-size: calc( 0.09 * var(--maxwidthlimit) ); } /*vw-abhängig, aber mit maxwidthlimit nach oben und unten limitiert*/ .t-8vw { font-size: calc( 0.08 * var(--maxwidthlimit) ); } .t-7vw { font-size: calc( 0.07 * var(--maxwidthlimit) ); } .t-6vw { font-size: calc( 0.06 * var(--maxwidthlimit) ); } .t-5vw { font-size: calc( 0.05 * var(--maxwidthlimit) ); } .t-45vw { font-size: calc( 0.045 * var(--maxwidthlimit) ); } .t-4vw { font-size: calc( 0.04 * var(--maxwidthlimit) ); } .t-35vw { font-size: calc( 0.035 * var(--maxwidthlimit) ); } .t-3vw { font-size: calc( 0.03 * var(--maxwidthlimit) ); } .t-25vw { font-size: calc( 0.025 * var(--maxwidthlimit) ); } .t-2vw { font-size: calc( 0.02 * var(--maxwidthlimit) ); } .t-15vw { font-size: calc( 0.015 * var(--maxwidthlimit) ); } .t-1vw { font-size: calc( 0.01 * var(--maxwidthlimit) ); } .t-05vw { font-size: calc( 0.005 * var(--maxwidthlimit) ); } /* Gewicht */ b, strong { font-weight:600; } .t-w900, .t-black { font-weight:900; } .t-w800, .t-extrabold { font-weight:800; } .t-w700, .t-bold { font-weight:700; } .t-w600, .t-semibold { font-weight:600; } .t-w500, .t-medium { font-weight:500; } .t-w400, .t-regular { font-weight:400; } .t-w300, .t-light { font-weight:300; } .t-w200, .t-extralight { font-weight:200; } .t-w100, .t-thin { font-weight:100; } /* style */ i, em { font-style:italic; } .t-italic { font-style:italic; } mark { background-color:var(--color-site); color:var(--color-weiss); padding:0.1em 0.666em; border-radius:5em; box-decoration-break:clone; } :is(h1, h2, h3, h4, h5, h6):has(mark) { line-height:1.666; } u { text-decoration-line:underline; text-decoration-color:var(--color-rot); text-decoration-thickness:0.15em; text-decoration-skip-ink:all; text-underline-offset:0.2em; } /* case */ .t-normalcase { text-transform:initial; } .t-lowercase { text-transform:lowercase; } .t-uppercase { text-transform:uppercase; letter-spacing:0.075em; } /*Todo: Opentype?*/ /* Farbe */ .t-rot-2 { color: var(--color-rot-2) !important; } .t-rot-1 { color: var(--color-rot-1) !important; } .t-rot { color: var(--color-rot) !important; } .t-rot--1 { color: var(--color-rot--1) !important; } .t-rot--2 { color: var(--color-rot--2) !important; } .t-orange-2 { color: var(--color-orange-2) !important; } .t-orange-1 { color: var(--color-orange-1) !important; } .t-orange { color: var(--color-orange) !important; } .t-orange--1 { color: var(--color-orange--1) !important; } .t-orange--2 { color: var(--color-orange--2) !important; } .t-gelb-2 { color: var(--color-gelb-2) !important; } .t-gelb-1 { color: var(--color-gelb-1) !important; } .t-gelb { color: var(--color-gelb) !important; } .t-gelb--1 { color: var(--color-gelb--1) !important; } .t-gelb--2 { color: var(--color-gelb--2) !important; } .t-gruen-2 { color: var(--color-gruen-2) !important; } .t-gruen-1 { color: var(--color-gruen-1) !important; } .t-gruen { color: var(--color-gruen) !important; } .t-gruen--1 { color: var(--color-gruen--1) !important; } .t-gruen--2 { color: var(--color-gruen--2) !important; } .t-tuerkis-2 { color: var(--color-tuerkis-2) !important; } .t-tuerkis-1 { color: var(--color-tuerkis-1) !important; } .t-tuerkis { color: var(--color-tuerkis) !important; } .t-tuerkis--1 { color: var(--color-tuerkis--1) !important; } .t-tuerkis--2 { color: var(--color-tuerkis--2) !important; } .t-blau-2 { color: var(--color-blau-2) !important; } .t-blau-1 { color: var(--color-blau-1) !important; } .t-blau { color: var(--color-blau) !important; } .t-blau--1 { color: var(--color-blau--1) !important; } .t-blau--2 { color: var(--color-blau--2) !important; } .t-violett-2 { color: var(--color-violett-2) !important; } .t-violett-1 { color: var(--color-violett-1) !important; } .t-violett { color: var(--color-violett) !important; } .t-violett--1 { color: var(--color-violett--1) !important; } .t-violett--2 { color: var(--color-violett--2) !important; } .t-lila-2 { color: var(--color-lila-2) !important; } .t-lila-1 { color: var(--color-lila-1) !important; } .t-lila { color: var(--color-lila) !important; } .t-lila--1 { color: var(--color-lila--1) !important; } .t-lila--2 { color: var(--color-lila--2) !important; } .t-weiss { color: var(--color-weiss) !important; } .t-grau-3 { color: var(--color-grau-3) !important; } .t-grau-2 { color: var(--color-grau-2) !important; } .t-grau-1 { color: var(--color-grau-1) !important; } .t-grau { color: var(--color-grau) !important; } .t-grau--1 { color: var(--color-grau--1) !important; } .t-grau--2 { color: var(--color-grau--2) !important; } .t-grau--3 { color: var(--color-grau--3) !important; } .t-schwarz { color: var(--color-schwarz) !important; } .t-sitecolor { color: var(--color-site) !important; } .t-pagecolor { color: var(--color-page) !important; } .t-K4, .t-k4 { color: var(--color-K4) !important; } .t-linear-rot { background-image: linear-gradient(90deg, var(--color-rot) 0%, var(--color-rot--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-orange { background-image: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-gelb { background-image: linear-gradient(90deg, var(--color-gelb) 0%, var(--color-gelb--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-gruen { background-image: linear-gradient(90deg, var(--color-gruen) 0%, var(--color-gruen--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-tuerkis { background-image: linear-gradient(90deg, var(--color-tuerkis) 0%, var(--color-tuerkis--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-blau { background-image: linear-gradient(90deg, var(--color-blau) 0%, var(--color-blau--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-violett { background-image: linear-gradient(90deg, var(--color-violett) 0%, var(--color-violett--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-lila { background-image: linear-gradient(90deg, var(--color-lila) 0%, var(--color-lila--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .t-linear-grau { background-image: linear-gradient(90deg, var(--color-grau) 0%, var(--color-grau--2) 100%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Schatten */ .t-shadow-1 { text-shadow: 0px 10px 25px rgba(0,0,0,0.33), 0px 1px 4px rgba(255,255,255,0.90); } .t-shadow-2 { text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1); } .t-shadow-3 { text-shadow: 0px 10px 5px rgba(0, 0, 0, 0.1), 5px 15px 5px rgba(0, 0, 0, 0.05), -5px 15px 5px rgba(0, 0, 0, 0.05); } .t-shadow-3D { text-shadow: 0px 4px 0px var(--color-grau), 2px 14px 10px rgba(0,0,0,0.15), 2px 24px 4px rgba(0,0,0,0.1), 2px 24px 30px rgba(0,0,0,0.1); } .t-shadow-emboss { text-shadow: 2px 4px 8px rgba(0,0,0,0.2), 0px -5px 14px rgba(255,255,255,0.5); } /* Marker-Effekt - braucht ein parent, weil das * zwingend inline sein muss, und col flex sind und dessen kinder kein inline sein können */ /* NEU jetzt mit -Tag, viel eleganter .t-marker > * { display: inline; align-self:center; padding:0.125ch 0.5ch; line-height:1.66; background-color:var(--color-page); -webkit-box-decoration-break:clone; box-decoration-break:clone; } */ /* BASIS – UI-Elemente */ /* BASIS – UI-Elemente */ /* BASIS – UI-Elemente */ /* icon */ .icon { --icon-height: 2rem; background-color:var(--color-grau--1); border-radius:20%; aspect-ratio:1/1; height:var(--icon-height); } .icon-height-auto { --icon-height:auto; } /* number: details testen! */ .number { display:grid; place-items:center; /*border-radius:20%;*/ aspect-ratio:1/1; height:var(--icon-height); /*gemeinsame Variable intern*/ font-weight:600; } /*ausbauen?*/ .number-1, .icon-1 { --icon-height:1rem; } .number-15, .icon-15 { --icon-height:1.5rem; } .number-2, .icon-2 { --icon-height:2rem; } .number-25, .icon-25 { --icon-height:2.5rem; } .number-3, .icon-3 { --icon-height:3rem; } .number-4, .icon-4 { --icon-height:4rem; } .number-5, .icon-5 { --icon-height:5rem; } .number-6, .icon-6 { --icon-height:6rem; } /* button */ .button, input.button, button { cursor:var(--cursor-pointer); display:block; width:fit-content; padding:0.5em 1em; text-align:center; text-decoration:none; text-transform:uppercase; letter-spacing:0.05em; font-weight:500; font-size:calc( var(--font-factor) * clamp(0.85rem, 1vw, 1rem) ); /* animation: anibuttonreverse 0.1666s 1 ease-in-out; animation-fill-mode: forwards; */ } .button:hover, input.button:hover, button:hover { /*animation:anibutton 0.1666s 1 ease-in-out; animation-fill-mode: forwards;*/ } .button.animation-stop:hover, input.button.animation-stop:hover, button.animation-stop:hover { animation:none !important; animation-fill-mode: none !important; } .button-100, .button-fullwidth { width:100%; } /* alte animation, bei zfx eingesetzt, zu spezifisch. @keyframes anibutton { 0% { transform:scaleX(1) scaleY(1) ; } 50% { transform:scaleX(1.05) scaleY(1) ; } 100% { transform:scaleX(1.1) scaleY(1.1) ; } } @keyframes anibuttonreverse { 0% { transform:scaleX(1.1) scaleY(1.1) ; } 50% { transform:scaleX(1.05) scaleY(0.8) ; } 100% { transform:scaleX(1) scaleY(1) ; } } */ /*TODO: der muss weg, stattdessen mit bg-texture oder sowas verallgemeinern! */ .button-color { background-image: url('/img/button-hg.jpg'); background-repeat: no-repeat; background-position: center; background-size:cover; color: white !important; } /*TODO: wo gehört das hin? */ .reveal .reveal-show { z-index:1; opacity:0; transition:opacity 0.5s ease-out; } .reveal .reveal-hide { transition:opacity 0.125s ease-out; } .reveal:hover .reveal-show { opacity:1; } .reveal:hover .reveal-hide { opacity:0; } /* formulare */ /* TODO: reihenfolgen sortieren? form-float dokumentieren*/ /*TODO - prototyp für pseudo-fieldset. braucht ein
label, .form-float > input, .form-float > textarea { grid-row: 1 / -1; grid-column: 1 / -1; } .form-float label { position:relative; z-index:2; height:3.5rem; width:fit-content; padding:0.5rem 1rem; pointer-events:none; font-style:italic; transition:var(--base-transition); opacity:0.75; transform-origin: top left; display:grid; place-items:center left; } .form-float input:focus ~ label, .form-float input:not(:placeholder-shown) ~ label, .form-float textarea:focus ~ label, .form-float textarea:not(:placeholder-shown) ~ label { opacity:0.5; transform: scale(0.65); padding:0 calc( 1 / 0.65 * 1rem ) !important; height:2rem; } .form-check { display:grid; grid-template-columns: auto 1fr; place-items: center left; --ck-gap: 0.25em; --ck-size: 1.5em; grid-gap: var(--ck-gap); } .form-check-row { display:flex; } .form-check-cols { --ck-n: 4; grid-template-columns: repeat(auto-fit, var(--ck-size) calc( 100% / var(--ck-n) - var(--ck-gap) / var(--ck-n) * (var(--ck-n) - 1) - var(--ck-gap) - var(--ck-size) ) ); /* X Spalten, label-breiten vermindert um alle check- und gap-breiten ... hurra. */ } .form-check-cols-1 { --ck-n: 1; } .form-check-cols-2 { --ck-n: 2; } .form-check-cols-3 { --ck-n: 3; } .form-check-cols-4 { --ck-n: 4; } .form-check-cols-5 { --ck-n: 5; } .form-check-cols-6 { --ck-n: 6; } .form-check-cols-7 { --ck-n: 7; } .form-check-cols-8 { --ck-n: 8; } .form-check-cols label { width:100%; } .form-check label { cursor:var(--cursor-pointer); text-wrap:balance; padding-right:1rem; } .form-check input[type="checkbox"], .form-check input[type="radio"] { width:var(--ck-size); height:var(--ck-size); margin:0; accent-color:var(--color-rot); } /* cards card grid subgrid */ .subgrid { --span: 3; /* kombiniert mit .grid.cards und .col.card --> das meiste wird hier komplett überflüssig. mal deaktivieren und schauen */ /* display:grid; grid-auto-rows:auto; grid-template-rows: auto auto auto auto; grid-template-columns:repeat(var(--repeat), minmax(0, 1fr)); gap:2rem; */ } .subgrid-span-1 { --span: 1; } .subgrid-span-2 { --span: 2; } .subgrid-span-3 { --span: 3; } .subgrid-span-4 { --span: 4; } .subgrid-span-5 { --span: 5; } .subgrid-span-6 { --span: 6; } .subgrid-span-7 { --span: 7; } .subgrid-span-8 { --span: 8; } .subgrid-span-9 { --span: 9; } .subgrid-span-10 { --span: 10; } .subgrid-span-11 { --span: 11; } .subgrid-span-12 { --span: 12; } .subgrid .col { grid-row: span var(--span); display:grid; gap:0rem; /*grid-auto-flow:column;*/ /*nicht notwendig?*/ grid-template-rows: subgrid; } /* störer stopper */ /* todo: details prüfen und verbessern! */ .stopper { position:absolute; z-index:2; right:0px; top:0px; transform:translateY(-20%) translateX(15%) rotate(-7deg) scale(var(--hover-scale, 1)); /* wenn col schon ein hover-xx scale hat, dann setzt sich der scale hier weiter fort. sonst 1 */ width:fit-content; height:auto; aspect-ratio:1/1; padding:0.5rem; display:grid; place-items:center; } .col:has(.stopper) { /* sonst kein Überhang an a.col ... unschön gelöst. */ overflow:visible; } /* akkordeon */ .accordion { } .accordion-item { border-bottom:1px solid var(--color-grau); } .accordion-item:last-child { border-bottom:0px solid var(--color-grau); } .accordion-head { cursor:var(--cursor-pointer); text-align: left; border-top: inherit; display:flex; gap:1rem; justify-content:space-between; align-items: center; } .accordion-head:first-child { border-top: none; } .accordion-head::after { content:""; background: url('img/k4_arrdown-b.svg') no-repeat center; background-size:100% auto; height:2rem; aspect-ratio:1; flex-shrink:0; align-self:flex-start; transition:var(--base-transition); } .accordion-head:not(.collapsed)::after { transform:scaleY(-1); } .accordion-body, .accordion-head { padding:0.5rem var(--colgap); /* TODO: gap / gapratio sauber für accordions implementieren, das funktioniert noch nicht. Analog Tables? */ } .accordion-body { padding-top:0px; padding-bottom:1rem; display:none; } /* tabs */ .tabs { --border:2px; position:relative; } .tabs-border-0 { --border:0px; } .tabs-border-1 { --border:1px; } .tabs-border-2 { --border:2px; } .tabs-border-3 { --border:3px; } .tabs-border-4 { --border:4px; } .tabs-head { display:flex; gap:0.25rem; margin-bottom: calc(var(--border) * -1); position:relative; z-index:2; } .tabs-head .tab-button { cursor:var(--cursor-pointer); border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; border-width: 0; border-style: solid; border-bottom-width: var(--border); margin-top:var(--border); box-shadow:inset 0 -5px 10px -10px black; transition:all 0.1s ease-in-out; } .tabs-head .tab-button-aktiv { border-width: var(--border); border-style: solid; border-bottom-width: 0; margin-top: 0; box-shadow:none; } .tabs-body { border-top-left-radius:0 !important; border-style: solid; border-width: var(--border); position:relative; z-index:1; } .tabs-body .tab-content { overflow:hidden; } .tabs-body .tab-content-aktiv { height:auto; } /* neues Dropdown - viel flexibler */ .dropdown { --drop-height: 2rem; --drop-padding: 1rem; --drop-transition: var(--base-transition); --drop-border:1.5px; --drop-radius: calc( var(--drop-height) / 2 + var(--drop-border) ); --drop-background: var(--color-weiss); height:calc( var(--drop-height) + 2 * var(--drop-border) ); overflow:visible; cursor:var(--cursor-pointer); width:100%; /* so breit wie col, aber wenn col-auto oder kein col-xxx, so breit wie Inhalt */ } .dropdowninner { /* für durchgehenden rahmen inkl radius und clip für radius und shadow */ border:var(--drop-border) solid black; border-radius:var(--drop-radius); overflow:clip; } .drophead { background-color:var(--drop-background); overflow: hidden; height: var(--drop-height); padding:0; display:grid; grid-template-columns: 1fr var(--drop-height); place-items: center left; } .drophead > div { padding:0 calc( var(--drop-padding) * 0.75 ) 0 var(--drop-padding); } .drophead:after { content:""; background-image:url('img/k4_arrdown-b.svg'); background-size:60% auto; background-repeat:no-repeat; background-position:35% 55%; border-left:var(--drop-border) solid black; height:100%; aspect-ratio:1; display:grid; place-items:center; transition: var(--drop-transition); } ul.droplist { transition: var(--drop-transition); background-color:var(--drop-background); position:relative; z-index:2; list-style-type: none; padding: 0; } ul.droplist > li { display:grid; place-items:stretch; } ul.droplist > li > a { padding:0 0 0 var(--drop-padding); height:0; /*height: var(--drop-height);*/ overflow: hidden; transition: var(--drop-transition); display:grid; grid-template-columns: 1fr calc( var(--drop-padding) + var(--drop-height) ); /* hält rechts den Abstand frei, den auch der Drop-Pfeil braucht. */ grid-template-rows: 1fr 0; /* bold-kompensierung */ place-items: center left; grid-template-areas: ". padding" "bolding ."; } ul.droplist > li > a:after { grid-area:bolding; content: attr(data-text); content: attr(data-text)/""; height: 0; visibility: hidden; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; font-weight:700; } ul.droplist > li.aktiv > a { font-weight:700; color:var(--color-page); } /*hover-aufklappen*/ .dropdown:hover .drophead:after { border-left-color:var(--drop-background); } .dropdown:hover ul.droplist { padding: 0 0 0.25rem 0; } .dropdown:hover a, .dropdown:hover ul.droplist li:after { height: var(--drop-height); } /*hover-menüpunkte*/ .droplist > li > a:hover { background-color:var(--color-grau-1); } /* UI-LAYOUTGRUPPEN neuer Aufbau 2024 */ /* UI-LAYOUTGRUPPEN neuer Aufbau 2024 */ /* UI-LAYOUTGRUPPEN neuer Aufbau 2024 */ /* Swiper pauschal einbetten */ .row:has(> .swiper) { overflow:hidden; } .swiper { width:100% !important; } /* experiment ... braucht eine Breitenangabe für die Berechnung nach innen. geht das so pauschal für alle swiper, oder einzeln? sonst hier wieder weg!*/ /* Swiper: pauschal nicht benötigte Navigationspfeile deaktivieren */ .swiper-button-disabled { opacity:0.2; pointer-events:none; } .swiper-button-hidden { opacity:0; pointer-events:none; } /* Swiper-Variante: Marquee Endlosdurchlauf */ .swiper.swiper-marquee { } .swiper.swiper-marquee .swiper-wrapper { transition-timing-function: linear !important; } /* durchgehendes scrollen ohne anhalten */ /* Swiper-Variante: Pfeilnavigation links/rechts mit grid-platzierung der Pfeile, auch responsive */ .swiper-arrow-grid { display:grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; grid-template-areas: "prev slider next"; } @media (max-width:1023px) { .swiper-arrow-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 4rem; grid-template-areas: "slider slider" "prev next"; } } .swiper-arrow { grid-area:slider; width:100%; } .swiper-arrow-next { grid-area:next; } .swiper-arrow-prev { grid-area:prev; } .swiper-arrow-next, .swiper-arrow-prev { display:grid; grid-template: 1fr / 1fr; place-items:center; cursor:var(--cursor-pointer); } .swiper-arrow-next img, .swiper-arrow-prev img { max-width:none; filter:none; /*undo swiper*/ width:3rem; aspect-ratio:1; transform:rotate(90deg); } .swiper-arrow-next img { transform:rotate(-90deg); } .swiper-arrow-next::after, .swiper-arrow-prev::after { content: none; } /* Swiper-Variante: Pfeilnavigation mit Skalierung. todo: script-Part sauber trennen! */ .swiper-arrow-hero .swiper-slide { transform:scale(0.7); transition:transform 0.25s ease-in-out; } .swiper-arrow-hero .swiper-slide-active { z-index:2; transform:scale(1); } .swiper-arrow-hero .swiper-slide-prev, .swiper-arrow-hero .swiper-slide-next { z-index:1; transform:scale(0.8); } /* Swiper-Variante: Button-Navigation zum durchklicken */ .swiper-navigation-group { overflow-x:hidden; } .swiper-navigation { width:100%; overflow:hidden; } .swiper-navigation-button {} .swiper-navigation-button.aktiv { background-color:var(--color-weiss); } /* sidebar */ body:has(.sidebar) { /* body einrücken wenn sidebar vorhanden */ --sidebar-nav: 40px; --sidebar-content: min(360px, calc( 100vw - var(--sidebar-nav) ) ); margin-left:var(--sidebar-nav); } .sidebar { --sidebar-width:calc(var(--sidebar-nav) + var(--sidebar-content)); z-index: 2000; position: fixed; top: 0; bottom: 0; left: 0; width: min( var(--sidebar-width), 100vw); transform: translateX(calc( -1 * var(--sidebar-content) )); /*margin-left: calc( -1 * var(--sidebar-content) );*/ overflow:hidden; transition: var(--base-transition); box-shadow:0px 0px 15px rgba(0,0,0,0.33); } .sidebar.sidebar-aktiv { transform: translateX(0px); /*margin-left:0px;*/ } .sidebar:not(.sidebar-aktiv):hover { transform: translateX(calc( -1 * var(--sidebar-content) + 5px )); /*margin-left: calc( -1 * var(--sidebar-content) + 5px );*/ } .sidebar-nav { width:var(--sidebar-nav) !important; flex-shrink:0; } .sidebar-content { width:var(--sidebar-content) !important; } .sidebar .col.sidebar-open { cursor:var(--cursor-pointer); transition: var(--base-transition); display:grid; grid-template: 1fr / 1fr; place-items:center; } .sidebar .col.sidebar-open:after { content:""; background-image: url('img/k4_arrdown-b.svg'); background-repeat: no-repeat; background-position: center; background-size:100% auto; width:100%; aspect-ratio:1; transform:rotate(-90deg); transition:var(--base-transition); } .sidebar-aktiv .col.sidebar-open { background-color:var(--color-grau-1); } .sidebar-aktiv .col.sidebar-open:after { transform:rotate(-90deg) scaleY(-1); } .sidebar:not(.sidebar-aktiv):hover .col.sidebar-open:after, .sidebar.sidebar-aktiv .col.sidebar-open:hover:after { background-size:120% auto; } .sidebar-backdrop { display:none; position:fixed; top:0; left:0; z-index:1000; width:100vw; height:100vh; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(10px); } /* Lightbox Stage */ #stage { display:grid; opacity:0; /*wegen jquery show muss das hier auf grid sein damit show/hide passt. beim Start per script verstecken über opacity*/ position:fixed; top:0; bottom:0; left:0; right:0; z-index:1000; background-color:rgba(0,0,0,0.5); backdrop-filter:blur(33px); grid-template: max(5vw, 3rem) 1fr max(5vw, 3rem) / max(5vw, 3rem) 1fr max(5vw, 3rem); grid-template-areas: ". . close" ". inner ." ". . ."; } .stage-close { grid-area:close; width:min(80%, 3rem); aspect-ratio:1; place-self: center; background-color:var(--color-weiss); border-radius:50%; display:grid; place-items:center; transition:var(--base-transition); cursor:var(--cursor-pointer); } .stage-close:hover { transform:scale(1.1); } .stage-close:after { content:"×"; font-size:2rem; line-height:1; } .stage-content { /* lokaler Inhalt, versteckt, wir dann in #stage stage-content geklont */ display:none; } #stage .stage-content { display:block; grid-area:inner; background:white; overflow:hidden; } /* LAYOUTGRUPPEN für Grafik / Animation */ /* TODO: sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* TODO: sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ .headlinegroup { /* kombi aus h1 und h2, für Animation von beiden gemeinsam*/ display:grid; place-content:center center; text-transform:uppercase; font-style:italic; } .headlinegroup h2 { transform:translateX(min(5vw, 80px)); } .textgroup { display:grid; height: 100%; place-content: center; font-kerning: normal; text-shadow: 0 3px 15px rgba(0,0,0,0.7); text-transform:uppercase; line-height:0.9; font-family:var(--font-head); letter-spacing:0.2em; font-weight:700; font-style:italic; } .textgroup .text1, .textgroup .text3 { color:white; font-size:clamp(1.15rem,3.333vw,4rem); font-weight:600; } .textgroup .text1 { margin-left:2em; } .textgroup .text2 { color:var(--color-page); font-size:clamp(2.5rem,10vw,12rem); margin-top:-0.5vw; } .textgroup .text3 { margin-right:2em; text-align:right; } .factsandfigures .big { font-style:italic; font-size:clamp(1.7rem, 2.5vw, 2.3rem); color:var(--color-1hell); font-weight:500; } .factsandfigures .big img { max-width:40%; margin:0 auto; } .factsandfigures .medium { font-style:italic; font-size:clamp(1.2rem, 1.66vw, 1.4rem); font-weight:500; margin-top:-0.33em; margin-bottom:0.33em; } .factsandfigures .small { margin-top:auto; font-size:clamp(0.7rem,2vw,1rem); } /* startbereich */ /*TODO: das ist zfx / hannes hagen ... aufräumen */ .startgroup { display:grid; grid-template: 1fr / 1fr; place-items:center center; overflow:hidden; } .startgroup img { grid-column: 1 / -1; grid-row: 1 / -1; } .startlogo { grid-column: 1 / -1; grid-row: 1 / -1; z-index:100; place-self: start end; width: auto !important; height: 100%; } /* bgvideos headervideos */ /* bgvideos headervideos */ /* TODO: das ist alt aus zfx ... vermutlich besser weg und wenn dann nochmal frisch machen? */ .videobox { position: fixed; z-index:-1; top:0px; left:0px; width: 100vw; max-height: 100vh; overflow:hidden; } .bgvideo { width: 100vw; height: 100vh; object-fit:cover; } .bgvideocanvas { width: 100vw; height: auto; aspect-ratio:1/1; object-fit:cover; } @media (max-width:767px) { .videobox { width: 100vw; max-height: 100vw; margin-top:140px !important; } .bgvideo { width: 100vw; height: 100vw; object-fit:cover; /* könnte contain sein wenn quadratisches video */ } .headertextgroup { margin-top:140px; } .headertextgroup .stack { width:100vw !important; height:100vw !important; min-height:auto !important; max-height:auto !important; } } .flyin { width:clamp(370px, 40vw, 800px) !important; border:2px solid var(--color-page); border-right-width:0px; background-color:var(--color-grau--1); border-radius:5px 0 0 5px; } /* NAV Sonderformate */ /* NAV Sonderformate */ /* NAV Sonderformate */ .navsection { /* height:var(--navheight); */ background-color:transparent; transition:background-color 0.125s ease-out; z-index:200 !important; /* hacky, damit .fixed flexibler verwendet werden kann, das hat üblicherweise z-index:1 */ } @media (max-width:1023px) { .navsection { background-color:var(--color-weiss); } } ul.menu { list-style-type: none; padding: 0; margin: 0; height:100%; display:flex; gap:clamp(1rem,2vw,2rem); align-items:stretch; } .menumobile { display:none; } @media (max-width:1279px) { ul.menu { } .menumobile { } } ul.menu li { display: block; text-align:center; font-family:var(--font-text); font-weight:500; font-size:clamp(0.8rem, 0.7vw, 1rem) !important; line-height:1.2; } ul.menu a { display: block; height:100%; font-weight:400; text-transform:uppercase; letter-spacing:0.1em; text-decoration: none; transition:all 0.25s ease; display:flex; align-items:center; } ul.menu a:hover { transform:scale(1.1); } ul.menu li.aktiv a { font-weight:700; color:var(--color-page); } /* sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* sichten, kategorisieren, aufräumen, ist doch projektspezifisch, enstanden bei Zfx */ /* BASIS – Layoutsystem Abschnitte, Zeilen, Grid, Spalten */ /* BASIS – Layoutsystem Abschnitte, Zeilen, Grid, Spalten */ /* BASIS – Layoutsystem Abschnitte, Zeilen, Grid, Spalten */ /* große Seitenabschnitte */ section { display:grid; /* ist kein echtes grid, nur für Ausrichtung innerhalb einer Section in Spezialfällen, z.B. bei 100vw 100vh-Sections */ justify-items:center; /* zentriert dann seine .row- oder .grid-Kind */ width:100%; /* haben immer volle Breite, für Hintergrundfarbstreifen. Breitenlimit kommt in der Regel über row / grid-Breiten. war vh, aber jetzt % wegen sidebar die im body außerhalb der sections hängt */ overflow-x:clip; scroll-margin:var(--navheight); } .stack { /* am besten angewendet auf
-Elemente, die dann in sich row oder grid stapeln statt untereinander positionieren. Ausbauen zu Responsive-Auflösung des stacks, bisher mit .s-block gemacht, aber block ist nicht unbedingt gut. */ display:grid !important; grid-template: 1fr / 1fr; grid-template-areas: "stack"; } .stack > * { /* zwingt alle direkten Child-Elemente in eine einzelne Zelle als Z-index-Stapel, und gleicht deren Größen aneinander an, das größte Child-Element bestimmt. außer das child hat eine andere größe, z.b. row-80 ... */ grid-area: stack; width: 100%; height: 100%; } /*hebt stack wieder auf ... TODO: geht davon aus dass das eine row war und jetzt flex-column richtig ist. geht das zurück zum Urpsrung, inherit? dann könnte undo auch auf grid oder col gesetzt werden. */ .nostack { display: flex !important; flex-direction:column; } /* @media (max-width:1365px) { .xl-nostack { display: flex !important; flex-direction:column; } } @media (max-width:1279px) { .l-nostack { display: flex !important; flex-direction:column; } } @media (max-width:1023px) { .m-nostack { display: flex !important; flex-direction:column; } } @media (max-width:767px) { .s-nostack { display: flex !important; flex-direction:column; } } @media (max-width:479px) { .xs-nostack { display: flex !important; flex-direction:column; } } */ @media (max-width:1365px) { .xl-nostack { display: inherit !important; } } @media (max-width:1279px) { .l-nostack { display: inherit !important; } } @media (max-width:1023px) { .m-nostack { display: inherit !important; } } @media (max-width:767px) { .s-nostack { display: inherit !important; } } @media (max-width:479px) { .xs-nostack { display: inherit !important; } } /*faktoren für row und grid gleichermaßen*/ .fullheight { height:100%; } .fullwidth { --maxwidth: calc(100vw - var(--sidebar-nav) ); padding-left: 0; padding-right: 0;} .maxwidth { --maxwidth:calc(100vw - max(2rem,8vw) ); } .maxheight { height:calc(100vh - max(2rem,8vw) ); margin:max(1rem,4vw) ; } .gap-0 { --gapratio:0.00; } .gap-05 { --gapratio:0.005; } .gap-1 { --gapratio:0.01; } .gap-15 { --gapratio:0.015; } .gap-2 { --gapratio:0.02; } .gap-25 { --gapratio:0.025; } .gap-3 { --gapratio:0.03; } .gap-4 { --gapratio:0.04; } .gap-5 { --gapratio:0.05; } @media (max-width:1365px) { .gap-xl-0 { --gapratio:0.00; } .gap-xl-05 { --gapratio:0.005; } .gap-xl-1 { --gapratio:0.01; } .gap-xl-15 { --gapratio:0.015; } .gap-xl-2 { --gapratio:0.02; } .gap-xl-25 { --gapratio:0.025; } .gap-xl-3 { --gapratio:0.03; } .gap-xl-4 { --gapratio:0.04; } .gap-xl-5 { --gapratio:0.05; } } @media (max-width:1279px) { .gap-l-0 { --gapratio:0.00; } .gap-l-05 { --gapratio:0.005; } .gap-l-1 { --gapratio:0.01; } .gap-l-15 { --gapratio:0.015; } .gap-l-2 { --gapratio:0.02; } .gap-l-25 { --gapratio:0.025; } .gap-l-3 { --gapratio:0.03; } .gap-l-4 { --gapratio:0.04; } .gap-l-5 { --gapratio:0.05; } } @media (max-width:1023px) { .gap-m-0 { --gapratio:0.00; } .gap-m-05 { --gapratio:0.005; } .gap-m-1 { --gapratio:0.01; } .gap-m-15 { --gapratio:0.015; } .gap-m-2 { --gapratio:0.02; } .gap-m-25 { --gapratio:0.025; } .gap-m-3 { --gapratio:0.03; } .gap-m-4 { --gapratio:0.04; } .gap-m-5 { --gapratio:0.05; } } @media (max-width:767px) { .gap-s-0 { --gapratio:0.00; } .gap-s-05 { --gapratio:0.005; } .gap-s-1 { --gapratio:0.01; } .gap-s-15 { --gapratio:0.015; } .gap-s-2 { --gapratio:0.02; } .gap-s-25 { --gapratio:0.025; } .gap-s-3 { --gapratio:0.03; } .gap-s-4 { --gapratio:0.04; } .gap-s-5 { --gapratio:0.05; } } @media (max-width:479px) { .gap-xs-0 { --gapratio:0.00; } .gap-xs-05 { --gapratio:0.005; } .gap-xs-1 { --gapratio:0.01; } .gap-xs-15 { --gapratio:0.015; } .gap-xs-2 { --gapratio:0.02; } .gap-xs-25 { --gapratio:0.025; } .gap-xs-3 { --gapratio:0.03; } .gap-xs-4 { --gapratio:0.04; } .gap-xs-5 { --gapratio:0.05; } } /* Zeile innerhalb einer section. hat in der Regel die maximale Breite --maxwidth. flex-layout für col-Kinder, Alternative dazu ist .grid statt .row */ .row { --colgap: calc( var(--maxwidthlimit) * var(--gapratio) ); /* maxwidthlimit neu: zwischen halber und voller maxwidth ... gut so? */ width: 100%; max-width: var(--maxwidth); padding: 0 calc( var(--gapfactorrow) * var(--colgap)); /* außenränder eine Row z.B. doppelt so stark wie die colgap ... siehe root-variablen */ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; } .row-nowrap { flex-wrap: nowrap; } .row-wrap { flex-wrap: wrap; } /* Todo: 100% bedeutet zwar 100% der section-Breite, aber das maxwidth-Limit bewirkt, dass das nicht immer durchschlägt sowie dass auf großen Bildschirmen hohe %-Werte in einer fullwidth-Row etwas anderes bedeuten wie in einer normalen row. Überlegen, ob man das mit einem Faktor auf maxwidthlimit löst statt mit %-Angaben?**/ .row-100 { width:100%; } .row-96 { width: 96%; } .row-90 { width: 90%; } .row-80 { width: 80%; } .row-70 { width: 70%; } .row-60 { width: 60%; } .row-50 { width: 50%; } .row-40 { width: 40%; } @media (max-width:1365px) { .row-xl-nowrap { flex-wrap: nowrap; } .row-xl-wrap { flex-wrap: wrap; } .row-xl-100 { width:100%; } .row-xl-96 { width: 96%; } .row-xl-90 { width: 90%; } .row-xl-80 { width: 80%; } .row-xl-70 { width: 70%; } .row-xl-60 { width: 60%; } .row-xl-50 { width: 50%; } .row-xl-40 { width: 40%; } } @media (max-width:1279px) { .row-l-nowrap { flex-wrap: nowrap; } .row-l-wrap { flex-wrap: wrap; } .row-l-100 { width:100%; } .row-l-96 { width: 96%; } .row-l-90 { width: 90%; } .row-l-80 { width: 80%; } .row-l-70 { width: 70%; } .row-l-60 { width: 60%; } .row-l-50 { width: 50%; } .row-l-40 { width: 40%; } } @media (max-width:1023px) { .row-m-nowrap { flex-wrap: nowrap; } .row-m-wrap { flex-wrap: wrap; } .row-m-100 { width:100%; } .row-m-96 { width: 96%; } .row-m-90 { width: 90%; } .row-m-80 { width: 80%; } .row-m-70 { width: 70%; } .row-m-60 { width: 60%; } .row-m-50 { width: 50%; } .row-m-40 { width: 40%; } } @media (max-width:767px) { .row-s-nowrap { flex-wrap: nowrap; } .row-s-wrap { flex-wrap: wrap; } .row-s-100 { width:100%; } .row-s-96 { width: 96%; } .row-s-90 { width: 90%; } .row-s-80 { width: 80%; } .row-s-70 { width: 70%; } .row-s-60 { width: 60%; } .row-s-50 { width: 50%; } .row-s-40 { width: 40%; } } @media (max-width:479px) { .row-xs-nowrap { flex-wrap: nowrap; } .row-xs-wrap { flex-wrap: wrap; } .row-xs-100 { width:100%; } .row-xs-96 { width: 96%; } .row-xs-90 { width: 90%; } .row-xs-80 { width: 80%; } .row-xs-70 { width: 70%; } .row-xs-60 { width: 60%; } .row-xs-50 { width: 50%; } .row-xs-40 { width: 40%; } } .row.V-top { align-items:flex-start; } .row.V-center { align-items:center; } .row.V-bottom { align-items:flex-end; align-content:flex-end; } /* beides, wegen flex-wrap */ .row.V-stretch { align-items:stretch; } .row.H-left { justify-content:flex-start; } .row.H-center { justify-content:center; } .row.H-right { justify-content:flex-end; } .row.H-between { justify-content:space-between; } .row.H-stretch > .col { flex-grow:1; } @media (max-width:1365px) { .row.V-xl-top { align-items:flex-start; } .row.V-xl-center { align-items:center; } .row.V-xl-bottom { align-items:flex-end; align-content:flex-end; } .row.V-xl-stretch { align-items:stretch; } .row.H-xl-left { justify-content:flex-start; } .row.H-xl-center { justify-content:center; } .row.H-xl-right { justify-content:flex-end; } .row.H-xl-between { justify-content:space-between; } } @media (max-width:1279px) { .row.V-l-top { align-items:flex-start; } .row.V-l-center { align-items:center; } .row.V-l-bottom { align-items:flex-end; align-content:flex-end; } .row.V-l-stretch { align-items:stretch; } .row.H-l-left { justify-content:flex-start; } .row.H-l-center { justify-content:center; } .row.H-l-right { justify-content:flex-end; } .row.H-l-between { justify-content:space-between; } } @media (max-width:1023px) { .row.V-m-top { align-items:flex-start; } .row.V-m-center { align-items:center; } .row.V-m-bottom { align-items:flex-end; align-content:flex-end; } .row.V-m-stretch { align-items:stretch; } .row.H-m-left { justify-content:flex-start; } .row.H-m-center { justify-content:center; } .row.H-m-right { justify-content:flex-end; } .row.H-m-between { justify-content:space-between; } } @media (max-width:767px) { .row.V-s-top { align-items:flex-start; } .row.V-s-center { align-items:center; } .row.V-s-bottom { align-items:flex-end; align-content:flex-end; } .row.V-s-stretch { align-items:stretch; } .row.H-s-left { justify-content:flex-start; } .row.H-s-center { justify-content:center; } .row.H-s-right { justify-content:flex-end; } .row.H-s-between { justify-content:space-between; } } @media (max-width:479px) { .row.V-xs-top { align-items:flex-start; } .row.V-xs-center { align-items:center; } .row.V-xs-bottom { align-items:flex-end; align-content:flex-end; } .row.V-xs-stretch { align-items:stretch; } .row.H-xs-left { justify-content:flex-start; } .row.H-xs-center { justify-content:center; } .row.H-xs-right { justify-content:flex-end; } .row.H-xs-between { justify-content:space-between; } } .grid { --colgap: calc( var(--maxwidthlimit) * var(--gapratio) ); /* maxwidthlimit neu: zwischen halber und voller maxwidth ... gut so? */ --repeat:3; width:100%; max-width:var(--maxwidth); padding-left: var(--colgap); padding-right: var(--colgap); display:grid; grid-template-columns:repeat(var(--repeat), minmax(0, 1fr)); /* Firefox-bug, bei nur 1fr erzeugt FF Spalten mit 2 Milliarden Pixel Breite und swiper dreht dann in Folge durch und flackert */ grid-template-rows:auto; grid-gap:var(--colgap); grid-gap:0; /********* gap ganz ausschalten und wie bei rows über die margins der kinder machen? oder die kinder überspielen und hier echte gaps anwenden *********/ place-items:stretch; grid-auto-flow:row dense; } .grid-flow-row { grid-auto-flow:row dense; } .grid-flow-col { grid-auto-flow:column dense; } .grid-cols-1 { --repeat:1; } .grid-cols-2 { --repeat:2; } .grid-cols-3 { --repeat:3; } .grid-cols-4 { --repeat:4; } .grid-cols-5 { --repeat:5; } .grid-cols-6 { --repeat:6; } .grid-cols-7 { --repeat:7; } .grid-cols-8 { --repeat:8; } .grid-cols-9 { --repeat:9; } .grid-cols-10 { --repeat:10; } .grid-cols-11 { --repeat:11; } .grid-cols-12 { --repeat:12; } @media (max-width:1365px) { .grid-cols-xl-1 { --repeat:1; } .grid-cols-xl-2 { --repeat:2; } .grid-cols-xl-3 { --repeat:3; } .grid-cols-xl-4 { --repeat:4; } .grid-cols-xl-5 { --repeat:5; } .grid-cols-xl-6 { --repeat:6; } .grid-cols-xl-7 { --repeat:7; } .grid-cols-xl-8 { --repeat:8; } .grid-cols-xl-9 { --repeat:9; } .grid-cols-xl-10 { --repeat:10; } .grid-cols-xl-11 { --repeat:11; } .grid-cols-xl-12 { --repeat:12; } } @media (max-width:1279px) { .grid-cols-l-1 { --repeat:1; } .grid-cols-l-2 { --repeat:2; } .grid-cols-l-3 { --repeat:3; } .grid-cols-l-4 { --repeat:4; } .grid-cols-l-5 { --repeat:5; } .grid-cols-l-6 { --repeat:6; } .grid-cols-l-7 { --repeat:7; } .grid-cols-l-8 { --repeat:8; } .grid-cols-l-9 { --repeat:9; } .grid-cols-l-10 { --repeat:10; } .grid-cols-l-11 { --repeat:11; } .grid-cols-l-12 { --repeat:12; } } @media (max-width:1023px) { .grid-cols-m-1 { --repeat:1; } .grid-cols-m-2 { --repeat:2; } .grid-cols-m-3 { --repeat:3; } .grid-cols-m-4 { --repeat:4; } .grid-cols-m-5 { --repeat:5; } .grid-cols-m-6 { --repeat:6; } .grid-cols-m-7 { --repeat:7; } .grid-cols-m-8 { --repeat:8; } .grid-cols-m-9 { --repeat:9; } .grid-cols-m-10 { --repeat:10; } .grid-cols-m-11 { --repeat:11; } .grid-cols-m-12 { --repeat:12; } } @media (max-width:767px) { .grid-cols-s-1 { --repeat:1; } .grid-cols-s-2 { --repeat:2; } .grid-cols-s-3 { --repeat:3; } .grid-cols-s-4 { --repeat:4; } .grid-cols-s-5 { --repeat:5; } .grid-cols-s-6 { --repeat:6; } .grid-cols-s-7 { --repeat:7; } .grid-cols-s-8 { --repeat:8; } .grid-cols-s-9 { --repeat:9; } .grid-cols-s-10 { --repeat:10; } .grid-cols-s-11 { --repeat:11; } .grid-cols-s-12 { --repeat:12; } } @media (max-width:479px) { .grid-cols-xs-1 { --repeat:1; } .grid-cols-xs-2 { --repeat:2; } .grid-cols-xs-3 { --repeat:3; } .grid-cols-xs-4 { --repeat:4; } .grid-cols-xs-5 { --repeat:5; } .grid-cols-xs-6 { --repeat:6; } .grid-cols-xs-7 { --repeat:7; } .grid-cols-xs-8 { --repeat:8; } .grid-cols-xs-9 { --repeat:9; } .grid-cols-xs-10 { --repeat:10; } .grid-cols-xs-11 { --repeat:11; } .grid-cols-xs-12 { --repeat:12; } } /* Todo: 100% bedeutet zwar 100% der section-Breite, aber das maxwidth-Limit bewirkt, dass das nicht immer durchschlägt sowie dass auf großen Bildschirmen hohe %-Werte in einer fullwidth-Row etwas anderes bedeuten wie in einer normalen row. Überlegen, ob man das mit einem Faktor auf maxwidthlimit löst statt mit %-Angaben?**/ .grid-100 { width:100%; } .grid-96 { width: 96%; } .grid-90 { width: 90%; } .grid-80 { width: 80%; } .grid-70 { width: 70%; } .grid-60 { width: 60%; } .grid-50 { width: 50%; } .grid-40 { width: 40%; } @media (max-width:1365px) { .grid-xl-100 { width:100%; } .grid-xl-96 { width: 96%; } .grid-xl-90 { width: 90%; } .grid-xl-80 { width: 80%; } .grid-xl-70 { width: 70%; } .grid-xl-60 { width: 60%; } .grid-xl-50 { width: 50%; } .grid-xl-40 { width: 40%; } } @media (max-width:1279px) { .grid-l-100 { width:100%; } .grid-l-96 { width: 96%; } .grid-l-90 { width: 90%; } .grid-l-80 { width: 80%; } .grid-l-70 { width: 70%; } .grid-l-60 { width: 60%; } .grid-l-50 { width: 50%; } .grid-l-40 { width: 40%; } } @media (max-width:1023px) { .grid-m-100 { width:100%; } .grid-m-96 { width: 96%; } .grid-m-90 { width: 90%; } .grid-m-80 { width: 80%; } .grid-m-70 { width: 70%; } .grid-m-60 { width: 60%; } .grid-m-50 { width: 50%; } .grid-m-40 { width: 40%; } } @media (max-width:767px) { .grid-s-100 { width:100%; } .grid-s-96 { width: 96%; } .grid-s-90 { width: 90%; } .grid-s-80 { width: 80%; } .grid-s-70 { width: 70%; } .grid-s-60 { width: 60%; } .grid-s-50 { width: 50%; } .grid-s-40 { width: 40%; } } @media (max-width:479px) { .grid-xs-100 { width:100%; } .grid-xs-96 { width: 96%; } .grid-xs-90 { width: 90%; } .grid-xs-80 { width: 80%; } .grid-xs-70 { width: 70%; } .grid-xs-60 { width: 60%; } .grid-xs-50 { width: 50%; } .grid-xs-40 { width: 40%; } } .col { /* colgap ist eigentlich einheitlich, aber mit .mr-3gap ... kommen neue Margins für cols, die dann hier in der Breite kompensiert werden müssen. Deshalb Differenzierung in colgap-r und colgap-l. */ --colgap-r: calc( 1 * var(--colgap) ); --colgap-l: calc( 1 * var(--colgap) ); /*width:calc( var(--colwidth) - var(--colgap-l) - var(--colgap-r) );*/ /* Aufrunden von Einzelspalten ergibt teils mehr Inhalt als Platz ist, dann falsches Umbrechen der Row. */ width:round(down, calc( var(--colwidth) - var(--colgap-l) - var(--colgap-r) ), 0.5px); /* mit round(down, wert, intervall) wird besser gerechnet. kein ungewolltes umbrechen mehr. ob 0.5 gut ist, ist nicht ganz klar. */ margin:0; margin-left: var(--colgap-l); margin-right: var(--colgap-r); margin-top: var(--colgap); margin-bottom: var(--colgap); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; position:relative; } a.col { overflow:hidden; } /* TODO: das sind sehr simple Animationen für "boxen" ... das ist zu allgemein gehalten. brauchen wir eine .box-Klasse?*/ /* a.col > img { transition:var(--base-transition); } a.col:hover > img { transform:scale(1.05) !important; } */ .col-auto { width: fit-content; } .col-noauto { width: inherit; } .col-grow { flex-grow:1; } .col-shrink { flex-shrink:1; } .col-noshrink { flex-shrink:0; } .col-5 { --colwidth: 5% ; } .col-10 { --colwidth:10%; } .col-12 { --colwidth:12.5%; } .col-15 { --colwidth:15%; } .col-16 { --colwidth:16.66%; } .col-20 { --colwidth:20%; } .col-25 { --colwidth:25%; } .col-30 { --colwidth:30%; } .col-33 { --colwidth:33.33%; } .col-35 { --colwidth:35%; } .col-40 { --colwidth:40%; } .col-45 { --colwidth:45%; } .col-50 { --colwidth:50%; } .col-60 { --colwidth:60%; } .col-62 { --colwidth:62.5%; } .col-66 { --colwidth:66.66%; } .col-70 { --colwidth:70%; } .col-75 { --colwidth:75%; } .col-80 { --colwidth:80%; } .col-83 { --colwidth:83.33%; } .col-85 { --colwidth:85%; } .col-87 { --colwidth:87.5%; } .col-90 { --colwidth:90%; } .col-100 { --colwidth:100%; } .grid .col { --colwidth:100%; } /* wenn keine col-xx deklariert: default für grid-cols: immer volle Breite. ACHTUNG: so kann es keine .col-50 in .grid mehr geben, spezifizität!. bei rows auto. */ /*für grid*/ .col-span-1 { grid-column: span 1; } .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } .col-span-4 { grid-column: span 4; } .col-span-5 { grid-column: span 5; } .col-span-6 { grid-column: span 6; } .col-span-7 { grid-column: span 7; } .col-span-8 { grid-column: span 8; } .col-span-9 { grid-column: span 9; } .col-span-10 { grid-column: span 10; } .col-span-11 { grid-column: span 11; } .col-span-12 { grid-column: span 12; } .row-span-1 { grid-row: span 1; } .row-span-2 { grid-row: span 2; } .row-span-3 { grid-row: span 3; } .row-span-4 { grid-row: span 4; } .row-span-5 { grid-row: span 5; } .row-span-6 { grid-row: span 6; } .row-span-7 { grid-row: span 7; } .row-span-8 { grid-row: span 8; } .row-span-9 { grid-row: span 9; } .row-span-10 { grid-row: span 10; } .row-span-11 { grid-row: span 11; } .row-span-12 { grid-row: span 12; } @media (max-width:1365px) { .col-xl-auto { width: fit-content; } .col-xl-noauto { width: inherit; } .col-xl-grow { flex-grow:1; } .col-xl-shrink { flex-shrink:1; } .col-xl-noshrink { flex-shrink:0; } .col-xl-5 { --colwidth: 5% ; } .col-xl-10 { --colwidth:10%; } .col-xl-12 { --colwidth:12.5%; } .col-xl-15 { --colwidth:15%; } .col-xl-16 { --colwidth:16.66%; } .col-xl-20 { --colwidth:20%; } .col-xl-25 { --colwidth:25%; } .col-xl-30 { --colwidth:30%; } .col-xl-33 { --colwidth:33.33%; } .col-xl-35 { --colwidth:35%; } .col-xl-40 { --colwidth:40%; } .col-xl-45 { --colwidth:45%; } .col-xl-50 { --colwidth:50%; } .col-xl-60 { --colwidth:60%; } .col-xl-62 { --colwidth:62.5%; } .col-xl-66 { --colwidth:66.66%; } .col-xl-70 { --colwidth:70%; } .col-xl-75 { --colwidth:75%; } .col-xl-80 { --colwidth:80%; } .col-xl-83 { --colwidth:83.33%; } .col-xl-85 { --colwidth:85%; } .col-xl-87 { --colwidth:87.5%; } .col-xl-90 { --colwidth:90%; } .col-xl-100 { --colwidth:100%; } /*für grid*/ .col-span-xl-1 { grid-column: span 1; } .col-span-xl-2 { grid-column: span 2; } .col-span-xl-3 { grid-column: span 3; } .col-span-xl-4 { grid-column: span 4; } .col-span-xl-5 { grid-column: span 5; } .col-span-xl-6 { grid-column: span 6; } .col-span-xl-7 { grid-column: span 7; } .col-span-xl-8 { grid-column: span 8; } .col-span-xl-9 { grid-column: span 9; } .col-span-xl-10 { grid-column: span 10; } .col-span-xl-11 { grid-column: span 11; } .col-span-xl-12 { grid-column: span 12; } .row-span-xl-1 { grid-row: span 1; } .row-span-xl-2 { grid-row: span 2; } .row-span-xl-3 { grid-row: span 3; } .row-span-xl-4 { grid-row: span 4; } .row-span-xl-5 { grid-row: span 5; } .row-span-xl-6 { grid-row: span 6; } .row-span-xl-7 { grid-row: span 7; } .row-span-xl-8 { grid-row: span 8; } .row-span-xl-9 { grid-row: span 9; } .row-span-xl-10 { grid-row: span 10; } .row-span-xl-11 { grid-row: span 11; } .row-span-xl-12 { grid-row: span 12; } } @media (max-width:1279px) { .col-l-auto { width: fit-content; } .col-l-noauto { width: inherit; } .col-l-grow { flex-grow:1; } .col-l-shrink { flex-shrink:1; } .col-l-noshrink { flex-shrink:0; } .col-l-5 { --colwidth: 5% ; } .col-l-10 { --colwidth:10%; } .col-l-12 { --colwidth:12.5%; } .col-l-15 { --colwidth:15%; } .col-l-16 { --colwidth:16.66%; } .col-l-20 { --colwidth:20%; } .col-l-25 { --colwidth:25%; } .col-l-30 { --colwidth:30%; } .col-l-33 { --colwidth:33.33%; } .col-l-35 { --colwidth:35%; } .col-l-40 { --colwidth:40%; } .col-l-45 { --colwidth:45%; } .col-l-50 { --colwidth:50%; } .col-l-60 { --colwidth:60%; } .col-l-62 { --colwidth:62.5%; } .col-l-66 { --colwidth:66.66%; } .col-l-70 { --colwidth:70%; } .col-l-75 { --colwidth:75%; } .col-l-80 { --colwidth:80%; } .col-l-83 { --colwidth:83.33%; } .col-l-85 { --colwidth:85%; } .col-l-87 { --colwidth:87.5%; } .col-l-90 { --colwidth:90%; } .col-l-100 { --colwidth:100%; } /*für grid*/ .col-span-l-1 { grid-column: span 1; } .col-span-l-2 { grid-column: span 2; } .col-span-l-3 { grid-column: span 3; } .col-span-l-4 { grid-column: span 4; } .col-span-l-5 { grid-column: span 5; } .col-span-l-6 { grid-column: span 6; } .col-span-l-7 { grid-column: span 7; } .col-span-l-8 { grid-column: span 8; } .col-span-l-9 { grid-column: span 9; } .col-span-l-10 { grid-column: span 10; } .col-span-l-11 { grid-column: span 11; } .col-span-l-12 { grid-column: span 12; } .row-span-l-1 { grid-row: span 1; } .row-span-l-2 { grid-row: span 2; } .row-span-l-3 { grid-row: span 3; } .row-span-l-4 { grid-row: span 4; } .row-span-l-5 { grid-row: span 5; } .row-span-l-6 { grid-row: span 6; } .row-span-l-7 { grid-row: span 7; } .row-span-l-8 { grid-row: span 8; } .row-span-l-9 { grid-row: span 9; } .row-span-l-10 { grid-row: span 10; } .row-span-l-11 { grid-row: span 11; } .row-span-l-12 { grid-row: span 12; } } @media (max-width:1023px) { .col-m-auto { width: fit-content; } .col-m-noauto { width: inherit; } .col-m-grow { flex-grow:1; } .col-m-shrink { flex-shrink:1; } .col-m-noshrink { flex-shrink:0; } .col-m-5 { --colwidth: 5% ; } .col-m-10 { --colwidth:10%; } .col-m-12 { --colwidth:12.5%; } .col-m-15 { --colwidth:15%; } .col-m-16 { --colwidth:16.66%; } .col-m-20 { --colwidth:20%; } .col-m-25 { --colwidth:25%; } .col-m-30 { --colwidth:30%; } .col-m-33 { --colwidth:33.33%; } .col-m-35 { --colwidth:35%; } .col-m-40 { --colwidth:40%; } .col-m-45 { --colwidth:45%; } .col-m-50 { --colwidth:50%; } .col-m-60 { --colwidth:60%; } .col-m-62 { --colwidth:62.5%; } .col-m-66 { --colwidth:66.66%; } .col-m-70 { --colwidth:70%; } .col-m-75 { --colwidth:75%; } .col-m-80 { --colwidth:80%; } .col-m-83 { --colwidth:83.33%; } .col-m-85 { --colwidth:85%; } .col-m-87 { --colwidth:87.5%; } .col-m-90 { --colwidth:90%; } .col-m-100 { --colwidth:100%; } /*für grid*/ .col-span-m-1 { grid-column: span 1; } .col-span-m-2 { grid-column: span 2; } .col-span-m-3 { grid-column: span 3; } .col-span-m-4 { grid-column: span 4; } .col-span-m-5 { grid-column: span 5; } .col-span-m-6 { grid-column: span 6; } .col-span-m-7 { grid-column: span 7; } .col-span-m-8 { grid-column: span 8; } .col-span-m-9 { grid-column: span 9; } .col-span-m-10 { grid-column: span 10; } .col-span-m-11 { grid-column: span 11; } .col-span-m-12 { grid-column: span 12; } .row-span-m-1 { grid-row: span 1; } .row-span-m-2 { grid-row: span 2; } .row-span-m-3 { grid-row: span 3; } .row-span-m-4 { grid-row: span 4; } .row-span-m-5 { grid-row: span 5; } .row-span-m-6 { grid-row: span 6; } .row-span-m-7 { grid-row: span 7; } .row-span-m-8 { grid-row: span 8; } .row-span-m-9 { grid-row: span 9; } .row-span-m-10 { grid-row: span 10; } .row-span-m-11 { grid-row: span 11; } .row-span-m-12 { grid-row: span 12; } } @media (max-width:767px) { .col-s-auto { width: fit-content; } .col-s-noauto { width: inherit; } .col-s-grow { flex-grow:1; } .col-s-shrink { flex-shrink:1; } .col-s-noshrink { flex-shrink:0; } .col-s-5 { --colwidth: 5% ; } .col-s-10 { --colwidth:10%; } .col-s-12 { --colwidth:12.5%; } .col-s-15 { --colwidth:15%; } .col-s-16 { --colwidth:16.66%; } .col-s-20 { --colwidth:20%; } .col-s-25 { --colwidth:25%; } .col-s-30 { --colwidth:30%; } .col-s-33 { --colwidth:33.33%; } .col-s-35 { --colwidth:35%; } .col-s-40 { --colwidth:40%; } .col-s-45 { --colwidth:45%; } .col-s-50 { --colwidth:50%; } .col-s-60 { --colwidth:60%; } .col-s-62 { --colwidth:62.5%; } .col-s-66 { --colwidth:66.66%; } .col-s-70 { --colwidth:70%; } .col-s-75 { --colwidth:75%; } .col-s-80 { --colwidth:80%; } .col-s-83 { --colwidth:83.33%; } .col-s-85 { --colwidth:85%; } .col-s-87 { --colwidth:87.5%; } .col-s-90 { --colwidth:90%; } .col-s-100 { --colwidth:100%; } /*für grid*/ .col-span-s-1 { grid-column: span 1; } .col-span-s-2 { grid-column: span 2; } .col-span-s-3 { grid-column: span 3; } .col-span-s-4 { grid-column: span 4; } .col-span-s-5 { grid-column: span 5; } .col-span-s-6 { grid-column: span 6; } .col-span-s-7 { grid-column: span 7; } .col-span-s-8 { grid-column: span 8; } .col-span-s-9 { grid-column: span 9; } .col-span-s-10 { grid-column: span 10; } .col-span-s-11 { grid-column: span 11; } .col-span-s-12 { grid-column: span 12; } .row-span-s-1 { grid-row: span 1; } .row-span-s-2 { grid-row: span 2; } .row-span-s-3 { grid-row: span 3; } .row-span-s-4 { grid-row: span 4; } .row-span-s-5 { grid-row: span 5; } .row-span-s-6 { grid-row: span 6; } .row-span-s-7 { grid-row: span 7; } .row-span-s-8 { grid-row: span 8; } .row-span-s-9 { grid-row: span 9; } .row-span-s-10 { grid-row: span 10; } .row-span-s-11 { grid-row: span 11; } .row-span-s-12 { grid-row: span 12; } } @media (max-width:479px) { .col-xs-auto { width: fit-content; } .col-xs-noauto { width: inherit; } .col-xs-grow { flex-grow:1; } .col-xs-shrink { flex-shrink:1; } .col-xs-noshrink { flex-shrink:0; } .col-xs-5 { --colwidth: 5% ; } .col-xs-10 { --colwidth:10%; } .col-xs-12 { --colwidth:12.5%; } .col-xs-15 { --colwidth:15%; } .col-xs-16 { --colwidth:16.66%; } .col-xs-20 { --colwidth:20%; } .col-xs-25 { --colwidth:25%; } .col-xs-30 { --colwidth:30%; } .col-xs-33 { --colwidth:33.33%; } .col-xs-35 { --colwidth:35%; } .col-xs-40 { --colwidth:40%; } .col-xs-45 { --colwidth:45%; } .col-xs-50 { --colwidth:50%; } .col-xs-60 { --colwidth:60%; } .col-xs-62 { --colwidth:62.5%; } .col-xs-66 { --colwidth:66.66%; } .col-xs-70 { --colwidth:70%; } .col-xs-75 { --colwidth:75%; } .col-xs-80 { --colwidth:80%; } .col-xs-83 { --colwidth:83.33%; } .col-xs-85 { --colwidth:85%; } .col-xs-87 { --colwidth:87.5%; } .col-xs-90 { --colwidth:90%; } .col-xs-100 { --colwidth:100%; } /*für grid*/ .col-span-xs-1 { grid-column: span 1; } .col-span-xs-2 { grid-column: span 2; } .col-span-xs-3 { grid-column: span 3; } .col-span-xs-4 { grid-column: span 4; } .col-span-xs-5 { grid-column: span 5; } .col-span-xs-6 { grid-column: span 6; } .col-span-xs-7 { grid-column: span 7; } .col-span-xs-8 { grid-column: span 8; } .col-span-xs-9 { grid-column: span 9; } .col-span-xs-10 { grid-column: span 10; } .col-span-xs-11 { grid-column: span 11; } .col-span-xs-12 { grid-column: span 12; } .row-span-xs-1 { grid-row: span 1; } .row-span-xs-2 { grid-row: span 2; } .row-span-xs-3 { grid-row: span 3; } .row-span-xs-4 { grid-row: span 4; } .row-span-xs-5 { grid-row: span 5; } .row-span-xs-6 { grid-row: span 6; } .row-span-xs-7 { grid-row: span 7; } .row-span-xs-8 { grid-row: span 8; } .row-span-xs-9 { grid-row: span 9; } .row-span-xs-10 { grid-row: span 10; } .row-span-xs-11 { grid-row: span 11; } .row-span-xs-12 { grid-row: span 12; } } .col.V-top { justify-content:flex-start; } /* die inhalte von cols (sollten texte etc. sein) innerhalb der col ausrichten */ .col.V-center { justify-content:center; } .col.V-bottom { justify-content:flex-end; } .col.V-between { justify-content:space-between; } .col.V-spacearound { justify-content:space-around; } .col.V-spaceevenly { justify-content:space-evenly; } .col.H-left { align-items:flex-start; } .col.H-center { align-items:center; } .col.H-right { align-items:flex-end; } .col.H-stretch { align-items:stretch; } .col.H-between { align-items:space-between; } @media (max-width:1365px) { .col.V-xl-top { justify-content:flex-start; } .col.V-xl-center { justify-content:center; } .col.V-xl-bottom { justify-content:flex-end; } .col.V-xl-between { justify-content:space-between; } .col.V-xl-spacearound { justify-content:space-around; } .col.V-xl-spaceevenly { justify-content:space-evenly; } .col.H-xl-left { align-items:flex-start; } .col.H-xl-center { align-items:center; } .col.H-xl-right { align-items:flex-end; } .col.H-xl-stretch { align-items:stretch; } .col.H-xl-between { align-items:space-between; } } @media (max-width:1279px) { .col.V-l-top { justify-content:flex-start; } .col.V-l-center { justify-content:center; } .col.V-l-bottom { justify-content:flex-end; } .col.V-l-between { justify-content:space-between; } .col.V-l-spacearound { justify-content:space-around; } .col.V-l-spaceevenly { justify-content:space-evenly; } .col.H-l-left { align-items:flex-start; } .col.H-l-center { align-items:center; } .col.H-l-right { align-items:flex-end; } .col.H-l-stretch { align-items:stretch; } .col.H-l-between { align-items:space-between; } } @media (max-width:1023px) { .col.V-m-top { justify-content:flex-start; } .col.V-m-center { justify-content:center; } .col.V-m-bottom { justify-content:flex-end; } .col.V-m-between { justify-content:space-between; } .col.V-m-spacearound { justify-content:space-around; } .col.V-m-spaceevenly { justify-content:space-evenly; } .col.H-m-left { align-items:flex-start; } .col.H-m-center { align-items:center; } .col.H-m-right { align-items:flex-end; } .col.H-m-stretch { align-items:stretch; } .col.H-m-between { align-items:space-between; } } @media (max-width:767px) { .col.V-s-top { justify-content:flex-start; } .col.V-s-center { justify-content:center; } .col.V-s-bottom { justify-content:flex-end; } .col.V-s-between { justify-content:space-between; } .col.V-s-spacearound { justify-content:space-around; } .col.V-s-spaceevenly { justify-content:space-evenly; } .col.H-s-left { align-items:flex-start; } .col.H-s-center { align-items:center; } .col.H-s-right { align-items:flex-end; } .col.H-s-stretch { align-items:stretch; } .col.H-s-between { align-items:space-between; } } @media (max-width:479px) { .col.V-xs-top { justify-content:flex-start; } .col.V-xs-center { justify-content:center; } .col.V-xs-bottom { justify-content:flex-end; } .col.V-xs-between { justify-content:space-between; } .col.V-xs-spacearound { justify-content:space-around; } .col.V-xs-spaceevenly { justify-content:space-evenly; } .col.H-xs-left { align-items:flex-start; } .col.H-xs-center { align-items:center; } .col.H-xs-right { align-items:flex-end; } .col.H-xs-stretch { align-items:stretch; } .col.H-xs-between { align-items:space-between; } } .pushl--20 { margin-left:-20%; } .pushl--15 { margin-left:-15%; } .pushl--10 { margin-left:-10%; } .pushl--5 { margin-left:-5%; } .pushl-5 { margin-left:5%; } .pushl-10 { margin-left:10%; } .pushl-15 { margin-left:15%; } .pushl-20 { margin-left:20%; } @media (max-width:1023px) { .flex-m-column { flex-direction:column; } .flex-m-reverse { flex-direction:column-reverse; } /*warum das column-reverse sein muss, verstehen wir nicht. eigentlich haben wir rows die wrappen. */ .order-m-1 { order:1; } .order-m-2 { order:2; } .order-m-3 { order:3; } .order-m-4 { order:4; } .order-m-5 { order:5; } .order-m-6 { order:6; } } @media (max-width:767px) { .flex-s-column { flex-direction:column; } .flex-s-reverse { flex-direction:column-reverse; } /*warum das column-reverse sein muss, verstehen wir nicht. eigentlich haben wir rows die wrappen. */ .order-s-1 { order:1; } .order-s-2 { order:2; } .order-s-3 { order:3; } .order-s-4 { order:4; } .order-s-5 { order:5; } .order-s-6 { order:6; } } .doubleimg { display:grid; grid-template: 1fr / 1fr; overflow:visible; } .doubleimg > * { grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; height: auto; display:grid; place-items:end end; /* quickfix für den einen anwendungsfall ... wenn öfter verwendet, muss das flexibler sein */ } /*bilder in boxen platzieren*/ img, picture, video, svg { width:100%; height:auto; display:block; } .cover { /* bilder/videos in box einpassen ohne ränder. nützlih bei ar-boxen oder fixen containermaßen */ width:100%; height:100%; object-fit: cover; overflow: hidden; /* nötig für images die in grid-zellen gecovert werden sollen? komisches verhalten */ --obj-pos-h:50%; --obj-pos-v:50%; object-position:var(--obj-pos-h) var(--obj-pos-v); } .parallax .cover { --obj-pos-h:0%; --obj-pos-v:0%; } .cover-h-0 { --obj-pos-h:0%; } .cover-h-5 { --obj-pos-h:5%; } .cover-h-10 { --obj-pos-h:10%; } .cover-h-15 { --obj-pos-h:15%; } .cover-h-20 { --obj-pos-h:20%; } .cover-h-25 { --obj-pos-h:25%; } .cover-h-30 { --obj-pos-h:30%; } .cover-h-35 { --obj-pos-h:35%; } .cover-h-40 { --obj-pos-h:40%; } .cover-h-45 { --obj-pos-h:45%; } .cover-h-50 { --obj-pos-h:50%; } .cover-h-55 { --obj-pos-h:55%; } .cover-h-60 { --obj-pos-h:60%; } .cover-h-65 { --obj-pos-h:65%; } .cover-h-70 { --obj-pos-h:70%; } .cover-h-75 { --obj-pos-h:75%; } .cover-h-80 { --obj-pos-h:80%; } .cover-h-85 { --obj-pos-h:85%; } .cover-h-90 { --obj-pos-h:90%; } .cover-h-95 { --obj-pos-h:95%; } .cover-h-100 { --obj-pos-h:100%;} .cover-v-0 { --obj-pos-v:0%; } .cover-v-5 { --obj-pos-v:5%; } .cover-v-10 { --obj-pos-v:10%; } .cover-v-15 { --obj-pos-v:15%; } .cover-v-20 { --obj-pos-v:20%; } .cover-v-25 { --obj-pos-v:25%; } .cover-v-30 { --obj-pos-v:30%; } .cover-v-35 { --obj-pos-v:35%; } .cover-v-40 { --obj-pos-v:40%; } .cover-v-45 { --obj-pos-v:45%; } .cover-v-50 { --obj-pos-v:50%; } .cover-v-55 { --obj-pos-v:55%; } .cover-v-60 { --obj-pos-v:60%; } .cover-v-65 { --obj-pos-v:65%; } .cover-v-70 { --obj-pos-v:70%; } .cover-v-75 { --obj-pos-v:75%; } .cover-v-80 { --obj-pos-v:80%; } .cover-v-85 { --obj-pos-v:85%; } .cover-v-90 { --obj-pos-v:90%; } .cover-v-95 { --obj-pos-v:95%; } .cover-v-100 { --obj-pos-v:100%;} .contain { /* bilder in box einpassen, mit ränder (ganzes Bild immer sichtbar, aber so groß wie möglich*/ width:100%; height:100%; object-fit:contain; object-position:50% 50%; } /** noch richtig einsortieren - ist neu und erst gemeint, aber weiß nicht wo hin damit genau **/ figure { margin:0; display:grid; grid-template-rows:1fr auto 1rem; grid-template-columns:1rem 1fr 2rem; } figure img, figure video { grid-row: 1 / span 2; grid-column: 2 / -1; } figure figcaption { grid-row: 2 / span 2; grid-column: 1 / -2; width:fit-content; padding: 0.5rem 1rem; display:grid; place-items:center; background-color:var(--color-weiss); color:var(--color-schwarz); } /* layout overrides */ /** PADDING **/ /** PADDING **/ .p-0 { padding: 0rem; } .p-025 { padding: 0.25rem; } .p-05 { padding: 0.5rem; } .p-1 { padding: 1rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; } .p-4 { padding: 4rem; } .p-5 { padding: 5rem; } .p-6 { padding: 6rem; } .p-7 { padding: 7rem; } .p-8 { padding: 8rem; } .p-9 { padding: 9rem; } .p-10 { padding: 10rem; } .p-025p { padding: 2.5%; } .p-5p { padding: 5%; } .p-10p { padding: 10%; } .p-20p { padding: 20%; } .p-30p { padding: 30%; } .p-40p { padding: 40%; } .p-50p { padding: 50%; } .p-60p { padding: 60%; } .p-70p { padding: 70%; } .p-80p { padding: 80%; } .p-90p { padding: 90%; } .p-100p { padding: 100%; } .p-1vw { padding: 1vw; } .p-2vw { padding: 2vw; } .p-3vw { padding: 3vw; } .p-4vw { padding: 4vw; } .p-5vw { padding: 5vw; } .p-6vw { padding: 6vw; } .p-7vw { padding: 7vw; } .p-8vw { padding: 8vw; } .p-9vw { padding: 9vw; } .p-10vw { padding: 10vw; } .p-20vw { padding: 20vw; } .p-30vw { padding: 30vw; } .p-40vw { padding: 40vw; } .p-50vw { padding: 50vw; } .p-60vw { padding: 60vw; } .p-70vw { padding: 70vw; } .p-80vw { padding: 80vw; } .p-90vw { padding: 90vw; } .p-05gap { padding: calc(0.5 * var(--colgap) ); } .p-1gap { padding: calc(1 * var(--colgap) ); } .p-2gap { padding: calc(2 * var(--colgap) ); } .p-3gap { padding: calc(3 * var(--colgap) ); } .p-4gap { padding: calc(4 * var(--colgap) ); } .p-5gap { padding: calc(5 * var(--colgap) ); } .pt-0 { padding-top: 0rem; } .pt-05 { padding-top: 0.5rem; } .pt-1 { padding-top: 1rem; } .pt-2 { padding-top: 2rem; } .pt-3 { padding-top: 3rem; } .pt-4 { padding-top: 4rem; } .pt-5 { padding-top: 5rem; } .pt-6 { padding-top: 6rem; } .pt-7 { padding-top: 7rem; } .pt-8 { padding-top: 8rem; } .pt-9 { padding-top: 9rem; } .pt-10 { padding-top: 10rem; } .pt-025p { padding-top: 2.5%; } .pt-5p { padding-top: 5%; } .pt-10p { padding-top: 10%; } .pt-20p { padding-top: 20%; } .pt-30p { padding-top: 30%; } .pt-40p { padding-top: 40%; } .pt-50p { padding-top: 50%; } .pt-60p { padding-top: 60%; } .pt-70p { padding-top: 70%; } .pt-80p { padding-top: 80%; } .pt-90p { padding-top: 90%; } .pt-100p { padding-top: 100%; } .pt-1vw { padding-top: 1vw; } .pt-2vw { padding-top: 2vw; } .pt-3vw { padding-top: 3vw; } .pt-4vw { padding-top: 4vw; } .pt-5vw { padding-top: 5vw; } .pt-6vw { padding-top: 6vw; } .pt-7vw { padding-top: 7vw; } .pt-8vw { padding-top: 8vw; } .pt-9vw { padding-top: 9vw; } .pt-10vw { padding-top: 10vw; } .pt-20vw { padding-top: 20vw; } .pt-30vw { padding-top: 30vw; } .pt-40vw { padding-top: 40vw; } .pt-50vw { padding-top: 50vw; } .pt-60vw { padding-top: 60vw; } .pt-70vw { padding-top: 70vw; } .pt-80vw { padding-top: 80vw; } .pt-90vw { padding-top: 90vw; } .pt-05gap { padding-top: calc(0.5 * var(--colgap) ); } .pt-1gap { padding-top: calc(1 * var(--colgap) ); } .pt-2gap { padding-top: calc(2 * var(--colgap) ); } .pt-3gap { padding-top: calc(3 * var(--colgap) ); } .pt-4gap { padding-top: calc(4 * var(--colgap) ); } .pt-5gap { padding-top: calc(5 * var(--colgap) ); } .pb-0 { padding-bottom: 0rem; } .pb-05 { padding-bottom: 0.5rem; } .pb-1 { padding-bottom: 1rem; } .pb-2 { padding-bottom: 2rem; } .pb-3 { padding-bottom: 3rem; } .pb-4 { padding-bottom: 4rem; } .pb-5 { padding-bottom: 5rem; } .pb-6 { padding-bottom: 6rem; } .pb-7 { padding-bottom: 7rem; } .pb-8 { padding-bottom: 8rem; } .pb-9 { padding-bottom: 9rem; } .pb-10 { padding-bottom: 10rem; } .pb-025p { padding-bottom: 2.5%; } .pb-5p { padding-bottom: 5%; } .pb-10p { padding-bottom: 10%; } .pb-20p { padding-bottom: 20%; } .pb-30p { padding-bottom: 30%; } .pb-40p { padding-bottom: 40%; } .pb-50p { padding-bottom: 50%; } .pb-60p { padding-bottom: 60%; } .pb-70p { padding-bottom: 70%; } .pb-80p { padding-bottom: 80%; } .pb-90p { padding-bottom: 90%; } .pb-100p { padding-bottom: 100%; } .pb-1vw { padding-bottom: 1vw; } .pb-2vw { padding-bottom: 2vw; } .pb-3vw { padding-bottom: 3vw; } .pb-4vw { padding-bottom: 4vw; } .pb-5vw { padding-bottom: 5vw; } .pb-6vw { padding-bottom: 6vw; } .pb-7vw { padding-bottom: 7vw; } .pb-8vw { padding-bottom: 8vw; } .pb-9vw { padding-bottom: 9vw; } .pb-10vw { padding-bottom: 10vw; } .pb-20vw { padding-bottom: 20vw; } .pb-30vw { padding-bottom: 30vw; } .pb-40vw { padding-bottom: 40vw; } .pb-50vw { padding-bottom: 50vw; } .pb-60vw { padding-bottom: 60vw; } .pb-70vw { padding-bottom: 70vw; } .pb-80vw { padding-bottom: 80vw; } .pb-90vw { padding-bottom: 90vw; } .pb-05gap { padding-bottom: calc(0.5 * var(--colgap) ); } .pb-1gap { padding-bottom: calc(1 * var(--colgap) ); } .pb-2gap { padding-bottom: calc(2 * var(--colgap) ); } .pb-3gap { padding-bottom: calc(3 * var(--colgap) ); } .pb-4gap { padding-bottom: calc(4 * var(--colgap) ); } .pb-5gap { padding-bottom: calc(5 * var(--colgap) ); } .pl-0 { padding-left: 0rem; } .pl-05 { padding-left: 0.5rem; } .pl-1 { padding-left: 1rem; } .pl-2 { padding-left: 2rem; } .pl-3 { padding-left: 3rem; } .pl-4 { padding-left: 4rem; } .pl-5 { padding-left: 5rem; } .pl-6 { padding-left: 6rem; } .pl-7 { padding-left: 7rem; } .pl-8 { padding-left: 8rem; } .pl-9 { padding-left: 9rem; } .pl-10 { padding-left: 10rem; } .pl-025p { padding-left: 2.5%; } .pl-5p { padding-left: 5%; } .pl-10p { padding-left: 10%; } .pl-20p { padding-left: 20%; } .pl-30p { padding-left: 30%; } .pl-40p { padding-left: 40%; } .pl-50p { padding-left: 50%; } .pl-60p { padding-left: 60%; } .pl-70p { padding-left: 70%; } .pl-80p { padding-left: 80%; } .pl-90p { padding-left: 90%; } .pl-100p { padding-left: 100%; } .pl-1vw { padding-left: 1vw; } .pl-2vw { padding-left: 2vw; } .pl-3vw { padding-left: 3vw; } .pl-4vw { padding-left: 4vw; } .pl-5vw { padding-left: 5vw; } .pl-6vw { padding-left: 6vw; } .pl-7vw { padding-left: 7vw; } .pl-8vw { padding-left: 8vw; } .pl-9vw { padding-left: 9vw; } .pl-10vw { padding-left: 10vw; } .pl-20vw { padding-left: 20vw; } .pl-30vw { padding-left: 30vw; } .pl-40vw { padding-left: 40vw; } .pl-50vw { padding-left: 50vw; } .pl-60vw { padding-left: 60vw; } .pl-70vw { padding-left: 70vw; } .pl-80vw { padding-left: 80vw; } .pl-90vw { padding-left: 90vw; } .pl-05gap { padding-left: calc(0.5 * var(--colgap) ); } .pl-1gap { padding-left: calc(1 * var(--colgap) ); } .pl-2gap { padding-left: calc(2 * var(--colgap) ); } .pl-3gap { padding-left: calc(3 * var(--colgap) ); } .pl-4gap { padding-left: calc(4 * var(--colgap) ); } .pl-5gap { padding-left: calc(5 * var(--colgap) ); } .pr-0 { padding-right: 0rem; } .pr-05 { padding-right: 0.5rem; } .pr-1 { padding-right: 1rem; } .pr-2 { padding-right: 2rem; } .pr-3 { padding-right: 3rem; } .pr-4 { padding-right: 4rem; } .pr-5 { padding-right: 5rem; } .pr-6 { padding-right: 6rem; } .pr-7 { padding-right: 7rem; } .pr-8 { padding-right: 8rem; } .pr-9 { padding-right: 9rem; } .pr-10 { padding-right: 10rem; } .pr-025p { padding-right: 2.5%; } .pr-5p { padding-right: 5%; } .pr-10p { padding-right: 10%; } .pr-20p { padding-right: 20%; } .pr-30p { padding-right: 30%; } .pr-40p { padding-right: 40%; } .pr-50p { padding-right: 50%; } .pr-60p { padding-right: 60%; } .pr-70p { padding-right: 70%; } .pr-80p { padding-right: 80%; } .pr-90p { padding-right: 90%; } .pr-100p { padding-right: 100%; } .pr-1vw { padding-right: 1vw; } .pr-2vw { padding-right: 2vw; } .pr-3vw { padding-right: 3vw; } .pr-4vw { padding-right: 4vw; } .pr-5vw { padding-right: 5vw; } .pr-6vw { padding-right: 6vw; } .pr-7vw { padding-right: 7vw; } .pr-8vw { padding-right: 8vw; } .pr-9vw { padding-right: 9vw; } .pr-10vw { padding-right: 10vw; } .pr-20vw { padding-right: 20vw; } .pr-30vw { padding-right: 30vw; } .pr-40vw { padding-right: 40vw; } .pr-50vw { padding-right: 50vw; } .pr-60vw { padding-right: 60vw; } .pr-70vw { padding-right: 70vw; } .pr-80vw { padding-right: 80vw; } .pr-90vw { padding-right: 90vw; } .pr-05gap { padding-right: calc(0.5 * var(--colgap) ); } .pr-1gap { padding-right: calc(1 * var(--colgap) ); } .pr-2gap { padding-right: calc(2 * var(--colgap) ); } .pr-3gap { padding-right: calc(3 * var(--colgap) ); } .pr-4gap { padding-right: calc(4 * var(--colgap) ); } .pr-5gap { padding-right: calc(5 * var(--colgap) ); } /* Padding p-xl- -l- -s- -xs- ausgelassen ... vermutlich brauchen wir nur -m-, sonst ergänzen */ @media (max-width:1023px) { .p-m-0 { padding: 0rem; } .p-m-05 { padding: 0.5rem; } .p-m-1 { padding: 1rem; } .p-m-2 { padding: 2rem; } .p-m-3 { padding: 3rem; } .p-m-4 { padding: 4rem; } .p-m-5 { padding: 5rem; } .p-m-6 { padding: 6rem; } .p-m-7 { padding: 7rem; } .p-m-8 { padding: 8rem; } .p-m-9 { padding: 9rem; } .p-m-10 { padding: 10rem; } .p-m-025p { padding: 2.5%; } .p-m-5p { padding: 5%; } .p-m-10p { padding: 10%; } .p-m-20p { padding: 20%; } .p-m-30p { padding: 30%; } .p-m-40p { padding: 40%; } .p-m-50p { padding: 50%; } .p-m-60p { padding: 60%; } .p-m-70p { padding: 70%; } .p-m-80p { padding: 80%; } .p-m-90p { padding: 90%; } .p-m-100p { padding: 100%; } .p-m-1vw { padding: 1vw; } .p-m-2vw { padding: 2vw; } .p-m-3vw { padding: 3vw; } .p-m-4vw { padding: 4vw; } .p-m-5vw { padding: 5vw; } .p-m-6vw { padding: 6vw; } .p-m-7vw { padding: 7vw; } .p-m-8vw { padding: 8vw; } .p-m-9vw { padding: 9vw; } .p-m-10vw { padding: 10vw; } .p-m-20vw { padding: 20vw; } .p-m-30vw { padding: 30vw; } .p-m-40vw { padding: 40vw; } .p-m-50vw { padding: 50vw; } .p-m-60vw { padding: 60vw; } .p-m-70vw { padding: 70vw; } .p-m-80vw { padding: 80vw; } .p-m-90vw { padding: 90vw; } .p-m-05gap { padding: calc(0.5 * var(--colgap) ); } .p-m-1gap { padding: calc(1 * var(--colgap) ); } .p-m-2gap { padding: calc(2 * var(--colgap) ); } .p-m-3gap { padding: calc(3 * var(--colgap) ); } .p-m-4gap { padding: calc(4 * var(--colgap) ); } .p-m-5gap { padding: calc(5 * var(--colgap) ); } .pt-m-0 { padding-top: 0rem; } .pt-m-05 { padding-top: 0.5rem; } .pt-m-1 { padding-top: 1rem; } .pt-m-2 { padding-top: 2rem; } .pt-m-3 { padding-top: 3rem; } .pt-m-4 { padding-top: 4rem; } .pt-m-5 { padding-top: 5rem; } .pt-m-6 { padding-top: 6rem; } .pt-m-7 { padding-top: 7rem; } .pt-m-8 { padding-top: 8rem; } .pt-m-9 { padding-top: 9rem; } .pt-m-10 { padding-top: 10rem; } .pt-m-025p { padding-top: 2.5%; } .pt-m-5p { padding-top: 5%; } .pt-m-10p { padding-top: 10%; } .pt-m-20p { padding-top: 20%; } .pt-m-30p { padding-top: 30%; } .pt-m-40p { padding-top: 40%; } .pt-m-50p { padding-top: 50%; } .pt-m-60p { padding-top: 60%; } .pt-m-70p { padding-top: 70%; } .pt-m-80p { padding-top: 80%; } .pt-m-90p { padding-top: 90%; } .pt-m-100p { padding-top: 100%; } .pt-m-1vw { padding-top: 1vw; } .pt-m-2vw { padding-top: 2vw; } .pt-m-3vw { padding-top: 3vw; } .pt-m-4vw { padding-top: 4vw; } .pt-m-5vw { padding-top: 5vw; } .pt-m-6vw { padding-top: 6vw; } .pt-m-7vw { padding-top: 7vw; } .pt-m-8vw { padding-top: 8vw; } .pt-m-9vw { padding-top: 9vw; } .pt-m-10vw { padding-top: 10vw; } .pt-m-20vw { padding-top: 20vw; } .pt-m-30vw { padding-top: 30vw; } .pt-m-40vw { padding-top: 40vw; } .pt-m-50vw { padding-top: 50vw; } .pt-m-60vw { padding-top: 60vw; } .pt-m-70vw { padding-top: 70vw; } .pt-m-80vw { padding-top: 80vw; } .pt-m-90vw { padding-top: 90vw; } .pt-m-05gap { padding-top: calc(0.5 * var(--colgap) ); } .pt-m-1gap { padding-top: calc(1 * var(--colgap) ); } .pt-m-2gap { padding-top: calc(2 * var(--colgap) ); } .pt-m-3gap { padding-top: calc(3 * var(--colgap) ); } .pt-m-4gap { padding-top: calc(4 * var(--colgap) ); } .pt-m-5gap { padding-top: calc(5 * var(--colgap) ); } .pb-m-0 { padding-bottom: 0rem; } .pb-m-05 { padding-bottom: 0.5rem; } .pb-m-1 { padding-bottom: 1rem; } .pb-m-2 { padding-bottom: 2rem; } .pb-m-3 { padding-bottom: 3rem; } .pb-m-4 { padding-bottom: 4rem; } .pb-m-5 { padding-bottom: 5rem; } .pb-m-6 { padding-bottom: 6rem; } .pb-m-7 { padding-bottom: 7rem; } .pb-m-8 { padding-bottom: 8rem; } .pb-m-9 { padding-bottom: 9rem; } .pb-m-10 { padding-bottom: 10rem; } .pb-m-025p { padding-bottom: 2.5%; } .pb-m-5p { padding-bottom: 5%; } .pb-m-10p { padding-bottom: 10%; } .pb-m-20p { padding-bottom: 20%; } .pb-m-30p { padding-bottom: 30%; } .pb-m-40p { padding-bottom: 40%; } .pb-m-50p { padding-bottom: 50%; } .pb-m-60p { padding-bottom: 60%; } .pb-m-70p { padding-bottom: 70%; } .pb-m-80p { padding-bottom: 80%; } .pb-m-90p { padding-bottom: 90%; } .pb-m-100p { padding-bottom: 100%; } .pb-m-1vw { padding-bottom: 1vw; } .pb-m-2vw { padding-bottom: 2vw; } .pb-m-3vw { padding-bottom: 3vw; } .pb-m-4vw { padding-bottom: 4vw; } .pb-m-5vw { padding-bottom: 5vw; } .pb-m-6vw { padding-bottom: 6vw; } .pb-m-7vw { padding-bottom: 7vw; } .pb-m-8vw { padding-bottom: 8vw; } .pb-m-9vw { padding-bottom: 9vw; } .pb-m-10vw { padding-bottom: 10vw; } .pb-m-20vw { padding-bottom: 20vw; } .pb-m-30vw { padding-bottom: 30vw; } .pb-m-40vw { padding-bottom: 40vw; } .pb-m-50vw { padding-bottom: 50vw; } .pb-m-60vw { padding-bottom: 60vw; } .pb-m-70vw { padding-bottom: 70vw; } .pb-m-80vw { padding-bottom: 80vw; } .pb-m-90vw { padding-bottom: 90vw; } .pb-m-05gap { padding-bottom: calc(0.5 * var(--colgap) ); } .pb-m-1gap { padding-bottom: calc(1 * var(--colgap) ); } .pb-m-2gap { padding-bottom: calc(2 * var(--colgap) ); } .pb-m-3gap { padding-bottom: calc(3 * var(--colgap) ); } .pb-m-4gap { padding-bottom: calc(4 * var(--colgap) ); } .pb-m-5gap { padding-bottom: calc(5 * var(--colgap) ); } .pl-m-0 { padding-left: 0rem; } .pl-m-05 { padding-left: 0.5rem; } .pl-m-1 { padding-left: 1rem; } .pl-m-2 { padding-left: 2rem; } .pl-m-3 { padding-left: 3rem; } .pl-m-4 { padding-left: 4rem; } .pl-m-5 { padding-left: 5rem; } .pl-m-6 { padding-left: 6rem; } .pl-m-7 { padding-left: 7rem; } .pl-m-8 { padding-left: 8rem; } .pl-m-9 { padding-left: 9rem; } .pl-m-10 { padding-left: 10rem; } .pl-m-025p { padding-left: 2.5%; } .pl-m-5p { padding-left: 5%; } .pl-m-10p { padding-left: 10%; } .pl-m-20p { padding-left: 20%; } .pl-m-30p { padding-left: 30%; } .pl-m-40p { padding-left: 40%; } .pl-m-50p { padding-left: 50%; } .pl-m-60p { padding-left: 60%; } .pl-m-70p { padding-left: 70%; } .pl-m-80p { padding-left: 80%; } .pl-m-90p { padding-left: 90%; } .pl-m-100p { padding-left: 100%; } .pl-m-1vw { padding-left: 1vw; } .pl-m-2vw { padding-left: 2vw; } .pl-m-3vw { padding-left: 3vw; } .pl-m-4vw { padding-left: 4vw; } .pl-m-5vw { padding-left: 5vw; } .pl-m-6vw { padding-left: 6vw; } .pl-m-7vw { padding-left: 7vw; } .pl-m-8vw { padding-left: 8vw; } .pl-m-9vw { padding-left: 9vw; } .pl-m-10vw { padding-left: 10vw; } .pl-m-20vw { padding-left: 20vw; } .pl-m-30vw { padding-left: 30vw; } .pl-m-40vw { padding-left: 40vw; } .pl-m-50vw { padding-left: 50vw; } .pl-m-60vw { padding-left: 60vw; } .pl-m-70vw { padding-left: 70vw; } .pl-m-80vw { padding-left: 80vw; } .pl-m-90vw { padding-left: 90vw; } .pl-m-05gap { padding-left: calc(0.5 * var(--colgap) ); } .pl-m-1gap { padding-left: calc(1 * var(--colgap) ); } .pl-m-2gap { padding-left: calc(2 * var(--colgap) ); } .pl-m-3gap { padding-left: calc(3 * var(--colgap) ); } .pl-m-4gap { padding-left: calc(4 * var(--colgap) ); } .pl-m-5gap { padding-left: calc(5 * var(--colgap) ); } .pr-m-0 { padding-right: 0rem; } .pr-m-05 { padding-right: 0.5rem; } .pr-m-1 { padding-right: 1rem; } .pr-m-2 { padding-right: 2rem; } .pr-m-3 { padding-right: 3rem; } .pr-m-4 { padding-right: 4rem; } .pr-m-5 { padding-right: 5rem; } .pr-m-6 { padding-right: 6rem; } .pr-m-7 { padding-right: 7rem; } .pr-m-8 { padding-right: 8rem; } .pr-m-9 { padding-right: 9rem; } .pr-m-10 { padding-right: 10rem; } .pr-m-025p { padding-right: 2.5%; } .pr-m-5p { padding-right: 5%; } .pr-m-10p { padding-right: 10%; } .pr-m-20p { padding-right: 20%; } .pr-m-30p { padding-right: 30%; } .pr-m-40p { padding-right: 40%; } .pr-m-50p { padding-right: 50%; } .pr-m-60p { padding-right: 60%; } .pr-m-70p { padding-right: 70%; } .pr-m-80p { padding-right: 80%; } .pr-m-90p { padding-right: 90%; } .pr-m-100p { padding-right: 100%; } .pr-m-1vw { padding-right: 1vw; } .pr-m-2vw { padding-right: 2vw; } .pr-m-3vw { padding-right: 3vw; } .pr-m-4vw { padding-right: 4vw; } .pr-m-5vw { padding-right: 5vw; } .pr-m-6vw { padding-right: 6vw; } .pr-m-7vw { padding-right: 7vw; } .pr-m-8vw { padding-right: 8vw; } .pr-m-9vw { padding-right: 9vw; } .pr-m-10vw { padding-right: 10vw; } .pr-m-20vw { padding-right: 20vw; } .pr-m-30vw { padding-right: 30vw; } .pr-m-40vw { padding-right: 40vw; } .pr-m-50vw { padding-right: 50vw; } .pr-m-60vw { padding-right: 60vw; } .pr-m-70vw { padding-right: 70vw; } .pr-m-80vw { padding-right: 80vw; } .pr-m-90vw { padding-right: 90vw; } .pr-m-05gap { padding-right: calc(0.5 * var(--colgap) ); } .pr-m-1gap { padding-right: calc(1 * var(--colgap) ); } .pr-m-2gap { padding-right: calc(2 * var(--colgap) ); } .pr-m-3gap { padding-right: calc(3 * var(--colgap) ); } .pr-m-4gap { padding-right: calc(4 * var(--colgap) ); } .pr-m-5gap { padding-right: calc(5 * var(--colgap) ); } } /*** MARGINS ***/ /*** MARGINS ***/ .m-auto { margin: auto; } .m-noauto { margin: inherit !important; } .m-0 { --colgap: 0; margin:var(--colgap); } .m-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-1 { --colgap: 1rem; margin:var(--colgap); } .m-2 { --colgap: 2rem; margin:var(--colgap); } .m-3 { --colgap: 3rem; margin:var(--colgap); } .m-4 { --colgap: 4rem; margin:var(--colgap); } .m-5 { --colgap: 5rem; margin:var(--colgap); } .m-6 { --colgap: 6rem; margin:var(--colgap); } .m-7 { --colgap: 7rem; margin:var(--colgap); } .m-8 { --colgap: 8rem; margin:var(--colgap); } .m-9 { --colgap: 9rem; margin:var(--colgap); } .m-10 { --colgap: 10rem; margin:var(--colgap); } .m-25p { --colgap: 2.5%; margin:var(--colgap); } .m-5p { --colgap: 5% ; margin:var(--colgap); } .m-10p { --colgap: 10% ; margin:var(--colgap); } .m-20p { --colgap: 20% ; margin:var(--colgap); } .m-30p { --colgap: 30% ; margin:var(--colgap); } .m-40p { --colgap: 40% ; margin:var(--colgap); } .m-50p { --colgap: 50% ; margin:var(--colgap); } .m-60p { --colgap: 60% ; margin:var(--colgap); } .m-70p { --colgap: 70% ; margin:var(--colgap); } .m-80p { --colgap: 80% ; margin:var(--colgap); } .m-90p { --colgap: 90% ; margin:var(--colgap); } .m-100p { --colgap: 100% ; margin:var(--colgap); } .m-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-auto { margin-top: auto ; } .mt-0 { margin-top: 0 ; } .mt--10 { margin-top: -10rem ; } .mt--9 { margin-top: -9rem ; } .mt--8 { margin-top: -8rem ; } .mt--7 { margin-top: -7rem ; } .mt--6 { margin-top: -6rem ; } .mt--5 { margin-top: -5rem ; } .mt--4 { margin-top: -4rem ; } .mt--3 { margin-top: -3rem ; } .mt--2 { margin-top: -2rem ; } .mt--1 { margin-top: -1rem ; } .mt-05 { margin-top: 0.5rem ; } .mt-1 { margin-top: 1rem ; } .mt-2 { margin-top: 2rem ; } .mt-3 { margin-top: 3rem ; } .mt-4 { margin-top: 4rem ; } .mt-5 { margin-top: 5rem ; } .mt-6 { margin-top: 6rem ; } .mt-7 { margin-top: 7rem ; } .mt-8 { margin-top: 8rem ; } .mt-9 { margin-top: 9rem ; } .mt-10 { margin-top: 10rem ; } .mt--30p { margin-top: -30% ; } .mt--20p { margin-top: -20% ; } .mt--15p { margin-top: -15% ; } .mt--10p { margin-top: -10% ; } .mt--5p { margin-top: -5% ; } .mt--025p { margin-top: -2.5% ; } .mt-025p { margin-top: 2.5% ; } .mt-5p { margin-top: 5% ; } .mt-10p { margin-top: 10% ; } .mt-15p { margin-top: 15% ; } .mt-20p { margin-top: 20% ; } .mt-30p { margin-top: 30% ; } .mt-1vh { margin-top: 1svh ; } .mt-2vh { margin-top: 2svh ; } .mt-3vh { margin-top: 3svh ; } .mt-4vh { margin-top: 4svh ; } .mt-5vh { margin-top: 5svh ; } .mt-6vh { margin-top: 6svh ; } .mt-7vh { margin-top: 7svh ; } .mt-8vh { margin-top: 8svh ; } .mt-9vh { margin-top: 9svh ; } .mt-10vh { margin-top: 10svh ; } .mt-25vh { margin-top: 25svh ; } .mt-33vh { margin-top: 33.33svh ; } .mt-50vh { margin-top: 50svh ; } .mt-66vh { margin-top: 66.66svh ; } .mt-100vh { margin-top: 100svh ; } .mt-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-1gap { margin-top: var(--colgap) ; } .mt-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt--3nav { margin-top: calc(-3 * var(--navheight)); } .mt--2nav { margin-top: calc(-2 * var(--navheight)); } .mt--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-1nav { margin-top: var(--navheight); } .mt-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-auto { margin-bottom: auto ; } .mb-0 { margin-bottom: 0 ; } .mb--10 { margin-bottom: -10rem ; } .mb--9 { margin-bottom: -9rem ; } .mb--8 { margin-bottom: -8rem ; } .mb--7 { margin-bottom: -7rem ; } .mb--6 { margin-bottom: -6rem ; } .mb--5 { margin-bottom: -5rem ; } .mb--4 { margin-bottom: -4rem ; } .mb--3 { margin-bottom: -3rem ; } .mb--2 { margin-bottom: -2rem ; } .mb--1 { margin-bottom: -1rem ; } .mb-05 { margin-bottom: 0.5rem ; } .mb-1 { margin-bottom: 1rem ; } .mb-2 { margin-bottom: 2rem ; } .mb-3 { margin-bottom: 3rem ; } .mb-4 { margin-bottom: 4rem ; } .mb-5 { margin-bottom: 5rem ; } .mb-6 { margin-bottom: 6rem ; } .mb-7 { margin-bottom: 7rem ; } .mb-8 { margin-bottom: 8rem ; } .mb-9 { margin-bottom: 9rem ; } .mb-10 { margin-bottom: 10rem ; } .mb--30p { margin-bottom: -30% ; } .mb--20p { margin-bottom: -20% ; } .mb--15p { margin-bottom: -15% ; } .mb--10p { margin-bottom: -10% ; } .mb--5p { margin-bottom: -5% ; } .mb--025p { margin-bottom: -2.5% ; } .mb-025p { margin-bottom: 2.5% ; } .mb-5p { margin-bottom: 5% ; } .mb-10p { margin-bottom: 10% ; } .mb-15p { margin-bottom: 15% ; } .mb-20p { margin-bottom: 20% ; } .mb-30p { margin-bottom: 30% ; } .mb-1vh { margin-bottom: 1svh ; } .mb-2vh { margin-bottom: 2svh ; } .mb-3vh { margin-bottom: 3svh ; } .mb-4vh { margin-bottom: 4svh ; } .mb-5vh { margin-bottom: 5svh ; } .mb-6vh { margin-bottom: 6svh ; } .mb-7vh { margin-bottom: 7svh ; } .mb-8vh { margin-bottom: 8svh ; } .mb-9vh { margin-bottom: 9svh ; } .mb-10vh { margin-bottom: 10svh ; } .mb-25vh { margin-bottom: 25svh ; } .mb-33vh { margin-bottom: 33.33svh ; } .mb-50vh { margin-bottom: 50svh ; } .mb-66vh { margin-bottom: 66.66svh ; } .mb-100vh { margin-bottom: 100svh ; } .mb-05gap { margin-bottom: calc(0.5 * var(--colgap) ); } .mb-1gap { margin-bottom: calc(1 * var(--colgap) ); } .mb-2gap { margin-bottom: calc(2 * var(--colgap) ); } .mb-3gap { margin-bottom: calc(3 * var(--colgap) ); } .mb-4gap { margin-bottom: calc(4 * var(--colgap) ); } .mb-5gap { margin-bottom: calc(5 * var(--colgap) ); } .mb--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-1nav { margin-bottom: calc(2 * var(--navheight)); } .mb-2nav { margin-bottom: calc(2 * var(--navheight)); } .mb-3nav { margin-bottom: calc(3 * var(--navheight)); } .ml-auto { margin-left: auto; } .ml-noauto { margin-left: inherit !important; } .ml-0 { --colgap-l: 0; } .ml-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-auto { margin-right: auto; } .mr-noauto { margin-right: inherit !important; } .mr-0 { --colgap-r: 0; } .mr-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } @media (max-width:1365px) { .m-xl-auto { margin: auto; } .m-xl-noauto { margin: inherit !important; } .m-xl-0 { --colgap: 0; margin:var(--colgap); } .m-xl-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-xl-1 { --colgap: 1rem; margin:var(--colgap); } .m-xl-2 { --colgap: 2rem; margin:var(--colgap); } .m-xl-3 { --colgap: 3rem; margin:var(--colgap); } .m-xl-4 { --colgap: 4rem; margin:var(--colgap); } .m-xl-5 { --colgap: 5rem; margin:var(--colgap); } .m-xl-6 { --colgap: 6rem; margin:var(--colgap); } .m-xl-7 { --colgap: 7rem; margin:var(--colgap); } .m-xl-8 { --colgap: 8rem; margin:var(--colgap); } .m-xl-9 { --colgap: 9rem; margin:var(--colgap); } .m-xl-10 { --colgap: 10rem; margin:var(--colgap); } .m-xl-25p { --colgap: 2.5%; margin:var(--colgap); } .m-xl-5p { --colgap: 5% ; margin:var(--colgap); } .m-xl-10p { --colgap: 10% ; margin:var(--colgap); } .m-xl-20p { --colgap: 20% ; margin:var(--colgap); } .m-xl-30p { --colgap: 30% ; margin:var(--colgap); } .m-xl-40p { --colgap: 40% ; margin:var(--colgap); } .m-xl-50p { --colgap: 50% ; margin:var(--colgap); } .m-xl-60p { --colgap: 60% ; margin:var(--colgap); } .m-xl-70p { --colgap: 70% ; margin:var(--colgap); } .m-xl-80p { --colgap: 80% ; margin:var(--colgap); } .m-xl-90p { --colgap: 90% ; margin:var(--colgap); } .m-xl-100p { --colgap: 100% ; margin:var(--colgap); } .m-xl-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-xl-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-xl-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-xl-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-xl-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-xl-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-xl-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-xl-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-xl-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-xl-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-xl-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-xl-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-xl-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-xl-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-xl-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-xl-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-xl-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-xl-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-xl-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-xl-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-xl-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-xl-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-xl-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-xl-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-xl-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-xl-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-xl-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-xl-auto { margin-top: auto ; } .mt-xl-noauto { margin-top: inherit !important; } .mt-xl-0 { margin-top: 0 ; } .mt-xl--10 { margin-top: -10rem ; } .mt-xl--9 { margin-top: -9rem ; } .mt-xl--8 { margin-top: -8rem ; } .mt-xl--7 { margin-top: -7rem ; } .mt-xl--6 { margin-top: -6rem ; } .mt-xl--5 { margin-top: -5rem ; } .mt-xl--4 { margin-top: -4rem ; } .mt-xl--3 { margin-top: -3rem ; } .mt-xl--2 { margin-top: -2rem ; } .mt-xl--1 { margin-top: -1rem ; } .mt-xl-05 { margin-top: 0.5rem ; } .mt-xl-1 { margin-top: 1rem ; } .mt-xl-2 { margin-top: 2rem ; } .mt-xl-3 { margin-top: 3rem ; } .mt-xl-4 { margin-top: 4rem ; } .mt-xl-5 { margin-top: 5rem ; } .mt-xl-6 { margin-top: 6rem ; } .mt-xl-7 { margin-top: 7rem ; } .mt-xl-8 { margin-top: 8rem ; } .mt-xl-9 { margin-top: 9rem ; } .mt-xl-10 { margin-top: 10rem ; } .mt-xl--30p { margin-top: -30% ; } .mt-xl--20p { margin-top: -20% ; } .mt-xl--15p { margin-top: -15% ; } .mt-xl--10p { margin-top: -10% ; } .mt-xl--5p { margin-top: -5% ; } .mt-xl--025p { margin-top: -2.5% ; } .mt-xl-025p { margin-top: 2.5% ; } .mt-xl-5p { margin-top: 5% ; } .mt-xl-10p { margin-top: 10% ; } .mt-xl-15p { margin-top: 15% ; } .mt-xl-20p { margin-top: 20% ; } .mt-xl-30p { margin-top: 30% ; } .mt-xl-1vh { margin-top: 1svh ; } .mt-xl-2vh { margin-top: 2svh ; } .mt-xl-3vh { margin-top: 3svh ; } .mt-xl-4vh { margin-top: 4svh ; } .mt-xl-5vh { margin-top: 5svh ; } .mt-xl-6vh { margin-top: 6svh ; } .mt-xl-7vh { margin-top: 7svh ; } .mt-xl-8vh { margin-top: 8svh ; } .mt-xl-9vh { margin-top: 9svh ; } .mt-xl-10vh { margin-top: 10svh ; } .mt-xl-25vh { margin-top: 25svh ; } .mt-xl-33vh { margin-top: 33.33svh ; } .mt-xl-50vh { margin-top: 50svh ; } .mt-xl-66vh { margin-top: 66.66svh ; } .mt-xl-100vh { margin-top: 100svh ; } .mt-xl-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-xl-1gap { margin-top: var(--colgap) ; } .mt-xl-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-xl-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-xl-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-xl-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-xl--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-xl--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-xl--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-xl-1nav { margin-top: var(--navheight); } .mt-xl-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-xl-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-xl-auto { margin-bottom: auto ; } .mb-xl-noauto { margin-bottom: inherit !important; } .mb-xl-0 { margin-bottom: 0 ; } .mb-xl--10 { margin-bottom: -10rem ; } .mb-xl--9 { margin-bottom: -9rem ; } .mb-xl--8 { margin-bottom: -8rem ; } .mb-xl--7 { margin-bottom: -7rem ; } .mb-xl--6 { margin-bottom: -6rem ; } .mb-xl--5 { margin-bottom: -5rem ; } .mb-xl--4 { margin-bottom: -4rem ; } .mb-xl--3 { margin-bottom: -3rem ; } .mb-xl--2 { margin-bottom: -2rem ; } .mb-xl--1 { margin-bottom: -1rem ; } .mb-xl-05 { margin-bottom: 0.5rem ; } .mb-xl-1 { margin-bottom: 1rem ; } .mb-xl-2 { margin-bottom: 2rem ; } .mb-xl-3 { margin-bottom: 3rem ; } .mb-xl-4 { margin-bottom: 4rem ; } .mb-xl-5 { margin-bottom: 5rem ; } .mb-xl-6 { margin-bottom: 6rem ; } .mb-xl-7 { margin-bottom: 7rem ; } .mb-xl-8 { margin-bottom: 8rem ; } .mb-xl-9 { margin-bottom: 9rem ; } .mb-xl-10 { margin-bottom: 10rem ; } .mb-xl--30p { margin-bottom: -30% ; } .mb-xl--20p { margin-bottom: -20% ; } .mb-xl--15p { margin-bottom: -15% ; } .mb-xl--10p { margin-bottom: -10% ; } .mb-xl--5p { margin-bottom: -5% ; } .mb-xl--025p { margin-bottom: -2.5% ; } .mb-xl-025p { margin-bottom: 2.5% ; } .mb-xl-5p { margin-bottom: 5% ; } .mb-xl-10p { margin-bottom: 10% ; } .mb-xl-15p { margin-bottom: 15% ; } .mb-xl-20p { margin-bottom: 20% ; } .mb-xl-30p { margin-bottom: 30% ; } .mb-xl-1vh { margin-bottom: 1svh ; } .mb-xl-2vh { margin-bottom: 2svh ; } .mb-xl-3vh { margin-bottom: 3svh ; } .mb-xl-4vh { margin-bottom: 4svh ; } .mb-xl-5vh { margin-bottom: 5svh ; } .mb-xl-6vh { margin-bottom: 6svh ; } .mb-xl-7vh { margin-bottom: 7svh ; } .mb-xl-8vh { margin-bottom: 8svh ; } .mb-xl-9vh { margin-bottom: 9svh ; } .mb-xl-10vh { margin-bottom: 10svh ; } .mb-xl-25vh { margin-bottom: 25svh ; } .mb-xl-33vh { margin-bottom: 33.33svh ; } .mb-xl-50vh { margin-bottom: 50svh ; } .mb-xl-66vh { margin-bottom: 66.66svh ; } .mb-xl-100vh { margin-bottom: 100svh ; } .mb-xl-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-xl-1gap { margin-bottom: var(--colgap) ; } .mb-xl-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-xl-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-xl-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-xl-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-xl--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-xl--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-xl--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-xl-1nav { margin-bottom: var(--navheight); } .mb-xl-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-xl-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-xl-auto { margin-left: auto; } .ml-xl-noauto { margin-left: inherit !important; } .ml-xl-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-xl-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-xl-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-xl-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-xl-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-xl-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-xl-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-xl-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-xl-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-xl-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-xl-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-xl-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-xl-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-xl-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-xl-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-xl-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-xl-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-xl-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-xl-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-xl-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-xl-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-xl-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-xl-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-xl-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-xl-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-xl-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-xl-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-xl-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-xl-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-xl-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-xl-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-xl-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-xl-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-xl-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-xl-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-xl-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-xl-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xl-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-xl-auto { margin-right: auto; } .mr-xl-noauto { margin-right: inherit !important; } .mr-xl-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-xl-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-xl-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-xl-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-xl-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-xl-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-xl-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-xl-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-xl-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-xl-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-xl-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-xl-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-xl-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-xl-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-xl-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-xl-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-xl-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-xl-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-xl-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-xl-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-xl-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-xl-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-xl-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-xl-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-xl-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-xl-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-xl-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-xl-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-xl-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-xl-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-xl-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-xl-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-xl-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-xl-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-xl-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-xl-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-xl-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xl-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } @media (max-width:1279px) { .m-l-auto { margin: auto; } .m-l-noauto { margin: inherit !important; } .m-l-0 { --colgap: 0; margin:var(--colgap); } .m-l-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-l-1 { --colgap: 1rem; margin:var(--colgap); } .m-l-2 { --colgap: 2rem; margin:var(--colgap); } .m-l-3 { --colgap: 3rem; margin:var(--colgap); } .m-l-4 { --colgap: 4rem; margin:var(--colgap); } .m-l-5 { --colgap: 5rem; margin:var(--colgap); } .m-l-6 { --colgap: 6rem; margin:var(--colgap); } .m-l-7 { --colgap: 7rem; margin:var(--colgap); } .m-l-8 { --colgap: 8rem; margin:var(--colgap); } .m-l-9 { --colgap: 9rem; margin:var(--colgap); } .m-l-10 { --colgap: 10rem; margin:var(--colgap); } .m-l-25p { --colgap: 2.5%; margin:var(--colgap); } .m-l-5p { --colgap: 5% ; margin:var(--colgap); } .m-l-10p { --colgap: 10% ; margin:var(--colgap); } .m-l-20p { --colgap: 20% ; margin:var(--colgap); } .m-l-30p { --colgap: 30% ; margin:var(--colgap); } .m-l-40p { --colgap: 40% ; margin:var(--colgap); } .m-l-50p { --colgap: 50% ; margin:var(--colgap); } .m-l-60p { --colgap: 60% ; margin:var(--colgap); } .m-l-70p { --colgap: 70% ; margin:var(--colgap); } .m-l-80p { --colgap: 80% ; margin:var(--colgap); } .m-l-90p { --colgap: 90% ; margin:var(--colgap); } .m-l-100p { --colgap: 100% ; margin:var(--colgap); } .m-l-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-l-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-l-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-l-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-l-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-l-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-l-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-l-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-l-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-l-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-l-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-l-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-l-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-l-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-l-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-l-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-l-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-l-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-l-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-l-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-l-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-l-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-l-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-l-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-l-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-l-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-l-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-l-auto { margin-top: auto ; } .mt-l-noauto { margin: inherit !important; } .mt-l-0 { margin-top: 0 ; } .mt-l--10 { margin-top: -10rem ; } .mt-l--9 { margin-top: -9rem ; } .mt-l--8 { margin-top: -8rem ; } .mt-l--7 { margin-top: -7rem ; } .mt-l--6 { margin-top: -6rem ; } .mt-l--5 { margin-top: -5rem ; } .mt-l--4 { margin-top: -4rem ; } .mt-l--3 { margin-top: -3rem ; } .mt-l--2 { margin-top: -2rem ; } .mt-l--1 { margin-top: -1rem ; } .mt-l-05 { margin-top: 0.5rem ; } .mt-l-1 { margin-top: 1rem ; } .mt-l-2 { margin-top: 2rem ; } .mt-l-3 { margin-top: 3rem ; } .mt-l-4 { margin-top: 4rem ; } .mt-l-5 { margin-top: 5rem ; } .mt-l-6 { margin-top: 6rem ; } .mt-l-7 { margin-top: 7rem ; } .mt-l-8 { margin-top: 8rem ; } .mt-l-9 { margin-top: 9rem ; } .mt-l-10 { margin-top: 10rem ; } .mt-l--30p { margin-top: -30% ; } .mt-l--20p { margin-top: -20% ; } .mt-l--15p { margin-top: -15% ; } .mt-l--10p { margin-top: -10% ; } .mt-l--5p { margin-top: -5% ; } .mt-l--025p { margin-top: -2.5% ; } .mt-l-025p { margin-top: 2.5% ; } .mt-l-5p { margin-top: 5% ; } .mt-l-10p { margin-top: 10% ; } .mt-l-15p { margin-top: 15% ; } .mt-l-20p { margin-top: 20% ; } .mt-l-30p { margin-top: 30% ; } .mt-l-1vh { margin-top: 1svh ; } .mt-l-2vh { margin-top: 2svh ; } .mt-l-3vh { margin-top: 3svh ; } .mt-l-4vh { margin-top: 4svh ; } .mt-l-5vh { margin-top: 5svh ; } .mt-l-6vh { margin-top: 6svh ; } .mt-l-7vh { margin-top: 7svh ; } .mt-l-8vh { margin-top: 8svh ; } .mt-l-9vh { margin-top: 9svh ; } .mt-l-10vh { margin-top: 10svh ; } .mt-l-25vh { margin-top: 25svh ; } .mt-l-33vh { margin-top: 33.33svh ; } .mt-l-50vh { margin-top: 50svh ; } .mt-l-66vh { margin-top: 66.66svh ; } .mt-l-100vh { margin-top: 100svh ; } .mt-l-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-l-1gap { margin-top: var(--colgap) ; } .mt-l-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-l-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-l-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-l-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-l--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-l--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-l--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-l-1nav { margin-top: var(--navheight); } .mt-l-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-l-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-l-auto { margin-bottom: auto ; } .mb-l-noauto { margin-bottom: inherit !important; } .mb-l-0 { margin-bottom: 0 ; } .mb-l--10 { margin-bottom: -10rem ; } .mb-l--9 { margin-bottom: -9rem ; } .mb-l--8 { margin-bottom: -8rem ; } .mb-l--7 { margin-bottom: -7rem ; } .mb-l--6 { margin-bottom: -6rem ; } .mb-l--5 { margin-bottom: -5rem ; } .mb-l--4 { margin-bottom: -4rem ; } .mb-l--3 { margin-bottom: -3rem ; } .mb-l--2 { margin-bottom: -2rem ; } .mb-l--1 { margin-bottom: -1rem ; } .mb-l-05 { margin-bottom: 0.5rem ; } .mb-l-1 { margin-bottom: 1rem ; } .mb-l-2 { margin-bottom: 2rem ; } .mb-l-3 { margin-bottom: 3rem ; } .mb-l-4 { margin-bottom: 4rem ; } .mb-l-5 { margin-bottom: 5rem ; } .mb-l-6 { margin-bottom: 6rem ; } .mb-l-7 { margin-bottom: 7rem ; } .mb-l-8 { margin-bottom: 8rem ; } .mb-l-9 { margin-bottom: 9rem ; } .mb-l-10 { margin-bottom: 10rem ; } .mb-l--30p { margin-bottom: -30% ; } .mb-l--20p { margin-bottom: -20% ; } .mb-l--15p { margin-bottom: -15% ; } .mb-l--10p { margin-bottom: -10% ; } .mb-l--5p { margin-bottom: -5% ; } .mb-l--025p { margin-bottom: -2.5% ; } .mb-l-025p { margin-bottom: 2.5% ; } .mb-l-5p { margin-bottom: 5% ; } .mb-l-10p { margin-bottom: 10% ; } .mb-l-15p { margin-bottom: 15% ; } .mb-l-20p { margin-bottom: 20% ; } .mb-l-30p { margin-bottom: 30% ; } .mb-l-1vh { margin-bottom: 1svh ; } .mb-l-2vh { margin-bottom: 2svh ; } .mb-l-3vh { margin-bottom: 3svh ; } .mb-l-4vh { margin-bottom: 4svh ; } .mb-l-5vh { margin-bottom: 5svh ; } .mb-l-6vh { margin-bottom: 6svh ; } .mb-l-7vh { margin-bottom: 7svh ; } .mb-l-8vh { margin-bottom: 8svh ; } .mb-l-9vh { margin-bottom: 9svh ; } .mb-l-10vh { margin-bottom: 10svh ; } .mb-l-25vh { margin-bottom: 25svh ; } .mb-l-33vh { margin-bottom: 33.33svh ; } .mb-l-50vh { margin-bottom: 50svh ; } .mb-l-66vh { margin-bottom: 66.66svh ; } .mb-l-100vh { margin-bottom: 100svh ; } .mb-l-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-l-1gap { margin-bottom: var(--colgap) ; } .mb-l-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-l-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-l-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-l-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-l--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-l--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-l--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-l-1nav { margin-bottom: var(--navheight); } .mb-l-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-l-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-l-auto { margin-left: auto; } .ml-l-noauto { margin-left: inherit !important; } .ml-l-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-l-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-l-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-l-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-l-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-l-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-l-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-l-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-l-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-l-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-l-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-l-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-l-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-l-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-l-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-l-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-l-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-l-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-l-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-l-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-l-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-l-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-l-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-l-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-l-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-l-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-l-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-l-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-l-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-l-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-l-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-l-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-l-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-l-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-l-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-l-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-l-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-l-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-l-auto { margin-right: auto; } .mr-l-noauto { margin-right: inherit !important; } .mr-l-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-l-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-l-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-l-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-l-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-l-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-l-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-l-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-l-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-l-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-l-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-l-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-l-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-l-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-l-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-l-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-l-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-l-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-l-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-l-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-l-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-l-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-l-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-l-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-l-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-l-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-l-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-l-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-l-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-l-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-l-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-l-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-l-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-l-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-l-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-l-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-l-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-l-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } @media (max-width:1023px) { .m-m-auto { margin: auto; } .m-m-noauto { margin: inherit !important; } .m-m-0 { --colgap: 0; margin:var(--colgap); } .m-m-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-m-1 { --colgap: 1rem; margin:var(--colgap); } .m-m-2 { --colgap: 2rem; margin:var(--colgap); } .m-m-3 { --colgap: 3rem; margin:var(--colgap); } .m-m-4 { --colgap: 4rem; margin:var(--colgap); } .m-m-5 { --colgap: 5rem; margin:var(--colgap); } .m-m-6 { --colgap: 6rem; margin:var(--colgap); } .m-m-7 { --colgap: 7rem; margin:var(--colgap); } .m-m-8 { --colgap: 8rem; margin:var(--colgap); } .m-m-9 { --colgap: 9rem; margin:var(--colgap); } .m-m-10 { --colgap: 10rem; margin:var(--colgap); } .m-m-25p { --colgap: 2.5%; margin:var(--colgap); } .m-m-5p { --colgap: 5% ; margin:var(--colgap); } .m-m-10p { --colgap: 10% ; margin:var(--colgap); } .m-m-20p { --colgap: 20% ; margin:var(--colgap); } .m-m-30p { --colgap: 30% ; margin:var(--colgap); } .m-m-40p { --colgap: 40% ; margin:var(--colgap); } .m-m-50p { --colgap: 50% ; margin:var(--colgap); } .m-m-60p { --colgap: 60% ; margin:var(--colgap); } .m-m-70p { --colgap: 70% ; margin:var(--colgap); } .m-m-80p { --colgap: 80% ; margin:var(--colgap); } .m-m-90p { --colgap: 90% ; margin:var(--colgap); } .m-m-100p { --colgap: 100% ; margin:var(--colgap); } .m-m-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-m-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-m-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-m-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-m-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-m-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-m-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-m-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-m-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-m-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-m-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-m-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-m-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-m-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-m-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-m-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-m-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-m-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-m-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-m-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-m-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-m-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-m-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-m-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-m-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-m-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-m-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-m-auto { margin-top: auto ; } .mt-m-noauto { margin-top: inherit !important; } .mt-m-0 { margin-top: 0 ; } .mt-m--10 { margin-top: -10rem ; } .mt-m--9 { margin-top: -9rem ; } .mt-m--8 { margin-top: -8rem ; } .mt-m--7 { margin-top: -7rem ; } .mt-m--6 { margin-top: -6rem ; } .mt-m--5 { margin-top: -5rem ; } .mt-m--4 { margin-top: -4rem ; } .mt-m--3 { margin-top: -3rem ; } .mt-m--2 { margin-top: -2rem ; } .mt-m--1 { margin-top: -1rem ; } .mt-m-05 { margin-top: 0.5rem ; } .mt-m-1 { margin-top: 1rem ; } .mt-m-2 { margin-top: 2rem ; } .mt-m-3 { margin-top: 3rem ; } .mt-m-4 { margin-top: 4rem ; } .mt-m-5 { margin-top: 5rem ; } .mt-m-6 { margin-top: 6rem ; } .mt-m-7 { margin-top: 7rem ; } .mt-m-8 { margin-top: 8rem ; } .mt-m-9 { margin-top: 9rem ; } .mt-m-10 { margin-top: 10rem ; } .mt-m--30p { margin-top: -30% ; } .mt-m--20p { margin-top: -20% ; } .mt-m--15p { margin-top: -15% ; } .mt-m--10p { margin-top: -10% ; } .mt-m--5p { margin-top: -5% ; } .mt-m--025p { margin-top: -2.5% ; } .mt-m-025p { margin-top: 2.5% ; } .mt-m-5p { margin-top: 5% ; } .mt-m-10p { margin-top: 10% ; } .mt-m-15p { margin-top: 15% ; } .mt-m-20p { margin-top: 20% ; } .mt-m-30p { margin-top: 30% ; } .mt-m-1vh { margin-top: 1svh ; } .mt-m-2vh { margin-top: 2svh ; } .mt-m-3vh { margin-top: 3svh ; } .mt-m-4vh { margin-top: 4svh ; } .mt-m-5vh { margin-top: 5svh ; } .mt-m-6vh { margin-top: 6svh ; } .mt-m-7vh { margin-top: 7svh ; } .mt-m-8vh { margin-top: 8svh ; } .mt-m-9vh { margin-top: 9svh ; } .mt-m-10vh { margin-top: 10svh ; } .mt-m-25vh { margin-top: 25svh ; } .mt-m-33vh { margin-top: 33.33svh ; } .mt-m-50vh { margin-top: 50svh ; } .mt-m-66vh { margin-top: 66.66svh ; } .mt-m-100vh { margin-top: 100svh ; } .mt-m-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-m-1gap { margin-top: var(--colgap) ; } .mt-m-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-m-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-m-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-m-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-m--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-m--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-m--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-m-1nav { margin-top: var(--navheight); } .mt-m-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-m-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-m-auto { margin-bottom: auto ; } .mb-m-noauto { margin-bottom: inherit !important; } .mb-m-0 { margin-bottom: 0 ; } .mb-m--10 { margin-bottom: -10rem ; } .mb-m--9 { margin-bottom: -9rem ; } .mb-m--8 { margin-bottom: -8rem ; } .mb-m--7 { margin-bottom: -7rem ; } .mb-m--6 { margin-bottom: -6rem ; } .mb-m--5 { margin-bottom: -5rem ; } .mb-m--4 { margin-bottom: -4rem ; } .mb-m--3 { margin-bottom: -3rem ; } .mb-m--2 { margin-bottom: -2rem ; } .mb-m--1 { margin-bottom: -1rem ; } .mb-m-05 { margin-bottom: 0.5rem ; } .mb-m-1 { margin-bottom: 1rem ; } .mb-m-2 { margin-bottom: 2rem ; } .mb-m-3 { margin-bottom: 3rem ; } .mb-m-4 { margin-bottom: 4rem ; } .mb-m-5 { margin-bottom: 5rem ; } .mb-m-6 { margin-bottom: 6rem ; } .mb-m-7 { margin-bottom: 7rem ; } .mb-m-8 { margin-bottom: 8rem ; } .mb-m-9 { margin-bottom: 9rem ; } .mb-m-10 { margin-bottom: 10rem ; } .mb-m--30p { margin-bottom: -30% ; } .mb-m--20p { margin-bottom: -20% ; } .mb-m--15p { margin-bottom: -15% ; } .mb-m--10p { margin-bottom: -10% ; } .mb-m--5p { margin-bottom: -5% ; } .mb-m--025p { margin-bottom: -2.5% ; } .mb-m-025p { margin-bottom: 2.5% ; } .mb-m-5p { margin-bottom: 5% ; } .mb-m-10p { margin-bottom: 10% ; } .mb-m-15p { margin-bottom: 15% ; } .mb-m-20p { margin-bottom: 20% ; } .mb-m-30p { margin-bottom: 30% ; } .mb-m-1vh { margin-bottom: 1svh ; } .mb-m-2vh { margin-bottom: 2svh ; } .mb-m-3vh { margin-bottom: 3svh ; } .mb-m-4vh { margin-bottom: 4svh ; } .mb-m-5vh { margin-bottom: 5svh ; } .mb-m-6vh { margin-bottom: 6svh ; } .mb-m-7vh { margin-bottom: 7svh ; } .mb-m-8vh { margin-bottom: 8svh ; } .mb-m-9vh { margin-bottom: 9svh ; } .mb-m-10vh { margin-bottom: 10svh ; } .mb-m-25vh { margin-bottom: 25svh ; } .mb-m-33vh { margin-bottom: 33.33svh ; } .mb-m-50vh { margin-bottom: 50svh ; } .mb-m-66vh { margin-bottom: 66.66svh ; } .mb-m-100vh { margin-bottom: 100svh ; } .mb-m-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-m-1gap { margin-bottom: var(--colgap) ; } .mb-m-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-m-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-m-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-m-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-m--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-m--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-m--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-m-1nav { margin-bottom: var(--navheight); } .mb-m-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-m-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-m-auto { margin-left: auto; } .ml-m-noauto { margin-left: inherit !important; } .ml-m-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-m-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-m-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-m-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-m-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-m-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-m-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-m-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-m-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-m-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-m-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-m-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-m-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-m-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-m-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-m-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-m-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-m-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-m-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-m-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-m-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-m-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-m-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-m-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-m-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-m-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-m-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-m-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-m-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-m-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-m-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-m-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-m-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-m-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-m-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-m-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-m-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-m-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-m-auto { margin-right: auto; } .mr-m-noauto { margin-right: inherit !important; } .mr-m-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-m-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-m-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-m-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-m-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-m-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-m-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-m-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-m-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-m-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-m-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-m-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-m-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-m-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-m-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-m-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-m-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-m-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-m-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-m-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-m-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-m-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-m-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-m-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-m-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-m-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-m-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-m-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-m-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-m-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-m-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-m-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-m-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-m-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-m-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-m-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-m-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-m-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } @media (max-width:767px) { .m-s-auto { margin: auto; } .m-s-noauto { margin: inherit !important; } .m-s-0 { --colgap: 0; margin:var(--colgap); } .m-s-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-s-1 { --colgap: 1rem; margin:var(--colgap); } .m-s-2 { --colgap: 2rem; margin:var(--colgap); } .m-s-3 { --colgap: 3rem; margin:var(--colgap); } .m-s-4 { --colgap: 4rem; margin:var(--colgap); } .m-s-5 { --colgap: 5rem; margin:var(--colgap); } .m-s-6 { --colgap: 6rem; margin:var(--colgap); } .m-s-7 { --colgap: 7rem; margin:var(--colgap); } .m-s-8 { --colgap: 8rem; margin:var(--colgap); } .m-s-9 { --colgap: 9rem; margin:var(--colgap); } .m-s-10 { --colgap: 10rem; margin:var(--colgap); } .m-s-25p { --colgap: 2.5%; margin:var(--colgap); } .m-s-5p { --colgap: 5% ; margin:var(--colgap); } .m-s-10p { --colgap: 10% ; margin:var(--colgap); } .m-s-20p { --colgap: 20% ; margin:var(--colgap); } .m-s-30p { --colgap: 30% ; margin:var(--colgap); } .m-s-40p { --colgap: 40% ; margin:var(--colgap); } .m-s-50p { --colgap: 50% ; margin:var(--colgap); } .m-s-60p { --colgap: 60% ; margin:var(--colgap); } .m-s-70p { --colgap: 70% ; margin:var(--colgap); } .m-s-80p { --colgap: 80% ; margin:var(--colgap); } .m-s-90p { --colgap: 90% ; margin:var(--colgap); } .m-s-100p { --colgap: 100% ; margin:var(--colgap); } .m-s-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-s-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-s-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-s-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-s-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-s-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-s-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-s-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-s-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-s-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-s-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-s-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-s-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-s-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-s-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-s-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-s-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-s-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-s-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-s-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-s-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-s-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-s-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-s-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-s-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-s-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-s-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-s-auto { margin-top: auto ; } .mt-s-noauto { margin-top: inherit !important; } .mt-s-0 { margin-top: 0 ; } .mt-s--10 { margin-top: -10rem ; } .mt-s--9 { margin-top: -9rem ; } .mt-s--8 { margin-top: -8rem ; } .mt-s--7 { margin-top: -7rem ; } .mt-s--6 { margin-top: -6rem ; } .mt-s--5 { margin-top: -5rem ; } .mt-s--4 { margin-top: -4rem ; } .mt-s--3 { margin-top: -3rem ; } .mt-s--2 { margin-top: -2rem ; } .mt-s--1 { margin-top: -1rem ; } .mt-s-05 { margin-top: 0.5rem ; } .mt-s-1 { margin-top: 1rem ; } .mt-s-2 { margin-top: 2rem ; } .mt-s-3 { margin-top: 3rem ; } .mt-s-4 { margin-top: 4rem ; } .mt-s-5 { margin-top: 5rem ; } .mt-s-6 { margin-top: 6rem ; } .mt-s-7 { margin-top: 7rem ; } .mt-s-8 { margin-top: 8rem ; } .mt-s-9 { margin-top: 9rem ; } .mt-s-10 { margin-top: 10rem ; } .mt-s--30p { margin-top: -30% ; } .mt-s--20p { margin-top: -20% ; } .mt-s--15p { margin-top: -15% ; } .mt-s--10p { margin-top: -10% ; } .mt-s--5p { margin-top: -5% ; } .mt-s--025p { margin-top: -2.5% ; } .mt-s-025p { margin-top: 2.5% ; } .mt-s-5p { margin-top: 5% ; } .mt-s-10p { margin-top: 10% ; } .mt-s-15p { margin-top: 15% ; } .mt-s-20p { margin-top: 20% ; } .mt-s-30p { margin-top: 30% ; } .mt-s-1vh { margin-top: 1svh ; } .mt-s-2vh { margin-top: 2svh ; } .mt-s-3vh { margin-top: 3svh ; } .mt-s-4vh { margin-top: 4svh ; } .mt-s-5vh { margin-top: 5svh ; } .mt-s-6vh { margin-top: 6svh ; } .mt-s-7vh { margin-top: 7svh ; } .mt-s-8vh { margin-top: 8svh ; } .mt-s-9vh { margin-top: 9svh ; } .mt-s-10vh { margin-top: 10svh ; } .mt-s-25vh { margin-top: 25svh ; } .mt-s-33vh { margin-top: 33.33svh ; } .mt-s-50vh { margin-top: 50svh ; } .mt-s-66vh { margin-top: 66.66svh ; } .mt-s-100vh { margin-top: 100svh ; } .mt-s-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-s-1gap { margin-top: var(--colgap) ; } .mt-s-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-s-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-s-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-s-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-s--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-s--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-s--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-s-1nav { margin-top: var(--navheight); } .mt-s-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-s-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-s-auto { margin-bottom: auto ; } .mb-s-noauto { margin-bottom: inherit !important; } .mb-s-0 { margin-bottom: 0 ; } .mb-s--10 { margin-bottom: -10rem ; } .mb-s--9 { margin-bottom: -9rem ; } .mb-s--8 { margin-bottom: -8rem ; } .mb-s--7 { margin-bottom: -7rem ; } .mb-s--6 { margin-bottom: -6rem ; } .mb-s--5 { margin-bottom: -5rem ; } .mb-s--4 { margin-bottom: -4rem ; } .mb-s--3 { margin-bottom: -3rem ; } .mb-s--2 { margin-bottom: -2rem ; } .mb-s--1 { margin-bottom: -1rem ; } .mb-s-05 { margin-bottom: 0.5rem ; } .mb-s-1 { margin-bottom: 1rem ; } .mb-s-2 { margin-bottom: 2rem ; } .mb-s-3 { margin-bottom: 3rem ; } .mb-s-4 { margin-bottom: 4rem ; } .mb-s-5 { margin-bottom: 5rem ; } .mb-s-6 { margin-bottom: 6rem ; } .mb-s-7 { margin-bottom: 7rem ; } .mb-s-8 { margin-bottom: 8rem ; } .mb-s-9 { margin-bottom: 9rem ; } .mb-s-10 { margin-bottom: 10rem ; } .mb-s--30p { margin-bottom: -30% ; } .mb-s--20p { margin-bottom: -20% ; } .mb-s--15p { margin-bottom: -15% ; } .mb-s--10p { margin-bottom: -10% ; } .mb-s--5p { margin-bottom: -5% ; } .mb-s--025p { margin-bottom: -2.5% ; } .mb-s-025p { margin-bottom: 2.5% ; } .mb-s-5p { margin-bottom: 5% ; } .mb-s-10p { margin-bottom: 10% ; } .mb-s-15p { margin-bottom: 15% ; } .mb-s-20p { margin-bottom: 20% ; } .mb-s-30p { margin-bottom: 30% ; } .mb-s-1vh { margin-bottom: 1svh ; } .mb-s-2vh { margin-bottom: 2svh ; } .mb-s-3vh { margin-bottom: 3svh ; } .mb-s-4vh { margin-bottom: 4svh ; } .mb-s-5vh { margin-bottom: 5svh ; } .mb-s-6vh { margin-bottom: 6svh ; } .mb-s-7vh { margin-bottom: 7svh ; } .mb-s-8vh { margin-bottom: 8svh ; } .mb-s-9vh { margin-bottom: 9svh ; } .mb-s-10vh { margin-bottom: 10svh ; } .mb-s-25vh { margin-bottom: 25svh ; } .mb-s-33vh { margin-bottom: 33.33svh ; } .mb-s-50vh { margin-bottom: 50svh ; } .mb-s-66vh { margin-bottom: 66.66svh ; } .mb-s-100vh { margin-bottom: 100svh ; } .mb-s-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-s-1gap { margin-bottom: var(--colgap) ; } .mb-s-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-s-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-s-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-s-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-s--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-s--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-s--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-s-1nav { margin-bottom: var(--navheight); } .mb-s-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-s-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-s-auto { margin-left: auto; } .ml-s-noauto { margin-left: inherit !important; } .ml-s-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-s-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-s-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-s-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-s-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-s-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-s-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-s-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-s-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-s-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-s-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-s-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-s-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-s-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-s-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-s-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-s-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-s-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-s-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-s-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-s-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-s-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-s-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-s-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-s-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-s-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-s-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-s-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-s-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-s-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-s-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-s-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-s-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-s-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-s-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-s-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-s-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-s-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-s-auto { margin-right: auto; } .mr-s-noauto { margin-right: inherit !important; } .mr-s-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-s-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-s-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-s-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-s-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-s-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-s-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-s-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-s-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-s-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-s-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-s-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-s-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-s-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-s-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-s-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-s-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-s-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-s-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-s-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-s-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-s-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-s-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-s-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-s-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-s-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-s-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-s-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-s-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-s-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-s-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-s-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-s-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-s-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-s-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-s-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-s-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-s-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } @media (max-width:479px) { .m-xs-auto { margin: auto; } .m-xs-noauto { margin: inherit !important; } .m-xs-0 { --colgap: 0; margin:var(--colgap); } .m-xs-05 { --colgap: 0.5rem; margin:var(--colgap); } .m-xs-1 { --colgap: 1rem; margin:var(--colgap); } .m-xs-2 { --colgap: 2rem; margin:var(--colgap); } .m-xs-3 { --colgap: 3rem; margin:var(--colgap); } .m-xs-4 { --colgap: 4rem; margin:var(--colgap); } .m-xs-5 { --colgap: 5rem; margin:var(--colgap); } .m-xs-6 { --colgap: 6rem; margin:var(--colgap); } .m-xs-7 { --colgap: 7rem; margin:var(--colgap); } .m-xs-8 { --colgap: 8rem; margin:var(--colgap); } .m-xs-9 { --colgap: 9rem; margin:var(--colgap); } .m-xs-10 { --colgap: 10rem; margin:var(--colgap); } .m-xs-25p { --colgap: 2.5%; margin:var(--colgap); } .m-xs-5p { --colgap: 5% ; margin:var(--colgap); } .m-xs-10p { --colgap: 10% ; margin:var(--colgap); } .m-xs-20p { --colgap: 20% ; margin:var(--colgap); } .m-xs-30p { --colgap: 30% ; margin:var(--colgap); } .m-xs-40p { --colgap: 40% ; margin:var(--colgap); } .m-xs-50p { --colgap: 50% ; margin:var(--colgap); } .m-xs-60p { --colgap: 60% ; margin:var(--colgap); } .m-xs-70p { --colgap: 70% ; margin:var(--colgap); } .m-xs-80p { --colgap: 80% ; margin:var(--colgap); } .m-xs-90p { --colgap: 90% ; margin:var(--colgap); } .m-xs-100p { --colgap: 100% ; margin:var(--colgap); } .m-xs-1vw { --colgap: calc( var(--maxwidthlimit) * 0.01 ); margin:var(--colgap); } .m-xs-2vw { --colgap: calc( var(--maxwidthlimit) * 0.02 ); margin:var(--colgap); } .m-xs-025vw { --colgap: calc( var(--maxwidthlimit) * 0.025 ); margin:var(--colgap); } .m-xs-3vw { --colgap: calc( var(--maxwidthlimit) * 0.03 ); margin:var(--colgap); } .m-xs-4vw { --colgap: calc( var(--maxwidthlimit) * 0.04 ); margin:var(--colgap); } .m-xs-5vw { --colgap: calc( var(--maxwidthlimit) * 0.05 ); margin:var(--colgap); } .m-xs-10vw { --colgap: calc( var(--maxwidthlimit) * 0.1 ); margin:var(--colgap); } .m-xs-20vw { --colgap: calc( var(--maxwidthlimit) * 0.2 ); margin:var(--colgap); } .m-xs-30vw { --colgap: calc( var(--maxwidthlimit) * 0.3 ); margin:var(--colgap); } .m-xs-40vw { --colgap: calc( var(--maxwidthlimit) * 0.4 ); margin:var(--colgap); } .m-xs-50vw { --colgap: calc( var(--maxwidthlimit) * 0.5 ); margin:var(--colgap); } .m-xs-60vw { --colgap: calc( var(--maxwidthlimit) * 0.6 ); margin:var(--colgap); } .m-xs-70vw { --colgap: calc( var(--maxwidthlimit) * 0.7 ); margin:var(--colgap); } .m-xs-80vw { --colgap: calc( var(--maxwidthlimit) * 0.8 ); margin:var(--colgap); } .m-xs-90vw { --colgap: calc( var(--maxwidthlimit) * 0.9 ); margin:var(--colgap); } .m-xs-100vw { --colgap: calc( var(--maxwidthlimit) * 100 ); margin:var(--colgap); } .m-xs-0gap { --colgap: calc( 0 * var(--colgap) ); margin:var(--colgap); } .m-xs-1gap { --colgap: calc( 1 * var(--colgap) ); margin:var(--colgap); } .m-xs-2gap { --colgap: calc( 2 * var(--colgap) ); margin:var(--colgap); } .m-xs-3gap { --colgap: calc( 3 * var(--colgap) ); margin:var(--colgap); } .m-xs-4gap { --colgap: calc( 4 * var(--colgap) ); margin:var(--colgap); } .m-xs-5gap { --colgap: calc( 5 * var(--colgap) ); margin:var(--colgap); } .m-xs-6gap { --colgap: calc( 6 * var(--colgap) ); margin:var(--colgap); } .m-xs-7gap { --colgap: calc( 7 * var(--colgap) ); margin:var(--colgap); } .m-xs-8gap { --colgap: calc( 8 * var(--colgap) ); margin:var(--colgap); } .m-xs-9gap { --colgap: calc( 9 * var(--colgap) ); margin:var(--colgap); } .m-xs-10gap { --colgap: calc( 10 * var(--colgap) ); margin:var(--colgap); } .mt-xs-auto { margin-top: auto ; } .mt-xs-noauto { margin-top: inherit !important; } .mt-xs-0 { margin-top: 0 ; } .mt-xs--10 { margin-top: -10rem ; } .mt-xs--9 { margin-top: -9rem ; } .mt-xs--8 { margin-top: -8rem ; } .mt-xs--7 { margin-top: -7rem ; } .mt-xs--6 { margin-top: -6rem ; } .mt-xs--5 { margin-top: -5rem ; } .mt-xs--4 { margin-top: -4rem ; } .mt-xs--3 { margin-top: -3rem ; } .mt-xs--2 { margin-top: -2rem ; } .mt-xs--1 { margin-top: -1rem ; } .mt-xs-05 { margin-top: 0.5rem ; } .mt-xs-1 { margin-top: 1rem ; } .mt-xs-2 { margin-top: 2rem ; } .mt-xs-3 { margin-top: 3rem ; } .mt-xs-4 { margin-top: 4rem ; } .mt-xs-5 { margin-top: 5rem ; } .mt-xs-6 { margin-top: 6rem ; } .mt-xs-7 { margin-top: 7rem ; } .mt-xs-8 { margin-top: 8rem ; } .mt-xs-9 { margin-top: 9rem ; } .mt-xs-10 { margin-top: 10rem ; } .mt-xs--30p { margin-top: -30% ; } .mt-xs--20p { margin-top: -20% ; } .mt-xs--15p { margin-top: -15% ; } .mt-xs--10p { margin-top: -10% ; } .mt-xs--5p { margin-top: -5% ; } .mt-xs--025p { margin-top: -2.5% ; } .mt-xs-025p { margin-top: 2.5% ; } .mt-xs-5p { margin-top: 5% ; } .mt-xs-10p { margin-top: 10% ; } .mt-xs-15p { margin-top: 15% ; } .mt-xs-20p { margin-top: 20% ; } .mt-xs-30p { margin-top: 30% ; } .mt-xs-1vh { margin-top: 1svh ; } .mt-xs-2vh { margin-top: 2svh ; } .mt-xs-3vh { margin-top: 3svh ; } .mt-xs-4vh { margin-top: 4svh ; } .mt-xs-5vh { margin-top: 5svh ; } .mt-xs-6vh { margin-top: 6svh ; } .mt-xs-7vh { margin-top: 7svh ; } .mt-xs-8vh { margin-top: 8svh ; } .mt-xs-9vh { margin-top: 9svh ; } .mt-xs-10vh { margin-top: 10svh ; } .mt-xs-25vh { margin-top: 25svh ; } .mt-xs-33vh { margin-top: 33.33svh ; } .mt-xs-50vh { margin-top: 50svh ; } .mt-xs-66vh { margin-top: 66.66svh ; } .mt-xs-100vh { margin-top: 100svh ; } .mt-xs-05gap { margin-top: calc(0.5 * var(--colgap) ) ; } .mt-xs-1gap { margin-top: var(--colgap) ; } .mt-xs-2gap { margin-top: calc(2 * var(--colgap) ) ; } .mt-xs-3gap { margin-top: calc(3 * var(--colgap) ) ; } .mt-xs-4gap { margin-top: calc(4 * var(--colgap) ) ; } .mt-xs-5gap { margin-top: calc(5 * var(--colgap) ) ; } .mt-xs--3nav { margin-top: calc(-3 * var(--navheight)); } .mt-xs--2nav { margin-top: calc(-2 * var(--navheight)); } .mt-xs--1nav { margin-top: calc(-1 * var(--navheight)); } .mt-xs-1nav { margin-top: var(--navheight); } .mt-xs-2nav { margin-top: calc(2 * var(--navheight)) ; } .mt-xs-3nav { margin-top: calc(3 * var(--navheight)) ; } .mb-xs-auto { margin-bottom: auto ; } .mb-xs-noauto { margin-bottom: inherit !important; } .mb-xs-0 { margin-bottom: 0 ; } .mb-xs--10 { margin-bottom: -10rem ; } .mb-xs--9 { margin-bottom: -9rem ; } .mb-xs--8 { margin-bottom: -8rem ; } .mb-xs--7 { margin-bottom: -7rem ; } .mb-xs--6 { margin-bottom: -6rem ; } .mb-xs--5 { margin-bottom: -5rem ; } .mb-xs--4 { margin-bottom: -4rem ; } .mb-xs--3 { margin-bottom: -3rem ; } .mb-xs--2 { margin-bottom: -2rem ; } .mb-xs--1 { margin-bottom: -1rem ; } .mb-xs-05 { margin-bottom: 0.5rem ; } .mb-xs-1 { margin-bottom: 1rem ; } .mb-xs-2 { margin-bottom: 2rem ; } .mb-xs-3 { margin-bottom: 3rem ; } .mb-xs-4 { margin-bottom: 4rem ; } .mb-xs-5 { margin-bottom: 5rem ; } .mb-xs-6 { margin-bottom: 6rem ; } .mb-xs-7 { margin-bottom: 7rem ; } .mb-xs-8 { margin-bottom: 8rem ; } .mb-xs-9 { margin-bottom: 9rem ; } .mb-xs-10 { margin-bottom: 10rem ; } .mb-xs--30p { margin-bottom: -30% ; } .mb-xs--20p { margin-bottom: -20% ; } .mb-xs--15p { margin-bottom: -15% ; } .mb-xs--10p { margin-bottom: -10% ; } .mb-xs--5p { margin-bottom: -5% ; } .mb-xs--025p { margin-bottom: -2.5% ; } .mb-xs-025p { margin-bottom: 2.5% ; } .mb-xs-5p { margin-bottom: 5% ; } .mb-xs-10p { margin-bottom: 10% ; } .mb-xs-15p { margin-bottom: 15% ; } .mb-xs-20p { margin-bottom: 20% ; } .mb-xs-30p { margin-bottom: 30% ; } .mb-xs-1vh { margin-bottom: 1svh ; } .mb-xs-2vh { margin-bottom: 2svh ; } .mb-xs-3vh { margin-bottom: 3svh ; } .mb-xs-4vh { margin-bottom: 4svh ; } .mb-xs-5vh { margin-bottom: 5svh ; } .mb-xs-6vh { margin-bottom: 6svh ; } .mb-xs-7vh { margin-bottom: 7svh ; } .mb-xs-8vh { margin-bottom: 8svh ; } .mb-xs-9vh { margin-bottom: 9svh ; } .mb-xs-10vh { margin-bottom: 10svh ; } .mb-xs-25vh { margin-bottom: 25svh ; } .mb-xs-33vh { margin-bottom: 33.33svh ; } .mb-xs-50vh { margin-bottom: 50svh ; } .mb-xs-66vh { margin-bottom: 66.66svh ; } .mb-xs-100vh { margin-bottom: 100svh ; } .mb-xs-05gap { margin-bottom: calc(0.5 * var(--colgap) ) ; } .mb-xs-1gap { margin-bottom: var(--colgap) ; } .mb-xs-2gap { margin-bottom: calc(2 * var(--colgap) ) ; } .mb-xs-3gap { margin-bottom: calc(3 * var(--colgap) ) ; } .mb-xs-4gap { margin-bottom: calc(4 * var(--colgap) ) ; } .mb-xs-5gap { margin-bottom: calc(5 * var(--colgap) ) ; } .mb-xs--3nav { margin-bottom: calc(-3 * var(--navheight)); } .mb-xs--2nav { margin-bottom: calc(-2 * var(--navheight)); } .mb-xs--1nav { margin-bottom: calc(-1 * var(--navheight)); } .mb-xs-1nav { margin-bottom: var(--navheight); } .mb-xs-2nav { margin-bottom: calc(2 * var(--navheight)) ; } .mb-xs-3nav { margin-bottom: calc(3 * var(--navheight)) ; } .ml-xs-auto { margin-left: auto; } .ml-xs-noauto { margin-left: inherit !important; } .ml-xs-0 { --colgap-l: 0; margin-left: var(--colgap-l); } .ml-xs-05 { --colgap-l: 0.5rem; margin-left: var(--colgap-l); } .ml-xs-1 { --colgap-l: 1rem; margin-left: var(--colgap-l); } .ml-xs-2 { --colgap-l: 2rem; margin-left: var(--colgap-l); } .ml-xs-3 { --colgap-l: 3rem; margin-left: var(--colgap-l); } .ml-xs-4 { --colgap-l: 4rem; margin-left: var(--colgap-l); } .ml-xs-5 { --colgap-l: 5rem; margin-left: var(--colgap-l); } .ml-xs-6 { --colgap-l: 6rem; margin-left: var(--colgap-l); } .ml-xs-7 { --colgap-l: 7rem; margin-left: var(--colgap-l); } .ml-xs-8 { --colgap-l: 8rem; margin-left: var(--colgap-l); } .ml-xs-9 { --colgap-l: 9rem; margin-left: var(--colgap-l); } .ml-xs-10 { --colgap-l: 10rem; margin-left: var(--colgap-l); } .ml-xs-25p { --colgap-l: 2.5%; margin-left: var(--colgap-l); } .ml-xs-5p { --colgap-l: 5% ; margin-left: var(--colgap-l); } .ml-xs-10p { --colgap-l: 10% ; margin-left: var(--colgap-l); } .ml-xs-20p { --colgap-l: 20% ; margin-left: var(--colgap-l); } .ml-xs-30p { --colgap-l: 30% ; margin-left: var(--colgap-l); } .ml-xs-40p { --colgap-l: 40% ; margin-left: var(--colgap-l); } .ml-xs-50p { --colgap-l: 50% ; margin-left: var(--colgap-l); } .ml-xs-60p { --colgap-l: 60% ; margin-left: var(--colgap-l); } .ml-xs-70p { --colgap-l: 70% ; margin-left: var(--colgap-l); } .ml-xs-80p { --colgap-l: 80% ; margin-left: var(--colgap-l); } .ml-xs-90p { --colgap-l: 90% ; margin-left: var(--colgap-l); } .ml-xs-100p { --colgap-l: 100% ; margin-left: var(--colgap-l); } .ml-xs-025vw { --colgap-l: calc( var(--maxwidthlimit) * 0.025); margin-left: var(--colgap-l); } .ml-xs-5vw { --colgap-l: calc( var(--maxwidthlimit) * 0.05 ); margin-left: var(--colgap-l); } .ml-xs-10vw { --colgap-l: calc( var(--maxwidthlimit) * 0.1 ); margin-left: var(--colgap-l); } .ml-xs-20vw { --colgap-l: calc( var(--maxwidthlimit) * 0.2 ); margin-left: var(--colgap-l); } .ml-xs-30vw { --colgap-l: calc( var(--maxwidthlimit) * 0.3 ); margin-left: var(--colgap-l); } .ml-xs-40vw { --colgap-l: calc( var(--maxwidthlimit) * 0.4 ); margin-left: var(--colgap-l); } .ml-xs-50vw { --colgap-l: calc( var(--maxwidthlimit) * 0.5 ); margin-left: var(--colgap-l); } .ml-xs-60vw { --colgap-l: calc( var(--maxwidthlimit) * 0.6 ); margin-left: var(--colgap-l); } .ml-xs-70vw { --colgap-l: calc( var(--maxwidthlimit) * 0.7 ); margin-left: var(--colgap-l); } .ml-xs-80vw { --colgap-l: calc( var(--maxwidthlimit) * 0.8 ); margin-left: var(--colgap-l); } .ml-xs-90vw { --colgap-l: calc( var(--maxwidthlimit) * 0.9 ); margin-left: var(--colgap-l); } .ml-xs-100vw { --colgap-l: calc( var(--maxwidthlimit) * 100 ); margin-left: var(--colgap-l); } .ml-xs-0gap { --colgap-l: calc( 0 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-1gap { --colgap-l: calc( 1 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-2gap { --colgap-l: calc( 2 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-3gap { --colgap-l: calc( 3 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-4gap { --colgap-l: calc( 4 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-5gap { --colgap-l: calc( 5 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-6gap { --colgap-l: calc( 6 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-7gap { --colgap-l: calc( 7 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-8gap { --colgap-l: calc( 8 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-9gap { --colgap-l: calc( 9 * var(--colgap) ); margin-left: var(--colgap-l); } .ml-xs-10gap { --colgap-l: calc( 10 * var(--colgap)); margin-left: var(--colgap-l); } .mr-xs-auto { margin-right: auto; } .mr-xs-noauto { margin-right: inherit !important; } .mr-xs-0 { --colgap-r: 0; margin-right: var(--colgap-r); } .mr-xs-05 { --colgap-r: 0.5rem; margin-right: var(--colgap-r); } .mr-xs-1 { --colgap-r: 1rem; margin-right: var(--colgap-r); } .mr-xs-2 { --colgap-r: 2rem; margin-right: var(--colgap-r); } .mr-xs-3 { --colgap-r: 3rem; margin-right: var(--colgap-r); } .mr-xs-4 { --colgap-r: 4rem; margin-right: var(--colgap-r); } .mr-xs-5 { --colgap-r: 5rem; margin-right: var(--colgap-r); } .mr-xs-6 { --colgap-r: 6rem; margin-right: var(--colgap-r); } .mr-xs-7 { --colgap-r: 7rem; margin-right: var(--colgap-r); } .mr-xs-8 { --colgap-r: 8rem; margin-right: var(--colgap-r); } .mr-xs-9 { --colgap-r: 9rem; margin-right: var(--colgap-r); } .mr-xs-10 { --colgap-r: 10rem; margin-right: var(--colgap-r); } .mr-xs-25p { --colgap-r: 2.5%; margin-right: var(--colgap-r); } .mr-xs-5p { --colgap-r: 5% ; margin-right: var(--colgap-r); } .mr-xs-10p { --colgap-r: 10% ; margin-right: var(--colgap-r); } .mr-xs-20p { --colgap-r: 20% ; margin-right: var(--colgap-r); } .mr-xs-30p { --colgap-r: 30% ; margin-right: var(--colgap-r); } .mr-xs-40p { --colgap-r: 40% ; margin-right: var(--colgap-r); } .mr-xs-50p { --colgap-r: 50% ; margin-right: var(--colgap-r); } .mr-xs-60p { --colgap-r: 60% ; margin-right: var(--colgap-r); } .mr-xs-70p { --colgap-r: 70% ; margin-right: var(--colgap-r); } .mr-xs-80p { --colgap-r: 80% ; margin-right: var(--colgap-r); } .mr-xs-90p { --colgap-r: 90% ; margin-right: var(--colgap-r); } .mr-xs-100p { --colgap-r: 100% ; margin-right: var(--colgap-r); } .mr-xs-025vw { --colgap-r: calc( var(--maxwidthlimit) * 0.025); margin-right: var(--colgap-r); } .mr-xs-5vw { --colgap-r: calc( var(--maxwidthlimit) * 0.05 ); margin-right: var(--colgap-r); } .mr-xs-10vw { --colgap-r: calc( var(--maxwidthlimit) * 0.1 ); margin-right: var(--colgap-r); } .mr-xs-20vw { --colgap-r: calc( var(--maxwidthlimit) * 0.2 ); margin-right: var(--colgap-r); } .mr-xs-30vw { --colgap-r: calc( var(--maxwidthlimit) * 0.3 ); margin-right: var(--colgap-r); } .mr-xs-40vw { --colgap-r: calc( var(--maxwidthlimit) * 0.4 ); margin-right: var(--colgap-r); } .mr-xs-50vw { --colgap-r: calc( var(--maxwidthlimit) * 0.5 ); margin-right: var(--colgap-r); } .mr-xs-60vw { --colgap-r: calc( var(--maxwidthlimit) * 0.6 ); margin-right: var(--colgap-r); } .mr-xs-70vw { --colgap-r: calc( var(--maxwidthlimit) * 0.7 ); margin-right: var(--colgap-r); } .mr-xs-80vw { --colgap-r: calc( var(--maxwidthlimit) * 0.8 ); margin-right: var(--colgap-r); } .mr-xs-90vw { --colgap-r: calc( var(--maxwidthlimit) * 0.9 ); margin-right: var(--colgap-r); } .mr-xs-100vw { --colgap-r: calc( var(--maxwidthlimit) * 100 ); margin-right: var(--colgap-r); } .mr-xs-0gap { --colgap-r: calc( 0 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-1gap { --colgap-r: calc( 1 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-2gap { --colgap-r: calc( 2 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-3gap { --colgap-r: calc( 3 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-4gap { --colgap-r: calc( 4 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-5gap { --colgap-r: calc( 5 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-6gap { --colgap-r: calc( 6 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-7gap { --colgap-r: calc( 7 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-8gap { --colgap-r: calc( 8 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-9gap { --colgap-r: calc( 9 * var(--colgap) ); margin-right: var(--colgap-r); } .mr-xs-10gap { --colgap-r: calc( 10 * var(--colgap)); margin-right: var(--colgap-r); } } .fixed { position:fixed; top:0px; z-index:100; } .absolute { position:absolute; } .relative { position:relative; } .sticky { position:sticky; top: calc( var(--navheight) + var(--navoffset) ); z-index:1; } .sticky-top-0 { top:0px; } /* 2025: für Hauptmenü. alle anderen sollen --navheight-Abstand berücksichtigen.*/ .display-hide { display: none; } .display-block { display: block; } .display-flex { display: flex; } .display-grid { display: grid; } @media (max-width:1279px) { .display-l-hide { display:none; } .display-l-block, .m-display-show { display:block; } .display-l-flex { display:flex; } .display-l-grid { display:grid; } .l-fixed { position:fixed !important; } .l-sticky { position:sticky !important; } .l-absolute { position:absolute !important; } .l-relative { position:relative !important; } } @media (max-width:1023px) { .display-m-hide { display:none; } .display-m-block, .m-display-show { display:block; } .display-m-flex { display:flex; } .display-m-grid { display:grid; } .m-fixed { position:fixed !important; } .m-sticky { position:sticky !important; } .m-absolute { position:absolute !important; } .m-relative { position:relative !important; } } @media (max-width:767px) { .display-s-hide { display:none; } .display-s-block, .s-display-show { display:block; } .display-s-flex { display:flex; } .display-s-grid { display:grid; } .s-fixed { position:fixed !important; } .s-sticky { position:sticky !important; } .s-absolute { position:absolute !important; } .s-relative { position:relative !important; } } @media (max-width:560px) { .display-xs-hide { display:none; } .display-xs-block, .s-display-show { display:block; } .display-xs-flex { display:flex; } .display-xs-grid { display:grid; } .xs-fixed { position:fixed !important; } .xs-sticky { position:sticky !important; } .xs-absolute { position:absolute !important; } .xs-relative { position:relative !important; } } .flex-grow-1 { flex-grow:1; } /* Aspect Ratio */ .ar-1-1 { overflow:hidden; aspect-ratio:1/1; height:auto; } .ar-5-4 { overflow:hidden; aspect-ratio:1.2/1; height:auto; } .ar-4-3 { overflow:hidden; aspect-ratio:1.333/1; height:auto; } .ar-3-2 { overflow:hidden; aspect-ratio:1.5/1; height:auto; } .ar-16-9 { overflow:hidden; aspect-ratio:1.777/1; height:auto; } .ar-16-8, .ar-2-1 { overflow:hidden; aspect-ratio:2/1; height:auto; } .ar-5-2 { overflow:hidden; aspect-ratio:2.5/1; height:auto; } .ar-15-5, .ar-3-1 { overflow:hidden; aspect-ratio:3/1; height:auto; } .ar-auto { overflow:hidden; aspect-ratio:auto; } @media (max-width:1365px) { .ar-xl-1-1 { overflow:hidden; aspect-ratio:1/1; height:auto; } .ar-xl-5-4 { overflow:hidden; aspect-ratio:1.2/1; height:auto; } .ar-xl-4-3 { overflow:hidden; aspect-ratio:1.333/1; height:auto; } .ar-xl-3-2 { overflow:hidden; aspect-ratio:1.5/1; height:auto; } .ar-xl-16-9 { overflow:hidden; aspect-ratio:1.777/1; height:auto; } .ar-xl-16-8, .ar-xl-2-1 { overflow:hidden; aspect-ratio:2/1; height:auto; } .ar-xl-5-2 { overflow:hidden; aspect-ratio:2.5/1; height:auto; } .ar-xl-15-5, .ar-xl-3-1 { overflow:hidden; aspect-ratio:3/1; height:auto; } .ar-xl-auto { overflow:hidden; aspect-ratio:auto; } } @media (max-width:1279px) { .ar-l-1-1 { overflow:hidden; aspect-ratio:1/1; height:auto; } .ar-l-5-4 { overflow:hidden; aspect-ratio:1.2/1; height:auto; } .ar-l-4-3 { overflow:hidden; aspect-ratio:1.333/1; height:auto; } .ar-l-3-2 { overflow:hidden; aspect-ratio:1.5/1; height:auto; } .ar-l-16-9 { overflow:hidden; aspect-ratio:1.777/1; height:auto; } .ar-l-16-8, .ar-l-2-1 { overflow:hidden; aspect-ratio:2/1; height:auto; } .ar-l-5-2 { overflow:hidden; aspect-ratio:2.5/1; height:auto; } .ar-l-15-5, .ar-l-3-1 { overflow:hidden; aspect-ratio:3/1; height:auto; } .ar-l-auto { overflow:hidden; aspect-ratio:auto; } } @media (max-width:1023px) { .ar-m-1-1 { overflow:hidden; aspect-ratio:1/1; height:auto; } .ar-m-5-4 { overflow:hidden; aspect-ratio:1.2/1; height:auto; } .ar-m-4-3 { overflow:hidden; aspect-ratio:1.333/1; height:auto; } .ar-m-3-2 { overflow:hidden; aspect-ratio:1.5/1; height:auto; } .ar-m-16-9 { overflow:hidden; aspect-ratio:1.777/1; height:auto; } .ar-m-16-8, .ar-m-2-1 { overflow:hidden; aspect-ratio:2/1; height:auto; } .ar-m-5-2 { overflow:hidden; aspect-ratio:2.5/1; height:auto; } .ar-m-15-5, .ar-m-3-1 { overflow:hidden; aspect-ratio:3/1; height:auto; } .ar-m-auto { overflow:hidden; aspect-ratio:auto; } } @media (max-width:767px) { .ar-s-1-1 { overflow:hidden; aspect-ratio:1/1; height:auto; } .ar-s-5-4 { overflow:hidden; aspect-ratio:1.2/1; height:auto; } .ar-s-4-3 { overflow:hidden; aspect-ratio:1.333/1; height:auto; } .ar-s-3-2 { overflow:hidden; aspect-ratio:1.5/1; height:auto; } .ar-s-16-9 { overflow:hidden; aspect-ratio:1.777/1; height:auto; } .ar-s-16-8, .ar-s-2-1 { overflow:hidden; aspect-ratio:2/1; height:auto; } .ar-s-5-2 { overflow:hidden; aspect-ratio:2.5/1; height:auto; } .ar-s-15-5, .ar-s-3-1 { overflow:hidden; aspect-ratio:3/1; height:auto; } .ar-s-auto { overflow:hidden; aspect-ratio:auto; } } @media (max-width:479px) { .ar-xs-1-1 { overflow:hidden; aspect-ratio:1/1; height:auto; } .ar-xs-5-4 { overflow:hidden; aspect-ratio:1.2/1; height:auto; } .ar-xs-4-3 { overflow:hidden; aspect-ratio:1.333/1; height:auto; } .ar-xs-3-2 { overflow:hidden; aspect-ratio:1.5/1; height:auto; } .ar-xs-16-9 { overflow:hidden; aspect-ratio:1.777/1; height:auto; } .ar-xs-16-8, .ar-xs-2-1 { overflow:hidden; aspect-ratio:2/1; height:auto; } .ar-xs-5-2 { overflow:hidden; aspect-ratio:2.5/1; height:auto; } .ar-xs-15-5, .ar-xs-3-1 { overflow:hidden; aspect-ratio:3/1; height:auto; } .ar-xs-auto { overflow:hidden; aspect-ratio:auto; } } /*TODO: ist das hier richtig?*/ .overflow-hidden { overflow:hidden; } /* call to action flyin rechts */ /* call to action flyin rechts */ /* call to action flyin rechts */ .cta { position: fixed; right:-100%; top:300px; z-index:1000; width: auto; height:auto; width:250px; /* notlösung weil Auto-Widths im Kreis laufen? */ text-decoration:none; border-bottom:none; transition:all 0.25s, right 1s; } .cta-visible { right:0px; } .cta-close { cursor:var(--cursor-pointer); } .cta-forceclosed { right: -100% !important; } .cta:hover { transform:scale(1.05); transform-origin:center right; } /* Dropdownmenüs lng und mobile-menu */ /* Dropdownmenüs lng und mobile-menu */ /* Dropdownmenüs lng und mobile-menu */ /*TODO: Burgermenu kommt von pedalpiraten ... aufräumen oder weg? ist nur ein Button mit Animation, der per JS ein anderes ein fly-in triggert */ .burgermenu { aspect-ratio: 1/1; display:flex; flex-direction:column; justify-content:space-between; width:33px; } .burgermenu > div { background-color:var(--color-schwarz); height:3px; transition:var(--base-transition); } .burgermenu > div:first-child { transform-origin:center; } .burgermenu> div:last-child { transform-origin:center; } .burgermenu:hover { cursor:var(--cursor-pointer); } .burgermenu.aktiv > div:first-child { transform:rotate(-45deg); margin-top:calc(50%); } .burgermenu.aktiv > div:nth-child(2) { display:none; } .burgermenu.aktiv > div:last-child { transform:rotate(45deg); margin-bottom:calc(50%); } /***** MEJS mediaevent js player media player Overrides ****/ .mejs__container:focus { outline:none; } .mejs__overlay-button { padding:0; margin:0; } .mejs__time-current { background:hwb(0 0% 0%); /* kann var(--color-page) werden, wenn in css integriert.*/ } .mejs__container { font-family:inherit !important; } /***** Cookie Cookiebanner banner Klaro ******/ /***** Status: von kapitel4.com rück-portiert, muss hier aufgeräumt werden! ******/ .klaro .cookie-notice:not(.cookie-modal-notice) { top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:10000 !important; max-width:none !important; border-radius:0px !important; background-color: #ffffff !important; box-shadow:0 0 25px -10px rgba(0,0,0,0.5) !important; border-top:1px solid #000000 !important; } .klaro .cookie-modal p, .klaro .cookie-modal strong, .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal ul, .klaro .cookie-modal li, .klaro .context-notice p, .klaro .context-notice strong, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice ul, .klaro .context-notice li, .klaro .cookie-notice p, .klaro .cookie-notice strong, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice ul, .klaro .cookie-notice li { color: #000000 !important; } .klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a { color: rgb(250,60,40) !important; } .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn { border-radius:5rem !important; padding:0.5rem 1rem !important; color:#ffffff !important; } .klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success { background-color: rgb(250,60,40) !important; } .klaro .cookie-modal .cm-modal.cm-klaro { background-color:#ffffff !important; padding:2rem; } .klaro .cookie-modal .cm-modal .cm-header, .klaro .cookie-modal .cm-modal .cm-body, .klaro .cookie-modal .cm-modal .cm-footer { padding:0 !important; border:none !important; } .klaro .cookie-modal .cm-modal .cm-header, .klaro .cookie-modal .cm-modal .cm-body { margin-bottom:2rem !important; } .klaro .context-notice { padding:2rem !important; } .klaro .context-notice .cm-buttons { display:flex; gap:1rem; } .klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn { margin:0.333rem !important; } .klaro .context-notice .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success-var, .klaro .cookie-modal .cm-btn.cm-btn-accept { border:1px solid rgb(250,60,40) !important; background-color: rgb(250,60,40) !important; color:#ffffff !important; } .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-modal .cm-btn.cm-btn-accept { background-color: #ffffff !important; color:rgb(250,60,40) !important; } .klaro .cookie-modal .cm-btn.cn-decline, .klaro .context-notice .cm-btn.cn-decline, .klaro .cookie-notice .cm-btn.cn-decline { border:1px solid #777777 !important; background-color: #ffffff !important; color: #777777 !important; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p { padding:3rem 0 !important; } .klaro .cn-body { max-width:1500px; margin-left:auto !important; margin-right:auto !important; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { margin-top:0 !important; margin-bottom:1rem !important; } .klaro label { margin-bottom:0px !important; line-height:1.2; } .klaro .cookie-modal .cm-list-title, .klaro .context-notice .cm-list-title, .klaro .cookie-notice .cm-list-title { font-size:0.9rem !important; } .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes, .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes, .klaro .cookie-modal .cm-list-description, .klaro .context-notice .cm-list-description, .klaro .cookie-notice .cm-list-description { line-height:1 !important; padding-top:0 !important; } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .klaro .context-notice .cm-list-input:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: rgb(250,60,40) !important; } .klaro .cm-powered-by { display:none !important; } .klaro .cookie-modal .cm-modal .hide svg { stroke:#000000 !important; } .klaro .cm-toggle-all { padding-top: 1.5rem !important; margin-top:1.5rem !important; } /***** Cookie Cookiebanner banner Klaro ******/