@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_title { position: absolute; top: 20%; left: 4%; z-index: 11; opacity: 0; font-weight: 300; color: #373a41;
			-webkit-animation-name: title; -webkit-animation-duration: 1s; -webkit-animation-delay: 2.5s; -webkit-animation-fill-mode: forwards;
			animation-name: title; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; }
@-webkit-keyframes title {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes title {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

#slide_andrea { position: absolute; bottom: 0; right: 5%; z-index: 10; opacity: 0; width: auto; height: 86%;
						-webkit-animation-name: andrea; -webkit-animation-duration: 1s; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: forwards;
						animation-name: andrea; animation-duration: 1s; animation-delay: 2s; 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: 12%; 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: 2.4s; 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: 40%; left: 4%; max-width: 50%; z-index: 11; opacity: 0; font-weight: 400; color: #373a41;
			-webkit-animation-name: text; -webkit-animation-duration: 1s; -webkit-animation-delay: 2.5s; -webkit-animation-fill-mode: forwards;
			animation-name: text; animation-duration: 1s; animation-delay: 3.2s; animation-fill-mode: forwards; }
@-webkit-keyframes text {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes text {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

#slide_title { font-size: 4.4vw; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#slide_text { font-size: 3.6vw; }

@media screen and (min-width: 400px) {
#slide_text { font-size: 3.2vw; }
}
@media screen and (min-width: 500px) {
#slide_title { top: 26%; left: 9%; font-size: 3vw; }
#slide_andrea { right: 10%; height: 90%; }
#slide_text { top: 52%; left: 12%; max-width: 40%; font-size: 2.4vw; }
}
@media screen and (min-width: 800px) {
#slide_title { font-size: 3vw; }
#slide_text { max-width: 45%; font-size: 1.8vw; }
}
@media screen and (min-width: 1300px) {
#slide_title { font-size: 2.8em; }
#slide_text { max-width: 40%; font-size: 1.6em; }
}