slick arrow template

css

.slick-arrow{
  position: absolute;
  padding: 0;
  width: 33px;
  height: 43px;
  background-color: fade-out(#ccc, .2);
  font-size: 0;
  border: none;
  top: 43%;
  margin-top: -21px;
  z-index: 11;
  &:before{
    position: absolute;
    left: 50%;
    margin-left: -5px;
    margin-top: -7px;
    font-size: 12px;
    color: #000;
    font: normal normal normal 14px/1 FontAwesome;
  }
}
.slick-next{
  right: 16px;
  @media screen and (max-width: 1199px){
    right: 28px;
  }
  @media screen and (max-width: 991px){
    right: 20px;
  }
  @media screen and (max-width: 767px){
    right: 18px;
  }
  &:before{
    content: "\f054";
  }
}
.slick-prev{
  left: 15px;
  @media screen and (max-width: 1199px){
    left: 30px;
  }
  @media screen and (max-width: 991px){
  left: 20px;
}
  @media screen and (max-width: 767px){
    left: 18px;
  }
  &:before{
    content: "\f053";
  }
}
.slick-disabled{
  visibility: hidden;
}