@charset "utf-8";
/* CSS Document */

/*Размещать по примеру
<div class="cssSlider">
	<ul class="slides">
		<li id="slide1"><img src="картинка1" alt="" /></li>
		<li id="slide2"><img src="картинка2" alt="" /></li>
		<li id="slide3"><img src="картинка3" alt="" /></li>
		<li id="slide4"><img src="картинка4" alt="" /></li>
		<li id="slide5"><img src="картинка5" alt="" /></li>
	</ul>
	<ul class="thumbnails">
		<li><a href="#slide1"><img src="картинка1" /></a></li>
		<li><a href="#slide2"><img src="картинка2" /></a></li>
		<li><a href="#slide3"><img src="картинка3" /></a></li>
		<li><a href="#slide4"><img src="картинка4" /></a></li>
		<li><a href="#slide5"><img src="картинка5" /></a></li>
	</ul>
</div>

Картинки должны быть одинакового размера
*/

.cssSlider {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.cssSlider .slides {
	overflow: hidden;
	overflow: hidden;
	width: 100%;
	height: 70vmin;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cssSlider .slides > li {
	width: 100%;
	height: 70vmin;
	position: absolute;
	z-index: 1;
	overflow: hidden;
}
.cssSlider .slides > li > img {
	width: 100%;
	max-width:none !
	important;
	height: auto;
	border-radius: 0px !important;
}
/*
.cssSlider .slides > li:first-child:not(:target) {
	z-index: 1;
	-webkit-transform: translateY(0%);
	        transform: translateY(0%);
}
*/
.cssSlider .thumbnails {
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
	list-style: none;
}
.cssSlider .thumbnails > li {
	float: left;
	width: 20%;
}
.cssSlider .thumbnails > li > a {
	display: block;
}
.cssSlider .thumbnails > li > a > img {
	width: 100%;
	height: auto;
	border-radius: 0px !important;
}

.cssSlider .slides li:target {
	z-index: 3;
	-webkit-animation: slide 1s 1;
}
.cssSlider .slides li:not(:target) {
	-webkit-animation: hidden 1s 1;
}
@-webkit-keyframes slide {
	0% {
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
	100% {
		-webkit-transform: translateX(0%);
		        transform: translateX(0%);
	}
}
@keyframes slide {
	0% {
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
	100% {
		-webkit-transform: translateX(0%);
		        transform: translateX(0%);
	}
}
@-webkit-keyframes hidden {
	0% {
		z-index: 2;
		-webkit-transform: translateX(0%);
		        transform: translateX(0%);
	}
	100% {
		z-index: 2;
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
}
@keyframes hidden {
	0% {
		z-index: 2;
		-webkit-transform: translateX(0%);
		        transform: translateX(0%);
	}
	100% {
		z-index: 2;
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
}