/* ======================
    Grid
   ====================== */
   
	body {
		min-height: 1000px;
		font-family: sans-serif;
		line-height: 150%;
	}
	
	.grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */
	}

	.grid div {
		margin-top: 2em;
		padding-right: 2em;
	}

/* ======================
    Text hoover
   ====================== */
  
.container {
  position: relative;
  width: 100%;
  display: grid;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width:80%
}

.container:hover .image {
  filter: brightness(50%)
}

.container:hover .middle {
  opacity: 1;
}

.text {
  color: #FFF;
  font-size: 16px;
  padding: 10px 10px;
  text-align: left;
  line-height: 2em;
}
h2 {
  color: #FFF;
  font-size: 24px;
  font-weight:bold;
  text-transform: none;
}
.chairname {
  color: #FFF;
  font-size: 28px;
  font-weight:bold;
  text-transform: none;
}

/* ======================
    Video overlay
   ====================== */

   #overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 5; /* Specify a stack order in case you're using a different order for other elements */
    cursor: not-allowed; /* Add a pointer on hover */
  }