/*
	  			<div id="v_holder" class="haeder-animation-basic-block">

					<div class="haeder-animation-block fruehling-sonne"></div>
					<div class="haeder-animation-block fruehling-sonne-2"></div>
					<div class="haeder-animation-block fruehling-front"></div>
					<div class="haeder-animation-block fruehling-blueten"></div>
					<div class="haeder-animation-block fruehling-blumen"></div>
					<div class="haeder-animation-block fruehling-schatten"></div>

										 "fruehling-sonne",
					"fruehling-sonne-2",
					"ostern-front",
					"ostern-grass-1",
					"ostern-baer",
					"ostern-eier-1",
					"ostern-kuecken-1",
					"ostern-grass-2",
	  			</div>
*/

#canvas{


		animation-name: verschwinde;
		animation-duration: 1s;
		animation-delay: 8s;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		
		
		-webkit-animation-name: verschwinde;
		-webkit-animation-duration: 1s;
		-webkit-animation-delay: 8s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;
		 -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
		
}


#v_holder{
	height:100%;
	width:100%;
	position: relative;
}

.haeder-animation-block{
	height:100%;
	width:100%;
	position:absolute;
	bottom:0px;
	left:0px;
}

.haeder-animation-basic-block{
		background-image:	url(../images/RostockFruehling/silhuette.png);
		background-size:	100% auto;/*6*/
		background-position:	center 146%;
		background-repeat:no-repeat;
		
}

.fruehling-sonne{
		background-image:	url(../images/RostockFruehling/sonne1.png) ;/*7*/
		background-size:	 30% auto;/*7*/
		background-position:	19% 3%;		/*7*/
		background-repeat:no-repeat;
		
		animation:opacity_sonne 25s infinite linear;
		
		-webkit-animation-name: opacity_sonne;
		-webkit-animation-duration: 25s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;
}
.fruehling-sonne-2{
		background-image:	url(../images/RostockFruehling/sonne3.png) ;/*7*/
		background-size:	 30% auto;/*7*/
		background-position:	19% 3%;		/*7*/
		background-repeat:no-repeat;
		
		animation:opacity_sonne_2 25s infinite linear;
		
		-webkit-animation-name: opacity_sonne_2;
		-webkit-animation-duration: 25s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;
}

.fruehling-schatten{
		background-image:		url(../images/RostockFruehling/baumschatten.png)  ;/*0*/
		background-size:	 		100% auto;/*0*/
		background-position:	center bottom;/*0*/
		background-repeat:	no-repeat;
		animation:					opacity_sonne 25s infinite linear; 
		-webkit-animation-name: opacity_sonne;
		-webkit-animation-duration: 25s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;
}

.fruehling-blueten{
		background-image:		url(../images/RostockFruehling/blueten_4.png)  , url(../images/RostockFruehling/alternate/blumen1.png);/*0*/
		background-size:	 		100% auto;/*0*/
		background-position:	center bottom;/*0*/
		background-repeat:	no-repeat;
		animation:					opacity_blueten 25s infinite linear; 
		
		-webkit-animation-name: opacity_blueten;
		-webkit-animation-duration: 25s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;
}

.ostern-grass-1{
    background-image: url("../images/ostern/hintergrund_rasen.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.ostern-grass-2{
    background-image: url("../images/ostern/vordergrund_rasen.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;

}
.ostern-eier-1{
    background-image: url("../images/ostern/eier.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
}


.ostern-baer{
    background-image: url("../images/ostern/teddy_gross.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
	
		animation:bear 10s infinite linear; 
		-webkit-animation-name: bear;
		-webkit-animation-duration: 10s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;	
}

.ostern-kuecken-1{
    background-image: url("../images/ostern/kueken_gross.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 90% auto;
	
		animation:kueken 10s infinite linear; 
		-webkit-animation-name: kueken;
		-webkit-animation-duration: 10s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;

}

.ostern-front{
		background-image:
		url(../images/RostockFruehling/wolke4.png),	 /*2*/
		url(../images/RostockFruehling/wolke4.png),	 /*2*/
		url(../images/RostockFruehling/wolke3.png),	 /*3*/
		url(../images/RostockFruehling/wolke2.png),	/*4*/
		url(../images/RostockFruehling/wolke1.png);	/*5*/
		background-repeat:no-repeat;
		animation:fruehling 25s infinite linear; 
		-webkit-animation-name: fruehling;
		-webkit-animation-duration: 25s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;
		
		background-size:

	25% auto,/*2*/	
	25% auto,/*2*/
	25% auto,/*3*/
	25% auto,/*4*/
	20% auto;/*5*/
	
		background-position:


		120% 0%,			/*2*/
		20% 0%,			/*2*/
		160% 0%,			/*3*/
		140% 70%,		/*4*/
		100% 60%;	/*5*/
}




/*
@-webkit-keyframes mymove {
    from {background-position: -250% 60%, center center;}
    to {background-position: 450% 50%, center center;}
}

/* Standard syntax *//*
@keyframes mymove {
    from { background-position: -250% 10%, center center;}
    to {background-position: 450% 50%, center center;}
}
*/


@-webkit-keyframes verschwinde{
	    0%   {
			opacity:1;
			animation-timing-function: linear;
			}

	    100%    {opacity:0;}
}

@keyframes verschwinde {
	    0%   {
			opacity:1;
			animation-timing-function: linear;
			}

	    100%    {opacity:0;}
}


@-webkit-keyframes bear{
	    0%   {
			background-position:50% 130%;
			}
		20%{
			background-position:50% 92%;
		}
		30%{
			background-position:50% 92%;
		}
		50%{
			background-position:50% 92%;
		}
		52%{
			background-position:50% 130%;
		}
		60%{
			background-position:50% 130%;
		}
		80%{
			background-position:50% 130%
		}
		90%{
			background-position:50% 130%;
		}		
		100%{
			background-position:50% 130%;
		}
}
@keyframes bear{
	    0%   {
			background-position:50% 130%;
			}
		20%{
			background-position:50% 92%;
		}
		30%{
			background-position:50% 92%;
		}
		50%{
			background-position:50% 92%;
		}
		52%{
			background-position:50% 130%;
		}
		60%{
			background-position:50% 130%;
		}
		80%{
			background-position:50% 130%
		}
		90%{
			background-position:50% 130%;
		}		
		100%{
			background-position:50% 130%;
		}
}

@keyframes kueken{
	    0%   {
			background-position:230% 100%;
			}
		52%{
			background-position:-350% 100%;
		}	
		53%{
			background-position:-330% 127%;
		}
		54%{
			background-position:-330% 100%;
		}
		100%{
			background-position:-1250% 100%;
		}
}
@-webkit-keyframes kueken{
	    0%   {
			background-position:230% 100%;
			}
		52%{
			background-position:-350% 100%;
		}	
		53%{
			background-position:-330% 127%;
		}
		54%{
			background-position:-330% 100%;
		}
		100%{
			background-position:-1250% 100%;
		}
}





@-webkit-keyframes opacity_sonne{
	    0%   {
			opacity:0;
			animation-timing-function: linear;
			}
	    10%    {opacity:0;
		animation-timing-function: linear;}
	    20%   {opacity:0.4;
		animation-timing-function: linear;}
	    30%    {opacity:0.6;
		animation-timing-function: linear;}
	    40%    {opacity:0.9;
		animation-timing-function: linear;}
	    50%    {opacity:8;
		animation-timing-function: linear;}
	    60%    {opacity:0.6;
		animation-timing-function: linear;}
	    80%    {opacity:1;
		animation-timing-function: linear;}
	    90%    {opacity:1;
		animation-timing-function: linear;}
	    100%    {opacity:0;}
}

@keyframes opacity_sonne {
	    0%   {
			opacity:0;
			animation-timing-function: linear;
			}
	    10%    {opacity:0;
		animation-timing-function: linear;}
	    20%   {opacity:0.4;
		animation-timing-function: linear;}
	    30%    {opacity:0.6;
		animation-timing-function: linear;}
	    40%    {opacity:0.9;
		animation-timing-function: linear;}
	    50%    {opacity:8;
		animation-timing-function: linear;}
	    60%    {opacity:0.6;
		animation-timing-function: linear;}
	    80%    {opacity:1;
		animation-timing-function: linear;}
	    90%    {opacity:1;
		animation-timing-function: linear;}
	    100%    {opacity:0;}
}

@-webkit-keyframes opacity_sonne_2{
	    0%   {
			opacity:0;
			animation-timing-function: linear;
			}
			5%{
			opacity:0;
			animation-timing-function: linear;
			}
	    10%    {opacity:0;
		animation-timing-function: linear;}
	    20%   {opacity:0;
		animation-timing-function: linear;}
	    30%    {opacity:0;
		animation-timing-function: linear;}
	    35%    {opacity:1;
		animation-timing-function: linear;}
	    40%    {opacity:0;
		animation-timing-function: linear;}
	    45%    {opacity:1;
		animation-timing-function: linear;}
	    50%    {opacity:0;
		animation-timing-function: linear;}
	    55%    {opacity:1;
		animation-timing-function: linear;}
	    60%    {opacity:1;
		animation-timing-function: linear;}
	    65%    {opacity:0;
		animation-timing-function: linear;}	
		70%    {opacity:1;
		animation-timing-function: linear;}
	    80%    {opacity:0;
		animation-timing-function: linear;}
	    90%    {opacity:1;
		animation-timing-function: linear;}
	    100%    {opacity:0;}
}

@keyframes opacity_sonne_2 {
	    0%   {
			opacity:0;
			animation-timing-function: linear;
			}
			5%{
			opacity:0;
			animation-timing-function: linear;
			}
	    10%    {opacity:0;
		animation-timing-function: linear;}
	    20%   {opacity:0;
		animation-timing-function: linear;}
	    30%    {opacity:0;
		animation-timing-function: linear;}
	    35%    {opacity:1;
		animation-timing-function: linear;}
	    40%    {opacity:0;
		animation-timing-function: linear;}
	    45%    {opacity:1;
		animation-timing-function: linear;}
	    50%    {opacity:0;
		animation-timing-function: linear;}
	    55%    {opacity:1;
		animation-timing-function: linear;}
	    60%    {opacity:1;
		animation-timing-function: linear;}
	    65%    {opacity:0;
		animation-timing-function: linear;}	
		70%    {opacity:1;
		animation-timing-function: linear;}
	    80%    {opacity:0;
		animation-timing-function: linear;}
	    90%    {opacity:1;
		animation-timing-function: linear;}
	    100%    {opacity:0;}
}

@-webkit-keyframes opacity_blueten{
	    0%   {opacity:0;}
	    10%    {opacity:0;}
	    20%   {opacity:0.2;}
	    30%    {opacity:0.6;}
	    40%    {opacity:0.9;}
	    50%    {opacity:1;}
	    60%    {opacity:1;}
	    80%    {opacity:1;}
	    90%    {opacity:1;}
	    100%    {opacity:0;}
}

@keyframes opacity_blueten {
	    0%   {opacity:0;}
	    10%    {opacity:0;}
	    20%   {opacity:0.2;}
	    30%    {opacity:0.6;}
	    40%    {opacity:0.9;}
	    50%    {opacity:1;}
	    60%    {opacity:1;}
	    80%    {opacity:1;}
	    90%    {opacity:1;}
	    100%    {opacity:0;}
}

@-webkit-keyframes opacity_blumen{
	    0%   {opacity:0;}
	    10%    {opacity:0;}
	    20%   {opacity:0;}
	    30%    {opacity:0.2;}
	    40%    {opacity:0.6;}
	    50%    {opacity:1;}
	    60%    {opacity:1;}
	    80%    {opacity:1;}
	    90%    {opacity:1;}
	    100%    {opacity:0;}
}

@keyframes opacity_blumen {
	    0%   {opacity:0;}
	    10%    {opacity:0;}
	    20%   {opacity:0;}
	    30%    {opacity:0.2;}
	    40%    {opacity:0.6;}
	    50%    {opacity:1;}
	    60%    {opacity:1;}
	    80%    {opacity:1;}
	    90%    {opacity:1;}
	    100%    {opacity:0;}
}

@-webkit-keyframes fruehling {
    0%   {
		background-position:

		120% 0%,			/*2*/
		20% 0%,			/*2*/
		160% 0%,			/*3*/
		140% 70%,		/*4*/
		100% 60%;	/*5*/
	}
	10%{
		background-position:


		110% 0%,			/*2*/
		10% 0%,			/*2*/
		140% 0%,			/*3*/
		122% 70%,		/*4*/
		86% 60%;		/*5*/
	}
	
	20%{
		background-position:


		100% 0%,			/*2*/
		0% 0%,			/*2*/
		120% 0%,			/*3*/
		104% 70%,		/*4*/
		72% 60%;		/*5*/

	}
	30%{
		background-position:


		90% 0%,			/*2*/
		-10% 0%,			/*2*/
		100% 0%,			/*3*/
		86% 70%,		/*4*/
		58% 60%;		/*5*/

	}
	40%{
		background-position:


		80% 0%,			/*2*/
		-20% 0%,			/*2*/
		80% 0%,			/*3*/
		68% 70%,		/*4*/
		44% 60%;		/*5*/
	}
	50%{
		background-position:


		70% 0%,			/*2*/
		-30% 0%,			/*2*/
		60% 0%,			/*3*/
		50% 70%,		/*4*/
		30% 60%;		/*5*/
	}
	60%{
		background-position:


		60% 0%,			/*2*/
		-40% 0%,			/*2*/
		40% 0%,			/*3*/
		32% 70%,		/*4*/
		16% 60%/*5*/

	}
	70%{
		background-position:


		50% 0%,			/*2*/
		-40% 0%,			/*2*/
		20% 0%,			/*3*/
		14% 70%,		/*4*/
		2% 60%;		/*5*/

	}
	80%{
		background-position:


		40% 0%,			/*2*/
		-40% 0%,			/*2*/
		-0% 0%,			/*3*/
		-4% 70%,		/*4*/
		-12% 60%;		/*5*/

	}
	90%{
		background-position:


		30% 0%,			/*2*/
		-40% 0%,			/*2*/
		-20% 0%,			/*3*/
		-22% 70%,		/*4*/
		-26% 60%;		/*5*/

	}
	
    100%  {
		background-position:


		20% 0%,			/*2*/
		-40% 0%,			/*2*/
		-40% 0%,			/*3*/
		-40% 70%,		/*4*/
		-40% 60%;		/*5*/

	}
}

/* Standard syntax */


@keyframes fruehling {
    0%   {
		background-position:


		120% 0%,			/*2*/
		20% 0%,			/*2*/
		160% 0%,			/*3*/
		140% 70%,		/*4*/
		100% 60%;	/*5*/
	}
	10%{
		background-position:


		110% 0%,			/*2*/
		10% 0%,			/*2*/
		140% 0%,			/*3*/
		122% 70%,		/*4*/
		86% 60%;		/*5*/
	}
	
	20%{
		background-position:


		100% 0%,			/*2*/
		0% 0%,			/*2*/
		120% 0%,			/*3*/
		104% 70%,		/*4*/
		72% 60%;		/*5*/

	}
	30%{
		background-position:


		90% 0%,			/*2*/
		-10% 0%,			/*2*/
		100% 0%,			/*3*/
		86% 70%,		/*4*/
		58% 60%;		/*5*/

	}
	40%{
		background-position:


		80% 0%,			/*2*/
		-20% 0%,			/*2*/
		80% 0%,			/*3*/
		68% 70%,		/*4*/
		44% 60%;		/*5*/
	}
	50%{
		background-position:


		70% 0%,			/*2*/
		-30% 0%,			/*2*/
		60% 0%,			/*3*/
		50% 70%,		/*4*/
		30% 60%;		/*5*/
	}
	60%{
		background-position:


		60% 0%,			/*2*/
		-40% 0%,			/*2*/
		40% 0%,			/*3*/
		32% 70%,		/*4*/
		16% 60%/*5*/

	}
	70%{
		background-position:


		50% 0%,			/*2*/
		-40% 0%,			/*2*/
		20% 0%,			/*3*/
		14% 70%,		/*4*/
		2% 60%;		/*5*/

	}
	80%{
		background-position:


		40% 0%,			/*2*/
		-40% 0%,			/*2*/
		-0% 0%,			/*3*/
		-4% 70%,		/*4*/
		-12% 60%;		/*5*/

	}
	90%{
		background-position:


		30% 0%,			/*2*/
		-40% 0%,			/*2*/
		-20% 0%,			/*3*/
		-22% 70%,		/*4*/
		-26% 60%;		/*5*/

	}
	
    100%  {
		background-position:


		20% 0%,			/*2*/
		-40% 0%,			/*2*/
		-40% 0%,			/*3*/
		-40% 70%,		/*4*/
		-40% 60%;		/*5*/

	}
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : portrait){
	@-webkit-keyframes bear{
	    0%   {
			background-position:50% 70%;
			}
		20%{
			background-position:50% 100%;
		}
		30%{
			background-position:50% 100%;
		}
		50%{
			background-position:50% 100%;
		}
		52%{
			background-position:50% 70%;
		}
		60%{
			background-position:50% 70%;
		}
		80%{
			background-position:50% 70%
		}
		90%{
			background-position:50% 70%;
		}		
		100%{
			background-position:50% 70%;
		}
}
@keyframes bear{
	    0%   {
			background-position:50% 70%;
			}
		20%{
			background-position:50% 100%;
		}
		30%{
			background-position:50% 100%;
		}
		50%{
			background-position:50% 100%;
		}
		52%{
			background-position:50% 70%;
		}
		60%{
			background-position:50% 70%;
		}
		80%{
			background-position:50% 70%
		}
		90%{
			background-position:50% 70%;
		}		
		100%{
			background-position:50% 70%;
		}
}

@keyframes kueken{
	    0%   {
			background-position:230% 100%;
			}
		52%{
			background-position:-350% 100%;
		}	
		53%{
			background-position:-330% 77%;
		}
		54%{
			background-position:-330% 100%;
		}
		100%{
			background-position:-1250% 100%;
		}
}
@-webkit-keyframes kueken{
	    0%   {
			background-position:230% 100%;
			}
		52%{
			background-position:-350% 100%;
		}	
		53%{
			background-position:-330% 77%;
		}
		54%{
			background-position:-330% 100%;
		}
		100%{
			background-position:-1250% 100%;
		}
}
	.haeder-animation-basic-block{

		background-position:	center top;

		
}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : landscape){
	
	.haeder-animation-basic-block{

		background-position:	center top;

		
}
	
@keyframes kueken{
	    0%   {
			background-position:230% 100%;
			}
		52%{
			background-position:-350% 100%;
		}	
		53%{
			background-position:-330% 77%;
		}
		54%{
			background-position:-330% 100%;
		}
		100%{
			background-position:-1250% 100%;
		}
}
@-webkit-keyframes kueken{
	    0%   {
			background-position:230% 100%;
			}
		52%{
			background-position:-350% 100%;
		}	
		53%{
			background-position:-330% 77%;
		}
		54%{
			background-position:-330% 100%;
		}
		100%{
			background-position:-1250% 100%;
		}
}
	
	@-webkit-keyframes bear{
	    0%   {
			background-position:50% 50%;
			}
		20%{
			background-position:50% 100%;
		}
		30%{
			background-position:50% 100%;
		}
		50%{
			background-position:50% 100%;
		}
		52%{
			background-position:50% 50%;
		}
		60%{
			background-position:50% 50%;
		}
		80%{
			background-position:50% 50%
		}
		90%{
			background-position:50% 50%;
		}		
		100%{
			background-position:50% 50%;
		}
}
@keyframes bear{
	    0%   {
			background-position:50% 50%;
			}
		20%{
			background-position:50% 100%;
		}
		30%{
			background-position:50% 100%;
		}
		50%{
			background-position:50% 100%;
		}
		52%{
			background-position:50% 50%;
		}
		60%{
			background-position:50% 50%;
		}
		80%{
			background-position:50% 50%
		}
		90%{
			background-position:50% 50%;
		}		
		100%{
			background-position:50% 50%;
		}
}
}
*/