h1 {
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 42px;
}

h2 {
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 30px;
}

h3 {
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

p {
  color: #1d1d1d;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

a {
  color: #000;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: inline-block;
}

.headersection {
  height: auto;
  align-items: flex-start;
  padding-top: 80px;
  padding-bottom: 100px;
  display: flex;
}

.projectsection {
  height: auto;
  background-color: #ebecec;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.aboutsection {
  height: auto;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.contactsection {
  height: auto;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 100px;
  display: flex;
}

.contactsection.project {
  height: auto;
}

.footersection {
  height: 80px;
  background-color: #000;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mainwrapper {
  flex-direction: column;
  padding-left: 20%;
  padding-right: 20%;
  display: block;
}

.mainwrapper.header {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}

.mainwrapper.subsite {
  padding-top: 24px;
}

.mainwrapper.contact {
  width: 80%;
  padding-bottom: 0;
}

.button {
  background-color: #000;
  border-radius: 6px;
  padding: 16px 24px;
  font-weight: 500;
}

.button.reduced {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
}

.body {
  font-family: Rubik, sans-serif;
  overflow: visible;
}

.circlewrapper {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-left: 15%;
  padding-right: 15%;
  display: flex;
}

.circleimagewrapper {
  max-width: 20%;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.headertextwrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 8px 25%;
  display: flex;
}

.projectimagewrapper {
  width: 100%;
  cursor: pointer;
}

.projectwrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.projecttitle {
  margin-top: 16px;
  margin-bottom: 8px;
}

.projectparagraph {
  margin-bottom: 16px;
}

.projectparagraph.small {
  font-size: 13px;
  line-height: 19px;
}

.projectmeta {
  text-align: left;
  margin-bottom: 8px;
}

.headerheadline {
  text-align: center;
  mix-blend-mode: normal;
  margin-bottom: 48px;
  font-size: 32px;
  line-height: 42px;
}

.professionheadline {
  text-align: center;
  margin-bottom: 24px;
}

.aboutwrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.sectiontitle {
  margin-bottom: 16px;
}

.contactparagraph {
  text-align: center;
  margin-bottom: 24px;
}

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

.backgroundimage {
  background-image: url('../images/SlideshowReeuced.gif');
  background-position: 0 0;
  background-size: cover;
}

.backgroundimage.klartext {
  background-image: url('../images/SlideshowRe.gif');
}

.circlesubtext {
  text-align: center;
  object-fit: fill;
  display: block;
}

.textwrapper {
  width: 100%;
  flex-direction: column;
  display: flex;
}

.backimagecontainer {
  width: 70%;
}

.links {
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
  font-family: Rubik, sans-serif;
  font-weight: 500;
  text-decoration: none;
}

.links:hover {
  color: #000;
  -webkit-text-stroke-width: 0px;
  font-weight: 500;
  text-decoration: underline;
}

.links.w--current {
  color: #000;
}

.links.w--current:hover {
  color: #747474;
}

.links.dark {
  color: #818181;
  font-weight: 300;
}

.nav-menu {
  align-items: center;
  display: flex;
}

.navdiv {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.navbar {
  background-color: rgba(221, 221, 221, 0);
  padding: 24px 5% 16px;
  display: block;
}

.navbar.project {
  display: none;
}

.headerimagecontainer {
  background-image: url('../images/UX-Icon.gif');
  background-position: 0 0;
  background-size: cover;
}

.headerimagecontainer.graphiccircle {
  background-image: url('../images/GraphicCircle.gif');
}

.headerimagecontainer.illustrationcircle {
  background-image: url('../images/IllustrationCircletransparent.gif');
}

.headerimage {
  margin-bottom: 0;
  display: block;
}

.buttoncontainer {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.projectheadline {
  text-align: left;
  margin-bottom: 8px;
}

.badgewrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: flex;
}

.bigbadgewrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.badge {
  width: 24px;
}

.infoimage {
  width: 100%;
  max-width: 100%;
}

.projectheadermeta {
  text-align: center;
  margin-bottom: 24px;
}

.projectheaderimage {
  max-width: 100%;
  margin-bottom: 24px;
}

.infoheadline, .infoheadline.spacing {
  margin-bottom: 8px;
}

.projectoverviewtext {
  width: 80%;
  text-align: left;
  font-size: 20px;
  font-weight: 400;
}

.projectoverviewtext.klartext {
  margin-bottom: 24px;
}

.longparagraph {
  width: 80%;
}

.projectheaderwrapper {
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 20% 24px;
  display: flex;
}

.mobilecircleimagewrapper {
  display: none;
}

.gifwrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.biggifwrapper {
  margin-top: 80px;
  margin-bottom: 80px;
}

.contentimage01 {
  margin-bottom: 40px;
}

.pixelbirds {
  margin-bottom: 0;
}

.logbookwrapper {
  display: flex;
}

.blogcontent {
  width: 65%;
  margin: 48px auto;
}

.blogcontent.first {
  margin-top: 0;
}

.blogcontent.animations {
  margin-bottom: 0;
}

.walkanimation {
  width: 100%;
}

.walkanimation.bluetit {
  width: 80%;
}

.klartextimage {
  width: 100%;
  margin-bottom: 24px;
}

.klartextimagewrapper {
  align-items: flex-start;
  display: flex;
}

.logos {
  width: 100%;
  margin-bottom: 24px;
}

.metawrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: column;
  display: flex;
}

.goingbacksection {
  padding: 24px 5% 24px 20%;
}

.goingbacksection.down {
  align-items: center;
  display: flex;
}

.backbuttonwrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  display: flex;
}

.materialfontlink {
  font-family: Materialiconsround, sans-serif;
  font-weight: 400;
}

.imprintsubtitle {
  padding-top: 16px;
  padding-bottom: 16px;
  font-family: Rubik, sans-serif;
  font-weight: 500;
}

.imprintsubtitle.title {
  padding-bottom: 0;
}

.imprint {
  margin-top: 0;
  margin-bottom: 24px;
}

.imagemobile {
  display: none;
}

@media screen and (max-width: 991px) {
  .headersection {
    height: auto;
    padding-top: 8px;
    padding-bottom: 48px;
  }

  .projectsection, .aboutsection, .contactsection {
    height: auto;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .mainwrapper {
    padding-left: 10%;
    padding-right: 10%;
  }

  .mainwrapper.header {
    padding-top: 0;
    padding-left: 10%;
    padding-right: 10%;
  }

  .mainwrapper.subsite {
    padding-bottom: 8px;
    padding-left: 15%;
    padding-right: 15%;
  }

  .mainwrapper.contact {
    width: 100%;
  }

  .button.reduced {
    margin-top: 8px;
    margin-bottom: 24px;
  }

  .circlewrapper {
    padding-left: 5%;
    padding-right: 5%;
  }

  .circleimagewrapper {
    display: none;
  }

  .projecttitle, .projectmeta {
    margin-bottom: 8px;
  }

  .sectiontitle {
    margin-bottom: 16px;
  }

  .backgroundimage {
    display: none;
  }

  .circlesubtext {
    margin-top: 16px;
  }

  .links {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .nav-menu {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: rgba(255, 255, 255, .94);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .navdiv {
    justify-content: flex-end;
  }

  .navbar {
    padding-top: 16px;
    padding-bottom: 8px;
  }

  .projectheaderwrapper {
    padding-left: 10%;
    padding-right: 10%;
  }

  .mobilecircleimagewrapper {
    width: 20%;
    display: block;
  }

  .mobileimage {
    opacity: 0;
  }

  .blogcontent {
    width: 80%;
  }

  .goingbacksection {
    padding-left: 10%;
    padding-right: 10%;
  }

  .goingbacksection.down {
    display: block;
  }

  .backbuttonwrapper {
    align-items: center;
  }

  .menu-button {
    padding: 8px;
  }

  .menu-button.w--open {
    background-color: #000;
  }

  .imagemobile {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .projectsection, .aboutsection {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .mainwrapper {
    padding-top: 0;
    padding-bottom: 0;
  }

  .mainwrapper.header {
    padding-bottom: 0;
  }

  .mainwrapper.contact {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .aboutwrapper {
    align-items: flex-start;
  }

  .circlesubtext {
    margin-top: 8px;
  }

  .bigbadgewrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }

  .logbookwrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
  }

  .blogcontent {
    width: 100%;
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .goingbacksection {
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media screen and (max-width: 479px) {
  .headersection {
    height: auto;
    padding-top: 8px;
    padding-bottom: 48px;
  }

  .projectsection, .aboutsection {
    height: auto;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .contactsection {
    height: auto;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .contactsection.project {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .mainwrapper, .mainwrapper.header {
    padding: 0 5%;
  }

  .mainwrapper.subsite {
    padding: 24px 5% 0;
  }

  .circlewrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
    align-content: stretch;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 16px;
    padding-left: 10%;
    padding-right: 10%;
  }

  .circleimagewrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    display: none;
  }

  .headertextwrapper {
    padding-left: 10%;
    padding-right: 10%;
  }

  .projectwrapper {
    flex-direction: column;
  }

  .projecttitle, .projectmeta {
    margin-bottom: 8px;
  }

  .headerheadline {
    margin-bottom: 24px;
    font-size: 24px;
    line-height: 32px;
  }

  .aboutwrapper {
    flex-direction: column;
  }

  .sectiontitle {
    margin-bottom: 8px;
  }

  .backgroundimage {
    display: none;
  }

  .circlesubtext {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 18px;
  }

  .links {
    background-color: rgba(255, 255, 255, 0);
  }

  .nav-menu {
    background-color: rgba(255, 255, 255, .98);
  }

  .navdiv {
    justify-content: flex-end;
  }

  .navbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .headerimage {
    opacity: 1;
    display: block;
    overflow: visible;
  }

  .projectheadline {
    font-size: 24px;
    line-height: 28px;
  }

  .projectheadermeta {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 18px;
  }

  .projectoverviewtext, .longparagraph {
    width: 100%;
  }

  .projectheaderwrapper {
    padding: 5%;
  }

  .mobilecircleimagewrapper {
    width: 60%;
    max-width: 40%;
    display: block;
  }

  .mobileimage {
    opacity: 0;
  }

  .gifwrapper {
    width: 100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .biggifwrapper {
    width: 100%;
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .birdgifs {
    width: 100%;
    overflow: hidden;
  }

  .walkanimation {
    width: 100%;
    max-width: 20%;
  }

  .goingbacksection {
    padding-bottom: 0;
    padding-left: 5%;
    padding-right: 5%;
  }

  .goingbacksection.down {
    padding-top: 8px;
  }

  .backbuttonwrapper {
    align-items: center;
  }

  .menu-button {
    padding: 8px;
  }

  .imagemobile {
    width: 100%;
  }
}


@font-face {
  font-family: 'Materialiconsround';
  src: url('../fonts/MaterialIconsRound-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}