@charset "utf-8";
.slider_css{
    width:1200px;
    height:400px;
    margin:0 auto;
    position:relative;
}
.slider_css ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slider_css ul li{
    width:1200px;
    height:400px;
    position:absolute;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:40s;
}
.slider_css ul li:nth-child(1){
    animation-name:slider;
    animation-delay:-3s;
	background-image: url(../images/calm-garden_slide1.jpg);
}
.slider_css ul li:nth-child(2){
    animation-name:slider;
    animation-delay:5s;
    opacity:0;
	background-image: url(../images/calm-garden_slide2.jpg);
}
.slider_css ul li:nth-child(3){
    animation-name:slider;
    animation-delay:13s;
    opacity:0;
	background-image: url(../images/calm-garden_slide3.jpg);
}
.slider_css ul li:nth-child(4){
    animation-name:slider;
    animation-delay:21s;
    opacity:0;
	background-image: url(../images/calm-garden_slide4.jpg);
}
.slider_css ul li:nth-child(5){
    animation-name:slider;
    animation-delay:29s;
    opacity:0;
	background-image: url(../images/calm-garden_slide5.jpg);
}
 
@keyframes slider{
    0%{
        opacity:0;
    }
    12.5%{
        opacity:1;
    }
    20%{
        opacity:1;
    }
    27.5%{
        opacity:0;
    }
    100%{
        opacity:0;
    }   
}
@media screen and (min-width:768px) and (max-width:1190px) {
.slider_css,.slider_css ul li {
	height: 256px
}
.slider_css ul li {
	background-size: contain;
	background-repeat: no-repeat
}
}

@media screen and (min-width:480px) and (max-width:767px) {
.slider_css,.slider_css ul li {
	height: 160px
}
.slider_css ul li {
	background-size: contain;
	background-repeat: no-repeat
}
}

@media screen and (max-width:479px) {
.slider_css,.slider_css ul li {
	height: 90pt
}
.slider_css ul li {
	background-size: contain;
	background-repeat: no-repeat
}
}