@charset "UTF-8";

/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/source-sans-pro-v11-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url('fonts/source-sans-pro-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/source-sans-pro-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/source-sans-pro-v11-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/source-sans-pro-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-700 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/source-sans-pro-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
       url('fonts/source-sans-pro-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/source-sans-pro-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/source-sans-pro-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/source-sans-pro-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/source-sans-pro-v11-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

#preloader {position: absolute; left: -5px; top: -5px; height: 1px; width: 1px; padding: 0px; margin: 0px;}
@media print {#preloader {display: none; visibility: hidden;}}

A 			{text-decoration:inherit; color:rgba(0,0,0,1.00);}
A:active 	{text-decoration:inherit; color:rgba(211,17,30,1.00);}
A:visited 	{text-decoration:inherit; color:rgba(0,0,0,1.00);}
A:hover 	{text-decoration:inherit; color:rgba(211,17,30,1.00);}

#impressum A			{text-decoration:inherit; color:rgba(255,255,255,1.00)}
#impressum A:active	 	{text-decoration:inherit; color:rgba(211,17,30,1.00);}
#impressum A:visited 	{text-decoration:inherit; color:rgba(255,255,255,1.00);}
#impressum A:hover	 	{text-decoration:inherit; color:rgba(211,17,30,1.00);}

body,
html {padding:0px; margin:0px; font-family: 'Source Sans Pro', sans-serif; height:100%; width:100%; transition: 1s;}

img, body, video, table {border:none;}

video#hgfilm {
	position: fixed;
	display:block;
	visibility:visible;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	z-index:2;
}

.panel {
      display: none;
      width: 90%;
	  max-width:90%;
      padding: 20px;
	  overflow:auto;
      background-color:rgba(255,255,255,0.90);
      color:#000000;
	  box-shadow:none;
    }

#x {position:absolute; top:15px; right:5%; z-index:10001; cursor: pointer;}

button 			{border:none; background:none;}
button:active 	{text-decoration:inherit; color:rgba(211,17,30,1.00);}
button:visited 	{text-decoration:inherit; color:rgba(0,0,0,1.00);}
button:hover 	{text-decoration:inherit; color:rgba(211,17,30,1.00);}

ul, li {list-style: none;}

#headline {
	background:rgba(0,0,0,0.66);
	color:#FFFFFF;
	padding:15px;
	margin-bottom: 5px;
	z-index:611;
}

#text {
	background:rgba(255,255,255,0.85);
	padding:15px;
	z-index:609;	
}

#impressum {
	position:absolute;
	text-align:center;
	margin:0px;
	top:100%;
	left:0px;
	width:100%;
	height:30px;
	background-color:rgba(0,0,0,0.66);
	color:rgba(255,255,255,1.00);
	z-index:99999;
}

/* Navigation */

#menuframe {
	position:fixed;
	top:0px;
	left: 0px;
	margin: 0px;
	width:auto;
	height:auto;
	background-color: rgba(255,255,255,0.85);
	z-index:99999;
	}

#menu {
	padding:0px;
	margin:0px;
	z-index:99994;
}

#tab {width: 33%; vertical-align: bottom;}
#tabframe {
	position: absolute;
	bottom: 0px; 
	left: 0px; 
	z-index: 410;
}

.menulogo {padding: 30px 30px 0px 30px;}

nav .ul {
  list-style: none;
  padding: 10px 0px 10px 0px;
  margin: 0px;
  text-decoration:none; cursor:pointer;
}
 
nav .ulli {
  position: relative;
  vertical-align:middle;
  list-style:none;
  font-weight:300;
	float: none;
  padding:0px;
  color:#000;
  margin:0px 1px 0px 1px;
  z-index:99999;
  text-decoration:none; cursor:pointer;
}

nav li ul {display: none;}
nav ul li a {display: block; text-decoration: none; white-space: nowrap; color: #000; padding:0px 10px 0px 10px;}
nav ul li h5 {padding: 10px;}

nav ul li:hover {background: rgba(255,255,255,0.5);text-decoration:none; cursor:pointer;}

nav ul li a:hover {color:#fff;}

nav li {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-mso-transition: all 0.2s;
	-atsc-transition: all 0.2s;
	transition: all 0.2s;
	
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
	-mso-transition-delay: 0s;
	-atsc-transition-delay: 0s;
	transition-delay: 0s;
}

nav li:hover > ul {display: block; position: absolute; text-decoration:none; cursor:pointer; background: rgba(255,255,255,1); text-align:left;}
nav li:hover li {display: block; float: none; text-decoration:none; cursor:pointer;}
nav li:hover a {text-decoration:none; cursor:pointer;}
nav li:hover li a:hover {text-decoration:none; cursor:pointer; color:rgba(211,17,30,1.00) ; background: rgba(255,255,255,1);}

nav .main-navigation li ul li {border-top: 0;}

nav ul ul ul {left: 100%; top:-10px;}

nav ul:before,
nav ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

nav ul:after { clear: both; }

#langu {
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: rgba(255,255,255,0.66);
	padding: 10px;
	z-index: 99997;
}

#lan {background:url(img/de_.png) no-repeat; z-index: 99998; width: 150px; height: 90px; transition: 1s; cursor:pointer;}
#lan:hover {background:url(img/de.png); transition: 1s;  cursor:pointer;}

/* ============================================================
  Animationen START
============================================================ */

@-webkit-keyframes zoom {
	0% {transform:scale(1);}
	66% {transform:scale(1.1);}
	100% {transform:scale(1);}
}

@-moz-keyframes zoom {
	0% {transform:scale(1);}
	66% {transform:scale(1.1);}
	100% {transform:scale(1);}
}

@-o-keyframes zoom {
	0% {transform:scale(1);}
	66% {transform:scale(1.1);}
	100% {transform:scale(1);}
}

@keyframes zoom {
	0% {transform:scale(1);}
	66% {transform:scale(1.1);}
	100% {transform:scale(1);}
}
.animzoom {
	-webkit-animation: zoom 45s ease infinite;
	-moz-animation: zoom 45s ease infinite;
	-o-animation: zoom 45s ease infinite;
	-ms-animation: zoom 45s ease infinite;
	-mso-animation: zoom 45s ease infinite;
	-atsc-animation: zoom 45s ease infinite;
	animation: zoom 45s ease infinite;
}
.animzoomxl {
	-webkit-animation: zoom 120s ease infinite;
	-moz-animation: zoom 120s ease infinite;
	-o-animation: zoom 120s ease infinite;
	-ms-animation: zoom 120s ease infinite;
	-mso-animation: zoom 120s ease infinite;
	-atsc-animation: zoom 120s ease infinite;
	animation: zoom 120s ease infinite;
}

@-webkit-keyframes zoomout {
	0% {transform:scale(1.1);}
	66% {transform:scale(1);}
	100% {transform:scale(1.1);}
}

@-moz-keyframes zoomout {
	0% {transform:scale(1.1);}
	66% {transform:scale(1);}
	100% {transform:scale(1.1);}
}

@-o-keyframes zoomout {
	0% {transform:scale(1.1);}
	66% {transform:scale(1);}
	100% {transform:scale(1.1);}
}

@keyframes zoomout {
	0% {transform:scale(1.1);}
	66% {transform:scale(1);}
	100% {transform:scale(1.1);}
}
.animzoomout {
	-webkit-animation: zoomout 45s ease infinite;
	-moz-animation: zoomout 45s ease infinite;
	-o-animation: zoomout 45s ease infinite;
	-ms-animation: zoomout 45s ease infinite;
	-mso-animation: zoomout 45s ease infinite;
	-atsc-animation: zoomout 45s ease infinite;
	animation: zoomout 45s ease infinite;
}

@-webkit-keyframes hb {
	0% {transform:scale(1);}
	20% {transform:scale(1);}
	30% {transform:scale(1.3);}
	35% {transform:scale(1);}
	100% {transform:scale(1);}
}

@-moz-keyframes hb {
	0% {transform:scale(1);}
	20% {transform:scale(1);}
	30% {transform:scale(1.3);}
	35% {transform:scale(1);}
	100% {transform:scale(1);}
}

@-o-keyframes hb {
	0% {transform:scale(1);}
	20% {transform:scale(1);}
	30% {transform:scale(1.3);}
	35% {transform:scale(1);}
	100% {transform:scale(1);}
}

@keyframes hb {
	0% {transform:scale(1);}
	20% {transform:scale(1);}
	30% {transform:scale(1.3);}
	35% {transform:scale(1);}
	100% {transform:scale(1);}
}
.animhb {
	-webkit-animation: hb 15s ease infinite;
	-moz-animation: hb 15s ease infinite;
	-o-animation: hb 15s ease infinite;
	-ms-animation: hb 15s ease infinite;
	-mso-animation: hb 15s ease infinite;
	-atsc-animation: hb 15s ease infinite;
	animation: hb 15s ease infinite;
}

/* ============================================================
  Animationen ENDE
============================================================ */

/*Anfang Slidenav*/
#container {
	position:fixed;
	top:0px;
	left:0px;
	opacity:1;
	display: flex;
	visibility:visible;
	z-index:1010;
}
input[type=checkbox] {
   position: absolute;
   opacity: 0;
}
label {
   position: absolute;
   z-index: 1010;
   cursor: pointer;
   transition: transform .7s;
}

input[type=checkbox]:checked ~ .slide-menu .menu li {
   width: 100%;
}
.slide-menu {
   transform: translate3d(0px, 0, 0);
   position: absolute;
   width: 200px;
   color: rgba(0,0,0,1);
   left: 0;
   height: 100%;
   transition: all .7s;
}

.logoor {
	position: fixed;
	padding: 7px;
}
/*Ende Slidenav*/

			/* I wanted to center my loader */
			#cycle-loader {
				height:32px;
				left:50%;
				margin:-8px 0 0 -8px;
				position:absolute;
				top:50%;
				width:32px;
				z-index:0;
			}
			
			/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
			#maximage {
				display:none;/* Only use this if you fade it in again after the images load */
				position:fixed !important;
			}
			
			/*Set my gradient above all images*/
			#gradient {
				left:0;
				height:100%;
				position:absolute;
				top:0;
				width:100%;
				z-index:999;
			}

@media all and (min-width: 0px) and (min-height: 0px) {
body,html {font-size:20px; font-weight:300;}
h1 {font-size:45px;	font-weight:300;}
h2 {font-size:23px; font-weight:400;}
h6 {font-size:14px; font-weight:400;}
h9 {font-size:16px; font-weight:300;}
	
	#lan {background:url(img/de_40_.png) no-repeat; width: 40px; height: 24px;}
	#lan:hover {background:url(img/de_40.png);}
	
	#breit {display: none; visibility: hidden;}
	#schmal {display: block; visibility: visible;}
	h5 {font-size:15px; font-weight:300; padding: 0px; margin: 0px;}
	#menulogo {height: 0px;}.logoor {left: 25px;top: 10px; z-index: 4000;}
	nav .ulli {display:block; font-size:14px;}
	#menuframe {padding: 40px 0px 0px 0px;}
	nav li:hover > ul {left: 125px; top:0px;}

	label {top: 267px; left: 108px; transform: translate3d(0, 0, 0) rotate(45deg);}
	input[type=checkbox]:checked ~ label {transform: translate3d(-103px, -267px, 0) rotate(225deg);}
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-106px, -267px, 0);}
	
	#impressum {padding:5px 0px 5px 0px;font-size:12px;}
}

@media all and (min-width: 610px) and (min-height: 0px) {
body,html {font-size:20px; font-weight:300;}
h1 {font-size:45px;	font-weight:300;}
h2 {font-size:23px; font-weight:400;}
h6 {font-size:14px; font-weight:400;}
h9 {font-size:16px; font-weight:300;}
	
	#lan {background:url(img/de_40_.png) no-repeat; width: 40px; height: 24px;}
	#lan:hover {background:url(img/de_40.png);}
	
	#breit {display: none; visibility: hidden;}
	#schmal {display: block; visibility: visible;}
	h5 {font-size:15px; font-weight:300; padding: 0px; margin: 0px;}
	#menulogo {height: 78px;}.logoor {left: 30px;top: 35px; z-index: 400;}
	nav .ulli {display:table-cell; font-size:14px;}
	#menuframe {padding: 0px;}
	nav li:hover > ul {left: 0px; top:38px;}
	
	label {top: 0px; left: 497px; transform: translate3d(0, 0, 0) rotate(0deg);}
	input[type=checkbox]:checked ~ label {transform: translate3d(-496px, 72px, 0) rotate(180deg);}
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-497px, 0px, 0);}
	
	#impressum {padding:14px 0px 0px 0px;font-size:16px;}
}

@media all and (min-width: 720px) and (min-height: 0px) {
body,html {font-size:20px; font-weight:300;}
h1 {font-size:45px;	font-weight:300;}
h2 {font-size:23px; font-weight:400;}
h6 {font-size:14px; font-weight:400;}
h9 {font-size:16px; font-weight:300;}
	
	#lan {background:url(img/de_40_.png) no-repeat; width: 40px; height: 24px;}
	#lan:hover {background:url(img/de_40.png);}
	
	#breit {display: none; visibility: hidden;}
	#schmal {display: block; visibility: visible;}
	h5 {font-size:22px; font-weight:300; padding: 0px; margin: 0px;}
	#menulogo {height: 100px;}.logoor {left: 40px;top: 50px; z-index: 400;}
	nav .ulli {display: table-cell; font-size:16px;}
	#menuframe {padding: 0px;}
	nav li:hover > ul {left: 0px; top:47px;}
	
	label {top: -0px; left: 633px; transform: translate3d(0, 0, 0) rotate(0deg);}
	input[type=checkbox]:checked ~ label {transform: translate3d(-632px, 90px, 0) rotate(180deg);}
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-635px, 0px, 0);}
	
	#impressum {padding:5px 0px 5px 0px;font-size:22px;}
}

@media all and (min-width: 855px) and (min-height: 730px) {
body,html {font-size:14px; font-weight:300;}
h1 {font-size:35px;	font-weight:300;}
h2 {font-size:16px; font-weight:400;}
h6 {font-size:11px; font-weight:400;}
h9 {font-size:12px; font-weight:300;}
	
	#lan {background:url(img/de_75_.png) no-repeat; width: 75px; height: 45px;}
	#lan:hover {background:url(img/de_75.png);}
	
	#schmal {display: none; visibility: hidden;}
	#breit {display: block; visibility: visible;}
	h5 {font-size:22px; font-weight:300; padding: 0px; margin: 0px;}
	#menulogo {height: 100px;}.logoor {left: 40px;top: 50px; z-index: 400;}
	nav .ulli {display: table-cell; font-size:18px;}
	#menuframe {padding: 0px;}
	nav li:hover > ul {left: 0px; top:47px;}
	
	label {top: 0px; left: 633px; transform: translate3d(0, 0, 0) rotate(0deg);}
	input[type=checkbox]:checked ~ label {transform: translate3d(-632px, 90px, 0) rotate(180deg);}
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-635px, 0px, 0);}
	
	#impressum {padding:5px 0px 5px 0px;font-size:22px;}
}

@media all and (min-width: 1010px) and (min-height: 790px) {
body,html {font-size:16px; font-weight:300;}
h1 {font-size:40px;	font-weight:300;}
h2 {font-size:18px; font-weight:400;}
h6 {font-size:12px; font-weight:400;}
h9 {font-size:14px; font-weight:300;}
	
	#lan {background:url(img/de_75_.png) no-repeat; width: 75px; height: 45px;}
	#lan:hover {background:url(img/de_75.png);}
	
	#schmal {display: none; visibility: hidden;}
	#breit {display: block; visibility: visible;}
	h5 {font-size:22px; font-weight:300; padding: 0px; margin: 0px;}
	#menulogo {height: 100px;}.logoor {left: 40px;top: 50px; z-index: 400;}
	nav .ulli {display: table-cell; font-size:18px;}
	#menuframe {padding: 0px;}
	nav li:hover > ul {left: 0px; top:47px;}
	
	label {top: 0px; left: 633px; transform: translate3d(0, 0, 0) rotate(0deg);}
	input[type=checkbox]:checked ~ label {transform: translate3d(-632px, 90px, 0) rotate(180deg);}
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-635px, 0px, 0);}
	
	#impressum {padding:5px 0px 5px 0px;font-size:22px;}
}


@media all and (min-width: 1115px) and (min-height: 880px) {
body,html {font-size:18px; font-weight:300;}
h1 {font-size:56px;	font-weight:300;}
h2 {font-size:30px; font-weight:400;}
h6 {font-size:14px; font-weight:400;}
h9 {font-size:18px; font-weight:300;}
	
	#lan {background:url(img/de_75_.png) no-repeat; width: 75px; height: 45px;}
	#lan:hover {background:url(img/de_75.png);}
	
	#schmal {display: none; visibility: hidden;}
	#breit {display: block; visibility: visible;}
	h5 {font-size:22px; font-weight:300; padding: 0px; margin: 0px;}
	#menulogo {height: 100px;}.logoor {left: 40px;top: 50px; z-index: 400;}
	nav .ulli {display: table-cell; font-size:18px;}
	#menuframe {padding: 0px;}
	nav li:hover > ul {left: 0px; top:47px;}
	
	label {top: 0px; left: 633px; transform: translate3d(0, 0, 0) rotate(0deg);}
	input[type=checkbox]:checked ~ label {transform: translate3d(-632px, 90px, 0) rotate(180deg);}
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-635px, 0px, 0);}
	
	#impressum {padding:5px 0px 5px 0px;font-size:22px;}
}

@media all and (min-width: 1950px) and (min-height: 1000px) {
body,html {font-size:22px; font-weight:300;}
h1 {font-size:62px;	font-weight:300;}
h2 {font-size:38px; font-weight:400;}
h6 {font-size:20px; font-weight:400;}
h9 {font-size:24px; font-weight:300;}
	
	#lan {background:url(img/de_75_.png) no-repeat; width: 75px; height: 45px;}
	#lan:hover {background:url(img/de_75.png);}
	
	#schmal {display: none; visibility: hidden;}
	#breit {display: block; visibility: visible;}
	h5 {font-size:22px; font-weight:300; padding: 0px; margin: 0px;}
	#menulogo {height: 100px;}.logoor {left: 40px;top: 50px; z-index: 400;}
	nav .ulli {display: table-cell; font-size:18px;}
	#menuframe {padding: 0px;}
	nav li:hover > ul {left: 0px; top:47px;}
	
	label {top: 0px; left: 633px; transform: translate3d(0, 0, 0) rotate(0deg);}
	input[type=checkbox]:checked ~ label {transform: translate3d(-632px, 90px, 0) rotate(180deg);}
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-635px, 0px, 0);}
	
	#impressum {padding:5px 0px 5px 0px;font-size:22px;}
}