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

@font-face {
  font-family: 'Open Sans Regular';
    src: url('../plug/opensans-regular-webfont.eot');
    src: url('../plug/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../plug/opensans-regular-webfont.woff') format('woff'),
         url('../plug/opensans-regular-webfont.ttf') format('truetype'),
         url('../plug/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Open Sans Light';
    src: url('../plug/opensans-light-webfont.eot');
    src: url('../plug/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../plug/opensans-light-webfont.woff') format('woff'),
         url('../plug/opensans-light-webfont.ttf') format('truetype'),
         url('../plug/opensans-light-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


html {
  font-size:10px;
  line-height:10px;
}

body{
	padding:0;
	background-color:#282b2d;
	color:#FFFFFF;
	font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  width:100%;
  z-index:1; // für devicecheck
}
a{
	color:inherit;
	text-decoration:none;		
}

p {
	font-size:1.8rem; 
	line-height:2.6rem;
	font-weight:normal;
}

h1, h2, h3{ 
	margin:0px; padding:0px 0 0px 0;
	font-size:3.6rem; 
	line-height:4rem;
	font-weight:normal;
}

h2 {
	margin:40px 0px 40px 0px;
}

h3 {
	margin:0px 0px 40px 0px;
}

h4 {
	/* wird für Zitate verwendet */
	font-size:2.4rem; 
	line-height:3.6rem;
	padding:0px;
	font-family: 'Open Sans Light';
	font-style:italic;
}


/************* globals **********/

#wrapPage{ 
	position:absolute;
	width:100%; height:100%;
	left:0px;
	margin-top:90px; 
}

.clearFix { clear:both; }

.biggerNormText { font-size:300%; line-height:140%; }
.normText{ font-size:180%; line-height:140%; }
.medText{ font-size:160%; line-height:120%; }
.smallText{ font-size:140%; line-height:110%; }

#footer{ text-align:center;}

.aLeft { text-align:left; }
.aRight { text-align:right; }
.aCenter { text-align:center; } 

.mTop { margin-top:80px; }
.mBottom { margin-bottom:80px; }

.pTop { padding-top:80px; }
.pBottom { padding-bottom:80px; }

.pVBoth { padding-top:80px; padding-bottom:80px; }
.pVBothSmall { padding-top:40px; padding-bottom:40px; }

.noHMargin { margin-left:0px; margin-right:0px; }

.noSP { display:block; }
.noDesktop{		display:none;	}

.fullsize {
	width:100%;
	height:auto;
	border:0px none;
}

.container {
	  width: 100%;
	 	max-width:1440px;
    padding-left: 5%;
    padding-right: 5%;
}

/****** Farb-Klassen *****/

.bgBlack{ background-color:#000; }
.bgDark { background-color:#282b2d; }
.bgMedDark { background-color:#45494c; }
.bgOrange { background-color:#eb6c0c; }

.txtWhite{ color:#FFF; }
.txtBrown { color:#675b50; }

/*******  header + Menue  ***/
#header{ width:100%; height:70%;	}

#headCenter{
	height:100%;
	background-size:cover;
 	background-position:center center;
	background-repeat: no-repeat;
}


#menu{
	position:fixed;
	z-index:10; 
	width:100%; height:90px;
}

	#logo{
		height:100%;
	 	background-position:right center;
		background-repeat: no-repeat;
		background-image:url(../media/logo.png);
		background-size:65% auto;
		cursor:pointer;
	}

	.logoPos {
		position:absolute;
		right:0px;
		height:90px;
	}

	#menuWrap{
		position:relative;
		right:0px;
		top:7px;
		height:40px;
		cursor:pointer;
		display:none;
	}

	#menuWrap img{ position:relative; top:12px; }
	#navWrap{ 
			margin-top:25px; 
			position:absolute;
			left:0px;
			padding-left:15px;
			}

	
	.nav{
		padding-top:10px; 
		color:#fff;
		padding-right:30px;
		float:left;
	}

	.nav.active {
    background-color: #eb6c0c;
    color: #ffffff;
    float: left;
    font-weight: bold;
    height: 90px;
    margin-right: 30px;
    margin-top: -25px;
    padding: 35px 20px;	}
	
	.navBold {
		font-weight:bold;
	}
/************  Content  *******************/


.bottomElem{
	position:absolute; 
	bottom:0px;
}

.bottomElemRight {
	position:absolute; 
	bottom:0px;right:15px;
	text-align:right;
}


.textBlock p{
	padding-right:25px;
}
	
.logoImg {
	margin-right:5%;
	margin-bottom:25px;
}

.fullBgImg{
	width:100%; height:70%;
	background-size:cover;
 	background-position:center center;
	background-repeat: no-repeat;
}

.bgTop {
 	background-position:top center !important;
}

.bgBottom {
 	background-position:bottom center !important;
}

.ownmap{
	width:100%;height:auto;
}


.mitarbeiter {
	width:20%; height:auto;
	float:left;
}

		.mitarbeiter img {
			width:100%; height:auto;
		}

		.mitarbeiter .infos {
				padding:20px 20px 20px 20px;
				text-align:center;
				
		}

.pdfDoc a{
	padding-left:35px;
  background-image:url(../media/sym-pdf.png);
  background-position:left center;
  background-repeat:no-repeat;
  background-size:contain;
}

.refLink {
	padding:12px 20px;
	background-color:#eb6c0c;
	color:#FFFFFF;
	float:left;
	margin-right:15px;
	margin-top:20px;
	
}

.refWrapper {
	height: calc(100% - 90px);
	min-height: calc(100% - 90px); /* für den IE */
	overflow:visible;
}

.refOuter{
	position:relative;
	width:33.333333%;
	height:33.333333%;
	float:left;
}

.refOuter:hover>a>.refOverview,.refOuter:hover>a>.refTitle{
	opacity:1;
	-webkit-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	cursor:pointer;
	background-color: #eb6c0c;
}

.refOverview{
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center center;
	opacity:0.2;
}

.refTitle{
	position:absolute;
  padding: 25px;
	bottom:0px;
	font-size:2.4rem;
  z-index: 1;
	color:#FFF;
  height:60px;
  text-align:left;
}


.rateImg {
	position:relative;
	top:15px;
	margin-left:25px;
}

.rateImg img {
	height: 2vW;
}

.full{
	width:100%; height:auto;
}




#imgNo {
	position:absolute;
	right:0px;
	color:#FFFFFF;
	font-size:1.4rem;
	width:auto;
	height:auto;
	bottom:0px;
	padding:15px 15px;

}

#infoTextWrapper {
	position:absolute;
	left:0px;
	bottom:0px;
	color:#FFFFFF;
	font-size:1.4rem;
	line-height:1.8rem;
	width:auto;
	height:auto;
	padding:15px 30px 15px 15px;
	max-width:500px;
  display:none;
}

#infoTextClose{
	position:absolute;
	right:5px;margin-top:-10px;
	width:21px;height:21px;
  z-index:10; cursor:pointer;
  background-image:url(../media/close.png);
  background-position:center center;
  background-repeat:no-repeat;
	
}

#infoTextSym {
	position:absolute;
	left:0px;
	bottom:0px;
	color:#FFFFFF;
	font-size:1.4rem;
	line-height:1.8rem;
	width:auto;
	height:40px;
	padding:25px 25px;
	width:40px;
  z-index:10; cursor:pointer;
  background-image:url(../media/infotext.png);
  background-position:center center;
  background-repeat:no-repeat;
}

/****************   IOS SLIDER  **********************/

.sliderWrapper {
	/* required */
	position: relative;
	top:0px; left: 0;
	width:100%;
	height:100%;
	overflow:hidden;
	margin-top:-5px;
}

.slider {
	width:100%;
	height:100%;
}

.slider .slide {
	/* required */
	float: left; 
	overflow: hidden;
	width:100%;
	display:block;
	margin:auto;
	height: 100%;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}	

.slideLeft {
  position:absolute;
  top:45%;left:0;
  width:50px;
  height:46px;
  z-index:10; cursor:pointer;
  background-image:url(../media/pfeil-links.png);
  background-position:center center;
  background-repeat:no-repeat;
}

.slideRight {
  position:absolute;
  top:45%;right:0;
  width:50px;
  height:46px;
  z-index:1; cursor:pointer;
  background-image:url(../media/pfeil-rechts.png);
  background-position:center center;
  background-repeat:no-repeat;
}



/***********************  Media Queries  ****************/


@media(max-width:1024px){
  html, body{
		font-size:8px;
		line-height:11px;
		z-index:2;
	}

	#logo {
	    background-size: 95% auto;
	}

	.bottomElem{
		position:absolute; 
		bottom:0px;
	}
	
	.bottomElemRight {
		position:absolute; 
		bottom:0px;right:0px;
		text-align:right;
	}
	
	.mitarbeiter {
		width:25%; 
	}

		.mitarbeiter .infos {
				padding:10px 10px 10px 10px;
		}

	.noTablet {
		display:none;
	}


}

@media(max-width:850px){
/*	z.B. Tablets im Hochformat*/

  html, body{
		z-index:2;
	}

	.pVBoth { padding-top:40px; padding-bottom:40px; }

	#wrapPage{ 
		margin-top:60px; 
	}

	#header{ height:35%; } 

	.noDesktop{
		display:block;
	}
	
	.noTablet {
		display:none;
	}
	
	.bottomElem{
		position:absolute; 
		bottom:0px;
	}

	#menu, .logoPos{
		height:60px;
		top:0px;
	}
	
	#menuSmall{
		width:30%;
	}
	
	#menuWrap{
		position:relative;
		right:0px;
		top:7px;
		height:40px;
		cursor:pointer;
		display:block;
	}


	#navWrap{ 
			position:fixed;
			padding:0px 0px 0px 25px;
			height:100%; 
			margin-top:20px; 
			width:100%;
			display:none;
			z-index:100;
	}

	.nav{
		position:relative; 
		height:50px; 
		padding-top:20px; 
		padding-left:0px;
		float:none;
		text-align:center;
	}
	
	.nav.active {
	    background-color: #eb6c0c;
	    clear: both;
	    color: #ffffff;
	    float: none;
	    margin-top: 0;
			margin-right:0px;
	    margin-left:-25px;
	    
	}

	.refWrapper {
			height:auto;
			min-height: calc(100% - 50px); /* für den IE */
	}

	.refTitle{
	  padding: 20px;
		font-size:2.4rem;
	  height:55px;
	  min-width:100%;
	  bottom:0px !important;
	}


		.refOuter{
			width:100%;
			height:25%;
		}
	
	.refOuter:hover>a>.refOverview,.refOuter:hover>a>.refTitle{
 	   background-color: transparent;
	}



		.bottomElemRight {
		    position: static;
		    bottom: 0px;
		    text-align: center;
		}
		.bottomElemRight a{
			line-height:300%;
		}

		.mitarbeiter {
			width:33.333333333%; 
		}



}

@media(max-width:640px){
	html,body{
			z-index:3;
	}

	#logo {
	    background-size: 75% auto;
	}

	.noSP { display:none; }


	.col-md-6{ width:100%; padding-left:10px; padding-right:10px; }	

	.col-sm-6 { width: 50%; }
	.col-sm-8 { width: 66.6667%; }
	.col-sm-4 { width: 33.3333%; }

	#wrapPage{ 
		margin-top:50px; 
	}

	
	#header{ height:40%; } 

	#menu, .logoPos{
		height:60px;
		top:0px;
	}
	
	#menuSmall{
		width:30%;
	}

	.bottomElem{
		position:relative; 
	}

	#infoTextSym {
		 background-size: 40% 40%;	
	}

	#footer .col-md-6 {
		width:100%;
	}	
	
	#footer .aRight, #footer .aLeft {
		margin-top:10px;
		text-align:center;
	}
	
	#footer .aRight{
		margin-top:20px;margin-bottom:20px;
	}
	
	.mitarbeiter {
		width:50%; 
	}

}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10-specific styles go here */
	.refWrapper {
			height:calc(100% - 50px) !important;
	}

}