section[role="main"]   {width: 75%;}
div #menu {z-index:1;}
/*#pageGalerie section[role="main"] #pageGalerie {width: 1200px;}*/

section[role="main"] h3  { margin-bottom:1rem; }

section #flex-container {
	display: flex;
  	flex-flow: column; 
	z-index: 2; 
	margin:0; padding: 0;
	background: #f5fffa url("img/canvasbg.gif");}
#flex-container a {
  display: inline-block;
  margin:0.25rem ;
  padding:0;
  width: calc(98% - 2px);
  text-decoration: none;
  color: black; 
  flex-grow: 1; z-index: 4;
  background: inherit;}
#flex-container a:nth-of-type(odd) {
  margin-right: 0.015rem;
  z-index: 80;}
#flex-container a:nth-of-type(even) {
  margin-right: 0.015rem;
  z-index: 80;}
#flex-container a figure img{
  max-width: 75%;
  margin:1rem 0 0.5rem 1rem;
   z-index: 80;}
figure {
 margin: 0.25rem;
 width: 140%; max-width: 140%;}
/*figcaption {   margin: 0 ; padding:0;}*/
#flex-container img {
 z-index: 1;
  border: none;
   width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin:0; padding:0;
  transition: transform .2s ease-in-out; z-index: 16;}
#flex-container img:hover  {transform: scale(1.50); z-index: 100; }
 
@media screen and (min-width: 450px) {
section #flex-container {
	display: flex;
 	flex-flow: row wrap; 
	background: inherit;}
#flex-container a {
 display: inline-block;
 margin:0 0rem 0 0rem;
 padding:0;
 width: calc(33% - 2px);
 text-decoration: none;
 color: black; 
 flex-grow: 1; z-index: 4;
 background: inherit;}
figure {
 margin: 0.25rem;
 width: 120%; max-width: 140%;}
#flex-container a figure img{
  max-width: 75%;
  margin:1rem 0 0.5rem 1rem;
   z-index: 80;}	
 }