/**
 * Base styles
 **/

/* Background color */
.eurodreams-slider {
	background-color: #7823a5;
}

/* Button colors */
.eurodreams-slider .cta-button-container {
	opacity: 0;
}

.eurodreams-slider .cta-button-container a {
	color: #fff;
	background-color: #e50056;
}

.eurodreams-slider .cta-button-container a:hover {
	color: #fff;
	background-color: #a8003f;
}

/* Bubbles */
.eurodreams-slider .bubble-01-push,
.eurodreams-slider .bubble-02-push,
.eurodreams-slider .bubble-03,
.eurodreams-slider .bubble-04-push,
.eurodreams-slider .bubble-05,
.eurodreams-slider .bubble-06-push,
.eurodreams-slider .bubble-07-push,
.eurodreams-slider .bubble-08,
.eurodreams-slider .bubble-09,
.eurodreams-slider .bubble-10,
.eurodreams-slider .bubble-11,
.eurodreams-slider .bubble-12,
.eurodreams-slider .bubble-13,
.eurodreams-slider .headline,
.eurodreams-slider .ufo-thrust,
.eurodreams-slider .ufo-wrapper .jet,
.eurodreams-slider .ufo-wrapper .glow,
.eurodreams-slider .logo {
	position: absolute;
}

/* Eye-catcher */
.eurodreams-slider .eye-catcher {
	position: absolute;
	opacity: 0;
}

/**
 * Desktop & tablet styles
 **/
@media screen and (min-width: 768px) {
	/* Background image */
	.eurodreams-slider {
		background-image: url('../images/background_desktop.png');
	}

	/* Bubbles */
	.eurodreams-slider .bubble-01-push {
		left: 0;
		top: -10%;
		width: 180px;
	}

	.eurodreams-slider .bubble-02-push {
		left: 15%;
		top: 20%;
		width: 110px;
	}

	.eurodreams-slider .bubble-03 {
		left: 8%;
		top: 62%;
		width: 130px;
	}

	.eurodreams-slider .bubble-04-push {
		left: 28%;
		top: 43%;
		width: 90px;
	}

	.eurodreams-slider .bubble-05 {
		left: 30%;
		top: -15%;
		width: 160px;
	}

	.eurodreams-slider .bubble-06-push {
		right: 15%;
		top: 5%;
		width: 160px;
	}
	
	.eurodreams-slider .bubble-07-push {
		right: 0;
		top: -10%;
		width: 110px;
	}

	.eurodreams-slider .bubble-08 {
		right: 5%;
		top: 50%;
		width: 70px;
	}

	.eurodreams-slider .bubble-09,
	.eurodreams-slider .bubble-10,
	.eurodreams-slider .bubble-11,
	.eurodreams-slider .bubble-12,
	.eurodreams-slider .bubble-13 {
		left: 44%;
		bottom: -40px;
		opacity: 0;
	}

	.eurodreams-slider .bubble-09 {
		width: 160px;
	}

	.eurodreams-slider .bubble-10 {
		width: 200px;
	}
	.eurodreams-slider .bubble-11 {
		width: 100px;
	}
	.eurodreams-slider .bubble-12 {
		width: 190px;
	}
	.eurodreams-slider .bubble-13 {
		width: 130px;
	}

	/* Headline */
	.eurodreams-slider .headline {
		width: 426px;
		top: 130px;
		left: 40%;
		opacity: 0;
	}

	/* Ufo */
	.eurodreams-slider .ufo-thrust {
		width: 20%;
   		top: 52px;
   		right: 32%;
		svg {
			transform: scale(1.4);
		}
	}

	.eurodreams-slider .ufo-wrapper .jet {
		width: auto;
		left: 164px;
		bottom: 0;
	}

	.eurodreams-slider .ufo-wrapper .glow {
		width: auto;
		left: 135px;
		bottom: -30px;
	}

	.eurodreams-slider .ufo-wrapper .ufo {
		position: relative;
	}

	/* Logo */
	.eurodreams-slider .logo {
		right: 5%;
		bottom: 25px;
	}

	/* Eye-catcher	*/
	.eurodreams-slider .eye-catcher {
		right: 0;
		top: -10%;
		width: 100px;
		height: 100px;
	}
	
	/* Button position and size */
	.eurodreams-slider .cta-button-container {
		bottom: 40px;
	}

	.eurodreams-slider .cta-button-container a {
		padding: 20px 60px;
	}
}

/**
 * Tablet styles
 **/
@media screen and (min-width: 768px) and (max-width: 1020.9px) {
	/* Headline */
	.eurodreams-slider .headline {
		width: 340px;
		top: 150px;
	}

	/* Ufo */
	.eurodreams-slider .ufo-thrust {
		top: 30px;
		right: 35%;
		svg {
			transform: scale(1);
		}
	}

	.eurodreams-slider .ufo-wrapper .jet {
		width: 57.6px;
		left: 131.2px;
	}

	.eurodreams-slider .ufo-wrapper .glow {
		width: 104px;
		left: 108px;
		bottom: -24px;
	}

	.eurodreams-slider .ufo-wrapper .ufo {
		width: 320px;
	}

	/* Logo */
	.eurodreams-slider .logo {
		width: 200px;
		right: 3%;
		bottom: 35px;
	}

	/* Eye-catcher	*/
	.eurodreams-slider .eye-catcher {
		right: 0;
		top: -15%;
		width: 90px;
		height: 90px;
	}

	/* Button position and size */
	.eurodreams-slider .cta-button-container {
		bottom: 40px;
	}

	.eurodreams-slider .cta-button-container a {
		padding: 20px 60px;
	}
}

/**
 * Mobile styles
 **/
@media screen and (max-width: 767.9px) {
	/* Background image */
	.eurodreams-slider {
		background-image: url('../images/background_mobile.png');
	}

	/* Bubbles */
	.eurodreams-slider .bubble-04-push,
	.eurodreams-slider .bubble-05,
	.eurodreams-slider .bubble-08 {
		display: none;
	}

	.eurodreams-slider .bubble-01-push {
		left: 0;
		top: -10%;
		width: 140px;
	}

	.eurodreams-slider .bubble-02-push {
		left: 22%;
		top: 20%;
		width: 90px;
	}

	.eurodreams-slider .bubble-03 {
		left: 8%;
		top: 65%;
		width: 120px;
	}

	.eurodreams-slider .bubble-06-push {
		right: 5%;
		top: 45%;
		width: 160px;
	}
	
	.eurodreams-slider .bubble-07-push {
		right: 4%;
		top: 8%;
		width: 110px;
	}

	.eurodreams-slider .bubble-09,
	.eurodreams-slider .bubble-10,
	.eurodreams-slider .bubble-11,
	.eurodreams-slider .bubble-12,
	.eurodreams-slider .bubble-13 {
		left: 37%;
		bottom: -5%;
		opacity: 0;
	}

	.eurodreams-slider .bubble-09 {
		width: 160px;
	}

	.eurodreams-slider .bubble-10 {
		width: 200px;
	}
	.eurodreams-slider .bubble-11 {
		width: 100px;
	}
	.eurodreams-slider .bubble-12 {
		width: 190px;
	}
	.eurodreams-slider .bubble-13 {
		width: 130px;
	}

	/* Headline */
	.eurodreams-slider .headline {
		width: 50%;
		left: 25%;
		top: -40px;
	}

	/* Ufo */
	.eurodreams-slider .ufo-thrust {
		width: 50%;
		left: 25%;
		bottom: 12%;
		svg {
			transform: scale(1);
		}
	}

	.eurodreams-slider .ufo-wrapper .jet {
		width: 20%;
		left: 40%;
		bottom: 0;
	}

	.eurodreams-slider .ufo-wrapper .glow {
		width: 36%;
		left: 32%;
		bottom: -7%;
	}

	.eurodreams-slider .ufo-wrapper .ufo {
		position: relative;
	}

	/* Logo */
	.eurodreams-slider .logo {
		width: 23%;
		right: 2%;
		bottom: 40px;
	}

	/* Eye-catcher	*/
	.eurodreams-slider .eye-catcher {
		right: -5%;
		top: -9%;
		width: 70px;
		height: 70px;
		padding-left: 15px;	
	}

	/* Button position and size */
	.eurodreams-slider .cta-button-container {
		bottom: 40px;
	}

	.eurodreams-slider .cta-button-container a {
		padding: 12px 25px;
	}
}

/**
 * Animation
 */


/* Desktop & tablet animation */
@media screen and (min-width: 768px) {
	.eurodreams-slider.slick-active .bubble-01-push {
		animation: bubble-01-push-animation .7s ease-out 1.9s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-01 {
		animation: bubble-01-horizontal-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-01 img {
		animation: bubble-01-vertical-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-02-push {
		animation: bubble-02-push-animation .7s ease-out 1.58s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-02 {
		animation: bubble-02-horizontal-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-02 img {
		animation: bubble-02-vertical-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-03 {
		animation: bubble-03-horizontal-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-03 img {
		animation: bubble-03-vertical-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-04-push {
		animation: bubble-04-push-animation .7s ease-out 1.42s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-04 {
		animation: bubble-04-horizontal-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-04 img {
		animation: bubble-04-vertical-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-05 {
		animation: bubble-05-horizontal-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-05 img {
		animation: bubble-05-vertical-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-06-push {
		animation: bubble-06-push-animation 1s ease-out 1.42s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-06 {
		animation: bubble-06-horizontal-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-06 img {
		animation: bubble-06-vertical-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-07-push {
		animation: bubble-07-push-animation 1s ease-out 1.87s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-07 {
		animation: bubble-07-horizontal-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-07 img {
		animation: bubble-07-vertical-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-08 {
		animation: bubble-08-horizontal-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-08 img {
		animation: bubble-08-vertical-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .headline {
		animation: headline-animation 1s ease-out 1.2s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .ufo-thrust {
		animation: ufo-thrust-animation 2s .8s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .ufo-wrapper {
		animation: ufo-hover-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .ufo-wrapper .glow {
		animation: ufo-glow-animation 1s ease-in-out 0s infinite;
	}

	.eurodreams-slider.slick-active .ufo-wrapper .jet {
		animation: ufo-jet-animation 1s ease-out 0s infinite;
	}

	.eurodreams-slider.slick-active .eye-catcher {
		animation: eye-catcher-animation .5s ease-in-out 2.6s 1 forwards;
	}

	.eurodreams-slider.slick-active .cta-button-container {
		animation: cta-button-animation .5s ease-in-out 2.9s 1 forwards;
	}

	.eurodreams-slider.slick-active .bubble-09 {
		animation: bubble-09-animation 1.7s 2.7s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-10 {
		animation: bubble-10-animation 1.8s 2.7s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-11 {
		animation: bubble-11-animation 1.6s 2.7s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-12 {
		animation: bubble-12-animation 1.8s 2.7s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-13 {
		animation: bubble-13-animation 1.7s 2.7s 1 normal forwards;
	}
}

/* Mobile animation */
@media screen and (max-width: 767.9px) {
	.eurodreams-slider.slick-active .bubble-01 {
		animation: bubble-01-horizontal-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-01 img {
		animation: bubble-01-vertical-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-02 {
		animation: bubble-02-horizontal-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-02 img {
		animation: bubble-02-vertical-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-03 {
		animation: bubble-03-horizontal-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-03 img {
		animation: bubble-03-vertical-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-06 {
		animation: bubble-06-horizontal-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-06 img {
		animation: bubble-06-vertical-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-07 {
		animation: bubble-07-horizontal-animation 3s ease-in-out 1.5s infinite alternate;
	}

	.eurodreams-slider.slick-active .bubble-07 img {
		animation: bubble-07-vertical-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .ufo-wrapper {
		animation: ufo-hover-animation 3s ease-in-out 0s infinite alternate;
	}

	.eurodreams-slider.slick-active .ufo-wrapper .glow {
		animation: ufo-glow-animation 1s ease-in-out 0s infinite;
	}

	.eurodreams-slider.slick-active .ufo-wrapper .jet {
		animation: ufo-jet-animation 1s ease-out 0s infinite;
	}

	.eurodreams-slider.slick-active .headline {
		animation: headline-mobile-animation .5s ease-in-out .2s 1 forwards;
	}

	.eurodreams-slider.slick-active .eye-catcher {
		animation: eye-catcher-animation .5s ease-in-out .6s 1 forwards;
	}

	.eurodreams-slider.slick-active .cta-button-container {
		animation: cta-button-animation .5s ease-in-out 1s 1 forwards;
	}

	.eurodreams-slider.slick-active .bubble-09 {
		animation: bubble-09-animation 1.7s .8s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-10 {
		animation: bubble-10-animation 1.8s .8s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-11 {
		animation: bubble-11-animation 1.6s .8s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-12 {
		animation: bubble-12-animation 1.8s .8s 1 normal forwards;
	}

	.eurodreams-slider.slick-active .bubble-13 {
		animation: bubble-13-animation 1.7s .8s 1 normal forwards;
	}
}


@keyframes bubble-01-push-animation {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-40%, -40%); }
}

@keyframes bubble-01-horizontal-animation {
	0% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(20px) rotate(-15deg); }
}

@keyframes bubble-01-vertical-animation {
	0% { transform: translateY(0); }
	100% { transform: translateY(20px); }
}

@keyframes bubble-02-push-animation {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-130%, -20%); }
}

@keyframes bubble-02-horizontal-animation {
	0% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(20px) rotate(-15deg); }
}

@keyframes bubble-02-vertical-animation {
	0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
}

@keyframes bubble-03-horizontal-animation {
	0% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(-20px) rotate(-15deg); }
}

@keyframes bubble-03-vertical-animation {
	0% { transform: translateY(0); }
	100% { transform: translateY(20px); }
}

@keyframes bubble-04-horizontal-animation {
	0% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(20px) rotate(-15deg); }
}

@keyframes bubble-04-push-animation {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-40%, 50%); }
}

@keyframes bubble-04-vertical-animation {
	0% { transform: translateY(0); }
	100% { transform: translateY(20px); }
}

@keyframes bubble-05-horizontal-animation {
	0% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(-20px) rotate(-15deg); }
}

@keyframes bubble-05-vertical-animation {
	0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
}

@keyframes bubble-06-push-animation {
	0% { transform: translateX(0); }
	100% { transform: translateX(140%); }
}

@keyframes bubble-06-horizontal-animation {
	0% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(-20px) rotate(-15deg); }
}

@keyframes bubble-06-vertical-animation {
	0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
}

@keyframes bubble-07-push-animation {
	0% { transform: translate(0, 0); }
	100% { transform: translate(110%, -50%); }
}

@keyframes bubble-07-horizontal-animation {
	0% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(20px) rotate(-15deg); }
}

@keyframes bubble-07-vertical-animation {
	0% { transform: translateY(0); }
	100% { transform: translateY(20px); }
}

@keyframes bubble-08-horizontal-animation {
	0% { transform: translateX(0) rotate(0); }
	100% { transform: translateX(20px) rotate(-15deg); }
}

@keyframes bubble-08-vertical-animation {
	0% { transform: translateY(0); }
	100% { transform: translateY(20px); }
}

@keyframes headline-animation {
	0% { transform: translateX(0); opacity: 0; }
	20% { opacity: 0; }
	80% { transform: translateX(-70%); }
	100% { transform: translateX(-65%); opacity: 1 }
}

@keyframes ufo-thrust-animation {
	0% { transform: translateX(0) rotate(0); animation-timing-function: ease-in; }
	10% { transform: translateX(-4%) rotate(12deg); }
	87% { transform: translateX(82%) rotate(-3deg); animation-timing-function: ease-out; }
	100% { transform: translateX(80%) rotate(0); }
}

@keyframes ufo-hover-animation {
	0% { transform: translateY(-5px) rotate(1deg); }
	100% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes ufo-glow-animation {
	0% { opacity: .5; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: .5; }
	100% { opacity: .5; }
}

@keyframes ufo-jet-animation {
	0% { transform: translateY(0); opacity: 1; }
	30% { opacity: 1; }
	60% { transform: translateY(50px); opacity: 0; }
	100% { opacity: 0; }
}

 @keyframes eye-catcher-animation {
	0% { transform: scale(0); opacity: 0; }
	50% { transform: scale(1.1); opacity: 1; }
	75% { transform: scale(.9); }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes cta-button-animation {
	0% { transform: scale(0); opacity: 0; }
	50% { transform: scale(1.1); opacity: 1; }
	75% { transform: scale(.9); }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes bubble-09-animation {
	0% { transform: translate(0, 0) scale(.2); opacity: 0; animation-timing-function: ease-in; }
	20% { transform: translate(-75px, -20px) scale(1); opacity: 1; animation-timing-function: ease-out; }
	100% { transform: translate(-300px, -100px) scale(0); opacity: 0; }
}

@keyframes bubble-10-animation {
	0% { transform: translate(0, 0) scale(.2); opacity: 0; animation-timing-function: ease-in; }
	20% { transform: translate(-62px, -50px) scale(1); opacity: 1; animation-timing-function: ease-out; }
	100% { transform: translate(-250px, -250px) scale(0); opacity: 0; }
}

@keyframes bubble-11-animation {
	0% { transform: translate(0, 0) scale(.2); opacity: 0; animation-timing-function: ease-in; }
	20% { transform: translate(0, -80px) scale(1); opacity: 1; animation-timing-function: ease-out; }
	100% { transform: translate(0, -400px) scale(0); opacity: 0; }
}

@keyframes bubble-12-animation {
	0% { transform: translate(0, 0) scale(.2); opacity: 0; animation-timing-function: ease-in; }
	20% { transform: translate(62px, -50px) scale(1); opacity: 1; animation-timing-function: ease-out; }
	100% { transform: translate(250px, -250px) scale(0); opacity: 0; }
}
@keyframes bubble-13-animation {
	0% { transform: translate(0, 0) scale(.2); opacity: 0; animation-timing-function: ease-in; }
	20% { transform: translate(75px, -20px) scale(1); opacity: 1; animation-timing-function: ease-out; }
	100% { transform: translate(300px, -100px) scale(0); opacity: 0; }
}

@keyframes headline-mobile-animation {
	0% { transform: scale(1); }
	33% { transform: scale(1.05); }
	66% { transform: scale(.95); }
	100% { transform: scale(1); }
}


/* ECB-4910 Promotion neues EuroDreams Ufo */
.carousel__item.eurodreams-slider.slick-slide {
   .text,
   .beam,
   .sprite-sheet-image {
        animation-fill-mode: forwards; /* Behält den Endzustand der Animation bei */ 
        animation-name: none;
        animation-play-state: paused;
  }
}

.carousel__item.eurodreams-slider.slick-slide.slick-active {
    .text {
        textLength: 340px;
        text-anchor: middle;
        font-family: "Bungee", sans-serif;
        font-size: 39px;
        letter-spacing: -0.6px;
        line-height: 110%;
        text-shadow: 1px -2px 4px rgba(84,20,116,0.2);
        dominant-baseline: middle;
        fill: #781ea5;
        opacity: 0;
        animation: beam-opacity ease-in;
        animation-duration: 0.75s;
        animation-iteration-count: 1;
        animation-delay: 3.6s;
        animation-play-state: running;
		animation-fill-mode: forwards;
    }
	@supports (-webkit-appearance: none) {
		.text {
			alignment-baseline: middle; /* Spezifisch für Safari/WebKit */
		}
	}

    .beam {
        opacity: 0;
        animation: beam-opacity ease-in;
        animation-duration: 0.6s;
        animation-iteration-count: 1;
        animation-delay: 3.2s;
        animation-play-state: running;
		animation-fill-mode: forwards;
    }
    .sprite-sheet-image {
        animation-name: playSprite;
        animation-duration: 2.88s;
        animation-timing-function: steps(35); /* Anzahl der Frames - 1 */
        animation-iteration-count: 1;
        animation-delay: 1.5s;
		animation-play-state: running;
		animation-fill-mode: forwards;
    }      
}

@keyframes beam-opacity {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes playSprite {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-17500px); /* Für 36 Frames à 500px Breite */
    }
}