quote-slides.css

/** css carousel **/
@keyframes slidy {
	0% { left: 0%; }
	11% { left: 0%; }
	22% { left: -100%; }
	33% { left: -100%; }
	44% { left: -200%; }
	55% { left: -200%; }
	66% { left: -300%; }
	77% { left: -300%; }
	88% { left: -400%; }
	99% { left: -400%; }
}

div#img-slider-fake,
div#img-slider{
	overflow: hidden;
	margin:1em auto;
	padding-top:1px;
	padding-bottom:1px;
	outline:1px solid var(--color-black);
	background-color:var(--color-white);
	position:relative;
	box-shadow: 3px 3px 6px;
}
div#img-slider-fake:before,
div#img-slider-fake:after,
div#img-slider:before,
div#img-slider:after{ /** white outline inner frame right; img in slider go beyond the box because of the padding.. **/
	width:1px;
	height:100%;
	position:absolute;
	top:0;
	content:"";
	z-index:60;
	background-color:var(--color-white);
}
div#img-slider-fake:before,
div#img-slider:before{
	right:0;
}
div#img-slider-fake:after,
div#img-slider:after{
	left:0;
}
div#img-slider-fake figure img{
	box-shadow: inset 0 0 10px;
	width:100%;
	height:369px;
}
div#img-slider figure img {
	width: 20%;
	float: left;
	box-shadow: inset 0 0 10px;
}
div#img-slider-fake figure {
	box-shadow: inset 0 0 10px;
	margin:0;
	padding:0;
	font-size: 0;
}
div#img-slider figure{
	position: relative;
	width: 500%;
	margin:0;
	left: 0;
	text-align: left;
	font-size: 0;
	animation: 30s slidy infinite;
	box-shadow: inset 0 0 10px;
}
.tactical-logo-slider-color{
	background-color:#e6001c;
}