@charset "utf-8";
/* CSS Document */

/***************************************************  Bildernavi  ******************************************************/



img.bild2 {display:none;}



.bilder-navi {width:100%;  position:relative; height:auto; background-color:#FFF; z-index:5;}
.bilder-navi div {width:25%; height:auto;  float:left;}
.bilder-navi img {width:100%;}








  





/*************************************************************************************************************************/
/************************************** gleicher Code im IE-Bug (einfach 1:1 in ie.css und ie-10.css kopieren ******************************************************//*  Bildernavi Hover - Effekt einstellen */


#bild1, #bild2, #bild3, #bild4 {
  position:relative;
  height:auto;
  width:100%;
  margin:0 auto;
}

.bilder-navi div img {
  position:relative;
  left:0;
  top:0;

}

div img.top:hover {
  opacity:1;
}

#bild1 img, #bild2 img, #bild3 img, #bild4 img {width:100%; height:auto;}

/*
.bilder-navi {width:100%; max-width:1660px;}
.bilder-navi img {width:33.3334%; height:auto;  float:left;}
*/




@media (min-width: 500px)  {
#bild1, #bild2, #bild3, #bild4 {
  position:relative;
  height:auto;
  width:50%;
  margin:0 auto;
}

#bild3, #bild4  {  position:relative; top:-5px;}	
}

@media (min-width: 850px)  { 
div img.top:hover {
  opacity:0;
}


img.top {display:block;}
img.bild2 {display:block;}

.bilder-navi div img {
  position:absolute;
  left:0;
  top:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#bild1, #bild2, #bild3, #bild4 {
  position:relative;
  height:auto;
  min-height:150px;
  max-width:553px;
  width:25%;
  margin:0 auto;
}

.bilder-navi div img {
  position:absolute;
  left:0;
  top:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#bild3, #bild4  {  position:relative; top:0px;}	
}




@media (min-width: 1070px)  { 
#bild1, #bild2, #bild3, #bild4 {
  position:relative;
  height:auto;
  max-height:268px;
  width:25%;
  margin:0 auto;
  border-top: 0px #FFF solid;
  border-bottom: 0px #FFF solid;
  border-left: 0px #FFF solid;
  border-right: 0px #FFF solid;
  padding-top:0px;   /*  Breite weißer Rand oben einstellen   */
}
#bild1 {margin-left:0px;}

body#agentur .container-weiss {padding-top:3%;}
 }
 
 
 
@media (min-width: 1320px)  { 
#bild1, #bild2, #bild3, #bild4 {min-height:214px;  width:25%;} 
}


@media (min-width: 1600px)  {  h1.agentur { z-index:-1; } }

@media (min-width: 1617px)  {  
#bild1, #bild2, #bild3, #bild4 {
  position:relative;
  height:auto;
  max-height:268px;
  width:25%;
}


#bild1 {margin-left:0px;}


}