html, body {
      width: 100%;
	  height: 100%;
	  padding: 0;
	  margin; 0px;
	  }
	  
slider {	   
      display: block;
      width: 100%; 
      height: 100%;
      background-color: #1f1f1f;
      overflow: hidden;
      position: absolute; 
}

slider> *{
      position: absolute;
	  display: block;
	  width: 100%;
	  height: 100%;
	  background: #1f1f1f;
	  animation: slide 12s infinite; 
	  overflow: hidden; 
}

slide:nth-child(1) {
     left:0%;
     animation-delay: -1s;
     background-image: url(1 jpg);	
     background-size: cover; 
     background-position: center;
}	

slide:nth-child(2) {
     animation-delay: 2s;
     background-image: url(1 jpg);	
     background-size: cover; 
     background-position: center; 
}

slide:nth-child(3) {
     animation-delay: 5s;
     background-image: url(1 jpg);	
     background-size: cover; 
     background-position: center; 
}

slide:nth-child(4) {
     left:0%;
     animation-delay: 8s;
     background-image: url(1 jpg);	
     background-size: cover; 
     background-position: center; 
}

slide p {
      font-family: Comfortaa;
	  font-size: 70px;
	  text-align: center;
	  display: inline-block;
	  width: 100%;
	  margin-top: 340px;
	  color: #fff;
}

@keyframes slide { 
      0% { left: 100%; width: 100%:}
	  5% { left: 0%;}
	  25% { left: 0%;}
	  30% {left: -100%; width: 0%;}
	  30.001% { left: -100%; width: 0%;}
	  100% {left: 100%; width: 0%;}
}