/*------------------------------------------------------------------
    Header
-------------------------------------------------------------------*/

	@media (min-width: 1025px) {

		.hayler .classic-menu .nav-height {
			background-color: transparent;
		}

		.hayler .classic-menu #clapat-nav-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			width: auto;
			height: auto;
			padding: 10px;
			background-color: #54b4677d;
			border-radius: 3px;
			-webkit-backdrop-filter: blur(7px);
			backdrop-filter: blur(7px);
			transform: translate(-50%, -50%);
		}

	}

	@media (min-width: 1025px) and (max-width: 1500px) {

		.hayler #clapat-header.classic-menu {
			height: calc(var(--header-height) + 54px);
		}

		.hayler #clapat-header.classic-menu #header-container {
			align-items: flex-start;
		}

		.hayler .classic-menu #clapat-nav-wrapper {
			top: 86px;
			transform: translateX(-50%);
		}

		.hayler .classic-menu .clapat-nav {
			justify-content: center;
		}

	}

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

		.hayler #clapat-nav-wrapper,
		.hayler #clapat-nav-wrapper.open {
			background-color: var(--primary-color);
			color: var(--color-black);
		}

		.hayler #clapat-nav-wrapper .nav-height {
			filter: none !important;
		}

		.hayler #clapat-nav-wrapper .clapat-nav,
		.hayler #clapat-nav-wrapper .clapat-nav li,
		.hayler #clapat-nav-wrapper .clapat-nav li a,
		.hayler #clapat-nav-wrapper .clapat-nav li ul li a {
			color: var(--color-black);
		}

		.hayler #clapat-nav-wrapper .clapat-nav > li > a {
			font-size: 24px;
			line-height: 36px;
			font-weight: 600;
			padding-left: 24px;
			padding-right: 24px;
		}

		.hayler #clapat-nav-wrapper .clapat-nav li ul {
			margin-top: 6px;
			margin-bottom: 10px;
		}

		.hayler #clapat-nav-wrapper .clapat-nav li ul li a {
			font-size: 20px;
			line-height: 32px;
			font-weight: 500;
		}

		.hayler #clapat-nav-wrapper .clapat-nav:hover li a,
		.hayler #clapat-nav-wrapper .clapat-nav:hover li ul li a {
			opacity: 0.58;
		}

		.hayler #clapat-nav-wrapper .clapat-nav li:hover > a,
		.hayler #clapat-nav-wrapper .clapat-nav li a.active,
		.hayler #clapat-nav-wrapper .clapat-nav li ul li a.active,
		.hayler #clapat-nav-wrapper .clapat-nav li ul li:hover > a {
			opacity: 1;
		}

		.hayler.mobile-menu-contrast #clapat-logo img.black-logo,
		.hayler #clapat-header:has(#clapat-nav-wrapper.open) #clapat-logo img.black-logo {
			opacity: 1 !important;
		}

		.hayler.mobile-menu-contrast #clapat-logo img.white-logo,
		.hayler #clapat-header:has(#clapat-nav-wrapper.open) #clapat-logo img.white-logo {
			opacity: 0 !important;
		}

		.hayler.mobile-menu-contrast #burger-button,
		.hayler.mobile-menu-contrast #burger-button.open,
		.hayler.mobile-menu-contrast #clapat-nav-wrapper #header-buttons-wrapper,
		.hayler.mobile-menu-contrast #clapat-nav-wrapper #header-button,
		.hayler.mobile-menu-contrast #clapat-nav-wrapper #header-button a,
		.hayler.mobile-menu-contrast #clapat-nav-wrapper .header-element-color,
		.hayler #clapat-header:has(#clapat-nav-wrapper.open) #burger-button,
		.hayler #clapat-header:has(#clapat-nav-wrapper.open) #burger-button.open,
		.hayler #clapat-nav-wrapper.open #header-buttons-wrapper,
		.hayler #clapat-nav-wrapper.open #header-button,
		.hayler #clapat-nav-wrapper.open #header-button a,
		.hayler #clapat-nav-wrapper.open .header-element-color {
			color: var(--color-black) !important;
		}

		.hayler.mobile-menu-contrast #clapat-nav-wrapper #header-button .button-text span,
		.hayler #clapat-nav-wrapper.open #header-button .button-text span {
			-webkit-filter: none !important;
			filter: none !important;
		}

	}

	.hayler #header-button .button-icon i {
		background-color: var(--secondary-color);
		color: var(--color-black);
		filter: none;
	}

	.hayler #header-button .button-icon i::before {
		filter: none;
	}

	.hayler #clapat-logo.has-office-flag {
		display: flex;
		align-items: center;
	}

	.hayler #clapat-logo.has-office-flag .office-flag {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 60px;
		height: 60px;
		line-height: 0;
		cursor: pointer;
		pointer-events: initial;
	}

	.hayler #clapat-logo.has-office-flag img.white-logo {
		top: 4px;
	}

	.hayler #clapat-logo.has-office-flag .office-flag::after {
		content: "";
		position: absolute;
		inset: 3px;
		border: 2px solid var(--secondary-color);
		border-radius: 50%;
		opacity: 0;
		transform: scale(0.72);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.hayler #clapat-logo.has-office-flag .office-flag:hover::after {
		opacity: 1;
		transform: scale(1);
	}

	.hayler #clapat-logo.has-office-flag .office-flag img {
		position: relative;
		z-index: 1;
		display: block;
		width: auto;
		height: auto;
		max-width: 30px;
		object-fit: contain;
	}

	.hayler:not(.mobile-menu-contrast).section-header-light #clapat-logo img.black-logo {
		opacity: 1 !important;
	}

	.hayler:not(.mobile-menu-contrast).section-header-light #clapat-logo img.white-logo {
		opacity: 0 !important;
	}

	.hayler:not(.mobile-menu-contrast).section-header-dark #clapat-logo img.black-logo {
		opacity: 0 !important;
	}

	.hayler:not(.mobile-menu-contrast).section-header-dark #clapat-logo img.white-logo {
		opacity: 1 !important;
	}

	.hayler:not(.mobile-menu-contrast).section-header-light .clapat-nav,
	.hayler:not(.mobile-menu-contrast).section-header-light #burger-button,
	.hayler:not(.mobile-menu-contrast).section-header-light .header-element-color,
	.hayler:not(.mobile-menu-contrast).section-header-light #header-button,
	.hayler:not(.mobile-menu-contrast).section-header-light #header-button a {
		color: var(--color-black) !important;
	}

	.hayler:not(.mobile-menu-contrast).section-header-dark .clapat-nav,
	.hayler:not(.mobile-menu-contrast).section-header-dark #burger-button,
	.hayler:not(.mobile-menu-contrast).section-header-dark .header-element-color,
	.hayler:not(.mobile-menu-contrast).section-header-dark #header-button,
	.hayler:not(.mobile-menu-contrast).section-header-dark #header-button a {
		color: var(--color-white) !important;
	}



/*------------------------------------------------------------------
    Sustainability
-------------------------------------------------------------------*/

	.hayler .sustainability-certificate-card {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		padding: 42px;
		border: 1px solid rgba(17, 20, 23, 0.18);
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 0.45);
	}

	.hayler .sustainability-certificate-card p {
		max-width: 660px;
		margin-bottom: 0;
	}

	.hayler .sustainability-impact-list-wrapper {
		margin-top: 28px;
	}

	.hayler .sustainability-impact-list {
		margin: 0;
		padding-left: 1.2em;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		list-style: disc;
	}

	.hayler .sustainability-impact-list li {
		margin-bottom: 10px;
		padding-left: 0.25em;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		list-style: disc;
	}

	.hayler .sustainability-impact-list li:last-child {
		margin-bottom: 0;
	}

	.hayler .certificate-kicker {
		display: block;
		margin-bottom: 14px;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--secondary-color);
	}

	.hayler .certificate-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 18px 34px;
	}

	.hayler .certificate-actions .button-wrap {
		margin: 0;
	}

	@media (max-width: 1024px) {

		.hayler .sustainability-certificate-card {
			align-items: flex-start;
			flex-direction: column;
			padding: 32px;
		}

		.hayler .certificate-actions {
			justify-content: flex-start;
		}

	}



/*------------------------------------------------------------------
    Footer
-------------------------------------------------------------------*/

	.hayler #clapat-footer:not(.absolute) {
		overflow: visible;
		color: var(--color-white);
		background-color: var(--fullscreen-menu-bg-color);
	}

	.hayler #clapat-footer:not(.absolute)::before {
		content: "";
		position: absolute;
		top: -20px;
		left: 0;
		width: calc(50% - 1px);
		height: 20px;
		background-color: var(--fullscreen-menu-bg-color);
		border-top-right-radius: 10px;
	}

	.hayler #clapat-footer:not(.absolute)::after {
		content: "";
		position: absolute;
		top: -20px;
		right: 0;
		width: calc(50% - 1px);
		height: 20px;
		background-color: var(--fullscreen-menu-bg-color);
		border-top-left-radius: 10px;
	}

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

		.hayler #clapat-footer:not(.absolute) {
			overflow: hidden;
		}

		.hayler .footer-nav-lists {
			grid-template-rows: repeat(5, auto);
		}

	}

	.hayler .footer-contact-list {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hayler .footer-contact-list li {
		margin: 0;
		list-style: none;
	}

	.hayler .footer-contact-list .arrow-link {
		position: relative;
	}

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

		.hayler #clapat-footer:not(.absolute) .clapat-footer-left {
			right: 0;
			left: auto;
			justify-content: flex-end;
		}

		.hayler #clapat-footer:not(.absolute) #backtotop {
			bottom: -6px;
			left: 16px;
		}

		.hayler #clapat-footer:not(.absolute) .clapat-footer-center {
			justify-content: flex-start;
		}

		.hayler #clapat-footer:not(.absolute) .clapat-footer-right {
			justify-content: flex-start;
		}

		.hayler #clapat-footer:not(.absolute) .socials-wrap .socials {
			-webkit-transform: translateX(-14px);
			transform: translateX(-14px);
		}

	}



/*------------------------------------------------------------------
    Hero Section
-------------------------------------------------------------------*/

	.hayler .readability-blur {
		-webkit-filter: blur(2px);
		filter: blur(2px);
	}

	.hayler .hero-infotitle-logo {
		display: block;
		width: min(26vw, 280px);
		max-width: 100%;
		height: auto;
	}

	.hayler #hero.contact-hero .hero-title {
		margin-bottom: clamp(72px, 6vw, 96px);
	}

	.hayler #hero.contact-hero .contact-hero-logo {
		position: absolute;
		top: calc(var(--title-font-size) * 1.08 + 6px);
		left: 0;
		margin: 0;
		pointer-events: none;
	}

	.hayler #hero.contact-hero .hero-infotitle-logo {
		width: clamp(160px, 21vw, 220px);
	}

	.hayler .has-media #hero-caption {
		justify-content: flex-end;
	}

	.hayler #hero.has-media #hero-media-wrapper::after,
	.hayler #hero.has-media #hero-media-effects .next-project-media-wrapper::after,
	.hayler #project-nav.hybrid-nav .next-project-media-wrapper::after,
	.hayler #project-clone-hero.hybrid-nav .next-project-media-wrapper::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.3);
		pointer-events: none;
	}

	.hayler #hero.has-media.light-section #hero-media-wrapper::after,
	.hayler #hero.has-media.light-section #hero-media-effects .next-project-media-wrapper::after,
	.hayler #project-nav.hybrid-nav.light-section .next-project-media-wrapper::after,
	.hayler #project-clone-hero.hybrid-nav.light-section .next-project-media-wrapper::after {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.hayler #hero-caption.text-align-default-desktop .inner {
		width: 100%;
	}

	.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
		width: 100%;
		box-sizing: border-box;
		padding-left: calc(66.6667% - (1 * var(--gap)) / 3 + var(--gap));
	}

	.hayler #hero-caption.error-caption .hero-title {
		font-size: var(--bt-font-size);
		line-height: var(--bt-line-height);
		font-weight: var(--bt-font-weight);
		letter-spacing: var(--bt-letter-spacing);
		column-gap: 0;
	}

	.hayler #hero-caption.error-caption .hero-title .word-wrapper span {
		text-shadow: 0 1.05em 0 currentColor;
	}

	.hayler .has-border {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	.hayler .has-border::before {
		top: 0;
		bottom: auto;
		transform-origin: left;
	}

	.hayler .has-border::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-image:
			linear-gradient(to top, var(--color-black) 0%, var(--color-black) 100%),
			linear-gradient(to right, transparent, transparent),
			linear-gradient(to top, transparent, transparent);
		background-position: -100% 50%, 50% 0, 0 50%;
		background-repeat: no-repeat;
		background-size: 50% 2px, 2px 100%, 100% 2px;
		opacity: 1;
	}

	.hayler .light-content .has-border::after {
		background-image:
			linear-gradient(to top, var(--color-white) 0%, var(--color-white) 100%),
			linear-gradient(to right, transparent, transparent),
			linear-gradient(to top, transparent, transparent);
	}

	.hayler .has-border.visible::after {
		background-position: 100% 0%, 50% 0, 0 50%;
		background-size: 0 2px, 2px 100%, 100% 2px;
		transition: transform 0.5s ease-out 0s, background-size 1.5s cubic-bezier(.69, 0, 0, 1) 0.45s, background-position 0.6s cubic-bezier(.6, 0, .05, 1) 0.45s;
	}

	.hayler .hero-footer-left {
		display: flex;
		justify-content: flex-start;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-center {
		display: flex;
		justify-content: flex-start;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-right {
		display: flex;
		justify-content: flex-end;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-left #back-home .text-wrap {
		white-space: nowrap;
	}

	.hayler .hero-footer-left #back-home .button-text {
		display: block;
	}

	/* Responsive */

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

		.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
			margin-top: 40px;
			padding-left: calc(33.3333% + var(--gap) / 3);
		}

	}

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

		.hayler #hero.contact-hero .hero-title {
			margin-bottom: 16px;
		}

		.hayler #hero.contact-hero .contact-hero-logo {
			position: relative;
			top: auto;
			left: auto;
			margin-bottom: 28px;
			pointer-events: auto;
		}

		.hayler #hero.contact-hero .hero-infotitle-logo {
			width: clamp(150px, 52vw, 220px);
		}

		.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
			margin-top: 20px;
			padding-left: 0;
		}

		.hayler .hero-footer-right .info-text {
			width: 100%;
		}

		.hayler .hero-footer-phone {
			display: block;
			width: 100%;
		}

		.hayler .hero-footer-badge {
			width: 100%;
			max-width: 100%;
			max-height: 36px;
			object-position: right center;
		}

	}



/*------------------------------------------------------------------
    Page Nav Section
-------------------------------------------------------------------*/

	.hayler .nav-intro-wrapper {
		position: absolute;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		gap: calc(var(--gap) / 2);
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding-top: calc(var(--header-height) - var(--gap) * 2);
		padding-left: var(--horizontal-gutter);
		padding-right: var(--horizontal-gutter);
	}

	.hayler .nav-intro-wrapper .nav-intro-text {
		display: flex;
		justify-content: flex-start;
		width: 100%;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-text {
		position: relative;
		display: flex;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		column-gap: 0.2em;
		flex-shrink: 0;
	}

	.hayler .nav-intro-wrapper.text-align-center .nav-intro-text .span-text {
		justify-content: center;
	}

	.hayler .nav-intro-wrapper.text-align-right .nav-intro-text .span-text {
		justify-content: flex-end;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word {
		overflow: hidden;
		justify-content: center;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word:first-child {
		justify-content: flex-start;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word:last-child {
		justify-content: flex-end;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word span {
		position: relative;
		display: block;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word span::before {
		content: attr(data-hover);
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}

	.hayler .next-hero-subtitle {
		opacity: 1;
	}

	.hayler #project-nav.hybrid-nav .nav-intro-wrapper {
		z-index: 20;
	}

	.hayler #project-nav.hybrid-nav.light-section .nav-intro-wrapper,
	.hayler #project-nav.hybrid-nav.light-section .next-hero-title,
	.hayler #project-nav.hybrid-nav.light-section .next-hero-title span,
	.hayler #project-nav.hybrid-nav.light-section .next-hero-subtitle,
	.hayler #project-nav.hybrid-nav.light-section .next-hero-subtitle span,
	.hayler #project-clone-hero.hybrid-nav.light-section .nav-intro-wrapper,
	.hayler #project-clone-hero.hybrid-nav.light-section .next-hero-title,
	.hayler #project-clone-hero.hybrid-nav.light-section .next-hero-title span,
	.hayler #project-clone-hero.hybrid-nav.light-section .next-hero-subtitle,
	.hayler #project-clone-hero.hybrid-nav.light-section .next-hero-subtitle span {
		color: var(--color-black) !important;
	}

	.hayler #project-nav.hybrid-nav.dark-section .nav-intro-wrapper,
	.hayler #project-nav.hybrid-nav.dark-section .next-hero-title,
	.hayler #project-nav.hybrid-nav.dark-section .next-hero-title span,
	.hayler #project-nav.hybrid-nav.dark-section .next-hero-subtitle,
	.hayler #project-nav.hybrid-nav.dark-section .next-hero-subtitle span,
	.hayler #project-clone-hero.hybrid-nav.dark-section .nav-intro-wrapper,
	.hayler #project-clone-hero.hybrid-nav.dark-section .next-hero-title,
	.hayler #project-clone-hero.hybrid-nav.dark-section .next-hero-title span,
	.hayler #project-clone-hero.hybrid-nav.dark-section .next-hero-subtitle,
	.hayler #project-clone-hero.hybrid-nav.dark-section .next-hero-subtitle span {
		color: var(--color-white) !important;
	}

	.hayler #project-nav:not(.auto-trigger) .next-ajax-link-project {
		pointer-events: initial;
	}


/*------------------------------------------------------------------
    Milestone Timeline
-------------------------------------------------------------------*/

	.hayler .milestone-timeline-pin {
		position: relative;
	}

	.hayler .milestone-timeline {
		position: relative;
		--timeline-progress: 0;
		width: 100%;
		max-width: 100%;
		margin-top: calc(var(--gap) * 3);
		padding-top: calc(var(--gap) * 1.5);
		overflow: hidden;
		box-sizing: border-box;
		color: var(--color-black);
	}

	.hayler .milestone-timeline-bar {
		position: relative;
		display: block;
		width: 100%;
		max-width: 100%;
		margin-bottom: calc(var(--gap) * 2);
		box-sizing: border-box;
	}

	.hayler .milestone-timeline-year {
		display: block;
		font-family: var(--primary-font-family);
		font-size: clamp(2rem, 5vw, 4.5rem);
		font-weight: 600;
		line-height: 1;
		color: var(--color-black);
		margin-bottom: calc(var(--gap) / 2);
	}

	.hayler .milestone-timeline-track {
		position: relative;
		width: 92vw;
		max-width: 92vw;
		height: 2px;
		background-color: rgba(0, 0, 0, 0.16);
		overflow: hidden;
		box-sizing: border-box;
	}

	.hayler .milestone-timeline-progress {
		width: 100%;
		height: 100%;
		background-color: var(--secondary-color);
		-webkit-transform: scaleX(var(--timeline-progress));
		transform: scaleX(var(--timeline-progress));
		-webkit-transform-origin: left center;
		transform-origin: left center;
	}

	.hayler .milestone-timeline-list {
		position: relative;
		left: 0;
		display: flex;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: var(--gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hayler .milestone-timeline-viewport {
		width: 92vw;
		overflow-x: hidden;
		overflow-y: visible;
	}

	.hayler .milestone-timeline-item {
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 0 0 clamp(320px, 42vw, 560px);
		width: clamp(320px, 42vw, 560px);
		margin: 0;
		list-style: none;
		opacity: 0.35;
		-webkit-transition: opacity 0.4s ease;
		transition: opacity 0.4s ease;
	}

	.hayler .milestone-timeline-item.is-visible {
		opacity: 1;
	}

	.hayler .milestone-timeline-card {
		display: flex;
		flex-direction: column;
		gap: calc(var(--gap) / 2);
		height: 100%;
		min-height: 190px;
		padding: clamp(22px, 2.5vw, 34px);
		background-color: var(--color-white);
		border: 1px solid rgba(0, 0, 0, 0.08);
		box-sizing: border-box;
	}

	.hayler .milestone-timeline-step {
		font-family: var(--primary-font-family);
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1;
		color: var(--secondary-color);
	}

	.hayler .milestone-timeline-card p {
		margin-bottom: 0;
	}

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

		.hayler .milestone-timeline {
			padding-top: 0;
		}

		.hayler .milestone-timeline-bar {
			margin-bottom: var(--gap);
		}

		.hayler .milestone-timeline-item {
			flex-basis: min(82vw, 430px);
			width: min(82vw, 430px);
		}

		.hayler .milestone-timeline-card {
			min-height: 190px;
		}

	}



/*------------------------------------------------------------------
    Showcase Slider Parallax
-------------------------------------------------------------------*/

	.hayler .clapat-slider-wrapper .clapat-slider-caption {
		justify-content: flex-start;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-caption {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: auto;
		text-align: left;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-title {
		left: -0.06em;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-title img {
		display: block;
		width: 30vw;
		max-width: 30vw;
		height: auto;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-date,
	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-cat {
		max-width: 30vw;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-role {
		text-align: right;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-cat > span {
		display: block;
	}

	.hayler .showcase-slider-parallax .clapat-slide .item-media-wrapper::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.3);
		pointer-events: none;
	}

	.hayler .showcase-slider-parallax .clapat-slide.change-header .item-media-wrapper::after {
		background-color: rgba(255, 255, 255, 0.3);
	}

	/* Slider Pagination Bullets */

	.hayler .clapat-slider-footer {
		overflow: visible;
	}

	.hayler .showcase-slider-parallax .clapat-slider-pagination {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding-left: var(--horizontal-gutter);
		padding-right: var(--horizontal-gutter);
		gap: var(--gap);
		counter-reset: slide;
		pointer-events: none;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet {
		position: relative;
		display: inline-flex;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		height: auto;
		padding-bottom: 40px;
		margin: 0;
		opacity: 1;
		cursor: pointer;
		pointer-events: none;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 1px;
		opacity: 0.2;
		background-color: currentColor;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		transform-origin: center;
	}

	.hayler.viewport-mobile .showcase-slider-parallax .clapat-pagination-bullet::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 1px;
		background-color: currentColor;
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		transform-origin: right;
		-webkit-transition: transform 0.2s ease-in-out 0.1s;
		transition: transform 0.2s ease-in-out 0.1s;
	}

	.hayler.viewport-mobile .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active::before {
		transform-origin: left;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: 100%;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number {
		position: relative;
		width: auto;
		height: 100%;
		opacity: 0.2;
		pointer-events: initial;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active .bullet-number,
	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number-wrapper:hover .bullet-number {
		opacity: 1;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .clapat-autoplay-progress {
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 3px;
		opacity: 0;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active .clapat-autoplay-progress {
		opacity: 1;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .clapat-autoplay-progress span {
		position: relative;
		display: block;
		width: 0%;
		height: 2px;
		background: currentColor;
	}

	/* Responsive */

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

		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-caption {
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			text-align: left;
		}

		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-role {
			text-align: left;
		}

	}

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

		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-title img {
			max-width: 50vw;
			width: 50vw;
		}

		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-date,
		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-cat {
			max-width: 50vw;
			width: 50vw;
		}

		.hayler .clapat-pagination-bullet {
			padding-bottom: 30px;
		}

	}

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

		.hayler .clapat-pagination-bullet {
			padding-bottom: 20px;
		}

	}



/*------------------------------------------------------------------
    Showcase Slider Carousel Horizontal
-------------------------------------------------------------------*/

	.hayler .clapat-slider-wrapper .clapat-carousel-caption-wrapper {
		position: absolute;
		top: calc(50 * var(--dvh, 1vh) + max(10vw, 140px));
		left: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: calc(100vw - var(--scroll-bar-w));
		height: 100px;
		box-sizing: border-box;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption-wrapper.visible-caption {
		opacity: 1;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 20vw;
		min-width: 280px;
		height: 100px;
		opacity: 1;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption {
		position: absolute;
		text-align: center;
		color: currentColor;
		pointer-events: none;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-title {
		position: relative;
		overflow: hidden;
		font-family: var(--primary-font-family);
		font-size: var(--h5-font-size);
		line-height: var(--h5-line-height);
		font-weight: var(--h5-font-weight);
		letter-spacing: var(--h5-letter-spacing);
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-cat {
		overflow: hidden;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-title span,
	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-cat span {
		position: relative;
		display: block;
		opacity: 0;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption.active .item-title span,
	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption.active .item-cat span {
		opacity: 1;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date {
		position: absolute;
		top: -23px;
		right: 12px;
		left: auto;
		display: block;
		padding: 0;
		overflow: hidden;
		text-align: right;
		background: transparent;
		opacity: 0;
		color: currentColor;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-carousel-horizontal.visible-caption .clapat-slide .item-caption .item-date {
		opacity: 0.2;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide:hover .item-caption .item-date {
		opacity: 1;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date span {
		position: relative;
		display: block;
		text-align: right;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		-webkit-transition: transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date span::after {
		content: var(--slide-index);
		position: absolute;
		top: -100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide:hover .item-caption .item-date span {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	/* Responsive */

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .clapat-slider-viewport {
		transform: translateY(calc(-1 * var(--hero-footer-height) / 2));
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption {
		position: absolute;
		top: 0;
		bottom: auto;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		height: calc(100% + 36px);
		padding: 12px;
		opacity: 0;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-title {
		position: relative;
		display: block;
		overflow: hidden;
		color: currentColor;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-title {
		padding-left: 30px;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-title::before {
		content: "\f061";
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 30px;
		font: var(--fa-font-solid);
		font-size: 12px;
		line-height: inherit;
		text-align: left;
		opacity: 0;
		color: currentColor;
		pointer-events: none;
		-webkit-transform: scale(0.5) rotate(-45deg);
		transform: scale(0.5) rotate(-45deg);
		transform-origin: -10px center;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-title::before {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat {
		position: relative;
		display: block;
		overflow: hidden;
		color: currentColor;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat span {
		position: relative;
		display: block;
		width: auto;
		min-width: 100px;
		text-align: right;
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat span::before {
		content: attr(data-hover);
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-cat span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}



/*------------------------------------------------------------------
    Portfolio Grid
-------------------------------------------------------------------*/

	.hayler .filters-wrapper {
		position: relative;
		z-index: 1000;
		display: flex;
		justify-content: flex-start;
		width: 100%;
		height: 0;
		box-sizing: border-box;
		padding-top: 0;
		padding-bottom: 0;
		background-color: rgb(200, 200, 200);
		mask-image: none !important;
		opacity: 0;
		pointer-events: none;
	}

	.hayler .filters-container {
		position: relative;
		width: 100%;
		height: auto;
		padding-top: 35px;
		padding-left: calc(33.3333% - (2 * var(--gap)) / 3 + var(--gap));
		padding-bottom: 25px;
	}

	.hayler .clapat-item .reveal-overlay {
		position: absolute;
		inset: 0;
		z-index: 5;
		display: flex;
		pointer-events: none;
		transform: scaleX(1.01);
	}

	.hayler .clapat-item .reveal-overlay span {
		flex: 1;
		background: #F4F7F4;
		transform-origin: top;
		transform: scaleX(1.1) scaleY(1);
		will-change: transform;
	}

	.hayler .clapat-item .reveal-overlay span:nth-child(3) {
		flex: 2;
	}

	.hayler .showcase-portfolio {
		padding-top: 35px;
		counter-reset: thumb;
	}

	/* List View */

	.hayler .showcase-portfolio.portfolio-list-view {
		padding-top: 60px;
		row-gap: 0;
	}

	.hayler .showcase-portfolio.portfolio-list-view .clapat-item::after {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	.hayler.viewport-mobile .showcase-portfolio.portfolio-list-view .clapat-item .item-effects {
		right: 0;
		left: 0;
		width: 100px;
		margin: auto;
	}

	/* Grid View */

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item {
		display: flex;
		width: calc(50% - (2 * var(--thumbs-margins-width)));
		overflow: hidden;
		padding-top: 35px;
		padding-bottom: 45px;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		width: calc(33.33% - (2 * var(--thumbs-margins-width)));
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content {
		position: relative;
		display: flex;
		width: 100%;
		height: auto;
		cursor: pointer;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	/* Thumb 1 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1) .item-content {
		width: 100%;
	}

	/* Thumb 2 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2) .item-content {
		width: 66.6667%;
	}

	/* Thumb 3 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) .item-content {
		width: 50%;
	}

	/* Thumb 4 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) {
		align-items: flex-end;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) .item-content {
		width: 50%;
	}

	/* Thumb 5 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5) .item-content {
		width: 66.6667%;
	}

	/* Thumb 6 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6) .item-content {
		width: 100%;
	}

	/* Thumb 7 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) .item-content {
		width: 50%;
	}

	/* Thumb 8 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) {
		align-items: flex-end;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) .item-content {
		width: 50%;
	}

	/* Thumb Caption */

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		height: calc(100% + 45px);
		padding: 0;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-title {
		color: currentColor;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-title {
		padding-left: 30px;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-title::before {
		content: "\f061";
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 30px;
		font: var(--fa-font-solid);
		font-size: 12px;
		line-height: inherit;
		text-align: left;
		opacity: 0;
		color: currentColor;
		pointer-events: none;
		-webkit-transform: scale(0.5) rotate(-45deg);
		transform: scale(0.5) rotate(-45deg);
		transform-origin: -10px center;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-title::before {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat {
		color: currentColor;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat span {
		position: relative;
		display: block;
		width: auto;
		min-width: 100px;
		text-align: right;
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat span::before {
		content: attr(data-hover);
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-cat span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-date {
		position: absolute;
		top: -35px;
		right: 0;
		left: auto;
		display: block;
		padding: 0;
		text-align: right;
		background: transparent;
		color: currentColor;
	}

	.hayler .showcase-portfolio.portfolio-list-view .clapat-item .item-date {
		text-align: right;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-date span {
		text-align: right;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-date span::after {
		content: counter(thumb, decimal-leading-zero) "";
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
		counter-increment: thumb;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-date span {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	/* Responsive */

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

		/* Thumb 3 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) .item-content {
			width: 66.6667%;
		}

		/* Thumb 4 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) .item-content {
			width: 66.6667%;
		}

		/* Thumb 7 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) .item-content {
			width: 66.6667%;
		}

		/* Thumb 8 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) .item-content {
			width: 66.6667%;
		}

	}

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

		.hayler .filters-container {
			padding-left: 0;
		}

		/* All Thumbs */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(n) .item-content {
			width: 100%;
		}
		
		.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		  	width: calc(50% - (2 * var(--thumbs-margins-width)));
		}

	}

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

		.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item {
			width: calc(100% - (2 * var(--thumbs-margins-width)));
		}
		
		.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		  	width: calc(100% - (2 * var(--thumbs-margins-width)));
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption {
			flex-wrap: wrap;
			align-content: center;
			gap: 0;
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-title {
			flex: 0 0 100%;
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-cat,
		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-date {
			flex: 0 0 50%;
		}

	}


/*------------------------------------------------------------------
    Shortcodes
-------------------------------------------------------------------*/

	/* Has Underline */

	.hayler .clone-underline::before,
	.hayler .clone-underline::after {
		bottom: 0.07em;
	}

	/* Marquee */

	.hayler .marquee-image {
		width: 1em;
		height: 1em;
	}	

	/* Flex List */

	.hayler .flex-list::before {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	/* Clock */

	.hayler .clock-widget {
		align-items: inherit;
		justify-content: center;
	}

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

		.hayler .clock-widget {
			flex-direction: row;
			gap: 4px;
		}

		.hayler .clock-label::after {
			content: ",";
		}

		.hayler .clock-time.heading-5 {
			font-family: var(--default-font-family);
			font-size: var(--default-body-font-size);
			line-height: var(--default-body-line-height);
			font-weight: var(--default-body-font-weight);
			letter-spacing: var(--default-body-letter-spacing);
		}

	}

	/* Background Pattern */

	.hayler .background-pattern {
		--checker-opacity: 0.1;
		--checker-size: 18px;
		--checker-color: color-mix(in srgb, currentColor calc(var(--checker-opacity) * 100%), transparent);
		background-color: transparent;
	}



/*------------------------------------------------------------------
    Global Office Selector Modal
-------------------------------------------------------------------*/

	.hayler .clapat-modal-container.clapat-modal-bottom:has(.office-selector-modal) {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: calc(100% - 48px);
		max-width: 760px;
		height: min(620px, calc(100% - 48px));
		max-height: calc(100% - 48px);
		margin: auto;
	}

	.hayler .clapat-modal-container:has(.office-selector-modal) .clapat-modal-wrapper {
		height: 100%;
		max-height: 100%;
	}

	.hayler .clapat-modal-container:has(.office-selector-modal) .clapat-modal-scroll {
		height: calc(100% - (var(--gap) * 2));
		max-height: none;
		margin-top: var(--gap);
		padding: 0;
	}

	.hayler .clapat-modal-container:has(.office-selector-modal) .clapat-modal-content {
		height: 100%;
	}
	
	.hayler .clapat-modal-container:has(.office-selector-modal) hr.animated-line {
		margin-bottom: 0;
	}

	.hayler .office-selector-modal h5 {
		margin-bottom: 0;
	}

	.hayler .office-selector-modal {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.hayler .office-selector-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: center;
		gap: 16px;
		flex: 1;
		margin-top: 0;
	}

	.hayler .office-selector-office {
		padding: 18px;
		border: 1px solid rgba(17, 20, 23, 0.14);
		border-radius: 6px;
	}

	.hayler .office-selector-title {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 8px;
		font-family: var(--font-primary);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		color: var(--color-black);
	}

	.hayler .office-selector-title img {
		display: block;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		object-fit: cover;
	}

	.hayler .office-selector-help {
		margin-bottom: 14px;
		font-size: 13px;
		line-height: 1.35;
		opacity: 0.66;
	}

	.hayler .office-selector-languages {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.hayler .office-selector-language.button-wrap {
		margin-top: 0;
	}

	.hayler .office-selector-language a {
		display: block;
		width: 100%;
		height: 100%;
	}

	.hayler .office-selector-language .button-icon img {
		display: block;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		object-fit: cover;
	}

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

		.hayler .office-selector-grid {
			grid-template-columns: 1fr;
		}

		.hayler .office-selector-office {
			padding: 16px;
		}

	}



/*------------------------------------------------------------------
    Global Spacing Rhythm
-------------------------------------------------------------------*/

	.hayler h1,
	.hayler h2,
	.hayler h3,
	.hayler h4,
	.hayler h5,
	.hayler h6,
	.hayler .heading-1,
	.hayler .heading-2,
	.hayler .heading-3,
	.hayler .heading-4,
	.hayler .heading-5,
	.hayler .heading-6 {
		margin-bottom: calc(var(--gap) * 0.85);
	}

	.hayler p {
		margin-bottom: calc(var(--gap) * 0.75);
	}

	.hayler .button-wrap,
	.hayler .button-box {
		margin-top: calc(var(--gap) * 0.5);
	}

	.hayler .showcase-portfolio {
		padding-top: calc(var(--vertical-gutter) * 0.35);
	}

	.hayler .showcase-portfolio.portfolio-list-view {
		padding-top: calc(var(--vertical-gutter) * 0.45);
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item {
		padding-top: calc(var(--thumbs-gap-vertical) * 0.45);
		padding-bottom: calc(var(--thumbs-gap-vertical) * 0.55);
	}

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

		.hayler h1,
		.hayler h2,
		.hayler h3,
		.hayler h4,
		.hayler h5,
		.hayler h6,
		.hayler .heading-1,
		.hayler .heading-2,
		.hayler .heading-3,
		.hayler .heading-4,
		.hayler .heading-5,
		.hayler .heading-6,
		.hayler p {
			margin-bottom: calc(var(--gap) * 0.75);
		}

	}



/*------------------------------------------------------------------
    Text Perks Carousel
-------------------------------------------------------------------*/

	.hayler .card-scroll-carousel {
		position: relative;
		left: 50%;
		width: calc(100vw - var(--scroll-bar-w));
		max-width: 100vw;
		min-height: calc(100 * var(--dvh, 1vh));
		margin-left: calc(-50vw + var(--scroll-bar-w) / 2);
		overflow: hidden;
		background-color: #111417;
		color: #F4F7F4;
		z-index: 20;
		box-sizing: border-box;
	}

	.hayler .card-scroll-carousel-stage {
		position: relative;
		z-index: 2;
		width: 100%;
		min-height: calc(100 * var(--dvh, 1vh));
		overflow: hidden;
		background-color: #111417;
	}

	.hayler .card-scroll-carousel .cursor-background-reveal {
		z-index: 1;
		color: #F4F7F4;
		opacity: 1;
	}

	.hayler .card-scroll-carousel-pin {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 100%;
		min-height: calc(100 * var(--dvh, 1vh));
		overflow: hidden;
	}

	.hayler .card-scroll-carousel-track {
		display: flex;
		align-items: stretch;
		gap: calc(var(--gap) * 1.2);
		width: max-content;
		padding: 0 12vw;
		will-change: transform;
	}

	.hayler .card-scroll-carousel-track .card-scroll-card {
		flex: 0 0 clamp(320px, 30vw, 460px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: clamp(420px, 48vh, 560px);
		padding: 34px;
		background-color: #54b4677d;
		border: 1px solid rgba(244, 247, 244, 0.28);
		border-radius: 3px;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
		color: #F4F7F4;
		box-sizing: border-box;
	}

	.hayler .card-scroll-carousel-track .card-scroll-card-kicker {
		display: block;
		margin-bottom: 48px;
		font-family: var(--primary-font-family);
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		color: #F4F7F4;
	}

	.hayler .card-scroll-carousel-track .card-scroll-card h4 {
		flex-grow: 1;
		margin-bottom: 24px;
		color: #F4F7F4;
	}

	.hayler .card-scroll-carousel-track .card-scroll-card p {
		margin-bottom: 18px;
		color: #F4F7F4;
	}

	.hayler .card-scroll-carousel-track .card-scroll-card p:last-child {
		margin-bottom: 0;
	}

	.hayler .card-scroll-carousel-footer {
		z-index: 3;
		opacity: 1;
		color: #F4F7F4;
		pointer-events: auto;
	}

	.hayler .card-scroll-carousel-footer .slider-footer-left,
	.hayler .card-scroll-carousel-footer .slider-footer-center,
	.hayler .card-scroll-carousel-footer .slider-footer-right,
	.hayler .card-scroll-carousel-footer .progress-info-fill,
	.hayler .card-scroll-carousel-footer .progress-info-empty,
	.hayler .card-scroll-carousel-footer .cp-buttons-caption,
	.hayler .card-scroll-carousel-footer .info-text {
		color: #F4F7F4;
	}

	.hayler .card-scroll-carousel-footer .progress-info-fill,
	.hayler .card-scroll-carousel-footer .progress-info-empty {
		-webkit-text-fill-color: rgba(244, 247, 244, 0.18);
		background-image: linear-gradient(#F4F7F4, #F4F7F4);
	}

	.hayler .card-scroll-carousel-footer .clapat-slider-navigation {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.hayler .card-scroll-carousel-footer .button-wrap {
		pointer-events: auto;
	}

	.hayler .card-scroll-carousel-stage {
		cursor: grab;
		touch-action: pan-y;
	}

	.hayler .card-scroll-carousel-stage.is-dragging {
		cursor: grabbing;
	}

	.hayler .card-scroll-carousel-stage.is-dragging .card-scroll-carousel-track {
		pointer-events: none;
	}

	.hayler .card-scroll-carousel + .pin-spacer {
		background-color: #111417;
	}

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

		.hayler .card-scroll-carousel-track {
			gap: 24px;
			padding: 0 24px;
		}

		.hayler .card-scroll-carousel-track .card-scroll-card {
			flex-basis: calc(100vw - 48px);
			min-height: 460px;
			padding: 26px;
		}

		.hayler .card-scroll-carousel-track .card-scroll-card-kicker {
			margin-bottom: 34px;
		}

	}



/*------------------------------------------------------------------
    Uniform Team Grid
-------------------------------------------------------------------*/

	.hayler .team-grid-section {
		--team-card-gap-x: calc(var(--gap) * 1.5);
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--thumbs-gap-vertical) var(--team-card-gap-x);
	}

	.hayler .team-grid-section .columns-group {
		display: contents;
	}

	.hayler .team-grid-section .columns-group > div:not(:has(.single-team-member)) {
		display: none;
	}

	.hayler .team-grid-section .columns-group > div:has(.single-team-member) {
		display: block;
		flex: 0 0 calc((100% - (2 * var(--team-card-gap-x))) / 3);
		width: calc((100% - (2 * var(--team-card-gap-x))) / 3);
		max-width: calc((100% - (2 * var(--team-card-gap-x))) / 3);
	}

	.hayler .team-grid-section .single-team-member {
		width: 100%;
		aspect-ratio: 4 / 5;
	}

	.hayler .team-grid-section .single-team-member > img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}

	.hayler .team-grid-section .single-team-member .team-caption {
		width: 100%;
	}

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

		.hayler .team-grid-section .columns-group > div:has(.single-team-member) {
			flex-basis: calc((100% - var(--team-card-gap-x)) / 2);
			width: calc((100% - var(--team-card-gap-x)) / 2);
			max-width: calc((100% - var(--team-card-gap-x)) / 2);
		}

	}

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

		.hayler .team-grid-section {
			row-gap: calc(var(--thumbs-gap-vertical) * 0.75);
		}

		.hayler .team-grid-section .columns-group > div:has(.single-team-member) {
			flex-basis: 100%;
			width: 100%;
			max-width: 100%;
		}

	}



/*------------------------------------------------------------------
    Uniform ClaPat Portfolio
-------------------------------------------------------------------*/

	.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio:not(.portfolio-list-view) .clapat-item,
	.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		align-items: flex-start;
		justify-content: flex-start;
		width: calc(33.3333% - (2 * var(--thumbs-margins-width)));
	}

	.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(n) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(n)::before {
		content: "";
		display: block;
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(n) .item-content {
		width: 100%;
	}

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

		.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio:not(.portfolio-list-view) .clapat-item,
		.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
			width: calc(50% - (2 * var(--thumbs-margins-width)));
		}

	}

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

		.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio:not(.portfolio-list-view) .clapat-item,
		.hayler .showcase-portfolio-wrapper.content-full-width .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
			width: calc(100% - (2 * var(--thumbs-margins-width)));
		}

	}



/*------------------------------------------------------------------
    Hero Footer Phone Badge
-------------------------------------------------------------------*/

	.hayler .hero-footer-phone {
		display: inline-block;
		max-width: 100%;
		pointer-events: initial;
	}

	.hayler .hero-footer-badge {
		display: block;
		width: auto;
		height: auto;
		max-width: min(150px, 100%);
		max-height: 44px;
		object-fit: contain;
	}



/*------------------------------------------------------------------
    Contact Form
-------------------------------------------------------------------*/

	.hayler .contact-submit-native {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		clip-path: inset(50%);
		border: 0;
		padding: 0;
		margin: -1px;
	}

	.hayler #contactform #submit.disabled,
	.hayler #contactForm #submit.disabled {
		pointer-events: none;
	}

	.hayler #contactForm .required-field::after {
		content: "*";
		position: absolute;
		top: 12px;
		right: 0;
		color: #E51E21;
		font-size: 18px;
		font-weight: 700;
		line-height: 1;
		pointer-events: none;
	}

	.hayler #contactForm .required-field input,
	.hayler #contactForm .required-field textarea {
		padding-right: 24px;
	}

	.hayler #contactForm .contact-fields {
		gap: 15px;
	}

	.hayler #contactForm textarea {
		display: block;
		height: auto;
		min-height: calc(10em * 1.45 + 24px);
		line-height: 1.45;
		overflow-y: auto;
		resize: vertical;
	}

	.hayler #contactForm textarea + .input_label {
		top: auto;
		bottom: 0;
	}

	.hayler #contactForm .required-field:has(textarea)::after {
		top: 12px;
	}

	.hayler #contactForm .contact-submit-button.outline-solid:hover,
	.hayler #contactForm .contact-submit-button.outline-solid.is-submitting {
		background-color: #E51E21;
		border-color: #E51E21;
		color: var(--color-white);
	}

	.hayler #contactForm .contact-submit-button.reveal-icon.is-submitting .icon-wrap {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	.hayler #contactForm .contact-submit-button.reveal-icon.right.is-submitting a {
		-webkit-transform: translateX(-5px);
		transform: translateX(-5px);
		-webkit-transition: none;
		transition: none;
	}

	.hayler #contactForm .contact-submit-button.reveal-icon.right.is-submitting .text-wrap {
		padding-left: 22px;
		padding-right: 8px;
	}

	.hayler #contactForm .contact-submit-button.outline-solid:hover .button-text span,
	.hayler #contactForm .contact-submit-button.outline-solid:hover .button-icon i,
	.hayler #contactForm .contact-submit-button.outline-solid:hover .button-icon i::before,
	.hayler #contactForm .contact-submit-button.outline-solid.is-submitting .button-text span,
	.hayler #contactForm .contact-submit-button.outline-solid.is-submitting .button-icon i,
	.hayler #contactForm .contact-submit-button.outline-solid.is-submitting .button-icon i::before {
		color: var(--color-white);
		background-color: transparent;
		-webkit-filter: none;
		filter: none;
	}

	.hayler #contactForm .contact-alert {
		display: none;
		box-sizing: border-box;
		width: 100%;
		padding: 14px 18px;
		border: 1px solid transparent;
		border-radius: 4px;
		margin-top: 24px;
		font-size: 16px;
		line-height: 1.45;
	}

	.hayler #contactForm .contact-alert-success,
	.hayler #contactForm .contact-alert-error {
		display: block;
	}

	.hayler #contactForm .contact-alert-success {
		color: #0f5132;
		background-color: #d1e7dd;
		border-color: #badbcc;
	}

	.hayler #contactForm .contact-alert-error {
		color: #842029;
		background-color: #f8d7da;
		border-color: #f5c2c7;
	}

	.hayler .contact-phone-badge {
		display: inline-block;
		width: auto;
		height: auto;
		max-width: 170px;
		max-height: 50px;
		object-fit: contain;
		vertical-align: middle;
	}

	.hayler .contact-map {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 4px;
		margin-top: 18px;
		background-color: rgba(0, 0, 0, 0.08);
	}

	.hayler .contact-map iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
	}

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

		.hayler .contact-map {
			aspect-ratio: 16 / 10;
			margin-top: 18px;
		}

	}