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

@import url(//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic);

html,body{
	margin:20px 0 20px 0;
	padding:0;
	background:#fff;
	font-family: 'Roboto', sans-serif;
	color:#808285;
}
#container {
    position: relative;
	min-height:100px;
	background:#fff;
	margin:0 auto;
	-webkit-box-shadow: -2px 2px 26px 3px rgba(0,0,0,0.27);
	-moz-box-shadow: -2px 2px 26px 3px rgba(0,0,0,0.27);
	box-shadow: -2px 2px 26px 3px rgba(0,0,0,0.27);
	border-style: solid;
	border-width:1px 0 0 0;
	border-color:#ccc;
	border-radius: 7px 7px 7px 7px;
}
#menu{
	position:relative;
	top:0;
    width:100%;
	background:#9b9fa2;
	margin-bottom:10px;
	border-width:4px 0 0 0;
	border-color:#8ebe44;
	border-style:solid;
	border-radius: 7px 7px 0 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9b9fa2+0,747677+100 */
background: #9b9fa2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzliOWZhMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NDc2NzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #9b9fa2 0%, #747677 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9b9fa2), color-stop(100%,#747677)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #9b9fa2 0%,#747677 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #9b9fa2 0%,#747677 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #9b9fa2 0%,#747677 100%); /* IE10+ */
background: linear-gradient(to bottom,  #9b9fa2 0%,#747677 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b9fa2', endColorstr='#747677',GradientType=0 ); /* IE6-8 */

}

#ds-header {
    position: relative;
	min-height:26px;
	background:#fff;
	margin:0 auto;
	margin-top:-35px;
	margin-bottom:20px;}
  @media only screen and (max-width:600px){
	#ds-header {
	margin-top:-30px;
	margin-bottom:5px;}}
	
#ds{
	color:#000;
	font-size:12px;
	text-align:right;
	padding-right:10px;}
   @media only screen and (max-width:600px){
	#ds{
	text-align:center;
	padding-left:10px;}}
#ds a {
	text-decoration:none;
	padding-right:10px;
	color:#58595B;}
  @media only screen and (max-width:600px){
    #ds a {
	  color:#58595B;}}
#ds a:hover {
	color:#999;}
	
	
	
	

#menu ul{
	text-transform:uppercase;
	margin:0;
}
#menu li a,#menu li a:visited{
	display:block;
	color:#fff;
	position:relative;
	display: block;
	text-decoration:none;
	font-size:16px;
}
#footer  a,#footer a:visited{
	color:#fff;
	position:relative;
	text-decoration:none;
	font-size:13px;
}
#menu li a:hover,#menu li.active a,#footer a:hover{
	color:#333;
}
#header,#header img,#content{
	width:100%;
}
.modul>.head{
	position:relative;
}
.modul>.head>img{
	position:relative;
	width:16px;
	margin:2% 2% 0 2%;
}
#facebook{
	float:left;
}
#unternehmen-des-tages{
  text-align:center;
  border:1px solid #eee;
  background:#f6f7f8;}
    @media only screen and (min-width:601px){
      #unternehmen-des-tages{
		margin:5px;
		width:480px;
		height:610px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align:center;}
	  #unternehmen-des-tages h2{
		font-size:25px;}
	  #unternehmen-des-tages a>img{
		width:180px;
		margin:8px auto 0;}
	  #unternehmen-des-tages img{
		margin-top:8px;
		width:340px;}}
	@media only screen and (max-width:600px){
	  #unternehmen-des-tages a>img{
		width:50%;
		margin:2% 25%;}
	  #unternehmen-des-tages img{
		margin-top:2%;
		width:80%;}
	  #unternehmen-des-tages{
		margin:2% 10%;
		width:80%;}
	  #unternehmen-des-tages h2{
		font-size:130%;}}

hr{
	background:#8ebe44;
	border:0;
}
#unternehmen-des-tages a>img{
	border:1px solid #000;
}
h1,h2,h3,p{
	font-weight:900;
	text-transform:uppercase;
}
p{
	font-weight:400;
}
#quartier, #history, #mitglieder,#footer,#kontakt{
	text-align:center;
}
#kontakt{
	margin:0 auto;
	width:62%;
}
#quartier img{
	width:100%;
}
#photos3{
	width:100%;
}
#photos3 .clear{
	margin:0;
}
#photo1{
	width:66.6%;
	margin:1% 1% 1% 0;
	float:left;
}
#photo2,#photo3{
	width:32.4%;
	margin-top:1%;
	float:left;
}
#button a,#button a:visited{
	display:block;
	color:#fff;
	position:relative;
	display: block;
	background:#e51f6a;
	text-decoration:none;
	font-size:14px;
	font-weight:600;
	text-transform:uppercase;
}
#button a:hover{
	background:#8ebe44;
}
#mitglieder .mini p{
	color:#fff;
}
.cards{
	margin:auto;
}
#mitglieder .mini{
	position:relative;
	border:1px solid #e51f6a;
	overflow:hidden;
	background:#fff;
	width: 15%;
	opacity: 0; /* hide card while loading */
	transform-property: opacity, transform;
	transform-origin: 50%;
}
#mitglieder .mini img{
	position:relative;
	display:block;
	width:100%;
	z-index:3;
	margin:0;
	padding:0;
}

#mitglieder .mini .info{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#FFF;
	z-index:2;
}
#mitglieder .mini img{
/*
	position:absolute;
	top:0;
	left:0;
*/
}

#mitglieder .mini:hover{
	border:1px solid #e51f6a;
}
#mitglieder .mini:hover img{
	z-index:1;
}
#mitglieder .mini:hover .info{
	background:rgba(128,130,133,0.9);
	z-index:2;
}
#kontakt p{
	text-align:center;
	text-transform:none;
}
#kontakt a{
	margin:5% auto;
}
#history-text{
	margin:20px auto;
	text-align:justify;
}
#history-text h3{
	text-align:center;
}
#history-text p{
	text-transform:none;
	font-weight:400;
	color:#808285;
}
#history-text .image{
	text-align:center;
}
#history-text .image .note,#history-text .image .note2{
	color:#8ebe44;	
	text-transform:none;
	font-weight:400;
	margin:0;
	padding:0;
}
#history-text .image .note2{
	color:#808285;
}
#bloc{
	background:#333;
}
.modul .head{
	display:block;
	width:100%;
	background:#dd4c79;
	color:#fff;
	font-size:19px;
	font-weight:400;
	line-height:40px;
}
.grey{
	width:100%;
	padding:10px 0;
	background:#f0f0f0;
}
.grey1{
	background:none;
 }
.grey p{
	margin:0 40px 0 40px;
	font-size:12px;
	text-transform:none;
	font-weight:400;
}
.grey p:first-child{
	text-transform:uppercase;
}
.grey p.green{
	color:#8ebe44;
}
.grey p.green a{
	color:#8ebe44;
	text-decoration:none;
}
.grey p.green a:hover{
	color:#e51f6a;
}
.grey.big{
	position:relative;
	text-align:center;
}
#kontakt{
	margin:0 auto;
	width:62%;
}
#kontakt img{
	width:70%;
	margin:4% auto;
	border: 1px solid #bbb;
}
#kontakt form{
	margin:4% 0;
}
#kontakt input[type="text"],#kontakt textarea{
	background:#f6f7f8;
	max-width:93%;
	min-width:93%;
	padding:2% 3%;
	margin:2% 0;
	border:1px solid #808285;
	color:#888a8d;
	font-family:'Roboto', sans-serif;
	font-size:15px;
}
#kontakt textarea{
	height:250px;
}
#kontakt  input[type="submit"]{
	border:none;
	color:#fff;
	background:#e51f6a;
	font-weight:900;
	padding:9px 10%;
	margin-top:3%;
	
}
#kontakt  input[type="submit"]:hover{
	background:#8ebe44;
}

#footer{
	width:100%;
	height:25px;
	padding-top:10px;
	margin-top:10px;
	background:#9b9fa2;
	color:#fff;
	font-size:13px;
	border-radius: 0px 0px 7px 7px;
}
.clear{
	clear:both;
}
#history img{
	max-width:100%;
	margin:10px auto;
}

@media only screen and (min-width:601px){
	#container {
		width:1000px;
	}
	#menu{
		height:50px;
	}
	#menu ul{
		padding-left:50px;
	}
	#menu li{
		padding:17px 0 0 50px;
		display: inline-block;
	}
	#menu li:first-child{
		padding-right:70px;
	}
	#header{
		max-height:400px;	
		margin:10px 0;
	}
	#content{
		min-height:100px;
	}
	#facebook{
		margin:5px;
		width:480px;
		height:610px;
	}

	}
	h1,h2,h3,p{
		font-size:37px;
		margin:35px 0 0 0;
	}

	h3{
		font-size:19px;
		font-weight:400;
		margin-top:5px;
	}
	p{
		font-size:15px;
		margin:10px 0;
	}
	hr{
		width:150px;
		height:3px;
		margin:8px auto;
	}


	#kontakt img{
		width:200px;
		margin:4%;
	}
	#content>img.logotip{
		width:100%;
		margin:30px 0;
	}
	#bloc{
		margin:50px 0;
		width:1000px;
		height:374px;
	}
	#quartier h3{
		font-size:17px;
		margin-top:15px;
	}
	#quartier img{
		margin:20px 0;
	}
	#button a,#button a:visited{
		width:180px;
		height:28px;
		margin:10px auto;
		padding-top:10px;
	}
	#content>iframe{
		margin-top:15px;
	}
	#history img{
		margin:10px auto;
	}
/*
	#mitglieder .mini{
		margin:5px 2px 0 5px;
		width:133px;
		height:133px;
	}
*/
	#mitglieder .mini p{
		margin:30px 10px 0px 10px;
		font-size:10px;
	}
	#mitglieder .mini hr{
		width:70px;
	}
	#mitglieder .mini.last{
		margin-right:0;
	}
	#mitglieder .mini .info{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:rgba(128,130,133,0.9);
		z-index:2;
	}
	#history-text{
		width:620px;
	}
	#history-text p{
		font-size:15px;
		margin-top:20px;
	}
	#history-text p.p17{
		font-size:17px;
	}
	#history-text .image img{
		width:100%;
		margin: 1% 0% 1% 0%;
	}
	#history-text .image .note,#history-text .image .note2{
		font-size:15px;
	}
	#history-text .image .note2{
		font-size:11px;
	}
	.modul{
		width:470px;
		min-height:100px;
	}
	.modul a{
		text-decoration:none;
		color:#808285;
	}
	.modul a:hover{
		text-decoration:none;
		color:#dd4c79;
	}
	.modul h2 .fa{
		padding: 0 15px;
	}

#soc{
	position:absolute;
	top:5px;
	right:5px;
	width:100px;
	height:60px;
}
#soc a,#soc a:hover,#soc a:visited{
	color:#777;
	font-size:300%;
}
.grey.big p{
	font-size:17px;
}
.modul.left{
	float:left;
}
.modul.right{
	float:right;
}



	.clear{
		margin-bottom:100px;
	}
	.clear.footer{
		margin-bottom:50px;
	}
}
@media only screen and (max-width:600px){
	#container {
		width:100%;
		min-width:200px;
	}
	#menu ul{
		padding:2%;
	}
	#menu li{
		margin:2%;
		width:96%;
		text-align:center;
		display:block;
	}
	#menu li a,#menu li a:visited{
	font-size:120%;
	}
	#facebook{
		height:610px;
	}
	#facebook{
		margin:2% 10%;
		width:80%;
	}
	hr{
		width:80%;
		height:3px;
		margin:2% 10%;
	}
	
	
	h1,h2,h3,p{
		font-size:140%;
		margin:8% 5% 0 5%;
	}
	.head
	{
		margin:0% 5% 0 0%;
	}

	h3{
		font-size:100%;
		margin-top:2%;
		font-weight:400;
	}
	p{
		font-size:100%;
		margin:3% 0;
	}
	#quartier h3{
		margin-top:3%;
	}
	#quartier img{
		margin:4% 0;
	}
	#button a,#button a:visited{
		width:180px;
		height:28px;
		margin:10px auto;
		padding-top:10px;
	}
	#mitglieder .mini p{
		font-size:60%;
	}
	#mitglieder .mini { 
		min-width: 100px;
	}	
/*
	#mitglieder .mini{
		position:relative;
		width:32%;
		min-height:32%;
		height:32%;
		max-height:32%;
		margin:0.5% 0.3%;
	}
*/
	#mitglieder .mini .info{
		width:100%;
		min-height:100%;
		max-height:100%;
	}
	#mitglieder .mini>img{
		position:relative;
		width:100%;
	}
	#history-text{
		width:80%;
	}
	#history-text p{
		font-size:100%;
		margin-top:3%;
	}
	#history-text p.p17{
		font-size:105%;
	}
	#history-text .image img{
		width:100%;
		margin:6% 0 2% 0;
	}
	#history-text .image .note,#history-text .image .note2{
		font-size:100%;
	}
	#history-text .image .note2{
		font-size:90%;
	}
	#bloc{
		display:block;
		margin:10% 0;
		width:100%;
		min-height:74px;
		max-height:37%;
	}
	.modul{
		width:100%;
	}
	.modul a{
		text-decoration:none;
		color:#808285;
	}
	.modul a:hover{
		text-decoration:none;
		color:#dd4c79;
	}
	.modul h2 .fa{
		padding: 0 4%;
	}
	.clear{
		margin-bottom:10%;
	}
	.clear.footer{
		margin-bottom:5%;
	}
	#footer{
		min-height:25px;
		padding-bottom:10px;
	}
}

#content .mce_area{
    height:500px;
	font-weight:400;
	text-align:center;
	color:#808285;
}