/* Slideshow ****************************************************/
#slideshow{
  min-width: 100%;
  max-width: 100%;
  min-height: 100vh;
  background-color: #FDFDF9;
  text-align: center;
  }

  #slideshow h4{
    margin-bottom: 9px;
  }

  .slideshow{
  width: 55vw;
  max-height: 82vh;
  height: calc(55vw / 1.499);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.slideshow_navigation{
   position: absolute;
  /* bottom: 15px;*/
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b10{
  width: 4vw;
  height: 0.8vw;
  border: 2px solid #FFFFFF;
  border-radius: 4px;
  margin: calc(-20px - 0.8vw) 0.3vw 6px 0.3vw;
  cursor: pointer;
}

#b1{
    animation-duration: 60s;
    animation-name: Bildanzeige_b1;
    animation-iteration-count: infinite;
}

#b2{
    animation-duration: 60s;
    animation-name: Bildanzeige_b2;
    animation-iteration-count: infinite;
}

#b3{
    animation-duration: 60s;
    animation-name: Bildanzeige_b3;
    animation-iteration-count: infinite;
}

#b4{
    animation-duration: 60s;
    animation-name: Bildanzeige_b4;
    animation-iteration-count: infinite;
}

#b5{
    animation-duration: 60s;
    animation-name: Bildanzeige_b5;
    animation-iteration-count: infinite;
}

#b6{
    animation-duration: 60s;
    animation-name: Bildanzeige_b6;
    animation-iteration-count: infinite;
}

#b7{
    animation-duration: 60s;
    animation-name: Bildanzeige_b7;
    animation-iteration-count: infinite;
}

#b8{
    animation-duration: 60s;
    animation-name: Bildanzeige_b8;
    animation-iteration-count: infinite;
}

#b9{
    animation-duration: 60s;
    animation-name: Bildanzeige_b9;
    animation-iteration-count: infinite;
}

#b10{
    animation-duration: 60s;
    animation-name: Bildanzeige_b10;
    animation-iteration-count: infinite;
}


 input[name="r"]{
 position: absolute;
 visibility: hidden;
}

.slides{
  width: 1000%;
  height: 100%;
  display: flex;
}

#s1{
  animation-duration: 60s;
  animation-name: animation;
  animation-iteration: infinite;
  animation-iteration-count: infinite;
}

#b9{
  transform: rotate(180deg);
}

.slide, #s1{
  width: 10%;
  transition: 0.6s;
}

.slide img{
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border: 4px solid #000;
  border-radius: 4px;
}

#s1 img{
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border: 4px solid #000;
  border-radius: 4px;
}

@keyframes animation {
  0%{
    margin-left: 0;
  }
  8%{
    margin-left: 0;
  }
  10%{
    margin-left: -10%;
  }
  18%{
    margin-left: -10%;
  }
  20%{
    margin-left: -20%;
  }
  28%{
    margin-left: -20%;
  }
  30%{
    margin-left: -30%;
  }
  38%{
    margin-left: -30%;
  }
  40%{
    margin-left: -40%;
  }
  48%{
    margin-left: -40%;
  }
  50%{
    margin-left: -50%;
  }
  58%{
    margin-left: -50%;
  }
  60%{
    margin-left: -60%;
  }
  68%{
    margin-left: -60%;
  }
  70%{
    margin-left: -70%;
  }
  78%{
    margin-left: -70%;
  }
  80%{
    margin-left: -80%;
  }
  88%{
    margin-left: -80%;
  }
  90%{
    margin-left: -90%;
  }
  98%{
    margin-left: -90%;
  }
}

@keyframes Bildanzeige_b1{
  0%{
      background-color: #FFF;
  }
  8%{
      background-color: #FFF;
  }
  10%{
    background-color: transparent;
  }
  98%{
    background-color: transparent;
  }
  100%{
      background-color: #FFF;
  }
}

@keyframes Bildanzeige_b2{
  0%{
      background-color:  transparent;
  }
  8%{
      background-color:  transparent;
  }
  10%{
    background-color:#FFF;
  }
  18%{
    background-color:#FFF;
  }
  20%{
      background-color:  transparent;
  }
  100%{
      background-color:  transparent;
  }
}

@keyframes Bildanzeige_b3{
  0%{
      background-color:  transparent;
  }
  18%{
      background-color:  transparent;
  }
  20%{
    background-color:#FFF;
  }
  28%{
    background-color:#FFF;
  }
  30%{
      background-color:  transparent;
  }
  100%{
      background-color:  transparent;
  }
}

@keyframes Bildanzeige_b4{
  0%{
      background-color:  transparent;
  }
  28%{
      background-color:  transparent;
  }
  30%{
    background-color:#FFF;
  }
  38%{
    background-color:#FFF;
  }
  40%{
    background-color: transparent;
  }
  100%{
    background-color: transparent;
  }
}

@keyframes Bildanzeige_b5{
  0%{
      background-color:  transparent;
  }
  38%{
      background-color:  transparent;
  }
  40%{
    background-color:#FFF;
  }
  48%{
    background-color:#FFF;
  }
  50%{
      background-color:  transparent;
  }
  100%{
      background-color:  transparent;
  }
}

@keyframes Bildanzeige_b6{
  0%{
      background-color:  transparent;
  }
  48%{
      background-color:  transparent;
  }
  50%{
    background-color:#FFF;
  }
  58%{
    background-color:#FFF;
  }
  60%{
      background-color:  transparent;
  }
  100%{
      background-color:  transparent;
  }
}

@keyframes Bildanzeige_b7{
  0%{
      background-color:  transparent;
  }
  58%{
      background-color:  transparent;
  }
  60%{
    background-color:#FFF;
  }
  68%{
    background-color:#FFF;
  }
  70%{
    background-color: transparent;
  }
  100%{
    background-color: transparent;
  }
}

@keyframes Bildanzeige_b8{
  0%{
      background-color:  transparent;
  }
  68%{
      background-color:  transparent;
  }
  70%{
    background-color:#FFF;
  }
  78%{
    background-color:#FFF;
  }
  80%{
      background-color:  transparent;
  }
  100%{
      background-color:  transparent;
  }
}

@keyframes Bildanzeige_b9{
  0%{
      background-color:  transparent;
  }
  78%{
      background-color:  transparent;
  }
  80%{
    background-color:#FFF;
  }
  88%{
    background-color:#FFF;
  }
  90%{
      background-color:  transparent;
  }
  100%{
      background-color:  transparent;
  }
}

@keyframes Bildanzeige_b10{
  0%{
      background-color:  transparent;
  }
  88%{
      background-color:  transparent;
  }
  90%{
    background-color:#FFF;
  }
  98%{
    background-color:#FFF;
  }
  100%{
    background-color: transparent;
  }
}

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

  .slideshow{
    width: 80vw;
    max-height: 80vh;
    height: calc(80vw / 1.499);
    overflow: hidden;
  }
}

/* Portrait ****************************************************/
@media screen and (max-width: 900px){

.slideshow{
    width: 90vw;
    max-height: 80vh;
    height: calc(90vw / 1.499);
    overflow: hidden;
  }
}