:root {
  --content-width: 65rem;
  --default-font-size:21px;
  --default-distance-bottom:60px;
  --grid-gap:5px;
}

@font-face {
    font-family: 'Helvetica Neue Ltd';
    src: url('../fonts/HelveticaNeueLTStd-Bd.otf');
    font-weight: 500;
}
@font-face {
    font-family: 'Helvetica Neue Ltd';
    src: url('../fonts/HelveticaNeueLTStd-Th.otf');
    font-weight: 100;
}
@font-face {
    font-family: 'Helvetica Neue Ltd';
    src: url('../fonts/HelveticaNeueLTStd-ThIt.otf');
    font-weight: 100;
    font-style: italic;
}

*,
*:after,
*:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:focus{
  outline: none;
  background: transparent;
  border: none;
}

::selection {
  background: #000;
  color:#fff;
}

html {
  font-family:'Helvetica Neue Ltd', sans-serif;
  background: transparent;
}

body.fixit{position: fixed;}

li {
  list-style: none;
}

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

strong, b {
  font-weight: 500;
}

img {
  width: 100%;
}

.page {
  padding: 30px 25px 0 25px;
  display: initial;
}
.page.start{padding: 0;}

.header {
  margin-bottom: 1.5rem;
}

.header.content {
  position: absolute;
  width: 100%;
  margin-bottom: 1.5rem;
  margin-top: 10px;
  z-index: 10000;
}

.header a {
  position: relative;
  text-transform: lowercase;
  font-size: var(--default-font-size);
  letter-spacing: .1em;
  padding: .5rem 0;
  font-weight: 300;
  padding-bottom: 3px;
}

.link-item{
  font-size: var(--default-font-size);
  letter-spacing: .1em;
  padding: 10px 0;
  font-weight: 300;
  display: inline-block;
}

.header .logo {
  display: block;
  margin-bottom: 1.5rem;
  padding: .5rem 0;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header li{display: inline-block;margin: 0px 0px 0px 10px;text-align: center;padding: 10px 0;}
.header li:hover{cursor: pointer;}

.menu{
  margin: auto;
  width: 100%;
}

.menu a {
  margin: 0 .75rem;
}

#mobile-nav{position: fixed;width: 100%;height: 100%;background: white;top: 0;left: 0;opacity: 1;z-index: 10000;opacity: 0;visibility: hidden; transition: all .5s ease-in-out;}
#mobile-nav.open{opacity: 1;visibility: visible;}
#mobile-nav ul.nav-items{width: 100%;text-align: center;margin-top: 40vh;transform: translate(0,-50%);}
#mobile-nav ul.nav-items li{padding: 10px 0;font-size: var(--default-font-size);letter-spacing: .1em;font-weight: 300;padding-bottom: 3px;opacity: 0; transition: all .4s ease-in-out;}
#mobile-nav.open ul.nav-items li{ transition-delay: .7s;opacity: 1;}
.menu.title-item.fade{transition: all .4s ease-in-out;}
.menu.title-item.hide{opacity: 0;transition: all .4s ease-in-out;}
.brgr-btn{position: absolute;/*top: 43px;*/right: 5%;z-index: 10001;display: none;top: 47%;transform: translate(0,-50%);
  width: 40px;
  height: 30px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.brgr-btn.show{display: flex;}
.brgr-btn .burger-line{position: relative;background: black;height: 1px;width: 18px;transition: all .3s ease-in-out;border-radius: 10px;transform-origin: top left;}
.burger-line.bottom{margin-top: 7px;transform-origin: bottom left;}
.brgr-btn.close .burger-line{transform: rotate(45deg);background: black !important;}
.brgr-btn.close .burger-line.bottom{transform:rotate(-45deg)translate(-3.1px,3.2px);}

.highlight{
  color:#ff00ff;
}

.menu-item {transition: all 0ms ease-in-out;}
.menu-item a {color:black;}
.menu-item.active .activePage a{color:black;}
.menu-item.active a {color:rgba(0,0,0,0.5);transition: all 300ms ease-in-out;}
.menu-item.active a:hover{color:black;}
.menu.active{opacity: 1; visibility: visible;}
.menu.hidden{opacity: 0; visibility: hidden;}
.menu-item{visibility: hidden;position: absolute;}
.menu.title-item.no-touch{pointer-events: none;}

main {
  min-height: calc(100vh - 10rem);
  transition: all .8s ease-in-out;
  /* transform: translate(0,50px); */
  opacity: 0;
}

main.fade-in {
  transform: translate(0,0px);
  opacity: 1;
}

.intro {
  padding: 10vh 0;
  text-align: center;
}

.intro h1 {
  position: relative;
  margin-bottom: 1rem;
  font-weight: 900;
  font-size: var(--default-font-size);
  z-index: 1;
}

.tags {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: var(--default-font-size);
  font-weight: 600;
}

.text {
  line-height: 1.5em;
}
.text p,
.text figure,
.text ul,
.text ol {
  margin-bottom: 1.5em;
}

.text p:last-child,
.text figure:last-child,
.text ul:last-child,
.text ol:last-child {
  margin-bottom: 0;
}

.text h2 {
  font-size: var(--default-font-size);
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.text > *:first-child {
  margin-top: 0;
}
.text a {
  position: relative;
  white-space: nowrap;
  z-index: 1;
  display: inline-block;
  text-decoration: underline;
  transition: all 150ms ease-in-out;
}

.text a:hover {
  color: rgba(0,0,0,0.5);
  cursor: pointer;
}

.text figure {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.text img {
  width: 100%;
}

.footer {
  padding: 1.5rem 5vw 10vh;
  text-align: center;
  max-width: var(--content-width);
  margin: 0 auto;
  line-height: 1.5em;
}

.footer a {
  display: inline-block;
  font-size: var(--default-font-size);
}
.footer > a {
  margin-bottom: 1.5rem;
  border-top: 2px solid #000;
  width: 16.5rem;
  padding-top: .5rem;
}

.social a {
  margin: 0 .75rem;
  padding: .5rem 1rem;
  border: 2px solid #000;
  width: 7.5rem;
}
.social a:hover {
  background: #000;
  color: #fff;
}
.startwrapper{height: calc(100vh - 50px);}
.wrapper,
.centerwrapper{transition: all .8s ease-in-out;opacity: 0;}
.centerwrapper{opacity: 1;}
.wrapper.fade-in {transform: translate(0,0px);opacity: 1;}
.layout{width: 54%;margin: 0 auto;position: relative;/* transform: translateY(-50%); */max-width: 680px;margin-top: 120px;padding-bottom: var(--default-distance-bottom);}
.layout.fade-in-container{transform: translateY(50px);transition: all .8s ease-in-out; opacity: 0;}
.layout.fade-in-container.faded-in{opacity: 1; transform: translateY(0px);}
.layout.imprint{width: 54%;margin: 0 auto;position: relative;max-width: 680px;transform: translateY(0);margin-top: 120px;margin-bottom: 0px;}
.layout.has-video-container { margin-top: 120px;}
.flow-text a{font-weight: inherit;border-bottom: 0px solid black;text-decoration: underline;text-decoration-color: rgba(0,0,0,0.5);transition: all .2s ease-in-out;}
.flow-text a:hover{color:rgba(0,0,0,0.5);cursor: pointer;}

.video-posts {
  position: relative;
  width: calc(100% - (2 * var(--grid-gap)));
  max-width: 2560px;
  margin: 0px auto 0 auto;
}

.video-post {
  position: relative;
  width: calc(50% - var(--grid-gap)/2);
  float: left;
  margin-right: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}
.video-post:nth-child(even) {margin-right: 0px;}
.video-container{position: relative;overflow: hidden;display: flex;}
.video-container .placeholder {
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

@media (hover: hover) {
  .video-post.hide-placeholder .video-container .placeholder {
    opacity: 0;
  }
}

.video-post .post-title {
  pointer-events: none;
}

.video-container .placeholder img{max-width: 100%;height: 100%;object-fit: cover;}
.video-container .video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
}
.video {width: 100%;height: auto;display: block;}
.post-title{position: absolute;top: 50%;text-align: center;width: 100%;font-size: var(--default-font-size);letter-spacing: 0.1em;font-weight: 100;transform: translate(0,-50%);z-index: 3;}
.post-title.white{color: white;}
.post-title.black{color: black;}
.video-post:last-child{margin-bottom: var(--default-distance-bottom);}

.social-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 15px 25px 10px 25px;
  width: 100%;
  display: block;
  z-index: 9;
  transition: all 300ms ease-out;
  transform: translate(0,100%);
}

.social-bar-mobile {
  position: absolute;
  bottom: 0;
  left: 0;
  background: transparent;
  padding: 15px 15px 20px 15px;
  width: 100%;
  display: block;
  z-index: 1;
}

.social-bar ul,
.social-bar-mobile ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.social-bar-mobile ul li {
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.social-bar-mobile ul li a {
  width: 25px;
  display: block;
}

.social-bar-mobile ul li a.bigger-icon {
  width: 30px;
}

.social-bar-mobile ul li img {
  position: relative;
  width: 100%;
  height: auto;
}

.social-bar ul li {
  margin: 0 35px;
}

.social-bar.show {
  transform: translate(0,0);
}

.social-bar.hide {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.social-light .social-bar {
  background: transparent;
}

.social-light .social-bar a {
  color:#fff;
}

.social-light .social-bar a:hover {
  color: rgba(255,255,255,0.75);
}

.social-bar a {
  font-size: var(--default-font-size);
  font-weight: 100;
  letter-spacing: 0.05em;
  margin: auto;
  line-height: 1;
  text-decoration: none;
}

.social-bar a:hover {
  cursor: pointer;
  text-decoration: none;
  color: rgba(0,0,0,0.5);
}

.video-post {
  opacity: 0;
}

.video-post.loaded {
  -webkit-animation: fade-in 900ms ease-out forwards;
          animation: fade-in 900ms ease-out forwards;
}

.video-post:nth-child(6n+1) {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.video-post:nth-child(6n+2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.video-post:nth-child(6n+3) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.video-post:nth-child(6n+4) {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

.video-post:nth-child(6n+5) {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

.video-post:nth-child(6n+6) {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}

.projects-load-more-box {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  margin-bottom: var(--default-distance-bottom);
  -webkit-transition: all 300ms ease-out;
          transition: all 300ms ease-out;
  opacity: 0;
}

.projects-load-more-box.show {
  opacity: 1;
}

.projects-load-more-box[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.projects-load-more {
  position: relative;
  display: block;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0px solid transparent;
  box-shadow: none;
  font-size: var(--default-font-size);
  font-weight: 100;
  letter-spacing: 0.1em;
  margin: 0;
  line-height: 1.5;
  text-align: center;
  font-family: 'Helvetica Neue Ltd', sans-serif;
  text-decoration: underline;
  -webkit-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
  color: black;
}

.projects-load-more:hover {
  color: rgba(0,0,0,0.5);
  cursor: pointer;
}

@-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}

@keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}

@media only screen and (max-width: 736px) {
  .description,.layout.imprint{width: 85%;}
}

@media only screen and (max-width: 680px) {
  .social-bar ul li {
    margin: 0 15px;
  }
}

@media only screen and (max-width: 480px) {
  :root {
    --default-font-size:19px;
  }
  .social-bar {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}

@media only screen and (min-device-width: 375px)
and (max-device-height: 812px)
and (-webkit-device-pixel-ratio: 3) ,
only screen
and (min-device-width: 375px)
and (max-device-height: 667px)
and (-webkit-device-pixel-ratio: 2) ,   (max-width:600px)
{
	.link-item{font-size: var(--default-font-size);}
  .video-post {
    width: 100%;
    margin-right: 0;
  }
  .layout{top: unset;transform: translateY(0%);max-width: 680px;width: 85%;}
}