:root {
--rightColumnWidth: 20%;
--rightColumnWidth: 280px;}

@media (min-width:1920px) {
:root {
--rightColumnWidth: 20%;
--rightColumnWidth: 350px;}
}


.index .content {padding: 0 0 var(--gap) 0}
.index h4 {display: flex; justify-content: space-between; margin-bottom: var(--gapSmall); overflow: hidden;}
.index h4 > a.headerLink {display: block; font-size: calc( var(--fontSizeXLarge) + 0.2rem); color: var(--fontColor);}
.index h4 > a.headerLink p {display: block; color: var(--darkGrey);}


@media screen and (max-width: 1024px) {


.index h4 {flex-direction: column; text-align: center;}
.index h4 > a.headerLink {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-inline: auto}
.index h4 .actionButton {font-size: var(--fontSizeSmall); padding: 8px 12px; margin: 10px auto 8px auto;}

}


/* TOP MESSAGE - just text and action button */

.indexTopMessage {display: flex; gap: var(--gap); background: var(--helpColor); padding: var(--gapSmall); color: white; margin: 0 0 var(--gapSmall) 0;}
.indexTopMessage * {color: white}
.indexTopMessage.warningMessage {background: red}
.indexTopMessage.successMessage {background: var(--green)}
.indexTopMessage.noteMessage {background: var(--infoColor)}
.indexTopMessage > div {flex: 1; line-height: 1.4;}
.indexTopMessage h5 {margin-bottom: 6px}
.indexTopMessage .actionButton {border: 3px white solid}
.indexTopMessage .actionButton:hover {box-shadow: 0 0 14px white; text-shadow: 0 0 6px rgba(255,255,255,0.4)}


@media screen and (max-width: 1024px) {

.indexTopMessage {flex-direction: column; justify-content: center; gap: var(--gapSmall);}
.indexTopMessage > div {text-align: center}
.indexTopMessage .actionButton {margin: 0 auto}

}


.flexWrap, .bannerPart {display: flex; gap: var(--gapSmall); flex-direction: row; flex-wrap: wrap; width: 100%}


.contentPart {padding-inline: var(--gap);}
.contentPart section {margin: 0}


.indexLowerPart {gap: var(--gapXLarge); display: flex; margin: var(--gapLarge) 0 0 0;}
.indexLowerPart section {margin: 0}

.indexLowerPart .indexLeftWideColumn {flex: 1; display: flex; flex-direction: column; gap: var(--gapXLarge);}


@media screen and (min-width: 1921px) {
.contentPart {padding-inline: var(--gapLarge);}
}


@media screen and (max-width: 1024px) {

.contentPart {padding-inline: var(--gapSmall);}

.indexLowerPart {flex-direction: column; gap: 0;}
.indexLowerPart .indexLeftWideColumn {order: 2}
.indexLowerPart .indexRightNarrowColumn {order: 1; width: 100%; flex: 1}
.indexLowerPart .indexStats {display: none}

}


.bannerPart {padding-inline: var(--gapSmall); margin: var(--gapSmall) auto; gap: var(--gapSmall)}


.indexBanner {height: 300px; overflow: hidden; transition: .4s; container-type: inline-size;}
.indexBanner:hover {box-shadow: var(--materialShadowHover)}
.indexBanner a {display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; position: relative; padding: 16px}
.indexBanner a:hover,.indexBanner a:hover div {text-decoration: none !important}
.indexBanner .bannerBackground {z-index: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.indexBanner .bannerBackground img {width: 100%; height: 100%; object-fit: cover; object-position: center}


/* LARGE BANNER - LEFT SIDE */

.bannerLarge {container-name: bannerlarge; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; flex: 1;


/* TITLE */

}
.bannerLarge .bannerTitleContainer {flex: 0 0 45%; display: flex; justify-content: center; align-items: end; overflow: hidden}

.bannerLarge .bannerTitleText {z-index: 10; font-weight: bold; color: white; width: fit-content; margin: 0 auto; text-align: center; line-height: 1.15; position: relative; overflow: hidden; letter-spacing: 1px; font-size: 4.2rem;}


/* TEXT */

.bannerLarge .bannerSubTextContainer {z-index: 10; flex: 1; position: relative; display: flex; justify-content: center; align-items: start; overflow: hidden}

.bannerLarge .bannerSubText {backdrop-filter: blur(5px); background: rgba(0,0,0,0.4); padding: 16px 22px; text-align: center; line-height: 1.25; width: fit-content; overflow: hidden; border-radius: 4px; position: absolute; text-wrap: pretty;}

.bannerLarge .bannerSubText,.bannerLarge .bannerSubText * {color: white; font-size: clamp(2.2rem, 5vw, 2.8rem); font-weight: 400}

.bannerLarge .colorPalette_1 > div {background: rgba(188,0,0,.8); color: white}
.bannerLarge .colorPalette_2 > div {background: rgba(0,188,0,.8); color: white}
.bannerLarge .colorPalette_3 > div {background: rgba(0,40,188,.8); color: white}
.bannerLarge .colorPalette_4 > div {background: rgba(255,165,0,.85); color: white}


/* ==== OPTIONS ==== */
/* ================= */

/* POSITION OPTION - left position - default center */

.bannerLarge .bannerContentLeft {padding-inline: max(7%, 40px);}
.bannerLarge .bannerContentLeft .bannerTitleContainer {justify-content: flex-start;}
.bannerLarge .bannerContentLeft .bannerTitleContainer .bannerTitleText {margin:0}
.bannerLarge .bannerContentLeft .bannerSubTextContainer {justify-content: flex-start;}
.bannerLarge .bannerContentLeft .bannerSubTextContainer .bannerSubText {text-align: left; text-wrap: pretty;}
.bannerLarge .bannerContentLeft .bannerSubTextContainer .bannerSubText::before {text-align: left}


/* POSITION OPTION - right position */

.bannerLarge .bannerContentRight {padding-inline: max(7%, 40px);}
.bannerLarge .bannerContentRight .bannerTitleContainer {justify-content: flex-end;}
.bannerLarge .bannerContentRight .bannerTitleContainer .bannerTitleText {margin:0}
.bannerLarge .bannerContentRight .bannerSubTextContainer {justify-content: flex-end;}
.bannerLarge .bannerContentRight .bannerSubTextContainer .bannerSubText {text-align: right}
.bannerLarge .bannerContentRight .bannerSubTextContainer .bannerSubText::before {text-align: right}


/* ==== TITLE ==== */
/* =============== */

/* TITLE SHADOW & STROKE - for very light background */

.bannerLarge .titleShadow .bannerTitleText {text-shadow: 2px 3px 4px rgba(0,0,0,0.3); -webkit-text-stroke-width: 1px;-webkit-text-stroke-color: rgba(0, 0, 0, 0.2)}


/* TITLE SIZE OPTIONs - smaller for longer text */

.bannerLarge .titleSmall .bannerTitleText {font-size: clamp(3.4rem, 4vw, 4.0rem);}
.bannerLarge .titleSmaller .bannerTitleText {font-size: clamp(3.3rem, 4vw, 3.8rem);}


/* TITLE FX - TYPING effect */

.bannerLarge .titleTypingEffect .bannerTitleText {color: transparent}
.bannerLarge .titleTypingEffect .bannerTitleText::before {position: absolute; left: 0; top: 0; width: 0; color: white; overflow: hidden; animation: title-typing-fx 5s ease-out infinite}
.bannerLarge .titleTypingEffect .bannerTitleText::after {content: ''; position: absolute; left: 0; top: 0; width: 0.6em; height: 100%; background: #fff; margin-left: 6px; animation: title-typing-fx-cursor 5s ease-out infinite, title-typing-fx-cursor-blink 1s step-end infinite}


/* TITLE FX - Curtain revealing */

.bannerLarge .titleCurtainEffect .bannerTitleText::after {content: ''; position: absolute; left: 0; top: 0; width: 100%;height: 100%; background: #fff; animation: curtainFx 5s ease-in-out infinite}


/* TITLE FX - Split fade Scale */

.bannerLarge .titleSplitEffect .bannerTitleText {animation: splitFadeScale 1.5s ease-out}


/* TITLE FX - Slide from right */

.bannerLarge .titleSlideEffect .bannerTitleText {animation: slideInRight 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); overflow: visible}
.bannerLarge .titleSlideEffect .bannerTitleContainer {overflow: visible}


/* ==== TEXT ==== */
/* ============== */

/* TEXT PART OPTIONs - big / bigger text part for more space for text */

.bannerLarge .textBigPart .bannerTitleContainer {flex: 0 0 38%}
.bannerLarge .textBiggerPart .bannerTitleContainer {flex: 0 0 32%}


/* TEXT SIZE OPTIONs - smaller for longer text */

.bannerLarge .textSmall .bannerSubText,.bannerLarge .bannerSubTextSmall {font-size: calc(2.0rem + 0.6rem * (100vw - 320px) / 1600px)}
.bannerLarge .textSmaller .bannerSubText,.bannerLarge .bannerSubTextSmaller {font-size: calc(1.8rem + 0.6rem * (100vw - 320px) / 1600px)}


/* TEXT FX - fading */

/* 2 Text Divs */
.bannerLarge .text2Fading .bannerSubText {opacity: 0; animation: text2RotateFade 10s infinite}
.bannerLarge .text2Fading .bannerSubText_1 {animation-delay: 0s}
.bannerLarge .text2Fading .bannerSubText_2 {animation-delay: 5s}

/* 3 Text Divs */
.bannerLarge .text3Fading .bannerSubText {opacity: 0; animation: text3RotateFade 15s infinite}
.bannerLarge .text3Fading .bannerSubText_1 {animation-delay: 0s}
.bannerLarge .text3Fading .bannerSubText_2 {animation-delay: 5s}
.bannerLarge .text3Fading .bannerSubText_3 {animation-delay: 10s}


/* ==== BACKGROUND ==== */
/* ==================== */

/* background positioning */

.bannerLarge .bgLeft .bannerBackground img,.bannerLarge .bannerBgLeft img {object-position: left}
.bannerLarge .bgRight .bannerBackground img,.bannerLarge .bannerBgRight img {object-position: right}
.bannerLarge .bgBottom .bannerBackground img,.bannerLarge .bannerBgBottom img {object-position: bottom}
.bannerLarge .bgTop .bannerBackground img,.bannerLarge .bannerBgTop img {object-position: top}

.bannerLarge .bgTopRight .bannerBackground img,.bannerLarge .bannerBgTopRight img {object-position: right top}
.bannerLarge .bgTopLeft .bannerBackground img,.bannerLarge .bannerBgTopLeft img {object-position: left top}
.bannerLarge .bgBottomRight .bannerBackground img,.bannerLarge .bannerBgBottomRight img {object-position: right bottom}
.bannerLarge .bgBottomLeft .bannerBackground img,.bannerLarge .bannerBgBottomLeft img {object-position: left bottom}


/* 2 rotating backgrounds */

.bannerLarge .bg2Fading .bannerBackground {opacity: 0}
.bannerLarge .bg2Fading .bannerBackground1 {animation: bg2fade1 10s infinite}
.bannerLarge .bg2Fading .bannerBackground2 {animation: bg2fade2 10s infinite}

/* 3 backgrounds */

.bannerLarge .bg3Fading .bannerBackground {opacity: 0}
.bannerLarge .bg3Fading .bannerBackground1 {animation: bg3fade1 15s infinite}
.bannerLarge .bg3Fading .bannerBackground2 {animation: bg3fade2 15s infinite}
.bannerLarge .bg3Fading .bannerBackground3 {animation: bg3fade3 15s infinite}


/* Shape effect -Animated decorative left background */

.bannerLarge .decorativeShapes {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5;pointer-events: none; overflow: hidden;}
.bannerLarge .decorativeShape {position: absolute; left: 0; width: 100%; height: 150%; backdrop-filter: blur(2px); transform-origin: left center;}

.bannerLarge .decorBgEffect1 .decorativeShape {clip-path: polygon(0 0,34.2% 0,33.6% 16.66%,34.2% 33.33%,33.6% 50%,34.2% 66.66%,33.6% 83.33%,34.2% 100%,0 100%)}
.bannerLarge .decorBgEffect1 .shape1 {animation: calmBreath1 25s cubic-bezier(0.4,0,0.6,1) infinite; filter: saturate(1.1) contrast(1.1) brightness(0.88)}
.bannerLarge .decorBgEffect1 .shape2 {clip-path: polygon(0 0,32.8% 0,32.2% 16.66%,32.8% 33.33%,32.2% 50%,32.8% 66.66%,32.2% 83.33%,32.8% 100%,0 100%);animation: calmBreath2 20s cubic-bezier(0.4,0,0.6,1) infinite; filter: saturate(1.1) contrast(1.1) brightness(0.88)}


/* Circle effect - Animated decorative left background */

.bannerLarge .decorativeCircle {position: absolute; border-radius: 50%; background: rgba(0,0,0,0.09); filter: saturate(1.3) contrast(1.1) brightness(0.94);}
.bannerLarge .decorBgEffect2 .decorativeCircle {width: 2000px; height: 2000px; left: -1550px; top: 50%; margin-top: -1000px;}
.bannerLarge .decorBgEffect2 .circle1 {animation: threeCircles1 20s ease-in-out infinite;}
.bannerLarge .decorBgEffect2 .circle2 {animation: threeCircles2 20s ease-in-out infinite;}
.bannerLarge .decorBgEffect2 .circle3 {animation: threeCircles3 20s ease-in-out infinite;}


/* TITLE TYPING EFFECT */

@keyframes title-typing-fx {
0% {width: 0}
25% {width: 100%}
92% {width: 100%}
100% {width: 0}
}

@keyframes title-typing-fx-cursor {
0% {left: 0; opacity: 1}
25% {left: 100%; opacity: 1}
92% {left: 100%; opacity: 1}
99% {left: 0; opacity: 1}
100% {left: 0; opacity: 0}
}

@keyframes title-typing-fx-cursor-blink {
50% {opacity: 0}
}


/* TITLE CURTAIN EFFECT */

@keyframes curtainFx {
0% {transform: translateX(0); visibility: visible}
33% {transform: translateX(100%); visibility: visible}
33.1%, 100% {visibility: hidden}
}


/* TITLE SPLIT FADE EFFECT */

@keyframes splitFadeScale {
0% {letter-spacing: 2.5em; transform: scale(0.7); opacity: 0; filter: blur(8px)}
100% {letter-spacing: normal; transform: scale(1); opacity: 1; filter: blur(0)}
}


/* TITLE SLIDE IN RIGHT */

@keyframes slideInRight {
0% {transform: translateX(100%); opacity: 0}
100% {transform: translateX(0); opacity: 1}
}


/* TEXT Fading */

/* 2 text divs */

@keyframes text2RotateFade {
0% {opacity: 0}
5%, 45% {opacity: 1}
50%, 100% {opacity: 0}
}

/* 3 text divs */

@keyframes text3RotateFade {
0% {opacity: 0}
3%, 27% {opacity: 1}
30%, 100% {opacity: 0}
}


/* BACKGROUNDS Fading / rotating */

/* 2 Backgrounds */

@keyframes bg2fade1 {
0%, 45% {opacity: 1}
50%, 95% {opacity: 0}
100% {opacity: 1}
}

@keyframes bg2fade2 {
0%, 45% {opacity: 0}
50%, 95% {opacity: 1}
100% {opacity: 0}
}


/* 3 Backgrounds */

@keyframes bg3fade1 {
0%, 30% {opacity: 1}
33.33%, 100% {opacity: 0}
100% {opacity: 1}
}

@keyframes bg3fade2 {
0%, 30% {opacity: 0}
33.33%, 63.33% {opacity: 1}
66.66%, 100% {opacity: 0}
}

@keyframes bg3fade3 {
0%, 63.33% {opacity: 0}
66.66%, 96.66% {opacity: 1}
100% {opacity: 0}
}


/* DECORATIVE BACKGROUNDS ON THE LEFT */

@keyframes calmBreath1 {
0%, 100% {transform: translateY(-2%) scaleX(1)}
50% {transform: translateY(-28%) scaleX(1.04)}
}

@keyframes calmBreath2 {
0%, 100% {transform: translateY(-28%) scaleX(1.04)}
50% {transform: translateY(-2%) scaleX(1)}
}

@keyframes threeCircles1 {
0%, 100% {transform: translateY(-2%) scale(0.99);}
50% {transform: translateY(2%) scale(1.012);}
}

@keyframes threeCircles2 {
0%, 100% {transform: translateY(0%) scale(1.012);}
50% {transform: translateY(0%) scale(1);}
}

@keyframes threeCircles3 {
0%, 100% {transform: translateY(2%) scale(1.012);}
50% {transform: translateY(-2%) scale(0.99);}
}


@media screen and (max-width: 1024px) {

	.bannerLarge .bannerTitleContainer {flex: 0 0 40%}
	.bannerLarge .textBigPart .bannerTitleContainer {flex: 0 0 32%}
	.bannerLarge .textBiggerPart .bannerTitleContainer {flex: 0 0 26%}

	.bannerLarge .bannerContentLeft,
	.bannerLarge .bannerContentRight {padding-inline: 0px;}

	.bannerLarge .bannerContentLeft .bannerTitleContainer,
	.bannerLarge .bannerContentRight .bannerTitleContainer {justify-content: center}

	.bannerLarge .bannerContentLeft .bannerSubTextContainer,
	.bannerLarge .bannerContentRight .bannerSubTextContainer {justify-content: center;}

	.bannerLarge .bannerContentLeft .bannerSubTextContainer .bannerSubText,
	.bannerLarge .bannerContentLeft .bannerSubTextContainer .bannerSubText::before,
	.bannerLarge .bannerContentRight .bannerSubTextContainer .bannerSubText,
	.bannerLarge .bannerContentRight .bannerSubTextContainer .bannerSubText::before {text-align: center}

	.decorativeShapes {display: none;}

}


/* SMALL BANNER - RIGHT SIDE */

.bannerSmall {container-name: bannersmall; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #000;}
.bannerSmall .bannerContent {z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; width: 100%; height: 100%; box-sizing: border-box; padding: 16px 18px; position: relative}

.bannerSmall .bannerContentSmall.bannerSliderSmall {
--slideCount: 4;
--fullTime: 24s;
--oneSlideTime: calc(var(--fullTime) / var(--slideCount));
display: block;
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
background: #fff;}

.bannerSmall .bannerContentSmall.bannerSliderSmall_2 {
--slideCount: 2;
--fullTime: 14s;}

.bannerSmall .bannerContentSmall.bannerSliderSmall_3 {
--slideCount: 3;
--fullTime: 18s;}

.bannerSmall .bannerContentSmall.bannerSliderSmall_4 {
--slideCount: 4;
--fullTime: 24s;}

.bannerSmall .bannerContentSmall.bannerSliderSmall_5 {
--slideCount: 5;
--fullTime: 30s;}

.bannerSmall .bannerTitleContainer {z-index: 20; flex: 0 0 auto; width: 100%; display: flex; justify-content: center; align-items: center; overflow: visible}

.bannerSmall .bannerSubTextContainer {z-index: 20; flex: 0 0 auto; width: 100%; min-height: clamp(110px, 38cqi, 150px); position: relative; display: flex; justify-content: center; align-items: center; overflow: visible}

.bannerSmall .bannerSlideSmall {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
animation: bannerSmallSlideFade var(--fullTime) linear infinite;}

.bannerSmall .bannerSlideSmall_1 { animation-delay: 0s; }
.bannerSmall .bannerSlideSmall_2 { animation-delay: calc(var(--oneSlideTime) * 1); }
.bannerSmall .bannerSlideSmall_3 { animation-delay: calc(var(--oneSlideTime) * 2); }
.bannerSmall .bannerSlideSmall_4 { animation-delay: calc(var(--oneSlideTime) * 3); }
.bannerSmall .bannerSlideSmall_5 { animation-delay: calc(var(--oneSlideTime) * 4); }

.bannerSmall .bannerBackground {z-index: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.bannerSmall .bannerBackground img {width: 100%; height: 100%; object-fit: cover; object-position: center}

.bannerSmall .bannerShade {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
animation: bannerSmallShade var(--fullTime) linear infinite;
background: rgba(0,0,0,1);
backdrop-filter: blur(8px);}

.bannerSmall .bannerTextWrap {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 18px 14px;
text-align: center;}

.bannerSmall .bannerTitleText {z-index: 30; font-size: clamp(2.4rem, 17cqi, 2.8rem); font-weight: bold; color: #fff; margin: 0 auto; text-align: center; line-height: 1.18; white-space: normal; position: relative; overflow: hidden; letter-spacing: .5px; opacity: 0; transform: translateY(10px); animation: bannerSmallTitle var(--fullTime) linear infinite;}
.bannerSmall .bannerTitleText b {color: #fff; display: block; font-size: clamp(2.8rem, 17cqi, 3.6rem);}

.bannerSmall .bannerSubText {z-index: 30; font-size: clamp(2.6rem, 5.5cqi, 2.8rem); font-weight: 400; text-align: center; line-height: 1.25; text-wrap: pretty; white-space: normal; overflow: hidden; box-sizing: border-box; opacity: 0; transform: translateY(10px); margin-top: 12px; animation: bannerSmallSubtext var(--fullTime) linear infinite;}
.bannerSmall .bannerSubText * {font-size: clamp(2.6rem, 5.5cqi, 2.8rem);}

.bannerSmall .bannerSubText,.bannerSmall .bannerSubText * {color: #fff}

.bannerSmall .bannerSlideSmall_1 .bannerShade,.bannerSmall .bannerSlideSmall_1 .bannerTitleText,.bannerSmall .bannerSlideSmall_1 .bannerSubText {
animation-delay: 0s;}

.bannerSmall .bannerSlideSmall_2 .bannerShade,.bannerSmall .bannerSlideSmall_2 .bannerTitleText,.bannerSmall .bannerSlideSmall_2 .bannerSubText {
animation-delay: calc(var(--oneSlideTime) * 1);}

.bannerSmall .bannerSlideSmall_3 .bannerShade,.bannerSmall .bannerSlideSmall_3 .bannerTitleText,.bannerSmall .bannerSlideSmall_3 .bannerSubText {
animation-delay: calc(var(--oneSlideTime) * 2);}

.bannerSmall .bannerSlideSmall_4 .bannerShade,.bannerSmall .bannerSlideSmall_4 .bannerTitleText,.bannerSmall .bannerSlideSmall_4 .bannerSubText {
animation-delay: calc(var(--oneSlideTime) * 3);}

.bannerSmall .bannerSlideSmall_5 .bannerShade,.bannerSmall .bannerSlideSmall_5 .bannerTitleText,.bannerSmall .bannerSlideSmall_5 .bannerSubText {
animation-delay: calc(var(--oneSlideTime) * 4);}

.bannerSmall .colorPalette_1 > div {background: rgba(188,0,0,.8); color: white}
.bannerSmall .colorPalette_2 > div {background: rgba(0,128,0,.82); color: white}
.bannerSmall .colorPalette_3 > div {background: rgba(0,40,188,.82); color: white}
.bannerSmall .colorPalette_4 > div {background: rgba(255,165,0,.86); color: white}

.bannerSmall .titleShadow .bannerTitleText {text-shadow: 2px 3px 4px rgba(0,0,0,.35); -webkit-text-stroke-width: .6px; -webkit-text-stroke-color: rgba(0,0,0,.22)}

.bannerSmall .titleSmall .bannerTitleText {font-size: clamp(2.1rem, 14cqi, 3rem)}
.bannerSmall .titleSmaller .bannerTitleText {font-size: clamp(1.8rem, 12cqi, 2.65rem)}

.bannerSmall .textSmall .bannerSubText,.bannerSmall .bannerSubTextSmall {font-size: clamp(1.15rem, 5cqi, 1.55rem)}
.bannerSmall .textSmaller .bannerSubText,.bannerSmall .bannerSubTextSmaller {font-size: clamp(1.05rem, 4.5cqi, 1.4rem)}

.bannerSmall .bgLeft .bannerBackground img,.bannerSmall .bannerBgLeft img {object-position: left}
.bannerSmall .bgRight .bannerBackground img,.bannerSmall .bannerBgRight img {object-position: right}
.bannerSmall .bgBottom .bannerBackground img,.bannerSmall .bannerBgBottom img {object-position: bottom}
.bannerSmall .bgTop .bannerBackground img,.bannerSmall .bannerBgTop img {object-position: top}

.bannerSmall .bgTopRight .bannerBackground img,.bannerSmall .bannerBgTopRight img {object-position: right top}
.bannerSmall .bgTopLeft .bannerBackground img,.bannerSmall .bannerBgTopLeft img {object-position: left top}
.bannerSmall .bgBottomRight .bannerBackground img,.bannerSmall .bannerBgBottomRight img {object-position: right bottom}
.bannerSmall .bgBottomLeft .bannerBackground img,.bannerSmall .bannerBgBottomLeft img {object-position: left bottom}

.bannerSmall .decorativeShapes {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: hidden}
.bannerSmall .decorativeShape {position: absolute; left: 0; width: 100%; height: 150%; backdrop-filter: blur(2px); transform-origin: left center}

.bannerSmall .decorBgEffect1 .decorativeShape {clip-path: polygon(0 0,42% 0,40.8% 16.66%,42% 33.33%,40.8% 50%,42% 66.66%,40.8% 83.33%,42% 100%,0 100%)}
.bannerSmall .decorBgEffect1 .shape1 {animation: calmBreath1 25s cubic-bezier(.4,0,.6,1) infinite; filter: saturate(1.1) contrast(1.1) brightness(.88)}
.bannerSmall .decorBgEffect1 .shape2 {clip-path: polygon(0 0,38% 0,36.8% 16.66%,38% 33.33%,36.8% 50%,38% 66.66%,36.8% 83.33%,38% 100%,0 100%); animation: calmBreath2 20s cubic-bezier(.4,0,.6,1) infinite; filter: saturate(1.1) contrast(1.1) brightness(.88)}

.bannerSmall .decorativeCircle {position: absolute; border-radius: 50%; background: rgba(0,0,0,.09); filter: saturate(1.3) contrast(1.1) brightness(.94)}
.bannerSmall .decorBgEffect2 .decorativeCircle {width: 1200px; height: 1200px; left: -940px; top: 50%; margin-top: -600px}
.bannerSmall .decorBgEffect2 .circle1 {animation: threeCircles1 20s ease-in-out infinite}
.bannerSmall .decorBgEffect2 .circle2 {animation: threeCircles2 20s ease-in-out infinite}
.bannerSmall .decorBgEffect2 .circle3 {animation: threeCircles3 20s ease-in-out infinite}


/* 2 slidy – každý 50% cyklu, fade 8% */
.bannerSliderSmall_2 .bannerSlideSmall { animation-name: bannerSmallSlideFade2 }
.bannerSliderSmall_2 .bannerShade { animation-name: bannerSmallShade2 }
.bannerSliderSmall_2 .bannerTitleText { animation-name: bannerSmallTitle2 }
.bannerSliderSmall_2 .bannerSubText { animation-name: bannerSmallSubtext2 }

/* 3 slidy – každý 33.33% cyklu, fade 7% */
.bannerSliderSmall_3 .bannerSlideSmall { animation-name: bannerSmallSlideFade3 }
.bannerSliderSmall_3 .bannerShade { animation-name: bannerSmallShade3 }
.bannerSliderSmall_3 .bannerTitleText { animation-name: bannerSmallTitle3 }
.bannerSliderSmall_3 .bannerSubText { animation-name: bannerSmallSubtext3 }

/* 4 slidy – každý 25% cyklu, fade 6% */
.bannerSliderSmall_4 .bannerSlideSmall { animation-name: bannerSmallSlideFade4 }
.bannerSliderSmall_4 .bannerShade { animation-name: bannerSmallShade4 }
.bannerSliderSmall_4 .bannerTitleText { animation-name: bannerSmallTitle4 }
.bannerSliderSmall_4 .bannerSubText { animation-name: bannerSmallSubtext4 }

/* 5 slidov – každý 20% cyklu, fade 5% */
.bannerSliderSmall_5 .bannerSlideSmall { animation-name: bannerSmallSlideFade5 }
.bannerSliderSmall_5 .bannerShade { animation-name: bannerSmallShade5 }
.bannerSliderSmall_5 .bannerTitleText { animation-name: bannerSmallTitle5 }
.bannerSliderSmall_5 .bannerSubText { animation-name: bannerSmallSubtext5 }


/* ---- 2 SLIDY (50%) ---- */
@keyframes bannerSmallSlideFade2 {
0% { opacity: 1 }
44% { opacity: 1 }
50% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes bannerSmallShade2 {
0% { opacity: 0 }
10% { opacity: 0 }
22% { opacity: .5 }
44% { opacity: .5 }
50% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes bannerSmallTitle2 {
0% { opacity: 0; transform: translateY(10px) }
6% { opacity: 0; transform: translateY(10px) }
14% { opacity: 1; transform: translateY(0) }
44% { opacity: 1; transform: translateY(0) }
50% { opacity: 0; transform: translateY(-6px) }
100% { opacity: 0; transform: translateY(10px) }
}
@keyframes bannerSmallSubtext2 {
0% { opacity: 0; transform: translateY(10px) }
10% { opacity: 0; transform: translateY(10px) }
18% { opacity: 1; transform: translateY(0) }
44% { opacity: 1; transform: translateY(0) }
50% { opacity: 0; transform: translateY(-6px) }
100% { opacity: 0; transform: translateY(10px) }
}


/* ---- 3 SLIDY (33.33%) ---- */
@keyframes bannerSmallSlideFade3 {
0% { opacity: 1 }
28% { opacity: 1 }
33.333% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes bannerSmallShade3 {
0% { opacity: 0 }
7% { opacity: 0 }
15% { opacity: .5 }
28% { opacity: .5 }
33.333% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes bannerSmallTitle3 {
0% { opacity: 0; transform: translateY(10px) }
5% { opacity: 0; transform: translateY(10px) }
12% { opacity: 1; transform: translateY(0) }
28% { opacity: 1; transform: translateY(0) }
33.333% { opacity: 0; transform: translateY(-6px) }
100% { opacity: 0; transform: translateY(10px) }
}
@keyframes bannerSmallSubtext3 {
0% { opacity: 0; transform: translateY(10px) }
8% { opacity: 0; transform: translateY(10px) }
16% { opacity: 1; transform: translateY(0) }
28% { opacity: 1; transform: translateY(0) }
33.333% { opacity: 0; transform: translateY(-6px) }
100% { opacity: 0; transform: translateY(10px) }
}


/* ---- 4 SLIDY (25%) ---- */
@keyframes bannerSmallSlideFade4 {
0% { opacity: 1 }
20% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes bannerSmallShade4 {
0% { opacity: 0 }
5% { opacity: 0 }
12% { opacity: .5 }
20% { opacity: .5 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes bannerSmallTitle4 {
0% { opacity: 0; transform: translateY(10px) }
4% { opacity: 0; transform: translateY(10px) }
10% { opacity: 1; transform: translateY(0) }
20% { opacity: 1; transform: translateY(0) }
25% { opacity: 0; transform: translateY(-6px) }
100% { opacity: 0; transform: translateY(10px) }
}
@keyframes bannerSmallSubtext4 {
0% { opacity: 0; transform: translateY(10px) }
6% { opacity: 0; transform: translateY(10px) }
13% { opacity: 1; transform: translateY(0) }
20% { opacity: 1; transform: translateY(0) }
25% { opacity: 0; transform: translateY(-6px) }
100% { opacity: 0; transform: translateY(10px) }
}

/* ---- 5 SLIDOV (20%) ---- */
@keyframes bannerSmallSlideFade5 {
0% { opacity: 1 }
15.5% { opacity: 1 }
20% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes bannerSmallShade5 {
0% { opacity: 0 }
4% { opacity: 0 }
10% { opacity: .5 }
15.5% { opacity: .5 }
20% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes bannerSmallTitle5 {
0% { opacity: 0; transform: translateY(10px) }
3% { opacity: 0; transform: translateY(10px) }
8% { opacity: 1; transform: translateY(0) }
15.5% { opacity: 1; transform: translateY(0) }
20% { opacity: 0; transform: translateY(-6px) }
100% { opacity: 0; transform: translateY(10px) }
}
@keyframes bannerSmallSubtext5 {
0% { opacity: 0; transform: translateY(10px) }
5% { opacity: 0; transform: translateY(10px) }
11% { opacity: 1; transform: translateY(0) }
15.5% { opacity: 1; transform: translateY(0) }
20% { opacity: 0; transform: translateY(-6px) }
100% { opacity: 0; transform: translateY(10px) }
}


/* LOWER BANNER - LOWER RIGHT SIDE */

.bannerLower {container-name: bannerlower; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; height: 200px; transition: .4s; container-type: inline-size;}
.bannerLower:hover {box-shadow: var(--materialShadowHover)}
.bannerLower a {display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; position: relative; padding: 16px 24px}
.bannerLower a:hover,.bannerLower a:hover div {text-decoration: none !important}
.bannerLower .bannerBackground {z-index: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.bannerLower .bannerBackground img {width: 100%; height: 100%; object-fit: cover; object-position: left}

.bannerLower .bannerTitleContainer {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}

.bannerLower .bannerSubTextContainer {flex: 1; position: relative; display: flex; justify-content: center; align-items: start}

.bannerLower .bannerTitleText {z-index: 20; font-size: 3.2rem; font-weight: bold; color: white; backdrop-filter: blur(4px); width: fit-content; margin: 0 auto; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); text-align: center; line-height: 1.25; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: rgba(0,0,0,0.3)}

.bannerLower .bannerSubText {position: absolute; backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.4); color: white; font-size: 2.3rem; font-weight: 400; opacity: 0; padding: 16px 22px; text-align: center;line-height: 1.25; width: fit-content}

.bannerLower .colorPalette_1 > div {background: rgba(0,0,0,.8); color: white}
.bannerLower .colorPalette_2 > div {background: rgba(0,188,0,.8); color: white}
.bannerLower .colorPalette_3 > div {background: rgba(0,50,188,.8); color: white}
.bannerLower .colorPalette_4 > div {background: rgba(255,165,0,.8); color: white}

/* Animation for 2 slides */
.bannerLower .bannerSliding2 .bannerSubText_1 {animation: slide2_small 8s infinite}
.bannerLower .bannerSliding2 .bannerSubText_2 {animation: slide2_small 8s infinite 4s}

/* Animation for 3 slides */
.bannerLower .bannerSliding3 .bannerSubText_1 {animation: slide3_small 15s infinite}
.bannerLower .bannerSliding3 .bannerSubText_2 {animation: slide3_small 15s infinite 5s}
.bannerLower .bannerSliding3 .bannerSubText_3 {animation: slide3_small 15s infinite 10s}


/* Keyframes for 2 elements */
@keyframes slide2_small {
0% { opacity: 0}
10% { opacity: 1}
40% { opacity: 1 }
50% { opacity: 0 }
100% { opacity: 0 }
}

/* Keyframes for 3 elements */
@keyframes slide3_small {
0% { opacity: 0 }
10% { opacity: 1 }
30% { opacity: 1 }
40% { opacity: 0 }
100% { opacity: 0 }
}


@media screen and (max-width: 1208px) {

.bannerPart .indexBanner.bannerSmall {display: none}

}


@media screen and (max-width: 1024px) {

.bannerLower {height: auto;}
.bannerLower a {padding: 32px;}
.bannerLower a .bannerTitleText {font-size: 2.6rem; line-height: 1.2;}

}


/* CLASSIFIED ADS */


section.indexClassifieds {margin: var(--gapXLarge) 0;}

.indexAdsListing {position: relative; overflow: hidden;}
.indexAdsListing .indexAdsTrack {display: flex; padding: 0 0 6px 0; gap: 24px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; will-change: scroll-position;}

.indexAdsListing .indexAdsTrack::-webkit-scrollbar {display: none;}

.indexAdsListing > a.indexAdsArrow {position: absolute; top: 50%; transform: translateY(-50%); width: 62px; height: 62px; display: flex; justify-content: center; align-items: center; border-radius: 100%; background: var(--link); border: 3px solid white; box-shadow: var(--materialShadow); opacity: 0; visibility: hidden; pointer-events: none; z-index: 5; transition: opacity .25s, box-shadow .25s, background .25s;}
.indexAdsListing > a.indexAdsArrow svg {width: 32px; height: 32px; fill: white;}
.indexAdsListing > a.indexAdsArrow:hover {background:  var(--linkHover); box-shadow: var(--materialShadowHover);}
.indexAdsListing > a.indexAdsArrow.disabled {opacity: 0 !important;visibility: hidden !important;pointer-events: none !important;}

.indexAdsListing > a.indexAdsArrowPrev {left: 10px;}
.indexAdsListing > a.indexAdsArrowNext {right: 10px;}

.indexAdsListing.isScrollable:hover > a.indexAdsArrow {
opacity: 1;
visibility: visible;
pointer-events: auto;}

.indexAdsListing .indexAdsTrack > a {max-width: 290px; flex: 0 0 290px; scroll-snap-align: start; display: flex; flex-direction: column; text-align: center; text-decoration: none; border-radius: var(--borderRadiusSmall); border: 1px solid var(--lightGrey); background: white; overflow: hidden; transition: .5s; position: relative;}
.indexAdsListing .indexAdsTrack > a img {width: 120px; height: auto; margin: 0 auto 12px auto}
.indexAdsListing .indexAdsTrack > a h5 {font-size: var(--fontSize); color: var(--link); margin: 0 auto 6px auto}
.indexAdsListing .indexAdsTrack > a b {display: block; font-size: var(--fontSizeXSmall); text-decoration: none; margin: 0 auto 6px auto; line-height: 1.2}
.indexAdsListing .indexAdsTrack > a p {display: block; font-size: var(--fontSizeSmall); line-height: 1.3; text-decoration: none; word-wrap: break-word; word-break: break-all; white-space: normal}

.indexAdsListing .indexAdsTrack > a ad_thumb {display: block; height: 240px; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat}

.indexAdsListing .indexAdsTrack > a.noAttachment ad_thumb {background-size: 140px;}

.indexAdsListing .indexAdsTrack > a just_posted {background: red; color: white; font-size: var(--fontSizeXSmall); padding: 2px 8px; top: -2px; right: -2px; border-radius: 0 0 0 0; border: 2px solid white; font-weight: bold; display: none; width: auto; position: absolute}

.indexAdsListing .indexAdsTrack > a.justPosted just_posted {display: table;}

.indexAdsListing .indexAdsTrack > a div {padding: calc(var(--gapSmall) - 4px); flex: 1}

.indexAdsListing .indexAdsTrack > a price {display: block; background: var(--lightestGrey); font-size: var(--fontSizeSmall); padding: 8px 12px; margin: 0; font-weight: bold; transition: 0.5s}

.indexAdsListing .indexAdsTrack > a:hover {border: 1px solid var(--linkHover); box-shadow: var(--materialShadowHover); border-radius: var(--borderRadius);}
.indexAdsListing .indexAdsTrack > a:hover h5 {text-decoration: none; color: var(--linkHover)}
.indexAdsListing .indexAdsTrack > a:hover price {background: var(--lightestGrey)}

@media screen and (max-width: 1024px) {

.indexAdsListing > a.indexAdsArrow {display: none;}
.indexAdsListing .indexAdsTrack {-webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.indexAdsListing .indexAdsTrack > a {scroll-snap-align: start; border: 1px solid var(--grey);}


}


/* ARTICLES */

.articlesListing {display: flex; justify-content: space-between; gap: var(--gap); flex-direction: column; margin-bottom: var(--gapSmall);}
.articlesListing .article {display: block; text-decoration: none;}
.articlesListing .article a {display: block; padding: 0 0 6px 0;}
.articlesListing .article a h5 {font-size: 16px;  color: var(--link); margin: 0;}
.articlesListing .article a h5:first-letter {text-transform: uppercase}

.articlesListing .article p {font-size: 15px; display: block;}
.articlesListing .article p * {font-size: 15px;}
.articlesListing .article p img {max-height: 35px; max-width: 100px; float: right; margin: 0 0 8px 12px;}


.articlesListing a:hover h5 {text-decoration: underline; color: var(--linkHover)}

.articlesListing .articel:hover {border-bottom: 1px solid #F2DFCE}
.articlesListing .index-content a.articel:hover h5 {text-decoration: underline}


/* PLANS / PATTERNS */

.index .headerWithSub {display: block;}
.index .headerWithSub p {display: block; color: var(--darkGrey); line-height: 1.2; margin: 3px 0 0 0}

.sampleList {display: flex; flex-direction: row;}
.sampleList a {flex: 1 33%; padding: 8px; text-align: center; font-size: var(--fontSizeSmall); color: var(--fontColor); text-decoration: none; display: block;}
.sampleList a img {max-width: 180px; width: auto; height: auto; max-height: 160px; margin: 0 auto 12px auto; border: 1px solid transparent; transition: all 0.5s;}

.sampleList a:hover img {border: 1px solid var(--link); box-shadow: var(--materialShadow);}


@media screen and (max-width: 768px) {

.index .headerWithSub p {margin: 6px 0 0 0}

.sampleList {flex-direction: column;}
.sampleList a {flex: 1;}
.sampleList a img {max-width: 360px; width: auto; height: auto; max-height: 240px; margin: 0 auto 12px auto;}

.articlesListing .article a h5 {font-size: 17px}
.articlesListing .article p,.articlesListing .article p * {font-size: 16px;}

}


/* VIDEO SHOWROOM & FLYERS */

.indexShowroomListing, .indexFlyersListing {display: flex; gap: 24px 0; flex-wrap: wrap; justify-content: center; width: 100%;}
.indexShowroomListing a, .indexFlyersListing a {flex: 1 33%; padding: 8px; text-align: center; font-size: var(--fontSizeSmall); color: var(--fontColor); text-decoration: none; display: block;}
.indexShowroomListing img, .indexFlyersListing img {max-width: 160px; width: auto; height: auto; max-height: 160px; margin: 0 auto 12px auto; border: 1px solid transparent; transition: all 0.5s;}
.indexShowroomListing h5, .indexFlyersListing h5 {font-size: var(--fontSizeSmall); color: var(--link); margin: 0 auto 6px auto; text-align: center}
.indexShowroomListing a:hover h5, .indexFlyersListing a:hover h5 {color: var(--linkHover); text-decoration: underline}
.indexShowroomListing a:hover img, .indexFlyersListing a:hover img {border: 1px solid var(--link); box-shadow: var(--materialShadow);}


@media screen and (max-width: 768px) {

.indexShowroomListing img, .indexFlyersListing img {max-width: 260px; width: auto; height: auto; max-height: 200px;}

}


/* More Bottom Button */

.indexMore {width: 100%; text-align: center; margin: 0 auto;}
.indexMore a {border-radius: 100px; padding: 8px 42px 8px 14px; background: url(/ico/arrow-more1.png) no-repeat right center; background-size: 20%; border: 3px solid transparent; display: table; font-weight: bold; margin: 0 auto}

.indexMore a:hover {background: url(/ico/arrow-more-red2.png) no-repeat right center; text-decoration: none; border-top: 3px solid #ff0000; border-left: 3px solid #ff0000; border-bottom: 3px solid #ff0000; background-size: 20%}


@media screen and (max-width: 1440px) {
.flexWrap {gap: var(--gapSmall)}
}


@media screen and (max-width: 1024px) {
.flexWrap {gap: 0;}
.bannerPart {padding-inline: 0; margin: 0; gap: 0}
}


/* RIGHT NARROW COLUMN */


.indexRightNarrowColumn {flex: 0 var(--rightColumnWidth); width: var(--rightColumnWidth); display: flex; flex-direction: column; gap: var(--gapLarge);}
.indexRightNarrowColumn section h5 {font-size: 20px; color: var(--darkGrey)}


.indexLowerPart section.indexPartners {text-align: center; margin-top: 0;}

.indexLowerPart section.indexPartners .partnersListing:empty {display: none;}

.indexLowerPart section.indexPartners .partnersListing a {display: block; margin: 12px auto;}
.indexLowerPart section.indexPartners .partnersListing a img {padding: 8px; background: white; max-width: 200px; margin: 0 auto;}


.indexLowerPart section.indexPartners a.partnershipLink {display: block; text-align: center; margin: 0 auto; font-size: var(--fontSizeSmall); max-width: 200px; text-wrap: pretty; line-height: 1.2}


.indexStats {display: flex; width: 100%; flex-direction: column; gap: 24px;}
.indexStats feature {display: flex; width: 100%; flex-direction: row; gap: 18px; align-items: center; flex: 1;}
.indexStats feature svg {width: 38px; height: 38px; display: block; fill: var(--grey);}

.indexStats feature data {display: block;}
.indexStats feature data * {color: var(--grey); transition: all 0.5s;}

.indexStats feature data h6 {display: block; font-size: calc( var(--fontSize) + 0.0rem); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1}

.indexStats feature data div {font-size: calc( var(--fontSizeSmall) - 1.2rem); line-height: 1.2;}
.indexStats feature data div b {display: inline-block; margin-left: 4px}


.indexStats feature data div,.indexStats feature data div b {font-size: calc( var(--fontSizeSmall) - 0.15rem)}


.indexStats feature:hover * {color: var(--darkGrey); fill: var(--darkGrey)}


.indexSawingPatterns img {width: 100%; max-width: 220px; height: auto; margin: 0 auto}