wpneuby on "Problem with Twenty Fifteen theme secondary blockquote class"

Hi. I've been testing an alteate blockquote.

Here is the HTML:

<blockquote class="quote-mark">Memory... is a diary that we carry about with us.</blockquote>
<span class="cite-after">Oscar Wilde</span>

Here is the CSS:

.quote-mark { background:#fff; border: none; font-family: "Noto Sans", sans-serif; color: #707070; color: rgba(51, 51, 51, 0.7); font-size: 18px; font-size: 1.8rem; font-style: italic; width: auto; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838; quotes: "201C""201D""2018""2019";
}
.quote-mark:before { content: open-quote; font-weight: bold; font-size:60px; line-height: 110%; color: #7a7a7a;
}
.quote-mark:after { content: close-quote; font-weight: bold; font-size:60px; line-height: 110%; color: #7a7a7a;
}
.cite-after { color: #9a9a9a; font-size: 15px; font-family: "Noto Sans", sans-serif; display: block; margin-top: 5px; margin-left: 70px;
}
.cite-after:before { content: "2014 2009";
}

I created a page on my desktop and it looked how I wanted in all browsers. However, when I try this in WP it gets all wonky. Take a look here:

http://mike.z-bang.net/2016/07/14/test-blockquote/

The page is password protected. PW is tryme

Any ideas how to get this to work in WordPress? Thanks.

- - , .
.