/* flex styles */

@media screen and (min-width: 800px){


#blocks {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;


  }

.footer_other {flex:0 0 30%;
  /*  border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);*/
    margin-top:30px;
    margin-left:0px; /*mittelbereich text verschieben*/

}

article {flex:0 0 30%;
  /*  border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);*/
    margin-top:0px; /*vorher 20px!*/
    margin-left:0px; /*mittelbereich text verschieben*/

}



 }

@media screen and (max-width: 767px){

/*.fotos_im_text {
    margin-top:20px;

 }*/
}


.bannerDetail h1 {font-size: 3em;}

.bannerDetail {
 color: #fff;
 margin:0 auto;
 text-align:center;
 display: table-cell;
 vertical-align: middle;
 left:auto;
 right:auto;
 position: absolute;
 text-shadow: 2px 2px 2px #000; 
 font-size: 3.5em;
 left:6%;
 top:35%;

 
  }


@media screen and (max-width: 80em) {
.bannerDetail {
 color: #fff;
 position: absolute;
 text-align:center;
 display: table-cell;
 vertical-align: middle;
 left:auto;
 right:auto;
 text-shadow: 2px 2px 2px #000; 
 font-size: 2.8em;
 left:8%;
 top:35%;

  }
}

@media screen and (max-width: 64em) {
.bannerDetail {
 color: #fff;
 position: absolute;
 text-align:center;
 display: table-cell;
 vertical-align: middle;
 left:auto;
 right:auto;
 left:0px;
 top:35%;
 text-shadow: 2px 2px 2px #000; 
 font-size: 2.5em;


 }
}

@media screen and (max-width: 50em) {
.bannerDetail {
 color: #fff;
 position: absolute;
 text-shadow: 2px 2px 2px #000; 
 font-size: 2em;
  text-align:center;
display: table-cell;
 vertical-align: middle;
 left:auto;
 right:auto;
 left:0px;
  top:35%;

 }
}

@media screen and (max-width: 30em){
.bannerDetail {
 color: #fff;
 text-align:center;
display: table-cell;
 vertical-align: middle;
 left:auto;
 right:auto;
 position: absolute;
 text-shadow: 2px 2px 2px #000; 
 font-size: 1.5em;
 top:20%;
 left:-1%;
 }
}