/* slideshow - adapted from http://cssmojo.com/ken-burns-effect/ */
#slideshow { width:100%; height:100%; } 
#slideshow { 
  position:relative; 
  bottom:0;
  overflow:hidden; 
  max-width:100%; 
  max-height:200px;
  z-index: -100;
  padding-bottom:40% 
} /* (img px height / img px width x 100) = padding-bottom % */

#slideshow div { 
  position:absolute; 
  z-index:2; 
  width:105%; 
  height:105%; 
  top:-5%; 
  left:-5%; 
  background-position:center; 
  background-repeat:no-repeat; 
  background-size:cover; 
  opacity:0;
  -webkit-transition:opacity 10s, 
  -webkit-transform 98s; 
  transition:opacity 10s, 
  -webkit-transform 98s; 
  transition:opacity 10s, 
  transform 98s; 
  transition:opacity 10s, 
  transform 98s, 
  -webkit-transform 98s 
}
  
#slideshow div { -webkit-transform-origin:bottom left; transform-origin:bottom left }
#slideshow div:nth-of-type(2n+1) { -webkit-transform-origin:top right; transform-origin:top right }
#slideshow div:nth-of-type(3n+1) { -webkit-transform-origin:top left; transform-origin:top left }
#slideshow div:nth-of-type(4n+1) { -webkit-transform-origin:bottom right; transform-origin:bottom right }
#slideshow .fx:first-child + span + div ~ div, #slideshow .fx1 { z-index:1 }
#slideshow .fx, #slideshow .fx1 { 
  -webkit-transform:scale(3.35) translate(2.5%); 
  transform:scale(3.35) translate(2.5%); 
  opacity:1 
}
#slideshow div:nth-of-type(1) { background-image:url(../slideshow/2.png) }
#slideshow div:nth-of-type(2) { background-image:url(../slideshow/mikro/1.png) }
#slideshow div:nth-of-type(3) { background-image:url(../slideshow/mikro/2.png) }
#slideshow div:nth-of-type(4) { background-image:url(../slideshow/mikro/3.png) }
#slideshow div:nth-of-type(5) { background-image:url(../slideshow/mikro/4.png) }
#slideshow div:nth-of-type(6) { background-image:url(../slideshow/mikro/6.png) }
/* captions */
#slideshow span { 
	position:absolute; 
	z-index:2; 
	top:1.5em; 
	right:0; 
	display:inline-block; 
	padding:2% 3%; 
	margin:5%; 
	
	font-size:1em; 
	color:transparent 
}


#slideshow .fx:first-child + span + div ~ div + span, #slideshow .fx1 + span { z-index:1 }
#slideshow .fx + span, #slideshow .fx1 + span { 
  padding:1em 1.5em; 
  margin:2em; 
  font-size:0.8em;
  border-radius: 8px;
  background:rgb(0, 0, 0); 
  color:#fff; 
  z-index: 20;
  animation:caption 5s 1s both;
  -webkit-animation:caption 5s 1s both;
}
@-webkit-keyframes caption {
  0% { opacity:0; -webkit-transform:translate3d(100%,0,0) }
  20% { opacity:1; -webkit-transform:none }
  70% { opacity:1; -webkit-transform:none }
  100% { opacity:0; -webkit-transform:translate3d(-500%,0,0) }
}
@keyframes caption {
  0% { opacity:0; -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0) }
  20% { opacity:1; -webkit-transform:none; transform:none }
  70% { opacity:1; -webkit-transform:none; transform:none }
  100% { opacity:0; -webkit-transform:translate3d(-500%,0,0); transform:translate3d(-500%,0,0) }
}
@media(min-width:42em) { /* bigger than 672px */}