/* =====  1 Global Rules & Definitions  ===================================== */
/* -----  1.1 Font Definitions  --------------------------------------------- */
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3408f0");
@font-face {
  font-family: 'NHaasGroteskDSStd-45Lt';
  src: url("../fonts/3408F0_5_0.eot");
  src: url("../fonts/3408F0_5_0.eot?#iefix") format("embedded-opentype"), url("../fonts/3408F0_5_0.woff2") format("woff2"), url("../fonts/3408F0_5_0.woff") format("woff"), url("../fonts/3408F0_5_0.ttf") format("truetype"); }
/* -----  1.2 Reset & Normalization  ---------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block; }

h1, h2, h3, h4, h5, h6,
p, ul, ol, pre {
  /* Reset font-sizes and normalize margins */
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 1.5rem; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  color: #6e6e6e; }

::-moz-selection {
  background-color: rgba(12, 51, 204, 0.6);
  color: white; }

::selection {
  background-color: rgba(12, 51, 204, 0.6);
  color: white; }

/* -----  1.3 General Typography  ------------------------------------------- */
/* Headings */
h1, h2, h3 {
  font-family: "NHaasGroteskDSStd-45Lt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; }

h1 {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 3rem; }

h2 {
  font-size: 1.75rem;
  line-height: 2.2rem;
  text-align: center; }

h3 {
  font-size: 1.25em;
  line-height: 1.2; }

h4 {
  font-size: 1em; }

/* Links */
a {
  color: inherit;
  text-decoration: none; }

a:hover, a:focus {
  color: #0c33cc; }

/* Misc */
hr {
  font-size: 1.25rem;
  font-weight: 500;
  height: 1.5rem;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: #a09f9f; }

i, em {
  /* Vesper Libre does not have Italics,
     so we use a the *medium* weight instead */
  font-weight: 500;
  font-style: normal; }

b, strong {
  font-weight: 700; }

/* -----  1.4 Images & Figures  --------------------------------------------- */
img {
  border-style: none;
  display: block;
  height: auto;
  width: 100%; }

figure {
  margin: 0; }

figure + figure {
  margin-top: 10px; }

figcaption {
  font-size: .75rem;
  line-height: 1.5rem; }

/* -----  1.5 Text  --------------------------------------------------------- */
.text {
  font-size: 22px;
  max-width: 746px; }

.text--large {
  font-size: 28px;
  line-height: 1.2857142857; }

.text--intro {
  color: #6e6e6e;
  font-size: 28px;
  line-height: 1.2857142857;
  margin-top: 15px; }
  @media all and (min-width: 38em) {
    .text--intro {
      margin-top: 35px; } }

.text--hidden {
  display: none;
  height: 0;
  margin: 0;
  text-indent: -9999px; }

/* =====  3 Site Layout  ==================================================== */
html {
  color: #a09f9f;
  font: normal 400 1em/1.36364 "NHaasGroteskDSStd-45Lt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Setting this to `default` prevents the cursors from
     changing when hovering blocks of text or whitespace,
     which is less distracting */
  cursor: default;
  /* Neccessary for sticks footer. */
  position: relative;
  min-height: 100%;
  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: #0c33cc; }

/* Always show the vertical scrollbar to prevent `jumps`
   of page content after navigating from a very short page
   that does not scroll to a long pager */
body {
  overflow-y: scroll; }

/* ----- 3.1  Header  ------------------------------------------------------- */
.page-header {
  align-items: flex-end;
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 30px 10px 10px;
  position: fixed;
  width: 100%;
  z-index: 1; }
  .page-header__dummy {
    height: 90px; }
  .page-header__logo {
    display: block; }
  .page-header svg {
    display: block;
    height: 50px;
    width: auto; }

/* -----  3.2 Hamburger Menu  ------------------------------------------------*/
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 0 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: "initial";
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 1; }

.hamburger-box {
  width: 37px;
  height: 18px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 37px;
    height: 2px;
    background-color: #0c33cc;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -8px; }
  .hamburger-inner::after {
    bottom: -8px; }

/*
 * Boring
 */
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
  transition-property: none; }
.hamburger--boring.is-active .hamburger-inner {
  transform: rotate(45deg); }
  .hamburger--boring.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }
  .hamburger--boring.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg); }

body.menu-active {
  overflow-y: hidden; }

.hamburger {
  margin-bottom: 3px; }

.hamburger:focus {
  outline: none; }

.overlay__menu {
  background-color: rgba(12, 51, 204, 0.5);
  border-bottom: 10px solid white;
  color: white;
  display: none;
  height: calc(100vh - 90px);
  font-size: 28px;
  position: absolute;
  left: 10px;
  top: 90px;
  text-align: right;
  padding: 10px;
  width: calc(100vw - 20px); }
  .overlay__menu.active {
    display: block; }

.menu-item__link {
  position: relative; }
  .menu-item__link:hover {
    color: white; }
    .menu-item__link:hover:after {
      background-color: white;
      content: '';
      display: inline-block;
      height: 1px;
      left: 0;
      position: absolute;
      top: 24px;
      width: 100%; }
  .menu-item__link:focus {
    color: white; }

/* -----  3.3 Footer  ------------------------------------------------ */
.footer {
  margin: 10px; }

.footer__copyright {
  font-size: 11px; }

/* -----  3.4 Main Content  ------------------------------------------------- */
.main {
  margin-bottom: 1.5rem;
  margin-left: 10px;
  margin-right: 10px; }

/* -----  3.4 Pagination  ------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  max-width: 140px; }

.pagination-item:not(.is-inactive):hover svg {
  stroke: #0c33cc; }
.pagination-item.is-inactive svg {
  stroke: white; }

/* =====  4 Template-specific Components ==================================== */
/* -----  4.1 Homepage  ----------------------------------------------------- */
.home__image {
  display: none;
  height: calc(100vh - 100px);
  background-position: center center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media all and (min-width: 38em) {
    .home__image {
      display: block; } }
.home__projects {
  display: block; }
  @media all and (min-width: 38em) {
    .home__projects {
      display: none; } }
.home__all-projects {
  box-sizing: initial;
  display: block;
  height: 36px;
  padding: 10px;
  text-align: center; }
  .home__all-projects:hover svg {
    stroke: #0c33cc; }

/* ----- 4.2 Project Index  ------------------------------------------------- */
.showcase {
  display: flex;
  flex-flow: row wrap;
  margin-right: -10px;
  margin-bottom: 0; }

.showcase-item {
  flex-basis: 100%;
  list-style: none;
  margin-bottom: 10px;
  position: relative; }
  @media all and (min-width: 38em) {
    .showcase-item {
      flex-basis: 50%; } }

.showcase-link {
  border-bottom: 0;
  display: block;
  margin-right: 10px;
  position: relative; }

.showcase-caption {
  background-color: rgba(12, 51, 204, 0.5);
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  letter-spacing: .05em;
  padding-top: 17px;
  padding-left: 10px;
  opacity: 0;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  will-change: opacity; }

.showcase-location,
.showcase-title {
  color: white;
  font-weight: normal;
  font-size: 22px;
  margin: 0; }

.showcase-image {
  display: block; }

.showcase-link:hover .showcase-caption,
.showcase-link:focus .showcase-caption {
  opacity: 1; }

.anchor-link {
  display: block;
  position: relative;
  top: -90px;
  visibility: hidden; }

/* ----- 4.3 Project Page  -------------------------------------------------- */
.project__header {
  margin-bottom: 20px;
  margin-top: 30px;
  text-align: center; }
.project__title {
  color: #6e6e6e;
  font-size: 22px;
  font-weight: normal;
  line-height: 30px;
  margin: 0; }
.project__location {
  color: #a09f9f;
  font-size: 22px;
  line-height: 30px; }
.project__image {
  margin-left: auto;
  margin-right: auto; }
  .project__image--tall {
    max-width: 660px; }

/* -----  4.4 Studio  ------------------------------------------------------ */
.founder-image {
  width: auto;
  max-width: 100%; }

.founder-text {
  color: #0c33cc;
  margin-top: 4px; }

.studio-wrap {
  display: flex;
  flex-direction: column; }
  @media all and (min-width: 67.5em) {
    .studio-wrap {
      flex-direction: row; } }

@media all and (min-width: 67.5em) {
  .founder-content {
    flex-basis: 746px;
    flex-shrink: 0;
    max-width: 100%; } }

.logo-wrap {
  max-width: 740px;
  margin-bottom: 100px;
  margin-right: 10px;
  margin-top: 51px; }
  @media all and (min-width: 67.5em) {
    .logo-wrap {
      margin-bottom: 0;
      margin-left: 75px;
      margin-right: 42px;
      margin-top: 35px; } }
  .logo-wrap:before {
    background-color: #9f9f9f;
    content: '';
    display: block;
    height: 1px;
    margin-bottom: 75px;
    max-width: 227px;
    width: 100%; }
    @media all and (min-width: 67.5em) {
      .logo-wrap:before {
        display: none; } }

/* -----  4.4 Contact  ------------------------------------------------------ */
.contact__wrap {
  display: flex;
  flex-flow: column; }
  @media all and (min-width: 38em) {
    .contact__wrap {
      flex-flow: row nowrap;
      justify-content: space-between; } }
@media all and (min-width: 38em) {
  .contact__image-wrap {
    margin-left: 5%; } }