title: Slick Carousel arrows break on Firefox and Safari (.slick-prev, .slick-next)
body: <p><strong>[EDIT]: This question has been solved - see the comments</strong></p>
  
  <p>I’ve modified the Slick arrows within my main <code>style.css</code> file. I’ve added:</p>
  
  <pre><code>.slick-prev:before,
  .slick-next:before {
      color: gray;
      font-size: 80px;
   }
  </code></pre>
  
  <p>This works as desired in Chrome. The arrows become larger and their color is changed from white to grey. In Firefox and Safari though, the navigation and hover effects of the arrows break. If I delete this CSS rule, the arrows work properly in all browsers (but they are tiny and white). </p>
  
  <p><strong>In Firefox:</strong>  hover state ceases to work (arrows are supposed to become more opaque on hover). The navigation only applies to the original 20px <code>font-size</code>, so only the top corner of the arrow is clickable. <strong>In Safari:</strong> hover state is even more broken (most of the arrow disappears on hover, only the original 20px size at the top corner remains), and the navigation randomly works properly at times and (mostly) doesn’t work at others. </p>
  
  <p>I’ve tried modifying my CSS rule to include: </p>
  
  <pre><code>.slick-prev:before,
  .slick-next:before {
      color: gray;
      font-size: 80px;
      -webkit-font-size: 80px;
      -moz-font-size: 80px;
   }
  </code></pre>
  
  <p>But this does not fix the problem. I’ve also tried changing these CSS values directly in the <code>slick-theme.css</code> file (which you’re not really supposed to do) and this also did not work.</p>
  
  <p>Here’s the website if you want to test for yourself: <a href="https://kylevassella.github.io/JC-Realty" rel="nofollow noreferrer">https://kylevassella.github.io/JC-Realty</a></p>