#header {
	position: relative;
	z-index: 50;
}

// transparent state
[data-device] {
	position: relative;
	// z-index: 10;
}

@include media-breakpoint-down(md) {
	[data-device='mobile'][data-transparent] {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}

@include media-breakpoint-up(lg) {
	[data-device='desktop'][data-transparent] {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}

// sticky state
[data-device] {
	min-height: var(--minHeight, 0);
}

.ct-sticky-container {
	min-height: var(--minHeight, 0);

	[data-sticky*='yes'] {
		[data-row="middle"] {
			--main-row-height: var(--height);
		}

		[data-row="middle"] > * {
			--height: var(--shrinkHeight, var(--main-row-height));
		}
	}
}

[data-sticky*='yes'] {
	position: fixed;
	top: calc(var(--adminBar, 0px) + var(--frame-size, 0px));
	left: 0;
	right: 0;
	z-index: 5;
}


[data-sticky*='slide'] {
	&[data-sticky*='yes-start'] {
		transform: translateY(-100%);
	}

	&[data-sticky*='yes-end'] {
		transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	&[data-sticky*='yes-hide-start'] {
		transform: none;
	}

	&[data-sticky*='yes-hide-end'] {
		transform: translateY(-100%);
		transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}
}

[data-sticky*='fade'] {
	&[data-sticky*='yes-start'] {
		opacity: 0;
	}

	&[data-sticky*='yes-end'] {
		transition: opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	&[data-sticky*='yes-hide-start'] {
		opacity: 1;
	}

	&[data-sticky*='yes-hide-end'] {
		opacity: 0;
		transition: opacity 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}
}

// sticky transitions
body:not(.ct-loading) {
	[data-sticky] {
		
		> [data-row] {
			transition: box-shadow 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955),
						background-color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

		[data-column] {
			transition: min-height 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

		.ct-header-text,
		.site-description {
			transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}
	}
}

// sticky state & anchor links
:target,
.elementor-menu-anchor {
	&:before {
		content: "";
		display: block;
		height: calc(var(--adminBar, 0px) + var(--frame-size, 0px) + var(--headerStickyHeight, 0px));
		margin-top: calc(var(--adminBar, 0px) + var(--frame-size, 0px) + var(--headerStickyHeight, 0px) * -1);
		visibility: hidden;
		pointer-events: none;
	}
}