.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; height: 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 */


:is(.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);}
:is(.stmOverview,.stmOverviewTimber) a.bannerItem 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);}
:is(.stmOverview,.stmOverviewTimber) a.bannerItem:hover {text-decoration: none}
:is(.stmOverview,.stmOverviewTimber) a.bannerItem p {display: none; position: absolute; bottom: 15px; font-weight: bold; color: white; font-size: var(--fontSizeLarge);}
:is(.stmOverview,.stmOverviewTimber) a.bannerItem:hover p {display: block}
:is(.stmOverview,.stmOverviewTimber) .syncingBanner {background-image: url("../images/banner/syncing/syncing_03.jpg")}
:is(.stmOverview,.stmOverviewTimber) .syncingBannerTimber {background-image: url("../images/banner/syncing/syncing_timber_01.jpg")}
:is(.stmOverview,.stmOverviewTimber) .mobileAppBanner {background-image: url("../images/banner/recorder/rec_01.jpg")}
:is(.stmOverview,.stmOverviewTimber) .mobileAppBannerTimber {background-image: url("../images/banner/recorder/rec_timber_05.jpg")}


/* MOBILE TALLY SYNCING */


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

.stmSyncing .infoSideBox {background: var(--lightestGrey); padding: var(--gap); font-size: calc( var(--fontSizeLarge) - 0.2rem); line-height: 1.4; text-align: justify; flex-grow: 1;}
.stmSyncing .infoSideBox b {display: block; font-size: var(--fontSizeLarge); margin-bottom: 8px}

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

.stmSyncing .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);}
.stmSyncing .syncingCamera 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,body.presentation 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;}
.topBanner .topBannerBackground,.topBanner .topBannerContainer {position: absolute; top: 0; left: 0; bottom: 0; right: 0}

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

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

.topBanner .topBannerLeft {container-name: topBannerText; container-type: inline-size; flex: 1; display: flex; justify-content: center; align-items: center;}
.topBanner .topBannerLeft .topBannerLeftWrap {margin: auto; text-align: left; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap: var(--gapSmall)}
.topBanner .topBannerLeft .topBannerLeftWrap.centeredText {justify-content: center; align-items: center}
.topBanner .topBannerLeft .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}
.topBanner .topBannerLeft .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}

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

.topBanner .mobileApp {position: absolute; z-index: 4; top: 35px; right: 54px; width: 300px;}
.topBanner .mobileApp .mobileAppWrap {position: relative;}
.topBanner .mobileApp img.mobileAppBackground {width: 300px; height: auto; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.4));}
.topBanner .mobileApp img.mobileAppLogo {width: 180px; height: auto; filter: drop-shadow(0 0 4px rgba(0,0,0,1));}
.topBanner .mobileApp .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;}
.topBanner .topBannerLeft .topBannerLeftWrap {text-align: center; justify-content: center; align-items: center}
.topBanner .topBannerLeft .topBannerTitle,.topBanner .topBannerLeft .topBannerText {text-align: center; margin: auto}
.topBanner .topBannerLeft .topBannerTitle {font-weight: 700; font-size: 4.2rem}
.topBanner .topBannerLeft .topBannerText {font-size: 2.8rem}
.topBanner .topBannerRight,.topBanner .mobileApp {display: none;}
}


/* CONTENT */

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

.presentationContentWrap 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;}
.presentationContentWrap section .actionButton {display: block; margin: var(--gapSmall) auto; width: 100%; max-width: 600px; font-size: var(--fontSizeXLarge)}

.presentationContentWrap ol {margin: var(--gap) 0 0 0; counter-reset: li; list-style: none;}
.presentationContentWrap ol li {margin: 14px 0 24px 0; text-align: left; position: relative; padding-left: 52px; min-height: 42px;}

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

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


.presentationContentWrap ul {margin: var(--gapSmall) 0 0 0; list-style-type: square;}
.presentationContentWrap ul li {margin: 12px 0; text-align: left;}

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


.presentationContentWrap .hightlights {gap: calc( var(--gapSmall) - 10px); justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: stretch;}
.presentationContentWrap .hightlights > 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;}
.presentationContentWrap .hightlights b {display: block; font-size: var(--fontSizeLarge); color: var(--darkGrey)}
.presentationContentWrap .hightlights > div:hover {background: var(--lightestGrey); border: 3px solid var(--lighterGrey)}

.presentationContentWrap .hightlights .starRating {white-space: nowrap; position: absolute; top: 6px; right: 8px;}
.presentationContentWrap .hightlights .starRating 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));}


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

.presentationContentWrap .container {position: relative; min-height: 400px; display: flex; align-items: stretch; flex-direction: row;}
.imgTextLeftContainer:is(.presentationContentWrap .container) {justify-content: flex-start;}
.imgTextLeftContainer:is(.presentationContentWrap .container) .containerTextPart {margin: 0}

.imgTextRightContainer:is(.presentationContentWrap .container) {justify-content: flex-end;}
.imgTextRightContainer:is(.presentationContentWrap .container) .containerTextPart {margin: 0 0 0 auto}

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

.presentationContentWrap .container .containerBackground {z-index: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.presentationContentWrap .container .containerBackground img {display: block; margin: 0 auto}

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

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

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

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


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

.presentationContentWrap .featuresTypeA {display: block;}
.presentationContentWrap .featuresTypeA .featureListing {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; margin: 0 auto; gap: 24px;}
.presentationContentWrap .featuresTypeA .featureListing > 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:is(.presentationContentWrap .featuresTypeA .featureListing > div) {flex: 1 0 200px; font-size: calc(var(--fontSize) - 0.1rem);}

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

.presentationContentWrap .featuresTypeA .featureListing > div p {flex:1}


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


/* MOBILE + ITS FEATURES - PORTRAIT */

.presentationContentWrap .featuresTypeB {display: block;}
.presentationContentWrap .featuresTypeB .featureListingTypeB {display: flex; align-items: center; margin: 0 auto; gap: var(--gapXLarge);}
.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBLeft {position: relative;}

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


.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight {display: flex; flex-direction: column; gap: 42px;}
.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > a,.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > 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;}

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

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

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

.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > a:hover b {color: var(--linkHover)}

.featureTypeBRightLargerText:is(.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight) div p {font-size: var(--fontSizeLarge); font-weight: bold; color: var(--darkGrey);}


/* MOBILE + ITS FEATURES - LANDSCAPE */

.presentationContentWrap .featuresTypeC {display: block;}
.presentationContentWrap .featuresTypeC .featureListingTypeC {display: flex; align-items: flex-start; flex-direction: column; margin: 0 auto; gap: var(--gapLarge); justify-content: center;}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCTop {position: relative; margin: 0 auto; container-type: inline-size; container-name: featureTypeCTop; width: 100%;}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCTop .mobileApp {overflow: visible;}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCTop .mobileApp .mobileAppWrap {position: relative; width: 710px; margin: auto; overflow: visible;}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCTop .mobileApp .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}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCTop .mobileApp img.mobileAppBackground {width: 710px; height: 340px; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.4));}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCTop .mobileApp img.mobileAppLogo {width: 180px; height: auto; filter: drop-shadow(0 0 4px rgba(0,0,0,1));}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCTop .mobileApp video {width: 630px; height: 320px; z-index: 2; position: absolute; top: 10px; right: 30px; left: 45px; bottom: 20px; background: #000;}


.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom {display: flex; flex-direction: column; margin: 0 auto; gap: var(--gap);}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > a,.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > div {display: flex; align-items: center; gap: var(--gapSmall);}
:is(.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > a,.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > div) img,:is(.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > a,.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > div) svg {width: 42px; height: 42px; fill: #b3b3b3; margin-right: 12px;}
:is(.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > a,.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > div) p {text-align: left;}
:is(.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > a,.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > div) b {font-size: var(--fontSizeLarge); display: block; margin-bottom: 3px}


.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > a:hover p {text-decoration: none;}
.presentationContentWrap .featuresTypeC .featureListingTypeC .featureTypeCBottom > a:hover b {color: var(--link); text-decoration: underline;}


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


.presentationContentWrap .features.featuresTypeC .featureListingTypeC .featureTypeCTop .mobileApp video {position: static}

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


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

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


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


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

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


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


/* 3 FEATURES IN ONE ROW - woodprofi */

.presentationContentWrap .featuresTypeD {display: block;}
.presentationContentWrap .featuresTypeD .featureListingTypeD {display: flex; justify-content: center; align-items: flex-start; margin: 0 auto; gap: var(--gapSmall);}
.presentationContentWrap .featuresTypeD .featureListingTypeD > div {width: 33%; text-align: center;}
.presentationContentWrap .featuresTypeD .featureListingTypeD > div h6 {font-size: calc(var(--fontSizeXLarge) + 0.3rem); color: var(--darkGrey);}
.presentationContentWrap .featuresTypeD .featureListingTypeD > div img {width: 100%; height: 300px; margin: var(--gapSmall) auto}


/* PARTNERSHIP /partnership */

.presentationContentWrap .featuresTypeE {display: block;}
.presentationContentWrap .featuresTypeE .featureListing {display: flex; align-items: flex-start; flex-direction: column; margin: 0 auto; gap: var(--gap); justify-content: center; overflow: hidden;}
.presentationContentWrap .featuresTypeE .featureListing > 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;}
.presentationContentWrap .featuresTypeE .featureListing > div icon {width: 160px;}
.presentationContentWrap .featuresTypeE .featureListing > div img {width: 160px; height: auto;}
.presentationContentWrap .featuresTypeE .featureListing > div > div {flex: 1;}
.presentationContentWrap .featuresTypeE .featureListing > div > div h4 {color: var(--darkGrey); font-size: 2.6rem; margin: 0 0 8px 0}
.presentationContentWrap .featuresTypeE .featureListing > div > div 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);}


.presentationContentWrap .featuresTypeB .featureListingTypeB {flex-direction: column;}
.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBLeft {text-align: center;}
.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBLeft .mobileApp {margin: 0 auto; width: fit-content;}


.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight {width: auto; margin: auto;}
.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > a,.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > div {flex-direction: column; text-align: center; gap: 18px;}
:is(.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > a,.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > div) img,:is(.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > a,.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > div) svg {margin: auto; max-height: 100px;}


.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > a:hover,.presentationContentWrap .featuresTypeB .featureListingTypeB .featureTypeBRight > div:hover {transform: translateY(10px)}


.presentationContentWrap .featuresTypeD .featureListingTypeD {flex-direction: column; gap: var(--gapSmall);}
.presentationContentWrap .featuresTypeD .featureListingTypeD > div {width: 100%;}
.presentationContentWrap .featuresTypeD .featureListingTypeD > div img {width: auto; height: 250px}


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


}


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

.presentationContentWrap {padding: 0 var(--gapSmall);}
.presentationContentWrap section {margin: var(--gapXLarge) auto calc(var(--gapXLarge) + 3rem) auto; line-height: 1.3;}

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

.presentationContentWrap h3,.presentationContentWrap h4 {text-align: center;}

.presentationContentWrap .slogan {font-size: 3rem}

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

.imgTextRightTwoThirds:is(.presentationContentWrap .container) {flex-direction: column; justify-content: center; gap: 12px;}
.imgTextRightTwoThirds:is(.presentationContentWrap .container) 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 video {width: 100%; max-width: var(--displayWidthTablet); margin: 0 auto;}

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


/* ANIMATED SVG */

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

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


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


:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .stmPreview h3 p {margin-bottom: 0;}
:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .stmPreview img {width: 100%; max-width: 1000px; height: auto; border: 1px solid var(--lighterGrey); box-shadow: var(--materialShadow);}


:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .howSvg.allPhases h5,:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .howSvg.allPhases p {margin-bottom: 18px;}

:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .howSvg.allPhases .flex {flex-direction: column; width: 100%; justify-content: center; gap: var(--gapLarge);}
:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .howSvg.allPhases img {display: block; width: 100%; max-width: 600px; margin-inline: auto;}
:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .howSvg.allPhases img.narrowImg {display: block; width: 100%; max-width: 300px;}
:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .howSvg.allPhases a {font-size: 18px; font-weight: bold}

:is(.stmFree,.narFree,.cmrForms) .presentationContentWrap .mobileAppRec .actionButton {margin: var(--gapXLarge) auto;}


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


:is(body.optiTimb,body.narFree,body.cmrForms) #mobileScreens {width: 400px; height: 360px;}

:is(body.optiTimb,body.narFree,body.cmrForms) .patternSamples {display: flex; justify-content: center; margin-inline: auto; flex-wrap: wrap; gap: 16px;}
:is(body.optiTimb,body.narFree,body.cmrForms) .patternSamples a {display: block; border: 1px solid var(--link); transition: 0.5s; overflow: hidden;}
:is(body.optiTimb,body.narFree,body.cmrForms) .patternSamples a img {max-width: 300px; height: 250px;}
:is(body.optiTimb,body.narFree,body.cmrForms) .patternSamples a:hover {border: 1px solid var(--linkHover); box-shadow: var(--materialShadow); border-radius: 12px;}

:is(body.optiTimb,body.narFree,body.cmrForms) .reportSamples {display: flex; justify-content: center; margin-inline: auto; flex-wrap: wrap; gap: var(--gapSmall);}
:is(body.optiTimb,body.narFree,body.cmrForms) .reportSamples a {display: block; text-align: center; font-size: calc( var(--fontSizeSmall) - 0.15rem); white-space: normal; transition: 0.5s;}
:is(body.optiTimb,body.narFree,body.cmrForms) .reportSamples a 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;}

:is(body.optiTimb,body.narFree,body.cmrForms) .reportSamples a:hover {text-decoration: none; font-weight: bold;}
:is(body.optiTimb,body.narFree,body.cmrForms) .reportSamples a:hover img {border: 1px solid var(--linkHover); box-shadow: var(--materialShadow); border-radius: 12px;}


:is(body.optiTimb,body.narFree,body.cmrForms) .imperiaWarning {font-weight: bold; color: red; margin: 0 auto; font-size: var(--fontSizeSmall);}
:is(body.optiTimb,body.narFree,body.cmrForms) .manEditor .imperiaWarning {margin: 0 auto var(--gapSmall) auto; font-size: var(--fontSize);}


:is(body.optiTimb,body.narFree,body.cmrForms) .fourSteps h3 p {margin: 8px auto 0 auto}
:is(body.optiTimb,body.narFree,body.cmrForms) .fourSteps .video {margin: var(--gap) auto;}
:is(body.optiTimb,body.narFree,body.cmrForms) .fourSteps .video 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;}
body.woodProfi .woodProfiStatus h4 {font-size: var(--fontSizeXLarge); margin: 0 auto;}

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


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


body.narFree .howVideo .video {position: relative;}
body.narFree .howVideo .video .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;}
body.cmrForms .patternSamples a {padding: 10px; background: white; border-width: 2px; overflow: hidden;}
body.cmrForms .patternSamples a:hover {border-width: 2px; border-radius: 12px;}


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


body.mobApps h1 {text-align: left}
body.mobApps .mobAppsGrid {display: flex; gap: var(--gap); justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 0 auto;}
body.mobApps .mobAppsGrid > div {width: 45%; min-width: 500px; text-align: center; padding: var(--gapSmall);}
body.mobApps .mobAppsGrid > div h3 {font-size: 2.8rem; margin-bottom: calc(var(--gapSmall) - 14px);}
body.mobApps .mobAppsGrid > div h4 {font-size: 2.0rem; font-weight: normal; text-align: center;}
body.mobApps .mobAppsGrid > div img {margin: calc(var(--gapSmall) - 8px) auto; width: 240px; height: auto;}
body.mobApps .mobAppsGrid > div .alink {display: table; margin: var(--gapSmall) auto; width: auto;}
body.mobApps .mobAppsGrid > div .alink 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);}
body.partnership .whyMainIdea * {color: rgba(0,0,0,0.6); font-weight: 600;}
body.partnership .whyMainIdea h3 {margin-bottom: var(--gapSmall);}
body.partnership .whyMainIdea p {font-size: calc( var(--fontSizeLarge) + 0.2rem);}
body.partnership .whyMainIdea b {font-size: calc( var(--fontSizeLarge) + 0.2rem); text-align: left; display: block;width: 100%;}
body.partnership .whyMainIdea ul {list-style-position: inside;}
body.partnership .whyMainIdea 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;}
.parallaxText.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)}
.parallaxText.smallerText {font-size: 4.6rem}
.parallaxText b,.parallaxText span {display: contents; font-size: inherit; font-weight: bold;}
.parallaxText b {color: orange; -webkit-text-stroke: 1px #97632f;}
.parallaxText 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;}
.parallaxText.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;}
.parallaxText.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;}

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


.emptyContainer .emptyListing {display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gapSmall);}
.emptyContainer .emptyListing > 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);}
.emptyContainer .emptyListing > div > svg {width: 32px; height: 32px; fill: var(--darkGrey);}


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

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


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

.emptyContainer .emptyListing > div a.actionButton {padding: 10px 18px;}
.emptyContainer .emptyListing > div a.actionButton svg {margin: 0 6px 0 0}

.emptyContainer .emptyListing > div a.actionButton.presetHighlight {padding: 10px 18px;
animation: presetHighlight 0.5s ease 32;}


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


.emptyContainer h5 {text-align: center}

.emptyContainer .emptyListing {flex-direction: column; text-align: center;}
.emptyContainer .emptyListing > 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;}
.youtube .youtubeThumbs div {max-width: 350px;}
.youtube .youtubeThumbs div iframe {border: 3px solid grey; max-width: 350px; height: 197px; box-shadow: var(--materialShadowHover)}
.youtube .youtubeThumbs div iframe:hover {border: 3px solid var(--link)}
.youtube .youtubeThumbs div 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;}
.licence ul li,.licence ul li * {font-size: calc( var(--fontSizeLarge) - 0.2rem)}
.licence 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;}
.tallyInfo div {flex: 1; text-align: left; background: var(--lightestGrey); padding: var(--gapSmall);}
.tallyInfo div h5 {font-size: calc( var(--fontSizeLarge) + 0.3rem); color: var(--darkGrey);}
.tallyInfo div h5 svg {width: 24px; height: 24px; margin: -4px 8px 0 0; fill: var(--darkGrey); display: inline-block;}

.tallyInfo div b {margin-bottom: 8px; font-size: calc( var(--fontSize) + 0.1rem); display: block;}
.tallyInfo div ul {text-align: left; margin: 0 0 24px 0; list-style-type: square; list-style-position: inside;}
.tallyInfo div ul li {font-size: calc( var(--fontSizeSmall) - 0.1rem); margin: 0 0 10px 0;}
.tallyInfo div ul li a {display: inline-block; margin: auto 0 auto 6px; vertical-align: middle;}
.tallyInfo div ul li a svg,.tallyInfo div ul li a img {width: 14px; height: 14px; display: block}
.tallyInfo div ul li.mandatory::after {content: "*"; color: red; margin-left: 4px;}
.tallyInfo div ul 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;}
.tallyInfo 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);}
.references.triple-mode .reference-item {display: block;}

.references.triple-mode .reference-position {display: block; flex: 1 0 32%; vertical-align: top; min-height: 120px; position: relative;}
.references.triple-mode .reference-position .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;}
.reference-item > div:first-child 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;}
.parallaxReference .references {height: 100%; display: flex; align-items: center; justify-content: center; gap: 0;}

.parallaxReference .reference-item {background: rgba(255,255,255,0.7); padding: calc( var(--gap) - 15px) var(--gap) var(--gap) var(--gap); backdrop-filter: blur(5px);}
.parallaxReference .reference-item > 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;}
.parallaxReference .reference-item > div:first-child img {width: 32px; height: 24px;}
.parallaxReference .reference-item > 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;}
.featuresPage h2 {font-size: var(--fontSize)}

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

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

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

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


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


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

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