#slider{
  width:100%;
  margin:0 auto;
  margin-top:20px;
  position:relative;
  overflow:hidden;
  box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
}

.slide{
  width:100%;
  
  display:none;
  animation-name:fade;
  animation-duration:1s;
  
}
.slide 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:hover{
  background:white;
  transition:0.3s;
}

.controls:active{
  color:grey;
}

#left-arrow{
  left:10px;
}

#right-arrow{
  right:10px;
}

#dots-con{
  
  text-align:center;
  /*position:relative;top:-40px;*/
}
.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;
      padding:5px 5px;
  }
  .controls .fa {
padding:5px !important;
width:auto;
font-size:14px;
  }
  #dots-con{
  /*top:-30px;
    display:none;*/
  }
  .dot{

  padding:5px;
  border-radius:50%;

}
}