body{
    background:#171717;
  }

  #slider{
    width:80%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
    border-radius: 5px;
  }
  
  .slide{
    width:100%;
    display:none;
    animation-name:fade;
    animation-duration:1s;
  }

  img{
   width:100%; 
  }

  @keyframes fade{
    from{opacity:0.5;}
    to{opacity:1;}
  }
  
  .controls{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:1.5em;
    padding:15px 10px;
    border-radius:5px;
    
  }
  
  .controls{
    background:white;
    transition:0.3s;
  }
  
  .controls:active{
    color:grey;
  }
  
  #left-arrow{
    left:10px;
    cursor: pointer;
  }
  
  #right-arrow{
    right:10px;
    cursor: pointer;
  }

  #dots-con{ 
    text-align:center;
  }
  .dot{
    display:inline-block;
    background:grey;
    padding:8px;
    border-radius:50%;
    margin:10px 5px;
  }
  
  .active{
    background:crimson;
  }
  
  @media (max-width:576px){
    #slider{width:100%;
    
  }
    
  .controls{
    font-size:1em;
  }
    
  #dots-con{
    display:none;
  }
  
}