@charset "UTF-8";
/*! Made with Bones: http://themble.com/bones :) */
/******************************************************************
Site Name: Reassembling Nature
Author: Wolfgang

Stylesheet: Main Stylesheet
******************************************************************/
/*! standardize.css v4.1.1 | MIT License | vincentleinhos.com/standardize */
/**
 * 1. Reset areas around elements, so you can start from scratch.
 * 2. Make elements ready for flexible layouts. The size of `padding`/`border`
 *    does not matter because these values will be subtracted from the width.
 * 3. Set the `font-size` to a percent of the parent element's font size. This is
 *    a method to manage the dynamic resizing of fonts.
 */
*,
*:before,
*:after {
  margin: 0;
  /* 1 */
  padding: 0;
  /* 1 */
  border: 0;
  /* 1 */
  -webkit-box-sizing: border-box;
  /* 2 */
  -moz-box-sizing: border-box;
  /* 2 */
  box-sizing: border-box;
  /* 2 */ }

/**
 * 1. Force a vertical scrollbar to prevent annoying problems.
 * 2. [Better font-rendering on OSX]
 *    (http://maximilianhoffmann.com/posts/better-font-rendering-on-osx)
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  overflow-y: scroll;
  /* 1 */
  -webkit-font-smoothing: antialiased;
  /* 2 */
  -moz-osx-font-smoothing: grayscale;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block; }

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none; }

/* Links (https://www.w3.org/TR/html5/links.html#links)
   ==========================================================================
 * 1. Remove `outline` for better readability.
 * 2. Remove the gray background on active links in IE 10.
 * 3. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  outline: 0;
  /* 1 */
  background-color: transparent;
  /* 2 */
  -webkit-text-decoration-skip: objects;
  /* 3 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Most `ul` tags are not used for enumeration. You could rewrite it in `nav ul`.
 */
ul {
  list-style: none; }

/**
 * 1. Add the dotted bottom border.
 * 2. For now, don’t use experimental features.
 * 3. Set suitable cursor style.
 */
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  /* 1 */
  text-decoration: none;
  /* 2 */
  cursor: help;
  /* 3 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Set font style to `normal`.
 */
address {
  font-style: normal; }

/**
 * 1. Correct the line-height for all headings in Chrome mobile, Firefox,
 *    iOS Safari, Microsoft Edge and IE.
 * 2. [Improved handling of kerning pairs and ligatures in modern browsers]
 *    (http://aestheticallyloyal.com/public/optimize-legibility/)
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.15;
  /* 1 */
  text-rendering: optimizeLegibility;
  /* 2 */ }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size.
 */
small {
  font-size: 80%; }

/**
 * [Prevent `sub` and `sup` elements from affecting the line height]
 * (http://gist.github.com/413930)
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html)
   ========================================================================== */
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/*
 * Set vertical alignment to middle on media elements (aesthetic reasons).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/**
 * Flexible media
 * 1. `!important` just in case, to force correct aspect ratio.
 */
img, video {
  max-width: 100%;
  height: auto !important;
  /* 1 */ }

audio {
  width: 100%; }

/**
 * Change the fill color to match the text color.
 */
svg {
  fill: currentColor; }

/* Grouping content (https://www.w3.org/TR/html5/grouping-content.html)
   ========================================================================== */
/**
 * [This hack](http://en.wikipedia.org/wiki/User:Davidgothberg/Test59)
 * corrects the inheritance and scaling of font size.
 * The duplication of 'monospace' is intentional.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/* Forms (https://www.w3.org/TR/html5/forms.html)
   ========================================================================== */
/**
 * NOTE: Chrome and Safari on OS X allow very limited styling of `select`,
 * unless a `border` property is set.
 */
/**
 * 1. Correct font properties not being inherited.
 * 2. Correct color not being inherited.
 * Known issue: affects color of disabled elements.
 */
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* 1 */
  color: inherit;
  /* 2 */ }

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 * 3. Set suitable cursor style.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Set cursor style for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default; }

/**
 * Remove the inner border and padding in Firefox.
 * NOTE: Necessary despite the reset
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
legend {
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  white-space: normal;
  /* 1 */
  color: inherit;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * Set suitable cursor style.
 */
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer; }

/**
 * Remove rounded corners on `input` elements (aesthetic reasons).
 */
input {
  -webkit-border-radius: 0;
  border-radius: 0; }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. The search input is not fully stylable by default. In Chrome and Safari
 *    on OSX/iOS you can’t control `font`, `padding`, `border`, or `background`.
 *    In Chrome and Safari on Windows you can’t control `border` properly.
 *    It will apply `border-width` but will only show a border color (which
 *    cannot be controlled) for the outer 1px of that border.
 *    Applying `-webkit-appearance: textfield` addresses these issues without
 *    removing the benefits of search inputs (e.g. showing past searches).
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Tabular data (https://www.w3.org/TR/html5/tabular-data.html)
   ==========================================================================
 * Remove border spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* User interaction (https://www.w3.org/TR/html5/editing.html)
   ==========================================================================
 * Remove the tapping delay on clickable elements.
 * 1. Remove the tapping delay in IE 10.
 */
a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  /* 1 */
  touch-action: manipulation; }

/******************************************************************
Site Name:
Author:

Stylesheet: Variables

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/******************************************************************
Site Name:
Author:
Stylesheet: Typography

******************************************************************/
@font-face {
  font-family: 'italyitalic';
  src: url("../fonts/italyita-webfont.eot");
  src: url("../fonts/italyita-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/italyita-webfont.woff2") format("woff2"), url("../fonts/italyita-webfont.woff") format("woff"), url("../fonts/italyita-webfont.ttf") format("truetype"), url("../fonts/italyita-webfont.svg#italyitalic") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'italyregular';
  src: url("../fonts/italy-webfont.eot");
  src: url("../fonts/italy-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/italy-webfont.woff2") format("woff2"), url("../fonts/italy-webfont.woff") format("woff"), url("../fonts/italy-webfont.ttf") format("truetype"), url("../fonts/italy-webfont.svg#italyregular") format("svg");
  font-weight: normal;
  font-style: normal; }
p {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none; }

/******************************************************************
Site Name:
Author:

Stylesheet: Sass Functions

You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

Anyway, keep them all in here so it's easier to find when you're
looking for one.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html

******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.

Example:
box-shadow: 0 0 4px black(0.3);
compiles to:
box-shadow: 0 0 4px rgba(0,0,0,0.3);
*********************/
/*********************
RESPONSIVE HELPER FUNCTION
If you're creating a responsive site, then
you've probably already read
Responsive Web Design: http://www.abookapart.com/products/responsive-web-design

Here's a nice little helper function for calculating
target / context
as mentioned in that book.

Example:
width: cp(650px, 1000px);
or
width: calc-percent(650px, 1000px);
both compile to:
width: 65%;
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Mixins Stylesheet

******************************************************************/
/*********************
TRANSITION
*********************/
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/*********************
BASE (MOBILE) SIZE
*********************/
/*Site Name: Reassembling Nature */
/*Author: Wolfgang */
/*Stylesheet: Base Mobile Stylesheet */
/*GENERAL */
* {
  margin: 0;
  padding: 0; }

body {
  font-family: "italyregular", Cambria, Times New Roman, Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  line-height: 1.175;
  color: black;
  letter-spacing: -0.01rem; }

/*LINKS */
a, a:visited {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid black;
  /* on hover */
  /* on click */
  /* mobile tap color */ }
  a:hover, a:focus, a:visited:hover, a:visited:focus {
    border-bottom: 1px solid black; }
  a:link, a:visited:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

/* H1, H2, H3, H4, H5 STYLES */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  text-rendering: optimizelegibility;
  font-weight: normal;
  font-family: "italyregular", Cambria, Times New Roman, Times, serif;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  /* removing text decoration from all headline links */ }
  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    text-decoration: none; }

h1, .h1 {
  font-size: 1.5rem;
  margin: 0; }

h2, .h2 {
  font-size: 1.7rem;
  letter-spacing: -0.01em; }

h3, .h3 {
  font-size: 1.5rem; }

h4, .h4 {
  font-size: 1.35rem; }

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

strong {
  font-style: normal;
  font-weight: normal; }

i, blockquote, em {
  font-style: normal;
  font-family: "italyitalic", Cambria, Times New Roman, Times, serif; }

/********************* HEADER & NAVIGATION STYLES */
#lang-button {
  display: none; }

#header {
  position: relative;
  height: auto;
  max-height: 80%;
  top: 0;
  left: 0;
  padding: 1em 3% 1.1em 3%;
  width: 100%;
  background-color: white;
  z-index: 150;
  display: block; }
  #header #homelink {
    display: block;
    max-width: 80%; }
    #header #homelink a {
      color: black;
      border: none; }
  #header #mobile-nav-container {
    display: block;
    position: fixed;
    right: 3%;
    top: 1em;
    width: 40px;
    height: 40px;
    z-index: 999;
    border: 2px solid black;
    background-color: none;
    border-radius: 1px; }
    #header #mobile-nav-container #mobile-nav-icon {
      width: 30px;
      height: 38px;
      margin: 0 auto;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: 0.5s ease-in-out;
      -moz-transition: 0.5s ease-in-out;
      -o-transition: 0.5s ease-in-out;
      transition: 0.5s ease-in-out;
      cursor: pointer; }
    #header #mobile-nav-container #mobile-nav-icon span {
      display: block;
      position: absolute;
      height: 3%;
      width: 100%;
      background: black;
      border-radius: 20px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: 0.1s ease-in-out;
      -moz-transition: 0.1s ease-in-out;
      -o-transition: 0.1s ease-in-out;
      transition: 0.1s ease-in-out; }
    #header #mobile-nav-container #mobile-nav-icon span:nth-child(1) {
      border: 1px solid black;
      top: calc(25% - 2px); }
    #header #mobile-nav-container #mobile-nav-icon span:nth-child(2), #header #mobile-nav-container #mobile-nav-icon span:nth-child(3) {
      border: 1px solid black;
      top: calc(50% - 2px); }
    #header #mobile-nav-container #mobile-nav-icon span:nth-child(4) {
      border: 1px solid black;
      top: calc(75% - 2px); }
    #header #mobile-nav-container #mobile-nav-icon.open span:nth-child(1) {
      border: none;
      top: 20%;
      width: 0%;
      left: 50%; }
    #header #mobile-nav-container #mobile-nav-icon.open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg); }
    #header #mobile-nav-container #mobile-nav-icon.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    #header #mobile-nav-container #mobile-nav-icon.open span:nth-child(4) {
      top: 18px;
      width: 0%;
      left: 50%; }
  #header nav {
    height: 100%; }
    #header nav .nav li {
      display: none; }
  #header.mobile-nav-active {
    position: fixed;
    height: 100%;
    max-height: 100%;
    -moz-transition: max-height 0.1s;
    -o-transition: max-height 0.1s;
    -webkit-transition: max-height 0.1s;
    transition: max-height 0.1s;
    -webkit-box-shadow: 6px 0 5px black;
    -moz-box-shadow: 6px 0 5px black;
    box-shadow: 6px 0 5px black; }
    #header.mobile-nav-active #homelink {
      display: none; }
    #header.mobile-nav-active #lang-button {
      display: block;
      position: fixed;
      right: 1.2rem;
      bottom: 1rem; }
      #header.mobile-nav-active #lang-button a {
        font-size: 1.5rem;
        border: none; }
    #header.mobile-nav-active .nav {
      visibility: visible;
      height: 100%;
      width: 100%;
      text-align: left;
      font-size: 1.65rem;
      padding: 0 40px 0 3%;
      /* highlight current page */ }
      #header.mobile-nav-active .nav li {
        display: block;
        margin-bottom: 5vh; }
        #header.mobile-nav-active .nav li:nth-of-type(3) a {
          border: none; }
          #header.mobile-nav-active .nav li:nth-of-type(3) a:after {
            content: ": "; }
        #header.mobile-nav-active .nav li:nth-of-type(3) .sub-menu {
          display: flex;
          flex-direction: column; }
          #header.mobile-nav-active .nav li:nth-of-type(3) .sub-menu li {
            margin-bottom: 0;
            margin-top: 0.75rem;
            margin-left: 1rem;
            max-width: 20rem; }
            #header.mobile-nav-active .nav li:nth-of-type(3) .sub-menu li a {
              font-size: 1.3rem;
              border-bottom: 1px solid black; }
              #header.mobile-nav-active .nav li:nth-of-type(3) .sub-menu li a:after {
                content: ""; }
            #header.mobile-nav-active .nav li:nth-of-type(3) .sub-menu li.current-menu-item a {
              border: none; }
      #header.mobile-nav-active .nav li.current-menu-item a,
      #header.mobile-nav-active .nav li.current_page_item a,
      #header.mobile-nav-active .nav li.current_page_ancestor a {
        opacity: 0.5;
        border: none; }
        #header.mobile-nav-active .nav li.current-menu-item a:hover,
        #header.mobile-nav-active .nav li.current_page_item a:hover,
        #header.mobile-nav-active .nav li.current_page_ancestor a:hover {
          opacity: 0.5;
          border: none; }

.home #container #header {
  padding: 0;
  z-index: 500; }
  .home #container #header #homelink {
    display: none; }

/********************* POSTS & CONTENT STYLES */
#landingpage {
  background-color: black;
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 200;
  top: 0%;
  left: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem; }
  #landingpage #site-title {
    z-index: 400;
    pointer-events: none; }
    #landingpage #site-title a {
      pointer-events: all;
      height: auto;
      font-size: 15vw;
      line-height: 15vw;
      text-align: center;
      letter-spacing: -0.01em;
      text-decoration: none;
      color: white;
      border: none; }
      #landingpage #site-title a:hover {
        border: none; }
  #landingpage .splash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 300;
    opacity: 0.8;
    cursor: e-resize; }
    #landingpage .splash img {
      display: none; }

.content {
  margin: 0.5em 3%;
  display: block; }
  .content.hidden {
    display: none; }
  .content article {
    margin: 0 0 4rem 0; }
  .content .article-date {
    font-size: 1rem;
    margin: 0 0 0.5em 0;
    letter-spacing: -0.001em;
    word-spacing: 0.1rem; }
  .content .article-image {
    margin: 0 0 1.2em 0; }
    .content .article-image img {
      max-height: 80vw;
      margin: 0 auto;
      display: block; }
    .content .article-image p {
      padding-top: 0.25rem;
      font-size: 0.9rem; }
  .content .article-content {
    max-width: 40rem; }
    .content .article-content .article-header {
      margin: 0 0 0.75rem 0; }
      .content .article-content .article-header .article-headline {
        margin: 0; }
      .content .article-content .article-header .article-subheadline {
        margin: 0.2rem 0 0 0; }
    .content .article-content .article-text {
      font-size: 1.2rem;
      margin: 0 0 1rem 0; }
      .content .article-content .article-text li:before {
        content: "— "; }
      .content .article-content .article-text p {
        margin: 0 0 1rem 0; }
        .content .article-content .article-text p a {
          line-height: 1.4em; }
    .content .article-content .article-links {
      font-size: 1.15em;
      margin: 0 0 0.6rem 0; }

.swiper-container .swiper-pagination {
  position: relative;
  margin-top: 0.9rem;
  margin-bottom: -0.75rem;
  width: 100%;
  line-height: 1rem;
  text-align: left;
  letter-spacing: -0.25rem; }
  .swiper-container .swiper-pagination .swiper-pagination-bullet {
    background: none !important;
    opacity: 0.3;
    width: auto;
    height: 0;
    margin: 0 10px 0 0 !important;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s; }
    .swiper-container .swiper-pagination .swiper-pagination-bullet:before {
      border: none;
      content: "°";
      font-size: 1.1rem; }
  .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1; }
.swiper-container .swiper-wrapper #slide_prev, .swiper-container .swiper-wrapper #slide_next {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  z-index: 100;
  cursor: pointer; }
  .swiper-container .swiper-wrapper #slide_prev .swiper-button-prev, .swiper-container .swiper-wrapper #slide_prev .swiper-button-next, .swiper-container .swiper-wrapper #slide_next .swiper-button-prev, .swiper-container .swiper-wrapper #slide_next .swiper-button-next {
    background: none; }
    .swiper-container .swiper-wrapper #slide_prev .swiper-button-prev .icon, .swiper-container .swiper-wrapper #slide_prev .swiper-button-next .icon, .swiper-container .swiper-wrapper #slide_next .swiper-button-prev .icon, .swiper-container .swiper-wrapper #slide_next .swiper-button-next .icon {
      width: 1.8rem;
      height: 1.8rem;
      opacity: 0;
      -moz-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      -webkit-transition: opacity 0.2s;
      transition: opacity 0.2s; }
      .swiper-container .swiper-wrapper #slide_prev .swiper-button-prev .icon path, .swiper-container .swiper-wrapper #slide_prev .swiper-button-next .icon path, .swiper-container .swiper-wrapper #slide_next .swiper-button-prev .icon path, .swiper-container .swiper-wrapper #slide_next .swiper-button-next .icon path {
        fill: #868686; }
  .swiper-container .swiper-wrapper #slide_prev:hover .icon, .swiper-container .swiper-wrapper #slide_next:hover .icon {
    opacity: 1; }
.swiper-container .swiper-wrapper #slide_prev {
  left: 0; }
.swiper-container .swiper-wrapper #slide_next {
  right: 0; }
.swiper-container .swiper-wrapper .swiper-slide .caption {
  width: 100%;
  font-size: 1rem;
  text-align: left;
  margin: 0.5rem 0;
  line-height: 1rem; }

/********************* ACCORDION */
.contact-detail {
  margin-bottom: 1rem; }
  .contact-detail .contact-name {
    font-size: 1.3rem;
    border-bottom: 1px solid black;
    cursor: pointer; }
  .contact-detail ul {
    margin: 1rem 1rem 1.5rem 1rem; }
    .contact-detail ul .contact-cv, .contact-detail ul .contact-email, .contact-detail ul .contact-website {
      margin-bottom: 0.5rem; }

/*********************
LARGER MOBILE DEVICES
*********************/
/*********************
TABLET & SMALLER LAPTOPS
*********************/
@media only screen and (min-width: 768px) {
  /****************************************************************** */
  /*Site Name: */
  /*Author: */
  /*Stylesheet: Tablet & Small Desktop Stylesheet */
  #content {
    margin: 9em 15%; } }
/*********************
DESKTOP
*********************/
@media only screen and (min-width: 1030px) {
  /*Site Name: Reassembling Nature */
  /*Author: Wolfgang */
  /* Stylesheet: Desktop Stylsheet */
  /*GENERAL */
  * {
    font-size: 90%; }

  body {
    line-height: 1.3; }

  p {
    font-size: 1.1rem; }
    p em, p strong, p a, p span, p b {
      font-size: 1.1rem; }

  /* H1, H2, H3, H4, H5 STYLES */
  h1, .h1 {
    font-size: 1.4rem;
    margin: 0; }

  h2, .h2 {
    font-size: 1.6rem;
    letter-spacing: -0.01em; }

  h3, .h3 {
    font-size: 1.4rem; }

  /*LAYOUT */
  /********************* HEADER & NAVIGATION STYLES */
  #header {
    position: fixed;
    padding: 1.5rem 3% 0.5rem 3%;
    display: inline-flex;
    justify-content: space-between;
    line-height: 2rem;
    z-index: 150;
    -webkit-box-shadow: 0px 1px 60px white;
    -moz-box-shadow: 0px 1px 60px white;
    box-shadow: 0px 1px 60px white;
    border-bottom: 1px solid white;
    -moz-transition: border-color 0.2s;
    -o-transition: border-color 0.2s;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s; }
    #header:hover {
      border-bottom: 1px solid black; }
    #header #homelink {
      flex: 0 0 auto;
      font-size: 1.65rem; }
      #header #homelink a:hover {
        border: none;
        color: white; }
        #header #homelink a:hover:after {
          content: "Reassembling the Natural";
          color: black;
          position: fixed;
          top: 0;
          left: 0;
          padding: 1.5rem 3% 0 3%;
          line-height: 1.3; }
    #header #mobile-nav-container {
      display: none; }
    #header nav {
      flex: 0 1 auto; }
      #header nav .nav {
        border-bottom: 0;
        font-size: 2.25rem;
        display: inline-flex;
        justify-content: flex-end;
        align-items: flex-start; }
        #header nav .nav > li:first-child {
          display: none; }
        #header nav .nav li {
          display: block; }
          #header nav .nav li.current-menu-item a {
            color: #868686; }
            #header nav .nav li.current-menu-item a:hover {
              padding-bottom: 1px;
              border: none; }
          #header nav .nav li a {
            font-size: 1.5rem;
            text-decoration: none;
            color: black;
            margin-left: 2.5vw;
            border: none;
            width: auto;
            padding-bottom: 1px;
            border-bottom: 0px solid #fff;
            -moz-transition: border-color 0.5s ease;
            -o-transition: border-color 0.5s ease;
            -webkit-transition: border-color 0.5s ease;
            transition: border-color 0.5s ease; }
            #header nav .nav li a:hover, #header nav .nav li a:focus {
              padding: 0;
              border-bottom: 1px solid black; }
          #header nav .nav li .sub-menu {
            position: absolute;
            visibility: hidden;
            background-color: white;
            margin-left: calc(2.5vw - 1.5rem);
            padding: 1rem 1.5rem 0.5rem 1.5rem;
            -webkit-box-shadow: 0px 2px 60px rgba(255, 255, 255, 0.5);
            -moz-box-shadow: 0px 2px 60px rgba(255, 255, 255, 0.5);
            box-shadow: 0px 2px 60px rgba(255, 255, 255, 0.5);
            border-bottom: 1px solid white;
            -moz-transition: border-color 0.2s;
            -o-transition: border-color 0.2s;
            -webkit-transition: border-color 0.2s;
            transition: border-color 0.2s;
            transform: translateY(-0.5em);
            z-index: -1;
            transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3sz-index 0s linear 0.01s; }
            #header nav .nav li .sub-menu li {
              margin-left: 0;
              padding-left: 0; }
              #header nav .nav li .sub-menu li a {
                font-size: 0.9em;
                float: left;
                margin-left: 0;
                margin-bottom: 0.5rem;
                line-height: 1.75rem;
                letter-spacing: -0.02rem;
                float: left;
                clear: both; }
                #header nav .nav li .sub-menu li a:after {
                  margin: 0; }
        #header nav .nav li:hover .sub-menu {
          border-bottom: 1px solid black;
          visibility: visible;
          opacity: 1;
          z-index: 1;
          transform: translateY(0%);
          transition-delay: 0s, 0s, 0.1s; }
          #header nav .nav li:hover .sub-menu li.current-menu-item a {
            color: #868686; }
            #header nav .nav li:hover .sub-menu li.current-menu-item a:hover {
              border: none; }
              #header nav .nav li:hover .sub-menu li.current-menu-item a:hover:after {
                background-color: #fff; }
        #header nav .nav li:hover.active a {
          border: none;
          color: #868686; }
        #header nav .nav li:hover.active .sub-menu {
          height: auto;
          max-height: 300px;
          padding: 12px 3% 12px 3%;
          -moz-transition: max-height 0.2s ease;
          -o-transition: max-height 0.2s ease;
          -webkit-transition: max-height 0.2s ease;
          transition: max-height 0.2s ease; }
          #header nav .nav li:hover.active .sub-menu a {
            color: black; }
            #header nav .nav li:hover.active .sub-menu a:hover {
              border-bottom: 1px solid black; }

  .home #container #header {
    padding: 1.5rem 3% 0.5rem 3%;
    z-index: 150; }
    .home #container #header #homelink {
      display: block; }

  /********************* POSTS & CONTENT STYLES */
  #landingpage #site-title {
    position: absolute;
    top: 0%;
    left: 0;
    bottom: 2%;
    right: 0;
    margin: auto;
    width: 100%;
    z-index: 900;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; }
    #landingpage #site-title a {
      pointer-events: all;
      height: auto;
      font-size: 10vw;
      line-height: 10vw;
      letter-spacing: -0.15rem;
      text-decoration: none;
      color: white;
      border: none; }
      #landingpage #site-title a:hover {
        border: none; }

  .content {
    padding-top: 6rem; }
    .content main article {
      margin-bottom: 3.5rem; }
    .content main .article-date {
      margin: 0 auto 0.5em auto;
      width: 100%;
      max-width: 52rem; }
    .content main .article-image {
      margin: 0 0 1.6em 0;
      width: 100%;
      max-width: 950px; }
      .content main .article-image img {
        margin: 0;
        max-height: 70vh; }
    .content main .article-content {
      width: 100%; }
      .content main .article-content .article-text, .content main .article-content h4 {
        font-size: 1.35rem; }
        .content main .article-content .article-text p, .content main .article-content h4 p {
          margin: 0 0 0.75rem 0; }
      .content main .article-content .article-links {
        font-size: 1.2rem;
        margin: -0.4rem 0 0.5rem 0; }
        .content main .article-content .article-links .article-link {
          margin-bottom: 0.25rem; }

  /********************* SIDEBAR LAYOUTS */
  #blog {
    margin-right: 28vw; }
    #blog main {
      max-width: 50vw;
      margin: 0 auto; }
      #blog main .article-date {
        max-width: 50vw; }
      #blog main .article-header {
        margin-bottom: 0.75rem; }
      #blog main .article-image {
        margin: 0 0 1.1em 0;
        max-width: 950px; }
        #blog main .article-image img {
          max-height: 25vw;
          margin: 0; }
      #blog main .article-content .article-text {
        font-size: 1.3rem; }
      #blog main .article-content .article-links {
        font-size: 1.15rem; }

  #index-column {
    position: fixed;
    right: 3vw;
    top: 4.55rem;
    width: 25vw;
    bottom: 1.4rem;
    overflow: hidden; }
    #index-column #index {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 2.5rem;
      right: -17px;
      overflow-y: scroll;
      padding-right: 1em;
      border-bottom: 1px solid black; }
      #index-column #index ul > li {
        margin-bottom: 7px; }
      #index-column #index ul li a {
        font-size: 1.1rem;
        font-family: "italyitalic", Cambria, Times New Roman, Times, serif;
        line-height: 1.35rem;
        text-decoration: none;
        border: none;
        border-bottom: 0px solid white;
        -moz-transition: border-color 0.8s;
        -o-transition: border-color 0.8s;
        -webkit-transition: border-color 0.8s;
        transition: border-color 0.8s; }
        #index-column #index ul li a:hover {
          padding: 6px 0 1px 0;
          border-bottom: 1px solid black; }
    #index-column #sidebar-scroll-container {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.5rem;
      padding-left: 1rem; }
      #index-column #sidebar-scroll-container #scrollUp, #index-column #sidebar-scroll-container #scrollDown {
        position: relative;
        display: inline-block;
        cursor: pointer; }
        #index-column #sidebar-scroll-container #scrollUp svg, #index-column #sidebar-scroll-container #scrollDown svg {
          height: 12px;
          width: 28px;
          margin-right: 1rem; }
          #index-column #sidebar-scroll-container #scrollUp svg path, #index-column #sidebar-scroll-container #scrollDown svg path {
            stroke: black;
            fill: transparent;
            stroke-width: 1px; }

  #lang-button {
    display: block;
    position: fixed;
    bottom: 1.4rem;
    right: 3%;
    z-index: 999; }
    #lang-button a {
      font-size: 1.2rem;
      border: none;
      text-shadow: -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white, 1px 1px 2px white; } }
/*********************
LARGE VIEWING SIZE
*********************/
@media only screen and (min-width: 1240px) {
  /* Site Name: */
  /* Author: */
  /* Stylesheet: Large Monitor Stylsheet */ }