/* CSS Document NGBW*/
/* copyright: web/printdesign.net*/
/*Bilder der einzelnen Rubriken / Beginn Grid Style */
#container { 
display:block;
position:relative; 
z-index:100; 
box-sizing: border-box; 
width:100%;
background-color:#ffffff;
padding-top:0.0em;
margin:auto;
  height:auto; 
  display: grid; 
  grid-template-rows: auto auto; /* Anzahl der Reihen*/
  grid-template-columns: 33.33% 33.33% 33.33%; /* Anzahl der Spalten*/
  /* kann beeinflusst werden, nach welcher Regel die Kind-Elemente im Raster einsortiert werden. Der Wert
		column führt beispielsweise zu folgender Anordnung:*/
	grid-auto-flow: row; /*Anordnung der Inahlt, default bzw. >row< von oben links nach rechts unten*/
	grid-row-gap:10px;   /*Abstände zwischen Reihen Kurzschreibweise:grid-gap: 20px 10px; */
 	grid-column-gap: 10px;  /*Abstände zwischen Spalten */
}

#container img {width:100%;height:auto;}
 /*Positionierung nicht über Rasterspalten, sondern über Rasterlinien */
#container img.zoom {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
 -webkit-transform: scale(1.1, 1.1);
 -o-transform: scale(1.1, 1.1);
 -ms-transform: scale(1.1, 1.1);

}
#container  img.zoom:hover {
 cursor: zoom-in; 
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(1.2, 1.2);
 -moz-transform: scale(1.2, 1.2);
 -webkit-transform: scale(1.2, 1.2);
 -o-transform: scale(1.2, 1.2);
 -ms-transform: scale(1.2, 1.2);

}
.B1 { 
background-color:#cdcdcd;
  grid-column-start:1; /*Langschreibweise */
  grid-column-end:2; /*Langschreibweise */
  grid-row-start:1; /*Langschreibweise */
  grid-row-end:2; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
 }
.B2 { 
background-color:#ffffff;
  grid-column-start:2; /*Langschreibweise */
  grid-column-end:3; /*Langschreibweise */
  grid-row-start:1; /*Langschreibweise */
  grid-row-end:2; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
} 
.B3{ 
background-color:#ffffff;
  grid-column-start:3; /*Langschreibweise */
  grid-column-end:4; /*Langschreibweise */
  grid-row-start:1; /*Langschreibweise */
  grid-row-end:2; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
} 

.B4 { 
background-color:#ffffff;
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:2; 
  grid-row-end:3; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}
.B5 { 
background-color:#ffffff;
  grid-column-start:2; 
  grid-column-end:3; 
  grid-row-start:2; 
  grid-row-end:3; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}
.B6 { 
background-color:#ffffff;
  grid-column-start:3; 
  grid-column-end:4; 
  grid-row-start:2; 
  grid-row-end:3; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}


 
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*PADS, SMARTPHOES, TABLETS per Touchscreen*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*Media screnn max-width 1365 Pixel */
@media screen and (max-width:1365px) /*and(pointer:coarse)*/
{/*Bilder der einzelnen Rubriken / Beginn Grid Style */
#container { 
display:block;
position:relative; 
z-index:100; 
box-sizing: border-box; 
width:100%;
height:auto; 
background-color:#ffffff;
padding-top:0.0em;
margin:auto;
  height:auto; 
  display: grid; 
   grid-template-rows: auto auto; /* Anzahl der Reihen*/

  grid-template-columns: 50% 50%; /* Anzahl der Spalten*/
  /* kann beeinflusst werden, nach welcher Regel die Kind-Elemente im Raster einsortiert werden. Der Wert
		column führt beispielsweise zu folgender Anordnung:*/
	grid-auto-flow: row; /*Anordnung der Inahlt, default bzw. >row< von oben links nach rechts unten*/
	grid-row-gap:10px;   /*Abstände zwischen Reihen Kurzschreibweise:grid-gap: 20px 10px; */
 	grid-column-gap: 10px;  /*Abstände zwischen Spalten */
}

#container img {width:100%;height:auto;}
 /*Positionierung nicht über Rasterspalten, sondern über Rasterlinien */
#container img.zoom {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
 -webkit-transform: scale(1.1, 1.1);
 -o-transform: scale(1.1, 1.1);
 -ms-transform: scale(1.1, 1.1);

}
#container  img.zoom:hover {
 cursor: zoom-in; 
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(1.2, 1.2);
 -moz-transform: scale(1.2, 1.2);
 -webkit-transform: scale(1.2, 1.2);
 -o-transform: scale(1.2, 1.2);
 -ms-transform: scale(1.2, 1.2);

}
.B1 { 
background-color:#ffffff;
  grid-column-start:1; /*Langschreibweise */
  grid-column-end:2; /*Langschreibweise */
  grid-row-start:1; /*Langschreibweise */
  grid-row-end:2; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
 }
.B2 { 
background-color:#ffffff;
  grid-column-start:2; /*Langschreibweise */
  grid-column-end:3; /*Langschreibweise */
  grid-row-start:1; /*Langschreibweise */
  grid-row-end:2; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
} 
.B3{ 
background-color:#ffffff;
  grid-column-start:1; /*Langschreibweise */
  grid-column-end:2; /*Langschreibweise */
  grid-row-start:2; /*Langschreibweise */
  grid-row-end:3; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
} 

.B4 { 
background-color:#ffffff;
  grid-column-start:2; 
  grid-column-end:3; 
  grid-row-start:2; 
  grid-row-end:3; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}
.B5 { 
background-color:#ffffff;
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:3; 
  grid-row-end:4; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}
.B6 { 
background-color:#ffffff;
  grid-column-start:2; 
  grid-column-end:3; 
  grid-row-start:3; 
  grid-row-end:4; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}
 /*End Grid Style */


 /*Media screnn max-width 650 Pixel */
@media screen and (max-width:650px)
{/*Bilder der einzelnen Rubriken / Beginn Grid Style */
#container { 
display:block;
position:relative; 
z-index:100; 
box-sizing: border-box; 
width:100%;
 height:auto; 
background-color:#ffffff;
margin-top:0.0em;
height:auto; 
display: grid; 
grid-template-rows: auto auto auto auto auto auto; /* Anzahl der Reihen*/
grid-template-columns: 100%; /* Anzahl der Spalten*/
  /* kann beeinflusst werden, nach welcher Regel die Kind-Elemente im Raster einsortiert werden. Der Wert
		column führt beispielsweise zu folgender Anordnung:*/
	grid-auto-flow: row; /*Anordnung der Inahlt, default bzw. >row< von oben links nach rechts unten*/
	grid-row-gap:10px;   /*Abstände zwischen Reihen Kurzschreibweise:grid-gap: 20px 10px; */
 	grid-column-gap: 10px;  /*Abstände zwischen Spalten */
}

#container img {width:100%;height:auto;}
 /*Positionierung nicht über Rasterspalten, sondern über Rasterlinien */
#container img.zoom {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
  transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
 -webkit-transform: scale(1.1, 1.1);
 -o-transform: scale(1.1, 1.1);
 -ms-transform: scale(1.1, 1.1);

}
#container  img.zoom:hover {
 cursor: zoom-in; 
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(1.2, 1.2);
 -moz-transform: scale(1.2, 1.2);
 -webkit-transform: scale(1.2, 1.2);
 -o-transform: scale(1.2, 1.2);
 -ms-transform: scale(1.2, 1.2);

}
.B1 { 
background-color:#ffffff;
  grid-column-start:1; /*Langschreibweise */
  grid-column-end:2; /*Langschreibweise */
  grid-row-start:1; /*Langschreibweise */
  grid-row-end:2; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
 }
.B2 { 
background-color:#ffffff;
  grid-column-start:1; /*Langschreibweise */
  grid-column-end:2; /*Langschreibweise */
  grid-row-start:2; /*Langschreibweise */
  grid-row-end:3; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
} 
.B3{ 
background-color:#ffffff;
  grid-column-start:1; /*Langschreibweise */
  grid-column-end:2; /*Langschreibweise */
  grid-row-start:3; /*Langschreibweise */
  grid-row-end:4; /*Langschreibweise */
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
} 

.B4 { 
background-color:#ffffff;
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:4; 
  grid-row-end:5; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}
.B5 { 
background-color:#ffffff;
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:5; 
  grid-row-end:6; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}
.B6 { 
background-color:#ffffff;
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:6; 
  grid-row-end:7; 
  overflow:hidden;
  border: 2px solid rgb(255, 255, 255);
}

 /*End Grid Style */