/*
* Headlines
* 20px, 28px, 54px, 72px
*/
#zp-project .zp-project-top {
  height: 100vh;
  z-index: 1; }
  #zp-project .zp-project-top .zp-project-background {
    position: relative;
    overflow: hidden;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    opacity: 1;
    transition: opacity 0.6s;
    height: 130%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
    @media only screen and (max-width: 768px) {
      #zp-project .zp-project-top .zp-project-background {
        height: calc(100% - 210px); } }
    #zp-project .zp-project-top .zp-project-background.hidden {
      opacity: 0; }
    #zp-project .zp-project-top .zp-project-background .zp-project-background-inner {
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 0;
      transition: opacity 1s; }
      #zp-project .zp-project-top .zp-project-background .zp-project-background-inner.picturefill-background-visible {
        opacity: 1; }
  #zp-project .zp-project-top .zp-project-top-bar {
    height: 800px;
    position: absolute;
    width: 100%;
    bottom: -400px;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    transition: background-color 0.4s, -webkit-transform 0.4s;
    transition: transform 0.4s, background-color 0.4s;
    transition: transform 0.4s, background-color 0.4s, -webkit-transform 0.4s;
    background-image: linear-gradient(0deg, #ffffff 80%, rgba(255, 255, 255, 0.9) 100%);
    background-color: white;
    z-index: 1; }
    @media only screen and (max-width: 768px) {
      #zp-project .zp-project-top .zp-project-top-bar {
        background-image: linear-gradient(0deg, #ffffff calc(100% - 60px), rgba(255, 255, 255, 0.7) calc(100% + 280px)); } }
    #zp-project .zp-project-top .zp-project-top-bar.compressed {
      -webkit-transform: scaleX(0.96);
              transform: scaleX(0.96);
      background-color: rgba(255, 255, 255, 0); }
      @media only screen and (max-width: 768px) {
        #zp-project .zp-project-top .zp-project-top-bar.compressed {
          -webkit-transform: scaleX(1);
                  transform: scaleX(1); } }
    @media only screen and (max-width: 1024px) {
      #zp-project .zp-project-top .zp-project-top-bar {
        bottom: -480px; } }
    @media only screen and (max-width: 768px) {
      #zp-project .zp-project-top .zp-project-top-bar {
        bottom: -350px;
        height: 630px; } }
    @media only screen and (max-height: 430px) {
      #zp-project .zp-project-top .zp-project-top-bar {
        position: static; } }
    #zp-project .zp-project-top .zp-project-top-bar .zp-project-categories {
      position: absolute;
      top: 125px;
      right: 45px;
      font-size: 13px;
      text-align: right;
      opacity: 1;
      transition: opacity 0.15s;
      letter-spacing: 0.4px;
      line-height: 1.6em;
      text-transform: uppercase; }
      @media only screen and (max-width: 1024px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-categories {
          top: 28px;
          right: 30px;
          font-size: 11px; } }
      @media only screen and (max-width: 660px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-categories {
          display: none; } }
      #zp-project .zp-project-top .zp-project-top-bar .zp-project-categories.hidden {
        opacity: 0; }
      #zp-project .zp-project-top .zp-project-top-bar .zp-project-categories .zp-project-focus {
        font-size: 14px;
        letter-spacing: 0.6px;
        padding: 4px 8px 1px 4px !important;
        margin: 11px 0 0 0;
        display: inline-block;
        background-color: #000;
        text-indent: 5px;
        color: white;
        width: auto;
        text-transform: uppercase;
        font-family: "ClvText-Medium", Arial, Gotham, sans-serif;
        font-size: 13px !important;
        margin: 0 0 15px 0; }
      #zp-project .zp-project-top .zp-project-top-bar .zp-project-categories ul {
        list-style: none; }
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-categories ul .zp-project-categorie {
          position: relative;
          padding: 0;
          line-height: inherit; }
          #zp-project .zp-project-top .zp-project-top-bar .zp-project-categories ul .zp-project-categorie::before {
            display: none; }
    #zp-project .zp-project-top .zp-project-top-bar .zp-project-info {
      position: relative;
      top: 125px; }
      @media only screen and (max-width: 1024px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-info {
          top: 90px; } }
      @media only screen and (max-width: 768px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-info {
          margin-left: 25%;
          top: 120px; } }
      @media only screen and (max-width: 480px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-info {
          margin-left: auto; } }
      @media only screen and (max-height: 430px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-info {
          top: 125px; } }
      #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-left-info {
        display: inline-block;
        position: relative;
        width: 50%;
        margin-left: -5px;
        padding-right: 15px; }
        @media only screen and (max-width: 768px) {
          #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-left-info {
            display: none; } }
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-left-info .zp-project-additional-image {
          text-align: right;
          margin-right: 25px; }
      #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info {
        width: 500px;
        display: inline-block;
        vertical-align: top;
        padding: 0 15px; }
        @media only screen and (max-width: 1400px) {
          #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info {
            width: 300px; } }
        @media only screen and (max-width: 768px) {
          #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info {
            width: 400px; } }
        @media only screen and (max-width: 480px) {
          #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info {
            width: calc(100% - 88px);
            left: 44px;
            position: absolute; } }
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-slogan {
          line-height: 1.2em;
          font-size: 23px; }
          @media only screen and (min-width: 1440px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-slogan {
              font-size: 28px; } }
          @media only screen and (min-width: 2100px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-slogan {
              font-size: 32px; } }
          @media only screen and (max-width: 1400px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-slogan {
              font-size: 24px !important; } }
          @media only screen and (max-width: 768px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-slogan {
              font-size: 28px !important; } }
          @media only screen and (max-width: 735px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-slogan {
              font-size: 24px !important; } }
          @media only screen and (max-width: 480px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-slogan {
              font-size: 20px !important; } }
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-alt-title h1 {
          font-family: "ClvText-Bold", Arial, Gotham, sans-serif;
          line-height: 1.2em;
          font-size: 23px; }
          @media only screen and (min-width: 1440px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-alt-title h1 {
              font-size: 28px; } }
          @media only screen and (min-width: 2100px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-alt-title h1 {
              font-size: 32px; } }
          @media only screen and (max-width: 1400px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-alt-title h1 {
              font-size: 24px !important; } }
          @media only screen and (max-width: 768px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-alt-title h1 {
              font-size: 28px !important; } }
          @media only screen and (max-width: 735px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-alt-title h1 {
              font-size: 24px !important; } }
          @media only screen and (max-width: 480px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-alt-title h1 {
              font-size: 20px !important; } }
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-scroll-arrow {
          display: block;
          width: 30px;
          height: 36px;
          position: relative;
          cursor: pointer;
          margin-top: 20px; }
          @media only screen and (max-width: 1024px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-scroll-arrow {
              margin-top: 12px; } }
          @media only screen and (max-width: 480px) {
            #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-scroll-arrow {
              left: 50%;
              -webkit-transform: translateX(-50%);
                      transform: translateX(-50%); } }
          #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-scroll-arrow::before {
            content: '';
            position: absolute;
            width: 20px;
            left: 50%;
            height: 20px;
            border-left: 1px solid #000;
            border-bottom: 1px solid #000;
            -webkit-transform: translate(-50%) rotate(-45deg);
                    transform: translate(-50%) rotate(-45deg);
            opacity: 1;
            -webkit-animation: fadeInOut 1.3s ease-in infinite;
                    animation: fadeInOut 1.3s ease-in infinite; }

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeInOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
          #zp-project .zp-project-top .zp-project-top-bar .zp-project-info .zp-project-right-info .zp-project-scroll-arrow:hover::before {
            -webkit-animation: none;
                    animation: none; }
    #zp-project .zp-project-top .zp-project-top-bar .zp-project-textarea {
      position: absolute;
      width: 500px;
      margin-left: 50%;
      top: 425px;
      padding-left: 15px; }
      @media only screen and (max-width: 1024px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-textarea {
          width: 330px; } }
      @media only screen and (max-width: 768px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-textarea {
          top: 335px;
          margin-left: 25%; } }
      @media only screen and (max-width: 480px) {
        #zp-project .zp-project-top .zp-project-top-bar .zp-project-textarea {
          width: calc(100% - 88px);
          left: 44px;
          position: absolute;
          margin: 0; } }
      #zp-project .zp-project-top .zp-project-top-bar .zp-project-textarea .zp-line-button {
        padding: 0 !important; }

html.site-project .zp-header {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  position: absolute;
  opacity: 1;
  transition: opacity 0.3s, -webkit-transform 0.4s;
  transition: opacity 0.3s, transform 0.4s;
  transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s;
  top: auto;
  bottom: -400px;
  height: 800px;
  pointer-events: none; }
  @media only screen and (max-width: 1024px) {
    html.site-project .zp-header {
      bottom: -480px; } }
  @media only screen and (max-width: 768px) {
    html.site-project .zp-header {
      bottom: -350px;
      height: 630px; } }
  html.site-project .zp-header.compressed {
    -webkit-transform: scaleX(0.96);
            transform: scaleX(0.96); }
    @media only screen and (max-width: 768px) {
      html.site-project .zp-header.compressed {
        -webkit-transform: scaleX(1);
                transform: scaleX(1); } }
  html.site-project .zp-header .zp-burger {
    pointer-events: visible; }
    html.site-project .zp-header .zp-burger::after {
      display: none; }
  html.site-project .zp-header.hidden {
    opacity: 0;
    transition: opacity 0.2s; }
  html.site-project .zp-header.fixed {
    top: 0;
    position: fixed;
    height: 80px; }

html.site-project .zp-project-nav {
  z-index: 3;
  width: 100%;
  pointer-events: none;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  position: absolute;
  opacity: 1;
  bottom: 0;
  top: auto;
  padding-left: 31px;
  bottom: -400px;
  height: 800px; }
  @media only screen and (max-width: 1024px) {
    html.site-project .zp-project-nav {
      padding-left: 15px;
      bottom: -480px; } }
  @media only screen and (max-width: 768px) {
    html.site-project .zp-project-nav {
      bottom: -350px;
      height: 630px; } }
  @media only screen and (max-width: 480px) {
    html.site-project .zp-project-nav.fixed .zp-project-nav-link {
      bottom: 36px !important; } }
  @media only screen and (max-width: 300px) {
    html.site-project .zp-project-nav {
      display: none; } }
  html.site-project .zp-project-nav.compressed {
    -webkit-transform: scaleX(0.96);
            transform: scaleX(0.96); }
    @media only screen and (max-width: 768px) {
      html.site-project .zp-project-nav.compressed {
        -webkit-transform: scaleX(1);
                transform: scaleX(1); } }
  html.site-project .zp-project-nav.hidden {
    opacity: 0;
    transition: opacity 0.2s; }
  html.site-project .zp-project-nav.fixed {
    top: 0;
    bottom: auto;
    position: fixed; }
    @media only screen and (max-width: 480px) {
      html.site-project .zp-project-nav.fixed {
        width: 170px;
        right: 0;
        height: 80px; } }
  html.site-project .zp-project-nav .zp-project-nav-link {
    display: block;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    position: absolute;
    width: 41px;
    text-align: center;
    pointer-events: auto;
    transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out; }
    @media only screen and (max-width: 480px) {
      html.site-project .zp-project-nav .zp-project-nav-link.to-top {
        -webkit-transform: translateY(-350px);
                transform: translateY(-350px);
        transition: -webkit-transform 0.6s ease-in;
        transition: transform 0.6s ease-in;
        transition: transform 0.6s ease-in, -webkit-transform 0.6s ease-in; } }
    html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-prev {
      bottom: 652px; }
      @media only screen and (max-width: 1024px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-prev {
          bottom: 687px; } }
      @media only screen and (max-width: 768px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-prev {
          bottom: 487px; } }
      @media only screen and (max-width: 480px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-prev {
          bottom: 585px;
          right: 110px; } }
    html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-next {
      bottom: 602px; }
      @media only screen and (max-width: 1024px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-next {
          bottom: 637px; } }
      @media only screen and (max-width: 768px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-next {
          bottom: 437px; } }
      @media only screen and (max-width: 480px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-next {
          bottom: 585px;
          right: 60px; } }
    html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-overview {
      bottom: 552px; }
      @media only screen and (max-width: 1024px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-overview {
          bottom: 587px; } }
      @media only screen and (max-width: 768px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-overview {
          bottom: 387px; } }
      @media only screen and (max-width: 480px) {
        html.site-project .zp-project-nav .zp-project-nav-link.zp-project-nav-overview {
          bottom: 585px;
          right: 10px; } }
    html.site-project .zp-project-nav .zp-project-nav-link > a {
      display: block;
      padding: 15px;
      opacity: 1;
      transition: opacity 0.4s;
      z-index: 1;
      color: #000;
      font-size: 0.9em;
      font-family: "ClvText-Light", Gotham, sans-serif; }
      html.site-project .zp-project-nav .zp-project-nav-link > a:hover {
        opacity: 0;
        transition: opacity 0.1s; }
        html.site-project .zp-project-nav .zp-project-nav-link > a:hover ~ .zp-project-nav-link-text {
          opacity: 1;
          -webkit-transform: translateX(10px);
                  transform: translateX(10px); }
          @media only screen and (max-width: 735px) {
            html.site-project .zp-project-nav .zp-project-nav-link > a:hover ~ .zp-project-nav-link-text {
              opacity: 0;
              -webkit-transform: translateX(0);
                      transform: translateX(0); } }
      @media only screen and (max-height: 680px) {
        html.site-project .zp-project-nav .zp-project-nav-link > a {
          opacity: 0;
          padding: 0;
          width: 30px;
          height: 30px; } }
      @media only screen and (max-width: 768px) {
        html.site-project .zp-project-nav .zp-project-nav-link > a {
          opacity: 0;
          padding: 0;
          width: 30px;
          height: 30px; } }
    html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      pointer-events: none;
      transition: opacity 0.1s, color .1s, -webkit-transform 0.2s ease-out;
      transition: opacity 0.1s, transform 0.2s ease-out, color .1s;
      transition: opacity 0.1s, transform 0.2s ease-out, color .1s, -webkit-transform 0.2s ease-out;
      -webkit-transform: translateX(-50%) translateY(-50%);
              transform: translateX(-50%) translateY(-50%); }
      html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon.is-white {
        color: #fff; }
        @media only screen and (max-width: 480px) {
          html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon.is-white {
            color: #000 !important; } }
      @media only screen and (max-height: 680px) {
        html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon {
          opacity: 1; } }
      @media only screen and (max-width: 768px) {
        html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon {
          opacity: 1; } }
      html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon::after {
        font-family: "ZWEIPRO";
        vertical-align: middle; }
      html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon.zp-project-nav-prev-icon::after {
        content: "F"; }
      html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon.zp-project-nav-next-icon::after {
        content: "G"; }
      html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-icon.zp-project-nav-overview-icon::after {
        content: "H"; }
    html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-link-text {
      position: absolute;
      top: 6px;
      left: 36px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.1s, color .1s, -webkit-transform 0.2s;
      transition: opacity 0.1s, transform 0.2s, color .1s;
      transition: opacity 0.1s, transform 0.2s, color .1s, -webkit-transform 0.2s;
      -webkit-transform: translateX(0);
              transform: translateX(0);
      display: table; }
      @media only screen and (max-width: 735px) {
        html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-link-text {
          display: none; } }
      html.site-project .zp-project-nav .zp-project-nav-link .zp-project-nav-link-text.is-white {
        color: #fff; }

html.site-project .zp-project-container-left {
  width: 2%;
  background-color: transparent; }

html.site-project .zp-project-container-right {
  width: 2%;
  background-color: transparent; }

html.site-project .zp-fix-mail-container {
  width: 100%;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  transition: opacity 0.3s, -webkit-transform 0.4s;
  transition: opacity 0.3s, transform 0.4s;
  transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; }
  html.site-project .zp-fix-mail-container.compressed {
    -webkit-transform: scaleX(0.96);
            transform: scaleX(0.96); }
    @media only screen and (max-width: 768px) {
      html.site-project .zp-fix-mail-container.compressed {
        -webkit-transform: scaleX(1);
                transform: scaleX(1); } }
  html.site-project .zp-fix-mail-container.hidden {
    opacity: 0;
    transition: opacity 0.2s; }