/*

			<div class="haeder-animation-block fenster"></div>
					<div class="haeder-animation-block kranz"></div>
					<div class="haeder-animation-block flamme-1"></div>
			*/
			

#v_holder{
	height:100%;
	width:100%;
	position: relative;
	background-color:#020202;
}

#canvas{
		animation-delay: 8s;
		animation:verschwinde 1s  linear;
}

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

.haeder-animation-basic-block {
    background-image: url("../images/neujahr/Rostock_winter2024.png");
    background-position: left top;
    background-size: 100% 100%;
}

.wolken {
    background-image: url("../images/weihnachtsmarkt/wolken.png");
    background-position: 100% 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
	opacity:0.4;
	animation:move_left 13s infinite linear;
	-webkit-animation-name: move_left;
	-webkit-animation-duration: 13s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
	
}

.strahler_1 {
    background-image: url("../images/neujahr/strahler.png");
    background-position: 100% 29px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 160%;
    transform: rotateY(0deg);
    width: 58%;
	
	animation:strahler 23s infinite linear;
	-webkit-animation-name: strahler;
	-webkit-animation-duration: 23s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}


.strahler_2 {
    background-image: url("../images/neujahr/strahler.png");
    background-position: 100% 29px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 160%;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    width: 60%;
	left:40%;
	animation:strahler2 17s infinite linear;
	-webkit-animation-name: strahler2;
	-webkit-animation-duration: 17s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}


.snow{
	
	background-image: url("../images/weihnachtsmarkt/schnee_1.png");

	
	background-position: 0 -300px;
    background-repeat: repeat repeat;
    background-size: auto 300px ;
	
	animation:move_bottom 17s infinite linear;
	-webkit-animation-name: move_bottom;
	-webkit-animation-duration: 17s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
	
}


.header-animation-text-block.attention{
	width:20%;
	background:rgba(255,255,255,0.65);
	position:relative;
	right:60px;
	top:60px;
	padding:38px;
	color:#3D4245;
	text-align:center;
	float:right;
	overflow:hidden;
}
.header-animation-text-block:after{
	content: ''; 
    position: absolute; 
    top: -40px;
    right: -40px; 
    width: 80px; 
    height: 80px; 
    background: #1D2122; 
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.header-animation-text-block:before{
    background: #1d2122 none repeat scroll 0 0;
	background:rgba(0,0,0,0);
    content: "";
    height: 56px;
    position: absolute;
    right: 0;
    top: 0;
    width: 56px;
	border-left:1px solid rgba(255,255,255,0.4);
	border-bottom:1px solid rgba(255,255,255,0.4);
	box-shadow:1px 1px 1px black;
}

.header-animation-text-block a{
	display:block;
	font-size:1.1em;
	color:#222629;
}

.header-animation-text-block .solo{
	display:block;
	padding-top:5px;
}
.header-animation-text-block span.big{
	font-size:1.4em;
}

@media (min-width:768px) and (max-width:1024px) {  
	.header-animation-text-block.attention{
		right: 10px;
		width: 27%;
		padding:25px;
		font-size:0.9em;
	}
	
	.header-animation-text-block:after{
		top: -30px;
		right: -30px; 
		width: 60px; 
		height: 60px; 
		
	}
	
	.header-animation-text-block:before{
		height:43px;
		width:43px;
		
	}
}

@-webkit-keyframes strahler{
	    0%   {
			height: 10%;
			}
		 50%   {
			height: 160%;
			}

	    100% { height: 10%;}
}
@keyframes strahler{
	    0%   {
			height: 10%;
			}
		 50%   {
			height: 160%;
			}

	    100% { height: 10%;}
}

@-webkit-keyframes strahler2{
	    0%   {
			height: 40%;
			}
		 50%   {
			height: 140%;
			}

	    100% { height: 40%;}
}
@keyframes strahler2{
	    0%   {
			height: 40%;
			}
		 50%   {
			height: 140%;
			}

	    100% { height: 40%;}
}


@-webkit-keyframes move_bottom{
	    0%   {

				background-position: 0 -300px;
			}

	    100%    { background-position: 0% 0px;}
}

@keyframes move_bottom {
	    0%   {

			 background-position: 0% -300px;
			}

	    100%    { background-position: 0% 0px;}
}


@-webkit-keyframes move_left{
	    0%   {

			 background-position: 100% 0%;
			}

	    100%    { background-position: 0 0%;}
}

@keyframes move_left {
	    0%   {
			 background-position: 100% 0%;
			}

	    100%    { background-position: 0 0%;}
}


@-webkit-keyframes init_city{
	    0%   {
			opacity:1;
			 background-position: center 0%;
			}

	    100%    { background-position: center 100%;}
}

@keyframes init_city {
	    0%   {
			opacity:1;
			 background-position: center 0%;
			}

	    100%    { background-position: center 100%;}
}


@-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;}
}