#anwendungen-wrapper {
	overflow: hidden;
}

#anwendungen-1 {
	opacity: 0;
	transform: translateX(-5em);
}


#anwendungen-2 {
	opacity: 0;
	transform: translateX(5em);
}

#anwendungen-3, .product-cell {
	opacity: 0;
	transform: translateY(5em);
}

#anwendungen-wrapper.visible #anwendungen-1 {
	animation: slide-in-left forwards .5s ease-out;
}

#anwendungen-wrapper.visible #anwendungen-2 {
	animation: slide-in-right forwards .75s .9s ease-out;
}

#anwendungen-wrapper.visible #anwendungen-3 {
	animation: slide-in-bottom forwards .75s .45s ease-out;
}

#products-wrapper.visible .product-cell {
	animation: slide-in-bottom forwards 1.35s ease-out;
}

#company-heading,
#company-map {
	opacity: 0;
	transform: translateX(-5em);
}

#company-content {
	opacity: 0;
	transform: translateX(5em);
}

#company-wrapper.visible #company-heading,
#company-wrapper.visible #company-map {
	animation: slide-in-left forwards .5s ease-out;
}

#company-wrapper.visible #company-content {
	animation: slide-in-right forwards .5s .35s ease-out;
}

/* elementor editor fix */
body.elementor-editor-active :where(#anwendungen-1, #anwendungen-2, #anwendungen-3, #company-heading, #company-map, #company-content), .product-cell {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

@keyframes slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-5em);
	}
	
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes slide-in-right {
	from {
		opacity: 0;
		transform: translateX(5em);
	}
	
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes slide-in-bottom {
	from {
		opacity: 0;
		transform: translateY(5em);
	}
	
	to {
		opacity: 1;
		transform: none;
	}
}


@media only screen and (max-width: 767px) {
	#anwendungen-2,
	.product-cell {
		margin-top: 1.5em !important;
	}
	
	#anwendungen-wrapper.visible :where(#anwendungen-2, #anwendungen-3),
	#products-wrapper.visible .product-cell,
	#company-wrapper.visible #company-content {
		animation-name: slide-in-left !important;
	}
	
	#anwendungen-wrapper:not(.visible) :where(#anwendungen-2, #anwendungen-3),
	#products-wrapper:not(.visible) .product-cell,
	#company-wrapper:not(.visible) #company-content {
		transform: translateX(-5em);
	}
}