body {
overflow: hidden;
}

/* animations */






.andy{
    background-image: url(andyR.png);
	
    height: 381px;
    width: 222px;
    margin-left: 0px;
	margin-top: -400px;
	
    
	background-size: cover; 
	background-repeat: no-repeat;
}

.andy_move {
	
	-webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
	
    -webkit-animation: andymove 35s linear infinite;
    -moz-animation: andymove 35s linear infinite;
    -o-animation: andymove 35s linear infinite;
    animation: andymove 35s linear infinite;
}


   

@-webkit-keyframes andymove {

       0% {
        background-size: 100%;
		margin-left: 480px;
    }
	50% {
        background-size: 100%;
		margin-left: 280px;
    }
	52% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(10deg)
    }
	54% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(-10deg)
    }
	56% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(10deg)
    }
	58% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(0deg)
    }
    100% {
        margin-left: 3500px;
    }
}
@-moz-keyframes andymove {

      0% {
        background-size: 100%;
		margin-left: 480px;
    }
	50% {
        background-size: 100%;
		margin-left: 280px;
    }
	52% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(10deg)
    }
	54% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(-10deg)
    }
	56% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(10deg)
    }
	58% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(0deg)
    }
    100% {
        margin-left: 3500px;
    }
}
@-o-keyframes andymove {

      0% {
        background-size: 100%;
		margin-left: 480px;
    }
	50% {
        background-size: 100%;
		margin-left: 280px;
    }
	52% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(10deg)
    }
	54% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(-10deg)
    }
	56% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(10deg)
    }
	58% {
        background-size: 100%;
		margin-left: 280px;
		-webkit-transform:rotate(0deg)
    }
    100% {
        margin-left: 3500px;
    }
}
@keyframes andymove {
    0% {
      	background-image: url(andyR.png);
		
    }
	10% {
        background-image: url(andyR.png);
		margin-left: 50%;
    }
	11% {
        background-image: url(andyL.png);
		margin-left: 50%;
    }
	
	20% {
        background-image: url(andyL.png);
		margin-left: 30%;
		
    }
	21% {
        background-image: url(andyR.png);
		margin-left: 30%;
		
    }
	30% {
        background-image: url(andyR.png);
		margin-left: 60%;
	
    }
	31% {
		background-image: url(andyL.png);
		margin-left: 60%;
		
    }
	40% {
        background-image: url(andyL.png);
		margin-left: 30%;
		
    }
	41% {
        background-image: url(andyTelefon.png);
		margin-left: 30%;
		
    }
	50% {
        background-image: url(andyTelefon.png);
		margin-left: 30%;
		
    }
	51% {
        background-image: url(andyR.png);
		margin-left: 30%;
	
    }
	60% {
        background-image: url(andyR.png);
		margin-left: 60%;
	
    }
	61% {
		background-image: url(andyL.png);
		margin-left: 60%;
		
    }
	70% {
		background-image: url(andyL.png);
		margin-left: 40%;
    }
	71% {
		background-image: url(andyR.png);
		margin-left: 40%;
    }
	80% {
        background-image: url(andyR.png);
		margin-left: 60%;
	
    }
	90% {
        background-image: url(andyR.png);
		margin-left: 60%;
		margin-top: -350px;

    }
	91% {
		background-image: url(andyTelefon.png);
		margin-left: 60%;
    }
	
	92% {
		background-image: url(andyTelefon.png);
		margin-left: 60%;

    }
	
    100% {
		background-image: url(andyTelefon.png);
        margin-left: 0%;
    }
}

.stephan {
    background-image: url(stephan.png);
    height: 381px;
    width: 222px;
    position: relative;
	
	margin-left: 0px;
	margin-top: -600px;
	
	background-size: cover; 
	background-repeat: no-repeat;
}

.stephan_move {


    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    

    /*Speed will also be proportional to the size and opacity*/
    /*More the speed. Less the time in 's' = seconds*/
    -webkit-animation: movestephan 35s linear infinite;
    -moz-animation: movestephan 35s linear infinite;
    -o-animation: movestephan 35s linear infinite;
    animation: movestephan 35s linear infinite;
}

.bonni {
    background-image: url(bonni.png);
     height: 381px;
    width: 222px;
    position: relative;
	
	margin-left: 0px;
	margin-top: -400px;
	
	background-size: cover; 
	background-repeat: no-repeat;
}

.bonni_move {
  
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    

    -webkit-animation: movebonni 30s linear infinite;
    -moz-animation: movebonni 30s linear infinite;
    -o-animation: movebonni 30s linear infinite;
    animation: movebonni 30s linear infinite;
}













@-webkit-keyframes movestephan {
    0% {
        margin-left: -1500px;
    }
    100% {
        margin-left: 2500px;
    }
}

@-moz-keyframes movestephan {
    0% {
        margin-left: -1500px;
    }
    100% {
        margin-left: 3500px;
    }
}

@-o-keyframes movestephan {
    0% {
        margin-left: -1500px;
    }
    100% {
        margin-left: 3500px;
    }
}

@keyframes movestephan {
    0% {
            margin-left: -630px;
    }
	 
	20% {
			background-image: url(stephan.png);
            margin-left: 40%;
			margin-top: -630px;
    }
	21% {
			background-image: url(stephanHinten.png);
            margin-left: 40%;
    }
	25% {
			background-image: url(stephanHinten.png);
            margin-left: 40%;
			margin-top: -680px;
    }
	45% {
			background-image: url(stephanHinten.png);
            margin-left: 40%;
			margin-top: -680px;
    }
	50% {
			background-image: url(stephanHinten.png);
            margin-left: 50%;
			margin-top: -680px;
    }
	55% {
			background-image: url(stephanHinten.png);
            margin-left: 40%;
			margin-top: -680px;
    }
	56% {
			background-image: url(stephan.png);
            margin-left: 40%;
			margin-top: -680px;
    }
	60% {
			background-image: url(stephan.png);
            margin-left: 40%;
			margin-top: -630px;
    }
    100% {
        margin-left: 0px;
    }
}


@-webkit-keyframes movebonni {
    0% {
        margin-left: -1500px;
    }
    100% {
        margin-left: 3500px;
    }
}

@-moz-keyframes movebonni {
    0% {
        margin-left: -3500px;
    }
    100% {
        margin-left: 3500px;
    }
}

@-o-keyframes movebonni {
    0% {
        margin-left: -3500px;
    }
    100% {
        margin-left: 3500px;
    }
}

@keyframes movebonni {
    0% {
		background-image: url(bonni.png);
        margin-left: -400px;
		
    }
    60% {
		background-image: url(bonni.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	61% {
		background-image: url(bonni.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	62% {
		background-image: url(bonniVorne.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	63% {
		background-image: url(bonniVorne2.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	64% {
		background-image: url(bonniVorne3.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	65% {
		background-image: url(bonniVorne2.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	66% {
		background-image: url(bonniVorne3.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	67% {
		background-image: url(bonniVorne2.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	68% {
		background-image: url(bonniVorne3.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	69% {
		background-image: url(bonniVorne2.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	70% {
		background-image: url(bonniVorne3.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	71% {
		background-image: url(bonniVorne2.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	72% {
		background-image: url(bonniVorne3.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	73% {
		background-image: url(bonniVorne2.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	74% {
		background-image: url(bonniVorne3.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	75% {
		background-image: url(bonniL.png);
        margin-left: 50%;
		margin-top: -380px;
    }
	
	100% {
		background-image: url(bonniL.png);
        margin-left: 0%;
		margin-top:  -400px;
    }
}