#galOverlay {
  width: 100%;
  height: 100%;
  position: fixed;
  display:block;
  background-color: rgba(0,0,0,0.5);
  z-index: 1002;
  padding-top:20px;
  display:none;
}

#galHolder {
  width:1000px;
  height:700px;
  margin: 0 auto;
  text-align: center;
  /*background-color: red;*/
  display: block;
}

.slides {
  width: 1000px;
  height: auto;
}

.simpleSlides {
  width:100%;
  height:300px;
  text-align: center;
  display: block;
}

#slideFooter {
  display: block;
  background-color: green;
}


#pfeilLinks {
  width:30px;
  height:60px;
  color:white;
  font-size: 20px;
  text-align: center;
  float:left;
  margin-left:10px;
} 

#pfeilRechts {
  width:30px;
  height:60px;
  color:white;
  font-size: 20px;
  text-align: center;
  float:right;
  margin-right: 25px;
}

.pfeil {
  background-color: white;
  border-radius: 50%;
  padding: 10px 15px;
  color: black;
}

.schliessen{
  background-color: white;
  font-size:18px;
  border-radius: 50%;
  padding: 10px 15px;
  color: black;
}


.animate-left {
  position: relative;
  animation: animateleft 0.8s
}

@keyframes animateleft { 
  from { left :-100px; opacity:0 } 
  to { left:0; opacity:1 }
}

.drueber:hover {
  cursor:pointer;
}

@media only screen and (max-width: 1700px) {

  #galHolder { width: 800px; height: 500px; }

}

@media only screen and (max-width: 1000px) {

  #galHolder { width: 800px; height: 600px; }

}


@media only screen and (max-width: 830px) {

  #galHolder { width: 650px; height: 500px; }
  .simpleSlides { height: 250px; }

}

@media only screen and (max-width: 666px) {
  #galOverlay { background-color: rgba(0,0,0,0.8); }
  #galHolder { width: 550px; }
  .simpleSlides { height: 200px; }

}

@media only screen and (max-width: 570px) {
  #galHolder { width: 80%; }
  .simpleSlides { height: 150px; }

}