/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */


/* Attention popup */
#attentie-popup {
	width: 768px;
}


/* Attention floating button */
.attention-floating-button-wrap {
	position: fixed;
	top: 0;
	width: 100vh;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.attention-floating-button-wrap .attention-floating-button-animation-wrap {
	transform: translateY(70px);
	transition: all 0.6s ease-in-out;
}

.attention-floating-button-wrap.animated .attention-floating-button-animation-wrap {
	transform: translateY(0) !important;
}

.attention-floating-button-wrap .attention-floating-button {
	pointer-events: auto;
}


/* Attention floating button - right edge mode */
.attention-floating-button-wrap.right-edge {
	right: 50px;
	transform-origin: top right;
	transform: rotate(-90deg);
}

.attention-floating-button-wrap.right-edge .attention-floating-button {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}


/* Attention floating button - left edge mode */
.attention-floating-button-wrap.left-edge {
	left: 50px;
	transform-origin: top left;
	transform: rotate(90deg);
}

.attention-floating-button-wrap.left-edge .attention-floating-button {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	transform: rotate(-180deg);
}