/*
 * Base styles for the site's Elementor widgets (includes/widgets/).
 * Per-instance styles come from the widget settings and are written by
 * Elementor into the page CSS file (uploads/elementor/css/post-*.css).
 */

/* Clearfix: contains floated children (used on lists and their items). */
.kz-clr::before,
.kz-clr::after {
	content: " ";
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.kz-clr::after {
	clear: both;
}

/* Gap: an empty block of the configured height; no widget spacing. */
.elementor-widget.elementor-widget-cz_gap {
	margin-bottom: 0 !important;
}

.kz-gap {
	display: block;
}

.kz-gap::after {
	content: "";
	display: block;
	clear: both;
}

/* Title. The text cell sits in a table so the block shrinks to its text;
   icon / image and side lines sit next to it as cells. */
.kz-title {
	position: relative;
	z-index: 1;
}

.kz-title::before,
.kz-title::after {
	content: " ";
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.kz-title::after {
	clear: both;
}

.kz-title--center {
	text-align: center !important;
}

.kz-title--bg {
	z-index: 2;
}

.kz-title-content {
	position: relative;
	display: table;
	word-break: break-word;
	transition: all 0.2s ease-in-out;
}

.kz-title--center .kz-title-content {
	margin-left: auto;
	margin-right: auto;
}

.kz-title--bg .kz-title-content {
	padding: 10px 30px;
}

.kz-title--icon .kz-title-content {
	padding: 10px 0;
}

.kz-title-content > * {
	display: table-cell;
}

.kz-title-content * {
	margin: 0;
}

.kz-title-content hr {
	display: block;
	margin: 10px 0;
}

.kz-title-text {
	position: relative;
	z-index: 2;
	vertical-align: middle;
	word-break: normal;
}

.kz-title-content > span {
	position: relative;
	margin: 0 0 0 15px;
	font-size: 20px;
	transition: all 0.2s ease-in-out;
}

.kz-title-content > i {
	display: inline-block;
	box-sizing: content-box;
	width: 2em;
	height: 2em;
	margin: 0;
	font-size: 2em;
	line-height: 2em;
	text-align: center;
	vertical-align: sub;
	transition: all 0.2s ease-in-out;
}

.kz-title-content > i::before {
	display: inline-block;
}

.kz-title-content .kz-title-image {
	display: inline-block;
	overflow: hidden;
	box-sizing: content-box;
	max-width: 120px;
}

.kz-title-image img {
	width: inherit;
}

.kz-title-content .kz-title-line {
	display: inline-block;
	width: 50px;
	height: 4px;
	margin: 0 0 0 20px;
	background: rgba(167, 167, 167, 0.4);
	font-size: 0;
	vertical-align: middle;
}

.kz-title-content .kz-title-line--after {
	margin: 0 20px 0 0;
}

@media screen and (max-width: 768px) {
	.kz-title--mcenter,
	.kz-title--mcenter * {
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	.kz-title--mcenter .kz-title-content {
		width: 100%;
	}

	.kz-title--mcenter .kz-title-content .kz-title-text {
		display: table;
	}
}

/* Button. Colours, weight, padding and radius are the site's button style;
   per-button colours come from sk_button. The hover text (.kz-btn-alt) sits
   centred over the normal text and is hidden unless an effect shows it. */
.kz-btn-wrap--center {
	display: block;
	width: 100%;
	text-align: center;
}

.kz-btn-wrap--block a {
	display: block;
	text-align: center;
}

a.kz-btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin: 0 0 -10px;
	padding: 14px 30px;
	border: 0;
	border-radius: 4px;
	color: #fff;
	background-color: #00aeef;
	font-weight: 700;
	text-align: initial;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	transition: all 0.2s ease-in-out;
}

a.kz-btn:hover {
	color: #fff;
	background-color: #212121;
}

.kz-btn-wrap--block a.kz-btn {
	display: block;
	text-align: center;
}

.kz-btn span {
	position: relative;
	z-index: 1;
	display: block;
	vertical-align: middle;
	white-space: nowrap;
	transition: all 0.3s ease-in-out;
}

.kz-btn strong {
	font-weight: inherit;
	vertical-align: middle;
	white-space: nowrap;
}

.kz-btn .kz-btn-alt {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: 50%;
	width: auto;
	margin: 0;
	padding: inherit;
	opacity: 0;
	font-weight: inherit;
	white-space: nowrap;
	transform: translate(50%, -50%);
	transition: all 0.3s ease-in-out;
}

.kz-btn i {
	position: relative;
	display: inline-block;
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	margin: 0 0 0 8px;
	letter-spacing: 0;
	line-height: 1em;
	text-align: center;
	vertical-align: middle;
}

.kz-btn--icon-after i {
	margin: 0 8px 0 0;
}

.kz-btn--text-up .kz-btn-alt {
	transform: translate(50%, 25%);
}

.kz-btn--text-up:hover .kz-btn-alt {
	opacity: 1;
	transform: translate(50%, -50%);
}

.kz-btn--text-up:hover span {
	opacity: 0;
	transform: translateY(-50%);
}

.kz-btn--zoom:hover {
	animation: none;
	transform: scale(1.1);
}

/* List. Icon and text are table cells side by side; items may float into
   columns via sk_lists, the clearfix keeps them inside the list. */
ul.kz-list {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.kz-list li {
	position: relative;
	display: list-item;
	width: 100%;
	margin: 0 0 10px;
	transition: all 0.2s ease-in-out;
}

.kz-list li > div {
	display: table-cell;
	color: inherit;
	text-decoration: inherit;
	vertical-align: middle;
}

.kz-list .kz-list-icon {
	vertical-align: top;
}

.kz-list li > div > span {
	display: block;
	line-height: 1.6;
}

.kz-list i {
	display: block;
	box-sizing: content-box;
	width: 2em;
	height: 2em;
	font-size: 1em;
	line-height: 2em;
	text-align: center;
	transition: all 0.1s ease-in-out;
}

.kz-list-icon > i {
	margin-left: 10px;
}

.kz-list--zoom li:hover i {
	transform: scale(1.25);
}

.kz-list--push li:hover i {
	animation: kz-list-push 0.8s forwards;
}

@keyframes kz-list-push {
	0% { opacity: 0; transform: translateX(30%); }
	60% { opacity: 1; transform: translateX(-10%); }
	100% { opacity: 1; transform: none; }
}

@media screen and (max-width: 768px) {
	.kz-list span {
		text-align: initial !important;
	}
}

/* Content box: image on top, body below. The image is a flex item behind
   the body (z-index -1), so the body's rotated square (.kz-cbox-arrow,
   same background as the body) cuts a notch into the image. */
.kz-cbox-wrap,
.kz-cbox,
.kz-cbox-inner {
	position: relative;
	z-index: 1;
}

.kz-fx,
.kz-fx > div {
	transition: all 220ms ease-in-out, color 1ms;
}

.kz-fx--lift:hover {
	transform: translateY(-30px);
}

.kz-fx--zoom:hover {
	z-index: 100;
	transform: scale(1.05);
}

.kz-cbox {
	overflow: visible !important;
	max-width: 100%;
}

.kz-cbox--top {
	display: flex;
	flex-direction: column;
}

.kz-cbox-image {
	z-index: -1;
	background-position: center center;
	background-size: cover;
}

.kz-cbox-image img {
	width: 100%;
}

.kz-cbox-front,
.kz-cbox-inner {
	background: inherit;
}

.kz-cbox-inner {
	margin: 0;
	padding: 30px;
	transition: all 0.2s ease-in-out;
}

.kz-cbox-inner > div {
	border-radius: inherit;
}

.kz-cbox-arrow {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 50%;
	width: 20px;
	height: 20px;
	visibility: visible;
	background: inherit;
	transform: translate(50%, -50%) rotate(-45deg);
}

/* A box with a link: picture and body open it; "Learn more" at the foot of the body. */
.kz-cbox-more {
	display: block;
	margin-top: 14px;
	font-weight: 700;
	text-align: center;
	color: #00aeef;
}

.kz-cbox-more::after { /* covers the body (.kz-cbox-inner is positioned) */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.kz-cbox-image a {
	display: block;
}

.kz-cbox--linked {
	cursor: pointer;
}

.kz-cbox--linked:hover .kz-cbox-more {
	text-decoration: underline;
}

.kz-cbox-more:focus-visible {
	outline: none;
}

.kz-cbox-more:focus-visible::after {
	outline: 2px solid #00aeef;
	outline-offset: 2px;
}

/* Service box. Horizontal: icon (or image) floated left, text indented
   past it. Vertical: image centred above the title. */
.kz-sbox {
	position: relative;
	transition: all 0.4s ease-in-out;
}

.kz-sbox > div {
	transition: all 0.2s ease-in-out;
}

.kz-sbox--left .kz-sbox-icon {
	float: right;
}

.kz-sbox-icon i {
	position: relative;
	top: 0;
	right: 0;
	display: table;
	box-sizing: content-box;
	width: 2em;
	height: 2em;
	padding: 0;
	font-size: 2em;
	line-height: 2em;
	text-align: center;
	transition: all 0.2s ease-in-out;
}

.kz-sbox .kz-sbox-text {
	display: block;
	padding-right: 100px;
	word-break: normal;
	transition: all 0.2s ease-in-out;
}

.kz-sbox h3 {
	display: inline-block;
	padding: 0 0 8px;
	border-bottom: 4px solid #f1f1f1;
	transition: all 0.2s ease-in-out;
}

.kz-sbox p {
	line-height: inherit;
}

.kz-sbox-content {
	overflow-wrap: initial;
}

.kz-sbox-img {
	float: right;
	width: 80px;
	margin: 10px 0 0 20px;
	text-align: center;
}

.kz-sbox-img img {
	display: table;
	max-width: 80px;
	margin: 0 auto;
}

.kz-sbox--vertical {
	box-sizing: border-box;
	padding: 25px 10px;
	text-align: center;
}

.kz-sbox--vertical .kz-sbox-text {
	padding-right: 0;
}

.kz-sbox--vertical h3 {
	margin-bottom: 0;
	border-bottom: 0;
}

.kz-sbox--vertical .kz-sbox-img {
	display: table;
	float: none;
	box-sizing: content-box;
	margin: 0 auto 20px;
}

.kz-sbox--vertical .kz-sbox-img img {
	max-width: 100%;
}

.kz-sbox--pop:hover .kz-sbox-icon,
.kz-sbox--pop:hover .kz-sbox-img {
	animation: kz-sbox-pop 0.3s forwards;
}

@keyframes kz-sbox-pop {
	49% { transform: scale(1); }
	50% { opacity: 0; transform: scale(0); }
	51% { opacity: 1; transform: scale(2); }
}

.kz-sbox--flip .kz-sbox-icon,
.kz-sbox--flip .kz-sbox-img {
	transition: all 0.4s ease;
}

.kz-sbox--flip:hover .kz-sbox-icon,
.kz-sbox--flip:hover .kz-sbox-img {
	transform: rotateY(-360deg);
}

@media screen and (max-width: 480px) {
	.kz-sbox--left .kz-sbox-icon,
	.kz-sbox--left .kz-sbox-img {
		display: table;
		float: none !important;
		margin: 0 auto 20px auto !important;
	}

	.kz-sbox .kz-sbox-text {
		padding: 0 !important;
		text-align: center !important;
	}
}

/* Contact form: line breaks CF7 adds inside paragraphs are not shown. */
.wpcf7 p br {
	display: none;
}

/* Image. The inner box is positioned by css_position (written by Elementor
   on ".kz-image > div"). */
.kz-image {
	position: relative;
	width: 100%;
}

div.kz-image > div {
	display: block;
}

.kz-image img {
	width: inherit;
}

.kz-image-in,
.kz-image-main {
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: all 0.2s ease-in-out;
}

.kz-image-main,
.kz-image-in img {
	border-radius: inherit;
}

@media screen and (max-width: 768px) {
	.kz-image > div {
		margin: 0 auto;
	}

	.kz-image--mcenter,
	.kz-image--mcenter * {
		float: none !important;
		list-style: none !important;
		text-align: center !important;
	}

	.kz-image--mcenter > div,
	.kz-image--mcenter img {
		display: table !important;
		float: none;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Counter. Stacked layout puts number and text on separate lines; the
   number box (sk_num) can then be centred with margin auto. */
.kz-counter--left {
	text-align: right !important;
}

.kz-counter--center {
	text-align: center !important;
}

.kz-counter--right {
	text-align: left !important;
}

.kz-counter,
.kz-counter > div > span,
.kz-counter > div > span i {
	transition: all 0.2s ease-in-out;
}

.kz-counter > div > span {
	font-size: 30px;
}

.kz-counter--1row .kz-counter-before {
	margin: 0 0 0 10px;
}

.kz-counter--1row .kz-counter-after {
	margin: 0 10px 0 0;
}

.kz-counter.kz-counter--2rows > div > span {
	display: block;
	clear: both;
	line-height: initial;
}

.kz-counter.kz-counter--2rows.kz-counter--center > div > span {
	margin: 0 auto;
}

/* A word before a stacked number ("Almost 30", task #130) sits above the
   number box without pushing it down, so a row of counters stays level. */
.kz-counter.kz-counter--2rows > div {
	position: relative;
}

.kz-counter.kz-counter--2rows .kz-counter-before {
	position: absolute;
	left: 0;
	bottom: 100%;
	right: 0;
	margin-bottom: 4px;
	font-size: 24px;
}

/* The number and its symbol stay on one line; a box given a fixed width
   (sk_num) grows when the number is wider, as "220+" is (infra#129). */
.kz-counter .kz-counter-num-wrap {
	display: inline-block;
	min-width: max-content;
	white-space: nowrap;
	font-size: 48px;
	font-weight: 700;
	line-height: initial;
}

.kz-counter .kz-counter-num-wrap i {
	position: relative;
	font-style: normal;
}

.kz-counter .kz-counter-num-wrap::before {
	content: "";
	position: static;
	display: inline-block;
}

/* Alignment helpers. */
.kz-align-left {
	text-align: right !important;
}

.kz-align-center {
	text-align: center !important;
}

.kz-align-right {
	text-align: left !important;
}

/* Social links (team cards, social icons). */
.kz-social {
	position: relative;
}

.kz-social a {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 2em;
	font-size: 20px;
	line-height: 2em;
	text-align: center;
}

.kz-social i {
	line-height: inherit;
}

.kz-social-icons a,
.kz-social-icons a i::before {
	box-sizing: content-box;
}

/* Icons without a link do not react to the mouse. */
.kz-social-icons a:not([href]) {
	pointer-events: none;
}

.kz-social--brand i {
	color: #666;
}

.kz-social--brand .kz-brand-facebook i,
.kz-social--brand .kz-brand-facebook-f i {
	color: #3b5998 !important;
}

.kz-social--brand .kz-brand-twitter i {
	color: #1da1f2 !important;
}

.kz-social--brand .kz-brand-linkedin i,
.kz-social--brand .kz-brand-linkedin-in i {
	color: #007bb6 !important;
}

.kz-social--brand .kz-brand-youtube i,
.kz-social--brand .kz-brand-youtube-play i {
	color: #b00 !important;
}

.kz-social--brand .kz-brand-instagram i {
	color: #bc2a8d !important;
}

.kz-social--brand .kz-brand-pinterest i,
.kz-social--brand .kz-brand-pinterest-p i {
	color: #cb2027 !important;
}

.kz-social--brand-bg-hover a:hover {
	color: #fff;
	background: #aaa;
}

.kz-social--brand-bg-hover .kz-brand-facebook:hover,
.kz-social--brand-bg-hover .kz-brand-facebook-f:hover {
	background-color: #3b5998 !important;
}

.kz-social--brand-bg-hover .kz-brand-twitter:hover {
	background-color: #1da1f2 !important;
}

.kz-social--brand-bg-hover .kz-brand-linkedin:hover,
.kz-social--brand-bg-hover .kz-brand-linkedin-in:hover {
	background-color: #007bb6 !important;
}

.kz-social--brand-bg-hover .kz-brand-youtube:hover,
.kz-social--brand-bg-hover .kz-brand-youtube-play:hover {
	background-color: #b00 !important;
}

.kz-social--brand-bg-hover .kz-brand-pinterest:hover,
.kz-social--brand-bg-hover .kz-brand-pinterest-p:hover {
	background-color: #cb2027 !important;
}

.kz-social--drop a:hover i {
	animation: kz-social-drop 0.3s forwards;
}

@keyframes kz-social-drop {
	49% { transform: translateY(-100%); }
	50% { opacity: 0; transform: translateY(100%); }
	51% { opacity: 1; }
}

.kz-social--flip a i {
	transition: all 0.4s ease;
}

.kz-social--flip a:hover i {
	transform: rotateY(-360deg);
}

.kz-social--tooltip [data-title] {
	position: relative;
}

.kz-social--tooltip [data-title]::after {
	content: attr(data-title);
	position: absolute;
	z-index: 9;
	top: -7px;
	right: 50%;
	padding: 8px 12px;
	border-radius: 4px;
	visibility: hidden;
	opacity: 0;
	color: #fff;
	background: #00aeef;
	font-family: Exo, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transform: translate(50%, -100%) scale(0.8);
	transition: all 0.2s ease-in-out;
}

.kz-social--tooltip [data-title]:hover::after {
	visibility: visible;
	opacity: 1;
	transform: translate(50%, -100%) scale(1);
}

/* Team card: photo with the social bar over its bottom edge, text below. */
.kz-team {
	position: relative;
	box-sizing: border-box;
	margin-bottom: 30px;
}

.kz-team:hover {
	z-index: 1;
}

.kz-team p,
.kz-team h1,
.kz-team h2,
.kz-team h3,
.kz-team h4,
.kz-team h5,
.kz-team h6 {
	margin: 0;
}

.kz-team-img,
.kz-team-img img,
.kz-team-content,
.kz-team-social {
	position: relative;
	width: 100%;
	margin: 0 auto;
	transition: all 0.2s ease-in-out;
}

.kz-team .kz-team-img,
.kz-team .kz-team-img img {
	overflow: hidden;
	width: 100%;
	border-radius: inherit;
}

.kz-team--card:hover img {
	opacity: 0.5;
}

.kz-team--card .kz-team-content {
	margin: 20px 0 0;
}

.kz-team--card .kz-team-social {
	position: absolute;
	bottom: 20px;
	right: 50%;
	width: calc(100% - 60px);
	transform: translateX(50%);
}

.kz-team-social-in {
	display: inline-block;
}

.kz-team .kz-team-social a {
	box-sizing: content-box;
}

/* Image grid: floated equal columns with 10px gutters. */
.kz-grid-wrap {
	position: relative;
	z-index: 1;
	margin: 0 -10px;
}

.kz-grid {
	width: 100%;
	margin: 0;
}

.kz-grid-item {
	position: relative;
	float: right;
}

.kz-grid-item > div {
	position: relative;
	margin: 0 10px 20px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: all 0.2s ease-in-out;
}

.kz-grid--c1 .kz-grid-item { width: 100%; }
.kz-grid--c2 .kz-grid-item { width: calc(100% / 2); }
.kz-grid--c3 .kz-grid-item { width: calc(100% / 3); }
.kz-grid--c4 .kz-grid-item { width: calc(100% / 4); }
.kz-grid--c5 .kz-grid-item { width: calc(100% / 5); }
.kz-grid--c6 .kz-grid-item { width: calc(100% / 6); }

.kz-grid-link {
	position: relative;
	display: block;
	overflow: hidden;
	direction: rtl;
	clip-path: inset(0% 0% 0% 0%);
}

.kz-grid--nolinks .kz-grid-link {
	pointer-events: none;
}

.kz-grid-item img {
	width: 100% !important;
	border-radius: inherit !important;
	transition: all 0.6s ease-in-out !important;
}

.kz-grid[data-reveal] {
	perspective: initial;
	perspective-origin: center;
}

.kz-grid[data-reveal] .kz-grid-item {
	opacity: 0;
}

.kz-grid[data-reveal="zoom"] .kz-grid-item.is-revealed {
	transform: scale(0.6);
	animation: kz-grid-zoom 0.6s forwards;
}

@keyframes kz-grid-zoom {
	100% { transform: scale(1); opacity: 1; }
}

@media screen and (max-width: 768px) {
	.kz-grid-item {
		width: 50% !important;
	}

	.kz-grid-item img {
		width: auto !important;
		margin: 0 auto;
	}
}

@media screen and (max-width: 480px) {
	.kz-grid-wrap {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.kz-grid {
		width: 100% !important;
		margin: 0 !important;
	}

	.kz-grid-item {
		height: auto !important;
		margin: 0 !important;
	}

	.kz-grid-item > div {
		margin: 0 5px 10px !important;
	}
}

/* Accordion. Answers are hidden until their question is open; the arrow
   icons swap and pop in. */
.kz-acc > div > div {
	margin-bottom: 10px;
}

.kz-acc-title {
	position: relative;
	display: block;
	margin: 0;
	padding: 16px 20px 16px 40px;
	border: 1px solid rgba(167, 167, 167, 0.2);
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.kz-acc-title div {
	display: inline-block;
	max-width: 80%;
	line-height: 1.4;
	vertical-align: middle;
}

.kz-acc-content {
	display: none;
	margin: 0 0 10px;
	padding: 20px;
	border: 1px solid rgba(167, 167, 167, 0.2);
	border-top: 0;
}

.kz-acc .is-open > .kz-acc-content {
	display: block;
}

.kz-acc-open,
.kz-acc-close {
	position: absolute;
	top: 50%;
	left: 20px;
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	font-size: 22px;
	line-height: 1em;
	text-align: center;
	transform: translateY(-50%);
	animation: kz-acc-arrow 0.4s forwards;
}

@keyframes kz-acc-arrow {
	0% { transform: translateY(-50%) scale(0); }
	100% { transform: translateY(-50%) scale(1); }
}

i.kz-acc-close,
.kz-acc .is-open i.kz-acc-open {
	display: none;
}

.kz-acc .is-open i.kz-acc-close {
	display: inline;
}

@media screen and (max-width: 480px) {
	.kz-acc-open,
	.kz-acc-close {
		font-size: 18px;
	}
}

/* Map: the box height comes from sk_map; the embedded map fills it. */
.kz-map {
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.kz-map iframe,
.kz-map-canvas {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The pin: the round logo in a white ring, with a point below it. */
.kz-map .kz-map-pin {
	width: 56px;
	height: 70px;
	cursor: pointer;
}

.kz-map-pin-head {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 56px;
	padding: 3px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.kz-map-pin-head::after {
	content: "";
	position: absolute;
	right: 50%;
	top: 52px;
	margin-right: -9px;
	border: 9px solid transparent;
	border-top: 16px solid #fff;
	border-bottom: 0;
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .25));
}

.kz-map-pin-head img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* Carousel. The list crops half a gap on each side so the slides' margins
   (the gap) never show at the edges; on phones the neighbours peek in. */
.kz-car {
	--kz-car-gap: 0px;
	position: relative;
	display: block;
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y;
}

.kz-car--dots-right,
.kz-car--dots-center {
	margin-bottom: 40px;
}

.kz-car-list {
	position: static;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	clip-path: inset(0 calc(var(--kz-car-gap) / 2));
}

.kz-car-track {
	position: relative;
	top: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	transform: translate3d(0, 0, 0);
}

.kz-car-slide {
	flex: 0 0 auto;
	width: 100%;
	min-height: 1px;
	margin: 0 calc(var(--kz-car-gap) / 2);
}

/* Before the script runs: first slide only. */
.kz-car:not(.is-ready) .kz-car-slide ~ .kz-car-slide {
	display: none;
}

.kz-car-slide img {
	display: block;
	margin: 0 auto;
}

.kz-car-slide style {
	display: none;
}

ul.kz-car-dots {
	position: absolute;
	bottom: -40px;
	right: 0;
	left: 0;
	display: block;
	width: 100%;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none;
	text-align: center;
}

.kz-car--dots-inner ul.kz-car-dots {
	bottom: 20px;
}

.kz-car--dots-right ul.kz-car-dots {
	text-align: left;
}

.kz-car-dots li {
	display: inline-block;
	margin: 0 2px;
}

.kz-car-dots button {
	display: block;
	width: 1em;
	height: 1em;
	padding: 4px;
	border: 2px solid;
	border-radius: 100%;
	opacity: 0.3;
	color: initial;
	background: none;
	font-size: 0;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

/* A 12px dot, tapped through an invisible 24px area around it. */
.kz-car-dots button {
	position: relative;
}

.kz-car-dots button::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.kz-car-dots .is-active button,
.kz-car-dots button:hover {
	opacity: 1;
}

@media screen and (max-width: 480px) {
	.kz-car-list {
		overflow: visible;
		clip-path: none !important;
		transform: scale(0.9) !important;
	}

	.kz-car-slide {
		margin: 0 10px !important;
	}

	.kz-car-slide:not(.is-current) {
		pointer-events: none;
	}
}

/* Testimonial: quote bubble with an optional pointer at its bottom left,
   photo and name below. */
.kz-testi {
	position: relative;
}

.kz-testi * {
	transition: all 0.2s ease-in-out;
}

.kz-testi-content {
	position: relative;
	padding: 30px;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: rgba(167, 167, 167, 0.1);
}

.kz-testi-content p {
	margin-bottom: 0;
}

.kz-testi--arrow .kz-testi-content::after {
	content: "";
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 0 22px;
	border-color: transparent;
	border-top-color: inherit;
	transform: translateY(100%);
}

.kz-testi-meta {
	margin: 20px 0 0;
}

.kz-testi-meta > div {
	display: inline-block;
	vertical-align: middle;
}

.kz-testi-avatar {
	overflow: hidden;
	box-sizing: content-box;
	width: 80px;
	border-radius: 100%;
}

.kz-testi-avatar img {
	width: inherit;
	border-radius: inherit !important;
}

.kz-testi-name {
	font-size: 18px;
	font-weight: bold;
}

.kz-testi-subname {
	color: #707070;
	font-size: 16px;
	font-weight: 300;
}

.kz-testi-names {
	margin: 0 20px 0 0;
}

/* cz_particles: content over a particle canvas (assets/js/particles.js). */
.kz-particles {
	position: relative;
	z-index: 0;
	min-height: 300px !important;
}
.kz-particles > * {
	z-index: 1;
}
.kz-particles canvas {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* Tablets (481-900px): a row of three photo cards (content boxes, photo on
   top) left only 2-3 words per line. There each card takes the full width,
   photo on the left, text on the right (Mongi 2026-10-19: a responsive
   site). Phones (one per row, photo on top) and desktops are unchanged. */
@media (min-width: 481px) and (max-width: 900px) {
	.elementor-column.elementor-col-33:has(> .elementor-widget-wrap > .elementor-widget-cz_content_box .kz-cbox--top > .kz-cbox-image img) {
		width: 100% !important;
	}

	.elementor-col-33 .kz-cbox--top:has(> .kz-cbox-image img) {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.elementor-col-33 .kz-cbox--top:has(> .kz-cbox-image img)::before,
	.elementor-col-33 .kz-cbox--top:has(> .kz-cbox-image img)::after {
		display: none; /* the clearfix boxes would count as flex items */
	}

	.elementor-col-33 .kz-cbox--top > .kz-cbox-image {
		flex: 0 0 40%;
	}

	.elementor-col-33 .kz-cbox--top > .kz-cbox-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.elementor-col-33 .kz-cbox--top > .kz-cbox-front {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.elementor-col-33 .kz-cbox--top .kz-cbox-arrow {
		display: none;
	}

	/* On Home the row of cards is pulled up into the dark band above it
	   (margin-top -200px on each card). Stacked, a pulled card would cover
	   the one before it, so on tablets they sit in the band without it. */
	.elementor-col-33 .kz-cbox--top:has(> .kz-cbox-image img) {
		margin-top: 0 !important;
	}
}
