/* BEGINN Slider mit 3 Bildern mit transform Animation */

.slider-wrap {
	max-width:780px;
  	width: auto;
  	height: auto;
	position:relative;
	overflow: hidden;
}

.slideshow-3-bilder {
	position: absolute;
  	width: 100%;
  	top: 0px;
  	left: 0px;
  	z-index: 0;
}

.slideshow-3-bilder li span {
	width: 100%;
	height:100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation: image 12s linear infinite;
	animation: image 12s linear infinite;
}

@keyframes image {
0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  1%{
    opacity: 1;
  }
  
  4% {
    transform: translateX(0);
  }
  
  
  34% {
    transform: translateX(0);
  }
  
  
  36% {
    opacity: 1;
    transform: translateX(100%);
  }
  38%{
    opacity: 0;
    transform: translateX(100%);
  }
}
@-webkit-keyframes image {
0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  1%{
    opacity: 1;
  }
  
  2% {
    transform: translateX(0);
  }
  
  
  34% {
    transform: translateX(0);
  }
  
  
  36% {
    opacity: 1;
    transform: translateX(100%);
  }
  38%{
    opacity: 0;
    transform: translateX(100%);
  }
}

.slideshow-3-bilder li {
    margin:0;
    padding:0;
  	list-style: none;
}
.slideshow-3-bilder li:nth-child(1) span {
}
.slideshow-3-bilder li:nth-child(2) span {
  	-webkit-animation-delay: 4s;
  	animation-delay: 4s;
}
.slideshow-3-bilder li:nth-child(3) span {
  	-webkit-animation-delay: 8s;
  	animation-delay: 8s;
}
ul.slideshow-3-bilder {
    margin: 0;
}

.slider-wrap li::before{
	display: none;
}

.slider-wrap ul {
    margin:0;
    padding-left:0px;
    list-style-type: none;
    list-style:none;
	border-bottom:none;
	border-color: #fff;
    border-width: 0px;
	padding-bottom:5px;
}




/* ENDE Slider mit 3 Bildern mit transform Animation */


/* BEGINN Slider mit 4 Bildern mit transform Animation */

.slider-wrap {
	max-width:780px;
  	width: auto;
  	height: auto;
	position:relative;
	overflow: hidden;
}

.slideshow-4-bilder {
	position: absolute;
  	width: 100%;
  	top: 0px;
  	left: 0px;
  	z-index: 0;
}

.slideshow-4-bilder li span {
	width: 100%;
	height:100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation: image 16s linear infinite;
	animation: image 16s linear infinite;
}

@keyframes image {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  
  2% {
    transform: translateX(0);
  }
  
  25% {
    transform: translateX(0);
  }
  
  27% {
    opacity: 1;
    transform: translateX(-100%);
  }
  29% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@-webkit-keyframes image {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  
  1% {
    transform: translateX(0);
  }
  
  25% {
    transform: translateX(0);
  }
  
  26% {
    opacity: 1;
    transform: translateX(-100%);
  }
  27% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.slideshow-4-bilder li {
    margin:0;
    padding:0;
  	list-style: none;
}
.slideshow-4-bilder li:nth-child(1) span {
	
}
.slideshow-4-bilder li:nth-child(2) span {
  	-webkit-animation-delay: 4s;
  	animation-delay: 4s;
}
.slideshow-4-bilder li:nth-child(3) span {
  	-webkit-animation-delay: 8s;
  	animation-delay: 8s;
}

.slideshow-4-bilder li:nth-child(4) span {
  	-webkit-animation-delay: 12s;
  	animation-delay: 12s;
}
ul.slideshow-4-bilder {
    margin: 0;
}

.slider-wrap li::before{
	display: none;
}

.slider-wrap ul {
    margin:0;
    padding-left:0px;
    list-style-type: none;
    list-style:none;
	border-bottom:none;
	border-color: #fff;
    border-width: 0px;
	padding-bottom:5px;
}
/* ENDE Slider mit 4 Bildern mit transform Animation */

.refnr {}

.apply {}