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

// 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] > * {
			--height: var(--shrinkHeight);
		}
	}
}

[data-sticky*='yes'] {
	position: fixed;
	top: var(--top, 0);
	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);
		}

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