/************* Thierry Koblentz SLIDER  *******/
/** * Copyright 2011 - css-101.org 
 * www.css.mojo.
 */ 
/* slideshow - adapted from http://cssmojo.com/ken-burns-effect/ */
#slides { margin:0.4rem 0 2rem 0;position:relative; overflow:hidden; max-width:65em; padding-bottom:40%; } /* (img px height / img px width x 100) = padding-bottom % */
#slides div { position:absolute; z-index:2; width:101%; height:101%; top:-1%; left:-1%; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:0;
	-webkit-transition:opacity 3s, -webkit-transform 8s; -ms-transition:opacity 3s, -ms-transform 8s; transition:opacity 3s, transform 7s 
	}
#slides div { -webkit-transform-origin:bottom left; -ms-transform-origin:bottom left; transform-origin:bottom left }
#slides div:nth-of-type(2n+1) { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right }
#slides div:nth-of-type(3n+1) { -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left }
#slides div:nth-of-type(4n+1) { -webkit-transform-origin:bottom right; -ms-transform-origin:bottom right; transform-origin:bottom right }

#slides .fx:first-child + span + div ~ div, #slides .fx1 { z-index:1 }
#slides .fx, #slides .fx1 { -webkit-transform:scale(1.1) translate(1%); -ms-transform:scale(1.1) translate(1%); transform:scale(1.1) translate(1%); opacity:1 }
#slides div:nth-of-type(1) { background-image:url("../../files/Cto-5/img/slider/jagd-1920.jpg") }
#slides div:nth-of-type(2) { background-image:url("files/Cto-5/img/slider/hunde-1920.jpg") }
#slides div:nth-of-type(3) { background-image:url("files/Cto-5/img/slider/optik-1920.jpg") }
#slides div:nth-of-type(4) { background-image:url("files/Cto-5/img/slider/indust-1920.jpg") }

/* captions */
#slides span { position:absolute;
 z-index:2;
 bottom:0; right:0; 
 display:inline-block;
 padding:2% 3%;
 margin:5%;
 font-size:1.2rem;
 color:transparent; }
#slides .fx:first-child + span + div ~ div + span, #slides .fx1 + span { z-index:1 }
#slides .fx + span, #slides .fx1 + span { background:rgba(0,0,0,0.75); color:#fff; -webkit-animation:caption 5s 1s both; 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; transform:translate3d(100%,0,0) }
  20% { opacity:1; transform:none }
  70% { opacity:1; transform:none }
  100% { opacity:0; transform:translate3d(-500%,0,0) }
}
@media(min-width:42em) { /* bigger than 672px */

	#slides span { padding:1em 1.5rem; margin:2rem; font-size:1rem }
	
} 

/************* ENDE Thierry Koblentz SLIDER  *******/