title: Issue with Button border, only on mozilla and only on 1 of multiple site pages
body: <p>There is a very strange problem in my website. When opening the homepage on Mozilla the borders of the 2 buttons on my header are missing. You can check the website here: <a href="http://www.beautiful-burger.com" rel="nofollow">http://www.beautiful-burger.com</a></p>
  
  <p>Just open it on mozilla and refresh it multiple times to see what I am talking about. The buttons are the ones used on the top right BUT they are also used on the lower part of the homepage (without any problems on the borders). Also, if you check another page, like the Food Blog, you will see that they appear just fine there. Is it a problem with the header? I have been trying to figure this out for the past 2 days but I have no clue what's going on..It runs just fine on other browsers. The css I am using atm is this:</p>
  
  <pre><code>    #header-button-container .primary-button,
  
      #header-button-container .secondary-button {
           color: #ffffff ;
           border: 1px solid #ffffff  !important;
           vertical-align: baseline;}
  
       .secondary-button {
              background-color: transparent  ;
              border: 1px solid #ffffff  !important;
              color: #fff !important;}
  
  
       .secondary-button:hover{
            background-color: #D0C274 !important ;
            color: #fff ;}
  
  
      .site-header .secondary-button { 
            color: #fff; }
  </code></pre>
  
  <p>Thank you for your time and any help. Feel free to ask if you need any more information since I am very new at this and probably missing something out.</p>