/* Wurde entfernt  

	body 
	{
	  align-items: 		center;
	  background: 		#E3E3E3;
	  display: 			flex;
	  height: 			100vh;
	  justify-content: 	center;
	}

	*/



	#id_sct_030 
	{
		background-color: 		white; 
		text-align: 			center; 
		color: 					lightgrey; 
		align-items: 			center; 
		display: 				flex; 
		justify-content: 		center; 
		text-align: 			center; 
		padding-bottom: 		40px;
	}



	.hover 
	{
		-webkit-transition: 	width ease-in-out 0.1s;
		-moz-transition: 		width ease-in-out 0.1s;
		-ms-transition: 		width ease-in-out 0.1s;
		-o-transition: 			width ease-in-out 0.1s;
		transition: 			width ease-in-out 0.1s;
	 }



	/* Funktioniert nicht ! */
	.slider:hover .slide-track
	{		
		animation-play-state: paused;
		-webkit-animation-play-state: paused;
		-moz-animation-play-sstate: paused;
		-o-animation-play-state: paused;		
		cursor: pointer;		
	}


	@keyframes scroll
	{
	  0% {
		transform: translateX(0);
	  }
	  100% {
		transform: translateX(calc((-70px * 16) - (16 * 30px)));
	  }
	}
	/* der Wert 30px entspricht dem Wert unten margin-right:30px*/

	
	.slider {
	  background: white;
	  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0);
	  height: 28px;
	  margin: auto;
	  overflow: hidden;
	  position: relative;
	  /*width: 1320px;*/
	  /*width: 1000px;*/
	}
	.slider::before, .slider::after {
	  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
	  content: "";
	  height: 28px;
	  position: absolute;
	  width: 70px;
	  z-index: 2;
	}
	.slider::after {
	  right: 0;
	  top: 0;
	  transform: rotateZ(180deg);
	}
	.slider::before {
	  left: 0;
	  top: 0;
	}
	.slider .slide-track {
	  /*animation: scroll 30s linear infinite;*/
	  animation: scroll 50s linear infinite;
	  animation-direction: normal; /*new*/
	  display: flex;
	  width: calc(70px * 32);
	}
	.slider .slide {
	  height: 28px;
	  width: 70px;
	  margin-right: 30px;
	}
	
	
	
	.logo_color 
	{
		filter: 	grayscale(100%);
		opacity: 	50%;
	}
	
	.logo_color:hover 
	{
		filter: 	grayscale(0%);
		opacity: 	100%;
		transition:	0.4s;
	}
	
	




/* ================================================================================================================== */






	/* Funktioniert nicht ! */
	.slider_2:hover .slide-track_2
	{		
		animation-play-state: paused;
		-webkit-animation-play-state: paused;
		-moz-animation-play-sstate: paused;
		-o-animation-play-state: paused;		
		cursor: pointer;		
	}


	@keyframes scroll
	{
	  0% {
		transform: translateX(0);
	  }
	  100% {
		transform: translateX(calc((-100px * 16) - (16 * 40px)));
	  }
	}
	

	
	.slider_2 {
	  background: white;
	  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0);
	  height: 40px;
	  margin: auto;
	  overflow: hidden;
	  position: relative;
	  /*width: 1320px;*/
	  /*width: 1000px;*/
	}
	.slider_2::before, .slider_2::after {
	  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
	  content: "";
	  height: 40px;
	  position: absolute;
	  width: 100px;
	  z-index: 2;
	}
	.slider_2::after {
	  right: 0;
	  top: 0;
	  transform: rotateZ(180deg);
	}
	.slider_2::before {
	  left: 0;
	  top: 0;
	}
	.slider_2 .slide-track_2 {
	  /*animation: scroll 30s linear infinite;*/
	  animation: scroll 50s linear infinite;
	  animation-direction: normal; /*new*/
	  display: flex;
	  width: calc(100px * 32);
	}
	.slider_2 .slide_2 {
	  height: 40px;
	  width: 100px;
	  margin-right: 40px;
	}
	
	
	
	.logo_color 
	{
		filter: 	grayscale(100%);
		opacity: 	50%;
	}
	
	.logo_color:hover 
	{
		filter: 	grayscale(0%);
		opacity: 	100%;
		transition:	0.4s;
	}