
/* 
    Created on : 09.08.2019, 12:27:44
    Author     : juergen kind it-kind.de 
*/

@media (min-width: 992px) {

    * { box-sizing: border-box; }

body { font-family: sans-serif; }

.slider-position { text-align: center; margin-top: 200px; margin-bottom: unset;}

.scene {
  border: 1px solid #CCC;
  margin: 40px 0;
  position: relative;
  width: 210px;
  height: 140px;
  margin: 40px auto;
  perspective: 1000px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 1s;
  overflow: unset;
}

.carousel__cell {
  position: absolute;
  width: 300px;
  height: 200px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: center;
  transition: all 1s ease-in-out;
  z-index: 1001;
}

.carousel__cell:nth-child(9n+1) { background: hsla(  0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+3) {background: hsla( 80, 100%, 50%, 0.8);}
.carousel__cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+5) { background: hsla(160, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+6) { background: hsla(200, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+7) { background: hsla(240, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+8) { background: hsla(280, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+0) { background: hsla(320, 100%, 50%, 0.8); }

.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(600px); }
.carousel__cell:nth-child(2) {transform: rotateY( 40deg) translateZ(600px);}
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(600px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(600px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(600px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(600px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(600px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(600px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(600px); }				

/* Bilder als Hintergründe */


.carousel__cell:nth-child(9n+4) { background: url('/modules/itk/poimap/objects/img/koh-1.jpg') }
.carousel__cell:nth-child(9n+5) { background: url('/modules/itk/poimap/objects/img/o1-1.jpg') }
.carousel__cell:nth-child(9n+6) { background: url('/modules/itk/poimap/objects/img/o2-1.jpg') }

.carousel__cell:nth-child(9n+4) { background-size: cover; }
.carousel__cell:nth-child(9n+5) { background-size: cover; }
.carousel__cell:nth-child(9n+6) { background-size: cover; }



.carousel__cell.current {
    /*background: rgba(  240, 240, 240, 1);*/
    width: 480px;
    height: 300px;
    top: -50px;
    left: -80px;
    transition: all 1s ease-in-out;
    z-index: 100919;


}

}