/* https: //unused-css.com/blog/css-only-background-slider/ */

.slider {
   overflow: hidden;
   width: 100vw;
   height: 40vh;
   position: relative;
   z-index: 10;
   background-color: black;
}

section#one.main.style1 {
   height: 60vh;
   min-height: 600px;
}

section#one p {
   margin-bottom: 70px;
}

.slider .slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   animation: slider 18s infinite;
}

.slider .slide:nth-child(1) {
   background-image: url('https://waldkiga.uber.space/images/slider/Titel01_crop.JPG');
   animation-delay: 0s;
}

.slider .slide:nth-child(2) {
   background-image: url('https://waldkiga.uber.space/images/slider/wald_kids_1.JPG');
   animation-delay: -6s;
}

.slider .slide:nth-child(3) {
   background-image: url('https://waldkiga.uber.space/images/slider/Fuesse.JPG');
   animation-delay: -12s;
}


@keyframes slider {

   0%,
   27%,
   100% {
      transform: translateX(0);
      animation-timing-function: ease;
   }

   33% {
      transform: translateX(-100%);
      animation-timing-function: step-end;
   }

   94% {
      transform: translateX(100%);
      animation-timing-function: ease;
   }
}


/* XLarge */

@media screen and (max-width: 1680px) {
   .slider {
      height: 40vh;
   }

   section#one.main.style1 {
      height: 60vh;
   }

   .pc-only {
      visibility: hidden;
   }
}

/* Large */

@media screen and (max-width: 1140px) {
   .slider {
      height: 40vh;
   }

   section#one.main.style1 {
      height: 60vh;
   }
}

/* Medium */

@media screen and (max-width: 980px) {
   .slider {
      height: 40vh;
   }
}

/* Small */

@media screen and (max-width: 736px) {
   .slider {
      height: 25vh;
   }

   section#one.main.style1 {
      height: 75vh;
   }
}

/* XSmall */

@media screen and (max-width: 480px) {
   .slider {
      height: 10vh;
   }

   section#one.main.style1 {
      height: 90vh;
   }
}

/* XXSmall */

@media screen and (max-width: 320px) {
   .slider {
      height: 10vh;
   }

   section#one.main.style1 {
      height: 90vh;
   }
}


/* limit the size of the round places thumbnail */
.thumbnail {
   display: relative;
   margin: 0 0 2em 0;
   width: 100%;
   max-width: 200px;
}