@keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }
  #slider {
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    top: -32px;
    /* position: relative; */
  }
  
  .slides {
    overflow: hidden;
    animation-name: fade;
    animation-duration: 1s;
    display: none;
  }
  
  /* img {
    width: 100%;
  } */
  
  #dot {
    margin: 0 auto;
    text-align: center;
    display: none;
  }
  .dot {
    display: inline-block;
    border-radius: 50%;
    background: #d3d3d3;
    padding: 8px;
    margin: 10px 5px;
  }
  
  /* .active {
    background: black;
  } */
  
  @media (max-width: 567px) {
    #slider {
      width: 100%;
    }
  }
  
  #heading {
    display: block;
    text-align: center;
    font-size: 2em;
    margin: 10px 0px;
  }