/*
Theme Name: The haus
Theme URI:  
Author: Defectors
Description: custom theme
Version: 1.0 
Text Domain: haus
*/
@font-face {
  font-family: 'Helvetica Neue';
  src: url("fonts/HelveticaNeue.eot?#iefix") format("embedded-opentype"), url("fonts/HelveticaNeue.woff") format("woff"), url("fonts/HelveticaNeue.ttf") format("truetype"), url("fonts/HelveticaNeue.svg#HelveticaNeue") format("svg");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: 'Helvetica Neue';
  src: url("fonts/HelveticaNeue-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/HelveticaNeue-Bold.woff") format("woff"), url("fonts/HelveticaNeue-Bold.ttf") format("truetype"), url("fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold") format("svg");
  font-weight: 700;
  font-style: normal; }
header, footer, article, section, hgroup, nav, figure, aside {
  display: block; }

body, html {
  height: 100%;
  margin: 0;
  position: relative;
  padding: 0; }

figure {
  margin: 0; }

:focus, :active {
  outline: 0; }

img {
  border-style: none;
  display: block;
  max-width: 100%;
  height: auto; }

a {
  text-decoration: none; }

body {
  min-width: 320px;
  color: #000000;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  font-family: "Helvetica Neue", sans-serif; }
  body .wrap {
    width: 1060px;
    margin: 0 auto; }
  body .logo {
    display: block;
    position: absolute;
    width: 527px;
    height: 256px;
    background: url("images/logo.png") no-repeat center;
    background-size: contain;
    cursor: pointer;
    bottom: 50%;
    left: 50%;
    margin-left: -263px;
    margin-bottom: -128px; }
    body .logo span {
      display: none; }
    body .logo .point {
      left: -200%;
      opacity: 0; }
  body .socials {
    padding: 0;
    margin: 0;
    list-style: none;
    display: none;
    position: absolute;
    right: 51px;
    bottom: 27px;
    z-index: 5; }
    body .socials li {
      float: left;
      margin-left: 33px; }
      body .socials li a {
        text-indent: 200%;
        overflow: hidden;
        white-space: nowrap;
        width: 17px;
        height: 17px;
        display: block;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat; }
        body .socials li a.fb {
          background-image: url("images/fb.svg"); }
        body .socials li a.in {
          background-image: url("images/li.svg"); }
        body .socials li a.inst {
          background-image: url("images/inst.svg"); }
    body .socials.show {
      display: block; }
  body .intro-screen .logo {
    transition: all 1050ms cubic-bezier(0, 1.14, 0.58, 1); }
  body .intro-screen .slogan-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0; }
  body .intro-screen .slogan {
    color: #000000;
    font-size: 43px;
    font-weight: 700;
    line-height: 51px;
    position: absolute;
    left: 100%;
    margin-left: 0;
    top: 50%;
    margin-top: -95px;
    padding-left: 431px;
    padding-top: 22px;
    height: 0;
    width: 1060px;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    transition: left 725ms cubic-bezier(0.22, 0.92, 0.62, 0.93), margin-left 725ms cubic-bezier(0.22, 0.92, 0.62, 0.93); }
    body .intro-screen .slogan .line {
      display: block;
      position: absolute;
      left: 332px;
      bottom: 0;
      width: 2px;
      height: 190px;
      background-color: #000000;
      transition: height 725ms cubic-bezier(0.42, 0, 0.58, 1); }
  body .intro-screen .bottom-bg {
    position: fixed;
    overflow: hidden;
    bottom: 60%;
    left: 0;
    width: 100%;
    height: 0;
    transition: bottom 1050ms cubic-bezier(0.04, 1.15, 0.58, 1); }
    body .intro-screen .bottom-bg:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 68px;
      width: 100%;
      background: url("images/plus-bg.png") repeat;
      transition: height 1500ms cubic-bezier(0.42, 0, 0.58, 1); }
    body .intro-screen .bottom-bg:after {
      content: '';
      display: block;
      position: absolute;
      top: 68px;
      left: 0;
      height: 66px;
      width: 100%;
      background: url("images/cross-bg.png") repeat-x; }
  body .intro-screen.step-1 .logo {
    width: 229px;
    height: 111px;
    margin: 0;
    margin-bottom: -55px;
    margin-left: -533px; }
    body .intro-screen.step-1 .logo .point {
      width: 14px;
      height: 14px;
      background: #000;
      bottom: 56px;
      position: absolute;
      transition: height 1500ms cubic-bezier(0.42, 0, 0.58, 1); }
  body .intro-screen.step-1 .bottom-bg {
    bottom: 0;
    height: 134px; }
  body .intro-screen.step-1 .slogan {
    height: 190px;
    left: 50%;
    margin-left: -533px; }
  body .intro-screen.step-2 .logo {
    bottom: 87px;
    margin-bottom: 0;
    transition: all 1500ms cubic-bezier(0.42, 0, 0.58, 1); }
    body .intro-screen.step-2 .logo .point {
      left: 30px;
      opacity: 1; }
      body .intro-screen.step-2 .logo .point.growth {
        transition: height 1500ms cubic-bezier(0.42, 0, 0.58, 1);
        height: 160px; }
  body .intro-screen.step-2 .bottom-bg {
    display: none; }
  body .intro-screen.step-2 .slogan {
    left: -100%; }
    body .intro-screen.step-2 .slogan .line {
      height: 0; }
  body .intro-screen.collapse {
    z-index: 1;
    position: relative; }
    body .intro-screen.collapse .logo {
      transform: scale(0.323);
      bottom: -19px;
      margin-left: -610px; }
      body .intro-screen.collapse .logo .point {
        height: 14px; }
  body .about-screen {
    background: #000;
    top: 100%;
    left: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1;
    transition: all 1500ms cubic-bezier(0.42, 0, 0.58, 1); }
    body .about-screen.step-3 {
      top: 0;
      height: calc(100% - 300px); }
    body .about-screen.step-4 .socials {
      display: block; }
    body .about-screen.step-4 .companies {
      bottom: 0;
      height: 100%; }
      body .about-screen.step-4 .companies ul li .company-logo {
        transform: scale(1);
        opacity: 1; }
    body .about-screen.step-4 .about-text {
      margin-top: 0; }
    body .about-screen.collapse {
      z-index: 0;
      /*top: -100%; */ }
      body .about-screen.collapse .about-text {
        display: none; }
    body .about-screen .companies {
      height: 100px;
      width: 100%;
      position: absolute;
      bottom: calc(-300px - 100%);
      left: 0;
      overflow: hidden;
      transition: all 1500ms cubic-bezier(0.42, 0, 0.58, 1);
      /*&.hide-companies { 
          height: 100px;
          bottom: -100%; 
          left: -20px;     
          ul li .company-logo {
              transition-delay: 0ms;
              transform: scale(0);
              opacity: 0;
          }
      }*/ }
      body .about-screen .companies .wrap {
        width: 1160px;
        padding: 40px 0 68px; }
      body .about-screen .companies ul {
        padding: 0;
        margin: 0;
        list-style: none;
        height: calc(100% - 108px);
        position: absolute;
        box-sizing: border-box; }
        body .about-screen .companies ul li {
          position: relative;
          height: 16.6%;
          display: -webkit-flex;
          display: flex;
          align-items: center;
          justify-content: center;
          -webkit-align-items: center;
          -webkit-justify-content: center;
          /*&:hover {
              a {                           
                  .color {
                      display: block;
                  }
                  .white {
                      display: none;
                  } 
              } 
              .company-details {
                  display: block;
              } 
          }*/ }
          body .about-screen .companies ul li .company-logo {
            width: 180px;
            transform: scale(0.2);
            text-align: center;
            display: block;
            transition-delay: 450ms;
            transition: all 1500ms cubic-bezier(1, -0.05, 0.58, 1); }
            body .about-screen .companies ul li .company-logo img {
              margin: 0 auto; }
            body .about-screen .companies ul li .company-logo .color {
              display: none; }
            body .about-screen .companies ul li .company-logo.active .color {
              display: block; }
            body .about-screen .companies ul li .company-logo.active .white {
              display: none; }
          body .about-screen .companies ul li .company-details {
            display: none;
            opacity: 0.82;
            color: #ffffff;
            font-size: 15px;
            font-weight: 400;
            line-height: 24px;
            position: absolute;
            left: 220px;
            top: 0;
            width: 510px;
            padding: 20px 38px;
            box-sizing: border-box;
            background: url("images/plus-bg-w.png") repeat;
            background-color: #171717; }
            body .about-screen .companies ul li .company-details .link-btn {
              display: block;
              width: 157px;
              height: 39px;
              line-height: 37px;
              box-sizing: border-box;
              text-align: center;
              border: 1px solid rgba(255, 255, 255, 0.5);
              color: #ffffff;
              font-size: 12px;
              font-weight: 700; }
              body .about-screen .companies ul li .company-details .link-btn:hover {
                border-color: #fff; }
          body .about-screen .companies ul li:last-child .company-details {
            top: auto;
            bottom: 0; }
    body .about-screen header {
      position: absolute;
      bottom: -300px;
      height: 300px;
      width: 100%;
      left: 0; }
      body .about-screen header .wrap {
        padding-left: 405px;
        box-sizing: border-box; }
      body .about-screen header .about-text {
        color: #000000;
        font-size: 15px;
        font-weight: 400;
        line-height: 27px;
        padding-top: 53px;
        margin-top: 100%;
        left: 0;
        transition: all 1500ms cubic-bezier(0.42, 0, 0.58, 1); }
        body .about-screen header .about-text #show-contact {
          color: #000000;
          font-size: 15px;
          font-weight: 700;
          line-height: 27px;
          border-bottom: 2px solid; }
  body .contact-screen {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    box-sizing: border-box;
    transition: all 1500ms cubic-bezier(0.42, 0, 0.58, 1); }
    body .contact-screen.expand {
      top: 0;
      height: calc(100% - 72px);
      z-index: 3; }
    body .contact-screen .wrap {
      width: 1014px;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      -webkit-justify-content: center;
      height: 100%; }
      body .contact-screen .wrap:after {
        content: '';
        display: block;
        clear: both; }
      body .contact-screen .wrap .close {
        position: absolute;
        right: 26px;
        top: 26px;
        width: 32px;
        height: 32px;
        cursor: pointer; }
        body .contact-screen .wrap .close:hover {
          opacity: 1; }
        body .contact-screen .wrap .close:before, body .contact-screen .wrap .close:after {
          content: '';
          position: absolute;
          height: 2px;
          width: 70%;
          top: 50%;
          left: 15%;
          margin-top: -1px;
          background-color: #fff; }
        body .contact-screen .wrap .close:before {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg); }
        body .contact-screen .wrap .close:after {
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg); }
      body .contact-screen .wrap .col {
        width: 50%;
        float: left;
        box-sizing: border-box;
        padding: 0 48px; }
        body .contact-screen .wrap .col .map {
          background-color: #171717;
          margin-top: 69px; }
        body .contact-screen .wrap .col h2 {
          font-size: 64px;
          font-weight: 700;
          line-height: 65px;
          border-bottom: 4px solid #fff;
          margin: 0 0 21px;
          float: left;
          padding-bottom: 11px; }
        body .contact-screen .wrap .col p {
          clear: left;
          line-height: 37px;
          margin: 0; }
        body .contact-screen .wrap .col a {
          color: #fff; }
          body .contact-screen .wrap .col a.map-link {
            border-bottom: 1px solid rgba(255, 255, 255, 0.36);
            padding-bottom: 5px; }
            body .contact-screen .wrap .col a.map-link:hover {
              border-bottom-color: #fff; }
        body .contact-screen .wrap .col .socials {
          display: block;
          position: initial;
          margin: 25px 0 0; }
          body .contact-screen .wrap .col .socials li {
            margin: 0 0 15px; }
            body .contact-screen .wrap .col .socials li a {
              text-indent: 0;
              width: auto;
              padding-left: 32px;
              border: none;
              height: 20px;
              background-position-x: 0; }
              body .contact-screen .wrap .col .socials li a.fb {
                background-image: url("images/fb-white.svg");
                background-position: 3px 2px;
                background-size: 8px; }
              body .contact-screen .wrap .col .socials li a.in {
                background-image: url("images/li-white.svg");
                background-position: 0px 1px;
                background-size: 17px; }
              body .contact-screen .wrap .col .socials li a.inst {
                background-image: url("images/inst-white.svg");
                background-position: 0px 2px;
                background-size: 16px; }
  @media (max-width: 1279px) {
    body .wrap {
      width: 940px; }
    body .intro-screen.step-1 .logo {
      margin-left: -450px; }
    body .intro-screen.step-1 .slogan {
      width: 940px;
      font-size: 35px;
      margin-left: -470px; }
    body .intro-screen .collapse .logo {
      margin-left: -547px; }
    body .about-screen .companies .wrap {
      width: 1000px; }
    body .about-screen header .wrap {
      padding-left: 355px; } }
  @media (min-width: 1024px) {
    body .intro-screen.step-2 .logo {
      bottom: 57px; }
      body .intro-screen.step-2 .logo .point.growth {
        height: 118px; }
    body .intro-screen.collapse .logo {
      bottom: -20px !important; }
    body .about-screen.step-3 {
      height: calc(100% - 230px); }
    body .about-screen header {
      bottom: -230px;
      height: 230px; }
      body .about-screen header .about-text {
        padding-top: 32px; } }
  @media (min-width: 1024px) and (max-height: 730px) {
    body .intro-screen.step-2 .logo {
      bottom: 57px; }
      body .intro-screen.step-2 .logo .point.growth {
        height: 118px; }
    body .about-screen.step-3 {
      height: calc(100% - 230px); }
    body .about-screen header {
      bottom: -230px;
      height: 230px; }
      body .about-screen header .about-text {
        padding-top: 32px; }
    body .about-screen .companies .wrap {
      padding: 30px 0 52px; }
    body .about-screen .companies ul li .company-logo img {
      max-height: 50px; } }
  @media (max-width: 1023px) {
    body .logo {
      width: 189px;
      height: 92px;
      margin-left: -95px;
      margin-bottom: -46px; }
    body .intro-screen .slogan {
      font-size: 18px;
      font-weight: 700;
      line-height: 23px;
      padding-left: 0;
      width: 295px;
      margin-top: -10px; }
      body .intro-screen .slogan .line {
        width: 33px;
        height: 3px;
        top: 0;
        left: 0; }
    body .intro-screen.step-1 .logo {
      width: 127px;
      height: 62px;
      margin-left: -150px;
      margin-bottom: 38px; }
      body .intro-screen.step-1 .logo .point {
        height: 0;
        width: 5px; }
        body .intro-screen.step-1 .logo .point.growth {
          height: 0; }
    body .intro-screen.step-1 .slogan {
      margin-left: -149px;
      font-size: 18px;
      width: 295px; }
    body .intro-screen.step-2 .logo {
      width: 74px;
      height: 35px;
      bottom: 0;
      margin-bottom: 18px;
      margin-left: 0;
      left: 18px; }
      body .intro-screen.step-2 .logo .point {
        left: 10px;
        opacity: 1;
        bottom: 17px;
        /*override*/
        left: 13.53%;
        bottom: 48.6%; }
        body .intro-screen.step-2 .logo .point.growth {
          height: 43px; }
    body .intro-screen.collapse .logo {
      transform: scale(1); }
    body .about-screen {
      background: none;
      height: calc(100% - 78px) !important;
      bottom: -100% !important;
      top: auto !important; }
      body .about-screen.step-3 {
        bottom: 78px !important; }
        body .about-screen.step-3 .companies ul li .company-logo {
          transform: scale(1);
          opacity: 1; }
      body .about-screen.step-4 {
        z-index: initial; }
      body .about-screen .companies, body .about-screen .companies.hide-companies {
        background: #000;
        height: 100%;
        position: initial;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch; }
        body .about-screen .companies::-webkit-scrollbar, body .about-screen .companies.hide-companies::-webkit-scrollbar {
          display: none; }
        body .about-screen .companies .wrap, body .about-screen .companies.hide-companies .wrap {
          width: 100%;
          padding: 12px 26px 12px;
          box-sizing: border-box; }
        body .about-screen .companies ul, body .about-screen .companies.hide-companies ul {
          height: auto;
          position: initial; }
          body .about-screen .companies ul li, body .about-screen .companies.hide-companies ul li {
            display: block;
            height: auto; }
            body .about-screen .companies ul li .company-logo, body .about-screen .companies.hide-companies ul li .company-logo {
              margin: 48px 0;
              height: auto; }
              body .about-screen .companies ul li .company-logo img, body .about-screen .companies.hide-companies ul li .company-logo img {
                margin: 0;
                max-height: 50px; }
              body .about-screen .companies ul li .company-logo.active-mob .color, body .about-screen .companies.hide-companies ul li .company-logo.active-mob .color {
                display: block !important; }
              body .about-screen .companies ul li .company-logo.active-mob .white, body .about-screen .companies.hide-companies ul li .company-logo.active-mob .white {
                display: none !important; }
            body .about-screen .companies ul li .company-details, body .about-screen .companies.hide-companies ul li .company-details {
              position: initial;
              width: 100%;
              margin: 0;
              padding: 9px 25px 32px; }
              body .about-screen .companies ul li .company-details.active-mob, body .about-screen .companies.hide-companies ul li .company-details.active-mob {
                display: block !important; }
              body .about-screen .companies ul li .company-details .link-btn, body .about-screen .companies.hide-companies ul li .company-details .link-btn {
                margin-top: 34px; }
      body .about-screen header {
        bottom: -78px;
        height: 78px;
        position: initial; }
        body .about-screen header .about-text p {
          display: none; }
        body .about-screen header .about-text #show-contact {
          top: 22px;
          right: 13px;
          color: #fff;
          position: absolute;
          font-size: 14px;
          line-height: 24px; }
    body .contact-screen {
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      height: calc(100% - 78px) !important;
      top: -100% !important; }
      body .contact-screen::-webkit-scrollbar {
        display: none; }
      body .contact-screen .wrap {
        width: 100%;
        flex-direction: column-reverse;
        padding: 34px 34px 74px;
        box-sizing: border-box;
        height: auto; }
        body .contact-screen .wrap .col {
          width: 100%;
          float: none;
          padding: 0; }
          body .contact-screen .wrap .col h2 {
            font-size: 44px;
            margin: 0 0 25px;
            padding: 0; }
          body .contact-screen .wrap .col .map {
            margin-top: 32px;
            background: none; }
      body .contact-screen.expand {
        top: 0 !important; }
    body .socials {
      right: 26px;
      bottom: 26px;
      position: fixed; } }
  @media (max-width: 374px) {
    body .intro-screen .slogan {
      width: 280px; }
    body .intro-screen.step-1 .logo {
      margin-left: -140px; }
    body .intro-screen.step-1 .slogan {
      margin-left: -140px;
      width: 280px; }
    body .intro-screen.step-2 .logo {
      margin-left: 0; } }

/*# sourceMappingURL=style.css.map */