:root {
	--palette-black: #000000;
	--palette-white: #FFFFFF;
	--palette-blue: #0B50EF;
	--palette-gray: #3A424F;
	--palette-light-gray: #F4F4F4;
	--palette-red: #8F1721;
	--beforeafter-pos: 0%;
	--beforeafter-maw: 1200px;
}

/* CURSOR DOT */
.cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: var(--palette-red);
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 9999;
	transition: opacity .5s;
}
.cursor-dot.hidden {
	opacity: 0;
}
@media only screen and (max-width: 960px) {
	.cursor-dot {
		display: none;
	}
}



/* Smaller texts on mobile */
@media only screen and (max-width: 960px) {
	.uk-text-lead {
		font-size: 14px;
	}
}



/* Subnav (pills grid filters) for mobile */
@media only screen and (max-width: 960px) {
	.el-nav.uk-subnav-pill a {
		font-size: 9px;
		padding: 5px 12px;
	}
	.el-nav.uk-subnav-pill li:not(:first-child) {
		padding-left: 6px;
	}
}



/* Round Slidenavs */
.el-slidenav {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}




/* Fullscreen video */
.fullscreen-video {
	width: 75%;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	position: relative;
}
@media only screen and (max-width: 960px) {
	.fullscreen-video {
		width: 95%;
	}
}

.fullscreen-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 8px;
}




/* FLOWING TEXT */
/*
section, .section, .wp-block-group {
position: relative;
overflow: hidden;
isolation: isolate;
}
*/
.flowing-text {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	margin: 0;
	padding: 0;
	font-family: 'Space Grotesk';
	font-weight: 400;
	font-size: clamp(32px, 10vw, 160px);
	white-space: nowrap;	
	z-index: 0;
}
.flowing-text__track {
	display: inline-block;
	white-space: nowrap;
	will-change: transform;
	animation: flowing-marquee 20s linear infinite;
}
.flowing-text__item {
	display: inline-block;
	padding: 0 2rem;
}
@keyframes flowing-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}





/* MODAL MENU BOTTOM ALIGNMENT */
.uk-modal-dialog .uk-margin-auto-bottom {
	margin-bottom: unset!important;
}
.uk-modal-dialog .uk-modal-body {
	justify-content: end;
	width: 100%;
	max-width: 1800px;
}

/* MODAL MENU COUNTED LIST */
.menu-counted-nav ul {
	counter-reset: item;  
	padding: 0;
}
.menu-counted-nav li {
	counter-increment: item;
	display: flex;
	align-items: baseline;
	gap: 3vh;
}
.menu-counted-nav li::before {
	content: "." counter(item, decimal-leading-zero);
	font-size: 3vh;
	font-family: 'Space Grotesk';
	color: var(--palette-blue);
}
@media only screen and (max-width: 960px) {
	.menu-counted-nav li {
		gap: 5vw;
	}
	.menu-counted-nav li::before {
		font-size: 6vw;
	}
}








/* BEFORE AFTER SLIDER */
.beforeafter-container {
	position: relative;
	width: 100%;
	max-width: var(--beforeafter-maw);
	margin: 0 auto;
	user-select: none;
	touch-action: none;
}
.beforeafter__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
}
.beforeafter__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.beforeafter__img-after {
	clip-path: inset(0 calc(100% - var(--beforeafter-pos)) 0 0);
}

.beforeafter__slider {
	position: absolute;
	inset: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	outline: 0;
	margin: 0;
	border: 0;
}
.beforeafter__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 48px;
	height: 100%;
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: none;
}
.beforeafter__slider::-moz-range-thumb {
	width: 48px;
	height: 100%;
	background: transparent;
	border: 0;
	cursor: none;
}

.beforeafter__handle {
	position: absolute;
	top: 50%;
	left: var(--beforeafter-pos);
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--palette-blue);
	display: grid;
	place-items: center;
	pointer-events: none;
}
.beforeafter__handle svg {
	width: 60%;
}





/* HOMEPAGE TAG SLIDER */
.homepage-tag-list .el-link {
	--p: 0%;
	text-transform: uppercase;
	font-weight: 600;
	color: transparent!important;
	background: linear-gradient(90deg, #fff 0 var(--p), #666 var(--p) 0, #666 100%);
	-webkit-background-clip: text;
	background-clip: text;
	transition: background 120ms linear;
	cursor: pointer;
	font-size: 6vw;
}
@media only screen and (max-width: 960px) {
	.homepage-tag-list .el-link {
		font-size: 12vw;
	}
	.homepage-tag-list .el-link:not(.is-active) {
		display: none;
	}
}










/* WORKS GRID */
.works-grid .el-item {
	position: relative;
}
.works-grid .el-item:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%);
	pointer-events: none;
	border-radius: 10px;
	z-index: 9;
}

.works-grid .el-link {
	display: none;
}
.works-grid .el-title {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 29;
	color: var(--palette-white);
}
.works-grid .el-image {
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.works-grid .el-hover-image {
	border-radius: 10px;
	z-index: 19;
}





/* FORM */
.contact-form-container,
.wpcf7-response-output {
	max-width: 500px;
	margin: 0 auto!important;
}

.contact-form-container input[type="text"],
.contact-form-container input[type="email"],
.contact-form-container textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--palette-white);
	margin-bottom: 20px;
	color: var(--palette-white);
	padding: 10px 0 8px 0;
	outline: none;
	box-shadow: none;
	border-radius: 0;	
}
.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder {
	color: var(--palette-white);
	opacity: .6;
}

.contact-form-container .contact-form-privacy-container > p {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--palette-white);
	font-size: 16px;
}
.contact-form-container .contact-form-privacy-container input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--palette-blue);
}

.contact-form-container .contact-form-submit-container > p {
	display: flex;
	flex-direction: row-reverse;
}

.contact-form-container .wpcf7-submit:disabled {
	opacity: .6;
}