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

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




.index {

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

	}
}



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

	.index {

		h4 {flex-direction: column; text-align: center;
			> a.headerLink {white-space: nowrap; text-overflow: ellipsis); margin-inline: auto}
			.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;

	* {color: white}
	&.warningMessage {background: red}
	&.successMessage {background: var(--green)}
	&.noteMessage {background: var(--infoColor)}
	> div {flex: 1; line-height: 1.4;}
	h5 {margin-bottom: 6px}
	.actionButton {border: 3px white solid}
	.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);
		> div {text-align: center}
		.actionButton {margin: 0 auto}
	}

}





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


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



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

	section {margin: 0}

	.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;
		.indexLeftWideColumn {order: 2}
		.indexRightNarrowColumn {order: 1; width: 100%; flex: 1}
		.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;

	&:hover {box-shadow: var(--materialShadowHover)}
	a {display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; position: relative; padding: 16px}
	a:hover, a:hover div {text-decoration: none !important}
	.bannerBackground {z-index: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
		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 */

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

	.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 */

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

	.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;}

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

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




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

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

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



/* POSITION OPTION - right position */

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



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

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

	.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 */

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


/* TITLE FX - TYPING effect */

	.titleTypingEffect .bannerTitleText {color: transparent}
	.titleTypingEffect .bannerTitleText::before {position: absolute; left: 0; top: 0; width: 0; color: white; overflow: hidden; animation: title-typing-fx 5s ease-out infinite}
	.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 */

	.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 */

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


/* TITLE FX - Slide from right */

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



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

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

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


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

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


/* TEXT FX - fading */

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

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



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

/* background positioning */

	.bgLeft .bannerBackground img, .bannerBgLeft img {object-position: left}
	.bgRight .bannerBackground img, .bannerBgRight img {object-position: right}
	.bgBottom .bannerBackground img, .bannerBgBottom img {object-position: bottom}
	.bgTop .bannerBackground img, .bannerBgTop img {object-position: top}
	
	.bgTopRight .bannerBackground img, .bannerBgTopRight img {object-position: right top}
	.bgTopLeft .bannerBackground img, .bannerBgTopLeft img {object-position: left top}
	.bgBottomRight .bannerBackground img, .bannerBgBottomRight img {object-position: right bottom}
	.bgBottomLeft .bannerBackground img, .bannerBgBottomLeft img {object-position: left bottom}


/* 2 rotating backgrounds */

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

/* 3 backgrounds */

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



/* Shape effect -Animated decorative left background */

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

	.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%)}
	.decorBgEffect1 .shape1 {animation: calmBreath1 25s cubic-bezier(0.4,0,0.6,1) infinite; filter: saturate(1.1) contrast(1.1) brightness(0.88)}
	.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 */

	.decorativeCircle {position: absolute; border-radius: 50%; background: rgba(0,0,0,0.09); filter: saturate(1.3) contrast(1.1) brightness(0.94);}
	.decorBgEffect2 .decorativeCircle {width: 2000px; height: 2000px; left: -1550px; top: 50%; margin-top: -1000px;}
	.decorBgEffect2 .circle1 {animation: threeCircles1 20s ease-in-out infinite;}
	.decorBgEffect2 .circle2 {animation: threeCircles2 20s ease-in-out infinite;}
	.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%}
		.textBigPart .bannerTitleContainer {flex: 0 0 32%}
		.textBiggerPart .bannerTitleContainer {flex: 0 0 26%}

		.bannerContentLeft, .bannerContentRight {padding-inline: 0px;
			.bannerTitleContainer {justify-content: center}
			.bannerSubTextContainer {justify-content: center;
				.bannerSubText, .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;

		.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}

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

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

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

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

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

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

		.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}

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

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

		.bannerBackground {z-index: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0;

			img {width: 100%; height: 100%; object-fit: cover; object-position: center}
		}

		.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);
		}

		.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;
		}

		.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;
			b {color: #fff; display: block; font-size: clamp(2.8rem, 17cqi, 3.6rem);}
		}

		.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;
			* {font-size: clamp(2.6rem, 5.5cqi, 2.8rem);}
		}

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

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

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

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

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

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

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

		.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)}

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

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

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

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

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

		.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%)}
		.decorBgEffect1 .shape1 {animation: calmBreath1 25s cubic-bezier(.4,0,.6,1) infinite; filter: saturate(1.1) contrast(1.1) brightness(.88)}
		.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)}

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

	&:hover {box-shadow: var(--materialShadowHover)}
	a {display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; position: relative; padding: 16px 24px}
	a:hover, a:hover div {text-decoration: none !important}
	.bannerBackground {z-index: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
		img {width: 100%; height: 100%; object-fit: cover; object-position: left}
	}

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

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

	.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)}

	.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}

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

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

	/* Animation for 3 slides */
	.bannerSliding3 {
		.bannerSubText_1 {animation: slide3_small 15s infinite}
		.bannerSubText_2 {animation: slide3_small 15s infinite 5s}
		.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;
		a {padding: 32px;
			.bannerTitleText {font-size: 2.6rem; line-height: 1.2;}
		}
	}

}









/* CLASSIFIED ADS */


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

.indexAdsListing {position: relative; overflow: hidden;

	.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;}

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

	> 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;
		svg {width: 32px; height: 32px; fill: white;}
		&:hover {background:  var(--linkHover); box-shadow: var(--materialShadowHover);}
		&.disabled {opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;}
	}

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

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

	.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;

		img {width: 120px; height: auto; margin: 0 auto 12px auto}
		h5 {font-size: var(--fontSize); color: var(--link); margin: 0 auto 6px auto}
		b {display: block; font-size: var(--fontSizeXSmall); text-decoration: none; margin: 0 auto 6px auto; line-height: 1.2}
		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}
		
		ad_thumb {display: block; height: 240px; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat}
		
		&.noAttachment ad_thumb {background-size: 140px;}
		
		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}
		
		&.justPosted just_posted {display: table;}
		
		div {padding: calc(var(--gapSmall) - 4px); flex: 1}
		
		price {display: block; background: var(--lightestGrey); font-size: var(--fontSizeSmall); padding: 8px 12px; margin: 0; font-weight: bold; transition: 0.5s}
	}

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

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

	.indexAdsListing {
		> a.indexAdsArrow {display: none;}
		.indexAdsTrack {-webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
		.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);

	.article {display: block; text-decoration: none;

		a {display: block; padding: 0 0 6px 0;
			h5 {font-size: 16px;  color: var(--link); margin: 0;}
			h5:first-letter {text-transform: uppercase}
		}
		
		p {font-size: 15px; display: block;
			* {font-size: 15px;}
			img {max-height: 35px; max-width: 100px; float: right; margin: 0 0 8px 12px;}
		}

	}

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

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




/* PLANS / PATTERNS */

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

.sampleList {display: flex; flex-direction: row;

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

	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;
		a {flex: 1;
			img {max-width: 360px; width: auto; height: auto; max-height: 240px; margin: 0 auto 12px auto;}
		}
	}

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

}




/* VIDEO SHOWROOM & FLYERS */

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



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

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

}



/* More Bottom Button */

.indexMore {width: 100%; text-align: center; margin: 0 auto;

	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}

	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);

	section {
		h5 {font-size: 20px; color: var(--darkGrey)}
	}

}

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

	.partnersListing {

		&:empty {display: none;}

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

	}

	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;

	feature {display: flex; width: 100%; flex-direction: row; gap: 18px; align-items: center; flex: 1; 

		svg {width: 38px; height: 38px; display: block; fill: var(--grey);}

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

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

			div {font-size: calc( var(--fontSizeSmall) - 1.2rem); line-height: 1.2;

				b {display: inline-block; margin-left: 4px}

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

		}

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

}


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