/*
Theme Name: Fluxus
Theme URI: http://themeforest.net/item/fluxus-portfolio-theme-for-photographers/3854385
Author: inTheme
Author URI: https://inthe.me/
Version: 1.9.1
Description: Fluxus is a magazine inspired portfolio theme.
License: GNU General Public License
License URI: licensing/README_License.txt
Text Domain: fluxus

-------------------------------------------------------------------------------
  NOTE:
  This file was generated using SCSS.
  Source code can be found in theme's scss/ folder.

  WARNING:
  Do not edit this file if you want to update Fluxus theme in future.
  Otherwise you will loose all your changes.
  To make any changes please add any new CSS rules to user.css
-------------------------------------------------------------------------------


TABLE OF CONTENTS
-------------------------------------------------------------------------------

1. LAYOUT
	2.1 Main rules
	2.2 Header
	2.3 Footer
2. CONTENT
3. COMPONENTS
4. WIDGETS
5. PAGES
6. SHORTCODES
7. MISCELLANEOUS



1. LAYOUT
-------------------------------------------------------------------------------
  1.1 Main rules

*/
.site {
  position: relative;
  margin: 0 16px;
  z-index: 1;
}

.site--has-sidebar {
  display: flex;
}

.site-content {
  position: relative;
  /**
   * position: relative; is required for .entry-navigation.
   * However it could be avoided quite easily if needed.
   */
  flex-grow: 1;
  height: 100%;
  order: 2;
}
.site--has-sidebar .site-content {
  padding-left: 32px;
}

.fixed-width-container {
  max-width: 576px;
}

.fluid-width-container {
  max-width: 70%;
}

/**
 * Horizontal layout
 */
.horizontal-page .site {
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  opacity: 0;
}
.horizontal-page--loaded .site {
  opacity: 1;
}

.horizontal-content {
  height: 100%;
  white-space: nowrap;
}

.horizontal-content__item {
  display: inline-block;
  max-height: 100%;
  height: 100%;
  margin-right: 32px;
  vertical-align: top;
  white-space: normal;
}

.captioned-media {
  position: relative;
  padding-bottom: 48px;
  box-sizing: border-box;
}

.captioned-media--project-types {
  padding-bottom: 72px;
}

.captioned-media__caption {
  position: absolute;
  color: #111116;
  font: normal 12px/22px "Merriweather", georgia, serif;
  max-height: 32px;
  bottom: -32px;
  padding: 16px 20px 0 0;
  box-sizing: border-box;
  background-color: #fff;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  white-space: normal;
}
.project .captioned-media__caption {
  position: static;
  max-height: 48px;
}
.project.captioned-media--project-types .captioned-media__caption {
  max-height: 72px;
}
.captioned-media__caption:after {
  content: "\ea82";
  position: absolute;
  font-family: "icomoon" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  top: 8px;
  right: 0;
  transform: rotate(-90deg);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: none;
}

.captioned-media__caption--expanded {
  max-height: 60%;
  overflow-y: visible;
}
.captioned-media__caption--expanded:after {
  transform: rotate(90deg);
}

.captioned-media__caption--multiline {
  cursor: pointer;
}
.captioned-media__caption--multiline:after {
  display: block;
}

/* These values will be overwritten by JS. Used to reduce flickering. */
.horizontal-page .site {
  top: 70px;
}

/**
 * Fluid sizes.
 */
.single-format-quote .post--featured-image .entry-header,
.page-template-template-full-width-php .entry-content,
.page-template-template-full-width-php .fluid-width-container,
.page-template-template-full-width-sidebar-php .entry-content,
.page-template-template-full-width-sidebar-php .fluid-width-container {
  max-width: 100%;
}

/**
 * ---------------------------------------------------------
 * 1.2 Header
 * ---------------------------------------------------------
 */
.site-header {
  transition: all 200ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-property: padding, box-shadow;
  z-index: 2;
  width: 100%;
}
.horizontal-page .site-header {
  /* On horizontal page header is fixed */
  position: fixed;
  left: 0;
  top: 0;
}
html.admin-bar-showing.horizontal-page .site-header {
  /* push navigation down if WP admin toolbar is visible */
  top: 32px;
}
@media only screen and (max-width: 768px) {
  html.admin-bar-showing.horizontal-page .site-header {
    top: 46px;
  }
}

.site-header__inner {
  background-color: #fff;
  position: relative;
  border-top: 0 solid #111116;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  z-index: 100;
  display: flex;
  align-items: center;
}

.logo-container {
  width: 272px;
  border-right: 1px solid #ebebeb;
  margin: 0 32px 0 0;
  padding: 16px 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.site-description {
  font-size: 13px;
  color: #bdbdbd;
  font-weight: 400;
  text-align: center;
  margin-top: 3px;
  margin-bottom: -5px;
}

.site-logo {
  display: block;
  line-height: 0;
  text-align: center;
}
.site-logo img {
  display: inline-block;
}

/**
 * Main navigation located in header.
 */
.site-navigation {
  display: flex;
}
.site-navigation ul {
  list-style: none;
  margin: 0;
}
.site-navigation li {
  display: inline-block;
  position: relative;
  margin: 0 8px 0 0;
}
.site-navigation a {
  position: relative;
  display: inline-block;
  padding: 6px 10px;
  font-size: 13px;
  color: #8a8a8a;
  text-transform: uppercase;
  border: 0 none;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.site-navigation a:hover {
  color: #111116;
}
.site-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: -8px;
  display: none;
  background-color: #fff;
  box-shadow: 0 1px 14px 4px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
}
.site-navigation .sub-menu a {
  white-space: nowrap;
  padding: 8px 16px;
  font-size: 12px;
  display: block;
  letter-spacing: 0.04em;
}
.site-navigation .sub-menu li {
  margin: 0 0 4px 0;
  display: block;
}
.site-navigation .sub-menu li:last-child {
  margin-bottom: 0;
}
.site-navigation .has-children > a {
  padding-right: 20px;
}
.site-navigation .has-children > a:after {
  content: "\e924";
  position: absolute;
  font-family: "icomoon";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  line-height: 1em;
  font-size: 16px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
.site-navigation .sub-menu .has-children > a:after {
  content: "\e926";
  right: 4px;
  margin-top: 0px;
}
.site-navigation .sub-menu--right .has-children > a {
  padding-right: 16px;
  padding-left: 20px;
}
.site-navigation .sub-menu--right .has-children > a:after {
  content: "\e925";
  left: 8px;
  right: auto;
}
.site-navigation .sub-menu {
  /* Third level submenu. */
}
.site-navigation .sub-menu .sub-menu {
  left: 100%;
  top: 0;
  display: none;
}
.site-navigation .sub-menu .sub-menu--right {
  right: 100%;
  left: auto;
}
.site-navigation .sub-menu--right {
  right: 0;
  left: auto;
}
.site-navigation .sub-menu--right .sub-menu {
  right: 100%;
  left: auto;
}
.site-navigation .has-children:hover > .sub-menu {
  display: block;
}
.site-navigation .active > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a,
.site-navigation .active .current-fluxus-project-type-ancestor > a,
.site-navigation .current-menu-parent > a {
  /* .active is necessary to avoid conflicts */
  background: #fff200;
  color: #111116;
}
.site-navigation .primary-navigation {
  margin-left: -10px; /* so text that letter aligns with content below */
}

.secondary-navigation li {
  margin: 0 0 0 8px;
}

/**
 * ---------------------------------------------------------
 * 1.3 Footer
 * ---------------------------------------------------------
 */
/* Used for sticky footer. */
#page-wrapper {
  min-height: 100%;
  min-width: 100%;
  margin: 0 auto -50px;
}

.site-footer,
.site-footer-push {
  height: 50px;
  clear: both;
}

.horizontal-page .site-footer-push {
  display: none;
}

.site-footer {
  position: absolute;
  box-sizing: border-box;
  color: #8a8a8a;
  font-size: 12px;
  padding: 13px 15px 0;
  width: 100%;
  /**
    * We need z-index: 1 so that Social Share
    * widget pops on top of main content.
    */
  z-index: 1;
}
.horizontal-page .site-footer {
  /* On horizontal page footer is fixed. */
  position: fixed;
  bottom: 0;
  height: 50px;
  background: #fff;
}
.site-footer a {
  color: #8a8a8a;
  border-bottom: 1px solid #ebebeb;
}
.site-footer a:hover {
  color: #111116;
  border-bottom-color: inherit;
}

/**
	* Normalize sharrre buttons vertical-align.
	*/
.sharrre .pinterest > a,
.sharrre .fb_iframe_widget span,
.sharrre .linkedin > span[style] {
  vertical-align: top !important;
}

.sharrre .twitter iframe {
  position: relative;
  top: -1px;
}

.sharrre .button {
  padding: 0;
}

.social-networks {
  float: left;
}
.social-networks .icon-social {
  margin-right: 10px;
  height: 22px;
  display: inline-block;
  border: 0 none;
}
.social-networks .icon-social:last-child {
  margin-right: 0;
}
.social-networks .icon-social:before {
  font-size: 22px;
}

/**
 * Navigation Tip
 */
.nav-tip {
  float: right;
  line-height: 24px;
  display: none;
}

.nav-tip--visible {
  display: block;
}

.nav-tip .nav-tip__button {
  width: 23px;
  height: 23px;
  padding: 0;
  margin: 0 5px;
  background: none;
  border: 1px solid #eaeaea;
  transition: 0.2s ease-out;
}

.nav-tip .nav-tip__button:before {
  margin-right: 0 !important;
}

.nav-tip .nav-tip__button:hover {
  border-color: #ccc;
  background: none;
}

.global-navigation-on-next .nav-tip .nav-tip__button--next {
  border-color: #aaa;
}

.global-navigation-on-prev .nav-tip .nav-tip__button--prev {
  border-color: #aaa;
}

.nav-tip .nav-tip__button:focus,
.nav-tip .nav-tip__button:active {
  box-shadow: none;
}

.nav-tip .nav-tip__button:before {
  font-size: 14px;
}

.nav-tip .nav-tip__button + .nav-tip__button {
  margin-left: 0;
}

.footer-links {
  line-height: 24px;
  float: right;
}
.footer-links > *,
.footer-links li {
  float: left;
  margin: 0 0 0 32px;
}
.footer-links a {
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 0 1px;
  margin: -8px 0 0 0;
  display: inline-block;
}
.footer-links .credits:before,
.footer-links li:before {
  content: " ";
  display: block;
  position: absolute;
  width: 15px;
  height: 30px;
  background: url(./images/slash.png) no-repeat;
  margin: -3px 0 0 -20px;
}
.footer-links li {
  list-style: none;
}
.footer-links li:first-child {
  margin-left: 0;
}
.footer-links li:first-child:before {
  display: none;
}

.footer-navigation li {
  position: relative;
}
.footer-navigation li:hover {
  color: #111116;
}
.footer-navigation li:hover > a {
  color: inherit;
  border-bottom-color: inherit;
}
.footer-navigation li:hover > .sub-menu {
  display: block;
}
.footer-navigation .has-children > a {
  margin-left: 16px;
}
.footer-navigation .has-children > a:before {
  content: "\e927";
  font-family: "icomoon";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  line-height: 1em;
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -1px;
  transform: translate3d(0, -50%, 0);
}
.footer-navigation .has-children .has-children > a {
  margin-left: 0;
}
.footer-navigation .has-children .has-children > a:before {
  content: "\e925";
  left: 4px;
}
.footer-navigation .sub-menu {
  position: absolute;
  top: auto;
  bottom: 100%;
  left: auto;
  right: 0;
  margin: 0;
  padding: 8px 0;
  background-color: #fff;
  box-shadow: 0 1px 14px 4px rgba(0, 0, 0, 0.15);
  display: none;
}
.footer-navigation .sub-menu a {
  margin: 0;
  padding: 10px 22px;
  display: block;
  white-space: nowrap;
  border: 0;
}
.footer-navigation .sub-menu li {
  margin: 0;
  float: none;
  display: block;
}
.footer-navigation .sub-menu li:before {
  display: none;
}
.footer-navigation .sub-menu .sub-menu {
  left: 0;
  top: auto;
  bottom: auto;
  right: auto;
  -webkit-transform: translate(-100%, -105%);
  transform: translate(-100%, -105%);
}

/*-----------------------------------------------------------------------------
	2. CONTENT
-----------------------------------------------------------------------------*/
.entry-title a {
  text-decoration: none;
}
.entry-title a:hover {
  color: #8a8a8a;
}
.project-title__prefix + .entry-title {
  margin-top: 6px;
}
.single .entry-title {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1em;
  text-transform: none;
  text-indent: -2px;
  letter-spacing: normal;
}

.entry-summary {
  font: normal 14px/2em "Merriweather", georgia, serif;
}

.entry-content {
  font: normal 16px/2em "Merriweather", georgia, serif;
}
.entry-content a {
  text-decoration: none;
  border-bottom: 1px solid #ebebeb;
}
.entry-content a:hover {
  border-color: currentColor;
}
.entry-content a:focus {
  border-color: #8a8a8a;
  color: #8a8a8a;
}
.entry-content dl {
  margin-top: 0;
}
.entry-content li + li {
  margin-top: 10px;
}
.entry-content ul ul,
.entry-content ul ol,
.entry-content ol ol,
.entry-content ol ul {
  margin: 8px 0 16px 16px;
}
.entry-content li ul,
.entry-content li ol {
  padding-left: 0;
  list-style-type: circle;
}
.entry-content p {
  line-height: 2em;
  /**
   * ^ line-height has to be here to allow inline font-size
   * setting via WP Blocks. Otherwise it results in incorrect line-height
   * inherited from smaller parent
   */
  /**
   * ^ Floated elements can be inside paragraphs so let's clear them.
   */
}
.entry-content p:after {
  content: " ";
  display: table;
  clear: both;
}
.entry-content h1 {
  font-size: 27px;
}
.entry-content h2 {
  font-size: 24px;
}
.entry-content h3 {
  font-size: 21px;
}
.entry-content h4 {
  font-size: 16px;
}
.entry-content h5 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.entry-content h6 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.entry-content cite {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 13px;
  font-style: normal;
  color: #bdbdbd;
  letter-spacing: 0.04em;
}
.entry-content cite a {
  color: #bdbdbd;
  border-color: currentColor;
}
.entry-content cite a:hover {
  color: #111116;
}
.entry-content code {
  font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  background-color: #f3f4f5;
  padding: 2px 4px;
  border-radius: 2px;
  color: #111116;
  font-size: inherit;
}

.entry-content table,
.wp-block-table {
  margin-bottom: 16px;
  border-collapse: collapse;
  font-size: 13px;
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
}
.entry-content table thead,
.wp-block-table thead {
  text-transform: uppercase;
}
.entry-content table thead td,
.entry-content table thead th,
.wp-block-table thead td,
.wp-block-table thead th {
  font-weight: 700;
}
.entry-content table td,
.entry-content table th,
.wp-block-table td,
.wp-block-table th {
  border: 1px solid #ebebeb;
  padding: 6px 15px;
}
.entry-content table tfoot,
.wp-block-table tfoot {
  color: #8a8a8a;
}

.wp-block-table table {
  margin-bottom: 0;
}

.text-light {
  color: #fff;
}

.standfirst {
  margin-bottom: 32px;
}
.standfirst p {
  margin-bottom: 32px;
}
.standfirst p:last-child {
  margin-bottom: 0;
}

.entry-meta {
  font-size: 13px;
  line-height: 1.5;
  color: #8a8a8a;
  font-weight: normal;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.entry-meta a:hover {
  color: #111116;
}
.entry-title + .entry-meta {
  margin-top: 8px;
}

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

.post-edit-link {
  font: normal 13px/1.6em "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  display: inline-block;
}

.single .entry-content .post-edit-link,
.page .entry-content .post-edit-link {
  margin-bottom: 32px;
}

.wrap-size-full {
  overflow: hidden;
}

.wrap-size-full a {
  float: left;
  width: 75%;
  margin: 0 0 24px;
}

.wrap-size-full figcaption {
  border-top: 1px solid #eaeaea;
  float: left;
  font: 300 16px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  color: #aaa;
  width: 22%;
  margin: 0 0 0 2%;
  position: relative;
  padding: 7px 0 0 0;
}

/**
 * Media.
 */
.entry-content img,
.comment-content img,
.widget img {
  max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

.entry-content img,
img[class*=align],
img[class*=wp-image-] {
  height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

.entry-content img,
img.size-full {
  max-width: 100%;
}

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

.media-caption {
  color: #8a8a8a;
  font: 300 14px/1.45em "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  padding-top: 7px;
}
.media-caption a {
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  color: currentColor;
  text-decoration: none;
  border-bottom: 1px solid;
}
.media-caption a:hover {
  color: #111116;
  border-bottom-color: #111116;
}

/**
 * Sidebar.
 */
.sidebar {
  min-width: 272px;
  max-width: 272px;
  padding-right: 32px;
  border-right: 1px solid #ebebeb;
  word-wrap: break-word;
  text-align: right;
  box-sizing: border-box;
  order: 1;
}
.sidebar .title {
  padding: 0 0 16px;
}

.project-title__prefix {
  font: normal 15px/1em "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  letter-spacing: 0.01em;
}

.project-title__prefix--small {
  font-size: 12px;
}

.sidebar .viewport {
  height: 100%;
  overflow: hidden;
}

.sidebar .wysiwyg {
  text-align: right;
  float: right;
  color: #8a8a8a;
  font-size: 12px;
}

.sidebar .widget-password .post-password {
  margin-bottom: 16px;
}

/**
 * Portfolio project navigation.
 */
.horizontal-navigation {
  box-shadow: inset 0 0 0 1px #eaeaea;
  min-width: 558px;
  max-width: 558px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.horizontal-navigation--portfolio {
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 24px; /* -8px (bottom margin of last element) */
  box-sizing: border-box;
}

.horizontal-navigation--blog {
  padding-left: 64px;
  padding-right: 64px;
  min-width: auto;
  max-height: none;
  text-align: center;
}

.horizontal-navigation--portfolio {
  text-align: center;
}

.horizontal-navigation--vertical-blog {
  box-shadow: none;
  text-align: left;
  padding: 0;
}
.horizontal-navigation--vertical-blog .current-page-number {
  display: none;
}
.horizontal-navigation--vertical-blog .flex-position {
  display: block;
}

/**
 * Appreciate & Share buttons.
 */
#sharrre-project,
.btn-appreciate {
  position: relative;
  color: #333;
  font-size: 13px;
  line-height: 16px;
  padding: 0 0 3px;
  border-bottom: 1px solid #eaeaea;
}

.btn-appreciate {
  margin-left: 26px;
}

#sharrre-project .box {
  cursor: pointer;
}

#sharrre-project:before,
.btn-appreciate:before {
  position: absolute;
  top: -3px;
  margin: 0 0 0 -33px;
  font-size: 26px;
  transition: 0.3s ease;
}

#sharrre-project:before {
  margin-left: -54px;
  font-size: 28px;
  top: -5px;
}

.btn-appreciate:hover,
#sharrre-project:hover,
#sharrre-project:hover .box .share {
  color: #777;
  border-bottom-color: transparent;
}

.btn-appreciate:hover:before {
  color: #ec0039;
}

#sharrre-project:hover:before {
  color: #0059ec;
}

#sharrre-project .count-total,
.btn-appreciate .numbers {
  padding-left: 5px;
  color: #ec0039;
}

#sharrre-project .count-total {
  color: #0059ec;
}

.btn-appreciate.has-appreciated,
.btn-appreciate.has-appreciated:hover {
  color: #ec0039;
  font-weight: bold;
  border-bottom: 0 none;
  cursor: default;
}

.btn-appreciate.has-appreciated:before {
  color: #ec0039;
}

/**
 * Other Projects
 */
.other-projects {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.other-projects__item-col {
  min-width: 25%;
  max-width: 25%;
  padding: 0 8px;
  box-sizing: border-box;
}

.other-projects__item {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  background-color: #eaeaea;
  margin-bottom: 16px;
}

.other-projects__item-overlay {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  transition: opacity 0.3s ease-out;
}

.other-projects__item--active .other-projects__item-overlay {
  opacity: 1;
  background: rgba(255, 242, 0, 0.7);
  color: #111116;
}

.other-projects__item:hover .other-projects__item-overlay {
  opacity: 1;
}

.other-projects__item-row {
  min-width: 100%;
  max-width: none;
  padding: 0 8px;
  box-sizing: border-box;
  flex-wrap: wrap;
  display: flex;
}

/**
 * Generic WP generated paging.
 */
.paging {
  white-space: nowrap;
}

.page-numbers,
.post-page-numbers {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  line-height: 36px;
  min-width: 40px;
  border: 1px solid #ebebeb;
  color: #111116;
  font-weight: 300;
  padding: 0 14px;
  white-space: nowrap;
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
}
.page-numbers:hover,
.post-page-numbers:hover {
  color: #111116;
  border-color: #ccc;
}
.page-numbers .icon-chevron-thin-right,
.page-numbers .icon-chevron-thin-left,
.post-page-numbers .icon-chevron-thin-right,
.post-page-numbers .icon-chevron-thin-left {
  position: relative;
  top: 1px;
  font-size: 11px;
}
.page-numbers.next:before, .page-numbers.prev:before,
.post-page-numbers.next:before,
.post-page-numbers.prev:before {
  content: "\ea82";
  position: absolute;
  left: 50%;
  font-family: "icomoon";
  transform: translate(-50%, 0);
}
.page-numbers.prev:before,
.post-page-numbers.prev:before {
  content: "\ea83";
}
.page-numbers + .page-numbers,
.page-numbers + .post-page-numbers,
.post-page-numbers + .page-numbers,
.post-page-numbers + .post-page-numbers {
  margin-left: 8px;
}

.page-numbers--label {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.paging .current,
.post-page-numbers.current {
  background: #fff200;
  color: #111116;
  border-color: #fff200;
  cursor: default;
}

.paging .next,
.paging .prev {
  white-space: nowrap;
}

/**-----------------------------------------------------------------------------
 * 3. COMPONENTS
 * -----------------------------------------------------------------------------
 **/
/**
 * Aligns children content in the vertical middle of
 * parent container.
 */
.vertical-middle {
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: column;
}

.vertical-middle--centered {
  align-items: center;
  text-align: center;
}

.vertical-middle--contained {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.slash {
  background: url(./images/slash@2x.png) no-repeat;
  background-size: auto 100%;
  height: 30px;
  width: 15px;
  display: inline-block;
}
@media only screen and (max-width: 576px) {
  .slash {
    height: 21px;
  }
}

.slash-text {
  display: flex;
  align-items: center;
}

/**
 * Share widget.
 */
.share-widget .button {
  background: none;
  padding: 0;
  display: block;
  margin-left: 0 !important;
  margin-bottom: 16px;
  cursor: default;
  text-align: left;
}
.share-widget .button:hover {
  border: 0 none;
  background: none !important;
}

.share-widget--footer {
  position: relative;
  border: 1px solid #ebebeb;
  line-height: 21px;
  float: left;
  display: none;
  margin-right: 16px;
}
.share-widget--footer:hover, .share-widget--footer.state-visible {
  border-color: #ccc;
}
.share-widget--footer:hover .share, .share-widget--footer.state-visible .share {
  color: #111116;
}
.share-widget--footer .share {
  position: relative;
  font-weight: normal;
  float: left;
  padding: 0 6px 0 7px;
  display: block;
  cursor: pointer;
}
.share-widget--footer .share:after {
  position: relative;
  font-family: "icomoon";
  content: "\e927";
  top: 1px;
  left: 2px;
}
.share-widget--footer.state-visible .share:after {
  content: "\e924";
}

.share-widget__close {
  position: absolute;
  top: -1px;
  right: 12px;
  display: block;
  color: #8a8a8a;
}
.share-widget__close:hover {
  color: #8a8a8a;
}
.share-widget__close:before {
  position: absolute;
  font-family: "icomoon";
  content: "\ea84";
  display: block;
  line-height: 1em;
  font-size: 14px;
}

.share-widget__buttons {
  display: flex;
  flex-wrap: wrap;
}
.share-widget__buttons .button {
  min-width: 110px;
  max-width: 110px;
  min-height: 21px;
  max-height: 21px;
}
.share-widget__buttons .button.facebook {
  margin-top: 1px;
}
.share-widget__buttons .button.linkedin {
  margin-top: -1px;
}

.share-widget__wrapper {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  padding: 16px 16px 0;
  bottom: 21px;
  left: -1px;
  min-width: 130px;
  display: none;
  z-index: 1000;
}
.state-visible .share-widget__wrapper {
  display: block;
}
.share-widget--project .share-widget__wrapper {
  left: auto;
  top: 200%;
  bottom: auto;
  width: 350px;
  right: -90px;
}

.share-widget__title {
  position: relative;
  display: block;
  padding: 0 20px 24px 0;
  text-transform: uppercase;
  font-weight: bold;
  color: #8a8a8a;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1;
}

/**
 * Share project button.
 */
.share-widget--project {
  margin: 0 0 0 80px;
}
.share-widget--project .box .share {
  line-height: 16px;
  font-weight: normal;
  color: #333;
}
.share-widget--project .arrow {
  position: absolute;
  top: -5px;
  right: 57px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #ccc;
}

/**
 * We ensure aspect ratio using JS by creating an
 * image which fills space. Then we position real
 * media element in that created space.
 *
 * .aspect
 *   .asmect__media
 *   .aspect__placeholder.js-aspect__placeholder
 *
 */
.aspect {
  position: relative;
  max-height: 100%;
}

.aspect__media,
.aspect__media iframe,
.aspect__media video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.aspect__placeholder {
  display: block;
}
.aspect--fill-width .aspect__placeholder {
  max-width: 100%;
  height: auto;
}

/**
 * Library page image fade-in — mirrors the lazysizes portfolio animation.
 */
.library-img-loading,
.library-img-loaded {
  transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s,
              transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
}
.library-img-loading {
  opacity: 0;
  transform: translateY(-10px);
}
.library-img-loaded {
  opacity: 1;
  transform: translateY(0);
}

/**
 * Lazy Load
 *
 * Usage: <img data-src="" class="lazyload" />
 */
.lazyload-component {
  max-height: 100%;
  height: inherit;
}

.lazyload,
.lazyload-component__image {
  display: block;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
  max-height: 100%;
}

.lazyloaded {
  opacity: 1;
}

/* 1 second delay to show loading only if it takes longer than 1 second */
.lazyload-component__loading {
  transition: 0.5s opacity ease 0.8s;
  opacity: 0;
}
.lazyload-component--loaded .lazyload-component__loading {
  transition: 0.5s opacity ease;
  opacity: 0;
}

/* DOM structure has to be like this since lazysizes does not offer onLoadStarted event */
.lazyloading + .lazyload-component__loading {
  opacity: 1;
}

/**
 * Blog post previous/next navigation.
 */
.post-navigation {
  float: left;
  width: auto;
}

@media only screen and (max-width: 576px) {
  .post-navigation__buttons {
    display: flex;
  }
  .post-navigation__buttons .page-numbers {
    flex-grow: 1;
    width: 50%;
    text-align: center;
  }
}
/**
 * Image with caption.
 */
.wp-caption,
.wp-block-image figcaption,
.wp-block-video figcaption,
.wp-block-audio figcaption {
  margin-bottom: 0;
  color: #8a8a8a;
  font: 300 14px/1.45em "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
}
.wp-caption a,
.wp-block-image figcaption a,
.wp-block-video figcaption a,
.wp-block-audio figcaption a {
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  color: currentColor;
  text-decoration: none;
  border-bottom: 1px solid;
}
.wp-caption a:hover,
.wp-block-image figcaption a:hover,
.wp-block-video figcaption a:hover,
.wp-block-audio figcaption a:hover {
  color: #111116;
  border-bottom-color: #111116;
}

.wp-caption {
  max-width: 100%;
  position: relative;
  margin-top: 5px;
}
.wp-caption.alignright .wp-caption-text {
  text-align: right;
}
.wp-caption.aligncenter .wp-caption-text {
  text-align: center;
}
.wp-caption.alignleft .wp-caption-text {
  text-align: left;
}
.wp-caption img {
  display: block;
}

/**
 * Alignment
 */
.alignleft,
.aligncenter,
.alignright {
  display: block;
  margin-bottom: 16px !important;
}

.alignleft {
  float: left;
  margin-right: 16px !important;
}

.alignright {
  float: right;
  margin-left: 16px !important;
}

.aligncenter {
  clear: both;
  margin: 0 auto !important;
}

.fluxus-modal {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -100%, 0);
  max-width: 520px;
  width: 100%;
  background: #fff;
  padding: 20px 32px 32px;
  border-radius: 1px;
  border-top: 3px solid #fff200;
  z-index: 3;
  transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1), top 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.fluxus-modal--open {
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
}

@media screen and (max-width: 660px) {
  .fluxus-modal {
    width: 100%;
    margin: 0;
    left: 0;
    transform: translate3d(0, -100%, 0);
  }
  .fluxus-modal--open {
    transform: translate3d(0, -50%, 0);
  }
}
.fluxus-modal__close {
  font-size: 32px;
  line-height: 1;
  position: absolute;
  top: 16px;
  right: 32px;
  cursor: pointer;
}

.fluxus-modal-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
  transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
  pointer-events: none;
}

.fluxus-modal-overlay--open {
  opacity: 1;
}

.wp-block-gallery {
  margin-bottom: 32px;
}
p + .wp-block-gallery {
  margin-top: 32px;
}
.entry-content .wp-block-gallery {
  margin-left: 0;
}
.entry-content .wp-block-gallery.alignleft {
  margin-right: 32px;
}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
  padding: 8px;
  text-align: left;
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}
.wp-block-gallery .blocks-gallery-grid {
  margin-left: 0;
  margin-bottom: 0;
}
.wp-block-spacer {
  clear: both;
}

.wp-block-quote,
.entry-content blockquote {
  position: relative;
  margin: 0 0 32px;
  padding-top: 8px;
  padding-left: 76px;
  line-height: 1.4;
  min-height: 60px;
  box-sizing: border-box;
  border: 0 none;
}
.wp-block-quote:before,
.entry-content blockquote:before {
  content: "“";
  width: 60px;
  height: 60px;
  background-color: #fff200;
  color: #111116;
  border-radius: 100%;
  display: block;
  font-size: 40px;
  box-sizing: border-box;
  padding: 20px 0 0 16px;
  font-family: "Merriweather", georgia, serif;
  line-height: 1;
  text-align: left; /* because blockquotes can be aligned right :| */
  position: absolute;
  top: 0;
  left: 0;
}
.wp-block-quote p,
.entry-content blockquote p {
  font-family: "Merriweather", georgia, serif;
  margin: 0;
  line-height: 1.4em;
}
.wp-block-quote cite,
.entry-content blockquote cite {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 13px;
  font-style: normal;
  color: #bdbdbd;
  letter-spacing: 0.04em;
  display: block;
}
.wp-block-quote cite a,
.entry-content blockquote cite a {
  color: #bdbdbd;
  border-color: currentColor;
}
.wp-block-quote cite a:hover,
.entry-content blockquote cite a:hover {
  color: #111116;
}
.wp-block-quote.is-style-large,
.entry-content blockquote.is-style-large {
  padding: 8px 0 0 76px;
  margin-bottom: 32px;
}
.wp-block-quote.is-style-large p,
.entry-content blockquote.is-style-large p {
  font-size: 22px;
  line-height: 1.6em;
  font-style: normal;
}
.wp-block-quote.is-style-large cite,
.entry-content blockquote.is-style-large cite {
  text-align: left;
  margin-top: 8px;
}
.featured-media .wp-block-quote,
.featured-media .entry-content blockquote {
  margin-bottom: 0;
}

.wp-block-quote--white,
.wp-block-quote--white cite {
  color: #fff !important;
}

.wp-block-quote--black,
.wp-block-quote--black cite {
  color: #111116 !important;
}

.wp-block-latest-comments__comment-meta {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 13px;
}

.wp-block-latest-comments__comment-author {
  font-weight: bold;
  font-style: normal;
  font-size: 13px;
}
.entry-content .wp-block-latest-comments__comment-author {
  border: 0 none;
}

.wp-block-latest-comments__comment-excerpt {
  max-width: 500px;
}
.wp-block-latest-comments__comment-excerpt p {
  font-size: 14px !important;
  line-height: 1.6em !important;
}

.wp-block-latest-comments__comment + .wp-block-latest-comments__comment {
  margin-top: 16px;
}

.wp-block-search {
  max-width: 400px;
}

.wp-block-search__input {
  padding-left: 8px;
  padding-right: 8px;
}

.has-drop-cap:not(:focus)::first-letter {
  font-size: 64px;
  line-height: 54px;
  margin: 6px 4px 0 0;
}

.has-drop-cap:not(:focus)::after {
  padding-top: 0;
}

.wp-block-file:hover a {
  border-color: currentColor;
}

.wp-block-video figcaption {
  margin-top: 0;
}

.wp-block-embed__wrapper .instagram-media,
.wp-block-embed__wrapper .instagram-media[style],
.wp-block-embed__wrapper .twitter-tweet,
.wp-block-embed__wrapper .twitter-tweet[style] {
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-embed__wrapper .instagram-media,
.wp-block-embed__wrapper .instagram-media[style] {
  max-width: 300px !important;
}

.wp-block-separator,
hr {
  margin-top: 16px;
  background-color: #ebebeb;
  border: 0;
  height: 1px;
  max-width: 100px;
}
.wp-block-separator.is-style-wide,
hr.is-style-wide {
  max-width: none;
}
.fluid-width-container .wp-block-separator.is-style-wide,
.fluid-width-container hr.is-style-wide {
  width: 142.8571428571%;
  width: calc(142.8571428571% + 32px);
  margin-left: -32px;
}
.wp-block-separator.is-style-dots,
hr.is-style-dots {
  height: auto;
  background: none;
}
.wp-block-separator.is-style-dots:before,
hr.is-style-dots:before {
  font-size: 40px;
  letter-spacing: 10px;
  color: #e0e0e0;
  padding: 0;
}

.wp-block-cover {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.wp-block-file .wp-block-file__textlink,
.wp-block-file a {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  border-bottom: 0 none;
  font-weight: bold;
  font-size: 13px;
}
.wp-block-file .wp-block-file__button,
.wp-block-file a.wp-block-file__button {
  border-radius: 0;
  color: #111116;
  margin-left: 16px;
}
.wp-block-file .wp-block-file__button:hover,
.wp-block-file a.wp-block-file__button:hover {
  background-color: #e0e0e0;
  color: #333;
}
.wp-block-file .wp-block-file__button:focus,
.wp-block-file a.wp-block-file__button:focus {
  color: #ccc;
}

.wp-block-code {
  border-style: solid;
  border-radius: 0;
  padding: 16px;
  margin-top: 0;
  margin-bottom: 16px;
}
.wp-block-code code {
  font-family: "Menlo", "Consolas", "monaco", monospace;
  background: none;
  line-height: 1.5;
  display: block;
}

.wp-block-pullquote {
  box-sizing: border-box;
  padding: 20px 0;
  text-align: left;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 32px;
}
.wp-block-pullquote blockquote {
  padding: 0;
  max-width: 500px !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.wp-block-pullquote blockquote::before {
  position: relative;
  left: 50%;
  margin-left: -30px;
  margin-bottom: 16px;
}
.wp-block-pullquote.is-style-solid-color {
  padding-top: 32px;
  padding-bottom: 32px;
  border-top: 0 none;
  border-bottom: 0 none;
}
.wp-block-pullquote p {
  font-size: 22px !important;
  line-height: 1.6em;
}
.wp-block-pullquote cite {
  margin-top: 8px;
}
.wp-block-pullquote.has-cyan-bluish-gray-background-color cite {
  color: #111116;
}

.wp-block-verse {
  border: 0 none;
  line-height: 1.6;
  padding: 0;
  font-family: "Menlo", "Consolas", "monaco", monospace;
}

.wp-block-button__link {
  cursor: pointer;
  font: normal 12px/15px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  padding: 10px 16px 11px;
  display: inline-block;
  border-radius: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 0;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.entry-content .wp-block-button__link {
  border-bottom: 0 none;
}
.wp-block-button__link:not(.has-text-color) {
  color: #111116;
}
.wp-block-button__link:not(.has-text-color):hover {
  color: #333;
}
.wp-block-button__link:not(.has-background) {
  background-color: #eaeaea;
}
.wp-block-button__link:not(.has-background):hover {
  background-color: #e0e0e0;
}
.wp-block-button__link:not(.has-background):focus {
  background-color: #ccc;
}

.wp-block-archives li + li {
  margin-top: 0;
}
.wp-block-archives.wp-block-archives-dropdown {
  margin-left: 0;
}
.wp-block-archives.aligncenter {
  text-align: center;
  list-style: none;
}

.wp-block-calendar table,
#wp-calender {
  border-collapse: collapse;
  font-size: 13px;
  font-weight: normal;
}
.wp-block-calendar table th,
.wp-block-calendar table td,
#wp-calender th,
#wp-calender td {
  border: 1px solid #ebebeb;
  text-align: center;
  color: #8a8a8a;
}
.wp-block-calendar table th,
#wp-calender th {
  color: #666;
  background: #f5f5f5;
  font-weight: normal;
}
.wp-block-calendar table tbody td a,
#wp-calender tbody td a {
  background: #fff200;
  display: block;
}
.wp-block-calendar table tbody td a:hover,
#wp-calender tbody td a:hover {
  background: #111116;
  color: #fff;
}
.wp-block-calendar table caption,
#wp-calender caption {
  text-align: right;
  padding: 0 0 5px 0;
  color: #ccc;
}
.wp-block-calendar table #prev,
#wp-calender #prev {
  border-right: 0 none;
}
.wp-block-calendar table #next,
#wp-calender #next {
  border-left: 0 none;
  border-right: 1px solid #ebebeb;
}
.wp-block-calendar table tfoot .pad,
#wp-calender tfoot .pad {
  border-left: 0 none;
  border-right: 0 none;
}

.wp-block-categories li + li {
  margin-top: 0;
}
.wp-block-categories.wp-block-categories-dropdown {
  margin-left: 0;
}
.wp-block-categories.aligncenter {
  text-align: center;
  list-style: none;
}

.wp-block-latest-posts li + li {
  margin-top: 0;
}
.wp-block-social-links, .entry-content .wp-block-social-links {
  margin-left: 0;
}
.wp-block-social-links li + li {
  margin-top: 0;
}

.wp-block-buttons .wp-block-button {
  margin: 0;
}
.wp-block-buttons .wp-block-button + .wp-block-button {
  margin-left: 16px;
}

.vertical__post + .vertical__post:before, .entry-navigation:before {
  content: " ";
  width: 100%;
  height: 0;
  border-top: 1px solid #ebebeb;
  display: block;
  position: absolute;
}

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .wp-block-gallery .blocks-gallery-caption {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  line-height: 1.4em;
  margin-bottom: 16px;
}
.entry-content p + h1, .entry-content p + h2, .entry-content p + h3, .entry-content p + h4, .entry-content p + h5, .entry-content p + h6, .wp-block-gallery p + .blocks-gallery-caption {
  margin-top: 32px;
}

.standfirst, .standfirst p {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 22px;
  line-height: 1.6em;
  font-weight: 300;
}

.entry-content dl, .entry-content address, .entry-content p, .wp-block-search, .wp-block-audio, .wp-block-file, .wp-block-video, .wp-block-embed, .wp-block-latest-comments, .wp-block-media-text, .wp-block-separator,
hr, .wp-block-button, .wp-block-latest-posts, .wp-block-buttons {
  margin-bottom: 16px;
}

.entry-date,
.comment-time, .wp-block-latest-comments__comment-date, .wp-block-latest-posts .wp-block-latest-posts__post-date {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  text-transform: none;
  color: #bdbdbd;
  font-size: 12px;
  white-space: nowrap;
}

.page-title,
.entry-title,
.sidebar .title {
  font: 700 24px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  word-wrap: break-word;
}

.wp-block-preformatted {
  font-family: "Menlo", "Consolas", "monaco", monospace;
  font-size: 13px;
  line-height: 1.3;
  margin: 0 0 16px;
  padding: 1.6em;
  overflow: auto;
  max-width: 100%;
  color: #111116;
  border: 1px dashed #ebebeb;
  white-space: pre-wrap;
  background-color: #fff;
}

.wp-block-latest-comments {
  list-style: none;
  margin-left: 0 !important;
}

.entry-content ul,
.entry-content ol, .wp-block-archives, .wp-block-categories, .wp-block-latest-posts {
  margin: 0 0 16px 32px;
  padding-left: 0;
}

.wp-block-archives .wp-block-archives__post-count, .wp-block-categories .wp-block-categories__post-count {
  position: relative;
  margin-left: 4px;
  top: -1px;
  vertical-align: middle;
  font-size: 14px;
}

.widget-title, .wp-block-search__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
}

.wp-block-column {
  margin-bottom: 32px;
}
.wp-block-column p:last-child {
  margin-bottom: 0;
}

.wp-block-image figcaption {
  margin-top: 0;
}
.wp-block-image:after {
  content: " ";
  display: table;
  clear: both;
}

/**
 * Default button.
 */
.button,
.sidebar input[type=submit],
.sidebar button,
#searchsubmit,
.wp-block-file .wp-block-file__button {
  cursor: pointer;
  font: normal 12px/15px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  padding: 10px 16px 11px;
  display: inline-block;
  border-radius: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 0;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: #111116;
  background-color: #eaeaea;
}
.entry-content .button,
.entry-content .sidebar input[type=submit],
.entry-content .sidebar button,
.entry-content #searchsubmit,
.entry-content .wp-block-file .wp-block-file__button {
  border-bottom: 0 none;
}
.button:hover,
.sidebar input[type=submit]:hover,
.sidebar button:hover,
#searchsubmit:hover,
.wp-block-file .wp-block-file__button:hover {
  color: #333;
}
.button:hover,
.sidebar input[type=submit]:hover,
.sidebar button:hover,
#searchsubmit:hover,
.wp-block-file .wp-block-file__button:hover {
  background-color: #e0e0e0;
}
.button:focus,
.sidebar input[type=submit]:focus,
.sidebar button:focus,
#searchsubmit:focus,
.wp-block-file .wp-block-file__button:focus {
  background-color: #ccc;
}

.sidebar input[type=submit],
.sidebar button,
#searchsubmit {
  margin-left: 16px;
}

.entry-content .button {
  margin-right: 10px;
}
.button + .button {
  margin-left: 10px;
}
.button[class^=icon-]:before, .button[class*=" icon-"]:before {
  margin-right: 5px;
}

.button-big {
  padding: 15px 24px 16px;
  font-weight: 700;
}
.button-big:before {
  margin: 0 5px 0 -4px;
}

.button-black {
  background: #111116;
  color: #fff;
}
.button-black:hover {
  background: #222226;
  color: #fff;
}

.button--accent,
.button-accent,
.button-yellow {
  background-color: #fff200;
  color: #111116;
}
.button--accent:hover,
.button-accent:hover,
.button-yellow:hover {
  background: #ffd300;
  color: #111116;
}

.button-blue {
  background: #619ec2;
  color: #fff;
}
.button-blue:hover {
  background: #5386a5;
  color: #fff;
}

.button-green {
  background: #35d59b;
  color: #fff;
}
.button-green:hover {
  background: #2fbe79;
  color: #fff;
}

.button-red {
  background: #d1562b;
  color: #fff;
}
.button-red:hover {
  background: #bf4115;
  color: #fff;
}

.button-blended {
  background-color: transparent;
}
.button-blended:hover {
  background-color: transparent;
  opacity: 0.8;
}

.decoration {
  width: 15px;
  height: 2px;
  background-color: #111116;
  background-color: currentColor;
  vertical-align: middle;
}
.sidebar .decoration {
  position: absolute;
  right: 0;
}

.decoration-block {
  position: relative;
  display: block;
  height: 32px;
}
.decoration-block:after {
  width: 15px;
  height: 2px;
  background-color: #111116;
  background-color: currentColor;
  vertical-align: middle;
  transform: translate3d(-50%, -50%, 0);
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: " ";
}

.project-title__decoration {
  height: 32px;
}
.project-title__decoration .decoration {
  transform: translate3d(-50%, -50%, 0);
}

span.decoration {
  display: inline-block;
}

.decoration--spaced {
  margin-bottom: 5px;
}

/**
 * Loading indicator.
 */
.fluxus-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  transition: 0.2s opacity ease 2s;
}

.fluxus-loading + .swiper-lazy-loading,
.fluxus-loading--visible {
  opacity: 1;
}

.fluxus-loading__indicator {
  width: 20px;
  height: 20px;
  background: #fff200;
  border-radius: 50%;
  -webkit-animation: blinker 0.3s infinite linear;
  animation: blinker 0.3s infinite linear;
}

@keyframes blinker {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/**
 * WP Gallery.
 */
.gallery {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
  margin-right: -16px;
}
@media only screen and (max-width: 768px) {
  .gallery {
    margin-left: -8px;
    margin-right: -8px;
  }
}

.gallery-item {
  position: relative;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 32px;
}
@media only screen and (max-width: 768px) {
  .gallery-item {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
  }
}
@media only screen and (max-width: 576px) {
  .gallery-item {
    width: 50% !important;
  }
}
.gallery-item a {
  display: block;
  border: 0 none !important;
}
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}
.gallery-columns-1 .gallery-item {
  width: 100%;
}
.gallery-columns-2 .gallery-item {
  width: 50%;
}
.gallery-columns-3 .gallery-item {
  width: 33.3333333333%;
}
.gallery-columns-4 .gallery-item {
  width: 25%;
}
.gallery-columns-5 .gallery-item {
  width: 20%;
}
.gallery-columns-6 .gallery-item {
  width: 16.6666666667%;
}
.gallery-columns-7 .gallery-item {
  width: 14.2857142857%;
}
.gallery-columns-8 .gallery-item {
  width: 12.5%;
}
.gallery-columns-9 .gallery-item {
  width: 11.1111111111%;
}

.gallery-caption {
  position: relative;
  box-sizing: border-box;
  padding: 4px 0 0 0;
  font: 300 13px/1.3em "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  pointer-events: none;
  margin: 0 !important;
  border: 0 none;
  width: auto;
  text-align: center;
}

/**
 * WP Gallery + Fluxus enhancements.
 */
.fluxus-gallery a {
  border-bottom: 0 none;
}
.fluxus-gallery .gallery-item {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  padding: 0;
}
.fluxus-gallery .gallery-item:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.fluxus-gallery .gallery-item .gallery-icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: top center;
  transform: scale(1);
  transition: 0.6s ease-out;
}
.fluxus-gallery .gallery-item .gallery-icon:hover {
  transform: scale(1.1);
}
.fluxus-gallery .gallery-item .gallery-icon > a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.fluxus-gallery img {
  display: none;
}
.fluxus-gallery.gallery-columns-1 .gallery-item {
  width: 100%;
  margin: 0 0 35px !important;
}
.fluxus-gallery.gallery-columns-2 .gallery-item {
  width: 48.5%;
  margin: 0 3% 3% 0 !important;
}
.fluxus-gallery.gallery-columns-3 .gallery-item {
  margin: 0 3.5% 3.5% 0 !important;
  width: 31%;
}
.fluxus-gallery.gallery-columns-4 .gallery-item {
  margin: 0 2% 2% 0 !important;
  width: 23.5%;
}
.fluxus-gallery.gallery-columns-5 .gallery-item {
  margin: 0 1.5% 1.5% 0 !important;
  width: 18.8%;
}
.fluxus-gallery.gallery-columns-6 .gallery-item {
  margin: 0 1% 1% 0 !important;
  width: 15.82%;
}
.fluxus-gallery.gallery-columns-7 .gallery-item {
  margin: 0 1% 1% 0 !important;
  width: 13.42%;
}
.fluxus-gallery.gallery-columns-8 .gallery-item {
  margin: 0 1% 1% 0 !important;
  width: 11.6%;
}
.fluxus-gallery.gallery-columns-9 .gallery-item {
  margin: 0 1% 1% 0 !important;
  width: 10.2%;
}
.fluxus-gallery.gallery-columns-2 dl:nth-child(2n), .fluxus-gallery.gallery-columns-3 dl:nth-child(3n), .fluxus-gallery.gallery-columns-4 dl:nth-child(4n), .fluxus-gallery.gallery-columns-5 dl:nth-child(5n), .fluxus-gallery.gallery-columns-6 dl:nth-child(6n), .fluxus-gallery.gallery-columns-7 dl:nth-child(7n), .fluxus-gallery.gallery-columns-8 dl:nth-child(8n), .fluxus-gallery.gallery-columns-9 dl:nth-child(9n) {
  margin-right: 0 !important;
}

/**
 * Comments.
 */
.comments-area {
  margin: 32px 0 0 0;
}
.comments-area ul,
.comments-area ol {
  list-style: none;
}
.comments-area .children {
  margin-top: -32px;
  margin-left: 32px;
  padding-left: 16px;
  border-left: 1px solid #ebebeb;
}

.comments-title {
  text-align: left;
  margin: 0 0 20px;
}

.comment-author-info {
  padding: 0 0 0 88px;
}

.comment-author {
  min-height: 76px;
  padding: 0 0 8px 0;
}
.comment-author .avatar {
  border-radius: 100%;
  position: absolute;
  width: 76px;
  height: auto;
}

.bypostauthor-icon {
  position: relative;
  top: -1px;
  font-size: 11px;
  line-height: 1em;
  color: #bdbdbd;
  margin-left: 8px;
  text-transform: uppercase;
  font-weight: bold;
}
.bypostauthor-icon:before {
  content: " ";
  position: relative;
  top: 1px;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #fff200;
  margin-right: 4px;
}

.comment-meta {
  font-size: 13px;
  line-height: 1em;
}

.comment-actions {
  margin: 8px 0 0;
  overflow: hidden;
}

#cancel-comment-reply-link,
.comment-actions a {
  cursor: pointer;
  font: normal 12px/15px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  padding: 10px 16px 11px;
  display: inline-block;
  border-radius: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 0;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: #111116;
  background-color: #eaeaea;
  font-size: 11px;
  padding: 4px 8px 5px;
}
.entry-content #cancel-comment-reply-link,
.entry-content .comment-actions a {
  border-bottom: 0 none;
}
#cancel-comment-reply-link:hover,
.comment-actions a:hover {
  color: #333;
}
#cancel-comment-reply-link:hover,
.comment-actions a:hover {
  background-color: #e0e0e0;
}
#cancel-comment-reply-link:focus,
.comment-actions a:focus {
  background-color: #ccc;
}

.comment-content {
  font-family: "Merriweather", georgia, serif;
  font-size: 14px;
  line-height: 1.6em;
  max-width: 500px;
}
.comment-content p {
  margin-bottom: 16px;
  line-height: 2;
}

.comment {
  margin-bottom: 64px;
}
.comment footer em {
  font-style: normal;
  font-style: normal;
  font-size: 13px;
  color: #8a8a8a;
  border: 1px solid #ebebeb;
  padding: 5px 10px;
}

.form-allowed-tags {
  font-size: 12px;
  color: #666;
  padding: 10px 10px 10px 0;
}
.form-allowed-tags code {
  font-size: 11px;
}

.comment-reply-title {
  font-size: 13px;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-weight: bold;
}
.comment-reply-title small {
  float: right;
  font-size: 1em;
}

.logged-in-as {
  font: normal 16px/25px "Merriweather", georgia, serif;
  margin: 0 0 10px;
  background: #fbf3d8;
  border: 1px solid #ede3c8;
  padding: 8px 16px;
}
.logged-in-as a {
  border-bottom: 1px solid #333;
}
.logged-in-as a:hover {
  border-bottom-color: #ccc;
}

.comment-respond {
  padding: 20px;
  border-top: 2px solid #111116;
  background: #f9f9f9;
}

.comment-form {
  color: #757575;
}
.comment-form label {
  font-size: 13px;
}
.comment-form .required {
  font-size: 16px;
  color: #f00;
  font-weight: bold;
  line-height: 1;
}

.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-cookies-consent {
  display: flex;
  margin-bottom: 16px;
  align-items: center;
}
.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-cookies-consent label {
  width: 100%;
  max-width: 150px;
}

.comment-form-comment {
  margin-bottom: 16px;
}
.comment-form-comment label {
  margin-bottom: 8px;
  margin-top: 8px;
  display: block;
}

.comment-form-cookies-consent label {
  max-width: none;
}
.comment-form-cookies-consent input {
  margin-right: 8px;
}

.comment-notes {
  font-size: 13px;
}

.comment-navigation {
  margin: 32px 0;
}

/**
 * JetPack comment plugin styling fixes.
 */
.comment-subscription-form {
  margin-top: 10px;
}
.comment-subscription-form input {
  margin: 3px 0 0 0;
}
.comment-subscription-form:last-child {
  margin-bottom: 0;
}

/*-----------------------------------------------------------------------------
	4. WIDGETS
-----------------------------------------------------------------------------*/
.widget {
  margin: 0 0 24px;
  position: relative;
  overflow: hidden;
}
.widget:last-child {
  margin-bottom: 0;
}
.widget a {
  color: #8a8a8a;
  font-size: 13px;
  border-bottom: 1px solid #ebebeb;
  padding: 0 0 2px;
}
.widget a:hover {
  color: #111116;
  border-bottom-color: #111116;
}
.widget ul {
  list-style: none;
}
.widget ul ul {
  margin: 4px 16px 4px 0;
}
.widget li {
  margin: 0 0 4px;
}
.widget li:last-child {
  margin-bottom: 0;
}
.widget .current_page_item > a,
.widget li a.active,
.widget .current-cat a {
  color: #111116;
  padding-bottom: 2px;
  border-bottom: 1px solid #111116;
}
.widget li a.active .hash {
  color: #111116;
}

.widget-title a {
  color: inherit;
}
.sidebar .widget-title {
  padding: 6px 0;
}

/**
 * Search form
 */
.widget_search {
  margin-bottom: 32px;
}
.widget_search .field {
  margin-bottom: 8px;
}

#searchform input {
  vertical-align: top;
}

.textwidget {
  font: normal 13px/24px "Merriweather", georgia, serif;
  color: #111116;
}

.textwidget a {
  padding-bottom: 0;
}

.textwidget p {
  margin: 0 0 10px;
}

.textwidget p:last-child {
  margin-bottom: 0;
}

.textwidget img {
  width: 100%;
  height: auto;
}

/*
		Allows having link list that looks
		exactly as other lists, eg. in Categories widget
	*/
.textwidget ul.link-list li {
  font: normal 13px/18px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
}

/*
	 * Offer .list class that allows
	 * to achieve same style as other lists in sidebar.
	 */
.textwidget .list {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
}

.widget-content {
  margin: 3px 0 0 0;
  font-size: 13px;
  color: #8a8a8a;
  padding-bottom: 2px; /* gives space for <a /> underline */
}

/**
 * Standard WP widgets.
 */
.widget .count {
  color: #ccc;
  min-width: 23px;
  padding: 0 0 0 5px;
  display: inline-block;
  font-size: 13px;
}

.widget .recentcomments {
  color: #aaa;
  font-size: 13px;
  margin: 0 0 10px;
}

.widget .recentcomments a:before {
  content: " ";
  display: block;
}

.widget_rss .rsswidget {
  display: block;
  color: #222;
  text-transform: uppercase;
  margin: 0;
}

.widget_rss .rss-date {
  color: #ccc;
}

.widget_rss .rsswidget img {
  display: none;
}

.widget_rss .rssSummary {
  margin: 5px 0 0;
  color: #8a8a8a;
}

.widget_rss cite {
  display: inline-block;
  color: #ccc;
  font-style: normal;
}

.widget_rss cite:before {
  content: "—";
  position: absolute;
  margin: 0 0 0 -18px;
  color: #ccc;
}

.widget_tag_cloud .tagcloud {
  padding: 0 0 0 5px;
}

.widget_tag_cloud .tagcloud a {
  line-height: 1.2em;
}

#wp-calendar {
  border-collapse: collapse;
  font-size: 13px;
  font-weight: normal;
}

.widget_recent_entries .post-date {
  font-size: 12px;
  color: #ccc;
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
}

/**
 * Theme Custom Widgets.
 */
.fluxus-posted-on time {
  font-size: 13px;
  color: #777;
  font-weight: normal;
}

/*-----------------------------------------------------------------------------
	5. PAGES
-----------------------------------------------------------------------------*/
/**
 * Full Width
 */
.page-template-template-full-width-php .site {
  margin: 0 auto;
}
.page-template-template-full-width-php .entry-header {
  text-align: center;
  margin: 32px 0;
}
.page-template-template-full-width-php .page-title {
  font-size: 30px;
}

/**
 * Full page slider.
 */
.page-template-template-full-page-slider-php .site {
  overflow: hidden;
}

.slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.slider .slide {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  margin: 0 30px 0 0;
  position: absolute;
  opacity: 0;
  z-index: 10;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: translate3d(0, 0, 0);
  -webkit-perspective: 1000;
}

.slider .image-top-center {
  background-position: top center;
}

.slider .image-center-center {
  background-position: center center;
}

.slider .image-bottom-center {
  background-position: bottom center;
}

.slider .image-fit {
  background-size: auto 100%;
  background-position: center;
}

.slider .image-contain {
  background-size: contain;
  background-position: center;
}

.slider .image-fit-horizontally {
  background-size: 100% auto;
  background-position: center;
}

.slider .slide.active {
  z-index: 50;
}

/**
 * Slide information box.
 */
.slide .info {
  width: 365px;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 0 20px;
  color: #111116;
  opacity: 0;
  transition: opacity 0.5s;
}

.slide .info .viewport {
  padding: 20px 0 15px;
}

.slide .info.white {
  color: #fff;
}

.slide .info.white .decoration {
  border-color: #fff;
}

/**
 * Infobox styles.
 */
.slide .style-default .slide-title {
  font-size: 40px;
  line-height: 1em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 36px;
  font-weight: 700;
}

.slide .style-default .slide-subtitle {
  font: normal 16px/1.2em "Merriweather", georgia, serif;
  margin: 0 1px 5px 0;
}

.slide .style-default .decoration {
  top: auto;
  width: 20px;
  margin: -16px 0 0 -10px;
  left: 50%;
  border-color: #111116;
}

.slide .style-default .description {
  font-size: 14px;
  line-height: 1.7em;
}

.slide .style-default .button {
  color: #fff;
  background: #111116;
  margin: 13px 0 0 0;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 30px;
  font-size: 13px;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  transition: color 0.15s ease-out, background-color 0.15s ease-out;
}

.slide .style-default .button:hover {
  color: #111116;
  background: #fff200;
}

.slide .style-default.white .button {
  color: #111116;
  background: #fff;
}

.slide .style-default.white .button:hover {
  color: #fff;
  background: #111116;
}

.radial-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.66) 100%);
  transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}

/**
 * Page: Porftolio
 */
.project .hover-box {
  text-align: center;
  color: #fff;
  opacity: 0;
}
.project:hover .hover-box {
  opacity: 1;
}

.hover-box-contents {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  transform: translate(0, -50%);
  font-size: 16px;
  line-height: 1.6em;
}

.hover-box .excerpt {
  max-width: 700px;
  margin: 0 auto 25px;
}

.entry-tags {
  color: #111116;
  font-size: 13px;
  position: relative;
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
}

.fluxus-project-types a,
.entry-tags a {
  color: currentColor;
  text-transform: lowercase;
  text-decoration: none;
  margin: 0 5px 0 0;
  border-bottom: 0 none;
}

.entry-tags a:hover {
  color: #111116;
}

.fluxus-project-types a .hash,
.entry-tags a .hash {
  color: #111116;
  font-weight: normal;
}

.entry-tags a:hover .hash {
  color: #111116;
}

.fluxus-project-types a,
.fluxus-project-types a .hash {
  color: #8a8a8a;
  font-weight: normal;
  position: relative;
}

.entry-navigation {
  position: relative;
  margin: 32px 0 64px;
  padding-top: 32px;
  overflow: hidden;
}
.entry-navigation:before {
  left: 0;
  top: 0;
}
.entry-navigation h3 {
  color: #111116;
  font-size: 13px;
  line-height: 1em;
  margin: 0 0 16px;
  font-weight: bold;
  text-transform: uppercase;
}
.entry-navigation .entry-tags {
  float: right;
}

/**
 * Grid portfolio.
 */
.layout-portfolio-grid-vertical {
  /**
  * Rendering grid may overflow website height which will introduce scrollbar and shrink content area.
  * To avoid shrinking, let's show the scroll bar at all times.
  */
  overflow-y: scroll;
}

.portfolio-grid {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.portfolio-grid--loaded {
  opacity: 1;
}

.grid-project {
  position: absolute;
  width: 180px;
  height: 120px;
  transition: top 0.5s, left 0.5s;
}

.grid-project__preview {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #eaeaea;
}
.grid-project[data-cropping="center top"] .grid-project__preview {
  background-position: center top !important;
}
.grid-project[data-cropping="right top"] .grid-project__preview {
  background-position: right top !important;
}
.grid-project[data-cropping="right 20%"] .grid-project__preview {
  background-position: right 20% !important;
}
.grid-project[data-cropping="right center"] .grid-project__preview {
  background-position: right center !important;
}
.grid-project[data-cropping="right bottom"] .grid-project__preview {
  background-position: right bottom !important;
}
.grid-project[data-cropping="center bottom"] .grid-project__preview {
  background-position: center bottom !important;
}
.grid-project[data-cropping="left bottom"] .grid-project__preview {
  background-position: left bottom !important;
}
.grid-project[data-cropping="left center"] .grid-project__preview {
  background-position: left center !important;
}
.grid-project[data-cropping="left 20%"] .grid-project__preview {
  background-position: left 20% !important;
}
.grid-project[data-cropping="left top"] .grid-project__preview {
  background-position: left top !important;
}

.grid-project__overlay {
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
}
.grid-project:hover .grid-project__overlay {
  opacity: 1;
}
.mobile-device .grid-project__overlay {
  opacity: 1;
  background: linear-gradient(10deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0) 100%);
}

.password-required,
.private-post {
  font-size: 12px;
  color: #8a8a8a;
  font-weight: bold;
  letter-spacing: 0.03em;
  margin-top: 4px;
  text-transform: uppercase;
}

.grid-project__inner {
  position: absolute;
  top: 50%;
  width: 100%;
  padding: 0 10px;
  text-align: center;
  display: block;
  box-sizing: border-box;
  color: #fff;
  transform: translate3d(0, -50%, 0);
}
.grid-project__inner:hover {
  color: #fff;
}
.mobile-device .grid-project__inner {
  left: 0;
  bottom: 0;
  top: auto;
  text-align: left;
  padding: 16px;
  transform: none;
}

/**
 * Portfolio single.
 */
.horizontal-media {
  display: block;
  position: relative;
  max-height: 100%;
  white-space: normal; /* restore white space, otherwise IE Edge will have rendering issues */
}
.horizontal-media .aspect__media {
  background-color: #f1f1f1;
}
.horizontal-media,
.horizontal-media .aspect {
  /**
   * Horizontal layout is a bunch of different aspect images. Their max-height is
   * set to 100% to not overlfow container. However there is a caveat how image max height works:
   *
   * | The percentage is calculated with respect to the height of the generated box's containing block.
   * | If the height of the containing block is not specified explicitly (i.e., it depends on content height),
   * | and this element is not absolutely positioned, the percentage value is
   * | treated as '0' (for 'min-height') or 'none' (for 'max-height').
   * | their width
   *
   * We have .site container with fixed height. Here we inherit from it explicitly.
   */
  height: inherit;
}
.horizontal-media .aspect__placeholder {
  display: block;
  height: 100%;
  width: auto;
  /**
   * max-width: 100% will prevent wide landscape images to go out of window bounds.
   * It should be allowed.
   */
  max-height: 100%;
  min-width: 288px;
}
.horizontal-media .lazyload-component__image {
  height: 100%;
}
.horizontal-media .plyr {
  height: 100%;
}

.portfolio-single--onclick-scroll .horizontal-media[data-type=image] img, .portfolio-single--onclick-lightbox .horizontal-media[data-type=image] img, .portfolio-single--onclick-lightbox-or-scroll .horizontal-media[data-type=image] img {
  cursor: pointer;
}

/**
 * Blog.
 */
.horizontal-posts .post {
  max-width: 583px;
}
.horizontal-posts .post .byline {
  margin: 2px 0 -5px;
}

.entry-header {
  margin-bottom: 16px;
}
.entry-header img {
  width: 100%;
  height: auto;
  display: block;
}
.entry-header + .fluid-width-container {
  margin-top: 32px;
}

.entry-header__title {
  flex-grow: 1;
  margin-bottom: 0;
}

.entry-header__slash {
  /**
   * .entry-title font size is X, slash height is Y.
   * Here we align by (Y-X)/2
   */
  margin-top: -4px;
}

.entry-header--with-meta {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
}

.entry-meta {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  color: #bdbdbd;
}
.entry-meta a {
  color: #bdbdbd;
}

.sticky-indicator {
  background-color: #fff200;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  display: inline-block;
}
.entry-title .sticky-indicator {
  margin-left: 2px;
}

/**
 * Post tag navigation.
 */
.tag-navigation {
  border-top: 1px solid #eaeaea;
  position: relative;
  padding: 3px 0 0 0;
}

.tag-navigation h1 {
  padding: 0 30px 0 0;
  font-weight: normal;
  font-size: 13px;
  text-transform: uppercase;
  float: left;
}

.tag-navigation a {
  float: left;
  color: #8a8a8a;
  font-size: 13px;
  margin: 0 10px 0 0;
  display: block;
}

.tag-navigation a:hover {
  color: #111116;
}

.featured-media {
  position: relative;
  /**
   * ^ needed because quotes / links are positioned absolutely
   */
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.single .featured-media {
  margin-bottom: 32px;
}
.featured-media:empty {
  display: none;
}
.featured-media:empty + .text-contents {
  /**
   * A little breathing space.
   */
  padding-top: 4px;
}

.featured-media__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.horizontal-content__item .featured-media__img {
  height: 328px;
}
@media only screen and (max-width: 768px) {
  .horizontal-content__item .featured-media__img {
    height: auto;
  }
}

.single .featured-media__text, .vertical__post .featured-media__text {
  padding: 64px 32px;
}
.single .post--featured-image .featured-media__text, .vertical__post .post--featured-image .featured-media__text, .horizontal-content .featured-media__text {
  transform: translate3d(0, -50%, 0);
  position: absolute;
  top: 50%;
  width: 100%;
  box-sizing: border-box;
  padding-left: 32px;
  padding-right: 32px;
}

.post-image__cover {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 32px 0;
  width: 100%;
  background: #111116;
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
  text-align: center;
  transform: translate(0, -50%);
  box-sizing: border-box;
  color: #fff;
}
.post-image__cover h1 {
  font-size: 32px;
  line-height: 1em;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  letter-spacing: 0.06em;
}
.post-image__cover p {
  text-transform: uppercase;
  font-size: 11px;
  margin-top: 8px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.post-image__cover a {
  color: currentColor;
}
.post-image__cover p a:hover {
  text-decoration: underline;
}

/**
 * Aside post format.
 */
.horizontal-posts .format-aside .entry-content {
  margin-top: 0;
}

.link-to-image {
  border: 0 none !important;
}

/**
 * Link post format.
 */
.post-link {
  text-align: center;
}
.post-link a {
  font-size: 21px;
  border-bottom: 2px solid;
  display: inline-block;
}
.post-link a:hover {
  color: #8a8a8a;
}
.post-link p {
  color: #bdbdbd;
  margin-top: 8px;
}

.wp-post-image {
  width: auto;
}

/**
 * Vertical Blog.
 */
.vertical__post {
  margin-bottom: 32px;
}
.vertical__post + .vertical__post {
  margin-top: 32px;
  padding-top: 32px;
}
.vertical__post + .vertical__post:before {
  margin-top: -32px;
  left: 0;
}
.vertical__post .post_format-post-format-link.post--no-featured-image .featured-media__img,
.vertical__post .post_format-post-format-quote.post--no-featured-image .featured-media__img {
  display: none;
}
.vertical__post .post_format-post-format-quote.post--featured-image .featured-media,
.vertical__post .post_format-post-format-link.post--featured-image .featured-media {
  padding-top: 0;
  padding-bottom: 0;
}

.wrap-excerpt-more {
  margin-top: 8px;
}
.wrap-excerpt-more:first-child {
  margin-top: 0;
}

.excerpt-more {
  font-family: "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 3px;
  color: #111116;
  white-space: nowrap;
  font-size: 14px;
}
.excerpt-more:hover {
  border-color: #111116;
}

.vertical-blog .thumbnail img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: none;
}

/**
 * Single page.
 */
.page .entry-content {
  clear: both;
}

.page-with-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  transition: none;
}

/**
 * Contacts page.
 */
#map-dim,
#map {
  width: 100%;
  height: 100%;
  position: absolute;
}

#map-dim {
  background: #111116;
  opacity: 0.7;
}

#map-dim.dim-image {
  opacity: 0.35;
}

.button-close-map {
  position: absolute;
  top: 15px;
  right: 0;
  z-index: 1001;
  display: none;
  transform: translate(100%, 0);
  transition: 0.3s ease-in;
}
.button-close-map:before {
  font-size: 10px;
}

.button-close-map--visible {
  right: 15px;
  transform: translate(0, 0);
}

.page-contacts .site-content {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page-contacts .contacts-background {
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.page-contacts .site-content .page {
  position: relative;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  max-height: 100%;
}

.page-contacts .site-content .page .viewport {
  padding: 20px 0;
}

.page-contacts .entry-content a {
  color: #fff;
}

.page-contacts .entry-content .button,
.button-close-map {
  background: #fff200;
  color: #111116;
}
.page-contacts .entry-content .button:hover,
.button-close-map:hover {
  background: #ffd300;
}

.page-contacts .site-content .page .entry-content {
  margin-top: 15px;
}

.page-contacts .site-content .entry-header,
.page-contacts .site-content .entry-content {
  color: #fff;
}

.page-contacts .site-content .entry-content {
  width: 100%;
}

.contact-details {
  border-left: 1px solid #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  margin: 8px 0 0 -20px;
  padding: 0 0 0 20px;
  min-height: 100%;
}

.contact-details h6 {
  margin: 0 0 4px;
  font: bold 13px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
}

.contact-details p {
  font-size: 14px;
  line-height: 21px;
  word-wrap: break-word;
}

.page-contacts .wpcf7 {
  display: none;
}

/**
 * Tooltip.
 */
.tooltip {
  background: #fff200;
  font-size: 12px;
  position: absolute;
  z-index: 150;
  padding: 0 4px 1px;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #111116;
  display: none;
  white-space: nowrap;
}

.tooltip:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff200;
  margin: 1px 0 0 1px;
}

/*-----------------------------------------------------------------------------
	6. SHORTCODES
-----------------------------------------------------------------------------*/
/**
 * Shortcode: Social.
 */
.icon-social {
  border: 0 none;
}
.entry-content .icon-social {
  border: 0 none;
}
.icon-social:before {
  color: #111116;
  font-size: 30px;
  transition: color 0.3s;
  text-decoration: none;
  text-align: left;
}
.entry-content .icon-social:before {
  width: 48px;
  height: 48px;
}

/**
 * Shortcode: Services.
 */
.service {
  width: 100%;
  margin: 16px 0;
  float: left;
}

.service .service-name {
  text-align: center;
  margin: 0 0 0.5em;
  font-size: 18px;
}

.service .service-icon {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  border-bottom: 0 none;
}

.service .service-mask {
  padding-top: 100%; /* preserve 1:1: aspect ratio */
  position: relative;
  width: 100%;
}

.service .service-icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 1000px;
  border-radius: 100%;
}

.service .service-icon-no-image {
  background-color: #eaeaea;
  position: relative;
  border-radius: 100%;
}

.service .service-content {
  margin: 1em 0;
  font-size: 13px;
}

.service .icon {
  position: absolute;
  font-size: 100px;
  width: 100%;
  text-align: center;
  color: #fff;
  cursor: inherit;
  top: 50%;
  transform: translate(0, -50%);
}

/**
 * Shortcode: Accordion.
 */
.accordion {
  margin: 0 0 1.5em;
  border: 1px solid #ebebeb;
  border-radius: 3px;
}

.accordion .panel-content {
  display: none;
}

.accordion .panel-active .panel-content {
  display: block;
}

.accordion .panel-title {
  margin: 0;
  border-bottom: 1px solid #ebebeb;
}

.accordion .panel-title a {
  border: 0 none;
  text-decoration: none;
  display: block;
  font: normal 13px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  padding: 13.3333333333px 20px;
  background: #f3f4f5;
}

.accordion .panel-active .panel-title a,
.accordion .panel-title a:hover {
  background: #f9f9f9;
  color: #111116;
}

.accordion .panel-active .panel-title a {
  background: #fff;
}

.accordion .panel-content {
  padding: 13.3333333333px 20px;
}

.accordion .panel-last .panel-title {
  border-bottom: 0 none;
}

.accordion .panel-active .panel-title {
  border-bottom: 1px solid #eee;
}

/**
 * Shortcode: Tabs.
 */
.tabs {
  margin: 0 0 1.5em;
}

.tabs .tabs-menu ul {
  list-style: none;
  overflow: hidden;
  margin: 0;
}

.tabs .tabs-menu li {
  display: block;
  float: left;
  padding: 0;
  border: 1px solid #ebebeb;
  border-right: 0 none;
  z-index: 5;
  position: relative;
  margin-top: 0;
}

.tabs .tabs-menu li:first-child {
  border-radius: 3px 0 0 0;
}

.tabs .tabs-menu li:last-child {
  border-right: 1px solid #ebebeb;
  border-radius: 0 3px 0 0;
}

.tabs .tabs-menu li a {
  border: 0 none;
  display: block;
  font: normal 13px "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  padding: 13.3333333333px 20px;
  background: #f3f4f5;
  text-decoration: none;
}

.tabs .tabs-menu li a b {
  display: none;
}

.tabs .tabs-menu li a:hover {
  background: #f9f9f9;
  color: #111116;
}

.tabs .tabs-menu li.active a:after {
  content: "";
  position: absolute;
  border-bottom: 1px solid #fff;
  width: 100%;
  left: 0;
  bottom: -1px;
}

.tabs .tabs-menu li.active a {
  background: #fff;
  cursor: default;
  position: relative;
  color: #111116;
}

.tabs .tab {
  display: none;
  padding: 13.3333333333px 20px;
  border: 1px solid #ebebeb;
  position: relative;
  top: -1px;
}

.tabs .tab p:last-child {
  margin-bottom: 0;
}

.tabs .tab-index-1 {
  display: block;
}

/**
 * Shortcode: Alert.
 */
.alert {
  border: 1px solid #ebebeb;
  padding: 8px;
  text-align: center;
  margin-bottom: 1.5em;
}
.alert a {
  color: #111116;
}
.alert p {
  margin: 0 0 10px 0 !important;
}
.alert p:last-child {
  margin: 0 !important;
}

.alert-note {
  background: #fcf6e3;
  border: 1px solid #ede3c8;
  color: #111116;
}

.alert-warning {
  border-color: #a03b18;
  background: #c26161;
  color: #fff;
}
.alert-warning a {
  color: #fff;
}

.alert-success {
  background: #bce592;
  border-color: #8cd26f;
  color: #111116;
}

.horizontal-break {
  margin: 1.5em 0;
  height: 1px;
  background: #eaeaea;
}

.aside-content {
  float: right;
  font: 300 19px/1.6em "Lato", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;
  width: 38%;
  position: relative;
  margin: -5px -42.85% 0 0;
}

.aside-content .position-absolute {
  position: absolute;
  width: 100%;
}

.page-template-template-full-width-php .aside-content,
.page-template-template-full-width-sidebar-php .aside-content {
  margin-right: 0;
  margin-left: 20px;
  margin-bottom: 20px;
  width: auto;
  max-width: 30%;
}

.page-template-template-full-width-php .aside-content .position-absolute,
.page-template-template-full-width-sidebar-php .aside-content .position-absolute {
  position: static;
}

/*-----------------------------------------------------------------------------
	7. MISCELLANEOUS
-----------------------------------------------------------------------------*/
html.horizontal-page {
  overflow-y: hidden;
  overflow-x: scroll;
}

html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

.hide {
  display: none;
}

/**
 * Fluxus Lightbox.
 */
.fluxus-lightbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  box-sizing: border-box;
  padding: 15px;
  background: #111116;
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  /* Transition duration has to be in sync with value in jquery.fluxus-lightbox.js */
  transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.fluxus-lightbox--bounce-back-transition {
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.admin-bar .fluxus-lightbox {
  top: 32px;
  height: calc(100% - 32px);
}

html.fluxus-lightbox-visible {
  /**
  * Remove main page scroll. !important because responsive rules try to override this,
  * but this has to stay hidden at all times.
  */
  overflow: hidden !important;
}

html.fluxus-lightbox-visible .fluxus-lightbox {
  pointer-events: auto;
  visibility: visible;
}

.fluxus-lightbox__content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.fluxus-lightbox__tip {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -10px;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.fluxus-lightbox--transitioned .fluxus-lightbox__tip {
  opacity: 1;
}

.fluxus-lightbox--over-controls .fluxus-lightbox__tip {
  display: none;
}

.fluxus-lightbox__tip-icon {
  width: 100%;
  height: 100%;
  background-image: url("./images/right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.fluxus-lightbox--slide-in {
  transform: translate3d(0, 0, 0);
}

.fluxus-lightbox--transitioned .fluxus-lightbox__content {
  transform: scale(1);
  opacity: 1;
}

.fluxus-lightbox__media {
  transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
  height: 100%;
  width: 100%;
}

.fluxus-lightbox__media--loaded {
  opacity: 1;
  transform: scale(1);
}

.fluxus-lightbox__media img {
  position: relative;
  width: auto;
  height: 100%;
  display: block;
  transform-origin: top left;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), left 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fluxus-lightbox__iframe-wrap {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.fluxus-lightbox__iframe-wrap iframe {
  width: 100%;
  height: 100%;
}

.fluxus-lightbox__iframe-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fluxus-lightbox--mouse-over-iframe .fluxus-lightbox__iframe-wrap::after,
.fluxus-lightbox--mouse-over-iframe .fluxus-lightbox__tip {
  display: none;
}

.fluxus-lightbox__top-right,
.fluxus-lightbox__bottom-right {
  position: fixed;
  top: 15px;
  right: 15px;
  opacity: 0;
  padding: 0 0 55px 55px; /* Extra padding so cursor can be chagned when hovering near controls */
  transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s;
}

/* After tap we want faster animation */
.fluxus-lightbox--after-tap .fluxus-lightbox__top-right {
  transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}

.fluxus-lightbox__bottom-right {
  bottom: 15px;
  top: auto;
  padding: 55px 0 0 55px; /* Extra padding so cursor can be chagned when hovering near controls */
}

.fluxus-lightbox--transitioned .fluxus-lightbox__top-right,
.fluxus-lightbox--transitioned .fluxus-lightbox__bottom-right {
  opacity: 1;
}

.fluxus-lightbox__status {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background-color: #fff200;
  border-radius: 50%;
  display: none;
  transition: 0.2s opacity ease 1s;
  animation: blinker 0.3s infinite linear;
  display: none;
}

.fluxus-lightbox--long-loading .fluxus-lightbox__status {
  display: block;
}

.fluxus-lightbox__btn {
  background: #fff200;
  padding: 9px 15px 8px;
  border-radius: 1px;
  display: inline-block;
  color: #111116;
  font-size: 21px;
  cursor: pointer;
  margin-left: 15px;
}

.fluxus-lightbox__btn:hover {
  color: #fff;
  background: #111116;
}

.fluxus-lightbox__error {
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 288px;
  width: 100%;
  text-align: center;
  display: none;
}

.fluxus-lightbox--error .fluxus-lightbox__error {
  display: block;
}

.fluxus-lightbox__top-right,
.fluxus-lightbox__bottom-right {
  position: fixed;
  top: 15px;
  right: 15px;
  opacity: 0;
  padding: 0 0 55px 55px; /* Extra padding so cursor can be chagned when hovering near controls */
  transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s;
}

.fluxus-lightbox__bottom-right {
  bottom: 15px;
  top: auto;
  padding: 55px 0 0 55px; /* Extra padding so cursor can be chagned when hovering near controls */
}

.fluxus-lightbox--transitioned .fluxus-lightbox__top-right,
.fluxus-lightbox--transitioned .fluxus-lightbox__bottom-right {
  opacity: 1;
}

.fluxus-lightbox__btn {
  background: #fff200;
  padding: 9px 15px 8px;
  border-radius: 1px;
  display: inline-block;
  color: #111116;
  font-size: 21px;
  cursor: pointer;
  margin-left: 15px;
}

.fluxus-lightbox__btn:hover {
  color: #fff;
  background: #111116;
}

.fluxus-lightbox__btn--resize .icon-zoom-out-slim {
  display: none;
}

.fluxus-lightbox--full-width .fluxus-lightbox__btn--resize .icon-zoom-in-slim {
  display: none;
}

.fluxus-lightbox--full-width .fluxus-lightbox__btn--resize .icon-zoom-out-slim {
  display: inline-block;
}

.fluxus-lightbox--idle .fluxus-lightbox__tip,
.fluxus-lightbox--idle .fluxus-lightbox__bottom-right,
.fluxus-lightbox--idle .fluxus-lightbox__top-right {
  opacity: 0;
}

/**
 * On touch device hide left, right and zoom buttons.
 * Navigation is done using gestures.
 */
.fluxus-lightbox--touch .fluxus-lightbox__tip,
.fluxus-lightbox--touch .fluxus-lightbox__btn--next,
.fluxus-lightbox--touch .fluxus-lightbox__btn--previous,
.fluxus-lightbox--touch .fluxus-lightbox__btn--resize {
  display: none;
}

.fluxus-lightbox--single .fluxus-lightbox__btn--next,
.fluxus-lightbox--single .fluxus-lightbox__btn--previous,
.fluxus-lightbox--single .fluxus-lightbox__tip {
  display: none;
}

.fluxus-lightbox--iframe .fluxus-lightbox__btn--resize,
.fluxus-lightbox--error .fluxus-lightbox__btn--resize {
  display: none;
}

.fluxus-lightbox--single .fluxus-lightbox__content {
  cursor: default;
}

/**
 * Tiny scrollbar plugin
 */
.scroll-container .scrollbar {
  display: none;
}

.horizontal-page .scroll-container {
  height: 100%;
}

.horizontal-page .scroll-container .viewport {
  overflow: hidden;
  position: relative;
}

.horizontal-page .scroll-container .overview {
  position: absolute;
  right: 0;
  top: 0;
  width: 235px;
  margin-top: 1px;
  /*
    In some cases iScoll will trim 1px of the top.
    Here we compensate for it.
  */
}

.horizontal-page .scroll-container .thumb .end,
.horizontal-page .scroll-container .thumb {
  background: #333;
}

.horizontal-page .scroll-container .scrollbar {
  position: relative;
  float: right;
  width: 4px;
  right: -34px;
  display: block;
}

.horizontal-page .scroll-container .track {
  background: #ebebeb;
  height: 100%;
  width: 4px;
  position: relative;
  padding: 0 1px;
}

.horizontal-page .scroll-container .thumb {
  height: 20px;
  width: 4px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.horizontal-page .scroll-container .thumb .end {
  overflow: hidden;
  height: 5px;
  width: 4px;
}

.horizontal-page .scroll-container .disable {
  display: none;
}

.noSelect {
  user-select: none;
}

/* Text meant only for screen readers */
.assistive-text {
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}

/**
 * Contact form 7 plugin.
 */
.wpcf7-textarea {
  height: 120px;
}

.wpcf7-form {
  font-size: 13px;
}

.wpcf7-form .wpcf7-form-control-wrap {
  margin: 2px 0 10px 0;
  display: block;
}

.wpcf7-form .wpcf7-form-control-wrap {
  overflow: hidden;
}

.wpcf7-form .wpcf7-form-control-wrap input[type=text],
.wpcf7-form .wpcf7-form-control-wrap input[type=email] {
  font-size: 14px;
  float: left;
  margin: 0 10px 0 0;
}

.wpcf7-form .wpcf7-not-valid-tip {
  position: static;
  width: 200px;
  float: left;
  border: 0 none;
}

.wpcf7-form .wpcf7-validation-errors,
.wpcf7-form .wpcf7-mail-sent-ok {
  background: #bce592;
  border: 1px solid #8cd26f;
  font: normal 1em "Merriweather", georgia, serif;
  padding: 10px 10px;
}

.wpcf7-form .wpcf7-response-output {
  margin: 10px 0 0 0;
}

.wpcf7-form .wpcf7-not-valid-tip {
  color: #8a8a8a;
}

.wpcf7-form .wpcf7-validation-errors {
  background: #c26161;
  border: 1px solid #a03b18;
  color: #fff;
}

/**
 * ---------------------------------------------------------
 * Burger Menu
 * ---------------------------------------------------------
 */
.burger-menu {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  z-index: 9999;
}

.burger-menu-toggle {
  position: absolute;
  top: 50%;
  top: calc(50% + 0);
  right: 16px;
  width: 28px;
  height: 19px;
  z-index: 10002;
  display: block;
  -webkit-transform: translate(50px, -50%);
  transform: translate(50px, -50%);
  transition: transform 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.burger-menu-toggle span,
.burger-menu-toggle span:before,
.burger-menu-toggle span:after {
  content: "";
  position: absolute;
  top: 8px;
  width: 28px;
  height: 3px;
  display: block;
  cursor: pointer;
  background-color: #333;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: background-color 0.3s ease-in-out, transform 0.5s ease-in-out, top 0.5s ease-in-out;
}

.burger-menu-toggle span:before {
  top: -8px;
}

.burger-menu-toggle span:after {
  top: 8px;
}

.burger-menu--enabled {
  overflow: visible;
}

.burger-menu--enabled .burger-menu-toggle {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.burger-menu--expanded .burger-menu-toggle span {
  background-color: transparent !important;
}

.burger-menu--expanded .burger-menu-toggle span:before {
  top: 0;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.burger-menu--expanded .burger-menu-toggle span:after {
  top: 0;
  background: #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.non-mobile-device .burger-menu-toggle:hover span,
.non-mobile-device .burger-menu-toggle:hover span:before,
.non-mobile-device .burger-menu-toggle:hover span:after {
  background: #8a8a8a;
}

.burger-menu--expanded .burger-menu-toggle:hover span:before,
.burger-menu--expanded .burger-menu-toggle:hover span:after {
  background: #fff;
}

.burger-menu-dim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.7s ease-out;
}

.burger-menu-visible .burger-menu-dim {
  opacity: 1;
  pointer-events: auto;
}

.burger-menu-items {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #111116;
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 130px 0 50px;
  width: 320px;
  height: 100%;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  -webkit-transform: translate3d(320px, 0, 0);
  transform: translate3d(320px, 0, 0);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.burger-menu-items li {
  position: relative;
}

.burger-menu--expanded.burger-menu--enabled .burger-menu-items {
  overflow: auto;
  overflow-x: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.burger-menu .bg {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 200px;
  background-size: 100%;
  background-repeat: no-repeat;
}

.burger-menu .bg:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 200px;
  display: block;
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0) 31%, rgba(17, 17, 17, 0.03) 33%, rgb(17, 17, 17) 100%);
}

.burger-menu ul,
.burger-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.burger-menu-level-0 {
  position: relative;
}

.burger-menu-level-0 > li > .burger-menu-link {
  padding-left: 0;
}

.burger-menu-level-1,
.burger-menu-level-2,
.burger-menu-level-3 {
  display: none;
}

.burger-menu-link {
  position: relative;
  display: block;
  padding: 20px 45px 22px 0;
  margin-left: 30px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #1d1d1d;
  -moz-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}

.mobile-device .burger-menu-link:hover {
  color: #8a8a8a;
}

.burger-menu-link-clicked {
  color: #fff;
}

.burger-menu-children-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  display: inline-block;
  color: #8a8a8a;
}

.burger-menu-children-toggle:after {
  position: absolute;
  top: 19px;
  left: 24px;
  font-size: 16px;
  content: "\e928";
  font-family: "icomoon";
  font-style: normal;
  font-weight: normal;
  speak: none;
  text-decoration: none;
  display: inline-block;
}

.burger-menu-item-expanded > .burger-menu-children-toggle:after {
  content: "\e92b";
}

.non-mobile-device .burger-menu-children-toggle:hover {
  color: #fff;
}

.burger-menu-items > ul > li:last-child .burger-menu-link {
  border-bottom: 0 none;
}

.non-mobile-device .burger-menu-link:hover {
  color: #fff;
}

.burger-menu a.burger-menu-item-active {
  color: #fff;
}

.burger-menu li.burger-menu-item-active > ul {
  display: block;
}

.burger-menu ul ul .burger-menu-link {
  margin-left: 48px;
  font-size: 14px;
}

.burger-menu ul ul ul .burger-menu-link {
  margin-left: 68px;
  font-size: 12px;
}

.iScrollVerticalScrollbar {
  position: absolute;
  z-index: 100;
  width: 8px;
  bottom: 4px;
  top: 4px;
  right: 1px;
}

.iScrollIndicator {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  width: 5px;
  border-radius: 3px;
  box-sizing: border-box;
}

/**
 * WPML
 */
#lang_sel_footer .lang_sel_sel {
  border: 0 none;
  font-weight: bold;
  cursor: default;
}

#lang_sel_footer .iclflag {
  margin: 0 2px 0 0;
}

.icl_languages_selector {
  overflow: visible;
}

.icl_languages_selector #lang_sel ul ul {
  display: none;
  margin: 5px 0 0 0;
}

.icl_languages_selector #lang_sel li:hover > ul {
  display: block;
}

.icl_languages_selector .lang_sel_list_horizontal li {
  display: inline-block;
  margin-left: 10px;
}

.menu-item-language .iclflag {
  position: relative;
  margin: 0 5px 0 0;
  top: 1px;
}

.menu-item-language:hover .submenu-languages {
  display: block;
}

/**
 * Swiper
 */
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  overflow: hidden;
}

.swiper-slide .iScrollVerticalScrollbar {
  transition: opacity 0.5s ease-out 1.2s;
  opacity: 0;
}

.swiper-slide-active .iScrollVerticalScrollbar {
  opacity: 1;
}

/* center center by default */
.swiper-slide__media {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.swiper-slide--wide .swiper-slide__media {
  top: 50%;
  left: 0;
  height: auto;
  width: 100%;
  transform: translate3d(0, -50%, 0);
}

.swiper-slide--wide.swiper-slide[data-cropping=bottom-center] .swiper-slide__media {
  top: auto;
  bottom: 0;
  transform: translate3d(0, 0, 0);
}

.swiper-slide--wide.swiper-slide[data-cropping=top-center] .swiper-slide__media {
  top: 0;
  transform: translate3d(0, 0, 0);
}

.swiper-slide__aspect-image {
  width: auto;
  height: 100%;
  visibility: hidden;
  display: block;
}

.swiper-slide--wide .swiper-slide__aspect-image {
  width: 100%;
  height: auto;
}

.swiper-slide[data-cropping=fit] .swiper-slide__media {
  width: 100%;
  height: auto;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 0);
}

.swiper-slide--wide.swiper-slide[data-cropping=fit] .swiper-slide__media {
  height: 100%;
  width: auto;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.swiper-slide[data-cropping=fit] .swiper-slide__aspect-image {
  width: 100%;
  height: auto;
}

.swiper-slide--wide.swiper-slide[data-cropping=fit] .swiper-slide__aspect-image {
  width: auto;
  height: 100%;
}

.swiper-slide--raw-embed iframe {
  position: absolute;
  top: 0;
  left: 40px;
  width: 100%;
  height: 100%;
  width: calc(100% - 80px); /* Don't cover sideways navigation */
}

.swiper-slide--wide.swiper-slide--raw-embed iframe {
  top: 40px;
  left: 0;
  height: calc(100% - 80px); /* Don't cover pagination */
}

.swiper-slide__player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.3s ease-out;
}

.swiper-slide__player video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.swiper-slide__player .plyr,
.swiper-slide__player .plyr__video-wrapper,
.swiper-slide__player .plyr__video-embed__container,
.swiper-slide__player iframe {
  width: 100%;
  height: 100%;
}
.swiper-slide__player .plyr__video-embed__container,
.swiper-slide__player .plyr__video-embed__container[style] {
  transform: none !important;
}

.swiper-slide--video-playing .swiper-slide__player {
  opacity: 1;
}

.swiper-slide--loaded.swiper-slide--video-playing .swiper-lazy {
  opacity: 0;
}

.swiper-slide .plyr__video-wrapper {
  background: transparent;
}

.swiper-slide__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: 0.3s ease-out;
  /*
  * This overlay is used within container that is being 3d translated.
  * For some reason the element becomes invisible. Adding translate fixes it.
  **/
  transform: translate3d(0, 0, 0);
}

.swiper-slide[data-overlay=dark] .swiper-slide__overlay {
  background-color: rgba(0, 0, 0, 0.3);
}

.swiper-slide[data-overlay=dark_2] .swiper-slide__overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.swiper-slide[data-overlay=light] .swiper-slide__overlay {
  background-color: rgba(255, 255, 255, 0.3);
}

.swiper-slide[data-overlay=light_2] .swiper-slide__overlay {
  background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide--playing .swiper-slide__overlay {
  opacity: 0;
}

.swiper-lazy {
  position: absolute; /* Add to z-stack so it is above media when swiper-lazy is used as video poster. */
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: opacity 0.5s ease-out;
}

.swiper-slide--loaded .swiper-lazy {
  opacity: 1;
}

.swiper-slide[data-cropping=top-center] .swiper-lazy {
  background-position: top center;
}

.swiper-slide[data-cropping=bottom-center] .swiper-lazy {
  background-position: bottom center;
}

.swiper-slide[data-cropping=fit] .swiper-lazy {
  background-size: 100% auto;
}

.swiper-slide.swiper-slide--wide[data-cropping=fit] .swiper-lazy {
  background-size: auto 100%;
}

.slider-button-prev,
.slider-button-next {
  background-repeat: no-repeat;
  background-color: transparent !important;
  background-image: url("images/left.svg");
  background-size: auto 80%;
  background-position: center;
  width: 68px;
  height: 82px;
  overflow: hidden;
  text-indent: -9999px;
  position: absolute;
  top: 50%;
  box-shadow: none;
  border: 0;
  outline: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-out 1.2s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translate3d(10px, -50%, 0);
  mix-blend-mode: difference;
}

.swiper-container--animated .slider-button-prev,
.swiper-container--animated .slider-button-next {
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swiper-container[data-navigation-arrows].swiper-container--ready .slider-button-prev,
.swiper-container[data-navigation-arrows].swiper-container--ready .slider-button-next {
  opacity: 1;
  pointer-events: auto;
}

.swiper-button-disabled {
  pointer-events: none !important;
  opacity: 0 !important;
}

.slider-button-next {
  background-image: url("images/right.svg") !important;
  right: 15px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.slider-button-prev:hover,
.slider-button-next:hover,
.slider-button-prev:focus,
.slider-button-next:focus {
  box-shadow: none;
}

.slider-button-next:hover {
  transform: translate3d(10px, -50%, 0) scale(0.9);
}

.slider-button-prev:hover {
  transform: translate3d(0, -50%, 0) scale(0.9);
}

/**
 * Double Circle SVG
 */
.double-circle__bottom {
  transition: fill 0.5s ease, opacity 0.3s ease, stroke 0.3s ease;
  opacity: 1;
  fill: transparent;
}

/**
 * Bullet Pagination
 */
.swiper-pagination-bullets {
  position: absolute;
  bottom: 15px;
  left: 20px;
  z-index: 1;
  line-height: 11px;
  opacity: 0;
  transition: opacity 0.5s ease-out 0.5s;
}

.swiper-container--ready .swiper-pagination-bullets {
  opacity: 1;
}

.swiper-pagination-bullets li,
.swiper-pagination-bullet {
  position: relative;
  display: inline-block;
  margin: 0 6px 0 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.swiper-pagination-bullets .double-circle__bottom {
  stroke: #ccc;
  opacity: 0.5;
}

.swiper-pagination-bullets li:hover .double-circle__bottom {
  stroke: #fff;
  opacity: 1;
}

.swiper-pagination-bullet-active .double-circle__top {
  stroke-dashoffset: 0;
  stroke: #fff222;
}

.swiper-pagination-bullets--autoplaying .swiper-pagination-bullet-active .double-circle__top {
  stroke-dashoffset: 32;
}

.swiper-pagination-bullets--autoplaying .swiper-pagination-bullet-active .double-circle__top {
  animation: spin-bullet 3000ms linear forwards;
}

.swiper-pagination-bullets--autoplaying .swiper-pagination-bullet-previously-active .double-circle__top {
  /* After bullet was activated let's cool it down with swift transition */
  animation: cool-down 500ms ease-out forwards;
}

.swiper-pagination-bullets--autoplaying .swiper-pagination-bullet-previously-active .double-circle__top {
  /*
  * Animation duration is modified by JS depending on autoplay duration.
  * For cooldown animation we need to override it
  */
  animation-duration: 500ms !important;
}

@keyframes spin-bullet {
  0% {
    stroke-dashoffset: 32;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: #fff222;
  }
}
@keyframes cool-down {
  0% {
    stroke-dashoffset: 0;
    stroke: #fff222;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.swiper-pagination-bullets__tip {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  left: 1px;
  position: absolute;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  letter-spacing: 0.1em;
  transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform: translate3d(0, -12px, 0);
  transform: translate3d(0, -12px, 0);
}

.swiper-pagination-bullets li:hover .swiper-pagination-bullets__tip {
  opacity: 1;
  -webkit-transform: translate3d(0, -18px, 0);
  transform: translate3d(0, -18px, 0);
}

/**
 * Content Box
 */
.content-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 385px;
  min-width: 200px;
  max-width: 1000px;
  max-height: 100%;
  text-align: center;
  color: #111116;
  cursor: default;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.5s ease-out 0.7s;
}

.content-box__contents {
  padding: 20px 25px;
}

/**
 * Centering needs to be defined as a separate class explicitly.
 * In PreventOutOfBounds we use this class to specificly override behaviour
 * if content is centered.
 */
.content-box--center {
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.swiper-slide--loaded .content-box {
  opacity: 1;
}

/*
 * Add slight delay when animating initial slide's content box.
 */
.swiper-container--animated .content-box {
  transition-delay: 0s;
}

.content-box.out-of-bounds--right[style] {
  left: auto !important;
  right: 0 !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.content-box.out-of-bounds--left[style] {
  left: 0 !important;
  right: auto !important;
}

.content-box--center.out-of-bounds--left[style] {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.content-box.out-of-bounds--left[style].out-of-bounds--right[style] {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
}

.content-box.out-of-bounds--top[style] {
  top: 0 !important;
  bottom: auto !important;
}

.content-box.out-of-bounds--bottom[style] {
  top: auto !important;
  bottom: 0 !important;
}

.content-box--center.out-of-bounds--bottom[style]:not(.ui-draggable) {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

.content-box--center.out-of-bounds--left.out-of-bounds--top[style],
.content-box--center.out-of-bounds--left.out-of-bounds--bottom[style],
.content-box--center.out-of-bounds--right.out-of-bounds--top[style],
.content-box--center.out-of-bounds--right.out-of-bounds--bottom[style] {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.content-box.out-of-bounds--top[style].out-of-bounds--bottom[style]:not(.ui-draggable) {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  overflow-y: scroll;
}

.content-box[data-position=custom] {
  left: auto;
  top: auto;
  /**
  * We don't want to do none because it will cause issues with backgorund color
  * when animated using translate3d.
  */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.content-box--text-light,
.content-box--text-light .entry-content {
  color: #fff;
}

.content-box--text-dark .button {
  background: #111116;
  color: #fff;
}

.content-box--text-dark .button:hover {
  background: #222;
  color: #fff;
}

.content-box--style-left-aligned {
  text-align: left;
}

.content-box--style-left-aligned .content-box__decoration {
  display: none;
}

.content-box--style-left-aligned .content-box__content {
  margin-top: 10px;
}

.swiper-slide--playing .content-box {
  opacity: 0;
  pointer-events: none;
}

.swiper-slide[data-overlay=dark_under_content] .content-box {
  background-color: rgba(0, 0, 0, 0.5);
}

.swiper-slide[data-overlay=dark_solid_under_content] .content-box {
  background-color: #111116;
}

.swiper-slide[data-overlay=light_under_content] .content-box {
  background-color: rgba(255, 255, 255, 0.7);
}

.swiper-slide[data-overlay=light_solid_under_content] .content-box {
  background-color: #fff;
}

.content-box__content p {
  margin-bottom: 10px;
}

.content-box__content .content-box__buttons {
  margin-top: 15px;
}

/*
 * Animation: Default
 */
.content-box--effect-slide .content-box__title,
.content-box--effect-slide .content-box__subtitle,
.content-box--effect-slide .content-box__content {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.1s, opacity 0.9s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.1s;
}

.swiper-slide--prev .content-box--effect-slide .content-box__title,
.swiper-slide--prev .content-box--effect-slide .content-box__subtitle,
.swiper-slide--prev .content-box--effect-slide .content-box__content {
  transform: translate3d(100%, 0, 0);
  transition: none;
}

.swiper-slide--current .content-box--effect-slide .content-box__title,
.swiper-slide--current .content-box--effect-slide .content-box__subtitle,
.swiper-slide--current .content-box--effect-slide .content-box__content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.1s, opacity 0.9s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.1s;
}

/*
 * Animation: Fade
 */
.swiper-slide--loaded .content-box--effect-fade {
  transition: opacity 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.4s;
  opacity: 0;
}

.swiper-slide--loaded.swiper-slide--current .content-box--effect-fade {
  opacity: 1;
}

.content-box__decoration {
  margin: 16px 0 12px;
}

.plyr__poster {
  background-size: cover !important;
}

.project-title__heading {
  font-size: 36px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.project-title__excerpt {
  font: normal 15px/1.875 "Merriweather", georgia, serif;
  white-space: normal;
}

.current-page-number {
  font-size: 40px;
  line-height: 1;
  font-weight: 300;
}

/**
 * Wordpress Admin Bar adjustments
 */
.admin-bar-showing #wpadminbar {
  position: fixed;
}
/**
 * All custom CSS modifications should be kept in this file. When updating move this file
 * from the old installation to the updated one. This will preserve all your CSS customisations.
 *
 * This file gets included last, so any CSS rule written below will override a previously declared one.
 *
 * TABLE OF CONTENTS
 * -----------------
 * 1.  Global — all viewports
 * 2.  Shared components (categories block, inline list)
 * 3.  Desktop ≥769px — header hidden, footer as nav bar
 * 4.  Desktop ≥769px — library page
 * 5.  Desktop ≥769px — portfolio blog template
 * 7.  Mobile & Tablet ≤768px — header left-aligned
 * 8.  Mobile & Tablet ≤768px — portfolio blog template
 * 9.  Mobile & Tablet ≤768px — library page
 */



/* =============================================================================
   1. GLOBAL — ALL VIEWPORTS
   ============================================================================= */



/* Reduce logo container vertical padding (style.css has 16px) */
.logo-container {
    padding: 10px 0 !important;
    border-right: 0 none !important;
}

/* Override footer link underline (style.css line 411) */
.site-footer a {
    border-bottom: 0 none !important;
}

/* Reduce portfolio post title font size (style.css default: 24px bold) */
.captioned-media__caption .entry-title {
    font-size: 18px !important;
}

/* Portfolio post subtitle shown as date/caption on listing page */
.captioned-media__caption .entry-date {
    display: block;
    color: #8a8a8a;
    margin-bottom: 2px;
}

/* Hide taxonomy tags below post title on portfolio listing */
.captioned-media__caption .entry-tags {
    display: none;
}

/* Remove caption height cap and show full title */
.project .captioned-media__caption,
.project.captioned-media--project-types .captioned-media__caption {
    padding-top: 5px !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Disable hover overlay on portfolio images */
.project .hover-box {
    display: none !important;
}

/* Hide per-photo description text (used as tag input) on single portfolio posts — all viewports */
body.single-fluxus_portfolio .captioned-media__caption {
    display: none !important;
}

body.single-fluxus_portfolio .horizontal-content__item.captioned-media {
    padding-bottom: 0 !important;
}

/* Rename "Project Types" widget title in portfolio sidebars */
.sidebar-portfolio .widget.fluxus-project-types .widget-title,
.sidebar-portfolio-single .widget.fluxus-project-types .widget-title,
.library-sidebar .widget.fluxus-project-types .widget-title {
    font-size: 0;
}

.sidebar-portfolio .widget.fluxus-project-types .widget-title::after,
.sidebar-portfolio-single .widget.fluxus-project-types .widget-title::after,
.library-sidebar .widget.fluxus-project-types .widget-title::after {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.sidebar-portfolio .widget.fluxus-project-types .widget-title::after {
    content: 'RÉGIONS';
}

.sidebar-portfolio-single .widget.fluxus-project-types .widget-title::after,
.library-sidebar .widget.fluxus-project-types .widget-title::after {
    content: 'CATÉGORIES';
}



/* Rename "All" → "toutes" in portfolio sidebar — all viewports */
.sidebar-portfolio .widget.fluxus-project-types ul li.project-type-all a,
.sidebar-portfolio-single .widget.fluxus-project-types ul li.project-type-all a {
    font-size: 0;
}

.sidebar-portfolio .widget.fluxus-project-types ul li.project-type-all a::after,
.sidebar-portfolio-single .widget.fluxus-project-types ul li.project-type-all a::after {
    content: 'toutes';
    font-size: 13px;
    color: inherit;
}


/* =============================================================================
   2. SHARED COMPONENTS — CATEGORIES INLINE BLOCK
   Used by: Portfolio Blog template (mobile/tablet) and Library page (both views).
   ============================================================================= */

.fluxus-categories-block {
    border: 1px solid #ebebeb;
    padding: 16px 20px 20px;
    margin: 0 0 16px;
    box-sizing: border-box;
}

.fluxus-categories-block .categories-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    margin: 0 0 14px;
    color: #111116;
}

/* Inline hashtag-style list */
.fluxus-categories-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fluxus-categories-inline li {
    display: inline;
    margin: 0;
}

.fluxus-categories-inline a {
    color: #111116;
    text-decoration: none;
    font-size: 13px;
    border: 0 none;
}

.fluxus-categories-inline a::before {
    content: '#';
}

.fluxus-categories-inline a:hover {
    color: #8a8a8a;
}

.fluxus-categories-inline a.active,
.fluxus-categories-inline a[aria-current="page"] {
    font-weight: bold;
}

/* Library sidebar — hash prefix on tag links (not on "all") */
.library-sidebar-category-list a::before {
    content: '#';
}

.library-sidebar-category-list li:first-child a::before {
    content: none;
}


/* =============================================================================
   PORTFOLIO HORIZONTAL PAGE — PORTRAIT 2:3 FRAMING
   The placeholder <img> has inline style="aspect-ratio: W/H" which determines
   each item's width. Overriding it to 2/3 forces portrait framing for all posts.
   object-fit: cover centers landscape images inside the portrait frame.
   ============================================================================= */

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

    /* Force 2:3 portrait aspect ratio on the portfolio listing page only.
       Scoped to .page-template-template-portfolio-php so it never affects
       single posts or any other page. Landscape images scale to fill the
       frame height-wise and are cropped/centered horizontally. */
    .page-template-template-portfolio-php .horizontal-content__item .aspect__placeholder,
    .tax-fluxus-project-type .horizontal-content__item .aspect__placeholder {
        aspect-ratio: 2 / 3 !important;
    }

    .page-template-template-portfolio-php .horizontal-content__item .aspect__media img,
    .tax-fluxus-project-type .horizontal-content__item .aspect__media img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
    }

} /* end portrait framing */


/* =============================================================================
   3. DESKTOP ≥769px — HEADER REPOSITIONED TO BOTTOM / FOOTER HIDDEN
   Rather than duplicating the header into the footer, we simply reposition
   the existing .site-header to the bottom of the viewport with CSS.
   The header stays in the DOM so the theme's JS can still read its height
   and the nav, dropdowns, and logo all work without any extra code.
   JS sets #main.site top = headerHeight; we counteract with top:0 !important.
   ============================================================================= */

/* Keep nav font size and padding consistent at all widths (responsive.css shrinks them at ≤1024px) */
@media only screen and (max-width: 1024px) {
    .site-navigation a {
        font-size: 13px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Mirror the sidebar's min-width rule for the logo container at 769–1024px.
   Upper bound matches responsive.css. Lower bound excludes mobile where
   responsive.css sets logo-container to width:100%. */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .logo-container {
        min-width: 232px;
        max-width: 232px;
    }
}

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

    /* Reposition the header to the bottom of the viewport */
    .site-header {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        background-color: #fff;
        border-bottom: 0 none;
        z-index: 100;
    }

    /* Sub-menus open upward since the header sits at the bottom of the screen */
    .site-header .sub-menu {
        top: auto !important;
        bottom: 100% !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Hide the footer visually on all pages */
    .site-footer {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Hide scrollbar on horizontal portfolio pages (scroll still works via wheel) */
    html.horizontal-page:not(.library-page) { scrollbar-width: none; }
    html.horizontal-page:not(.library-page)::-webkit-scrollbar { display: none; }

    /* On horizontal pages the theme JS reads $footer.outerHeight() to calculate
       the scroll area height. By keeping the footer visible to JS at 80px
       (matching the header height), JS sets:
         top = 80px  and  height = viewportHeight - 80 - 80 = viewportHeight - 160
       which positions the scroll area from y=80 to y=viewportHeight-80,
       giving equal top and bottom spacing and keeping captions above the header. */
    .horizontal-page .site-footer {
        display: block !important;
        height: 80px !important;
        position: fixed !important;
        bottom: 0 !important;
    }

    /* On non-horizontal pages the footer is out of flow — hide it completely */
    body:not(.horizontal-page) .site-footer {
        display: none !important;
    }

    /* Keep the footer-push so page content doesn't scroll behind the fixed header */
    .site-footer-push {
        display: block !important;
        height: 80px !important;
    }

    /* Horizontal pages: add bottom padding so the last image isn't hidden
       behind the fixed header at the bottom */
    .horizontal-page .site-content {
        padding-bottom: 80px;
    }

    /* Hide the tagline below the logo in the bottom header */
    .site-header .site-description {
        display: none !important;
    }

    /* Remove the accent-color highlight on the active nav item —
       the theme applies background-color to .current-menu-item > a,
       which renders as a bar when the nav sits at the bottom */
    .site-header .site-navigation .active > a,
    .site-header .site-navigation .current-menu-item > a,
    .site-header .site-navigation .current-menu-item > a:hover,
    .site-header .site-navigation .current-menu-ancestor > a,
    .site-header .site-navigation .current-menu-parent > a {
        background-color: transparent !important;
        color: #111116 !important;
    }

    /* Make images fill their aspect__media container fully so no gap shows
       on portrait items (where the img otherwise doesn't cover the full width) */
    body.single-fluxus_portfolio .horizontal-media .aspect__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 48% / 4% gap / 48% proportional layout.
       grid-template-rows percentages resolve against the content-box height.
       padding-bottom: 80px (box-sizing: border-box) reserves space for the
       fixed header so the strips end flush with its top edge. */
    body.single-fluxus_portfolio .site-content {
        display: grid;
        grid-template-rows: 1fr 32px 1fr;
        padding-bottom: 20px;
        box-sizing: border-box;
    }

    body.single-fluxus_portfolio .js-portfolio-single:first-child {
        grid-row: 1;
    }

    body.single-fluxus_portfolio .js-portfolio-single:last-child {
        grid-row: 3;
    }

    body.single-fluxus_portfolio .horizontal-content {
        height: 100% !important;
        min-height: 0;
    }

    /* Portfolio + Library sidebar — shared inline tag list styles */
    .sidebar-portfolio .widget.fluxus-project-types ul,
    .sidebar-portfolio-single .widget.fluxus-project-types ul,
    .library-sidebar-category-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        justify-content: flex-end;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sidebar-portfolio .widget.fluxus-project-types ul li,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li,
    .library-sidebar-category-list li {
        margin: 0;
    }

    /* "All" / first tag on its own full-width row (portfolio only — library "all" is inline) */
    .sidebar-portfolio .widget.fluxus-project-types ul li.project-type-all,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li.project-type-all {
        flex-basis: 100%;
        text-align: right;
    }

    /* Remove the theme's .widget a underline and padding from both sidebars */
    .sidebar-portfolio .widget.fluxus-project-types ul li a,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li a,
    .library-sidebar-category-list a {
        border: 0 none;
        padding: 0;
        text-decoration: none;
    }

    /* Active tag — bold + underline in both sidebars */
    .sidebar-portfolio .widget.fluxus-project-types ul li a.active,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li a.active,
    .library-sidebar-category-list a.active {
        font-weight: bold;
        border-bottom: 1px solid #111116;
        padding-bottom: 2px;
    }

    /* "toutes" renders via ::after with font-size: 0 on the a — underline must go
       on ::after instead, otherwise it sits against a zero-height content box */
    .sidebar-portfolio .widget.fluxus-project-types ul li.project-type-all a.active,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li.project-type-all a.active {
        border-bottom: none;
        padding-bottom: 0;
    }

    .sidebar-portfolio .widget.fluxus-project-types ul li.project-type-all a.active::after,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li.project-type-all a.active::after {
        border-bottom: 1px solid #111116;
        padding-bottom: 2px;
    }

    /* "all" + "favorites" sit on their own row; remaining tags wrap below */
    .library-sidebar-category-list li.library-cat-break {
        flex-basis: 100%;
        margin: 0;
    }

    /* No # prefix on "favorites" */
    .library-sidebar-category-list li.library-cat-favorites a::before {
        content: none;
    }


    /* Fixed sidebars — stay on screen while content scrolls horizontally.
       box-shadow extends the white background 16px leftward, covering the gap
       so scrolling images cannot bleed through while the theme's 16px left margin
       remains intact on both portfolio and homepage. */
    html.horizontal-page .sidebar-portfolio,
    html.horizontal-page .sidebar-portfolio-single {
        position: fixed;
        top: 0;
        bottom: 80px;
        background: #fff;
        z-index: 50;
        margin-top: 100px;
        min-width: 272px;
        max-width: 272px;
        box-shadow: -16px 0 0 0 #fff;
    }


    /* Flex column so the scroll-container shrinks and the nav stays pinned to bottom */
    html.horizontal-page .sidebar-portfolio-single {
        display: flex;
        flex-direction: column;
    }

    html.horizontal-page .sidebar-portfolio-single .scroll-container {
        flex: 1;
        min-height: 0;
    }

    /* Prev / Next post navigation — always visible at the bottom of the sidebar */
    .sidebar-post-nav {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 16px 0 20px 32px;
    }

    .sidebar-post-nav__link {
        text-decoration: none;
        border: 0 none;
        color: inherit;
    }

    .sidebar-post-nav__link--prev {
        text-align: right;
    }

    .sidebar-post-nav__label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
        color: #8a8a8a;
    }

    .sidebar-post-nav__link:hover .sidebar-post-nav__label {
        color: #111116;
    }

    /* Push site-content right to compensate for the now-fixed sidebar (272px wide). */
    html.horizontal-page .site-content {
        margin-left: 272px;
    }


    /* Single portfolio post sidebar — single-column stacking layout */
    .sidebar-portfolio-single .overview {
        display: block;
    }

} /* end @media ≥769px */


/* Sidebar is 232px wide at 769–1024px (responsive.css) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    html.horizontal-page .sidebar-portfolio,
    html.horizontal-page .sidebar-portfolio-single {
        min-width: 232px;
        max-width: 232px;
    }
    html.horizontal-page .site-content {
        margin-left: 232px;
    }
}



/* =============================================================================
   4. DESKTOP ≥769px — LIBRARY PAGE
   Horizontal 3-row photo strip with category sidebar on the left.
   Page does not scroll vertically — only the photo strip scrolls horizontally.
   ============================================================================= */

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

    html.library-page {
        overflow: hidden;
    }

    /* Kill any left margin so the sidebar sits flush */
    html.library-page .site {
        margin: 0;
    }

    /* Full height minus the fixed bottom header */
    .library-page #main.site {
        height: calc(100vh - 80px);
        align-items: stretch;
    }

    /* Sidebar — fixed width, full height, scrolls vertically if content overflows.
       Border suppressed here and redrawn via ::after starting at 100px so it
       aligns with the content top, matching the portfolio page behaviour. */
    .library-page .library-sidebar {
        flex-shrink: 0;
        min-width: 288px;
        max-width: 288px;
        height: 100%;
        overflow-y: auto;
        padding: 100px 32px 20px 20px;
        box-sizing: border-box;
        border-right: 0 none;
        position: relative;
    }

    .library-page .library-sidebar::after {
        content: '';
        position: absolute;
        top: 100px;
        right: 0;
        bottom: 0;
        width: 1px;
        background-color: #ebebeb;
    }

    /* Content area scrolls horizontally, fills remaining width.
       padding-left matches the 32px gap the portfolio page has between
       the sidebar border and the first piece of content. */
    .library-page .site-content {
        flex: 1;
        overflow-x: scroll;
        overflow-y: hidden;
        height: 100%;
        padding: 0 0 0 32px !important;
        min-width: 0;
    }

    /* Hide mobile elements */
    .library-page .library-categories-mobile {
        display: none !important;
    }

    .library-page .library-mobile-grid {
        display: none !important;
    }

    /* Horizontal photo strip — shared base styles for both row counts */
    .library-desktop-grid {
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 32px;
        padding: 100px 0 32px;
        box-sizing: border-box;
    }

    .library-photo-row {
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
        gap: 32px;
        min-height: 0;
    }

    .library-photo-row::after {
        content: '';
        display: block;
        min-width: 32px;
        margin-left: -32px;
        flex-shrink: 0;
    }

    .library-photo-grid__item {
        display: block;
        flex-shrink: 0;
        height: 100%;
        overflow: hidden;
    }

    .library-photo-grid__item img {
        display: block;
        height: 100%;
        width: auto;
    }

    /* Placeholder state while image is waiting to lazy-load */
    .library-photo-grid__item img[data-src] {
        background: #e8e8e8;
        min-width: 4px;
    }

    /* 3-row grid hidden by default — shown only at ≥2048px */
    .library-desktop-grid--3 {
        display: none;
    }

    /* Favorites view — single full-height row.
       PHP puts all photos in row 0; remaining rows are empty and hidden. */
    html.library-favorite .library-desktop-grid {
        gap: 0;
    }

    html.library-favorite .library-desktop-grid--2 .library-photo-row:last-child {
        display: none;
    }

    html.library-favorite .library-desktop-grid--3 .library-photo-row:not(:first-child) {
        display: none;
    }

} /* end @media ≥769px */


/* =============================================================================
   LARGE DESKTOP ≥2048px — LIBRARY PAGE: 3-ROW GRID
   ============================================================================= */

@media screen and (min-width: 2048px) {
    .library-desktop-grid--2 {
        display: none;
    }

    .library-desktop-grid--3 {
        display: flex;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .library-page .library-sidebar {
        min-width: 248px;
        max-width: 248px;
    }
}



/* =============================================================================
   7. MOBILE & TABLET ≤768px — HEADER: LOGO LEFT-ALIGNED (2nd variation)
   The logo container is left-aligned and the tagline (site-description) is
   shown below the logo mark, matching the "2nd variation" in the mockups.
   ============================================================================= */

@media screen and (max-width: 768px) {

    /* Left-align the logo container */
    .logo-container {
        align-items: flex-start !important;
    }

    /* Left-align the logo anchor and image */
    .site-logo {
        text-align: left !important;
    }

    /* Show and left-align the tagline (site-description) */
    .site-description {
        text-align: left !important;
        display: block !important;
    }

    /* Frosted glass header — applied to __inner (position: relative, not sticky)
       so backdrop-filter does not interfere with the scroll mechanism. */
    .site-header__inner {
        background: rgba(255, 255, 255, 0.55) !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

} /* end @media ≤768px */



/* =============================================================================
   8. MOBILE & TABLET ≤768px — PORTFOLIO PAGE: INLINE PROJECT TYPES AT TOP
   Moves the project types sidebar above the portfolio grid and renders the
   type list as an inline row of #tag links instead of a vertical scroll list.
   ============================================================================= */

@media screen and (max-width: 768px) {

    /* Smaller title font size on mobile */
    .captioned-media__caption .entry-title {
        font-size: 16px !important;
    }

    /* Fix cropped titles — style.css caps .project .captioned-media__caption at
       48px/72px; responsive.css tries to reset it but loses on specificity.
       Override here with matching specificity + !important. */
    .project .captioned-media__caption,
    .project.captioned-media--project-types .captioned-media__caption {
        max-height: none !important;
        overflow: visible !important;
        padding-top: 8px !important;
    }

    /* More breathing room between portfolio post cards */
    .horizontal-content__item {
        margin-bottom: 32px !important;
    }

    /* Move sidebar before the content */
    .sidebar-portfolio {
        order: -1 !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    /* Strip the JS-controlled scroll container so it collapses to auto height */
    .sidebar-portfolio .scroll-container,
    .sidebar-portfolio .viewport,
    .sidebar-portfolio .overview {
        height: auto !important;
        overflow: visible !important;
    }

    .sidebar-portfolio .scrollbar {
        display: none !important;
    }

    /* Widget wrapper — halved vertical padding + gap below before first post */
    .sidebar-portfolio .widget.fluxus-project-types {
        padding: 8px 16px;
        margin-bottom: 16px;
        box-sizing: border-box;
    }

    /* Tag list — always visible inline flex for both portfolio listing and single post */
    .sidebar-portfolio .widget.fluxus-project-types ul,
    .sidebar-portfolio-single .widget.fluxus-project-types ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 16px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sidebar-portfolio .widget.fluxus-project-types ul li,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li {
        margin: 0;
    }

    .sidebar-portfolio .widget.fluxus-project-types ul li a,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li a {
        color: #111116;
        text-decoration: none;
        border: 0 none;
    }

    .sidebar-portfolio .widget.fluxus-project-types ul li a:hover,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li a:hover {
        color: #8a8a8a;
    }

    .sidebar-portfolio .widget.fluxus-project-types ul li a.active,
    .sidebar-portfolio-single .widget.fluxus-project-types ul li a.active {
        font-weight: bold;
    }

    /* Hide footer on single portfolio post — replaced by the prev/next nav bar */
    body.single-fluxus_portfolio .site-footer,
    body.single-fluxus_portfolio .site-footer-push {
        display: none !important;
    }

    /* Single portfolio post — prev/next nav fixed to bottom of viewport on mobile */
    body.single-fluxus_portfolio .sidebar-post-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: none;
        padding: 6px 20px;
        z-index: 100;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }

    /* Prevent page content from scrolling behind the fixed nav bar */
    body.single-fluxus_portfolio .site {
        padding-bottom: 50px;
    }

    /* Reverse arrow direction to match reversed button order:
       prev gets ← on the left, next gets → on the right */
    body.single-fluxus_portfolio .sidebar-post-nav__link--prev .sidebar-post-nav__label,
    body.single-fluxus_portfolio .sidebar-post-nav__link--next .sidebar-post-nav__label {
        font-size: 0;
    }
    body.single-fluxus_portfolio .sidebar-post-nav__link--prev .sidebar-post-nav__label::before {
        content: "←";
        font-size: 12px;
        font-family: inherit;
        line-height: 1;
        vertical-align: middle;
    }
    body.single-fluxus_portfolio .sidebar-post-nav__link--prev .sidebar-post-nav__label::after {
        content: " PREVIOUS";
        font-size: 16px;
        font-family: inherit;
        text-transform: uppercase;
        vertical-align: middle;
    }
    body.single-fluxus_portfolio .sidebar-post-nav__link--next .sidebar-post-nav__label::before {
        content: "NEXT ";
        font-size: 16px;
        font-family: inherit;
        text-transform: uppercase;
        vertical-align: middle;
    }
    body.single-fluxus_portfolio .sidebar-post-nav__link--next .sidebar-post-nav__label::after {
        content: "→";
        font-size: 12px;
        font-family: inherit;
        line-height: 1;
        vertical-align: middle;
    }


} /* end @media ≤768px */


/* =============================================================================
   9. MOBILE & TABLET ≤768px — LIBRARY PAGE
   Inline categories at top, 2-column vertical photo grid.
   ============================================================================= */

@media screen and (max-width: 768px) {

    /* Hide desktop-only elements */
    .library-page .library-desktop-grid {
        display: none !important;
    }

    .library-page .library-sidebar {
        display: none !important;
    }

    /* Mobile categories block */
    .library-page .library-categories-mobile {
        display: block;
        padding: 16px;
    }


    /* 2-column photo grid */
    .library-mobile-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        padding: 4px;
    }

    .library-mobile-grid__item {
        display: block;
        overflow: hidden;
    }

    .library-mobile-grid__item img {
        display: block;
        width: 100%;
        height: auto;
    }

    .library-mobile-grid__item img[data-src] {
        aspect-ratio: 2/3;
        background: #e8e8e8;
    }

} /* end @media ≤768px */

@media screen and (max-width: 576px) {

    /* Match the portfolio page 1-column breakpoint */
    .library-mobile-grid {
        grid-template-columns: 1fr;
    }

} /* end @media ≤576px */


/* =============================================================================
   MOBILE — BACK TO TOP BUTTON
   Floating circular button, bottom-right. JS creates and toggles .is-visible.
   ============================================================================= */

@media screen and (max-width: 768px) {

    .back-to-top {
        position: fixed;
        bottom: 20px;
        right: 16px;
        width: 57px;
        height: 57px;
        background: #111116;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        padding: 0;
    }

    .back-to-top.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .back-to-top:hover {
        background: #4d4d4d;
    }

    /* Remove the persistent focus background that lingers after a tap/click,
       but leave hover free to override when the user moves back over the button */
    .back-to-top:focus:not(:focus-visible):not(:hover) {
        outline: none;
        background: #111116;
    }

    /* Chevron icon is an inline SVG injected by JS — flex on the button centres it.
       margin-bottom nudges it up slightly for optical centering of the upward shape. */
    .back-to-top svg {
        margin-bottom: 4px;
    }

    /* Lift above the fixed prev/next nav on single portfolio posts */
    body.single-fluxus_portfolio .back-to-top {
        bottom: 64px;
    }

}


/* =============================================================================
   10. MOBILE & TABLET ≤768px — BURGER MENU: FROSTED GLASS, FULL WIDTH, CENTRED
   ============================================================================= */

@media screen and (max-width: 768px) {

    /* Hide the dark dim overlay — menu is now full-screen frosted glass */
    .burger-menu-dim {
        display: none !important;
    }

    /* Full-width frosted glass panel */
    .burger-menu-items {
        width: 100% !important;
        background: rgba(255, 255, 255, 0.55) !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }

    /* Hide the decorative background image block */
    .burger-menu .bg {
        display: none !important;
    }

    /* Centre the top-level nav list */
    .burger-menu-level-0 {
        width: 100%;
        text-align: center;
    }

    /* Links: centred, dark text on light background, larger font, no separators */
    .burger-menu-link {
        margin-left: 0 !important;
        padding-left: 45px !important;
        text-align: center;
        color: #111116 !important;
        border-bottom: none !important;
        font-size: 2em !important;
    }

    .burger-menu-link-clicked,
    .burger-menu-link:hover {
        color: #8a8a8a !important;
    }

    /* Close (×) button: switch from white to dark */
    .burger-menu--expanded .burger-menu-toggle span:before,
    .burger-menu--expanded .burger-menu-toggle span:after {
        background-color: #111116 !important;
    }

    /* Hide back-to-top and prev/next nav while the burger menu is open */
    html.burger-menu-visible .back-to-top,
    html.burger-menu-visible .sidebar-post-nav {
        opacity: 0 !important;
        pointer-events: none !important;
    }

} /* end @media ≤768px burger menu */


/* =============================================================================
   11. FULL PAGE SLIDER — CONTENT BOX POSITIONING
   Overrides the theme's drag-and-drop pixel values (stored as inline styles),
   which break at different viewport sizes.
   Desktop: vertically centred, left edge at 7% (min 32px from either side).
   Mobile:  horizontally centred, min 16px from either side.
   html.no-scroll is added by the Full Page Slider template only.
   ============================================================================= */

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

    /* Option 1 — vertically centred, no fixed width:
    html.no-scroll .content-box,
    html.no-scroll .content-box[style] {
        left: max(7%, 32px) !important;
        right: auto !important;
        top: calc(50% - 10px) !important;
        transform: translateY(-50%) !important;
        max-width: calc(100% - max(7%, 32px) - 32px) !important;
    }
    */

    html.no-scroll .content-box__contents {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Option 2 — full-height frosted glass panel, flush left, sidebar width */
    html.no-scroll .content-box,
    html.no-scroll .content-box[style] {
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 272px !important;
        max-width: 272px !important;
        height: 100% !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.55) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        backdrop-filter: blur(12px) !important;
        border-right: 1px solid #ebebeb !important;
        overflow: hidden !important;
    }

    /* Option 3 — image fills the right portion (after 272px sidebar + 32px gap) */
    html.no-scroll .swiper-lazy {
        left: 304px !important;
        right: 0 !important;
        width: auto !important;
    }

    /* Hide portfolio button on desktop */
    html.no-scroll .content-box__buttons {
        display: none !important;
    }

}

/* At 769–1024px, match portfolio sidebar shrink to 232px */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    html.no-scroll .content-box,
    html.no-scroll .content-box[style] {
        width: 232px !important;
        max-width: 232px !important;
    }

    html.no-scroll .swiper-lazy {
        left: 264px !important; /* 232px + 32px gap */
    }

}

@media screen and (max-width: 768px) {

    html.no-scroll .content-box,
    html.no-scroll .content-box[style] {
        left: 16px !important;
        right: 16px !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        height: fit-content !important;
        max-height: calc(100% - 32px) !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        overflow-y: auto !important;
    }

}



/* =============================================================================
   5a. SINGLE PORTFOLIO POST — PHOTO TAGS — SHARED (ALL VIEWPORTS)
   ============================================================================= */

.post-photo-categories__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.post-photo-categories__list li { margin: 0; }

.post-photo-categories__list a {
    font-size: 13px;
    color: #8a8a8a;
    text-decoration: none;
    border: 0 none;
    padding: 0;
}

.post-photo-categories__list a:hover { color: #111116; }

.post-photo-categories__list a.active {
    color: #111116;
    font-weight: bold;
}

.post-photo-categories__list li:not(:first-child) a::before { content: '#'; }


/* =============================================================================
   5b. MOBILE ≤768px — SINGLE PORTFOLIO POST — PHOTO TAGS
   Mobile-specific overrides: inline layout, lowercase, # prefix colour lock.
   Tablet (769–1024px) uses the desktop sidebar layout instead (section 5c below).
   ============================================================================= */

@media screen and (max-width: 768px) {

    .post-photo-categories__list {
        justify-content: flex-start;
        gap: 0 2em;
    }

    .post-photo-categories__list li { white-space: nowrap; }

    .post-photo-categories__list a {
        font-weight: normal;
        text-transform: lowercase;
    }

    /* Keep # prefix same colour and weight as the surrounding link text */
    .post-photo-categories__list li:not(:first-child) a::before {
        color: inherit;
        font-weight: normal;
    }
}


/* =============================================================================
   5. SINGLE PORTFOLIO POST — COLLAPSIBLE TEXT PANEL
   Shared rules (tablet 769–1024px and desktop ≥1025px).
   Viewport-specific values (left positions, margin-left) are in the blocks below.
   ============================================================================= */

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

    /* Hide post body text from the sidebar (shown in panel instead) */
    body.single-fluxus_portfolio .sidebar-portfolio-single .textwidget {
        display: none !important;
    }

    body.single-fluxus_portfolio:not(.text-panel-expanded) .post-text-panel {
        width: 0;
    }

    .post-text-panel::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background-color: #ebebeb;
    }

    .post-text-panel__inner {
        width: 448px;
        height: 100%;
        overflow-y: auto;
        padding: 0 32px 0 48px;
        box-sizing: border-box;
        font: normal 13px/24px "Merriweather", georgia, serif;
        color: #111116;
    }

    /* Pull up first element to compensate for Merriweather half-leading
       ((24px line-height − 13px font-size) / 2 ≈ 5px) */
    .post-text-panel__inner > :first-child {
        margin-top: -5px;
    }

    body.single-fluxus_portfolio .site-content {
        position: relative;
        z-index: 49;
    }

    html.horizontal-page--loaded body.single-fluxus_portfolio .site-content {
        transition: margin-left 0.4s ease;
    }

    .post-text-panel {
        position: fixed;
        top: 100px;
        bottom: 80px;
        width: 464px;
        background: #fff;
        overflow: hidden;
        z-index: 48;
        transition: width 0.4s ease;
        box-sizing: border-box;
    }

    .sidebar-expand-toggle {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        margin-left: -12px;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        border: none;
        cursor: pointer;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: left 0.4s ease;
    }

    .sidebar-expand-toggle svg {
        display: block;
        transition: transform 0.4s ease;
    }

    body.text-panel-expanded .sidebar-expand-toggle svg {
        transform: rotate(180deg);
    }

    /* Per-photo categories — matches library-sidebar-inner layout */
    .post-photo-categories {
        margin-top: 16px;
    }

    .post-photo-categories .widget-title {
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
        margin: 0 0 10px !important;
        padding: 0 !important;
        display: block;
    }

    .post-photo-categories__list {
        gap: 4px 16px;
        justify-content: flex-end;
    }

    /* "toutes" on its own full-width row */
    .post-photo-categories__list li:first-child {
        flex-basis: 100%;
    }

    /* Active tag — add underline (colour + weight already set globally) */
    .post-photo-categories__list a.active {
        border-bottom: 1px solid #111116;
        padding-bottom: 2px;
    }

} /* end @media ≥769px single post shared */


/* =============================================================================
   5c. TABLET 769–1024px — SINGLE PORTFOLIO POST — COLLAPSIBLE TEXT PANEL
   Same feature as the desktop block below but using the 232px sidebar width.
   Default state is collapsed (desktop default is expanded).
   ============================================================================= */

@media screen and (min-width: 769px) and (max-width: 1024px) {

    .post-text-panel { left: 232px; }  /* tablet sidebar width */

    body.single-fluxus_portfolio.text-panel-expanded .site-content {
        margin-left: 680px !important; /* 232px sidebar + 464px panel − 16px */
    }

    .sidebar-expand-toggle          { left: 248px; } /* collapsed: 232px sidebar + 16px */
    body.text-panel-expanded .sidebar-expand-toggle { left: 696px; } /* expanded */

} /* end @media tablet 769–1024px */


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

    .post-text-panel { left: 272px; }

    body.single-fluxus_portfolio.text-panel-expanded .site-content {
        margin-left: 720px !important; /* 272px sidebar + 464px panel - 16px */
    }

    .sidebar-expand-toggle          { left: 288px; } /* collapsed: sidebar right edge */
    body.text-panel-expanded .sidebar-expand-toggle { left: 736px; } /* expanded */

} /* end @media ≥1025px */