@charset "utf-8";
/* ANIMATION-CSS für www.lernatelier.eu */

/* FARBEN
#b5cc3d - Grün (Logo)
#373a41 - H1/H2
#969798 - Text
#ceb716 - Ocker (Button)
#f7f7f7 - Hellgrau
#38393e - Dunkelgrau (Foot)
*/

/* +++++++++++++++++++++++++++++++++++++++ ANIMATION SLIDER HOME +++++++++++++++++++++++++++++++++++++++ */

#slide_andrea { position: absolute; bottom: 0; right: 2%; z-index: 10; opacity: 0; width: auto; height: 80%;
						-webkit-animation-name: andrea; -webkit-animation-duration: 1s; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: forwards;
						animation-name: andrea; animation-duration: 1.4s; animation-delay: 1s; animation-fill-mode: forwards; }
#slide_andrea img { width: auto; height: 100%; margin: 0px auto; }
@-webkit-keyframes andrea {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes andrea {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

#slide_bubbles { position: absolute; top: 0; right: 16%; opacity: 0; z-index: 9; width: auto; height: 90%;
			-webkit-animation-name: bubbles; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 2s; -webkit-animation-fill-mode: forwards;
			animation-name: bubbles; animation-duration: 0.8s; animation-delay: 1.6s; animation-fill-mode: forwards; }
#slide_bubbles img { width: auto; height: 120%; margin: 0px auto; }
@-webkit-keyframes bubbles {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes bubbles {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

#slide_text { position: absolute; top: 32%; left: 4%; max-width: 70%; z-index: 11; opacity: 0; font-weight: 400; color: #373a41;
			-webkit-animation-name: text; -webkit-animation-duration: 1s; -webkit-animation-delay: 2.8s; -webkit-animation-fill-mode: forwards;
			animation-name: text; animation-duration: 2s; animation-delay: 2.4s; animation-fill-mode: forwards; }
@-webkit-keyframes text {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes text {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

#slide_text { font-size: 3vw; }

@media screen and (min-width: 500px) {
#slide_andrea { right: 6%; height: 95%; }
#slide_text { left: 4%; max-width: 60%; font-size: 2.8vw; }
}
@media screen and (min-width: 800px) {
#slide_andrea { right: 12%; height: 100%; }
#slide_text { left: 8%; max-width: 50%; font-size: 2.2vw; }
}
@media screen and (min-width: 1300px) {
#slide_andrea { }
#slide_text { max-width: 50%; font-size: 2em; }
}