@charset "utf-8";
/* CSS Screen */


/* ---------------------------------------->>> Standardformate deaktivieren */
*{
	border:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;	
	-webkit-box-sizing:border-box;	
	font-size: 1em;
	margin:0;
	padding:0;
	list-style-type:none;
}

/* ---------------------------------------->>> allgemeine Klassen */
.hide{display:none;}
.clr, .clear{clear:both;}
.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.floatleft{float:left;}	
.floatright{float:right;}

body{
	font-family: Rubik, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	background-color: #057ec3;
	background: rgb(7,116,179);
	background: -webkit-linear-gradient(180deg, rgba(12,86,168,1) 0%, rgba(5,126,195,1) 33%);
	background: -o-linear-gradient(180deg, rgba(12,86,168,1) 0%, rgba(5,126,195,1) 33%);
	background: linear-gradient(180deg, rgba(12,86,168,1) 0%, rgba(5,126,195,1) 33%);
	height: 100vh;
}
html{height: 100%;}

#content {
	max-width: 1920px;
	margin: 0 auto;
}

.bg1{

}
@keyframes zoom{
	from{background-size: 90%; background-position: right bottom}
	to{background-size: 115%, 110%, 107%, 100%;  background-position: center bottom}
}
@keyframes drehen{
	0%{transform: rotate(0deg) scale(1);}
	50%{transform: rotate(180deg) scale(.5);}
	0%{transform: rotate(360deg) scale(1);}
}

/* ---------------------------------------->>> LOGO */
#logo{
	position: absolute;
	width:100%;
	min-height:200px;
	padding:2em;
	z-index: 400000;
	transition-property: padding;
	transition-duration: 1s;
}
#logo h1{
}
#logo h1 a span{display: none}
#logo h1 a{
	width:200px;
	height: 47px;
	background: url("../img/logo_comet_weiss_o_claim.svg") top right no-repeat;
	background-size: contain;
	display: block;
	transition-property: opacity, margin;
	transition-duration: .5s, .1s;
	transition-delay: .5s, 0s;
}
#logo h1 a:active,
#logo h1 a:focus,
#logo h1 a:hover{
	opacity: .75;
	transition-delay: 0s;
}

/* ---------------------------------------->>> STERNE */
.stern{
	background: url("../img/stern.svg") center center no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	position: absolute;
	z-index: 5000;
	animation-name: drehen;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction:normal;
	animation-timing-function:linear;
	transition-property: top, left;
	transition-duration: 1s;
}
.stern:nth-child(1){
	top:15%;
	left:15%;
}
.stern:nth-child(2){
	top:25%;
	left:90%;
	width: 30px;
	height: 30px;
	transform: rotate(5deg);
	animation-duration: 20s;
}
.stern:nth-child(3){
	top:5%;
	left:30%;
}
.stern:nth-child(4){
	top:10%;
	left:5%;
	width: 30px;
	height: 30px;
	transform: rotate(-10deg);
	animation-duration: 25s;
}
.stern:nth-child(5){
	top:8%;
	left:78%;
	width: 20px;
	height: 20px;
	transform: rotate(10deg)
}
.stern:nth-child(6){
	top:40%;
	left:5%;
	width: 30px;
	height: 30px;
	transform: rotate(-5deg);
	animation-duration: 10s;
}


/* ---------------------------------------->>> KOMET */
.wrap{
	width:100%;
	height: 100%;
	overflow-x: hidden;
	position: absolute;
	z-index: 100;
	max-width: 1920px;
}

.komet{
	background: url("../img/komet.svg?v02") center center no-repeat;
	background-size: contain;
	width: 300px;
	height: 200px;
	position: absolute;
	z-index: 6000;
	transform: translate(70vw, 2vh);
	animation-name: komet;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-direction:normal;
	animation-timing-function:ease-out;
	animation-delay: 0;
}
@keyframes komet{
	0%{transform: translate(100vw, 100vh);}
	40%{transform: translate(100vw, 100vh);}
	90%{transform: translate(70vw, 2vh);}
	100%{transform: translate(70vw, 2vh);}
}
.kometwrap{
	animation-name: wackeln;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction:alternate;
	animation-timing-function:linear;
	animation-delay: 5s;
}
@keyframes wackeln{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(3deg);}
}


/* ---------------------------------------->>> GRUSS */
.gruss{
	width:100%;
	height: 35%;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	z-index: 300000;
	position: absolute;
	animation-name: grusseinblenden;
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-timing-function:ease-in-out;
	margin-top: 1em;
	max-width: 1920px;
}

.gruss article{
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 4vh;
	color:#fff;
	text-align: center;
	animation-name: gruss;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-direction:alternate;
	animation-timing-function:ease-in-out;
	transform: scale(.8,.8)
}
.gruss p{
	text-shadow: 0 5px 5px rgba(0,0,0,.75);
	line-height: 1.25;
	font-size: 1em;
}
.gruss p.gruss_weihnachten {
	margin-top: 1em;
}
@keyframes gruss{
	from{transform: scale(.8,.8)}
	to{transform: scale(1,1)}
}

@keyframes grusseinblenden{
	0%{opacity:0}
	80%{opacity:0}
	90%{opacity:1}
	100%{opacity:1}
}


/* ---------------------------------------->>> ANIMATION WEIHNACHTSMANN */

.background-container {
  position: absolute;
  width: 100%;
  height: 630px;
  overflow: hidden;
  bottom: 3em;
}

.background {
  position: absolute;
  width: 3840px;
  height: 100%;
  background-image: url('../img/bg_1920x1080_baum.png');
  background-size: auto 100%;
  background-clip: content-box;
  background-position: 0 0;
  animation: backgroundAnimation 12s linear infinite;
}

.background_licht {
  position: absolute;
  width: 3840px;
  height: 100%;
  background-image: url('../img/bg_1920x630_farbe2.png');
  background-size: auto 100%;
  background-clip: content-box;
  background-position: 0 0;
   animation: backgroundLightPulse 2s ease-in-out infinite;
}
.background_dunkel {
  position: absolute;
  width: 3840px;
  height: 100%;
  background-image: url('../img/bg_1920x630_dunkel.png');
  background-size: auto 100%;
  background-clip: content-box;
  background-position: 0 0;
}

.sprite {
  position: absolute;
  width: 590px;
  height: 250px;
  background-image: url('../img/animation_santa_sprite_big.png');
  animation: spriteAnimation 2.5s steps(24) infinite;
  bottom: 0.5em;
  left: 33.3333333333%;
}

.baum_bewegung {
  position: absolute;
  width: 37%;
  height: 160px;
  background-image: url('../img/baum_klein.png');
  animation: backgroundAnimationBaum 10s linear infinite;
  bottom: 3.75em;
  left: 0;
}

.schnee {
  position: absolute;
  width: 4000px;
  height: 140px;
  background-image: url('../img/background-schnee.png');
  bottom: 1em;
  left: -30em;
  animation: backgroundAnimation 10s linear infinite;
}

.schnee2 {
  position: absolute;
  width: 4000px;
  height: 140px;
  background-image: url('../img/background-schnee2.png');
  bottom: -1.75em;
  left: -100em; 
    animation: backgroundAnimation 10s linear infinite;
}

@keyframes backgroundAnimation {
  0% { left: 0; }
  100% { left: -1920px; } 
}

@keyframes spriteAnimation {
  0% { background-position: 0 0; }
  100% { background-position: -14160px 0; } 
}

@keyframes backgroundAnimationBaum {
  0% { background-position: 0 0; }
  100% { background-position: -1920px 0; } 
}

@keyframes backgroundLightPulse {
  0%, 100% {
    opacity: 1;
	filter: saturate(50);
  }
  50% {
    opacity: 0.5;
	filter: saturate(50);
  }
}


/* ---------------------------------------->>> FOOTER */
footer{
	background-color: #fff;
	/* min-height: 11%; */
	font-size: 1em;
	padding: 1em 2em;
	display: flex;
	align-items: flex-end;
	align-content: flex-end;
	flex-direction: row-reverse;
	justify-content: space-between;
	flex-wrap: wrap;
	position: fixed;
	z-index: 200000;
	bottom: 0;
	width:100%;
}
footer aside{
	color:#009de0;
/*	background: beige;*/
}
footer nav{
	text-align: right;
/*	background: yellow;*/
}
footer .menu{
}
footer .menu li{
	display: inline-block;
	padding-left:1em;
}
footer a{
	color:#009de0;
	text-decoration: none;
}

/* ---------------------------------------->>> MEDIA QUERIES max-width 1280px */
@media screen and (max-width:1280px){
	.sprite {
		left: 30%;
	}
}

/* ---------------------------------------->>> MEDIA QUERIES max-width 1200px */
@media screen and (max-width:1200px){
	.gruss article p{
		font-size: 4vh;
	}
}

/* ---------------------------------------->>> MEDIA QUERIES max-width 1080px */
@media screen and (max-width:1080px){
	.gruss article p{
		font-size: 3vw;
	}
	.stern:nth-child(3) {
		display: none;
	}
	.background_licht, .background_dunkel {
		width: 1920px;
		left: -50%;
	}
	.sprite {
		left: 25%;
	}
}

/* ---------------------------------------->>> MEDIA QUERIES max-width 1024px */
@media screen and (max-width:1024px){
	.sprite {
		left: 20%;
	}
}

/* ---------------------------------------->>> MEDIA QUERIES max-width 800px */
@media screen and (max-width:800px){
	.gruss article p{
		font-size: 4vw;
	}
	#logo{
		padding:1em;
	}
	#logo h1 a{
		width:150px;
		height: 35px;
	}
	.bg1{
		min-height: 80%;
	}
	.background-container {
		bottom: 1em;
	}
	.background_licht, .background_dunkel {
		left: -100vw;
	}
	.sprite {
    	left: 15%;
  	}
	footer {
		padding: .5em 1em;	
		font-size: .8em;
	}
	
	footer .menu li{
		padding-left:0;
		padding-right: 1em;
	}

	.bg1{
		animation-name: zoom2;
	}
	footer aside, footer nav {
    	width: auto;
    	text-align: left;
    	display: inline-flex;
    	align-content: end;
  	}
}

@keyframes zoom2{
	from{background-size: 150%; background-position: right bottom}
	to{background-size: 190%, 180%, 175%, 160%;  background-position: center bottom}
}

/* ---------------------------------------->>> MEDIA QUERIES max. 768px */
@media screen and (max-width:768px) {
	.sprite {
		width: 342px;
    	height: 145px;
    	background-image: url('../img/animation_santa_sprite_medium.png');
    	bottom: 3em;
		left: 25%;
	}

	
	@keyframes spriteAnimation {
  		0% { background-position: 0 0; }
  		100% { background-position: -8213px 0; } 
	}
	
}
/* ---------------------------------------->>> MEDIA QUERIES max. 600px */
@media screen and (max-width:600px) {
	.background_licht, .background_dunkel {
		left: -135vw;
	}
	footer aside, footer nav {
    	width: 100%;
    	text-align: left;
    	font-size: 1em;
    	display: block;
	}
}

/* ---------------------------------------->>> MEDIA QUERIES max. 480px */
@media screen and (max-width:480px){
	#logo{padding: 2em 2em;}
	#logo h1{
	}
	#logo h1 a{
		margin:0 auto;
	}	
	
	.bg1{
		background-position: center bottom;
		background-size: 1000px;
		animation-name:none;
		min-height: 100%;
		bottom: 4em;
    	position: relative;
	}
	.background-container {
    	bottom: 4em;
  	}
	.gruss {
		height: 30%;
		top: 5%;
	}
	.gruss article p {
	font-size: 5vw;
	}
	.gruss article{
		font-size: 2em;
		animation-name: none;
	}
	
	.stern:nth-child(2), .stern:nth-child(4) {
		display: none;
	}
	
	.background_licht, .background_dunkel {
		left: -180vw;
	}
	
	.sprite {
		width: 250px;
    	height: 106px;
    	background-image: url('../img/animation_santa_sprite_small.png');
    	bottom: 2.5em;
		left: 25%;
	}
	@keyframes spriteAnimation {
  		0% { background-position: 0 0; }
  		100% { background-position: -6004px 0; } 
	}
	
	
	footer{
		min-height: inherit;
		margin-top:-1px;
		padding: 1em;
		font-size: 1em;
	}
	footer aside{
		text-align: center;
		font-size: .8em;
	}
	footer .menu li{
		padding: .25em 0;
		display: block;
		text-align: center;
	}
	footer .menu li a{
		display: block;
		text-align: center;
		background-color: #e5e5e5;
		padding:.1em;
		transition-property: background-color;
		transition-duration: .25s;
		transition-delay: .25s;
		color: #000;
		font-size: 1em;
	}
	footer .menu li a:active,
	footer .menu li a:focus,
	footer .menu li a:hover{
		background-color: #383838;
		transition-delay: 0s;
	}
	
	.stern:nth-child(1){
		top:5%;
		left:5%;
	}

	.stern:nth-child(5){
		top:10%;
		left:86%;
	}


}


/* ---------------------------------------->>> MEDIA QUERIES max-height 600px */
@media screen and (max-height:600px){
	.gruss {
		height: auto;
	}
	.gruss article p {
    	font-size: 2.5vw;
    	margin-top: 1em;
  	}
	.stern {
		display: none;
	}
	#logo h1 a {
    	width: 150px;
    	height: 35px;
  	}
	
	.bg1{
		background-position: center bottom;
		background-size: 1000px;
		animation-name:zoom2;
		min-height: 100%;
	}
	
	.background, .background_licht, .background_dunkel {
		bottom: -4em;		
	}
	
	.sprite {
		width: 342px;
    	height: 145px;
    	background-image: url('../img/animation_santa_sprite_medium.png');
    	bottom: 2em;
		left: 25%;
	}
	@keyframes spriteAnimation {
  		0% { background-position: 0 0; }
  		100% { background-position: -8213px 0; } 
	}
	
	
	footer{
		min-height: inherit;
		margin-top:-1px;
	}
}
/* ---------------------------------------->>> MEDIA QUERIES max-height 600px and max-width 480px */
@media screen and (max-height:600px) and (max-width:480px){
	.bg1{
		background-position: center bottom;
		background-size: 1000px;
		animation-name:none;
		min-height: 100%;
	}
}


/* ---------------------------------------->>> Browserwarnung für ältere Opera-Versionen */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#logo a{background-image:none !important;}
#logo a span{display:inline-block; color:#63A60E; font-size:2rem; text-transform:uppercase; white-space:nowrap;}
body:before{
	background-color:rgba(0,0,0,.75);
	bottom:0;
	color:#ccc;
	content:"+++ WARNUNG! Sie verwenden einen veralteten Browser. Einige Funktionen dieser Seite können unter Umständen nicht ausgeführt werden. +++";
	display:block;
	font-size:.8rem;
	font-weight:900;
	padding:.5em;
	position:fixed;
	text-align:center;
	width:100%;
	z-index:4500;
}
}

/* ---------------------------------------->>> CSS für alte Versionen von IE */
@media screen and (min-width:0\0) { 
	body, html{height:100%;}
   .bg1{
	}
	.gruss{
		padding-top: 0;
	}
	.stern{opacity: .25;}
	footer nav{float: right;}
	footer aside{float: left;}
}