/* ===================================
1. General
==================================== */
@import url('font.css');

body {
	font-family: 'ClanPro-NarrBook';
	font-size:18px;
	font-weight:normal;
	color:#00305d;
	background:#fff;
	line-height:28px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

a, a:focus, a:hover {
	outline:0;
	text-decoration:none;
}

.text-red{
	color: red;
}

img{
	max-width:100%;
	height:auto;
}

.row{
	margin:0;
}

.content{
	max-width:1280px;
	margin:0 auto;
	padding: 15px 25px 0;
}

p{
	margin: 0;
}

p + p {
	margin-top: 25px;
}

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6, ul + h2, ul + h3 {
	margin-top: 15px;
}

hr{
	max-width: 1280px; margin: 30px auto; border-color: rgba(0,0,0,0.3);
}

.videoTeaser{
	margin:50px 0 0;
	max-width: 100%;
	height: auto; 
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
	overflow: hidden;
	margin:50px 0 0;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#wrapper{max-width:100%; margin:0 auto;}

header{max-width:1280px; margin:0 auto; padding-bottom: 30px;}
header h1{text-align: right; margin: 0; padding: 10px 0 0;}
header h1 img{max-width: 260px;}

.btn-menu{position: fixed; left:15px; top: 22px; display: none; z-index: 10; padding: 8px; background: #00305d;}
.bars,
.bars:before, 
.bars:after {position: relative; width: 28px; height: 3px; margin: 0 auto; background: #d40075; border-radius: 2px; transition: top .2s .2s, transform .2s; transform: rotate(0deg); display: inline-block; top: -5px;}
.bars:before,
.bars:after {content: ""; display: block; position: absolute;}
.bars:before {top: -10px;}
.bars:after {top: 10px;}

.active .bars:before,
.active .bars:after {transition: top .2s, transform .2s .2s; top: 0;}
.active .bars {background: transparent;}
.active .bars:before {transform: rotate(45deg);}
.active .bars:after {transform: rotate(-45deg);}

#overlay{width: 100%; height: 100vh; background: rgba(0,0,0,0.75); position: absolute; z-index: 6; display: none;}
.active #overlay{display: block;}

/* Slider */
#slide{position: relative;}
#slide .carousel-indicators .active{background-color: #d40075;}
#slide #main-slogan{position: absolute; top: 25px; left: 50px; background: rgba(0,48,93,0.85); padding: 25px; min-height: 250px; z-index: 9; font-family: 'ClanPro-NarrNews';}
#slide #main-slogan::after{content: ""; width: 41px; height: 250px; background: url("../images/bg_slogan_slide.png") no-repeat 0 0; display: block; position: absolute; top: 0; right: -41px;}
#slide #main-slogan h2{color: #fff; text-transform: uppercase; font-size: 25px; line-height: 35px; margin: 0; padding: 0 25px 15px 0; letter-spacing: 1px; font-weight: 100;}
#slide #main-slogan h2::before{content: ""; display: block; width: 100px; height: 3px; background:#d40075; margin: 0 0 15px;}
#slide #main-slogan p{text-transform: uppercase; color: #009fe3; position: absolute; left: 25px; bottom: 20px; font-size: 16px;}
#intro{margin: 50px 0;}
#intro h2, #intro h3{color: rgba(0,0,0,0.3);}
#intro h2{font-size: 44px; padding: 0 0 30px;}
#intro h3{font-size: 32px; padding: 30px 0;}

/* Navigation */
.height-nav{width: 100%; height: 0;}
#navigation{background: rgba(0,0,0,0.2); border: 1px solid #bbb; margin-bottom: 50px;}
#navigation.stick{position: fixed; top: 0; left: 0; width: 100%; background: #bbb; z-index: 9; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);}
#navigation nav{max-width: 1280px; margin: 0 auto;}
#navigation nav ul{list-style: none; padding: 0; margin: 0; display: flex;}
#navigation nav ul li{flex: 1; text-align: center; position: relative;}
#navigation nav ul li::before{content: ""; width: 1px; height: 24px; background: rgba(255,255,255,0.8); position: absolute; left: 0; top: 50%; margin-top: -12px;}
#navigation nav ul li:first-child::before{display: none;}
#navigation nav ul li a{padding:14px 10px 10px; color: #fff; display: block; text-transform: uppercase; font-size: 20px;}
#navigation nav ul li a:hover{color: #00305d;}

/* Inhlalt */
.inhalt h2{font-family: 'ClanPro-NarrNews'; text-transform: uppercase; font-size: 22px; margin-bottom: 40px; letter-spacing: 1px;}
.inhalt h2::after{content: ""; display: block; width: 100px; height: 3px; background:#d40075; margin-top: 3px;}
.inhalt h4{font-size: 20px;	margin: 0;	padding: 40px 0 10px; color: #d40075;} 

/* Gewinnspiel Logo */
.logoGewinnspiel{position: absolute; top: 10px; left: 0; max-width: 350px;}

/* Zeitungen */
#zeitungen.PaddingTop70{padding-top: 70px;}
#main_flexisel{margin: 50px 0 0; padding-bottom: 30px; background: url("../images/bg_flexisel.png") repeat-x 0 100%;}

/* Historie */
.main_flexiselHisorie{padding: 0; max-width: 1280px; margin: 0 auto;}
.main_flexiselHisorie img{padding: 0 50px; position: relative;}

/* Historie 2 
#histoire2 .nbs-flexisel-nav-left,
#histoire2 .nbs-flexisel-nav-left.disabled{left: -5px; background: url("../images/flexisel_prev_2.png") no-repeat 50% 50%; opacity: 1; margin-top: 0; padding: 0;}
#histoire2 .nbs-flexisel-nav-right,
#histoire2 .nbs-flexisel-nav-right.disabled{right: -5px; background: url("../images/flexisel_next_2.png") no-repeat 50% 50%; opacity: 1;margin-top: 0; padding: 0;}
#histoire2 .nbs-flexisel-item{text-align: left; background: url('../images/bg_li_historie.png') no-repeat; padding: 0; height: 275px;}
#histoire2 .nbs-flexisel-item div{padding-left: 50px; padding-right: 50px; line-height: 22px;}
#histoire2 .nbs-flexisel-item div h3{margin: 0; color: #00305d; font-size: 24px;}
#histoire2 .nbs-flexisel-item div p{margin: 0; font-size: 14px; line-height: 20px;}
#histoire2 .nbs-flexisel-item div.colorZukunft h3,
#histoire2 .nbs-flexisel-item div.colorZukunft p{color: #d40075;}
#histoire2 .nbs-flexisel-item:nth-child(even){margin-top: 260px; padding-top: 20px; background-position: 48px 0 ;}
#histoire2 .nbs-flexisel-item:nth-child(odd){padding-bottom: 20px;   background-position: 48px 100%;}
#histoire2 #main_flexisel2{background: url('../images/bg_historie2.png') repeat-x 0 50%;}*/


/* Hstoire 3 */
.histoire_items{background: #00305d; padding: 1px; position: relative; cursor: pointer;}
.histoire_items::before{content: ''; position: absolute; bottom: 0; right: 0; border-top: 50px solid transparent; border-right: 50px solid #00305d; width: 0; z-index: 1;}
.histoire_items .inside{position: relative; padding:15px 0;}
.histoire_items .inside::before{content: '';position: absolute; bottom: -1px; right: -1px; border-top: 49px solid transparent; border-right: 49px solid #fff; width: 0; z-index: 2;}
#histoire2 .inhalt h4{font-size: 30px; color: #fff; padding: 0 0 20px; margin: 0;}
#histoire2 .inhalt h4::after {content: ""; display: block; width: 100px; height: 3px; background: #d40075;
margin-top: 10px;}
#histoire2 .inhalt h5{font-size: 20px; text-transform: uppercase; color: #fff; padding: 0 0 10px; margin: 0;}
#histoire2 .inhalt h5::before{font-family: 'FontAwesome'; content: "\f054"; display: inline-block;margin-right: 10px; color: #d40075;}
#histoire2 .inhalt .main-flex{display: flex;}
#histoire2 .inhalt .item-img{flex-direction: column; justify-content: center; flex: 1; padding: 0 15px;}
#histoire2 .inhalt .item-text{display: flex; flex-direction: column; justify-content: center; flex: 1;}
#histoire2 .inhalt .ui-accordion .ui-accordion-header{padding: 1px; border-radius: 0; border:none;}
#histoire2 .inhalt .ui-icon{display: none;}
#histoire2 .inhalt .ui-accordion .ui-accordion-content{border:1px solid #00305d; padding: 10px; margin: 5px 0 0;}
#histoire2 .inhalt .histoire_items.ui-state-active .inside{background: #fff;}
#histoire2 .inhalt .histoire_items.ui-state-active .inside h4,
#histoire2 .inhalt .histoire_items.ui-state-active .inside h5{color:#00305d;}

#histoire2 .inhalt .histoire_items.active .inside{background: #fff;}
#histoire2 .inhalt .histoire_items.active .inside h4,
#histoire2 .inhalt .histoire_items.active .inside h5{color:#00305d;}


#histoire2 .nbs-flexisel-inner{padding-top: 20px;}
#histoire2 .nbs-flexisel-nav-left,
#histoire2 .nbs-flexisel-nav-left.disabled{left: -5px; background: url("../images/flexisel_prev_2.png") no-repeat 50% 50%; opacity: 1; margin-top: 0; padding: 0; top: 28px;}
#histoire2 .nbs-flexisel-nav-right,
#histoire2 .nbs-flexisel-nav-right.disabled{right: -5px; background: url("../images/flexisel_next_2.png") no-repeat 50% 50%; opacity: 1;margin-top: 0; padding: 0;  top: 28px;}
#histoire2 .nbs-flexisel-item{text-align: left; background: url('../images/bg_li_historie_02.png') no-repeat 70px 0; padding:0;}
#histoire2 .nbs-flexisel-item.spn{background: url('../images/bg_li_historie.png') no-repeat 70px 0;}
#histoire2 .nbs-flexisel-item div{/*padding-left: 50px; padding-right: 50px;*/ line-height: 22px;}
#histoire2 .nbs-flexisel-item div h3{margin:20px 0 0 ; color: #00305d; font-size: 21px;}
#histoire2 .nbs-flexisel-item.spn div h3{color: #d40075;}
#histoire2 .nbs-flexisel-item div p{margin: 5px 0 0; padding: 5px 0 0; font-size: 12px; line-height: 16px; /*visibility: hidden;*/ border-top: 1px solid rgba(0,0,0,0.15); color: #00305d}
#histoire2 .nbs-flexisel-item div *{margin-left: 50px !important; margin-right: 50px !important;}
#histoire2 .nbs-flexisel-item.spn div p{color: #d40075;}
#histoire2 .nbs-flexisel-item div.colorZukunft h3,
#histoire2 .nbs-flexisel-item div.colorZukunft p{color: #d40075;}
#histoire2 #main_flexisel2{background: url('../images/bg_historie2.png') repeat-x 0 25px; margin: 35px 0 0;}

#histoire2 .content-historie{height: 0; overflow: hidden; margin: 3px 0; }
#histoire2 .content-historie.active{height: auto; padding: 5px; border: 1px solid #00305d;}


/* Das Jahr 2019 */
#dasJahr .main_img{margin: 50px 0 0; padding: 0;}

/* SPN-ZUKUNFT */
#spn-zukunft .main_box{padding: 30px 0;}
#spn-zukunft .box{padding: 0 30px 0 0; margin: 20px 0 0;}
#spn-zukunft .box + .box{padding: 0 15px;}
#spn-zukunft .box + .box + .box{padding:0 0 0 30px;}
#spn-zukunft .box .item{padding: 15px; border:5px solid #00305d; min-height: 275px; position: relative; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; overflow: hidden;}
#spn-zukunft .box .item *{-webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s;	-o-transition: all 0.3s ease 0s;	transition: all 0.3s ease 0s;}
#spn-zukunft .box .item h4{padding:10px 8px 8px; text-align: center; margin: 0; font-size: 18px; color: #d40075; width: 100%; position: absolute; left: 0; top: 0; background: rgba(236,236,236,0.8); }
#spn-zukunft .box .item1{background-image: url("../images/bg_item1.png"); background-size: contain;}
#spn-zukunft .box .item2{background-image: url("../images/bg_item2.png"); background-size: contain;}
#spn-zukunft .box .item3{background-image: url("../images/bg_item3.jpg");}
#spn-zukunft .box .item p{position: absolute; width: 100%; height: 100%; display: flex; text-align: center; font-size: 13px; align-items: center; color: #d40075; background: rgba(236,236,236,0.9); top: 100%; left: 0; line-height: 16px; margin: 0; padding: 10px;}
#spn-zukunft .box .item:hover h4{display: none;}
#spn-zukunft .box .item:hover p{top: 0;}
#spn-zukunft .main_video{max-width: 680px; margin: 0 auto; padding: 40px 0;}
#spn-zukunft .main_video div{position: relative; overflow: hidden; padding-top: 56.25%;}
#spn-zukunft .main_video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 5px solid #00305d;}

/* Slogan Footer */
#slogan-footer{margin: 30px 0 50px; position: absolute; bottom: 0; width: 100%; left: 0; z-index: 1;}
#slogan-footer h3{font-size: 24px; margin: 0 0 15px;}
#slogan-footer h2{color: rgba(255,255,255,0.6); text-align: center; font-size: 32px; margin: 0;}

/* Footer */
footer{width:100%; padding:6px 0 12px; font-size: 14px; background:#00305d; color:#fff; margin: 50px 0 0; text-align: center;}
footer span{display: inline-block; margin: 0 10px;}
footer a{color: #fff;}
footer a:hover{color: #d40075;}

footer .posReltive{position: relative;}
footer .posReltive .btnPos{position: absolute; display: inline-block; padding:6px 10px 4px; font-size: 18px; background: #d40075; color: #fff; border:2px solid #d40075; z-index: 2;}
footer .posReltive .btnPos.active{background: #fff; color: #d40075;}
footer .posReltive .btnPos.pos1{top:435px; left: 435px;}
footer .posReltive .btnPos.pos2{top:550px; left: 500px;}
footer .posReltive .btnPos.pos3{top: 665px; left: 230px;}
footer .posReltive .btnPos.pos4{top: 590px; left: 815px;}
footer .posReltive .hideContent{position: absolute; top: 250px; right: 25px; width: auto; max-width: 520px; }
footer .posReltive .mainFooterContent *{
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;}
footer .posReltive .hideContent{opacity: 0; text-align: left; background: rgba(255,255,255,0.95); padding: 15px; color: #00305d;}
footer .posReltive .hideContent h4{color: #d40075;}
footer .posReltive .hideContent.active{opacity: 1;top: 220px;}

footer .content .mainFooterContent .close-lightbox{background: #d40075; position: absolute; top: 206px; right: 4px; z-index: 1; width: 25px; height: 25px; color: #fff; text-align: center; border-radius: 50%; color: #fff; cursor: pointer; display: none;}
footer .content .mainFooterContent .close-lightbox::before{display: inline-block; margin-top: 6px;}

.scrollup {width: 50px; height: 50px; font-size: 24px; line-height: 46px; color: #fff; background: #d40075; border-radius: 50%; box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.4); position: fixed; right: 40px; bottom: 40px; display: none; overflow: hidden; text-align: center; text-decoration: none; z-index: 20;}
.scrollup::before {font-weight: 400; font-family: "FontAwesome"; content: "\f106";}
.scrollup:hover{background: #00305d; color:  #d40075;}
.showInMobile{display: none;}




/* Tabs */
.ui-widget.ui-widget-content{border-radius: 0; padding: 0; margin: 50px auto; border: none;}
.ui-tabs .ui-tabs-nav{background: none;	border: none; padding: 0;}
.ui-tabs .ui-tabs-nav li{background: #00305d; border:none; border-radius: 0;}
.ui-tabs .ui-tabs-nav li a{ color: #fff;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{background: #d40075;}
.ui-tabs .ui-tabs-panel{border: 1px solid #ddd; color: #fff; font-family: 'ClanPro-NarrBook'; padding: 0; background:#00305d;}
.ui-tabs .ui-tabs-panel .main_flex{display: flex; flex-direction: row-reverse;}
.ui-tabs .ui-tabs-panel .main_flex .flexLeft{padding: 25px 25px 25px 35px; background: #d40075; width: 25%; color: #fff; font-size: 16px; }
.ui-tabs .ui-tabs-panel .main_flex .flexLeft p::before{font-family: 'FontAwesome'; margin-right: 10px; display: block; float: left; margin-bottom: 20px; margin-left: -23px;}
.ui-tabs .ui-tabs-panel .main_flex .flexLeft p:nth-of-type(1)::before{content:"\f073";}
.ui-tabs .ui-tabs-panel .main_flex .flexLeft p:nth-of-type(2)::before{content:"\f041"; font-size: 25px;}
.ui-tabs .ui-tabs-panel .main_flex .flexRight{flex: 1; padding: 25px; }
.ui-tabs .ui-tabs-panel .main_flex .flexRight ul{padding: 0; margin: 15px 0 0; list-style: none; display: flex; flex-wrap: wrap;}
.ui-tabs .ui-tabs-panel .main_flex .flexRight ul li{flex: 1 0 33.33%; margin: 0 0 5px; font-size: 16px;}
.ui-tabs .ui-tabs-panel .main_flex .flexRight ul li::before{width: 7px; height: 13px; background: url('../images/bg_li_tab_2.png') no-repeat 0 0; display: inline-block; margin-right: 5px; content: "";}

/* Galerie */
#galerie{
	padding: 30px;
	background: #eee;
}
/*
.main-galerie {
	display: flex;
  flex-flow: column wrap;
  align-content: space-between; 
  height: 3300px;
  margin: 40px auto;
  counter-reset: items;
  max-width: 1280px;
}

.main-galerie > .item {
	width: 24%;
	position: relative;
	padding: 5px;
	border-radius: 3px;
}
 
  .item:nth-of-type(4n+1) { order: 1; }
  .item:nth-of-type(4n+2) { order: 2; }
  .item:nth-of-type(4n+3) { order: 3; }
  .item:nth-of-type(4n)   { order: 4; }
  */

  .main-galerie{
	background: url('../images/bg_logo_galerie.png') no-repeat left bottom ;
	padding: 10px 10px 0 10px;
	-webkit-column-count: 4;
    -moz-column-count: 4;
	column-count: 4;
	-webkit-column-gap: 10px; 
  	-moz-column-gap: 10px; 
	column-gap: 10px;
	border-bottom: 3px solid #d40075;
  }

  .main-galerie > div{
	  margin-bottom: 10px;
  }

  /* New Footer after Galerie */
  #footer{width:100%; padding:6px 5px 12px; font-size: 14px; background:#00305d; color:#fff; margin:0; text-align: center;}
  #footer span{display: inline-block; margin: 0 10px;}
  #footer a{color: #fff;}
  #footer a:hover{color: #d40075;}


@media (max-width: 920px) {
	footer .posReltive.hideInMobile{display: none;}
	#spn-zukunft .showInMobile{display: block;}
	#spn-zukunft .box{flex: auto; max-width: none; width: 100%; padding: 0;}
	#spn-zukunft .box + .box, #spn-zukunft .box + .box + .box{padding: 0;}
	.main-galerie{
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
		-webkit-column-gap: 5px; 
		  -moz-column-gap: 5px; 
		column-gap: 5px;
	  }
	
	  .main-galerie > div{
		  margin-bottom: 5px;
	  }
}

@media (max-width: 768px) {
	#navigation nav ul li a{font-size: 15px;}
	#spn-zukunft .box{flex: auto; max-width: none; width: 100%; padding: 0;}
	#spn-zukunft .box + .box, #spn-zukunft .box + .box + .box{padding: 0;}

	#histoire2 .inhalt h4{font-size: 28px;}
	#histoire2 .inhalt h5{font-size: 18px;}
	#histoire2 .inhalt .item-img{width: 200px; flex: none; text-align: center;}
	#histoire2 .inhalt .item-img img{max-width: 150px;}
	/*#histoire2 .nbs-flexisel-item{min-width: 365px;}*/
}

@media (max-width: 767px) {
	body.active{position:fixed; overflow: hidden;}
	.hideInMobile{display: none;}
	.showInMobile{display: block;}
	.btn-menu{display: block;}
	#wrapper #navigation{display: block; left: -70%; top: 0; height: 100vh; z-index: 9; position: fixed; width: 70%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;	transition: all 0.3s ease 0s; padding-top: 20px; margin: 0; background:#00305d; border: none;}
	#navigation nav ul{list-style: none; padding: 0; margin: 50px 0 0; display: block;}
	#navigation nav ul li::before{display: none;}
	#navigation nav ul li{margin: 10px 15px 8px; border-top: 1px solid rgba(255,255,255,0.3);}
	#navigation nav ul li:first-child{border-top: none;}
	#navigation nav ul li a:hover{color: #d40075;}
	.active #wrapper #navigation{left:0;}

	.ui-tabs .ui-tabs-panel .main_flex{flex-direction: column-reverse;}
	.ui-tabs .ui-tabs-panel .main_flex .flexLeft{width: 100%;}
	.ui-tabs .ui-tabs-panel .main_flex .flexRight ul li{flex: 1 0 100%;}
	footer .posReltive.hideInMobile{display: none;}
	#spn-zukunft .showInMobile{display: block;}
	

	.histoire_items .inside{padding: 5px 0;}
	#histoire2 .inhalt h4{font-size: 18px; padding: 0 0 10px;}
	#histoire2 .inhalt h4::after{height: 2px; margin-top:5px;}
	#histoire2 .inhalt h5{font-size: 14px; padding: 0 45px 5px 0}
	#histoire2 .inhalt h5::before{margin-right: 5px;}
	#histoire2 .inhalt .item-text{padding: 0 5px;;}
	#histoire2 .inhalt .item-img{display: none;}
	#histoire2 .content-hisorie-img > img{display: none;}
	#histoire2 #main_flexisel2{margin: 0;}
	#histoire2 .nbs-flexisel-item div *{margin-left: 20px !important; margin-right: 20px !important;}
	#histoire2 .nbs-flexisel-item.spn,
	#histoire2 .nbs-flexisel-item{background-position: calc(50% - 15px) 0;}
	#histoire2 .nbs-flexisel-item div h3{text-align: center; margin-left: -30px;}
	/*#histoire2 .nbs-flexisel-item{min-width: 390px;}*/

}

@media (max-width: 639px) {
	#main_flexisel img{max-width: 250px;}
	body{font-size: 16px;}
	header h1 img{max-width: 175px;}
	.content{padding: 15px 15px 0;}
	#intro{margin-bottom: 0;}
	#intro h2{font-size: 31px;}
	#intro h3{font-size: 24px;}
	#slogan-footer h3{text-align: center;}
	.scrollup{right: 10px;}
	.height-nav{height: 0 !important;}

	#zeitungen.PaddingTop70{padding-top: 0;}
	.logoGewinnspiel{position: static; margin: 50px 5px 0;}
}

@media (max-width: 520px) {
.main-galerie{
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 5px; 
	  -moz-column-gap: 5px; 
	column-gap: 5px;
  }

  .main-galerie > div{
	  margin-bottom: 5px;
  }
}

@media (max-width: 460px) {
.main-galerie{
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	-webkit-column-gap: 5px; 
	  -moz-column-gap: 5px; 
	column-gap: 5px;
  }

  .main-galerie > div{
	  margin-bottom: 5px;
  }
}