@charset "utf-8";
/* CSS Document */
.wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 auto;
	text-align: center;
	/* No spacing to top and bottom and auto spacing to left and right */
}
#home-banner{
	width: 100%;
	float:left;
clear:none;
}
#home-banner img{
	width: 100%;
}
#intro-banner{
	width: 100%;
	background-color: #e6e6e6;
	padding-bottom: 10%;
}
.text{
	content: ' ';
	display: table;
	clear: both;
	padding-top: 20px;
	padding-bottom: 25px;
	width: 100%;
}

.text-alert{
	background-color: #ea2029;
	margin-left: 10%;
		margin-right: 10%;
		padding-top: 2%;
		padding-bottom: 2%;

}
.text-alert> h2, h3{
	color: #fff;
}
@keyframes person1-move {
	% {
	    left: 0%;
	    transform: rotateY(0deg);
	  }
	  49% {
	    transform: rotateY(0deg);
	  }
	  50% {
	    left: -70%;
	    transform: rotateY(180deg);
	  }
	  98% {
	    transform: rotateY(180deg);
	  }
	  99% {
	    left: +75%;
	    transform: rotateY(0deg);
		}
			100% {
				transform: rotateY(180deg);
	  }
}

.schweinchen{
	position: absolute;
	top: 95%;
	left:70%;
	display: block;
	animation-duration: 5s;
	animation-delay: 4s;
animation-name: person1-move;
animation-direction: alternate;
animation-timing-function: linear;

}
.schafe{
	position: absolute;
	top: 95%;
	left:20%;
	display: block;
	animation-duration: 5s;
	animation-delay: 4s;
animation-name: schafe;
animation-direction: alternate;
animation-timing-function: linear;

}
@keyframes schafe {
	% {
	    left: 0%;
	    transform: rotateY(0deg);
	  }
	  49% {
	    transform: rotateY(0deg);
	  }
	  50% {
	    left: -70%;
	    transform: rotateY(180deg);
	  }
	  98% {
	    transform: rotateY(180deg);
	  }
	  99% {
	    left: +20%;
	    transform: rotateY(0deg);
		}
			100% {
				transform: rotateY(180deg);
	  }
}
@media screen and (max-width: 1024px){
	.schweinchen, .schafe{
		display: none;
	}
}
@media screen and (max-width: 992px){
	#home-banner{
		width: 100%;
		float:left;
	clear:none;
	}
	#intro-banner{
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
	}
.schweinchen, .schafe{
	display: none;
}
}
