@media (min-width: 1px){
  .position{
    left: 50%;
    transform: translate(-50%, 5%);
  }

  .slider{
    background-image: url(../img/3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    position: relative;
  }
}

@media (min-width: 768px){
  .position{
    position: absolute;
    top: 102%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .slider{
    background-image: url(../img/1.jpg);
    background-size: cover;
    height: 65%;
    width: 70%;
    border-radius: 10px;
    animation: animate 10s infinite;
  
  }
  
  @keyframes animate {
    20% {
      background-image: url(../img/5.jpg);
      background-size: cover;
    }
    40% {
      background-image: url(../img/4.jpg);
      background-size: cover;
    }
    60% {
      background-image: url(../img/3.jpg);
      background-size: cover;
    }
    80% {
      background-image: url(../img/2.jpg);
      background-size: cover;
    }
    100% {
      background-image: url(../img/1.jpg);
      background-size: cover;
    }
  }
}