Customizing Slogan Font

I’m having trouble customizing the home slogan font. I want the “slogan 2” font to be larger and the same font family as the “slogan 1”. This is the CSS I’ve added in the custom box:

.slogan-wrap .slogan span {
font: 18px;
font-family: inherit;
display: inline;
}

The display:inline is working. but the size and font-family isn’t working.

Also, this code doesn’t seem to be working either:

@media screen and (min-width: 768px) .slogan-wrap .slogan span {
display: block;
}

I can’t find any mistakes in my code (although, I don’t know if i’m using inherit correctly). Is there something else that is overriding the code, and if so, how do I get it to work?