/*
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;
	-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;
	--primary-colour: #940000;
	--secondary-colour: #BE0000;
	--tertiary-colour: #F00303;
	--accessory-colour: #555555;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
	color: #222;
	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;
}
button {
	color: #222;
	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;
}
input {
	color: #222;
	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;
}
select {
	color: #222;
	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;
}
textarea {
	color: #222;
	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: 4.25em;
  line-height: 1.05882353;
  margin-top: 0.35294118em;
  margin-bottom: 0.70588236em;
}

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

h3, .medium {
  font-size: 1.625em;
  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: 900;
}

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: 900;
}

h1 strong {
	color: #940000;
	color: var(--primary-colour);
}

h2 strong {
	color: #940000;
	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 #555555;
	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 {
	border-bottom: 1px dotted #555555;
	border-bottom: 1px dotted var(--accessory-colour);
	cursor: help;
}

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

mark {
	background: #940000;
	background: var(--primary-colour);
	color: #fefefe;
	color: var(--main-background-colour);
}

ins {
	background: #940000;
	background: var(--primary-colour);
	color: #fefefe;
	color: var(--main-background-colour);
}

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

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
	color: #222;
	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;
}

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: #555555;
	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 {
	padding: .25em .5em;
	border: 1px solid #555555;
	border: 1px solid var(--accessory-colour);
	text-align: left;
}

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


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

input[type="email"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="url"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="password"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="search"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="number"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="tel"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="range"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="date"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="month"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="week"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="time"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="datetime"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="datetime-local"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

input[type="color"]:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

textarea:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

textarea {
	width: 100%;
}

label {
	display: block;
}

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

a:visited {
	color: #BE0000;
	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-bottom: 1.25em;
}

.main-navigation ul {
	visibility: hidden;
	list-style: none;
	height: auto;
	max-height: 0;
	margin: 0;
	padding-left: 0;
	transition: all ease 200ms;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	padding: .5em;
	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: #940000;
	color: var(--primary-colour);
	border: 1px solid transparent;
}

.main-navigation li > a:hover {
	border-color: #940000;
	border-color: var(--primary-colour);
}

.main-navigation li > a:focus {
	border-color: #940000;
	border-color: var(--primary-colour);
}

.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,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}

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

.menu-toggle:hover {
	color: #BE0000;
	color: var(--secondary-colour);
	background-image: none;
}

.menu-toggle:focus {
	color: #BE0000;
	color: var(--secondary-colour);
	background-image: none;
}

.menu-toggle:active {
	color: #BE0000;
	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 {
	color: #555555;
	color: var(--accessory-colour);
}

.pagination .current {
	color: #555555;
	color: var(--accessory-colour);
}

/*--------------------------------------------------------------
# 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: #fefefe;
	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: #940000;
	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 #940000;
	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;
}

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

header[role="banner"] .site-title {
  margin: 0;
  padding: 0;
  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: uppercase;
}

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

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

.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: .5em solid #555555;
	border-top: .5em solid var(--accessory-colour);
}

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

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

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

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

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

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

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

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

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

@supports (display: grid) {

  .blog main,
	.blog .sidebar,
	.single .sidebar,
	.page .sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18em, 1fr) ) ;
    grid-gap: 1.5em;
    margin: 0 0 1.5em;
  }

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

	.blog main > header {
	  position: absolute;
	}

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

}

.blog main > .post {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 1.5em;
  padding: 0 0 1em;
  box-sizing: border-box;
}

.blog main > .post > * {
  position: relative;
  z-index: 2;
}

.blog main > .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 {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  opacity: .25;
  z-index: 1;
  transition: opacity linear 200ms;
}

.blog main > .post:hover .post-thumbnail:after {
  opacity: .5;
}

.blog main > .post .post-thumbnail img {
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
  min-width: 100%;
  min-height: 100%;
  margin: auto;
}

.blog main > .post.has-post-thumbnail {
  justify-content: flex-end;
  min-height: calc( (100vw - 2em) * 3 / 4 );
  padding: 0 1em 1em;
}

.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 * {
  color: #fff;
  text-shadow: 0 0 1px #000;
}

.blog main > .post.has-post-thumbnail a:hover,
.blog main > .post.has-post-thumbnail a:focus {
  text-shadow: 0 0 3px #000;
}

.blog main h2 {
  font-size: 1.625em;
  line-height: 0.923076923;
  margin: 0.923076923em 0 0;
}

.posts-navigation,
.pagination,
.post-navigation {
  clear: both;
  float: none !important;
  width: 100% !important;
}

.pagination {
	text-align: center;
}


.single main h1 {
}

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

.single main .posted-on {
	font-weight: 900;
	font-size: 1.25em;
	line-height: 1.2;
}

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

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

  body {
    padding: 0 1.5em;
  }

}


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

  body {
    padding: 0 calc(1.5em + (5vw - 2em));
  }

	h1 {
	  font-size: 4.25em;
	  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 {
  	float: left;
    width: calc(33.3333% - 1.5em);
  }

  .blog:not(.paged) main > .post.has-post-thumbnail:first-of-type {
    width: calc(66.6667% - 1.5em);
  }

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

  .blog main > .post.has-post-thumbnail {
    min-height: calc( (100vw - (1.5em + (5vw - 2em)) * 2 - 1.5em) / 2 * .75 );
  }

  .blog:not(.paged) main > .post.has-post-thumbnail:first-of-type {
    min-height: calc( (100vw - (1.5em + (5vw - 2em)) * 2) * .75 );
  }

  .blog:not(.paged) main > .post.has-post-thumbnail:first-of-type .entry-content {
    margin-top: 0;
  }

  @supports (display: grid) {

    .blog main {
      grid-auto-rows: calc( (100vw - (1.5em + (5vw - 2em)) * 2 - 1.5em) / 2 * .75 );
    }

    .blog main > .post {
    	float: none;
      width: auto;
      min-height: 0;
      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 {
      min-height: 0;
    }

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

  }

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

	.single main .entry-header {
	}

	.single main .entry-content,
	.single main .comments-area {
		width: calc(66.6667% - 1.5em);
		float: right;
	}

	.single main .entry-meta {
		width: calc(33.3333% - 1.5em);
		margin-top: 1.5em;
		float: left;
	}

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

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

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

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

  @supports(display: grid){

		.single main > article,
		.single main > .comments-area {
			display: grid;
	    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); /* we need minmax to rewrite the implied minmax(auto, <flex>) */
	    grid-auto-rows: auto;
	    grid-gap: 1.5em;
		}

		.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 {
			grid-column: 1/3;
			width: 100%;
		}

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

		.single main .entry-footer {
			grid-column-start: 1;
		}

		.single main .entry-content,
		.single main .comment-list,
		.single main .comment-respond {
			grid-column-start: 2;
		}

  }


  /*
  @supports(display: grid){
    .blog main > .category-politics {
      grid-row: span 2;
    }

    .blog main > .category-politics:nth-last-child(3),
    .blog main > :nth-last-child(3) ~ .category-politics {
      grid-row: span 1;
    }
  }

  .blog main > .post.category-politics:not(.has-post-thumbnail) {
    border: 1px solid;
    padding: 0 1em 1em;
  }
  */

}

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

  body {
    padding: 0 calc(2.5em + (20vw - 12em));
  }

  .blog main > .post.has-post-thumbnail {
    min-height: calc( ( (100vw - (2.5em + (20vw - 12em)) * 2) / 3 - 1em ) * .75 );
  }

  .blog:not(.paged) main > .post.has-post-thumbnail:first-of-type {
    min-height: calc( ( (100vw - (2.5em + (20vw - 12em)) * 2) * 2/3 - .75em ) * .75 );
  }

  @supports(display: grid){

    .blog main {
      grid-auto-rows: minmax(max-content, calc( (100vw - (2.5em + (20vw - 12em)) * 2 - 3em) / 3 * .75 ));
    }

    .blog main > .post,
    .blog main > .post.has-post-thumbnail,
    .blog main > .post.has-post-thumbnail:first-of-type {
      min-height: 0;
    }

		.blog main > .posts-navigation {
		  grid-column: 1/4;
		}

	}

	.archive main,
	.search main {
		float: left;
		width: calc(66.6667% - .75em);
	}

	.archive .sidebar,
	.search .sidebar {
		float: right;
		width: calc(33.3333% - .75em);
		padding-top: 3.634615385em;
	}


	@supports (display: grid) {

		.archive .site-content,
		.search .site-content {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(18em, 1fr) ) ;
	    grid-gap: 1.5em;
		}

		.archive .site-content:before,
		.archive .site-content:after,
		.search .site-content:before,
		.search .site-content:after {
			display: none;
		}

		.archive main,
		.archive .sidebar,
		.search main,
		.search .sidebar {
			float: none;
			width: auto;
		}

		.archive main,
		.search main {
			grid-column: span 2;
		}

	}

	.single main .post-thumbnail {
		min-height: calc( (100vw - (2.5em + (100vw - 60em) / 5) * 2) * 6/16 );
	}

}

/*
@media all and (min-width: 65em) {

  .blog main > .post {
    min-height: calc( (100vw - (3.5em + (100vw - 60em) / 5) * 2 - 4.5em) / 4 - 1.5em );
  }

  .blog main > .post.has-post-thumbnail {
    min-height: calc( (100vw - (3.5em + (100vw - 60em) / 5) * 2 - 4.5em) / 4 );
  }

  .blog main > .post.has-post-thumbnail:first-of-type {
    min-height: calc( (100vw - (3.5em + (100vw - 60em) / 5) * 2 - 3em) / 2 );
  }

  @supports(display: grid){
    .blog main > .post, .blog main > .post.has-post-thumbnail, .blog main > .post.has-post-thumbnail:first-of-type {
      min-height: 0;
    }
  }

}
*/


/*--------------------------------------------------------------
## 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;
}


/*# sourceMappingURL=css/maps/style.css.map */