@charset "UTF-8";
/* CSS Document */
/* fade slider */
.slides {
    width: 100%;
    height: auto;
	margin: 0 auto;
    padding: 0;
	position: relative;
}
.slides ul {
	list-style: none;
	position: relative;
}
.slides ul li img {
	width: 100vw;/**100%**/
	height: auto;
}

/* keyframes #anim_slides */
@keyframes anim_slides {
 0% {
 opacity:0;
}
 6% {
 opacity:1;
}
 24% {
 opacity:1;
}
 30% {
 opacity:0;
}
 100% {
 opacity:0;
}
}

.slides ul li {
	opacity: 0;
	position: absolute;
	top: 0;
	/* css3 animation */
	animation-name: anim_slides;
	animation-duration: 25.0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
	animation-delay: 5.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
	animation-delay: 10.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
	animation-delay: 15.0s;
}
.slides ul li:nth-child(5), .slides ul li:nth-child(5) div {
	animation-delay: 20.0s;
}

.slides ul li img {
	display: block;
}

/* -------------------------------------------
 * Small devices
 */
@media screen and (max-width: 48em) {
.slides ul li div {
	left: 2%;
    width: 260px;
}
}
@media screen and (min-width: 48em) {
.slides {
	width: 100%;
	height: auto;
	float: none;
	margin: 0;
	padding: 0;
}
}
@media screen and (min-width: 23.4em) and (max-width: 30em) {
.slides ul li div {
	width: 200px;
}
}
@media screen and (max-width: 20em) {
.slides ul li div {
	width: 160px;
}
}