#slider{
  margin:0 auto;
  width:100%;
  overflow:hidden;
  margin-top: 12px;
}

.slides{
  overflow:hidden;
  animation-name:fade;
  animation-duration:1s;
  display:none;
}

#slider img{
  width:100%;
  border-radius: 10px 10px;
}

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

#slider .active{
  background:black;
}

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

  }
}

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

}