@charset "utf-8";
/* CSS Document */

/* Animation Hummel */
/* Hummel */

.hummel1 {
	position:absolute;
	left: 5%;
	bottom: 50%;
	z-index:70;
	width:0px;
	height:auto;
	animation:hummel1 70s ease-in-out infinite;
	animation-delay: 2s;
}
	
@keyframes hummel1{
<!-- Anflug -->
	0%{
		left:40%;
		width:0.2%;
		bottom:65%;
	}
	22%{				/*28*/
		left:53%;
		width:1%;
		bottom:37%;
	}
	27% {				/*33*/
		left:54%;
		width:1%;
		bottom:36%;
	}

	36% {				/*42*/
		left:54%;
		width:1%;
		bottom:36%;
	}
<!-- Start 1 -->
	39%{				/*45*/
		left:52%;
		width:1.2%;
		bottom:37%;
	}
	40%{				/*46*/
		left:53%;
		width:1%;
		bottom:38%;
	}
	55% {				/*61*/
		left:33%;
		width:2%;
		bottom:32%;
	}
	59% {				/*65*/
		left:32%;
		width:2%;
		bottom:28%;
	}
	67% {				/*73*/
		left:32%;
		width:2%;
		bottom:28%;
	}
<!-- Start 2 -->
	71% {				/*77*/
		left:33%;
		width:2%;
		bottom:32%;
	}
	85% {				/*91*/
		left:51%;
		width:2%;
		bottom:49%;
	}
	89% {				/*95 */
		left:51%;
		width:2%;
		bottom:49%;
	}
	100% {
		left:100%;
		width:0%;
		bottom:75%;
	}

}

/* Dritte Hummel von rechts nach links */
.hummel3 {
	position:absolute;
	left: 105%;
	bottom: 30%;
	z-index:72;
	width:0%;
	height:auto;
	animation:hummel3 35s linear infinite;
	animation-delay: 20s;
}

@keyframes hummel3{
<!-- Anflug -->
	0%{
		left:105%;
		width:3%;
		bottom:30%;
	}
	2%{
		left:95%;
		width:3%;
		bottom:30%;
	}
	5%{
		bottom:30%;
	}
	15%{
		bottom:40%,
	}
	20%{
		bottom:30%,
	}
	35%{
		bottom:30%,
	}
	50% {
		left:-3%;
		width:2%;
		bottom:50%;
	}

	100% {
		left:-3%;
		width:2%;
		bottom:50%;
	}
}

/* Mediaqueries */
@media (min-width: 1900px) {
	@keyframes hummel1{
	<!-- Anflug -->
		0%{
			left:40%;
			width:0.2%;
			bottom:65%;
		}
		22%{
			left:52%;
			width:1%;
			bottom:37%;
		}
		27% {
			left:53%;
			width:1%;
			bottom:36%;
		}
	
		36% {
			left:53%;
			width:1%;
			bottom:36%;
		}
	<!-- Start 1 -->
		39%{
			left:51%;
			width:1.2%;
			bottom:37%;
		}
		40%{
			left:52%;
			width:1%;
			bottom:38%;
		}
		55% {
			left:32%;
			width:2%;
			bottom:32%;
		}
		59% {
			left:31%;
			width:2%;
			bottom:28%;
		}
		67% {
			left:31%;
			width:2%;
			bottom:28%;
		}
	<!-- Start 2 -->
		71% {
			left:32%;
			width:2%;
			bottom:32%;
		}
		85% {
			left:50%;
			width:2%;
			bottom:49%;
		}
		89% {
			left:50%;
			width:2%;
			bottom:49%;
		}
		100% {
			left:100%;
			width:0%;
			bottom:75%;
		}
	
	}
}
@media (min-width: 701px) and (max-width: 1100px) and (min-height: 500px){
	@keyframes hummel1{
	<!-- Anflug -->
		0%{
			left:40%;
			width:0.4%;
			bottom:65%;
		}
		22%{
			left:52%;
			width:2%;
			bottom:37%;
		}
		37% {
			left:53%;
			width:2%;
			bottom:35.2;
		}
	
		38% {
			left:53%;
			width:2%;
			bottom:35.2%;
		}
	<!-- Start 1 -->
		39%{
			left:51%;
			width:2.4%;
			bottom:36%;
		}
		40%{
			left:52%;
			width:2%;
			bottom:37%;
		}
		55% {
			left:32%;
			width:4%;
			bottom:29%;
		}
		59% {
			left:31%;
			width:4%;
			bottom:26%;
		}
		67% {
			left:31%;
			width:4%;
			bottom:26%;
		}
	<!-- Start 2 -->
		71% {
			left:32%;
			width:4%;
			bottom:32%;
		}
		85% {
			left:50%;
			width:4%;
			bottom:49.3%;
		}
		89% {
			left:50%;
			width:4%;
			bottom:49.3%;
		}
		100% {
			left:100%;
			width:0%;
			bottom:75%;
		}
	
	}
}
@media (max-width: 700px) and (min-height: 500px){
	@keyframes hummel1{
	<!-- Anflug -->
		0%{
			left:40%;
			width:0.4%;
			bottom:65%;
		}
		22%{
			left:53%;
			width:2%;
			bottom:38%;
		}
		27% {
			left:55%;
			width:2%;
			bottom:36.2;
		}
	
		36% {
			left:55%;
			width:2%;
			bottom:36.2%;
		}
	<!-- Start 1 -->
		39%{
			left:53%;
			width:2.4%;
			bottom:37%;
		}
		40%{
			left:53%;
			width:2%;
			bottom:38%;
		}
		55% {
			left:34%;
			width:4%;
			bottom:29%;
		}
		59% {
			left:33%;
			width:4%;
			bottom:27%;
		}
		67% {
			left:33%;
			width:4%;
			bottom:27%;
		}
	<!-- Start 2 -->
		71% {
			left:34%;
			width:4%;
			bottom:32%;
		}
		85% {
			left:50%;
			width:4%;
			bottom:49.3%;
		}
		89% {
			left:50%;
			width:4%;
			bottom:49.3%;
		}
		100% {
			left:100%;
			width:0%;
			bottom:75%;
		}
	
	}

	@keyframes hummel3{
	<!-- Anflug -->
		0%{
			left:105%;
			width:6%;
			bottom:30%;
		}
		2%{
			left:95%;
			width:6%;
			bottom:30%;
		}
		5%{
			bottom:30%;
		}
		15%{
			bottom:40%,
		}
		20%{
			bottom:30%,
		}
		35%{
			bottom:30%,
		}
		50% {
			left:-3%;
			width:4.5%;
			bottom:50%;
		}
	
		100% {
			left:-3%;
			width:4.5%;
			bottom:50%;
		}
	}	
}