.content .presentationContentWrap * {text-wrap: pretty}



/* INTERNAL BANNERS */

.bannerInt {width: 100%; max-width: 500px; height: 500px; overflow: hidden; display: flex; margin: var(--gapLarge) auto; background-size: cover; background-repeat: no-repeat; background-position: 0 50%; 
animation: moveBackground 14s ease-in-out infinite alternate; justify-content: center; position: relative; border: 2px solid var(--lightGrey);
align-items: center; transition: .3s;}

.bannerIntLogo {position: absolute; top:0; left:0;right:0; background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; font-size: 2.2rem; font-weight: bold; color: white; overflow: hidden; padding: 10px; text-shadow: 2px 2px 3px rgba(0,0,0,0.4); transition: .3s}

.bannerInt:hover .bannerIntLogo {background: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(0,0,0,0.7);}

.bannerIntLogo img {width: 42px; heigth: 42px; margin-right: 10px;}
.bannerIntClickHere {position: absolute; opacity: 0; bottom: 0; transition: .5s; padding: 12px 16px; background: rgba(0,0,0,0.4); color: white; font-weight: bolder; font-size: 16px;}
.widthResponsive .bannerInt .bannerIntClickHere, .bannerInt:hover .bannerIntClickHere {opacity: 1;}

.bannerInt:hover {border: 2px solid var(--linkHover); box-shadow: var(--materialShadow); text-decoration: underline;}

.bannerIntSlide {position: absolute; backdrop-filter: blur(5px); background: rgba(0,0,0,.4); color: white; font-size: 2.3rem; font-weight: 400; opacity: 0; animation: 12s autoSlide infinite linear; padding: 16px; margin: auto var(--gapSmall); text-align: center; line-height: 1.3;}


.bannerIntSlide:nth-child(1) {animation-delay: 0s}
.bannerIntSlide:nth-child(2) {animation-delay: 4s}
.bannerIntSlide:nth-child(3) {animation-delay: 8s}


/* MOVING BANCKGROUND */

@keyframes moveBackground {
0% {
		background-position: 0 50%;
	}
100% {
		background-position: 100% 50%;
	}
}


/* 3 TEXT SLIDES */

@keyframes autoSlide {
	0% {opacity: 0.0}
	4% {opacity: 1.0}
	33.33% {opacity: 1.0}
	37.33% {opacity: 0.0}
	100% {opacity: 0.0}
}




/*  STM - OVERVIEW BANNERS */

.stmOverview, .stmOverviewTimber {

	a.bannerItem {height: 400px; overflow: hidden; display: flex; flex-direction: column; background-size: cover; background-repeat: no-repeat; background-position: 0 50%; animation: moveBackground 14s ease-in-out infinite alternate; justify-content: center; position: relative; align-items: center; transition: .3s; padding: var(--gapLarge);
		b {background: rgba(0,0,0,0.5); padding: var(--gap); font-size: var(--fontSizeXLarge); display: block; color: white; line-height: 1.4; text-align: center; backdrop-filter: blur(4px);}
		&:hover {text-decoration: none}
		p {display: none; position: absolute; bottom: 15px; font-weight: bold; color: white; font-size: var(--fontSizeLarge);}
		&:hover p {display: block}
	}
	.syncingBanner {background-image: url("../images/banner/syncing/syncing_03.jpg")}
	.syncingBannerTimber {background-image: url("../images/banner/syncing/syncing_timber_01.jpg")}
	.mobileAppBanner {background-image: url("../images/banner/recorder/rec_01.jpg")}
	.mobileAppBannerTimber {background-image: url("../images/banner/recorder/rec_timber_05.jpg")}

}

/* MOBILE TALLY SYNCING */

.stmSyncing {

	h3, h6 {text-align: center; margin: var(--gapLarge) auto;}

	.infoSideBox {background: var(--lightestGrey); padding: var(--gap); font-size: calc( var(--fontSizeLarge) - 0.2rem); line-height: 1.4; text-align: justify; flex-grow: 1;

		b {display: block; font-size: var(--fontSizeLarge); margin-bottom: 8px}
	}

	.syncingWorkflow {background-image: url("../images/syncing_bg.png"); background-repeat: no-repeat; background-size: 100%; max-width: 800px; width: 100%; height: auto; margin: auto;}

	.syncingCamera {height: 400px; overflow: hidden; display: flex; margin: var(--gapLarge) auto; background-size: cover; background-repeat: no-repeat; background-position: 0 50%; animation: moveBackground 14s ease-in-out infinite alternate; justify-content: center; position: relative; align-items: center; transition: .3s; padding: var(--gapLarge);
		b {background: rgba(0,0,0,0.5); padding: var(--gapSmall); font-size: calc(var(--fontSizeXXLarge) - 0.2rem); display: block; color: white; line-height: 1.4; text-align: center; backdrop-filter: blur(4px);}
	}

}



/* =============== */
/* === PR WEBY ===*/

body.presentation .content {padding: 0; max-width: 1920px; margin: 0 auto}
body.presentation {
	p.limitedWidth, p.limitedWidth * {font-size: calc( var(--fontSize) + 0.3rem ); line-height: 1.6}
}


/* TOP BANNER */

.topBanner {container-name: topBanner; container-type: inline-size; position: relative; min-height: 600px;

	.topBannerBackground, .topBannerContainer {position: absolute; top: 0; left: 0; bottom: 0; right: 0}

	.topBannerBackground {z-index: 0; overflow: hidden; display: flex; justify-content: center; align-items: center;
		img {display: block; margin: 0 auto; height: 100%; width: auto; object-fit: cover; }
	}

	.topBannerContainer {display: flex; z-index: 1; flex: 1; gap: var(--gapLarge); flex-direction: row; align-items: stretch; justify-content: center; padding: var(--gapLarge);}

	.topBannerLeft {container-name: topBannerText; container-type: inline-size; flex: 1; display: flex; justify-content: center; align-items: center;
		.topBannerLeftWrap {margin: auto; text-align: left; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: var(--gapSmall)}
		.topBannerLeftWrap.centeredText {justify-content: center; align-items: center}
		.topBannerTitle {font-size: 6.8rem; font-weight: 900; color: white; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); text-align: center; line-height: 1; -webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: rgba(0,0,0,0.3); letter-spacing: 1px; text-align: left; margin: 0}
		.topBannerText {font-size: 3.7rem; font-weight: normal; color: white; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); line-height: 1.25; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: rgba(0,0,0,0.5); text-align: left; background: rgba(0,0,0,0.45); backdrop-filter: blur(5px); padding: 24px; margin: 0}
	}

	.topBannerRight {container-name: topBannerRight; container-type: inline-size; width: 300px; position: relative;}

	.mobileApp {position: absolute; z-index: 4; top: 35px; right: 54px; width: 300px;
		.mobileAppWrap {position: relative;}
		img.mobileAppBackground {width: 300px; height: auto; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.4));}
		img.mobileAppLogo {width: 180px; height: auto; filter: drop-shadow(0 0 4px rgba(0,0,0,1));}
		.mobileAppContainer {position: absolute; top: 40px; left: 15px; right: 15px; bottom: 35px; background: #1a1a1a; display: flex; flex-direction: column; gap: var(--gap); justify-content: center; align-items: center; font-size: var(--fontSizeXLarge); font-weight: bold; color: white; text-align: center; line-height: 1.3}
	}

}


@container topBanner (min-width: 1920px) {
	.topBanner {
		.topBannerBackground {min-width: 100%; width: 100%}
	}
}


@media screen and (min-width: 2800px) {

}


@media screen and (max-width: 1024px) {
	.topBanner {min-height: 450px;
		.topBannerLeft {
			.topBannerLeftWrap {text-align: center; justify-content: center; align-items: center}
			.topBannerTitle, .topBannerText {text-align: center; margin: auto}
			.topBannerTitle {font-weight: 700; font-size: 4.2rem}
			.topBannerText {font-size: 2.8rem}
		}
		.topBannerRight, .mobileApp {display: none;}
	}
}




/* CONTENT */

.presentationContentWrap {max-width: var(--displayWidthLargeDesktop); margin: var(--gap) auto; padding: 0 var(--gap); text-align: center;

	.limitedWidth {max-width: var(--displayWidthTablet);}
	.sectionColumnFlex {flex-direction: column}
	h3 {text-align: center; font-size: calc( var(--fontSizeXXLarge) + 0.2rem); margin-bottom: var(--gap)}
	h4 {text-align: left; font-size: calc( var(--fontSizeXLarge) + 0.6rem); margin-bottom: var(--gapSmall)}
	h3 p, h5 {display: block; text-align: center; font-size: calc( var(--fontSizeXLarge) + 0.1rem); color: var(--darkGrey); margin: 8px auto var(--gap) auto}
	h3 p {margin: 8px auto 0 auto}
	hr {margin-inline: auto; max-width: var(--displayWidthTablet);}

	section {margin: calc( var(--gapXLarge) + 2.2rem) auto calc( var(--gapXLarge) + 4.8rem) auto; display: flex; align-items: center; line-height: 1.25; flex-direction: column;
		.actionButton {display: block; margin: var(--gapSmall) auto; width: 100%; max-width: 600px; font-size: var(--fontSizeXLarge)}
	}

	ol {margin: var(--gap) 0 0 0; counter-reset: li; list-style: none;

		li {margin: 14px 0 24px 0; text-align: left; position: relative; padding-left: 52px; min-height: 42px;}

		li, li * {font-size: 2.3rem; color: #f07100; font-weight: bold}

		li:before {content: counter(li); counter-increment: li; color: #fff; background: #f07100; border-radius: 50%; font-size: 20px; font-weight: bold; width: 34px; height: 34px; line-height: 34px; text-align: center; display: block; position: absolute; top: -3px; left: 0;}

	}



	ul {margin: var(--gapSmall) 0 0 0; list-style-type: square;

		li {margin: 12px 0; text-align: left;}

		li, li * {font-size: 2.3rem; color: var(--darkGrey); font-weight: bold}

	}



	.hightlights {gap: calc( var(--gapSmall) - 10px); justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: stretch;

		> div {background: var(--lighterGrey); display: flex; flex-direction: column; align-items: center; padding: 32px 12px; border-radius: 8px; font-size: calc( var(--fontSizeXXLarge) + 0.4rem); flex: 1 0 240px; max-width: 300px; white-space: nowrap; position: relative; transition: 0.5s; border: 3px solid white;}
		b {display: block; font-size: var(--fontSizeLarge); color: var(--darkGrey)}
		> div:hover {background: var(--lightestGrey); border: 3px solid var(--lighterGrey)}
		
		.starRating {white-space: nowrap; position: absolute; top: 6px; right: 8px;
			svg {height: 18px; width: 18px; fill: #fbe100; stroke: #a29200; stroke-width: 4px; margin: 0 0 0 1px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));}
		}

	}


	.slogan, .sloganLarge, .sloganXLarge {font-size: 3.6rem; color: var(--darkGrey); text-align: center; font-weight: bold}
	.sloganLarge {font-size: 3.8rem}
	.sloganXLarge {font-size: 4.2rem}

	.container {position: relative; min-height: 400px; display: flex; align-items: stretch; flex-direction: row;

		&.imgTextLeftContainer {justify-content: flex-start;
			.containerTextPart {margin: 0}
		}

		&.imgTextRightContainer {justify-content: flex-end;
			.containerTextPart {margin: 0 0 0 auto}
		}

		&.imgTextRightTwoThirds {gap: var(--gapLarge); min-height: 0;
			div.imgTextRightTwoThirdsText {width: 66%; display: flex; align-items: center}
		}

		.containerBackground {z-index: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
			img {display: block; margin: 0 auto}
		}
		
		.containerTextPart {width: 50%; background: rgba(255,255,255,0.64); z-index: 2; backdrop-filter: blur(2px); margin: 0; display: flex; justify-content: center; align-items: center; position: relative}

		.containerTextLeft {font-size: 4.6rem; max-width: 400px; line-height: 1.25; z-index: 1;}

		.hoverBackground {position: absolute; top: 0; left: 0; width: 100%; background: rgba(255,255,255,0.3); overflow: hidden; max-height: 0; transition: max-height 0.5s ease-in-out; z-index: 0;}

		.containerTextPart:hover .hoverBackground {max-height: 500px; height: 100%}

	}



	.features {display: block;
		h4 {margin-bottom: 0}
	}

	.featuresTypeA {display: block;

		.featureListing {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; margin: 0 auto; gap: 24px;

			> div {background: var(--lightestGrey); display: flex; flex-direction: column; align-items: center; padding: 32px 24px; border-radius: 8px; flex: 1 0 240px; position: relative; transition: 0.5s; border: 3px solid white; font-size: var(--fontSize); text-decoration: none; line-height: 1.5;
			
				&.fourItems {flex: 1 0 200px; font-size: calc(var(--fontSize) - 0.1rem);}

				b {display: block; margin-bottom: 12px; font-size: var(--fontSizeLarge); transition: 0.5s; line-height: 1.2}
				> img, > svg {display: block; height: 48px; max-width: 62px; width: auto; margin-bottom: 16px; transition: 0.5s;}
				> svg {fill: #aaa}
				> a {display: block; margin: 12px auto; font-weight: bold;
					svg {height: 16px; width: 16px; margin: -3px 0 0 6px;}
				}
				> a:hover {
					svg {fill: var(--linkHover);}
				}

				p {flex:1}

			}

			> div:hover {border: 3px solid var(--lighterGrey); transform: scale(1.02); transition: transform 0.38s ease-in-out;
				> svg {fill: var(--darkGrey)}
			}

		}

	}



/* MOBILE + ITS FEATURES - PORTRAIT */

	.featuresTypeB {display: block;

		.featureListingTypeB {display: flex; align-items: center; margin: 0 auto; gap: var(--gapXLarge);

			.featureTypeBLeft {position: relative;

				.mobileApp {

					.mobileAppWrap {position: relative;}
					.langInfo {position: absolute; top: -12px; left: 50%; transform: translateX(-50%)}
					img.mobileAppBackground {width: 340px; height: 710px; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.4));}
					img.mobileAppLogo {width: 180px; height: auto; filter: drop-shadow(0 0 4px rgba(0,0,0,1));}
					video {width: 320px; height: 630px; z-index: 2; position: absolute; top: 50px; right: 10px; left: 10px; bottom: 55px}
				}

			}

			.featureTypeBRight {display: flex; flex-direction: column; gap: 42px;

				> a, > div {display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px ; position: relative; transition: 0.5s; color: var(--darkGrey); font-size: var(--fontSizeSmall); text-decoration: none; text-align: left;}

				b {display: block; margin-bottom: 6px; font-size: var(--fontSizeLarge); transition: 0.5s;}

				img, svg {display: block; width: 52px; max-height: 52px}
				svg {fill: #aaa; height: 52px; width: 52px; transition: 0.5s;}

				> a:hover, > div:hover {transform: translateX(10px); transition: transform 0.4s ease-in-out;
					svg {fill: var(--darkGrey)}
				}

				> a:hover b {color: var(--linkHover)}

				&.featureTypeBRightLargerText div p {font-size: var(--fontSizeLarge); font-weight: bold; color: var(--darkGrey);}

			}

		}

	}



/* MOBILE + ITS FEATURES - LANDSCAPE */

	.featuresTypeC {display: block;

		.featureListingTypeC {display: flex; align-items: flex-start; flex-direction: column; margin: 0 auto; gap: var(--gapLarge); justify-content: center;

			.featureTypeCTop {position: relative; margin: 0 auto; container-type: inline-size; container-name: featureTypeCTop; width: 100%;

				.mobileApp {overflow: visible;
					.mobileAppWrap {position: relative; width: 710px; margin: auto; overflow: visible;}
					.langInfo {background: red; color: white; font-size: 13px; padding: 6px 12px; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; border-radius: 12px; z-index: 20}
					img.mobileAppBackground {width: 710px; height: 340px; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.4));}
					img.mobileAppLogo {width: 180px; height: auto; filter: drop-shadow(0 0 4px rgba(0,0,0,1));}
					video {width: 630px; height: 320px; z-index: 2; position: absolute; top: 10px; right: 30px; left: 45px; bottom: 20px; background: #000;}
				}

			}

			.featureTypeCBottom {display: flex; flex-direction: column; margin: 0 auto; gap: var(--gap);

				> a, > div {display: flex; align-items: center; gap: var(--gapSmall);

					img, svg {width: 42px; height: 42px; fill: #b3b3b3; margin-right: 12px;}
					p {text-align: left;}
					b {font-size: var(--fontSizeLarge); display: block; margin-bottom: 3px}

				}

				> a:hover {
					p {text-decoration: none;}
					b {color: var(--link); text-decoration: underline;}
				}

			}

		}

	}



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

	.features.featuresTypeC {

		.featureListingTypeC {

			.featureTypeCTop {

				.mobileApp {
					video {position: static}
				}
			}

			.featureTypeCBottom {
				> a, > div {flex-direction: column}
				> a, > div, p {text-align: center !important;}
			}
		}
	}
}



@container featureTypeCTop (min-width: 481px) and (max-width: 768px) {

	.featureTypeCTop {
		height: 300px; /* set to your desired height */
	}

	.features.featuresTypeC {

		.featureListingTypeC {
			.mobileApp {
				.mobileAppWrap {width: 500px}
				img.mobileAppBackground {width: 500px; height: 239px;}
				video {width: 430px; height: 213px; top: 10px; right: 30px; left: 35px; bottom: 20px;}
			}
		}
	}
}


@container featureTypeCTop (max-width: 480px) {

	.featureTypeCTop {
		height: 220px; /* set to your desired height */
	}

	.features.featuresTypeC {

		.featureListingTypeC {
			.mobileApp {
				.mobileAppWrap {width: auto}
				img.mobileAppBackground {display: none}
				video {width: auto; height: 200px; top: 0; right: 0; left: 0; bottom: 0;}
			}
		}
	}
}




/* 3 FEATURES IN ONE ROW - woodprofi */

	.featuresTypeD {display: block;

		.featureListingTypeD {display: flex; justify-content: center; align-items: flex-start; margin: 0 auto; gap: var(--gapSmall);

			> div {width: 33%; text-align: center;
				h6 {font-size: calc(var(--fontSizeXLarge) + 0.3rem); color: var(--darkGrey);}
				img {width: 100%; height: 300px; margin: var(--gapSmall) auto}
			}
		}
	}





/* PARTNERSHIP /partnership */

	.featuresTypeE {display: block;

		.featureListing {display: flex; align-items: flex-start; flex-direction: column; margin: 0 auto; gap: var(--gap); justify-content: center; overflow: hidden;

			> div {position: relative; margin: 0 auto; container-type: inline-size; container-name: featureTypeETop; width: 100%; display: flex; flex-direction: row; gap: var(--gap); align-items: center;

				icon {width: 160px;}
				img {width: 160px; height: auto;}
				> div {flex: 1;
					h4 {color: var(--darkGrey); font-size: 2.6rem; margin: 0 0 8px 0}
					p {display: block; text-align: left;}
				}

			}

		}

	}

}


body.lang_en.en .langInfo, body.lang_sk.sk .langInfo {display: none}

.langInfo {background: red; color: white; font-size: 13px; padding: 6px 12px; position: absolute; white-space: nowrap; border-radius: 12px; z-index: 20}



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

	.presentationContentWrap  {

		h3 {font-size: calc( var(--fontSizeXLarge) + 0.6rem);}

		.featuresTypeB {

			.featureListingTypeB {flex-direction: column;

				.featureTypeBLeft {text-align: center; 

					.mobileApp {margin: 0 auto; width: fit-content;}

				}

				.featureTypeBRight {width: auto; margin: auto;
				
					> a, > div {flex-direction: column; text-align: center; gap: 18px;

						img, svg {margin: auto; max-height: 100px;}

					}

					> a:hover, > div:hover {transform: translateY(10px)}

				}
			}
		}


		.featuresTypeD {

			.featureListingTypeD {flex-direction: column; gap: var(--gapSmall);

				> div {width: 100%;
					img {width: auto; height: 250px}
				}

			}

		}


		.featuresTypeE {
			
			.featureListing {gap: var(--gapXLarge);
				
				> div {flex-direction: column; gap: var(--gapSmall);
					p {text-align: center}
				}

			}
		}


	}

}



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

	.presentationContentWrap {padding: 0 var(--gapSmall);

		section {margin: var(--gapXLarge) auto calc(var(--gapXLarge) + 3rem) auto; line-height: 1.3;}

		.hightlights {flex-direction: column;
			> div {flex: 1; max-width: none}
		}

		h3, h4 {text-align: center;}

		.slogan {font-size: 3rem}

		.container {min-height: 550px; align-items: center; justify-content: center;
			.containerTextPart {width: auto; padding: 24px; margin: auto !important}
			.containerTextLeft {font-size: 3.4rem; max-width: 400px;}

			&.imgTextRightTwoThirds {flex-direction: column; justify-content: center; gap: 12px;
				div.imgTextRightTwoThirdsText {width: 100%;}
				
			}
		}
	}
	
	body.optiTimb {
		#mobileScreens {width: 100% !important; max-height: 360px; height: auto; margin: 0 auto;}
	}

}



/* VIDEO */

.video {text-align: center; width: 100%;
	video {width: 100%; max-width: var(--displayWidthTablet); margin: 0 auto;}
}

.howVideo {flex-direction: column;
	h3 {display: block; width: 100%}
}



/* ANIMATED SVG */

.howSvg {flex-direction: column;
	img {display: block; width: 100%; max-width: 700px;}
	p {display: block; margin: 0 auto var(--gap) auto;
		b.langInfo {display: block; font-size: calc( var(--fontSizeSmall) - 0.2rem); padding: 4px 10px; width: fit-content; margin: 0 auto;}
	}
	ol.limitedWidth {margin: 0 auto;}
}

.session .howSvg {
	img {border: 15px solid white;}
}





/* STM - STOCK MANAGEMENT /stock-management */
/* ======================================== */

.stmFree, .narFree, .cmrForms {
	
	.presentationContentWrap {

		.stmPreview {

			h3 p {margin-bottom: 0;}
			img {width: 100%; max-width: 1000px; height: auto; border: 1px solid var(--lighterGrey); box-shadow: var(--materialShadow);}

		}
		
		.howSvg.allPhases {
			
			h5, p {margin-bottom: 18px;}

			.flex {flex-direction: column; width: 100%; justify-content: center; gap: var(--gapLarge);}
			img {display: block; width: 100%; max-width: 600px; margin-inline: auto;}
			img.narrowImg {display: block; width: 100%; max-width: 300px;}
			a {font-size: 18px; font-weight: bold} 
		} 
		
		.mobileAppRec {
			.actionButton {margin: var(--gapXLarge) auto;}
		}

	}

}




/* OPTI-TIMB /opti-timb */
/* ==================== */

body.optiTimb, body.narFree, body.cmrForms {

	#mobileScreens {width: 400px; height: 360px;}

	.patternSamples {display: flex; justify-content: center; margin-inline: auto; flex-wrap: wrap; gap: 16px;

		a {display: block; border: 1px solid var(--link); transition: 0.5s; overflow: hidden;
			img {max-width: 300px; height: 250px;}
		}
		a:hover {border: 1px solid var(--linkHover); box-shadow: var(--materialShadow); border-radius: 12px;}
	}

	.reportSamples {display: flex; justify-content: center; margin-inline: auto; flex-wrap: wrap; gap: var(--gapSmall);

		a {display: block; text-align: center; font-size: calc( var(--fontSizeSmall) - 0.15rem); white-space: normal; transition: 0.5s;
			img {max-width: 149px; height: auto; display: block; border: 1px solid var(--link); margin: 0 auto 8px auto; background: white; overflow: hidden; transition: 0.5s;}
		}

		a:hover {text-decoration: none; font-weight: bold;
			img {border: 1px solid var(--linkHover); box-shadow: var(--materialShadow); border-radius: 12px;}
		}

	}


	.imperiaWarning {font-weight: bold; color: red; margin: 0 auto; font-size: var(--fontSizeSmall);}
	.manEditor .imperiaWarning {margin: 0 auto var(--gapSmall) auto; font-size: var(--fontSize);}


	.fourSteps {
		h3 p {margin: 8px auto 0 auto}
		.video {margin: var(--gap) auto;
			video {border: 1px solid var(--lightGrey)}
		}
	}

}





/* WOODPROFI /woodprofi */
/* ==================== */

body.woodProfi {

	.woodProfiStatus {display: flex; justify-content: center; padding: var(--gap) var(--gapSmall); gap: 18px; flex-direction: column; text-align: center;

		h4 {font-size: var(--fontSizeXLarge); margin: 0 auto;}
		
		.warning {margin: 0 auto; text-align: left; width: auto;
			h4 {font-size: var(--fontSizeLarge)}
		}
		.coupon {background: var(--lightestGrey); padding: 12px 18px; margin: 0 auto; width: auto;}
		.coupon, .coupon * {font-size: calc( var(--fontSizeLarge) + 0.2rem)}

	}
}




/* CUTTING PLANS /cutting-plans */
/* ============================ */

body.narFree {

	.howVideo {

		.video {position: relative;

			.langInfo {top: -12px; left: 50%; transform: translateX(-50%)}

		}
	}

}





/* CMR FORMS /online-cmr-form */
/* ========================== */


body.cmrForms {

	.patternSamples {display: flex; justify-content: center; margin-inline: auto; flex-wrap: wrap; gap: 16px;
		a {padding: 10px; background: white; border-width: 2px; overflow: hidden;}
		a:hover {border-width: 2px; border-radius: 12px;}
	}

}




/* MOBILE APPS /mobile-app */
/* ======================= */

body.mobApps {

	h1 {text-align: left}
	.mobAppsGrid {display: flex; gap: var(--gap); justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 0 auto;
		> div {width: 45%; min-width: 500px; text-align: center; padding: var(--gapSmall);
			h3 {font-size: 2.8rem; margin-bottom: calc(var(--gapSmall) - 14px);}
			h4 {font-size: 2.0rem; font-weight: normal; text-align: center;}
			img {margin: calc(var(--gapSmall) - 8px) auto; width: 240px; height: auto;}
			.alink {display: table; margin: var(--gapSmall) auto; width: auto;
				img {margin: 0 auto; width: 180px; height: auto;}
			}
		}
	}

}




/* PARTNERSHIP /partnership */
/* ======================== */

body.partnership {

	.whyMainIdea {margin: var(--gapLarge) auto; background: var(--lightestGrey); padding: var(--gap) var(--gapLarge);
		* {color: rgba(0,0,0,0.6); font-weight: 600;}
		h3 {margin-bottom: var(--gapSmall);}
		p {font-size: calc( var(--fontSizeLarge) + 0.2rem);}
		b {font-size: calc( var(--fontSizeLarge) + 0.2rem); text-align: left; display: block;width: 100%;}
		ul {list-style-position: inside;}
		li {font-size: calc( var(--fontSizeLarge) + 0.0rem); font-weight: 500; text-align: left; margin-block: 10px;}
	}

}




/* PARALLAX */

.parallax-container {position: relative}
.parallax {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
.parallaxText.par-center {display: flex; align-items: center; justify-content: center; text-align: center; text-wrap: pretty; flex-direction: column;}

.parallaxText.par-center, .parallax-container {min-height: 600px;}

.parallaxText, .parallaxText * {font-size: 4.8rem; color: white; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); line-height: 120%;}

.parallaxText {width: 90%; position: absolute; position: relative; z-index: 2;
	&.whiteBg div {text-shadow: 0px 0px 4px #000; background: rgba(0,0,0,0.5); padding: 12px 24px; box-shadow: 0 0 4px rgba(0,0,0,0.6)}
	&.smallerText {font-size: 4.6rem}
	b, span {display: contents; font-size: inherit; font-weight: bold;}
	b {color: orange; -webkit-text-stroke: 1px #97632f;}
	span {display: block; white-space: nowrap; padding: 6px 18px; background-color: orange;
	color: #fff; border-radius: 4px; text-shadow: none;}
}


.parallaxLink {position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); border: 6px solid white; background: var(--link); color: white; margin: 0; z-index: 5; text-wrap: nowrap; white-space: nowrap;}
.parallaxLink:hover {border-color: white}

@media screen and (min-width: 1921px) {
	.parallaxText {font-size: 6.0rem;
		&.smallerText {font-size: 5.5rem}
	}
}

@media screen and (max-width: 968px) {
	.parallax-present div > div {
		width: 100%;
		font-size: 7vw;
	}
	.parallaxText {font-size: 4.2rem; font-weight: bold;
		&.smallerText {font-size: 3.8rem}
	}
}

@media screen and (max-width: 768px) {
	.parallax-present {
		min-height: 450px;
		margin: 4px auto;
	}
	.parallax-present div > div {
		font-size: 9vw;
	}
}



/* EMPTY PARTS - STOCK / SAWING PATTERNS / 2D OPTIMI */

.emptyContainer {

	h4 {display: block; text-align: center; font-size: var(--fontSizeXLarge); color: var(--darkGrey); margin: var(--gap) auto;}

	h5 {display: block; text-align: center; font-size: var(--fontSizeLarge); color: red; margin: var(--gapSmall) auto;}


	.emptyListing {display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gapSmall);

		> div {display: flex; flex: 1 0 48%; flex-direction: row; gap: var(--gapSmall); min-width: 800px; align-items: center; padding: var(--gapSmall); border-radius: 8px; border: 1px solid var(--lightGrey);

			> svg {width: 32px; height: 32px; fill: var(--darkGrey);}


			> div {flex: 1; font-size: var(--fontSizeSmall); color: var(--darkGrey); line-height: 1.3;
			
				&.buttons {flex:0; text-align: right; display: flex; flex-direction: column; gap: 2px;}

				h6 {margin: 0 0 4px 0; color: var(--fontColor);}
				ul {margin: 0;
					li {font-size: calc(var(--fontSizeXSmall) + 0.1rem); color: var(--darkGrey);}
				}

			}


			a {font-weight: bold; white-space: nowrap; padding: 4px 8px;
				svg {width: 12px; height: 12px; margin: -2px 0 0 3px;}
			}

			a.actionButton {padding: 10px 18px;
				svg {margin: 0 6px 0 0}
			}
			
			a.actionButton.presetHighlight {padding: 10px 18px;
				animation: presetHighlight 0.5s ease 32;
			}

		}
	}

}


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

	.emptyContainer {

		h5 {text-align: center}

		.emptyListing {flex-direction: column; text-align: center;

			> div {flex: 1; flex-direction: column; gap: var(--gapSmall); min-width: 0; text-align: center; align-items: center; padding: var(--gapSmall); border-radius: 8px; border: 1px solid var(--lightGrey);}

		}

	}

}









.youtube {

	.youtubeThumbs {display: flex; gap: var(--gapSmall); align-items: flex-end;

		div {max-width: 350px;
			iframe {border: 3px solid grey; max-width: 350px; height: 197px; box-shadow: var(--materialShadowHover)}
			iframe:hover {border: 3px solid var(--link)}
			b {display: block; margin: 0 auto 14px auto; font-size: 2.3rem; color: var(--darkGrey); line-height: 1.2;}
		}

	}

}

.licence {

	ul li {list-style: none; margin: 0 auto 12px auto;}
	ul li, ul li * {font-size: calc( var(--fontSizeLarge) - 0.2rem)}
	ul li.extra {background: var(--green); color: white; font-weight: bold; padding: 16px 24px; margin: 16px auto 0 auto}

}


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

	.youtubeThumbs {flex-direction: column;}

}



/* RECORDER - LOG SCALING /log-scaling */

.recorder div {}



.tallyInfo {display: flex; gap: var(--gapSmall); width: 100%; margin: var(--gapSmall) auto 0 auto;

	div {flex: 1; text-align: left; background: var(--lightestGrey); padding: var(--gapSmall);

		h5 {font-size: calc( var(--fontSizeLarge) + 0.3rem); color: var(--darkGrey);
			svg {width: 24px; height: 24px; margin: -4px 8px 0 0; fill: var(--darkGrey); display: inline-block;}
		}

		b {margin-bottom: 8px; font-size: calc( var(--fontSize) + 0.1rem); display: block;}
		ul {text-align: left; margin: 0 0 24px 0; list-style-type: square; list-style-position: inside;
			li {font-size: calc( var(--fontSizeSmall) - 0.1rem); margin: 0 0 10px 0;
				a {display: inline-block; margin: auto 0 auto 6px; vertical-align: middle;
					svg, img {width: 14px; height: 14px; display: block}
				}
			}
			li.mandatory::after {content: "*"; color: red; margin-left: 4px;}
			li.mandatory::marker {color: red;}
		}
	}
}

note {color: red; text-align: center; display: block; font-size: calc( var(--fontSizeSmall) - 0.1rem); margin: 12px auto 0 auto; font-weight: bold;}


@media screen and (min-width: 1921px) {

	.tallyInfo {gap: var(--gap); margin: var(--gap) auto 0 auto;
		div {padding: var(--gap)}
	}

}


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

	.tallyInfo {flex-direction: column}

}




/* REFERENCES DISPLAY STYLES */
/* ========================= */


.references {position: relative; width: 100%; overflow: hidden; margin-inline: auto;}

.reference-position {padding: 30px 20px; background: #f9f9f9; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);}

.reference-item {position: relative;}

/* CRITICAL: Hide single-mode items immediately on page load */
.references.single-mode .reference-item {
	display: none;
}

.references.triple-mode {display: flex; gap: var(--gapSmall);
	.reference-item {display: block;}
}

.references.triple-mode .reference-position {display: block; flex: 1 0 32%; vertical-align: top; min-height: 120px; position: relative;
	.reference-item {display: block;}
}


/* CONTACT + FLAG */
.reference-item > div:first-child {display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: bold; margin-bottom: 8px; color: #333;
	img {display: block; border: 1px solid var(--lightGrey); width: 18px; height: 14px;}
}

.reference-item > div:nth-child(2) {color: #555; font-style: italic; line-height: 1.4; font-size: calc( var(--fontSize) + 0.1rem);}

/* Additional styles for animation smoothness */
.reference-item {-webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out;}



.parallaxReference {height: 100%; display: flex; align-items: center; justify-content: center; gap: 0;

	.references {height: 100%; display: flex; align-items: center; justify-content: center; gap: 0;}

	.reference-item {background: rgba(255,255,255,0.7); padding: calc( var(--gap) - 15px) var(--gap) var(--gap) var(--gap); backdrop-filter: blur(5px);

		>div:first-child {display: flex; justify-content: center; align-items: center; gap: 14px; font-weight: bold; color: #333; font-size: var(--fontSizeXLarge); text-shadow: none; margin: 0 auto;
			img {width: 32px; height: 24px;}
		}
		>div:nth-child(2) {color: #111; line-height: 1.4; font-size: var(--fontSizeXLarge); text-shadow: none; font-style: normal; font-weight: normal;}

	}
}




@media screen and (max-width: 968px) {
	
	.references.triple-mode {flex-direction: column}
	
}



/* FEATURES PAGE */

.featuresPage {

	h1 {margin-bottom: 0;}
	h2 {font-size: var(--fontSize)}

	.featureGrid {max-width: 1024px; width: 100%; margin: var(--gap) auto; display: flex; gap: var(--gapLarge); flex-direction: column;

		> div {

			h3 {display: block; margin: 0 0 12px 0; font-size: calc( var(--fontSizeXLarge) + 0.2rem); color: var(--darkGrey);
				svg {display: inline-block; margin: 0 12px 0 0; width: 32px; height: 32px; vertical-align: middle; fill: var(--darkGrey);}
			}

			a {display: flex; min-height: 295px; background-repeat: no-repeat; background-position: center; background-size: cover; align-items: center; justify-content: center; box-shadow: var(--materialShadow); border: 3px solid transparent; overflow: hidden; padding: var(--gapLarge); font-size: calc( var(--fontSizeXXLarge) + 0.7rem); font-weight: bold; color: white; text-align: center; line-height: 1.2; text-wrap: pretty; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(0, 0, 0, 0.4); text-shadow: var(--materialShadowHover);}

			a:hover {box-shadow: var(--materialShadowHover); border: 3px solid var(--linkHover); border-radius: 12px; text-decoration: none;}

		}

		div.menuClassText a {background-image: url("/images/index/recorder_1.webp");}
		div.menuClassTimb a {background-image: url("/images/index/classifieds_1.webp"); background-position: right;}
		div.menuArticles a {background-image: url("/images/index/recorder_2.webp")}
		div.menuCalcs a {background-image: url("/images/index/optitimb_2.webp");}
		div.menuCutPlans a {background-image: url("/images/nar/22.webp");}
		div.menuOptiTimb a {background-image: url("/images/optitimb/par/10_sk.webp");}
		div.menuStock a {background-image: url("/images/stm/topBanner_2.webp");}
		div.menuRecApp a {background-image: url("/images/recorder/parallax_10.webp");}
		div.menuCMR a {background-image: url("/images/cmr/parallax_1.webp"); background-position: left;}
		div.menuDetApp a {background-image: url("/images/woodprofi/topBanner_2.webp");}
		div.menuVideoShowroom a {background-image: url("/images/optitimb/par/09.webp");}
		div.menuFlyers a {background-image: url("/images/nar/topBanner_1.webp");}
		div.menuMobileApps {order: 245;
			a {background-image: url("/images/recorder/parallax_1.webp");}
		}
		div.menuPartnership {order: 250;
			a {background-image: url("/images/partnership/topBanner_1.webp");}
		}

	}

}


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

	.featuresPage {
		.featureGrid {gap: var(--gapXLarge);
			> div {
				a {line-height: 1.1;}
			}
		}
	}
}