.btn-default-2 {font-size: 22px; line-height:22px;transition:all 0.5s ease; font-weight:300;}
.btn-default-2 { color:#FFF;text-decoration:none;padding:0.5em 1em;margin:4% auto 6% auto; width:20%; cursor:pointer; text-transform: none;}
.btn-default-2:hover{color:#FFF; background:#9ec417;border:#9ec417 solid 1px;}
.btn-default-2 a{text-decoration:none;color:#FFF;}
.btn-default-2 {color:#FFF;  background:#444;border:#444 solid 1px;}

.aktuelles-content { float:left; width:100%;padding:0 0 1% 0;}
.aktuelles-left {float:left; width:40%;}
.aktuelles-right {float:left; width:60%;}


@media screen and (max-width:1440px) {
 .btn-default-2 {font-size: 18px; line-height:18px;}	
}

@media screen and (max-width:720px) {
 .btn-default-2 {font-size: 18px; line-height:18px; width:60%;}	
 
 .aktuelles-left {float:left; width:100%;}
.aktuelles-right {float:left; width:100%;}
}

.content-top-news{ position:relative;width:97%; height: auto;padding:0px 0 0px 0; text-align:center; margin:0 2% 0 1%; border-bottom:#999 solid 1px;}
.content-top-news h4{ padding:0 0 2% 0}

/*POST-IT*/
.content-top-news-2 { position:relative;width:97%;height: auto;padding:0px 0 0px 0;border-bottom:#999 solid 0px;}
.ce-div {width:97%; float: left; margin: 0 0 2em 1%;border:#ccc solid 1px;}
.slot-top-news {text-align: left; width: 100%;}
.frame-layout-4 {width: 60%; float: left;}
.frame-layout-5 {width: 32%; height: 26vw; margin: 0em 5% 0 3%; float: left;}

.frame-layout-5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    }

.frame-layout-5 {
  background-image: url("../images/post-it-3.png");
  background-repeat: no-repeat;
  background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;  
}

.news-list-item-post-it {text-align: left; width: 60%; padding: 0 20%;font-size:1.2vw; line-height:1.3vw; color: #000;
    font-family: 'Patrick Hand', cursive; }
.news-list-item-post-it h2{font-weight: 700;font-size:1.2vw; line-height:1.3vw; padding: 0 0 0 0; text-transform: uppercase; color: #000;}
.btn-postit {font-weight: 700;}

@media screen and (max-width:720px) {
    
    .slot-top-news {text-align: center; width: 100%;}
    .frame-layout-4 {width: 100%; float: left;}
    .frame-layout-5 {width: 80%; height: 80vw; margin: 2.5em 10% 0 10%; float: left;}
    
    .news-list-item-post-it { width: 60%; padding: 0 20%;font-size:4.8vw; line-height:5.2vw; }
    .news-list-item-post-it h2{font-size:4.8vw; line-height:5.2vw;  }
    
}

/*POST-IT*/

.effects .more { float:left;font-size:18px; line-height:18px; width: auto;padding:10px 20px; margin-top:10%;background-color:#9ec417; color:#FFF;transition:all 1s ease;}
.news-list-container .more { float:left;font-size:18px; line-height:18px; width: auto;padding:10px 20px; margin-top:4%;background-color:#9ec417; color:#FFF;transition:all 1s ease;}
.news-list-container .more:hover{ background-color:#05a0e0}

/*aktuelles & intro
*/
.news-list-container { text-align:left}
.news-list-item { float:left; padding:0% 0 20px 0; margin-bottom:20px; border-bottom:#999 dotted 1px;text-align:left}
.news-list-item-jobs { float:left; padding:0 0 20px 0; margin-bottom:20px; border-bottom:#999 dotted 1px;text-align:left}

.news-container {text-align:left; padding:1% 0}
.news-item { float:left; padding:0 0 20px 0; margin-bottom:20px; border:#999 dotted 1px;text-align:left;background-color:#FFF }
.news-item {
  position: relative;
  float: left;
  margin:0% 1% 2% 1%;
  padding:0 1% 1% 1%;
  width: 29%;
  overflow: hidden;
}
.news-item:hover{background-color:#DDD; cursor:pointer}
/*single
*/
.single-image-1 {float:left;width:100%;}
.single-image-2 {float:left; width:48%; height:auto; padding:1% 2% 0% 0}

.galerie {float:left; width:97%;padding:0% 2% 0% 1%;}
.galerie .single-image-2 {float:left; width:23%; height:auto; padding:1% 2% 0% 0}
.galerie .single-image-2 img:hover{opacity:0.7;filter: alpha(opacity=70)}

.news-single-main {float:left; padding:0px 0 0 0}
.single-more-images {float: left; width: 48%; padding:0 2% 2% 0;}
#c47 .single-more-images {float: left; width: 32.3333333%; padding: 0.5%;}


/*MAIN*/
/* ============================================================
  GLOBAL
============================================================ */
.effects {
  padding: 1% 0 0 0;
}


.effects .img {
  position: relative;
  float: left;
  margin:0% 1% 2% 1%;
  width: 31%;
  overflow: hidden;
}

.effects .img img {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

.overlay {
  display: block;
  position: absolute;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(143, 189, 48, 0.8);
  background-color: rgba(2, 147, 214, 0.8);
  background-color: rgba(51, 51, 51, 0.8);
  
  background-color: rgba(143, 189, 48, 0.9);
  background-color: rgba(51, 51, 51, 0.8);
  /*background-image: none;background-repeat: no-repeat; background-position: center;*/
  color:#FFF;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.overview .overlay {background-color: rgba(143, 189, 48, 0.9);}
/*.overlay:hover{ background-image: url(../images/plus.png);background-repeat: no-repeat; background-position: center;}*/
.overlay p{color:#FFF}

.close-overlay {
  display: block;
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 100;
  width: 90%;
  height: auto;
  color: #fff;
  text-align:left;
  cursor: pointer;
  padding:20px 5%;
  
}
.close-overlay.hidden {
  display: none;
}

.expand {
  display: block;
  position: absolute;
  z-index: 100;
  width: auto;
  height: auto;
  text-align:left;
  color: #FFF;
  line-height: 34px;
  font-weight: 300;
  font-size: 34px;
  text-transform: none; padding:12px 15px 0 5%;
}
.expand span{ font-size:22px;line-height: 26px;}


/* ============================================================
  EFFECT 1 - SLIDE IN BOTTOM
============================================================ */

#effect-1 .overlay {
  bottom: 0px;
  left: 0;
  right: 0;
  width: 100%;
  /*custom*/
  height: 65px;
}
#effect-1 .overlay a.expand {
  left: 0;
  right: 0;
  bottom: 100%;
  margin: 0 auto -60px auto; 
}
#effect-1 .img.hover .overlay {
  height: 100%;
}

/* ============================================================
  EFFECT 2 - SLIDE IN TOP
============================================================ */
.effects-2 {
  padding-left: 0px;
}
.effects-2 .img {
  position: relative;
  float: left;
  margin:1% 1%;
  width: 23%;
  overflow: hidden;
}

.effects-2 .img img {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}
#effect-2 .overlay {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /*custom*/
 height: 65px;
}
#effect-2 .overlay a.expand {
  left: 0;
  right: 0;
  top: 50%;
  margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
  height: 100%;
}
@media screen and (max-width:1620px) {
 .expand {
  line-height: 24px;
  font-size: 24px;
}
#effect-1 .overlay {
  height: 50px;
}
#effect-2 .overlay {
  height: 50px;
}
}
@media screen and (max-width:1200px) {
.effects .img {
  position: relative;
  float: left;
  margin:1% 1%;
  width: 48%;
  overflow: hidden;
}
}
@media screen and (max-width:720px) {
.effects .img {
  position: relative;
  float: left;
  margin:4% 1%;
  width: 48%;
  overflow: hidden;
}
 .expand {
  line-height: 14px;
  font-size: 14px;
}
#effect-1 .img.hover .overlay {
  height: 40px;
}
#effect-2 .img.hover .overlay {
  height: 40px;
}
#effect-1 .overlay {
  /*custom*/
  height: 40px;
}
#effect-2 .overlay {
  /*custom*/
  height: 40px;
}
.close-overlay {
  display: none;  
}
}