/* Table of Content
====================
* Global variables
* General
* Page transitions
* Lenis
* Magic cursor
* Background noise
* Headings
* tt-Headings (custom headings)
* Content container
* Body inner
* Content wrap
* Page content
* tt-Section
* 404 error
* Header
* Main menu
* Page header
* Figure
* Forms
* Contact form
* Contact info
* Fancybox (lightbox plugin)
* tt-Image
* tt-video
* Buttons
* Big arrow
* tt-Clipper
* Text linear reveal
* Logo wall
* Horizontal accordion
* Portfolio preview list
* tt-Gallery
* Project info list
* Footer
* Scroll to top button
*/


/* ------------------------------------------------------------- *
 * Global variables
/* ------------------------------------------------------------- */

:root {
	/* General */
	--tt-main-color: #bf4a1a; /* Brand color. */
	--tt-dark-color: #121212;
	--tt-light-color: #efedea;

	--tt-bg-color: #0a0a0a;
	--tt-text-color: #efedea;
	--tt-text-muted-color: #8f8f8f;
	--tt-border-color: rgb(133 133 133 / 50%);

	--tt-linear-text-bg-color: rgb(255 255 255 / 20%); /* For linear text reveal effect (do not change it!). rgb(255 255 255 / 20%) */

	/* Fonts */
	--tt-body-font: 'Poppins', sans-serif; /* Body font. */
	--tt-alter-font: "Big Shoulders Display", sans-serif; /* Secondary/Alter font. */

	/* Page transition */
	--tt-page-trans-overlay-bg-color: #161616; /* Page transition overlay background color. #161616 */

	/* Cursor ball */
	--tt-ball-border-color: #666; /* Ball border color. #666 */
	--tt-ball-magnetic-color: var(--tt-main-color); /* Ball magnetic border color. */
	--tt-ball-bg-color: color-mix(in oklab, var(--tt-main-color) 93%, transparent); /* Ball view background color. */
	--tt-ball-color: #FFF; /* Ball view text color. #FFF */

	/* Links */
	--tt-link-color: #c93b00; /* Link color. #c93b00 */
	--tt-link-hover-color: #f5533a; /* Link hover color. #f5533a */

	/* Force to light color */
	--tt-force-to-light-color: #f3f3f3; /* If the element has a background image/video (page header, fullscreen slider, etc.), make all inner elements light (for better visibility). #f3f3f3 */
}


/* ------------------------------------------------------------- *
 * General
/* ------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
	padding: 0;
	margin: 0;
	/*-webkit-user-select: none;
	user-select: none;*/
}

body {
	position: relative;
	margin: 0;
	background-color: var(--tt-bg-color);
	line-height: 1.4;
	font-family: var(--tt-body-font);
	font-size: 19px;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	color: var(--tt-text-color);
	overflow-x: hidden;
}
main {
	display: block;
}

/* Site SEO navigation */
.site-breadcrumbs {
	position: relative;
	z-index: 3;
	padding-top: 108px;
	padding-bottom: 18px;
}

.site-breadcrumbs + #page-header {
	margin-top: -162px;
}

.site-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.4;
}

.site-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.site-breadcrumbs li:not(:last-child)::after {
	content: "/";
	opacity: 0.45;
}

.site-breadcrumbs a,
.site-breadcrumbs span {
	color: inherit;
}

.site-breadcrumbs a {
	opacity: 0.7;
}

.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus-visible {
	opacity: 1;
	color: var(--tt-main-color);
}

.contact-page-title {
	margin: 0 0 54px;
	font-size: clamp(52px, 8vw, 120px);
	line-height: 0.86;
}

.static-page-header {
	max-width: 1050px;
	margin-bottom: clamp(64px, 9vw, 130px);
}

.static-page-title {
	margin: 14px 0 28px;
	font-family: var(--tt-alter-font);
	font-size: clamp(58px, 9vw, 138px);
	font-weight: 700;
	line-height: 0.82;
	text-transform: uppercase;
}

.static-page-title--legal {
	font-family: var(--tt-body-font);
	font-size: clamp(28px, 8.7vw, 58px);
	line-height: 0.9;
	overflow-wrap: anywhere;
}

@media (min-width: 769px) {
	.static-page-title--legal {
		font-size: clamp(58px, 7vw, 100px);
	}
}

.static-page-lead {
	max-width: 850px;
	margin: 0;
	font-size: clamp(22px, 2.5vw, 36px);
	line-height: 1.25;
}

.static-page-content {
	max-width: 850px;
	margin-left: auto;
}

.static-page-body.has-side-cta {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(0, 850px);
	gap: clamp(50px, 8vw, 130px);
	align-items: start;
}

.static-page-body.has-side-cta .static-page-content {
	margin-left: 0;
}

.static-page-side-cta {
	padding-top: 10px;
}

.static-page-content h2 {
	margin: 60px 0 18px;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.1;
}

.static-page-content h2:first-child {
	margin-top: 0;
}

.static-page-content p,
.static-page-content li {
	line-height: 1.7;
}

.static-page-content code {
	font-size: 0.9em;
}

.tt-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 12px;
	font-size: 13px;
}

.related-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.related-project-card {
	display: flex;
	flex-direction: column;
	color: inherit;
}

.related-project-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 22px;
	object-fit: cover;
}

.related-project-card-category {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
}

.related-project-card-title {
	font-size: clamp(20px, 2vw, 30px);
	font-weight: 600;
	line-height: 1.2;
}

.related-project-card:hover .related-project-card-title {
	color: var(--tt-main-color);
}

.related-projects-all {
	display: inline-block;
	margin-top: 38px;
}

@media (max-width: 768px) {
	.related-projects-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.site-breadcrumbs {
		padding-top: 88px;
	}

	.site-breadcrumbs + #page-header {
		margin-top: -142px;
	}

	.static-page-body.has-side-cta {
		grid-template-columns: 1fr;
		gap: 58px;
	}

	.static-page-side-cta {
		padding-top: 0;
	}
}

p {
	margin: 0 0 24px;
	text-wrap: pretty;
}
@media (max-width: 480px) {
	p br {
		display: none;
	}
}

a {
	background-color: transparent;
	color: var(--tt-link-color);
	text-decoration: none;
	outline: none
}
a:hover,
a:focus {
	color: var(--tt-link-hover-color);
}
p a {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	border-style: none;
}

.site-icon-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.site-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.125em;
}

strong {
	font-weight: bold;
	font-weight: 600;
}

section {
	position: relative;
}

button:focus {
	outline: none;
}

/* Selection */
::selection {
	color: var(--tt-light-color);
	-webkit-text-fill-color: var(--tt-light-color);
	text-shadow: none;
	background: var(--tt-main-color);
}
::-moz-selection {
	color: var(--tt-light-color);
	-webkit-text-fill-color: var(--tt-light-color);
	text-shadow: none;
	background: var(--tt-main-color); /* Firefox */
}
::-webkit-selection {
	color: var(--tt-light-color);
	-webkit-text-fill-color: var(--tt-light-color);
	text-shadow: none;
	background: var(--tt-main-color); /* Safari */
}

/* Disable scroll */
.tt-no-scroll {
	overflow-y: hidden !important;
}

/* Text uppercase */
.tt-text-uppercase {
	text-transform: uppercase;
	line-height: 1.2;
}

/* Secondary font */
.tt-font-alter {
	font-family: var(--tt-alter-font);
	font-weight: 600;
}


/* ------------------------------------------------------------- *
 * Page transitions
/* ------------------------------------------------------------- */

#tt-page-transition {
	display: none;
}
body.tt-transition #tt-page-transition {
	position: relative;
	display: block;
	z-index: 99999;
}

/* Transition overlay */
body.tt-transition .tt-ptr-overlay-top {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 50%;
	height: 100vh;
	height: 100svh;
	background-color: var(--tt-page-trans-overlay-bg-color);
	z-index: 1;
}
body.tt-transition .tt-ptr-overlay-bottom {
	position: fixed;
	display: block;
	top: 0;
	right: 0;
	width: 50%;
	height: 100vh;
	height: 100svh;
	background-color: var(--tt-page-trans-overlay-bg-color);
	z-index: 1;
}

/* Transition preloader */
body.tt-transition .tt-ptr-preloader {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
}

body.tt-transition .tt-ptr-prel-content {
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	font-weight: 600;
	color: #444;
}

.tt-ptr-prel-image {
	width: auto;
	max-height: 144px; /* Increased 2x for the page transition preloader logo. */
	opacity: .7; /* You may need to change the opacity as well! */
}


/* ------------------------------------------------------------- *
 * Lenis - smooth scroll plugin
 * Source: https://github.com/studio-freight/lenis
/* ------------------------------------------------------------- */

html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	overflow: clip;
	padding-right: 10px;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

/* Remove scrollbar */
/*body:not(.is-mobile).tt-smooth-scroll {
	overflow: hidden;
}*/


/* ------------------------------------------------------------- *
 * Magic cursor
/* ------------------------------------------------------------- */

#magic-cursor {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	pointer-events: none;
	z-index: 99999;
	opacity: 0;
}
body.tt-magic-cursor #magic-cursor {
	display: block;
}

#ball {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	border-style: solid;
	border-radius: 50%;
	border-color: var(--tt-ball-border-color);
	/* Note: border width handled through JS */
}


/* Ball view
============= */
#ball.ball-view {
	background-color: var(--tt-ball-bg-color);
	text-align: center;
	text-transform: uppercase;
	font-family: var(--tt-alter-font);
	font-size: 21px;
	font-weight: 600;
	color: var(--tt-ball-color);
	line-height: 1;
	letter-spacing: 1px;
	border-color: var(--tt-ball-bg-color);
}
#ball .ball-view-inner {
	padding: 0 5px;
	opacity: 0;
	visibility: hidden;
	transform: scale(0);
}
/* Magnetic cursor
=================== */
.magnetic-wrap {
	position: relative;
	display: inline-block;
}
#ball.magnetic-active {
	border-color: var(--tt-ball-magnetic-color);
}


/* --------------------------------------------------------------- *
 * Background noise (effect only if <body> has class "tt-noise"!)
/* --------------------------------------------------------------- */

.tt-bg-noise {
	display: none;
}
body.tt-noise .tt-bg-noise {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
body.tt-noise .tt-bg-noise:before {
	position: absolute;
	content: '';
	top: -10rem;
	left: -10rem;
	width: calc(100% + 20rem);
	height: calc(100% + 20rem);
	z-index: 0;
	pointer-events: none;
	background-image: url(../img/bg-noise.png);
	background-position: 50%;
	animation: BgNoise 1s steps(2) infinite;
}
@keyframes BgNoise {
	0% { transform: translate3d(0, 9rem, 0) }
	10% { transform: translate3d(-1rem, -4rem, 0) }
	20% { transform: translate3d(-8rem, 2rem, 0) }
	30% { transform: translate3d(9rem, -9rem, 0) }
	40% { transform: translate3d(-2rem, 7rem, 0) }
	50% { transform: translate3d(-9rem, -4rem, 0) }
	60% { transform: translate3d(2rem, 6rem, 0) }
	70% { transform: translate3d(7rem, -8rem, 0) }
	80% { transform: translate3d(-9rem, 1rem, 0) }
	90% { transform: translate3d(6rem, -5rem, 0) }
	to { transform: translate3d(-7rem, 0, 0) }
}



/* ------------------------------------------------------------- *
 * Headings
/* ------------------------------------------------------------- */

h1, h2, h3, h5, h6 {
	margin-top: 0px;
	margin-bottom: 25px;
	font-weight: bold;
	font-weight: 500;
	color: inherit;
	text-wrap: balance;
}
h1, h2, h3 {
	line-height: 1.1;
}
h5, h6 {
	line-height: 1.2;
}

h1 { font-size: clamp(38px, 5vw, 78px); }
h2 { font-size: clamp(34px, 4vw, 62px); }
h3 { font-size: clamp(30px, 3vw, 52px); }
h5 { font-size: clamp(24px, 2vw, 30px); }
h6 { font-size: 24px; }

h1.tt-text-uppercase,
h2.tt-text-uppercase,
h3.tt-text-uppercase {
	line-height: 0.95;
}
h5.tt-text-uppercase,
h6.tt-text-uppercase {
	line-height: 1;
}


/* ------------------------------------------------------------- *
 * tt-Headings (custom headings)
/* ------------------------------------------------------------- */

.tt-heading {
	position: relative;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 40px;
	z-index: 9;
}
@media (max-width: 991px) {
	.tt-heading {
		margin-bottom: 30px;
	}
}
.tt-wrap .tt-heading {
	padding-left: 0;
	padding-right: 0;
}

/* tt-Headings title */
.tt-heading-title {
	margin: 0;
	text-transform: uppercase;
	font-family: var(--tt-alter-font);
	font-size: clamp(32px, 3vw, 42px);
	font-weight: bold;
	font-weight: 600;
	line-height: 1;
}

/* tt-Headings subtitle */
.tt-heading-subtitle {
	margin: 0 0 30px 0;
	text-transform: uppercase;
	font-size: calc(15px + 0.1vw);
	font-weight: bold;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
}
.tt-heading-title + .tt-heading-subtitle {
	margin: 15px 0 0 0 !important;
}

/* tt-Headings paragraph */
.tt-heading-title + p,
.tt-heading-subtitle + p {
	margin-top: 30px;
}
.tt-heading > p:last-child {
	margin-bottom: 0 !important;
}


/* tt-Headings positions center
================================ */
.tt-heading.tt-heading-center {
	display: flex;
	text-align: center;
	flex-direction: column;
	align-items: center;
	text-align: center;
}


/* tt-Headings sizes
===================== */
/* size xlg */
.tt-heading.tt-heading-xlg .tt-heading-title {
	font-size: clamp(52px, 5vw, 82px);
}
@media (min-width: 992px) {
	.tt-heading.tt-heading-xlg .tt-heading-subtitle {
		margin-bottom: 50px;
	}
	.tt-heading.tt-heading-xlg .tt-heading-title + p,
	.tt-heading.tt-heading-xlg .tt-heading-subtitle + p {
		margin-top: 30px;
	}
}

/* size xxlg */
.tt-heading.tt-heading-xxlg .tt-heading-title {
	font-size: clamp(52px, 6vw, 110px);
}
@media (min-width: 992px) {
	.tt-heading.tt-heading-xxlg .tt-heading-subtitle {
		margin-bottom: 50px;
	}
	.tt-heading.tt-heading-xxlg .tt-heading-title + p,
	.tt-heading.tt-heading-xxlg .tt-heading-subtitle + p {
		margin-top: 30px;
	}
}

/* size xxxlg */
.tt-heading.tt-heading-xxxlg .tt-heading-title {
	font-size: clamp(64px, 10vw, 187px);
}
@media (min-width: 992px) {
	.tt-heading.tt-heading-xxxlg .tt-heading-subtitle {
		margin-bottom: 50px;
	}
	.tt-heading.tt-heading-xxxlg .tt-heading-title + p,
	.tt-heading.tt-heading-xxxlg .tt-heading-subtitle + p {
		margin-top: 30px;
	}
}


/* ------------------------------------------------------------- *
 * Content container
/* ------------------------------------------------------------- */

.tt-wrap {
	max-width: 1282px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 992px) and (max-width: 1360px) {
	.tt-wrap {
		padding-left: 7vw;
		padding-right: 7vw;
	}
}


/* ------------------------------------------------------------- *
 * Body inner
/* ------------------------------------------------------------- */

#body-inner {
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: 100vh;
	min-height: 100svh;
}


/* ------------------------------------------------------------- *
 * Content wrap
/* ------------------------------------------------------------- */

#tt-content-wrap {
	position: relative;
	overflow: hidden;
}


/* ------------------------------------------------------------- *
 * Page content
/* ------------------------------------------------------------- */

/* ------------------------------------------------------------- *
 * tt-Section
/* ------------------------------------------------------------- */

.tt-section {
	position: relative;
	padding: 80px 0;
}
@media (max-width: 768px) {
	.tt-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* If height-vh classes in use */
.tt-section[class*="height-vh"] {
	display: flex;
	align-items: center;
	height: 100%;
}


/* tt-section inner
==================== */
.tt-section-inner {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


/* ------------------------------------------------------------- *
 * 404 error
/* ------------------------------------------------------------- */

.tt-404-error {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	padding: 120px 0;
}
.tt-404-error-title {
	margin: 0;
	text-transform: uppercase;
	text-align: center;
	font-family: var(--tt-alter-font);
	font-size: clamp(72px, 12vw, 230px);
	font-weight: bold;
	font-weight: 700;
	line-height: 0.95;
}
.tt-404-error-subtitle {
	margin-bottom: 40px;
	text-transform: uppercase;
	font-size: calc(15px + 0.1vw);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
}
.tt-404-error-description {
	max-width: 700px;
	margin-top: 30px;
	text-transform: uppercase;
	text-align: center;
	font-weight: normal;
	line-height: 1.2;
}


/* ------------------------------------------------------------- *
 * Header
/* ------------------------------------------------------------- */

#tt-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
}

/* Hide header on scroll down and show on scroll up */
#tt-header.tt-header-scroll {
	position: fixed;
	transform: translate3d(0, 0, 0);
	transition: transform .4s ease-in-out;
}
body:not(.tt-m-menu-open) #tt-header.tt-header-scroll.tt-fly-up {
	transform: translate3d(0, -101%, 0);
}

/* Header inner */
.tt-header-inner {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: margin .3s;
}
@media (max-width: 1024px) {
	.tt-header-inner {
		margin-top: 0;
	}
}

.tt-header-inner:not(.tt-wrap) {
	padding-left: 3.5%;
	padding-right: 3.5%;
}

/* Header filled */
#tt-header.tt-filled {
	border-bottom: 1px solid var(--tt-border-color);
}
#tt-header::before {
	position: absolute;
	content: "";
	inset: 0;
	z-index: -1;
	transition: background-color .3s;
}
#tt-header.tt-filled::before {
	background-color: var(--tt-bg-color);
}

@media (min-width: 1025px) {
	#tt-header.tt-filled .tt-header-inner {
		margin-top: 0;
	}
}
#tt-header.tt-filled .tt-bg-noise {
	z-index: 0;
}
#tt-header:not(.tt-filled) .tt-bg-noise {
	display: none;
}

/* Header columns */
.tt-header-col {
	display: flex;
	align-items: center;
}

.tt-header-col-left {
}
.tt-header-col-center {
	margin-left: auto;
}
.tt-header-col-right {
}
@media (max-width: 1024px) {
	.tt-header-col-right {
		flex-direction: row-reverse;
		justify-content: flex-start;
	}
}


/* Header layout-2
=================== */
#tt-header.tt-header-alter .tt-header-inner {
	justify-content: space-between;
}
#tt-header.tt-header-alter .tt-header-col-left {
	flex: 1;
	justify-content: flex-start;
}
#tt-header.tt-header-alter .tt-header-col-center {
	flex: 3;
	justify-content: center;
	margin-left: 0;
}
#tt-header.tt-header-alter .tt-header-col-right {
	flex: 1;
	justify-content: flex-start;
	flex-direction: row-reverse;
	margin-left: 0;
}
@media (max-width: 1024px) {
	#tt-header.tt-header-alter .tt-header-col-center {
		flex: 0;
	}
}


/* Header logo
=============== */
.tt-logo {
	position: relative;
	margin-right: auto;
	line-height: 1;
	pointer-events: initial;
	z-index: 9;
}
.tt-logo a {
	display: inline-block;
	font-size: 21px;
	color: #222;
}
.tt-logo img {
	max-height: 48px; /* You may need to change the img height to match your logo type! */
	width: auto;
}
.tt-logo-dark{
	display: none;
}

/* Logo for small screens */
@media (max-width: 1024px) {
	.tt-logo img {
		max-height: 38px; /* You may need to change the img height to match your logo type! */
	}
}


/* Header button
================= */
#tt-header .tt-magnetic-btn {
	margin: 0;
}
#tt-header .tt-btn {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 40px;
	padding-left: 24px;
	padding-right: 24px;
	height: 42px;
	font-size: 14px;
}


/* ------------------------------------------------------------- *
 * Main menu
/* ------------------------------------------------------------- */

/* Main menu (desktop)
======================= */
@media (min-width: 1025px) {
	.tt-main-menu {
		pointer-events: initial;
	}
	.tt-main-menu-content {
	}

	.tt-main-menu-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.tt-main-menu-list > li {
		margin-right: 55px;
	}
	.tt-main-menu-list > li:first-child {
		margin-left: 0;
		padding-left: 0;
	}
	.tt-main-menu-list > li:last-child {
		margin-right: 0;
		padding-right: 0;
	}
	.tt-main-menu-list > li > a {
		position: relative;
		display: block;
		padding: 4px 0;
		text-transform: uppercase;
		font-family: var(--tt-body-font);
		font-size: 18px;
		font-weight: bold;
		font-weight: 500;
		color: var(--tt-text-color);
		letter-spacing: 0.04em;
		transition: color 0.3s, opacity 0.3s;
	}

	/* Main menu hover */
	.tt-main-menu-list > li > a::before {
		position: absolute;
		display: block;
		content: "";
		bottom: 0;
		left: 0;
		width: 0;
		height: 2px;
		background-color: var(--tt-main-color);
		transition: width .3s;
	}
	.tt-main-menu-list > li > a:hover::before {
		width: 100%;
		transition-delay: .2s;
	}
	/* Main menu active */
	.tt-main-menu-list > li.active > a::before {
		width: 100%;
	}
}
@media (max-width: 1400px) {
.tt-main-menu-list > li {
		margin-right: 30px;
	}
}


/* Mobile menu (for main menu)
================================== */
@media (min-width: 1025px) {
	#tt-m-menu-toggle-btn-wrap { /* Hide on desktop */
		display: none;
	}
}

/* Show mobile menu on small screens only */
@media (max-width: 1024px) {
	.tt-main-menu {
		pointer-events: initial;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100svh;
		background-color: var(--tt-bg-color);
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
	}
	.tt-main-menu-holder {
		position: relative;
		height: 100%;
		margin-right: -17px;
		overflow-y: scroll;
		z-index: 2;
	}
	body.is-mobile .tt-main-menu-holder {
	}
	.tt-main-menu-inner {
		display: table;
		width: 100%;
		height: 100%;
		padding: 20% 7%;
	}
	.tt-main-menu-content {
		height: 100%;
		display: table-cell;
		vertical-align: middle;
	}

	/* Mobile menu list */
	.tt-main-menu-list {
		display: inline-block;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.tt-main-menu-list > li {
		margin-top: 12px;
		margin-bottom: 12px;
	}
	.tt-main-menu-list > li:first-child {
		margin-top: 0;
	}
	.tt-main-menu-list > li:last-child {
		margin-bottom: 0;
	}
	.tt-main-menu-list > li > a {
		position: relative;
		display: inline-block;
		text-transform: uppercase;
		font-family: var(--tt-body-font);
		font-size: 34px;
		font-weight: bold;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0.03em;
		color: var(--tt-text-color);
	}
	@media (max-width: 767px) {
		.tt-main-menu-inner {
			padding-top: 35%;
			padding-bottom: 35%;
		}
		.tt-main-menu-list > li > a {
			font-size: 28px;
		}
	}

	/* Mobile menu list active (master parent) */
	.tt-main-menu-list > li.active > a {
		color: var(--tt-text-color);
	}

	/* Mobile menu toggle button */
	#tt-m-menu-toggle-btn-wrap {
		position: relative;
		display: flex;
		align-items: center;
		pointer-events: initial;
		cursor: pointer;
		z-index: 9;
	}
	.tt-m-menu-toggle-btn-holder {
		float: left;
	}

	.tt-m-menu-toggle-btn {
		position: relative;
		display: block;
		width: 40px;
		height: 40px;
	}
	.tt-m-menu-toggle-btn span {
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		height: 2px;
		width: 20px;
		background-color: transparent;
		transform: translate(-50%, -50%);
		transition: all 0.3s ease-in-out;
	}
	.tt-m-menu-toggle-btn span::before,
	.tt-m-menu-toggle-btn span::after {
		position: absolute;
		display: block;
		content: '';
		height: 2px;
		width: 20px;
		background-color: var(--tt-text-color);
		transition: all 0.3s ease-in-out;
	}
	.tt-m-menu-toggle-btn span::before {
		top: -4px;
	}
	.tt-m-menu-toggle-btn span::after {
		top: auto;
		bottom: -4px;
	}

	/* Toggle button text */
	.tt-m-menu-toggle-btn-text {
		float: left;
		padding-right: 2px;
		overflow: hidden;
		text-transform: uppercase;
		font-family: var(--tt-alter-font);
		text-align: right;
		font-size: 21px;
		font-weight: bold;
		font-weight: 600;
		color: var(--tt-text-color);
		letter-spacing: 1px;
	}
	body.tt-m-menu-open .tt-m-menu-toggle-btn-text .tt-m-menu-text-menu {
		display: none;
	}

	/* Toggle button close */
	body.tt-m-menu-open .tt-m-menu-toggle-btn span {
		width: 20px;
		background-color: transparent;
	}
	body.tt-m-menu-open .tt-m-menu-toggle-btn span::before {
		top: 0;
		width: 20px;
		transform: rotate(45deg);
	}
	body.tt-m-menu-open .tt-m-menu-toggle-btn span::after {
		bottom: 0;
		width: 20px;
		transform: rotate(-45deg);
	}

	.tt-m-menu-toggle-btn-text .tt-m-menu-text-close {
		display: none;
	}
	body.tt-m-menu-open .tt-m-menu-toggle-btn-text .tt-m-menu-text-close {
		display: block;
	}

	/* Disable menu toggle button click until the animations last */
	body.tt-m-menu-toggle-no-click #tt-m-menu-toggle-btn-wrap {
		pointer-events: none;
	}

	/* Align mobile menu to center */
	.tt-main-menu.tt-m-menu-center .tt-main-menu-content {
		text-align: center;
	}
}


/* ------------------------------------------------------------- *
 * Page header
/* ------------------------------------------------------------- */

#page-header {
	position: relative;
	overflow: hidden;
}

.page-header-inner {
	width: 100%;
	padding-top: 240px;
	padding-bottom: 180px;
}
.page-header-inner:not(.tt-wrap) {
	padding-left: 10vw;
	padding-right: 10vw;
}
@media (max-width: 1500px) {
	.page-header-inner {
		padding-top: 200px;
		padding-bottom: 180px;
		padding-left: 120px;
		padding-right: 120px;
	}
}
@media (max-width: 768px) {
	.page-header-inner {
		padding-top: 140px;
		padding-bottom: 140px;
		padding-left: 7vw;
		padding-right: 20px;
	}
}


/* Page header image
===================== */
.ph-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}
.ph-image-inner {
	width: 100%;
	height: 100%;
	will-change: transform;
}
.ph-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
[class*="ph-image-cover-"] .ph-image-inner::before {
	position: absolute;
	display: block;
	content: "";
	top: -1px;
	left: -1px;
	bottom: -1px;
	right: -1px;
	background-color: #040404;
	z-index: 1;
	opacity: 0;
}
.ph-image-cover-4 .ph-image-inner::before { opacity: .4; }

/* Image black & white */
.ph-image.ph-image-grayscale {
	filter: grayscale(1);
}


/* Page header video
===================== */
.ph-video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}
.ph-video-inner {
	width: 100%;
	height: 100%;
	will-change: transform;
}
.ph-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

[class*="ph-video-cover-"] .ph-video-inner::before {
	position: absolute;
	display: block;
	content: "";
	top: -1px;
	left: -1px;
	bottom: -1px;
	right: -1px;
	background-color: #040404;
	z-index: 1;
	opacity: 0;
}
.ph-video-cover-1 .ph-video-inner::before { opacity: .1; }

/* Video black & white */
.ph-video.ph-video-grayscale {
	filter: grayscale(1);
}


/* Page header caption
======================= */
/* Page header caption subtitle */
.ph-caption-subtitle {
	margin-bottom: 40px;
	text-transform: uppercase;
	font-size: calc(15px + 0.2vw);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
}

/* Page header caption title */
.ph-caption-title {
	margin: 0;
	text-transform: uppercase;
	font-family: var(--tt-alter-font);
	font-size: clamp(36px, 3.75vw, 62px);
	font-weight: bold;
	font-weight: 600;
	line-height: 0.95;
}
@media (max-width: 414px) {
	.ph-caption-title {
		font-size: 41px;
	}
}

/* Page header caption description */
.ph-caption-description {
	margin-top: 30px;
	text-transform: uppercase;
	font-size: 19px;
	font-weight: normal;
	line-height: 1.2;
}
@media (max-width: 480px) {
	.ph-caption-description br {
		display: none;
	}
}

/* Page header caption sizes */
#page-header.ph-cap-xlg .ph-caption-title {
	font-size: clamp(44px, 6vw, 99px);
}
#page-header.ph-cap-xxxxlg .ph-caption-title {
	font-size: clamp(48px, 9vw, 173px);
	line-height: 0.9;
}


/* Page header mask
==================== */
body.ph-mask-on .page-header-inner:not(.ph-mask) .ph-caption {
	display: inline-flex;
	cursor: default;
}

.ph-mask {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--tt-main-color);
	padding-left: 0;
	padding-right: 0;
	color: var(--tt-dark-color);
	pointer-events: none;
	clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
	transition: clip-path .12s;
	will-change: clip-path;
}
body.ph-mask-active .ph-mask {
	clip-path: circle(clamp(100px, 13vw, 230px) at var(--x, 50%) var(--y, 50%));
}

.ph-mask-inner {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}
@media (max-width: 1500px) {
	.ph-mask-inner {
		padding-left: 120px;
		padding-right: 120px;
	}
}
@media (max-width: 768px) {
	.ph-mask-inner {
		padding-left: 7vw;
		padding-right: 20px;
	}
}

#page-header.ph-center .ph-mask-inner {
	padding-left: 0;
	padding-right: 0;
}

/* Disable mask on mobile devices */
body.is-mobile .ph-mask {
	display: none !important;
}


/* Page header center
====================== */
#page-header.ph-center .page-header-inner {
	display: flex;
	justify-content: center;
}

@media (max-width: 1500px) {
	#page-header.ph-center .page-header-inner {
		padding-left: 100px;
		padding-right: 100px;
	}
}
@media (max-width: 768px) {
	#page-header.ph-center .page-header-inner {
		padding-left: 15px;
		padding-right: 15px;
	}
}

#page-header.ph-center .ph-caption {
	text-align: center;
}
#page-header.ph-center .ph-caption-description {
	margin-left: auto;
	margin-right: auto;
}
#page-header.ph-center .ph-mask-inner {
	justify-content: center;
}

/* Page header custom right layout */
#page-header.ph-company-hero .page-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
}
#page-header.ph-company-hero .ph-caption {
	width: min(100%, 760px);
	flex: 0 1 760px;
	text-align: left;
}
#page-header.ph-company-hero .ph-hero-cta {
	flex: 0 0 auto;
	padding-bottom: 10px;
}
#page-header.ph-company-hero .ph-caption-description {
	margin-top: 24px;
	margin-right: auto;
	font-size: 16px;
	line-height: 1.45;
	text-transform: none;
}
#page-header.ph-company-hero .ph-mask-inner {
	justify-content: flex-start;
}
#page-header.ph-company-hero .ph-caption-title {
	font-size: clamp(42px, 4.8vw, 92px);
	line-height: 0.98;
}
@media (max-width: 1500px) {
	#page-header.ph-company-hero .page-header-inner {
		padding-left: 100px;
		padding-right: 100px;
	}
}
@media (max-width: 991px) {
	#page-header.ph-company-hero .ph-caption {
		width: min(100%, 620px);
	}
	#page-header.ph-company-hero .ph-hero-cta {
		padding-bottom: 0;
	}
	#page-header.ph-company-hero .ph-caption-title {
		font-size: clamp(36px, 7vw, 64px);
	}
	#page-header.ph-company-hero .ph-caption-description {
		font-size: 15px;
	}
}
@media (max-width: 768px) {
	#page-header.ph-company-hero .page-header-inner {
		flex-direction: column;
		align-items: flex-start;
		padding-left: 15px;
		padding-right: 15px;
	}
	#page-header.ph-company-hero .ph-caption {
		text-align: left;
		width: 100%;
	}
	#page-header.ph-company-hero .ph-hero-cta {
		margin-top: 12px;
	}
	#page-header.ph-company-hero .ph-caption-description {
		margin-right: 0;
	}
#page-header.ph-company-hero .ph-mask-inner {
		justify-content: flex-start;
	}
}

/* Company about section */
.company-about-section .tt-heading.tt-heading-xlg .tt-heading-title {
	font-size: clamp(36px, 3.1vw, 54px);
}
.company-about-section .tt-text-uppercase {
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: 0.05em;
}
.company-about-section .text-xxlg {
	font-size: clamp(20px, 1.7vw, 28px);
	line-height: 1.28;
}
.company-about-section .tt-btn {
	font-size: 15px;
}
.tt-heading.section-heading-compact .tt-heading-title {
	font-size: clamp(34px, 3vw, 52px);
	line-height: 1;
}
.tt-heading.contact-heading .tt-heading-title {
	font-size: clamp(42px, 4.8vw, 92px);
	line-height: 0.98;
}
@media (max-width: 991px) {
	.company-about-section .tt-heading.tt-heading-xlg .tt-heading-title {
		font-size: clamp(30px, 7vw, 42px);
	}
	.company-about-section .tt-text-uppercase {
		font-size: 13px;
	}
	.company-about-section .text-xxlg {
		font-size: clamp(18px, 4.8vw, 24px);
	}
	.tt-heading.section-heading-compact .tt-heading-title {
		font-size: clamp(28px, 6vw, 40px);
	}
	.tt-heading.contact-heading .tt-heading-title {
		font-size: clamp(36px, 7vw, 64px);
	}
}


/* Page header full height
=========================== */
@media (min-width: 1025px) {
	#page-header.ph-full {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 100vh;
		min-height: 100svh;
	}
	#page-header.ph-full .page-header-inner {
		padding-top: 150px;
		padding-bottom: 80px;
	}
}
@media (max-width: 1024px) {
	#page-header.ph-full-m {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 100vh;
		min-height: 100svh;
	}
	#page-header.ph-full-m .page-header-inner {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}


/* If the page header background image/video exist (make all elements light for better visibility)
=================================================== */
body.ph-image-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled),
body.ph-video-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) {
	color: var(--tt-force-to-light-color);
}

/* Make logo light */
body.ph-image-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-light,
body.ph-video-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-light {
	display: block;
}
body.ph-image-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-dark,
body.ph-video-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-dark {
	display: none;
}

/* Make menu items light (for desctop only) */
@media (min-width: 1025px) {
	body.ph-image-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > a,
	body.ph-video-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > a {
		color: var(--tt-force-to-light-color);
	}
}

/* Make mobile menu trigger light */
body.ph-image-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn-text,
body.ph-video-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn-text {
	color: var(--tt-force-to-light-color);
}
body.ph-image-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::before,
body.ph-image-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::after,
body.ph-video-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::before,
body.ph-video-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::after {
	background-color: var(--tt-force-to-light-color);
}

/* Make header buttons light */
@media (min-width: 1025px) {
	body.ph-image-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-btn-secondary,
	body.ph-video-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-btn-secondary {
		background-color: var(--tt-force-to-light-color);
	}
	body.ph-image-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-btn-secondary > *,
	body.ph-image-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-btn-secondary > *::after,
	body.ph-video-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-btn-secondary > *,
	body.ph-video-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-btn-secondary > *::after {
		color: #212121;
	}
}

/* Make page header elements light */
body.ph-image-on #page-header,
body.ph-image-on #page-header a,
body.ph-video-on #page-header,
body.ph-video-on #page-header a {
	color: var(--tt-force-to-light-color);
}

body.ph-image-on #page-header .tt-big-round-ptn-inner,
body.ph-video-on #page-header .tt-big-round-ptn-inner {
	color: var(--tt-force-to-light-color);
}


/* ------------------------------------------------------------- *
 * Figure
/* ------------------------------------------------------------- */

figure {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
	outline: none;
}

/* figure image */
figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------- *
 * Forms
/* ------------------------------------------------------------- */

.tt-form {
	position: relative;
}

.tt-form-control {
	display: block;
	width: 100%;
	background-color: transparent;
	padding: 5px 15px;
	font-family: inherit;
	font-size: 19px;
	font-weight: normal;
	color: inherit;
	border: 1px solid var(--tt-border-color);
	border-radius: 8px;
}
.tt-form-control:focus {
	color: inherit;
	background-color: transparent;
	border-color: var(--tt-light-color);
	outline: none;
	box-shadow: none;
}
.tt-form-control + .tt-form-control {
	margin-top: 20px;
}
.tt-form-control:disabled, .tt-form-control[readonly] {
	background-color: rgb(176 176 176 / 6%);
	opacity: .5;
	cursor: not-allowed;
}

.tt-form-control:not(textarea):not([size]) { /* tt-form-control height */
	height: 56px;
}

.tt-form-text {
	display: block;
	margin-top: 5px;
	font-style: italic;
	opacity: .6;
}

label {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 19px;
	font-weight: bold;
	font-weight: 500;
}
label .required {
	font-size: 17px;
}

::placeholder {
	color: var(--tt-text-color);
	opacity: .4;
}
::-webkit-input-placeholder {
	color: var(--tt-text-color);
	opacity: .4;
}
:-moz-placeholder {
	color: var(--tt-text-color);
	opacity: .4;
}
::-moz-placeholder {
	color: var(--tt-text-color);
	opacity: .4;
}
:-ms-input-placeholder {
	color: var(--tt-text-color);
	opacity: .4;
}

/* form group */
.tt-form-group {
	position: relative;
	margin-bottom: 30px;
}

/* textarea */
textarea,
textarea.tt-form-control {
	padding: 15px;
	resize: vertical;
}
/* form style creative */
.tt-form-creative .tt-form-group {
	position: relative;
	counter-increment: tt-form-creative-counter;
	padding: 25px 15px 20px 50px;
	margin: 0 0 15px 0;
	border-radius: 10px;
	border-width: 2px;
	border-style: solid;
	border-color: var(--tt-border-color);
}
.tt-form-creative .tt-form-group:only-child {
	padding-left: 30px;
}
.tt-form-creative .tt-form-group:not(:only-child)::before {
	position: absolute;
	left: 20px;
	top: 30px;
	display: block;
	content: counter(tt-form-creative-counter, decimal-leading-zero);
	font-size: 15px;
	font-weight: normal;
	line-height: 1;
}

.tt-form-creative .tt-form-group label {
	margin: 0;
	padding-bottom: 10px;
	transition: opacity .3s;
}
.tt-form-creative .tt-fg-typing label {
	opacity: .3;
}
.tt-form-creative .tt-form-control {
	padding: 10px 5px 15px 0;
	border: none;
	border-radius: 4px;
}
.tt-form-creative .tt-form-control:not(textarea):not([size]) { /* tt-form-control height */
	height: auto;
}

.tt-form-creative .tt-form-control:disabled,
.tt-form-creative .tt-form-control[readonly] {
	background-color: transparent;
	opacity: .4;
}

.tt-form-creative .tt-form-text {
	margin-bottom: 10px;
	transition: opacity .3s;
}
.tt-form-creative .tt-fg-typing .tt-form-text {
	opacity: .3;
}

/* Form sizes
============== */
/* form sm */
.tt-form-sm .tt-form-control {
	font-size: 16px;
}
.tt-form-sm .tt-form-control:not(textarea):not([size]) {
	height: 48px;
}

.tt-form-sm ::placeholder {
	font-size: 16px;
}
.tt-form-sm ::-webkit-input-placeholder {
	font-size: 16px;
}
.tt-form-sm :-moz-placeholder {
	font-size: 16px;
}
.tt-form-sm ::-moz-placeholder {
	font-size: 16px;
}
.tt-form-sm :-ms-input-placeholder {
	font-size: 16px;
}

.tt-form-sm label:not(.tt-btn) {
	font-size: 16px;
}

.tt-form-sm .tt-btn {
	height: 46px;
	font-size: 14px;
}
.tt-form-sm.tt-form-creative .tt-form-group {
	padding: 20px 20px 20px 40px;
}
.tt-form-sm.tt-form-creative .tt-form-group:only-child {
	padding-left: 30px;
}
.tt-form-sm.tt-form-creative .tt-form-group:not(:only-child)::before {
	left: 12px;
	top: 27px;
	font-size: 13px;
}
.tt-form-sm.tt-form-creative .tt-form-group label {
	padding-bottom: 5px;
}
/* -------------------------------------------------------------------- *
 * Contact form
/* -------------------------------------------------------------------- */

#tt-contact-form {
	position: relative;
}

.tt-contact-form-inner {
	position: relative;
	z-index: 1;
	transition: opacity .3s, filter .3s;
}
#tt-contact-form.cfm-submitted .tt-contact-form-inner {
	position: relative;
	z-index: 1;
	opacity: .5;
	filter: blur(5px);
}


/* Contact form messages
========================= */
#tt-contact-form-messages {
	position: absolute;
	top: 10%;
	left: 50%;
	width: 100%;
	max-width: 450px;
	height: 0;
	visibility: hidden;
	z-index: 2;
	transform: translateX(-50%);
}
#tt-contact-form.cfm-submitted #tt-contact-form-messages {
	height: auto;
	visibility: visible;
}

.tt-cfm-inner {
	position: relative;
}

/* Message content (added dynamically) */
.tt-cfm-inner span {
	display: block;
	padding: 40px 20px;
	font-size: 17px;
	border-radius: 10px;
}
.tt-cfm-sending {
	background-color: #414452;
	color: #FFF;
}
.tt-cfm-success {
	background-color: #217816;
	color: #FFF;
}
.tt-cfm-error {
	background-color: #a72424;
	color: #FFF;
}

/* Close button */
.tt-cfm-close {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 5px;
	right: 5px;
	width: 28px;
	height: 28px;
	background-color: rgba(255, 255, 255, 0.16);
	font-size: 14px;
	color: #FFF;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	border-radius: 100px;
	transition: transform .4s;
}
.tt-cfm-close:hover {
	transform: rotate(90deg);
}


/* -------------------------------------------------------------------- *
 * Contact info
/* -------------------------------------------------------------------- */

.tt-contact-info {
	position: relative;
}
.tt-contact-info-inner {
	padding-left: 5%;
}

/* Headings */
.tt-contact-info h6 {
	text-transform: uppercase;
	font-size: 16px;
	opacity: .5;
}

/* Contact details
=================== */
.tt-contact-details ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tt-contact-details ul li {
	padding: 7px 0;
}
.tt-contact-details ul li a {
	color: var(--tt-text-color);
}
.tt-cd-icon {
	display: inline-block;
	margin-right: 10px;
	font-size: 80%;
}


/* Contact info big arrow
========================== */
.tt-contact-info .tt-big-arrow {
	margin-bottom: 20px;
}
/* Compact contact page */
.contact-page-compact .tt-contact-info {
	margin-bottom: 20px !important;
}
.contact-page-compact .tt-contact-info-inner {
	padding-left: 0;
}
.contact-page-compact .tt-contact-info h6 {
	margin-bottom: 10px;
}
.contact-page-compact .tt-form-sm.tt-form-creative .tt-form-group label {
	font-size: 100%;
}
.contact-page-compact .tt-contact-details ul li {
	padding: 4px 0;
}
.contact-page-compact .tt-form-text {
	margin-bottom: 16px !important;
}
.contact-page-compact .tt-btn {
	min-width: 170px;
}
@media (min-width: 1200px) {
	.contact-page-compact .tt-row {
		align-items: flex-start;
	}
}
@media (max-width: 1024px) {
	.tt-contact-info .tt-big-arrow {
		text-align: center;
		margin-bottom: 40px;
	}
	.tt-contact-info .tt-big-arrow svg {
		margin: 0;
		transform: rotate(90deg) !important;
	}
}


/* ------------------------------------------------------------- *
 * Fancybox (lightbox plugin)
/* ------------------------------------------------------------- */

/* Compensate the width of the vertical scrollbar if fancybox is open */
html.lenis.with-fancybox,
html.with-fancybox body:not(.is-mobile) #tt-header,
html.with-fancybox body:not(.is-mobile) .tt-scroll-to-top {
	padding-right: 11px;
}

/* Hide magic cursor if fancybox is open */
body.tt-magic-cursor.fancybox-is-open #magic-cursor {
	display: none;
}

/* ------------------------------------------------------------- *
 * tt-Image
/* ------------------------------------------------------------- */

.tt-image {
	display: block;
	width: 100%;
	overflow: hidden;
}

.tt-image figure {
	position: relative;
}

/* If image parallax and zoom-in is enabled */
.tt-image .tt-anim-zoomin-wrap,
.tt-image .tt-image-parallax-wrap,
.tt-image .tt-image-parallax-inner {
	height: 100%;
	overflow: hidden;
}


/* tt-image full height (no effect on small screens!). Useful for full width layout.
======================== */
@media (min-width: 1025px) {
	.tt-image.tti-full-height img {
		width: 100%;
		height: 100vh;
		object-fit: cover;
		object-position: 50% 50%;
	}
}


/* ------------------------------------------------------------- *
 * tt-video
/* ------------------------------------------------------------- */

.tt-video {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}
.tt-video video {
	display: block;
	width: 100%;
	height: 80vh;
	object-fit: cover;
	object-position: 50% 50%;
	background-color: rgb(133 133 133 / 15%);
}
.tt-wrap .tt-video {
	border-radius: 15px;
}
.tt-wrap .tt-video video {
	height: auto;
	object-fit: unset;
	object-position: unset;
}
.tt-video.ttv-grayscale {
	filter: grayscale(1);
}

@media (min-width: 992px) {
	.tt-wrap .tt-video.ttv-portrait::after {
		display: block;
		content: "";
		padding-bottom: 130%;
	}
	.tt-wrap .tt-video.ttv-portrait video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
		pointer-events: none;
	}
	.tt-video.ttv-portrait .tt-anim-zoomin-wrap {
		position: absolute;
		inset: 0;
	}
}


/* ------------------------------------------------------------- *
 * Buttons
/* ------------------------------------------------------------- */

button {
	background-color: transparent;
	cursor: pointer;
	border: none;
}

.tt-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 52px;
	background-color: transparent;
	margin: 12px 7px;
	padding: 0 30px;
	text-transform: uppercase;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	overflow: hidden;
	cursor: pointer;
	letter-spacing: 0.5px;
	border: none;
	border-radius: 100px;
	z-index: 9;
}

.tt-btn-inner { /* Added by .js */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	overflow: hidden;
	line-height: 1;
}

.tt-btn-inner > * {
	position: relative;
	padding: 5px 0;
	transition: transform 0.3s;
}
.tt-btn-inner > *,
.tt-btn-inner > *::after {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.tt-btn-inner > *::after {
	position: absolute;
	content: attr(data-hover);
	top: 100%;
	width: 100%;
	left: 0;
	padding-left: 0;
	padding-right: 0;
}
.tt-btn:hover .tt-btn-inner > * {
	transform: translate3d(0, -100%, 0);
}

/* Magnetic button */
.tt-magnetic-btn {
	display: inline-block;
	margin: 12px 7px;
}
.tt-magnetic-btn .tt-btn {
	margin: 0;
}


/* Button styles
================= */
/* Button primary */
.tt-btn-primary {
	background-color: var(--tt-main-color);
}
.tt-btn-primary > *,
.tt-btn-primary > *::after {
	color: #FFF;
}

/* Button secondary */
.tt-btn-secondary {
	background-color: var(--tt-light-color);
}
.tt-btn-secondary > *,
.tt-btn-secondary > *::after {
	color: var(--tt-dark-color);
}

/* Button outline */
.tt-btn-outline {
	box-shadow: inset 0 0 0 2px var(--tt-light-color);
}
.tt-btn-outline > *,
.tt-btn-outline > *::after {
	color: var(--tt-light-color);
}

/* Button disabled */
.tt-btn.tt-btn-disabled {
	opacity: .4;
	cursor: not-allowed;
}


/* Big round button
==================== */
.tt-big-round-ptn {
	position: relative;
	display: inline-block;
}
.tt-big-round-ptn-holder {
	display: block;
}
.tt-big-round-ptn-inner {
	position: relative;
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	text-align: center;
	font-family: var(--tt-alter-font);
	font-size: clamp(21px, 2vw, 28px);
	font-weight: 600;
	color: var(--tt-text-color);
	line-height: 1.1;
	letter-spacing: 1px;
	border-radius: 50%;
	border: 2px solid var(--tt-main-color);
	transform: rotate(-20deg);
	transition: all .2s;
}
.tt-big-round-ptn-inner:hover,
.tt-big-round-ptn-inner:focus {
	background-color: var(--tt-main-color);
	color: #FFF;
	transform: rotate(0deg);
}

.tt-big-round-ptn-inner::before {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	border: 2px solid var(--tt-main-color);
	transform: translate3d(8px, 8px, 0px);
	transition: all .3s;
}
.tt-big-round-ptn-inner:hover::before {
	transform: translate3d(0px, 0px, 0px);
	opacity: 0;
}

@media (max-width: 1400px) {
	.tt-big-round-ptn-inner {
		width: 160px;
		height: 160px;
		font-size: 26px;
	}
}
@media (max-width: 768px) {
	.tt-big-round-ptn-mobile-safe {
		margin-left: 22px;
	}
	.tt-big-round-ptn-mobile-safe .tt-big-round-ptn-inner {
		font-size: 18px;
		letter-spacing: .5px;
	}
}


/* ------------------------------------------------------------- *
 * Big arrow
/* ------------------------------------------------------------- */

.tt-big-arrow svg {
	height: 100%;
	max-width: calc(100px + 5vw);
	margin-bottom: 15px;
	fill: var(--tt-text-color);
	opacity: .9;
}


/* Big arrow pointing angle
============================ */
.tt-big-arrow.tt-ba-angle-bottom-left svg {
	transform: rotate(135deg);
}


/* ------------------------------------------------------------- *
 * tt-Clipper
/* ------------------------------------------------------------- */

.tt-clipper {
	position: relative;
	width: 100%;
}
.tt-clipper-inner {
	--_tt-clipper-radius: 15px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: rgb(135 135 135 / 9%);
	overflow: hidden;
	clip-path: inset(25% round calc(var(--_tt-clipper-radius) * 3));
	will-change: clip-path;
}
.tt-wrap .tt-clipper-inner {
	clip-path: inset(25% round var(--_tt-clipper-radius));
}

/* tt-Clipper height */
@media (min-width: 992px) {
	.tt-clipper-inner {
		min-height: 100vh;
	}
	.tt-wrap .tt-clipper-inner {
		min-height: 80vh;
	}
}
@media (max-width: 991px) {
	.tt-clipper-inner {
		min-height: 70vw;
	}
}

/* tt-Clipper background */
.tt-clipper-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.tt-clipper-bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}


/* ------------------------------------------------------------- *
 * Text linear reveal
/* ------------------------------------------------------------- */

.tt-text-reveal > span {
	position: relative;
	display: inline;
	color: var(--tt-text-color);
	-webkit-text-fill-color: var(--tt-linear-text-bg-color);
	-webkit-background-clip: text;
	background-repeat: no-repeat;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 100%;
	will-change: background-size;
}

/* ------------------------------------------------------------- *
 * Logo wall
/* ------------------------------------------------------------- */

.tt-logo-wall {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: 2px;
	overflow: hidden;
}
.tt-logo-wall > li {
	width: 20%;
	padding: 10px;
}

.tt-logo-wall-item {
	position: relative;
	display: block;
	width: 100%;
	background-color: rgb(124 124 124 / 7%);
	overflow: hidden;
	border-radius: 15px;
}
.tt-logo-wall-item:before {
	display: block;
	content: "";
	width: 100%;
	padding-bottom: 100%;
}

a.tt-logo-wall-item {
	transition: background-color .3s ease-in-out;
}
a.tt-logo-wall-item:hover {
	background-color: rgb(124 124 124 / 15%);
}

.tt-lv-item-inner {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(10%, 3vw, 50px);
}


/* Logo wall img
================= */
a.tt-logo-wall-item img {
	transform: scale(1);
	transition: transform .3s ease-in-out, opacity .3s ease-in-out;
}
a.tt-logo-wall-item:hover img {
	transform: scale(1.1);
}

/* Logo wall img light/dark */
.tt-lv-img-light {
	display: block;
}


/* Logo wall on smaller screens
================================ */
@media (max-width: 1200px) {
	.tt-logo-wall > li {
		width: 25%;
	}
}
@media (max-width: 991px) {
	.tt-logo-wall > li {
		width: 33.33333%;
	}
}
@media (max-width: 600px) {
	.tt-logo-wall > li {
		width: 50%;
	}
}



/* ------------------------------------------------------------- *
 * Horizontal accordion
/* ------------------------------------------------------------- */

.tt-haci-title {
	text-transform: uppercase;
	font-family: var(--tt-alter-font);
	font-size: clamp(34px, 4vw, 76px);
	font-weight: 600;
	color: inherit;
	line-height: 1;
}

/* Horizontal accordion item count */
.tt-hac-item {
	counter-increment: tt-hac-item-counter;
}
.tt-hac-item-count::before {
	display: block;
	content: counter(tt-hac-item-counter, decimal-leading-zero);
	font-family: var(--tt-alter-font);
	line-height: 1;
}


/* For desktop only
==================== */
@media (min-width: 1025px) {
	.tt-horizontal-accordion {
		display: flex;
		max-width: 2200px;
		padding-left: 4%;
		padding-right: 4%;
		margin: auto;
		overflow: hidden;
	}
	.tt-wrap .tt-horizontal-accordion {
		padding-left: 0;
		padding-right: 0;
	}

	/* Horizontal accordion item */
	.tt-hac-item {
		position: relative;
		flex: 1 1;
		background-color: var(--tt-bg-color);
		padding: clamp(15px, 3vw, 35px);
		border: 1px solid var(--tt-border-color);
		border-radius: 25px;
		transition:
			flex-grow .6s cubic-bezier(.38,.005,.215,1),
			margin .6s cubic-bezier(.38,.005,.215,1),
			background .6s cubic-bezier(.38,.005,.215,1),
			color .6s cubic-bezier(.38,.005,.215,1);
		will-change: flex-grow, margin-left, color;
	}
	.tt-hac-item:not(:last-child) {
		box-shadow: 20px 0 10px -20px rgb(0 0 0);
	}

	.tt-hac-item-inner {
		height: 100%;
		transition: opacity .3s ease;
	}

	/* Horizontal accordion item hover */
	.tt-hac-item:first-child {
		flex-grow: 1.3;
	}
	.tt-hac-item:not(:first-child) {
		margin-left: -10%;
		padding-left: clamp(15px, 3vw, 45px);
	}
	.tt-hac-item.active {
		flex-grow: 1.3;
		margin-left: -1%;
	}

	/* Horizontal accordion item alternative hover */
	.tt-hac-alter-hover .tt-hac-item:first-child,
	.tt-hac-alter-hover .tt-hac-item.active {
		background-color: var(--tt-light-color);
		color: var(--tt-dark-color);
		border-color: transparent;
	}
	.tt-hac-alter-hover .tt-hac-item:first-child.inactive {
		background-color: var(--tt-bg-color);
		color: var(--tt-text-color);
		border-color: var(--tt-border-color);
	}

	.tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline > *,
	.tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline > *,
	.tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline > *:after,
	.tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline > *:after {
		color: var(--tt-dark-color);
	}
	.tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline,
	.tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--tt-dark-color);
	}
	.tt-hac-alter-hover .tt-hac-item:first-child.inactive .tt-btn-outline > *,
	.tt-hac-alter-hover .tt-hac-item:first-child.inactive .tt-btn-outline > *:after {
		color: var(--tt-text-color);
	}
	.tt-hac-alter-hover .tt-hac-item:first-child.inactive .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--tt-light-color);
	}

	/* Horizontal accordion item count */
	.tt-hac-item-count {
		position: absolute;
		top: 20px;
		right: 5%;
	}
	.tt-hac-item-count::before {
		font-size: clamp(34px, 3vw, 52px);
		font-weight: normal;
		opacity: .3;
	}

	/* Horizontal accordion item content */
	.tt-hac-item-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.tt-hac-item-content a {
		color: var(--tt-link-color);
	}

	.tt-haci-description {
		font-size: 16px;
		opacity: .8;

		display: -webkit-box;
		-webkit-line-clamp: 4; /* How many lines of text to display */
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Content top */
	.tt-haci-content-top {
		overflow: hidden;
	}

	/* Content bottom */
	.tt-haci-content-bottom {
		margin-top: 30px;
	}
	.tt-hac-item:not(:first-child) .tt-haci-content-bottom {
		opacity: 0;
		transform: translate3d(-40px, 0, 0);
		transition: transform .4s cubic-bezier(.38,.005,.215,1), opacity .4s cubic-bezier(.38,.005,.215,1);
	}
	.tt-hac-item:not(:first-child).active .tt-haci-content-bottom {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

}


/* For small screens only
========================== */
@media (max-width: 1024px) {
	.tt-horizontal-accordion {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Horizontal accordion item */
	.tt-hac-item {
		position: relative;
		width: unset !important;
		padding: 7% 5%;
		border-radius: 15px;
		border: 1px solid var(--tt-border-color);
	}
	.tt-hac-item-inner {
		height: 100%;
	}

	/* Horizontal accordion item count */
	.tt-hac-item-count {
		position: absolute;
		top: 20px;
		right: 20px;
	}
	.tt-hac-item-count::before {
		font-size: clamp(34px, 3vw, 52px);
		font-weight: normal;
		opacity: .4;
	}

	/* Horizontal accordion item content */
	.tt-hac-item-content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.tt-haci-title br {
		display: none;
	}
	.tt-haci-description {
		font-size: 16px;
		opacity: .8;

		display: -webkit-box;
		-webkit-line-clamp: 4; /* How many lines of text to display */
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Content bottom */
	.tt-haci-content-bottom {
		margin-top: 20px;
	}
}

/* -------------------------------------- *
 * Portfolio preview list
/* -------------------------------------- */

.tt-portfolio-preview-list {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.tt-ppl-items-list {
	width: 100%;
}

/* Portfolio preview list item
=============================== */
.tt-ppl-item {
	position: relative;
	display: block;
	counter-increment: tt-ppli-counter;
	border-bottom: 1px solid var(--tt-border-color);
}
.tt-ppl-item:first-child {
	border-top: 1px solid var(--tt-border-color);
}

/* Portfolio preview list item inner */
.tt-ppl-item-inner {
	position: relative;
	z-index: 1;
}

/* Portfolio preview list item counter */
.tt-ppli-count {
	position: relative;
}
.tt-ppli-count::before {
	display: block;
	content: counter(tt-ppli-counter, decimal-leading-zero);
	font-family: var(--tt-alter-font);
	font-size: clamp(34px, 6vw, 114px);
	font-weight: normal;
	color: var(--tt-text-color);
	line-height: 1;
	opacity: .3;
	transition: opacity 0.3s;
}
.tt-wrap .tt-ppli-count::before {
	font-size: clamp(34px, 6vw, 94px);
}

.tt-ppli-title {
	margin: 0;
	text-transform: uppercase;
	font-family: var(--tt-alter-font);
	font-size: clamp(32px, 6vw, 82px);
	font-weight: bold;
	font-weight: 600;
	color: var(--tt-text-color);
	line-height: 1;
}
.tt-wrap .tt-ppli-title {
   font-size: clamp(38px, 4vw, 54px);
}

.tt-ppli-categories {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
	opacity: .8;
	font-weight: normal;
	transition: opacity 0.3s;
}
.tt-ppli-category {
	position: relative;
	display: block;
	font-size: calc(13px + 0.1vw);
	color: var(--tt-text-color);
	line-height: 1.2;
}
.tt-ppli-category ~ .tt-ppli-category:not(:empty)::before {
	content: ", ";
}
.tt-ppli-category ~ .tt-ppli-category ~ .tt-ppli-category ~ .tt-ppli-category {
	visibility: hidden;
	width: 0;
}
.tt-ppli-category ~ .tt-ppli-category ~ .tt-ppli-category ~ .tt-ppli-category ~ .tt-ppli-category {
	display: none;
}
.tt-ppli-category + .tt-ppli-category + .tt-ppli-category + .tt-ppli-category::before {
	position: absolute;
	left: 0;
	bottom: 0;
	content: "...";
	margin-left: 3px;
	visibility: visible;
	pointer-events: none;
}

.tt-ppli-info {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 90%;
	color: var(--tt-text-color);
	opacity: .8;
	transition: opacity 0.3s;
}


@media (min-width: 768px) {

	/* Portfolio preview list item inner */
	.tt-ppl-item-inner {
		position: relative;
		z-index: 1;
	}
	.tt-wrap .tt-ppl-item-inner {
		padding-left: 0;
		padding-right: 0;
	}

	.tt-ppl-item:hover .tt-ppl-item-inner {
		z-index: 3;
	}

	/* Portfolio preview list item holder */
	.tt-ppl-item-holder {
		position: relative;
		display: flex;
		width: 100%;
		max-width: 1650px;
		margin: auto;
		padding: 26px 2vw 20px 2vw;
	}
	.tt-wrap .tt-ppl-item-holder {
		padding-left: 0;
		padding-right: 0;
	}

	/* Portfolio preview list item columns */
	.tt-ppli-col {
		display: flex;
		align-items: center;
		padding-left: 15px;
		padding-right: 15px;
	}

	.tt-ppli-col.tt-ppli-col-count {
		flex: 1;
	}
	.tt-ppli-col.tt-ppli-col-caption {
		flex: 3;
	}
	.tt-ppli-col.tt-ppli-col-info {
		flex: 2;
	}

	/* Portfolio preview list item caption */
	.tt-ppli-info {
		text-align: right;
	}


	/* Portfolio preview list item hover
	===================================== */
	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppli-title {
		display: inline;
		color: var(--tt-text-color);
		-webkit-text-fill-color: var(--tt-linear-text-bg-color);
		background-clip: text;
		background-repeat: no-repeat;
		background-image: linear-gradient(currentcolor, currentcolor);
		background-size: 100% 100%;
		transition: 0.6s cubic-bezier(.215,.61,.355,1);
		will-change: background-size;
	}
	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-items-list:hover .tt-ppli-title {
		background-size: 0% 100%;
	}

	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-item:hover .tt-ppli-title,
	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-item:focus .tt-ppli-title {
		background-size: 100% 100%;
	}

	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-items-list:hover .tt-ppli-count::before,
	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-items-list:hover .tt-ppli-categories,
	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-items-list:hover .tt-ppli-info {
		opacity: .3;
	}
	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-item:hover .tt-ppli-categories,
	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-item:hover .tt-ppli-info {
		opacity: 1;
	}

	body:not(.is-mobile) .tt-portfolio-preview-list.tt-ppli-hover .tt-ppl-item:hover .tt-ppli-count::before {
		opacity: .9;
	}


	/* Portfolio preview list item preview
	======================================= */
	body.is-mobile .tt-ppli-preview {
		display: none !important;
	}

	.tt-ppli-preview {
		position: fixed;
		top: 0;
		left: 0;
		width: 400px;
		height: 300px;
		pointer-events: none;
		z-index: 2;
		overflow: hidden;
		border-radius: 15px;
	}
	.tt-ppli-preview-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.tt-ppli-preview-image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--tt-dark-color);
		object-fit: cover;
		clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 0% 0%);
		transition: clip-path .5s cubic-bezier(0, 0, 0.2, 1);
		will-change: clip-path;
	}
	.tt-ppl-item:hover .tt-ppli-preview-image img {
		clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
	}

	/* Preview portrait mode */
	.tt-portfolio-preview-list.tt-ppli-portrait .tt-ppli-preview {
		width: 300px;
		height: 400px;
	}
}

@media (max-width: 767px) {

	/* Portfolio preview list item
	=============================== */
	.tt-ppl-item {
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 40px;
		border: none;
	}
	.tt-ppl-item:first-child {
		border: none;
	}
	.tt-wrap .tt-ppl-item {
		padding-left: 0;
		padding-right: 0;
	}

	/* Portfolio preview list item counter */
	.tt-ppli-count {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}
	.tt-ppli-count::before {
		font-size: clamp(32px, 8vw, 54px);
		opacity: .3;
	}

	/* Portfolio preview list item caption */
	.tt-ppli-title {
		padding-right: 12vw;
	}

	.tt-ppli-info {
		margin-top: 10px;
	}


	/* Portfolio preview list item preview
	======================================= */
	.tt-ppli-preview {
		position: relative;
		width: 100%;
		background-color: rgb(124 124 124 / 10%);
		margin-bottom: 30px;
		padding-bottom: 60%;
		border-radius: 3vw;
		overflow: hidden;
	}
	.tt-ppli-preview-image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}


/* ------------------------------------------------------------- *
 * tt-Gallery
/* ------------------------------------------------------------- */

.tt-gallery {
	position: relative;
}
.tt-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2vw;
}

/* tt-Gallery item
=================== */
.tt-gallery-item {
	position: relative;
	display: block;
	background-color: rgb(137 137 137 / 12%);
	overflow: hidden;
	z-index: 1;
	border-radius: 15px;
}
@media (max-width: 1024px) {
	.tt-gallery-item {
		border-radius: 10px;
	}
}

/* tt-Gallery image */
.tt-gallery-image {
	position: relative;
	aspect-ratio: 20 / 13;
}
.tt-gallery-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* tt-Gallery item hover
========================= */
@media (min-width: 768px) {
	.tt-gallery.ttga-hover .tt-gallery-image {
		transform: scale(1.1);
		transition: all 1s cubic-bezier(.165,.84,.44,1);
	}
	.tt-gallery.ttga-hover .tt-gallery-item:hover .tt-gallery-image {
		transform: scale(1);
	}
}

/* ------------------------------------------------------------- *
 * Project info list
/* ------------------------------------------------------------- */

.tt-project-info-list {
	position: relative;
	z-index: 9;
}

.tt-project-info-list > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-project-info-list > ul > li {
	position: relative;
	vertical-align: top;
	padding: 0px 30px 0 24px;
	margin: 15px 25px 15px 0;
}

.tt-project-info-list > ul > li::after {
	position: absolute;
	display: block;
	content: "";
	top: 20px;
	left: 0;
	width: 1px;
	height: 50px;
	margin-top: -18px;
	background-color: rgb(133 133 133 / 50%);
}

/* Project info list heading */
.tt-project-info-list .pi-list-heading {
	margin-bottom: 5px;
	font-size: calc(15px + 0.1vw);
	font-weight: normal;
	opacity: .7;
}

/* Project info list content */
.tt-project-info-list .pi-list-cont {
	font-size: calc(15px + 0.1vw);
}
.tt-project-info-list .pi-list-cont a {
	word-wrap: break-word;
	font-size: calc(15px + 0.1vw);
	color: var(--tt-text-color);
}
.tt-project-info-list .pi-list-cont a:hover {
	opacity: .8;
}

/* Project info inline style
============================= */
@media (min-width: 681px) {
	.tt-project-info-list.tt-pil-inline > ul > li {
		display: inline-block;
		max-width: 320px;
		padding-left: 0;
	}
	.tt-project-info-list.tt-pil-inline > ul > li:last-child {
		margin-right: 0;
	}

	.tt-project-info-list.tt-pil-inline > ul > li::after {
		right: 0;
		left: auto;
	}
	.tt-project-info-list.tt-pil-inline > ul > li:last-child::after {
		display: none;
	}
}


/* ------------------------------------------------------------- *
 * Footer
/* ------------------------------------------------------------- */

#tt-footer {
	position: relative;
	width: 100%;
	padding: 120px 0;
	font-size: 19px;
	z-index: 2;
}
@media (max-width: 1024px) {
	#tt-footer {
		padding: 80px 0;
	}
}
#tt-footer a {
	color: var(--tt-text-color);
}
.tt-footer-inner:not(.tt-wrap) {
	padding-left: 3vw;
	padding-right: 3vw;
	margin-left: auto;
	margin-right: auto;
}

/* Footer columns */
@media (max-width: 1024px) {
	.tt-footer-inner {
		padding-left: 5%;
		padding-right: 5%;
	}
	#tt-footer [class*="tt-col-"]:not(:last-child) {
		margin-bottom: 60px;
	}
}
@media (max-width: 575px) {
	#tt-footer [class*="tt-col-"] {
		display: flex;
		justify-content: center;
		text-align: center;
		margin-bottom: 40px !important;
	}
}

/* Footer widgets */
.tt-footer-widget {
	position: relative;
}
.tt-footer-widget-heading {
	margin-bottom: 34px;
	text-transform: uppercase;
	font-family: var(--tt-alter-font);
	font-size: clamp(38px, 4vw, 58px);
	font-weight: bold;
	font-weight: 600;
	color: var(--tt-text-color);
}
.tt-footer-widget-heading.tt-footer-widget-heading-sm {
	font-size: clamp(24px, 2.2vw, 32px);
}

/* Footer widget list*/
.tt-footer-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-footer-widget-list li {
	margin-bottom: 10px;
	font-size: 90%;
}
.tt-footer-widget-list li a {
	text-transform: uppercase;
	font-size: 17px;
	color: var(--tt-text-color);
}
.tt-footer-contact-list li a {
	font-size: 13.6px;
}

/* Footer logo */
.tt-footer-logo a {
	display: inline-block;
}
.tt-footer-logo {
	max-width: 220px;
}
.tt-footer-logo img {
	display: block;
	max-height: 110px; /* You may need to change the img height to match your logo type! */
	width: auto;
}

/* Footer copyright */
.tt-footer-copyright {
	margin-top: 50px;
	font-size: 14px;
	font-weight: 300;
	opacity: .6;
	text-align: right;
}
.tt-footer-widget-list .tt-footer-copyright a {
	font-size: 14px;
}
@media (max-width: 1024px) {
	.tt-footer-copyright {
		margin-top: 30px;
	}
}
@media (max-width: 575px) {
	.tt-footer-copyright {
		text-align: left;
	}
}


/* ------------------------------------------------------------- *
 * Scroll to top button (with progress bar)
/* ------------------------------------------------------------- */

.tt-scroll-to-top {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 30px;
	bottom: 30px;
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 100%, 0);
	transition: transform .3s, opacity .3s, visibility .3s;
}
@media (max-width: 1400px) {
	.tt-scroll-to-top {
		right: 15px;
		bottom: 15px;
	}
}
.tt-scroll-to-top.tt-stt-active {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}

/* Scroll to top progress */
.tt-stt-progress {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 100px;
	box-shadow: inset 0 0 0 2px rgb(143 143 143 / 40%);
}
@media (max-width: 1400px) {
	.tt-stt-progress {
		width: 40px;
		height: 40px;
	}
}

/* Scroll to top icon */
.tt-stt-progress::after {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background-color: var(--tt-main-color);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

/* Scroll to top svg */
svg.tt-stt-progress-circle {
	overflow: hidden;
	vertical-align: middle;
}
svg.tt-stt-progress-circle path {
	fill: none;
	stroke: var(--tt-light-color);
	stroke-width: 4;
}
