/* ANIMATIONS */

.has-animation, .has-animation * { transition: all 1s ease-out; }

.Platformimagequote .quote-element.has-animation .quote-element-citation {
	transform: translatey(-20px);
	opacity: 0;
}
.Platformquote.has-animation .quote-element .quote-element-citation,
.Platformtextquote .quote-element.has-animation .quote-element-citation,
.quote-element.has-animation .quote-element-visual,
.quote-element.has-animation .quote-element-citation:only-child,
.platform-image.has-animation figure,
.text-with-image.has-animation .text-with-image-visual,
.info-box.has-animation {
	transform: translatey(20px);
	opacity: 0;
}
.Platformquote.has-animation.animate .quote-element .quote-element-citation,
.Platformtextquote .quote-element.has-animation.animate .quote-element-citation,
.quote-element.has-animation.animate .quote-element-visual,
.quote-element.has-animation.animate .quote-element-citation,
.platform-image.has-animation.animate figure,
.info-box.has-animation.animate,
.headline.has-animation.animate h3 {
	transform: translatey(0);
	opacity: 1;
}
.Platformquote.has-animation.animate .quote-element .quote-element-citation,
.quote-element.has-animation.animate .quote-element-visual,
.quote-element.has-animation.animate .quote-element-citation,
.quote-element.has-animation.animate .quote-element-paragraph,
.text-with-image.has-animation.animate .text-with-image-visual,
.text-with-image.has-animation.animate .text-with-image-paragraph {
	transform: translatex(0) !important;
	opacity: 1 !important;
}

.text-with-image.small-visual.has-animation .text-with-image-visual {
	transform: none;
	opacity: 1;
}
.text-with-image.small-visual.framed-visual.has-animation .text-with-image-visual {
	transform: translatex(50px);
	opacity: 0;
}
.text-with-image.reversed.small-visual.framed-visual.has-animation .text-with-image-visual {
	transform: translatex(-50px);
}
.platform-image.has-parallax.animate picture img {
	display: none;
}
.platform-image.has-parallax:before {
	content: 'mobile';
	display: none;
}

@media screen and (min-width: 40rem) {
	.platform-image.has-parallax:before {
		content: 'desktop';
	}
	
	.quote-element.has-animation .quote-element-citation,
	.Platformtextquote .quote-element.has-animation .quote-element-citation,
	.Platformimagequote .quote-element.has-animation .quote-element-citation,
	.text-with-image.has-animation .text-with-image-visual,
	.text-with-image.small-visual.has-animation .text-with-image-visual {
		transform: translatex(50px);
		opacity: 0;
	}	
	.quote-element.has-animation .quote-element-visual,
	.Platformimagequote .quote-element.reversed.has-animation .quote-element-citation,
	.Platformtextquote .quote-element.reversed.has-animation .quote-element-citation,
	.text-with-image.reversed.has-animation .text-with-image-visual,
	.text-with-image.reversed.small-visual.has-animation .text-with-image-visual {
		transform: translatex(-50px);
	}
	.quote-element.reversed.has-animation .quote-element-visual {
		transform: translatex(50px);
	}
	.quote-element.reversed.has-animation .quote-element-citation {
		transform: translatex(-50px);
	}	
	.quote-element.has-animation .quote-element-citation:only-child {
		transform: translatey(20px);
	}	
	.quote-element.has-animation .quote-element-paragraph,
	.text-with-image.has-animation .text-with-image-paragraph {
		opacity: 0;
	}	
	.info-box.has-animation,
	.headline.has-animation h3,
	.platform-text.has-animation p,
	.platform-image.has-animation figure,
	.videoplayer.has-animation {
		transform: translatey(20px);
		opacity: 0;
	}	
	.info-box.has-animation.animate,
	.headline.has-animation.animate h3,
	.platform-text.has-animation.animate p,
	.platform-image.has-animation.animate figure,
	.videoplayer.has-animation.animate {
		transform: translatey(0);
		opacity: 1;
	}	
}
@media screen and (max-width: 40rem) {
	.main--narrow > div.platform-image.has-parallax {
		background-color: transparent;
	}
	.main--narrow > .info-box.has-animation {
		border-top-width: calc(1.5em + 20px);
	}
	.main--narrow > .info-box.has-animation.animate {	
		border-top-width: 1.5em;
		background-color: #E9EFEC;
	}
	.main--narrow > .info-box.has-animation * {
		color: rgba(28,28,28,0) !important;
	}
	.main--narrow > .info-box.has-animation.animate * {
		color: rgba(28,28,28,1) !important;
	}
}