@font-face {
  font-family: "Moderat";
  font-weight: normal;
  src: url("/assets/fonts/Moderat-Regular.eot");
  src: url("/assets/fonts/Moderat-Regular.woff") format("woff"), url("/assets/fonts/Moderat-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Moderat";
  font-weight: bold;
  src: url("/assets/fonts/Moderat-Bold.eot");
  src: url("/assets/fonts/Moderat-Bold.woff") format("woff"), url("/assets/fonts/Moderat-Bold.woff2") format("woff2");
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
label,
a,
button,
input,
textarea,
select,
option,
legend {
  font-family: "Moderat", sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.f-xs {
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.025rem;

}

.f-s,
.f-flex {
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0.01px;
}

.f-m {
  font-size: 1.4rem;
  line-height: 1.2;
}

.f-l {
  font-size: 1.8rem;
  line-height: 1.2;
}

.f-nav-m,
.f-nav-l {
  font-size: 1.5rem;
  line-height: 1.2;
}

.f-desc,
.f-arch {
  font-size: 1.5rem;
  line-height: 1.2;
  color: inherit;
}

.upper {
  text-transform: uppercase;
}

.bold {
  font-weight: bold;
}

.landing-title {
  font-size: 18.5vw;
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-white);
  margin-top: -1vw;
  letter-spacing: -.6vw;
}

.f-projects-title {
  font-size: 24vw;
  -webkit-text-stroke: 1.5px var(--c-black);
  color: transparent;
  letter-spacing: -.4vw;
  line-height: 1;
}

.f-projects-filter {
  font-size: 12.5vw;
  line-height: 1;
}

.f-project-title {
  font-size: 2.8rem;
  line-height: 1;
}

@media screen and (min-width: 820px) {

  .landing-title {
    -webkit-text-stroke: 2.5px var(--c-white);
  }

  .f-projects-title {
    -webkit-text-stroke: 2.5px var(--c-black);
  }

  .f-projects-title {
    font-size: 15vw;
  }

  .f-project-title {
    font-size: 5rem;
    line-height: 1;
  }

  .f-nav-m {
    font-size: 1.8rem;
  }

  .f-nav-l {
    font-size: 3rem;
  }

  .f-desc {
    font-size: 2.2rem;
  }

  .f-arch {
    font-size: 1.8rem;
  }

  .f-projects-filter {
    font-size: 3vw;
    line-height: 1;
  }

  .f-flex {
    font-size: 1.7rem;
  }
}

@media screen and (min-width: 1024px) {
  .f-arch {
    columns: 2;
  }
}

@media screen and (min-width: 820px) and (min-height: 750px) {
  .f-nav-l {
    font-size: 5rem;
  }
}