/* Animation Code */
.animation {
	will-change: transform;
}
/* ----------------Rotate In ----------------- */
@media screen and (min-width: 768px) {
     .rotate-in-desktop {
        opacity: 0;
		transition: 2500ms all ease-in-out;
     }

    .rotate-in-desktop.animate {
        opacity: 1;
		-webkit-animation: rotate-in-desktop 1.65s linear both;
	    animation: rotate-in-desktop 1.65s linear both;
     }

@-webkit-keyframes rotate-in-desktop {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-in-desktop {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}

/* ----------------Rotate In mit Fade In 2x----------------- */
.rotate-in-ver-desktop {
        opacity: 0;
		transition: 2500ms all ease-in-out;
}

.rotate-in-ver-desktop.animate {
    opacity: 1;
	-webkit-animation: rotate-in-ver-desktop 2.5s cubic-bezier(0.600, 0.040, 0.980, 0.335) 2 both;
	        animation: rotate-in-ver-desktop 2.5s cubic-bezier(0.600, 0.040, 0.980, 0.335) 2 both;
}

@-webkit-keyframes rotate-in-ver-desktop {
  0% {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}
@keyframes rotate-in-ver-desktop {
  0% {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}


/* ----------------Slide In von oben rechts----------------- */
.slide-in-or-desktop {
opacity: 0;
transition: 2500ms all ease-in-out;
}

.slide-in-or-desktop.animate {
opacity: 1;
-webkit-animation: slide-in-or 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-or 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-or {
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
            transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-or{
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
            transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}

	.fade-left-desktop,
	.fade-right-desktop {
		opacity: 0;
		transition: 2500ms all ease-in-out;
	}
	.fade-left-desktop {
		transform: translateX(50px);
	}
	.fade-right-desktop {
		transform: translateX(-50px);
	}
	.fade-left-desktop.animate,
	.fade-right-desktop.animate {
		opacity: 1;
		transform: translateX(0);
	}
	.fade-down-desktop,
	.fade-up-desktop {
		opacity: 0;
		transition: 1500ms all ease-in-out;
		transform: translateY(50px);
	}
	.fade-up-desktop {
		transform: translateY(50px);
	}
	.fade-down-desktop {
		transform: translateY(-50px);
	}
	.fade-down-desktop.animate,
	.fade-up-desktop.animate {
		opacity: 1;
		transform: translateY(0);
	}
	.grow-left-desktop,
	.grow-right-desktop {
		transform: scaleX(0);
		transform-origin: left;
		transition: 1200ms all ease-in-out;
	}
	.grow-left-desktop {
		transform-origin: right;
	}
	.grow-right-desktop {
		transform-origin: left;
	}
	.grow-left-desktop.animate,
	.grow-right-desktop.animate {
		transform: scaleX(1);
	}
	.grow-down-desktop,
	.grow-up-desktop {
		transform: scaleY(0);
		transition: 1200ms all ease-in-out;
	}
	.grow-up-desktop {
		transform-origin: bottom;
	}
	.grow-down-desktop {
		transform-origin: top;
	}
	.grow-down-desktop.animate,
	.grow-up-desktop.animate {
		transform: scaleY(1);
	}
	.stagger-desktop-1 {
		transition-delay: 300ms;
	}
	.stagger-desktop-2 {
		transition-delay: 600ms;
	}
	.stagger-desktop-3 {
		transition-delay: 900ms;
	}
	.stagger-desktop-4 {
		transition-delay: 1200ms;
	}
}
@media screen and (max-width: 767px) {
	.fade-down-mobile,
	.fade-up-mobile {
		opacity: 0;
		transition: 1500ms all ease-in-out;
	}
	.fade-up-mobile {
		transform: translateY(50px);
	}
	.fade-down-mobile {
		transform: translateY(-50px);
	}
	.fade-down-mobile.animate,
	.fade-up-mobile.animate {
		opacity: 1;
		transform: translateY(0);
	}
	.grow-left-mobile,
	.grow-right-mobile {
		transform: scaleX(0);
		transition: 1200ms all ease-in-out;
	}
	.grow-left-mobile {
		transform-origin: right;
	}
	.grow-right-mobile {
		transform-origin: left;
	}
	.grow-left-mobile.animate,
	.grow-right-mobile.animate {
		transform: scaleX(1);
	}
	.grow-down-mobile,
	.grow-up-mobile {
		transform: scaleY(0);
		transform-origin: top;
		transition: 1200ms all ease-in-out;
	}
	.grow-up-mobile {
		transform-origin: bottom;
	}
	.grow-down-mobile {
		transform-origin: top;
	}
	.grow-down-mobile.animate,
	.grow-up-mobile.animate {
		transform: scaleY(1);
	}
	.fade-mobile {
		opacity: 0;
		transition: 1000ms all ease-in-out;
	}
	.fade-mobile.animate {
		opacity: 1;
	}
}