@font-face {
    font-family: 'Neue Haas Grotesk';
    src: local('Neue Haas Grotesk Roman'), local('Neue-Haas-Grotesk--Roman'),
        url('font/NeueHaasDisplay-Roman.woff2') format('woff2'),
        url('font/NeueHaasDisplay-Roman.woff') format('woff'),
        url('font/NeueHaasDisplay-Roman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

/* ==========================================================================
   normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css
   ========================================================================== */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}h1{font-size:2em;margin:.67em 0}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}hr{box-sizing:content-box;color:inherit;height:0;overflow:visible}main{display:block}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}table{border-color:inherit;text-indent:0}button,input,select{margin:0}button{overflow:visible;text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}fieldset{padding:.35em .75em .625em}input{overflow:visible}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}details{display:block}dialog{background-color:#fff;border:solid;color:#000;display:block;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/
/* ==== GRID SYSTEM ==== */
.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  /* margin: 0.5rem 2%; */
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 100%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 8.33%;
  }

  .col-2 {
    width: 16.66%;
  }

  .col-3 {
    width: 25%;
  }

  .col-4 {
    width: 33.33%;
  }

  .col-5 {
    width: 41.66%;
  }

  .col-6 {
    width: 50%;
  }

  .col-7 {
    width: 58.33%;
  }

  .col-8 {
    width: 66.66%;
  }

  .col-9 {
    width: 75%;
  }

  .col-10 {
    width: 83.33%;
  }

  .col-11 {
    width: 91.66%;
  }

  .col-12 {
    width: 100%;
  }
}

@media only screen and (min-width: 1360px) {
  .col-8 {
    width: 65%;
  }
  .col-4 {
    width: 33.33%;
  }
}

/* ==== CUSTOM CODE ==== */

body {
  margin: 0px;
  background-color: #1B1F21;
  font-family: 'Neue Haas Grotesk', sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1, h2 {
  font-family: 'Neue Haas Grotesk', sans-serif;
  font-weight: 400;
  color: #353334;
  margin: 0px;
}
h3, h4 {
  font-family: 'Neue Haas Grotesk', sans-serif;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.01em;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

h1 {
  margin-top: -.6vw;
  margin-bottom: 8.5vw;
  font-size: 8.6vw;
  line-height: 100%;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.5vw;
  line-height: 150%;
  /* letter-spacing: 0.005em;line-height: 118%; */
}

h3 {
  font-size: 2.5vw;
  line-height: 100%;
  margin: 0px;
}

h4 {
  font-size: 2.5vw;
  line-height: 116%;
  color: hsla(0, 0%, 100%, 0.5);
  margin: 6px 0px;
}

p, ol {
  color: #000;
  font-size: 1.8vw;
  line-height: 130%;
  margin: 0px;
}

small {
  color: #000;
  font-size: .9vw;
  opacity: .5;
}

a {
  transition: all .2s;
}

h2 span {
  display: block;
}


.link {
  color: #fff;
  text-decoration: none;
}

.link:hover {
  border-bottom: 2px solid #fff;
  padding-bottom: 2px;
  color: #fff;
  opacity: .75;
}


@media only screen and (max-width: 60em) { /* 960px */
}

@media only screen and (max-width: 33.75em) {  /* 540px */
  h1 {
    margin-top: -1vw;
    margin-bottom: 100px;
    font-size: 34px;
    line-height: 110%;
    letter-spacing: 0.01em;
  }

  h2 {
    font-size: 24px;
    line-height: 122%;
    letter-spacing: 0.01em;
  }

  h2 span {
    display: inline;
  }

  h3 {
    font-size: 24px;
    line-height: 122%;
    letter-spacing: 0.02em;
  }

  h4 {
    font-size: 24px;
    line-height: 122%;
    color: hsla(0, 0%, 100%, 0.5);
    margin: 6px 0px;
    letter-spacing: 0.02em;
  }

  small {
    font-size: 16px;
    line-height: 130%;
  }
}




.header-wrapper {
  padding: 42px 42px 36px;
  background-color: #E8F7E8;
  color: #353334;
  overflow: hidden;
  height: 37vw;
}

h1::selection, h2::selection {
  background: #1B1F21;
  color: white;
}

h3::selection, h4::selection, p::selection {
  background-color: #E8F7E8;
  color: #353334;
}

.title {
  animation: outer-left .5s .1s ease both;
}

.title-inner {
  /* animation: inner-left 1s 1s ease both; */
}

.header, .intro {
  animation: outer-left .5s .1s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.header h1 {
  animation: inner-left .5s .1s ease both,
    text-clip .5s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.intro h2 {
  animation: text-clip .5s .1s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.intro h2{
  margin-bottom: -4px;
}

.intro a {
  color: #353334;
  border-bottom: 2px solid #353334;
}
.intro a:hover {
  color: #353334;
  border-color: #353334;
}
.intro .arrow  {
  position: relative;
  height: 12vw;
}
.intro .arrow svg {

  width: 20px;
  height: 20px;

}
.intro .arrow svg path {
    fill: #353334;
}

.intro .swipe-up {
  position: absolute;
  bottom: 0px;
  right: 0px;
  animation: fade-in .5s linear 1s forwards,  updown .5s ease 1s;
  opacity: 0;

}

.intro .swipe-up span {
  font-family: 'Neue Haas Grotesk', sans-serif;
  font-weight: 400;
  font-size: 1.6vw;
  margin-right: 8px;
}

.project {
  margin: 42px;
  position: relative;
  overflow: hidden;
  padding-bottom: 11vw;
  max-width: 100%;
}

.project-hero {
  margin: 0px;
  animation: image-in 1s cubic-bezier(0.5, 0, 0.1, 1) .5s backwards;
}

.project img {
  border-radius: 2px;
  transform: translateZ(0);
  transition: all 1s ease;
  opacity: .95;
}

.project-hero img {
  border-radius: 0px;
}

.project a img:hover {
  transform: scale(1.01);
  opacity: 1;
}



.description {
  padding: 42px 0px 0px;
}

.project-hero .description {
  padding: 42px 0px 0px 42px;
}

.project-hero img {
  border-bottom: 1px solid #000;
}


img.profile {
  border-radius: 4px;
}

.vita p, .vita ol {
    color: #fff;
    opacity: .9;
    margin: 0px 0px 22px;
    padding: 0px 42px;
    letter-spacing: 0.03em;
}
.vita a {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid #fff;
}

.vita a:hover {
  border-bottom: 2px solid #fff;
  color: #fff;
  opacity: .75;
}

.footer {
  padding: 42px;
  position: relative;
  background: #fff;
}

.footer h3 {
  color: #353334;
  margin: 42px 0px 84px;
}

.footer-headline {
  margin: 0px 0px 12px;
  font-size: 1.5vw;
  color: #353334;
}

.footer-text {
  color: #353334;
  line-height: 130%;
  font-size: 1.5vw;
}

.footer-link {
  color: #353334;
  font-size: 1.5vw;
  line-height: 116%;
  margin: 0px;
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
  opacity: .9;
  padding-bottom: 3px;
  border-bottom: 1px solid #000;
}

.footer-link:hover {
  color: #353334;
  opacity: .75;
  padding-bottom: 4px;
}

.footer-link-secondary {
  color: #000;
  text-decoration: none;
  display: inline-block;
  opacity: .9;
  border-bottom: 1px solid #000;
}

.footer-link-secondary:hover {
  color: #000;
  opacity: 1;
}

.copyright {
  margin-top: 192px;
}


@media only screen and (max-width: 60em) { /* 960px */
  .vita p, .vita ol {
      font-size: 19px;
      line-height: 130%;
  }

  .footer-headline {
    font-size: 16px;
  }

  .footer-text {
    line-height: 130%;
    font-size: 16px;
  }

  .footer-link {
    font-size: 16px;
  }


  .intro .arrow {
    display: none;
  }
}


@media only screen and (max-width: 33.75em) {  /* 540px */
  .header-wrapper {
    padding: 22px 20px 32px;
    height: auto;
  }

  .project {
    margin: 0px;
    padding-bottom: 100px;
  }

  .description, .project-hero .description {
    padding: 0px;
  }

  .description h3 {
    padding: 20px 0px 0px 20px;
  }

  .description h4 {
    padding: 0px 20px 0px 20px;
  }

  img.profile {
    width: 90%;
    position: relative;
    left: 5%;
    right: 5%;
  }

  .vita p, .vita ol {
      font-size: 22px;
      margin-top: 22px;
      padding: 0px 20px;
      line-height: 130%;
  }

  .footer {
    padding: 20px;
  }

  .footer h3 {
    margin: 20px 0px 40px;
  }

  .footer-headline {
    font-size: 22px;
  }

  .footer-text {
    line-height: 130%;
    font-size: 22px;
  }

  .footer-link {
    font-size: 22px;
  }

  .footer .col-3 {
    margin-bottom: 60px;
  }

  .copyright {
    margin-top: 80px;
  }
}

/* ==== ANIMATION ==== */

@keyframes updown {
  from {
    transform: translateY(300%);
  }
  to {
    transform: translateY(0%);
  }
}

@keyframes text-clip {
  from {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes outer-left {
  from {
    transform: translateX(25%);
  }
  to {
    transform: none;
  }
}

@keyframes inner-left {
  from {
    transform: translateX(-25%);
  }
  to {
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes image-in {
    from {
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }