body{
	background: #4c301e;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	
	}
	
img{
	width: 100%;
	}
	
header{
		width: 100%;
		background: #fde7a5 url(sonnenblume.png) no-repeat left top;
		text-shadow: 0px 0px 2px #fff;
		background-size: contain;
		padding: 20px;
		font-size: 20px;
		box-sizing:border-box;
		margin: 5px 0 5px 0;
		animation: erscheinen1 5s;
		opacity: 1;
		color: #6d2e2b;
		}
		
	

section{
		width: 100%;
		background: #d9d9d9 url(background_section.png) no-repeat left bottom;
		background-size: contain;
		text-shadow: 0px 0px 2px #fff;
		color: #111;
		padding: 20px;
		box-sizing:border-box;
		margin: 5px 0 5px 0;
		animation: erscheinen2 4s;
		opacity: 1;
		}
		
		
footer{
		width: 100%;
		background: #fde7a5;
		padding: 20px;
		font-size: 18px;
		box-sizing:border-box;
		margin: 5px 0 5px 0;
		animation: erscheinen1 12s;
		opacity: 1;
		color: #6d2e2b;
		}
		
		
		
@keyframes erscheinen2 {
	 0%   { opacity: 0;}
	 40%   { opacity: 0;}
	 100%   { opacity: 1;}
}

@keyframes erscheinen1 {
	 0%   { opacity: 0;}
	 40%   { opacity: 0.8;}
	 100%   { opacity: 1;}
}
.card{
		width: 100%;
		height: 300px;
		-webkit-box-shadow: 0px 0px 24px 2px #312783;
-moz-box-shadow: 0px 0px 24px 2px #312783;
box-shadow: 0px 0px 24px 2px #312783;
opacity: 0.85;
}


#traktor { 
	margin: -40px 0 -100px -12px;	
	animation-name: motion;
    animation-duration: 6s;
	width:438px;
	-ms-zoom: 0.7; 
	    -moz-transform: scale(0.7);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.7);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.7);
        -webkit-transform-origin: 0 0;
		transform: scale(0.7);
        transform-origin: 0 0;
	}

@keyframes motion {
    0%   {margin: -40px 0 -100px -1050px;}
	100%   {margin: -40px 0 -100px -12px;}
}


#reifen1 {
	margin: -185px 0 0 10px;
	width: 195px;
}


#reifen2 {
	margin: -130px 0 0 310px;
	width: 130px;
	
}




#traktor .reifen1 img{	
	animation-name: rotate1;
	animation-duration: 6s;
	}

@keyframes rotate1 {
    0%   { transform: rotate(0deg);}
	100%   {transform: rotate(720deg);}
}


#traktor .reifen2 img{	
	animation-name: rotate2;
	animation-duration: 6s;
	}

@keyframes rotate2 {
    0%   { transform: rotate(0deg);}
	100%   {transform: rotate(1080deg);}
}




@media only screen and (min-width: 1240px) {
body{
	font-size: 20px;
	margin: 5px auto 5px auto;
	}


header{
	max-width: 1200px;
	margin: 5px auto 5px auto;
	font-size: 30px;
	}
	
section{
	max-width: 1200px;
	margin: 5px auto 5px auto;
		}
		
footer{
	max-width: 1200px;
	margin: 5px auto 5px auto;
	background-size: auto;
		}
		
.card{
		max-width: 1200px;
		height: 500px;
		}


#traktor { 
		-ms-zoom: 1.0; 
	    -moz-transform: scale(1.0);
        -moz-transform-origin: 0 0;
        -o-transform: scale(1.0);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(1.0);
        -webkit-transform-origin: 0 0;
		transform: scale(1.0);
        transform-origin: 0 0;
		animation-name: motion1;
    animation-duration: 6s;
	margin: -60px 0 -270px 680px;
	}
	
	
@keyframes motion1 {
    0%   {margin: -60px 0 -270px -1050px;}
	100%   {margin: -60px 0 -270px 680px;}
}


img{
	max-width: 1200px;
	}