/*
Theme Name: Grid Magazine
Theme URI: https://github.com/gonzomir/grid-magazine
Author: Milen Petrinski - Gonzo
Author URI: http://greatgonzo.net
Description: A magazine / news theme using CSS Grid Layout on the homepage.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grid-magazine
Tags: grid-layout, one-column, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready, blog, entertainment, news

Grid Magazine is a theme that uses the new Grid Layout CSS module to achieve a distinctive
look for the homepage - a grid of posts with featured images, properly aligned into rows
and columns.

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Grid Magazine is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	font-size: 12pt;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: 600;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: 600;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
	--main-text-colour: #222;
	--main-background-colour: #FEFEFE;
	--page-background-colour: hsl(53, 56%, 95%);/*#f7f5e7;/*rgb(227, 232, 240); /*hsl(174,10.87%,90%);/*#CCD6D5; /*#98abaa; #ffbf00;*/
	--primary-colour: #AA0000;
	--secondary-colour: #BE0000;
	--tertiary-colour: #F00303;
	--accessory-colour: #555555;
	--short-news-colour: #040E7C;
	--box-border-colour: #D9D9D9;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: var(--main-text-colour);
	font-family: 'Fira Sans', 'Open Sans', 'Arial Nova', 'Helvetica Neu', 'Arial', 'Helvetica', sans-serif;
	font-size: 100%;
	font-weight: 300;
	line-height: 1.5;
}

.huge {
  font-size: 3em;
  line-height: 1.05882353;
  margin-top: 0.35294118em;
  margin-bottom: 0.70588236em;
}

h1, h2, .large {
  font-size: 1.8em;
  line-height: 1.14285714;
  margin-top: 0.57142857em;
  margin-bottom: 0.57142857em;
}

h3, .medium {
  font-size: 1.4em;
  line-height: 1.84615385;
  margin-top: 0.92307692em;
  margin-bottom: 0;
}

h4, h5, h6 {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 0;
}

.small {
	font-size: 0.8125em;
	line-height: 1.846153846;
}

p, ul, ol, pre, table, blockquote {
  margin-top: 0;
  margin-bottom: 1.5em;
}

ul ul, ol ol, ul ol, ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

/* Let's make sure all's aligned */
hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}

sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

h1 {
	font-weight: 600;
}

h2 {
	font-weight: 600;
}

h3 {
	font-weight: 600;
}

h4, h5, h6 {
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

strong {
	font-weight: 600;
}

h1 strong {
	font-weight: 700;
}

h1 strong,
h2 strong {
	color: var(--primary-colour);
}

p {
	text-align: inherit;
}

blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 1.5em 0 1.5em 2em;
	font-style: italic;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

address {
	margin: 0 0 1.5em;
}

pre {
	border: 1px solid var(--accessory-colour);
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	margin-bottom: 1.5em;
	width: 100%;
	overflow: auto;
	padding: calc(1.5em - 1px) 1em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted var(--accessory-colour);
	cursor: help;
}

mark,
ins {
	background: var(--primary-colour);
	color: var(--main-background-colour);
}

big {
  font-size: 1.625em;
  line-height: 1.84615385;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
	color: var(--main-text-colour);
	background-color: #fefefe;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0 1em;
	display: flex;
	flex-direction: column;
	background-color: var(--page-background-colour);
}
.page article {
	background-color: var(--main-background-colour);
	padding: 2em;
}
.single article footer.entry-meta,
.single article header.entry-meta,
.single article .entry-content {
	background-color: var(--main-background-colour);
	padding: 1.5em 2em;
}
.single article header.entry-meta {
	padding-bottom: 0;
}
.single article header.entry-meta p,
.single article header.entry-meta p span {
	margin-bottom: 0 !important;
}
.single article header.entry-meta {
	margin-top: 2.5em !important;
}
.single article footer.entry-meta {
	margin-top: 0 !important;
}
.single article footer.entry-meta span.posted-on {
	text-align: right;
	font-style: italic;
}

body > * {
	flex-shrink: 0;
}

main {
	flex-grow: 1;
}

/*
 * When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1),
 * it must ignore the selector and the following declaration block (if any) as well.
 * See: http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11
 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/**
	 * The <body> on IE must be height: 100% in order
	 * for this to work.
	 */
	body {
		height: 100%;
	}
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: var(--accessory-colour);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

ul ul, ol ol, ul ol, ol ul {
	margin-top: 0;
	margin-bottom: 0;
}

dt {
	font-weight: 600;
}

dt, dd {
	margin: 0;
	padding: 0;
}

dd + dt {
	margin-top: 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

figure {
	margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

iframe, video {
	max-width: 100%;
}

video {
	width: 100%;
	height: auto;
}

table {
	border-collapse: collapse;
	max-width: 100%;
}

td, th {
	padding: .25em .5em;
	border: 1px solid var(--accessory-colour);
	text-align: left;
}


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: var(--primary-colour);
	border-radius: 3px;
	background: var(--primary-colour);
	color: rgba(255, 255, 255, .8);
	font-size: 1.25em;
	line-height: 1;
	padding: .5em 1em .5em;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 100%);
}

input[type="reset"] {
	background: var(--main-background-colour);
	color: var(--primary-colour);
}


input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: inherit;
	border: 1px solid;
	border-color: currentColor;
	border-radius: 3px;
	padding: .25em .5em;
}

select {
	border: 1px solid;
	border-color: currentColor;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	border-color: var(--primary-colour);
}

textarea {
	width: 100%;
}

label {
	display: block;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: var(--primary-colour);
	text-decoration: none;
}

a:visited {
	color: var(--secondary-colour);
}

a:hover,
a:focus,
a:active {
	text-decoration: underline;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

h1 a, h2 a, h3 a,
h1 a:visited, h2 a:visited, h3 a:visited {
	color: inherit;
	text-decoration: none;
}



/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	margin: 1em auto 1.25em 0;
	width: 100%;
}

.main-navigation ul {
	visibility: hidden;
	list-style: none;
	height: auto;
	max-height: 0;
	margin: 0;
	padding-left: 0;
	transition: all ease 200ms;
	font-size: 1.05em;
	font-weight: 300;
	border-bottom: 1px solid var(--primary-colour);
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	padding: 0px 1em;
	text-decoration: none;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
	top: 100%;
	left: -999em;
	width: 12em;
	min-width: 100%;
	max-height: none;
	background-color: #fff;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
}

.main-navigation ul ul li {

}

.main-navigation li > a {
	/*color: #666;*/
	/*background-color: rgba(255, 255, 255, .5);*/
	color: var(--primary-colour);
	/*border: 1px solid transparent;*/
}

.main-navigation li > a:hover,
.main-navigation li > a:focus {
	/*border-color: var(--primary-colour);*/
	color: var(--secondary-colour);
	/*background-color:rgba(255, 255, 255, .1);*/
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
ul#menu-footermenu .current-menu-item > a/*,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a */{
	font-weight: bolder;
}

.menu-toggle {
	background-color: transparent;
	color: var(--primary-colour);
	border-color: currentColor;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
	color: var(--secondary-colour);
	background-image: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
	visibility: visible;
}

.main-navigation.toggled ul {
	max-height: 1000em;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		visibility: visible;
	}
	.main-navigation > ul {
		display: block;
		display: flex;
		flex-flow: row wrap;
		max-height: none;
	}
	.main-navigation > ul > li {
		display: inline-block;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .pagination,
.site-main .post-navigation {
	margin: 0 0 3em;
	overflow: hidden;
}

.site-main .post-navigation strong {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.comment-navigation .nav-previous,
	.posts-navigation .nav-previous,
	.post-navigation .nav-previous {
		float: left;
		width: 50%;
	}

	.comment-navigation .nav-next,
	.posts-navigation .nav-next,
	.post-navigation .nav-next {
		float: right;
		text-align: right;
		width: 50%;
	}

}

.page-links a,
.page-links > span,
.pagination a,
.pagination .current {
	display: inline-block;
	border: 1px solid;
	border-color: currentColor;
	border-radius: 3px;
	margin: 0 .125em;
	min-width: 2em;
	padding: calc(.25em - 1px) .5em;
	text-align: center;
	text-decoration: none;
}

.page-links > span,
.pagination .current {
	color: var(--accessory-colour);
}

aside#footer_1 {
	margin: 0 auto;
	text-align: center;
}

ul#menu-footermenu {
	display: block;
	max-height: none;
	list-style: none;
}
ul#menu-footermenu li {
	display: inline-block;
}
ul#menu-footermenu li a {
	display: block;
	text-decoration: none;
	color: var(--primary-colour);
}
ul#menu-footermenu li a:active,
ul#menu-footermenu li a:hover {
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: var(--main-background-colour);
	border: 1px solid;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
	clip: auto !important;
	color: var(--primary-colour);
	display: block;
	font-weight: 600;
	height: auto;
	left: 1.5em;
	line-height: normal;
	padding: .5em .5em;
	text-decoration: none;
	top: 1.5em;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignleft,
img.alignright,
.wp-caption.alignleft,
.wp-caption.alignright {
	max-width: 50% !important;
}

.alignwide img,
.alignfull img {
	width: 100%;
}


/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.entry-header {
	margin-bottom: 1.5em;
}

.entry-footer span:after {
	content: '; ';
}

.entry-footer span:last-child:after {
	content: '';
}

.post-thumbnail {
	display: block;
	margin-bottom: 1.5em;
}

.post-thumbnail img {
	display: block;
	width: 100%;
	margin: 0;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comments-area {
	margin-bottom: 3em;
}

.comment-content a {
	word-wrap: break-word;
}

@supports(hyphens: auto){
	.comment-content a {
		word-break: normal;
		hyphens: auto;
	}
}

.bypostauthor {
	display: block;
}

.bypostauthor .avatar {
	box-shadow: 0 0 0 .2em var(--primary-colour);
}

.comment-list {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.comment-list ol {
	list-style-type: none;
	padding-left: 0;
	margin-left: 3em;
}

.comment-body {
	margin-bottom: 3em;
}

.comment-meta {
	margin-bottom: 1.5em;
}

.avatar {
	float: left;
	margin: 0 1.5rem 1.5rem 0;
}

.comment-content {
	clear: both;
}

@media all and (min-width: 40em) {
	.single .avatar {
		margin-left: calc( -1 * (96px + 1.5rem) );
	}

	.comment-content {
		clear: none;
	}

	.page .comment-content,
	.comment-list ol {
		margin-left: calc( 96px + 1.5rem );
	}

}


.comment-form input {
	width: 100%;
}

.comment-form *[type="submit"] {
	width: auto;
}


/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll .pagination,  /* Posts Pagination (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	width: auto !important;  /* To overwrite inlined styles in Theme Unit Test content. */
	max-width: 100% !important; /* To overwrite inlined styles in Theme Unit Test content. */
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

@supports (display: grid) {

	.gallery {
		display: grid;
		grid-gap: 1.5em;
	}

	.gallery .gallery-item {
		display: block;
		width: auto;
		max-width: 100%;
		margin: 0;
	}

	.gallery-columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gallery-columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gallery-columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.gallery-columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.gallery-columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.gallery-columns-7 {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.gallery-columns-8 {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.gallery-columns-9 {
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}

}

/*--------------------------------------------------------------
## Search form
--------------------------------------------------------------*/

.search-form {
	display: flex;
	align-items: stretch;
}

.search-form input[type="search"]{
	flex: 1;
	min-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.search-form [type="submit"]{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/*--------------------------------------------------------------
## Site branding
--------------------------------------------------------------*/

header[role="banner"] {
  /*position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  justify-content: space-between;*/
  margin: 0 -1em;
  padding: 1.75em 1em 1.75em 1em;
}

header[role="banner"] * {
  color: inherit;
  text-decoration: none;
}

header[role="banner"] .site-title {
  margin: 0;
  padding: 0;
	font-family: 'Teko', 'Open Sans', 'Arial Nova', 'Helvetica Neu', 'Arial', 'Helvetica', sans-serif;
  font-weight: 900;
  font-size: 2.625em;
  font-size: calc(2.625em + 1.625 * (5vw - 1em));
  line-height: 1.142857143;
  line-height: 3rem;
  text-transform: none;
}

header[role="banner"] .site-title img {
	/*height: 150px;*/
	width: 498px;
}

header[role="banner"] p {
  margin-bottom: 1em;
}

header[role="banner"] .site-title a {
  text-decoration: none;
	display: inline-block;
}

/*
.site-branding {
	float: left;
}

.main-navigation {
	float: right;
}

@supports(display: flex){

	.site-branding,
	.main-navigation {
		float: none;
	}

}*/

/*--------------------------------------------------------------
## Content info
--------------------------------------------------------------*/

footer[role="contentinfo"] {
	padding: 1.5em 0;
	border-top: 2px solid var(--accessory-colour);
}

footer[role="contentinfo"] > * {
	color: var(--accessory-colour);
}

footer[role="contentinfo"] a:link,
footer[role="contentinfo"] a:visited {
	color: var(--accessory-colour);
	text-decoration: underline;
}

footer[role="contentinfo"] a:hover,
footer[role="contentinfo"] a:focus {
	text-decoration-style: double;
}

/*--------------------------------------------------------------
## Layout
--------------------------------------------------------------*/

#page.site {
	max-width: 1200px;
	margin: 10px auto;
}

.blog main, .category main, .archive main {
  margin-left: -.75em;
  margin-right: -.75em;
}

.blog .sidebar,
.single .sidebar,
.page .sidebar,
.archive .sidebar {
	clear: both;
}

.blog main > *,
.blog .sidebar > *,
.single .sidebar > *,
.page .sidebar > *,
.archive .sidebar > * {
  float: left;
  min-width: 18em;
  max-width: 100%;
  margin: 0 .75em 1.5em;
}

.blog main > header,
.category main > header,
.archive main > header {
	float: none;
	margin: 0;
}

.blog main article,
.category main article,
.archive main article,
.page-template-article-overview-page main > article.page article.post {
	border: 1px solid var(--box-border-colour);
}

@supports (display: grid) {

  .blog main,
	.category main,
	.blog .sidebar,
	.single .sidebar,
	.page .sidebar,
	.archive main,
	.archive .sidebar {
    display: grid;
    grid-template-columns: minmax(1fr, 640px);
    grid-gap: 1.5em;
    margin: 0 0 1.5em;
  }

	.blog main,
	.category main,
	.archive main {
		grid-auto-rows: max-content;
	}

  .blog main > *,
	.blog .sidebar > *,
	.single .sidebar > *,
	.page .sidebar > *,
	.archive main > *,
	.archive .sidebar > * {
    min-width: 0;
    margin: 0;
  }

	.blog main > header,
	.category main > header,
	.archive main > header {
	  position: absolute;
	}

	.blog main > .posts-navigation,
	.blog main > .pagination,
	.category main > .posts-nagigation,
	.category main > .pagination,
	.archive main > .posts-navigation,
	.archive main > .pagination {
	  grid-column: 1 / -1;
	  align-self: center;
	}

}

.blog main > .post,
.category main > .post,
.archive main > .post,
.page-template-article-overview-page main > article.page article.post,
.wp-block-grid-mag-article-grid > article.post {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 1.5em;
  padding: 0 0 1em;
  box-sizing: border-box;
	font-family: 'Dosis', Arial, Helvetica, sans-serif;
}

.blog main > .post > *,
.category main > .post > *,
.archive main > .post > *,
.page-template-article-overview-page main > article.page article.post > *,
.wp-block-grid-mag-article-grid > article.post > * {
  position: relative;
  z-index: 2;
}

.blog main > .post .entry-header,
.category main > .post .entry-header,
.archive main > .post .entry-header,
.page-template-article-overview-page main > article.page article.post .entry-header,
.wp-block-grid-mag-article-grid > article.post .entry-header {
	margin-bottom: 0;
}

.blog main > .post .post-thumbnail,
.category main > .post .post-thumbnail,
.archive main > .post .post-thumbnail,
.page-template-article-overview-page main > article.page article.post .post-thumbnail,
.wp-block-grid-mag-article-grid > article.post .post-thumbnail {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}

.blog main > .post .post-thumbnail:after,
.category main > .post .post-thumbnail:after,
.archive main > .post .post-thumbnail:after,
.page-template-article-overview-page main > article.page article.post .post-thumbnail:after,
.wp-block-grid-mag-article-grid > article.post .post-thumbnail:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  opacity: 0;
  z-index: 1;
  transition: opacity linear 200ms;
}

.blog main > .post:hover .post-thumbnail:after,
.category main > .post:hover .post-thumbnail:after,
.archive main > .post:hover .post-thumbnail:after,
.page-template-article-overview-page main > article.page article.post:hover .post-thumbnail:after,
.wp-block-grid-mag-article-grid > article.post:hover .post-thumbnail:after {
  opacity: .5;
}

.blog main > .post .post-thumbnail img,
.category main > .post .post-thumbnail img,
.archive main > .post .post-thumbnail img,
.page-template-article-overview-page main > article.page article.post .post-thumbnail img,
.wp-block-grid-mag-article-grid > article.post .post-thumbnail img {
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
  min-width: 100%;
  min-height: 100%;
  margin: auto;
	aspect-ratio: 4/3;
}

.blog main > .post.has-post-thumbnail,
.category main > .post.has-post-thumbnail,
.archive main > .post.has-post-thumbnail,
.page-template-article-overview-page main > article.page article.post.has-post-thumbnail {
  justify-content: flex-end;
  min-height: 240px;
  padding: 0 1em 1em;
}

body.single-post main > article.post .wp-block-grid-mag-article-grid > article.post.has-post-thumbnail {
	justify-content: flex-end;
	justify-self: center;
	padding: 0 1em 2em;
	margin-bottom: 0;
	aspect-ratio: 4/3 !important;
	width: min(calc(100% - 1.75em), 480px);
}

.blog main > .post.has-post-thumbnail,
.blog main > .post.has-post-thumbnail a:link,
.blog main > .post.has-post-thumbnail a:visited,
.blog main > .post.has-post-thumbnail header *,
.blog main > .post.has-post-thumbnail footer *,
.category main > .post.has-post-thumbnail,
.category main > .post.has-post-thumbnail a:link,
.category main > .post.has-post-thumbnail a:visited,
.category main > .post.has-post-thumbnail header *,
.category main > .post.has-post-thumbnail footer *,
.archive main > .post.has-post-thumbnail,
.archive main > .post.has-post-thumbnail a:link,
.archive main > .post.has-post-thumbnail a:visited,
.archive main > .post.has-post-thumbnail header *,
.archive main > .post.has-post-thumbnail footer *,
.page-template-article-overview-page main > article.page article.post.has-post-thumbnail,
.page-template-article-overview-page main > article.page article.post.has-post-thumbnail a:link,
.page-template-article-overview-page main > article.page article.post.has-post-thumbnail a:visited,
.page-template-article-overview-page main > article.page article.post.has-post-thumbnail header *,
.page-template-article-overview-page main > article.page article.post.has-post-thumbnail footer *,
.wp-block-grid-mag-article-grid > article.post.has-post-thumbnail,
.wp-block-grid-mag-article-grid > article.post.has-post-thumbnail a:link,
.wp-block-grid-mag-article-grid > article.post.has-post-thumbnail a:visited,
.wp-block-grid-mag-article-grid > article.post.has-post-thumbnail header *,
.wp-block-grid-mag-article-grid > article.post.has-post-thumbnail footer * {
  color: #fff;
  text-shadow: 0 0 1px #000;
}

.blog main > .post.has-post-thumbnail a:hover,
.blog main > .post.has-post-thumbnail a:focus,
.category main > .post.has-post-thumbnail a:hover,
.category main > .post.has-post-thumbnail a:focus,
.archive main > .post.has-post-thumbnail a:hover,
.archive main > .post.has-post-thumbnail a:focus,
.page-template-article-overview-page main > article.page article.post.has-post-thumbnail a:hover,
.page-template-article-overview-page main > article.page article.post.has-post-thumbnail a:focus,
.wp-block-grid-mag-article-grid > article.post.has-post-thumbnail a:hover,
.wp-block-grid-mag-article-grid > article.post.has-post-thumbnail a:focus {
  text-shadow: 0 0 3px #000;
}

.blog main h2,
.category main h2,
.archive main h2,
.page-template-article-overview-page main > article.page article.post h2,
.wp-block-grid-mag-article-grid > article.post h2 {
  font-size: 1.35em;
  line-height: 1.2;
	font-weight: 600;
	margin: 0;
	/*letter-spacing: 0.3px;*/
}

.blog main > article.post .cat-links,
.category main > article.post .cat-links,
.archive main > article.post .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links,
.wp-block-grid-mag-article-grid > article.post .cat-links {
	padding: 0.2em 0.3em;
	display: inline-block;
	background: rgba(128, 128, 128, 0.7);
	margin-left: 0.5em;
	font-family: "Fira Sans", Helvetica, Arial, sans-serif;
	font-size: 0.85em;
	position: relative;
	top: 2px;
}

.blog main > article.post .entry-title a,
.category main > article.post .entry-title a,
.archive main > article.post .entry-title a,
.page-template-article-overview-page main > article.page article.post .entry-title a,
.wp-block-grid-mag-article-grid > article.post .entry-title a {
	padding: 0.1em 0.3em 0.2em 0.3em;
	/*padding: 0.15em 0.35em 0.25em 0.35em;*/
	display: inline-block;
	background: rgba(255, 255, 255, 0.9);
}
.blog main > article.post .entry-title a:link,
.blog main > article.post .entry-title a:visited,
.category main > article.post .entry-title a:link,
.category main > article.post .entry-title a:visited,
.archive main > article.post .entry-title a:link,
.archive main > article.post .entry-title a:visited,
.page-template-article-overview-page main > article.page article.post .entry-title a:link,
.page-template-article-overview-page main > article.page article.post .entry-title a:visited,
.wp-block-grid-mag-article-grid > article.post .entry-title a:link,
.wp-block-grid-mag-article-grid > article.post .entry-title a:visited {
  color: #000;
	text-shadow: 0 0 1px #fff;
}
.blog main > article.post .entry-title a:hover,
.blog main > article.post .entry-title a:focus,
.category main > article.post .entry-title a:hover,
.category main > article.post .entry-title a:focus,
.archive main > article.post .entry-title a:hover,
.archive main > article.post .entry-title a:focus,
.page-template-article-overview-page main > article.page article.post .entry-title a:hover,
.page-template-article-overview-page main > article.page article.post .entry-title a:focus,
.wp-block-grid-mag-article-grid > article.post .entry-title a:hover,
.wp-block-grid-mag-article-grid > article.post .entry-title a:focus {
	text-shadow: 0 0 3px #fff;
}

.blog main > article.post.category-reportage .cat-links,
.category main > article.post.category-reportage .cat-links,
.single .site-main article.has-post-thumbnail.category-reportage .post-thumbnail-wrapper header.entry-header .cat-links,
.archive main > article.post.category-reportage .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-reportage,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-reportage {
	background: rgba(192, 0, 0, 0.9);
}
.blog main > article.post.category-interview .cat-links,
.category main > article.post.category-interview .cat-links,
.archive main > article.post.category-interview .cat-links,
.single .site-main article.has-post-thumbnail.category-interview .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-interview,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-interview {
	background: rgba(52, 124, 152, 0.9);
}
.blog main > article.post.category-schuelerthema .cat-links,
.category main > article.post.category-schuelerthema .cat-links,
.archive main > article.post.category-schuelerthema .cat-links,
.single .site-main article.has-post-thumbnail.category-schuelerthema .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-schuelerthema,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-schuelerthema,
.blog main > article.post.category-projekte .cat-links,
.category main > article.post.category-projekte .cat-links,
.archive main > article.post.category-projekte .cat-links,
.single .site-main article.has-post-thumbnail.category-projekte .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-projekte,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-projekte {
	background: rgba(32, 32, 192, 0.9);
}
.blog main > article.post.category-editorial .cat-links,
.category main > article.post.category-editorial .cat-links,
.archive main > article.post.category-editorial .cat-links,
.single .site-main article.has-post-thumbnail.category-editorial .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-editorial,
.blog main > article.post.category-fake-news-gegen-rassimus .cat-links,
.category main > article.post.category-fake-news-gegen-rassimus .cat-links,
.archive main > article.post.category-fake-news-gegen-rassimus .cat-links,
.single .site-main article.has-post-thumbnail.category-fake-news-gegen-rassimus .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-fake-news-gegen-rassimus,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-editorial,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-fake-news-gegen-rassimus {
	background: rgba(102, 0, 204, 0.9);
}
.blog main > article.post.category-kgs-panorama .cat-links,
.category main > article.post.category-kgs-panorama .cat-links,
.archive main > article.post.category-kgs-panorama .cat-links,
.single .site-main article.has-post-thumbnail.category-kgs-panorama .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-kgs-panorama,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-kgs-panorama {
	background: rgba(32, 192, 32, 0.9);
}
.blog main > article.post.category-satire .cat-links,
.category main > article.post.category-satire .cat-links,
.archive main > article.post.category-satire .cat-links,
.single .site-main article.has-post-thumbnail.category-satire .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-satire,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-satire {
	background: rgba(138, 172, 0, 0.9);
}
.blog main > article.post.category-kreatives-lesen .cat-links,
.category main > article.post.category-kreatives-lesen .cat-links,
.archive main > article.post.category-kreatives-lesen .cat-links,
.single .site-main article.has-post-thumbnail.category-kreatives-lesen .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-kreatives-lesen,
.blog main > article.post.category-unterhaltung .cat-links,
.category main > article.post.category-unterhaltung .cat-links,
.archive main > article.post.category-unterhaltung .cat-links,
.single .site-main article.has-post-thumbnail.category-unterhaltung .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-medienzeit,
.blog main > article.post.category-medienzeit .cat-links,
.category main > article.post.category-medienzeit .cat-links,
.archive main > article.post.category-medienzeit .cat-links,
.single .site-main article.has-post-thumbnail.category-medienzeit .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-unterhaltung,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-kreatives-lesen,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-unterhaltung {
	background: rgba(192, 32, 192, 0.9);
}
.blog main > article.post.category-podcast .cat-links,
.category main > article.post.category-podcast .cat-links,
.archive main > article.post.category-podcast .cat-links,
.single .site-main article.has-post-thumbnail.category-podcast .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-podcast,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-podcast,
.blog main > article.post.category-7-fragen-an .cat-links,
.category main > article.post.category-7-fragen-an .cat-links,
.archive main > article.post.category-7-fragen-an .cat-links,
.single .site-main article.has-post-thumbnail.category-7-fragen-an .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-7-fragen-an,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-7-fragen-an,
.blog main > article.post.category-mehr-erfahren .cat-links,
.category main > article.post.category-mehr-erfahren .cat-links,
.archive main > article.post.category-mehr-erfahren .cat-links,
.single .site-main article.has-post-thumbnail.category-mehr-erfahren .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-mehr-erfahren,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-mehr-erfahren {
	background: rgba(230, 138, 0, 0.9);
}
.blog main > article.post.category-redaktion .cat-links,
.category main > article.post.category-redaktion .cat-links,
.archive main > article.post.category-redaktion .cat-links,
.single .site-main article.has-post-thumbnail.category-redaktion .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-redaktion,
.blog main > article.post.category-ueber-uns .cat-links,
.category main > article.post.category-ueber-uns .cat-links,
.archive main > article.post.category-ueber-uns .cat-links,
.single .site-main article.has-post-thumbnail.category-ueber-uns .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-ueber-uns,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-redaktion,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-ueber-uns {
	background: rgba(51, 153, 102, 0.9);
}
.blog main > article.post.category-weblog .cat-links,
.category main > article.post.category-weblog .cat-links,
.archive main > article.post.category-weblog .cat-links,
.single .site-main article.has-post-thumbnail.category-weblog .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-weblog,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-weblog {
	background: rgba(64, 64, 64, 0.9);
}
.blog main > article.post.category-video .cat-links,
.category main > article.post.category-video .cat-links,
.archive main > article.post.category-video .cat-links,
.single .site-main article.has-post-thumbnail.category-video .post-thumbnail-wrapper header.entry-header .cat-links,
.page-template-article-overview-page main > article.page article.post .cat-links.category-video,
.wp-block-grid-mag-article-grid > article.post .cat-links.category-video {
	background: rgba(153, 51, 0, 0.9);
}

.blog main > .post header.entry-header .entry-meta > .posted-on,
.blog main > .post header.entry-header .entry-meta > .byline,
.category main > .post header.entry-header .entry-meta > .posted-on,
.category main > .post header.entry-header .entry-meta > .byline,
.archive main > .post header.entry-header .entry-meta > .posted-on,
.archive main > .post header.entry-header .entry-meta > .byline {
	display: none;
}

.posts-navigation,
.pagination,
.post-navigation {
  clear: both;

  float: none !important;
  width: 100% !important;
	max-width: 960px;
	margin: 0 auto 3em auto !important;
}

.pagination {
	text-align: center;
}

body.single main article.post {
	max-width: calc(100vw - 3em);
}

body.single main article.post .post-thumbnail img {
	max-width: calc(100vw - 6.4em);
	max-height: 480px;
	margin: auto;
	width: auto !important;
}

body.single main article.post > .entry-content > .wp-block-grid-mag-article-grid article.post .post-thumbnail img {
	max-width: none;
	max-height: none;
	width: 100% !important;
}

body.single main article p {
	/* text-align: justify; */
}

.single main h1 {
}

.single main > .entry-meta {
	margin-bottom: 1.5em;
}

.single main .posted-on,
.single main .byline {
	font-weight: 300;
	font-size: 1em;
	line-height: 1.2;
}

/*--------------------------------------------------------------
* Disable extra mobile menu by default
*/
nav#mobile-navigation {
	display: none;
}

/*--------------------------------------------------------------
## Media queries
--------------------------------------------------------------*/

@media screen and (min-width: 25em) {

  body {
    padding: 0 1.5em;
  }

}

@media screen and (min-width: 688px) {
	body {
		/*background: radial-gradient(#fde3c7, #f5dbbb);*/
		background-color: var(--page-background-colour);
		background-image: url('./images/background_cut.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		/*background-size: 100vw auto;*/
		background-size: cover;
		background-attachment: fixed;
	}

	@supports (display: grid) {
		.blog main,
		.category main,
		.archive main,
		.blog .sidebar,
		.single .sidebar,
		.page .sidebar,
		.archive main,
		.archive .sidebar {
			grid-template-columns: 1fr 1fr;
		}
	}
}

@media screen and (min-width: 1116px) {

  body {
    padding: 0 1.5em;
  }

	h1 {
	  font-size: 3em;
	  line-height: 1.05882353;
	  margin-top: 0.35294118em;
	  margin-bottom: 0.70588236em;
	}

  header[role="banner"] .site-title {
	  font-size: 4.25em;
	  line-height: 0.70588236;
  }

  .blog main > .post,
	.category main > .post,
	.archive main > .post {
  	float: left;
    width: calc(33.3333% - 1.5em);
  }

  .blog main > .post .entry-content,
	.category main > .post .entry-content,
	.archive main > .post .entry-content {
    margin-top: auto;
  }

  .blog main > .post.has-post-thumbnail,
	.category main > .post.has-post-thumbnail,
	.archive main > .post.has-post-thumbnail,
	.page-template-article-overview-page main > article.page article.post.has-post-thumbnail {
    min-height: calc( (100vw - (1.5em + (5vw - 2em)) * 2 - 1.5em) / 2 * .75 );
  }

	.category main, .archive main {
		margin-right: calc(240px + 2.5em);
	}

  @supports (display: grid) {

		.blog main, .category main, .archive main {
      grid-auto-rows: max-content;
    }

		.home.blog > .site > .site-content ,
		.page-template-article-overview-page > .site > .site-content {
			display: grid;
			grid-template-columns: auto 240px;
			grid-template-areas: "main shortnews";
			grid-gap: 2.5em;
		}
		.home.blog > .site > .site-content > main.site-main,
		.page-template-article-overview-page > .site > .site-content > main.site-main {
			grid-area: main;
		}
		.home.blog > .site > .site-content > aside#front-page-short-news,
		.page-template-article-overview-page > .site > .site-content > aside#front-page-short-news {
			grid-area: shortnews;
		}

		footer.site-footer {
			padding: 0;
			display: grid;
			grid-gap: 1em;
			align-items: flex-start;
			grid-template-rows: auto;
			grid-template-columns: 170px auto 77px;
			font-size: 0.9em;
		}
		footer.site-footer > .site-info {
			grid-column: 1;
			font-weight: 500;
		}
		footer.site-footer > #footer_2 {
			grid-column: 2;
			text-align: right;
		}
		footer.site-footer > #kgslogo {
			grid-column: 3;
			align-items: flex-end;
		}
		footer.site-footer > #kgslogo img {
			width: 77px;
		}

		header.site-header > .site-branding {
			display: grid;
			grid-row: 1;
			grid-gap: .6em;
			align-items: flex-end;
			grid-template-columns: max-content auto;
		}
		header.site-header > .site-branding .site-title {
			grid-column: 1/2;
		}
		header.site-header > .site-branding .site-description {
			font-family: Dosis, sans-serif;
			/*font-size: 1.65em;*/
			/*font-weight: bold;*/
			/*opacity: .75;*/
			grid-column: 2/2;

			position: relative;
			/*top: -23px;
			left: -55px;*/

			font-size: 2em;
			top: -11px;
			left: -45px;
			font-weight: 300;
			color: #444;
		}

    .blog main > .post,
		.category main > .post,
		.archive main > .post,
		.page-template-article-overview-page main > article.page article.post {
    	float: none;
      width: auto;
      min-height: 280px;
      margin-bottom: 0;
    }

    /*.blog:not(.paged) main > .post.has-post-thumbnail:first-of-type {
      width: auto;
      min-height: 0;
      grid-column: span 2;
      grid-row: span 2;
    }*/

    .blog main > .post,
    .blog main > .post.has-post-thumbnail,
		.category main > .post,
		.category main > .post.has-post-thumbnail,
		.archive main > .post,
		.archive main > .post.has-post-thumbnail,
		.page-template-article-overview-page main > article.page article.post,
		.page-template-article-overview-page main > article.page article.post.has-post-thumbnail {
      min-height: 280px;
    }

		.blog main > .posts-navigation,
		.category main > .posts-navigation,
		.archive main > .posts-navigation {
		  grid-column: 1/3;
		}

  }

	.single main > article:after {
		content: '';
		display: table;
		clear: both;
	}

	.single main .post-thumbnail {
		width: 100%;
		min-height: calc( (100vw - (1.5em + (100vw - 40) / 20) * 2) * 6/16 );
	}

	.single main .entry-meta > p {
		top: 1.5em;
	}

	.single main .entry-meta > p > span {
		display: block;
		margin-bottom: 1.5em;
	}

	.single main .entry-meta .posted-on {
	  font-size: 1em;
	  line-height: 1.14285714;
	  margin-bottom: 0.571428571em;
	}

  @supports(display: grid) {

		.single main > article,
		.single main > .comments-area {
			display: block;
			max-width: 960px;
			margin: 0 auto 3em auto;
		}

		.single main .entry-content,
		.single main .entry-meta,
		.single main .comments-area {
			float: none;
			width: 100%;
			margin: 0;
		}

		.single main .entry-header,
		.single main .post-thumbnail,
		.single main .comments-title,
		.single main .comment-navigation {
			width: 100%;
		}

		.single main .post-thumbnail {
			margin-bottom: 0;
		}
  }
}

@media screen and (min-width: 1400px) {
	#page.site {
		max-width: 1400px;
	}
}

/*--------------------------------------------------------------
## Widget and plugin specific styles
--------------------------------------------------------------*/

.widget ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.widget_recent_entries li,
.widget_rss li {
	margin-bottom: 1.5em;
}

.widget_recent_entries li > a,
.widget_rss li > a {
	display: block;
}

.widget_media_image > img {
	width: 100% !important;
}

.wp-block-image figcaption {
	font-size: 0.9em;
	color: #777;
}

/*--------------------------------------------------------------
## Short News
--------------------------------------------------------------*/
aside#front-page-short-news {
	width: 240px;
}
aside#front-page-short-news > .short-news > header {
	padding: 0;
	margin: 0;
	border-bottom: 1px solid var(--short-news-colour);
	color: var(--short-news-colour);
	font-size: 0.95em;
}
aside#front-page-short-news > .short-news > header > a {
	color: var(--short-news-colour);
}
aside#front-page-short-news > .short-news > .short-news-articles {
	padding: 10px 0;
	color: #0f0f0f;
	font-size: 0.75em;
	line-height: 1.3em;
}
aside#front-page-short-news > .short-news > .short-news-articles article {
	padding: 0;
	border: 1px solid var(--box-border-colour);
	background-color: var(--main-background-colour);
}
aside#front-page-short-news > .short-news > .short-news-articles article .post-thumbnail {
	margin-bottom: 0.4em;
	width: 100%;
}
aside#front-page-short-news > .short-news > .short-news-articles article .post-thumbnail::after {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #ccc;
	opacity: 0.25;
	z-index: 1;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	transition: opacity linear 200ms;
}
aside#front-page-short-news > .short-news > .short-news-articles article .post-thumbnail:hover::after,
aside#front-page-short-news > .short-news > .short-news-articles article .post-thumbnail:active::after {
	opacity: 0;
}
aside#front-page-short-news > .short-news > .short-news-articles article.has-post-thumbnail > header.entry-header {
	position: relative;
}
aside#front-page-short-news > .short-news > .short-news-articles article > header.entry-header {
	margin: 0;
}
aside#front-page-short-news > .short-news > .short-news-articles article > header.entry-header > h2 {
	padding: 0 0.3em 0 10px;
	font-size: 1em;
}
aside#front-page-short-news > .short-news > .short-news-articles article.has-post-thumbnail > header.entry-header > h2 {
	display: block;
	padding: 7px 10px;
	position: absolute;
	box-sizing: border-box;
	z-index: 2;
	bottom: 0;
	left: 0;
	margin: 0;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	text-shadow: 1px 1px 0 #fff;
}
aside#front-page-short-news > .short-news > .short-news-articles article > main {
	display: block;
	padding: 0 10px;
	margin: 0 0 10px 0;
	z-index: 2;
}
aside#front-page-short-news > .short-news > .short-news-articles article > main > p {
	margin: 0;
}
aside#front-page-short-news > .short-news > .short-news-articles article.carousel-visible {
	display: block;
}
aside#front-page-short-news > .short-news > .short-news-articles article.carousel-invisible {
	display: none;
}

/*--------------------------------------------------------------
## Article Overview page sidebar
--------------------------------------------------------------*/
aside#front-page-short-news > section {
	padding: 0;
	background-color: rgba(255,255,255,.4);
}
aside#front-page-short-news > section.widget h2.widget-title {
	/*border-bottom: 1px solid var(--main-text-colour);*/
	color: #444;
	font-size: .95em;
	font-weight: normal;
	padding: .5em;
	margin: 0;
	text-transform: uppercase;
}
aside#front-page-short-news > section.widget > div {
	padding: 0 .5em .75em .5em;
	font-size: 0.95em;
}
aside#front-page-short-news > section.widget > div ul {
	margin: 0;
}

/*
## Single Post Image
*/
.single .site-main article.has-post-thumbnail .outer-post-thumbnail-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper {
	position: relative;
	display: inline-block;
	border: 1.5em solid #FFFFFF;
}
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper .post-thumbnail {
}
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper header.entry-header {
	position: absolute;
	left: 1em;
	bottom: 1em;
	width: calc(100% - 2em);
	margin: 0 0 1em 0;
}
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper header.entry-header .cat-links {
	padding: 0.2em 0.3em;
	display: inline-block;
	background: rgba(128, 128, 128, 0.7);
	margin-left: 0.5em;
	font-family: "Fira Sans", Helvetica, Arial, sans-serif;
	font-size: 0.85em;
	position: relative;
	top: 2px;
}
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper header.entry-header .cat-links a,
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper header.entry-header .cat-links a:link,
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper header.entry-header .cat-links a:visited {
	color: #fff;
	text-shadow: 0 0 1px #000;
}
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper header.entry-header .entry-meta {
	margin: 0;
}
.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper header.entry-header h1.entry-title {
	margin: 0;
	padding: 0.2em 0.3em;
	display: inline-block;
	background: rgba(255, 255, 255, 0.9);
	font-family: "Dosis", Arial, Helvetica, sans-serif;
	font-size: 2em;
}
.single .site-main article.has-post-thumbnail > footer.entry-meta {
	margin-top: 1.5em;
	clear: both;
}

@media screen and (max-width: 700px) {
	h1, h2 {
		font-size: 1.3em;
	}
	.single .site-main article.has-post-thumbnail .post-thumbnail-wrapper header.entry-header h1.entry-title {
		font-size: 1.2em;
		font-weight: 300;
	}
	body.single main article.post {
		margin: 0 auto;
		max-width: 100vw;
	}
	body.single main article.post .post-thumbnail img {
		max-width: calc(100vw - 3.4em);
	}
	header[role="banner"] .site-title img {
		height: 120px;
		width: 400px;
	}
	body.single { padding: 0; }
	body.single header[role="banner"] {
		/*display: inherit;
		flex-flow: inherit;
		align-items: inherit;*/
		padding: 1.75em 1em;
		margin: 0;
	}
	body.single #page.site { margin: 10px 0; }
	footer[role="contentinfo"] { padding: 1.5em 1em; }
	nav.post-navigation { padding: 0 1em; }
	.single article header.entry-meta {
		margin-top: 0 !important;
		margin-bottom: 0;
		padding-top: 0;
	}
	.single .post-thumbnail { margin-bottom: 0; }
	.single .entry-content { margin-top: 0; }
	.navigation-area {
		display: flex;
		flex-flow: row nowrap;
		width: 100%;
	}
	nav#site-navigation {
		flex-grow: 4;
	}
	nav#mobile-navigation {
		display: block;
		margin: 0 0 1.25em auto;
	}
	nav#mobile-navigation ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	nav#mobile-navigation ul li {
		padding: 0;
	}
	nav#mobile-navigation ul li a {
		border: 1px solid currentColor;
		border-radius: 3px;
		color: var(--primary-colour);
		font-size: 1.25em;
		line-height: 1;
		padding: .5em 1em .5em;
		display: block;
	}
	nav#mobile-navigation ul li a:hover,
	nav#mobile-navigation ul li a:active {
		color: var(--secondary-colour);
	}
}

.wp-block-grid-mag-article-teaser {
  color: red;
  background: #cfc;
  border: 2px solid #9c9;
  padding: 20px;
}

.page-template-article-overview-page main > article {
	background: none;
	padding: 0;
	max-width: 1116px;
}

.page-template-article-overview-page main > article > .entry-header { display: none; }
.page-template-article-overview-page main > article > .entry-content {
	margin: 0;
}

@media screen {
	.wp-block-grid-mag-article-grid {
		display: grid;
		grid-gap: 1.75em;
		grid-auto-rows: max-content;
		grid-template-columns: 1fr;
		margin: 0 0 1.75em;
	}
}
@media screen and (min-width: 775px) {
	.wp-block-grid-mag-article-grid {
		grid-template-columns: 1fr 1fr;
	}

	body.single-post main > article.post .wp-block-grid-mag-article-grid {
		grid-template-columns: 1fr;
	}
}
@media screen and (min-width: 980px) {
	body.single-post main > article.post .wp-block-grid-mag-article-grid {
		grid-template-columns: 1fr 1fr;
	}
}

body.page-template-article-overview-page hr.wp-block-separator {
	border: none;
	background-color: var(--primary-colour);
}

.p-1 {
	padding: .8em 2.8em;
}

div.wp-block-grid-mag-slider {
	background-color: rgba(255,255,255,.4);
	height: 100%;
}

div.wp-block-grid-mag-slider article.post.has-post-thumbnail {
	width: 480px !important;
	height: 360px !important;
	margin-right: 2em;
}

div.wp-block-grid-mag-slider article.post.has-post-thumbnail a.post-thumbnail img {
	min-width: 480px;
	min-height: 360px;
}

.flickity-slider > article:not(.is-selected) {
	visibility: hidden !important;
}