body {
  max-width: 1400px;
  background-color: #000099;
  margin: auto;
}

img {
  max-width: 100%;
  height: auto;
}

img.left {
  float:left;
  margin-right: 2em;
  margin-top: -0.5em;
  margin-bottom: 0em;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fmargin {
  margin: 1.5em;
}

.column {
  float: left;
  width: 28%;
  height: 400px;
  background-color: #00E0FF;
  margin: 0.5em;
  padding: 1em;
  border-style: solid;
  border-width: 0.4em;
  border-color: #00E0FF;
}

.column:hover {
  border-color: #FF0000;
}

.back {
  float: left;
  width: 97%;
  background-color: #00E0FF;
  margin: 0em;
  padding: 1em;
  border-style: solid;
  border-width: 0.4em;
  border-color: #00E0FF;
}

.back:hover {
  border-color: #FF0000;
}


.fotocolumn {
  float: left;
  width: 20%;
  height: 240px;
  background-color: #00E0FF;
  margin: 0.5em;
  padding: 1em;
  border-style: solid;
  border-width: 0.4em;
  border-color: #00E0FF;
}

.fotocolumn:hover {
  border-color: #FF0000;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

main {
  float: left;
  background-color: #00E0FF;
  margin-top: 0.5em;
  padding: 1em;
}


h1 {
  font-family:arial;
  font-size:3em;
  margin: 0em;
  padding: 0.5em;
  width=100%;
  background-color: #00E0FF;
}

h2 {
  font-family:arial;
  font-size:2em;
  margin: 0em;
  padding: 0em;
  width:100%
}
h3 {
  font-family:arial;
  font-size:1.5em;
  margin-bottom: 0.4em;
  padding: 0em;
  text-align:center;
}
h4 {
  font-family:arial;
  font-size:1em;
  margin: 0em;
  padding: 0em;
}

a, a:visited, a:active, a:hover, p, li, td, th {
  font-family:arial;
  font-size:1em;
  color:#000000;
}
p.sign {
  text-align:right;
  font-style:italic;
}
p.zitat {
text-align:justify;
margin-left:50px;
margin-right:50px;
font-style:italic;
}
p.quelle {
margin-top:0px;
text-align:right;
}

a.up, a.up:visited, a.up:active, a.up:hover {
  font-family:arial;
  font-size:1em;
  text-decoration:none;
  color:#000000;
}
a.email:link, a.email:visited, a.email:active {
font-family:arial;
text-decoration:none;
font-style:italic;
color:#000099;
}
a.email:hover {
font-family:arial;
text-decoration:underline;
font-style:normal;
color:#000099;
}
a.zip:link, a.zip:visited, a.zip:active {
font-family:arial;
text-decoration:none;
font-style:italic;
color:#000099;
}
a.zip:hover {
font-family:arial;
text-decoration:underline;
font-style:normal;
color:#000099;
}


#galerie {
  box-sizing: border-box;
  padding: 4em 6em;
}
#galerie figure {
  background: #FFF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  display: inline-block;
  height: 15em;
  margin: 0 0 1em 2em;
  overflow: hidden;
  padding: 0;
  width: 20em;
  transition: all 0.25s ease-in;
}
#galerie figure.hoch {
  height: 20em;
  width: 15em;
}
#galerie figure.hoch2 {
  height: 28em;
  width: 14em;
}
#galerie figure.breit1 {
  height: 20em;
  width: 20em;
}
#galerie figure.breit2 {
  height: 14em;
  width: 28em;
}
#galerie figure.breit3 {
  height: 10em;
  width: 30em;
}
#galerie figure.breit6 {
  height: 7em;
  width: 42em;
}
#galerie figure.breit53 {
  height: 15em;
  width: 25em;
}

#galerie figure img {
  width: 20em;
  height: 15em;
}
#galerie figure.hoch img {
  width: 15em;
  height: 20em;
}
#galerie figure.hoch2 img {
  width: 14em;
  height: 28em;
}
#galerie figure.breit1 img {
  height: 20em;
  width: 20em;
}
#galerie figure.breit2 img {
  height: 14em;
  width: 28em;
}
#galerie figure.breit3 img {
  height: 10em;
  width: 30em;
}
#galerie figure.breit6 img {
  height: 7em;
  width: 42em;
}
#galerie figure.breit53 img {
  height: 15em;
  width: 25em;
}

#galerie figure:hover,
#galerie figure:focus {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  margin: -1em 0px 0 20px;
  padding: 5px 5px 30px 5px;
  width: 20em;
  z-index: 2;
  transform: scale(2);
}
#galerie figure.hoch:hover,
#galerie figure.hoch:focus {
  width: 15em;
}
#galerie figure.hoch2:hover,
#galerie figure.hoch2:focus {
  width: 14em;
}
#galerie figure.breit1:hover,
#galerie figure.breit1:focus {
  width: 20em;
}
#galerie figure.breit2:hover,
#galerie figure.breit2:focus {
  width: 28em;
}
#galerie figure.breit3:hover,
#galerie figure.breit3:focus {
  width: 30em;
}
#galerie figure.breit6:hover,
#galerie figure.breit6:focus {
  width: 42em;
}
#galerie figure.breit53:hover,
#galerie figure.breit53:focus {
  width: 25em;
}

#galerie figcaption {
  color: #333;
  font-family:arial;
  font: arial 10px/150%;
  position: relative;
  text-align: center;
  width: 20em;
}
#galerie figcaption.hoch {
  width: 15em;
}

#galerie:after {
  clear: both;
  content: " ";
  display: block;
}

@media screen and (max-width: 1100px) {
  .column {
    width: 45%;
  }
  .fotocolumn {
    width: 45%;
  }
  #galerie {
    padding: 4em 10em;
  }
}
@media screen and (max-width: 700px) {
  .column {
    width: 90%;
  }
  .fotocolumn {
    width: 90%;
  }
  #galerie {
    padding: 2em 10em;
  }
}