@charset "UTF-8";
/* raleway-100 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: lighter;
  font-weight: 100;
  src: url('fonts/raleway-v12-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Raleway Thin'), local('Raleway-Thin'),
       url('fonts/raleway-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v12-latin-200.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v12-latin-200.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('fonts/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: bold;
  font-weight: 700;
  src: url('fonts/raleway-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Raleway Bold'), local('Raleway-Bold'),
       url('fonts/raleway-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v12-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

#text A, #text A:visited 		{text-decoration:none; color:white; font-weight:lighter;}
#text A:active, #text A:hover 	{text-decoration:underline; color:white; font-weight:lighter;}

#mintxt A, #mintxt A:visited 		{text-decoration:none; color:white; font-weight:lighter;}
#mintxt A:active, #mintxt A:hover 	{text-decoration:underline; color:white; font-weight:lighter;}

.implink, .impling:visited 		{text-decoration:none; color:black; font-weight:lighter;}
.implink:active, .implink:hover {text-decoration:underline; color:black; font-weight:lighter;}

body, html {padding:0px; margin:0px; font-family: 'Raleway', sans-serif; height:100%; width:100%; transition: 1s;}
img, body, video, table, html {border:none;}
body {background-color: black; overflow: hidden;}

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

h6 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}

#impressum {
	margin:4%;
	width:90%;
	height:95%;
	z-index:1000;
}

#logool {
	position:absolute;
	top:5%;
	right:4%;
	width:15%;
	height:auto;
	z-index:9998;
}

#maximage {	display:none;/* Only use this if you fade it in again after the images load */
			position:fixed !important;}

#gruss {
	position:absolute;
	border:none; 
	color: white;
	vertical-align:left; 
	text-align:left;
	width:auto;
	overflow:hidden; 
	z-index:110;
}

/*Navigation*/
#menuframe {
	position:fixed;
	left: 0px;
	margin: 0px;
	width: auto;
	height:auto;
	z-index:99999;
	}

#kdhl {
	display: block;
	padding: 10px;
}

#kdbtn {
	display: block;
	color:black;
	margin-bottom: 3px;
	overflow: hidden;
	transition: 1s;
}

.kdbut {z-index: 99998; cursor:pointer;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-ms-transition: 1s;
	-mso-transition: 1s;
	-atsc-transition: 1s;
	transition: 1s; }

/*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;
	color:black;
	background-color: rgba(255,255,255,0.66);
   z-index: 1010;
   cursor: pointer;
   transition: transform .7s;
	 transition: 1s;
}
label:hover {background-color: rgba(0,0,0,0.66); color:white; transition: 1s;}

input[type=checkbox]:checked ~ .slide-menu .menu li {
   width: 100%;
}
label {}
input[type=checkbox]:checked ~ label {}
input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(0px, 0px, 0);}

.slide-menu {
	position: absolute;
	transform: translate3d(-400px, 0px, 0);
	width: auto;
	color: rgba(0,0,0,1);
	height: auto;
	transition: all 1s;
}

@-webkit-keyframes menuout {
	0% {transform: translate3d(0px, 0px, 0);}
	70% {transform: translate3d(0px, 0px, 0);}
	100% {transform: translate3d(-400px, 0px, 0);}}
	
@-moz-keyframes menuout {
	0% {transform: translate3d(0px, 0px, 0);}
	70% {transform: translate3d(0px, 0px, 0);}
	100% {transform: translate3d(-400px, 0px, 0);}}

@-o-keyframes menuout {
	0% {transform: translate3d(0px, 0px, 0);}
	70% {transform: translate3d(0px, 0px, 0);}
	100% {transform: translate3d(-400px, 0px, 0);}}

@keyframes menuout {
	0% {transform: translate3d(0px, 0px, 0);}
	70% {transform: translate3d(0px, 0px, 0);}
	100% {transform: translate3d(-400px, 0px, 0);}}


@-webkit-keyframes menuin {
	0% {transform: translate3d(-400px, 0px, 0);}
	30% {transform: translate3d(0px, 0px, 0);}
	100% {transform: translate3d(0px, 0px, 0);}}
	
@-moz-keyframes menuin {
	0% {transform: translate3d(-400px, 0px, 0);}
	30% {transform: translate3d(0px, 0px, 0);}
	100% {transform: translate3d(0px, 0px, 0);}}

@-o-keyframes menuin {
	0% {transform: translate3d(-400px, 0px, 0);}
	30% {transform: translate3d(0px, 0px, 0);}
	100% {transform: translate3d(0px, 0px, 0);}}

@keyframes menuin {
	0% {transform: translate3d(-400px, 0px, 0);}
	30% {transform: translate3d(0px, 0px, 0);}
	100% {transform: translate3d(0px, 0px, 0);}}
/*Ende Slidenav*/

@media all and (min-width: 0px) and (min-height: 0px) {
h5 {font-size:11px; font-weight:normal; margin:0px; padding:0px;}
h7 {font-size:11px; font-weight:bold; margin:0px; padding:0px;}
	
#container {display: none; visibility: hidden;}

#btnfb {background:url(img/s_fb.png) no-repeat; z-index: 99998; width: 35px; height: 35px; transition: 1s; cursor:pointer;}
#btnfb:hover {background:url(img/s_fb_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btngp {background:url(img/s_gp.png) no-repeat; z-index: 99998; width: 35px; height: 35px; transition: 1s; cursor:pointer;}
#btngp:hover {background:url(img/s_gp_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btnen {background:url(img/s_en.png) no-repeat; z-index: 99998; width: 35px; height: 35px; transition: 1s; cursor:pointer;}
#btnen:hover {background:url(img/s_en_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btnde {background:url(img/s_de.png) no-repeat; z-index: 99998; width: 35px; height: 35px; transition: 1s; cursor:pointer;}
#btnde:hover {background:url(img/s_de_.png) no-repeat; transition: 1s;  cursor:pointer;}

#gruss {left:-126%; top:15px;}
#logohgr {position: fixed; right: -1000px; top: 10px; width: 1px; height: 1px;}
#logoul {position: fixed; left: 250px; bottom: 5px; width: 50px; height: 50px;}
#text {position: fixed; right: 0px; bottom: -7000px; height: 0%; width: 0%; background-color: rgba(0,0,0,0.66); color: white; padding: 0%; overflow: hidden;}
#smibox {position: fixed; left: 0px; bottom:0px; padding: 5px; background-color: rgba(255,255,255,0.66);}
#claim {position: fixed; bottom: -1000px; right: 10px; padding: 1%; color: white; text-align: center; line-height: 12px;}
#mintxt {display: block; position: fixed; left: 0px; bottom: 80px; height: auto; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: auto;}
}

@media all and (min-width: 800px) and (min-height: 0px) {
h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;}
}

@media all and (min-width: 400px) and (min-height: 320px) {
h1 {font-size:28px;	font-weight:lighter; margin:0px; padding:0px;}
h2 {font-size:20px; font-weight:lighter; margin:0px; padding:0px;}
h3 {font-size:24px; font-weight:lighter; margin:0px; padding:0px;}
h4 {font-size:13.5px; font-weight:lighter; margin:0px; padding:0px;}
h5 {font-size:11px; font-weight:normal; margin:0px; padding:0px;}
h7 {font-size:11px; font-weight:bold; margin:0px; padding:0px;}

#container {display: flex; visibility: visible;}
#menuframe {top:47px;}
	
#btnholmatec {background:url(img/s_holmatec.png) no-repeat; width: 115px; height: 21px; background-color: rgba(255,255,255,0.66);}
#btnholmatec:hover {background:url(img/s_holmatec_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnroehrig {background:url(img/s_roehrig.png) no-repeat; width: 145px; height: 34px; background-color: rgba(255,255,255,0.66);}
#btnroehrig:hover {background:url(img/s_roehrig_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnillerhaus {background:url(img/s_illerhaus.png) no-repeat; width: 128px; height: 43px;background-color: rgba(255,255,255,0.66);}
#btnillerhaus:hover {background:url(img/s_illerhaus_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnigs {background:url(img/s_igs.png) no-repeat; width: 55px; height: 41px; background-color: rgba(255,255,255,0.66);}
#btnigs:hover {background:url(img/s_igs_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnchristiani {background:url(img/s_christiani.png) no-repeat; width: 111px; height: 35px; background-color: rgba(255,255,255,0.66);}
#btnchristiani:hover {background:url(img/s_christiani_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnherkenrath {background:url(img/s_herkenrath.png) no-repeat; width: 143px; height: 43px; background-color: rgba(255,255,255,0.66);}
#btnherkenrath:hover {background:url(img/s_herkenrath_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnante {background:url(img/s_ante.png) no-repeat; width: 101px; height: 38px; background-color: rgba(255,255,255,0.66);}
#btnante:hover {background:url(img/s_ante_.png) no-repeat; background-color: rgba(255,255,255,1);}
	
#btnen {background:url(img/s_en.png) no-repeat; z-index: 99998; width: 35px; height: 35px; transition: 1s; cursor:pointer;}
#btnen:hover {background:url(img/s_en_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btnde {background:url(img/s_de.png) no-repeat; z-index: 99998; width: 35px; height: 35px; transition: 1s; cursor:pointer;}
#btnde:hover {background:url(img/s_de_.png) no-repeat; transition: 1s;  cursor:pointer;}

input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(0px, 0px, 0);}
.slide-menu {
	transform: translate3d(-400px, 0px, 0);
	-webkit-animation: menuout 3s ease-out;
	-moz-animation: menuout 3s ease-out;
	-o-animation: menuout 3s ease-out;
	-ms-animation: menuout 3s ease-out;
	-mso-animation: menuout 3s ease-out;
	-atsc-animation: menuout 3s ease-out;
	animation: menuout 3s ease-out;
}
	
#gruss {left:26%; top:12px;}
#logohgr {position: fixed; right: 10px; top: 10px; width: 80px; height: 80px;}
#logoul {position: fixed; left: -140px; bottom: 30px; width: 60px; height: 60px;}
#text {position: fixed; right: 0px; bottom: 85px; height: 40%; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: auto;}
#smibox {position: fixed; left: 0px; bottom:0px; padding: 5px; background-color: rgba(255,255,255,0.66);}
#claim {position: fixed; bottom: 5px; right: 10px; padding: 1%; color: white; text-align: center; line-height: 12px;}
#mintxt {display: none;}
}

@media all and (min-width: 400px) and (min-height: 400px) {#gruss {left:26%; top:12px;}
	#text {position: fixed; right: 0px; bottom: 85px; height: 55%; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: auto;}
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 400px) and (min-height: 450px) {#gruss {left:26%; top:12px;}
	#text {position: fixed; right: 0px; bottom: 85px; height: 55%; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: auto;}
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 400px) and (min-height: 500px) {#gruss {left:26%; top:12px;}
	#text {position: fixed; right: 0px; bottom: 95px; height: auto; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 400px) and (min-height: 600px) {#gruss {left:26%; top:12px;}
	#text {position: fixed; right: 0px; bottom: 95px; height: auto; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
	h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 400px) and (min-height: 830px) {
	
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-400px, 0px, 0);}

.slide-menu {
	transform: translate3d(0px, 0px, 0);
	-webkit-animation: menuin 3s ease-out;
	-moz-animation: menuin 3s ease-out;
	-o-animation: menuin 3s ease-out;
	-ms-animation: menuin 3s ease-out;
	-mso-animation: menuin 3s ease-out;
	-atsc-animation: menuin 3s ease-out;
	animation: menuin 3s ease-out;
}
	
	#gruss {left:42%; top:20%;}
	#text {position: fixed; right: 0px; bottom: 95px; height: auto; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
	h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;}
}

@media all and (min-width: 500px) and (min-height: 400px) {#gruss {left:26%; top:12px;}
	#text {position: fixed; right: 0px; bottom: 85px; height: 55%; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: auto;}
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 500px) and (min-height: 450px) {#gruss {left:26%; top:12px;}
	#text {position: fixed; right: 0px; bottom: 85px; height: 55%; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: auto;}
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 500px) and (min-height: 530px) {#gruss {left:30%; top:12%;}
	#text {position: fixed; right: 0px; bottom: 95px; height: auto; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 500px) and (min-height: 640px) {#gruss {left:38%; top:15%;}
	#text {position: fixed; right: 0px; bottom: 95px; height: auto; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
	h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 500px) and (min-height: 800px) {
	
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-400px, 0px, 0);}

.slide-menu {
	transform: translate3d(0px, 0px, 0);
	-webkit-animation: menuin 3s ease-out;
	-moz-animation: menuin 3s ease-out;
	-o-animation: menuin 3s ease-out;
	-ms-animation: menuin 3s ease-out;
	-mso-animation: menuin 3s ease-out;
	-atsc-animation: menuin 3s ease-out;
	animation: menuin 3s ease-out;
}
	
	#gruss {left:42%; top:20%;}
	#text {position: fixed; right: 0px; bottom: 95px; height: auto; width: 98%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
	h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;}
}

@media all and (min-width: 600px) and (min-height: 320px) {
	h5 {font-size:11px; font-weight:normal; margin:0px; padding:0px;}	
	
	input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-400px, 0px, 0);}

.slide-menu {
	transform: translate3d(0px, 0px, 0);
	-webkit-animation: menuin 3s ease-out;
	-moz-animation: menuin 3s ease-out;
	-o-animation: menuin 3s ease-out;
	-ms-animation: menuin 3s ease-out;
	-mso-animation: menuin 3s ease-out;
	-atsc-animation: menuin 3s ease-out;
	animation: menuin 3s ease-out;
}
	
	#gruss {left:29%; top:12px;}
	#text {position: fixed; right: 0px; bottom: 85px; height: 40%; width: 70%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: auto;}
	#smibox {position: fixed; left: 28%; bottom:0px; padding: 5px; background-color: rgba(255,255,255,0.66);}
}

@media all and (min-width: 600px) and (min-height: 360px) {#gruss {left:29%; top:12%;}}

@media all and (min-width: 600px) and (min-height: 440px) {
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}
	#logoul {position: fixed; left: 20px; bottom: 20px; width: 40px; height: 40px;}
	#logohgr {position: fixed; right: -25px; top: -125px; width: 300px; height: 300px; opacity: 0.5;}
	#gruss {left:29%; top:15%;}
}

@media all and (min-width: 600px) and (min-height: 670px) {
	#gruss {left:29%; top:27%;}
	#logoul {position: fixed; left: 20px; bottom: 20px; width: 40px; height: 40px;}
	#text {position: fixed; right: 0px; bottom: 85px; height: auto; width: 70%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
	#logohgr {position: fixed; right: -25px; top: -125px; width: 400px; height: 400px; opacity: 0.5;}
}

@media all and (min-width: 700px) and (min-height: 700px) {
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}
	h1 {font-size:50px;	font-weight:lighter; margin:0px; padding:0px;}
	
	#gruss {left:29%; top:23%;} 
}

@media all and (min-width: 700px) and (min-height: 850px) {#gruss {left:29%; top:30%;}
    h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;}}

@media all and (min-width: 800px) and (min-height: 800px) {#gruss {left:29%; top:30%;}}

@media all and (min-width: 800px) and (min-height: 1010px) {
h1 {font-size:40px;	font-weight:lighter; margin:0px; padding:0px;}
h2 {font-size:30px; font-weight:lighter; margin:0px; padding:0px;}
h3 {font-size:50px; font-weight:lighter; margin:0px; padding:0px;}
h4 {font-size:25px; font-weight:lighter; margin:0px; padding:0px;}
h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;}
h6 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}
h7 {font-size:18px; font-weight:bold; margin:0px; padding:0px;}

#menuframe {top:58px;}
	
#btnholmatec {background:url(img/holmatec.png) no-repeat; width: 230px; height: 41px; background-color: rgba(255,255,255,0.66);}
#btnholmatec:hover {background:url(img/holmatec_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnroehrig {background:url(img/roehrig.png) no-repeat; width: 290px; height: 67px; background-color: rgba(255,255,255,0.66);}
#btnroehrig:hover {background:url(img/roehrig_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnillerhaus {background:url(img/illerhaus.png) no-repeat; width: 255px; height: 85px;background-color: rgba(255,255,255,0.66);}
#btnillerhaus:hover {background:url(img/illerhaus_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnigs {background:url(img/igs.png) no-repeat; width: 110px; height: 81px; background-color: rgba(255,255,255,0.66);}
#btnigs:hover {background:url(img/igs_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnchristiani {background:url(img/christiani.png) no-repeat; width: 221px; height: 69px; background-color: rgba(255,255,255,0.66);}
#btnchristiani:hover {background:url(img/christiani_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnherkenrath {background:url(img/herkenrath.png) no-repeat; width: 285px; height: 86px; background-color: rgba(255,255,255,0.66);}
#btnherkenrath:hover {background:url(img/herkenrath_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnante {background:url(img/ante.png) no-repeat; width: 202px; height: 76px; background-color: rgba(255,255,255,0.66);}
#btnante:hover {background:url(img/ante_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnfb {background:url(img/fb.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
#btnfb:hover {background:url(img/fb_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btngp {background:url(img/gp.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
#btngp:hover {background:url(img/gp_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btnen {background:url(img/en.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
#btnen:hover {background:url(img/en_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btnde {background:url(img/de.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
#btnde:hover {background:url(img/de_.png) no-repeat; transition: 1s;  cursor:pointer;}

input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-400px, 0px, 0);}

.slide-menu {
	transform: translate3d(0px, 0px, 0);
	-webkit-animation: menuin 3s ease-out;
	-moz-animation: menuin 3s ease-out;
	-o-animation: menuin 3s ease-out;
	-ms-animation: menuin 3s ease-out;
	-mso-animation: menuin 3s ease-out;
	-atsc-animation: menuin 3s ease-out;
	animation: menuin 3s ease-out;
}
	
#gruss {left:40%; top:38%;}
#logohgr {position: fixed; right: -35px; top: -125px; width: 500px; height: 500px;}
#logoul {position: fixed; left: 20px; bottom: 30px; width: 60px; height: 60px;}
#text {position: fixed; right: 0px; bottom: 150px; height: auto; width: 80%; background: url(img/punktraster.png); color: white; padding: 1%;}
#smibox {position: fixed; left: 18%; bottom:0px; padding: 1%; background-color: rgba(255,255,255,0.66);}
#claim {position: fixed; bottom: 20px; right: 20px; padding: 1%; color: white; text-align: center; line-height: 20px;}
}

@media all and (min-width: 800px) and (min-height: 1100px) {h5 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}}
	
@media all and (min-width: 800px) and (min-height: 1200px) {
	h5 {font-size:21px; font-weight:normal; margin:0px; padding:0px;} 
	h1 {font-size:80px;	font-weight:lighter; margin:0px; padding:0px;}
	#gruss {left:40%; top:300px;}

}

@media all and (min-width: 900px) and (min-height: 600px) {
	h5 {font-size:12px; font-weight:normal; margin:0px; padding:0px;} 
	h1 {font-size:40px;	font-weight:lighter; margin:0px; padding:0px;}
	#gruss {left:29%; top:17%;}
	#text {position: fixed; right: 0px; bottom: 85px; height: auto; width: 70%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
}

@media all and (min-width: 900px) and (min-height: 800px) {
	h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;} 
	h1 {font-size:50px;	font-weight:lighter; margin:0px; padding:0px;}
	h3 {font-size:50px; font-weight:lighter; margin:0px; padding:0px;}
	h4 {font-size:25px; font-weight:lighter; margin:0px; padding:0px;}
	h7 {font-size:18px; font-weight:bold; margin:0px; padding:0px;}
	
	#btnfb {background:url(img/fb.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
	#btnfb:hover {background:url(img/fb_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
	#btngp {background:url(img/gp.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
	#btngp:hover {background:url(img/gp_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
	#btnen {background:url(img/en.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
	#btnen:hover {background:url(img/en_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
	#btnde {background:url(img/de.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
	#btnde:hover {background:url(img/de_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
	#gruss {left:29%; top:25%;}
	#text {position: fixed; right: 0px; bottom: 150px; height: auto; width: 70%; background-color: rgba(0,0,0,0.66); color: white; padding: 1%; overflow: hidden;}
	#claim {position: fixed; bottom: 20px; right: 20px; padding: 1%; color: white; text-align: center; line-height: 20px;}
}

@media all and (min-width: 900px) and (min-height: 1000px) {
	h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;} 
	h1 {font-size:50px;	font-weight:lighter; margin:0px; padding:0px;}
	h3 {font-size:50px; font-weight:lighter; margin:0px; padding:0px;}
	h4 {font-size:22.5px; font-weight:lighter; margin:0px; padding:0px;}
	h7 {font-size:18px; font-weight:bold; margin:0px; padding:0px;}
	
	#gruss {left:38%; top:35%;}
	#text {position: fixed; right: 0px; bottom: 150px; height: auto; width: 70%; background: url(img/punktraster.png); color: white; padding: 1%; overflow: hidden;}
	#smibox {position: fixed; left: 28%; bottom:0px; padding: 1%; background-color: rgba(255,255,255,0.66);}
	#claim {position: fixed; bottom: 20px; right: 20px; padding: 1%; color: white; text-align: center; line-height: 20px;}
}

@media all and (min-width: 900px) and (min-height: 1200px) {#gruss {left:38%; top:15%;}
	h5 {font-size:14px; font-weight:normal; margin:0px; padding:0px;}
}

@media all and (min-width: 1200px) and (min-height: 730px) {
h1 {font-size:70px;	font-weight:lighter; margin:0px; padding:0px;}
h2 {font-size:40px; font-weight:lighter; margin:0px; padding:0px;}
h3 {font-size:50px; font-weight:lighter; margin:0px; padding:0px;}
h4 {font-size:25px; font-weight:lighter; margin:0px; padding:0px;}
h5 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}
h6 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}
h7 {font-size:18px; font-weight:bold; margin:0px; padding:0px;}

#menuframe {top:70px;}
	
#btnholmatec {background:url(img/holmatec.png) no-repeat; width: 230px; height: 41px; background-color: rgba(255,255,255,0.66);}
#btnholmatec:hover {background:url(img/holmatec_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnroehrig {background:url(img/roehrig.png) no-repeat; width: 290px; height: 67px; background-color: rgba(255,255,255,0.66);}
#btnroehrig:hover {background:url(img/roehrig_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnillerhaus {background:url(img/illerhaus.png) no-repeat; width: 255px; height: 85px;background-color: rgba(255,255,255,0.66);}
#btnillerhaus:hover {background:url(img/illerhaus_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnigs {background:url(img/igs.png) no-repeat; width: 110px; height: 81px; background-color: rgba(255,255,255,0.66);}
#btnigs:hover {background:url(img/igs_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnchristiani {background:url(img/christiani.png) no-repeat; width: 221px; height: 69px; background-color: rgba(255,255,255,0.66);}
#btnchristiani:hover {background:url(img/christiani_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnherkenrath {background:url(img/herkenrath.png) no-repeat; width: 285px; height: 86px; background-color: rgba(255,255,255,0.66);}
#btnherkenrath:hover {background:url(img/herkenrath_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnante {background:url(img/ante.png) no-repeat; width: 202px; height: 76px; background-color: rgba(255,255,255,0.66);}
#btnante:hover {background:url(img/ante_.png) no-repeat; background-color: rgba(255,255,255,1);}

#btnfb {background:url(img/fb.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
#btnfb:hover {background:url(img/fb_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btngp {background:url(img/gp.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
#btngp:hover {background:url(img/gp_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btnen {background:url(img/en.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
#btnen:hover {background:url(img/en_.png) no-repeat; transition: 1s;  cursor:pointer;}
	
#btnde {background:url(img/de.png) no-repeat; z-index: 99998; width: 70px; height: 70px; transition: 1s; cursor:pointer;}
#btnde:hover {background:url(img/de_.png) no-repeat; transition: 1s;  cursor:pointer;}

input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-400px, 0px, 0);}

.slide-menu {
	transform: translate3d(0px, 0px, 0);
	-webkit-animation: menuin 3s ease-out;
	-moz-animation: menuin 3s ease-out;
	-o-animation: menuin 3s ease-out;
	-ms-animation: menuin 3s ease-out;
	-mso-animation: menuin 3s ease-out;
	-atsc-animation: menuin 3s ease-out;
	animation: menuin 3s ease-out;
}
	
#gruss {left:26%; top:10%;}
#logohgr {position: fixed; right: -35px; top: -125px; width: 400px; height: 400px;}
#logoul {position: fixed; left: 40px; bottom: 30px; width: 60px; height: 60px;}
#text {position: fixed; right: 0px; bottom: 150px; height: auto; width: 73%; background: url(img/punktraster.png); color: white; padding: 1%;}
#smibox {position: fixed; left: 25%; bottom:0px; padding: 1%; background-color: rgba(255,255,255,0.66);}
#claim {position: fixed; bottom: 20px; right: 20px; padding: 1%; color: white; text-align: center; line-height: 20px;}
}

@media all and (min-width: 1200px) and (min-height: 900px) {
	h5 {font-size:20px; font-weight:normal; margin:0px; padding:0px;}
	#text {position: fixed; right: 0px; bottom: 160px; height: auto; width: 73%; background: url(img/punktraster.png); color: white; padding: 1%;}
}

@media all and (min-width: 1200px) and (min-height: 1200px) {#gruss {left:32%; top:25%;}}

@media all and (min-width: 1400px) and (min-height: 730px) {
	#text {position: fixed; right: 0px; bottom: 150px; height: auto; width: 73.2%; background: url(img/punktraster.png); color: white; padding: 1%;}
	#smibox {position: fixed; left: 25%; bottom:0px; padding: 1%; background-color: rgba(255,255,255,0.66);}
	#claim {position: fixed; bottom: 20px; right: 20px; padding: 1%; color: white; text-align: center; line-height: 20px;}
}

@media all and (min-width: 1350px) and (min-height: 730px) {
#text {position: fixed; right: 0px; bottom: 170px; height: auto; width: 75%; background: url(img/punktraster.png); color: white; padding: 0.5%;}
#smibox {position: fixed; left: 24%; bottom:0px; padding: 0.5%; background-color: rgba(255,255,255,0.66);}
#claim {position: fixed; bottom: 20px; right: 20px; padding: 0.5%; color: white; text-align: center; line-height: 20px;}	
}

@media all and (min-width: 1400px) and (min-height: 960px) {
h1 {font-size:60px;	font-weight:lighter; margin:0px; padding:0px;}
h2 {font-size:40px; font-weight:lighter; margin:0px; padding:0px;}
h3 {font-size:50px; font-weight:lighter; margin:0px; padding:0px;}
h4 {font-size:25px; font-weight:lighter; margin:0px; padding:0px;}
h5 {font-size:23px; font-weight:normal; margin:0px; padding:0px;}
h7 {font-size:18px; font-weight:bold; margin:0px; padding:0px;}

input[type=checkbox]:checked ~ .slide-menu {transform: translate3d(-400px, 0px, 0);}

.slide-menu {
	transform: translate3d(0px, 0px, 0);
	-webkit-animation: menuin 3s ease-out;
	-moz-animation: menuin 3s ease-out;
	-o-animation: menuin 3s ease-out;
	-ms-animation: menuin 3s ease-out;
	-mso-animation: menuin 3s ease-out;
	-atsc-animation: menuin 3s ease-out;
	animation: menuin 3s ease-out;
}
	
#gruss {left:24%; top:100px;}
#logohgr {position: fixed; right: -40px; top: -175px; width: 600px; height: 600px;}
#logoul {position: fixed; left: 40px; bottom: 30px; width: 60px; height: 60px;}
#text {position: fixed; right: 0px; bottom: 170px; height: auto; width: 75%; background: url(img/punktraster.png); color: white; padding: 1%;}
#smibox {position: fixed; left: 23%; bottom:0px; padding: 1%; background-color: rgba(255,255,255,0.66);}
#claim {position: fixed; bottom: 20px; right: 20px; padding: 1%; color: white; text-align: center; line-height: 20px;}
}

@media all and (min-width: 1400px) and (min-height: 1050px) {h5 {font-size:24px; font-weight:normal; margin:0px; padding:0px;}}
@media all and (min-width: 1400px) and (min-height: 1200px) {#gruss {left:24%; top:200px;} h1 {font-size:80px;	font-weight:lighter; margin:0px; padding:0px;}}

@media all and (min-width: 1700px) and (min-height: 1200px) {#logohgr {position: fixed; right: -80px; top: -250px; width: 800px; height: 800px;}
#logoul {position: fixed; left: 40px; bottom: 20px; width: 75px; height: 75px;}}

@media all and (min-width: 1800px) and (min-height: 1200px) {
h1 {font-size:90px;	font-weight:lighter; margin:0px; padding:0px;}
h2 {font-size:40px; font-weight:lighter; margin:0px; padding:0px;}
h3 {font-size:50px; font-weight:lighter; margin:0px; padding:0px;}
h4 {font-size:25px; font-weight:lighter; margin:0px; padding:0px;}
h5 {font-size:26px; font-weight:normal; margin:0px; padding:0px;}
h6 {font-size:12px; font-weight:normal; margin:0px; padding:0px;}
h7 {font-size:18px; font-weight:bold; margin:0px; padding:0px;}
	
#gruss {left:24%; top:220px;}
#logohgr {position: fixed; right: -80px; top: -250px; width: 800px; height: 800px;}
#logoul {position: fixed; left: 40px; bottom: 30px; width: 75px; height: 75px;}
#text {position: fixed; right: 0px; bottom: 170px; height: auto; width: 75%; background: url(img/punktraster.png); color: white; padding: 1%;}
#smibox {position: fixed; left: 23%; bottom:0px; padding: 1%; background-color: rgba(255,255,255,0.66);}
#claim {position: fixed; bottom: 20px; right: 20px; padding: 1%; color: white; text-align: center; line-height: 20px;}
}

@media all and (min-width: 1900px) and (min-height: 1300px) {h5 {font-size:28px; font-weight:normal; margin:0px; padding:0px;}}