.slider{ 
  width: 93vw;
  height: auto;
  margin: 12px auto;
  overflow: hidden;
}
.slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	animation: 20s slider infinite;
}
.slider figure img {
	width: 20%;
	float: left;
}
.btni{
	padding: 5px 10px;
	margin-left: -40px;
  color: white;
  background: var(--main-bg-color);
  border: 2px solid white;
  border-radius: 7px;
  cursor: pointer;
}
.btni:hover {
  background-color: white;
  color: black;
}

@keyframes slider {
	0% {
		left: 0;
	}
	20% {
		left: 0;
	}
	25% {
		left: -100%;
	}
	45% {
		left: -100%;
	}
	50% {
		left: -200%;
	}
	70% {
		left: -200%;
	}
	75% {
		left: -300%;
	}
	95% {
		left: -300%;
	}
	100% {
		left: -400%;
	}
}

@media screen and (max-width:1050px){
  .slider{
    width:100vw;
  }

}
@media screen and (max-width:473px){
	.btni{
		margin-left:0px ;
	}
}