@charset "UTF-8";
/* CSS Document */
.slider {
	max-width: 500px;
	height: 250px;
	position: relative;
	width: 440px;
	float: left;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
	position: absolute;
	width: 440px;
	height: 270px;
}
.slide1 {
	background-size: cover;
	animation:fade 8s infinite;
	-webkit-animation:fade 8s infinite;
	background-image: url(img/302.jpg);
	background-repeat: no-repeat;
	background-position: center;
} 
.slide2 {
	background-size: cover;
	animation:fade2 8s infinite;
	-webkit-animation:fade2 8s infinite;
	background-image: url(img/202.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
.slide3 {
	background-size: cover;
	animation:fade3 8s infinite;
	-webkit-animation:fade3 8s infinite;
	background-image: url(img/102.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

@media screen and (max-width: 980px) {
	.slider {
	max-width: 400px;
	height: 250px;
	position: relative;
	width: 500px;
	float: left;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
	position: absolute;
	width: 400px;
	height: 250px;

}