/**
 * WP Tutorials : Parallax Sprites (WPTPLX)
 *
 * https://wp-tutorials.tech/add-functionality/parallax-scrolling-sprites-with-rellax-js/
 */
.wptplx-sprite {
	position: absolute;
	pointer-events: none;
}

.wptplx-sprite>div {
	width: 3em;
	height: 3em;
}


/**
 * Round bubbles
 */
.wptplx-sprite .sprite-bubble-one,
.wptplx-sprite .sprite-bubble-two,
.wptplx-sprite .sprite-bubble-three,
.wptplx-sprite .sprite-bubble-four {
	border-radius: 50%;
	background-image: linear-gradient(to bottom right, white, transparent 30%);
	border: 1px solid lightblue;
}

.wptplx-sprite .sprite-bubble-one {
	border-color: lightblue;
	width: 7em;
	height: 7em;
}

.wptplx-sprite .sprite-bubble-two {
	border-color: lightgrey;
	width: 6em;
	height: 6em;
}

.wptplx-sprite .sprite-bubble-three {
	border-color: lightsteelblue;
	width: 5em;
	height: 5em;
}

.wptplx-sprite .sprite-bubble-four {
	border-color: lightcyan;
	width: 4em;
	height: 4em;
}

/**
 * Diamond bubbles
 */
.wptplx-sprite .sprite-diamond-one,
.wptplx-sprite .sprite-diamond-two,
.wptplx-sprite .sprite-diamond-three,
.wptplx-sprite .sprite-diamond-four {
	border-radius: 1em;
	background-image: linear-gradient(to right, #fff8, transparent 20%);
	border: 1px solid lightblue;
	transform: rotate(45deg);
}

.wptplx-sprite .sprite-diamond-one {
	border-color: lightblue;
	width: 7em;
	height: 7em;
}

.wptplx-sprite .sprite-diamond-two {
	border-color: lightgrey;
	width: 6em;
	height: 6em;
}

.wptplx-sprite .sprite-diamond-three {
	border-color: lightsteelblue;
	width: 5em;
	height: 5em;
}

.wptplx-sprite .sprite-diamond-four {
	border-color: lightcyan;
	width: 4em;
	height: 4em;
}