/* general settings */

* {
  font-family: Liberation Sans, DejaVu Sans, sans-serif;
  box-sizing: border-box;
}

b{
  font-size: 1.0em;
  font-weight: bold;
}

i{
  font-size: 1.0em;
  font-style: italic;
}

pink{
  font-size: 1.0em;
  color: #FF00FF;
}

.fixed-container{
    position: fixed;
    padding: 20px 6px 6px 6px;
    left:0;
    right:0;
    top:0;
    height: 110px;
    background-image: url('../kachel_neumen_noten_f7f5e1.png');
}

.header-container {
  display: grid;
  grid-template-columns: auto auto;
}

.header-item1 {
  text-align: left;
  color: #000000;
  font-size: 2.0em;
  padding: 6px 6px 40px 6px;
}

.header-item2 {
  text-align: right;
  padding: 6px 6px 40px 6px;
}

.text-container {
  display: grid;
  grid-template-columns: auto auto;
  padding-top: 110px;
}

.text-item1 {
  text-align: left;
  color: #000000;
  font-size: 1.0em;
  padding: 6px 6px 6px 6px;
}

.text-item2 {
  text-align: justify;
  color: #000000;
  font-size: 1.0em;
  padding: 6px 6px 6px 6px;
}

.footer-container {
  display: grid;
  grid-template-columns: 180px 180px 180px 180px 180px auto;
}

.footer-item1 {
  text-align: center;
  color: #000000;
  font-size: 0.8em;
  padding: 0px 6px 36px 6px;
}

.footer-item2 {
  text-align: right;
  color: #000000;
  font-size: 0.8em;
  padding: 0px 6px 36px 6px;
}

figure.gallery {
  border: none;
}

figure.image {
  opacity: 1.0;
}

figure.gallery:hover .image {
  border: 6px solid #0000FF;
  opacity: 0.6;
}

figure.gallery img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* max-width: 100%; */ /* Doesn't work for mix of landscapes & portraits! Required width values: landscape: width: 100%; portrait: width: 45.66666%*/
  height: auto;
  border: 6px solid rgba(247, 245, 225, 0); /* color 0xF7F5E1 (background) + full transparency = zero opacity */
}

figcaption.picdesc {
  color: #000000;
  font-size: 0.8em;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
}

figcaption.picdesc-left {
  color: #000000;
  font-size: 0.8em;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 8px;
  text-align: left;
}

.responsive {
  display: grid;
  grid-template-columns: 16.66666% 16.66666% 16.66666% 16.66666% 16.66666% 16.66666%;
}

@media only screen and (max-width: 2560px) {
  .responsive {
    grid-template-columns: 25% 25% 25% 25%;
  }
}

@media only screen and (max-width: 1920px) {
  .responsive {
    grid-template-columns: 33.33333% 33.33333% 33.33333%;
  }
}

@media only screen and (max-width: 1280px) {
  .responsive {
    grid-template-columns: 50% 50%;
  }
}

@media only screen and (max-width: 800px) {
  .responsive {
    grid-template-columns: 100%;
  }
}

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