@import url(reset.css);
@import url(ProximaNova/proximanova.css);
@import url(FranklinBook/franklin.css);
@import url(animations.css);
@import url(../contact_files/style.css);

.menu_button {
  display: block;
  position: fixed;
  z-index: 10000;
  top: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  background-color: rgba(95, 108, 217, 0.7);
  border-radius: 100px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-tap-highlight-color: transparent; }
  .menu_button .menu_line {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
    .menu_button .menu_line .menu_line_in {
      display: block;
      width: 22px;
      height: 2px;
      background: #fff;
      position: absolute;
      left: 12px;
      -webkit-transition: -webkit-transform 0.2s;
      transition: transform 0.2s; }
    .menu_button .menu_line.menu_line_top {
      -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0); }
      .menu_button .menu_line.menu_line_top .imenu_line_in_top {
        top: 22px;
        -webkit-transition: -webkit-transform 0.2s 0.2s;
        transition: transform 0.2s 0.2s;
        -webkit-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
        transform: translateY(-4px); }
    .menu_button .menu_line.menu_line_bottom {
      -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0); }
      .menu_button .menu_line.menu_line_bottom .menu_line_in_bottom {
        bottom: 22px;
        -webkit-transform: translateY(4px);
        -ms-transform: translateY(4px);
        transform: translateY(4px); }
  .menu_button.active {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
    .menu_button.active .menu_line_top {
      -webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
      .menu_button.active .menu_line_top .imenu_line_in_top {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition-delay: 0;
        transition-delay: 0; }
    .menu_button.active .menu_line_bottom {
      -webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }
      .menu_button.active .menu_line_bottom .menu_line_in_bottom {
        -webkit-transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0); }
  .menu_button:hover {
    background-color: #5f6cd9; }
  .menu_button:focus {
    outline: 0; }

.menu_container {
  display: table;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  -webkit-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
  opacity: 0;
  pointer-events: none; }
  .menu_container .menu_container_in {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }
    .menu_container .menu_container_in .menu {
      display: table;
      text-align: center;
      margin: 0 auto;
      padding: 0; }
      .menu_container .menu_container_in .menu li {
        display: block;
        margin: 0;
        padding: 0;
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: opacity 0.35s, transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1); }
        .menu_container .menu_container_in .menu li:nth-child(1) {
          -webkit-transition-delay: .03s;
          transition-delay: .03s; }
        .menu_container .menu_container_in .menu li:nth-child(2) {
          -webkit-transition-delay: .07s;
          transition-delay: .07s; }
        .menu_container .menu_container_in .menu li:nth-child(3) {
          -webkit-transition-delay: .11s;
          transition-delay: .11s; }
        .menu_container .menu_container_in .menu li:nth-child(4) {
          -webkit-transition-delay: .15s;
          transition-delay: .15s; }
        .menu_container .menu_container_in .menu li:nth-child(5) {
          -webkit-transition-delay: .19s;
          transition-delay: .19s; }
        .menu_container .menu_container_in .menu li:nth-child(6) {
          -webkit-transition-delay: .23s;
          transition-delay: .23s; }
        .menu_container .menu_container_in .menu li:nth-child(7) {
          -webkit-transition-delay: .27s;
          transition-delay: .27s; }
        .menu_container .menu_container_in .menu li a {
          display: block;
          font: 22px/60px 'ProximaNovaExCn-Semibold', Arial;
          margin-bottom: 0;
          text-transform: uppercase;
          letter-spacing: 0.3em;
          color: #5f6cd9;
          letter-spacing: 3px;
          margin: 0;
          padding: 0 30px;
          text-align: center;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 201px 60px;
          opacity: 0.8;
          -webkit-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out; }
          .menu_container .menu_container_in .menu li a.active {
            background-image: url(../images/menu_sel.webp);
            background-size: contain;
            opacity: 1; }
          .menu_container .menu_container_in .menu li a:hover {
            -webkit-transform: scale(1.05);
            transform: scale(1.05);
            text-decoration: none; }
          .menu_container .menu_container_in .menu li a:focus {
            outline: 0; }
    .menu_container .menu_container_in .social_container {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0; }
      .menu_container .menu_container_in .social_container .social_menu {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 0 10px;
        text-indent: -2000em;
        background-size: 350px 50px;
        background-image: url(../images/social_menu_new.webp);
        background-repeat: repeat;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.8; }
        .menu_container .menu_container_in .social_container .social_menu.linkedin {
          background-position: 0 0; }
        .menu_container .menu_container_in .social_container .social_menu.dribbble {
          background-position: -60px 0; }
        .menu_container .menu_container_in .social_container .social_menu.behance {
          background-position: -120px 0; }
        .menu_container .menu_container_in .social_container .social_menu.twitter {
          background-position: -180px 0; }
        .menu_container .menu_container_in .social_container .social_menu.medium {
          background-position: -240px 0; }
        .menu_container .menu_container_in .social_container .social_menu.instagram {
          background-position: -300px 0; }
        .menu_container .menu_container_in .social_container .social_menu:hover {
          opacity: 1;
          -webkit-transform: scale(0.9);
          transform: scale(0.9); }
  .menu_container.visible {
    display: table;
    opacity: 1;
    pointer-events: auto; }
    .menu_container.visible .menu li {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }

/* @import 'contact.css'; */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #f8cdda;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8cdda), color-stop(100%, #7486e8));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f8cdda 0%, #7486e8 100%);
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(top, #f8cdda 0%, #7486e8 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #f8cdda 0%, #7486e8 100%);
  /* W3C */ }
  .loader #loader {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    border: 4px solid #FFF;
    margin: -40px 0 0 -30px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0);
    transform: translate3d(0);
    transform: scale(0);
    opacity: 0;
    -webkit-animation: spin 1.5s ease-out infinite;
    animation: spin 1.5s ease-out infinite; }

.intro {
  z-index: 10;
  position: relative;
  /*margin-top: 100vh;*/
  height: 100%;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  background-color: #f8cdda;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8cdda), color-stop(100%, #7486e8));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f8cdda 0%, #7486e8 100%);
  /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(top, #f8cdda 0%, #7486e8 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #f8cdda 0%, #7486e8 100%);
  /* background: #f8cdda; */
  /* W3C */
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  .intro.min {
    min-height: 100vh; }
  .intro .container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
    .intro .container .scene {
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      user-select: none; }
      .intro .container .scene .layer {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        text-align: center; }
        .intro .container .scene .layer .vid-bg {
          position: absolute;
          left: 0;
          bottom: 0;
          overflow: hidden;
          background-repeat: no-repeat;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          -webkit-transition: all 0.7s ease;
          transition: all 0.7s ease;
          /* height: 100%; */
          width: 100%; }
          .intro .container .scene .layer .vid-bg.height {
            height: 100%;
            width: auto; }
          .intro .container .scene .layer .vid-bg.width {
            height: auto;
            width: 100%; }
          .intro .container .scene .layer .vid-bg.blur_high {
            -webkit-filter: blur(7px);
            filter: blur(7px); }
        .intro .container .scene .layer span {
          display: block;
          position: relative;
          height: 100%;
          width: 100%;
          overflow: hidden;
          background-repeat: no-repeat;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          -webkit-transition: all 0.7s ease;
          transition: all 0.7s ease; }
          .intro .container .scene .layer span.firsttime {
            -webkit-transition: all 2s ease;
            transition: all 2s ease; }
          .intro .container .scene .layer span.blur_high {
            -webkit-filter: blur(7px);
            filter: blur(7px); }
            @media only screen and (max-width: 320px) {
              .intro .container .scene .layer span.blur_high {
                -webkit-filter: blur(0) !important;
                filter: blur(0) !important; } }
          .intro .container .scene .layer span.blur_medium {
            -webkit-filter: blur(5px);
            filter: blur(5px); }
          .intro .container .scene .layer span.blur_low {
            -webkit-filter: blur(1px);
            filter: blur(1px); }
          .intro .container .scene .layer span#layer3 img {
            position: absolute;
            bottom: 0;
            /* left: 10%; */
            right: 4%;
            width: 54%;
            /* iPads (portrait) ----------- */ }
            @media only screen and (max-width: 767px) {
              .intro .container .scene .layer span#layer3 img {
                /* bottom: -5%;
                width: 38%; */
                bottom: 2%;
                width: 75%; } }
            @media only screen and (max-height: 520px) and (orientation: landscape) {
              .intro .container .scene .layer span#layer3 img {
                /* width: 18% !important; */
                width: 65% !important; } }
            @media only screen and (min-width: 768px) and (max-width: 1024px) {
              .intro .container .scene .layer span#layer3 img {
                /* iPads ----------- */
                /* width: 20%; */
                width: 55%; } }
            @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
              .intro .container .scene .layer span#layer3 img {
                width: 28%;
                bottom: 0%; } }
          @media only screen and (max-width: 320px) {
            .intro .container .scene .layer span#layer3 {
              display: none; } }
  .intro #logo {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 45%;
    margin-left: -112px;
    margin-top: -133px;
    width: 225px;
    height: 265px;
    background: url(../images/logo3.webp) 0 0;
    background-size: 225px 265px;
    font: 90px/90px 'ProximaNovaExCn-Semibold', Arial;
    text-transform: uppercase;
    opacity: 0;
    text-indent: -2000em;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: all 0.35s;
    transition: all 0.35s; }
    .intro #logo.visible {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
      -webkit-animation-delay: 0.5s;
      animation-delay: 0.5s; }
    @media only screen and (max-width: 767px) {
      .intro #logo {
        /*top: 35%;*/
        top: 46%; } }
    @media only screen and (max-height: 520px) and (orientation: landscape) {
      .intro #logo {
        top: 50% !important; } }
  .intro .scroll {
    color: #5f6cd9;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -25px;
    border-radius: 100px;
    z-index: 100;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-indent: -2000em; }
    .intro .scroll span {
      display: block;
      width: 50px;
      height: 50px;
      background: url(../images/scroll.webp);
      background-size: 50px 50px;
      -webkit-animation: bounce 3s 2s infinite;
      animation: bounce 2s 1s infinite;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    .intro .scroll:hover {
      background: rgba(95, 108, 217, 0.8); }
      .intro .scroll:hover span {
        -webkit-animation: none;
        animation: none; }
    .intro .scroll:focus {
      outline: 0; }
    @media only screen and (max-height: 520px) and (orientation: landscape) {
      .intro .scroll {
        /*bottom: 20px !important;*/
        display: none !important; } }

body {
  background-color: #343433; }
  body #mark {
    height: 150vh;
    width: 100%;
    /*position: fixed;*/
    background-color: #000;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    user-select: none; }
    body #mark .mark-text {
      position: fixed;
      top: 0;
      font-family: nytfranklin;
      font-weight: bold;
      padding-top: 10vh;
      margin-left: 26%;
      line-height: 371px;
      white-space: nowrap;
      color: #ffffff;
      transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1, 0, 0, 1); }
      @media only screen and (max-width: 1024px) and (orientation: Portrait) {
        body #mark .mark-text {
          padding-top: 30vh; } }
    body #mark.fixed {
      position: fixed; }
      body #mark.fixed .mark-text {
        display: block; }
    body #mark.invisible .mark-text {
      opacity: 0;
      visibility: hidden; }
  body #mark-transparent {
    height: 100vh;
    width: 100%;
    position: relative;
    background: transparent;
    display: none; }
  body #inroduction {
    min-height: 100vh;
    width: 100%;
    margin-top: 200vh;
    padding: 0 20% 10%;
    background: transparent;
    color: #fff;
    font-family: nytfranklin;
    font-size: 45px;
    letter-spacing: -0.8px; }
    body #inroduction #bio {
      opacity: 0; }
      body #inroduction #bio #mark-pic {
        width: 260px;
        margin-bottom: 36px; }
        @media only screen and (max-width: 480px) {
          body #inroduction #bio #mark-pic {
            width: 100%; } }
    @media all and (max-width: 1024px) {
      body #inroduction {
        font-size: 30px; } }
    @media all and (max-width: 767px) {
      body #inroduction {
        font-size: 20px;
        padding: 0 10% 10%; } }
  body #masonry-grid {
    background-color: #fff;
    display: block;
    width: 100%;
    -webkit-perspective: 20000px;
    perspective: 20000px; }
    body #masonry-grid .grid-item {
      width: 25%;
      padding: 0;
      margin: 0;
      opacity: 0;
      overflow: hidden; }
      body #masonry-grid .grid-item .back-image {
        position: absolute;
        top: -1px;
        left: -1px;
        bottom: -1px;
        right: -1px;
        z-index: 0;
        flex-direction: column;
        background-position: center;
        background-size: cover; }
      body #masonry-grid .grid-item a {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        user-select: none;
        text-decoration: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        background: #fff;
        padding: 45px;
        -moz-user-select: -moz-none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -moz-transition-delay: 0.25s;
        -o-transition-delay: 0.25s;
        -webkit-transition-delay: 0.25s;
        transition-delay: 0.25s;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease; }
        body #masonry-grid .grid-item a h2 {
          display: flex;
          overflow: hidden;
          color: #1f1f1f;
          font-size: 34px;
          margin-bottom: 5px; }
          body #masonry-grid .grid-item a h2 span {
            opacity: 0;
            display: block;
            will-change: transform;
            -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -ms-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease; }
          @media all and (max-width: 640px) {
            body #masonry-grid .grid-item a h2 {
              font-size: 22px; } }
        body #masonry-grid .grid-item a .grid-cat {
          display: flex;
          overflow: hidden;
          color: #1f1f1f;
          font-size: 11px;
          text-transform: uppercase; }
          body #masonry-grid .grid-item a .grid-cat span {
            opacity: 0;
            display: block;
            will-change: transform;
            -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            transition: all 1s ease; }
        @media all and (max-width: 1024px) {
          body #masonry-grid .grid-item a {
            padding: 30px; } }
        @media all and (max-width: 640px) {
          body #masonry-grid .grid-item a {
            padding: 15px; } }
      body #masonry-grid .grid-item.shown {
        opacity: 1; }
      body #masonry-grid .grid-item.animate {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        -webkit-animation: flip .8s ease-in-out forwards;
        animation: flip .8s ease-in-out forwards; }
      body #masonry-grid .grid-item:hover a {
        opacity: 1;
        background: #fff; }
        body #masonry-grid .grid-item:hover a h2 span {
          transform: translateY(0);
          opacity: 1; }
        body #masonry-grid .grid-item:hover a .grid-cat span {
          transform: translateY(0);
          opacity: 1; }
      @media all and (max-width: 1024px) {
        body #masonry-grid .grid-item {
          width: 50%; } }
      @media all and (max-width: 640px) {
        body #masonry-grid .grid-item {
          width: 100%; } }
  body #contact {
    /*::-moz-placeholder {
        @extend .placestyle;
    }
    :-ms-input-placeholder {
        @extend .placestyle;
    }
    :-moz-placeholder {
        @extend .placestyle;
    }*/ }
    body #contact .wrap h2 {
      font-family: nytfranklin; }
    body #contact .wrap #contact-form .button.submit {
      font-family: nytfranklin; }
    body #contact .wrap .thx-message {
      padding-top: 20px; }
    body #contact .placestyle, body #contact ::-webkit-input-placeholder {
      font-style: italic;
      color: #FFF;
      letter-spacing: 1px; }
  body .no-js .grid-item,
  body .no-cssanimations .grid-item {
    opacity: 1; }

.mobile-contact-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #5f6cd9;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent; }
  .mobile-contact-btn:hover {
    background: #4a57c4;
    transform: scale(1.08); }
  .mobile-contact-btn svg {
    width: 24px;
    height: 24px;
    fill: #fff;
    display: block;
    margin: auto; }
  @media all and (max-width: 768px) {
    .mobile-contact-btn {
      display: flex;
      align-items: center;
      justify-content: center; } }

/* Quote styling */
.quote {
  color: #a0a0a0;
  display: block;
  margin: 1.5rem 0;
  line-height: 1.6;
}

/* Hide reCAPTCHA v3 badge */
.grecaptcha-badge {
  visibility: hidden;
}

::-webkit-scrollbar {
  background: #fff;
  width: 8px; }

::-webkit-scrollbar-thumb {
  background: #bbb; }

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