/* ==========================================================================
   Sartelco — sezioni delle pagine (home e pagine istituzionali)
   Misure dal Figma "Sartelco Sistemi", tavola Homepage 1440.
   Usa i token di sartelco-tokens.css (--st-*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pulsanti di sezione (classe sull'elemento Pulsante di Woodmart)
   -------------------------------------------------------------------------- */
.st-btn .btn,
.st-btn-outline .btn {
	min-height: 50px;
	padding: 18px 26px;
	border-radius: 0;
	font-family: var(--st-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	box-shadow: none;
}

.st-btn-outline .btn {
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
}

.st-btn-outline .btn:hover {
	background: #fff;
	color: var(--st-blu);
}

/* --------------------------------------------------------------------------
   Hero della home (riga WPBakery con immagine di sfondo, classe st-home-hero)
   -------------------------------------------------------------------------- */
.st-home-hero {
	position: relative;
	/* il contenuto di Woodmart ha 40px di spazio in alto: la hero parte subito sotto l'header */
	margin-top: -40px;
	background-size: cover !important;
	background-position: center top !important;
	padding-top: 67px;
	/* 82px sotto il pulsante + lo spazio occupato dai riquadri che salgono */
	padding-bottom: calc(82px + var(--st-hero-overlap, 322px));
	text-align: center;
}

/* velatura sull'immagine: qui solo la struttura. Colore e trasparenza stanno in
   Woodmart > Impostazioni del tema > CSS personalizzato, cosi' si cambiano dal pannello. */
.st-home-hero::before {
	content: "";
	display: block; /* WPBakery lo imposta a table per il clearfix */
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.st-home-hero > .wpb_column {
	position: relative;
	z-index: 1;
}

.st-home-hero .st-hero-h1,
.st-home-hero .st-hero-h1 :is(h1, h2, p) {
	max-width: 1197px;
	margin: 0 auto;
	font-family: var(--st-font-display);
	font-size: 54px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
}

.st-home-hero .st-hero-lead,
.st-home-hero .st-hero-lead p {
	max-width: 705px;
	margin: 0 auto;
	font-family: var(--st-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: #fff;
}

/* WPBakery aggiunge 35px alle righe con sfondo e sotto ogni elemento: qui gli spazi sono quelli del progetto */
.st-home-hero > .vc_column_container > .vc_column-inner,
.st-home-hero + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner {
	padding-top: 0;
}

.st-home-hero .wpb_content_element,
.st-home-hero .wd-button-wrapper {
	margin-bottom: 0;
}

.st-home-hero .st-btn-outline .btn {
	padding: 17px 25px;
}

.st-home-hero .st-hero-lead {
	margin-top: 22px;
}

.st-home-hero .wd-button-wrapper {
	margin-top: 42px;
}

/* --------------------------------------------------------------------------
   Riquadri soluzioni [st_solutions]
   Riquadro 584x722, taglio in alto a sinistra 140, in basso a destra 87,
   incavo per il rombo (435 di ingombro, centro 59,5px sopra il bordo basso).
   -------------------------------------------------------------------------- */
.st-solutions {
	position: relative;
	z-index: 2;
	display: grid;
	width: 100%;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 31px;
	max-width: 1200px;
	margin: calc(-1 * var(--st-sol-overlap, 0px)) auto 0;
}

/* il contenitore di Woodmart e' 1192: su schermi larghi i riquadri arrivano ai 1200 del progetto */
@media (min-width: 1240px) {
	.st-solutions {
		width: calc(100% + 8px);
		max-width: none;
		margin-inline: -4px;
	}
}

.st-solutions--has-center {
	padding-bottom: 158px;
}

.st-sol-panel {
	position: relative;
	min-height: 722px;
	color: #fff;
	text-align: center;
}

.st-sol-shape {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--st-sol-color, var(--st-blu));
}

.st-sol-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(1);
	mix-blend-mode: luminosity;
}

.st-sol-panel--left .st-sol-shape {
	clip-path: polygon(140px 0, 100% 0, 100% 100%, 0 100%, 0 140px);
}

.st-sol-panel--right .st-sol-shape {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 88px), calc(100% - 87px) 100%, 0 100%);
}

.st-solutions--has-center .st-sol-panel--left .st-sol-shape {
	clip-path: polygon(140px 0, 100% 0, 100% calc(100% - 295px), calc(100% - 234px) calc(100% - 61px), calc(100% - 179px) 100%, 0 100%, 0 140px);
}

.st-solutions--has-center .st-sol-panel--right .st-sol-shape {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 88px), calc(100% - 87px) 100%, 179px 100%, 233px calc(100% - 61px), 0 calc(100% - 295px));
}

.st-sol-body {
	position: relative;
	padding: 53px 70px 0;
}

.st-sol-icon img {
	display: block;
	width: auto;
	height: 112px;
	margin: 0 auto;
}

.st-solutions .st-sol-title {
	margin: 22px 0 0;
	font-family: var(--st-font-display);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.15;
	color: #fff;
}

.st-solutions .st-sol-text {
	max-width: 425px;
	min-height: 112px;
	margin: 42px auto 0;
	font-family: var(--st-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: #fff;
}

.st-solutions a.st-sol-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin-top: 57px;
	padding: 18px 26px;
	background: #fff;
	font-family: var(--st-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: #222;
	transition: background-color .2s ease, color .2s ease;
}

.st-solutions a.st-sol-btn:hover {
	background: var(--st-blu);
	color: #fff;
}

/* immagini in basso, a cavallo del bordo inferiore */
.st-sol-media {
	position: absolute;
	bottom: -98px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
}

.st-sol-panel--left .st-sol-media {
	left: 70px;
}

.st-sol-panel--right .st-sol-media {
	right: 91px;
	bottom: -104px;
}

.st-sol-media--slider {
	margin-inline: -34px;
}

.st-sol-track {
	display: flex;
	width: 285px;
	overflow: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

.st-sol-slide {
	display: flex;
	flex: 0 0 100%;
	align-items: flex-end;
	justify-content: center;
	scroll-snap-align: center;
}

.st-sol-slide img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 202px;
}

.st-solutions .st-sol-nav {
	flex: 0 0 24px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 18px;
	line-height: 1;
	color: var(--st-blu);
	cursor: pointer;
}

/* rombo centrale */
.st-sol-diamond {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 2;
	display: block;
	width: 435px;
	height: 435px;
	transform: translateX(-50%);
	color: #222;
}

.st-sol-diamond-shape {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 307.6px;
	height: 307.6px;
	background: #f2f2f2;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: background-color .2s ease;
}

a.st-sol-diamond:hover .st-sol-diamond-shape {
	background: #e9e9e9;
}

.st-sol-diamond-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 75px;
}

.st-sol-diamond-icon img {
	display: block;
	width: auto;
	height: 54px;
}

.st-sol-diamond-text {
	margin-top: 40px;
	font-family: var(--st-font-display);
	font-size: 28px;
	font-weight: 500;
	line-height: 36px;
	text-align: center;
	color: #222;
}

/* --------------------------------------------------------------------------
   Schermi stretti: stessi punti di rottura di Woodmart (1024 e 768)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.st-home-hero .st-hero-h1,
	.st-home-hero .st-hero-h1 :is(h1, h2, p) {
		font-size: 44px;
	}

	.st-sol-body {
		padding-inline: 36px;
	}

	.st-solutions .st-sol-title {
		font-size: 32px;
	}

	.st-sol-panel--left .st-sol-media {
		left: 30px;
	}

	.st-sol-panel--right .st-sol-media {
		right: 40px;
	}

	.st-sol-track {
		width: 230px;
	}
}

@media (max-width: 1024px) {
	.st-home-hero {
		--st-hero-overlap: 110px;
		padding-top: 48px;
		padding-bottom: calc(56px + var(--st-hero-overlap));
	}

	/* blocco semplice: come griglia, su schermi stretti il margine negativo non viene applicato */
	.st-solutions {
		display: block;
		width: 100%;
		max-width: 584px;
		margin-top: calc(-1 * min(var(--st-sol-overlap, 0px), 110px));
	}

	.st-solutions--has-center {
		padding-bottom: 0;
	}

	.st-sol-panel {
		min-height: 0;
	}

	.st-sol-panel + .st-sol-panel {
		margin-top: 84px;
	}

	.st-sol-panel--left .st-sol-shape,
	.st-solutions--has-center .st-sol-panel--left .st-sol-shape {
		clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px);
	}

	.st-sol-panel--right .st-sol-shape,
	.st-solutions--has-center .st-sol-panel--right .st-sol-shape {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%);
	}

	.st-sol-body {
		padding: 44px 28px 44px;
	}

	.st-sol-icon img {
		height: 88px;
	}

	.st-solutions .st-sol-text {
		min-height: 0;
		margin-top: 26px;
	}

	.st-solutions a.st-sol-btn {
		margin-top: 32px;
	}

	.st-sol-media,
	.st-sol-panel--left .st-sol-media,
	.st-sol-panel--right .st-sol-media {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		justify-content: center;
		margin: 0 0 -56px;
	}

	.st-sol-track {
		width: 240px;
	}

	.st-sol-diamond {
		position: relative;
		bottom: auto;
		left: auto;
		width: 300px;
		height: 300px;
		margin: 60px auto 0;
		transform: none;
	}

	.st-sol-diamond-shape {
		width: 212px;
		height: 212px;
	}

	.st-sol-diamond-body {
		padding-top: 52px;
	}

	.st-sol-diamond-icon img {
		height: 40px;
	}

	.st-sol-diamond-text {
		margin-top: 22px;
		font-size: 20px;
		line-height: 26px;
	}
}

@media (max-width: 768px) {
	.st-home-hero .st-hero-h1,
	.st-home-hero .st-hero-h1 :is(h1, h2, p) {
		font-size: 30px;
		line-height: 1.2;
	}

	.st-home-hero .st-hero-lead,
	.st-home-hero .st-hero-lead p {
		font-size: 17px;
		line-height: 25px;
	}

	.st-home-hero .wd-button-wrapper {
		margin-top: 28px;
	}

	.st-solutions .st-sol-title {
		font-size: 27px;
	}

	/* su telefono il titolo va a capo da solo */
	.st-solutions .st-sol-title br {
		display: none;
	}

	.st-solutions .st-sol-text {
		font-size: 17px;
		line-height: 25px;
	}
}

/* ==========================================================================
   SEZIONI DELLA HOME DOPO I RIQUADRI
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pulsanti: varianti di colore (classe sul Pulsante di Woodmart)
   -------------------------------------------------------------------------- */
.st-btn-navy .btn {
	border: 1px solid var(--st-blu);
	background: var(--st-blu);
	color: #fff;
}

.st-btn-navy .btn:hover {
	background: #fff;
	color: var(--st-blu);
}

.st-btn-azzurro .btn {
	border: 1px solid var(--st-azzurro);
	background: var(--st-azzurro);
	color: var(--st-blu);
}

.st-btn-azzurro .btn:hover {
	background: #fff;
	border-color: #fff;
	color: var(--st-blu);
}

.st-btn-white .btn {
	border: 1px solid #fff;
	background: #fff;
	color: #222;
}

.st-btn-white .btn:hover {
	background: var(--st-blu);
	border-color: var(--st-blu);
	color: #fff;
}

.st-btn-navy .btn,
.st-btn-azzurro .btn,
.st-btn-white .btn {
	min-height: 50px;
	padding: 17px 25px;
	border-radius: 0;
	font-family: var(--st-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Titolo di sezione [st_section_head]
   -------------------------------------------------------------------------- */
.st-section-head {
	text-align: center;
}

.st-section-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 27px;
	font-family: var(--st-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: #222;
}

.st-section-head.st-eyebrow-blu .st-section-eyebrow {
	color: var(--st-blu);
}

.st-section-eyebrow::before,
.st-section-eyebrow::after {
	content: "";
	flex: 0 0 80px;
	height: 1px;
	background: #8c8c8c;
}

.st-section-head .st-section-title {
	max-width: 860px;
	margin: 36px auto 0;
	font-family: var(--st-font-display);
	font-size: 38px;
	font-weight: 500;
	line-height: 50px;
	letter-spacing: -.76px;
	color: var(--st-blu);
}

.st-section-head--light .st-section-eyebrow,
.st-section-head--light .st-section-title {
	color: #fff;
}

.st-section-head--light .st-section-eyebrow::before,
.st-section-head--light .st-section-eyebrow::after {
	background: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Spazi fra le sezioni (classi sulla riga). WPBakery mette 35px sotto ogni
   elemento: dentro le sezioni Sartelco gli spazi sono quelli del progetto.
   -------------------------------------------------------------------------- */
.st-sec .wpb_content_element,
.st-sec .wd-button-wrapper,
.st-band .wpb_content_element,
.st-band .wd-button-wrapper {
	margin-bottom: 0;
}

.st-band > .vc_column_container > .vc_column-inner,
.st-band + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner {
	padding-top: 0;
}

.st-sec--news {
	padding-top: 42px;
	padding-bottom: 115px;
}

.st-sec--news .st-posts {
	margin-top: 39px;
}

.st-sec--partner {
	padding-top: 80px;
	padding-bottom: 92px;
}

.st-sec--chi {
	padding-bottom: 91px;
}

/* --------------------------------------------------------------------------
   Fasce a tutta larghezza (classe st-band sulla riga, colore dalle opzioni
   della riga). Tagli d'angolo: st-band-cut-tl / st-band-cut-br.
   -------------------------------------------------------------------------- */
.st-band {
	position: relative;
}

.st-band-cut-tl {
	clip-path: polygon(100px 0, 100% 0, 100% 100%, 0 100%, 0 100px);
}

.st-band-cut-br {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 140px), calc(100% - 140px) 100%, 0 100%);
}

/* fascia "Applicazioni" */
.st-band--apps {
	margin-top: 61px;
	padding-top: 58px;
	padding-bottom: 81px;
}

.st-band--apps.st-band--dark {
	margin-top: 0;
	padding-top: 53px;
	padding-bottom: 72px;
}

.st-band--apps .st-band-icon,
.st-band--apps .st-band-icon .vc_figure,
.st-band--apps .st-band-icon .vc_single_image-wrapper {
	display: block;
	text-align: left;
}

.st-band--apps .st-band-icon img {
	width: auto;
	height: 99px;
}

.st-band-title,
.st-band-title :is(h2, h3, p) {
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 44px;
	font-weight: 500;
	line-height: 50px;
	letter-spacing: -.88px;
	color: var(--st-blu);
}

.st-band--apps .st-band-title {
	max-width: 410px;
	margin-top: 16px;
}

.st-band-text,
.st-band-text p {
	margin: 0;
	font-family: var(--st-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--st-body);
}

.st-band--apps .st-band-text {
	max-width: 333px;
	margin-top: 12px;
}

.st-band--apps .wd-button-wrapper {
	margin-top: 30px;
	text-align: left;
}

.st-band--dark .st-band-title,
.st-band--dark .st-band-title :is(h2, h3, p),
.st-band--dark .st-band-text,
.st-band--dark .st-band-text p {
	color: #fff;
}

/* colonne come nel progetto: 448px di testo, poi le schede fino al bordo del contenuto */
@media (min-width: 1025px) {
	.st-band--apps > .vc_col-sm-4 {
		width: 37.9%;
	}

	.st-band--apps > .vc_col-sm-8 {
		width: 62.1%;
	}

	.st-band--apps > .vc_col-sm-8 > .vc_column-inner {
		padding-left: 0;
	}
}

.st-band--apps .st-apps {
	margin-top: 128px;
}

.st-band--apps.st-band--dark .st-apps {
	margin-top: 121px;
}

/* --------------------------------------------------------------------------
   Carosello generico (applicazioni, brand)
   -------------------------------------------------------------------------- */
.st-carousel {
	--st-car-gap: 37px;
	--st-car-v: var(--st-car-visible, 3);
	position: relative;
}

.st-car-track {
	display: flex;
	gap: var(--st-car-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.st-car-track::-webkit-scrollbar {
	display: none;
}

.st-car-slide {
	flex: 0 0 calc((100% - (var(--st-car-v) - 1) * var(--st-car-gap)) / var(--st-car-v));
	min-width: 0;
	scroll-snap-align: start;
}

.st-carousel .st-car-nav {
	position: absolute;
	top: 67px;
	z-index: 2;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--st-blu);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	transform: rotate(45deg);
	transition: background-color .2s ease;
}

.st-carousel .st-car-nav span {
	display: block;
	font-size: 15px;
	line-height: 34px;
	transform: rotate(-45deg);
}

/* senza abbastanza elementi da scorrere le frecce non servono */
.st-carousel:not(.st-carousel--active) .st-car-nav {
	display: none;
}

.st-carousel .st-car-nav--prev {
	left: -57px;
}

.st-carousel .st-car-nav--next {
	right: -57px;
}

.st-carousel .st-car-nav:hover {
	background: var(--st-header-dark);
}

/* --------------------------------------------------------------------------
   Applicazioni [st_apps]
   -------------------------------------------------------------------------- */
.st-app-img {
	display: block;
	aspect-ratio: 223 / 168;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
}

.st-app-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.st-app:hover .st-app-img img {
	transform: scale(1.05);
}

.st-apps .st-app-title {
	margin: 25px 0 0;
	font-family: var(--st-font-display);
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -.4px;
}

.st-apps .st-app-title a,
.st-apps a.st-app-more {
	color: var(--st-body);
}

.st-apps a.st-app-more {
	display: inline-block;
	margin-top: 13px;
	font-family: var(--st-font-body);
	font-size: 18px;
	line-height: 28px;
}

.st-apps .st-app-title a:hover,
.st-apps a.st-app-more:hover {
	color: var(--st-blu);
}

.st-apps--light .st-app-title a,
.st-apps--light a.st-app-more {
	color: #fff;
}

.st-apps--light .st-app-title a:hover,
.st-apps--light a.st-app-more:hover {
	color: var(--st-azzurro);
}

/* --------------------------------------------------------------------------
   Articoli [st_posts]
   -------------------------------------------------------------------------- */
.st-posts {
	display: flex;
	gap: 18px;
}

.st-posts a.st-post-card {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: flex-end;
	min-width: 0;
	height: 498px;
	overflow: hidden;
	background: var(--st-header-dark);
	color: #fff;
}

.st-posts a.st-post-card:first-child {
	clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%, 0 60px);
}

.st-posts a.st-post-card:last-child {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%);
}

.st-posts a.st-post-card:first-child:last-child {
	clip-path: polygon(60px 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%, 0 60px);
}

.st-post-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .5s ease;
}

.st-post-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .82) 82%, rgba(0, 0, 0, .9) 100%);
}

.st-post-card:hover .st-post-bg {
	transform: scale(1.04);
}

.st-post-body {
	position: relative;
	display: block;
	padding: 0 16px 34px 35px;
}

.st-post-title {
	display: block;
	max-width: 334px;
	font-family: var(--st-font-display);
	font-size: 27px;
	font-weight: 500;
	line-height: 36px;
	letter-spacing: -.54px;
	color: #fff;
}

.st-post-more {
	display: inline-block;
	margin-top: 26px;
	font-family: var(--st-font-body);
	font-size: 18px;
	line-height: 28px;
	text-transform: uppercase;
	color: #e8e8e8;
}

/* --------------------------------------------------------------------------
   Fascia "I nostri servizi" (riga con immagine di sfondo, classe st-band--services)
   Il colore della velatura sta nel CSS personalizzato del tema.
   -------------------------------------------------------------------------- */
.st-band--services {
	padding-top: 64px;
	padding-bottom: 67px;
	background-size: cover !important;
	background-position: center !important;
}

.st-band--services::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.st-band--services > .wpb_column {
	position: relative;
	z-index: 1;
}

.st-services {
	margin-top: 70px;
}

.st-service {
	text-align: center;
}

.st-service .st-service-icon,
.st-service .st-service-icon .vc_figure,
.st-service .st-service-icon .vc_single_image-wrapper {
	display: block;
	text-align: center;
}

.st-service .st-service-icon .vc_single_image-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 95px;
}

.st-service .st-service-icon img {
	width: auto;
	height: auto;
	max-height: 95px;
}

.st-service-title,
.st-service-title :is(h3, h4, p) {
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 27px;
	letter-spacing: -.44px;
	color: #222;
}

.st-service .st-service-title {
	max-width: 228px;
	margin: 20px auto 0;
}

.st-service-text,
.st-service-text p {
	max-width: 195px;
	margin: 0 auto;
	font-family: var(--st-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 20px;
	color: #222;
}

.st-service .st-service-text {
	margin-top: 18px;
}

.st-band--services .st-services-btn {
	margin-top: 34px;
}

/* --------------------------------------------------------------------------
   Partner: titoli e loghi [st_brands]
   -------------------------------------------------------------------------- */
.st-partner-title,
.st-partner-title :is(h2, h3, p) {
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 30px;
	font-weight: 500;
	line-height: 55px;
	letter-spacing: -.6px;
	text-align: center;
	color: var(--st-blu);
}

.st-brands {
	--st-car-gap: 20px;
	margin-top: 36px;
	padding-inline: 96px;
}

.st-brands .st-car-track {
	align-items: center;
}

.st-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
}

.st-brand a {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

.st-brand img {
	display: block;
	width: auto;
	max-width: min(220px, 100%);
	height: auto;
	max-height: 90px;
	object-fit: contain;
}

.st-brand-name {
	font-family: var(--st-font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--st-blu);
}

.st-brands.st-carousel .st-car-nav {
	top: 50%;
	margin-top: -17px;
	background: var(--st-azzurro);
	color: var(--st-blu);
}

.st-brands.st-carousel .st-car-nav--prev {
	left: 6px;
}

.st-brands.st-carousel .st-car-nav--next {
	right: 6px;
}

.st-brands.st-carousel .st-car-nav:hover {
	background: var(--st-blu);
	color: #fff;
}

.st-sec--partner .vc_separator {
	margin: 52px 0 41px;
}

.st-sec--partner .st-partner-btn {
	margin-top: 54px;
}

/* --------------------------------------------------------------------------
   Chi e' Sartelco: immagine con angolo tagliato + testo
   -------------------------------------------------------------------------- */
.st-chi-row {
	margin-top: 66px;
}

.st-img-cut-tl img {
	clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px);
}

.st-chi-row .st-chi-img .vc_single_image-wrapper,
.st-chi-row .st-chi-img .vc_figure {
	display: block;
}

.st-chi-row .st-chi-img img {
	display: block;
	width: 100%;
	height: 402px;
	object-fit: cover;
}

.st-chi-row .st-chi-col-img > .vc_column-inner {
	padding-left: 28px;
	padding-right: 54px;
}

.st-chi-row .st-chi-col-text > .vc_column-inner {
	padding-top: 55px;
	padding-left: 53px;
}

.st-chi-row .st-band-text {
	max-width: 514px;
}

.st-chi-row .wd-button-wrapper {
	margin-top: 50px;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Reparto tecnico: fascia grigia con testo e form (Contact Form 7)
   -------------------------------------------------------------------------- */
/* la fascia prosegue dietro il footer, cosi' il suo angolo tagliato lascia vedere il grigio */
.st-band--form {
	margin-bottom: -130px;
	padding-top: 89px;
	padding-bottom: 176px;
}

.wd-footer {
	position: relative;
	z-index: 2;
}

/* i loghi del footer sono caricati in ritardo: senza misure riservate la pagina
   si allunga di colpo quando compaiono */
.wd-footer img[src$="sartelco-holding-logo.svg"] {
	width: 207px;
	height: 49px;
}

.wd-footer img[src$="sartelco-sistemi-logo.svg"] {
	width: 171px;
	height: 58px;
}

.st-band--form .st-form-intro-col > .vc_column-inner {
	padding-top: 57px;
	padding-left: 28px;
}

.st-form-title,
.st-form-title :is(h2, h3, p) {
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 38px;
	font-weight: 500;
	line-height: 55px;
	letter-spacing: -.76px;
	color: #222;
}

.st-band--form .st-band-text {
	max-width: 329px;
	margin-top: 24px;
}

.st-form-card > .vc_column-inner {
	padding: 0 0 0 30px;
}

.st-form-card > .vc_column-inner > .wpb_wrapper {
	padding: 40px 39px 51px;
	background: #fff;
}

.st-form-card-title,
.st-form-card-title :is(h2, h3, p) {
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 32px;
	font-weight: 500;
	line-height: 46px;
	letter-spacing: -.64px;
	color: #222;
}

.st-form-card .st-band-text {
	margin-top: 10px;
}

.st-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 29px 16px;
	margin-top: 38px;
}

.st-form p {
	margin: 0;
}

.st-form .st-form-full {
	grid-column: 1 / -1;
}

.st-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	height: 40px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #e0e0e0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--st-font-body);
	font-size: 14px;
	color: #222;
}

.st-form .wpcf7-form-control.wpcf7-textarea {
	height: 105px;
	min-height: 0;
	padding-top: 8px;
	resize: vertical;
}

.st-form :is(input, textarea)::placeholder {
	color: #999;
	opacity: 1;
}

.st-form :is(input, textarea):focus {
	border-bottom-color: var(--st-blu);
}

.st-form-foot {
	display: flex;
	grid-column: 1 / -1;
	align-items: flex-start;
	gap: 89px;
	margin-top: 21px;
}

.st-form .st-form-foot input[type="submit"] {
	flex: 0 0 auto;
	min-height: 50px;
	padding: 17px 25px;
	border: 1px solid var(--st-blu);
	border-radius: 0;
	background: var(--st-blu);
	font-family: var(--st-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
}

.st-form .st-form-foot input[type="submit"]:disabled {
	opacity: 1 !important;
}

.st-form .st-form-foot input[type="submit"]:hover {
	background: #fff;
	color: var(--st-blu);
}

.st-form-privacy {
	font-family: var(--st-font-body);
	max-width: 411px;
	margin-top: -5px;
	font-size: 13px;
	line-height: 20px;
	color: #999;
}

.st-form-privacy strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.st-form-privacy .wpcf7-list-item {
	margin: 0;
}

.st-form-privacy :is(label, span) {
	color: #999;
}

.st-form-privacy a {
	color: inherit;
	text-decoration: underline;
}

.st-form .wpcf7-spinner {
	position: absolute;
}

/* --------------------------------------------------------------------------
   Schermi stretti
   -------------------------------------------------------------------------- */
@media (max-width: 1320px) {
	.st-apps.st-carousel .st-car-nav--prev {
		left: -17px;
	}

	.st-apps.st-carousel .st-car-nav--next {
		right: -17px;
	}
}

@media (max-width: 1199px) {
	.st-band-title,
	.st-band-title :is(h2, h3, p) {
		font-size: 36px;
		line-height: 42px;
	}

	.st-carousel {
		--st-car-gap: 24px;
	}

	.st-post-title {
		font-size: 22px;
		line-height: 29px;
	}

	.st-chi-row .st-chi-col-img > .vc_column-inner,
	.st-band--form .st-form-intro-col > .vc_column-inner {
		padding-left: 15px;
	}

	.st-chi-row .st-chi-col-text > .vc_column-inner {
		padding-left: 30px;
	}
}

@media (max-width: 1024px) {
	.st-band-cut-tl {
		clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px);
	}

	.st-band-cut-br {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), calc(100% - 70px) 100%, 0 100%);
	}

	.st-band--apps,
	.st-band--apps.st-band--dark {
		padding-top: 48px;
		padding-bottom: 56px;
	}

	.st-band--apps {
		margin-top: 48px;
	}

	.st-band--apps .st-apps,
	.st-band--apps.st-band--dark .st-apps {
		margin-top: 40px;
	}

	.st-band--apps .st-band-title,
	.st-band--apps .st-band-text {
		max-width: none;
	}

	.st-services {
		margin-top: 44px;
	}

	.st-service {
		margin-bottom: 40px;
	}

	.st-posts a.st-post-card {
		height: 420px;
	}

	.st-post-body {
		padding: 0 22px 26px;
	}

	.st-brands {
		padding-inline: 56px;
	}

	.st-chi-row .st-chi-col-text > .vc_column-inner {
		padding-top: 34px;
		padding-left: 15px;
	}

	.st-chi-row .st-chi-img img {
		height: auto;
		aspect-ratio: 514 / 402;
	}

	.st-band--form {
		padding-top: 64px;
		padding-bottom: 154px;
	}

	.st-band--form .st-form-intro-col > .vc_column-inner {
		padding-top: 0;
	}

	.st-form-card > .vc_column-inner {
		margin-top: 36px;
	}
}

@media (max-width: 768px) {
	.st-section-eyebrow {
		gap: 16px;
	}

	.st-section-eyebrow::before,
	.st-section-eyebrow::after {
		flex-basis: 44px;
	}

	.st-section-head .st-section-title {
		margin-top: 22px;
		font-size: 27px;
		line-height: 35px;
	}

	.st-section-head .st-section-title br {
		display: none;
	}

	.st-band-title,
	.st-band-title :is(h2, h3, p) {
		font-size: 30px;
		line-height: 36px;
	}

	.st-band-text,
	.st-band-text p {
		font-size: 17px;
		line-height: 26px;
	}

	/* una scheda intera e l'inizio della successiva: si capisce che scorre */
	.st-apps.st-carousel {
		--st-car-v: 1.25;
		--st-car-gap: 18px;
	}

	.st-apps.st-carousel .st-car-nav {
		display: none;
	}

	.st-sec--news {
		padding-top: 30px;
		padding-bottom: 64px;
	}

	.st-posts {
		flex-direction: column;
	}

	.st-posts a.st-post-card {
		flex: 0 0 auto;
		height: 360px;
	}

	.st-brands.st-carousel {
		--st-car-v: 1;
	}

	/* su telefono si vede un logo per volta: le frecce servono sempre */
	.st-brands.st-carousel .st-car-nav {
		display: block;
	}

	/* servizi a due per riga */
	.st-services {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.st-services > .st-service {
		float: none;
		width: 50%;
	}

	.st-service-title,
	.st-service-title :is(h3, h4, p) {
		font-size: 19px;
		line-height: 24px;
	}

	.st-service-text,
	.st-service-text p {
		font-size: 16px;
	}

	.st-service .st-service-icon .vc_single_image-wrapper {
		height: 80px;
	}

	.st-service .st-service-icon img {
		max-height: 76px;
	}

	.st-brands {
		padding-inline: 48px;
	}

	.st-sec--partner {
		padding-top: 56px;
		padding-bottom: 64px;
	}

	.st-partner-title,
	.st-partner-title :is(h2, h3, p) {
		font-size: 23px;
		line-height: 32px;
	}

	.st-chi-row {
		margin-top: 36px;
	}

	.st-sec--chi {
		padding-bottom: 60px;
	}

	.st-form-title,
	.st-form-title :is(h2, h3, p) {
		font-size: 28px;
		line-height: 38px;
	}

	.st-form-card > .vc_column-inner > .wpb_wrapper {
		padding: 28px 22px 30px;
	}

	.st-form {
		display: block;
	}

	.st-form > p {
		margin-bottom: 18px;
	}

	.st-form-foot {
		flex-direction: column-reverse;
		gap: 18px;
	}

	.st-form-privacy {
		margin-top: 0;
	}
}

/* ==========================================================================
   PAGINE ISTITUZIONALI (Azienda, Servizi, Contatti, Brand)
   Misure dal Figma, tavole a 1440: About 4239:425, Servizi 4239:1209, Contatti 4239:773
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero di pagina (riga con immagine di sfondo, classe st-page-hero)
   Occhiello: st-hero-eyebrow / titolo: st-page-h1 / testo: st-hero-lead
   Variante bassa con il solo titolo: st-page-hero--short
   -------------------------------------------------------------------------- */
.st-page-hero {
	position: relative;
	margin-top: -40px;
	padding-top: 77px;
	padding-bottom: 70px;
	background-size: cover !important;
	background-position: center !important;
}

.st-page-hero--short {
	padding-top: 135px;
	padding-bottom: 137px;
}

/* velatura: struttura qui, colore nel CSS personalizzato del tema */
.st-page-hero::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.st-page-hero > .wpb_column {
	position: relative;
	z-index: 1;
}

.st-page-hero > .vc_column_container > .vc_column-inner,
.st-page-hero + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner {
	padding-top: 0;
}

.st-page-hero .wpb_content_element {
	margin-bottom: 0;
}

.st-page-hero .st-hero-eyebrow,
.st-page-hero .st-hero-eyebrow p {
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 60px;
	letter-spacing: -.48px;
	text-transform: uppercase;
	color: #fff;
}

.st-page-hero .st-page-h1,
.st-page-hero .st-page-h1 :is(h1, h2, p) {
	max-width: 672px;
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: -.96px;
	color: #fff;
}

.st-page-hero .st-hero-eyebrow + .st-page-h1 {
	margin-top: 9px;
}

.st-page-hero .st-hero-lead,
.st-page-hero .st-hero-lead p {
	max-width: 622px;
	margin: 0;
	font-family: var(--st-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: #fff;
}

.st-page-hero .st-hero-lead {
	margin-top: 31px;
}

/* --------------------------------------------------------------------------
   Titoli e testi delle pagine
   -------------------------------------------------------------------------- */
.st-title,
.st-title :is(h2, h3, p) {
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 38px;
	font-weight: 500;
	line-height: 50px;
	letter-spacing: -.76px;
	color: var(--st-blu);
}

.st-title--36,
.st-title--36 :is(h2, h3, p) {
	font-size: 36px;
	letter-spacing: -.72px;
}

.st-title--center,
.st-title--center :is(h2, h3, p) {
	text-align: center;
}

.st-lead-bold,
.st-lead-bold p {
	margin: 0;
	font-family: var(--st-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--st-body);
}

.st-band-text p + p {
	margin-top: 28px;
}

.st-band--dark .st-title,
.st-band--dark .st-title :is(h2, h3, p) {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Sezioni: spazi verticali (classi sulla riga)
   -------------------------------------------------------------------------- */
.st-sec--split {
	padding-top: 84px;
	padding-bottom: 80px;
}

.st-sec--twocol {
	padding-top: 76px;
	padding-bottom: 72px;
}

.st-band--text {
	padding-top: 73px;
	padding-bottom: 100px;
}

.st-sec--storia {
	padding-top: 88px;
	padding-bottom: 96px;
}

.st-sec--panels {
	padding-bottom: 130px;
}

.st-sec--brandpage {
	padding-top: 76px;
	padding-bottom: 40px;
}

.st-sec--brandpage + .vc_row-full-width + .st-sec--brandpage,
.st-sec--brandpage + .st-sec--brandpage {
	padding-top: 20px;
	padding-bottom: 110px;
}

/* due colonne di testo sotto un titolo centrato */
.st-twocol-row {
	margin-top: 41px;
}

.st-band--text .st-twocol-row > .vc_col-sm-5 > .vc_column-inner {
	padding-left: 94px;
	padding-right: 2px;
}

.st-band--text .st-twocol-row > .vc_col-sm-7 > .vc_column-inner {
	padding-left: 62px;
	padding-right: 91px;
}

.st-sec--twocol .st-twocol-row {
	margin-top: 48px;
}

.st-sec--twocol .st-twocol-row > .vc_column_container:first-child > .vc_column-inner {
	padding-right: 40px;
}

.st-sec--twocol .st-twocol-row > .vc_column_container:last-child > .vc_column-inner {
	padding-left: 33px;
}

/* --------------------------------------------------------------------------
   Immagine + testo (classi sulle colonne: st-split-img / st-split-text)
   -------------------------------------------------------------------------- */
.st-split-img .vc_single_image-wrapper,
.st-split-img .vc_figure {
	display: block;
}

.st-split-img img {
	display: block;
	width: 100%;
	height: 450px;
	object-fit: cover;
}

.st-split-img.st-img-cut-tl img {
	clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%, 0 90px);
}

.st-split-img.st-split-img--contain img {
	height: auto;
	clip-path: none;
}

.st-split-text > .vc_column-inner {
	padding-left: 20px;
}

.st-split-text .st-band-text {
	margin-top: 19px;
}

.st-split-text .wd-button-wrapper {
	margin-top: 28px;
	text-align: left;
}

.st-split--storia {
	margin-top: 50px;
}

.st-split--storia .st-split-img > .vc_column-inner {
	padding-left: 47px;
	padding-right: 0;
}

.st-split--storia .st-split-img img {
	height: 445px;
}

.st-split--storia .st-split-text > .vc_column-inner {
	padding-top: 39px;
	padding-left: 46px;
}

.st-split--storia .st-split-text .st-band-text {
	max-width: 514px;
	margin-top: 0;
}

/* testo a sinistra, immagine a destra */
.st-split--reverse .st-split-text > .vc_column-inner {
	padding-top: 32px;
	padding-right: 60px;
}

.st-split--reverse .st-split-img > .vc_column-inner {
	padding-left: 31px;
}

.st-sec--split.st-sec--split-flush {
	padding-top: 0;
	padding-bottom: 91px;
}

.st-split--reverse .st-split-img img {
	height: 445px;
}

.st-split--reverse .st-split-text .st-band-text {
	margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Riquadri colorati su colonne normali (classe sulla colonna: st-panel)
   Colore: st-panel--blue / st-panel--green. Immagine: sfondo della colonna.
   Taglio: st-panel-cut-tl / st-panel-cut-br. Formati: st-panel--mini / st-panel--rich
   -------------------------------------------------------------------------- */
.st-panel {
	--st-panel-color: var(--st-blu);
	--st-panel-cut: 86px;
}

.st-panel--blue {
	--st-panel-color: #28a0dd;
}

.st-panel--green {
	--st-panel-color: #6cb632;
}

.st-panel > .vc_column-inner {
	position: relative;
	height: 100%;
	background-color: var(--st-panel-color);
	background-size: cover !important;
	background-position: center !important;
	color: #fff;
}

/* il colore vela l'immagine di sfondo della colonna */
.st-panel > .vc_column-inner::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background: var(--st-panel-color);
	opacity: .86;
}

.st-panel > .vc_column-inner > .wpb_wrapper {
	position: relative;
}

.st-panel.st-panel-cut-tl > .vc_column-inner {
	clip-path: polygon(var(--st-panel-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--st-panel-cut));
}

.st-panel.st-panel-cut-br > .vc_column-inner {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--st-panel-cut)), calc(100% - var(--st-panel-cut)) 100%, 0 100%);
}

.st-panel .wpb_content_element,
.st-panel .wd-button-wrapper {
	margin-bottom: 0;
}

.st-panel .st-panel-icon,
.st-panel .st-panel-icon .vc_figure,
.st-panel .st-panel-icon .vc_single_image-wrapper {
	display: block;
	text-align: center;
}

.st-panel-title,
.st-panel-title :is(h2, h3, p) {
	margin: 0;
	font-family: var(--st-font-display);
	font-weight: 500;
	color: #fff;
}

/* formato piccolo: icona, titolo, pulsante */
.st-panels-mini {
	margin-inline: -8.5px;
}

.st-panels-mini > .st-panel {
	padding-inline: 0;
}

.st-panels-mini > .st-panel > .vc_column-inner {
	margin-inline: 8.5px;
}

.st-panel--mini {
	--st-panel-cut: 46px;
}

.st-panel--mini > .vc_column-inner {
	min-height: 365px;
	padding: 55px 12px 44px;
	text-align: center;
}

.st-panel--mini .st-panel-icon img {
	width: auto;
	height: 101px;
}

.st-panel--mini .st-panel-title,
.st-panel--mini .st-panel-title :is(h2, h3, p) {
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -.48px;
}

.st-panel--mini .st-panel-title {
	margin-top: 34px;
}

.st-panel--mini .wd-button-wrapper {
	margin-top: 51px;
}

/* formato grande: icona, titolo, testo con elenchi, pulsanti */
.st-panels-rich {
	margin-inline: -13.5px;
}

.st-panels-rich > .st-panel {
	padding-inline: 0;
}

.st-panels-rich > .st-panel > .vc_column-inner {
	margin-inline: 13.5px;
	height: auto;
}

/* griglia interna: il testo occupa lo spazio che resta, i pulsanti stanno in fondo affiancati */
.st-panel--rich > .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto 1fr auto;
	column-gap: 16px;
	height: 100%;
}

.st-panel--rich > .vc_column-inner > .wpb_wrapper > * {
	grid-column: 1 / -1;
}

.st-panel--rich > .vc_column-inner > .wpb_wrapper > .wd-button-wrapper {
	grid-column: auto;
	justify-self: start;
	margin-top: 50px;
}

.st-panel--rich > .vc_column-inner > .wpb_wrapper > .wd-button-wrapper:not(.st-btn-outline) {
	margin-left: 52px;
}

.st-panel--rich > .vc_column-inner {
	padding: 42px 51px 47px;
}

.st-panel--rich .st-panel-icon img {
	width: auto;
	height: 94px;
}

.st-panel--rich .st-panel-title,
.st-panel--rich .st-panel-title :is(h2, h3, p) {
	font-size: 36px;
	line-height: 1.15;
}

.st-panel--rich .st-panel-title {
	max-width: 488px;
	margin-top: 27px;
}

.st-panel-text,
.st-panel-text :is(p, li) {
	font-family: var(--st-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -.16px;
	color: #fff;
}

.st-panel-text p {
	margin: 0 0 22px;
	line-height: 21px;
}

.st-panel-text p:last-of-type {
	margin-bottom: 0;
}

.st-panel-text strong {
	font-weight: 700;
	color: #fff;
}

.st-panel-text ul {
	margin: 0;
	padding-left: 24px;
	list-style: disc;
}

.st-panel-text li {
	margin: 0;
	letter-spacing: 0;
}

.st-panel--rich .st-panel-text {
	margin-top: 34px;
}

/* fascia blu con testo e riquadri piccoli */
.st-band--about {
	padding-top: 86px;
	padding-bottom: 107px;
}

.st-band--about .st-band-title {
	max-width: 533px;
	padding-left: 13px;
}

.st-band--about .st-band-text {
	max-width: 556px;
	margin-top: 31px;
	padding-left: 13px;
}

.st-band--about .st-panels-col > .vc_column-inner {
	padding-top: 10px;
}

/* fascia grigia con immagine e testo (documentazione) */
.st-band--docs {
	margin-bottom: -130px;
	padding-top: 102px;
	padding-bottom: 240px;
}

.st-band--docs .st-split-row {
	margin-top: 31px;
}

.st-band--docs .st-split-text > .vc_column-inner {
	padding-top: 69px;
	padding-left: 58px;
}

.st-band--docs .st-split-text .st-band-text {
	max-width: 514px;
	margin-top: 0;
}

.st-band--docs .st-split-text .wd-button-wrapper {
	margin-top: 58px;
}

/* --------------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------------- */
.st-sec--map {
	padding-top: 73px;
	padding-bottom: 47px;
}

.st-sec--map .wpb_gmaps_widget,
.st-sec--map .wpb_content_element {
	margin-bottom: 0;
}

.st-sec--map .wpb_gmaps_widget .wpb_wrapper {
	padding: 0;
	background: none;
}

.st-sec--map .wpb_map_wraper iframe {
	display: block;
	width: 100%;
	height: 508px;
	border: 0;
}

.st-sec--map > .vc_col-sm-8 > .vc_column-inner {
	padding-right: 0;
}

.st-contact-info > .vc_column-inner {
	padding-top: 86px;
	padding-left: 51px;
}

.st-contact-info .wd-social-icons {
	margin-top: 16px;
	text-align: left;
}

.st-contact-info .wd-social-icons + .wd-button-wrapper {
	margin-top: 21px;
}

.st-contact-info .st-band-text strong {
	font-weight: 700;
	color: var(--st-body);
}

.st-contact-info .wd-button-wrapper {
	margin-top: 61px;
	text-align: left;
}

.st-band--form.st-band--form-contatti {
	padding-top: 116px;
	padding-bottom: 220px;
}

.st-band--form-contatti .st-form-intro-col > .vc_column-inner {
	padding-top: 24px;
	padding-left: 20px;
	padding-right: 30px;
}

.st-band--form-contatti .st-band-text {
	max-width: 468px;
	margin-top: 29px;
}

.st-band--form-contatti .st-form-card > .vc_column-inner > .wpb_wrapper {
	padding-top: 36px;
	padding-bottom: 57px;
}

.st-band--form-contatti .st-form {
	margin-top: 0;
}

.st-form-radio {
	grid-column: 1 / -1;
	font-family: var(--st-font-body);
	font-size: 14px;
	line-height: 1;
	color: #999;
}

.st-form-radio .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	margin-top: 13px;
}

.st-form-radio .wpcf7-list-item {
	margin: 0;
}

.st-form-radio .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--st-body);
	cursor: pointer;
}

.st-form-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--st-blu);
}

/* --------------------------------------------------------------------------
   Pagina Brand: griglia dei loghi [st_brands layout="grid"]
   -------------------------------------------------------------------------- */
.st-brands-grid {
	display: grid;
	grid-template-columns: repeat(var(--st-brand-cols, 4), minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.st-brands-grid .st-brand-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 170px;
	padding: 24px 28px;
	border: 1px solid var(--st-stroke);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.st-brands-grid a.st-brand-cell:hover {
	border-color: var(--st-blu);
	box-shadow: 0 8px 24px rgba(0, 48, 91, .08);
}

.st-brands-grid .st-brand-name {
	font-family: var(--st-font-display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--st-blu);
}

.st-brands-grid .st-brand-cell img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 96px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Schermi stretti
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.st-page-hero .st-page-h1,
	.st-page-hero .st-page-h1 :is(h1, h2, p) {
		font-size: 40px;
		line-height: 50px;
	}

	.st-title,
	.st-title :is(h2, h3, p) {
		font-size: 32px;
		line-height: 42px;
	}

	.st-panel--rich > .vc_column-inner {
		padding-inline: 32px;
	}

	.st-panel--rich .st-panel-title,
	.st-panel--rich .st-panel-title :is(h2, h3, p) {
		font-size: 30px;
	}

	.st-panel--rich > .vc_column-inner > .wpb_wrapper > .wd-button-wrapper:not(.st-btn-outline) {
		margin-left: 0;
	}

	.st-band--text .st-twocol-row > .vc_col-sm-5 > .vc_column-inner,
	.st-band--text .st-twocol-row > .vc_col-sm-7 > .vc_column-inner {
		padding-inline: 15px;
	}

	.st-brands-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.st-page-hero {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.st-page-hero--short {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.st-sec--split,
	.st-sec--twocol,
	.st-sec--storia {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.st-band--text,
	.st-band--about {
		padding-top: 56px;
		padding-bottom: 64px;
	}

	.st-split-img img,
	.st-split--storia .st-split-img img,
	.st-split--reverse .st-split-img img {
		height: auto;
		aspect-ratio: 575 / 450;
	}

	.st-sec--map > .vc_col-sm-8 > .vc_column-inner {
		padding-right: 15px;
	}

	.st-split-text > .vc_column-inner,
	.st-split--storia .st-split-text > .vc_column-inner,
	.st-split--storia .st-split-img > .vc_column-inner,
	.st-split--reverse .st-split-text > .vc_column-inner,
	.st-split--reverse .st-split-img > .vc_column-inner,
	.st-band--docs .st-split-text > .vc_column-inner,
	.st-sec--twocol .st-twocol-row > .vc_column_container:first-child > .vc_column-inner,
	.st-sec--twocol .st-twocol-row > .vc_column_container:last-child > .vc_column-inner {
		padding: 28px 15px 0;
	}

	.st-split--reverse .st-split-text > .vc_column-inner,
	.st-split--storia .st-split-img > .vc_column-inner {
		padding-top: 0;
	}

	.st-band--about .st-band-title,
	.st-band--about .st-band-text {
		max-width: none;
		padding-left: 0;
	}

	.st-band--about .st-panels-col > .vc_column-inner {
		padding-top: 40px;
		padding-left: 15px;
	}

	.st-sec--panels {
		padding-bottom: 64px;
	}

	.st-band--docs {
		padding-top: 64px;
		padding-bottom: 200px;
	}

	.st-contact-info > .vc_column-inner {
		padding-top: 36px;
		padding-left: 15px;
	}

	.st-contact-info .wd-button-wrapper {
		margin-top: 28px;
	}

	.st-sec--map .wpb_map_wraper iframe {
		height: 380px;
	}

	.st-band--form.st-band--form-contatti {
		padding-top: 64px;
		padding-bottom: 154px;
	}

	.st-band--form-contatti .st-form-intro-col > .vc_column-inner {
		padding: 0 15px;
	}
}

@media (max-width: 768px) {
	.st-page-hero .st-hero-eyebrow,
	.st-page-hero .st-hero-eyebrow p {
		font-size: 18px;
		line-height: 34px;
	}

	.st-page-hero .st-page-h1,
	.st-page-hero .st-page-h1 :is(h1, h2, p) {
		font-size: 30px;
		line-height: 38px;
	}

	.st-page-hero .st-hero-lead,
	.st-page-hero .st-hero-lead p {
		font-size: 17px;
		line-height: 25px;
	}

	.st-page-hero .st-hero-lead {
		margin-top: 20px;
	}

	.st-title,
	.st-title :is(h2, h3, p) {
		font-size: 27px;
		line-height: 35px;
	}

	.st-lead-bold,
	.st-lead-bold p {
		font-size: 18px;
		line-height: 26px;
	}

	.st-panel--rich > .vc_column-inner {
		padding: 34px 22px 36px;
	}

	.st-panel--rich > .vc_column-inner > .wpb_wrapper {
		display: block;
	}

	.st-panel--rich > .vc_column-inner > .wpb_wrapper > .wd-button-wrapper {
		display: inline-block;
		margin: 30px 12px 0 0;
		vertical-align: top;
	}

	.st-panel--rich > .vc_column-inner > .wpb_wrapper > .wd-button-wrapper + .wd-button-wrapper {
		margin-top: 12px;
	}

	.st-panel--rich .st-panel-title,
	.st-panel--rich .st-panel-title :is(h2, h3, p) {
		font-size: 26px;
	}

	.st-panel--mini > .vc_column-inner {
		min-height: 0;
		padding: 36px 12px 34px;
	}

	.st-panels-mini > .st-panel + .st-panel {
		margin-top: 17px;
	}

	.st-panel--mini .wd-button-wrapper {
		margin-top: 28px;
	}

	.st-brands-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.st-brands-grid .st-brand-cell {
		height: 120px;
		padding: 16px;
	}

	.st-form-radio .wpcf7-radio {
		flex-direction: column;
	}
}

/* la fascia con l'angolo tagliato sale sopra la fascia grigia che la precede,
   cosi' dal taglio si vede il grigio e non il bianco della pagina */
.st-band--text:has(+ .vc_row-full-width + .st-band-cut-tl) {
	padding-bottom: 200px;
}

.st-band--text + .vc_row-full-width + .st-band-cut-tl {
	top: -100px;
	margin-bottom: -100px;
}

.st-band-text strong {
	font-weight: 700;
	color: inherit;
}

.st-band-text a {
	color: inherit;
}

.st-band-text a:hover {
	color: var(--st-blu);
}

/* sotto i 768px le colonne di WPBakery vanno una sotto l'altra */
@media (max-width: 767px) {
	.st-panels-rich > .st-panel + .st-panel {
		margin-top: 28px;
	}

	.st-band--about .st-panels-mini {
		margin-top: 30px;
	}

	.st-twocol-row > .vc_column_container + .vc_column_container > .vc_column-inner {
		padding-top: 24px;
	}

	.st-band--text .st-twocol-row,
	.st-sec--twocol .st-twocol-row {
		margin-top: 24px;
	}

	.st-band.st-band--form > .st-form-card > .vc_column-inner {
		margin-top: 32px;
		padding-right: 15px;
		padding-left: 15px;
	}

	.st-band--docs .st-split-text > .vc_column-inner {
		padding-top: 24px;
	}

	.st-band--docs .st-split-text .wd-button-wrapper {
		margin-top: 28px;
	}

	.st-contact-info > .vc_column-inner {
		padding-top: 28px;
	}

	.st-sec--map .wpb_map_wraper iframe {
		height: 300px;
	}
}

/* --------------------------------------------------------------------------
   Area download [st_downloads]
   -------------------------------------------------------------------------- */
.st-sec--download {
	padding-top: 64px;
	padding-bottom: 110px;
}

.st-dl-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-bottom: 46px;
}

.st-dl-search {
	flex: 1 1 320px;
	max-width: 520px;
	margin: 0;
}

.st-dl-search input[type="search"] {
	width: 100%;
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--st-card-border);
	border-radius: 0;
	background: #fff;
	font-family: var(--st-font-body);
	font-size: 16px;
	color: #222;
}

.st-dl-search input[type="search"]:focus {
	border-color: var(--st-blu);
}

.st-dl-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.st-dl-nav a {
	padding: 12px 18px;
	border: 1px solid var(--st-blu);
	font-family: var(--st-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--st-blu);
	transition: background-color .2s ease, color .2s ease;
}

.st-dl-nav a:hover {
	background: var(--st-blu);
	color: #fff;
}

.st-dl-group {
	scroll-margin-top: 110px;
}

.st-dl-group + .st-dl-group {
	margin-top: 70px;
}

.st-dl-group-title {
	margin: 0 0 8px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--st-blu);
	font-family: var(--st-font-display);
	font-size: 36px;
	font-weight: 500;
	line-height: 46px;
	letter-spacing: -.72px;
	color: var(--st-blu);
}

.st-dl-sub-title {
	margin: 34px 0 12px;
	font-family: var(--st-font-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -.44px;
	color: #222;
}

.st-dl-prod {
	border-bottom: 1px solid var(--st-stroke);
}

.st-dl-prod > summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 44px 15px 0;
	position: relative;
	list-style: none;
	cursor: pointer;
}

.st-dl-prod > summary::-webkit-details-marker {
	display: none;
}

.st-dl-prod > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--st-blu);
	border-bottom: 2px solid var(--st-blu);
	transform: rotate(45deg);
	transition: transform .2s ease, margin-top .2s ease;
}

.st-dl-prod[open] > summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.st-dl-prod-name {
	flex: 1 1 auto;
	font-family: var(--st-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
	color: var(--st-blu);
}

.st-dl-prod > summary:hover .st-dl-prod-name {
	color: #222;
}

.st-dl-count {
	flex: 0 0 auto;
	font-family: var(--st-font-body);
	font-size: 14px;
	line-height: 24px;
	color: #999;
	white-space: nowrap;
}

.st-dl-prod-body {
	padding: 4px 0 22px;
}

.st-dl .st-docs-list {
	columns: 2;
	column-gap: 40px;
}

.st-dl .st-docs-item {
	margin-bottom: 4px;
	break-inside: avoid;
}

.st-dl .st-docs-item a {
	align-items: flex-start;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
}

.st-dl .st-docs-icon {
	margin-top: 2px;
}

.st-dl-prod-link {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--st-font-display);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--st-blu);
}

.st-dl-prod-link:hover {
	color: #222;
}

.st-dl-empty {
	margin: 30px 0 0;
	font-family: var(--st-font-body);
	font-size: 18px;
	color: var(--st-body);
}

.st-dl [hidden] {
	display: none !important;
}

@media (max-width: 768px) {
	.st-sec--download {
		padding-top: 40px;
		padding-bottom: 70px;
	}

	.st-dl-tools {
		margin-bottom: 30px;
	}

	.st-dl-search {
		flex-basis: 100%;
		max-width: none;
	}

	.st-dl-group-title {
		font-size: 28px;
		line-height: 36px;
	}

	.st-dl-sub-title {
		font-size: 19px;
		line-height: 26px;
	}

	.st-dl-prod > summary {
		flex-wrap: wrap;
		gap: 0 12px;
	}

	.st-dl-prod-name {
		flex-basis: 100%;
		font-size: 16px;
	}

	.st-dl .st-docs-list {
		columns: 1;
	}
}

@media (max-width: 768px) {
	.st-dl-tools {
		display: block;
	}

	.st-dl-search {
		display: block;
	}

	.st-dl-nav {
		margin-top: 16px;
	}
}

/* ==========================================================================
   APPLICAZIONI: elenco (tavola 4239:1019) e scheda (tavola 4239:647)
   ========================================================================== */
.st-sec--app-intro {
	padding-top: 65px;
	padding-bottom: 89px;
}

.st-sec--app-intro > .vc_column_container:first-child > .vc_column-inner {
	padding-right: 8px;
}

.st-sec--app-intro > .vc_column_container:last-child > .vc_column-inner {
	padding-left: 33px;
}

.st-sec--app-grid {
	padding-bottom: 40px;
}

/* griglia [st_apps layout="grid"] */
.st-apps-grid {
	display: grid;
	grid-template-columns: repeat(var(--st-apps-cols, 3), minmax(0, 1fr));
	gap: 59px 19px;
}

.st-app-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.st-app-card-img {
	display: block;
	width: 100%;
	aspect-ratio: 387 / 263;
	overflow: hidden;
	background: #f2f2f2;
}

.st-app-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.st-app-card:hover .st-app-card-img img {
	transform: scale(1.04);
}

/* angoli tagliati: in alto a sinistra la prima di ogni riga, in basso a destra l'ultima */
@media (min-width: 1025px) {
	.st-apps-grid[style*="cols:3"] .st-app-card:nth-child(3n + 1) .st-app-card-img {
		clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%, 0 46px);
	}

	.st-apps-grid[style*="cols:3"] .st-app-card:nth-child(3n) .st-app-card-img {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
	}
}

.st-app-card-title {
	min-height: 60px;
	margin: 32px 0 0;
	font-family: var(--st-font-display);
	font-size: 27px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -.54px;
	color: var(--st-body);
}

.st-app-card-title a {
	color: inherit;
}

.st-app-card-title a:hover {
	color: var(--st-blu);
}

.st-app-card-text {
	max-width: 367px;
	margin: 28px 0 0;
	font-family: var(--st-font-body);
	font-size: 18px;
	line-height: 28px;
	color: var(--st-body);
}

.st-app-card-more {
	margin-top: auto;
	padding-top: 27px;
	font-family: var(--st-font-body);
	font-size: 18px;
	line-height: 28px;
	color: var(--st-body);
}

.st-app-card-more:hover {
	color: var(--st-blu);
}

/* scheda */
.st-app-single .st-app-header {
	padding-top: 13px;
}

.st-app-breadcrumb {
	font-family: var(--st-font-body);
	font-size: 14px;
	line-height: 28px;
	color: var(--st-body);
}

.st-app-breadcrumb a {
	color: inherit;
}

.st-app-breadcrumb a:hover {
	color: var(--st-blu);
}

.st-app-breadcrumb strong {
	font-weight: 700;
	color: #474747;
}

.st-app-breadcrumb-sep {
	margin: 0 7px;
}

.st-app-h1 {
	margin: 35px 0 0;
	font-family: var(--st-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: -.96px;
	color: var(--st-blu);
}

.st-app-single .wpb_content_element,
.st-app-single .wd-button-wrapper {
	margin-bottom: 0;
}

.st-app-lead,
.st-app-lead p {
	margin: 0;
	font-family: var(--st-font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: #222;
}

.st-app-row--lead {
	padding-top: 33px;
}

.st-app-row {
	padding-top: 55px;
}

.st-app-row--media {
	padding-top: 35px;
}

.st-app-row--media + .st-app-row {
	padding-top: 63px;
}

.st-app-media,
.st-app-media .vc_figure,
.st-app-media .vc_single_image-wrapper {
	display: block;
	text-align: center;
}

.st-app-media img {
	display: block;
	width: 100%;
	height: auto;
}

.st-app-media--narrow img {
	max-width: 1170px;
	margin-inline: auto;
}

.st-app-h2,
.st-app-h2 :is(h2, h3, p) {
	margin: 0;
	font-family: var(--st-font-display);
	font-size: 32px;
	font-weight: 500;
	line-height: 40px;
	letter-spacing: -.64px;
	color: var(--st-blu);
}

.st-app-single .st-app-h2 {
	min-height: 80px;
	margin-bottom: 31px;
}

.st-app-row .st-band-text p + p {
	margin-top: 28px;
}

.st-app-row--products {
	padding-top: 59px;
	padding-bottom: 68px;
}

@media (max-width: 1199px) {
	.st-app-h1 {
		font-size: 40px;
		line-height: 50px;
	}

	.st-app-card-title {
		font-size: 23px;
		line-height: 28px;
	}
}

@media (max-width: 1024px) {
	.st-apps-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px 19px;
	}

	.st-sec--app-intro {
		padding-top: 44px;
		padding-bottom: 56px;
	}
}

@media (max-width: 767px) {
	.st-apps-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-app-card-title {
		min-height: 0;
		margin-top: 22px;
	}

	.st-app-card-text {
		max-width: none;
		margin-top: 14px;
	}

	.st-app-card-more {
		padding-top: 14px;
	}

	.st-sec--app-intro > .vc_column_container:first-child > .vc_column-inner,
	.st-sec--app-intro > .vc_column_container:last-child > .vc_column-inner {
		padding-right: 15px;
		padding-left: 15px;
	}

	.st-sec--app-intro > .vc_column_container + .vc_column_container > .vc_column-inner {
		padding-top: 20px;
	}

	.st-app-h1 {
		margin-top: 18px;
		font-size: 30px;
		line-height: 38px;
	}

	.st-app-lead,
	.st-app-lead p {
		font-size: 17px;
		line-height: 25px;
	}

	.st-app-row {
		padding-top: 36px;
	}

	.st-app-row > .vc_column_container + .vc_column_container > .vc_column-inner {
		padding-top: 30px;
	}

	.st-app-h2,
	.st-app-h2 :is(h2, h3, p) {
		font-size: 25px;
		line-height: 32px;
	}

	.st-app-single .st-app-h2 {
		min-height: 0;
		margin-bottom: 16px;
	}
}

@media (max-width: 767px) {
	.st-sec--app-intro > .vc_column_container + .vc_column_container .st-band-text {
		margin-top: 20px;
	}
}

/* elenchi puntati nei testi delle schede applicazione */
.st-app-row .st-band-text ul {
	margin: 14px 0 0;
	padding-left: 22px;
	list-style: disc;
}

.st-app-row .st-band-text li {
	margin: 0;
	font-family: var(--st-font-body);
	font-size: 18px;
	line-height: 28px;
	color: var(--st-body);
}

.st-app-row .st-band-text ul + p {
	margin-top: 28px;
}

.st-app-row .st-band-text strong {
	color: #474747;
}

/* sezione a tutta larghezza: l'elenco va su tre colonne */
.st-app-single .st-app-row--wide .st-app-h2 {
	min-height: 0;
}

.st-app-row--wide .st-band-text ul {
	columns: 3;
	column-gap: 40px;
}

.st-app-row--wide .st-band-text li {
	break-inside: avoid;
}

/* pagina Brand: titolo e testo di presentazione di ogni gruppo */
.st-brand-intro,
.st-brand-intro p {
	margin: 0;
	font-family: var(--st-font-body);
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	color: var(--st-body);
}

.st-brand-intro {
	max-width: 860px;
	margin: 18px auto 0;
}

.st-brand-intro p + p {
	margin-top: 14px;
}

@media (max-width: 1024px) {
	.st-app-row--wide .st-band-text ul {
		columns: 2;
	}
}

@media (max-width: 767px) {
	.st-app-row--wide .st-band-text ul {
		columns: 1;
	}
}
