*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


#slider{
  margin:0 auto;
  width:60%;
  overflow:hidden;
}

.slides{
  overflow:hidden;
  
  animation-duration:1.5s;
  display:none;
}

img{
  width:100%;
  margin: 20px max(20px, 50% - 750px);
  height: 450px;
}

#dot{
  margin:0 auto;
  text-align:center;
}
.dot{
  display:inline-block;
  border-radius:50%;
  background:#d3d3d3;
  padding:8px;
  margin:10px 5px;
}

@media (max-width:567px){
  #slider{
    width:50%;

  }
}

#heading{
  display:block;
  text-align:center;
  font-size:2em;
  margin:10px 0px;

}