/*!
Theme Name: Carbon Lite
Author: vincentdubroeucq
Author URI: http://vincentdubroeucq.com
Description: A bold theme for bold bloggers. Carbon Lite features a simple layout supported by fat typography.
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carbon-lite
Tags: one-column, two-columns, left-sidebar, right-sidebar, flexible-header, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, sticky-post, theme-options, threaded-comments, translation-ready, blog

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.

Carbon Lite 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.com/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Accessibility
# Alignments
# Clearings
# Infinite scroll
# Media
	## Captions
	## Galleries
# Content
	## Header
	## Main navigation and menu area
	## Posts and pages
	## Comments
	## Posts Navigation
	## Footer
# Widgets
	## Widget areas styles and basic widgets styles
	## WordPress default widgets styles
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# 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: bold;
}

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 {
  -webkit-box-sizing: content-box;
  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"] {
  -webkit-box-sizing: border-box;
  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: bold;
}

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

td,
th {
  padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
  color: #444;
  font-family: "Exo 2", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: 14px;
  font-size: 0.875rem;
}

@media screen and (min-width: 34em) {
  body {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

@media screen and (min-width: 40em) {
  body {
    font-size: 15px;
    font-size: 0.9375rem;
  }
}

@media screen and (min-width: 60em) {
  body {
    font-size: 16px;
    font-size: 1rem;
  }
}

@media screen and (min-width: 1280px) {
  body {
    font-size: 18px;
    font-size: 1.125rem;
  }
}

@media screen and (min-width: 60em) {
  body {
    font-weight: 300;
  }
}

.small-body-text {
  font-size: 13px;
  font-size: 0.8125rem;
}

@media screen and (min-width: 34em) {
  .small-body-text {
    font-size: 13px;
    font-size: 0.8125rem;
  }
}

@media screen and (min-width: 40em) {
  .small-body-text {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

@media screen and (min-width: 60em) {
  .small-body-text {
    font-size: 15px;
    font-size: 0.9375rem;
  }
}

@media screen and (min-width: 1280px) {
  .small-body-text {
    font-size: 16px;
    font-size: 1rem;
  }
}

.large-body-text {
  font-size: 14px;
  font-size: 0.875rem;
}

@media screen and (min-width: 34em) {
  .large-body-text {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

@media screen and (min-width: 40em) {
  .large-body-text {
    font-size: 16px;
    font-size: 1rem;
  }
}

@media screen and (min-width: 60em) {
  .large-body-text {
    font-size: 17px;
    font-size: 1.0625rem;
  }
}

@media screen and (min-width: 1280px) {
  .large-body-text {
    font-size: 20px;
    font-size: 1.25rem;
  }
}

h1, h2, h3, h4, h5, h6 {
  clear: both;
  line-height: 1.2;
  margin: 1.414em 0 0.5em;
  text-transform: uppercase;
}

h1 {
  margin-top: 0;
}

h1, h2, h3 {
  font-family: "Audiowide", "Exo 2", sans-serif;
}

h1, .h1 {
  font-size: 3.998em;
}

h2, .h2 {
  font-size: 1.999em;
}

h3, .h3 {
  font-size: 1.414em;
}

h4, .h4 {
  font-size: 1.25em;
}

h5, .h5 {
  font-size: 1.125em;
}

h6, .h6 {
  font-size: 1em;
}

@media screen and (min-width: 40em) {
  h1, .h1 {
    font-size: 5.998em;
  }
  h2, .h2 {
    font-size: 2.827em;
  }
  h3, .h3 {
    font-size: 1.999em;
  }
  h4, .h4 {
    font-size: 1.414em;
  }
  h5, .h5 {
    font-size: 1.25em;
  }
  h6, .h6 {
    font-size: 1.125em;
  }
}

.small-headings h1, .small-headings .h1 {
  font-size: 2.441em;
}

.small-headings h2, .small-headings .h2 {
  font-size: 1.553em;
}

.small-headings h3, .small-headings .h3 {
  font-size: 1.25em;
}

.small-headings h4, .small-headings .h4 {
  font-size: 1.175em;
}

.small-headings h5, .small-headings .h5 {
  font-size: 1.125em;
}

.small-headings h6, .small-headings .h6 {
  font-size: 1em;
}

@media screen and (min-width: 40em) {
  .small-headings h1, .small-headings .h1 {
    font-size: 4.441em;
  }
  .small-headings h2, .small-headings .h2 {
    font-size: 1.953em;
  }
  .small-headings h3, .small-headings .h3 {
    font-size: 1.553em;
  }
  .small-headings h4, .small-headings .h4 {
    font-size: 1.25em;
  }
  .small-headings h5, .small-headings .h5 {
    font-size: 1.175em;
  }
  .small-headings h6, .small-headings .h6 {
    font-size: 1.125em;
  }
}

.medium-headings h1, .medium-headings .h1 {
  font-size: 3.157em;
}

.medium-headings h2, .medium-headings .h2 {
  font-size: 1.777em;
}

.medium-headings h3, .medium-headings .h3 {
  font-size: 1.333em;
}

.medium-headings h4, .medium-headings .h4 {
  font-size: 1.25em;
}

.medium-headings h5, .medium-headings .h5 {
  font-size: 1.125em;
}

.medium-headings h6, .medium-headings .h6 {
  font-size: 1em;
}

@media screen and (min-width: 40em) {
  .medium-headings h1, .medium-headings .h1 {
    font-size: 5.157em;
  }
  .medium-headings h2, .medium-headings .h2 {
    font-size: 2.369em;
  }
  .medium-headings h3, .medium-headings .h3 {
    font-size: 1.777em;
  }
  .medium-headings h4, .medium-headings .h4 {
    font-size: 1.333em;
  }
  .medium-headings h5, .medium-headings .h5 {
    font-size: 1.25em;
  }
  .medium-headings h6, .medium-headings .h6 {
    font-size: 1.125em;
  }
}

.huge-headings h1, .huge-headings .h1 {
  font-size: 5.063em;
}

.huge-headings h2, .huge-headings .h2 {
  font-size: 2.25em;
}

.huge-headings h3, .huge-headings .h3 {
  font-size: 1.5em;
}

.huge-headings h4, .huge-headings .h4 {
  font-size: 1.25em;
}

.huge-headings h5, .huge-headings .h5 {
  font-size: 1.125em;
}

.huge-headings h6, .huge-headings .h6 {
  font-size: 1em;
}

@media screen and (min-width: 40em) {
  .huge-headings h1, .huge-headings .h1 {
    font-size: 7.063em;
  }
  .huge-headings h2, .huge-headings .h2 {
    font-size: 3.375em;
  }
  .huge-headings h3, .huge-headings .h3 {
    font-size: 2.25em;
  }
  .huge-headings h4, .huge-headings .h4 {
    font-size: 1.5em;
  }
  .huge-headings h5, .huge-headings .h5 {
    font-size: 1.25em;
  }
  .huge-headings h6, .huge-headings .h6 {
    font-size: 1.125em;
  }
}

p {
  margin-bottom: 1.5em;
  margin-top: 0;
}

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

address {
  margin: 0 0 1.5em;
}

pre {
  background: #f7f7f7;
  border-radius: 3px;
  -webkit-box-shadow: 3px 3px 3px #aaaaaa;
  box-shadow: 3px 3px 3px #aaaaaa;
  font-family: monospace;
  font-size: 1.125em;
  line-height: 1.6;
  margin-bottom: 1.5em;
  max-width: 100%;
  overflow: auto;
  padding: 2em;
}

pre code {
  font-size: 0.8em;
}

code, kbd, tt, var {
  font-family: "Space Mono", monospace;
}

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

mark, ins {
  background: #444;
  color: #fff;
  text-decoration: none;
}

big {
  font-size: 1.25em;
}

small {
  font-size: 0.75em;
}

.small-icons .icon {
  width: 2em;
  height: 2em;
}

.medium-icons .icon {
  width: 2.5em;
  height: 2.5em;
}

.large-icons .icon {
  width: 3em;
  height: 3em;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*: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/ */
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  background: #fff;
  /* Fallback for when there is no custom background color defined. */
}

blockquote {
  border-left: 5px solid #444;
  -webkit-box-shadow: 3px 3px 3px #aaaaaa;
  box-shadow: 3px 3px 3px #aaaaaa;
  font-size: 1.25em;
  font-style: italic;
  margin: 1.5em;
  padding: 1em 2em;
  quotes: "" "";
}

blockquote footer {
  text-align: right;
}

q {
  quotes: "" "";
}

hr {
  background-color: #ddd;
  border: 0;
  height: 1px;
  margin-bottom: 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. */
}

a {
  border-radius: 3px;
  color: #444;
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

a:visited {
  color: #111111;
}

a:hover, a:focus, a:active {
  background-color: #444;
  color: #fff;
  text-decoration: none;
}

a:focus {
  outline: thin dotted;
}

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

ul, ol {
  margin: 0 0 1.5em;
}

ul {
  list-style: square;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 1.5em 1.5em;
}

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

th {
  background-color: #444;
  border: 1px solid #777777;
  color: #fff;
  padding: 0.5em;
}

td {
  border: 1px solid #777777;
  padding: 0.5em;
}

tr:nth-of-type(2n+1) {
  background-color: #f7f7f7;
}

tfoot td {
  background-color: #444;
  border: 1px solid #777777;
  color: #fff;
  padding: 0.5em;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: transparent;
  border: 2px solid #444;
  border-radius: 3px;
  display: inline-block;
  line-height: 1;
  padding: 1em 1.5em;
  text-transform: uppercase;
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

button:hover, button:active, button:focus,
.button:hover,
.button:active,
.button:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
  background-color: #444;
  border-color: #444;
  -webkit-box-shadow: 3px 3px 3px #aaaaaa;
  box-shadow: 3px 3px 3px #aaaaaa;
  color: #fff;
  outline: 0;
  text-decoration: none;
}

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"],
select,
textarea {
  color: #777777;
  border: 1px solid #777777;
  border-radius: 3px;
  padding: .5em;
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
  -webkit-box-shadow: 3px 3px 3px #777777;
  box-shadow: 3px 3px 3px #777777;
  border-color: #444;
  color: #444;
  outline: 0;
}

textarea {
  width: 100%;
}

form {
  margin-bottom: 1.5em;
}

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

.screen-reader-text:focus {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  clip: auto !important;
  color: #444;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  left: 3em;
  padding: 1em 2em;
  top: 3em;
  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: 1.5em 1.5em 1.5em 0;
}

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

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

.alignnone {
  margin: 1.5em 0;
}

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

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

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.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;
  max-width: 100%;
}

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

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

.wp-caption-text {
  font-size: .8em;
  font-style: italic;
  text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 1.5em;
}

.gallery-item {
  text-align: center;
}

.gallery-columns-2 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 50%;
  flex: 1 1 50%;
}

.gallery-columns-3 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 33%;
  flex: 1 1 33%;
}

.gallery-columns-4 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 25%;
  flex: 1 1 25%;
}

.gallery-columns-5 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 20%;
  flex: 1 1 20%;
}

.gallery-columns-6 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 16.66%;
  flex: 1 1 16.66%;
}

.gallery-columns-7 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 14.28%;
  flex: 1 1 14.28%;
}

.gallery-columns-8 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 12.5%;
  flex: 1 1 12.5%;
}

.gallery-columns-9 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 11.11%;
  flex: 1 1 11.11%;
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
.site-header {
  background-color: #444;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 3px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  margin: 0 auto 2em;
}

.site-header h1 {
  -webkit-animation: title-fade-in .5s ease-in-out;
  animation: title-fade-in .5s ease-in-out;
  letter-spacing: -0.075em;
  line-height: 1;
  margin: 0 0 -0.13em -0.05em;
}

@media screen and (min-width: 1280px) {
  .site-header {
    margin-bottom: 3em;
  }
}

.header-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  height: 40vw;
  min-height: 0;
  min-width: 0;
  max-height: 20em;
  max-width: 100%;
}

.header-info > * {
  max-width: 100%;
}

.small-header .header-info {
  max-height: 10em;
}

.header-title a {
  color: #fff;
  text-decoration: none;
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.header-title a:hover, .header-title a:focus, .header-title a:active {
  background-color: inherit;
  font-size: 1.1em;
}

.header-meta,
.header-description {
  -webkit-animation: title-fade-in .5s .5s ease-out forwards;
  animation: title-fade-in .5s .5s ease-out forwards;
  font-weight: bold;
  margin-bottom: 0;
  opacity: 0;
  text-transform: uppercase;
}

.header-meta a {
  color: #fff;
}

.header-meta a:hover, .header-meta a:focus {
  background-color: #fff;
  color: #444;
  text-decoration: none;
}

@-webkit-keyframes title-fade-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2em);
    transform: translateX(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes title-fade-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2em);
    transform: translateX(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes subtitle-fade-in {
  0%, 50% {
    opacity: 0;
    -webkit-transform: translateX(2em);
    transform: translateX(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes subtitle-fade-in {
  0%, 50% {
    opacity: 0;
    -webkit-transform: translateX(2em);
    transform: translateX(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/*--------------------------------------------------------------
## Main navigation and menu area
--------------------------------------------------------------*/
.main-navigation {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 2em;
  margin: 0 auto;
  min-width: 0;
  width: 100%;
}

@media screen and (min-width: 1280px) {
  .main-navigation {
    max-width: 1280px;
    padding: 2em 0;
  }
}

.main-navigation a {
  color: #fff;
}

.main-navigation a:hover, .main-navigation a:focus {
  background-color: #fff;
  color: #444;
}

.main-navigation .primary-menu {
  list-style: none;
  margin-bottom: 3em;
  padding: 0;
}

.main-navigation .primary-menu .sub-menu {
  list-style: none;
  padding-left: 2em;
  font-size: .75em;
}

@media screen and (min-width: 40em) {
  .main-navigation .primary-menu .sub-menu {
    font-size: .85em;
  }
}

.main-navigation .primary-menu a {
  background-color: transparent;
  border-bottom: 5px solid transparent;
  border-radius: 0px;
  color: #fff;
  display: inline-block;
  padding: .25em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.main-navigation .primary-menu li > a:hover,
.main-navigation .primary-menu li > a:focus {
  border-bottom-color: #fff;
  outline: none;
}

a.custom-logo-link {
  border: none;
  display: inline-block;
  line-height: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

a.custom-logo-link:hover, a.custom-logo-link:focus {
  background-color: transparent;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

a.custom-logo-link img {
  max-height: 4em;
  width: auto;
}

.menu-toggle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  padding: .5em 1em .5em .5em;
}

.menu-toggle:focus,
.menu-toggle:hover {
  background-color: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #444;
  outline: none;
}

.menu-wrapper {
  background-color: #444;
  border-left: 2px solid #5e5e5e;
  bottom: 0;
  height: 100vh;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 2em;
  position: fixed;
  right: -17px;
  top: 0;
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  visibility: hidden;
  width: 0;
  z-index: 100;
}

@media screen and (min-width: 1280px) {
  .menu-wrapper {
    padding: 3em;
  }
}

.menu-wrapper .menu-toggle {
  border: none;
  padding: 0;
}

.menu-wrapper .social-icons a:hover .icon,
.menu-wrapper .social-icons a:focus .icon {
  fill: #444;
}

.menu-wrapper .button {
  border: 2px solid #fff;
  border-radius: 3px;
  padding: 1em 1.5em;
}

.menu-wrapper .button:hover, .menu-wrapper .button:active, .menu-wrapper .button:focus {
  background-color: #fff;
  color: #444;
}

.main-navigation.toggled .menu-wrapper {
  max-width: 80vw;
  opacity: 1;
  visibility: visible;
  width: 30em;
}

.menu-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 2em;
}

@media screen and (min-width: 1280px) {
  .menu-header {
    margin-bottom: 3em;
  }
}

.menu-title {
  margin: 0;
}

.search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.search-form label {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
  min-width: 0px;
}

.search-form input {
  height: 100%;
}

.search-form .icon {
  color: #444;
  margin: auto 0;
}

.small-icons .search-form input {
  width: calc(100% + 2em);
}

.medium-icons .search-form input {
  width: calc(100% + 2.5em);
}

.large-icons .search-form input {
  width: calc(100% + 3em);
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.site-content {
  margin: 0 auto 2em;
  max-width: 1280px;
}

@media screen and (min-width: 60em) {
  .site-content {
    padding: 0 2em;
  }
}

@media screen and (min-width: 1280px) {
  .site-content {
    margin-bottom: 3em;
    padding: 0;
  }
}

@media screen and (min-width: 60em) {
  .sidebar-right .site-content,
  .sidebar-left .site-content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.sidebar-left .site-content {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.content-area {
  -webkit-box-flex: 1.618;
  -ms-flex: 1.618 1.618 0px;
  flex: 1.618 1.618 0px;
  margin: 0 auto;
  max-width: 49em;
  min-width: 0px;
}

.medium-content-area .content-area {
  -webkit-box-flex: 2;
  -ms-flex: 2 2 0px;
  flex: 2 2 0px;
  max-width: 52em;
}

.large-content-area .content-area {
  -webkit-box-flex: 3;
  -ms-flex: 3 3 0px;
  flex: 3 3 0px;
  max-width: 58em;
}

.hentry,
.no-results,
.error-404 {
  background-color: #fff;
  border-radius: 3px;
  -webkit-box-shadow: 3px 3px 3px #aaaaaa;
  box-shadow: 3px 3px 3px #aaaaaa;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 2em;
}

@media screen and (min-width: 1280px) {
  .hentry,
  .no-results,
  .error-404 {
    margin-bottom: 3em;
  }
}

.hentry > *,
.no-results > *,
.error-404 > * {
  max-width: 100%;
}

.entry-header {
  border-left: 1em solid #444;
  border-radius: 3px 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  padding: 1em 2em 1em 1em;
}

.entry-header > * {
  max-width: 100%;
}

@media screen and (min-width: 1280px) {
  .entry-header {
    padding: 1em 3em 1em 2em;
  }
}

.entry-title {
  margin-top: .1em;
}

.entry-meta {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: bold;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 0;
  text-transform: uppercase;
}

.thumbnail {
  line-height: 0;
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
  text-align: center;
}

.thumbnail img {
  border-radius: 3px 3px 0 0;
}

.post-edit-link,
.comment-edit-link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  padding-left: .5em;
}

.entry-content {
  padding: 2em;
}

@media screen and (min-width: 1280px) {
  .entry-content {
    padding: 3em;
  }
}

.entry-footer {
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0;
  padding: 1em 2em;
}

@media screen and (min-width: 1280px) {
  .entry-footer {
    padding: 1em 3em;
  }
}

.tags-links,
.comments-link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.tags-links {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  vertical-align: text-bottom;
}

.tags-links a {
  margin: 0 5px;
}

.comments-link {
  margin-left: auto;
}

.more-link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: .5em 1em;
}

.page-links {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1.5em;
}

.page-links > * {
  margin-left: .5em;
  border-radius: 3px;
  display: inline-block;
  padding: .5em 1em;
}

.page-links > span {
  border: 2px solid #444;
}

.page-links > a {
  border: 2px solid transparent;
}

.sticky,
.bypostauthor {
  color: #fff;
  background-color: #444;
}

.sticky a,
.bypostauthor a {
  color: #fff;
}

.sticky a:hover, .sticky a:focus,
.bypostauthor a:hover,
.bypostauthor a:focus {
  background-color: #fff;
  color: #444;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comments-area {
  background-color: #fff;
  border-radius: 3px;
  -webkit-box-shadow: 3px 3px 3px #aaaaaa;
  box-shadow: 3px 3px 3px #aaaaaa;
  margin-bottom: 2em;
  padding: 2em;
}

@media screen and (min-width: 1280px) {
  .comments-area {
    margin-bottom: 3em;
    padding: 3em;
  }
}

.comments-pagination .nav-links {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-bottom: 1.5em;
}

.comments-pagination .nav-links > * {
  margin-left: .5em;
  border-radius: 3px;
  display: inline-block;
  padding: .5em 1em;
}

.comments-pagination .nav-links > span {
  border: 2px solid #444;
}

.comments-pagination .nav-links > a {
  border: 2px solid transparent;
}

.comments-title {
  margin-top: .1em;
}

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

.comment-list ul {
  margin-left: 0;
  padding-left: 3em;
}

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

@media screen and (min-width: 40em) {
  .comment-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.comment-author {
  padding: 1em;
  text-align: center;
}

@media screen and (min-width: 40em) {
  .comment-author {
    margin: 0 auto;
    max-width: 11em;
  }
}

.avatar {
  border-radius: 3px;
  display: block;
  margin: 0 auto .5em;
}

.comment-content {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
  min-width: 0px;
  padding: 1em;
}

.comment-metadata {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.reply {
  margin-right: .5em;
  text-align: right;
}

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

.bypostauthor {
  display: block;
  color: #fff;
  background-color: #444;
}

.bypostauthor a {
  color: #fff;
}

.bypostauthor a:hover, .bypostauthor a:focus {
  background-color: #fff;
  color: #444;
}

.comment-form label {
  display: block;
  margin-bottom: .5em;
}

.submit {
  padding: 1.5em 2em;
}

/*--------------------------------------------------------------
## Posts Navigation
--------------------------------------------------------------*/
.posts-navigation,
.post-navigation {
  background-color: #fff;
  -webkit-box-shadow: 3px 3px 3px #aaaaaa;
  box-shadow: 3px 3px 3px #aaaaaa;
  margin: 0 auto 2em;
  padding: 2em;
}

@media screen and (min-width: 1280px) {
  .posts-navigation,
  .post-navigation {
    margin-bottom: 3em;
    padding: 3em;
  }
}

.nav-links {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.nav-next {
  margin-left: auto;
}

.previous-posts-link,
.previous-post-link,
.next-posts-link,
.next-post-link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: .5em 0;
  padding: .5em 1em;
}

.next-posts-link span:last-child,
.previous-post-link span:last-child {
  margin-right: .5em;
}

.previous-posts-link span:first-child,
.next-post-link span:first-child {
  margin-left: .5em;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
.site-footer {
  background-color: #444;
  border-top: 1px solid #5e5e5e;
  color: #fff;
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover, .site-footer a:focus {
  background-color: #fff;
  color: #444;
}

.site-footer button,
.site-footer .button,
.site-footer input[type="button"],
.site-footer input[type="reset"],
.site-footer input[type="submit"] {
  border-color: #fff;
}

.footer-wrapper {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 2em;
  margin: 0 auto;
}

@media screen and (min-width: 1280px) {
  .footer-wrapper {
    max-width: 1280px;
    padding: 2em 0;
  }
}

.footer-wrapper > * {
  margin: 0;
}

.social-icons {
  line-height: 1;
  list-style: none;
  margin-left: auto;
  padding: 0;
}

.social-icons li {
  display: inline-block;
}

.social-icons a {
  display: inline-block;
  line-height: 1;
}

.social-icons a .icon {
  fill: #fff;
}

.social-icons a:hover .icon,
.social-icons a:focus .icon {
  fill: #444;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Widget area styles and basic widget styles
--------------------------------------------------------------*/
.widget-area {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
  margin: 0 auto;
  min-width: 0px;
  max-width: 49em;
}

.medium-content-area .widget-area {
  max-width: 52em;
}

.large-content-area .widget-area {
  max-width: 58em;
}

@media screen and (min-width: 60em) {
  .sidebar-right .widget-area {
    margin-left: 3em;
  }
  .sidebar-left .widget-area {
    margin-right: 3em;
  }
}

.no-sidebar .widget-area {
  display: none;
}

.widget {
  background-color: #fff;
  -webkit-box-shadow: 3px 3px 3px #aaaaaa;
  box-shadow: 3px 3px 3px #aaaaaa;
  margin-bottom: 3em;
  word-wrap: break-word;
  padding: 2em;
  /* Make sure select elements fit in widgets. */
}

@media screen and (min-width: 1280px) {
  .widget {
    padding: 3em;
  }
}

.widget select {
  max-width: 100%;
}

.error-404 .widget {
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.widget-title {
  font-weight: bold;
  font-family: "Exo 2", sans-serif;
  margin-top: 0;
}

.menu-widget {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0;
}

.footer-widget-area {
  border-bottom: 1px solid #5e5e5e;
}

.footer-widgets {
  margin: 0 auto;
  max-width: 1280px;
}

@media screen and (min-width: 60em) {
  .footer-widgets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.footer-widget {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0 auto;
  min-width: 0px;
  max-width: 49em;
}

@media screen and (min-width: 60em) {
  .footer-widget {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 18em;
    flex: 1 1 18em;
  }
}

.medium-content-area .footer-widget {
  max-width: 52em;
}

.large-content-area .footer-widget {
  max-width: 58em;
}

/*--------------------------------------------------------------
## WordPress default widgets styles
--------------------------------------------------------------*/
.widget_calendar tr:nth-of-type(2n+1),
.widget_calendar a {
  color: #444;
}

.widget_calendar a:hover,
.widget_calendar a:focus,
.widget_calendar tfoot a,
.widget_calendar tfoot a:visited {
  color: #fff;
}

.widget_calendar tfoot a:hover,
.widget_calendar tfoot a:focus {
  background-color: #fff;
  color: #444;
}

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