/*General Style*/
body {
	background:#fecb36;
	font-size:100%;
	margin:0em;
	padding:0em;
}

h1 {
	font-size:2.5em;
	line-height:3.8em;
	font-family:Verdana;
	font-weight:100;
	color:#18181A;
	margin:0em;
}

h2 {
	font-size:1.563em;
	line-height:2em;
	font-family:Verdana;
	font-weight:100;
	color:#18181A;
	margin:0em;
	padding:1.5em;
	text-align:justify;
}

p {
	font-size:1.5em;
	line-height:1.8em;
	font-family:Verdana;
	font-weight:10;
	color:#18181A;
	margin:0em;
	padding:1.5em;
	text-align:justify;
}

ul {
	margin:0px;
	padding:0px;
}

li {
	list-style:square;
	font-family:Verdana;
	font-weight:100;
	color:blue;
	line-height:1.25em;
	margin:0em;
	padding:1.25em;
	margin:0.313em 0em 0.313em 0em;
}

img {
	width:100%;
	height:auto;
	max-width:100%;
	padding:0em;
	margin:0em;
}

a {
	text-decoration:none;
}

/*On Top Bar */
#menubar {
	display:block;
	background:rgb(24, 24, 26);
}

#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}
#menubar ul li {
	display:inline;
}

#menubar ul li a.menubutton {
	display:none;
}

/*Header*/
header {
	display:block;
	background:#fecb36;
	text-align:center;
}
/*icons*/

#icon1 {
	position:absolute;
	display:block;
	width:8%;
	margin:-14em 0em -10em 27em;
	padding:0em;
}

#icon1 ul {
	display:block;
	width:2em;
	
}
#icon1 ul li {
	display:inline;
	z-index:1;
}

#icon2 {
	position:absolute;
	display:block;
	width:8%;
	margin:-14em 0em -10em 54em;
	padding:0em;
}

#icon2 ul {
	display:block;
	width:2em;
	
}
#icon2 ul li {
	display:inline;
	z-index:1;
}

#icon3 {
	position:absolute;
	display:block;
	width:8%;
	margin:-14em 0em -10em 81em;
	padding:0em;
}

#icon3 ul {
	display:block;
	width:2em;
	
}
#icon3 ul li {
	display:inline;
	z-index:1;
}
/*navigation*/
nav {
	display:block;
	height:3em;
	background:rgba(24, 24, 26, 0.5);
	text-align:right;
	position:relative;
	margin:0em 0em -3em 0em;
}

nav ul {
	display:block;
}

nav ul li {
	display:inline;
	margin:0em 2.188em 0em 0.188em;
}

nav ul li a {
	color:#fecb36;
	font-size:1.125em;
	line-height:2.5em;
	padding:0.563em 0.938em 0.375em 0.983em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}

nav ul li a:hover {
	background:#99965c;
	border-bottom:0.188em #fecb36;
}

nav ul li a:active {
	border-bottom:0.188em #fecb36;
}

/* Content Area */

#main {
	display:block;
	width:96%;
	max-width:980px;
	margin:1.25em auto;
	padding:0em;
}

#main article {
	display:inline-block;
	width:100%;
	background:#fecb36;
	vertical-align:top;
	margin:0em;
	padding:3em 0em 0em 0em;
	text-align:center;
}

#blackbox {
	display:block;
	background:#fecb36;
	text-align:center;
}

footer{
	position:relative;
	right:1em;
	text-align:left;
}

footer ul {
	text-align:right;
	margin:-13em 0em -10em 0em;
}

footer ul li {
	list-style:none;
	font-size:0.6;
	line-height:1.2em;
	color:#fecb36;
	padding:0em 0.625em 0em 0.625em;
	z-index:1;
}

footer ul li a {
	color:red;
}

#urkunde {
	width:45%;
	max-width:45%;
	margin:2.935em 2.935em 0em 0em;
}

#salon {
	width:40%;
	max-width:40%;
	margin:2.935em 2.935em 0em 0em;
}

/*Mobile Style*/

@media screen and (max-width:1450px){
#icon1 {
	width:5%;
	margin:-7em 0em -5em 9em;
}

#icon2 {
	width:5%;
	margin:-7em 0em -10em 18em;
}

#icon3 {
	width:5%;
	margin:-7em 0em -10em 27em;
}
footer{
	top:2em;
}	
}
@media screen and (max-width:1100px){
	body {
	font-size:70%;
	}
	
	#menubar ul li a.menubutton {
		display:block;
	}
	nav {
		display:none;
		height: auto;
		background:rgb(24, 24, 26);
		text-align:center;
	}
	nav ul li {
	display: block;
	margin: 0.3em 0em 1.5em 0em;
	}
	
	#icon1 {
	width:5%;
	margin:-7em 0em -5em 4.5em;
}

	#icon2 {
	width:5%;
	margin:-7em 0em -5em 14em;
}

	#icon3 {
	width:5%;
	margin:-7em 0em -5em 23.3em;
}
	
}

@media screen and (max-width:700px){
	footer {
		display:none;
	}
}


@media screen and (max-width:600px){
#icon1 {
	width:13%;
	margin:2em 0em -5em 6em;
}
	#icon2 {
	width:13%;
	margin:2em 0em -5em 17em;
}
#icon3 {
	width:13%;
	margin:2em 0em -5em 28em;
}
	
#main{
	position:relative;
	top:5em;
	z-index:-1;
	margin:0em 0em 3em 0em;
}

#main article {

	padding:3em 0em 3em 0em;
	
}

}

@media screen and (max-width:400px){
	#icon1 {
	width:20%;
	margin:2em 0em -5em 4em;
}

#icon2 {
	width:20%;
	margin:2em 0em -5em 11em;
}

#icon3 {
	width:20%;
	margin:2em 0em -5em 18em;
}

body {
	font-size:65%;
	}

#main{
	top:7em;
}	
}