Example – a child that starts in column 2 and spans 6 columns:
Use additional classes to change the layout per media query: "gi-{start column}-{end column}-{media query}"Example – a child that starts in column 1 and ends in column 8, but starts in column 3 in the media query "tablet-up":
Example – a child that starts in column 1 and spans 2 columns, but spans 4 columns in the media query "desktop-up":
Beware: All column numbers are calculated using the highest available number of columns in any viewport and scaled down.Example – a grid that has 4 columns on small viewports, but 12 columns in media queries for larger viewports:In this grid, all class numbers will be based on 12 columns and scaled down for the 4-column version.The class "gi-1-6" will result in a child that starts in column 1 and ends in column 2 on small viewports,but actually ends in column 6 on larger viewports.The intent of this conversion is to minimize the necessity for the aforementioned additional re-layout classes.A child with the class "gi-1-6" takes up half of the grid, even when that grid has fewer columns on smaller viewports.If the grid is needed inside of a child element, the "g" class can be used on the element or any element inside it.This sub-grid does not have outer margin columns and uses the same number of columns that the element itself occupies.If no other CSS interferes, the columns of a sub-grid should line up perfectly with the columns of the parent grid.Example:
<-- This grid will only have 6 columns
Known issue:A sub-grid inside an element that spans 1 grid column itself will not line up with its parent grid becauserepeat(0, ...) does not work.*/.g { position: relative; display: grid; width: 100%; grid-template-rows: auto; grid-template-columns: [fullsize-start] 25fr repeat(calc(var(--colPhone, 4) - 1), [col-start] 64fr [col-end] 23fr) [col-start] 64fr [col-end] 25fr [fullsize-end]; grid-column-gap: 0; justify-content: stretch;}@media (min-width: 641px) and (min-height: 500px) { .g { grid-template-columns: [fullsize-start] 50fr repeat(calc(var(--colTablet, 8) - 1), [col-start] 70fr [col-end] 30fr) [col-start] 70fr [col-end] 50fr [fullsize-end]; }}@media (min-width: 1025px) { .g { grid-template-columns: [fullsize-start] calc((100% - 1540px) / 2) 75fr repeat(calc(var(--colDesktop, 12) - 1), [col-start] 81fr [col-end] 38fr) [col-start] 81fr [col-end] 75fr calc((100% - 1540px) / 2) [fullsize-end]; }}.g { margin: 0 auto;}.g--inner,.g .g { grid-template-columns: repeat(calc(var(--innerCols, 4) - 1), [col-start] 64fr [col-end] 23fr) [col-start] 64fr [col-end];}@media (min-width: 641px) and (min-height: 500px) { .g--inner,.g .g { grid-template-columns: repeat(calc(var(--innerCols, 8) - 1), [col-start] 70fr [col-end] 30fr) [col-start] 70fr [col-end]; }}@media (min-width: 1025px) { .g--inner,.g .g { grid-template-columns: repeat(calc(var(--innerCols, 12) - 1), [col-start] 81fr [col-end] 38fr) [col-start] 81fr [col-end]; }}.g--inner { position: relative; display: grid; grid-template-rows: auto;}.gi { width: 100%; word-break: break-word; -webkit-hyphens: auto; hyphens: auto;}/*** Cascading grid definitions* + media query overrides**/.gi-3-12, .gi-3s10, .gi-3-11, .gi-3s9, .gi-3-10, .gi-3s8, .gi-3-9, .gi-3s7, .gi-3-8, .gi-3s6, .gi-3-7, .gi-3s5, .gi-3-6, .gi-3s4, .gi-3-5, .gi-3s3, .gi-3-4, .gi-3s2, .gi-3-3, .gi-3s1, .gi-2-12, .gi-2s11, .gi-2-11, .gi-2s10, .gi-2-10, .gi-2s9, .gi-2-9, .gi-2s8, .gi-2-8, .gi-2s7, .gi-2-7, .gi-2s6, .gi-2-6, .gi-2s5, .gi-2-5, .gi-2s4, .gi-2-4, .gi-2s3, .gi-2-3, .gi-2s2, .gi-2-2, .gi-2s1, .gi-1-12, .gi-1s12, .gi-1-11, .gi-1s11, .gi-1-10, .gi-1s10, .gi-1-9, .gi-1s9, .gi-1-8, .gi-1s8, .gi-1-7, .gi-1s7, .gi-1-6, .gi-1s6, .gi-1-5, .gi-1s5, .gi-1-4, .gi-1s4, .gi-1-3, .gi-1s3, .gi-1-2, .gi-1s2, .gi-1-1, .gi-1s1 { grid-column-start: col-start 1;}.gi-3-3, .gi-2-3, .gi-2-2, .gi-1-3, .gi-1-2, .gi-1-1 { grid-column-end: col-end 1;}.gi-12-12, .gi-12s1, .gi-11-12, .gi-11s2, .gi-11-11, .gi-11s1, .gi-10-12, .gi-10s3, .gi-10-11, .gi-10s2, .gi-10-10, .gi-10s1, .gi-9-9, .gi-9s1, .gi-8-9, .gi-8s2, .gi-8-8, .gi-8s1, .gi-7-9, .gi-7s3, .gi-7-8, .gi-7s2, .gi-7-7, .gi-7s1, .gi-6-6, .gi-6s1, .gi-5-6, .gi-5s2, .gi-5-5, .gi-5s1, .gi-4-6, .gi-4s3, .gi-4-5, .gi-4s2, .gi-4-4, .gi-4s1, .gi-3-3, .gi-3s1, .gi-2-3, .gi-2s2, .gi-2-2, .gi-2s1, .gi-1-3, .gi-1s3, .gi-1-2, .gi-1s2, .gi-1-1, .gi-1s1 { --innerCols: 1;}.gi-12s1, .gi-11s2, .gi-11s1, .gi-10s3, .gi-10s2, .gi-10s1, .gi-9s1, .gi-8s2, .gi-8s1, .gi-7s3, .gi-7s2, .gi-7s1, .gi-6s1, .gi-5s2, .gi-5s1, .gi-4s3, .gi-4s2, .gi-4s1, .gi-3s1, .gi-2s2, .gi-2s1, .gi-1s3, .gi-1s2, .gi-1s1 { grid-column-end: span 1;}.gi-6-12, .gi-6s7, .gi-6-11, .gi-6s6, .gi-6-10, .gi-6s5, .gi-6-9, .gi-6s4, .gi-6-8, .gi-6s3, .gi-6-7, .gi-6s2, .gi-6-6, .gi-6s1, .gi-5-12, .gi-5s8, .gi-5-11, .gi-5s7, .gi-5-10, .gi-5s6, .gi-5-9, .gi-5s5, .gi-5-8, .gi-5s4, .gi-5-7, .gi-5s3, .gi-5-6, .gi-5s2, .gi-5-5, .gi-5s1, .gi-4-12, .gi-4s9, .gi-4-11, .gi-4s8, .gi-4-10, .gi-4s7, .gi-4-9, .gi-4s6, .gi-4-8, .gi-4s5, .gi-4-7, .gi-4s4, .gi-4-6, .gi-4s3, .gi-4-5, .gi-4s2, .gi-4-4, .gi-4s1 { grid-column-start: col-start 2;}.gi-6-6, .gi-5-6, .gi-5-5, .gi-4-6, .gi-4-5, .gi-4-4, .gi-3-6, .gi-3-5, .gi-3-4, .gi-2-6, .gi-2-5, .gi-2-4, .gi-1-6, .gi-1-5, .gi-1-4 { grid-column-end: col-end 2;}.gi-9-12, .gi-9s4, .gi-9-11, .gi-9s3, .gi-9-10, .gi-9s2, .gi-8-12, .gi-8s5, .gi-8-11, .gi-8s4, .gi-8-10, .gi-8s3, .gi-7-12, .gi-7s6, .gi-7-11, .gi-7s5, .gi-7-10, .gi-7s4, .gi-6-9, .gi-6s4, .gi-6-8, .gi-6s3, .gi-6-7, .gi-6s2, .gi-5-9, .gi-5s5, .gi-5-8, .gi-5s4, .gi-5-7, .gi-5s3, .gi-4-9, .gi-4s6, .gi-4-8, .gi-4s5, .gi-4-7, .gi-4s4, .gi-3-6, .gi-3s4, .gi-3-5, .gi-3s3, .gi-3-4, .gi-3s2, .gi-2-6, .gi-2s5, .gi-2-5, .gi-2s4, .gi-2-4, .gi-2s3, .gi-1-6, .gi-1s6, .gi-1-5, .gi-1s5, .gi-1-4, .gi-1s4 { --innerCols: 2;}.gi-9s4, .gi-9s3, .gi-9s2, .gi-8s5, .gi-8s4, .gi-8s3, .gi-7s6, .gi-7s5, .gi-7s4, .gi-6s4, .gi-6s3, .gi-6s2, .gi-5s5, .gi-5s4, .gi-5s3, .gi-4s6, .gi-4s5, .gi-4s4, .gi-3s4, .gi-3s3, .gi-3s2, .gi-2s5, .gi-2s4, .gi-2s3, .gi-1s6, .gi-1s5, .gi-1s4 { grid-column-end: span 3;}.gi-9-12, .gi-9s4, .gi-9-11, .gi-9s3, .gi-9-10, .gi-9s2, .gi-9-9, .gi-9s1, .gi-8-12, .gi-8s5, .gi-8-11, .gi-8s4, .gi-8-10, .gi-8s3, .gi-8-9, .gi-8s2, .gi-8-8, .gi-8s1, .gi-7-12, .gi-7s6, .gi-7-11, .gi-7s5, .gi-7-10, .gi-7s4, .gi-7-9, .gi-7s3, .gi-7-8, .gi-7s2, .gi-7-7, .gi-7s1 { grid-column-start: col-start 3;}.gi-9-9, .gi-8-9, .gi-8-8, .gi-7-9, .gi-7-8, .gi-7-7, .gi-6-9, .gi-6-8, .gi-6-7, .gi-5-9, .gi-5-8, .gi-5-7, .gi-4-9, .gi-4-8, .gi-4-7, .gi-3-9, .gi-3-8, .gi-3-7, .gi-2-9, .gi-2-8, .gi-2-7, .gi-1-9, .gi-1-8, .gi-1-7 { grid-column-end: col-end 3;}.gi-6-12, .gi-6s7, .gi-6-11, .gi-6s6, .gi-6-10, .gi-6s5, .gi-5-12, .gi-5s8, .gi-5-11, .gi-5s7, .gi-5-10, .gi-5s6, .gi-4-12, .gi-4s9, .gi-4-11, .gi-4s8, .gi-4-10, .gi-4s7, .gi-3-9, .gi-3s7, .gi-3-8, .gi-3s6, .gi-3-7, .gi-3s5, .gi-2-9, .gi-2s8, .gi-2-8, .gi-2s7, .gi-2-7, .gi-2s6, .gi-1-9, .gi-1s9, .gi-1-8, .gi-1s8, .gi-1-7, .gi-1s7 { --innerCols: 3;}.gi-6s7, .gi-6s6, .gi-6s5, .gi-5s8, .gi-5s7, .gi-5s6, .gi-4s9, .gi-4s8, .gi-4s7, .gi-3s7, .gi-3s6, .gi-3s5, .gi-2s8, .gi-2s7, .gi-2s6, .gi-1s9, .gi-1s8, .gi-1s7 { grid-column-end: span 5;}.gi-12-12, .gi-12s1, .gi-11-12, .gi-11s2, .gi-11-11, .gi-11s1, .gi-10-12, .gi-10s3, .gi-10-11, .gi-10s2, .gi-10-10, .gi-10s1 { grid-column-start: col-start 4;}.gi-12-12, .gi-11-12, .gi-11-11, .gi-10-12, .gi-10-11, .gi-10-10, .gi-9-12, .gi-9-11, .gi-9-10, .gi-8-12, .gi-8-11, .gi-8-10, .gi-7-12, .gi-7-11, .gi-7-10, .gi-6-12, .gi-6-11, .gi-6-10, .gi-5-12, .gi-5-11, .gi-5-10, .gi-4-12, .gi-4-11, .gi-4-10, .gi-3-12, .gi-3-11, .gi-3-10, .gi-2-12, .gi-2-11, .gi-2-10, .gi-1-12, .gi-1-11, .gi-1-10 { grid-column-end: col-end 4;}.gi-3-12, .gi-3s10, .gi-3-11, .gi-3s9, .gi-3-10, .gi-3s8, .gi-2-12, .gi-2s11, .gi-2-11, .gi-2s10, .gi-2-10, .gi-2s9, .gi-1-12, .gi-1s12, .gi-1-11, .gi-1s11, .gi-1-10, .gi-1s10 { --innerCols: 4;}.gi-3s10, .gi-3s9, .gi-3s8, .gi-2s11, .gi-2s10, .gi-2s9, .gi-1s12, .gi-1s11, .gi-1s10 { grid-column-end: span 7;}@media (min-width: 641px) and (min-height: 500px) { .gi-1-12, .gi-1s12, .gi-1-11, .gi-1s11, .gi-1-10, .gi-1s10, .gi-1-9, .gi-1s9, .gi-1-8, .gi-1s8, .gi-1-7, .gi-1s7, .gi-1-6, .gi-1s6, .gi-1-5, .gi-1s5, .gi-1-4, .gi-1s4, .gi-1-3, .gi-1s3, .gi-1-2, .gi-1s2, .gi-1-1, .gi-1s1 { grid-column-start: col-start 1; } .gi-1-1 { grid-column-end: col-end 1; } .gi-12-12, .gi-12s1, .gi-11-12, .gi-11s2, .gi-11-11, .gi-11s1, .gi-10-10, .gi-10s1, .gi-9-9, .gi-9s1, .gi-8-9, .gi-8s2, .gi-8-8, .gi-8s1, .gi-7-7, .gi-7s1, .gi-6-6, .gi-6s1, .gi-5-6, .gi-5s2, .gi-5-5, .gi-5s1, .gi-4-4, .gi-4s1, .gi-3-3, .gi-3s1, .gi-2-3, .gi-2s2, .gi-2-2, .gi-2s1, .gi-1-1, .gi-1s1 { --innerCols: 1; } .gi-12s1, .gi-11s2, .gi-11s1, .gi-10s1, .gi-9s1, .gi-8s2, .gi-8s1, .gi-7s1, .gi-6s1, .gi-5s2, .gi-5s1, .gi-4s1, .gi-3s1, .gi-2s2, .gi-2s1, .gi-1s1 { grid-column-end: span 1; } .gi-3-12, .gi-3s10, .gi-3-11, .gi-3s9, .gi-3-10, .gi-3s8, .gi-3-9, .gi-3s7, .gi-3-8, .gi-3s6, .gi-3-7, .gi-3s5, .gi-3-6, .gi-3s4, .gi-3-5, .gi-3s3, .gi-3-4, .gi-3s2, .gi-3-3, .gi-3s1, .gi-2-12, .gi-2s11, .gi-2-11, .gi-2s10, .gi-2-10, .gi-2s9, .gi-2-9, .gi-2s8, .gi-2-8, .gi-2s7, .gi-2-7, .gi-2s6, .gi-2-6, .gi-2s5, .gi-2-5, .gi-2s4, .gi-2-4, .gi-2s3, .gi-2-3, .gi-2s2, .gi-2-2, .gi-2s1 { grid-column-start: col-start 2; } .gi-3-3, .gi-2-3, .gi-2-2, .gi-1-3, .gi-1-2 { grid-column-end: col-end 2; } .gi-10-12, .gi-10s3, .gi-10-11, .gi-10s2, .gi-9-10, .gi-9s2, .gi-8-10, .gi-8s3, .gi-7-9, .gi-7s3, .gi-7-8, .gi-7s2, .gi-6-7, .gi-6s2, .gi-5-7, .gi-5s3, .gi-4-6, .gi-4s3, .gi-4-5, .gi-4s2, .gi-3-4, .gi-3s2, .gi-2-4, .gi-2s3, .gi-1-3, .gi-1s3, .gi-1-2, .gi-1s2 { --innerCols: 2; } .gi-10s3, .gi-10s2, .gi-9s2, .gi-8s3, .gi-7s3, .gi-7s2, .gi-6s2, .gi-5s3, .gi-4s3, .gi-4s2, .gi-3s2, .gi-2s3, .gi-1s3, .gi-1s2 { grid-column-end: span 3; } .gi-4-12, .gi-4s9, .gi-4-11, .gi-4s8, .gi-4-10, .gi-4s7, .gi-4-9, .gi-4s6, .gi-4-8, .gi-4s5, .gi-4-7, .gi-4s4, .gi-4-6, .gi-4s3, .gi-4-5, .gi-4s2, .gi-4-4, .gi-4s1 { grid-column-start: col-start 3; } .gi-4-4, .gi-3-4, .gi-2-4, .gi-1-4 { grid-column-end: col-end 3; } .gi-9-12, .gi-9s4, .gi-9-11, .gi-9s3, .gi-8-12, .gi-8s5, .gi-8-11, .gi-8s4, .gi-7-10, .gi-7s4, .gi-6-9, .gi-6s4, .gi-6-8, .gi-6s3, .gi-5-9, .gi-5s5, .gi-5-8, .gi-5s4, .gi-4-7, .gi-4s4, .gi-3-6, .gi-3s4, .gi-3-5, .gi-3s3, .gi-2-6, .gi-2s5, .gi-2-5, .gi-2s4, .gi-1-4, .gi-1s4 { --innerCols: 3; } .gi-9s4, .gi-9s3, .gi-8s5, .gi-8s4, .gi-7s4, .gi-6s4, .gi-6s3, .gi-5s5, .gi-5s4, .gi-4s4, .gi-3s4, .gi-3s3, .gi-2s5, .gi-2s4, .gi-1s4 { grid-column-end: span 5; } .gi-6-12, .gi-6s7, .gi-6-11, .gi-6s6, .gi-6-10, .gi-6s5, .gi-6-9, .gi-6s4, .gi-6-8, .gi-6s3, .gi-6-7, .gi-6s2, .gi-6-6, .gi-6s1, .gi-5-12, .gi-5s8, .gi-5-11, .gi-5s7, .gi-5-10, .gi-5s6, .gi-5-9, .gi-5s5, .gi-5-8, .gi-5s4, .gi-5-7, .gi-5s3, .gi-5-6, .gi-5s2, .gi-5-5, .gi-5s1 { grid-column-start: col-start 4; } .gi-6-6, .gi-5-6, .gi-5-5, .gi-4-6, .gi-4-5, .gi-3-6, .gi-3-5, .gi-2-6, .gi-2-5, .gi-1-6, .gi-1-5 { grid-column-end: col-end 4; } .gi-7-12, .gi-7s6, .gi-7-11, .gi-7s5, .gi-6-10, .gi-6s5, .gi-5-10, .gi-5s6, .gi-4-9, .gi-4s6, .gi-4-8, .gi-4s5, .gi-3-7, .gi-3s5, .gi-2-7, .gi-2s6, .gi-1-6, .gi-1s6, .gi-1-5, .gi-1s5 { --innerCols: 4; } .gi-7s6, .gi-7s5, .gi-6s5, .gi-5s6, .gi-4s6, .gi-4s5, .gi-3s5, .gi-2s6, .gi-1s6, .gi-1s5 { grid-column-end: span 7; } .gi-7-12, .gi-7s6, .gi-7-11, .gi-7s5, .gi-7-10, .gi-7s4, .gi-7-9, .gi-7s3, .gi-7-8, .gi-7s2, .gi-7-7, .gi-7s1 { grid-column-start: col-start 5; } .gi-7-7, .gi-6-7, .gi-5-7, .gi-4-7, .gi-3-7, .gi-2-7, .gi-1-7 { grid-column-end: col-end 5; } .gi-6-12, .gi-6s7, .gi-6-11, .gi-6s6, .gi-5-12, .gi-5s8, .gi-5-11, .gi-5s7, .gi-4-10, .gi-4s7, .gi-3-9, .gi-3s7, .gi-3-8, .gi-3s6, .gi-2-9, .gi-2s8, .gi-2-8, .gi-2s7, .gi-1-7, .gi-1s7 { --innerCols: 5; } .gi-6s7, .gi-6s6, .gi-5s8, .gi-5s7, .gi-4s7, .gi-3s7, .gi-3s6, .gi-2s8, .gi-2s7, .gi-1s7 { grid-column-end: span 9; } .gi-9-12, .gi-9s4, .gi-9-11, .gi-9s3, .gi-9-10, .gi-9s2, .gi-9-9, .gi-9s1, .gi-8-12, .gi-8s5, .gi-8-11, .gi-8s4, .gi-8-10, .gi-8s3, .gi-8-9, .gi-8s2, .gi-8-8, .gi-8s1 { grid-column-start: col-start 6; } .gi-9-9, .gi-8-9, .gi-8-8, .gi-7-9, .gi-7-8, .gi-6-9, .gi-6-8, .gi-5-9, .gi-5-8, .gi-4-9, .gi-4-8, .gi-3-9, .gi-3-8, .gi-2-9, .gi-2-8, .gi-1-9, .gi-1-8 { grid-column-end: col-end 6; } .gi-4-12, .gi-4s9, .gi-4-11, .gi-4s8, .gi-3-10, .gi-3s8, .gi-2-10, .gi-2s9, .gi-1-9, .gi-1s9, .gi-1-8, .gi-1s8 { --innerCols: 6; } .gi-4s9, .gi-4s8, .gi-3s8, .gi-2s9, .gi-1s9, .gi-1s8 { grid-column-end: span 11; } .gi-10-12, .gi-10s3, .gi-10-11, .gi-10s2, .gi-10-10, .gi-10s1 { grid-column-start: col-start 7; } .gi-10-10, .gi-9-10, .gi-8-10, .gi-7-10, .gi-6-10, .gi-5-10, .gi-4-10, .gi-3-10, .gi-2-10, .gi-1-10 { grid-column-end: col-end 7; } .gi-3-12, .gi-3s10, .gi-3-11, .gi-3s9, .gi-2-12, .gi-2s11, .gi-2-11, .gi-2s10, .gi-1-10, .gi-1s10 { --innerCols: 7; } .gi-3s10, .gi-3s9, .gi-2s11, .gi-2s10, .gi-1s10 { grid-column-end: span 13; } .gi-12-12, .gi-12s1, .gi-11-12, .gi-11s2, .gi-11-11, .gi-11s1 { grid-column-start: col-start 8; } .gi-12-12, .gi-11-12, .gi-11-11, .gi-10-12, .gi-10-11, .gi-9-12, .gi-9-11, .gi-8-12, .gi-8-11, .gi-7-12, .gi-7-11, .gi-6-12, .gi-6-11, .gi-5-12, .gi-5-11, .gi-4-12, .gi-4-11, .gi-3-12, .gi-3-11, .gi-2-12, .gi-2-11, .gi-1-12, .gi-1-11 { grid-column-end: col-end 8; } .gi-1-12, .gi-1s12, .gi-1-11, .gi-1s11 { --innerCols: 8; } .gi-1s12, .gi-1s11 { grid-column-end: span 15; }}@media (min-width: 1025px) { .gi-1-12, .gi-1s12, .gi-1-11, .gi-1s11, .gi-1-10, .gi-1s10, .gi-1-9, .gi-1s9, .gi-1-8, .gi-1s8, .gi-1-7, .gi-1s7, .gi-1-6, .gi-1s6, .gi-1-5, .gi-1s5, .gi-1-4, .gi-1s4, .gi-1-3, .gi-1s3, .gi-1-2, .gi-1s2, .gi-1-1, .gi-1s1 { grid-column-start: col-start 1; } .gi-1-1 { grid-column-end: col-end 1; } .gi-12-12, .gi-12s1, .gi-11-11, .gi-11s1, .gi-10-10, .gi-10s1, .gi-9-9, .gi-9s1, .gi-8-8, .gi-8s1, .gi-7-7, .gi-7s1, .gi-6-6, .gi-6s1, .gi-5-5, .gi-5s1, .gi-4-4, .gi-4s1, .gi-3-3, .gi-3s1, .gi-2-2, .gi-2s1, .gi-1-1, .gi-1s1 { --innerCols: 1; } .gi-12s1, .gi-11s1, .gi-10s1, .gi-9s1, .gi-8s1, .gi-7s1, .gi-6s1, .gi-5s1, .gi-4s1, .gi-3s1, .gi-2s1, .gi-1s1 { grid-column-end: span 1; } .gi-2-12, .gi-2s11, .gi-2-11, .gi-2s10, .gi-2-10, .gi-2s9, .gi-2-9, .gi-2s8, .gi-2-8, .gi-2s7, .gi-2-7, .gi-2s6, .gi-2-6, .gi-2s5, .gi-2-5, .gi-2s4, .gi-2-4, .gi-2s3, .gi-2-3, .gi-2s2, .gi-2-2, .gi-2s1 { grid-column-start: col-start 2; } .gi-2-2, .gi-1-2 { grid-column-end: col-end 2; } .gi-11-12, .gi-11s2, .gi-10-11, .gi-10s2, .gi-9-10, .gi-9s2, .gi-8-9, .gi-8s2, .gi-7-8, .gi-7s2, .gi-6-7, .gi-6s2, .gi-5-6, .gi-5s2, .gi-4-5, .gi-4s2, .gi-3-4, .gi-3s2, .gi-2-3, .gi-2s2, .gi-1-2, .gi-1s2 { --innerCols: 2; } .gi-11s2, .gi-10s2, .gi-9s2, .gi-8s2, .gi-7s2, .gi-6s2, .gi-5s2, .gi-4s2, .gi-3s2, .gi-2s2, .gi-1s2 { grid-column-end: span 3; } .gi-3-12, .gi-3s10, .gi-3-11, .gi-3s9, .gi-3-10, .gi-3s8, .gi-3-9, .gi-3s7, .gi-3-8, .gi-3s6, .gi-3-7, .gi-3s5, .gi-3-6, .gi-3s4, .gi-3-5, .gi-3s3, .gi-3-4, .gi-3s2, .gi-3-3, .gi-3s1 { grid-column-start: col-start 3; } .gi-3-3, .gi-2-3, .gi-1-3 { grid-column-end: col-end 3; } .gi-10-12, .gi-10s3, .gi-9-11, .gi-9s3, .gi-8-10, .gi-8s3, .gi-7-9, .gi-7s3, .gi-6-8, .gi-6s3, .gi-5-7, .gi-5s3, .gi-4-6, .gi-4s3, .gi-3-5, .gi-3s3, .gi-2-4, .gi-2s3, .gi-1-3, .gi-1s3 { --innerCols: 3; } .gi-10s3, .gi-9s3, .gi-8s3, .gi-7s3, .gi-6s3, .gi-5s3, .gi-4s3, .gi-3s3, .gi-2s3, .gi-1s3 { grid-column-end: span 5; } .gi-4-12, .gi-4s9, .gi-4-11, .gi-4s8, .gi-4-10, .gi-4s7, .gi-4-9, .gi-4s6, .gi-4-8, .gi-4s5, .gi-4-7, .gi-4s4, .gi-4-6, .gi-4s3, .gi-4-5, .gi-4s2, .gi-4-4, .gi-4s1 { grid-column-start: col-start 4; } .gi-4-4, .gi-3-4, .gi-2-4, .gi-1-4 { grid-column-end: col-end 4; } .gi-9-12, .gi-9s4, .gi-8-11, .gi-8s4, .gi-7-10, .gi-7s4, .gi-6-9, .gi-6s4, .gi-5-8, .gi-5s4, .gi-4-7, .gi-4s4, .gi-3-6, .gi-3s4, .gi-2-5, .gi-2s4, .gi-1-4, .gi-1s4 { --innerCols: 4; } .gi-9s4, .gi-8s4, .gi-7s4, .gi-6s4, .gi-5s4, .gi-4s4, .gi-3s4, .gi-2s4, .gi-1s4 { grid-column-end: span 7; } .gi-5-12, .gi-5s8, .gi-5-11, .gi-5s7, .gi-5-10, .gi-5s6, .gi-5-9, .gi-5s5, .gi-5-8, .gi-5s4, .gi-5-7, .gi-5s3, .gi-5-6, .gi-5s2, .gi-5-5, .gi-5s1 { grid-column-start: col-start 5; } .gi-5-5, .gi-4-5, .gi-3-5, .gi-2-5, .gi-1-5 { grid-column-end: col-end 5; } .gi-8-12, .gi-8s5, .gi-7-11, .gi-7s5, .gi-6-10, .gi-6s5, .gi-5-9, .gi-5s5, .gi-4-8, .gi-4s5, .gi-3-7, .gi-3s5, .gi-2-6, .gi-2s5, .gi-1-5, .gi-1s5 { --innerCols: 5; } .gi-8s5, .gi-7s5, .gi-6s5, .gi-5s5, .gi-4s5, .gi-3s5, .gi-2s5, .gi-1s5 { grid-column-end: span 9; } .gi-6-12, .gi-6s7, .gi-6-11, .gi-6s6, .gi-6-10, .gi-6s5, .gi-6-9, .gi-6s4, .gi-6-8, .gi-6s3, .gi-6-7, .gi-6s2, .gi-6-6, .gi-6s1 { grid-column-start: col-start 6; } .gi-6-6, .gi-5-6, .gi-4-6, .gi-3-6, .gi-2-6, .gi-1-6 { grid-column-end: col-end 6; } .gi-7-12, .gi-7s6, .gi-6-11, .gi-6s6, .gi-5-10, .gi-5s6, .gi-4-9, .gi-4s6, .gi-3-8, .gi-3s6, .gi-2-7, .gi-2s6, .gi-1-6, .gi-1s6 { --innerCols: 6; } .gi-7s6, .gi-6s6, .gi-5s6, .gi-4s6, .gi-3s6, .gi-2s6, .gi-1s6 { grid-column-end: span 11; } .gi-7-12, .gi-7s6, .gi-7-11, .gi-7s5, .gi-7-10, .gi-7s4, .gi-7-9, .gi-7s3, .gi-7-8, .gi-7s2, .gi-7-7, .gi-7s1 { grid-column-start: col-start 7; } .gi-7-7, .gi-6-7, .gi-5-7, .gi-4-7, .gi-3-7, .gi-2-7, .gi-1-7 { grid-column-end: col-end 7; } .gi-6-12, .gi-6s7, .gi-5-11, .gi-5s7, .gi-4-10, .gi-4s7, .gi-3-9, .gi-3s7, .gi-2-8, .gi-2s7, .gi-1-7, .gi-1s7 { --innerCols: 7; } .gi-6s7, .gi-5s7, .gi-4s7, .gi-3s7, .gi-2s7, .gi-1s7 { grid-column-end: span 13; } .gi-8-12, .gi-8s5, .gi-8-11, .gi-8s4, .gi-8-10, .gi-8s3, .gi-8-9, .gi-8s2, .gi-8-8, .gi-8s1 { grid-column-start: col-start 8; } .gi-8-8, .gi-7-8, .gi-6-8, .gi-5-8, .gi-4-8, .gi-3-8, .gi-2-8, .gi-1-8 { grid-column-end: col-end 8; } .gi-5-12, .gi-5s8, .gi-4-11, .gi-4s8, .gi-3-10, .gi-3s8, .gi-2-9, .gi-2s8, .gi-1-8, .gi-1s8 { --innerCols: 8; } .gi-5s8, .gi-4s8, .gi-3s8, .gi-2s8, .gi-1s8 { grid-column-end: span 15; } .gi-9-12, .gi-9s4, .gi-9-11, .gi-9s3, .gi-9-10, .gi-9s2, .gi-9-9, .gi-9s1 { grid-column-start: col-start 9; } .gi-9-9, .gi-8-9, .gi-7-9, .gi-6-9, .gi-5-9, .gi-4-9, .gi-3-9, .gi-2-9, .gi-1-9 { grid-column-end: col-end 9; } .gi-4-12, .gi-4s9, .gi-3-11, .gi-3s9, .gi-2-10, .gi-2s9, .gi-1-9, .gi-1s9 { --innerCols: 9; } .gi-4s9, .gi-3s9, .gi-2s9, .gi-1s9 { grid-column-end: span 17; } .gi-10-12, .gi-10s3, .gi-10-11, .gi-10s2, .gi-10-10, .gi-10s1 { grid-column-start: col-start 10; } .gi-10-10, .gi-9-10, .gi-8-10, .gi-7-10, .gi-6-10, .gi-5-10, .gi-4-10, .gi-3-10, .gi-2-10, .gi-1-10 { grid-column-end: col-end 10; } .gi-3-12, .gi-3s10, .gi-2-11, .gi-2s10, .gi-1-10, .gi-1s10 { --innerCols: 10; } .gi-3s10, .gi-2s10, .gi-1s10 { grid-column-end: span 19; } .gi-11-12, .gi-11s2, .gi-11-11, .gi-11s1 { grid-column-start: col-start 11; } .gi-11-11, .gi-10-11, .gi-9-11, .gi-8-11, .gi-7-11, .gi-6-11, .gi-5-11, .gi-4-11, .gi-3-11, .gi-2-11, .gi-1-11 { grid-column-end: col-end 11; } .gi-2-12, .gi-2s11, .gi-1-11, .gi-1s11 { --innerCols: 11; } .gi-2s11, .gi-1s11 { grid-column-end: span 21; } .gi-12-12, .gi-12s1 { grid-column-start: col-start 12; } .gi-12-12, .gi-11-12, .gi-10-12, .gi-9-12, .gi-8-12, .gi-7-12, .gi-6-12, .gi-5-12, .gi-4-12, .gi-3-12, .gi-2-12, .gi-1-12 { grid-column-end: col-end 12; } .gi-1-12, .gi-1s12 { --innerCols: 12; } .gi-1s12 { grid-column-end: span 23; }}/*** Column Grid MediaQuery exceptions:* With these exceptions you can define other grid positions and spans* depending on the desired viewport**/@media (max-width: 640px) { .gi-1-4-phone, .gi-1s4-phone, .gi-1-3-phone, .gi-1s3-phone, .gi-1-2-phone, .gi-1s2-phone, .gi-1-1-phone, .gi-1s1-phone { grid-column-start: col-start 1; } .gi-1-1-phone { grid-column-end: col-end 1; } .gi-4-4-phone, .gi-4s1-phone, .gi-3-3-phone, .gi-3s1-phone, .gi-2-2-phone, .gi-2s1-phone, .gi-1-1-phone, .gi-1s1-phone { --innerCols: 1; } .gi-4s1-phone, .gi-3s1-phone, .gi-2s1-phone, .gi-1s1-phone { grid-column-end: span 1; } .gi-2-4-phone, .gi-2s3-phone, .gi-2-3-phone, .gi-2s2-phone, .gi-2-2-phone, .gi-2s1-phone { grid-column-start: col-start 2; } .gi-2-2-phone, .gi-1-2-phone { grid-column-end: col-end 2; } .gi-3-4-phone, .gi-3s2-phone, .gi-2-3-phone, .gi-2s2-phone, .gi-1-2-phone, .gi-1s2-phone { --innerCols: 2; } .gi-3s2-phone, .gi-2s2-phone, .gi-1s2-phone { grid-column-end: span 3; } .gi-3-4-phone, .gi-3s2-phone, .gi-3-3-phone, .gi-3s1-phone { grid-column-start: col-start 3; } .gi-3-3-phone, .gi-2-3-phone, .gi-1-3-phone { grid-column-end: col-end 3; } .gi-2-4-phone, .gi-2s3-phone, .gi-1-3-phone, .gi-1s3-phone { --innerCols: 3; } .gi-2s3-phone, .gi-1s3-phone { grid-column-end: span 5; } .gi-4-4-phone, .gi-4s1-phone { grid-column-start: col-start 4; } .gi-4-4-phone, .gi-3-4-phone, .gi-2-4-phone, .gi-1-4-phone { grid-column-end: col-end 4; } .gi-1-4-phone, .gi-1s4-phone { --innerCols: 4; } .gi-1s4-phone { grid-column-end: span 7; }}@media (min-width: 641px) and (min-height: 500px) { .gi-1-8-tablet-up, .gi-1s8-tablet-up, .gi-1-7-tablet-up, .gi-1s7-tablet-up, .gi-1-6-tablet-up, .gi-1s6-tablet-up, .gi-1-5-tablet-up, .gi-1s5-tablet-up, .gi-1-4-tablet-up, .gi-1s4-tablet-up, .gi-1-3-tablet-up, .gi-1s3-tablet-up, .gi-1-2-tablet-up, .gi-1s2-tablet-up, .gi-1-1-tablet-up, .gi-1s1-tablet-up { grid-column-start: col-start 1; } .gi-1-1-tablet-up { grid-column-end: col-end 1; } .gi-8-8-tablet-up, .gi-8s1-tablet-up, .gi-7-7-tablet-up, .gi-7s1-tablet-up, .gi-6-6-tablet-up, .gi-6s1-tablet-up, .gi-5-5-tablet-up, .gi-5s1-tablet-up, .gi-4-4-tablet-up, .gi-4s1-tablet-up, .gi-3-3-tablet-up, .gi-3s1-tablet-up, .gi-2-2-tablet-up, .gi-2s1-tablet-up, .gi-1-1-tablet-up, .gi-1s1-tablet-up { --innerCols: 1; } .gi-8s1-tablet-up, .gi-7s1-tablet-up, .gi-6s1-tablet-up, .gi-5s1-tablet-up, .gi-4s1-tablet-up, .gi-3s1-tablet-up, .gi-2s1-tablet-up, .gi-1s1-tablet-up { grid-column-end: span 1; } .gi-2-8-tablet-up, .gi-2s7-tablet-up, .gi-2-7-tablet-up, .gi-2s6-tablet-up, .gi-2-6-tablet-up, .gi-2s5-tablet-up, .gi-2-5-tablet-up, .gi-2s4-tablet-up, .gi-2-4-tablet-up, .gi-2s3-tablet-up, .gi-2-3-tablet-up, .gi-2s2-tablet-up, .gi-2-2-tablet-up, .gi-2s1-tablet-up { grid-column-start: col-start 2; } .gi-2-2-tablet-up, .gi-1-2-tablet-up { grid-column-end: col-end 2; } .gi-7-8-tablet-up, .gi-7s2-tablet-up, .gi-6-7-tablet-up, .gi-6s2-tablet-up, .gi-5-6-tablet-up, .gi-5s2-tablet-up, .gi-4-5-tablet-up, .gi-4s2-tablet-up, .gi-3-4-tablet-up, .gi-3s2-tablet-up, .gi-2-3-tablet-up, .gi-2s2-tablet-up, .gi-1-2-tablet-up, .gi-1s2-tablet-up { --innerCols: 2; } .gi-7s2-tablet-up, .gi-6s2-tablet-up, .gi-5s2-tablet-up, .gi-4s2-tablet-up, .gi-3s2-tablet-up, .gi-2s2-tablet-up, .gi-1s2-tablet-up { grid-column-end: span 3; } .gi-3-8-tablet-up, .gi-3s6-tablet-up, .gi-3-7-tablet-up, .gi-3s5-tablet-up, .gi-3-6-tablet-up, .gi-3s4-tablet-up, .gi-3-5-tablet-up, .gi-3s3-tablet-up, .gi-3-4-tablet-up, .gi-3s2-tablet-up, .gi-3-3-tablet-up, .gi-3s1-tablet-up { grid-column-start: col-start 3; } .gi-3-3-tablet-up, .gi-2-3-tablet-up, .gi-1-3-tablet-up { grid-column-end: col-end 3; } .gi-6-8-tablet-up, .gi-6s3-tablet-up, .gi-5-7-tablet-up, .gi-5s3-tablet-up, .gi-4-6-tablet-up, .gi-4s3-tablet-up, .gi-3-5-tablet-up, .gi-3s3-tablet-up, .gi-2-4-tablet-up, .gi-2s3-tablet-up, .gi-1-3-tablet-up, .gi-1s3-tablet-up { --innerCols: 3; } .gi-6s3-tablet-up, .gi-5s3-tablet-up, .gi-4s3-tablet-up, .gi-3s3-tablet-up, .gi-2s3-tablet-up, .gi-1s3-tablet-up { grid-column-end: span 5; } .gi-4-8-tablet-up, .gi-4s5-tablet-up, .gi-4-7-tablet-up, .gi-4s4-tablet-up, .gi-4-6-tablet-up, .gi-4s3-tablet-up, .gi-4-5-tablet-up, .gi-4s2-tablet-up, .gi-4-4-tablet-up, .gi-4s1-tablet-up { grid-column-start: col-start 4; } .gi-4-4-tablet-up, .gi-3-4-tablet-up, .gi-2-4-tablet-up, .gi-1-4-tablet-up { grid-column-end: col-end 4; } .gi-5-8-tablet-up, .gi-5s4-tablet-up, .gi-4-7-tablet-up, .gi-4s4-tablet-up, .gi-3-6-tablet-up, .gi-3s4-tablet-up, .gi-2-5-tablet-up, .gi-2s4-tablet-up, .gi-1-4-tablet-up, .gi-1s4-tablet-up { --innerCols: 4; } .gi-5s4-tablet-up, .gi-4s4-tablet-up, .gi-3s4-tablet-up, .gi-2s4-tablet-up, .gi-1s4-tablet-up { grid-column-end: span 7; } .gi-5-8-tablet-up, .gi-5s4-tablet-up, .gi-5-7-tablet-up, .gi-5s3-tablet-up, .gi-5-6-tablet-up, .gi-5s2-tablet-up, .gi-5-5-tablet-up, .gi-5s1-tablet-up { grid-column-start: col-start 5; } .gi-5-5-tablet-up, .gi-4-5-tablet-up, .gi-3-5-tablet-up, .gi-2-5-tablet-up, .gi-1-5-tablet-up { grid-column-end: col-end 5; } .gi-4-8-tablet-up, .gi-4s5-tablet-up, .gi-3-7-tablet-up, .gi-3s5-tablet-up, .gi-2-6-tablet-up, .gi-2s5-tablet-up, .gi-1-5-tablet-up, .gi-1s5-tablet-up { --innerCols: 5; } .gi-4s5-tablet-up, .gi-3s5-tablet-up, .gi-2s5-tablet-up, .gi-1s5-tablet-up { grid-column-end: span 9; } .gi-6-8-tablet-up, .gi-6s3-tablet-up, .gi-6-7-tablet-up, .gi-6s2-tablet-up, .gi-6-6-tablet-up, .gi-6s1-tablet-up { grid-column-start: col-start 6; } .gi-6-6-tablet-up, .gi-5-6-tablet-up, .gi-4-6-tablet-up, .gi-3-6-tablet-up, .gi-2-6-tablet-up, .gi-1-6-tablet-up { grid-column-end: col-end 6; } .gi-3-8-tablet-up, .gi-3s6-tablet-up, .gi-2-7-tablet-up, .gi-2s6-tablet-up, .gi-1-6-tablet-up, .gi-1s6-tablet-up { --innerCols: 6; } .gi-3s6-tablet-up, .gi-2s6-tablet-up, .gi-1s6-tablet-up { grid-column-end: span 11; } .gi-7-8-tablet-up, .gi-7s2-tablet-up, .gi-7-7-tablet-up, .gi-7s1-tablet-up { grid-column-start: col-start 7; } .gi-7-7-tablet-up, .gi-6-7-tablet-up, .gi-5-7-tablet-up, .gi-4-7-tablet-up, .gi-3-7-tablet-up, .gi-2-7-tablet-up, .gi-1-7-tablet-up { grid-column-end: col-end 7; } .gi-2-8-tablet-up, .gi-2s7-tablet-up, .gi-1-7-tablet-up, .gi-1s7-tablet-up { --innerCols: 7; } .gi-2s7-tablet-up, .gi-1s7-tablet-up { grid-column-end: span 13; } .gi-8-8-tablet-up, .gi-8s1-tablet-up { grid-column-start: col-start 8; } .gi-8-8-tablet-up, .gi-7-8-tablet-up, .gi-6-8-tablet-up, .gi-5-8-tablet-up, .gi-4-8-tablet-up, .gi-3-8-tablet-up, .gi-2-8-tablet-up, .gi-1-8-tablet-up { grid-column-end: col-end 8; } .gi-1-8-tablet-up, .gi-1s8-tablet-up { --innerCols: 8; } .gi-1s8-tablet-up { grid-column-end: span 15; }}@media (min-width: 1025px) { .gi-1-12-desktop-up, .gi-1s12-desktop-up, .gi-1-11-desktop-up, .gi-1s11-desktop-up, .gi-1-10-desktop-up, .gi-1s10-desktop-up, .gi-1-9-desktop-up, .gi-1s9-desktop-up, .gi-1-8-desktop-up, .gi-1s8-desktop-up, .gi-1-7-desktop-up, .gi-1s7-desktop-up, .gi-1-6-desktop-up, .gi-1s6-desktop-up, .gi-1-5-desktop-up, .gi-1s5-desktop-up, .gi-1-4-desktop-up, .gi-1s4-desktop-up, .gi-1-3-desktop-up, .gi-1s3-desktop-up, .gi-1-2-desktop-up, .gi-1s2-desktop-up, .gi-1-1-desktop-up, .gi-1s1-desktop-up { grid-column-start: col-start 1; } .gi-1-1-desktop-up { grid-column-end: col-end 1; } .gi-12-12-desktop-up, .gi-12s1-desktop-up, .gi-11-11-desktop-up, .gi-11s1-desktop-up, .gi-10-10-desktop-up, .gi-10s1-desktop-up, .gi-9-9-desktop-up, .gi-9s1-desktop-up, .gi-8-8-desktop-up, .gi-8s1-desktop-up, .gi-7-7-desktop-up, .gi-7s1-desktop-up, .gi-6-6-desktop-up, .gi-6s1-desktop-up, .gi-5-5-desktop-up, .gi-5s1-desktop-up, .gi-4-4-desktop-up, .gi-4s1-desktop-up, .gi-3-3-desktop-up, .gi-3s1-desktop-up, .gi-2-2-desktop-up, .gi-2s1-desktop-up, .gi-1-1-desktop-up, .gi-1s1-desktop-up { --innerCols: 1; } .gi-12s1-desktop-up, .gi-11s1-desktop-up, .gi-10s1-desktop-up, .gi-9s1-desktop-up, .gi-8s1-desktop-up, .gi-7s1-desktop-up, .gi-6s1-desktop-up, .gi-5s1-desktop-up, .gi-4s1-desktop-up, .gi-3s1-desktop-up, .gi-2s1-desktop-up, .gi-1s1-desktop-up { grid-column-end: span 1; } .gi-2-12-desktop-up, .gi-2s11-desktop-up, .gi-2-11-desktop-up, .gi-2s10-desktop-up, .gi-2-10-desktop-up, .gi-2s9-desktop-up, .gi-2-9-desktop-up, .gi-2s8-desktop-up, .gi-2-8-desktop-up, .gi-2s7-desktop-up, .gi-2-7-desktop-up, .gi-2s6-desktop-up, .gi-2-6-desktop-up, .gi-2s5-desktop-up, .gi-2-5-desktop-up, .gi-2s4-desktop-up, .gi-2-4-desktop-up, .gi-2s3-desktop-up, .gi-2-3-desktop-up, .gi-2s2-desktop-up, .gi-2-2-desktop-up, .gi-2s1-desktop-up { grid-column-start: col-start 2; } .gi-2-2-desktop-up, .gi-1-2-desktop-up { grid-column-end: col-end 2; } .gi-11-12-desktop-up, .gi-11s2-desktop-up, .gi-10-11-desktop-up, .gi-10s2-desktop-up, .gi-9-10-desktop-up, .gi-9s2-desktop-up, .gi-8-9-desktop-up, .gi-8s2-desktop-up, .gi-7-8-desktop-up, .gi-7s2-desktop-up, .gi-6-7-desktop-up, .gi-6s2-desktop-up, .gi-5-6-desktop-up, .gi-5s2-desktop-up, .gi-4-5-desktop-up, .gi-4s2-desktop-up, .gi-3-4-desktop-up, .gi-3s2-desktop-up, .gi-2-3-desktop-up, .gi-2s2-desktop-up, .gi-1-2-desktop-up, .gi-1s2-desktop-up { --innerCols: 2; } .gi-11s2-desktop-up, .gi-10s2-desktop-up, .gi-9s2-desktop-up, .gi-8s2-desktop-up, .gi-7s2-desktop-up, .gi-6s2-desktop-up, .gi-5s2-desktop-up, .gi-4s2-desktop-up, .gi-3s2-desktop-up, .gi-2s2-desktop-up, .gi-1s2-desktop-up { grid-column-end: span 3; } .gi-3-12-desktop-up, .gi-3s10-desktop-up, .gi-3-11-desktop-up, .gi-3s9-desktop-up, .gi-3-10-desktop-up, .gi-3s8-desktop-up, .gi-3-9-desktop-up, .gi-3s7-desktop-up, .gi-3-8-desktop-up, .gi-3s6-desktop-up, .gi-3-7-desktop-up, .gi-3s5-desktop-up, .gi-3-6-desktop-up, .gi-3s4-desktop-up, .gi-3-5-desktop-up, .gi-3s3-desktop-up, .gi-3-4-desktop-up, .gi-3s2-desktop-up, .gi-3-3-desktop-up, .gi-3s1-desktop-up { grid-column-start: col-start 3; } .gi-3-3-desktop-up, .gi-2-3-desktop-up, .gi-1-3-desktop-up { grid-column-end: col-end 3; } .gi-10-12-desktop-up, .gi-10s3-desktop-up, .gi-9-11-desktop-up, .gi-9s3-desktop-up, .gi-8-10-desktop-up, .gi-8s3-desktop-up, .gi-7-9-desktop-up, .gi-7s3-desktop-up, .gi-6-8-desktop-up, .gi-6s3-desktop-up, .gi-5-7-desktop-up, .gi-5s3-desktop-up, .gi-4-6-desktop-up, .gi-4s3-desktop-up, .gi-3-5-desktop-up, .gi-3s3-desktop-up, .gi-2-4-desktop-up, .gi-2s3-desktop-up, .gi-1-3-desktop-up, .gi-1s3-desktop-up { --innerCols: 3; } .gi-10s3-desktop-up, .gi-9s3-desktop-up, .gi-8s3-desktop-up, .gi-7s3-desktop-up, .gi-6s3-desktop-up, .gi-5s3-desktop-up, .gi-4s3-desktop-up, .gi-3s3-desktop-up, .gi-2s3-desktop-up, .gi-1s3-desktop-up { grid-column-end: span 5; } .gi-4-12-desktop-up, .gi-4s9-desktop-up, .gi-4-11-desktop-up, .gi-4s8-desktop-up, .gi-4-10-desktop-up, .gi-4s7-desktop-up, .gi-4-9-desktop-up, .gi-4s6-desktop-up, .gi-4-8-desktop-up, .gi-4s5-desktop-up, .gi-4-7-desktop-up, .gi-4s4-desktop-up, .gi-4-6-desktop-up, .gi-4s3-desktop-up, .gi-4-5-desktop-up, .gi-4s2-desktop-up, .gi-4-4-desktop-up, .gi-4s1-desktop-up { grid-column-start: col-start 4; } .gi-4-4-desktop-up, .gi-3-4-desktop-up, .gi-2-4-desktop-up, .gi-1-4-desktop-up { grid-column-end: col-end 4; } .gi-9-12-desktop-up, .gi-9s4-desktop-up, .gi-8-11-desktop-up, .gi-8s4-desktop-up, .gi-7-10-desktop-up, .gi-7s4-desktop-up, .gi-6-9-desktop-up, .gi-6s4-desktop-up, .gi-5-8-desktop-up, .gi-5s4-desktop-up, .gi-4-7-desktop-up, .gi-4s4-desktop-up, .gi-3-6-desktop-up, .gi-3s4-desktop-up, .gi-2-5-desktop-up, .gi-2s4-desktop-up, .gi-1-4-desktop-up, .gi-1s4-desktop-up { --innerCols: 4; } .gi-9s4-desktop-up, .gi-8s4-desktop-up, .gi-7s4-desktop-up, .gi-6s4-desktop-up, .gi-5s4-desktop-up, .gi-4s4-desktop-up, .gi-3s4-desktop-up, .gi-2s4-desktop-up, .gi-1s4-desktop-up { grid-column-end: span 7; } .gi-5-12-desktop-up, .gi-5s8-desktop-up, .gi-5-11-desktop-up, .gi-5s7-desktop-up, .gi-5-10-desktop-up, .gi-5s6-desktop-up, .gi-5-9-desktop-up, .gi-5s5-desktop-up, .gi-5-8-desktop-up, .gi-5s4-desktop-up, .gi-5-7-desktop-up, .gi-5s3-desktop-up, .gi-5-6-desktop-up, .gi-5s2-desktop-up, .gi-5-5-desktop-up, .gi-5s1-desktop-up { grid-column-start: col-start 5; } .gi-5-5-desktop-up, .gi-4-5-desktop-up, .gi-3-5-desktop-up, .gi-2-5-desktop-up, .gi-1-5-desktop-up { grid-column-end: col-end 5; } .gi-8-12-desktop-up, .gi-8s5-desktop-up, .gi-7-11-desktop-up, .gi-7s5-desktop-up, .gi-6-10-desktop-up, .gi-6s5-desktop-up, .gi-5-9-desktop-up, .gi-5s5-desktop-up, .gi-4-8-desktop-up, .gi-4s5-desktop-up, .gi-3-7-desktop-up, .gi-3s5-desktop-up, .gi-2-6-desktop-up, .gi-2s5-desktop-up, .gi-1-5-desktop-up, .gi-1s5-desktop-up { --innerCols: 5; } .gi-8s5-desktop-up, .gi-7s5-desktop-up, .gi-6s5-desktop-up, .gi-5s5-desktop-up, .gi-4s5-desktop-up, .gi-3s5-desktop-up, .gi-2s5-desktop-up, .gi-1s5-desktop-up { grid-column-end: span 9; } .gi-6-12-desktop-up, .gi-6s7-desktop-up, .gi-6-11-desktop-up, .gi-6s6-desktop-up, .gi-6-10-desktop-up, .gi-6s5-desktop-up, .gi-6-9-desktop-up, .gi-6s4-desktop-up, .gi-6-8-desktop-up, .gi-6s3-desktop-up, .gi-6-7-desktop-up, .gi-6s2-desktop-up, .gi-6-6-desktop-up, .gi-6s1-desktop-up { grid-column-start: col-start 6; } .gi-6-6-desktop-up, .gi-5-6-desktop-up, .gi-4-6-desktop-up, .gi-3-6-desktop-up, .gi-2-6-desktop-up, .gi-1-6-desktop-up { grid-column-end: col-end 6; } .gi-7-12-desktop-up, .gi-7s6-desktop-up, .gi-6-11-desktop-up, .gi-6s6-desktop-up, .gi-5-10-desktop-up, .gi-5s6-desktop-up, .gi-4-9-desktop-up, .gi-4s6-desktop-up, .gi-3-8-desktop-up, .gi-3s6-desktop-up, .gi-2-7-desktop-up, .gi-2s6-desktop-up, .gi-1-6-desktop-up, .gi-1s6-desktop-up { --innerCols: 6; } .gi-7s6-desktop-up, .gi-6s6-desktop-up, .gi-5s6-desktop-up, .gi-4s6-desktop-up, .gi-3s6-desktop-up, .gi-2s6-desktop-up, .gi-1s6-desktop-up { grid-column-end: span 11; } .gi-7-12-desktop-up, .gi-7s6-desktop-up, .gi-7-11-desktop-up, .gi-7s5-desktop-up, .gi-7-10-desktop-up, .gi-7s4-desktop-up, .gi-7-9-desktop-up, .gi-7s3-desktop-up, .gi-7-8-desktop-up, .gi-7s2-desktop-up, .gi-7-7-desktop-up, .gi-7s1-desktop-up { grid-column-start: col-start 7; } .gi-7-7-desktop-up, .gi-6-7-desktop-up, .gi-5-7-desktop-up, .gi-4-7-desktop-up, .gi-3-7-desktop-up, .gi-2-7-desktop-up, .gi-1-7-desktop-up { grid-column-end: col-end 7; } .gi-6-12-desktop-up, .gi-6s7-desktop-up, .gi-5-11-desktop-up, .gi-5s7-desktop-up, .gi-4-10-desktop-up, .gi-4s7-desktop-up, .gi-3-9-desktop-up, .gi-3s7-desktop-up, .gi-2-8-desktop-up, .gi-2s7-desktop-up, .gi-1-7-desktop-up, .gi-1s7-desktop-up { --innerCols: 7; } .gi-6s7-desktop-up, .gi-5s7-desktop-up, .gi-4s7-desktop-up, .gi-3s7-desktop-up, .gi-2s7-desktop-up, .gi-1s7-desktop-up { grid-column-end: span 13; } .gi-8-12-desktop-up, .gi-8s5-desktop-up, .gi-8-11-desktop-up, .gi-8s4-desktop-up, .gi-8-10-desktop-up, .gi-8s3-desktop-up, .gi-8-9-desktop-up, .gi-8s2-desktop-up, .gi-8-8-desktop-up, .gi-8s1-desktop-up { grid-column-start: col-start 8; } .gi-8-8-desktop-up, .gi-7-8-desktop-up, .gi-6-8-desktop-up, .gi-5-8-desktop-up, .gi-4-8-desktop-up, .gi-3-8-desktop-up, .gi-2-8-desktop-up, .gi-1-8-desktop-up { grid-column-end: col-end 8; } .gi-5-12-desktop-up, .gi-5s8-desktop-up, .gi-4-11-desktop-up, .gi-4s8-desktop-up, .gi-3-10-desktop-up, .gi-3s8-desktop-up, .gi-2-9-desktop-up, .gi-2s8-desktop-up, .gi-1-8-desktop-up, .gi-1s8-desktop-up { --innerCols: 8; } .gi-5s8-desktop-up, .gi-4s8-desktop-up, .gi-3s8-desktop-up, .gi-2s8-desktop-up, .gi-1s8-desktop-up { grid-column-end: span 15; } .gi-9-12-desktop-up, .gi-9s4-desktop-up, .gi-9-11-desktop-up, .gi-9s3-desktop-up, .gi-9-10-desktop-up, .gi-9s2-desktop-up, .gi-9-9-desktop-up, .gi-9s1-desktop-up { grid-column-start: col-start 9; } .gi-9-9-desktop-up, .gi-8-9-desktop-up, .gi-7-9-desktop-up, .gi-6-9-desktop-up, .gi-5-9-desktop-up, .gi-4-9-desktop-up, .gi-3-9-desktop-up, .gi-2-9-desktop-up, .gi-1-9-desktop-up { grid-column-end: col-end 9; } .gi-4-12-desktop-up, .gi-4s9-desktop-up, .gi-3-11-desktop-up, .gi-3s9-desktop-up, .gi-2-10-desktop-up, .gi-2s9-desktop-up, .gi-1-9-desktop-up, .gi-1s9-desktop-up { --innerCols: 9; } .gi-4s9-desktop-up, .gi-3s9-desktop-up, .gi-2s9-desktop-up, .gi-1s9-desktop-up { grid-column-end: span 17; } .gi-10-12-desktop-up, .gi-10s3-desktop-up, .gi-10-11-desktop-up, .gi-10s2-desktop-up, .gi-10-10-desktop-up, .gi-10s1-desktop-up { grid-column-start: col-start 10; } .gi-10-10-desktop-up, .gi-9-10-desktop-up, .gi-8-10-desktop-up, .gi-7-10-desktop-up, .gi-6-10-desktop-up, .gi-5-10-desktop-up, .gi-4-10-desktop-up, .gi-3-10-desktop-up, .gi-2-10-desktop-up, .gi-1-10-desktop-up { grid-column-end: col-end 10; } .gi-3-12-desktop-up, .gi-3s10-desktop-up, .gi-2-11-desktop-up, .gi-2s10-desktop-up, .gi-1-10-desktop-up, .gi-1s10-desktop-up { --innerCols: 10; } .gi-3s10-desktop-up, .gi-2s10-desktop-up, .gi-1s10-desktop-up { grid-column-end: span 19; } .gi-11-12-desktop-up, .gi-11s2-desktop-up, .gi-11-11-desktop-up, .gi-11s1-desktop-up { grid-column-start: col-start 11; } .gi-11-11-desktop-up, .gi-10-11-desktop-up, .gi-9-11-desktop-up, .gi-8-11-desktop-up, .gi-7-11-desktop-up, .gi-6-11-desktop-up, .gi-5-11-desktop-up, .gi-4-11-desktop-up, .gi-3-11-desktop-up, .gi-2-11-desktop-up, .gi-1-11-desktop-up { grid-column-end: col-end 11; } .gi-2-12-desktop-up, .gi-2s11-desktop-up, .gi-1-11-desktop-up, .gi-1s11-desktop-up { --innerCols: 11; } .gi-2s11-desktop-up, .gi-1s11-desktop-up { grid-column-end: span 21; } .gi-12-12-desktop-up, .gi-12s1-desktop-up { grid-column-start: col-start 12; } .gi-12-12-desktop-up, .gi-11-12-desktop-up, .gi-10-12-desktop-up, .gi-9-12-desktop-up, .gi-8-12-desktop-up, .gi-7-12-desktop-up, .gi-6-12-desktop-up, .gi-5-12-desktop-up, .gi-4-12-desktop-up, .gi-3-12-desktop-up, .gi-2-12-desktop-up, .gi-1-12-desktop-up { grid-column-end: col-end 12; } .gi-1-12-desktop-up, .gi-1s12-desktop-up { --innerCols: 12; } .gi-1s12-desktop-up { grid-column-end: span 23; }}body .editor-styles-wrapper,body:not(.wp-admin) { font-family: "PorscheNext", Helvetica, Arial, sans-serif;}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 { font-family: inherit; font-weight: 600;}h1,.h1 { font-size: 1.6875rem; font-style: italic; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em;}@media (min-width: 641px) and (min-height: 500px) { h1,.h1 { font-size: 3rem; }}@media (min-width: 1025px) { h1,.h1 { font-size: 3.75rem; }}h2,.h2,h3,.h3 { font-size: 1.5625rem; line-height: 1.2; letter-spacing: 0.02em;}@media (min-width: 1025px) { h2,.h2,h3,.h3 { font-size: 2.5rem; }}h3,.h3 { font-style: italic; font-weight: 700;}@media (min-width: 641px) and (min-height: 500px) and (max-width: 1024px) { h3,.h3 { font-size: 2rem; }}h4,.h4,h5,.h5 { font-size: 1rem; line-height: 1.4;}@media (min-width: 641px) and (min-height: 500px) { h4,.h4,h5,.h5 { font-size: 1.125rem; }}@media (min-width: 1025px) { h4,.h4,h5,.h5 { font-size: 2rem; }}@media (min-width: 1025px) { h5,.h5 { font-style: italic; letter-spacing: 0.02em; }}.p1, .rte h1,.rte h2,.rte h3,.rte h4,.rte h5,.rte h6 { font-size: 1.375rem; font-style: normal; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em;}@media (min-width: 641px) and (min-height: 500px) { .p1, .rte h1,.rte h2,.rte h3,.rte h4,.rte h5,.rte h6 { font-size: 1.5rem; }}@media (min-width: 1025px) { .p1, .rte h1,.rte h2,.rte h3,.rte h4,.rte h5,.rte h6 { font-size: 1.625rem; line-height: 1.4; }}.p2, .header__navigation ul .menu-item a { font-size: 0.75rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em;}@media (min-width: 641px) and (min-height: 500px) { .p2, .header__navigation ul .menu-item a { font-size: 0.875rem; }}@media (min-width: 1025px) { .p2, .header__navigation ul .menu-item a { font-size: 1.25rem; }}.p3, .footer__navigation .menu-item, .rte:not(.p1, .p2, .pe, .d1, .footer__subscribe__mail, .d2), .pe, .text-media-intro p, p,.p, .p3-bold, .btn { font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.01em;}@media (min-width: 1025px) { .p3, .footer__navigation .menu-item, .rte:not(.p1, .p2, .pe, .d1, .footer__subscribe__mail, .d2), .pe, .text-media-intro p, p,.p, .p3-bold, .btn { font-size: 1.1875rem; }}.p3-bold, .btn { font-weight: 600; line-height: 1.4;}@media (min-width: 1025px) { .p3-bold, .btn { line-height: 1.2; }}.d1, .footer__subscribe__mail, .d2, .footer__subscribe__checkbox-label > p { font-size: 0.875rem; line-height: 1.3; letter-spacing: 0.01em;}@media (min-width: 1025px) { .d1, .footer__subscribe__mail, .d2, .footer__subscribe__checkbox-label > p { font-size: 1rem; line-height: 1.4; }}.d2, .footer__subscribe__checkbox-label > p { font-size: 0.75rem;}.pe, .text-media-intro p { margin: 0; font-size: 1.375rem; line-height: 1.4; letter-spacing: 0;}@media (min-width: 641px) and (min-height: 500px) { .pe, .text-media-intro p { font-size: 1.688rem; }}@media (min-width: 1025px) { .pe, .text-media-intro p { font-size: 2rem; }}.button-text { font-size: 0.875rem; font-style: normal; font-weight: 600; line-height: 1.2em; letter-spacing: 0.01em;}@media (min-width: 1025px) { .button-text { font-size: 1.1875rem; }}.rte { margin-bottom: 0;}.rte p:first-child { margin: 0;}.rte p:not(:first-child) { margin: 15px 0 0;}@media (min-width: 641px) and (min-height: 500px) { .rte p:not(:first-child) { margin: 20px 0 0; }}@media (min-width: 1025px) { .rte p:not(:first-child) { margin: 30px 0 0; }}.rte ul + p:not(:first-child) { margin-top: 40px;}@media (min-width: 641px) and (min-height: 500px) { .rte ul + p:not(:first-child) { margin-top: 50px; }}.rte ul:first-child,.rte ol:first-child { margin-top: 0;}.rte ol,.rte ul { margin: 40px 0 0; padding-left: 0; counter-reset: ol-counter;}@media (min-width: 641px) and (min-height: 500px) { .rte ol,.rte ul { margin: 50px 0 0; }}.rte ol > li,.rte ul > li { position: relative; display: block; padding-left: 20px; counter-increment: ol-counter; line-height: 1.8;}.rte ol > li::before,.rte ul > li::before { position: absolute; left: 0; content: counter(ol-counter) ".";}@media (min-width: 641px) and (min-height: 500px) { .rte ol > li,.rte ul > li { padding-left: 40px; }}.rte ul > li::before { top: 11px; width: 6px; height: 6px; background-color: #000; content: "";}.rte a { padding: 0 0 2px; background-image: linear-gradient(to right, transparent 0%, transparent 33%, #000 33%, #000 100%); background-repeat: repeat-x; background-position: 100% 1.25em; background-size: 150% 1px; color: #000; font-style: italic; font-weight: 700; text-decoration: none; transition: background-position 800ms ease-in-out, background-size 800ms ease-in-out;}.rte a:hover { background-position: -100% 1.25em; background-size: 200% 1px;}.rte strong,.rte b { font-weight: 700;}.rte h1,.rte h2,.rte h3,.rte h4,.rte h5,.rte h6 { margin: 30px 0; text-align: center;}@media (min-width: 641px) and (min-height: 500px) { .rte h1,.rte h2,.rte h3,.rte h4,.rte h5,.rte h6 { margin: 35px 0; }}@media (min-width: 1025px) { .rte h1,.rte h2,.rte h3,.rte h4,.rte h5,.rte h6 { margin: 50px 0; }}.rte h1:last-child,.rte h2:last-child,.rte h3:last-child,.rte h4:last-child,.rte h5:last-child,.rte h6:last-child { margin: 0;}.rte h1:first-child,.rte h2:first-child,.rte h3:first-child,.rte h4:first-child,.rte h5:first-child,.rte h6:first-child { margin-top: 0;}.input-reset { padding: 0; border: 0; appearance: none; outline: none;}.button-reset { overflow: visible; padding: 0; appearance: none; color: inherit; font: inherit; line-height: normal; -webkit-user-select: none; user-select: none;}.button-reset::-moz-focus-inner { padding: 0; border: 0;}.button-reset:focus { outline: 0;}.header-user { position: relative; height: 100%; /* Menu arrow */}.header-user::before { position: absolute; top: calc(100% - 1px); left: 50%; z-index: 2; display: none; width: 25px; height: 25px; border: 1px solid #000; border-right: 0; border-bottom: 0; border-radius: 4px 0 0; background: #fff; transform: translate3d(-50%, -50%, 0) rotate(45deg); content: "";}.header-user[data-menuopen=true]::before { display: block;}.header-user__user-button { --size: 25px; --iconOpacity: 0.4; --bgOpacity: 0; --imageOpacity: 0; --outlineColor: #d9d9d9; position: relative; top: 50%; overflow: hidden; width: var(--size); height: var(--size); border: 0; border-radius: 50%; background: transparent; text-indent: -999em; transform: translate3d(0, -50%, 0); transition: outline-color 150ms linear; cursor: pointer; /* Gray background */ /* Image background */}@media (min-width: 1025px) { .header-user__user-button { --size: 40px; }}@media (hover: hover), (min-width: 1025px) { .header-user__user-button:hover { --iconOpacity: 1; --bgOpacity: 1; --outlineColor: #000; }}.header-user__user-button::before, .header-user__user-button::after { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; transition: opacity 150ms linear; content: "";}.header-user__user-button::before { opacity: var(--bgOpacity); background: #ececec;}.header-user__user-button::after { opacity: var(--imageOpacity); background: var(--profilepicture); background-size: cover;}.header-user__user-button__icon { --size: 19px; --pos: 3px; position: absolute; top: var(--pos); left: var(--pos); z-index: 1; width: var(--size); height: var(--size); opacity: var(--iconOpacity); transition: opacity 150ms linear;}@media (min-width: 1025px) { .header-user__user-button__icon { --size: 30px; --pos: 5px; }}.header-user[data-menuopen=true] .header-user__user-button { --outlineColor: #000; --iconOpacity: 1;}.header-user[data-hasuser=true] .header-user__user-button { --bgOpacity: 1;}.header-user[data-hasuserpicture=true] .header-user__user-button { --imageOpacity: 1; --iconOpacity: 0; outline: 2px solid var(--outlineColor);}.header-user .header-user__user-menu { position: absolute; top: calc(100% - 1px); left: calc(50% - 70px); display: none; overflow: hidden; width: 140px; height: auto; border: 1px solid #000; border-radius: 5px; font-weight: 600; text-align: center;}.header-user .header-user__user-menu__item { position: relative; z-index: 3; display: block; overflow: hidden; padding: 12px 35px; background: #fff; cursor: pointer;}@media (hover: hover), (min-width: 1025px) { .header-user .header-user__user-menu__item:hover { background: #f2f2f2; }}.header-user[data-menuopen=true] .header-user__user-menu { display: block;}.header-user[data-hasuser=true] .header-user__user-menu__item--login, .header-user[data-hasuser=false] .header-user__user-menu__item--logout { display: none;}body.page.no-scroll { overflow: hidden;}.header { position: fixed; z-index: 1000;}.header__container { display: flex; padding: 0; width: 100vw; height: 45px; justify-content: flex-end; background-color: #fff; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.05)); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: height 500ms ease-in-out, background-color 200ms ease-in-out 200ms, padding 500ms ease-in-out, -webkit-backdrop-filter 500ms ease-in-out; transition: height 500ms ease-in-out, background-color 200ms ease-in-out 200ms, backdrop-filter 500ms ease-in-out, padding 500ms ease-in-out; transition: height 500ms ease-in-out, background-color 200ms ease-in-out 200ms, backdrop-filter 500ms ease-in-out, padding 500ms ease-in-out, -webkit-backdrop-filter 500ms ease-in-out;}@media (min-width: 641px) and (min-height: 500px) { .header__container { padding-right: 50px; height: 50px; }}@media (min-width: 1441px) { .header__container { padding-right: 150px; height: 80px; }}.header__edge { position: absolute; bottom: -14px; left: -41px; z-index: 1; width: 346px; height: 38px; opacity: 1; transition: opacity 200ms ease-in-out 300ms;}@media (min-width: 641px) and (min-height: 500px) { .header__edge { bottom: -19px; left: -69px; width: 454px; height: 50px; }}@media (min-width: 1441px) { .header__edge { bottom: -23px; left: -1px; width: 545px; height: 60px; }}.header__logo { position: absolute; top: 18px; left: 39px; z-index: 2; margin-bottom: 0; text-decoration: none; transform: translateX(0); transition: transform 500ms ease-in-out, left 500ms ease-in-out, top 500ms ease-in-out;}@media (min-width: 641px) and (min-height: 500px) { .header__logo { top: 19px; left: 50px; transform: translate(0); }}@media (min-width: 1441px) { .header__logo { top: 30px; left: 90px; gap: 21px; transform: translate(0); }}.header__logo__container { position: relative;}@media (min-width: 641px) and (min-height: 500px) { .header__logo__container { display: flex; gap: 14px; align-items: center; }}@media (min-width: 1441px) { .header__logo__container { gap: 21px; }}.header__logo__svg-logo { width: 22px; height: 25px; fill: #000; transform: scale(1); transform-origin: top; transition: transform 300ms ease-in-out, fill 500ms ease-in-out;}@media (min-width: 641px) and (min-height: 500px) { .header__logo__svg-logo { width: 25px; height: 28px; }}@media (min-width: 1441px) { .header__logo__svg-logo { width: 38px; height: 42px; }}.header__logo__svg-text { position: absolute; top: 7px; left: 35px; width: 47px; height: 11px; fill: #000; transform: scale(1); transform-origin: top; transition: transform 500ms ease-in-out, fill 500ms ease-in-out;}@media (min-width: 641px) and (min-height: 500px) { .header__logo__svg-text { position: initial; width: 52px; height: 12px; }}@media (min-width: 1441px) { .header__logo__svg-text { width: 79px; height: 18px; }}.header__navigation { z-index: 3; width: 100%;}.header__navigation ul { display: flex; margin-right: 25px; padding: 0; gap: 25px; flex-direction: column; align-items: flex-end; list-style: none;}@media (max-width: 1024px) { .header__navigation ul { pointer-events: none; } .navigation--active .header__navigation ul { pointer-events: auto; }}@media (min-width: 641px) and (min-height: 500px) { .header__navigation ul { margin: 0 0 0 auto; height: 100%; gap: 35px; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }}@media (min-width: 1441px) { .header__navigation ul { gap: 50px; }}@media (max-width: 640px) { .header__navigation ul li { font-size: 12px; line-height: 1.5; }}.header__navigation ul .menu-item { height: 50px;}@media (min-width: 641px) and (min-height: 500px) { .header__navigation ul .menu-item { height: -moz-fit-content; height: fit-content; }}.header__navigation ul .menu-item a { opacity: 0.4; color: #000; font-size: 11px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: opacity 300ms ease-in-out; pointer-events: all;}@media (min-width: 641px) and (min-height: 500px) { .header__navigation ul .menu-item a { font-size: 13px; }}@media (min-width: 1441px) { .header__navigation ul .menu-item a { font-size: 16px; }}.header__navigation ul .menu-item a:hover { opacity: 1; transition: opacity 250ms ease-in-out;}.header__navigation ul .menu-item.current-menu-item a { opacity: 1;}.header__navigation ul .menu-item__tag { position: relative; top: -15px; display: inline-block; padding: 2px 4px; border-radius: 4px; background: #d5001c; color: #fff; font-size: 9px; line-height: 1.44em; font-weight: 600;}@media (max-width: 640px) { .header__navigation--burger > ul { margin-right: 0; align-items: center; } .header__navigation--burger > ul li.menu-item a { opacity: 0; color: #fff; font-size: 22px; line-height: 50px; pointer-events: none; } .header__navigation--burger > ul li.menu-item.current-menu-item a { opacity: 0; }}.header__navigation__burger { position: absolute; top: 0; right: 0; display: flex; padding-right: 15px; width: 48px; height: 48px; justify-content: center; align-items: center;}@media (min-width: 641px) and (min-height: 500px) { .header__navigation__burger { display: none; }}.header__navigation__burger__box { position: relative; display: block; width: 18px; height: 11px; cursor: pointer;}.header__navigation__burger__bun, .header__navigation__burger__patty { position: absolute; left: 0; display: block; width: 100%; height: 1px; background-color: #000; content: "";}.header__navigation__burger__bun { transition: transform 0.3s linear, opacity 0.1s linear, width 0.2s ease-out, background-color 0.5s ease-in-out; transition-delay: 0.2s, 0.3s, 0s, 0s;}.header__navigation__burger__bun:first-of-type { top: 0;}.header__navigation__burger__bun:last-of-type { bottom: 0;}.header__navigation__burger__patty { top: 5px; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s ease-in-out;}.navigation--active .header__navigation__burger__bun { opacity: 0; background-color: #fff; transition-delay: 0s, 0.1s, 0s, 0s;}.navigation--active .header__navigation__burger__bun:first-of-type { transform: translate3d(0, 10px, 0);}.navigation--active .header__navigation__burger__bun:last-of-type { transform: translate3d(0, -10px, 0);}.navigation--active .header__navigation__burger__patty { background-color: #fff; transform: rotate(45deg); transition-delay: 0.3s, 0s;}.navigation--active .header__navigation__burger__patty + .header__navigation__burger__patty { transform: rotate(-45deg);}.header.navigation--active .header__container { padding: 310px 0 0; height: 100vh; flex-direction: column; justify-content: flex-start; background-color: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: height 500ms ease-in-out, background-color 200ms ease-in-out 100ms, padding 500ms ease-in-out, -webkit-backdrop-filter 200ms ease-in-out 100ms; transition: height 500ms ease-in-out, background-color 200ms ease-in-out 100ms, backdrop-filter 200ms ease-in-out 100ms, padding 500ms ease-in-out; transition: height 500ms ease-in-out, background-color 200ms ease-in-out 100ms, backdrop-filter 200ms ease-in-out 100ms, padding 500ms ease-in-out, -webkit-backdrop-filter 200ms ease-in-out 100ms;}.header.navigation--active .header__edge { opacity: 0; transition: opacity 120ms ease-in-out 50ms;}.header.navigation--active .header__logo { top: 119px; left: 50%; transform: translateX(-50%);}.header.navigation--active .header__logo__svg-logo { fill: #fff; transform: scale(4); transition: transform 300ms ease-in-out 200ms, fill 500ms ease-in-out;}.header.navigation--active .header__logo__svg-text { fill: #fff; transform: scale(1.68) translate3d(-28px, 67px, 0);}.header.navigation--active .header__navigation ul .menu-item a { opacity: 1; transition: opacity 200ms ease-in-out 300ms; pointer-events: all;}.header.navigation--active .header__navigation ul .menu-item.current-menu-item a { opacity: 1; text-decoration: underline;}.page-template-page-webtool header { position: sticky; top: 0; /* Needs to be higher than the tutorial cards' z-index! Otherwise the tutorials will be shown above the login modal */ z-index: 20000;}.page-template-page-webtool header > .header { position: static; z-index: 1;}.page-template-page-webtool #content { height: calc(100vh - 45px);}@media (min-width: 641px) { .page-template-page-webtool #content { height: calc(100vh - 50px); }}@media (min-width: 1441px) { .page-template-page-webtool #content { height: calc(100vh - 80px); }}.page-template-page-webtool #webtool-root { position: relative;}.page-template-page-webtool .article { line-height: 0;}.page-template-page-webtool .otgs-development-site-front-end { display: none;}.mapboxgl-map { font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif; overflow: hidden; position: relative; -webkit-tap-highlight-color: rgb(0 0 0/0);}.mapboxgl-canvas { position: absolute; left: 0; top: 0;}.mapboxgl-map:-webkit-full-screen { width: 100%; height: 100%;}.mapboxgl-canary { background-color: salmon;}.mapboxgl-canvas-container.mapboxgl-interactive, .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass { cursor: grab; -webkit-user-select: none; user-select: none;}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer { cursor: pointer;}.mapboxgl-canvas-container.mapboxgl-interactive:active, .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active { cursor: grabbing;}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate, .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas { touch-action: pan-x pan-y;}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan, .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas { touch-action: pinch-zoom;}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas { touch-action: none;}.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right, .mapboxgl-ctrl-top-left, .mapboxgl-ctrl-top-right { position: absolute; pointer-events: none; z-index: 2;}.mapboxgl-ctrl-top-left { top: 0; left: 0;}.mapboxgl-ctrl-top-right { top: 0; right: 0;}.mapboxgl-ctrl-bottom-left { bottom: 0; left: 0;}.mapboxgl-ctrl-bottom-right { right: 0; bottom: 0;}.mapboxgl-ctrl { clear: both; pointer-events: auto; transform: translate(0);}.mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin: 10px 0 0 10px; float: left;}.mapboxgl-ctrl-top-right .mapboxgl-ctrl { margin: 10px 10px 0 0; float: right;}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 10px 10px; float: left;}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 10px 10px 0; float: right;}.mapboxgl-ctrl-group { border-radius: 4px; background: #fff;}.mapboxgl-ctrl-group:not(:empty) { box-shadow: 0 0 0 2px rgb(0 0 0/10%);}@media (-ms-high-contrast: active) { .mapboxgl-ctrl-group:not(:empty) { box-shadow: 0 0 0 2px ButtonText; }}.mapboxgl-ctrl-group button { width: 29px; height: 29px; display: block; padding: 0; outline: none; border: 0; box-sizing: border-box; background-color: transparent; cursor: pointer; overflow: hidden;}.mapboxgl-ctrl-group button + button { border-top: 1px solid #ddd;}.mapboxgl-ctrl button .mapboxgl-ctrl-icon { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50%;}@media (-ms-high-contrast: active) { .mapboxgl-ctrl-icon { background-color: transparent; } .mapboxgl-ctrl-group button + button { border-top: 1px solid ButtonText; }}.mapboxgl-ctrl-attrib-button:focus, .mapboxgl-ctrl-group button:focus { box-shadow: 0 0 2px 2px rgb(0 150 255/100%);}.mapboxgl-ctrl button:disabled { cursor: not-allowed;}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon { opacity: 0.25;}.mapboxgl-ctrl-group button:first-child { border-radius: 4px 4px 0 0;}.mapboxgl-ctrl-group button:last-child { border-radius: 0 0 4px 4px;}.mapboxgl-ctrl-group button:only-child { border-radius: inherit;}.mapboxgl-ctrl button:not(:disabled):hover { background-color: rgb(0 0 0/5%);}.mapboxgl-ctrl-group button:focus:focus-visible { box-shadow: 0 0 2px 2px rgb(0 150 255/100%);}.mapboxgl-ctrl-group button:focus:not(:focus-visible) { box-shadow: none;}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E");}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E");}@media (-ms-high-contrast: active) { .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E"); }}@media (-ms-high-contrast: black-on-white) { .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E"); }}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E");}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E");}@media (-ms-high-contrast: active) { .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E"); }}@media (-ms-high-contrast: black-on-white) { .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E"); }}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E");}@media (-ms-high-contrast: active) { .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E %3C/svg%3E"); }}@media (-ms-high-contrast: black-on-white) { .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E"); }}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E");}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon { animation: mapboxgl-spin 2s linear infinite;}@media (-ms-high-contrast: active) { .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); }}@media (-ms-high-contrast: black-on-white) { .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); } .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E"); }}@keyframes mapboxgl-spin { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); }}a.mapboxgl-ctrl-logo { width: 88px; height: 23px; margin: 0 0 -4px -4px; display: block; background-repeat: no-repeat; cursor: pointer; overflow: hidden; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E");}a.mapboxgl-ctrl-logo.mapboxgl-compact { width: 23px;}@media (-ms-high-contrast: active) { a.mapboxgl-ctrl-logo { background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E"); }}@media (-ms-high-contrast: black-on-white) { a.mapboxgl-ctrl-logo { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23000'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E"); }}.mapboxgl-ctrl.mapboxgl-ctrl-attrib { padding: 0 5px; background-color: rgb(255 255 255/50%); margin: 0;}@media screen { .mapboxgl-ctrl-attrib.mapboxgl-compact { min-height: 20px; padding: 2px 24px 2px 0; margin: 10px; position: relative; background-color: #fff; border-radius: 12px; } .mapboxgl-ctrl-attrib.mapboxgl-compact-show { padding: 2px 28px 2px 8px; visibility: visible; } .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show, .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show { padding: 2px 8px 2px 28px; border-radius: 12px; } .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner { display: none; } .mapboxgl-ctrl-attrib-button { display: none; cursor: pointer; position: absolute; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E"); background-color: rgb(255 255 255/50%); width: 24px; height: 24px; box-sizing: border-box; border-radius: 12px; outline: none; top: 0; right: 0; border: 0; } .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button, .mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button { left: 0; } .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner, .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button { display: block; } .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button { background-color: rgb(0 0 0/5%); } .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact:after { bottom: 0; right: 0; } .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact:after { top: 0; right: 0; } .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:after { top: 0; left: 0; } .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:after { bottom: 0; left: 0; }}@media screen and (-ms-high-contrast: active) { .mapboxgl-ctrl-attrib.mapboxgl-compact:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E"); }}@media screen and (-ms-high-contrast: black-on-white) { .mapboxgl-ctrl-attrib.mapboxgl-compact:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E"); }}.mapboxgl-ctrl-attrib a { color: rgb(0 0 0/75%); text-decoration: none;}.mapboxgl-ctrl-attrib a:hover { color: inherit; text-decoration: underline;}.mapboxgl-ctrl-attrib .mapbox-improve-map { font-weight: 700; margin-left: 2px;}.mapboxgl-attrib-empty { display: none;}.mapboxgl-ctrl-scale { background-color: rgb(255 255 255/75%); font-size: 10px; border: 2px solid #333; border-top: #333; padding: 0 5px; color: #333; box-sizing: border-box; white-space: nowrap;}.mapboxgl-popup { position: absolute; top: 0; left: 0; display: flex; will-change: transform; pointer-events: none;}.mapboxgl-popup-anchor-top, .mapboxgl-popup-anchor-top-left, .mapboxgl-popup-anchor-top-right { flex-direction: column;}.mapboxgl-popup-anchor-bottom, .mapboxgl-popup-anchor-bottom-left, .mapboxgl-popup-anchor-bottom-right { flex-direction: column-reverse;}.mapboxgl-popup-anchor-left { flex-direction: row;}.mapboxgl-popup-anchor-right { flex-direction: row-reverse;}.mapboxgl-popup-tip { width: 0; height: 0; border: 10px solid transparent; z-index: 1;}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { align-self: center; border-top: none; border-bottom-color: #fff;}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip { align-self: flex-start; border-top: none; border-left: none; border-bottom-color: #fff;}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { align-self: flex-end; border-top: none; border-right: none; border-bottom-color: #fff;}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { align-self: center; border-bottom: none; border-top-color: #fff;}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip { align-self: flex-start; border-bottom: none; border-left: none; border-top-color: #fff;}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { align-self: flex-end; border-bottom: none; border-right: none; border-top-color: #fff;}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { align-self: center; border-left: none; border-right-color: #fff;}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { align-self: center; border-right: none; border-left-color: #fff;}.mapboxgl-popup-close-button { position: absolute; right: 0; top: 0; border: 0; border-radius: 0 3px 0 0; cursor: pointer; background-color: transparent;}.mapboxgl-popup-close-button:hover { background-color: rgb(0 0 0/5%);}.mapboxgl-popup-content { position: relative; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgb(0 0 0/10%); padding: 10px 10px 15px; pointer-events: auto;}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content { border-top-left-radius: 0;}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content { border-top-right-radius: 0;}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content { border-bottom-left-radius: 0;}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content { border-bottom-right-radius: 0;}.mapboxgl-popup-track-pointer { display: none;}.mapboxgl-popup-track-pointer * { pointer-events: none; -webkit-user-select: none; user-select: none;}.mapboxgl-map:hover .mapboxgl-popup-track-pointer { display: flex;}.mapboxgl-map:active .mapboxgl-popup-track-pointer { display: none;}.mapboxgl-marker { position: absolute; top: 0; left: 0; will-change: transform; opacity: 1; transition: opacity 0.2s;}.mapboxgl-user-location-dot, .mapboxgl-user-location-dot:before { background-color: #1da1f2; width: 15px; height: 15px; border-radius: 50%;}.mapboxgl-user-location-dot:before { content: ""; position: absolute; animation: mapboxgl-user-location-dot-pulse 2s infinite;}.mapboxgl-user-location-dot:after { border-radius: 50%; border: 2px solid #fff; content: ""; height: 19px; left: -2px; position: absolute; top: -2px; width: 19px; box-sizing: border-box; box-shadow: 0 0 3px rgb(0 0 0/35%);}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading { width: 0; height: 0;}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after, .mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before { content: ""; border-bottom: 7.5px solid #4aa1eb; position: absolute;}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before { border-left: 7.5px solid transparent; transform: translateY(-28px) skewY(-20deg);}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after { border-right: 7.5px solid transparent; transform: translate(7.5px, -28px) skewY(20deg);}@keyframes mapboxgl-user-location-dot-pulse { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(3); opacity: 0; } to { transform: scale(1); opacity: 0; }}.mapboxgl-user-location-dot-stale { background-color: #aaa;}.mapboxgl-user-location-dot-stale:after { display: none;}.mapboxgl-user-location-accuracy-circle { background-color: rgba(29, 161, 242, 0.2); width: 1px; height: 1px; border-radius: 100%;}.mapboxgl-crosshair, .mapboxgl-crosshair .mapboxgl-interactive, .mapboxgl-crosshair .mapboxgl-interactive:active { cursor: crosshair;}.mapboxgl-boxzoom { position: absolute; top: 0; left: 0; width: 0; height: 0; background: #fff; border: 2px dotted #202020; opacity: 0.5;}@media print { .mapbox-improve-map { display: none; }}.mapboxgl-scroll-zoom-blocker, .mapboxgl-touch-pan-blocker { color: #fff; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; justify-content: center; text-align: center; position: absolute; display: flex; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0/70%); opacity: 0; pointer-events: none; transition: opacity 0.75s ease-in-out; transition-delay: 1s;}.mapboxgl-scroll-zoom-blocker-show, .mapboxgl-touch-pan-blocker-show { opacity: 1; transition: opacity 0.1s ease-in-out;}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page, .mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas { touch-action: pan-x pan-y;}.fill-parent { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.btn { --borderRadius: 5px; --borderColor: transparent; --backgroundColor: transparent; --textColor: #fff; --mobileHeight: 35px; --height: 50px; --arrowLeft: 28px; --arrowHeight: 19px; --arrowHoverShift: 0; --buttonVisibleWidth: 100%; --textLeft: 44px; --textRight: 29px; position: relative; display: inline-flex; margin: 0; padding: 0; height: var(--mobileHeight); border: 0; align-items: center; font-family: inherit; text-decoration: none; transform: translate3d(0, 0, 0); cursor: pointer; pointer-events: none;}@media (min-width: 1025px) { .btn { --borderRadius: 10px; --arrowLeft: 29px; --textLeft: 48px; --textRight: 28px; height: var(--height); }}.btn--text-dark, .btn--text-bright { --mobileHeight: 40px; --arrowLeft: 16px;}@media (max-width: 1024px) { .btn--text-dark, .btn--text-bright { --border-radius: 7px; --textRight: 23px; --textLeft: 38px; }}@media (min-width: 1025px) { .btn--text-dark, .btn--text-bright { --arrowLeft: 20px; --arrowHeight: 24px; }}.btn--text-dark { --textColor: #000; --borderColor: #000;}@media (hover: hover), (min-width: 1025px) { .btn--text-dark:hover { --textColor: #fff; --borderColor: transparent; --backgroundColor: #323639; }}.btn--text-bright { --borderColor: #fff;}@media (hover: hover), (min-width: 1025px) { .btn--text-bright:hover { --textColor: #000; --backgroundColor: #fff; }}.btn--icon, .btn--unfold { --backgroundColor: #626669;}@supports ((-webkit-backdrop-filter: blur(32px)) or (backdrop-filter: blur(32px))) { .btn--icon, .btn--unfold { --backgroundColor: rgba(131, 126, 126, 0.25); }}.btn--icon { --width: 40px; --height: 75px; --arrowLeft: 12px; --textColor: transparent; width: var(--width);}@media (min-width: 1025px) { .btn--icon { --arrowLeft: 24px; --arrowHeight: 35px; --width: 80px; }}@media (hover: hover), (min-width: 1025px) { .btn--icon:hover { --backgroundColor: #fff; }}.btn--unfold { --arrowLeft: 12px; --buttonVisibleWidth: 42px; --arrowHoverShift: 13px;}@media (max-width: 1024px) { .btn--unfold { --textLeft: 45px; --textRight: 30px; }}@media (min-width: 1025px) { .btn--unfold { --arrowLeft: 19px; --arrowHeight: 24px; --arrowHoverShift: 3px; --textLeft: 48px; --textRight: 28px; --buttonVisibleWidth: 58px; }}@media (hover: hover), (min-width: 1025px) { .button-hover:hover .btn--unfold, .btn--unfold:hover { --buttonVisibleWidth: 100%; }}.btn::before, .btn::after { display: block; height: 100%; content: "";}.btn::before { position: absolute; width: var(--buttonVisibleWidth); height: 100%; border: 1px solid var(--borderColor); border-radius: var(--borderRadius); background: var(--backgroundColor); background-clip: border-box; transition: background-color 200ms linear, border-color 200ms linear; pointer-events: auto;}@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) { .btn--icon::before, .btn--unfold::before { -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); }}.btn--unfold::before { transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1) 200ms;}@media (hover: hover), (min-width: 1025px) { .button-hover:hover .btn--unfold::before, .btn--unfold:hover::before { transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1); }}.btn::after { background-image: url('data:image/svg+xml;utf8, '); position: absolute; top: 0; left: var(--arrowLeft); width: var(--arrowHeight); background-repeat: no-repeat; background-position: center left; background-size: auto var(--arrowHeight); filter: invert(0); transform: translate3d(0, 0, 0); transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 100ms, filter 200ms linear;}.btn--text-dark::after { background-image: url('data:image/svg+xml;utf8, ');}.btn--unfold::after { transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}@media (hover: hover), (min-width: 1025px) { .btn--icon:hover::after, .btn--text-bright:hover::after, .btn--text-dark:hover::after { filter: invert(1); } .button-hover:hover .btn--unfold::after, .btn--unfold:hover::after { transform: translate3d(var(--arrowHoverShift), 0, 0); transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 150ms; }}.btn__title { position: relative; z-index: 1; margin: 0 var(--textRight) 0 var(--textLeft); color: var(--textColor); text-decoration: none; white-space: nowrap; transition: color 200ms linear;}.btn--icon .btn__title { position: absolute;}.btn--unfold .btn__title { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 500ms cubic-bezier(0.77, 0, 0.175, 1);}@media (hover: hover), (min-width: 1025px) { .button-hover:hover .btn--unfold .btn__title, .btn--unfold:hover .btn__title { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 500ms cubic-bezier(0.77, 0, 0.175, 1) 100ms; }}.big-stage { --appHeight: 100vh; /* stylelint-disable length-zero-no-unit */ --appDownloadHeight: 0px; /* stylelint-enable length-zero-no-unit */ --minuteText: "min"; position: relative; height: var(--appHeight);}[lang^=de-] .big-stage { --minuteText: "Min.";}@media (min-width: 1441px) { .big-stage { margin-top: 80px; } .big-stage { height: 100vh; } .has-app-banner .big-stage { height: calc(100vh - var(--appDownloadHeight)); }}.big-stage__layer-container { position: relative; overflow: hidden; margin: 45px 0 0; height: calc(100% - 45px - var(--appDownloadHeight));}@media (min-width: 641px) and (min-height: 500px) { .big-stage__layer-container { margin-top: 50px; height: calc(100% - 50px - var(--appDownloadHeight)); }}@media (min-width: 1441px) { .big-stage__layer-container { margin-top: 80px; height: calc(100% - 80px); }}.big-stage__video-layer { z-index: 2; transform: translate3d(0, 0, 0); transition: transform 1000ms cubic-bezier(0.895, 0.03, 0.685, 0.22);}.remove-video .big-stage__video-layer { transform: translate3d(0, -101%, 0);}.big-stage__video-layer::before, .big-stage__video-layer::after { position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 100%; content: "";}.big-stage__video-layer::before { height: 500px; background: linear-gradient(to bottom, #000 -2.54%, rgba(0, 0, 0, 0) 63.04%);}@media (min-width: 641px) and (min-height: 500px) { .big-stage__video-layer::before { background: linear-gradient(to bottom, #000 -25.99%, rgba(0, 0, 0, 0) 71.14%); }}@media (min-width: 1025px) { .big-stage__video-layer::before { top: unset; bottom: 0; opacity: 0.8; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 33.97%, #000 89.02%); }}.big-stage__video-layer::after { height: 100%; opacity: 0; background: #000; transition: opacity 300ms linear;}.form-unfold .big-stage__video-layer::after { opacity: 0.5;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__video-layer::after { display: none; }}.big-stage__text { position: relative; z-index: 3; padding: 14px 0 0; opacity: 1; color: #fff; text-align: center; transition: opacity 300ms linear;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__text { padding-top: 19px; }}@media (min-width: 1025px) { .big-stage__text { position: absolute; right: calc((187 * var(--vw-unit)) + 375px); bottom: 0; left: calc(85 * var(--vw-unit)); display: block; margin: unset; padding-top: 0; width: auto; }}@media (min-width: 1441px) { .big-stage__text { right: calc((370 * var(--vw-unit)) + 475px); left: calc(220 * var(--vw-unit)); }}@media (max-width: 640px) { .form-unfold .big-stage__text { opacity: 0; }}.big-stage__text__headline { font-size: 1.6875rem; margin: 25px 0 0; -webkit-hyphens: auto; hyphens: auto;}@media (min-width: 641px) { .big-stage__text__headline { font-size: calc(48px + (54 - 48) * ( (100vw - 641px) / (1025 - 641) )); }}@media (min-width: 1025px) { .big-stage__text__headline { font-size: calc(54px + (60 - 54) * ( (100vw - 1025px) / (1441 - 1025) )); }}@media (min-width: 1441px) { .big-stage__text__headline { font-size: 3.75rem; }}@media (min-width: 641px) and (min-height: 500px) { .big-stage__text__headline { margin-top: 40px; }}@media (min-width: 1441px) { .big-stage__text__headline { margin-top: 0; }}.big-stage__text__bodytext { display: none;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__text__bodytext { display: block; margin: 20px 0 0; padding: 0 calc(96 * var(--vw-unit)); }}@media (min-width: 1025px) { .big-stage__text__bodytext { margin-top: 25px; padding: 0 calc(55 * var(--vw-unit)); }}@media (min-width: 1441px) { .big-stage__text__bodytext { padding: 0 calc(80 * var(--vw-unit)); }}.big-stage__text__scroll-button-container { text-align: center;}.big-stage__text__scroll-button { background-image: url('data:image/svg+xml;utf8, '); display: inline-block; padding: 0; width: 50px; height: 50px; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 35px 35px; text-indent: -999em; transform: rotate(0.25turn); cursor: pointer;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__text__scroll-button { width: 70px; height: 70px; }}.big-stage__video { z-index: 1; object-fit: cover;}.big-stage__map-layer { z-index: 1;}.big-stage__app-teaser-layer { position: absolute; bottom: 100%; left: 0; z-index: 2; display: none; padding: 60px calc(140 * var(--vw-unit)) 65px; width: 100%; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); transform: translate3d(0, 0, 0); transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);}@media (min-width: 641px) and (min-height: 500px) { .big-stage__app-teaser-layer { display: flex; justify-content: center; align-items: center; }}@media (min-width: 1025px) { .big-stage__app-teaser-layer { top: 100%; bottom: unset; padding: 55px calc(495px + (150 * var(--vw-unit))) 75px 20px; }}.show-app-teaser .big-stage__app-teaser-layer { transform: translate3d(0, 100%, 0); transition-delay: 1000ms;}@media (min-width: 1025px) { .show-app-teaser .big-stage__app-teaser-layer { transform: translate3d(0, -100%, 0); }}.big-stage__app-teaser { position: relative; display: flex; width: auto; height: 100%; justify-content: flex-start; align-items: center;}@media (min-width: 1025px) { .big-stage__app-teaser { max-width: calc(730 * var(--vw-unit)); }}.big-stage__app-teaser__headline { display: block; flex: 0 1 auto; text-align: center;}.big-stage__app-teaser__link { background-image: url('data:image/svg+xml;utf8,Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 '); overflow: hidden; margin: 0 0 0 15px; width: 120px; height: 40px; flex: 0 0 120px; background-repeat: no-repeat; background-position: top left; background-size: 100% 100%; text-indent: -999em;}@media (min-width: 1025px) { .big-stage__app-teaser__link { margin-left: calc(50 * var(--vw-unit)); width: 230px; height: 77px; flex: 0 0 230px; }}[lang^=de] .big-stage__app-teaser__link { background-image: url('data:image/svg+xml;utf8,Download_on_the_App_Store_Badge_DE_RGB_blk_092917 ');}[lang^=fr] .big-stage__app-teaser__link { background-image: url('data:image/svg+xml;utf8,Download_on_the_App_Store_Badge_FR_RGB_blk_100517 ');}[lang^=nl] .big-stage__app-teaser__link { background-image: url('data:image/svg+xml;utf8,Download_on_the_App_Store_Badge_NL_RGB_blk_100317 ');}[lang^=es] .big-stage__app-teaser__link { background-image: url('data:image/svg+xml;utf8,Download_on_the_App_Store_Badge_ES_RGB_blk_100217 ');}.big-stage__app-teaser__scrolldown { background-image: url('data:image/svg+xml;utf8, '); position: absolute; bottom: -80px; left: calc(50% - 40px); display: block; overflow: hidden; width: 80px; height: 80px; border: 0; outline: 0; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 30px 30px; text-indent: -99em; transform: rotate(0.25turn); cursor: pointer;}.big-stage__form-layer { position: absolute; right: calc(25 * var(--vw-unit)); bottom: 0; left: calc(25 * var(--vw-unit)); z-index: 3; width: auto; height: 100%; pointer-events: none;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__form-layer { right: calc(50 * var(--vw-unit)); left: unset; width: 375px; }}@media (min-width: 1025px) { .big-stage__form-layer { right: calc(102 * var(--vw-unit)); }}@media (min-width: 1441px) { .big-stage__form-layer { right: calc(150 * var(--vw-unit)); width: 475px; }}.big-stage__form { --sidePadding: 20px; --topPadding: 20px; --unfoldButtonRotation: 0.75turn; position: absolute; top: 100%; left: 0; width: 100%; color: #000; transform: translate3d(0, 0, 0); transition: transform 300ms cubic-bezier(0.77, 0, 0.175, 1); pointer-events: auto;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__form { --sidePadding: 30px; --topPadding: 30px; }}@media (min-width: 1441px) { .big-stage__form { --sidePadding: 45px; --topPadding: 45px; }}.form-unfold .big-stage__form { --unfoldButtonRotation: 0.25turn; transform: translate3d(0, -100%, 0);}.big-stage__form__part--above { position: absolute; bottom: 100%; left: 0; padding: var(--topPadding) 0 20px; width: 100%;}@media (min-width: 1025px) { .big-stage__form__part--above { padding-bottom: 35px; }}.big-stage__form__part--above::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 1000px; border-radius: 10px 10px 0 0; background: #fff; content: "";}.big-stage__form__part--below { padding: 0 0 25px;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__form__part--below { padding-bottom: 30px; }}@media (min-width: 1025px) { .big-stage__form__part--below { padding-bottom: 45px; }}.big-stage__form__unfold { background-image: url('data:image/svg+xml;utf8, '); position: absolute; top: var(--topPadding); right: var(--sidePadding); display: block; overflow: hidden; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center center; background-size: 30px 30px; text-indent: -99em; transform: rotate(var(--unfoldButtonRotation)); transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1); cursor: pointer;}@media (min-width: 1441px) { .big-stage__form__unfold { margin: -4px -8px 0 0; width: 45px; height: 45px; }}.big-stage__form__headline { position: relative; margin: 0 0 15px; padding: 0 calc(var(--sidePadding) + 30px) 0 var(--sidePadding);}@media (min-width: 1025px) { .big-stage__form__headline { margin-bottom: 25px; padding-right: calc(var(--sidePadding) + 45px); }}.big-stage__form__element { position: relative; display: flex; overflow: hidden; margin: 0 0 20px; padding: 0 var(--sidePadding); flex-flow: row wrap; align-items: baseline;}@media (min-width: 1025px) { .big-stage__form__element { margin-bottom: 35px; }}.big-stage__form__element:last-child { margin-bottom: 0;}.big-stage__form__element--start { align-items: flex-start;}.big-stage__form__element--duration::before { position: relative; order: 2; z-index: 3; display: block; padding: 9px 11px; flex: 0 0 auto; border-radius: 5px; background: #f4f4f4; content: attr(data-value) " " var(--minuteText);}.big-stage__form__label { position: relative; order: 1; z-index: 3; display: block; margin: 0 0 10px; width: 100%; flex: 0 0 100%; pointer-events: none;}@media (min-width: 1025px) { .big-stage__form__label { margin-bottom: 15px; }}.big-stage__form__label--duration { margin: 0; width: auto; flex: 1 1 auto;}.big-stage__form__input { order: 3; width: 100%; flex: 0 0 100%; outline: none; font-family: inherit;}.big-stage__form__input--start { margin: 0; padding: 0 10px; width: auto; height: 35px; flex: 1 1 auto; border: 0; border-radius: 5px 0 0 5px; background: #f4f4f4; color: #626669;}@media (max-width: 1024px) { .big-stage__form__input--start { pointer-events: none; }}.form-unfold .big-stage__form__input--start { pointer-events: auto;}.big-stage__form__input--duration { position: relative; margin: 10px 0 5px; width: 100%; height: 15px; border: 0; appearance: none; border-radius: 1.5rem; cursor: pointer;}.big-stage__form__input--duration::-webkit-slider-container { display: block; height: 100%;}.big-stage__form__input--duration::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: #000;}.big-stage__form__input--duration::-moz-range-track { height: 2px; border-radius: 2px; background: #000;}.big-stage__form__input--duration::-webkit-slider-thumb { position: relative; z-index: 2; width: 15px; height: 15px; border: 1px solid #fff; appearance: none; border-radius: 50%; background: #000; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 407px 0 0 400px rgba(255, 255, 255, 0.8); transform: translate(0, -50%) scale(0.85); -webkit-transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1);}@media (hover: hover), (min-width: 1025px) { .big-stage__form__input--duration::-webkit-slider-thumb:hover { transform: translate(0, -50%) scale(1); }}.big-stage__form__input--duration::-moz-range-thumb { position: relative; z-index: 2; width: 13px; height: 13px; border: 1px solid #fff; appearance: none; border-radius: 50%; background: #000; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 407px 0 0 400px rgba(255, 255, 255, 0.8); transform: translate(0, 0) scale(0.85); -moz-transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1);}@media (hover: hover), (min-width: 1025px) { .big-stage__form__input--duration::-moz-range-thumb:hover { transform: translate(0, 0) scale(1); }}.big-stage__form__currentlocation { position: relative; order: 4; overflow: hidden; width: 35px; height: 35px; flex: 0 0 35px; border: 0; border-left: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0 5px 5px 0; background: #f4f4f4; text-indent: -999em; cursor: pointer;}.big-stage__form__currentlocation::before { background-image: url('data:image/svg+xml;utf8, '); position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 1; background-repeat: no-repeat; background-position: center center; background-size: 20px 20px; transition: opacity 200ms linear; content: "";}[data-locationstate=requesting] .big-stage__form__currentlocation::before { opacity: 0.3;}.big-stage__form__legend--duration { position: relative; order: 4; z-index: 3; display: flex; width: 100%; flex: 0 0 100%; justify-content: space-between; pointer-events: none;}.big-stage__form__legend--duration::before, .big-stage__form__legend--duration::after { display: block; color: #96989a;}.big-stage__form__legend--duration::before { left: 0; content: attr(data-min);}.big-stage__form__legend--duration::after { right: 0; content: attr(data-max);}.big-stage__form__radio { order: 3; margin: 0 15px 0 0; width: auto; flex: 1 1 0;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__form__radio { margin-right: 25px; }}@media (min-width: 1025px) { .big-stage__form__radio { margin-right: 22px; }}.big-stage__form__radio:last-child { margin-right: 0;}.big-stage__form__radio__input { position: relative; display: block; margin: 0; width: 100%; height: 35px; appearance: none; border-radius: 5px; background: #f4f4f4; color: #000; font-family: inherit; transition: background-color 100ms linear, color 100ms linear; cursor: pointer;}.big-stage__form__radio__input:checked { background-color: #323639; color: #fff;}.big-stage__form__radio__input::before { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; text-transform: uppercase; content: attr(data-label);}.big-stage__form__radio__label { display: block; margin: 5px 0 0; text-align: center;}.big-stage__form__submit { width: 100%; height: 50px; border: 0; border-radius: 5px; background: #d5001c; color: #fff; font-family: inherit; cursor: pointer;}.big-stage__loading-layer { top: 0; z-index: 4; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; opacity: 0; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); transform: translate3d(0, 0, 0); transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1) 500ms; pointer-events: none;}.loading .big-stage__loading-layer, .error .big-stage__loading-layer { opacity: 1; transition-delay: 0ms; pointer-events: auto;}@keyframes loadingspinner { 0% { transform: rotate(0); } 100% { transform: rotate(1turn); }}.big-stage__loading { --animationPhase: 2000ms; position: relative; order: 2; display: flex; padding: 0 40px 50px; width: 100%; max-width: 500px; flex-flow: column nowrap; justify-content: flex-end; align-items: center; opacity: 0; transform: translate3d(0, 15%, 0); transition: opacity 500ms linear, transform 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}.loading .big-stage__loading { opacity: 1; transform: translate3d(0, 0, 0); transition-timing-function: linear, cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay: 400ms;}.error .big-stage__loading { transition-delay: 0ms;}.big-stage__loading::after { background-image: url('data:image/svg+xml;utf8, '); position: absolute; bottom: -32px; left: 50%; display: block; margin: 0 0 0 -25px; width: 50px; height: 50px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; animation: infinite 1000ms linear loadingspinner; content: "";}.big-stage__loading__slider { display: flex; width: 100%; flex-flow: row nowrap; align-items: flex-end;}.big-stage__loading__slide { display: flex; width: 100%; flex: 0 0 100%; flex-flow: column nowrap; justify-content: flex-end; align-items: center; opacity: 0; text-align: center; transform: translate3d(-50%, 0, 0); transition: opacity 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}.big-stage__loading__slide.active { opacity: 1; transform: translate3d(0, 0, 0); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955), cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay: 400ms;}.big-stage__loading__slide.active ~ .big-stage__loading__slide { transform: translate3d(50%, 0, 0);}.big-stage__loading__slide + .big-stage__loading__slide { margin: 0 0 0 -100%;}.big-stage__loading__icon { height: 100px;}.big-stage__loading__headline { display: block; margin: 28px 0 10px; width: 100%;}@media (min-width: 1025px) { .big-stage__loading__headline { margin-bottom: 12px; }}.big-stage__error { position: relative; order: 1; overflow: visible; width: 100%; max-width: 500px; height: 0; pointer-events: none;}.big-stage__error__content { position: absolute; top: 0; left: 0; display: flex; padding: 0 40px; width: 100%; height: auto; flex-flow: column nowrap; justify-content: flex-end; align-items: center; opacity: 0; text-align: center; transform: translate3d(0, 15%, 0); transition: opacity 500ms linear 400ms, transform 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 400ms;}.error .big-stage__error__content { opacity: 1; transform: translate3d(0, 0, 0); transition-timing-function: linear, cubic-bezier(0.215, 0.61, 0.355, 1);}.big-stage__error__icon { height: 100px;}.big-stage__error__headline { display: block; margin: 28px 0 10px; width: 100%;}@media (min-width: 1025px) { .big-stage__error__headline { margin-bottom: 12px; }}.big-stage__error__button { margin-top: 73px;}@media (min-width: 641px) and (min-height: 500px) { .big-stage__error__button { margin-top: 82px; }}@media (min-width: 1025px) { .big-stage__error__button { margin-top: 69px; }}.big-stage__error__button::before { pointer-events: none;}.error .big-stage__error__button { pointer-events: auto;}.small-stage { height: 500px;}@media (min-width: 1025px) { .small-stage { height: 570px; }}@media (min-width: 1441px) { .small-stage { height: 750px; }}.small-stage__grid { padding: 45px 0 0; height: 100%; grid-template-rows: 100%;}@media (min-width: 641px) and (min-height: 500px) { .small-stage__grid { padding-top: 50px; }}@media (min-width: 1441px) { .small-stage__grid { padding-top: 80px; }}.small-stage__image, .small-stage__text { grid-row: 1;}.small-stage__image { position: relative; grid-column: fullsize-start/fullsize-end; height: 100%;}.small-stage__image .media { height: 100%; object-fit: cover;}.small-stage__image .media::after { content: unset;}.small-stage__image::after { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 400px; background: linear-gradient(to top, #000 -15%, transparent 101.6%); content: "";}.small-stage__text { position: relative; align-self: flex-end; padding: 0 0 30px; color: #fff; text-align: center;}@media (min-width: 1025px) { .small-stage__text { padding-bottom: 40px; }}.small-stage__headline { font-size: 1.6875rem; margin: 0; padding: 0;}@media (min-width: 641px) { .small-stage__headline { font-size: calc(48px + (54 - 48) * ( (100vw - 641px) / (1025 - 641) )); }}@media (min-width: 1025px) { .small-stage__headline { font-size: calc(54px + (60 - 54) * ( (100vw - 1025px) / (1441 - 1025) )); }}@media (min-width: 1441px) { .small-stage__headline { font-size: 3.75rem; }}.small-stage__bodytext { margin-top: 20px;}@media (min-width: 1441px) { .small-stage__bodytext { margin-top: 15px; }}.small-stage__details { margin-top: 15px; font-size: 0.75rem; font-weight: 100; line-height: 1.2; letter-spacing: 0.01em;}@media (min-width: 641px) and (min-height: 500px) { .small-stage__details { margin-top: 20px; }}@media (min-width: 1025px) { .small-stage__details { margin-top: 15px; font-size: 0.875rem; line-height: 1.4; }}@media (min-width: 1025px) { .small-stage__bodytext + .small-stage__details { margin-top: 25px; }}.small-stage__button-container { margin: 20px 0 0; line-height: 0; text-align: center;}@media (min-width: 641px) and (min-height: 500px) { .small-stage__button-container { position: absolute; right: 0; bottom: 30px; margin: 0; text-align: right; }}@media (min-width: 1025px) { .small-stage__button-container { bottom: 40px; }}.button-thin { display: inline-flex; width: 100%; height: 45px; border: 1px solid transparent; justify-content: center; align-items: center; border-radius: 7.5px; box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.12); font-family: "PorscheNext", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 130%; text-decoration: none; text-align: center; letter-spacing: 0.15px; white-space: nowrap; transition: background-color 200ms ease-in-out; cursor: pointer;}.button-thin--primary { background-color: #d5001c; color: #fff;}@media (hover: hover), (min-width: 1025px) { .button-thin--primary:hover { background-color: #960014; }}.button-thin__icon { display: inline-block; margin: 0; width: 20px; height: 20px; fill: currentColor; vertical-align: bottom;}@keyframes buttonThinLoadingSpinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}.button-thin__loading { display: none; margin: 0 0 0 10px; width: 20px; height: 20px; filter: invert(100%);}.button-thin .login-user[data-loading=true] .button-thin__loading, .login-user[data-loading=true] .button-thin .button-thin__loading, .button-thin[data-loading=true] .button-thin__loading, .button-thin.loading .button-thin__loading { display: inline-block; animation: 1000ms infinite linear buttonThinLoadingSpinner;}.login-user { position: fixed; top: 0; left: 0; z-index: 20; display: flex; width: 100%; height: 100%; flex-flow: column nowrap; justify-content: center; align-items: center; opacity: 0; background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: opacity 300ms; pointer-events: none;}.login-user[data-visible=true] { opacity: 1; pointer-events: auto;}.login-user__headline, .login-user__bodytext { width: 100%; text-align: center;}.login-user__headline { margin: 0; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal;}.login-user__headline--small { font-size: 16px;}.login-user__headline--thin { font-weight: 400;}.login-user__headline__username { font-weight: 600;}.login-user__register-instructions { margin: 40px 0 0;}.login-user__bodytext { margin: 15px 0 0; font-size: 16px; line-height: 1.4;}.login-user__bodytext--small { font-size: 14px;}.login-user__modal { display: flex; overflow: hidden; width: 720px; max-width: calc(100% - 80px); height: 600px; flex-flow: row nowrap; border-radius: 10px; box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.12);}.login-user__media, .login-user__forms { position: relative; width: 100%; height: auto; flex: 0 0 100%;}@media (min-width: 641px) and (min-height: 500px) { .login-user__media, .login-user__forms { width: 50%; flex: 0 0 50%; }}.login-user__media { overflow: hidden;}.login-user__media__layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.1); transition: transform 1000ms ease-out, opacity 800ms linear; pointer-events: none;}.login-user__media__layer img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}.login-user__media__layer:first-child, .login-user__modal[data-mode=register] .login-user__media__layer[data-mode=register], .login-user__modal[data-mode=register2] .login-user__media__layer[data-mode=register2], .login-user__modal[data-mode=registersuccess] .login-user__media__layer[data-mode=registersuccess], .login-user__modal[data-mode=registerfail] .login-user__media__layer[data-mode=registerfail] { opacity: 1; transform: scale(1);}.login-user__forms { position: relative; overflow: hidden;}.login-user__pagenumbers { position: absolute; top: 7px; left: 0; display: block; width: 100%; font-size: 12px; text-align: center;}.login-user__pagenumber { color: #999999;}.login-user__closebutton { position: absolute; top: 5px; right: 10px; z-index: 1; overflow: hidden; width: 30px; height: 30px; border: 0; border-radius: 5px; background: transparent; text-indent: -999em; transition: background-color 300ms ease-out; cursor: pointer;}.login-user__closebutton::before, .login-user__closebutton::after { position: absolute; top: 48%; left: 22%; display: block; width: 55%; height: 1px; background: #000; transform: rotate(-45deg); transition: transform 300ms ease-out; content: "";}.login-user__closebutton::after { transform: rotate(45deg);}@media (hover: hover), (min-width: 1025px) { .login-user__closebutton:hover { background-color: #e6e6e6; } .login-user__closebutton:hover::before, .login-user__closebutton:hover::after { transform: rotate(180deg); }}.login-user__modal[data-mode=chooseLogin] .login-user__closebutton { display: none;}.login-user__form { position: absolute; top: 0; left: 0; display: flex; padding: 25px 30px; width: 100%; height: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; opacity: 1; background: #fff; transition: opacity 500ms linear;}.login-user__form__buttons { margin: 40px 0 0; width: 100%;}.login-user__form--chooselogin { justify-content: center;}.login-user__form--chooselogin__button { width: 100%;}.login-user__form--chooselogin__button + .login-user__form--chooselogin__button { margin-top: 10px;}.login-user__form--chooselogin__social-buttons { display: flex; margin-top: 10px; flex-flow: row wrap; justify-content: center; gap: 10px;}.login-user__form--chooselogin__social-button { position: relative; overflow: hidden; width: 45px; height: 45px; border: 0; border-radius: 5px; background: #000; text-indent: -999em; cursor: pointer;}.login-user__form--chooselogin__social-button--disabled { cursor: not-allowed; pointer-events: none;}.login-user__form--chooselogin__social-button__icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: #fff; pointer-events: none;}.login-user__form--registerfail { justify-content: center;}.login-user__form--registerfail__warning { margin: 0 0 20px; height: 90px;}.login-user__form--registerfail__button { margin-top: 40px;}.login-user__form--registersuccess { justify-content: center;}.login-user__form--registersuccess__icon { margin: 0 0 30px; height: 90px;}.login-user__form--registersuccess__button { margin-top: 40px;}.login-user__form__field { width: 100%;}.login-user__form__field:last-child { display: flex; flex: 1 1 auto; flex-flow: column nowrap; justify-content: flex-end;}.login-user__form__field + .login-user__form__field { margin-top: 25px;}.login-user__form__field--checkbox + .login-user__form__field--checkbox { margin-top: 10px;}.login-user__form__field[data-selector=register-name] { margin-top: 80px;}.login-user__form__field[data-selector=register-email] { margin-top: 30px;}.login-user__form__field__label { width: 100%; font-size: 15px; font-weight: 600;}.login-user__form__field__label a { color: inherit;}.login-user__form__field__input-container { position: relative; display: flex; margin: 10px 0 0; width: 100%; flex-flow: row wrap; justify-content: flex-start; line-height: 0;}.login-user__form__field__input-container:first-child { margin-top: 0;}.login-user__form__field__input { padding: 0 5px 0 10px; width: 100%; height: 40px; border: 1px solid transparent; border-radius: 5px; outline: 0; background: #f4f4f4; font-size: 13px; line-height: 1.3; letter-spacing: 0.26px;}.login-user__form__field__input:focus { border-color: #000;}.login-user__form__field__input__counter { position: absolute; top: 14px; right: 7px; margin: 0; opacity: 0.6; font-size: 10px; font-weight: 600; line-height: 1.3; text-align: right; letter-spacing: 0.2px;}.login-user__form__field__input__counter::before { content: attr(data-count);}.login-user__form__field[data-error]:not([data-error="0"]) .login-user__form__field__input:not(:focus) { border-color: #d5001c;}.login-user__form__field[data-checkavailability]:not([data-checkavailability=unchecked]) .login-user__form__field__input__counter, .login-user__form__field[data-error]:not([data-error="0"]) .login-user__form__field__input__counter { display: none;}.login-user__form__field__input[type=checkbox] { position: absolute; margin: 0; width: 0; height: 0; opacity: 0;}.login-user__form__field__input[type=checkbox] + .login-user__form__field__label { --checkbox-border: #d9d9d9; --checkbox-inner: #fff; --text: #808080; position: relative; display: inline-block; padding: 1px 0 0 30px; width: auto; min-height: 20px; color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0.18px; cursor: pointer;}.login-user__form__field__input[type=checkbox] + .login-user__form__field__label::before, .login-user__form__field__input[type=checkbox] + .login-user__form__field__label::after { position: absolute; display: block; content: "";}.login-user__form__field__input[type=checkbox] + .login-user__form__field__label::before { top: 0; left: 0; width: 20px; height: 20px; border: 1px solid var(--checkbox-border); border-radius: 5px; background: var(--checkbox-inner);}.login-user__form__field__input[type=checkbox] + .login-user__form__field__label::after { background-image: url('data:image/svg+xml;utf8, '); top: 2px; left: 1px; width: 18px; height: 18px; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); background-position: top left; transition: clip-path 150ms linear;}.login-user__form__field__input[type=checkbox]:checked + .login-user__form__field__label:after { width: 18px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 300ms cubic-bezier(0.52, 0.79, 0.42, -0.15);}.login-user__form__field__input[type=checkbox]:checked + .login-user__form__field__label, .login-user__form__field__input[type=checkbox]:hover + .login-user__form__field__label, .login-user__form__field__input[type=checkbox] + .login-user__form__field__label:hover { --text: #000;}.login-user__form__field__input[type=checkbox]:hover + .login-user__form__field__label, .login-user__form__field__input[type=checkbox] + .login-user__form__field__label:hover { --checkbox-inner: #f2f2f2;}.login-user__form__field[data-error]:not([data-error="0"]) .login-user__form__field__input[type=checkbox] + .login-user__form__field__label { --text: #d5001c; --checkbox-border: #d5001c;}.login-user__form__field__warning { position: absolute; top: 10px; right: 6px; display: none; width: 20px; height: 20px; fill: #d5001c;}.login-user__form__field__input[type=checkbox] ~ .login-user__form__field__warning { position: relative; top: 0; right: 0; display: none; margin-left: 5px;}.login-user__form__field__description { margin: 5px 0 0; color: rgba(0, 0, 0, 0.4); font-size: 14px; line-height: 1.3; letter-spacing: 0.18px;}.login-user__form__field__errors { display: none; margin: 10px 0 0; color: #d5001c;}.login-user__form__field[data-checkavailability=unavailable] .login-user__form__field__errors, .login-user__form__field[data-checkavailability=unavailable] .login-user__form__field__warning, .login-user__form__field:not([data-error="0"]) .login-user__form__field__warning, .login-user__form__field:not([data-error="0"]) .login-user__form__field__errors { display: block;}.login-user__form__field:not([data-error="0"]) .login-user__form__field__input[type=checkbox] ~ .login-user__form__field__warning, .login-user__form__field:not([data-error="0"]) .login-user__form__field__input[type=checkbox] ~ .login-user__form__field__errors { display: inline-block;}.login-user__form__field[data-error="0"] .login-user__form__field__description { margin-top: 10px;}.login-user__form__field__error { display: none; margin: 10px 0 0; font-size: 14px; line-height: 1.3; letter-spacing: 0.18px;}.login-user__form__field[data-error="1"] .login-user__form__field__error:nth-child(1), .login-user__form__field[data-error="2"] .login-user__form__field__error:nth-child(2), .login-user__form__field[data-error="3"] .login-user__form__field__error:nth-child(3), .login-user__form__field[data-error="4"] .login-user__form__field__error:nth-child(4), .login-user__form__field[data-error="5"] .login-user__form__field__error:nth-child(5), .login-user__form__field[data-checkavailability=unavailable] .login-user__form__field__error:last-child { display: block;}@keyframes loadingspinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}.login-user__form__field__loading { position: absolute; top: 10px; right: 6px; display: none; width: 21px; height: 21px;}.login-user__form__field[data-checkavailability=checking] .login-user__form__field__loading { display: block; animation: infinite 1000ms linear loadingspinner;}.login-user__form__field__check { position: absolute; top: 10px; right: 6px; display: none; width: 20px; height: 20px;}.login-user__form__field[data-checkavailability=available] .login-user__form__field__check { display: block;}.login-user__modal:not([data-mode=chooseLogin]) .login-user__form--chooselogin, .login-user__modal:not([data-mode=loginLocal]) .login-user__form--loginlocal, .login-user__modal:not([data-mode=loginPid]) .login-user__form--loginpid, .login-user__modal:not([data-mode=register]) .login-user__form--register, .login-user__modal:not([data-mode=register2]) .login-user__form--register2, .login-user__modal:not([data-mode=registerSuccess]) .login-user__form--registersuccess, .login-user__modal:not([data-mode=registerFail]) .login-user__form--registerfail { overflow: hidden; padding-top: 0; padding-bottom: 0; height: 0; opacity: 0; transition: opacity 500ms linear, height 0ms linear 500ms, padding 0ms linear 500ms; pointer-events: none;}.app-download__bar { display: flex; padding: 0 calc((100% - 1540px) / 2); min-height: 60px; justify-content: center; align-items: center; opacity: 1; background: #000; color: #fff; text-align: center; transition: opacity 500ms linear; transition-delay: 0ms;}@media (pointer: coarse) { .app-download__bar { display: none; }}.app-download[data-mode=bar][data-previous-mode=badge] .app-download__bar { transition-delay: 600ms;}.app-download[data-mode=hidden] .app-download__bar, .app-download[data-mode=badge] .app-download__bar { opacity: 0; pointer-events: none;}.app-download__text { display: inline-block;}.app-download__button { --arrowHeight: 20px; --arrowLeft: 7.45px; --borderColor: #fff; --borderRadius: 5px; --height: 39.41px; --textLeft: 28.55px; --textRight: 7.45px; margin-left: 45px;}.app-download__button::after { background-image: url('data:image/svg+xml;utf8, ');}.app-download__button .btn__title { font-size: 1rem; font-weight: 400; line-height: 1.4; letter-spacing: 0.02em;}.app-download__badge { position: fixed; top: calc(100vh - 150px - 60px); left: 0; z-index: 999; display: flex; padding: 8px 25px 8px 60px; max-width: 330px; min-height: 60px; flex-flow: column nowrap; justify-content: center; align-items: flex-start; border-radius: 0 10px 10px 0; background: #000; color: #fff; transform: translate3d(-100%, 0, 0); transition: transform 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955), padding 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-delay: 0ms;}.app-download__badge:hover { padding-right: 25px; padding-bottom: 15px;}.app-download__badge::before { background-image: url('data:image/svg+xml;utf8, '); position: absolute; top: 5px; left: 10px; width: 50px; height: 50px; background-repeat: no-repeat; background-position: center center; background-size: 15px 27px; content: "";}.app-download__badge__text { position: relative; overflow: hidden; width: 0; height: 0; transition: width 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955), height 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}.app-download__badge__text__inner { position: absolute; top: 0; left: 0; width: 175px;}.app-download__badge__text__inner::before { position: relative; top: 0; left: 0; display: inline-block; padding: 0 0 13px; width: auto; max-width: 175px; height: auto; content: attr(data-text);}.app-download__badge__text::after { position: absolute; bottom: 0; left: 0; z-index: 0; display: block; width: 100%; height: 13px; background: #000; content: "";}.app-download__badge:hover .app-download__badge__text { width: var(--textWidth, 0); height: var(--textHeight, 0);}.app-download__badge__button { display: inline-block; padding: 7.71px 16.43px; border: 1px solid #fff; border-radius: 5px; background: #000; color: #fff; transition: background-color 200ms linear, color 200ms linear; cursor: pointer;}.app-download__badge__button:hover { background: #fff; color: #000;}.app-download__badge__button::after { content: attr(data-text);}.app-download[data-mode=badge] .app-download__badge { transform: translate3d(0, 0, 0);}.app-download[data-mode=badge][data-previous-mode=bar] .app-download__badge { transition-delay: 500ms, 0ms;}/*# sourceMappingURL=critical.css.map */Cookie-Einstellungen
Cookie-Einstellungen Mit der ROADS App die besten Routen entdecken & direkt losfahren!
Jetzt laden