/* Beakpoints (mobile first) */
body {
  padding: 0;
  margin: 0;
  border: 0;
  font-family: acumin-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #e8e8e8;
  color: #000; }
  body > div > canvas {
    position: fixed;
    z-index: 0; }

a {
  color: #000;
  text-decoration: none; }
  a:hover, a:active, a:visited {
    color: #000;
    text-decoration: none; }

header {
  position: absolute;
  width: 100vw;
  height: calc(50vh - calc(50vh - 50%));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2; }
  header .site-title h1,
  header .site-title h2 {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.25rem;
    margin: 0;
    text-align: center; }
    @media only screen and (min-width: 768px) {
      header .site-title h1,
      header .site-title h2 {
        font-size: 1rem; } }
  header .site-title h1 {
    font-weight: 700;
    margin-bottom: 0.33rem; }
    @media only screen and (min-width: 768px) {
      header .site-title h1 {
        margin-bottom: 0.5rem; } }
  header .contact {
    position: absolute;
    top: 24px;
    right: 24px; }
    header .contact img {
      width: 1.5rem;
      height: 1.5rem;
      margin-left: 0.75rem; }

main {
  position: absolute;
  width: 100vw;
  height: calc(100vh - calc(100vh - 100%));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1; }
  main .teaser-symbol {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 9rem;
    transition: 0.5s; }
    main .teaser-symbol:hover {
      transform: scale(1.05) translateY(-2px); }
    main .teaser-symbol-box {
      background-color: #000;
      border-radius: 1px;
      height: 1rem;
      width: 1.75rem;
      margin: 0.15rem;
      transition: 0.2s; }
      main .teaser-symbol-box:hover {
        transform: scale(0.9); }
    main .teaser-symbol figcaption {
      width: 100%;
      text-align: center;
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.25rem;
      margin-top: 0.25rem; }

.subpage header {
  position: fixed;
  display: block;
  width: 100vw;
  height: auto; }
  .subpage header .site-title {
    position: absolute;
    top: 1.4rem;
    left: 1.5rem; }
    .subpage header .site-title h1,
    .subpage header .site-title h2 {
      font-size: 0.55rem;
      letter-spacing: 0.175rem;
      text-align: left; }
      @media only screen and (min-width: 768px) {
        .subpage header .site-title h1,
        .subpage header .site-title h2 {
          font-size: 0.55rem; } }
    .subpage header .site-title h1 {
      margin-bottom: 0; }
      @media only screen and (min-width: 768px) {
        .subpage header .site-title h1 {
          margin-bottom: 0; } }

.subpage main {
  position: absolute;
  top: 4.5rem;
  left: 1.5rem;
  width: calc(100vw - 3rem);
  height: auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: left;
  letter-spacing: 0.175rem;
  font-size: 0.55rem;
  z-index: 2; }
  .subpage main .teaser {
    margin-bottom: 1.5rem;
    width: 100%; }
    @media only screen and (min-width: 768px) {
      .subpage main .teaser {
        width: calc(50% - 0.75rem);
        margin: 0 1.5rem 1.5rem 0; }
        .subpage main .teaser:nth-child(2n) {
          margin-right: 0; } }
    @media only screen and (min-width: 1200px) {
      .subpage main .teaser {
        width: calc(33.33% - 1rem); }
        .subpage main .teaser:nth-child(2n) {
          margin-right: 1.5rem; }
        .subpage main .teaser:nth-child(3n) {
          margin-right: 0; } }
    .subpage main .teaser-image img {
      width: 100%;
      margin-bottom: 0.25rem;
      box-shadow: 1px 2px 4px #00000022;
      border-radius: 1px; }
    @media only screen and (min-width: 1200px) {
      .subpage main .teaser-image {
        filter: saturate(0);
        transition: 0.25s; }
        .subpage main .teaser-image:hover {
          filter: saturate(1); } }
    .subpage main .teaser-caption {
      display: flex;
      justify-content: space-between; }