body {
	margin: 0;
	padding: 0;
	
	
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	font-size: 100%;
	font-family: 'Special Elite', cursive;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
#ctn {
  position: relative;
  border: solid 1px green;
  height: 14vh;
  opacity: 0;
}

#ctn a {
  position: absolute;
  left: 0px;
  top: -60px;
  border: solid 1px red;
}
p {hyphens: auto;}
#kontaktantwort {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.8);z-index: 2005;}
#kontaktantwort #ka_rahmen {
	width: 40vw;
	margin-left: 30vw;
	height: 40vh;
	margin-top: 20vh;
	display: flex;
	align-items: center;
	justify-content:center;
	background-color: white;
	box-shadow: inset 0 0 2em black;
	/*border-radius: 1em;*/
	background-image: url(../img/holz.jpg);
	background-size: cover;
	position: relative;
}

#kontaktantwort #ka_rahmen #ka_close {
	position: absolute;
	top: 0.8em;
	right: 1em;
	
	color: red;
	text-shadow: 2px 2px 2px black, 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
	font-size: 2em;
	cursor: pointer;
}

#kontaktantwort #ka_rahmen #ka_inner p {font-size: 2em;color: white;text-shadow: 2px 2px 2px black;padding-left: 5vw;padding-right: 5vw;}

#paratext {
    
    background: transparent;
    font-size: 3em;
    text-shadow: 2px 2px 2px black;
	 color: white; 
}

a {outline: none;color: white;text-decoration: none;}
a:hover {text-decoration: underline;}
h1, h2, h3 {font-family: 'Montserrat Alternates', sans-serif;text-shadow: 2px 2px 2px white;}
#fon {
	position: fixed;
	top: 1em;
	font-size: 1.4vw;
	z-index: 1002;
	right: 3vw;
	text-shadow: 2px 2px 2px black;
	color: white;
	text-align: right;
}
#mobhead {display: none;}
#mobilnav {display: none;}
#header {
	position: fixed;
	height: 18vh;
	opacity: 0;
	top: 11vh;
	width: 100%;
	left: 11vw;
	background-image: url(../img/holz.jpg);
	background-size: cover;
	z-index: 1001;
}
#header img {
	height: 16vh;
	box-shadow: inset 0 0 1em black, 0 0 0.2em black;
	margin-top: 2vh;
	margin-left: 1vw;
	z-index: 1002;
	position: relative;
}

#sbalken {
	position: fixed;
	
	background-color: #FEEC3F;
	width:0;
	margin-left:8%;
	height: 2.3vh;
	top:10.2vh;
	z-index: 1001;
	
	font-size: 1.1em;
}
nav {
	text-align: right;
	opacity: 0;
	margin-top: 0.05em;
	width: 90%;
	float: right;
	
}

nav a {
	font-size: 0.9vw;
	text-shadow: 1px 1px 1px white;
	font-family: 'Montserrat Alternates', sans-serif;
	color:black;
	font-weight: bold;
	
}

nav ul, nav li {margin: 0;padding:0;}
nav #hnav li {display: inline-block;margin-left: 1vw;margin-right: 1vw;}
nav #hnav a:hover {color: grey;}
nav #hnav .subnav {display: none;position: absolute;background-image: none;background-color:black;margin-left: 0;z-index: 1002;}
nav #refsubl:hover #refsub {display: block;}
nav #refsubl ul li {display: block;}
nav #hnav .subnav li {text-align: left;padding: 0.2em;z-index: 1002;background-color: #FEEC3F;margin: 0.1em;margin-left: 0;} 
nav .subnav a {color: black;text-shadow: 1px 1px 1px white;}

section {
	width: 100%;
	margin: 0;
	padding-bottom: 10vh;
	text-align: center;
	background-image: url(../img/holz.jpg);
	background-size: cover;
	background-attachment: fixed;
	z-index: 1;
	margin-top: -4vh;
	
}
section .rframe h2 {background-image: url(../img/zettel.png);background-size: 30% 100%;background-repeat: no-repeat;background-position: center;padding-bottom: 1em;padding-top: 1em;}
section .rframe p {
	width: 60vw;
	margin-left: 20vw;
	background-color: #FEEC3F;
	padding: 1em;
	box-shadow: 2px 2px 2px black;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 15px;
	text-align: justify;
}
section .rframe .bilder img {box-shadow: 2px 2px 2px black, -2px -2px 2px black;border:2px solid transparent;}
section .rframe .bilder img:hover {border-color: white;}

.frame {
	text-align: left;
	padding: 5%;
	padding-top: 2%;
	text-align: justify;
	background-image: radial-gradient(rgba(175, 97, 31, 0.5), rgba(255,255,255,0.5), rgba(175, 97, 31, 0.5));
}

#home {z-index: 1;}
#home #kontaktform {
	position: fixed;
	right: 2%;
	top: 20vh;
	width: 25%;
	overflow: hidden;
	display: none;
	background-image: url(../img/parkett.jpg);
	background-size: cover;
	z-index: 1002;
	color: white;
}
#home #kontaktform h2 {color: white;text-shadow: 1px 1px 1px black;}

#home #kontaktform #form {width: 100%;height: 100%;text-align: left;padding: 1em;padding-right: 2em;}
#home #kontaktform #form span {text-decoration: underline;}
/*#home #kontaktform #form input {width: 99%;margin-bottom: 1em;padding: 0.5%;box-shadow: 2px 2px 2px black;}
#home #kontaktform #form textarea {width: 100%;height: 10em;margin-bottom: 1em;padding: 0.5%;box-shadow: 2px 2px 2px black;}
#home #kontaktform #form input[type=submit] {width: 101%;background-color: yellow;padding: 1%;box-shadow: 2px 2px 2px black;}
#home #kontaktform #form input[type=file] {background-color: white;color: black;}*/
#home #kontaktform #laden {width: 103%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1003;}
#home #kontaktform #laden img {width: 103%;height: 100%;}
.close {color: white;position: absolute;right: 0;z-index: 1002;cursor: pointer;padding: 3%;}
/*#home #kontaktform #area  {height: 20vh;overflow: auto;}*/

#urkunde {position: absolute;left: 22vw;margin-top: 7.5%;height: 60vh;}
#urkunde img {width: 0;height: 100%;}


#home ul {
	z-index: 1000;
	list-style-type: none;
	
	background-color: white;
	width: 55vw;
	margin-left: 22vw;
	height: 30vw;
	padding: 0;
	border-radius: 15px;
	margin-top: 10vh;
	overflow: hidden;
	border: 1.3vw solid transparent;
   border-image: url(../img/rahmen.png) 30 round;
}
#home ul li {
	position: relative;
	padding-top: 40%;
	text-align: center;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 1em gray;
	/*background-repeat: no-repeat;
	background-position: top center;
	background-color: black;
	background-size: 100% auto;*/
}

#home ul li, #home ul li a {
	color: whitesmoke;
	text-shadow: 3px 3px 3px black;
	
	
}
#home ul li a:hover {
	
	color: black;
	text-shadow: 2px 2px 2px white;
}
#home ul li img {width: 100%;position: absolute;top: 0;left: 0;}
#home ul #logo {background-color: black;}
#home ul #logo img {top: 5%;}
/*li#logo {background-image: url(../img/logo.jpg);background-position: 10%;}
li#montage {background-image: url(../img/bild.jpg);}
li#auftrag {background-image: url(../img/bild2.jpg);}
li#privat {background-image: url(../img/bild3.jpg);}
li#innen {background-image: url(../img/bild4.jpg);}
li#moebel {background-image: url(../img/bild5.jpg);}
li#designl {background-image: url(../img/bild6.jpg);}
li#spiel {background-image: url(../img/bild7.jpg);}*/

#theman {position: absolute;right: 5%;top: 30vh;display: none;}
#theman img {height: 50vh;}


#referenzen-l {}
#referenzen-l .gal {width: 90%;margin-left: 0;font-variant: small-caps;margin-top: 2%;text-align: center;margin-left: 3%;}
#referenzen-l .gal .pic {width: 20vw;position: relative;float: left;margin: 1%;border-radius: 5px;vertical-align: middle;}

#referenzen-l .gal .pic img {width: 100%;height: auto;padding-top: 0.5%;box-shadow: 2px 2px 2px black;vertical-align: middle;}
#referenzen-l .gal .pic img:hover {border:2px solid white;}
#referenzen-l .gal .pic p {
	position: absolute;
	bottom: 0;
	width: 92%;
	color: black;
	margin:0;
	padding:1em;
	font-size: 100%;
	height: 5.5vw;
	display: flex;
	align-items: center;
	justify-content:center;
	line-height: 100%;
	background-image: url(../img/zettel.png);
	background-size: 100% 100%;
	
}
#referenzen-l h2 {text-align: left;text-shadow: 2px 2px 2px black;color: white;}
br.clear {clear: both;}

#kinhalt {
	width: 30%;
	margin-left: 35%;
	margin-top: 10%;
	text-align: left;
	background-color: #FEEC3F;
	padding: 1em;
	box-shadow: 2px 2px 2px black;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 15px;
	
}

footer {display: none;}
#moburkund {display: none;}

/* lightboxfenster - Zoom
.lb-image, .lb-close, .lb-nav {
	transform: scale(2,2);
 -moz-transform: scale(2,2);
 -webkit-transform: scale(2,2);
 -o-transform: scale(2,2);
 -ms-transform: scale(2,2);
	margin-top: 20vh;
}
.lb-close {margin-right: -10vw;}
.lb-nav {margin-top: -15%;}
.lb-caption {background-color: white;color: black;z-index: 20001;position: absolute;bottom: 1em;left: 40%;}
.lb-number {background-color: white;color: black;}
*/
/*------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation:portrait) {
	body {background-image: url(../img/holz.jpg);}
	#fon {
	position: absolute;
	top: 35vh;
	left: 2%;
	font-size: 1em;
	z-index: 1002;
	line-height: 1.5em;
	text-shadow: 2px 2px 2px black;
	color: white;
	text-align: left;
}
	nav {display: none;}
	#sbalken {display: none;}
	#header img {width: 98%;height: auto;}
	
	#urkunde {display: none;}
	section {
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-attachment: local;
	
	}
	
	#home {}
	#mobhead {display: block;width: 100%;position: fixed;top: 0;width: 100%;background-color: white;z-index: 1008;height: 3em;}
	#mobhead img {height: 3em;}
	#header {position: relative;}
	#header img {margin-top: 3em;}
	#home ul {width: 98%;margin-left: 1%;height: 40vh;border: none;z-index: 1006;margin-top: 30vh;}
	
	.bilder img {width: 100%;height: auto;}
	
	section .rframe h2 {background-size: 100% 100%;}
	section .rframe p {width: 88%;margin-left: 1%;border-radius: 15px;}
	section .rframe img {width: 100%;}
	#referenzen-l .gal .pic {width: 80vw;height: auto;}
	#referenzen-l .gal .pic img {width: 100%;height: auto;padding-top: 0.5%;}
	#mobilnav {display: none;position: fixed;top: 0;left: 0;width: 50vw;height:100vh;background-color: white;z-index: 1007;color: black;overflow: hidden;padding-left: 5%;padding-right: 5%;}
	#mobilnav ul {margin:0;margin-top: 10vh;list-style-type: none;padding: 0;}
	#mobilnav ul li {margin: 1%;padding: 5%;}
	#refs {box-shadow: none;}
	#mobilnav a {color: black;}
	#ctn {height: 1vh;}
	#theman {z-index: 1005;}
	#thetext {display: none;}
	#menu {z-index: 1008;}
	#home #kontaktform {width: 100%;left: 0;z-index: 2007;top: 0; min-height: 80vh;}
	#hmnav ul {margin: 0;padding: 0;margin-left: 10%;}
	#kontakt {}
	#kinhalt {width: 80vw;margin-left: 1%;margin-top:10vh;display: inline-table;}
	.frame {text-align: left;}
	footer {position: fixed;bottom: 0;height: 3em;width: 100%;background-color: white;display: flex;z-index: 1008;align-items: center;justify-content:space-around;}
	footer img {height: 2.5em;border-radius: 100%;}
	#moburkund {display: block;z-index: 1001;}
	#moburkund button {color: red;font-size: 1.5em;}
}