margin-top: calc( 4 * 1rem);
@media only screen and (min-width: 768px) {
.site-header.featured-image .site-featured-image .entry-header {
margin-left: calc(10% + 60px);
margin-right: calc(10% + 60px);
.site-header.featured-image .site-featured-image .entry-header .entry-title:before {
.site-header.featured-image .site-featured-image .entry-header .entry-meta {
.site-header.featured-image .site-featured-image .entry-header .entry-meta > span {
.site-header.featured-image .site-featured-image .entry-header .entry-meta > span:last-child {
.site-header.featured-image .site-featured-image .entry-header .entry-meta a {
transition: color 110ms ease-in-out;
.site-header.featured-image .site-featured-image .entry-header .entry-meta a:hover {
.site-header.featured-image .site-featured-image .entry-header .entry-meta .svg-icon {
.site-header.featured-image .site-featured-image .entry-header .entry-meta .discussion-avatar-list {
@media only screen and (min-width: 768px) {
.site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta {
.site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-title {
padding-right: calc(1 * (100vw / 12) + 1rem);
.site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta .comment-count {
.site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta .discussion-avatar-list {
.site-header.featured-image .custom-logo-link {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
.site-header.featured-image .custom-logo-link:hover, .site-header.featured-image .custom-logo-link:active, .site-header.featured-image .custom-logo-link:focus {
box-shadow: 0 0 0 2px white;
.site-header.featured-image .site-branding {
.site-header.featured-image .site-featured-image .entry-header {
.site-header.featured-image .site-branding-container:after,
.site-header.featured-image .site-featured-image:before,
.site-header.featured-image .site-featured-image:after, .site-header.featured-image:after {
.image-filters-enabled .site-header.featured-image .site-featured-image:before {
.site-header.featured-image .site-featured-image:after {
mix-blend-mode: multiply;
/* When image filters are active, a blue overlay is added. */
.image-filters-enabled .site-header.featured-image .site-featured-image:after {
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
@supports (mix-blend-mode: multiply) {
.image-filters-enabled .site-header.featured-image .site-featured-image:after {
.image-filters-enabled .site-header.featured-image .site-branding-container:after {
background: rgba(0, 0, 0, 0.35);
/* Browsers supporting mix-blend-mode can have a light overlay */
@supports (mix-blend-mode: overlay) {
.image-filters-enabled .site-header.featured-image .site-branding-container:after {
background: rgba(255, 255, 255, 0.35);
.site-header.featured-image:after {
* Add a transition to the readability overlay, to add a subtle
* but smooth effect when resizing the screen.
transition: opacity 1200ms ease-in-out;
/* When image filters are active, a blue overlay is added. */
.image-filters-enabled .site-header.featured-image:after {
@media only screen and (min-width: 768px) {
.image-filters-enabled .site-header.featured-image:after {
.site-header.featured-image ::-moz-selection {
background: rgba(255, 255, 255, 0.17);
.site-header.featured-image ::selection {
background: rgba(255, 255, 255, 0.17);
/*--------------------------------------------------------------
--------------------------------------------------------------*/
text-transform: uppercase;
.updated:not(.published) {
margin: 0 0 calc(1.5 * 1rem);
margin-top: calc(6 * 1rem);
margin: calc(3 * 1rem) 1rem 1rem;
@media only screen and (min-width: 768px) {
margin: calc(3 * 1rem) calc(10% + 60px) 1rem;
.entry .entry-title:before {
.entry .entry-title.has-text-align-center:before {
.entry .entry-title.has-text-align-right:before {
.entry .entry-title a:hover {
.entry .entry-meta > span,
.entry .entry-footer > span {
.entry .entry-meta > span:last-child,
.entry .entry-footer > span:last-child {
transition: color 110ms ease-in-out;
.entry .entry-meta a:hover,
.entry .entry-footer a:hover {
.entry .entry-meta .svg-icon,
.entry .entry-footer .svg-icon {
margin: calc(2 * 1rem) 1rem 1rem;
@media only screen and (min-width: 768px) {
margin: 1rem calc(10% + 60px) calc(3 * 1rem);
max-width: calc(8 * (100vw / 12) - 28px);
@media only screen and (min-width: 768px) {
max-width: calc(6 * (100vw / 12) - 28px);
@media only screen and (min-width: 768px) {
margin: 1rem calc(10% + 60px);
.entry .post-thumbnail:focus {
.entry .post-thumbnail .post-thumbnail-inner {
.entry .post-thumbnail .post-thumbnail-inner img {
.image-filters-enabled .entry .post-thumbnail {
.image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner {
.image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner:after {
background: rgba(0, 0, 0, 0.35);
@supports (mix-blend-mode: multiply) {
.image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner:after {
.image-filters-enabled .entry .post-thumbnail:before, .image-filters-enabled .entry .post-thumbnail:after {
.image-filters-enabled .entry .post-thumbnail:before {
.image-filters-enabled .entry .post-thumbnail:after {
mix-blend-mode: multiply;
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
@supports (mix-blend-mode: multiply) {
.image-filters-enabled .entry .post-thumbnail:after {
max-width: calc(100% - (2 * 1rem));
@media only screen and (min-width: 768px) {
.entry .entry-content p {
.entry .entry-content .more-link {
transition: color 110ms ease-in-out;
.entry .entry-content .more-link:after {
.entry .entry-content .more-link:hover {
.entry .entry-content a {
text-decoration: underline;
.entry .entry-content a.button, .entry .entry-content a:hover {
.entry .entry-content a.button {
.entry .entry-content a.button:hover {
.entry .entry-content > iframe[style] {
margin: 32px 0 !important;
max-width: 100% !important;
@media only screen and (min-width: 768px) {
.entry .entry-content > iframe[style] {
max-width: calc(8 * (100vw / 12) - 28px) !important;
@media only screen and (min-width: 1168px) {
.entry .entry-content > iframe[style] {
max-width: calc(6 * (100vw / 12) - 28px) !important;
.entry .entry-content .page-links a {
margin: calc(0.5 * 1rem);
.entry .entry-content .wp-audio-shortcode {
max-width: calc(100vw - (2 * 1rem));
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-audio-shortcode {
max-width: calc(8 * (100vw / 12) - 28px);
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-audio-shortcode {
max-width: calc(6 * (100vw / 12) - 28px);
margin: calc(2 * 1rem) 1rem 1rem;
@media only screen and (min-width: 768px) {
max-width: calc(8 * (100vw / 12) - 28px);
@media only screen and (min-width: 1168px) {
max-width: calc(6 * (100vw / 12) - 28px);