@charset "utf-8";
/* CSS Document */

@font-face {
	font-family:'Gill';
	src:url(../fonts/GillSansStd-Light.otf);
}


* {
	margin:0;
	padding:0;
}

html {
	height:100%;
}

body {
	height:100%;
	min-height:100%;
	color:#ece8e6;	
	font-family:'Gill', Verdana, Arial, Helvetica, sans-serif;
	font-size:100%;
	background:url(../img/background.jpg);
	background-position:center;
	background-color:#615e57;
}

ul, p, form {
	font-family: Arial, Verdana, Helvetica, sans-serif;
}

#container {
	margin:0 auto;
	max-width:1050px;
	background:none;
	margin-top:3em;
	padding-bottom:3em;
	overflow:hidden;
}

@media only screen and (min-width: 740px) and (max-width: 1200px) {
	#container {
		width:705px;
	}
	
	#img10 {
		display:none;	
	}
}


@media only screen and (max-width: 739px) {
	#container {
		margin-top:2em;
		width:480px;
	}
	
	
}

a {
	text-decoration:none;
	display:block;
	color:inherit;
}

article a {
	display:inline;
}

nav {
	zoom: 1;
	margin-top:2em;
	margin-bottom:2em;

}

nav ul {
	overflow:hidden;
	list-style:none;
	margin:0 auto;
	padding:0;
	border:0px solid red;
	display:table;
	background:#423c37;
		font-family:'Gill', Verdana, Arial, Helvetica, sans-serif;

}

nav li {
	float:left;
	text-align:center;
}



nav li a {
	text-transform:uppercase;
	text-decoration:none;
	color:#efedea;
	font-size:0.8125em;
	line-height:0.8em;
	letter-spacing:0.025em;
	display:block;
	padding:0.85em 1.25em;
	transition: background-color 0.2s;
}



@media only screen and (min-width: 740px) and (max-width: 1200px) {
	nav li a {
		font-size:1em;
		line-height:0.8em;
		padding:0.85em 1.25em;
	}
}


@media only screen and (max-width: 739px) {
	
	nav ul {
		background:none;
		display:block;
	}
	nav li {
		float:none;
		display:block;
		margin:0;
	}
}


nav li a:hover,
nav li a.aktiv {
	color:#efedea;
	background-color:#8a3260;
}

h1, h2 {
	border:0px solid red;
	font-weight:lighter;
	font-size:2.75em;
	text-transform:uppercase;
	text-align:center;
	margin:0 auto;
	color:#e6ded4;
}

h1 {
	letter-spacing:0.2em;
	color:#8a3260;
}

h2 {
	font-size:1.1em;
	letter-spacing:0.1em;
	width:auto;
}


@media only screen and (max-width: 739px) {
	h1 {
		font-size:2.5em;
	}
	
	h2 {
		font-size:0.9em;
	}

}

#index {
	text-align:center;
}

#index img {
	width:200px;
	height:200px;
}


#index .img {
	width:200px;
	height:200px;
	background:black;
	float:left;
	margin:5px;
	box-shadow:0 0 3px #333;
}


#leistungen,
#ueber,
#kontakt {
	width:50em;
	margin:0 auto 0 auto;
	background:#efedea;
	padding:2em;
	overflow:hidden;
	border:0.35em solid #8a3260;
}


@media only screen and (min-width: 740px) and (max-width: 1200px) {
	#leistungen,
	#ueber,
	#kontakt {
		width:auto;
	}
	
#index img {
	width:225px;
	height:225px;
}


#index .img {
	width:225px;
	height:225px;
}
	
}

@media only screen and (max-width: 739px) {
	
#index img {
	width:225px;
	height:225px;
}


#index .img {
	width:225px;
	height:225px;
}	
	#leistungen,
	#ueber,
	#kontakt {
		width:auto;
	}
}

#leistungen h3,
#ueber h3,
#kontakt h3 {
	font-size:1.75em;
	font-weight:lighter;
	text-transform:uppercase;
	margin:0;
	padding:0;
	line-height:1em;
	float:left;
	margin-bottom:0.5em;
	color:#8a3260;
	background:none;
}


#leistungen nav {
	background:none;
	float:right;
	margin:0;
}

#leistungen nav ul {
	margin:0 0 0 auto;
	padding:0;
	border:0px solid red;
	background:none;

}

#leistungen nav li {
	margin:0;
	display:table;
}

#leistungen nav li a {
	color:#423c37;
	transition: color 0.2s;
	background:none;
	font-size:1.1em;
	display:table-cell;
	vertical-align:bottom;
	padding:0;
	padding-left:1em;
	line-height:1.4em;
}

@media only screen and (max-width: 739px) {

	#leistungen nav li {
		float:left;
	}
	
	#leistungen nav li a {
		font-size:0.8em;
		height:2.2em;

	}
}


#leistungen nav li a:hover {
	color:#b11265;
}

#leistungen #referenzen {
	display:table;
	width:34.8em;
	float:right;
	background:none;
}

#leistungen #referenzen .img {
	width:10.875em;
	height:10.875em;
	margin:5px;
	background:white;
	float:left;
	vertical-align: bottom;
	position:relative;
	overflow:hidden;
	box-shadow:0 0 2px #999;
}

@media only screen and (max-width: 739px) {
	#leistungen #referenzen .img {
			width:11.875em;
			height:11.875em;
	}
	#leistungen #referenzen img {
		width:100%;
		height:100%;
	}
}


#leistungen #referenzen .img p {
	background:url(../img/detail.png) right center no-repeat;
	background-color:rgba(53,49,44,0.8);
	margin:0;
	position:absolute;
	bottom:0;
	width:94.5%;
	padding:2% 3%;
	font-size:0.8em;
}

@media only screen and (min-width: 740px) and (max-width: 1200px) {

	#leistungen #referenzen img {
		width:100%;
		height:100%;
	}

	#leistungen #referenzen {
		width:23.5em;
	}

}

#leistungen #referenzen .img a {
	display:block;
	color:#FFF;
}

#leistungen .invisible {
	display:none;
}


article {
	clear:both;
	background:url(../img/article_line.png) left top repeat-x;
	padding-top:1.5em;
	font-size:0.875em;
	overflow:hidden;
	color:#514c46;

}


#ueber p {
	width:auto;
	float:none;
	margin-top:0;
}

#ueber img {
	overflow:hidden;
	float:right;
	position:relative;
	margin-left:2em;
	margin-bottom:2em;
	line-height:0;
	margin:2px;
	margin-left:2em;
	box-shadow:0 0 2px #333;
}

@media only screen and (max-width: 739px) {

	#ueber img {
		width:40%;
		height:40%;
		margin-bottom:1em;
	}
}


article ul {
	line-height:1.5em;
	width:18em;
	float:left;
	margin:0;
	background:none;
}



#kontakt article p {
	float:none;	
	margin-right:0;
	margin-left:0;
	width:auto;

}

#kontakt article aside  {
	float:right;
	background:none;
	margin-right:1em;
}



#kontakt #partner {
	padding-bottom:0.5em;
}



#kontakt article aside p span  {
	display:inline-block;
	width:4.5em;
}

#kontakt article aside a  {
	display:inline;
}

#kontakt article a:hover  {
	border-bottom:1px dotted #514c46;
}


#kontakt form {
	background:none;
	width:33em;
	float:left;
	margin-bottom:1em;
}

@media only screen and (max-width: 1200px) {
	#kontakt form {
		width:27em;
	}
}

#kontakt form label  {
	display:block;
	margin-bottom:0.5em;
}

#kontakt form input,
#kontakt form textarea  {
	width:96%;
	padding:1% 2%;
	border:0;
	font-size:0.9em;
	margin-bottom:1em;
	background-color:#FFF;

}

#kontakt form textarea  {
	height:6em;

}


#kontakt form #submit {
	width:100%;
	text-transform:uppercase;
	background:#48433e;
	color:#CCC;
	font-family:'Gill', Arial, Helvetica, sans-serif;
	border-top:1px solid #857e75;
	border-left:1px solid #857e75;
}

#kontakt form #submit:hover {
	color:#FFF;
}

#kontakt #disclaimer {
	font-size:0.8em;
	color:#9f9890;
}

#kontakt #partner  {
	margin-bottom:2em;
}

#kontakt #partner h3 {
	float:none;
}


#kontakt #partner p,
#kontakt #disclaimer p {
	float:left;
	width:48%;
	margin-right:2%;
	text-align:justify;
	margin-bottom:0;
}

@media only screen and (max-width: 739px) {
	
	article ul {
		width:auto;
		float:none;
		margin:0;
		padding:1em;
	}
	
	#leistungen #referenzen {
		float:none;
	}

	#leistungen #referenzen .img{
		width:13.5em;
		height:13.5em;
	}

	

	#kontakt form {
		width:auto;
		float:none;
	}

	#kontakt article aside  {
		float:none;
		background:url(../img/article_line.png) left top repeat-x;
		padding-top:1.5em;
		margin-right:0;
	}

	#kontakt #partner p,
	#kontakt #disclaimer p {
		float:none;
		width:auto;
		margin-right:0;
	}


}



@media only screen and (min-width: 740px) and (max-width: 1200px) {
	
article ul {
	width:17em;
}

#kontakt #partner p,
#kontakt #disclaimer p {
	float:none;
	width:auto;
}
	
	
}