@charset "UTF-8";
/* Import Wordpress theme header */
/*!
Theme Name: 	fst
Theme URI: 		
Author: 		Heerko
Author URI: 	Heerko
Description: 	Base theme, for use as a starting point for future projects. 
by: Heerko van der Kooij - http:://swummoq.net 
Licensed MIT.
Version:		1.0.1
Tags:			
License:		MIT

*/
/* Custom sass files */
/* base */
/*------------------------------------*\
    $VARS - general
\*------------------------------------*/
/*
* The Typography partial should only contain styles relating to typography.
* Fonts, letterspacing, lineheights, blabla.
*/
@font-face {
  font-family: "Compagnon";
  src: url("_/fonts/Compagnon/Compagnon-Light.eot");
  src: url("_/fonts/Compagnon/Compagnon-Light.eot?#iefix") format("embedded-opentype"), url("_/fonts/Compagnon/Compagnon-Light.woff") format("woff"), url("_/fonts/Compagnon/Compagnon-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: "Compagnon";
  src: url("_/fonts/Compagnon/Compagnon-Italic.eot");
  src: url("_/fonts/Compagnon/Compagnon-Italic.eot?#iefix") format("embedded-opentype"), url("_/fonts/Compagnon/Compagnon-Italic.woff") format("woff"), url("_/fonts/Compagnon/Compagnon-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: "Compagnon";
  src: url("_/fonts/Compagnon/Compagnon-Bold.eot");
  src: url("_/fonts/Compagnon/Compagnon-Bold.eot?#iefix") format("embedded-opentype"), url("_/fonts/Compagnon/Compagnon-Bold.woff") format("woff"), url("_/fonts/Compagnon/Compagnon-Bold.woff2") format("woff2");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: "Noto Serif";
  src: url("_/fonts/Noto-Serif/NotoSerif-Italic.woff") format("woff"), url("_/fonts/Noto-Serif/NotoSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic; }

.noto-serif {
  font-family: 'Noto Serif';
  font-weight: normal;
  font-style: italic; }

/* Setup rem font sizes */
html {
  font-size: 62.5%; }

body {
  font-size: 2rem;
  font-family: Helvetica, Arial, sans-serif; }

h1 {
  font-size: 2rem; }

h2 {
  font-style: italic; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Compagnon"; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family: "Compagnon"; }

.nav-menu a {
  font-family: "Compagnon"; }

a {
  font-family: 'Noto Serif';
  font-weight: normal;
  font-style: italic;
  font-style: italic;
  text-shadow: 0px 0px 3px rgba(111, 0, 255, 0.3);
  text-decoration: none;
  font-size: 1.05em;
  line-height: 0.8em; }

a[href*="/tag/"] {
  text-shadow: 2px 3px 3px rgba(111, 0, 255, 0.3); }

.post-body {
  line-height: 1.2em; }

/*
 * Retina Backgrounds for Compass
 * by:              Gaya Kessler
 * last update:     10/25/13
 *
 * Usage:
 * 1. create background image for pixel ratio 1 screens and put it somewhere in your images folder.
 * 2. create background image for pixel ratio 2 screens and put it somewhere in your images folder.
 * 3. include the background-image property in your Sass/Scss using: '@include background-retina(<ratio-1-imagefile>, <ratio-2-imagefile>)'
 */
/*
* The Layout partial should only contain styles relating to global layout.
* As a rule of thumb these are the styles that would change in a responsive
* layout.
*/
html {
  box-sizing: border-box; }

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

body {
  margin: 0; }

.container {
  padding-bottom: 15px; }

.page-header {
  margin-top: 1px;
  position: sticky;
  width: 100%;
  top: -6.5rem;
  z-index: 10;
  border-bottom: 1px solid black;
  padding-bottom: 7rem; }
  .page-header h1 a {
    display: block;
    margin: 0 auto; }

.flickity-prev-next-button {
  transition: top 0.5s ease; }

@media only screen and (min-width: 600px) {
  .content-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "main main main related";
    grid-gap: 3rem; } }

.attachment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: height 0.5s ease;
  transition-delay: 0.5s;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap; }
  .attachment-list li {
    display: block; }
  .attachment-list img {
    height: 150px;
    width: auto;
    display: block; }

.selected-tags {
  position: absolute;
  width: 100%;
  text-align: center;
  pointer-events: none;
  padding: 1.5rem 0.5rem 0.5rem;
  font-family: "Compagnon";
  font-size: 0.8em; }
  .selected-tags .view-all {
    text-decoration: underline;
    pointer-events: all;
    cursor: pointer;
    margin-top: 0.5rem;
    display: inline-block; }

.audio-attachments {
  list-style: none;
  margin: 0;
  padding: 0; }
  .audio-attachments ::marker {
    content: ""; }
  .audio-attachments li {
    position: relative;
    height: 7.5rem;
    opacity: 1;
    transition: height 0.5s ease, opacity 0.5s ease; }
    .audio-attachments li svg {
      position: absolute;
      cursor: pointer; }
    .audio-attachments li.hide {
      height: 0;
      overflow: hidden;
      opacity: 0; }
  .audio-attachments .audio-player,
  .audio-attachments .mejs-container {
    display: none; }

.current-audio-status {
  font-size: 0.8em; }
  .current-audio-status .section-title {
    margin-top: 2rem;
    font-family: "Compagnon"; }

.entry-attachment {
  max-width: 100rem;
  margin: 0 auto; }

.home article {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2rem; }

body {
  /* for specificity */ }
  body .featherlight-iframe .featherlight-content,
  body .featherlight iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    max-height: none; }
  body .featherlight-loading .featherlight-close {
    display: none; }

.main {
  padding-left: 3rem; }

/*?*/
/**
 * 14.1 Captions
 */
.wp-caption {
  margin-bottom: 1.6em;
  max-width: 100%; }

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

.wp-caption-text {
  color: #707070;
  color: rgba(51, 51, 51, 0.7);
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 0.5em 0; }

.sticky .posted-on {
  display: none; }

.gallery-caption {
  display: block;
  line-height: 1.5;
  padding: 0.5em 0; }

.bypostauthor > article .fn:after {
  top: 8px; }

.alignleft {
  float: left;
  margin-right: 15px; }

.alignright {
  float: right;
  margin-left: 15px; }

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.wp-block-pb-accordion-item {
  margin-left: -3rem; }

.c-accordion__item {
  border-top: 1px solid black; }

.c-accordion__item.is-open h2:focus {
  outline: none !important; }

.c-accordion__item.is-open .c-accordion__title::before {
  transform: translateY(-50%) rotate(180deg); }

.c-accordion__title {
  padding-left: 10rem;
  padding-right: 0;
  font-style: normal; }

.c-accordion__title::before {
  position: absolute;
  top: 50%;
  left: 1rem;
  content: "↓";
  color: #000;
  font-weight: 300;
  transform: translateY(-50%);
  transition: transform 0.5s ease;
  font-size: 7rem; }

.c-accordion__title::after {
  display: none; }

.c-accordion__content {
  padding-left: 6.5rem;
  padding-right: 1rem;
  max-width: 100rem; }

a {
  color: #000000; }

sup {
  vertical-align: top;
  font-size: 0.6em;
  line-height: 1em; }

.post-body ul {
  /* set the list marker to em dash */
  list-style: none;
  margin: 0;
  padding: 0; }
  .post-body ul li {
    margin-left: 2em; }
  .post-body ul ::marker {
    content: "— "; }

.page-header {
  background-color: white; }

#site-title {
  margin: 0;
  padding: 2rem;
  font-size: 3rem; }
  #site-title a {
    font-size: 1em; }

.nav > li a {
  color: #000000;
  text-decoration: none; }

.nav .current-menu-item a,
.nav .current-post-ancestor a {
  color: #000000;
  text-decoration: underline; }

.attachment-list {
  background-color: rgba(111, 0, 255, 0.3); }
  .attachment-list .flickity-prev-next-button {
    top: 128%;
    background-color: transparent !important;
    border-radius: 0; }
  .attachment-list .flickity-prev-next-button .flickity-button-icon {
    top: -10%;
    width: 100%;
    height: 100%; }
  .attachment-list .flickity-prev-next-button.next {
    right: 30px; }

.credit {
  text-align: center; }

h1 a {
  text-align: center;
  text-shadow: none;
  font-style: normal;
  text-decoration: none; }

.entry-title {
  padding-left: 3rem;
  font-size: 4rem;
  margin-block-start: 0.6em; }
  .entry-title a {
    text-decoration: none;
    text-shadow: none; }

.nav-menu {
  position: absolute;
  top: 1rem;
  right: 3rem;
  font-size: 3rem; }
  .nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0; }

.wp-block-group.footnotes {
  margin-top: 6rem;
  font-size: 0.75em; }

.attachment-list {
  box-shadow: 0 0 20px 10px rgba(111, 0, 255, 0.3); }

.attachment-list.flickity-enabled {
  overflow: unset;
  display: block; }

body .featherlight .featherlight-close-icon {
  background-color: transparent;
  font-size: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-family: "Compagnon"; }
  body .featherlight .featherlight-close-icon svg {
    width: 50px;
    height: 50px; }

.play-btn-animated use {
  /* animate the skew horizontally semirandomly */
  animation: skewH 4s infinite alternate; }

.play-btn-animated use + use {
  /* flip horizontally */
  transform: scaleX(-1);
  animation: none; }

@keyframes skewH {
  0% {
    transform: skewX(-5deg); }
  10% {
    transform: skewX(20deg); }
  20% {
    transform: skewX(10deg); }
  30% {
    transform: skewX(-30deg); }
  40% {
    transform: skewX(0deg); }
  50% {
    transform: skewX(-20deg); }
  60% {
    transform: skewX(10deg); }
  70% {
    transform: skewX(-30deg); }
  80% {
    transform: skewX(0deg); }
  90% {
    transform: skewX(25deg); }
  100% {
    transform: skewX(10deg); } }

.single-attachment {
  padding: 3rem;
  background-color: MediumSlateBlue; }
  .single-attachment .container {
    padding-top: 0; }
  .single-attachment .entry-attachment {
    display: flex;
    flex-direction: column;
    align-items: center; }
  .single-attachment .entry-caption {
    font-family: "Compagnon";
    font-size: 90%;
    max-width: 80%;
    margin: 0 auto; }
  .single-attachment .entry-description {
    word-break: break-word;
    line-height: 1.2;
    max-width: 80%; }
  .single-attachment .attachment-image {
    text-align: center; }
    .single-attachment .attachment-image img {
      max-width: 100%;
      height: auto; }
  .single-attachment a {
    font-size: 100%; }
  .single-attachment .close {
    position: fixed;
    z-index: 9999;
    top: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    line-height: 25px;
    cursor: pointer;
    text-align: center;
    font-family: Arial, sans-serif;
    color: #000;
    border: none;
    padding: 0;
    background-color: transparent;
    font-size: 50px;
    line-height: 50px;
    text-decoration: none; }
    .single-attachment .close svg {
      width: 50px;
      height: 50px; }
  .single-attachment h2 {
    font-style: normal;
    text-align: center; }

.inside-iframe .close {
  display: none; }

.inside-iframe .close {
  display: none; }

body.page-template-popup {
  padding: 0 2rem;
  background-color: MediumSlateBlue; }
  body.page-template-popup .content-popup {
    max-width: 100rem;
    margin: 0 auto;
    padding: 2rem 0 0 0; }
  body.page-template-popup header {
    display: none; }
  body.page-template-popup .main {
    padding-left: 0; }
  body.page-template-popup .container {
    padding-top: 0; }
  body.page-template-popup .attachment-image {
    text-align: center; }
    body.page-template-popup .attachment-image img {
      max-width: 100%;
      height: auto; }
  body.page-template-popup .close {
    position: fixed;
    z-index: 9999;
    top: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    line-height: 25px;
    cursor: pointer;
    text-align: center;
    font-family: Arial, sans-serif;
    color: #000;
    border: none;
    padding: 0;
    background-color: transparent;
    font-size: 50px;
    line-height: 50px;
    text-decoration: none; }
    body.page-template-popup .close svg {
      width: 50px;
      height: 50px; }
  body.page-template-popup h2 {
    font-style: normal;
    text-align: center;
    margin-top: 0; }

/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative; }

.flickity-enabled:focus {
  outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%; }

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%; }

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab; }

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing; }

/* ---- flickity-button ---- */
.flickity-button {
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  border: none;
  color: #333; }

.flickity-button:hover {
  background: white;
  cursor: pointer; }

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F; }

.flickity-button:active {
  opacity: 0.6; }

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none; }

.flickity-button-icon {
  fill: currentColor; }

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%); }

.flickity-prev-next-button.previous {
  left: 10px; }

.flickity-prev-next-button.next {
  right: 10px; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px; }

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px; }

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%; }

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1; }

.flickity-rtl .flickity-page-dots {
  direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer; }

.flickity-page-dots .dot.is-selected {
  opacity: 1; }

/**
 * Featherlight – ultra slim jQuery lightbox
 * Version 1.7.13 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
html.with-featherlight {
  /* disable global scrolling when featherlights are visible */
  overflow: hidden; }

.featherlight {
  display: none;
  /* dimensions: spanning the background from edge to edge */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483647;
  /* z-index needs to be >= elements on the site. */
  /* position: centering content */
  text-align: center;
  /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
  white-space: nowrap;
  /* styling */
  cursor: pointer;
  background: #333;
  /* IE8 "hack" for nested featherlights */
  background: rgba(0, 0, 0, 0); }

/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
.featherlight:last-of-type {
  background: rgba(0, 0, 0, 0.8); }

.featherlight:before {
  /* position: trick to center content vertically */
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.featherlight .featherlight-content {
  /* make content container for positioned elements (close button) */
  position: relative;
  /* position: centering vertical and horizontal */
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  /* dimensions: cut off images */
  overflow: auto;
  padding: 25px 25px 0;
  border-bottom: 25px solid transparent;
  /* dimensions: handling large content */
  margin-left: 5%;
  margin-right: 5%;
  max-height: 95%;
  /* styling */
  background: transparent;
  cursor: auto;
  /* reset white-space wrapping */
  white-space: normal; }

/* contains the content */
.featherlight .featherlight-inner {
  /* make sure its visible */
  display: block; }

/* don't show these though */
.featherlight script.featherlight-inner,
.featherlight link.featherlight-inner,
.featherlight style.featherlight-inner {
  display: none; }

.featherlight .featherlight-close-icon {
  /* position: centering vertical and horizontal */
  position: absolute;
  z-index: 9999;
  top: 1rem;
  right: 1rem;
  /* dimensions: 25px x 25px */
  line-height: 25px;
  width: 25px;
  /* styling */
  cursor: pointer;
  text-align: center;
  font-family: Arial, sans-serif;
  background: #fff;
  /* Set the background in case it overlaps the content */
  background: rgba(255, 255, 255, 0.3);
  color: #000;
  border: none;
  padding: 0; }

/* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */
.featherlight .featherlight-close-icon::-moz-focus-inner {
  border: 0;
  padding: 0; }

.featherlight .featherlight-image {
  /* styling */
  width: 100%; }

.featherlight-iframe .featherlight-content {
  /* removed the border for image croping since iframe is edge to edge */
  border-bottom: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch; }

.featherlight iframe {
  /* styling */
  border: none; }

.featherlight * {
  /* See https://github.com/noelboss/featherlight/issues/42 */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
  .featherlight .featherlight-content {
    /* dimensions: maximize lightbox with for small screens */
    margin-left: 0;
    margin-right: 0;
    max-height: 98%;
    padding: 10px 10px 0;
    border-bottom: 10px solid transparent; } }

/* hide non featherlight items when printing */
@media print {
  html.with-featherlight > * > :not(.featherlight) {
    display: none; } }