index.css

.dark {
  color: #595971
}

.red {
  color: #f68b9d
}

.purple {
  color: #c887fb
}

.orange {
  color: #ffd392
}

.green {
  color: #90feb5
}

.yellow {
  color: #fef995
}

.blue {
  color: #6fb1fd
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

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

audio,canvas,progress,video {
  display: inline-block;
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden],template {
  display: none
}

a {
  background-color: transparent
}

a:active,a:hover {
  outline: 0
}

abbr[title] {
  border-bottom: 1px dotted
}

dfn {
  font-style: italic
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

mark {
  background: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

img {
  border: 0
}

svg:not(:root) {
  overflow: hidden
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box
}

pre {
  overflow: auto
}

code,kbd,pre,samp {
  font-family: monospace,monospace;
  font-size: 1em
}

button,input,optgroup,select,textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

button {
  overflow: visible
}

button,select {
  text-transform: none
}

button,html input[type=button],input[type=reset],input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}

button[disabled],html input[disabled] {
  cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
  border: 0;
  padding: 0
}

input {
  line-height: normal
}

input[type=checkbox],input[type=radio] {
  box-sizing: border-box;
  padding: 0
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
  height: auto
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto
}

optgroup {
  font-weight: 700
}

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

td,th {
  padding: 0
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-family: Theinhardt,sans-serif;
  font-weight: 400;
  font-style: normal;
  /* color: #fff; */
  color:#424242;
  text-rendering: optimizeLegibility
}

.h1,h1 {
  font-size: 2.75rem;
  line-height: 48.4px
}

.h2,h2 {
  font-size: 2.3125rem;
  line-height: 40.7px
}

.h3,h3 {
  font-size: 1.6875rem;
  line-height: 29.7px
}

.h4,h4 {
  font-size: 1.4375rem;
  line-height: 25.3px
}

.h5,h5 {
  font-size: 1.0625rem;
  line-height: 18.7px
}

.h6,h6 {
  font-size: .875rem;
  line-height: 15.8px
}

a {
  color: #424242;
  text-decoration: none
}

p {
  margin: 0;
  font-family: inherit;
  font-weight: 400
}

hr {
  margin: 22px 0 21px;
  height: 0;
  border: solid #1b1b2a;
  border-width: 1px 0 0;
  clear: both
}

em,i {
  font-style: italic
}

b,em,i,strong {
  line-height: inherit
}

b,strong {
  font-weight: 700
}

small {
  font-size: 60%;
  line-height: inherit
}

html input[disabled] {
  cursor: not-allowed
}

textarea {
  resize: vertical
}

html {
  box-sizing: border-box;
  font-family: Akkurat Mono,monospace;
  font-size: 100%
}

*,:after,:before {
  box-sizing: inherit
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fdfdfd;
  color: #22222a;
  position: relative;
  font-size: .875rem
}


section {
  width: 100%;
/*  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;*/
  height: 100vh;
  display: -ms-flexbox;
  display: flex;
}

.content {
  display: flex;
  vertical-align: middle;
}


.intro {
  height: 86vh;
}



::-moz-selection {
  background: #b3d4fc;
  text-shadow: none
}

::selection {
  background: #b3d4fc;
  text-shadow: none
}

.no-list-style,ul.no-list-style {
  list-style: none
}

.uppercase {
  text-transform: uppercase
}

.fill-remainder {
  float: none;
  overflow: hidden
}

.wrapper {
  max-width: 1310px;
  padding: 0 15px;
  margin: 0 auto
}

.header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-align: center;
  align-items: center;
  padding: 30px 0;
  transform: translateZ(0);
  z-index: 1000
}

.header-title,.mobile-header-title {
  font-size: .875rem;
  line-height: 1;
  font-weight: 400;
  margin-right: auto
}

.header-title span,.mobile-header-title span {
  display: inline-block;
  margin-left: 5px;
  color: #63637e
}

.nav {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-family: Theinhardt,sans-serif
}

@media screen and (max-width: 980px) {
  .nav {
      display:none
  }
}

.nav-item {
  position: relative;
  -ms-flex-preferred-size: 16.66%;
  flex-basis: 16.66%
}

.nav-item a {
  position: relative;
  line-height: 1;
  will-change: transform
}

.nav-item a.active:after {
  opacity: 1;
  transform: scale(1)
}

.nav-item a:hover .nav-item-copy--base {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%)
}

.nav-item a:hover .nav-item-copy--clone {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.nav-item a:after {
  display: block;
  opacity: 0;
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #f68b9d;
  transition: .35s;
  transform: scale(0)
}

.nav-item-copy {
  display: inline-block;
  transition: .3s cubic-bezier(.215,.61,.355,1);
  pointer-events: none
}

.nav-item-copy--clone {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden
}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 0;
  z-index: 100;
  font-family: Theinhardt,sans-serif;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: center;
  justify-content: center;
  pointer-events: none
}

.mobile-nav.isOpen {
  pointer-events: auto
}

.mobile-nav.isOpen .mobile-nav-bg {
  transform: scaleX(1);
  visibility: visible
}

.mobile-nav.isOpen .mobile-nav-item {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}

@media screen and (min-width: 980px) {
  .mobile-header-title,.mobile-nav,.mobile-nav-trigger {
      display:none
  }
}

.mobile-header-title {
  position: absolute;
  z-index: 200;
  top: 30px;
  left: 0
}

.mobile-nav-trigger {
  cursor: pointer;
  position: absolute;
  z-index: 200;
  top: 30px;
  right: 0;
  display: -ms-flexbox;
  display: flex;
  font-family: Theinhardt,sans-serif
}

@media screen and (min-width: 980px) {
  .mobile-nav-trigger {
      display:none
  }
}

.mobile-nav-trigger:hover .mobile-nav-icon span:nth-child(2) {
  transform: scaleX(.8)
}

.mobile-nav-trigger.isOpen .mobile-nav-menu {
  transform: translateY(-100%);
  opacity: 0
}

.mobile-nav-trigger.isOpen .mobile-nav-close {
  transform: translateY(0);
  opacity: 1
}

.mobile-nav-trigger.isOpen .mobile-nav-icon span,.mobile-nav-trigger.isOpen .mobile-nav-icon span:nth-child(2) {
  transform: scaleX(.2)
}

.mobile-nav-copy {
  position: relative
}

.mobile-nav-icon {
  position: absolute;
  top: 0;
  right: -30px;
  width: 20px;
  height: 17px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.mobile-nav-icon span {
  width: 100%;
  height: 1px;
  background-color: #666;
  transition: .2s;
  transform-origin: right 50%
}

.mobile-nav-icon span:nth-child(2) {
  width: 130%
}

.mobile-nav-close,.mobile-nav-menu {
  display: inline-block;
  transition: .3s
}

.mobile-nav-close {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  opacity: 0
}

.mobile-nav-item {
  position: relative;
  font-size: 3.5rem;
  padding: 30px 0;
  opacity: 0;
  transform: translateX(-30px);
  transition: .2666s ease-in-out;
  visibility: hidden
}

.mobile-nav-item:first-child {
  transition-delay: .05s
}

.mobile-nav-item:nth-child(2) {
  transition-delay: .1s
}

.mobile-nav-item:nth-child(3) {
  transition-delay: .15s
}

.mobile-nav-item a.active:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 10px;
  height: 10px;
  background-color: #f68b9d;
  border-radius: 50%
}

.mobile-nav-bgs {
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  pointer-events: none
}

.mobile-nav-bg,.mobile-nav-bgs {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: -1
}

.mobile-nav-bg {
  background-color: #ffffff;
  transition: .4s cubic-bezier(.86,0,.07,1);
  transform: scaleX(0);
  transform-origin: left center;
  visibility: hidden;
  will-change: transform
}

.mobile-nav-bg:first-child,.mobile-nav-bg:last-child {
  width: 71px
}

@media screen and (max-width: 650px) {
  .mobile-nav-bg:first-child,.mobile-nav-bg:last-child {
      width:31px
  }
}

.mobile-nav-bg:first-child {
  left: -70px
}

@media screen and (max-width: 650px) {
  .mobile-nav-bg:first-child {
      left:-30px
  }
}

.mobile-nav-bg:last-child {
  right: -70px
}

@media screen and (max-width: 650px) {
  .mobile-nav-bg:last-child {
      right:-30px
  }
}

.mobile-nav-bg:nth-child(2) {
  left: 0;
  width: calc(25% + 1px)
}

.mobile-nav-bg:nth-child(3) {
  left: 25%;
  width: calc(25% + 1px)
}

.mobile-nav-bg:nth-child(4) {
  left: 50%;
  width: calc(25% + 1px)
}

.mobile-nav-bg:nth-child(5) {
  left: 75%;
  width: calc(25% + 1px)
}





.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 30px;
  width: 70px;
  z-index: 21
}

@media screen and (max-width: 980px) {
  .footer {
      padding:0;
      z-index: 1100;
      -ms-flex-direction: row;
      flex-direction: row;
      width: 100%;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      width: calc(100% - 140px);
      max-width: 1300px;
      left: 50%;
      transform: translateX(-50%);
      visibility: hidden
  }

  .footer.isOpen {
      visibility: visible
  }
}

@media screen and (max-width: 650px) {
  .footer {
      width:calc(100% - 60px);
      max-width: 1380px
  }
}

.footer.isOpen .footer-item {
  visibility: visible;
  opacity: 1;
  transform: translateY(0)
}

.footer-item {
  margin-bottom: 25px
}

@media screen and (max-width: 980px) {
  .footer-item {
      opacity:0;
      visibility: hidden;
      transform: translateY(10px);
      transition: .3s
  }

  .footer-item:first-child {
      transition-delay: .04s
  }

  .footer-item:nth-child(2) {
      transition-delay: .08s
  }

  .footer-item:nth-child(3) {
      transition-delay: .12s
  }

  .footer-item:nth-child(4) {
      transition-delay: .16s
  }

  .footer-item img {
      width: 24px;
      height: 24px
  }
}

.footer-line {
  display: none;
  width: 88px;
  height: 1px;
  background-color: #fff
}

.shell {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  padding: 0 70px;
  max-width: 1440px;
  margin: 0 auto
}

@media screen and (max-width: 650px) {
  .shell {
      padding:0 30px
  }
}

.shell.isAbout {
  overflow: auto;
  height: auto
}

@media screen and (max-width: 980px) {
  .shell.isFun {
      overflow:auto;
      height: auto
  }
}



@media screen and (max-width: 920px) {
  .shell.isHome .main {
      position:absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin-bottom: 0;
      overflow: hidden
  }
}

.shell.isFix {
  height: 100vh;
  overflow: hidden
}

.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.main {
  position: relative;
  z-index: 20;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 80px
}

.lines {
  position: fixed;
  top: 0;
  left: 50%;
  height: 100%;
  width: calc(100% - 140px);
  /*z-index: 100;*/
  transform: translateX(-50%);
  pointer-events: none;
  max-width: 1300px;
  z-index:0;
}

@media screen and (max-width: 650px) {
  .lines {
      width:calc(100% - 60px);
      max-width: 1380px
  }
}

.line {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: red;
  opacity: .07
}

.line:first-child {
  left: 16.66%
}

.line:nth-child(2) {
  left: 33.32%
}

.line:nth-child(3) {
  left: 49.98%
}

.line:nth-child(4) {
  left: 66.64%
}

.line:nth-child(5) {
  left: 83.3%
}

.line:nth-child(6) {
  left: 99.96%
}

@media screen and (max-width: 980px) {
  .line:first-child {
      left:25%
  }

  .line:nth-child(2) {
      left: 50%
  }

  .line:nth-child(3) {
      left: 75%
  }

  .line:nth-child(4) {
      left: 100%
  }

  .line:nth-child(5) {
      left: 125%
  }

  .line:nth-child(5),.line:nth-child(6) {
      display: none
  }
}
/*
.pluses {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  transform: translateX(-50%)
}*/


.pluses {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 50%;
  height: 100%;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-direction: column;
  flex-direction: column;
  width: calc(100% - 140px);
  max-width: 1300px;
  transform: translateX(-50%)
}

@media screen and (max-width: 950px) {
  .pluses {
      display:none
  }
}

.pluses.hide,.pluses.isHidden .plus {
  opacity: 0
}

.plus-row {
  position: relative;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.plus-row:first-child .plus:nth-child(1) {
  transition-delay: .01667s
}

.plus-row:first-child .plus:nth-child(2) {
  transition-delay: .03333s
}

.plus-row:first-child .plus:nth-child(3) {
  transition-delay: .05s
}

.plus-row:first-child .plus:nth-child(4) {
  transition-delay: .06667s
}

.plus-row:first-child .plus:nth-child(5) {
  transition-delay: .08333s
}

.plus-row:first-child .plus:nth-child(6) {
  transition-delay: .1s
}

.plus-row:first-child .plus:nth-child(7) {
  transition-delay: .11667s
}

.plus-row:nth-child(2) .plus:first-child {
  transition-delay: .03333s
}

.plus-row:nth-child(2) .plus:nth-child(2) {
  transition-delay: .06667s
}

.plus-row:nth-child(2) .plus:nth-child(3) {
  transition-delay: .1s
}

.plus-row:nth-child(2) .plus:nth-child(4) {
  transition-delay: .13333s
}

.plus-row:nth-child(2) .plus:nth-child(5) {
  transition-delay: .16667s
}

.plus-row:nth-child(2) .plus:nth-child(6) {
  transition-delay: .2s
}

.plus-row:nth-child(2) .plus:nth-child(7) {
  transition-delay: .23333s
}

.plus-row:nth-child(3) .plus:first-child {
  transition-delay: .05s
}

.plus-row:nth-child(3) .plus:nth-child(2) {
  transition-delay: .1s
}

.plus-row:nth-child(3) .plus:nth-child(3) {
  transition-delay: .15s
}

.plus-row:nth-child(3) .plus:nth-child(4) {
  transition-delay: .2s
}

.plus-row:nth-child(3) .plus:nth-child(5) {
  transition-delay: .25s
}

.plus-row:nth-child(3) .plus:nth-child(6) {
  transition-delay: .3s
}

.plus-row:nth-child(3) .plus:nth-child(7) {
  transition-delay: .35s
}

.plus-row:nth-child(4) .plus:first-child {
  transition-delay: .06667s
}

.plus-row:nth-child(4) .plus:nth-child(2) {
  transition-delay: .13333s
}

.plus-row:nth-child(4) .plus:nth-child(3) {
  transition-delay: .2s
}

.plus-row:nth-child(4) .plus:nth-child(4) {
  transition-delay: .26667s
}

.plus-row:nth-child(4) .plus:nth-child(5) {
  transition-delay: .33333s
}

.plus-row:nth-child(4) .plus:nth-child(6) {
  transition-delay: .4s
}

.plus-row:nth-child(4) .plus:nth-child(7) {
  transition-delay: .46667s
}

.plus-row:nth-child(5) .plus:first-child {
  transition-delay: .08333s
}

.plus-row:nth-child(5) .plus:nth-child(2) {
  transition-delay: .16667s
}

.plus-row:nth-child(5) .plus:nth-child(3) {
  transition-delay: .25s
}

.plus-row:nth-child(5) .plus:nth-child(4) {
  transition-delay: .33333s
}

.plus-row:nth-child(5) .plus:nth-child(5) {
  transition-delay: .41667s
}

.plus-row:nth-child(5) .plus:nth-child(6) {
  transition-delay: .5s
}

.plus-row:nth-child(5) .plus:nth-child(7) {
  transition-delay: .58333s
}

.plus-row.hide {
  opacity: 0
}

.plus {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  margin-left: -4px;
  transform: translateY(-50%);
  transition: .5s
}

.plus.hide {
  visibility: hidden
}

.plus:first-child {
  left: 0
}

.plus:nth-child(2) {
  left: 16.66%
}

.plus:nth-child(3) {
  left: 33.32%
}

.plus:nth-child(4) {
  left: 49.98%
}

.plus:nth-child(5) {
  left: 66.64%
}

.plus:nth-child(6) {
  left: 83.3%
}

.plus:nth-child(7) {
  left: 99.96%
}

.plus:nth-child(8) {
  left: 116.62%
}

@media screen and (max-width: 980px) {
  .plus:first-child {
      left:0
  }

  .plus:nth-child(2) {
      left: 25%
  }

  .plus:nth-child(3) {
      left: 50%
  }

  .plus:nth-child(4) {
      left: 75%
  }

  .plus:nth-child(5) {
      left: 100%
  }

  .plus:nth-child(6) {
      left: 125%
  }

  .plus:nth-child(6),.plus:nth-child(7) {
      display: none
  }
}

.plus:after,.plus:before {
  content: "";
  position: absolute;
  background-color: #ffa0a0
}

.plus:before {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%
}

.plus:after {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  width: 100%
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(33.32% + 24px);
  height: 100%;
  /* background-color: #101015; */
  z-index: -1;
  transition: .5s cubic-bezier(.785,.135,.15,.86)
}

.overlay.hide {
  transform: translateX(-100%)
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: Theinhardt,sans-serif;
  font-size: 1.125rem
}

.loading.isHidden {
  visibility: hidden;
  pointer-events: none
}


.loading-bgs {
  position: absolute;
  z-index: 9555;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(100% - 140px);
  max-width: 1300px
}

@media screen and (max-width: 650px) {
  .loading-bgs {
      width:calc(100% - 60px);
      max-width: 1380px
  }
}

.loading-bgs.isHidden .loading-bg {
  transform: translateY(-100%)
}

.loading-bg {
  position: absolute;
  top: 0;
  width: calc(16.66% + 1px);
  height: 100%;
  background-color: #101015;
  transition: .8s cubic-bezier(.77,0,.175,1)
}


.home {

  height: 100%

}

.home-let-base {
  white-space: nowrap
}

.isHidden .home-let-base b {
  transform: translateY(100%)
}

.home-let-base b {
  transition: .5s;
  display: inline-block
}

.home-let-part {
  overflow: hidden;
  display: inline-block;
  line-height: 1;
  transition: .75s
}



.isHidden .home-let-part {
  transform: translateY(25%)
}

.home-nav {
  position: absolute;
  z-index: 20;
  top: 50%;
  right: -15px;
  transform: translateY(-50%)
}

@media screen and (max-width: 920px) {
  .home-nav {
      top:auto;
      right: auto;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) rotate(90deg);
      width: 5px;
      display:none;
  }
}

.home-nav.isHidden .home-nav-bar,.home-nav.isHidden .home-nav-item.active .home-nav-bar {
  transform: scaleX(0)
}

.home-nav-item {
  position: relative;
  width: 15px;
  height: 1px;
  padding: 5px 0;
  cursor: pointer
}

.home-nav-item:hover .home-nav-title {
  opacity: 1;
  visibility: visible;
  transform: translateX(-100%)
}

.home-nav-item.active .home-nav-bar {
  background-color: #f68b9d
}

.home-nav-item.active .home-nav-bar.clone {
  transform: scaleX(2)
}

.home-nav-item.active .home-nav-bar.base {
  transform: translateX(30px) scaleX(0)!important
}

.home-nav-title {
  position: absolute;
  top: -4px;
  left: -10px;
  transform: translateX(-110%);
  white-space: nowrap;
  font-family: Theinhardt;
  display: inline-block;
  padding: 3px;
  font-size: 10px;
  /* background: #22222a; */
  background:#cdcdff;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: 0;
  visibility: hidden;
  transition: .2s
}

@media screen and (max-width: 920px) {
  .home-nav-title {
      display:none
  }
}

.home-nav-bar {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #01f;
  transition: .23s;
  transform-origin: left center
}

.home-nav-bar.clone {
  transform: scaleX(0);
  transition: .3s .1s
}

.home-pic {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-width: 920px) {
  .home-pic {
      width:100%!important;
      -ms-flex-preferred-size: 100%!important;
      flex-basis: 100%!important;
      position: absolute;
      height: 100%
  }
}

.home-title {
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  z-index: 5;
  font-size: 7.8vw;
  margin-left: -20px;
  font-weight: 700;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column
}

@media screen and (min-width: 1440px) {
  .home-title {
      font-size:6.875rem
  }
}

@media screen and (max-width: 920px) {
  .home-title {
      left:70px;
      margin-left: 0;
      font-size: 4.375rem;
      transition: .6s cubic-bezier(.77,0,.175,1)
  }
}

@media screen and (max-width: 920px) and (max-height:600px) {
  .home-title {
      font-size:3.75rem
  }
}

@media screen and (max-width: 920px) {
  .home-title.isUp {
      transform:translateY(-200px)
  }
}

@media screen and (max-width: 920px) and (max-height:600px) {
  .home-title.isUp {
      transform:translateY(-160px)
  }
}

@media screen and (max-width: 920px) {
  .home-title.isDouble.isUp {
      transform:translateY(-260px)
  }
}

@media screen and (max-width: 920px) and (max-height:600px) {
  .home-title.isDouble.isUp {
      transform:translateY(-220px)
  }
}

@media screen and (max-width: 650px) {
  .home-title {
      left:30px;
      margin-left: 0
  }
}

@media screen and (max-width: 550px) {
  .home-title {
      font-size:3.125rem
  }
}

@media screen and (max-width: 390px) {
  .home-title {
      font-size:2.5rem
  }
}

.home-title .whitespace b {
  min-width: 25px
}

.mobile-show-info {
  font-size: .875rem;
  font-weight: 400;
  cursor: pointer
}

@media screen and (min-width: 920px) {
  .mobile-show-info {
      display:none
  }
}

.desktop-hide{
  display:none;
}

@media screen and (max-width: 920px) {
  .mobile-hide {
      display:none
  }
  .desktop-hide{
    display:unset;
  }
}

.home-imgs {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

/* 
.home-imgs{
background-size: contain;
background-repeat: no-repeat;
margin-right: 50px;
top: 50%;
transform: translateY(-50%);
} */

.home-img-holder {
  overflow: hidden;
  position: relative;
  width: 33.25%;
  height: calc(100% + 81px)
}

.home-img-holder--half:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #22222a
}

@media screen and (max-width: 920px) {
  .home-img-holder--half:after {
      display:none
  }
}

.home-img-holder:first-child .home-img {
  right: -150%
}

@media screen and (max-width: 920px) {
  .home-img-holder:first-child .home-img {
      right:-200%
  }
}

.home-img-holder:nth-child(2) .home-img {
  right: -50%
}

@media screen and (max-width: 920px) {
  .home-img-holder:nth-child(2) .home-img {
      right:-100%
  }
}

.home-img-holder:last-child .home-img {
  right: 50%
}

@media screen and (max-width: 920px) {
  .home-img-holder:last-child .home-img {
      right:0
  }
}

.home-img-inner {
  left: 0;
  bottom: 0;
  overflow: hidden
}

.home-img,.home-img-inner {
  position: absolute;
  top: 0;
  right: 0
}

.home-img {
  width: 333%;
  height: 100%;
  background-position: 50%;
  background-size: cover
}

.home-content {
  position: relative;
  z-index: 2;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  /* color: #bdbdd5; */
  color:#424242;
  font-size: .75rem
}

@media screen and (max-width: 920px) {
  .home-content {
      width:100%!important;
      -ms-flex-preferred-size: 100%!important;
      flex-basis: 100%!important;
      padding-left: 70px
  }
}

@media screen and (max-width: 650px) {
  .home-content {
      padding-left:30px
  }
}

.home-content .uppercase {
  font-size: .625rem
}

.home-visit {
  position: absolute;
  bottom: 80px;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  font-family: Theinhardt,sans-serif;
  font-size: .875rem;
  line-height: 1
}

@media screen and (max-width: 920px) {
  .home-visit {
      left:70px;
      bottom: 50px
  }
}

@media screen and (max-width: 650px) {
  .home-visit {
      left:30px
  }
}

.home-visit b {
  font-weight: 400
}

.home-visit .whitespace {
  min-width: 4px
}

.home-visit:hover .home-visit-arrow-b.clone {
  transform: translateX(0);
  transition: .5s cubic-bezier(.77,0,.175,1) .1s
}

.home-visit:hover .home-visit-arrow-b:not(.clone) {
  transition: .3s cubic-bezier(.77,0,.175,1);
  transform: translateX(100%)
}

.home-visit.isHidden img {
  transform: translateX(100%);
  opacity: 0
}

.home-visit-arrow {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-left: 15px;
  
}

.home-visit-arrow-b.clone {
  position: absolute;
  top: 2px;
  left: 0;
  transform: translateX(-150%)
}

.home-date {
  margin-bottom: 8px;
  font-size: .625rem;
  transition: .5s
}

@media screen and (max-width: 920px) {
  .home-date {
      display:none
  }
}

.home-date.isHidden {
  opacity: 0
}

.home-type {
  transition: .5s
}

@media screen and (max-width: 920px) {
  .home-type {
      display:none
  }
}

.home-type.isHidden {
  opacity: 0
}

@media screen and (max-width: 920px) {
  .home-desc,.home-details {
      transition:.6s cubic-bezier(.77,0,.175,1);
      transform: translateY(60px);
      background:white;
      
  }

  .home-desc.isUp,.home-details.isUp {
      opacity: 1;
      transform: translateY(0)
  }
}

.home-details-part .whitespace {
  min-width: 5px
}

.home-desc {
  line-height: 1.7;
  margin: 50px 0;
  width: 90%
}

.home-desc-base {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.home-desc-part {
  line-height: 1.1;
  margin: 4px 8px 4px 0;
  display: inline-block;
  overflow: hidden
}

@media screen and (max-width: 650px) {
  .home-desc-part {
      margin:2px 8px 2px 0
  }
}



.isHidden .home-desc-part b {
  transform: translateY(100%)
}

@media screen and (max-width: 920px) {
  .isHidden .home-desc-part b {
      transform:translateY(0)
  }
}

.home-desc-part b {
  transition: .21s;
  display: inline-block
}

.home-desc-whitespace {
  display: none
}

.home-details {
  display: -ms-flexbox;
  display: flex;
  width: 100%
}

.home-details-col {
  -ms-flex-preferred-size: 33.32%;
  flex-basis: 33.32%
}

@media screen and (max-width: 950px) {
  .home-details-col {
      -ms-flex-preferred-size:calc(25% * 2 - 35px);
      flex-basis: calc(25% * 2 - 35px)
  }
}

@media screen and (max-width: 650px) {
  .home-details-col {
      -ms-flex-preferred-size:calc(25% * 2 - 15px);
      flex-basis: calc(25% * 2 - 15px)
  }
}

.home-details-col div+div {
  margin-top: 8px
}

.home-details-col .dark {
  display: inline-block;
/*  transform: translateY(-4px);*/
  transition: .5s
}

.home-details-col .dark.isHidden {
  opacity: 0
}

.home-details-base {
  display: inline-block;
 /* overflow: hidden;*/

}


.isHidden .home-details-part b {
  transform: translateY(100%)
}

@media screen and (max-width: 920px) {
  .isHidden .home-details-part b {
      transform:translateY(0)
  }
}

.home-details-part b {
  transition: .25s;
  display: inline-block
}

.half {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  width: 50%
}

.mobile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #22222a;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: .5s;
  z-index: 1
}

.mobile-overlay.isUp {
  opacity: .6;
  visibility: visible
}

.about-heading {
  font-size: 9.75rem;
  transform: translateX(-10px);
  white-space: nowrap
}

@media screen and (max-width: 980px) {
  .about-heading {
      font-size:15vw
  }
}

.about-heading h2 {
  font-size: inherit;
  line-height: 1;
  font-weight: 700
}

@media screen and (max-width: 800px) {
  .about-heading h2 {
      line-height:1.15
  }
}

@media screen and (max-width: 645px) {
  .about-heading h2 {
      line-height:1.25
  }
}

@media screen and (max-width: 580px) {
  .about-heading h2 {
      line-height:1.45
  }
}

@media screen and (max-width: 430px) {
  .about-heading h2 {
      line-height:1.75
  }
}

@media screen and (max-width: 390px) {
  .about-heading h2 {
      line-height:1.85
  }
}

@media screen and (max-width: 350px) {
  .about-heading h2 {
      line-height:2.25
  }
}

.about-heading-firstname {
  position: relative;
  top: 111px;
  z-index: 2
}

.about-heading-firstname.isHidden b {
  transform: translateX(-100%)
}

.about-heading-lastname {
  color: #3e3e4e
}

.about-heading-lastname.isHidden b {
  transform: translateX(-100%)
}

.about-let-part {
  display: inline-block;
  overflow: hidden
}

.about-let-part b {
  display: inline-block;
  transition: .7s cubic-bezier(.86,0,.07,1)
}

.about-content {
  transition: 1s cubic-bezier(.25,.46,.45,.94)
}

.about-content.isHidden {
  transform: translateY(30px);
  opacity: 0
}

.about-content.isFading {
  opacity: 0
}

.about-content-holder {
  margin: 130px 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: end;
  justify-content: flex-end
}

@media screen and (max-width: 735px) {
  .about-content-holder {
      -ms-flex-pack:start;
      justify-content: flex-start;
      margin: 30px 0 80px
  }
}

.about-content-label {
  text-transform: uppercase;
  color: #63637e;
  font-size: .625rem;
  letter-spacing: .1em;
  margin-top: 12px;
  -ms-flex-preferred-size: 16.66%;
  flex-basis: 16.66%
}

@media screen and (max-width: 980px) {
  .about-content-label {
      -ms-flex-preferred-size:25%;
      flex-basis: 25%
  }
}

@media screen and (max-width: 735px) {
  .about-content-label {
      -ms-flex-preferred-size:100%;
      flex-basis: 100%;
      width: 100%;
      margin-bottom: 20px
  }
}

.about-content-inner {
  font-family: Theinhardt,sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
  -ms-flex-preferred-size: 66.64%;
  flex-basis: 66.64%
}

@media screen and (max-width: 980px) {
  .about-content-inner {
      -ms-flex-preferred-size:75%;
      flex-basis: 75%
  }
}

@media screen and (max-width: 735px) {
  .about-content-inner {
      -ms-flex-preferred-size:100%;
      flex-basis: 100%;
      width: 100%
  }
}

.about-content-inner--third {
  -ms-flex-preferred-size: 16.66%;
  flex-basis: 16.66%
}

@media screen and (max-width: 980px) {
  .about-content-inner--third {
      -ms-flex-preferred-size:25%;
      flex-basis: 25%
  }

  .about-content-inner--third:last-child {
      display: none
  }
}

.about-content-inner h3 {
  font-weight: inherit;
  font-size: inherit
}

.about-content-inner p {
  font-weight: inherit;
  margin-bottom: 20px
}

.about-content-list-item {
  margin-bottom: 18px
}

.about-content-email {
  margin-top: 40px
}

.about-content-email span {
  font-size: .875rem;
  font-weight: 700
}

@media screen and (max-width: 625px) {
  .about-content-email span {
      display:none
  }
}

.about-content-email img {
  margin: 0 15px
}

@media screen and (max-width: 625px) {
  .about-content-email img {
      display:none
  }
}

.about-content-email a {
  font-size: 1.875rem;
  font-weight: 700
}



.project-img{
  margin:auto;
}


@media screen and (max-width:920px){

  .project-img{
    margin-top:20px;
  }
}

.horizontal{
  width:100%;
}

.vertical{
  max-width:300px;
}


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fadein {
 opacity:0;  
 -webkit-animation:fadeIn ease-in 1;  
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;
 
 -webkit-animation-fill-mode:forwards; 
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
 
 -webkit-animation-duration:0.5s;
 -moz-animation-duration:0.5s;
 animation-duration:0.5s;
}

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    30%
    {
        -webkit-transform: translateY(-5px);
       transform: translateY(-5px);
    } 
    50%
    {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65%
    {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80%
    {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    30%
    {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50%
    {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65%
    {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80%
    {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}