/* flex-kit.css */ * { /*outline: none;*/ } script, style { display: none !important; } :root { --gap: 10px; --gap-section: 30px; --gap-wrapper: 30px; --col-span: 1; --line-clamp: 3; --line-clamp-height: 1.3em; --width-wrapper: 1200px; --flex-aspect-ratio: 1; --aspect-ratio: 1; --font-ratio-height: 0.9; --font-ratio-bottom: 0.1; } .kit-wrapper { box-sizing: border-box; position: relative; margin-left: auto; margin-right: auto; width: var(--width-wrapper); max-width: 100%; padding: 0 var(--gap-wrapper); } .kit-sections { box-sizing: border-box; position: relative; padding-top: var(--gap-section); } .kit-section { box-sizing: border-box; position: relative; margin-bottom: var(--gap-section); } .kit-line-clamp { line-height: var(--line-clamp-height); max-height: calc(var(--line-clamp-height) * var(--line-clamp)); display: inline-block; word-wrap: break-word; overflow: hidden; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp); display: -webkit-box; word-break: break-word; white-space: normal; } .flex-list { box-sizing: border-box; position: relative; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; --col-span: 1; --col-count: 4; --gap-row: var(--gap); --flex-list-width: calc(100%); } .flex-list:not(.owl-loaded) { margin-left: calc(var(--gap) / -2) !important; margin-right: calc(var(--gap) / -2) !important; margin-top: calc(var(--gap-row) / -2) !important; margin-bottom: calc(var(--gap-row) / -2) !important; } .flex-list:before, .flex-list:after { content: ''; } .flex-list:not(.owl-loaded,.slick-slider) > * { position: relative; padding-left: calc(var(--gap) / 2); padding-right: calc(var(--gap) / 2); padding-top: calc(var(--gap-row) / 2); padding-bottom: calc(var(--gap-row) / 2); } .flex-list-item { --col-width: calc(100% / var(--col-count) * var(--col-span)); --line-height: calc(100% / var(--line-count, 1) * var(--line-span, 1)); box-sizing: border-box; } .flex-list > .flex-list-item { width: var(--col-width) !important; max-width: var(--col-width) !important; flex-basis: var(--col-width) !important; } .flex-list-item:before, .flex-list-item:after { content: ''; } .flex-list-item-delimiter { height: 0; width: 0; flex: 1 0 0; } .flex-list--static { --line-count: 1; } .flex-list--static .flex-list-item { height: var(--line-height) !important; max-height: var(--line-height) !important; } /* .flex-aspect-ratio */ .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > img { height: auto; object-fit: contain; } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto), .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) { position: relative; padding: 0; } .flex-aspect-ratio:not(.owl-loaded):not(.flex-list) > *:not(.flex-cell-aspect-auto)::before, .flex-aspect-ratio.owl-loaded:not(.flex-list) > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before { content: ""; display: block; width: 100%; padding-bottom: calc(100% / (var(--flex-aspect-ratio))); } .flex-aspect-ratio.flex-list:not(.owl-loaded) > *:not(.flex-cell-aspect-auto)::before { content: ""; display: block; width: 100%; padding-bottom: calc((100% / var(--col-span, 1) - 0 * var(--gap, 10px)) / var(--flex-aspect-ratio)); } .flex-aspect-ratio.flex-list.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before { content: ""; display: block; width: 100%; padding-bottom: calc(100% / (var(--flex-aspect-ratio))); } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: contain; } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture, .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture { width: 100%; height: 100%; } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture > img, .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture > img { object-fit: contain; width: 100%; height: 100%; } .flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child, .flex-list-item.aspect-ratio > :first-child { padding: calc(var(--gap) / 2); } /* --aspect-ratio */ @supports (--aspect-ratio:0) { .aspect-ratio { position: relative; width: 100%; } .aspect-ratio > img { height: auto; object-fit: contain; } .aspect-ratio::before { content: ""; display: block; width: 100%; padding-bottom: calc(100% / (var(--aspect-ratio))); pointer-events: none; } .aspect-ratio > :first-child { width: 100%; position: absolute; top: 0; left: 0; height: 100%; object-fit: contain; } } /* picture - icon */ .kit-icon picture, .kit-icon img, .kit-icon svg, .kit-picture picture, .kit-picture img, .kit-picture svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; fill: currentColor; transition: inherit; object-fit: contain; object-position: center; } .kit-picture-line, .kit-icon-line { display: inline-block; margin-bottom: calc(-1em * var(--font-ratio-bottom, 0.2)); } .kit-picture-line svg, .kit-picture-line picture, .kit-picture-line img, .kit-icon-line svg, .kit-icon-line picture, .kit-icon-line img { height: calc(1em * var(--font-ratio-height, 1)); width: auto; max-width: 100%; max-height: 100%; vertical-align: baseline; display: block; fill: currentColor; transition: inherit; object-fit: contain; object-position: center; margin: auto; } /* flex-kit.css end */