style.css

@charset "UTF-8";
/*---------------------------------------------------------------------------------

	Theme Name: Kouki
	Version: 3.0.0
  Requires PHP: 5.6
	Tested up to: 5.6
	Author: Felix Dorner
	Author URI: https://felixdorner.de
	Theme URI: https://felixdorner.de/kouki
	Description: A beautiful and minimal theme for personal blogs. Kouki is meant for publishers who like to display their content in a delightful and minimal way. Ideal for food blogs, photographers, minimalists, tumble logs and everyone else who likes an unobstrusive WordPress theme. Non-mandatory theme options help you to individualize the theme. Change colors, choose fonts from the Google libary and add social icons. The theme is responsive and looks good on small devices.
	License: GNU GENERAL PUBLIC LICENSE, Version 2
	License URI: https://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: kouki
	Tags: one-column, grid-layout, wide-blocks, custom-colors, custom-menu, custom-logo, featured-images, footer-widgets, sticky-post, theme-options, threaded-comments, translation-ready, blog, food-and-drink, holiday

	Kouki WordPress Theme, Copyright (C) 2015-2021, Felix Dorner
	Kouki is distributed under the terms of the GNU GPL

	IMPORTANT NOTE:
	Do not add any custom styles here. Please use a child theme so that your
	customizations aren't lost after updates.
	http://codex.wordpress.org/Child_Themes

-----------------------------------------------------------------------------------

	# 1.0 - Basics
 		## 1.1 - Reset
		## 1.2 - Elements
		## 1.3 - Layout
		## 1.4 - Colors
	# 2.0 - Components
		## 2.1 - Accessibility
		## 2.2 - Typo
		## 2.3 - Links
		## 2.4 - Buttons
	# 3.0 - Partials
		## 3.1 - Header
		## 3.2 - Navigation Toggle
		## 3.3 - Footer
		## 3.4 - WP Formatting
		## 3.5 - WP Comments
		## 3.6 - WP Widgets
	# 4.0 - Plugins
		## 4.1 - Imagelightbox
		## 4.2 - Jetpack

----------------------------------------------------------------------------------- */
/*---------------------------------------------------------------------------------
01 Basics
----------------------------------------------------------------------------------- */
/********************
 * 1.1 Reset
 */
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 {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  vertical-align: baseline;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
}

html {
  overflow-y: scroll;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  background: #fff;
}

*, *:before, *:after {
  box-sizing: border-box;
}

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

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

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

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

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

a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 1px dashed;
}

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

a img {
  border: 0;
}

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

/********************
 * 1.2 Elements
 */
/**
 * Lists
 */
ul, ol {
  margin: 0 0 30px 30px;
}

ul {
  list-style: disc;
}

ul ul {
  list-style: circle;
}

ol {
  list-style: decimal;
}

ol ol {
  list-style: lower-alpha;
}

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

/**
 * Tables
 */
table {
  width: 100%;
}

table th {
  padding: 10px;
}

table thead th {
  font-weight: 700;
}

table td,
table th {
  padding: 10px;
}

table tbody tr:nth-child(odd) {
  background: #F4F4F4;
}

/**
 * Definition Lists
 */
dl {
  margin: 0 0 30px;
}

dt {
  font-weight: bold;
  margin-bottom: 4px;
}

dd {
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 4px;
  margin-bottom: 30px;
}

/**
 * Forms
 */
input[type=text],
input[type=email],
input[type=password],
textarea {
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: #f5f5f5;
}

select {
  max-width: 100%;
}

/**
 * Media
 */
img,
picture,
figure {
  max-width: 100%;
  height: auto;
  margin: 0;
}

embed,
iframe,
object {
  max-width: 100%;
  margin: 0;
}

/**
 * Other
 */
hr {
  margin: 60px 0;
  height: 1px;
  border: 0;
  background-color: gray;
}

/**
 * Responsive settings for elements
 */
@media (max-width: 480px) {
  /* Lists */
  ul, ol {
    margin: 0 0 15px 15px;
  }
}
/********************
 * 1.3 Layout
 */
/**
 * Set the frame
 */
header,
.wrapper {
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  width: 100%;
}

.masonry-wrapper {
  padding-left: 15px;
  padding-right: 15px;
}

.hentry-masonry {
  width: 100%;
  padding: 15px;
  display: inline-block;
}
@media screen and (min-width: 40em) {
  .hentry-masonry {
    padding: 30px 15px;
    width: 50%;
  }
}

.hentry__inside {
  max-width: 800px;
  margin: 0 auto;
}

.pagination,
.nav-links,
.comment-navigation {
  display: block;
}
.pagination::after,
.nav-links::after,
.comment-navigation::after {
  clear: both;
  content: "";
  display: block;
}
.pagination div,
.nav-links div,
.comment-navigation div {
  float: left;
  display: block;
  margin-right: 2.8571428571%;
  width: 48.5714285714%;
}
.pagination div:last-child,
.nav-links div:last-child,
.comment-navigation div:last-child {
  margin-right: 0;
}
.pagination .nav-next,
.nav-links .nav-next,
.comment-navigation .nav-next {
  text-align: right;
  float: right;
}
.pagination .nav-previous,
.nav-links .nav-previous,
.comment-navigation .nav-previous {
  text-align: left;
  float: left;
}

.footer-links {
  max-width: 90%;
  margin: 0 auto;
}
.footer-links::after {
  clear: both;
  content: "";
  display: block;
}
@media screen and (min-width: 40em) {
  .footer-links {
    max-width: 80%;
  }
}

aside {
  float: left;
  display: block;
  margin-right: 2.8571428571%;
  width: 100%;
}
aside:last-child {
  margin-right: 0;
}
@media screen and (min-width: 40em) {
  aside {
    float: left;
    display: block;
    margin-right: 2.8571428571%;
    width: 48.5714285714%;
  }
  aside:last-child {
    margin-right: 0;
  }
  aside:nth-child(2n) {
    margin-right: 0;
  }
  aside:nth-child(2n+1) {
    clear: left;
  }
  aside::after {
    clear: both;
    content: "";
    display: block;
  }
}
@media screen and (min-width: 53.75em) {
  aside {
    float: left;
    display: block;
    margin-right: 2.8571428571%;
    width: 31.4285714286%;
  }
  aside:last-child {
    margin-right: 0;
  }
  aside:nth-child(2n) {
    margin-right: 2.8571428571%;
  }
  aside:nth-child(2n+1) {
    clear: none;
  }
  aside:nth-child(3n) {
    margin-right: 0;
  }
  aside:nth-child(3n+1) {
    clear: left;
  }
  aside::after {
    clear: both;
    content: "";
    display: block;
  }
}

/**
 * Column helpers
 */
.col-12 {
  width: 100%;
}

.col-8 {
  width: 66.6667%;
}

.col-6 {
  width: 50%;
}

.col-4 {
  width: 33.333333333%;
}

.col-centered {
  float: none;
  margin: 0 auto;
}

/**
 * Padding System
 * pad-0 - No value
 * pad-1 - Original value
 * pad-2 - Double the value
 * pad-2-1 - Combination of values
 */
.pad-0-0-1 {
  padding-bottom: 30px;
}

.pad-0-0-2 {
  padding-bottom: 60px;
}

.pad-0-1-1 {
  padding: 0 30px 30px;
}

.pad-0-1-2 {
  padding: 0 30px 60px;
}

.pad-0-1 {
  padding: 0 30px;
}

.pad-1 {
  padding: 30px;
}

.pad-1-0-0 {
  padding-top: 30px;
}

.pad-1-0-1-1 {
  padding: 30px 0 30px 30px;
}

.pad-1-1-0 {
  padding: 30px 30px 0;
}

.pad-1-1-2 {
  padding: 30px 30px 60px;
}

.pad-2 {
  padding: 60px;
}

.pad-2-0-0 {
  padding: 60px 0 0;
}

.pad-2-0-1 {
  padding: 60px 0 30px;
}

.pad-2-1 {
  padding: 60px 30px;
}

.pad-2-1-0 {
  padding: 60px 30px 0;
}

.pad-2-1-1 {
  padding: 60px 30px 30px;
}

/**
 * Margins
 * m-0 - No value
 * m-1 - Original value
 * m-2 - Double the value
 * m-2-1 - Combination of values
 */
.m-0 {
  margin: 0;
}

.m-0-0-1 {
  margin-bottom: 30px;
}

.m-1-0-0 {
  margin-top: 30px;
}

.m-top-bar {
  margin-top: 130px;
}

blockquote p:last-of-type {
  margin-bottom: 0px;
}

blockquote > cite {
  margin-top: 15px;
}

/**
 * Responsive settings for the layout
 */
@media (max-width: 768px) {
  /* Column helpers */
  .col-6, .col-4 {
    width: 100%;
  }

  aside.col-4.pad-1 {
    padding: 15px;
  }

  .col-8 {
    padding: 0 15px;
    width: 100%;
  }

  .col-8 .pad-1-0-1-1 {
    padding: 30px 0 0;
  }
}
@media (max-width: 480px) {
  /* Paddings */
  .pad-0-0-1 {
    padding-bottom: 15px;
  }

  .pad-0-0-2 {
    padding-bottom: 30px;
  }

  .pad-0-1-1 {
    padding: 0 15px 15px;
  }

  .pad-0-1-2 {
    padding: 0 15px 30px;
  }

  .pad-0-1 {
    padding: 0 15px;
  }

  .pad-1 {
    padding: 15px;
  }

  .pad-1-0-0 {
    padding-top: 15px;
  }

  .pad-1-0-1-1 {
    padding: 15px 0 15px 15px;
  }

  .col-8 .pad-1-0-1-1 {
    padding: 15px 0 0;
  }

  .pad-1-1-0 {
    padding: 15px 15px 0;
  }

  .pad-1-1-2 {
    padding: 15px 15px 30px;
  }

  .pad-2 {
    padding: 30px;
  }

  .pad-2-0-0 {
    padding: 30px 0 0;
  }

  .pad-2-0-1 {
    padding: 30px 0 15px;
  }

  .pad-2-1 {
    padding: 30px 15px;
  }

  .pad-2-1-0 {
    padding: 30px 15px 0;
  }

  .pad-2-1-1 {
    padding: 30px 15px 15px;
  }

  /* Margins */
  .m-top-bar {
    margin-top: 100px;
  }
}
/********************
 * 1.4 Colors
 */
/**
 * Globals
 */
body {
  color: #151515;
  background: white;
}

/**
 * Grid
 */
.wrapper {
  background: white;
}

/**
 * Content
 */
.meta {
  color: #949494;
}

/**
 * Footer
 */
footer {
  color: #949494;
  background: white;
}

/*---------------------------------------------------------------------------------
02 Components
----------------------------------------------------------------------------------- */
/********************
 * 2.1 Accessibility
 */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.skip-link:focus {
  background-color: #F4F4F4;
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #151515;
  display: block;
  font-size: 1.2rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

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

@media (prefers-reduced-motion) {
  * {
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}
/********************
 * 2.2 Typo
 */
/**
 * Typo Helpers
 */
.t-lightweight {
  font-weight: 300;
}

.t-italic {
  font-style: italic;
}

/**
 * Globals
 */
body,
button,
input,
select,
textarea {
  font-size: 16px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

small {
  font-size: 0.8em;
}

big {
  font-size: 1.4em;
}

b, strong {
  font-weight: bold;
}

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

cite {
  display: block;
  font-size: 0.8em;
}

pre {
  overflow: auto;
  padding: 30px;
  max-width: 100%;
  background: #F4F4F4;
  font-family: "Courier 10 Pitch", Courier, monospace;
}

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

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

mark, ins {
  background: #fff9c0;
  text-decoration: none;
}

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

sup {
  bottom: 1ex;
}

sub {
  top: 0.5ex;
}

/**
 * Headings
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote p,
q,
.widgetTitle {
  clear: both;
  font-family: "Julius Sans One", Helvetica, Arial, sans-serif;
  line-height: 1.4;
  word-wrap: break-word;
}

h1 {
  font-size: 3.8em;
}

h2 {
  font-size: 2.4em;
  line-height: 1.2em;
}

h2.meta {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

h3 {
  font-size: 2em;
}

h4 {
  font-size: 1.6em;
}

h5 {
  font-size: 1.4em;
}

h6 {
  font-size: 1.2em;
}

blockquote p, q {
  font-size: 1.4em;
}

/**
 * Theme-related typo styles
 */
.meta, .more-link {
  font-weight: 300;
  font-size: 0.9em;
}

.hentry-masonry header {
  margin-bottom: 30px;
}

.hentry-masonry header p {
  margin: 15px 0 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.comment-content h1,
.comment-content h2,
.comment-content h3,
.comment-content h4,
.comment-content h5,
.comment-content h6 {
  margin-bottom: 30px;
}

.entry-content header h1,
.entry-content header h2 {
  margin-bottom: 8px;
}

/**
 * Responsive settings for typo
 */
@media (max-width: 768px) {
  /* Headings */
  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 2em;
  }

  h3 {
    font-size: 1.8em;
  }

  h4 {
    font-size: 1.6em;
  }

  h5 {
    font-size: 1.4em;
  }

  h6 {
    font-size: 1.2em;
  }

  blockquote p, q {
    font-size: 1.6em;
  }
}
@media (max-width: 480px) {
  /* Globals */
  pre {
    padding: 15px;
  }

  /* Headings */
  h1 {
    font-size: 2.4em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.6em;
  }

  h4 {
    font-size: 1.4em;
  }

  h5 {
    font-size: 1.2em;
  }

  h6 {
    font-size: 1em;
  }

  blockquote p, q {
    font-size: 1.2em;
  }

  /* Theme-related typo styles */
  .meta {
    font-size: 0.7em;
  }
}
/********************
 * 2.3 Links
 */
a {
  color: #949494;
  text-decoration: none;
  transition: all 0.2s linear;
}

a:hover,
input[type=submit]:hover {
  opacity: 0.8;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.custom-logo-link {
  color: #151515;
}

/********************
 * 2.4 Buttons
 */
/**
 * General attributes
 */
.btn,
.pagination a,
.nav-links a,
input[type=submit],
#infinite-handle span {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 2px;
  background: none;
  text-decoration: none;
  font-weight: 300;
  transition: all 0.2s linear;
}

/**
 * Neutral button-color
 */
a.btn-neutral,
.pagination a,
.nav-links a,
#infinite-handle span {
  border: 1px solid #151515;
  color: #151515;
}

/**
 * Positive button-color
 */
a.btn-positive,
input[type=submit] {
  border: 1px solid #2ecc71;
  color: #2ecc71;
}

/**
 * Negative button-color
 */
a.btn-negative {
  border: 1px solid #ff4136;
  color: #ff4136;
}

/**
 * Extra button-color
 */
a.btn-extra {
  border: 1px solid #0d8eff;
  color: #0d8eff;
}

/**
 * Behaviour for button-hover state
 */
.btn:hover,
.pagination a:hover,
.nav-links a:hover,
input[type=submit]:hover,
#infinite-handle span:hover {
  opacity: 0.4;
  cursor: pointer;
}

/*---------------------------------------------------------------------------------
03 Partials
----------------------------------------------------------------------------------- */
/********************
 * 3.1 Header
 */
/**
 * Layout of the top-bar wrapper
 */
.top-bar {
  position: fixed;
  top: 0;
  z-index: 99;
  padding: 30px;
  transition: all 0.2s;
  /* Hardware accelerate transitions */
  -webkit-transform: translateZ(0);
}

.admin-bar .top-bar {
  top: 32px;
}

.tb-large {
  padding: 30px;
  transition: all 0.2s;
  /* Hardware accelerate transitions */
  -webkit-transform: translateZ(0);
}

.full .top-bar,
.full .tb-large {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tb-small {
  padding: 0px 30px 12px;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.2s;
  /* Hardware accelerate transitions */
  -webkit-transform: translateZ(0);
}

/**
 * Layout of branding in top-bar
 */
.tb-logo {
  float: left;
  width: 80%;
}

.tb-logo h1 {
  float: left;
  clear: right;
  margin-top: 11px;
  text-align: left;
  font-size: 1.6em;
}

.tb-logo img {
  float: left;
  margin: 10px 8px 0 0;
  max-height: 36px;
  width: auto;
  text-align: left;
}

/**
 * Container holding the toggle menu
 */
.navigation-toggle-wrapper {
  position: relative;
  float: right;
  width: 20%;
  text-align: right;
}

/**
 * Responsive settings for the top-bar
 */
@media (max-width: 480px) {
  /* Layout of the top-bar wrapper */
  .top-bar, .tb-large {
    padding: 15px;
  }

  .tb-small {
    padding: 0 15px 12px;
  }
}
/********************
 * 3.2 Navigation Toggle
 */
/* Hamburger Menu Icon */
.primary-nav-trigger {
  display: block;
  position: absolute;
  right: 0;
  top: 4px;
  height: 50px;
  width: 50px;
  z-index: 99999;
  background: transparent;
  border: none;
  cursor: pointer;
}
.primary-nav-trigger .menu-icon {
  /* this span is the central line of the menu icon */
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 25px;
  height: 2px;
  border-radius: 2px;
  background-color: #151515;
  transition: background-color 0.3s;
  /* these are the upper and lower lines in the menu icon */
}
.primary-nav-trigger .menu-icon::before, .primary-nav-trigger .menu-icon:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #151515;
  right: 0;
  transition: transform 0.3s, top 0.3s, background-color 0s;
}
.primary-nav-trigger .menu-icon::before {
  top: -7px;
}
.primary-nav-trigger .menu-icon::after {
  top: 7px;
}
.primary-nav-trigger .menu-icon.is-clicked {
  background-color: transparent;
}
.primary-nav-trigger .menu-icon.is-clicked::before, .primary-nav-trigger .menu-icon.is-clicked::after {
  background-color: #151515;
}
.primary-nav-trigger .menu-icon.is-clicked::before {
  top: 0;
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.primary-nav-trigger .menu-icon.is-clicked::after {
  top: 0;
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

/* Menu Appearance*/
#menu {
  position: absolute;
  z-index: 99999;
  display: none;
  right: 0;
  top: 60px;
}
@media screen and (min-width: 40em) {
  #menu {
    right: -20px;
  }
}
@media screen and (min-width: 53.75em) {
  #menu {
    right: -20px;
  }
}

#menu ul, #menu li, #menu li a {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu > ul {
  padding: 15px 30px;
  min-width: 200px;
  background: #151515;
  text-align: right;
  border-radius: 4px;
  overflow-y: scroll;
  max-height: 80vh;
}

#menu li a {
  padding: 10px 0;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s;
}

#menu > ul > li.menu-item-has-children > a {
  border: none;
}

#menu > ul > li.menu-item-has-children > a:after,
#menu > ul ul > li.menu-item-has-children > a:after {
  display: inline-block;
  width: 10px;
  height: 16px;
  content: "";
  background-image: url(./assets/img/angle-down.svg);
  vertical-align: middle;
  margin-left: 4px;
  margin-bottom: 2px;
}

#menu li a:hover {
  opacity: 0.6;
}

#menu ul ul {
  padding-bottom: 10px;
}

#menu ul ul ul {
  padding-bottom: 10px;
  font-size: 0.8em;
}

#menu ul ul li a,
#menu ul ul ul li a {
  padding: 2px 0;
  font-size: 0.8em;
}

/* Menu Detail - Triangle */
#menu:after {
  bottom: 100%;
  right: 16px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(21, 21, 21, 0);
  border-bottom-color: #151515;
  border-width: 10px;
  margin-left: -10px;
}
@media screen and (min-width: 40em) {
  #menu:after {
    right: 35px;
  }
}
@media screen and (min-width: 53.75em) {
  #menu:after {
    right: 35px;
  }
}

/********************
 * 3.3 Footer
 */
footer hr {
  margin: 0 auto 15px;
  width: 96px;
}

.footer-links {
  padding: 60px 0 0;
  text-align: center;
  font-weight: 300;
  color: black;
}
.footer-links aside {
  margin-bottom: 60px;
}
.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links .sub-menu li {
  font-size: 0.8em;
  margin-bottom: 0;
}
.footer-links .widget-title {
  color: #151515;
  font-size: 1.2em;
  margin-bottom: 1em;
}

/**
 * Social Icons
 */
.social a {
  display: inline-block;
  padding: 15px 10px;
  line-height: 1;
  color: #949494;
}

.social svg {
  width: auto;
  height: 24px;
}

.social svg path {
  fill: #949494;
}

footer .meta {
  font-size: 0.9em;
}

/********************
 * 3.4 WP Formatting
 */
/**
 * Sticky
 */
.sticky {
  /* Needed to pass theme check */
}

.sticky-tag {
  text-align: center;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-radius: 2px;
  padding: 0.4em 0.8em;
  display: inline-block;
  margin-bottom: 15px;
}

/**
 * Page links
 */
.page-links {
  text-align: center;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-top: 1px solid #EEEEEE;
  border-bottom: 1px solid #EEEEEE;
  padding: 15px 0;
}

/**
 * Search
 */
.error404 .entry-content #searchform input#s {
  width: 100%;
}

/**
 * Post password form
 */
.post-password-form > *:not(last-child) {
  margin-bottom: 30px;
}

.post-password-form input[type=password] {
  width: 100%;
  margin: 10px 0 15px;
}

/**
 * Verticality
 */
.entry-content:after {
  clear: both;
  display: table;
  content: "";
}

.entry-content > *:not(hr) {
  margin-bottom: 30px;
}

/**
 * Alignments
 */
.aligncenter {
  text-align: center;
}

.alignleft {
  float: left;
  text-align: left;
  margin: 0.5em 1em 0.5em 0;
}

.alignright {
  float: right;
  text-align: right;
  margin: 0.5em 0 0.5em 1em;
}

@media (max-width: 480px) {
  .alignleft,
.alignright {
    float: none;
    margin: 0;
  }
}
.alignwide,
.alignfull {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (min-width: 1200px) {
  .alignwide {
    width: 1140px;
    margin-left: -570px;
    margin-right: -570px;
  }
}
/**
 * Captions
 */
.wp-caption,
.wp-caption-text {
  /* Needed to pass theme check */
}

figcaption,
.wp-block-image figcaption,
.featured-caption {
  font-size: 0.6em;
  color: #949494;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 4px;
  margin-bottom: 0;
  display: block;
}

.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
  font-size: 0.6em;
}

/**
 * Block Editor: Separator
 */
hr.wp-block-separator {
  width: 96px;
  margin-left: auto;
  margin-right: auto;
}

hr.wp-block-separator.is-style-wide,
hr.wp-block-separator.is-style-dots {
  width: 100%;
}

/**
 * Block Editor: Drop Cap
 */
.has-drop-cap:not(:focus):first-letter {
  font-size: 8.4rem;
}

/**
 * Block Editor: Blockquotes
 */
.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
  margin-bottom: 30px;
  padding: 0;
}

.wp-block-quote.is-large p,
.wp-block-quote.is-style-large p {
  font-size: 1.6em;
  font-style: inherit;
  line-height: 1.4;
}

.wp-block-quote.is-large cite,
.wp-block-quote.is-large footer,
.wp-block-quote.is-style-large cite,
.wp-block-quote.is-style-large footer {
  font-size: 0.8em;
  text-align: inherit;
}

/**
 * Block Editor: Pull Quotes
 */
.wp-block-pullquote {
  padding: 0;
  margin-bottom: 30px;
}

.wp-block-pullquote.is-style-solid-color {
  border-radius: 2px;
}

.wp-block-pullquote.is-style-solid-color blockquote {
  max-width: 100%;
  margin-bottom: 0;
}

.wp-block-pullquote blockquote p,
.wp-block-pullquote.is-style-solid-color blockquote p {
  font-size: 1.25em;
}

.wp-block-pullquote.alignleft {
  float: left;
  padding: 30px 0 0;
  margin-top: 0;
  margin-right: 30px;
}

.wp-block-pullquote.alignright {
  float: right;
  padding: 30px 0 0;
  margin-top: 0;
  margin-left: 30px;
}

.wp-block-pullquote.is-style-solid-color {
  padding: 30px;
}

@media (min-width: 768px) {
  .wp-block-pullquote.alignleft {
    margin-left: -90px;
  }

  .wp-block-pullquote.alignright {
    margin-right: -90px;
  }
}
/*
 * Block Editor: Code
 */
.wp-block-code code {
  white-space: unset;
}

/*
 * Block Editor: Cover Block
 */
.wp-block-cover,
.wp-block-cover-image {
  padding: 60px 30px;
}

/*
 * Block Editor: Latest Posts
 */
.wp-block-latest-posts:not(.alignwide):not(.alignfull) {
  margin-left: 0;
}

.wp-block-latest-posts__list > li {
  margin-bottom: 30px;
}

.wp-block-latest-posts li > a {
  font-family: "Julius Sans One", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 2em;
  line-height: 1.4;
  color: #151515;
}

.wp-block-latest-posts__post-full-content,
.wp-block-latest-posts__post-excerpt {
  margin-top: 15px;
}

@media (max-width: 1200px) {
  .wp-block-latest-posts.alignwide {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 599px) {
  .wp-block-latest-posts.alignwide li {
    margin-right: 0;
  }
}
@media (max-width: 480px) {
  .wp-block-latest-posts.alignwide {
    padding-left: 15px;
    padding-right: 15px;
  }
}
/**
 * Classic Gallery
 */
.gallery {
  clear: both;
  overflow: hidden;
  margin: 0 auto 30px;
}

.gallery .gallery-item {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 0 1%;
  list-style: none;
  text-align: center;
}

.gallery .gallery-item .gallery-icon > a {
  display: block;
  line-height: 0;
}

.gallery .gallery-item img {
  width: 98%;
  height: auto;
}

.gallery dt.gallery-icon {
  position: relative;
}

.gallery figcaption.gallery-caption {
  position: absolute;
  bottom: -10%;
  left: 0;
  display: block;
  padding: 10px 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  color: #151515;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 300;
  opacity: 0;
  transition: all 0.2s ease-out;
}

.gallery .gallery-item:hover figcaption.gallery-caption {
  bottom: 0;
  opacity: 1;
}

/* Image sizes depending on the number of columns */
.gallery-columns-0 .gallery-item,
.gallery-columns-1 .gallery-item {
  width: 100%;
}

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

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

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

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

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

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

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

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

@media (max-width: 768px) {
  .gallery-columns-0 .gallery-item,
.gallery-columns-1 .gallery-item {
    width: 100%;
  }

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

  .gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
    width: 33.3333%;
  }
}
@media (max-width: 480px) {
  .gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item {
    width: 100%;
  }

  .gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
    width: 50%;
  }
}
/********************
 * 3.5 Comments
 */
/**
 * Comment by post author
 */
.bypostauthor {
  /* Needed to pass theme check */
}

/**
 * Comments
 */
.comments-title {
  padding-top: 30px;
}

#comments p:not(:last-child) {
  margin-bottom: 30px;
}

#comments ol {
  margin: 0;
  list-style: none;
}

#comments li {
  margin-bottom: 30px;
  width: 100%;
  border: 1px solid #EEEEEE;
}

#comments .comment-content ul {
  margin: 0 0 30px;
  list-style: inside;
}
#comments .comment-content ul li {
  border: none;
  margin: 0;
}
#comments .comment-content ul li ul {
  margin: 0 0 15px 15px;
}
#comments .comment-content ul li ul li {
  margin: 0 0 0 15px;
}

#comments .comment-content ol {
  list-style: inside;
  list-style-type: decimal;
  margin: 0 0 30px 0;
}
#comments .comment-content ol li {
  margin: 0;
  border: none;
}
#comments .comment-content ol li ol {
  margin: 0 0 15px 15px;
}
#comments .comment-content ol li ol li {
  margin: 0 0 0 15px;
}

#comments .children li {
  margin-top: 30px;
  border: none;
  background: #fff;
  width: 100%;
}

#comments .children .odd {
  background: #F4F4F4;
}

#comments .avatar {
  display: inline-block;
  margin-right: 2%;
  max-width: 13%;
  border-radius: 40px;
  vertical-align: top;
  -o-border-radius: 40px;
  -ms-border-radius: 40px;
}

.comment-wrap {
  display: inline-block;
  width: 84%;
}

#comments .comment-cite {
  clear: right;
  margin: 0;
}

.comment-respond {
  width: 100%;
  padding-top: 30px;
}

.comment-respond h3 {
  margin-bottom: 30px;
}

.comment-respond h3 small {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.45em;
  display: block;
}

.comment-respond h3 small a {
  color: #949494;
}

#comments input[type=text] {
  width: 50%;
}

#comments textarea {
  width: 100%;
}

/********************
 * 3.6 Widgets
 */
/*
 * General widget styles
 */
.widgetBox {
  float: left;
  margin-bottom: 30px;
  padding: 30px;
  width: 100%;
  background: #F4F4F4;
}

.widgetTitle {
  display: block;
  margin-bottom: 30px;
  width: 100%;
  font-size: 1.6em;
}

.widgetBox ul {
  margin: 0;
  width: 100%;
  list-style: none;
  line-height: 1.6em;
}

.widgetBox ul li {
  margin-bottom: 10px;
}

.widgetBox ul li:before {
  margin-right: 15px;
  content: "—";
  opacity: 0.2;
}

.widgetBox ul ul {
  margin-top: 15px;
  margin-bottom: 30px;
  margin-left: 30px;
}

.widgetBox select {
  width: 100%;
  background: #fff;
  font-size: inherit;
}

/**
 * RSS Widget
 */
a.rsswidget img {
  display: none;
}

/**
 * Calendar
 */
#wp-calendar,
.wp-calendar-nav {
  font-size: 0.8em;
}

.wp-calendar-nav {
  margin-top: 8px;
}

#wp-calendar caption {
  margin-bottom: 8px;
}

#wp-calendar tfoot {
  text-align: left;
}

/**
 * Recent Posts
 */
.widget_recent_entries li span {
  display: block;
  font-size: 0.7em;
}

/**
 * Search
 */
.widget_search input[type=text] {
  padding: 10px;
  width: 100%;
  border: none;
  border-radius: 4px;
  background: #F4F4F4;
  color: #949494;
  font-size: 0.8em;
}

/*---------------------------------------------------------------------------------
04 Plugins
----------------------------------------------------------------------------------- */
/********************
 * 4.1 Imagelightbox
 * Customized styles for ImageLightbox.js by Osvaldas Valutis, www.osvaldas.info
 * Available for use under the MIT License
 */
#imagelightbox {
  position: fixed;
  z-index: 9999;
  -ms-touch-action: none;
  touch-action: none;
  cursor: pointer;
  box-shadow: 0 0 3.125em rgba(0, 0, 0, 0.75);
}

#imagelightbox-loading,
#imagelightbox-overlay {
  animation: fade-in 0.25s linear;
}

#imagelightbox-overlay {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.95);
  position: fixed;
  z-index: 9998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ACTIVITY INDICATION */
#imagelightbox-loading,
#imagelightbox-loading div {
  border-radius: 50%;
}

#imagelightbox-loading {
  width: 2.5em;
  /* 40 */
  height: 2.5em;
  /* 40 */
  background-color: #444;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 10003;
  top: 50%;
  left: 50%;
  padding: 0.625em;
  /* 10 */
  margin: -1.25em 0 0 -1.25em;
  /* 20 */
  /* 40 */
  box-shadow: 0 0 2.5em rgba(0, 0, 0, 0.75);
  /* 40 */
}

#imagelightbox-loading div {
  width: 1.25em;
  /* 20 */
  height: 1.25em;
  /* 20 */
  background-color: #fff;
  animation: imagelightbox-loading 0.5s ease infinite;
}
@keyframes imagelightbox-loading {
  from {
    opacity: 0.5;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.5;
    transform: scale(0.75);
  }
}
#imagelightbox-loading,
#imagelightbox-overlay {
  animation: fade-in 0.25s linear;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media only screen and (max-width: 41.25em) {
  #container {
    width: 100%;
  }
}
/********************
 * 4.2 Jetpack
 */
/**
 * Infinite Scroll Handler
 */
#infinite-handle {
  position: absolute;
  bottom: 0;
  margin: 60px 0;
  width: 100%;
  text-align: center;
}

.new-infinite-posts article:last-child {
  margin-bottom: 150px;
}

/**
 * Hides navigation links and site footer when infinite scroll is active
 */
.infinite-scroll .pagination,
.infinite-scroll.neverending #footer {
  display: none;
}

/**
 * Shows the footer again in case all posts have been loaded
 */
.infinity-end.neverending #footer {
  display: block;
}

/**
 * Feedback Form
 */
.contact-form {
  margin-bottom: 30px;
}

.contact-form input[type=text],
.contact-form input[type=email] {
  margin-bottom: 30px !important;
}

.contact-form textarea {
  width: 100% !important;
}

/**
 * Widget: Gravatar
 */
.widget-grofile {
  text-align: center;
}

.grofile-thumbnail {
  max-width: 50% !important;
  border-radius: 120px;
  -webkit-border-radius: 120px;
}

.widget-grofile h4 {
  font-size: 0.8em;
}

.widget-grofile .grofile-meta h4 {
  font-size: 1.4em;
}