@charset "UTF-8";

.willkommen {
    display: flex; 
	flex-direction: row;
    justify-content: center;
	margin-top:350px;
}
.titel-logo {
	margin-top:0px;
    width:330px;
    height:auto;
}




.rotate {
    animation: rotation 2s;
}
.linear {
    animation-timing-function: linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.titel-logo {
    transition: transform 2s ease-in;
}
.titel-logo:hover {
    transform: rotate(360deg);
}


.block1 {
	width:420px;
	padding-top:180px;
    color:#FFFCE5;
    font-size:3.4rem;
    text-transform: uppercase;
    text-shadow: 3px 3px 4px #000000;

    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
	font-family: 'Fira Sans Condensed', sans-serif;
	white-space: nowrap;
	
	animation-name: ani1;
	animation-delay:4s;
	animation-duration: 10s;
	animation-iteration-count: 1;
	opacity: 0;
  
}
.block3 {
	width:420px;
    padding-top:115px;
    color:#FFFCE5;
    font-size:3.3rem;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 3px 3px 4px #000000;
	-moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
	font-family: 'Fira Sans Condensed', sans-serif;
	white-space: nowrap;
	
	animation-name: ani2;
	animation-delay:6s;
	animation-duration: 10s;
	animation-iteration-count: 1;
	opacity: 0;
}

.block3 img {
    width:40px;
    height:auto;
    transition: transform 0.8s ease-in;
}
.block3 img:hover {
    transform: rotate(360deg);
}



@keyframes ani1 {
  0% {
		opacity: 0;
		
  }
  40% {
		opacity: 1;
		
  }
  50% {
		opacity: 1;

  }
  100% {  
		opacity: 0;

  }
}
@keyframes ani2 {
  0% {
		opacity: 0;
		
  }
  40% {
		opacity: 1;
		
  }
  50% {
		opacity: 1;

  }
  100% {  
		opacity: 0;

  }
}

@media (min-width: 1860px) and (max-height: 980px) and (orientation: landscape) {
	.titelheight {height:800px!important;}
	.willkommen {margin-top:200px!important;}
	.titel-logo, .titel-logo img {width:250px;}
	.block1 {width:355px; padding-top:140px;font-size:3rem;}
	.block3 {width:355px; padding-top:90px;font-size:2.8rem;}
	.block3 img {
    width:30px;
    height:auto;
	}
}


@media (min-width: 1181px) and (max-width: 1880px) and (orientation: landscape) {
	.titelheight {height:800px!important;}
	.willkommen {margin-top:200px!important;}
	.titel-logo, .titel-logo img {width:250px;}
	.block1 {width:355px; padding-top:140px;font-size:3rem;}
	.block3 {width:355px; padding-top:90px;font-size:2.8rem;}
	.block3 img {
    width:30px;
    height:auto;
	}
}

@media (min-width: 1025px) and (max-width: 1180px) and (orientation: landscape) {
	.titelheight {height:600px;}
	.willkommen {margin-top:180px!important;}
	.titel-logo, .titel-logo img {width:250px;}
	.block1 {width:355px; padding-top:120px;font-size:3rem;}
	.block3 {width:355px; padding-top:70px;font-size:2.8rem;}
	.block3 img {
    width:30px;
    height:auto;
	}
}

@media (min-width: 991px) and (max-width: 1024px) and (orientation: landscape) {
	.titelheight {height:800px!important;}
	.willkommen {margin-top:200px!important;}
	.titel-logo, .titel-logo img {width:250px;}
	.block1 {width:355px; padding-top:140px;font-size:3rem;}
	.block3 {width:355px; padding-top:90px;font-size:2.8rem;}
}

@media (min-width: 991px) and (max-width: 1024px) and (orientation: portrait) {
	.fullscreen-top-space {max-height:700px;}
	.titelheight {height:600px;}
	.willkommen {margin-top:200px!important;}
	.titel-logo, .titel-logo img {width:250px;}
	.block1 {width:355px; padding-top:140px;font-size:3rem;}
	.block3 {width:355px; padding-top:90px;font-size:2.8rem;}
}


@media (min-width: 734px) and (max-width: 900px) and (orientation: portrait) {
	.fullscreen-top-space {max-height:700px;}
	.titelheight {height:600px;}
	.willkommen {margin-top:100px;}
	.titel-logo, .titel-logo img {width:180px!important;}
	.block1 {width:270px; padding-top:90px;font-size:2.6rem;}
	.block3 {width:270px; padding-top:60px;font-size:2.4rem;}
	.block3 img {
    width:30px;
    height:auto;
	}
}

@media (min-width: 734px) and (max-width: 900px) and (orientation: landscape) {
	.fullscreen-top-space {height:700px;}
	.titelheight {height:600px!important;}
	.willkommen {margin-top:100px;}
	.titel-logo, .titel-logo img {width:180px;}
	.block1 {width:270px; padding-top:100px;font-size:2.6rem;}
	.block3 {width:270px; padding-top:60px;font-size:2.4rem;}
	.block3 img {
    width:30px;
    height:auto;
	}
}

@media (min-width: 668px) and (max-width: 736px) and (orientation: landscape) {
	.willkommen {margin-top:100px;}
	.titel-logo, .titel-logo img {width:180px!important;}
	.block1 {width:200px; padding-top:70px;font-size:2.2rem;}
	.block3 {width:200px; padding-top:40px;font-size:2rem;}
	.block3 img {
    width:20px;
    height:auto;
	}
}

@media (max-width: 667px) and (orientation: landscape) {
	.titelheight {height:500px;}
	.willkommen {
		margin-top:60px;

	}
	.titel-logo, .titel-logo img {width:160px!important;}
	.block1 {width:200px; padding-top:70px;font-size:2.2rem;}
	.block3 {width:200px; padding-top:40px;font-size:2rem;}
	.block3 img {
    width:20px;
    height:auto;
	}
	
}


@media (max-width: 480px) and (orientation: landscape) {
	.titelheight {height:380px;}
	.willkommen {
		margin-top:30px;
		width:250px!important;
	}
	
	.block1,
    .block3	{
		display:none;
	}
}


@media (max-width: 480px) and (orientation: portrait) {
	.titelheight {}
	.willkommen {
		width:300px!important;
	}
	.willkommen {flex-direction: column;}
	.willkommen :nth-child(1) { order: 1; }
    .willkommen :nth-child(2) { order: 3; }
    .willkommen :nth-child(3) { order: 2; }
	.titel-logo, .titel-logo img {width:100%;margin:0 auto;}
	.block1	{
		margin-top:-280px;
		padding-top:0px;
		padding-left:20px;
		padding-bottom:20px;
		font-size:2.8rem;
	}
    .block3	{
		padding-top:0px;
		padding-left:20px;
		padding-bottom:50px;
		font-size:2.8rem;
	}
	.block3 img {
		width:30px;
		height:auto;
	}
}
