@font-face {
  font-display: swap;
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Mono Regular "), local("Roboto Mono-Regular"), url(./fonts/roboto-mono-latin-400.535bc89d4af715503b01.woff2) format("woff2"), url(./fonts/roboto-mono-latin-400.498042b7fe9cd07b4fd1.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Roboto Mono;
  font-style: italic;
  font-weight: 400;
  src: local("Roboto Mono Regular italic"), local("Roboto Mono-Regularitalic"), url(./fonts/roboto-mono-latin-400italic.b39a11f9a6107e57a21f.woff2) format("woff2"), url(./fonts/roboto-mono-latin-400italic.1ce08cfde36c0d81af5b.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Roboto Mono;
  font-style: italic;
  font-weight: 700;
  src: local("Roboto Mono Bold italic"), local("Roboto Mono-Bolditalic"), url(./fonts/roboto-mono-latin-700italic.bc628a95b5026af0df2c.woff2) format("woff2"), url(./fonts/roboto-mono-latin-700italic.bf4b4e73015a3066da91.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Regular "), local("Roboto-Regular"), url(./fonts/roboto-latin-400.176f8f5bd5f02b3abfcf.woff2) format("woff2"), url(./fonts/roboto-latin-400.49ae34d4cc6b98c00c69.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: italic;
  font-weight: 400;
  src: local("Roboto Regular italic"), local("Roboto-Regularitalic"), url(./fonts/roboto-latin-400italic.d022bc70dc1bf7b3425d.woff2) format("woff2"), url(./fonts/roboto-latin-400italic.b1d9d9904bfca8802a63.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold "), local("Roboto-Bold"), url(./fonts/roboto-latin-700.c18ee39fb002ad58b6dc.woff2) format("woff2"), url(./fonts/roboto-latin-700.2267169ee7270a22a963.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: italic;
  font-weight: 700;
  src: local("Roboto Bold italic"), local("Roboto-Bolditalic"), url(./fonts/roboto-latin-700italic.7d8125ff7f707231fd89.woff2) format("woff2"), url(./fonts/roboto-latin-700italic.9360531f9bb817f917f0.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Rubik;
  font-style: normal;
  font-weight: 400;
  src: local("Rubik Regular "), local("Rubik-Regular"), url(./fonts/rubik-latin-400.1d5a416e2889e382ab1a.woff2) format("woff2"), url(./fonts/rubik-latin-400.5a70b2bcb9dccb05fa3f.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Rubik;
  font-style: italic;
  font-weight: 400;
  src: local("Rubik Regular italic"), local("Rubik-Regularitalic"), url(./fonts/rubik-latin-400italic.05005ab3004e2c14e390.woff2) format("woff2"), url(./fonts/rubik-latin-400italic.f742d7807f2ea735971b.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Rubik;
  font-style: normal;
  font-weight: 700;
  src: local("Rubik Bold "), local("Rubik-Bold"), url(./fonts/rubik-latin-700.0e1e05c3360bb2505391.woff2) format("woff2"), url(./fonts/rubik-latin-700.7b2f041147b2f9e2a935.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Rubik;
  font-style: italic;
  font-weight: 700;
  src: local("Rubik Bold italic"), local("Rubik-Bolditalic"), url(./fonts/rubik-latin-700italic.5be722df97b409b62517.woff2) format("woff2"), url(./fonts/rubik-latin-700italic.6a6c4717649b699c3c4d.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Rubik;
  font-style: normal;
  font-weight: 900;
  src: local("Rubik Black "), local("Rubik-Black"), url(./fonts/rubik-latin-900.28460c67e3963d567a9d.woff2) format("woff2"), url(./fonts/rubik-latin-900.14a1faf3cfb2304d8f1d.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Rubik;
  font-style: italic;
  font-weight: 900;
  src: local("Rubik Black italic"), local("Rubik-Blackitalic"), url(./fonts/rubik-latin-900italic.7f45ff04acbbe0183b27.woff2) format("woff2"), url(./fonts/rubik-latin-900italic.755ac7a7f813ed0bd04d.woff) format("woff")
}

abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline
}

body {
  line-height: 1
}

body * {
  box-sizing: border-box
}

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

nav ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

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

a {
  background: transparent;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline
}

del {
  text-decoration: line-through
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

input,
select {
  vertical-align: middle
}

body {
  background-color: #fff;
  color: #1b141b;
  font-family: Roboto Mono, monospace;
  font-size: 16px;
  line-height: 28px;
  min-width: 320px
}

@media screen and (min-width:768px) {
  body {
    font-size: 20px;
    line-height: 32px
  }
}

.page {}

.page-header {
  background-color: #fff;
  height: 125px;
  padding: 20px 10px;
  position: relative;
  text-align: center;
  z-index: 200
}

@media screen and (min-width:768px) {
  .page-header {
    height: 195px;
    padding: 40px 20px 20px
  }
}

.page-header h2 {
  margin: 20px 0
}

.page-header a:hover,
.page-header a:hover:active,
.page-header a:hover:focus,
.page-header a:hover:visited {
  color: #1b141b
}

.page-header a.active {
  pointer-events: none
}

.page-content {
  background-color: #fff;
  flex-grow: 1;
  position: relative;
  text-align: center;
  width: 100%;
}

.content-wrapper {
  max-width: 1024px;
  padding: 10px 20px 20px;
  scroll-margin-top: 80px;
  display: none;
}

.content-wrapper.active {
  display: block;
}

@media screen and (min-width:768px) {
  .content-wrapper {
    margin: 0 auto;
    padding: 20px 20px 30px
  }
}

.page-footer {
  align-items: center;
  background-color: #fff;
  font-size: 14px;
  height: 60px;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  display: flex;
}

.toggle-imprint h3 {
  margin: 14px 0;
}

.imprint-wrapper {
  display: none;
}

.imprint-wrapper p {
  font-size: 0.7em;
  line-height: 1.4em;
}

.imprint-wrapper.active {
  display: flex;
  justify-content: center;
  flex-direction: column;
  scroll-margin-top: 80px;
}

.imprint {
  max-width: 800px;
  padding: 10px 20px 20px;
  margin: 0 auto;
}

h2,
h3,
h4 {
  font-weight: 400
}

h1 {
  color: #1b141b;
  font-family: Rubik, Helvetica;
  font-size: 40px;
  line-height: 48px;
  margin-bottom: 5px
}

@media screen and (min-width:768px) {
  h1 {
    font-size: 60px;
    line-height: 72px
  }
}

h2 {
  font-size: 18px;
  line-height: 26px;
  margin: 40px 0 20px
}

h2:first-child {
  margin-top: 20px
}

@media screen and (min-width:768px) {
  h2 {
    font-size: 30px;
    line-height: 36px
  }
}

.page-header h2 {
  font-family: Roboto Mono, monospace;
  font-size: 20px;
  line-height: 30px;
  margin: 0;
  text-transform: uppercase
}

@media screen and (min-width:768px) {
  .page-header h2 {
    font-size: 40px;
    line-height: 58px
  }
}

h3 {
  font-size: 1.11em;
  margin: 20px 0
}

h3,
h4 {
  text-transform: uppercase
}

h4 {
  margin: 5px 0
}

a,
a:active,
a:focus,
a:visited {
  color: #1b141b;
  text-decoration: none;
  transition: color .2s ease-out
}

a:active:hover,
a:focus:hover,
a:hover,
a:visited:hover,
#toogle-imprint:hover {
  color: #eb792e;
  transition: color .2s ease-out;
  cursor: pointer;
}

#toogle-imprint.hidden {
  display: none;
}

p {
  margin-bottom: .5em
}

ul {
  align-items: center;
  display: flex;
  justify-content: center;
  list-style: none
}

ul>li {
  padding: 10px 0;
  position: relative
}

ul>li+li {
  margin-left: 10px
}

ul.list-bullets {
  flex-direction: row;
  flex-wrap: wrap
}

ul.list-bullets li {
  flex: 0 0 100%
}

a.button {
  background-color: #1b141b;
  border-radius: 2px;
  color: #f6f6f6;
  cursor: pointer;
  display: inline-block;
  font-size: .9em;
  margin: 5px;
  padding: 10px 20px
}

a.button:active,
a.button:hover {
  color: #eb792e
}

@media screen and (min-width:768px) {
  a.button {
    font-size: 1em
  }
}

.box-wrapper,
.project-wrapper {
  align-content: flex-start;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center
}

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

  .box-wrapper,
  .project-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -1%
  }
}

.box,
.project {
  background-color: #fff;
  border: 1px solid #1b141b;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 20px
}

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

  .box,
  .project {
    flex-basis: calc(50% - 20px);
    flex-grow: 0;
    flex-shrink: 0;
    margin: 10px;
    width: calc(50% - 20px)
  }
}

.error {
  max-width: 700px;
  text-align: center
}

.error h2 {
  color: #eb792e;
  display: block;
  font-size: 80px;
  font-weight: 700;
  line-height: 1em;
  margin: 30px 0;
  position: relative
}

@media screen and (min-width:768px) {
  .error h2 {
    font-size: 140px;
    margin: 60px 0
  }
}

.error h2 span {
  border-bottom: 1px solid #1b141b;
  color: #1b141b;
  display: inline-block;
  font-size: 30px;
  width: 40px
}

@media screen and (min-width:768px) {
  .error h2 span {
    font-size: 60px;
    width: 70px
  }
}

.error .oversized {
  font-family: Rubik, Helvetica;
  font-size: 46px;
  line-height: 1.2em;
  margin-bottom: 50px;
  text-transform: uppercase
}

@media screen and (min-width:768px) {
  .error .oversized {
    font-size: 80px;
    margin-bottom: 80px
  }
}

.page-enter {
  opacity: 0;
  transition: opacity .3s ease-out;
  transition-delay: .3s
}

.page-enter.page-enter-active {
  opacity: 1
}

.page-leave {
  background-color: #fff;
  bottom: 0;
  left: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%
}

.page-leave.page-leave-active {
  opacity: 0;
  transition: all .3s linear
}

.projects {
  max-width: 1200px
}

.project {
  overflow: hidden
}

@media screen and (min-width:768px) {
  .project {
    align-content: space-between;
    display: flex;
    flex-flow: column wrap
  }
}

@media screen and (min-width:1024px) {
  .project {
    flex-basis: calc(33.33% - 20px);
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(33.33% - 20px)
  }
}

.project-image {
  background-color: #f6f6f5;
  color: #f6f6f5;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%
}

.project-image img {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%
}

.project-image.animated img+img {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-iteration-count: indefinite;
  animation-iteration-count: indefinite;
  -webkit-animation-name: imageFader;
  animation-name: imageFader;
  opacity: 0
}

.project-info {
  margin-bottom: 10px
}

.project-highlight {
  margin-bottom: 10px;
  text-transform: uppercase
}

.project-text {
  padding: 5px
}

@media screen and (min-width:768px) {
  .project-text {
    padding: 10px
  }
}

.project-text h4 {
  margin-bottom: 5px
}

.project-text a {
  text-decoration: underline
}

.project-details {
  flex: 1 0 auto
}

.project-footer {
  margin: 10px
}

.project-footer .button {
  margin: 10px 10px 20px
}

.tagline {
  align-items: flex-start;
  flex-wrap: wrap;
  font-size: 9px;
  line-height: 100%
}

.tagline>li {
  background-color: #f6f6f6;
  border: 1px solid #1b141b;
  border-radius: 5px;
  margin: 3px;
  padding: 5px
}

.tagline+div {
  margin-top: 5px
}

.contact {
  max-width: 650px;
}

.contact h2 {
  text-transform: uppercase;
}

.contact-wrapper {
  padding: 10px 20px;
}

.contact-wrapper p {
  margin: 0 auto .5em;
}

@media screen and (min-width:768px) {
  .contact h3 {
    margin-top: 60px
  }
}

.contact-list {
  margin: 10px 0;
  color: #fff;
}

@media screen and (min-width:768px) {
  .contact-list {
    margin: 20px 0
  }
}

.contact-list li a {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 5px
}

.contact-list li a span {
  display: inline-block;
  font-size: 14px;
  text-align: center;
  width: 100%
}

.contact-list li a [class*=" icon-"],
.contact-list li a [class^=icon-] {
  font-size: 36px;
  line-height: 50px
}

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

  .contact-list li a [class*=" icon-"],
  .contact-list li a [class^=icon-] {
    font-size: 40px
  }
}

.page-nav {
  padding-top: 17px;
  width: 100%;
}

@media screen and (min-width:768px) {
  .page-nav {
    padding-top: 23px
  }
}

.page-nav .icon,
.page-nav:after {
  font-size: 28px;
  padding-left: 10px
}

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

  .page-nav .icon,
  .page-nav:after {
    font-size: 40px
  }
}

.page-nav .icon-stickman-5 {
  left: -16px;
  position: absolute;
  top: -16px
}

@media screen and (min-width:768px) {
  .page-nav .icon-stickman-5 {
    left: -22px;
    top: -22px
  }
}

.sticky-true .page-nav .icon-stickman-5:before {
  content: ""
}

.page-nav ul {
  border-bottom: 1px solid #1b141b;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  position: relative
}

.page-nav ul li {
  align-items: flex-end;
  display: flex;
  flex-wrap: nowrap;
  padding: 0
}

.page-nav ul li:first-child .icon,
.page-nav ul li:last-child .icon {
  padding-left: 0
}

.page-nav ul li:first-child .icon {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg)
}

.page-nav ul li:first-child .brick:before {
  display: none
}

.page-nav ul li:last-child {
  margin-left: 20px
}

.page-nav ul li:last-child .brick:after {
  display: none
}

@media screen and (min-width:768px) {
  .page-nav ul li:last-child {
    margin-left: 30px
  }
}

@media screen and (max-width:767px) {
  .page-nav ul li+li {
    margin-left: 7px
  }
}

.page-nav .nav-link {
  align-items: flex-end;
  color: #f6f6f6;
  display: flex;
  position: relative
}

.page-nav .nav-link span {
  display: inline-block
}

.page-nav .nav-link .icon {
  color: #1b141b
}

.page-nav .nav-link:hover {
  color: #eb792e
}

.page-nav .nav-link.active {
  color: #f6f6f6;
}

.page-nav .nav-link.active .icon {
  color: #1b141b
}

.brick {
  background-color: #1b141b;
  display: inline-block;
  font-size: 14px;
  height: 36px;
  line-height: 26px;
  padding: 5px 10px;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
  width: auto
}

@media screen and (min-width:768px) {
  .brick {
    font-size: 18px;
    height: 45px;
    line-height: 25px;
    padding: 10px 20px
  }
}

.brick:after,
.brick:before {
  content: "";
  display: inline-block;
  height: 12px;
  position: absolute;
  width: 8px
}

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

  .brick:after,
  .brick:before {
    height: 15px;
    width: 11px
  }
}

.brick:before {
  border-bottom: 12px solid #1b141b;
  border-top: 12px solid #1b141b;
  left: -7px;
  top: 0
}

@media screen and (min-width:768px) {
  .brick:before {
    border-bottom-width: 15px;
    border-top-width: 15px;
    left: -10px
  }
}

.brick:after {
  background-color: #1b141b;
  right: -7px;
  top: 12px
}

@media screen and (min-width:768px) {
  .brick:after {
    right: -10px;
    top: 15px
  }
}

.active .brick {
  background-color: #eb792e
}

.active .brick:before {
  border-color: #eb792e
}

.active .brick:after {
  background-color: #eb792e
}

.sticky-nav {
  background-color: #fff;
  z-index: 200;
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: -120px;
}

@media screen and (min-width:768px) {
  .sticky-nav {
    top: -190px;
  }
}

.page-nav {}

.page {
  margin-bottom: 0;
  transition: all .5s ease-out;
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: flex;
  flex-flow: column;
  max-width: 100%;
}

.button-projects a.button {
  margin: 20px;
  padding: 5px 10px
}

@media screen and (min-width:600px) {
  .button-projects {
    font-size: 16px;
    left: 15%;
    top: 10%
  }
}

@media screen and (min-width:1024px) {
  .button-projects {
    font-size: 20px;
    left: 0;
    text-align: center;
    width: 100%
  }

  .button-projects a.button {
    padding: 10px 20px
  }
}