Strange behavior of button element on Mozilla only

Hello my friends,

For 2 days now I have a problem: whenever I open my website on mozilla firefox, the borders of the buttons on my header do not appear properly. If I hover over them the borders appear (and remain, if I hover away). The same might happen if I scroll down. The thing is that this only happens on the home page: I use the same buttons in all other pages and they appear properly. I even use them again on the home page, later down in the page and they appear properly there. What is most strange is that this only happens on Mozilla Firefox…The buttons appear as they should on every other browser. It’s driving me crazy..

You can see yourselves on http://www.beautiful-burger.com. Refresh the page 2-3 times to see that sometimes the border appears normally while some others it does not appear until you hover on the button (how in the world this is even possible is beyond me!) The button is named ‘secondary button’. The CSS I am currently using is this(I have messed around with it alot in the last days trying to fix the issue, without success):

`
button,
.button,
input[type=”reset”],
input[type=”submit”],
input[type=”button”] {
background-color: transparent;
background-clip: border-box ;
border-radius: 4px;
color: #fff;
outline: none;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
padding: 0 20px;
text-transform: uppercase;
line-height: 40px;
display: inline-block !important;
zoom: 1; *display: inline;
}

#header-button-container .primary-button,
#header-button-container .secondary-button {
color: #ffffff ;
vertical-align: baseline;

}

.secondary-button {
background: transparent !important;;
color: #fff !important;
border-style: solid !important;
border-color: white !important;
border-width: 1px !important;
background-clip: padding-box !important;

}

.secondary-button:hover{
background-color: #D0C274 !important ;
color: #fff ;
}

Any help appreciated, have a good day!