@font-face {
  font-family: 'Db';
  src: url("/assets/fonts/Deckard-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Dr';
  src: url("/assets/fonts/Deckard-Regular.woff") format("woff");
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  font-style: normal; }

.classic-linear {
  font-size: 12px; }
  @media screen and (min-width: 600px) {
    .classic-linear {
      font-size: calc(4vw - 12px); } }
  @media screen and (min-width: 900px) {
    .classic-linear {
      font-size: 24px; } }

.easy-peasy {
  font-size: 12px; }
  @media screen and (min-width: 600px) {
    .easy-peasy {
      font-size: calc(3.11111vw - 6.66667px); } }
  @media screen and (min-width: 700px) {
    .easy-peasy {
      font-size: calc(5.77778vw - 25.33333px); } }
  @media screen and (min-width: 800px) {
    .easy-peasy {
      font-size: calc(3.11111vw - 4px); } }
  @media screen and (min-width: 900px) {
    .easy-peasy {
      font-size: 24px; } }

.cubic-bezier {
  font-size: 12px; }
  @media screen and (min-width: 600px) {
    .cubic-bezier {
      font-size: calc(0.87111vw + 6.77333px); } }
  @media screen and (min-width: 700px) {
    .cubic-bezier {
      font-size: calc(3.13778vw - 9.09333px); } }
  @media screen and (min-width: 800px) {
    .cubic-bezier {
      font-size: calc(7.99111vw - 47.92px); } }
  @media screen and (min-width: 900px) {
    .cubic-bezier {
      font-size: 24px; } }

.bloat-my-css {
  font-size: 12px; }
  @media screen and (min-width: 600px) {
    .bloat-my-css {
      font-size: calc(1.55102vw + 2.69388px); } }
  @media screen and (min-width: 642.85714px) {
    .bloat-my-css {
      font-size: calc(4vw - 13.04956px); } }
  @media screen and (min-width: 685.71429px) {
    .bloat-my-css {
      font-size: calc(5.46939vw - 23.12536px); } }
  @media screen and (min-width: 728.57143px) {
    .bloat-my-css {
      font-size: calc(5.95918vw - 26.69388px); } }
  @media screen and (min-width: 771.42857px) {
    .bloat-my-css {
      font-size: calc(5.46939vw - 22.91545px); } }
  @media screen and (min-width: 814.28571px) {
    .bloat-my-css {
      font-size: calc(4vw - 10.95044px); } }
  @media screen and (min-width: 857.14286px) {
    .bloat-my-css {
      font-size: calc(1.55102vw + 10.04082px); } }
  @media screen and (min-width: 900px) {
    .bloat-my-css {
      font-size: 24px; } }

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  text-decoration: none; }

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

body {
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }
  blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none; }

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

img {
  max-width: 100%;
  height: auto; }

.u-f1, body {
  font-family: Db, "Helvetica Neue", Helvetica, Arial, sans-serif; }

.u-h1, h1 {
  font-size: 32px; }
  @media screen and (min-width: 768px) {
    .u-h1, h1 {
      font-size: calc(3.36538vw + 6.15385px); } }
  @media screen and (min-width: 1600px) {
    .u-h1, h1 {
      font-size: 60px; } }

.u-h2, h2 {
  font-size: 28px; }
  @media screen and (min-width: 768px) {
    .u-h2, h2 {
      font-size: calc(2.40385vw + 9.53846px); } }
  @media screen and (min-width: 1600px) {
    .u-h2, h2 {
      font-size: 48px; } }

.u-h3, h3 {
  font-size: 24px; }
  @media screen and (min-width: 768px) {
    .u-h3, h3 {
      font-size: calc(1.44231vw + 12.92308px); } }
  @media screen and (min-width: 1600px) {
    .u-h3, h3 {
      font-size: 36px; } }

.u-s1, h4 {
  font-size: 24px; }
  @media screen and (min-width: 768px) {
    .u-s1, h4 {
      font-size: calc(0.48077vw + 20.30769px); } }
  @media screen and (min-width: 1600px) {
    .u-s1, h4 {
      font-size: 28px; } }

.u-s2, h5 {
  font-size: 20px; }
  @media screen and (min-width: 768px) {
    .u-s2, h5 {
      font-size: calc(0.48077vw + 16.30769px); } }
  @media screen and (min-width: 1600px) {
    .u-s2, h5 {
      font-size: 24px; } }

.u-s3, h6 {
  font-size: 18px; }
  @media screen and (min-width: 1024px) {
    .u-s3, h6 {
      font-size: calc(0.34722vw + 14.44444px); } }
  @media screen and (min-width: 1600px) {
    .u-s3, h6 {
      font-size: 20px; } }

.u-t1, body, a, p {
  font-size: 16px; }
  @media screen and (min-width: 768px) {
    .u-t1, body, a, p {
      font-size: calc(0.48077vw + 12.30769px); } }
  @media screen and (min-width: 1600px) {
    .u-t1, body, a, p {
      font-size: 20px; } }

.u-t2 {
  font-size: 14px; }
  @media screen and (min-width: 768px) {
    .u-t2 {
      font-size: calc(0.24038vw + 12.15385px); } }
  @media screen and (min-width: 1600px) {
    .u-t2 {
      font-size: 16px; } }

.u-t3 {
  font-size: 10px; }
  @media screen and (min-width: 768px) {
    .u-t3 {
      font-size: calc(0.60096vw + 5.38462px); } }
  @media screen and (min-width: 1600px) {
    .u-t3 {
      font-size: 15px; } }

.u-l1, a, h2 {
  line-height: 1em; }

.u-l2, body, h1, h3, h4, h5, h6 {
  line-height: 1.2em; }

.u-l3, p {
  line-height: 1.5em; }

.u-w9 {
  font-weight: 900; }

.u-w7, body {
  font-weight: 700; }

.u-w4 {
  font-weight: 400; }

h1, h2, h3, h4, ul, p {
  padding-bottom: 10px; }
  @media screen and (min-width: 768px) {
    h1, h2, h3, h4, ul, p {
      padding-bottom: calc(0.24172vw + 8.14359px); } }
  @media screen and (min-width: 1045.33333px) {
    h1, h2, h3, h4, ul, p {
      padding-bottom: calc(0.92281vw + 1.02393px); } }
  @media screen and (min-width: 1322.66667px) {
    h1, h2, h3, h4, ul, p {
      padding-bottom: calc(2.44124vw - 19.05983px); } }
  @media screen and (min-width: 1600px) {
    h1, h2, h3, h4, ul, p {
      padding-bottom: 20px; } }

section {
  padding-top: 15px;
  padding-bottom: 15px; }
  @media screen and (min-width: 768px) {
    section {
      padding-top: calc(1.57118vw + 2.93333px);
      padding-bottom: calc(1.57118vw + 2.93333px); } }
  @media screen and (min-width: 1045.33333px) {
    section {
      padding-top: calc(5.99826vw - 43.34444px);
      padding-bottom: calc(5.99826vw - 43.34444px); } }
  @media screen and (min-width: 1322.66667px) {
    section {
      padding-top: calc(15.86806vw - 173.88889px);
      padding-bottom: calc(15.86806vw - 173.88889px); } }
  @media screen and (min-width: 1600px) {
    section {
      padding-top: 80px;
      padding-bottom: 80px; } }

header {
  padding-top: 40px; }
  @media screen and (min-width: 768px) {
    header {
      padding-top: calc(0vw + 40px); } }
  @media screen and (min-width: 1045.33333px) {
    header {
      padding-top: calc(0vw + 40px); } }
  @media screen and (min-width: 1322.66667px) {
    header {
      padding-top: calc(0vw + 40px); } }
  @media screen and (min-width: 1600px) {
    header {
      padding-top: 40px; } }

header {
  padding-bottom: 45px; }
  @media screen and (min-width: 768px) {
    header {
      padding-bottom: calc(-0.36258vw + 47.78462px); } }
  @media screen and (min-width: 1045.33333px) {
    header {
      padding-bottom: calc(-1.38421vw + 58.4641px); } }
  @media screen and (min-width: 1322.66667px) {
    header {
      padding-bottom: calc(-3.66186vw + 88.58974px); } }
  @media screen and (min-width: 1600px) {
    header {
      padding-bottom: 30px; } }

footer {
  padding-top: 30px;
  padding-bottom: 30px; }
  @media screen and (min-width: 768px) {
    footer {
      padding-top: calc(0.48344vw + 26.28718px);
      padding-bottom: calc(0.48344vw + 26.28718px); } }
  @media screen and (min-width: 1045.33333px) {
    footer {
      padding-top: calc(1.84562vw + 12.04786px);
      padding-bottom: calc(1.84562vw + 12.04786px); } }
  @media screen and (min-width: 1322.66667px) {
    footer {
      padding-top: calc(4.88248vw - 28.11966px);
      padding-bottom: calc(4.88248vw - 28.11966px); } }
  @media screen and (min-width: 1600px) {
    footer {
      padding-top: 50px;
      padding-bottom: 50px; } }

header, section, footer {
  padding-left: 40px;
  padding-right: 40px; }
  @media screen and (min-width: 768px) {
    header, section, footer {
      padding-left: calc(1.93376vw + 25.14872px);
      padding-right: calc(1.93376vw + 25.14872px); } }
  @media screen and (min-width: 1045.33333px) {
    header, section, footer {
      padding-left: calc(7.38248vw - 31.80855px);
      padding-right: calc(7.38248vw - 31.80855px); } }
  @media screen and (min-width: 1322.66667px) {
    header, section, footer {
      padding-left: calc(19.52991vw - 192.47863px);
      padding-right: calc(19.52991vw - 192.47863px); } }
  @media screen and (min-width: 1600px) {
    header, section, footer {
      padding-left: 120px;
      padding-right: 120px; } }

.removepadding {
  padding: 0; }

.move {
  margin-left: calc(-40vw + 120px); }

.portrait {
  margin: 35px auto !important;
  display: block; }

body, html {
  position: relative;
  overflow-x: hidden; }

body {
  padding-top: 110px; }

#wrap {
  transition: all cubic-bezier(0.86, 0, 0.07, 1) 0.6s; }
  #wrap.js-out {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }

.mesh {
  display: flex;
  flex-direction: column; }
  @media only screen and (min-width: 768px) {
    .mesh {
      flex-direction: row; } }
  .mesh > div {
    flex: 1; }

.header {
  position: fixed;
  z-index: 1;
  background: white;
  display: flex;
  flex-direction: row;
  width: 100vw;
  top: 0px;
  height: 110px;
  align-items: baseline;
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; }
  .js-lockmenu .header {
    background: white; }
  .header .left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    align-items: left;
    max-width: 50%;
    font-family: 'Db'; }
    @media only screen and (min-width: 768px) {
      .header .left {
        flex-direction: row;
        align-items: center; } }
    .header .left div a span {
      color: black;
      font-size: 42px; }
    .header .left .logo {
      flex: 1; }
    .header .left .slogan {
      flex: 2.5;
      font-family: 'Dr';
      padding-top: 20px;
      display: none; }
      @media only screen and (min-width: 768px) {
        .header .left .slogan {
          padding-top: 0px;
          display: block; } }
      .header .left .slogan p {
        padding-bottom: 0px; }

.burger-wrapper {
  position: fixed;
  z-index: 3;
  top: 47px;
  right: 40px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s; }
  @media screen and (min-width: 768px) {
    .burger-wrapper {
      right: calc(1.93376vw + 25.14872px); } }
  @media screen and (min-width: 1045.33333px) {
    .burger-wrapper {
      right: calc(7.38248vw - 31.80855px); } }
  @media screen and (min-width: 1322.66667px) {
    .burger-wrapper {
      right: calc(19.52991vw - 192.47863px); } }
  @media screen and (min-width: 1600px) {
    .burger-wrapper {
      right: 120px; } }
  @media only screen and (min-width: 768px) {
    .js-menuopen .burger-wrapper {
      right: -110px;
      -webkit-transform: translateX(calc(-60vw));
              transform: translateX(calc(-60vw)); } }
  @media only screen and (min-width: 1024px) {
    .js-menuopen .burger-wrapper {
      right: -110px;
      -webkit-transform: translateX(calc(-50vw));
              transform: translateX(calc(-50vw)); } }
  @media only screen and (min-width: 1440px) {
    .js-menuopen .burger-wrapper {
      -webkit-transform: translateX(calc(-30vw));
              transform: translateX(calc(-30vw)); } }
  .burger-wrapper .burger {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    transition: .5s ease-in-out; }
    .burger-wrapper .burger div {
      width: 14px;
      height: 2.5px;
      background-color: red;
      margin: 1.5px 0;
      transition: .25s ease-in-out;
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg); }
    .burger-wrapper .burger div:last-of-type {
      margin-bottom: 0; }
  .burger-wrapper span {
    margin-left: 8px;
    font-size: 18px;
    font-family: 'Dr'; }
  .burger-wrapper .burger_title {
    z-index: 99;
    transition: 0.3s ease-in-out;
    cursor: pointer; }

#burger {
  width: 15px;
  height: 11px;
  position: relative;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: .3s ease-in-out;
  cursor: pointer;
  z-index: 99; }
  #burger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #FF2E2E;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transition: .25s ease;
    z-index: 9999;
    margin-left: 0; }
    #burger span:nth-child(1) {
      top: 0px; }
    #burger span:nth-child(2) {
      top: 4px; }
    #burger span:nth-child(3) {
      top: 8px; }
  .js-menuopen #burger span:nth-child(1) {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    top: 4px; }
  .js-menuopen #burger span:nth-child(2) {
    opacity: 0; }
  .js-menuopen #burger span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    top: 4px; }

.burger-menu {
  opacity: 1;
  position: fixed;
  background: #ededed;
  right: 0;
  top: 0;
  z-index: 2;
  padding-left: 40px;
  padding-top: 45px;
  width: 100vw;
  -webkit-transform: translate(100%, 0%);
          transform: translate(100%, 0%);
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s; }
  @media only screen and (min-width: 768px) {
    .burger-menu {
      padding-left: 60px;
      padding-top: 110px;
      width: 60vw; } }
  @media only screen and (min-width: 1024px) {
    .burger-menu {
      width: 50vw; } }
  @media only screen and (min-width: 1440px) {
    .burger-menu {
      width: 30vw; } }
  .js-menuopen .burger-menu {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%); }
  .burger-menu .menu-item:first-of-type a, .burger-menu .menu-item:last-of-type a {
    margin-top: 0; }
  .burger-menu .menu-item:nth-child(1) a span {
    transition-delay: .2s; }
  .burger-menu .menu-item:nth-child(2) a span {
    transition-delay: .3s; }
  .burger-menu .menu-item:nth-child(3) a span {
    transition-delay: .4s; }
  .burger-menu .menu-item a {
    margin: 12px 0;
    display: block; }
    .burger-menu .menu-item a:hover span {
      border-bottom: 1px solid black; }
    .burger-menu .menu-item a span {
      color: black;
      font-size: 36px;
      line-height: 36px;
      display: inline-block;
      font-family: 'Dr';
      border-bottom: 1px solid transparent;
      opacity: 0;
      -webkit-transform: translate(10px);
              transform: translate(10px);
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .js-menuopen .burger-menu .menu-item a span {
    opacity: 1;
    -webkit-transform: translate(0px);
            transform: translate(0px); }
  .burger-menu .close-button {
    position: absolute;
    top: 41px;
    left: 37px;
    cursor: e-resize; }
    .burger-menu .close-button span {
      color: black;
      font-family: 'Dr'; }
    .burger-menu .close-button span.close {
      color: red;
      background-size: cover;
      height: 13px;
      background-repeat: no-repeat;
      width: 13px;
      display: inline-block;
      margin-right: 5px; }
  .burger-menu ul.menu {
    height: 40vh; }
  .burger-menu .bottom {
    display: flex;
    flex-direction: row;
    padding-bottom: 50px;
    padding-right: 60px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s; }
    .js-menuopen .burger-menu .bottom {
      opacity: 1; }
    .burger-menu .bottom .left, .burger-menu .bottom .right {
      flex: 1; }
      .burger-menu .bottom .left span, .burger-menu .bottom .right span {
        font-family: 'Dr'; }
      .burger-menu .bottom .left a, .burger-menu .bottom .right a {
        font-family: 'Dr';
        color: black;
        font-size: 18px;
        border-bottom: 1px solid transparent;
        transition: 0.3s ease-in-out; }
      .burger-menu .bottom .left a:hover, .burger-menu .bottom .right a:hover {
        border-bottom: 1px solid black; }

.projects {
  padding: 0; }
  .projects .project {
    display: block;
    position: relative;
    width: 100%;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
    @media only screen and (min-width: 768px) {
      .projects .project {
        height: 80vh; } }
    .projects .project__details {
      background: black;
      position: absolute;
      height: auto;
      left: 15px;
      padding: 10px;
      bottom: 15px;
      transition: 0.3s ease-in-out; }
      @media only screen and (min-width: 768px) {
        .projects .project__details {
          left: 40px;
          bottom: 40px; } }
      .projects .project__details h4 {
        color: white;
        font-family: 'Dr';
        padding-bottom: 2px;
        font-size: 18px;
        text-transform: capitalize;
        transition: 0.3s ease-in-out; }
      .projects .project__details span {
        color: white;
        font-size: 18px;
        font-family: 'Dr';
        transition: 0.3s ease-in-out; }
      .projects .project__details:hover {
        background: white; }
        .projects .project__details:hover h4 {
          color: black; }
        .projects .project__details:hover span {
          color: black; }
    .projects .project:nth-of-type(even) {
      margin: 40px 0; }

.project__overview .left {
  display: flex;
  flex-direction: row;
  position: Relative;
  justify-content: flex-start;
  align-items: baseline;
  flex: 1; }
  @media only screen and (min-width: 768px) {
    .project__overview .left {
      width: 100vw; } }
  .project__overview .left .logo {
    flex: 1;
    display: none; }
    @media only screen and (min-width: 768px) {
      .project__overview .left .logo {
        display: inline-block; } }
    .project__overview .left .logo a {
      border-bottom: 3px solid #ff2e2e;
      color: black;
      font-size: 42px; }
  .project__overview .left h4 {
    flex: 1;
    margin: 0 auto;
    text-align: left;
    padding-bottom: 0;
    font-family: 'Dr';
    font-size: 20px;
    line-height: 24px; }
  .project__overview .left .info {
    flex: 2.5;
    padding-bottom: 30px; }
    @media (max-width: 480px) {
      .project__overview .left .info {
        text-align: center; } }
    .project__overview .left .info span {
      border-bottom: 3px solid #ff2e2e;
      margin-bottom: 20px;
      display: inline-block;
      font-size: 26px;
      line-height: 26px; }
      @media only screen and (min-width: 768px) {
        .project__overview .left .info span {
          font-size: 20px;
          line-height: 32px;
          margin-bottom: 0; } }

@media only screen and (min-width: 768px) {
  .project__overview .right div {
    padding-right: 10vw; } }

.project__overview .right div p {
  font-family: 'Dr';
  padding-bottom: 30px;
  font-size: 20px;
  line-height: 24px; }
  @media only screen and (min-width: 768px) {
    .project__overview .right div p {
      font-size: 20px;
      line-height: 24px;
      padding-bottom: 50px; } }

.project__overview .right div h4 {
  font-family: 'Dr';
  font-size: 25px;
  padding-bottom: 10px; }
  @media only screen and (min-width: 768px) {
    .project__overview .right div h4 {
      font-size: 36px;
      padding-bottom: 20px; } }

.project__overview .right div .extra {
  padding-top: 0px; }
  @media only screen and (min-width: 768px) {
    .project__overview .right div .extra {
      padding-top: 80px; } }
  .project__overview .right div .extra p {
    font-size: 20px;
    line-height: 28px; }
    .project__overview .right div .extra p a {
      color: black;
      border-bottom: 1px solid black;
      transition: 0.3s ease-in-out; }
    .project__overview .right div .extra p a:hover {
      border-bottom: 1px solid transparent; }

.project-images img:nth-of-type(even) {
  margin: 35px 0; }

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