body.zsk-de-gallery-active .zsk-effect-image:not(.zsk-de-effect-ready),
body.zsk-de-gallery-active .zsk-effect-image:not(.zsk-de-effect-ready) img {
	opacity: 0 !important;
}

.zsk-de-reveal {
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
}

.zsk-de-reveal > img,
.zsk-de-reveal > picture,
.zsk-de-reveal > picture > img {
	display: block;
	width: 100%;
}

.zsk-de-reveal-source {
	opacity: 0 !important;
}

.zsk-de-reveal-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: opacity 180ms ease-out;
}

.zsk-de-reveal-canvas.is-finished {
	opacity: 0;
}

.zsk-de-cursor {
	--zsk-de-effect-color: #104ed6;
	--zsk-de-pointer-fill: #ffffff;
	--zsk-de-pointer-stroke: #111111;
	--zsk-de-pointer-stroke-width: 2px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483646;
	display: none;
	width: 120px;
	height: 120px;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
}

.zsk-de-cursor--pointer {
	z-index: 2147483647;
}

.zsk-de-cursor__effect {
	fill: none;
	stroke: var(--zsk-de-effect-color);
	stroke-width: 1px;
}

.zsk-de-cursor__pointer {
	fill: var(--zsk-de-pointer-fill);
	stroke: var(--zsk-de-pointer-stroke);
	stroke-width: var(--zsk-de-pointer-stroke-width);
	stroke-linejoin: round;
}

@media (any-pointer: fine) {
	html.zsk-de-cursor-active,
	html.zsk-de-cursor-active * {
		cursor: none !important;
	}

	.zsk-de-cursor {
		display: block;
	}
}