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, .form, .vehicle-list, .search-list, .gallery { position: relative; display: grid; width: 100%; grid-template-rows: auto; grid-template-columns: [fullsize-start] 25fr repeat(calc(var(--colPhone, 4) - 1), [col-start] 58.75fr [col-end] 30px) [col-start] 58.75fr [col-end] 25fr [fullsize-end]; grid-column-gap: 0; justify-content: stretch;}@media (min-width: 641px) and (min-height: 500px) { .g, .form, .vehicle-list, .search-list, .gallery { grid-template-columns: [fullsize-start] 50fr repeat(calc(var(--colTablet, 8) - 1), [col-start] 70fr [col-end] 30px) [col-start] 70fr [col-end] 50fr [fullsize-end]; }}@media (min-width: 1025px) { .g, .form, .vehicle-list, .search-list, .gallery { grid-template-columns: [fullsize-start] calc((100% - 1920px) / 2) [outerframe-start] calc((min(1920px, 100%) - 1540px) / 2) 75fr repeat(calc(var(--colDesktop, 12) - 1), [col-start] 88.33fr [col-end] 30px) [col-start] 88.33fr [col-end] 75fr calc((min(1920px, 100%) - 1540px) / 2) [outerframe-end] calc((100% - 1920px) / 2) [fullsize-end]; }}.g, .form, .vehicle-list, .search-list, .gallery { margin: 0 auto;}.g--inner,.g .g,.form .g,.vehicle-list .g,.search-list .g,.gallery .g,.g .form,.form .form,.vehicle-list .form,.search-list .form,.gallery .form,.g .vehicle-list,.form .vehicle-list,.vehicle-list .vehicle-list,.search-list .vehicle-list,.gallery .vehicle-list,.g .search-list,.form .search-list,.vehicle-list .search-list,.search-list .search-list,.gallery .search-list,.g .gallery,.form .gallery,.vehicle-list .gallery,.search-list .gallery,.gallery .gallery { grid-template-columns: repeat(calc(var(--innerCols, 4) - 1), [col-start] 58.75fr [col-end] 30px) [col-start] 58.75fr [col-end];}@media (min-width: 641px) and (min-height: 500px) { .g--inner, .g .g, .form .g, .vehicle-list .g, .search-list .g, .gallery .g, .g .form, .form .form, .vehicle-list .form, .search-list .form, .gallery .form, .g .vehicle-list, .form .vehicle-list, .vehicle-list .vehicle-list, .search-list .vehicle-list, .gallery .vehicle-list, .g .search-list, .form .search-list, .vehicle-list .search-list, .search-list .search-list, .gallery .search-list, .g .gallery, .form .gallery, .vehicle-list .gallery, .search-list .gallery, .gallery .gallery { grid-template-columns: repeat(calc(var(--innerCols, 8) - 1), [col-start] 70fr [col-end] 30px) [col-start] 70fr [col-end]; }}@media (min-width: 1025px) { .g--inner, .g .g, .form .g, .vehicle-list .g, .search-list .g, .gallery .g, .g .form, .form .form, .vehicle-list .form, .search-list .form, .gallery .form, .g .vehicle-list, .form .vehicle-list, .vehicle-list .vehicle-list, .search-list .vehicle-list, .gallery .vehicle-list, .g .search-list, .form .search-list, .vehicle-list .search-list, .search-list .search-list, .gallery .search-list, .g .gallery, .form .gallery, .vehicle-list .gallery, .search-list .gallery, .gallery .gallery { grid-template-columns: repeat(calc(var(--innerCols, 12) - 1), [col-start] 88.33fr [col-end] 30px) [col-start] 88.33fr [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, .search-list .vehicle-list__section, .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, .search-list .vehicle-list__section, .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, .search-list .vehicle-list__section, .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, .search-list .vehicle-list__section, .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, .search-list .vehicle-list__section, .gi-1-11 { grid-column-end: col-end 8; } .gi-1-12, .search-list .vehicle-list__section, .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, .search-list .vehicle-list__section, .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, .search-list .vehicle-list__section { grid-column-end: col-end 12; } .gi-1-12, .search-list .vehicle-list__section, .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: "SourceSans", Helvetica, Arial, sans-serif;}h1,.h1,h2,.h2,.form__step__headline,h3,.h3,h4,.h4,h5,.h5,.filter__header__text,.h5-bold,h6,.h6,p,li,a { font-family: inherit;}h1,.h1,h2,.h2,.form__step__headline,h3,.h3,h4,.h4,h5,.h5,.filter__header__text,.h5-bold,h6,.h6 { margin: 0 0 25px; text-transform: uppercase; -webkit-hyphens: auto; hyphens: auto;}#link-selector h1,#link-selector h2,#link-selector h3,#link-selector h4,#link-selector h5,#link-selector h6 { font-size: inherit;}.h1-small, h1,.h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.15; letter-spacing: 0.02em;}@media (min-width: 641px) and (min-height: 500px) { .h1-small, h1, .h1 { font-size: 3.75rem; }}@media (min-width: 1025px) { h1, .h1 { font-size: 4.6875rem; }}@media (min-width: 1025px) { .h1-small { font-size: 3.75rem; line-height: 1; }}.h2-big, h2,.h2,.form__step__headline { font-size: 2.5rem; font-weight: 700; line-height: 1.2; letter-spacing: 1px;}@media (min-width: 641px) and (min-height: 500px) { h2, .h2, .form__step__headline { font-size: 3rem; line-height: 1.3; }}@media (min-width: 1025px) { h2, .h2, .form__step__headline { font-size: 3.375rem; }}@media (min-width: 641px) and (min-height: 500px) { .h2-big { font-size: 3.125rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.02em; }}@media (min-width: 1025px) { .h2-big { font-size: 5rem; }}h3,.h3 { font-size: 2.375rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.02em;}@media (min-width: 641px) and (min-height: 500px) { h3, .h3 { font-size: 2.875rem; }}@media (min-width: 1025px) { h3, .h3 { font-size: 3rem; }}h4,.h4 { font-size: 1.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 1px;}@media (min-width: 641px) and (min-height: 500px) { h4, .h4 { font-size: 2rem; }}@media (min-width: 1025px) { h4, .h4 { font-size: 2.25rem; }}h5,.h5,.filter__header__text,.h5-bold { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: 1px;}@media (min-width: 641px) and (min-height: 500px) { h5, .h5, .filter__header__text, .h5-bold { font-size: 1.5625rem; }}@media (min-width: 1025px) { h5, .h5, .filter__header__text, .h5-bold { font-size: 1.625rem; }}.h5-bold { font-weight: 700;}@media (min-width: 1025px) { .h5-bold { line-height: 1.4; }}h6,.h6 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; letter-spacing: 1px;}@media (min-width: 641px) and (min-height: 500px) { h6, .h6 { font-size: 1.25rem; }}p,.p,.p-normal,.form__element__input[type=text],.form__element__input[type=datetime-local],.form__element__textarea,.form__element__checkbox + .form__element__label,.form__element__radio + .form__element__label,.form__element__file__selected,.p-normal-bold { font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.5px;}.p-normal-bold { font-weight: 600;}.p-big, .form__element--input_placeholder *, .text-media ul.text-media-list > li, .p-big-bold { font-size: 1.375rem; font-weight: 300; line-height: 1.5; letter-spacing: 1px;}@media (min-width: 1025px) { .p-big, .form__element--input_placeholder *, .text-media ul.text-media-list > li, .p-big-bold { font-size: 1.5rem; }}.p-big-bold { font-weight: 600;}p strong,.mce-content-body p strong { font-size: inherit; font-weight: 600 !important; line-height: inherit; letter-spacing: inherit;}.p-meta, .p-meta strong, .p-meta-light strong,.p-meta .mce-content-body .p-meta strong, .p-meta-bold, .p-meta-light { font-size: 1.125rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em;}.p-meta-light { font-weight: 300;}.p-meta strong, .p-meta-bold strong, .p-meta-light strong,.p-meta .mce-content-body .p-meta strong,.p-meta-light strong .mce-content-body .p-meta strong,.p-meta-bold .mce-content-body .p-meta strong,.p-meta .mce-content-body strong strong,.p-meta strong .mce-content-body strong strong,.p-meta .p-meta-light strong .mce-content-body strong strong,.p-meta .p-meta-bold .mce-content-body strong strong,.p-meta .mce-content-body .p-meta-light strong strong,.p-meta-light .p-meta .mce-content-body strong strong,.p-meta-light strong .mce-content-body strong strong,.p-meta-bold .mce-content-body .p-meta-light strong strong,.p-meta-light .p-meta-bold .mce-content-body strong strong,.p-meta .mce-content-body .p-meta-bold strong,.p-meta-light strong .mce-content-body .p-meta-bold strong,.p-meta-bold .mce-content-body .p-meta-bold strong, .p-meta-bold { font-weight: 700;}.segment-link, .form__sumbit__label, .form .button__label, .form .form__submit__label, .link, .btn--small .btn__title, .segment-link-s { opacity: 1; font-size: 1.25rem; font-weight: 600; line-height: 1.4; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: opacity 200ms linear;}@media (hover: hover), (min-width: 1025px) { .segment-link:hover, .form__sumbit__label:hover, .form .button__label:hover, .form .form__submit__label:hover, .link:hover, .btn--small .btn__title:hover, .segment-link-s:hover { opacity: 0.6; }}.segment-link-s { font-size: 0.875rem;}.segment-link--underline { position: relative; display: inline-block; padding: 0 0 0.25em; color: rgb(240, 127, 14); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 5px;}.footer-title { font-size: 1.375rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px;}@media (min-width: 641px) and (min-height: 500px) { .footer-title { font-size: 0.875rem; }}.nav-title-xsmall, .form__element__label, .nav-title-small, .nav-title-small-bold, .nav-title-small-light, .nav-title, .btn--large .btn__title { font-size: 1.125rem; font-weight: 600; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.03em;}@media (min-width: 641px) and (min-height: 500px) { .nav-title, .btn--large .btn__title { font-size: 1.4375rem; }}.nav-title-small, .nav-title-small-bold, .nav-title-small-light { font-size: 1rem; line-height: 1.4;}@media (min-width: 641px) and (min-height: 500px) { .nav-title-small, .nav-title-small-bold, .nav-title-small-light { font-size: 1.125rem; line-height: 1.1; }}.nav-title-small-light { font-weight: 400;}.nav-title-small-bold { font-weight: 700;}.nav-title-xsmall, .form__element__label { font-size: 0.8125rem; line-height: 1;}@media (min-width: 1025px) { .nav-title-xsmall, .form__element__label { font-size: 1.0625rem; }}.rte { margin-bottom: 0;}.rte h3,.rte h4,.rte p,.rte ol,.rte ul, .rte > a { margin: 25px 0 0;}.rte h3,.rte h4 { margin-bottom: 0;}.rte h4 + p, .rte h4 + a, .rte h4 + ol, .rte h4 + ul { margin-top: 10px;}.rte p > a,.rte strong > a { color: rgb(240, 127, 14);}.rte ol,.rte ul { padding-left: 0; counter-reset: ol-counter;}.rte ol > li,.rte ul > li { position: relative; display: block; padding-left: 20px; counter-increment: ol-counter;}.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: rgb(0, 0, 0); content: "";}.rte strong,.rte b { font-weight: 700;}.rte > *:first-child { margin-top: 0;}.btn, .form__sumbit, .form .button, .form .form__submit { --backgroundColor: rgb(14, 159, 240); --hoverBackgroundColor: #178fd2; position: relative; display: inline-block; overflow: hidden; padding: 15px 36px 15px 30px; border: 0; align-items: center; background: transparent; font-family: inherit; cursor: pointer;}.btn *, .form__sumbit *, .form .button *, .form .form__submit * { position: relative;}.btn--small { padding: 12px 30px 12px 25px;}.btn--centered { padding: 12px; width: 100%; text-align: center;}.btn--orange { --backgroundColor: rgb(240, 127, 14); --hoverBackgroundColor: rgb(208, 104, 0);}.btn--greyblue { --backgroundColor: rgb(52, 79, 92); --hoverBackgroundColor: rgb(42, 59, 67);}.btn--orange-outline { --backgroundColor: rgba(0, 0, 0, 0); --hoverBackgroundColor: rgb(240, 127, 14);}.btn--orange-outline::before { border: 1px solid rgb(240, 127, 14);}.btn::before, .form__sumbit::before, .form .button::before, .form .form__submit::before { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: 100%; background: linear-gradient(to right, var(--hoverBackgroundColor) 50%, var(--backgroundColor) 50%) 100% 0; background-size: 200% 100%; transform: skewX(-10deg); transform-origin: top left; transition: background-position 400ms cubic-bezier(0.645, 0.045, 0.355, 1); content: "";}@media (hover: hover), (min-width: 1025px) { .btn:hover::before, .form__sumbit:hover::before, .form .button:hover::before, .form .form__submit:hover::before { background-position: 0 0; }}.btn__title { color: rgb(255, 255, 255);}.btn--none { padding: 0; background: transparent;}.btn--none::before, .btn--none::after { content: none;}.btn--icon-left { padding-left: 55px;}.btn--icon-right { padding-right: 55px;}.btn__icon { position: absolute; top: 50%; width: 1.4em; height: 1.4em; fill: currentColor; color: inherit; transform: translate3d(0, -50%, 0);}.btn__icon--only { left: 15px;}.btn__icon--left { left: 24px;}.btn__icon--right { right: 24px;}.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;}/** * Swiper 9.2.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: April 21, 2023 */@font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal;}:root { --swiper-theme-color:#007aff;}.swiper, swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block;}.swiper-vertical > .swiper-wrapper { flex-direction: column;}.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box;}.swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0);}.swiper-horizontal { touch-action: pan-y;}.swiper-vertical { touch-action: pan-x;}.swiper-slide, swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block;}.swiper-slide-invisible-blank { visibility: hidden;}.swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto;}.swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height;}.swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden;}.swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px;}.swiper-3d .swiper-wrapper { transform-style: preserve-3d;}.swiper-3d { perspective: 1200px;}.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { transform-style: preserve-3d;}.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10;}.swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15);}.swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));}.swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));}.swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));}.swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));}.swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none;}.swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start;}.swiper-horizontal.swiper-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory;}.swiper-vertical.swiper-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory;}.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999;}.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always;}.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before);}.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after);}.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before);}.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after);}.swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent;}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear;}.swiper-lazy-preloader-white { --swiper-preloader-color:#fff;}.swiper-lazy-preloader-black { --swiper-preloader-color:#000;}@keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.splide__container { box-sizing: border-box; position: relative;}.splide__list { backface-visibility: hidden; display: flex; height: 100%; margin: 0 !important; padding: 0 !important;}.splide.is-initialized:not(.is-active) .splide__list { display: block;}.splide__pagination { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; pointer-events: none;}.splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto;}.splide:not(.is-overflow) .splide__pagination { display: none;}.splide__progress__bar { width: 0;}.splide { position: relative; visibility: hidden;}.splide.is-initialized, .splide.is-rendered { visibility: visible;}.splide__slide { backface-visibility: hidden; box-sizing: border-box; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative;}.splide__slide img { vertical-align: bottom;}.splide__spinner { animation: splide-loading 1s linear infinite; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px;}.splide__sr { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause { display: none;}.splide__toggle.is-active .splide__toggle__pause { display: inline;}.splide__track { overflow: hidden; position: relative; z-index: 0;}@keyframes splide-loading { 0% { transform: rotate(0); } to { transform: rotate(1turn); }}.splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;}.splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0;}.splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1;}.splide--rtl { direction: rtl;}.splide__track--ttb > .splide__list { display: block;}.splide__arrow { align-items: center; background: #ccc; border: 0; border-radius: 50%; cursor: pointer; display: flex; height: 2em; justify-content: center; opacity: 0.7; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 2em; z-index: 1;}.splide__arrow svg { fill: #000; height: 1.2em; width: 1.2em;}.splide__arrow:hover:not(:disabled) { opacity: 0.9;}.splide__arrow:disabled { opacity: 0.3;}.splide__arrow:focus-visible { outline: 3px solid #0bf; outline-offset: 3px;}.splide__arrow--prev { left: 1em;}.splide__arrow--prev svg { transform: scaleX(-1);}.splide__arrow--next { right: 1em;}.splide.is-focus-in .splide__arrow:focus { outline: 3px solid #0bf; outline-offset: 3px;}.splide__pagination { bottom: 0.5em; left: 0; padding: 0 1em; position: absolute; right: 0; z-index: 1;}.splide__pagination__page { background: #ccc; border: 0; border-radius: 50%; display: inline-block; height: 8px; margin: 3px; opacity: 0.7; padding: 0; position: relative; transition: transform 0.2s linear; width: 8px;}.splide__pagination__page.is-active { background: #fff; transform: scale(1.4); z-index: 1;}.splide__pagination__page:hover { cursor: pointer; opacity: 0.9;}.splide__pagination__page:focus-visible { outline: 3px solid #0bf; outline-offset: 3px;}.splide.is-focus-in .splide__pagination__page:focus { outline: 3px solid #0bf; outline-offset: 3px;}.splide__progress__bar { background: #ccc; height: 3px;}.splide__slide { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.splide__slide:focus { outline: 0;}@supports (outline-offset: -3px) { .splide__slide:focus-visible { outline: 3px solid #0bf; outline-offset: -3px; }}@media screen and (-ms-high-contrast: none) { .splide__slide:focus-visible { border: 3px solid #0bf; }}@supports (outline-offset: -3px) { .splide.is-focus-in .splide__slide:focus { outline: 3px solid #0bf; outline-offset: -3px; }}@media screen and (-ms-high-contrast: none) { .splide.is-focus-in .splide__slide:focus { border: 3px solid #0bf; } .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus { border-color: #0bf; }}.splide__toggle { cursor: pointer;}.splide__toggle:focus-visible { outline: 3px solid #0bf; outline-offset: 3px;}.splide.is-focus-in .splide__toggle:focus { outline: 3px solid #0bf; outline-offset: 3px;}.splide__track--nav > .splide__list > .splide__slide { border: 3px solid transparent; cursor: pointer;}.splide__track--nav > .splide__list > .splide__slide.is-active { border: 3px solid #000;}.splide__arrows--rtl .splide__arrow--prev { left: auto; right: 1em;}.splide__arrows--rtl .splide__arrow--prev svg { transform: scaleX(1);}.splide__arrows--rtl .splide__arrow--next { left: 1em; right: auto;}.splide__arrows--rtl .splide__arrow--next svg { transform: scaleX(-1);}.splide__arrows--ttb .splide__arrow { left: 50%; transform: translate(-50%);}.splide__arrows--ttb .splide__arrow--prev { top: 1em;}.splide__arrows--ttb .splide__arrow--prev svg { transform: rotate(-90deg);}.splide__arrows--ttb .splide__arrow--next { bottom: 1em; top: auto;}.splide__arrows--ttb .splide__arrow--next svg { transform: rotate(90deg);}.splide__pagination--ttb { bottom: 0; display: flex; flex-direction: column; left: auto; padding: 1em 0; right: 0.5em; top: 0;}.swiper-pagination { position: absolute; text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 10;}.swiper-pagination.swiper-pagination-hidden { opacity: 0;}.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important;}.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%;}.swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0;}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative;}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1);}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1);}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66);}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33);}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66);}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33);}.swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);}button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; appearance: none;}.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer;}.swiper-pagination-bullet:only-child { display: none !important;}.swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color));}.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0);}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block;}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px;}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 0.2s transform, 0.2s top;}.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);}.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap;}.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s transform, 0.2s left;}.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet, :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s transform, 0.2s right;}.swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit);}.swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute;}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top;}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top;}.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0;}.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0;}.swiper-pagination-lock { display: none;}@keyframes in { from { opacity: 0; } to { opacity: 1; }}.header { --fg: rgb(42, 59, 67); width: 100%; height: 55px; background: rgb(255, 255, 255); transform: translate3d(0, 0, 0); transition: transform 500ms ease-out, opacity 500ms ease-in-out; animation-name: in; animation-duration: 500ms; animation-timing-function: ease-in-out; animation-fill-mode: forwards;}@media (min-width: 641px) and (min-height: 500px) { .header { height: 105px; }}@media (min-width: 1025px) { .header { height: 130px; }}.header__container { display: flex; width: 100%; justify-content: space-between; align-items: center;}.header__logo { margin-right: 30px; /* relevant at ~670px width */ width: 160px; height: 25px;}@media (min-width: 641px) and (min-height: 500px) { .header__logo { width: 280px; height: 45px; }}@media (min-width: 1025px) { .header__logo { width: 329px; height: 52px; }}.header__logo__svg { width: 100%; height: 100%;}.header__menu { display: flex; flex-direction: column;}.header__menu__upper { display: none; opacity: 0.7; color: rgb(42, 59, 67);}@media (min-width: 1025px) { .header__menu__upper { display: flex; margin: 0 0 30px; justify-content: flex-end; align-items: center; }}.header__menu__upper__text { padding-right: 10px;}.header__menu__upper-link { margin: 0 0 0 3px; color: rgb(42, 59, 67); text-decoration: none; transition: opacity 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);}.header__menu__upper-link:nth-child(3)::before { margin: 0 6px 0 3px; content: "|";}@media (hover: hover), (min-width: 1025px) { .header__menu__upper-link:hover { opacity: 0.6; }}.header__menu__upper__language-switch { margin: 0 0 0 50px; color: rgb(42, 59, 67); text-transform: uppercase; transition: opacity 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);}@media (hover: hover), (min-width: 1025px) { .header__menu__upper__language-switch:hover { opacity: 0.6; }}.header__menu__lower { display: flex; margin: 0; padding: 0; height: 23px; justify-content: flex-end; align-items: center; list-style: none;}.header__menu__lower-item { display: flex; margin: 0 20px 0 0; align-items: center;}@media (min-width: 641px) and (min-height: 500px) { .header__menu__lower-item { margin: 0 30px 0 0; }}@media (min-width: 1025px) { .header__menu__lower-item { margin: 0 50px 0 0; }}.header__menu__lower-item:last-child { margin: 0;}.header__menu__lower__text { position: relative; opacity: 1; color: rgb(42, 59, 67); text-decoration: none; transition: opacity 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);}@media (hover: hover), (min-width: 1025px) { .header__menu__lower__text:hover { opacity: 0.6; }}.header__menu__lower__text.active { color: rgb(240, 127, 14);}@media (hover: hover), (min-width: 1025px) { .header__menu__lower__text.active:hover { opacity: 1; cursor: default; }}.header__menu__icon { --bubble: unset; position: relative; width: 24px; height: 24px; fill: var(--fg); transition: opacity 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);}@media (min-width: 641px) and (min-height: 500px) { .header__menu__icon { width: 29px; height: 29px; }}.header__menu__icon-parking::before { position: absolute; top: 0; right: 4px; z-index: 1; display: flex; width: 21px; height: 21px; justify-content: center; align-items: center; border-radius: 50%; background: rgb(240, 127, 14); color: rgb(255, 255, 255); font-size: 12px; font-weight: 700; line-height: 0; text-align: center; transform: translate(50%, -50%); content: var(--bubble);}@media (hover: hover), (min-width: 1025px) { .header__menu__icon:hover { opacity: 0.6; }}.header__menu__icon__svg { position: absolute; top: 50%; left: 0; width: 100%; height: 100%; fill: var(--fg); transform: translate3d(0, -50%, 0);}.header__modal { display: flex; gap: 20px; flex-direction: column; align-items: center;}.header__modal__text { margin: 10px 0; color: rgb(240, 127, 14); word-break: keep-all; white-space: nowrap;}.header__modal__text a { color: rgb(42, 59, 67); text-decoration: none; word-break: keep-all; white-space: nowrap;}.header__burger { position: relative; display: flex; width: 27px; height: 18px; align-items: center; transition: opacity 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);}@media (min-width: 641px) and (min-height: 500px) { .header__burger { width: 32px; height: 27px; }}.header__burger::before { position: absolute; top: 50%; left: 50%; display: block; width: 100%; height: 18px; border-top: 2px solid var(--fg); border-bottom: 2px solid var(--fg); background: none; transform: translate(-50%, -50%); transition: none; content: "";}@media (min-width: 641px) and (min-height: 500px) { .header__burger::before { height: 21px; border-top: 3px solid var(--fg); border-bottom: 3px solid var(--fg); }}.header__burger::after { width: 100%; height: 2px; background: var(--fg); content: "";}@media (min-width: 641px) and (min-height: 500px) { .header__burger::after { height: 3px; }}@media (hover: hover), (min-width: 1025px) { .header__burger:hover { opacity: 0.6; }}.header__burger-patty { position: absolute; text-indent: -999em;}.header--sticky { position: sticky; top: 0; z-index: 1000; pointer-events: none;}.header--sticky > * { pointer-events: auto;}.header--sticky .header { top: -55px; transform: translate3d(0, 45px, 0);}@media (min-width: 641px) and (min-height: 500px) { .header--sticky .header { top: -105px; transform: translate3d(0, 80px, 0); }}@media (min-width: 1025px) { .header--sticky .header { top: -130px; transform: translate3d(0, 90px, 0); }}.header--sticky .header__logo { width: 140px; height: 22px;}@media (min-width: 641px) and (min-height: 500px) { .header--sticky .header__logo { width: 250px; height: 40px; }}.header--sticky .header__menu__upper { display: none;}.header--sticky .header__menu__lower,.header--sticky .header__logo { margin-top: 10px;}@media (min-width: 641px) and (min-height: 500px) { .header--sticky .header__menu__lower, .header--sticky .header__logo { margin-top: 25px; }}@media (min-width: 1025px) { .header--sticky .header__menu__lower, .header--sticky .header__logo { margin-top: 45px; }}@keyframes out { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 0, 0); }}.header--deanimate .header { top: -55px; transform: translate3d(0, 45px, 0); animation-name: out; animation-duration: 500ms; animation-timing-function: ease-in-out; animation-fill-mode: forwards;}@media (min-width: 641px) and (min-height: 500px) { .header--deanimate .header { top: -105px; transform: translate3d(0, 80px, 0); }}@media (min-width: 1025px) { .header--deanimate .header { top: -130px; transform: translate3d(0, 90px, 0); }}.modal { position: fixed; top: 0; left: 0; z-index: 9999; display: none; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}.modal.active { display: flex; justify-content: center; align-items: center;}.modal:before { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); content: "";}.modal__container { width: 100%; pointer-events: none;}.modal__container__top { border-radius: 15px 15px 0 0; background: rgb(245, 242, 239);}@media (min-width: 641px) and (min-height: 500px) { .modal__container__top { background: none; }}.modal__container__bottom { border-radius: 0 0 15px 15px; background: rgb(255, 255, 255);}@media (min-width: 641px) and (min-height: 500px) { .modal__container__bottom { background: none; }}.modal__title,.modal__content { pointer-events: auto;}.modal__title { display: flex; margin: 0; padding: 16px 0; justify-content: space-between; align-items: center;}@media (min-width: 641px) and (min-height: 500px) { .modal__title { margin: 0 -30px; padding: 30px; border-radius: 15px 15px 0 0; background: rgb(245, 242, 239); }}.modal__title h5 { margin: 0;}.modal__content { overflow-y: auto; margin: 0; padding: 30px 0 50px; max-height: 80vh;}@media (min-width: 641px) and (min-height: 500px) { .modal__content { margin: 0 -30px; padding: 50px 30px 75px; border-radius: 0 0 15px 15px; background: rgb(255, 255, 255); }}.modal__content__inner { padding: 15px;}@media (min-width: 1025px) { .modal__content__inner { display: flex; justify-content: center; align-items: center; }}.modal__content__inner form { padding: 0;}.modal__close { opacity: 1; line-height: 1; transition: opacity 400ms cubic-bezier(0.86, 0, 0.07, 1);}.modal__close__icon { width: 27px; height: 23px;}@media (hover: hover), (min-width: 1025px) { .modal__close:hover { opacity: 0.6; cursor: pointer; }}.fill-parent { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}/*** Animation settings:** This file contains all settings for the entry-animation of content-blocks.* The animation is triggered by the intersection-observer, so if a user scrolls* to the block, the animation will fire.* Duration, delay and offset can be adjusted in the following variables.** To prevent a block from animating add it in the lower part of this file.* for example: &.stage, &.gallery, &.teaser { transform: none; opacity: 1;}** Individual adjustments can be made in the blocks scss file.*/.origin, .text-media.intersectionAnimation--origin .text-media__headline,.text-media.intersectionAnimation--origin .text-media__text,.text-media.intersectionAnimation--origin .text-media__media, .teaser.intersectionAnimation--origin .teaser__headline,.teaser.intersectionAnimation--origin .teaser__text,.teaser.intersectionAnimation--origin .teaser__link__container, .rental-teaser.intersectionAnimation--origin .rental-teaser__headline, .rental-teaser.intersectionAnimation--origin .rental-teaser__text, .rental-teaser.intersectionAnimation--origin .rental-teaser__link, .rental-teaser.intersectionAnimation--origin .rental-teaser__slider, .quotation.intersectionAnimation--origin .quotation__headline, .quotation.intersectionAnimation--origin .quotation__quote, .purchase-teaser.intersectionAnimation--origin .purchase-teaser__headline, .purchase-teaser.intersectionAnimation--origin .purchase-teaser__text, .purchase-teaser.intersectionAnimation--origin .purchase-teaser__link, .purchase-teaser.intersectionAnimation--origin .purchase-teaser__slider, .icon-teaser.intersectionAnimation--origin .icon-teaser__headline,.icon-teaser.intersectionAnimation--origin .icon-teaser__link,.icon-teaser.intersectionAnimation--origin .icon-teaser__steps__step, .combination-teaser.intersectionAnimation--origin .combination-teaser__headline,.combination-teaser.intersectionAnimation--origin .combination-teaser__vehicles,.combination-teaser.intersectionAnimation--origin .vehicle-list-item,.combination-teaser.intersectionAnimation--origin .request-banner, .stage-list.intersectionAnimation--origin .stage_list__headline,.stage-list.intersectionAnimation--origin .stage_list__breadcrumb,.stage-list.intersectionAnimation--origin .stage_list__text, .content-block.intersectionAnimation--origin { opacity: 0.2; transform: translate3d(0, 50px, 0);}.animate, .text-media.intersectionAnimation--animate .text-media__headline,.text-media.intersectionAnimation--animate .text-media__text,.text-media.intersectionAnimation--animate .text-media__media, .teaser.intersectionAnimation--animate .teaser__headline,.teaser.intersectionAnimation--animate .teaser__text,.teaser.intersectionAnimation--animate .teaser__link__container, .rental-teaser.intersectionAnimation--animate .rental-teaser__headline, .rental-teaser.intersectionAnimation--animate .rental-teaser__text, .rental-teaser.intersectionAnimation--animate .rental-teaser__link, .rental-teaser.intersectionAnimation--animate .rental-teaser__slider, .quotation.intersectionAnimation--animate .quotation__headline, .quotation.intersectionAnimation--animate .quotation__quote, .purchase-teaser.intersectionAnimation--animate .purchase-teaser__headline, .purchase-teaser.intersectionAnimation--animate .purchase-teaser__text, .purchase-teaser.intersectionAnimation--animate .purchase-teaser__link, .purchase-teaser.intersectionAnimation--animate .purchase-teaser__slider, .icon-teaser.intersectionAnimation--animate .icon-teaser__headline,.icon-teaser.intersectionAnimation--animate .icon-teaser__steps__step,.icon-teaser.intersectionAnimation--animate .icon-teaser__link, .combination-teaser.intersectionAnimation--animate .combination-teaser__headline,.combination-teaser.intersectionAnimation--animate .combination-teaser__vehicles,.combination-teaser.intersectionAnimation--animate .vehicle-list-item,.combination-teaser.intersectionAnimation--animate .request-banner, .stage-list.intersectionAnimation--animate .stage_list__headline,.stage-list.intersectionAnimation--animate .stage_list__breadcrumb,.stage-list.intersectionAnimation--animate .stage_list__text, .content-block.intersectionAnimation--animate { opacity: 1; transform: translate3d(0, 0, 0); transition-property: opacity, transform; transition-duration: 500ms, 600ms; transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-delay: 100ms, 0ms;}.content-block.intersectionAnimation--origin.stage { transform: none;}.content-block.intersectionAnimation--animate.stage { transform: none;}.purchase-teaser__slider__background--active .bar-background__bar, .stage_list__image--active .bar-background__bar, .stage-big__slide.swiper-slide-active .bar-background__bar, .bar-background.full .bar-background__bar { transition-delay: calc(400ms + 800ms * var(--left) + 600ms * var(--top));}.purchase-teaser__slider__background--active .bar-background__bar::after, .stage_list__image--active .bar-background__bar::after, .stage-big__slide.swiper-slide-active .bar-background__bar::after, .bar-background.full .bar-background__bar::after { transform: translate3d(calc(100% - 1px), 0, 0) rotate(14deg);}.bar-background { --top: 0; --left: 0; position: relative; width: 100%; height: auto;}.bar-background::before { position: relative; display: block; padding: 0 0 48%; width: 100%; height: 0; content: "";}.bar-background__bar { position: absolute; top: calc(var(--top, 0) * 100%); left: calc(var(--left, 0) * 100%); overflow: hidden; transition-delay: calc(500ms * (1 - var(--left)) + 300ms * (1 - var(--top)));}.bar-background__bar[data-size="1"] { width: 8%; height: 2.6%;}.bar-background__bar[data-size="2"] { width: 14%; height: 2.6%;}.bar-background__bar[data-size="3"] { width: 25.5%; height: 5.4%;}.bar-background__bar[data-size="4"] { width: 41.6%; height: 10.3%;}.bar-background__bar[data-color=white] { color: rgb(255, 255, 255);}.bar-background__bar[data-color=halfwhite] { color: rgba(255, 255, 255, 0.55);}.bar-background__bar[data-color=light] { color: rgb(254, 133, 45);}.bar-background__bar[data-color=dark] { color: rgb(208, 104, 0);}.bar-background__bar::after { position: absolute; top: 0; right: 100%; display: block; padding: 0 0 100%; width: 100%; height: auto; background: currentColor; transform: translate3d(-2px, 0, 0) rotate(14deg); transform-origin: top right; transition: transform 1400ms cubic-bezier(0.23, 1, 0.32, 1); transition-delay: inherit; content: "";}.stage-small { color: rgb(255, 255, 255);}.stage-small::before { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: linear-gradient(to right, rgba(34, 51, 58, 0.7) 0%, rgba(34, 51, 58, 0) 100%); content: "";}.stage-small__breadcrumb { --breadcrumb-backlink-color: rgb(255, 255, 255); --breadcrumb-bg-color: transparent; margin: 0 0 50px;}.stage-small__top-headline, .stage-small__headline, .stage-small__text { position: relative; z-index: 2; margin: 0;}.stage-small__background { object-fit: cover; object-position: var(--alignment, center);}.stage-big { --after-height: 60px; display: grid; overflow: hidden; padding: 30px 0 50px; height: auto; min-height: calc(100vh - 55px); grid-template-rows: auto 1fr auto; grid-template-columns: 100%; background: rgb(240, 127, 14); color: rgb(255, 255, 255);}@media (min-width: 641px) and (min-height: 500px) { .stage-big { --after-height: 205px; padding: 50px 0 75px; min-height: calc(100vh - 105px); }}@media (min-width: 1025px) { .stage-big { --after-height: 153px; padding: 0 0 75px; min-height: calc(100vh - 130px); grid-template-rows: minmax(auto, 1fr) 175px; }}.stage-big::after { position: absolute; bottom: 0; left: 0; z-index: 1; display: block; width: 100%; height: 230px; background: rgb(42, 59, 67); content: "";}@media (min-width: 641px) and (min-height: 500px) { .stage-big::after { height: 205px; }}@media (min-width: 1025px) { .stage-big::after { height: 153px; }}@media (min-width: 1025px) { .stage-big__breadcrumb { --breadcrumb-backlink-color: rgb(255, 255, 255); grid-row: 1/span 1; margin: 0 0 30px; }}.stage-big__slides { --swiper-wrapper-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); grid-row: 1/span 1; grid-column: 1/span 1; overflow: visible; width: 100%;}@media (min-width: 1025px) { .stage-big__slides { align-self: center; padding: 50px 0; }}.stage-big__slides__wrapper { height: auto;}@media (min-width: 641px) and (min-height: 500px) { .stage-big__slides__wrapper { min-height: unset; align-items: center; }}.stage-big__slides__pagination.swiper-pagination { --swiper-pagination-bullet-height: 10px; --swiper-pagination-bullet-horizontal-gap: 5px; --swiper-pagination-bullet-inactive-color: rgb(255, 255, 255); --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-opacity: 0.35; --swiper-pagination-bullet-width: 10px; --swiper-pagination-color: rgb(255, 255, 255); position: relative; top: 0; bottom: 0; margin: 25px auto 0; line-height: 10px; text-align: left;}@media (min-width: 641px) and (min-height: 500px) { .stage-big__slides__pagination.swiper-pagination { margin-top: 50px; }}.stage-big__slides .swiper-pagination-bullet { border-radius: 2px; transition: opacity 150ms linear;}.stage-big__slides .swiper-pagination-bullet:first-child { margin-left: 0;}.stage-big__slides .swiper-pagination-bullet-active:hover { cursor: default;}.stage-big__slides__wrapper.autoplay { --swiper-wrapper-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);}.stage-big__slide { display: grid; height: auto; grid-template-rows: auto 1fr;}@media (min-width: 1025px) { .stage-big__slide { grid-template-rows: auto; }}.stage-big__slide__text-container { position: relative; grid-row: 2/span 1; align-self: flex-start; z-index: 2; grid-template-rows: auto 1fr;}@media (min-width: 1025px) { .stage-big__slide__text-container { grid-row: 1/span 1; align-self: center; }}.stage-big__slide__text-container > * { margin: 0;}.stage-big__slide__text, .stage-big__slide__link { margin-top: 20px;}.stage-big__slide__link { width: -moz-fit-content; width: fit-content; color: rgb(42, 59, 67);}.stage-big__slide__headline, .stage-big__slide__text, .stage-big__slide__link { opacity: 0; transform: translate3d(0, 100px, 0); transition-property: opacity, transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-delay: 300ms;}.stage-big__slide.swiper-slide-active .stage-big__slide__text-container .stage-big__slide__headline, .stage-big__slide.swiper-slide-active .stage-big__slide__text-container .stage-big__slide__text, .stage-big__slide.swiper-slide-active .stage-big__slide__text-container .stage-big__slide__link { opacity: 1; transform: translate3d(0, 0, 0); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53), cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 600ms;}.stage-big__slide.swiper-slide-active .stage-big__slide__text-container .stage-big__slide__text { transition-delay: 900ms;}.stage-big__slide.swiper-slide-active .stage-big__slide__text-container .stage-big__slide__link { transition-delay: 1200ms;}.stage-big__slide__image-container { position: absolute; top: calc(100% + 35px); grid-column: fullsize-start/fullsize-end; display: flex; margin-left: -15%; width: 130%; height: calc(100vh - 55px - 100% - 36px - 270px - 30px - 50px); min-height: 150px; flex-flow: row nowrap; justify-content: center; align-items: center;}@media (min-width: 641px) and (min-height: 500px) { .stage-big__slide__image-container { top: calc(100% + 60px); grid-column: col-start 1/col-end 8; align-self: center; margin-left: 0; width: 100%; height: calc(100vh - 105px - 100% - 61px - 350px - 50px - 75px + 30px); min-height: 180px; }}@media (min-width: 1025px) { .stage-big__slide__image-container { position: relative; top: 0; grid-row: 1/span 1; grid-column: col-start 7/outerframe-end; height: auto; max-height: calc(100vh - 150px - 61px - 175px - 75px - 75px); }}.stage-big__slide .bar-background { flex: 0 0 90%;}@media (min-width: 641px) and (min-height: 500px) { .stage-big__slide .bar-background { left: 5%; width: 90%; }}@media (min-width: 1025px) { .stage-big__slide .bar-background { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }}.bar-background + .stage-big__slide__image { position: relative; margin-left: -90%; width: 100%; height: 100%; flex: 0 0 100%; object-fit: contain; object-position: center;}@media (min-width: 1025px) { .bar-background + .stage-big__slide__image { margin: 0; }}.stage-big__slide__image-container > .stage-big__slide__image { opacity: 0; transform: scale(0.95); transition-property: opacity, transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-delay: 300ms;}.stage-big__slide.swiper-slide-active .stage-big__slide__image-container > .stage-big__slide__image { opacity: 1; transform: scale(1.001); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53), cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 900ms;}.stage-big__slide__image { margin: 0 0 0 -5%; width: 110%; height: 100%; background: transparent !important; object-fit: contain; object-position: center;}.stage-big__taxonomies { position: relative; grid-row: 3/span 1; grid-column: 1/span 1; margin-top: 160px;}@media (min-width: 641px) and (min-height: 500px) { .stage-big__taxonomies { margin-top: 150px; }}@media (min-width: 1025px) { .stage-big__taxonomies { grid-row: 2/span 1; margin-top: 0; }}.stage_list { --after-height: 120px; --primary: rgb(0, 0, 0); --secondary: rgb(0, 0, 0); margin: 0 0 var(--after-height); padding: 50px 0 0; min-height: 371px; grid-template-rows: auto auto 1fr auto; background: rgb(240, 127, 14);}@media (min-width: 641px) and (min-height: 500px) { .stage_list { --after-height: 229px; padding: 100px 0 0; }}@media (min-width: 1025px) { .stage_list { --after-height: 162px; padding: 75px 0 0; min-height: 391px; }}.stage_list::after { position: absolute; top: calc(100% - 1px); width: 100%; height: calc(var(--after-height) + 3px); background: rgb(42, 59, 67); content: "";}.stage_list--search { margin: 0 0 30px;}@media (min-width: 1025px) { .stage_list--search { margin: 0 0 50px; }}.stage_list__breadcrumb { grid-row: 1/span 1;}.stage_list__headline { grid-row: 2/span 1; z-index: 10; display: -webkit-box; overflow: hidden; margin: 0 0 20px; color: rgb(255, 255, 255); text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}@media (min-width: 1025px) { .stage_list__headline { margin: 0 0 10px; }}.stage_list__text { grid-row: 3/span 1; z-index: 10; display: -webkit-box; overflow: hidden; margin: 0 0 20px; color: rgb(255, 255, 255); text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}@media (min-width: 641px) and (min-height: 500px) { .stage_list__text { margin: 0 0 70px; }}@media (min-width: 1025px) { .stage_list__text { margin: 0 0 60px; }}.stage_list__image { position: relative; grid-row: 3/span 1; grid-column: fullsize-start/fullsize-end; display: none; overflow: hidden; margin: 0 0 -52px; height: 100%; min-height: 218px;}@media (min-width: 641px) and (min-height: 500px) { .stage_list__image { grid-column: 6/fullsize-end; display: block; margin: 0 0 -55px; }}@media (min-width: 1025px) { .stage_list__image { position: absolute; top: 45px; right: 0; grid-row: unset; grid-column: unset; margin: 0 0 116px; width: 60%; height: calc(100% - 45px); }}.stage_list__image__background { left: 50%; margin: 0; width: 239px; height: 218px; background: transparent !important; transform: translateX(-50%); object-fit: contain;}@media (min-width: 641px) and (min-height: 500px) { .stage_list__image__background { width: 280px; height: 255px; }}@media (min-width: 1025px) { .stage_list__image__background { margin: 0 0 0 10%; width: 407px; height: 371px; }}.stage_list .bar-background { width: 100%;}.stage_list .bar-background__bar::after { transition-delay: 500ms;}.stage_list__taxonomies { grid-row: 4/span 1; margin-bottom: calc(var(--after-height) / 2 * -1);}.stage-list { padding: 0;}.stage-list.intersectionAnimation--animate .stage_list__headline { transition-delay: 300ms;}:root { --breadcrumb-backlink-color: rgb(42, 59, 67); --breadcrumb-bg-color: rgb(240, 127, 14); --breadcrumb-color: rgb(255, 255, 255);}.breadcrumb { display: flex; margin: 0; padding: 0; flex-wrap: wrap; align-items: center; background: var(--breadcrumb-bg-color); list-style: none;}@media (max-width: 640px) { .breadcrumb { margin-bottom: 10px; }}.breadcrumb__link { display: flex; align-items: center; color: var(--breadcrumb-color); text-decoration: none; transition: opacity 200ms linear;}@media (hover: hover), (min-width: 1025px) { .breadcrumb__link:hover { opacity: 0.6; }}.breadcrumb__link--back { color: var(--breadcrumb-backlink-color);}.breadcrumb__link-icon { width: 24px; height: 24px;}.breadcrumb__link-denomination { position: absolute; text-indent: -999em;}.breadcrumb__item { position: relative; display: flex; padding: 0 25px 0 0; align-items: center;}.breadcrumb__item::after { position: absolute; top: 50%; right: 10px; width: 7px; height: 7px; border: 1px solid var(--breadcrumb-color); border-top: 0; border-left: 0; transform: translateY(-50%) rotate(-45deg); content: "";}.breadcrumb__item:last-child::after { content: unset;}.breadcrumb__item--active { opacity: 0.7; pointer-events: none;}.breadcrumb__item-back { display: flex; margin: 0 15px 0 0; padding: 0 15px 0 20px;}@media (min-width: 641px) and (min-height: 500px) { .breadcrumb__item-back { border-right: 1px solid var(--breadcrumb-color); }}.breadcrumb__item-back::after { content: unset;}.breadcrumb__item-back::before { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border: 2.4px solid var(--breadcrumb-backlink-color); border-right: 0; border-bottom: 0; transform: translateY(-50%) rotate(-45deg); content: "";}.search-list:before { display: block; width: 100vw; height: 85px; background: rgb(42, 59, 67); content: "";}@media (max-width: 640px) { .search-list:before { position: absolute; top: 0; left: 0; height: 70px; }}.search-list .vehicle-list__headline { position: relative; margin: 0; padding: 25px 20px; color: rgb(255, 255, 255); transition: color 0.15s ease-in-out 0.15s; cursor: pointer;}@media (hover: hover), (min-width: 1025px) { .search-list .vehicle-list__headline:hover { opacity: 0.6; }}@media (min-width: 641px) and (min-height: 500px) { .search-list .vehicle-list__headline { padding: 30px 40px; }}.search-list .vehicle-list__headline::after { position: absolute; bottom: -1px; left: 0; z-index: -1; width: 100%; height: 100%; max-height: 0; border-radius: 8px 8px 0 0; background: rgb(34, 51, 58); transition: max-height 0.3s ease-in-out; content: "";}.search-list .vehicle-list__headline--active { color: rgb(240, 127, 14);}@media (hover: hover), (min-width: 1025px) { .search-list .vehicle-list__headline--active:hover { opacity: 1; cursor: default; }}.search-list .vehicle-list__headline--active::after { max-height: 100%;}.search-list .vehicle-list__headline-wrapper { grid-row-start: 1; z-index: 0; display: flex;}.search-list .vehicle-list__section { grid-row-start: 2; z-index: 1; padding: 30px 0; opacity: 0;}@media (min-width: 1025px) { .search-list .vehicle-list__section { padding: 100px 0; }}.search-list .vehicle-list__section--active { z-index: 2; opacity: 1;}.taxonomy-selector { --primary: rgb(240, 127, 14); --secondary: rgb(52, 79, 92); position: relative; z-index: 15; display: flex; overflow: hidden; margin: 0; padding: 0; width: 100%; flex-wrap: wrap; border-radius: 15px; background: rgb(255, 255, 255); list-style: none;}@media (min-width: 1025px) { .taxonomy-selector { overflow: visible; flex-wrap: nowrap; }}.taxonomy-selector__item { position: relative; display: flex; height: 92px; flex: 1 1 50%;}@media (min-width: 641px) and (min-height: 500px) { .taxonomy-selector__item { height: 175px; flex: 1 1 33.3333333333%; }}@media (min-width: 1025px) { .taxonomy-selector__item { flex: 1 1 16.6666666667%; }}.taxonomy-selector__item--active { --primary: rgb(240, 127, 14); --secondary: rgb(255, 255, 255); margin-top: 0; border-radius: 0; background: rgb(42, 59, 67);}@media (min-width: 1025px) { .taxonomy-selector__item--active { margin-top: -8px; border-radius: 8px 8px 0 0; }}.taxonomy-selector__item--active::after, .taxonomy-selector__item--active::before { position: absolute; bottom: -8px; left: -16px; width: 16px; height: 10%; border-radius: 0 0 8px; background: transparent; box-shadow: 8px 0 0 rgb(42, 59, 67); pointer-events: none; content: unset;}@media (min-width: 1025px) { .taxonomy-selector__item--active::after, .taxonomy-selector__item--active::before { content: ""; }}.taxonomy-selector__item--active::after { right: -16px; left: unset; border-radius: 0 0 0 8px; box-shadow: -8px 0 0 rgb(42, 59, 67); content: unset;}@media (min-width: 1025px) { .taxonomy-selector__item--active::after { content: ""; }}.taxonomy-selector__item--active .taxonomy-selector__item-link { height: 100%; border-radius: 8px 8px 0 0; background: inherit;}@media (min-width: 1025px) { .taxonomy-selector__item--active .taxonomy-selector__item-link { height: calc(100% + 8px); }}.taxonomy-selector__item--active .taxonomy-selector__item-link-headline { color: rgb(255, 255, 255);}.taxonomy-selector__item-link { display: flex; width: 100%; flex-wrap: wrap; align-content: center; justify-content: center; color: rgb(52, 79, 92); text-decoration: none;}.taxonomy-selector__item-link-headline { margin: 0; flex: 0 0 100%; text-align: center;}.taxonomy-selector__item-link-svg { margin: 0 0 10px; max-width: 67px; max-height: 29px;}@media (min-width: 641px) and (min-height: 500px) { .taxonomy-selector__item-link-svg { margin: 0 0 20px; max-width: 116px; max-height: 50px; }}Startseite - Nederlands - EASY RENT truck & trailer