/*|||||||||||||||||||||||||||||||||||||||||||  STARTPAGE  ||||||||||||||||||||||||||||||||||||||||||*/

/*/////////////////////////////////////////  start slider  /////////////////////////////////////////*/

section#start {
	position: relative;
  overflow: hidden;
  margin: 0%;
}

section#start .startSlider {
	height: 100vh;
}

section#start .startSlider .item {
	height: 100vh;
}

section#start .startSlider .item img,
section#start .startSlider .item video,
section#start .slick-slider .slick-track, 
section#start .slick-slider .slick-list {
	width: 100%;
}

section#start .startSliderNav {
	position: absolute !important;
	left: 0% !important;
  bottom: 0px !important;
	width: 100% !important;
	padding: 40px !important;
}

section#start .startSliderNav .slick-list {
	float: left !important;
	width: 100% !important;
	padding: 0px !important;
}

section#start .startSliderNav .slick-list .slick-track {
	display: flex !important;
	flex-flow: row wrap !important;
	justify-content: center !important;
	float: left !important;
	width: 100% !important;
	transform: none !important;
}

section#start .startSliderNav .slick-list .slick-track .item {
	float: left !important;
	width: 60px !important;
	height: 60px !important;
	background-image: url('../images/layout/mobau_square.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px !important;
  color: transparent;
	font-size: 0 !important;
  line-height: 0 !important;
	cursor: pointer !important;
	filter: opacity(0.5) !important;
	transition: all ease-in-out 0.3s !important;
}

section#start .startSliderNav .slick-list .slick-track .item.slick-current,
section#start .startSliderNav .slick-list .slick-track .item:hover {
  background-size: 40px !important;
	filter: opacity(1) !important;
}

/*//////////////////////////////////////////  locations  ///////////////////////////////////////////*/

#locations {
	margin: auto;
	background-image: url('../images/layout/karte_standorte.svg'); 
	background-repeat: no-repeat;
	background-position: calc(50% - 105px) 0;
  background-size: 1572px;
}

#locations p { 
	font-size: 18px; 
}

#locations.fade { 
	transform: translate(20%,0); 
	/*opacity: 0;*/
	transition: all ease-in-out 0.2s;
}

#locations.fade:nth-of-type(2n+1) { 
	transform: translate(-20%,0);
}

#locations.fade.active	{ 
	transform: translate(0); 
	opacity: 1; 
	transition: all ease-in-out 0.3s;
}

#locationsMap {
	position: relative;
}

#locationsMap div { 
	position: absolute; 
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%; 
}

#locationsMap div a { 
	position: absolute;
	transition: all ease-in-out 0.2s; 
	opacity: 0;
	animation: pin-fall 0.3s linear;
}

#locationsMap div a.active { 
	opacity: 1; 
	animation: pin-drop 0.5s linear;
}	

#locationsMap div a:hover img { 
	transform:scale(1.2) translateY(-6%); 
	transition: all ease-in-out 0.2s; 
}

#locationsMap div a img { 
	height: 60px; 
	transition: all ease-in-out 0.2s;
}

#locationsMap div a#bz_halle { 
	top: 297px;
  left: 161px;
	z-index: 5; 
}

#locationsMap div a#bz_halle img	{ 
	height: 80px; 
}

#locationsMap div a#nl_leipzig { 
	top: 384px;
  left: 226px;
}

#locationsMap div a#nl_eisleben { 
	top: 343px;
  left: 61px;
}

#locationsMap div a#nl_calbe { 
	top: 168px;
  left: 113px;
}

#locationsMap div a#nl_online { 
	top: 10%;
  right: 10%;
  width: fit-content;
}

#locationsMap div span { 
 position: absolute;  
 width: 380px; 
 top: 40px; 
 margin: 0; 
 padding: 15px; 
 color: #000;
 background: #fff;
 opacity: 0; 
 transition: all ease-in-out 0.3s; 
 box-shadow: 0 0 10px rgba(0,0,0,0.1);
 visibility: hidden;
 z-index: 200;
}

#locationsMap div a#bz_halle:hover ~	#bz_halle_info,  
#locationsMap div a#nl_leipzig:hover ~	#nl_leipzig_info,  
#locationsMap div a#nl_eisleben:hover ~ #nl_eisleben_info, 
#locationsMap div a#nl_calbe:hover ~	#nl_calbe_info { 
	top: 0; 
	opacity: 1; 
	visibility: visible;
	transition: all ease-in-out 0.3s;
}

#bz_halle_info,
#nl_calbe_info {
	left: -50%;
}

#nl_eisleben_info,
#nl_leipzig_info {
	left: 30%;
}

#locations article { 
	background: url('../images/layout/bubble.svg') no-repeat;  
	margin-top: 50px;
	padding: 10px 30px 75px 40px; 
	background-size: 100%; 
	transition: all ease-in-out 0.3s; 
	color: #fff;
}

#locations article.active { 
	transform: translate(0); 
	opacity: 1; 
	transition: all ease-in-out 0.5s;
}

#locations article p { 
	font-size: 18px; 
}

#locations .heading span {
padding: 6px 12px;
}    

/*////////////////////////////////////////////  topics  ////////////////////////////////////////////*/

#topics {
	position: relative;
	margin-top: 0;
	background: linear-gradient(60deg,#489699,#5fa799 25%,#5fa799 75%,#76b799 100%);
	color: #fff;
}

#topics h2, #topics .h2 {
  color: #0f1b44;
}

#topics h2 b, #topics .h2 b {
	display: block;
  color: #fff;
}

#topics div.flex a.btn {
	margin: auto;
}
	
#tiles {
	position: relative;
	background-image: url('../images/layout/flagge_hintergrund.webp');
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom: 70px;
}

.tiles {
	height: 590px;
}

/*////////////////////////////////////////////////// parallax ////////////////////////////////////////////////*/

section#parallax {
	position: relative;
	overflow-x: hidden;
	margin: 0;
	padding: 100px 0 200px;
  -webkit-background-size: 1060px,cover;
  background-image: url('../images/layout/tresen.webp');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat,no-repeat;
  color: #fff;
}

#parallax img#staticGraphic {
	position: absolute;
	right: 0;
	bottom: -2px;
	height: 95%;
	pointer-events: none;
}

#parallax .content .h2,
#parallax .content .h2 b {
	color: #fff;
}

#parallax .content p {
	font-size: 26px;
	line-height: 1.2;
}

#parallax .content .btn {
	color: #fff;
	border: 2px solid #fff;
}

#parallax .content .btn:hover {
	color: #fff;
	border: 2px solid #0f1b44;
}

/*///////////////////////////////////////////////// RESPONSIVE ///////////////////////////////////////////////*/
@media only screen and (max-width: 1279px) {
	/* LOCATIONS ---------------------------*/	
		#locations {
			overflow: hidden;
			width: 100%;
			background-size: 1584px;
	    background-position: calc(54% + 315px) -70px;
		}
		
		#locations #locationsMap	{ 
			display: block; 
			width: 99%; 
			height: 435px;
		}
			
	 	#locationsMap div {
	 		 top:0; 
	 		 left: 0; 
	 	}
		
		#locations .cols article { 
			background: #159a34;
	    padding: 5px 25px;
	    line-height: 1.8em;
		}
		 
		#locationsMap div a#bz_halle { top: 230px; left: 110px; }
		#locationsMap div a#nl_leipzig { top: 322px; left: 185px; }
		#locationsMap div a#nl_eisleben { top: 275px; left: 0; }
		#locationsMap div a#nl_calbe { top: 85px; left: 55px; }
		#locationsMap div span { display: none; }	
	
	
		/* PARALLAX ----------------------------*/	
		#parallax img#staticGraphic {
		  bottom: 0;
		  width: 95%;
		  height: auto;
		}
		
	section#start .startSlider,
	section#start .startSlider .item {
  	height: auto;
	}

	#start .startSliderNav {
		display: none;
	}
}