/*
Theme Name: Figure/Ground
Theme URI: http://themes.halsey.co/figureground
Author: Nick Halsey
Author URI: https://celloexpressions.com/
Description: Figure/Ground is a bold blogging theme that transforms your site into a dynamic, visually stimulating canvas of abstract shapes and content. Meticulously designed on a responsive 64-pixel square grid with a 16-pixel sub-grid, Figure/Ground features comprehensive customization options including the ability to customize every color and alternate "Circular" and "Orthogonal" modes. Your content flows down the center of the page, blending into the background animation in an alternating sequence, before coming to the widgetized footer. A fixed header features space for a small site logo, a search bar, and a togglable menu. Wide and full-width images break across the canvas with support for the block editor (Gutenberg). From its bold design to its out-of-the-box functionality and easy customization, Figure/Ground is sure to make your site memorable!
Version: 2.5
Requires PHP: 5.6
Requires at least: 5.2
Tested up to: 6.6
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: figureground
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blog, wide-blocks

Figure/Ground WordPress Theme, Copyright 2024 Nick Halsey.
Figure/Ground is based on Underscores http://underscores.me/, (C) 2012-2013 Automattic, Inc.
Figure/Ground is distributed under the terms of the GNU GPL.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/

*/


/* =Reset
-------------------------------------------------------------- */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

body {
	background: #f7f7ec;
}

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

ol, ul {
	list-style: none;
}

table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
}

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

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

a:focus {
	outline: thin dotted;
}

a:hover,
a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
	outline: 0;
}


/* =Global
----------------------------------------------- */

body,
button,
input,
select,
textarea {
	color: #222;
	font-family: Raleway, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.entry-content,
.comment-content,
input,
select,
textarea {
	font-family: "Merriweather Sans", sans-serif;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: 'Raleway', serif;
	font-weight: 600;
	margin: 0 0 16px;
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 2em;
}

h4 {
	font-size: 1.8em;
}

h5 {
	font-size: 1.5em;
	text-transform: uppercase;
}

h6 {
	font-size: 1.2em;
	text-transform: uppercase;
}

hr {
	background-color: rgba(0,0,0,.15);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/* Text elements */
p {
	margin-bottom: 24px;
}

ul, ol {
	margin: 0 0 24px 48px;
}

ul {
	list-style: square;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 24px;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

b, strong {
	font-weight: bold;
}

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

blockquote,
blockquote.wp-block-quote,
.wp-block-quote:not(.is-large):not(.is-style-large) {
	margin: 0 0 0 32px;
	padding: 0 0 0 12px;
	border-left: 4px solid;
}

blockquote,
blockquote.wp-block-quote,
.wp-block-quote p {
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 16px;
	font-family: Raleway, sans-serif;
}

cite,
.wp-block-quote__citation,
.wp-block-quote cite,
.wp-block-quote footer {
	color: inherit;
	font-size: 16px;
	font-style: italic;
    vertical-align: top;
}

cite:before {
	font: normal 16px/1 genericons;
	content: "\f421";
}

.comment-author cite.fn:before {
    display: none;
}

.bypostauthor .comment-author cite.fn:before {
    display: inline-block;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: rgba(0,0,0,.1);
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	line-height: 1.6;
	padding: 1.6em;
	overflow: auto;
	max-width: 100%;
}

code, kbd, tt, var {
	font: 16px monospace;
	background: rgba(0,0,0,.3);
	padding: 2px 4px;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: rgba(0,0,0,.2);
	text-decoration: none;
}

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

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

figure {
	margin: 0;
}

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

th {
	font-weight: bold;
}

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

a img {
	border: none;
}

button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}

button,
input {
	line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
}

.button,
.site-main .entry-content .button,
.wp-block-button__link,
.site-main .entry-content .wp-block-file__button,
.site-main .entry-content .wp-block-button__link,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	font-family: Raleway, serif;
	border: none;
	border-radius: 3px;
	background: #903;
	box-shadow: 1px 1px 1px rgba(0,0,0,.8);
	color: #f7f7ec;
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 18px;
	text-decoration: none;
	transition: .2s all cubic-bezier(.8,.1,.1,.5);
	opacity: 1;
}

.button:hover,
.site-main .entry-content .button:hover,
.wp-block-button__link:hover,
.site-main .entry-content .wp-block-file__button:hover,
.site-main .entry-content .wp-block-button__link:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:focus,
.site-main .entry-content .button:focus,
.wp-block-button__link:focus,
.site-main .entry-content .wp-block-file__button:focus,
.site-main .entry-content .wp-block-button__link:focus,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
	background: #b25;
	color: #f7f7ec;
	opacity: 1;
}


.button:active,
.entry-content .button:active,
.wp-block-button__link:active,
.site-main .entry-content .wp-block-file__button:active,
.entry-content .wp-block-button__link:active,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	-webkit-transform: scale(.95); /* avoid horrific webkit-wide bugs */
	-ms-transform: perspective(500px) rotateY(20deg) scale(.95);
	transform: perspective(500px) rotateY(20deg) scale(.95);
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
	padding: 0; /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
	-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
	-moz-box-sizing:    content-box;
	box-sizing:         content-box;
}

input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #333;
	border: 1px solid rgba(0,0,0,.2);
	transition: .5s border cubic-bezier( 0.25, 1.0 , 0.5, 1.0 ); /* Do not bounce when fading out of focus, and use this function for browsers that do not allow "bouncing." */ 
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: rgba(0,0,0,.5);
	color: #111;
	outline: none;
	transition: .5s border cubic-bezier( 0.2, 2.5, 0.75, 2.5 ); /* Use timing-function values larger than 1 to achieve "bounce" effect. */ 
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 3px;
}

textarea {
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: 3px;
	vertical-align: top; /* Improves readability and alignment in all browsers */
	width: 98%;
}

/* Links */
a {
	color: #87f;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: #aaf;
}


.entry-content a,
.comments-area a,
.entry-meta a {
	text-decoration: underline;
}

.entry-content a:hover,
.comments-area a:hover,
.entry-meta a:hover,
.entry-content a:focus,
.comments-area a:focus,
.entry-meta a:focus,
.entry-content a:active,
.comments-area a:active,
.entry-meta a:active,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a,
.entry-content h5 a,
.entry-content h6 a {
	text-decoration: none;
}

::selection {
	background: #aaf;
	color: #222;
}
::-moz-selection {
	background: #aaf;
	color: #222;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 16px;
}

.alignright,
.wp-block-image .alignright {
	display: inline;
	float: right;
	margin-left: 16px;
}

.aligncenter,
.wp-block-image .aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

.wp-caption.alignleft,
.wp-block-image .alignleft {
	margin-right: 16px;
}

.wp-caption.alignright,
.wp-block-image .alignright {
	margin-left: 16px;
}

.entry-content .alignleft {
	margin-left: -32px;
}

.entry-content .alignright {
	margin-right: -32px;
}


/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	position: absolute !important;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #222;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/* Clearing */
.clear:before,
.clear:after,
[class*="content"]:before,
[class*="content"]:after,
[class*="site"]:before,
[class*="site"]:after {
	content: '';
	display: table;
}

.clear:after,
[class*="content"]:after,
[class*="site"]:after {
	clear: both;
}

/* Figure/Ground Background Canvas */

canvas#figure-ground {
	min-width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	background: #f7f7ec;
	z-index: 1;
}

#figureground-animation-toggle {
	display: block;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 3;
	font-size: 14px;
	background: #222;
	border: 2px solid #222;
	border-radius: 0;
}

@media screen and (max-width:760px) {
	#figureground-animation-toggle {
		display: none;
	}
}

#figureground-animation-toggle:hover,
#figureground-animation-toggle:focus {
	background: #f7f7ec;
	color: #222;
}

#figureground-animation-toggle.on .play {
	display: none;
}

#figureground-animation-toggle .pause {
	display: none;
}

#figureground-animation-toggle.on .pause {
	display: inline;
}

#main {
	position: relative;
	z-index: 2;
}

footer.site-footer {
	position: relative;
	z-index: 2;
	margin-top: 60px;
}

/* Make things more circular. */
.circular input {
	border-top-left-radius: 6px;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 8px;
}

.circular .main-navigation .nav-menu {
	border-top-left-radius: 25px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 16px;
}

.circular .main-navigation ul > li:first-child a {
	border-top-left-radius: 10px;
}

.circular .main-navigation ul > li:last-child a {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.circular .page-header,
.circular .post-navigation,
.circular .paging-navigation,
.circular .comments-title,
.circular .comment-navigation,
.circular .comment-body {
	border-top-left-radius: 75px;
	border-top-right-radius: 30px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 50px;
}

.circular article {
	border-top-left-radius: 115px;
	border-top-right-radius: 50px;
	border-bottom-left-radius: 75px;
	border-bottom-right-radius: 100px;
}

.circular .wp-caption.alignleft img,
.circular img.alignleft {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 16px;
}

.circular .wp-caption.alignright img,
.circular img.alignright {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 16px;
}

.circular article .entry-thumbnail,
.circular article .entry-thumbnail img.attachment-post-thumbnail {
	border-top-left-radius: 128px;
	border-top-right-radius: 96px;
	border-bottom-left-radius: 64px;
	border-bottom-right-radius: 32px;
}

.circular article .entry-header {
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
}

.circular article .entry-content,
.circular article .entry-summary {
	border-bottom-left-radius: 48px;
	border-bottom-right-radius: 64px;
}

.circular .post-categories-list,
.circular .post-tags-list {
	border-radius: 32px;
}

.circular .hentry .mejs-overlay-button,
.circular .gallery-item {
	border-radius: 100%;
}

.circular .gallery-caption {
	transition: none; /* This element breaks out of its circular container when animating. */
}

.circular .comment-respond {
	border-top-left-radius: 16px;
	border-top-right-radius: 32px;
	border-bottom-left-radius: 48px;
	border-bottom-right-radius: 64px;
}

.circular .comment-author img {
	border-top-left-radius: 25px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 16px;
}

.circular .pingback {
	border-radius: 100%;
	text-align: center;
}

.circular aside.widget {
	border-top-left-radius: 50px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 38px;
	border-bottom-right-radius: 30px;
}

/* Smaller elements should be completely circular. */
.circular .site-logo,
.circular p.no-comments,
.circular footer.entry-meta li {
	border-radius: 100%;
}

/* Chamfer Corners in Rhombus Mode */
.rhombus input {
	border-radius: 0;
	clip-path: polygon( 0 0,
	                    calc(100% - 8px) 0,
						100% 50%,
						100% 100%,
						8px 100%,
						0 50% );
}

.rhombus .page-header,
.rhombus .post-navigation,
.rhombus .paging-navigation,
.rhombus .comments-title,
.rhombus .comment-respond,
.rhombus .comment-navigation,
.rhombus .comment-body {
	clip-path: polygon( 28px 0,
	                    calc(100% - 19px) 0,
						100% 32px,
						100% calc(100% - 48px),
						calc(100% - 28px) 100%,
						19px 100%,
						0 calc(100% - 32px),
						0 48px );
}

.rhombus article {
	clip-path: polygon( 19px 0,
	                    calc(100% - 37px) 0,
						100% 64px,
						calc(100% + 50vw) 64px,
						calc(100% + 50vw) calc(100% - 96px),
						100% calc(100% - 96px),
						calc(100% - 56px) 100%,
						37px 100%,
						0 calc(100% - 64px),
						-50vw calc(100% - 64px),
						-50vw 32px,
						0 32px ); /* Expand region horizontally to allow wide elements to flow out of the clipped container */
}

.rhombus footer.entry-meta .edit-link {
	right: 64px;
}

.rhombus article .entry-thumbnail,
.rhombus article .entry-thumbnail img.attachment-post-thumbnail {
	clip-path: polygon( 74px 0,
	                    calc(100% - 37px) 0,
						100% 64px,
						100% 100%,
						0 100%,
						0 128px );
}

.rhombus .gallery-caption {
	transition: none; /* This element breaks out of its clipped container when animating. */
}

.rhombus aside.widget {
	clip-path: polygon( 19px 0,
	                    calc(100% - 19px) 0,
						100% 32px,
						100% calc(100% - 32px),
						calc(100% - 19px) 100%,
						19px 100%,
						0 calc(100% - 32px),
						0 32px );
}

.rhombus footer.entry-meta li {
	clip-path: polygon( 0 0,
	                    calc(100% - 16px) 0,
						100% 28px,
						100% 100%,
						16px 100%,
						0 calc(100% - 28px) );
}

.rhombus footer.entry-meta li.toggled {
	clip-path: none; /* Don't clip expanded sections */
}

/* Header */
header#masthead {
	position: fixed;
	width: 100%;
	height: 48px;
	background: #222;
	color: #f7f7ec;
	padding: 0;
	z-index: 499;
}

.header-inner {
    width: 100%;
    max-width: 1280px;
    margin:  0 auto;
}

.site-branding {
    width: 100%;
    padding:  0 88px 0 0;
}

#site-navigation {
    width: 80px;
    float: right;
}

.site-logo, /* header image back compat pre-custom-logo */
.custom-logo {
	float: left;
	margin: -8px 16px -8px 0;
	transition: opacity .18s ease-in-out;
	max-height: 48px;
	max-width: 96px;
}

a:hover .site-logo,
a:hover .custom-logo,
a:focus .custom-logo,
.site-title a:hover,
.site-title a:focus {
	opacity: .7;
}

h1.site-title {
	float: left;
	clear: left;
	font-size: 20px;
	
	max-width: 590px;
	padding: 8px 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

h1.site-title a {
	color: #f7f7ec;
}

h2.site-description {
	float: right;
	font-size: 16px;
	color: #b7b7ac;
	clear: none;
	max-width: 500px;
	padding: 12px 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.site-header .search-field {
	margin: 0;
	background: transparent;
	padding: 1px;
	border: none;
	width: 0;
	height: 22px;
	top: -4px;
	position: relative;
	font-size: 16px;
	transition: all .4s ease;
}

.site-header .search-form label {
	position: absolute;
	top: 6px;
	right: -8px;
	height: 30px;
	margin: 5px;
	padding: 0;
	cursor: pointer;
	z-index: 3;
}

.site-header .search-form label:before,
.menu-toggle:before {
	font-family: Genericons;
	font-size: 32px;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	left: -26px;
	top: 3px;
	width: 32px;
	height: 32px;
}

.site-header .search-form label:before {
	content: '\f400';
	top: -12px;
	left: -32px;
	color: #f7f7ec;
}

.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #87f;
	color: #222;
	padding: 2px 4px;
	cursor: text;
	outline: 0;
	width: 200px;
	transition: all .4s ease;
}

.site-header .search-form .search-submit {
	display: none;
}

.menu-toggle:before {
	content: '\f419';
	left: 2px;
}

.menu-toggle {
	padding: 0;
	margin: 0;
	position: absolute;
	z-index: 2;
	right: 36px;
	top: 6px;
	font-weight: normal;
	width: 36px;
	height: 36px;
	color: #f7f7ec;
	background: transparent;
	transition: none;
}

.menu-toggle:hover,
.menu-toggle:focus,
.main-navigation.toggled .menu-toggle {
	outline: 1px solid;
	background: transparent;
}

.menu-toggle:focus,
.menu-toggle:hover,
.main-navigation.toggled .menu-toggle {
	color: #87f;
}

.main-navigation.toggled .nav-menu {
	position: absolute;
	width: 200px;
	right: 90px;
	top: 8px;
	background: #222;
	padding: 0;
	border: 5px solid #87f;
}

.main-navigation.toggled .nav-menu:before {
	font-family: Genericons;
	font-size: 32px;
	-webkit-font-smoothing: antialiased;
	display: block;
	content: '\f501';
	color: #87f;
	position: absolute;
	right: -36px;
	top: -12px;
	width: 32px;
	height: 32px;
}

.menu-toggle,
.main-navigation.toggled .nav-menu,
.main-navigation.toggled #menu-social {
	display: block;
}

.main-navigation .nav-menu,
#menu-social {
	display: none;
}

.site-content {
	position: relative;
	top: 40px; /* fixed header */
}


/* =Menu
----------------------------------------------- */

.main-navigation {
	clear: none;
	display: block;
	height: 48px;
	padding: 8px 0;
	position: relative;
	top: -62px;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation li a {
	display: block;
	text-decoration: none;
	padding: 12px 20px;
	color: #f7f7ec;
}

.main-navigation a:hover {
	background: #87f;
	color: #222;
	border: none;
}

.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
	color: #87f;
}

.main-navigation li.current_page_item a:hover,
.main-navigation li.current-menu-item a:hover {
	color: #222;
}


/* Social Menu */
#menu-social {
	position: absolute;
	top: 48px;
	left: -10px;
}

#menu-social li a {
	padding: 16px;
	height: 64px;
	width: 64px;
	background: #f7f7ec;
	color: #222;
}

#menu-social li a:hover,
#menu-social li a:focus {
	background: #87f;
}

#menu-social ul {
	list-style: none;
	margin: 0;
	text-align: center;
	width: 69px;
	border-top: 5px solid #87f;
	border-bottom: 5px solid #87f;
	border-right: 5px solid #87f;
}

#menu-social ul li {
	display:  inline-block;
	position: relative;
}

#menu-social li a:before {
	content: '\f408';
	display: inline-block;
	padding: 0;
	font-family: 'Genericons';
	font-size: 32px;
	line-height: 1;
	vertical-align: top;
	-webkit-font-smoothing: antialiased;
}

#menu-social li a[href*="wordpress.org"]:before,
#menu-social li a[href*="wordpress.com"]:before {
	content: '\f205';
}

#menu-social li a[href*="facebook.com"]:before {
	content: '\f203';
}

#menu-social li a[href*="twitter.com"]:before {
	content: '\f202';
}

#menu-social li a[href*="dribbble.com"]:before {
	content: '\f201';
}

#menu-social li a[href*="plus.google.com"]:before {
	content: '\f206';
}

#menu-social li a[href*="pinterest.com"]:before {
	content: '\f210';
}

#menu-social li a[href*="github.com"]:before {
	content: '\f200';
}

#menu-social li a[href*="tumblr.com"]:before {
	content: '\f214';
}

#menu-social li a[href*="youtube.com"]:before {
	content: '\f213';
}

#menu-social li a[href*="flickr.com"]:before {
	content: '\f211';
}

#menu-social li a[href*="vimeo.com"]:before {
	content: '\f212';
}

#menu-social li a[href*="instagram.com"]:before {
	content: '\f215';
}

#menu-social li a[href*="codepen.io"]:before {
	content: '\f216';
}

#menu-social li a[href*="linkedin.com"]:before {
	content: '\f208';
}

#menu-social li a[href*="mailto:"]:before {
	content: '\f410';
}

/* =Content
----------------------------------------------- */
header.page-header {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;	
}

header.page-header {
	position: relative;
	background: #222;
	color: #f7f7ec;
	margin: 60px auto;
	padding: 16px 96px 16px 32px;
	text-align: right;
}

h1.page-title {
	position: relative;
}

/* Add Genericons to the page header/title */
.page-header h1.page-title:after {
	font-family: Genericons;
	font-size: 64px;
	-webkit-font-smoothing: antialiased;
	font-weight: normal;
	position: absolute;
	width: 64px;
	height: 64px;
}

.category .page-header h1.page-title:after {
	content: '\f301';
	right: -78px;
	top: -15px;
}

.tag .page-header h1.page-title:after {
	content: '\f302';
	right: -78px;
	top: -15px;
}

.date .page-header h1.page-title:after {
	content: '\f303';
	right: -78px;
	top: -12px;
}

.author .page-header h1.page-title:after {
	content: '\f304';
	right: -76px;
	top: -15px;
}

.search.search-results .page-header h1.page-title:after {
	content: '\f400';
	top: -15px;
	right: -77px;
}

/* Post Format Archives */
.tax-post_format.term-post-format-standard .page-header h1.page-title:after {
	content: '\f100';
	right: -76px;
	top: -12px;
}

.tax-post_format.term-post-format-aside .page-header h1.page-title:after {
	content: '\f101';
	right: -76px;
	top: -12px;
}

.tax-post_format.term-post-format-image .page-header h1.page-title:after {
	content: '\f102';
	right: -76px;
	top: -12px;
}

.tax-post_format.term-post-format-gallery .page-header h1.page-title:after {
	content: '\f103';
	right: -76px;
	top: -12px;
}

.tax-post_format.term-post-format-video .page-header h1.page-title:after {
	content: '\f104';
	right: -76px;
	top: -12px;
}

.tax-post_format.term-post-format-quote .page-header h1.page-title:after {
	content: '\f106';
	right: -76px;
	top: -12px;
}

.tax-post_format.term-post-format-link .page-header h1.page-title:after {
	content: '\f107';
	right: -76px;
	top: -12px;
}

.tax-post_format.term-post-format-audio .page-header h1.page-title:after {
	content: '\f109';
	right: -76px;
	top: -12px;
}

.error404 .page-header h1.page-title {
	height: 77px;
}

.error404 .page-header h1.page-title:after {
	content: '\f423';
	font-size: 256px;
	position: absolute;
	left: 50%;
	top: -148px;
	margin-left: -128px;
}

.error404 .page-content {
	width: 100%;
	max-width: 640px;
	margin: 64px auto;
	padding: 32px;
	background-color: #f7f7ec;
	color: #222;
}

.site-main article {
	width: 100%;
	max-width: 640px;
	margin: 64px auto;
	padding: 0;
}

.entry-header {
    padding: 32px 32px 0 32px;
}

.entry-content,
.entry-summary {
    padding: 16px 32px 32px 32px;
}

.site-main article .entry-thumbnail,
.site-main article .entry-meta,
.site-main article .entry-header,
.site-main article .entry-content,
.site-main article .entry-summary,
.site-main article.formatted-post a.post-format-link:before,
.site-main article footer.entry-meta li.edit-link a:before {
	background: #222;
	color: #f7f7ec;
}

.site-main article:nth-child(even) .entry-thumbnail,
.site-main article:nth-child(even) .entry-meta,
.site-main article:nth-child(even) .entry-header,
.site-main article:nth-child(even) .entry-content,
.site-main article:nth-child(even) .entry-summary,
.site-main article.formatted-post:nth-child(even) a.post-format-link:before,
.site-main article:nth-child(even) footer.entry-meta li.edit-link a:before {
	background: #f7f7ec;
	color: #222;
}

.site-main article a,
.site-main article .entry-title a:hover,
.site-main article .entry-title a:active,
.site-main article .entry-title a:focus {
	color: #87f;
}

.site-main article a:hover,
.site-main article a:active,
.site-main article a:focus {
	color: #aaf;
}

.site-main article .entry-title a {
	color: #f7f7ec;
}

.site-main article:nth-child(even) a,
.site-main article:nth-child(even) .entry-title a:hover,
.site-main article:nth-child(even) .entry-title a:active,
.site-main article:nth-child(even) .entry-title a:focus {
	color: #903;
}

.site-main article:nth-child(even) a:hover,
.site-main article:nth-child(even) a:active,
.site-main article:nth-child(even) a:focus {
	color: #b25;
}

.site-main article:nth-child(even) .entry-title a {
	color: #222;
}

.site-main article:nth-child(even) blockquote {
	border-left-color: #222;
}

.entry-title a:hover,
.entry-title a:active,
.entry-title a:focus {
	border: none;
}

.entry-header h1.entry-title {
	font-size: 48px;
	line-height: 64px;
	margin: 0;
	padding: 16px 0 0;
}

article.sticky .entry-header,
article.sticky .entry-content {
	background: #903;
	color: #f7f7ec;
}

article.sticky .entry-content a {
	color: inherit; /* #f7f7ec by default */
	text-decoration: underline;
}

article.sticky .entry-content a:hover,
article.sticky .entry-content a:focus {
	color: inherit;
	text-decoration: none;
}

.byline,
.updated {
	display: none;
}

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

.site-main nav.post-navigation,
.site-main nav.paging-navigation {
	width: 100%;
	max-width: 1280px;
	margin: 16px auto;
	clear: both;
	background: #222;
	color: #f7f7ec;
	font-weight: 600;
	padding: 20px 30px;
	font-size: 1.6em;
}

.post-navigation a:hover,
.post-navigation a:focus,
.paging-navigation a:focus,
.paging-navigation a:focus {
	text-decoration: underline;
	outline: none;
}

.entry-thumbnail {
	max-height: 320px;
	position: relative;
}

/* Post Format Meta */
article.formatted-post .entry-meta,
article.formatted-post .entry-header,
article.formatted-post .entry-summary,
article.formatted-post .entry-content {
	margin-left: 128px;
}

article.formatted-post a.post-format-link:hover:before,
article.formatted-post a.post-format-link:active:before,
article.formatted-post a.post-format-link:focus:before {
	color: #87f;
}

.site-main article.formatted-post:nth-child(even) a.post-format-link:hover:before,
.site-main article.formatted-post:nth-child(even) a.post-format-link:active:before,
.site-main article.formatted-post:nth-child(even) a.post-format-link:focus:before {
	color: #903;
}

article.formatted-post li.post-format-icon {
	display: block;
	position: absolute;
	left: -128px;
	width: 128px;
	height: 128px;
}

article.formatted-post a.post-format-link:before {
	font: normal 128px/1 Genericons;
	-webkit-font-smoothing: antialiased;
	background: #222;
	color: #f7f7ec;	
}

article.formatted-post.format-aside a.post-format-link:before {
	content: '\f101';
}

article.formatted-post.format-image a.post-format-link:before {
	content: '\f102';
}

article.formatted-post.format-gallery a.post-format-link:before {
	content: '\f103';
}

article.formatted-post.format-video a.post-format-link:before {
	content: '\f104';
}

article.formatted-post.format-quote a.post-format-link:before {
	content: '\f106';
}

article.formatted-post.format-link a.post-format-link:before {
	content: '\f107';
}

article.formatted-post.format-audio a.post-format-link:before {
	content: '\f109';
}

/* Post Meta */
footer.entry-meta {
    padding: 0;
	margin: 0;
	position: relative;
}

footer.entry-meta ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer.entry-meta li {
    float: left;
    display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	transition: .32s ease-in-out width;
	background: #222;
	color: #f7f7ec;
	cursor: pointer;
}

.entry-meta .empty {
	display: none;
}

.site-main article:nth-child(odd) footer.entry-meta li:nth-child(even),
.site-main article:nth-child(even) footer.entry-meta li:nth-child(odd) {
	color: #222;
	background: #f7f7ec;
}

.site-main article:nth-child(odd) footer.entry-meta li:nth-child(even) a,
.site-main article:nth-child(even) footer.entry-meta li:nth-child(odd) a {
	color: #222;
}

.site-main article:nth-child(odd) footer.entry-meta li:nth-child(odd) a:hover,
.site-main article:nth-child(odd) footer.entry-meta li:nth-child(odd) a:active,
.site-main article:nth-child(odd) footer.entry-meta li:nth-child(odd) a:focus,
.site-main article:nth-child(even) footer.entry-meta li:nth-child(even) a:hover,
.site-main article:nth-child(even) footer.entry-meta li:nth-child(even) a:active,
.site-main article:nth-child(even) footer.entry-meta li:nth-child(even) a:focus {
	color: #87f;
}

.site-main article:nth-child(odd) footer.entry-meta li:nth-child(even) a:hover,
.site-main article:nth-child(odd) footer.entry-meta li:nth-child(even) a:active,
.site-main article:nth-child(odd) footer.entry-meta li:nth-child(even) a:focus,
.site-main article:nth-child(even) footer.entry-meta li:nth-child(odd) a:hover,
.site-main article:nth-child(even) footer.entry-meta li:nth-child(odd) a:active,
.site-main article:nth-child(even) footer.entry-meta li:nth-child(odd) a:focus {
	color: #903;
}

footer.entry-meta li:before {
	display: block;
	float: left;
	width: 64px;
	height: 64px;
	line-height: 1;

	font-family: Genericons;
	font-weight: normal;
	font-size: 64px;
	-webkit-font-smoothing: antialiased;
}

footer.entry-meta li.posted-on a:before,
footer.entry-meta li.posted-in a:before,
footer.entry-meta li.comments-link a:before,
footer.entry-meta li.image-size a:before,
footer.entry-meta li.edit-link a:before {
	display: block;
	float: left;
	width: 64px;
	height: 64px;
	line-height: 1;

	font-family: Genericons;
	font-weight: normal;
	font-size: 64px;
	-webkit-font-smoothing: antialiased;
}

.entry-meta .clock-canvas {
	float: left;
	max-height: 64px;
	max-width: 64px;
	margin: 0;
	padding: 6px;
	cursor: default;
}

/* Only show the number of comments, visually */
.comments-link:not(.has-comments) a {
    clip-path: polygon(0 0, 64px 0, 64px 64px, 0 64px); /* Icon only */
    display: inline-block;
	width: 64px;
}

.comments-link.has-comments a {
	clip-path: polygon( 0 0, 82px 0, 82px 100%, 0 100% ); /* Icon + ~ 1 character of text */
	display: inline-block;
	width: 90px;
	white-space: nowrap;
}

.comments-link.has-comments.double-digit a {
	clip-path: polygon( 0 0, 106px 0, 106px 100%, 0 100% ); /* Icon + ~ 2 characters of text */
	width: 114px;
}

footer.entry-meta li.post-author:before {
	content: '\f304';
	display: none; /* Show avatar instead */
}

footer.entry-meta li.posted-on a:before {
	content: '\f303';
	display: none; /* Show clock instead */
}

footer.entry-meta li.post-categories:before {
	content: '\f301';
}

footer.entry-meta li.post-tags:before {
	content: '\f302';
}

footer.entry-meta li.comments-link a:before {
	content: '\f300';
}

footer.entry-meta li.edit-link a:before {
	content: '\f411';
}

footer.entry-meta li.image-size a:before {
	content: '\f473';
}

footer.entry-meta li.posted-in a:before {
	content: '\f412';
	-webkit-transform: rotate(90deg) scaleX(-1);
	-moz-transform: rotate(90deg) scaleX(-1);
	-ms-transform: rotate(90deg) scaleX(-1);
	transform: rotate(90deg) scaleX(-1);
}

footer.entry-meta .edit-link {
	position: absolute;
	right: -64px;
}

footer.entry-meta li.posted-on {
	width: 192px;
	letter-spacing: -2px;
}

footer.entry-meta li.image-size,
footer.entry-meta li.comments-link {
	width: auto;
}

footer.entry-meta li.posted-on a,
footer.entry-meta li.comments-link a,
footer.entry-meta li.image-size a {
	font-size: 32px;
	line-height: 64px;
	font-weight: 600;
	color: #f7f7ec;
	text-decoration: none;
	border-bottom: none;
}

footer.entry-meta li.posted-in a {
	font-size: 16px;
	line-height: 24px;
	color: #f7f7ec;
	text-decoration: none;
}

.entry-meta .image-size a,
.entry-meta .comments-link.has-comments a {
	padding-right: 8px;
}

footer.entry-meta li div {
	position: absolute;
	top: 64px;
	width: 320px;
	overflow: hidden;
	
	background: #903;
	color: #f7f7ec;
	display: none;
}

footer.entry-meta li.toggled {
	background: #903 !important;
	color: #f7f7ec !important;
}

footer.entry-meta li.toggled div {
	padding: 2px 8px;
	height: auto;
	min-height: 64px;
	max-height: 192px;
	overflow-y: auto;
	display: block;
}

footer.entry-meta li div a {
	color: #f7f7ec !important;
}

footer.entry-meta li div.post-categories-list {
	width: 384px;
}

article.formatted-post footer.entry-meta li div.post-categories-list {
	width: 256px;
}

article.formatted-post footer.entry-meta li div.post-tags-list {
	width: 192px;
}

.site-main article footer.entry-meta li.edit-link a:hover:before,
.site-main article footer.entry-meta li.edit-link a:active:before,
.site-main article footer.entry-meta li.edit-link a:focus:before {
	color: #87f;
}

.site-main article:nth-child(even) footer.entry-meta li.edit-link a:hover:before,
.site-main article:nth-child(even) footer.entry-meta li.edit-link a:active:before,
.site-main article:nth-child(even) footer.entry-meta li.edit-link a:focus:before {
	color: #903;
}

.post-author img {
	opacity: .7;
	transition: opacity .18s ease-in-out;
}

.post-author a:hover img,
.post-author a:focus img {
	opacity: 1;
}


/* =Asides
----------------------------------------------- */

.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

.blog .format-aside .entry-content,
.archive .format-aside .entry-content {
	padding-top: 64px;
}

/* =Media
----------------------------------------------- */

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

.wp-caption,
.wp-block-image figcaption,
.wp-block-audio figcaption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 1.2% auto 0;
	max-width: 98%;
}

.wp-caption-text,
.wp-caption .wp-caption-text,
.wp-block-image figcaption,
.wp-block-audio figcaption {
	text-align: center;
	margin: 0.8em 0;
	color: inherit;
	font-size: .8em;
	line-height: inherit;
}

.entry-attachment .entry-caption {
	text-align: center;
	font-family: Raleway, sans-serif;
	font-size: 24px;
	line-height: 32px;
}

/* Galleries */

.gallery,
.wp-block-gallery {
	margin: 0 0 24px 0;
}

.wp-block-gallery {
    --wp--style--gallery-gap-default: 16px;
}

.gallery-item { /* Classic editor galleries only */
	float: left;
	margin: 0 16px 16px 0;
	overflow: hidden;
	position: relative;
}

.gallery-columns-1 .gallery-item { /* Classic editor galleries only */
	max-width: 100%;
}

.gallery-columns-2 .gallery-item { /* Classic editor galleries only */
	max-width: 48%;
	max-width: -webkit-calc(50% - 16px);
	max-width:         calc(50% - 16px);
}

.gallery-columns-3 .gallery-item { /* Classic editor galleries only */
	max-width: 32%;
	max-width: -webkit-calc(33.3% - 16px);
	max-width:         calc(33.3% - 16px);
	width: auto;
}

.gallery-columns-4 .gallery-item { /* Classic editor galleries only */
	max-width: 23%;
	max-width: -webkit-calc(25% - 16px);
	max-width:         calc(25% - 16px);
	width: auto;
}

.gallery-columns-5 .gallery-item { /* Classic editor galleries only */
	max-width: 19%;
	max-width: -webkit-calc(20% - 16px);
	max-width:         calc(20% - 16px);
	width: auto;
}

.gallery-columns-6 .gallery-item { /* Classic editor galleries only */
	max-width: 15%;
	max-width: -webkit-calc(16.7% - 16px);
	max-width:         calc(16.7% - 16px);
	width: auto;
}

.gallery-columns-7 .gallery-item { /* Classic editor galleries only */
	max-width: 13%;
	max-width: -webkit-calc(14.28% - 16px);
	max-width:         calc(14.28% - 16px);
	width: auto;
}

.gallery-columns-8 .gallery-item { /* Classic editor galleries only */
	max-width: 11%;
	max-width: -webkit-calc(12.5% - 16px);
	max-width:         calc(12.5% - 16px);
	width: auto;
}

.gallery-columns-9 .gallery-item { /* Classic editor galleries only */
	max-width: 9%;
	max-width: -webkit-calc(11.1% - 16px);
	max-width:         calc(11.1% - 16px);
	width: auto;
}

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) { /* Classic editor galleries only */
	margin-right: 0;
}

.gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1),
.gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) { /* Classic editor galleries only */
	clear: left;
}

/* Target all 3 versions of gallery / block gallery markup */
.gallery .gallery-caption,
.wp-block-gallery .blocks-gallery-image figcaption.blocks-gallery-item__caption,
.wp-block-gallery .blocks-gallery-item figcaption.blocks-gallery-item__caption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: #222;
	color: #f7f7ec;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-height: 50%;
	opacity: 0;
	padding: 6px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 100%;
	transition: .16s opacity ease;
	overflow: hidden;
}

.gallery-item:nth-of-type(even) .gallery-caption,
.wp-block-gallery .blocks-gallery-image:nth-of-type(even) figcaption.blocks-gallery-item__caption,
.wp-block-gallery .blocks-gallery-item:nth-of-type(even) figcaption.blocks-gallery-item__caption,
.wp-block-gallery.has-nested-images figure.wp-block-image:nth-of-type(even) figcaption {
	background: #f7f7ec;
	color: #222;
}

.gallery .gallery-caption:before,
.wp-block-gallery .blocks-gallery-image figcaption.blocks-gallery-item__caption:before,
.wp-block-gallery .blocks-gallery-item figcaption.blocks-gallery-item__caption:before,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:before {
	content: "";
	height: 100%;
	min-height: 49px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.gallery .gallery-item:hover .gallery-caption,
.wp-block-gallery .blocks-gallery-image:hover figcaption.blocks-gallery-item__caption,
.wp-block-gallery .blocks-gallery-image a:focus + figcaption.blocks-gallery-item__caption,
.wp-block-gallery .blocks-gallery-item:hover figcaption.blocks-gallery-item__caption,
.wp-block-gallery .blocks-gallery-item a:focus + figcaption.blocks-gallery-item__caption,
.wp-block-gallery.has-nested-images figure.wp-block-image:hover figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image a:focus + figcaption {
	opacity: 1;
}

.gallery-columns-5 .gallery-caption,
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption { /* Classic editor galleries only */
	display: none;
}

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

/* Mediaelements */
.hentry .mejs-container,
.widget .mejs-container {
	margin: 16px 0;
}

.hentry .mejs-mediaelement,
.widget .mejs-mediaelement,
.hentry .mejs-container .mejs-controls,
.widget .mejs-container .mejs-controls {
	background: #f7f7ec;
}

.hentry .mejs-container .mejs-controls .mejs-time span,
.widget .mejs-container .mejs-controls .mejs-time span {
	color: #222;
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
.widget .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background: #222;
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
.widget .mejs-controls .mejs-time-rail .mejs-time-current {
	background: #903;
}

.widget .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-time-rail .mejs-time-total,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	background: rgba(0, 0, 0, .33);
}

.hentry .mejs-controls .mejs-time-rail span,
.widget .mejs-controls .mejs-time-rail span,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	border-radius: 0;
}

.hentry .mejs-overlay-loading,
.widget .mejs-overlay-loading {
	background: transparent;
}

.hentry .mejs-overlay-button,
.widget .mejs-overlay-button {
	background-color: #f7f7ec;
	background-image: none;
	box-shadow: 1px 1px 1px rgba(0,0,0,.8);
	color: #222;
	height: 48px;
	margin: -24px 0 0 -32px;
	width: 64px;
}

.hentry .mejs-overlay-button:before,
.widget .mejs-overlay-button:before {
	-webkit-font-smoothing: antialiased;
	content: '\f452';
	display: inline-block;
	font: normal 48px/1 Genericons;
	position: absolute;
	top: 0;
	left: 10px;
}

.hentry .mejs-controls .mejs-button button:focus,
.widget .mejs-controls .mejs-button button:focus {
	outline: none;
}

.hentry .mejs-controls .mejs-button button,
.widget .mejs-controls .mejs-button button {
	-webkit-font-smoothing: antialiased;
	background: none;
	box-shadow: none;
	border-radius: none;
	color: #222;
	display: inline-block;
	font: normal 16px/1 Genericons;
}

.hentry .mejs-playpause-button.mejs-play button:before,
.widget .mejs-playpause-button.mejs-play button:before {
	content: '\f452';
}

.hentry .mejs-playpause-button.mejs-pause button:before,
.widget .mejs-playpause-button.mejs-pause button:before {
	content: '\f448';
}

.hentry .mejs-volume-button.mejs-mute button:before,
.widget .mejs-volume-button.mejs-mute button:before {
	content: '\f109';
	font-size: 20px;
	position: absolute;
	top: -2px;
	left: 0;
}

.hentry .mejs-volume-button.mejs-unmute button:before,
.widget .mejs-volume-button.mejs-unmute button:before {
	content: '\f109';
	left: 0;
	position: absolute;
	top: 0;
}

.hentry .mejs-fullscreen-button button:before,
.widget .mejs-fullscreen-button button:before {
	content: '\f474';
}

.hentry .mejs-fullscreen-button.mejs-unfullscreen button:before,
.widget .mejs-fullscreen-button.mejs-unfullscreen button:before {
	content: '\f406';
}

.hentry .mejs-overlay:hover .mejs-overlay-button,
.widget .mejs-overlay:hover .mejs-overlay-button {
	background-color: #903;
	color: #f7f7ec;
}

.hentry .mejs-controls .mejs-button button:hover,
.widget .mejs-controls .mejs-button button:hover {
	color: #903;
}

article:nth-child(even) .mejs-mediaelement,
article:nth-child(even) .mejs-container .mejs-controls {
	background: #222;
}

article:nth-child(even) .mejs-container .mejs-controls .mejs-time span {
	color: #f7f7ec;
}

article:nth-child(even) .mejs-controls .mejs-time-rail .mejs-time-loaded,
article:nth-child(even) .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background: #f7f7ec;
}

article:nth-child(even) .mejs-controls .mejs-time-rail .mejs-time-current {
	background: #87f;
}

article:nth-child(even) .mejs-controls .mejs-time-rail .mejs-time-total,
article:nth-child(even) .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	background: rgba(255, 255, 255, .33);
}

article:nth-child(even) .hentry .mejs-overlay-button {
	background-color: #222;
}

article:nth-child(even) .mejs-controls .mejs-button button {
	color: #f7f7ec;
}

article:nth-child(even) .mejs-overlay:hover .mejs-overlay-button {
	background-color: #87f;
	color: #222;
}

article:nth-child(even) .mejs-controls .mejs-button button:hover {
	color: #87f;
}

/* Playlists */
.wp-playlist.wp-playlist-light {
	border: none;
	background: #f7f7ec;
	color: #222;
}

.wp-playlist-light .wp-playlist-item {
	height: 24px;
}

.wp-playlist-light .wp-playlist-item.wp-playlist-playing {
	background: transparent;
}

.wp-playlist-light .wp-playlist-item,
.wp-playlist-light .wp-playlist-playing,
.wp-playlist-light .wp-playlist-item .wp-playlist-caption {
	color: #222;
}

.hentry .wp-playlist-light .wp-playlist-caption,
.widget .wp-playlist-light .wp-playlist-caption,
.hentry .wp-playlist-dark .wp-playlist-caption,
.widget .wp-playlist-dark .wp-playlist-caption {
	color: inherit;
}

.wp-playlist-light .wp-playlist-item .wp-playlist-caption:hover {
	color: #903;
}

.wp-playlist-light .wp-playlist-item .wp-playlist-caption:hover {
	text-decoration: none;
}

article:nth-child(odd) .wp-playlist.wp-playlist-light {
	background: #222;
	color: #f7f7ec;
}

article:nth-child(odd) .wp-playlist-light .wp-playlist-item,
article:nth-child(odd) .wp-playlist-light .wp-playlist-playing,
article:nth-child(odd) .wp-playlist-light .wp-playlist-item .wp-playlist-caption {
	color: #f7f7ec;
}

article:nth-child(odd) .wp-playlist-light .wp-playlist-item .wp-playlist-caption:hover {
	color: #87f;
}


/* =Navigation
----------------------------------------------- */

.site-main [class*="navigation"] {
	overflow: hidden;
}

[class*="navigation"] .nav-previous {
	float: left;
	width: 50%;
}

[class*="navigation"] .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

.image-navigation {
	font-size: 24px;
	line-height: 36px;
}

.excerpt-more.button {
	float: right;
	margin-right: 64px;
}

/* =Comments
----------------------------------------------- */
.comments-area {
	width: 100%;
	max-width: 1280px;
	margin: 60px auto;
}

.comments-title {
	background: #f7f7ec;
	color: #222;
	padding: 16px 96px 16px 16px;
	text-align: right;
	position: relative;
}

article.comment-body {
	width: 100%;
	margin: 32px auto;
	position: relative;
	padding: 16px;
	overflow: hidden;
	background-color: #222;
	color: #f7f7ec;
}

.comments-title:after {
	font-family: Genericons;
	font-size: 64px;
	-webkit-font-smoothing: antialiased;
	font-weight: normal;
	position: absolute;
	width: 64px;
	height: 64px;
	content: '\f108';
	top: 3px;
	right: 16px;
}

/* keep comment-replies the same color */
.comment-list > li:nth-child(even) article.comment-body {
	background-color: #f7f7ec;
	color: #222;
}

.comment-list > li:nth-child(even) article.comment-body a {
	color: #903;
}

.comment-list > li:nth-child(even) article.comment-body a:hover,
.comment-list > li:nth-child(even) article.comment-body a:active
.comment-list > li:nth-child(even) article.comment-body a:focus {
	color: #b25;
}

.comment-list .comment.bypostauthor > article.comment-body {
	background-color: #903;
	color: #f7f7ec;
}

.comment-list .comment.bypostauthor > article.comment-body a,
.comment-list .comment.bypostauthor > article.comment-body a:hover,
.comment-list .comment.bypostauthor > article.comment-body a:active,
.comment-list .comment.bypostauthor > article.comment-body a:focus {
	color: #000;
}

.comment-metadata time:before,
.comment-metadata .edit-link a:before,
.comment-reply-link:before,
.bypostauthor > .comment-body .fn:before {
	font-family: Genericons;
	font-style: normal;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

.bypostauthor > .comment-body .fn:before {
	content: "\f408";
	vertical-align: text-top;
}

.comment-meta time:before {
	content: '\f303';
}

.comment-metadata .edit-link a:before {
	content: '\f411';
}

.comment-reply-link:before {
	content: '\f412';
}

.comment-list,
.comment-list .children {
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
	max-width: 640px;
}

.comment-list .pingback {
	background: #222;
	color: #f7f7ec;
	max-width: 640px;
	width: 100%;
	padding: 16px;
	margin-top: 32px;
}

/* Threaded/Nested Comments */
.comment-list .children {
	margin-left: 32px;
}

.comment-list .comment-respond {
    margin-left: 32px;
    width: calc(100% - 32px);
}

.comment-author {
	float: left;
	width: 64px;
}

.comment-author .avatar {
	display: block;
	margin-bottom: 10px;
}

.comment-author .fn {
	word-wrap: break-word;
	vertical-align: bottom;
	font-style: normal;
}

.says {
	display: none;
}

.comment-author img {
	width: 64px;
	height: 64px;
}

.no-avatars .comment-author {
	margin: 0 0 5px;
	max-width: 100%;
	position: relative;
}

.no-avatars .comment-metadata,
.no-avatars .comment-content,
.no-avatars .comment-list .reply {
	width: 100%;
}

.comment-list .edit-link {
	margin-left: 24px;
}

.comment-metadata,
.comment-awaiting-moderation,
.comment-content,
.comment-list .reply {
	float: right;
	width: 89%;
	width: -webkit-calc(100% - 80px);
	width: calc(100% - 80px);
}

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

.comment-navigation {
	background-color: #222;
	color: #f7f7ec;
	padding: 16px;
	width: 100%;
	max-width: 640px;
	margin: 32px auto;
}

.comment-respond {
	width: 100%;
	max-width: 640px;
	margin: 64px auto;
	background-color: #f7f7ec;
	color: #222;
	padding: 16px 32px;
}

.comment-respond a {
	color: #903;
}

.comment-respond a:hover,
.comment-respond a:active,
.comment-respond a:focus, {
	color: #b25;
}

p.no-comments {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 16px;
	background: #f7f7ec;
	color: #222;
	text-align: center;
}

#wp-comment-cookies-consent {
	margin-right: 16px;
}


/* =Widgets
----------------------------------------------- */
.widgets-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto 64px auto;
}

h1.widget-title {
	font-size: 1.4em;
}

aside.widget {
	background: #222;
	color: #f7f7ec;
	padding: 16px;
	width: 100%;
	max-width: 384px;
	margin: 0 0 64px 0;
}

aside.widget:nth-child(even) {
	background: #f7f7ec;
	color: #222;
}

aside.widget:nth-child(even) a {
	color: #903;
}

aside.widget:nth-child(even) a:hover,
aside.widget:nth-child(even) a:active,
aside.widget:nth-child(even) a:focus {
	color: #b25;
}

aside.widget a:hover,
aside.widget a:active,
aside.widget a:focus {
	text-decoration: underline;
	outline: none;
}

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

/* Search widget */
.widget_search .search-submit {
	display: none;
}

.widget .search-field {
	width: calc(100% - 8px);
}

/* Footer */
#colophon {
	margin-top: 60px;
}

.site-info {
	background: #222;
	color: #f7f7ec;
	padding: 20px;
	width: 100%;
	text-align: center;
}

.site-info a {
	color: #f7f7ec;
}

.site-info a:hover,
.site-info a:hover,
.site-info a:hover {
	border-bottom: 1px dotted;
}


/* Tweaks for Plugins */
.quickshare-container {
	border: none;
}


/* Media Queries */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

@media screen and (max-width:1200px) {
	h2.site-description {
		display: none;
	}

	h1.site-title {
		width: 100%;
	}

	.error404 h1.page-title {
		font-size: 0;
	}

	.widgets-container {
		max-width: 832px;
	}
}

@media screen and (max-width:848px) {
	.widgets-container {
		max-width: 384px;
	}
}

@media screen and (max-width:784px) {
	footer.entry-meta .edit-link {
		position: relative;
		right: auto;
		float: right;
	}

	article.formatted-post footer.entry-meta li div.post-categories-list,
	article.formatted-post footer.entry-meta li div.post-tags-list {
		width: 100%;
		left: 0;
	}
}

@media screen and (max-width:680px) {
	footer.entry-meta li div.post-categories-list,
	footer.entry-meta li div.post-tags-list {
		width: 100%;
		left: 0;
	}	
}

@media screen and (max-width:600px) {
	body, button, input, select, textarea {
		font-size: 14px;
	}
	
	header#masthead {
		position: relative;
	}
}

@media screen and (max-width:530px) {
	article.formatted-post .entry-meta,
	article.formatted-post .entry-header,
	article.formatted-post .entry-summary,
	article.formatted-post .entry-content {
		margin-left: 0;
	}

	footer.entry-meta li.post-format-icon {
		position: relative;
		left: auto;
		float: left;
		width: 64px;
		height: 64px;
	}

	article.formatted-post a.post-format-link:before {
		font-size: 64px;
	}
}

@media print {
	body {
		background: none !important; /* Brute force since user agents all print differently. */
		color: #222;
		font-size: 12pt;
	}

	.site,
	.site-header,
	.hentry,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content .entry-meta,
	.page-content,
	.archive-header,
	.page-header,
	.contributor-info,
	.comments-area,
	.attachment .entry-attachment .attachment {
		max-width: 100%;
	}

	#figure-ground,
	#site-navigation .search-form,
	.menu-toggle,
	.site-content nav,
	.edit-link,
	.page-links,
	.widget-area,
	.more-link,
	.post-format-archive-link,
	.comment-respond,
	.comment-list .reply,
	.comment-reply-login {
		display: none;
	}

	.site-title,
	.site-title a,
	.entry-meta,
	.entry-meta a {
		color: #222;
	}

	.entry-content a,
	.entry-summary a,
	.page-content a,
	.comment-content a {
		text-decoration: underline;
	}

	.site-header,
	.post-thumbnail,
	a.post-thumbnail:hover,
	.site-content .entry-header,
	.site-footer,
	.featured-content,
	.featured-content .entry-header {
		background: transparent;
	}
	
	.site-description {
		float: left;
	}

}

/* Customize Preview */
.site-title a.customize-partial-refreshing,
.site-description.customize-partial-refreshing,
.site-info.customize-partial-refreshing {
	opacity: 1; /* Don't show visible selective refresh indicator, as values are loosely updated in JS initially. */
}

.customize-partial-edit-shortcut-blogname {
	margin-left: 24px; /* Don't cut off the site title shortcut or cover up the site title itself, put the icon below it. */
	margin-top: 32px;
}

/* Block Styles */
.has-fg-dark-color {
	color: #222;
}

.has-fg-light-color {
	color: #f7f7ec;
}

.has-accent-light-color {
	color: #87f;
}

.has-accent-dark-color {
	color: #903;
}

.has-fg-dark-background-color {
	background-color: #222;
}

.has-fg-light-background-color {
	background-color: #f7f7ec;
}

.has-accent-light-background-color {
	background-color: #87f;
}

.has-accent-dark-background-color {
	background-color: #903;
}

/**
 * Full & wide block alignments
 */

@media screen and (min-width: 640px) {
	.alignfull,
	.alignwide {
		margin-left: calc(-100vw / 2 + 594px / 2); /* 640px article width - 64px content padding */
		margin-right: calc(-100vw / 2 + 594px / 2);
		text-align: center;
		width: auto;
		max-width: 100vw;
	}
}

@media screen and (min-width:1280px) {
	.alignwide {
		width: 1280px;
		margin-left: -352px; /* 640px / 2 article width + 32px half content padding */
		margin-right: -352px;
	}
}

.alignwide figcaption,
.alignfull figcaption {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px;
	background: #222;
	color: #f7f7ec;
}

/* We float the img inside the figure that has .alignleft applied.
   This makes the .alignleft element have the same main column width as text.
   What makes the float work is that the figure collapses into a zero height element */
 
.wp-block-image figure.alignleft {
	display: block;
	float: left;
	margin-right: 16px;
}

.wp-block-image figure.alignright {
	display: block;
	float: right;
	margin-left: 16px;
}

/* For captions, we display the figure itself as a table.
   This ensures the figcaption will retain the same width as the image,
   which is important when the caption is long. */
.wp-block-image figure.alignleft,
.wp-block-image figure.alignright {
	display: table;
}

.wp-block-image figure.alignleft figcaption,
.wp-block-image figure.alignright figcaption {
	display: table-caption;
	caption-side: bottom;
}

.wp-block-file {
	margin: 16px 0;
}

.site-main .entry-content .wp-block-file a:not(.wp-block-file__button) {
	text-decoration: none;
	color: inherit;
}