/* Personalized custom */

/* Showcase */
html.js .section-tiles .tile-personalized#personalized-showcase-custom, html.no-js .section-tiles .tile-personalized#personalized-showcase-custom {
	display: none;
	visibility: hidden;
}

/* Tile Keyframes */

@keyframes tile-out {
	from {
		transform: matrix(1, 0, 0, 1, 0, 0);
	}

	to {
		transform: matrix(1, 0, 0, 1, -50, 0);
	}
}

@keyframes tile-in {
	from {
		transform: matrix(1, 0, 0, 1, 50, 0);
	}

	to {
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
}

/* Headline Keyframes */

@keyframes headline-out {
	from {
		transform: matrix(1, 0, 0, 1, 0, 0);
	}

	to {
		transform: matrix(1, 0, 0, 1, 0, -10);
	}
}

@keyframes headline-in {
	from {
		transform: matrix(1, 0, 0, 1, 0, 10);
	}

	to {
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
}

/* Button Keyframes */

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

/* Tile Animation */

.personalized-heading-in {
	animation: headline-in 0.35s ease 0s 1 normal forwards running;
}

.personalized-heading-out {
	animation: headline-out 0.35s ease 0s 1 normal forwards running;
}

/* Headline Animation */

.personalized-tile-in {
	animation: tile-in 0.35s ease 0s 1 normal forwards running;
}

.personalized-tile-out {
	animation: tile-out 0.35s ease 0s 1 normal forwards running;
}

#personalized-custom .personalized-op-hidden {
	opacity: 0;
	transition: opacity 0.35s ease;
}

#personalized-custom .personalized-op-visible {
	opacity: 1;
	transition: opacity 0.35s ease;
}

/* Button animation */

#personalized-custom .personalized-btn-hidden {
	visibility: hidden;
	display: block;
}

#personalized-custom .personalized-btn-visible {
	visibility: visible;
	display: block;
}

#personalized-custom .personalized-fade-in {
	animation: fade-in 1s ease forwards;
}

#personalized-custom .personalized-fade-out {
	animation: fade-out 1s ease forwards;
}