body {
  background-color: #1e7180;
  color: #ffeeaa;
  overflow:hidden;
}


@media screen and (min-width: 1501px) {
  .photo {
  width: calc(16.6666% - 16px);
  height: calc(100vw / 6 - 16px);
  }
  .bijschrift {
    font: 40px Arial, sans-serif;
  }
  .header {
    font-size: 40px;
  }
}

@media screen and (min-width: 1201px) and (max-width: 1500px) {
  .photo {
    width: calc(20% - 16px);
    height: calc(100vw / 5 - 16px);
  }  
  .bijschrift {
    font: 32px Arial, sans-serif;
  }
  .header {
    font-size: 40px;
  }
}

@media screen and (min-width: 1001px) and (max-width: 1200px) {
  .photo {
    width: calc(25% - 16px);
    height: calc(100vw / 4 - 16px);
  }
  .bijschrift {
    font: 28px Arial, sans-serif;
  }
  .header {
    font-size: 30px;
  }
}


@media screen and  (min-width: 701px) and (max-width: 1000px) {
  .photo {
    width: calc(33.33333% - 16px);
    height: calc(100vw / 3 - 16px);
  }  
  .bijschrift {
    font: 26px Arial, sans-serif;
  }
  .header {
    font-size: 20px;
  }
}


@media screen and (min-width: 401px) and (max-width: 700px) {
  .photo {
    width: calc(50% - 16px);
    height: calc(100vw / 2 - 16px);
  }
  .bijschrift {
    font: 24px Arial, sans-serif;
  }
  .header {
    font-size: 12px;
  }
}

@media screen and (max-width: 400px) {
  .photo {
    width: calc(100vw - 16px);
    height: calc(100vw - 16px);
  }
  .bijschrift {
    font: 20px Arial, sans-serif;
  }
  .header {
    font-size: 12px;
  }
}


.photo {
  float:left;
  position: relative;
	transition: transform 400ms ease-out;
  cursor:pointer;
  margin:8px;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(64, 64, 64, 0.4);
	overflow: hidden;
  
}
.photo img{
  filter: grayscale(1);
  opacity: 0.8;
  object-fit: cover;
  width:100%;
  height:100%;
  transition: .4s;
}

.photo:hover > img {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.15);
}


.jaartal {
  display:block;
  position:absolute;
  bottom: 5px;
  left: 10px;
  color: #ffeeaa;
  font: 20px Arial, sans-serif;
  text-shadow: 2px 2px #000;
}
.gallery {
  margin-bottom: 40px;
  height:100%;
  overflow-y:auto;
}
.gallery.is-expanded {
  overflow:hidden;
}

.gallery.is-expanded > .photo:not(.is-active) {
  pointer-events: none;
  opacity: .2;
  transform: scale(.8) skew(6deg);
  filter: grayscale(1);
}



.bijschrift {
  text-align:center;
  position:absolute;
  bottom:20px;
  color:#ffeeaa;
  width:100%;
  padding: 10px 0px;
  text-shadow: 2px 2px #000;
}

.bijschrift h4, .bijschrift h6 {
  margin: 0;
}

.bijschrift h4 {
  font-size: 1em;
}
.bijschrift h6 {
  font-size: 1rem;
}

.footer {
  background-color: #1e7180;
  text-align: center;
  width: 100%;
  color: #ffeeaa;
  position: fixed;
  padding: 5px 5px;
  bottom: 0;
  left:0;
  font: 12px Arial, sans-serif;
  z-index:2;
}

.header {
  background-color: #1e7180;
  text-align: center;
  width:100%;
  color: #ffeeaa;
  position: sticky;
  padding: 5px 5px;
  top: 0;
  z-index:3;
}
.header h2 {
  color: red;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 10px;
  font-family: Sancreek;
  font-size:3em;
  background-color: #ffeeaa;
  border-radius: 15px;
}
.header h5 {
  margin: 3px;
  width: 100%;
  text-shadow: 1px 1px 0 #444;
}

.fotocontainer {
  display:block;
  padding-bottom: 20px;
  width:100%;
  text-align: center;
  top:0;
  position: fixed;
  z-index: 3;
}

.grotefoto {
  position:relative;
}

.grotefoto img {
  max-height: calc(100vh - 20px);
  max-width: calc(100vw - 3px);
  filter: grayscale(0);
  border: 3px solid #ffeeaa;
}

.btnNotification {
  background-color: #ffeeaa;
  color: black;
}

.updatebutton, .installbutton {
	display:none;
	width:100%;
  background-color: #ffeeaa;
  color: red;
  position: fixed;
  z-index:999;
  text-align: center;
}

.updatebutton {
  bottom: 75px;
}

.installbutton {
  bottom:25px;
}

.overlay {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;

}

.vorige {
  width: 10%;
  height : 100%;
  float: left;
  text-align:left;
}

.volgende {
  width: 10%;
  height: 100%;
  float: right;
  text-align:right;
}

.exit {
  width: 80%;
  height : 100%;
  float: left;
  text-align:center;
}

.knop {
  background-color: #00000040;
  font-size: 4em!important;
  border-radius:50%;
  min-width:80px;
  min-height: 80px;
  text-align:center;
  padding:10px;
  position: absolute;
  top: calc(50% - 40px);
}

.volgende .knop {
  right: 10px;
}

.vorige .knop {
  left: 10px;
}


@media screen and (max-width: 500px) {
  .vorige {
    width: 25%;
  }
  
  .volgende {
    width: 25%;
  }
  
  .exit {
    width: 50%;
  }
  
  .knop {
    font-size: 2em!important;
    min-width: 50px;
    min-height: 50px;
  }


}

@media (pointer:coarse) {
  .vorige{
    visibility: hidden;
    width:0%;
  }
  .volgende{
    visibility: hidden;
    width:0%;
  }
  .exit {
    width:100%;
  }
}
.fade-in {

  opacity: 1;
  transition: opacity .3s linear;
  visibility: visible;
}

.fade-out {

  opacity: 0;
  transition: visibility 0s .3s, opacity .3s linear;
  visibility: hidden;
}