.slider{
	width:200px;
	height: 300px;
	margin: 1% 1%;
	overflow: hidden;
}
.slider ul {
	display: flex;
	padding: 0;
	width: 300%;
	color: green;

	animation: cambio 20s infinite;
	animation-direction: alternate;
}
.slider li {
	width: 60%;
	color: black;
	list-style: none;
}


@keyframes cambio {
	0% { margin-left: 0; }
	20% { margin-left: 0; }

	25% { margin-left: -100%; }
	45% { margin-left: -100%; }

	50% { margin-left: -200%; }
	70% { margin-left: -200%; }
}

@media(max-width: 800px) {
	.slider{
	width:100px;
	height: 60%;
	margin: 1% 1%;
	overflow: hidden;
}
.slider ul {
	display: flex;
	padding: 0;
	width: 300%;
	color: green;

	animation: cambio 20s infinite;
	animation-direction: alternate;
}
.slider li {
	width: 60%;
	color: black;
	list-style: none;
}
}