/*!
 *	WvonM
 *
 *	@author Maik Derek Schneitler
 *
 */
/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */
/**
 * List functions courtesy of the wonderful folks at Team Sass.
 * Check out their awesome grid: Singularity.
 */
/**
 * Get  percentage from a given ratio.
 * @param {number} [$ratio=1] - The column ratio of the element.
 * @returns {number} - The percentage value.
 */
/**
 * Work out the column widths based on the ratio and gutter sizes.
 * @param {number} [$ratios=1] - The column ratio of the element.
 * @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
 * @returns {list} $width $gutter - A list containing the with and gutter for the element.
 */
/**
 * Get the set layout direction for the project.
 * @returns {string} $direction - The layout direction.
 */
/**
 * Replace a specified list value with a new value (uses built in set-nth() if available)
 * @param {list} $list - The list of values you want to alter.
 * @param {number} $index - The index of the list item you want to replace.
 * @param {*} $value - The value you want to replace $index with.
 * @returns {list} $list - The list with the value replaced or removed.
 * @warn if an invalid index is supplied.
 */
/**
 * Reverse a list (progressively enhanced for Sass 3.3)
 * @param {list} $list - The list of values you want to reverse.
 * @returns {list} $result - The reversed list.
 */
/**
 * Get the opposite direction to a given value.
 * @param {string} $dir - The direction you want the opposite of.
 * @returns {string} - The opposite direction to $dir.
 * @warn if an incorrect string is provided.
 */
/**
 * Style an element as a column with a gutter.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
 * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column mixin.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Get the width of a column and nothing else.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$g=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Get the gutter size of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [g=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column-width function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * An alias for the column-gutter function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Style an element as a column without any gutters for a seamless row.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
 */
/**
 * Reorder columns without altering the HTML.
 * @param {number} [$ratios=0] - Specify how far along you want the element to move.
 * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Reset an element that has had shift() applied to it.
 */
/**
 * View the grid and its layers for easy debugging.
 * @param {string} [$color=black] - The background tint applied.
 * @param {boolean} [$important=false] - Whether to apply the style as !important.
 */
/**
 *  Alias for edit().
 */
/**
 * Horizontally center an element.
 * @param {number} [$max-width=1410px] - The max width the element can be.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 */
/**
 * Uncenter an element.
 */
/**
 * Stack an element so that nothing is either side of it.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 * @param {boolean/string} [$align=false] - Specify the text align for the element.
 */
/**
 * Unstack an element.
 */
/**
 * Center an element on either or both axes.
 * @requires A parent container with relative positioning.
 * @param {string} [$direction=both] - Specify which axes to center the element on.
 */
/**
 * Apply a clearfix to an element.
 */
/*!
*
* global reset
*
*/
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0; }

h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
  margin: 0;
  padding: 0;
  font: inherit; }

li {
  display: block; }

h1,
h2,
h3,
h4 {
  font-size: inherit; }

a {
  text-decoration: none;
  color: inherit; }

img {
  width: 100%;
  max-width: 100%;
  height: auto !important;
  display: block; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  background-color: inherit;
  font-family: inherit;
  cursor: pointer; }

* {
  box-sizing: border-box;
  outline: none; }

html {
  font-size: 100%; }

body {
  margin: 0;
  padding: 0;
  line-height: 1.5; }

/*
* global @font-face
* @font-face declared in this file are used all over the project
*
*/
@font-face {
  font-family: 'Akzidenz-Grotesk';
  src: url("/webfonts/AkzidenzGrotesk-Light.eot");
  src: url("/webfonts/AkzidenzGrotesk-Light.eot?#iefix") format("embedded-opentype"), url("/webfonts/AkzidenzGrotesk-Light.woff") format("woff"), url("/webfonts/AkzidenzGrotesk-Light.ttf") format("truetype"), url("/webfonts/AkzidenzGrotesk-Light.svg#43cb01e560749a9b096ce73486ba70a7") format("svg");
  font-style: normal;
  font-weight: 200; }

@font-face {
  font-family: 'Akzidenz-Grotesk';
  src: url("/webfonts/AkzidenzGrotesk-Regular.eot");
  src: url("/webfonts/AkzidenzGrotesk-Regular.eot?#iefix") format("embedded-opentype"), url("/webfonts/AkzidenzGrotesk-Regular.woff") format("woff"), url("/webfonts/AkzidenzGrotesk-Regular.ttf") format("truetype"), url("/webfonts/AkzidenzGrotesk-Regular.svg#43cb01e560749a9b096ce73486ba70a7") format("svg");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'Akzidenz-Grotesk';
  src: url("/webfonts/AkzidenzGrotesk-Medium.eot");
  src: url("/webfonts/AkzidenzGrotesk-Medium.eot?#iefix") format("embedded-opentype"), url("/webfonts/AkzidenzGrotesk-Medium.woff") format("woff"), url("/webfonts/AkzidenzGrotesk-Medium.ttf") format("truetype"), url("/webfonts/AkzidenzGrotesk-Medium.svg#43237ab3bb803f02519de230c227798a") format("svg");
  font-style: normal;
  font-weight: 600; }

@font-face {
  font-family: 'Akzidenz-Grotesk';
  src: url("/webfonts/AkzidenzGrotesk-Bold.eot");
  src: url("/webfonts/AkzidenzGrotesk-Bold.eot?#iefix") format("embedded-opentype"), url("/webfonts/AkzidenzGrotesk-Bold.woff") format("woff"), url("/webfonts/AkzidenzGrotesk-Bold.ttf") format("truetype"), url("/webfonts/AkzidenzGrotesk-Bold.svg#26b556134714d1af9fb267f75de39c73") format("svg");
  font-style: normal;
  font-weight: 700; }

@font-face {
  font-family: 'Walbaum';
  src: url("/webfonts/WalbaumEFOP-Regular.eot");
  src: url("/webfonts/WalbaumEFOP-Regular.eot?#iefix") format("embedded-opentype"), url("/webfonts/WalbaumEFOP-Regular.woff") format("woff"), url("/webfonts/WalbaumEFOP-Regular.ttf") format("truetype"), url("/webfonts/WalbaumEFOP-Regular.svg#369af4477a8cbf88371c84eb3e41b5fc") format("svg");
  font-style: normal;
  font-weight: 400; }

/*
* global functions
* functions declared in this file are used all over the project
*
*/
/* ==========================================================================
grid
========================================================================== */
/* ==========================================================================
typography
========================================================================== */
/*
* global variables
* variables declared in this file are used all over the project
*
*/
/* ==========================================================================
compass "vertical rhythm"
========================================================================== */
/* ==========================================================================
helper
========================================================================== */
/* ==========================================================================
colors
========================================================================== */
/* ==========================================================================
responsive breakpoints
========================================================================== */
/* classes to use breakpoints in js. for example:
*
if ($('.breakpoint--tablet-p').is(":visible")) {
$('#wrapper').removeClass("nav-is-visible");
};
*
*/
.breakpoint--tablet-l {
  display: none; }
  @media all and (max-width: 1024px) {
    .breakpoint--tablet-l {
      display: block; } }

.breakpoint--tablet-p {
  display: none; }
  @media all and (max-width: 768px) {
    .breakpoint--tablet-p {
      display: block; } }

.breakpoint--mobile {
  display: none; }
  @media all and (max-width: 620px) {
    .breakpoint--mobile {
      display: block; } }

/*
* global mixins
* mixins declared in this file are used all over the project
*
*/
/**
 * Font mixins
 */
/*
 * Disable text selection
 */
/**
 * @description
 * This mixin enables you to use the CSS3 value `rem`, which lets you define
 * property sizes based on the root element's font-size.
 *
 * @author drublic
 *
 * @link caniuse http://caniuse.com/rem
 * @link spec http://www.w3.org/TR/css3-values/#relative0
 *
 * Note: Depending on the font-size of the root-element `rem` calculates a
 * property of a current element. The fallback solution accepts a
 * `default-font-size`-argument which is 16px by default.
 */
/*
  * Returns a number without unit. E.g. 30px -> 30
  * Borrowed from https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
  *
  * @param value {String}
  * @returns
  *   <Number>
  */
/*
  * Outputs properties that use rem with a px fallback.
  * It also takes px values and converts them to rem.
  *
  * @param property
  * @param values
  * @param default-font-size int optional
  * @returns
  *   <property>: <parsed value>px;
  *   <property>: <parsed value>rem;
  *
  * @example
  *   .selector {
  *     @include x-rem(font-size, 1.3);
  *     @include x-rem(padding, 20px);
  *   }
  */
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
/*
* typography
* styles declared in context of typography in this file are used all over the project
*
*/
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  color: #151515;
  font-size: 15px;
  font-family: Akzidenz-Grotesk, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400; }

body {
  line-height: 1.2; }

p {
  margin-bottom: 15px;
  margin-bottom: 1rem; }
  p a {
    border-bottom: 1px solid #151515; }

strong {
  font-family: Akzidenz-Grotesk, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 600; }

a {
  position: relative;
  text-decoration: none;
  color: #151515; }

ul {
  margin-bottom: 15px;
  margin-bottom: 1rem; }

/*
* global styles
* all declared styles are the main layout styles and used all over the project
*
*/
body,
html {
  height: 100%;
  min-height: 100%;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }

body {
  position: relative; }
  body:before, body:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    display: none; }
  body:before {
    z-index: 10;
    background-image: linear-gradient(rgba(233, 0, 0, 0.8) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 100% 1.6rem; }
  body:after {
    z-index: 9;
    background-image: linear-gradient(rgba(0, 233, 0, 0.8) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 100% 6px; }
  body.va-debug:before, body.va-debug:after {
    display: block;
    pointer-events: none; }

main {
  display: block;
  padding-top: 60px; }
  main:before, main:after {
    content: ' ';
    /* 1 */
    display: table;
    /* 2 */ }
  main:after {
    clear: both; }
  @media all and (max-width: 1280px) {
    main {
      padding-top: 50px; } }
  @media all and (max-width: 620px) {
    main {
      padding-top: 30px; } }
  @media all and (max-width: 372px) {
    main {
      padding-top: 30px; } }
  .is-works main {
    padding-top: 110px; }
    @media all and (max-width: 1280px) {
      .is-works main {
        padding-top: 90px; } }
    @media all and (max-width: 620px) {
      .is-works main {
        padding-top: 55px; } }
    @media all and (max-width: 372px) {
      .is-works main {
        padding-top: 50px; } }
  @media all and (max-width: 1080px) {
    .is-subpage main {
      padding-top: 90px; } }
  @media all and (max-width: 620px) {
    .is-subpage main {
      padding-top: 55px; } }
  @media all and (max-width: 372px) {
    .is-subpage main {
      padding-top: 50px; } }

.mod_container {
  padding: 0 20px;
  padding: 0 1.33333rem;
  width: 75%;
  margin: 0 auto; }
  @media all and (max-width: 1080px) {
    .mod_container {
      width: 100%; } }
  @media all and (max-width: 620px) {
    .mod_container {
      padding: 0 10px;
      padding: 0 0.66667rem; } }

.mod_container--full {
  width: 100%;
  max-width: 100%; }

.mod_container--mb {
  margin-bottom: 80px; }

/*
*
* indicator classes
*
* they are used to change states. if one class is used for more than one object at one place, put it here.
* so you'll be able to see which elements are affected.
*
*/
/*
 * helper functions
 * single classes that can be used "inline style"
 *
 */
.is-hidden {
  display: none; }

.lazy-load {
  opacity: 0;
  transition: opacity 1s; }
  .lazy-load.loaded {
    opacity: 1; }

/*!
 *	a file for quick testing css
 *
 */
.show-mobile {
  display: none; }
  @media all and (max-width: 620px) {
    .show-mobile {
      display: block; } }

@media (max-width: 620px) {
  .hide-mobile {
    display: none; } }

.mod_header {
  background-color: #fff;
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  height: 60px;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  padding: 0 1.33333rem;
  text-transform: uppercase;
  font-size: 50px; }
  @media all and (max-width: 1280px) {
    .mod_header {
      height: 50px; } }
  @media all and (max-width: 620px) {
    .mod_header {
      height: 30px;
      padding: 0 10px;
      padding: 0 0.66667rem; } }
  @media all and (max-width: 372px) {
    .mod_header {
      height: 30px; } }
  @media all and (max-width: 1280px) {
    .mod_header {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .mod_header {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .mod_header {
      font-size: 21px; } }
  .mod_header * {
    height: 50px;
    line-height: 50px; }
    @media all and (max-width: 1280px) {
      .mod_header * {
        height: 40px;
        line-height: 40px; } }
    @media all and (max-width: 620px) {
      .mod_header * {
        height: 25px;
        line-height: 25px; } }

@media all and (max-width: 1080px) {
  .mod_header__logo {
    width: 100%; } }

.mod_header__nav {
  right: 20px; }
  @media all and (max-width: 1080px) {
    .mod_header__nav {
      display: none; } }
  .mod_header__nav li {
    display: inline-block;
    margin-left: 120px;
    cursor: pointer; }
    .mod_header__nav li:first-child {
      margin-left: 0; }
    @media all and (max-width: 1280px) {
      .mod_header__nav li {
        margin-left: 90px; } }
    @media all and (max-width: 620px) {
      .mod_header__nav li {
        margin-left: 60px; } }
    .mod_header__nav li:hover a, .mod_header__nav li.nav__active a {
      font-style: italic; }

.mod_header__works-nav {
  position: absolute;
  width: 500px;
  font-style: normal;
  margin-top: 0px; }
  .mod_header__works-nav li {
    margin-left: 0;
    display: inline;
    margin-right: 20px; }

.mod_header__active-page {
  display: none; }
  @media all and (max-width: 1080px) {
    .mod_header__active-page {
      display: block;
      position: absolute;
      top: 46px;
      font-style: italic;
      left: 20px;
      left: 1.33333rem; }
      .mod_header__active-page li {
        display: inline; }
        .mod_header__active-page li:hover {
          cursor: pointer; } }
  @media all and (max-width: 620px) {
    .mod_header__active-page {
      top: 30px;
      left: 10px;
      left: 0.66667rem; } }
  @media all and (max-width: 372px) {
    .mod_header__active-page {
      top: 26px; } }

.mod_header__works-nav-elem:hover, .mod_header__works-nav-elem.is-active {
  font-style: italic; }

.m-mobile-works-switch {
  font-size: 50px;
  text-transform: uppercase;
  cursor: pointer;
  position: absolute;
  padding-right: 4px;
  right: 20px;
  right: 1.33333rem;
  top: 45px;
  top: 3rem;
  display: none; }
  @media all and (max-width: 1280px) {
    .m-mobile-works-switch {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .m-mobile-works-switch {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .m-mobile-works-switch {
      font-size: 21px; } }
  .m-mobile-works-switch:hover {
    font-style: italic; }
  @media all and (max-width: 1080px) {
    .m-mobile-works-switch {
      display: block; } }
  @media all and (max-width: 620px) {
    .m-mobile-works-switch {
      top: 30px;
      top: 2rem;
      right: 10px;
      right: 0.66667rem; } }
  @media all and (max-width: 372px) {
    .m-mobile-works-switch {
      top: 26px;
      top: 1.73333rem; } }

.mod_mobile-nav {
  position: fixed;
  top: 46px;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 1;
  font-size: 50px;
  text-transform: uppercase;
  z-index: 9999;
  background-color: #fff;
  padding: 0 20px 20px 20px;
  padding: 0 1.33333rem 1.33333rem 1.33333rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none; }
  @media all and (max-width: 1280px) {
    .mod_mobile-nav {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .mod_mobile-nav {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .mod_mobile-nav {
      font-size: 21px; } }
  @media all and (max-width: 620px) {
    .mod_mobile-nav {
      top: 30px;
      padding: 0 10px 10px 10px;
      padding: 0 0.66667rem 0.66667rem 0.66667rem; } }
  @media all and (max-width: 372px) {
    .mod_mobile-nav {
      top: 28px; } }
  .mod_mobile-nav.is-in {
    opacity: 1;
    pointer-events: initial; }

.m-header__blender {
  display: none; }

.is-works .m-header__blender, .is-subpage .m-header__blender {
  display: block;
  position: fixed;
  right: 0;
  left: 0;
  top: 60px;
  height: 50px;
  background-color: #fff;
  z-index: 99; }
  @media all and (max-width: 1280px) {
    .is-works .m-header__blender, .is-subpage .m-header__blender {
      height: 50px;
      top: 40px; } }
  @media all and (max-width: 1080px) {
    .is-works .m-header__blender, .is-subpage .m-header__blender {
      height: 50px;
      top: 40px; } }
  @media all and (max-width: 620px) {
    .is-works .m-header__blender, .is-subpage .m-header__blender {
      height: 30px;
      top: 25px; } }

.mod_works-navigation {
  position: fixed;
  width: 25%;
  float: left;
  line-height: 1.5;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  @media (max-width: 1024px) {
    .mod_works-navigation {
      display: none; } }

.mod_works-navigation__trigger {
  margin-bottom: 15px;
  margin-bottom: 1rem;
  cursor: pointer; }
  .mod_works-navigation__trigger:before {
    display: inline-block;
    width: 0.66667em;
    content: '+ '; }
  .mod_works-navigation__trigger.is-active:before {
    content: '- '; }

.mod_works-navigation__list {
  visibility: hidden; }
  .mod_works-navigation__list a {
    display: block; }
  .mod_works-navigation__list.is-visible {
    visibility: visible; }

.mod_works {
  float: left;
  width: 75%;
  margin-left: 25%; }
  @media (max-width: 1024px) {
    .mod_works {
      margin-left: 0;
      width: 100%; } }
  @media (max-width: 620px) {
    .mod_works {
      margin-bottom: 60px;
      margin-bottom: 4rem; } }

.mod_works__elem {
  margin-bottom: 40px;
  margin-bottom: 2.66667rem;
  display: block;
  overflow: hidden; }
  .mod_works__elem:hover button {
    text-decoration: underline; }

.mod_works__description {
  padding-right: 20px;
  padding-right: 1.33333rem;
  float: left;
  width: 33.3%; }
  @media (max-width: 620px) {
    .mod_works__description {
      margin-bottom: 15px;
      margin-bottom: 1rem;
      width: 100%; } }

.mod_works__year {
  margin-bottom: 7.5px;
  margin-bottom: 0.5rem;
  font-size: 24px;
  font-size: 1.6rem;
  line-height: 1; }
  @media (max-width: 620px) {
    .mod_works__year {
      font-size: 16px;
      font-size: 1.06667rem; } }

.mod_works__headline {
  font-size: 42px;
  font-size: 2.8rem;
  margin-bottom: 15px;
  margin-bottom: 1rem;
  line-height: 1;
  word-break: break-word; }
  @media (max-width: 620px) {
    .mod_works__headline {
      font-size: 24px;
      font-size: 1.6rem; } }

.mod_works__category {
  font-family: Akzidenz-Grotesk, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 15px;
  margin-bottom: 1rem;
  text-transform: uppercase;
  line-height: 1; }

.mod_works__image {
  width: 66.66%;
  float: left; }
  .mod_works__image img {
    max-height: 60vh; }
  @media (max-width: 620px) {
    .mod_works__image {
      width: 100%; } }

.mod_info.big-text {
  font-size: 50px; }
  @media all and (max-width: 1280px) {
    .mod_info.big-text {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .mod_info.big-text {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .mod_info.big-text {
      font-size: 21px; } }

.mod__info__intro {
  font-size: 50px;
  padding-bottom: 60px;
  padding-bottom: 4rem; }
  @media all and (max-width: 1280px) {
    .mod__info__intro {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .mod__info__intro {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .mod__info__intro {
      font-size: 21px; } }

@media all and (min-width: 769px) {
  .mod_info__image-text {
    display: flex;
    margin-left: -20px;
    margin-left: -1.33333rem;
    margin-right: -20px;
    margin-right: -1.33333rem; } }

@media all and (min-width: 769px) {
  .mod_info__image-text__elem {
    margin: 0 20px;
    margin: 0 1.33333rem;
    width: 50%; } }

.mod_info__image-text__elem h3 {
  text-decoration: underline; }

.mod_info__image-text__elem--images img {
  margin-bottom: 20px;
  margin-bottom: 1.33333rem; }

@media all and (max-width: 768px) {
  .mod_info__image-text__elem--images {
    margin-bottom: 20px;
    margin-bottom: 1.33333rem; } }

.mod_moodboard {
  margin-left: -20px;
  margin-left: -1.33333rem;
  font-size: 0;
  clear: both;
  overflow: hidden; }
  @media all and (max-width: 620px) {
    .mod_moodboard {
      margin-left: -11.25px;
      margin-left: -0.75rem; } }

.mod_moodboard__elem {
  padding-bottom: 15px;
  padding-bottom: 1rem;
  position: relative;
  display: block; }
  .mod_moodboard__elem img {
    width: 100%; }
  .mod_moodboard__elem:hover .mod_moodboard__elem__text {
    color: #151515; }

.mod_moodboard__elem__text {
  font-size: 12px;
  font-size: 0.8rem;
  height: 30px;
  height: 2rem;
  font-family: Akzidenz-Grotesk, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  position: absolute;
  right: 0;
  bottom: -22.5px;
  bottom: -1.5rem;
  display: block;
  overflow: hidden;
  text-align: right;
  color: #fff; }
  .touch .mod_moodboard__elem__text {
    color: #151515; }

[mood-width] {
  padding-left: 20px;
  padding-left: 1.33333rem;
  margin-bottom: 19px;
  margin-bottom: 1.26667rem;
  display: inline-block;
  height: 100%; }
  @media all and (max-width: 620px) {
    [mood-width] {
      padding-left: 11.25px;
      padding-left: 0.75rem; } }

[mood-width~='full'] {
  width: 100%; }

[mood-width~='3/4'] {
  width: 75%; }

[mood-width~='2/3'] {
  width: 66.66%; }

[mood-width~='1/2'] {
  width: 50%; }
  @media all and (max-width: 620px) {
    [mood-width~='1/2'] {
      width: 100%; } }

[mood-width~='1/3'] {
  width: 33.33%; }
  @media all and (max-width: 1024px) {
    [mood-width~='1/3'] {
      width: 50%; } }
  @media all and (max-width: 620px) {
    [mood-width~='1/3'] {
      width: 100%; } }

[mood-width~='1/4'] {
  width: 25%; }
  @media all and (max-width: 1024px) {
    [mood-width~='1/4'] {
      width: 50%; } }
  @media all and (max-width: 620px) {
    [mood-width~='1/4'] {
      width: 100%; } }

[mood-width~='sixt'] {
  width: 16.666666667%; }

@media (max-width: 620px) {
  .mod_section_title {
    line-height: 1;
    margin-bottom: 15px;
    margin-bottom: 1rem; } }

.mod_nextprev {
  position: relative;
  font-size: 50px;
  padding: 20px;
  padding: 1.33333rem;
  text-transform: uppercase;
  display: flex; }
  @media all and (max-width: 1280px) {
    .mod_nextprev {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .mod_nextprev {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .mod_nextprev {
      font-size: 21px; } }

.mod_nextprev__next {
  margin-left: auto; }

.mod_nextprev__logo {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%); }

.mod_nextprev__logo-img {
  max-width: 60px;
  margin: 0 auto; }
  @media all and (max-width: 1280px) {
    .mod_nextprev__logo-img {
      max-width: 50px; } }
  @media all and (max-width: 620px) {
    .mod_nextprev__logo-img {
      max-width: 30px; } }

.mod_overlay {
  font-size: 20px;
  font-size: 1.33333rem;
  padding: 105px 11.25px 11.25px 11.25px;
  padding: 7rem 0.75rem 0.75rem 0.75rem;
  margin-bottom: -90px;
  margin-bottom: -6rem; }
  @media all and (min-width: 621px) {
    .mod_overlay {
      z-index: 10000;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: table;
      width: 100%;
      height: 100%;
      font-size: 6vh;
      color: #fff;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.75); }
      .touch .mod_overlay {
        display: none; }
      .mod_overlay .inner {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        padding: 20px;
        padding: 1.33333rem;
        opacity: 0;
        transition: opacity 1s; }
        .js-fade-in .mod_overlay .inner {
          opacity: 1; }
      .mod_overlay img {
        max-width: 100px;
        margin: 0 auto; } }

.mod_work__headline {
  font-size: 50px;
  text-transform: uppercase; }
  @media all and (max-width: 1280px) {
    .mod_work__headline {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .mod_work__headline {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .mod_work__headline {
      font-size: 21px; } }

.mod_work__info {
  display: flex;
  margin-bottom: 17px;
  margin-bottom: 1.13333rem; }
  .mod_work__info h4 {
    display: inline; }

.mod_work__info-elem {
  margin-right: 20px;
  margin-right: 1.33333rem; }

.mod_work__text {
  font-size: 50px; }
  @media all and (max-width: 1280px) {
    .mod_work__text {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .mod_work__text {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .mod_work__text {
      font-size: 21px; } }
  .mod_work__text p {
    margin-bottom: 0; }

.mod_work__two-images {
  display: flex;
  margin-left: -10px;
  margin-left: -0.66667rem;
  margin-right: -10px;
  margin-right: -0.66667rem; }
  .mod_work__two-images .mod_work__two-images__image {
    width: 50%; }
  @media all and (max-width: 768px) {
    .mod_work__two-images {
      display: block; }
      .mod_work__two-images .mod_work__two-images__image {
        width: auto; } }

.mod_work__two-images__image {
  margin: 0 10px;
  margin: 0 0.66667rem; }
  @media all and (max-width: 768px) {
    .mod_work__two-images__image {
      margin-bottom: 20px;
      margin-bottom: 1.33333rem; } }

.mod_work__three-images {
  display: flex;
  margin-left: -10px;
  margin-left: -0.66667rem;
  margin-right: -10px;
  margin-right: -0.66667rem; }
  .mod_work__three-images .mod_work__three-images__image {
    width: 33.33%; }
  @media all and (max-width: 768px) {
    .mod_work__three-images {
      display: block; }
      .mod_work__three-images .mod_work__three-images__image {
        width: auto; } }

.mod_work__three-images__image {
  margin: 0 10px;
  margin: 0 0.66667rem; }
  @media all and (max-width: 768px) {
    .mod_work__three-images__image {
      margin-bottom: 20px;
      margin-bottom: 1.33333rem; } }

.mod_work__video {
  width: 100%;
  display: block; }
  .mod_work__video iframe, .mod_work__video video {
    display: block;
    width: 100%; }

.mod_columns {
  display: flex;
  margin-left: -10px;
  margin-left: -0.66667rem;
  margin-right: -10px;
  margin-right: -0.66667rem;
  margin-top: 20px;
  margin-top: 1.33333rem; }
  @media all and (max-width: 620px) {
    .mod_columns {
      display: block; } }

.mod_columns__item {
  width: 50%;
  margin: 0 10px;
  margin: 0 0.66667rem; }
  @media all and (max-width: 620px) {
    .mod_columns__item {
      width: auto; } }

.mod_columns--single .mod_columns__item {
  width: auto; }

.mod_home img {
  width: 100%;
  max-width: 100%; }

.mod_home__elem {
  position: relative;
  display: block;
  width: 100%;
  height: calc(100vh - 60px);
  cursor: pointer;
  background-size: cover;
  background-position: center center;
  background-color: #000; }
  @media all and (max-width: 620px) {
    .mod_home__elem {
      height: auto; }
      .mod_home__elem:after {
        content: '';
        display: block;
        padding-top: 100%; } }

.mod_home__elem--white-text .mod_home__text {
  color: #fff; }

.mod_home__video-wrapper {
  overflow: hidden; }

.mod_home__video {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover; }

.mod_home__text-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.mod_home__text {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  padding-top: 20px;
  padding-top: 1.33333rem;
  padding-left: 20px;
  padding-left: 1.33333rem;
  padding-bottom: 20px;
  padding-bottom: 1.33333rem;
  font-size: 50px; }
  @media all and (max-width: 620px) {
    .mod_home__text {
      top: 20px; } }
  @media all and (max-width: 1280px) {
    .mod_home__text {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .mod_home__text {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .mod_home__text {
      font-size: 21px; } }
  @media all and (max-width: 620px) {
    .mod_home__text {
      padding-top: 10px;
      padding-top: 0.66667rem;
      padding-left: 10px;
      padding-left: 0.66667rem;
      padding-bottom: 10px;
      padding-bottom: 0.66667rem; } }
  .mod_home__text span {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    margin-top: 10px; }

.m-teaser {
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin-top: -1px; }

.m-teaser__elem-wrapper {
  flex: 0 0 33.33%; }
  @media all and (max-width: 1200px) {
    .m-teaser__elem-wrapper {
      flex: 0 0 50%; } }
  @media all and (max-width: 620px) {
    .m-teaser__elem-wrapper {
      flex: 0 0 100%; } }

.m-teaser__elem {
  display: block;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-color: #000;
  border: 1px solid #fff; }
  @media all and (max-width: 620px) {
    .m-teaser__elem {
      border: none; }
      .m-teaser__elem .m-teaser__text {
        display: block; } }
  .m-teaser__elem:hover {
    cursor: pointer; }
    .m-teaser__elem:hover .m-teaser__text {
      display: block; }
  .m-teaser__elem:after {
    content: '';
    display: block;
    padding-top: calc(100% / (16/9)); }

.m-teaser__elem--white-text .m-teaser__text {
  color: #fff; }

.m-teaser__text-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.m-teaser__text {
  position: absolute;
  top: 20px;
  top: 1.33333rem;
  left: 20px;
  left: 1.33333rem;
  color: #000;
  display: none; }
  @media (max-width: 620px) {
    .m-teaser__text {
      position: -webkit-sticky;
      position: sticky;
      top: 60px;
      padding-top: 20px;
      padding-top: 1.33333rem;
      padding-left: 20px;
      padding-left: 1.33333rem;
      padding-bottom: 20px;
      padding-bottom: 1.33333rem; } }
  @media all and (max-width: 620px) and (max-width: 620px) {
    .m-teaser__text {
      padding-top: 10px;
      padding-top: 0.66667rem;
      padding-left: 10px;
      padding-left: 0.66667rem;
      padding-bottom: 10px;
      padding-bottom: 0.66667rem; } }
  @media (max-width: 620px) {
      .m-teaser__text span {
        display: block;
        font-size: 15px;
        text-transform: uppercase;
        margin-top: 10px; } }

.m-teaser__client {
  font-family: Akzidenz-Grotesk, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase; }

.m-project-list {
  display: none; }

.m-project-list__bg-hover {
  position: fixed;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover; }

.m-project-list__elem {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px 0;
  width: 100%;
  font-size: 15px;
  padding-left: 20px;
  padding-left: 1.33333rem;
  padding-right: 20px;
  padding-right: 1.33333rem; }
  .m-project-list__elem:hover {
    background-color: #fff;
    color: #000; }
    .m-project-list__elem:hover .m-project-list__title {
      font-style: italic; }
  .m-project-list__elem .m-project-list__title,
  .m-project-list__elem .m-project-list__client,
  .m-project-list__elem .m-project-list__tags {
    margin-right: 10px; }
  @media all and (max-width: 1080px) {
    .m-project-list__elem {
      display: block; } }
  @media all and (max-width: 620px) {
    .m-project-list__elem {
      padding-left: 10px;
      padding-left: 0.66667rem;
      padding-right: 10px;
      padding-right: 0.66667rem; } }

.m-project-list__title {
  width: 50%;
  font-size: 50px;
  text-transform: uppercase; }
  @media all and (max-width: 1280px) {
    .m-project-list__title {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .m-project-list__title {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .m-project-list__title {
      font-size: 21px; } }
  @media all and (max-width: 1080px) {
    .m-project-list__title {
      width: 100%; } }

.m-project-list__year {
  text-align: right;
  flex: 0 0 100px; }
  @media all and (max-width: 1080px) {
    .m-project-list__year {
      display: flex;
      align-self: flex-end;
      justify-content: flex-end; } }

.m-project-list__preload-image {
  display: none; }

.m-project-list__group {
  flex: 0 0 430px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px; }
  @media all and (max-width: 1200px) {
    .m-project-list__group {
      width: 30%; } }
  @media all and (max-width: 1280px) {
    .m-project-list__group {
      padding-bottom: 7px; } }
  @media all and (max-width: 1080px) {
    .m-project-list__group {
      display: none; } }

.m-project-list__client-year-group {
  width: 20%;
  padding-bottom: 10px; }
  @media all and (max-width: 1280px) {
    .m-project-list__client-year-group {
      padding-bottom: 7px; } }
  .m-project-list__client-year-group .m-project-list__year {
    display: none; }
  @media all and (max-width: 1080px) {
    .m-project-list__client-year-group {
      display: flex;
      justify-content: space-between;
      width: 100%; }
      .m-project-list__client-year-group .m-project-list__year {
        display: block; } }

.m-footer {
  text-transform: uppercase;
  display: flex;
  font-size: 50px;
  padding: 40px 20px;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  padding: 40px 20px;
  padding: 2.66667rem 1.33333rem; }
  @media all and (max-width: 1280px) {
    .m-footer {
      font-size: 40px; } }
  @media all and (max-width: 620px) {
    .m-footer {
      font-size: 25px; } }
  @media all and (max-width: 372px) {
    .m-footer {
      font-size: 21px; } }
  @media all and (max-width: 620px) {
    .m-footer {
      padding: 20px 10px;
      padding: 1.33333rem 0.66667rem; } }
  @media all and (max-width: 1050px) {
    .m-footer {
      display: block; }
      .m-footer .m-footer__left {
        margin-bottom: 48px; } }
  .m-footer a:hover {
    font-style: italic; }
  .m-footer .m-footer__left {
    flex: 1 1 auto; }
    @media all and (max-width: 620px) {
      .m-footer .m-footer__left {
        margin-bottom: 28px; } }
  .m-footer .m-footer__right {
    flex: 0 0 300px; }
  .m-footer .m-footer__block {
    margin-bottom: 60px; }
    @media all and (max-width: 1280px) {
      .m-footer .m-footer__block {
        margin-bottom: 48px; } }
    @media all and (max-width: 620px) {
      .m-footer .m-footer__block {
        margin-bottom: 28px; } }
    .m-footer .m-footer__block:last-child {
      margin-bottom: 0; }

.mod_hero {
  position: relative;
  display: block;
  width: 100%;
  height: calc(100vh - 60px);
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center center;
  background-color: #000;
  margin-bottom: 20px;
  margin-bottom: 1.33333rem; }
  .mod_hero img {
    width: 100%;
    max-width: 100%; }

.mod_hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover; }

@media all and (max-width: 620px) {
  .mod_home__video {
    display: none; } }

/*# sourceMappingURL=main.css.map */