/*@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:500');*/
/*@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600');
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Roboto:400,500,700');*/

.screen-container::after,
.screen-container::before,
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  /*font-size: 18px;*/
  /*line-height: 22px;*/
  font-size: 1vw;
}

body {
  -webkit-text-stroke: 1px transparent;
  /* disable legibility because of walsheim kerning */
  /*text-rendering: optimizeLegibility; */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale;

  -webkit-translate-z: 0;
  -moz-translate-z: 0;
  -ms-translate-z: 0;
  -o-translate-z: 0;
  translate-z: 0;
  font-family: sans-serif;
  font-weight: 500;
  min-height: 100%;
  width: 100%;
  /*color: #151515;*/
  /*background: #ff6441;
  background: #ff522b;*/
  /*background: #440d00;*/
  color: #fff9f8;
  color: #440d00;
  color: #17171e;
  color: white;
  background: black;
  font-weight: 300;
}
body, nav.mobile {
  -webkit-transition: background-color 2000ms;
  -o-transition: background-color 2000ms;
  transition: background-color 2000ms;
}

body.start-view nav {
  /*background: transparent !important;*/
}

section > :first-child h1,
.list-title {
  text-transform: uppercase;
}

nav {
  position: fixed;
  top: 23px;
  left: 25px;
  font-size: 1.5rem;
  line-height: 1.3em;
  /*padding: 23px 25px 20px;*/
  width: 100%;
  z-index: 100;
  pointer-events: none;
  width: 20%;
}

nav a {
  pointer-events: auto;
}

nav li:not(:first-child) a {
  font-weight: 300;
}

nav a {
  border-bottom: 0 none;
}

.nav-opener {
  width: 25px;
  height: 25px;
  position: fixed;
  top: 20px;
  right: 25px;
  z-index: 99999;
}

.nav-opener .stripe {
  width: 25px;
  height: 2px;
  background: white;
  margin-bottom: 4px;
}

.nav-bottom {
  position: fixed;
  bottom: 23px;
  left: 25px;
  font-size: 1.2rem;
  line-height: 1.3em;
}

.page-title-link-container {
  margin-bottom: 1.2em;
}

.canvas  {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#content {
  /*padding-top: 50vh;*/
  /*padding-left: 19.19%*/
  overflow: hidden;
}

h1,
em,
.page-title-link-container,
.title-link {
  color: white;
  font-weight: bold;
}

a {
  color: white;
}

em {
  white-space: nowrap;
}

.page-title {
  /*text-transform: uppercase;*/
}

span.normal {
  font-weight: 300;
}

section {
  font-size: 0;
  /*min-height: 39.19vh;
  min-height: 100vh;*/
  min-height: 100vh;
  /*padding: 40px 10px 40px 10px;*/
  /*border-bottom: 1px solid;*/
  /*-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.2);
          box-shadow: 0 10px 10px rgba(0,0,0,0.2);*/
  position: relative;
  padding-left: 20%;
}

.section-content {
  /*display: flex;*/
}

.latest-link {
  position: absolute;
  bottom: 0;
  left: 0;
}

section.top {
  /*background: #ff5522;*/
}

p + p {
  margin-top : 1.2em;
}

a {
  /*color: inherit;*/
  text-decoration: none;
  border-bottom: 1px solid ;
}

a.intern {
  font-weight: 300;
  border-bottom: 0 none;
}

em {
  font-style: normal;
  /*font-size: 1.2em;
  font-family: "Times New Roman";*/
  /*color: red;*/
}

.list-title,
b {
  font-weight: bold;
}

.nw {
  white-space: nowrap;
}

.header-logo {
  /*width: 100%;
  height: 39vh;*/
}

.c100 {
  width: 100%;
  display: inline-block;
  /*background: yellow;*/
}

.c75 {
  width: 75%;
  display: inline-block;
}

.c66 {
  width: 66.6%;
  display: inline-block;
}


.c50 {
  width: 50%;
  display: inline-block;
  /*background: red;*/
}

.c33 {
  /*background: blue;*/
  width: 33.3%;
  display: inline-block;
}

.c25 {
  /*background: blue;*/
  width: 25%;
  display: inline-block;
}



.intro-text {
  width: 69%;
  /*margin-left: 25%;*/
  /*margin-top: 30vh;*/
}

.content-block {
  padding: 20px 25px 25px 25px;
  font-size: 1.5rem;
  line-height: 1.3em;
  letter-spacing: 0.015em;
  vertical-align: top;
  display: inline-block;
  /*border: 1px solid #440d00;
  margin: -1px 0 0 -1px;*/
  /*background: #ff6441;*/
  /*background: white;*/
  /*-webkit-box-shadow: 10px 10px 10px rgba(255,0,0,0.5);
          box-shadow: 10px 10px 10px rgba(255,0,0,0.5);*/
}

.content-block.inner-shadow {
  /*-webkit-box-shadow: 10px 10px 10px rgba(255,0,0,0.5);
          box-shadow: 10px 10px 10px rgba(255,0,0,0.5);*/
}

.sub-block {
  margin-left: -5px;
  margin-bottom: -5px;
  border: 1px solid;
  background: white;
  position: relative;
  height: 100%;
  width: 100%;
}

.project + .project {
  margin-top: 100px;
}

.list-title, .lb {
  margin-bottom: 1.2em;
}

.list-title {
}

.list-title,
.section-title,
.large-type {
  font-size: 2.2rem;
  line-height: 1.2em;
}

.content-block.large-type p+p {
  margin-top: 1.1em;
}

.shadow {
  -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.5);
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
  margin-bottom: 1.2em;
}


.content-block::before {
  /*border-top: 1px solid;
  display: block;
  content: ' ';
  margin-bottom: 20px;*/
}

.content-block-section {
  margin-bottom: 1.2em;
}

.content-block img {
  max-width: 100%;
}

img,
.screen-container {
  line-height: 0;
  font-size: 0;
}

.screen-container {
  display: inline-block;
}

.screen-container img{
  max-height: 90vh;
}

img.drop-shadow-image {
  margin-left: -3.3%;
  max-width: 106.3%;
  margin-top: -1.5%;
}

img.screen {
  /* border: 1px solid rgba(255,255,255,0.6); */
  /* border-radius: 0 0 10px 10px; */
}
.device {
  opacity: 0.6;
}

.browser,
.tablet,
.phone {
  position: relative;
  /* background: rgba(200,200,200,0.7); */
  /* background: black; */
  /* background: #bbb; */
  border: 1px solid;
  /* -webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.5);
  box-shadow: 0 5px 30px rgba(0,0,0,0.5); */
  margin-bottom: 1.2em;
}

.browser {
  font-size: 10px;
  padding: 3em 0px 0px 0px;
  /* background: rgba(200,200,200,0.8); */
  /* border-radius: .7em .7em .5em .5em; */
  border-radius: 7px 7px 5px 5px;
}

.browser .d {
  font-size: inherit;
  position: absolute;
  top: .9em;
  left: 1.5em;
  height: 1.2em;
  width: 1.2em;
  border-radius: .6em;
  border: 1px solid;
}

.browser .d:nth-child(1) {
  left: 3.4em;
}

.browser .d:nth-child(2) {
  left: 5.3em;
}

.browser img {
  border-radius: 0 0 5px 5px;
  border-top: 1px solid;
}

.browser::after {
  content: "";
  position: absolute;
  font-size: inherit;
  top: .5em;
  left: 20%;
  border: 1px solid;
  width: 60%;
  height: 2em;
  border-radius: 5px;
}

.tablet,
.phone {
  font-size: 8px;
  padding: 5em 0.7em;
  /* border: 1px solid black; */
  border-radius: 15px;
}
.tablet img,
.phone img {
  border-radius: 5px;
  /* border: 1px solid rgba(0,0,0,0.2); */
  border: 1px solid;
}

.tablet::after,
.phone::after {
  content: "";
  position: absolute;
  height: 3.6em;
  width: 3.6em;
  border-radius: 1.8em;
  border: 1px solid;
}

.phone::after {
  bottom: 0.7em;
  left: 50%;
  margin-left: -1.8em;
}

.tablet {
  padding: 5em;
}

.tablet::after {
  right: 0.7em;
  top: 50%;
  margin-top: -1.8em;
}

.browser,
.tablet,
.phone,
.tablet img,
.phone img,
.browser .d,
.browser img,
.tablet::after,
.phone::after,
.browser::after {
  color: #888;
}

#imprint, #privacy {
  display: none;
}

@media (max-width: 1024px) {
  .list-title,
  .section-title,
  .large-type,
  .nav-bottom,
  .content-block,
  nav {
    font-size: 2rem;
  }
  nav {
    width: 100%;
  }
}

.mobile {
  display: none !important;
}

/* @media (min-width: 767px) {
  #bb-canvas {
    width: 100%;
    height: 100%;
  }
} */

@media (max-width: 768px), (max-height: 550px) {
  nav {
    width: 100%;
  }
  .list-title,
  .section-title,
  .large-type,
  .nav-bottom,
  .content-block,
  nav {
    font-size: 20px;
  }
  #content {
    padding-top: 100px;
  }
  .desktop {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
  .phone {
    font-size: 10px !important;
  }
  .tablet {
    font-size: 4px !important;
  }
  .browser {
    font-size: 5px !important;
    border-radius: 4px 4px 2px 2px;
  }
  .browser .d {
    font-size: inherit !important;
  }
  .browser::after {
    border-radius: 2px;
  }
  .browser img {
    border-radius: 0 0 2px 2px;
  }
  .content-block {
    width: auto !important;
    padding-top: 0;
    padding-bottom: 50px;
    clear: both;
  }
  section {
    padding-left: 0;
    padding-bottom: 100px;
    min-height: auto;
  }
  .nav-anchor {
    /* padding-top: 100px; */
  }
  nav {
    padding: 15px 25px;
    top: 0;
    left: 0;
  }
  body:not(.show-mobile-nav) .section-link {
    display: none;
  }
  body.show-mobile-nav nav.mobile {
    height: 150vh;
  }
  .section-link {
    margin-top: 15px;
  }

  .nav-bottom {
    position: static;
  }
}