body,html{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.slider{
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.slider-container{
	padding: 0;
	margin: 0;
	display: flex;
	width: 300%;
	height: 100%;
	animation: slider 30s infinite alternate linear;
}

.slider-container > figure{
	width: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	user-select: none;
}

@keyframes slider{
	0% {margin-left: 0;}
	30% {margin-left: 0;}

	35% {margin-left: -100%;}
	60% {margin-left: -100%;}

	65% {margin-left: -200%;}
	100% {margin-left: -200%;}

}


.slider-container img{
	display:none;
	width: 100%;
	height: auto;
}

.slider-container .width1{display:block;}

@media (max-width:960px){
    .slider-container .width2{display:block;}
    .slider-container .width1{display:none;}
}

@media (max-width:760px){
    .slider-container .width3{display:block;}
    .slider-container .width2{display:none;}
}