/* 	LocalBranding Modules CSS (Contao)
		Author: LocalBranding 2018
		Theme:	LB Website Blog Modules
*/
/* -- LB - Header Banner-- */
.lb-header-banner{
	height: 60rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-bottom: var(--space-s);
}
@media only screen and  (max-width: 1024px){
	.lb-header-banner{
		background-attachment: scroll;
    height: 20rem;
  }
}
.lb-header-banner header{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  width: 100%;
  padding:0 var(--space-s);
}
@media only screen and (max-width: 1400px)
{
  .lb-header-banner header{
    padding:0 var(--space-s);
  }
}
.lb-header-banner .hero-content{
  display: flex;
  align-items: center;
  position: relative;
}
.lb-header-banner .hero-content span{
  background-color: var(--spotcolor1);
  border-radius: var(--theme-radius);
  padding: 0 1rem;
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: visible;
}
@media only screen and (max-width: 999px){
  .appeltaten-apple{
    display: none;
  }
  .lb-header-banner .hero-content span{
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    text-shadow: var(--text-shadow);
  }
}
.lb-header-banner .hero-content span img{
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
}
.lb-header-banner .hero-content h1{
  color: var(--white);
  font-weight: 600;
  text-shadow: var(--text-shadow);
}

/* -- Article with Image Left or Right-- */
.lb-text-image{
	max-width: 76.8rem;
  margin: var(--space-s) auto;
  overflow: visible;
	}
.lb-text-image .text-content{
  margin-bottom: var(--space-s);
}
@media only screen and (max-width:768px){
  .lb-text-image .text-content{
    padding: 0 var(--space-s);
  }
}
.lb-text-image .image-content{
  width: 100%;
  margin-top: var(--space-l);
}
.lb-text-image .image-content img{
  width: 100%;
  height: auto;
}
/* ///// ---------- BLOG MODULE ---------- ///// */
/* -- Blog-Modul -- */
@media only screen and  (max-width: 1024px){
	#mobile-top{

	}
}
div.mod_newslist{ /*Mansory container */
	background-color: transparent;
  float: right;
	width: 75%;
	margin-bottom: var(--space-l);
	position: relative;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: center;
}
@media only screen and  (min-width:1200px){
	div.mod_newslist{
		width: 75%;
	}
}
@media only screen and  (min-width:999px){
	div.mod_newslist{
		width: 75%;
	}
}
@media only screen and  (max-width:990px){
	div.mod_newslist{
    width: 100%;
    float: none;
		margin: 0 auto;
	}
}
@media only screen and  (max-width:500px){
	div.mod_newslist{
    width: 100%;
    flex-flow: column wrap;
	}
}
div.newslist-home{
  width: 100%;
  margin-top: var(--space-s);
}
div.newslist-home .blog-card-link{
  width: calc(25% - 2rem);
}
@media only screen and (max-width:990px){
  div.newslist-home .blog-card-link{
    width: calc(33% - 2rem);
  }
}
@media only screen and (max-width:768px){
  div.newslist-home .blog-card-link{
    width: calc(50% - 2rem);
  }
}
@media only screen and (max-width:480px){
  div.newslist-home .blog-card-link{
    width: calc(100% - 2rem);
  }
}
.blog-card-link{
	display: block;
	width: calc(33% - 2rem);
  height: 48rem;
  margin: 0 1rem;
  margin-bottom: 1.5rem;
	padding: 0;
	transition: var(--theme-transition);
  overflow: hidden;
  border-bottom: var(--theme-border-interactive);
  background-color: var(--white);
  position: relative;
  /*NEU*/  
  transition: transform .2s;
}
.blog-card-link::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--space-l);
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 66%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 66%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 66%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  z-index: 10;
}
@media only screen and (max-width: 999px){
  .blog-card-link{
    width: calc(50% - 2rem);
    margin: 1rem;
  }
}
@media only screen and (max-width:500px){
  .blog-card-link{
    width: 100%;
    height: auto;
    padding-bottom: 0;
  }
}
.blog-card-link .teaser{
  max-height: 25rem;
}
.blog-card-link .teaser p{
 /* max-height: 7rem;
  overflow: hidden;
  */
	text-overflow: ellipsis;
}
.layout_latest{
	background-color: var(--white);
  display: inline-block;
  width: 100%;
	transition: var(--theme-transition);
	position: relative;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	overflow: hidden;
	padding-bottom: var(--space-s);
}
.layout_latest:hover{
	box-shadow: 2px 2px 18px rgba(var(--black), 0.15);
}
.layout_latest .info{
	font-size: 1.2rem;
	color: var(--darkgrey);
	margin:0 2rem;
	display: block;
}
.layout_latest .teaser{
	margin: 0 2rem 2rem 2rem;
  overflow: hidden;
}
.mod_newslist .layout_latest .image_container{
	overflow: hidden;
	margin-bottom:1rem;
}
.mod_newslist .layout_latest .image_container img{
	width: 100%;
	height: 100%;
}
.blog-card-link .image_container{
	position: relative;
}
.teaser > .kicker{
	color: #343434;
}
/* Blog Card Hover */
.blog-card-link .more-title{
  display: none;
}
.blog-card-link .image_container .more-hover{
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: visible;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	background-color: transparent;
	color: transparent;
	text-align: left;
}
.blog-card-link .image_container .more-hover::before{
	/*content: 'mehr Infos';*/
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: 0;
  text-align: center;
	overflow: visible;
	background-color: transparent;
	opacity: 0;
  color: var(--white);
	font-weight: 600;
	font-size: 3.6rem;
	line-height: 4.2rem;
	z-index: 3;
}
@media only screen and  only screen and (max-width: 1200px){
	.blog-card-link .image_container .more-hover::before{
		font-size: 2.4rem;
		line-height: 3.6;
		bottom: 2rem;
	}
}
.blog-card-link:hover .image_container .more-hover::before{
	opacity: 1;
}
/* Hover Title Background */
.blog-card-link .image_container .more-hover::after{
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 0;
  height: 0;
  content: '';
  /*background: var(--spotcolor1);*/
  opacity: 0.6;
  height: 0;
  overflow: visible;
  /*transition: var(--theme-transition);*/
  border-radius: 1000px;
}
@media only screen and  only screen and (max-width: 1200px){
  .blog-card-link .image_container .more-hover::after{
  }
}
.blog-card-link:hover .image_container .more-hover::after{
  width: 100%;
  height: 100%;
  border-radius: 0;
}
/* END Blog Card Hover */
/* Teaser Texts and Headlines */
.layout_latest h3 a,
.layout_latest h2 a,
.layout_latest h2,
.layout_latest h3 {
	font-family: var(--theme-font-1);
	font-size: var(--font-m);
	font-weight: 600;
	line-height: var(--lh-m);
	color: var(--black);
	background-image: none;
	margin: 1rem 2rem 1rem 2rem;
	display: block;
  transition: var(--theme-transition);
}
.layout_latest h4{
	font-size: var(--font-s);
	line-height: var(--lh-s);
	margin: 0 2rem 1rem 0rem;
}
.layout_latest mark{
	display: none
}
.blog-card-link:hover .layout_latest mark{
	right: 1rem;
}
.blog-card-link:hover .layout_latest .st0{
	fill: var(--spotcolor1);
}

/* - Category Nav - */
.blog-cat-big{
  border-bottom: var(--theme-border-interactive);
  background-color: var(--white);
  float: left;
  width: calc(25% - 1.5rem);
  margin-right: 1.5rem;
}
.blog-cat-big ul.level_1 li a{
  color: var(--black);
}
.blog-cat-big h3{
  margin-left: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
}
.blog-nav-mob{
	display:none;
}
.blog-nav-mob .btn-info{
	width: 100%;
	border-radius: 0;
	background-color: var(--white);
	color: var(--spotcolor1);
	border: 0!important;
	font-size: 2.4rem;
	font-weight: 600;
	line-height:2rem;
  padding: 0;
  margin: 0;
}

.blog-nav-mob .btn-info:active,
.blog-nav-mob .btn-info:focus{
	border: 0!important;
}

@media only screen and  (max-width: 990px){
	.blog-nav-mob{
		display: block;
    margin: 0 1rem 1rem 1rem;
    width: calc(100% - 2rem);
	}
	.blog-nav-mob ul.level_1{
		background-color: var(--white);
	}
	.blog-nav-mob ul.level_1 li{
		background-color: transparent;
	}
	.blog-nav-mob ul.level_1 li a{
		color: var(--black)!important;
	}
	.blog-nav-mob ul.level_1 li.active span{
		color: var(--spotcolor1)!important;
	}
}

@media only screen and  (max-width: 990px){
	.blog-cat-big{
		display:none;
	}
}
.mod_newscategories{

}
div.mod_newscategories ul {
	float: none;
	margin: 0 auto;
	min-height: 5rem;
	width: 100%;
	padding: 1.5rem 2rem 1.8rem 0;
}
@media only screen and  (max-width:998px){
	div.mod_newscategories ul {
		width: 100%;
		text-align: left;
	}
}
.mod_newscategories ul li {
	float: none;
	list-style-type: none;
  padding: 0.5rem 2rem;
  border-left: var(--theme-border-white);
  transition: none;
}
.mod_newscategories ul li:hover{
	border-left: var(--theme-border-interactive);
}
.mod_newscategories ul.level_1 li a span{
	font-weight: 600;
  font-size: var(--font-s);
}
@media only screen and  (max-width:998px){
	.mod_newscategories ul.level_1 li a{
		font-weight: 400;
		color: var(--black);
		line-height: 3rem;
		padding-left: 0;
		padding-right: 2rem;
	}
}
.mod_newscategories ul.level_1 li.active strong{
	padding: 1.1rem 0;
	font-weight: 600;
	font-size: var(--font-s);
	color: var(--spotcolor1);
}
.mod_newscategories ul li.first a,
.mod_newscategories ul li.first span.active{
	padding-left: 0;
}
/* Blog Pagination*/
.pagination > li > strong, 
.pagination > li > span{
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #fff;
	text-decoration: none;
	background-color: #006446;
	border: 1px solid #ddd;
}
.pagination > li > a, .pagination > li > span, 
.pagination > li > a:focus, .pagination > li > a:hover, 
.pagination > li > span:focus, .pagination > li > span:hover{
	color: #006446;
}
nav p, link page-link{
	display: none;
}
.mod_newslist .pagination{
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	display: flex;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
	margin-bottom: -4rem;
	justify-content: center;
}
.mod_newslist .pagination ul{
	display: flex;
}
.mod_newslist .pagination ul li{
	margin-right: 1rem;
}
/* - Blog Reader - Blog Article Page - */
.blog-article-header{
	height: 46.1rem;
  max-width: 76.8rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	margin-bottom: 2rem;
	position: relative;
  margin: 0 auto;
	padding: 2rem;
}
@media only screen and  (max-width: 500px) {
	.blog-article-header{
		height: 30rem;
	}
}
.blog-article-header .caption{
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 80%;
}
.blog-article-header h1{
  color: var(--white);
  text-align: center;
  text-shadow: var(--text-shadow);
  font-size: var(--font-xxl);
}
.mod_newsreader figure.header-blog-article img{
	width:100%;
	height:auto;
}
.mod_newsreader .block{
	margin-bottom: 6rem;
}
@media only screen and  (min-width: 990px) {
	.mod_newsreader .ce_comments{
		width: 70%;
		margin: 0 auto;
	}
}
.mod_newsreader .ce_comments h2{
	text-align: center;
	padding-bottom: 1.0rem;
  margin-bottom: 2.5rem;
}
.mod_newsreader .ce_comments .form{
	width: 70%;
	margin: 0 auto;
}
.mod_newsreader a.btn-1st{
	float: none;
	margin: 0 auto;
}
/*images*/
.mod_newsreader .ce_image .image_container img{
	width: 100%;
	height: auto;
}
.mod_newsreader h2{
	background-image:url('../img/line.svg');
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 1.0rem;
    margin-bottom: 2.5rem;
}
.mod_newsreader h4{
	margin-bottom: 1rem;
	margin-top: 3rem;
}
.mod_newsreader .container{
	max-width: 76.8rem!important;
  margin: 0 auto;
  margin-top: 4rem;
}
/* - Blog Comments Section */
.comment_default p.info,
.comment_default p.info a{
	font-size: 1.2rem;
	margin-bottom: 0rem;
}
.comment_default{
	padding: 2rem;
	margin-bottom: 2rem;
	margin: 0 15%;
}
.ce_comments .odd{
	background-color: var(--darkgrey);
}
.ce_comments .last{
	margin-bottom: 3rem;
}
.mod_newsreader .info{
	color:var(--darkgrey);
}
/* - Back To Article List Link -*/
.mod_newsreader .back{
	color: var(--darkgrey);
	margin-bottom: 6rem;
	height: 2.4rem;
}
.mod_newsreader .back svg{
	width: 2rem;
}
.mod_newsreader .back a{
	position: absolute;
	padding: 2rem 2rem 2rem 0;
	font-size:2.4rem;
	color: var(--black);
	margin-left: 0;
	transition: all 0.3s cubic-bezier(.72,.28,.33,.93); /* explorer 10 */
	-webkit-transition: all 0.3s cubic-bezier(.72,.28,.33,.93); /* chrome & safari */
	-moz-transition: all 0.3s cubic-bezier(.72,.28,.33,.93); /* firefox */
	-o-transition: all 0.3s cubic-bezier(.72,.28,.33,.93); /* opera */
}
.mod_newsreader .back a:after{
	content:'Zurück';
	color: var(--bodybackground);
	font-size: 1.6rem;
	transition: all 0.3s cubic-bezier(.72,.28,.33,.93); /* explorer 10 */
	-webkit-transition: all 0.3s cubic-bezier(.72,.28,.33,.93); /* chrome & safari */
	-moz-transition: all 0.3s cubic-bezier(.72,.28,.33,.93); /* firefox */
	-o-transition: all 0.3s cubic-bezier(.72,.28,.33,.93); /* opera */
	display: block;
	float: right;
}
.mod_newsreader .back a:hover{
	margin-left: -1rem;
	text-decoration: none;
}
.mod_newsreader .back a:hover .st0{
	fill: var(--spotcolor1);
}
.mod_newsreader .back a:hover:after{
	content:'Zurück';
	color: var(--black);
	font-size: 1.6rem;
	margin-left:1rem;
}
.mod_newsreader .back a:active:after,
.mod_newsreader .back a:active{
	content:'Zurück';
	color: var(--spotcolor1);
}
.mod_newsreader .back a:hover .arrow-back{
	padding-left:-0.5rem;

}
/* ----- /////// LB CONTACT FORM /////// ----- */
.lb-contact-wrapper{
	  margin-bottom: var(--space-l);
}
@media only screen and (max-width: 1400px){
  .lb-contact-wrapper{
    padding: 0 var(--space-s);
  }
}
.lb-contact-wrapper .contact-row{
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin-bottom: 5rem;
}
/* maps container*/
.lb-contact-wrapper .gmaps-wrapper{
  width: 60%;
}
@media only screen and (max-width:1000px){
  .lb-contact-wrapper .gmaps-wrapper{
    width: 50%;
  }
}
@media only screen and (max-width:768px){
  .lb-contact-wrapper .gmaps-wrapper{
    width: 100%;
    margin: var(space-xs) 0;
  }
}
.lb-contact-wrapper h2{
  margin: 0;
}
/* form container*/
.lb-contact-wrapper .form-wrapper{
  width: 40%;
  padding-left: var(--space-l);
}
@media only screen and (max-width:1000px){
  .lb-contact-wrapper .form-wrapper{
    width: 50%;
  }
}
@media only screen and (max-width:768px){
  .lb-contact-wrapper .form-wrapper{
    width: 100%;
    margin-top: var(--space-s);
    padding-left: 0;
  }
}
.lb-contact-wrapper .gmaps-wrapper .content,
.lb-contact-wrapper .form-wrapper .content{
  padding: var(--space-xs);
  background: var(--white);
  margin-top: var(--space-s);
  height: calc(100% - 8.5rem);
}
.lb-contact-wrapper .formbody{
  width: 100%;
}
.lb-contact-wrapper .gmaps-wrapper .maps{
  overflow: hidden;
}
.lb-contact-wrapper .form-wrapper .form{
}
/* Text Rows */
.lb-contact-wrapper .text-col-left{
  width: 50%;
  padding-right: var(--space-s);
}
@media only screen and (max-width:1000px){
  .lb-contact-wrapper .text-col-left{
    width: 50%;
  }
}
@media only screen and (max-width:768px){
  .lb-contact-wrapper .text-col-left{
    width: 100%;
    padding-right: 0;
  }
}
.lb-contact-wrapper .text-col-right{
  width: 50%;
  margin-top: var(--space-l);
  padding-left: var(--space-s);
}
@media only screen and (max-width:1000px){
  .lb-contact-wrapper .text-col-right{
    width: 50%;
  }
}
@media only screen and (max-width:768px){
  .lb-contact-wrapper .text-col-right{
    width: 100%;
    padding-left: 0;
  }
}
.lb-contact-wrapper .container{
  padding: var(--space-xs);
  background-color: var(--white);
  height: 100%;
}
/* TESTEMONIALS SLIDER */
#testimonals{
	background-color: var(--spotcolor2);
	background-image: url('../img/system/testem-bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 50rem;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.lb-testimonials{
	max-width: 120rem;
	margin: 0 auto;
	text-align: center;
	padding: 3rem;
}
.lb-testimonial-slide{
	display: none;
	max-width: 99rem;
	margin: 0 auto;
	transition: var(--theme-transition);
	animation-name: fade;
  animation-duration: .6s;
	animation-iteration-count: 1;
}
@keyframes fade {
	from 	{opacity: 0.2}
	to 		{opacity: 1;}
}
.lb-testimonials h1:after{
	display: none;
}
.lb-testimonial-slide h5,
.lb-testimonial-slide a{
	color: white;
	font-size: 1.8rem;
	margin-bottom: 0;
}
.lb-testimonial-slide h4{
	color: white;
  font-family: var(--theme-font-1);
}
.lb-testimonials .next{
	cursor: pointer;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8rem;
	margin: 0 auto;
	display: block;
	text-align: center;
	background-image:url('../img/icon/system/icn-quote-load.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 5rem;
	width: 5rem;
	font-size: 0;
	transition: var(--theme-transition);
	opacity: 1;
  padding: 1rem;
}
.lb-testimonials .next:hover{
	background-image: url('../img/icon/system/icn-quote-load_hover.png');
}
.lb-testimonials .next:active{
	background-color: transparent;
	background-image:url('../img/icon/system/icn-quote-load_.png');
}
/* ----- /////// LB CONTACT FORM /////// ----- */
.lb-contact-form{
	padding: 0 2rem;
}
.formbody{
	width: 33%;
	margin: 0 auto;
}
@media (max-width: 1024px){
	.formbody{
		width: 60%;
	}
}
@media (max-width: 768px){
	.formbody{
		width: 70%;
	}
}
@media (max-width: 500px){
	.formbody{
		width: 100%;
	}
}
.lb-contact-form h2, .lb-contact-form h4 {
	text-align: center;
}
.lb-contact-form h2:after{
	margin: 2rem auto;
}
.lb-contact-form .submit{
	display: block;
	margin: 3rem auto;
}
.slider-format 
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 76.8rem;
	margin-bottom: 100px;
	height: 515px;
}