/*HTML Statements*/
body, html { margin: 0; padding: 0; width: 100%; height: 100%; }

h2 {text-transform: uppercase; text-align: center; margin: 100px auto 0 auto; font-size: 55px;}

.button {text-transform: uppercase; padding: 10px 30px 10px 30px; display: inline-block; margin: 10px 0px 20px 0px; color: #fff;}

a {text-decoration: none;}

/**/
/*Klassen*/
/**/

/*Farbe von ID-Check seite 444444*/
/*.page {background: #f4f6f0;}*/

/*Hintergrundfarbe Schriftfarbe weiss*/
#Kontakt h2, #Startseite p, #Startseite .button, #Kontakt .kontakt, #Kontakt .kontakt a, #UeberUns .Motto_bg article p, #Produkt .produkte ul li .tag_line h3, #Produkt .produkte ul li .tag_line p, #IdCheck h2, #IdCheck3 h2, #Impressum h2, #IdCheck p, #IdCheck1 h2, #IdCheck3 p
{color: #ffff;}

p, a, header nav ul li a, header nav ul li
{color: #999;}

#UeberUns h2, #Produkt h2, header nav ul li a:hover
{color: #111;}


p, header nav ul li, .button, footer, #Kontakt .kontakt, #Kontakt .kontakt a
{font-family: 'Lato', sant-serif; font-weight: 300; line-height: 25px; word-spacing: 3px;}


h2, #UeberUns .Motto_bg article p, #Produkt .produkte ul li .tag_line h3, #IdCheck #id 
{font-family: 'alternate-gothic-no-1-d', Arial, sant-serif;}

/*################*/
/*Objekte Klassen*/
/*################*/

.page {width: 100%;  overflow: hidden; float: left;}


/**/
/*Header*/
/**/

/**/
/*Produkte*/
/**/
#Produkt .produkte {width: 90%; margin: 50px auto 0 auto;}
#Produkt .produkte ul {width: 100%; height: 100%; margin: 0; padding: 0;}
#Produkt .produkte ul li {position: relative; list-style: none; width: 30%; margin: 0 5% 0 0; float: left; background-position: left bottom; background-size: cover; background-attachment: fixed; min-height: 650px;} 
#Produkt .produkte ul li:last-child {margin: 0;}

#Produkt .produkte ul li .tag_line {position: absolute; bottom: 25px; width: 80%; left: 25px;}
#Produkt .produkte ul li .tag_line .h3_balken {margin: 0 0 10px 0;}
#Produkt .produkte ul li .tag_line p {margin: 0; padding: 0; font-size: 20px; font-weight: bold;}
#Produkt .produkte ul li .tag_line p a {margin: 0; padding: 0; font-size: 20px; font-weight: bold; color: #003d14;}

#Produkt .produkte ul li .tag_line h3 {text-transform: uppercase; font-size: 50px; margin: 0 0 10px 0;}

#Produkt .produkte ul li.produkt1 {background-image: url(images/holz.jpeg); background-attachment: fixed;}
#Produkt .produkte ul li.produkt2 {background-image: url(images/lederwellig.jpg); background-attachment: fixed;}
#Produkt .produkte ul li.produkt3 {background-image: url(images/polster.jpeg); background-attachment: fixed;}

@media screen and (max-width: 321px) {
	#Produkt .produkte ul li {width: 100%; margin: 0 0 5% 0;}
	}

@media screen and (min-width: 322px) {
	#Produkt .produkte ul li {width: 100%; margin: 0 0 5% 0;}
	}

@media screen and (min-width: 414px) {
	#Produkt .produkte ul li {width: 100%; margin: 0 0 5% 0;}
	}

@media screen and (min-width: 1024px) {
	#Produkt .produkte ul li {width: 30%; margin: 0 5% 0 0;}
	}

@media screen and (min-width: 1366px) {

	}

/**/
/*ID CHeck*/
/**/
/*Funktioneirt nicht*/
#IdCheck #check form input:: -webkit-input-placeholder, input, #send {-webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}

/*#IDCheck .page {background: f4f6f0}*/
/*Webkit funktioniert noch nicht ganz*/
#IdCheck #check form input {margin: 10% 10% 0 10%; width: 70%; padding: 5%; display: block; border: none; border-bottom: 1px solid #dadada; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 99%, #dadada 1%); background: linear-gradient( bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%); background-size: 0 100%; background-repeat:no-repeat; color: #111; font-size: 15px;}
#IdCheck #check form input:focus {outline:none; background-size: 100% 100%;}

#IdCheck {background-image: url(images/balu.png); background-position: center center; background-size: cover; background-attachment: fixed; width: 90%; height: auto; min-height: 95%; margin: 5% 5% 0 5%;}
#IdCheck #check {position: relative; margin: 12.5% 0 0 0;}
#IdCheck #check form { width: 400px; height: auto; overflow: hidden; position: absolute; left: 50%; margin: 2% 0% 0 0%; transform: translateX(-50%) translateY(-50%); background: #fff; box-sizing: border-box;}

#IdCheck #check form #send {background: #dadada; border: none; color: #777; width: 80%; margin: 5% 10% 10% 10%; cursor: pointer;}
/*vorher 666*/
#IdCheck #check form #send:hover { background:#4cb9fa; color:#fff;}

#IdCheck h2 {font-weight: 100; font-family: Arial;}
#IdCheck h3 {text-align: center; margin: 100px auto 0 auto; font-size: 35px; color: #fff; font-weight: 80; font-family: PlayfairDisplay;}

#IdCheck p {font-size: 30px; text-align: center; color: #111; margin: 5% 5% 0 5%; line-height: 150%;}
#IdCheck .button:hover {color: #208520}

/*Auswertung:*/
#IdCheck #parent {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: stretch;}
#IdCheck #parent p {line-height: 200%; color: #fff;}
#IdCheck #parent #foto {flex-grow: 1; width: 35%; margin: 5% 0% 0% 5%;}
#IdCheck #parent #foto #img {width: 100%;}
#IdCheck #parent #fotoR {flex-grow: 1; width: 35%; display: block; margin: 5% 5% 0 0;}
#IdCheck #parent #fotoRL {flex-grow: 1; width: 35%; display: block; margin: 5% 5% 5% 0;}
#IdCheck #parent #fotoR #img {width: 100%;}
#IdCheck #parent #fotoRL #img {width: 100%;}
#IdCheck #parent #text {flex-grow: 1; width: 30%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #textR {flex-grow: 1; width: 30%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #kuhstapfen {flex-grow: 1; width: 10%; display: block; margin: 7.5% 0 0 0;}
#IdCheck #parent #kuhstapfen #img {width: 100%;}


@media screen and (max-width: 321px) {
    #IdCheck {background-size: 321px auto;}
    /*#IdCheck h2 {font-size: 30px;}*/
	#IdCheck h3 {font-size: 15px; margin: 30px 0 0 0;}
#IdCheck #check {position: relative; margin: 45% 0 0 0;}
    #IdCheck #check form {height: auto; overflow: hidden; position: absolute; width: 80%; left: 50%; margin: 0% 0% 0% 0%; transform: translateX(-50%) translateY(-50%); background: #fff; box-sizing: border-box;}
#IdCheck #logo {width:50%; margin: -5% 25% -25% 25%;}

#IdCheck #parent #foto {flex-grow: 1; width: 90%; margin: 5% 5% 0% 5%;}
 #IdCheck #parent #fotoR {flex-grow: 1; width: 90%; display: block; margin: 5% 5% 0 5%;}
#IdCheck #parent #fotoRL {flex-grow: 1; width: 90%; display: block; margin: 5% 5% 5% 5%;}
#IdCheck #parent #text {flex-grow: 1; width: 90%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #textR {flex-grow: 1; width: 90%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #kuhstapfen {flex-grow: 1; width: 30%; display: block; margin: 7.5% 35% 0 35%;}
  #IdCheck p {font-size: 15px;}

}
 

@media screen and (min-width: 322px) {
	#IdCheck h2 {font-size: 30px;}
      #IdCheck #check form {height: auto; overflow: hidden; position: absolute; width: 80%; left: 50%; margin: 0% 0% 0% 0%; transform: translateX(-50%) translateY(-50%); background: #fff; box-sizing: border-box;}
	#IdCheck h3 {font-size: 15px; margin: 30px 0 0 0;}
#IdCheck #check {position: relative; margin: 45% 0 0 0;}
#IdCheck #logo{width:50%; margin: -5% 25% -25% 25%;}

#IdCheck #parent #foto {flex-grow: 1; width: 90%; margin: 5% 5% 0% 5%;}
 #IdCheck #parent #fotoR {flex-grow: 1; width: 90%; display: block; margin: 5% 5% 0 5%;}
#IdCheck #parent #fotoRL {flex-grow: 1; width: 90%; display: block; margin: 5% 5% 5% 5%;}
#IdCheck #parent #text {flex-grow: 1; width: 90%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #textR {flex-grow: 1; width: 90%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #kuhstapfen {flex-grow: 1; width: 30%; display: block; margin: 7.5% 35% 0 35%;}
	#IdCheck p {font-size: 20px;}
	}

@media screen and (min-width: 414px) {
	#IdCheck h2 {font-size: 30px;}
	#IdCheck h3 {font-size: 15px; margin: 30px 5% 0 5%;} 
  #IdCheck #check form { width: 400px; height: auto; overflow: hidden; position: absolute; left: 50%; margin: 0% 0% 0 0%; transform: translateX(-50%) translateY(-50%); background: #fff; box-sizing: border-box;}
#IdCheck #logo{width:20%; margin: -5% 40% -15% 40%;}
#IdCheck #check {position: relative; margin: 12.5% 0 0 0;}

#IdCheck #parent #foto {flex-grow: 1; width: 90%; margin: 5% 5% 0% 5%;}
 #IdCheck #parent #fotoR {flex-grow: 1; width: 90%; display: block; margin: 5% 5% 0 5%;}
#IdCheck #parent #fotoRL {flex-grow: 1; width: 90%; display: block; margin: 5% 5% 5% 5%;}
#IdCheck #parent #text {flex-grow: 1; width: 90%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #textR {flex-grow: 1; width: 90%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #kuhstapfen {flex-grow: 1; width: 30%; display: block; margin: 7.5% 35% 0 35%;}
#IdCheck p {font-size: 20px;}

	}

@media screen and (min-width: 1024px) {
	#IdCheck h2 {font-size: 40px;}
	#IdCheck h3 {font-size: 20px; margin: 30px 0 0 0;}
#IdCheck #logo{width:20%; margin: -5% 40% -5% 40%;}
#IdCheck #check {position: relative; margin: 12.5% 0 0 0;}
	
    #IdCheck #parent #foto {flex-grow: 1; width: 35%; margin: 5% 0% 0% 5%;}
#IdCheck #parent #foto #img {width: 100%;}
#IdCheck #parent #fotoR {flex-grow: 1; width: 35%; display: block; margin: 5% 5% 0 0;}
#IdCheck #parent #fotoRL {flex-grow: 1; width: 35%; display: block; margin: 5% 5% 5% 0;}
#IdCheck #parent #fotoR #img {width: 100%;}
#IdCheck #parent #fotoRL #img {width: 100%;}
#IdCheck #parent #text {flex-grow: 1; width: 30%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #textR {flex-grow: 1; width: 30%; text-align: center; margin: 10% 5% 0 5%;}
#IdCheck #parent #kuhstapfen {flex-grow: 1; width: 10%; display: block; margin: 7.5% 0 0 0;}
#IdCheck #parent #kuhstapfen #img {width: 100%;}
#IdCheck p {font-size: 30px;}
    }

@media screen and (min-width: 1366px) {
	#IdCheck h2 {font-size: 50px;}
	#IdCheck h3 {font-size: 25px; margin: 30px 0 0 0;}
    #IdCheck #check {position: relative; margin: 12.5% 0 0 0;}
	}




/*IDCHECK 3 Richtige Ausgabe*/
#IdCheck3 {background-image: url(images/leder.jpeg); background-position: center center; background-size: cover; background-attachment: fixed; width: 90%; margin: 5% 5% 0 5%; height: auto;}
#IdCheck3 #img {width: 15%; margin: 0 42.5% 0 42.5%;}
#IdCheck3 #test {color: #4cb9fa;}
#IdCheck3 h3 {text-align: center; margin: 100px auto 0 auto; font-size: 35px; color: #fff;}

#IdCheck3 p {font-size: 30px; text-align: center; margin: 5% 5% 5%x 5%;}


@media screen and (max-width: 321px) {
	#IdCheck3 h2 {font-size: 30px;}
	#IdCheck3 p {font-size: 20px; margin: 10% 5% 0 5%;}
	}

@media screen and (min-width: 322px) {
	#IdCheck3 h2 {font-size: 35px;}
	#IdCheck3 p {font-size: 25px; margin: 10% 5% 0 5%; line-height: 120%;}
	}

@media screen and (min-width: 414px) {
	#IdCheck3 h2 {font-size: 40px;}
	#IdCheck3 p {font-size: 30px; margin: 10% 5% 0 5%; line-height:  120%}
	}

@media screen and (min-width: 1024px) {
	#IdCheck3 h2 {font-size: 50px;}
	#IdCheck3 p {font-size: 40px; margin: 10% 5% 0 5%; line-height:  120%}
	}

@media screen and (min-width: 1366px) {
	#IdCheck3 h2 {font-size: 50px;}
	#IdCheck3 p {font-size: 40px; margin: 5% 5% 5% 5%; line-height:  120%}
	}

/*Dtanebank Anpassung*/
#IdCheck1 {background-image: url(images/hintergrund2.jpeg); background-position: center center; background-size: cover; background-attachment: fixed; width: 90%; height: 210%; margin: 5% 5% 0 5%;}
#IdCheck1 #datenbank form input {margin: 10% 10% 0 10%; width: 70%; padding: 5%; display: block; border: none; border-bottom: 1px solid #dadada; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 99%, #dadada 1%); background: linear-gradient( bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%); background-size: 0 100%; background-repeat:no-repeat; color: #111; font-size: 15px;}
#IdCheck1 #datenbank form input:focus {outline:none; background-size: 100% 100%;}

#IdCheck1 #datenbank {position: relative; top: 200px;}
#IdCheck1 #datenbank form { width: 400px; height: auto; overflow: hidden; position: absolute; left: 50%; margin: 35% 0 0 0; transform: translateX(-50%) translateY(-50%); background: #fff; box-sizing: border-box;}

#IdCheck1 #datenbank form #send {background: #dadada; border: none; color: #777; width: 80%; margin: 5% 10% 10% 10%; cursor: pointer;}
#IdCheck1 #datenbank form #send:hover { background:#666; color:#fff;}

#IdCheck1 #datenbank2 form input {margin: 10% 10% 0 10%; width: 70%; padding: 5%; display: block; border: none; border-bottom: 1px solid #dadada; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 99%, #dadada 1%); background: linear-gradient( bottom, rgba(255, 255, 255, 0) 99%, #dadada 1%); background-size: 0 100%; background-repeat:no-repeat; color: #111; font-size: 15px;}
#IdCheck1 #datenbank2 form input:focus {outline:none; background-size: 100% 100%;}

#IdCheck1 #datenbank2 {position: relative; top: 200px;}
#IdCheck1 #datenbank2 form { width: 400px; height: auto; overflow: hidden; position: absolute; left: 50%; margin: 85% 0 0 0; transform: translateX(-50%) translateY(-50%); background: #fff; box-sizing: border-box;}

#IdCheck1 #datenbank2 form #send {background: #dadada; border: none; color: #777; width: 80%; margin: 5% 10% 10% 10%; cursor: pointer;}
#IdCheck1 #datenbank2 form #send:hover { background:#666; color:#fff;}

#IdCheck1 h3 {text-align: center; margin: 100px auto 0 auto; font-size: 35px; color: #fff;}

#IdCheck1 p {font-size: 30px; text-align: center;}


/*Auswertung IDCHECK*/
#Footer {width: 100%; height: 10%; overflow: hidden; float: left;}
#Footer #copyright {margin: 2.2% 0 0 0; padding: 0; text-align: center; font-size: 11px; font-weight: 10;}