@font-face {
  font-family: "hk_groteskregular";
  src: url("../_fonts/hkgrotesk-regular-webfont.woff") format("woff"), url("../_fonts/hkgrotesk-regular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
html {
  font-family: "hk_groteskregular", sans-serif;
  font-size: 18px;
  color: black;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
}

#title {
  animation-fill-mode: backwards;
  animation-duration: 6s;
  animation-name: titlefade;
}

#text-0,
#text-1,
#text-2,
#contactlink {
  animation-fill-mode: backwards;
  animation-duration: 3s;
  animation-name: textfade;
}

#text-0 {
  animation-delay: 500ms;
}

#text-1 {
  animation-delay: 1000ms;
}

#text-2 {
  animation-delay: 1800ms;
  position: sticky;
  position: -webkit-sticky;
}

#contactlink {
  animation-delay: 2600ms;
  position: sticky;
  position: -webkit-sticky;
}

.sublinks {
  color: black;
  transition: color 0.2s ease-out 0s;
}
.sublinks:hover {
  color: #777777;
}

#une,
#deux,
#trois {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: imagefade 2s ease-out 2s backwards;
}

@keyframes titlefade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes textfade {
  from {
    opacity: 0;
    margin-left: 0.6em;
  }
  to {
    opacity: 1;
    margin-left: 0em;
  }
}
@keyframes imagefade {
  from {
    margin-top: -1em;
    opacity: 0;
  }
  to {
    margin-top: 0em;
    opacity: 1;
  }
}
@media screen and (min-width: 1300px) {
  h2, .mainlinks {
    font-size: 1em;
    font-weight: normal;
  }

  #topnav {
    background-color: white;
    width: 250px;
    height: 5em;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    mix-blend-mode: multiply;
    z-index: 1;
  }

  #title {
    height: 37px;
    width: auto;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    margin: 2em auto;
  }

  #container {
    position: relative;
    min-height: 100vh;
    width: auto;
    display: grid;
    grid-template: repeat(14, 7em) 1em/repeat(17, 1fr);
  }

  #header {
    grid-row: 2/100;
    grid-column: 2/span 5;
    text-transform: uppercase;
  }

  footer {
    display: flex;
    height: 2em;
  }

  #copyright {
    font-size: 0.5em;
    margin: auto;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  #text-2 {
    top: 1em;
  }

  #contactlink {
    top: 3.5em;
  }

  #une {
    grid-column: 7/12;
    grid-row: 2/span 6;
  }

  #deux {
    grid-column: 7/12;
    grid-row: 9/span 6;
  }

  #trois {
    grid-column: 7/12;
    grid-row: 16/span 6;
  }
}
@media screen and (min-width: 896px) and (max-width: 1299px) {
  h2, .mainlinks {
    font-size: 0.9em;
    font-weight: normal;
  }

  #topnav {
    background-color: white;
    width: 45vw;
    height: 5em;
    top: 0;
    left: 0;
    position: fixed;
    mix-blend-mode: normal;
    z-index: 1;
    box-shadow: 0 20px 20px 0 white;
  }

  #title {
    height: 37px;
    width: auto;
    position: fixed;
    left: 5.8823529412vw;
    margin: 2em auto;
  }

  #container {
    position: relative;
    min-height: 100vh;
    width: auto;
    display: grid;
    grid-template: repeat(14, 7em) 1em/repeat(17, 1fr);
  }

  #header {
    grid-row: 2/100;
    grid-column: 2/span 6;
    text-transform: uppercase;
  }

  footer {
    display: flex;
    height: 1.5em;
  }

  #copyright {
    font-size: 0.5em;
    margin: auto;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  #text-2 {
    top: 7em;
  }

  #contactlink {
    top: 8.25em;
  }

  #une {
    grid-column: 9/17;
    grid-row: 2/span 6;
  }

  #deux {
    grid-column: 9/17;
    grid-row: 9/span 6;
  }

  #trois {
    grid-column: 9/17;
    grid-row: 16/span 6;
  }
}
@media screen and (min-width: 667px) and (max-width: 895px) {
  h2, .mainlinks {
    font-size: 0.8em;
    font-weight: normal;
  }

  #topnav {
    background-color: white;
    width: 45vw;
    height: 5em;
    top: 0;
    left: 0;
    position: fixed;
    mix-blend-mode: normal;
    z-index: 1;
    box-shadow: 0 20px 20px 0 white;
  }

  #title {
    height: 37px;
    width: auto;
    position: fixed;
    left: 5.8823529412vw;
    margin: 2em auto;
  }

  #container {
    position: relative;
    min-height: 100vh;
    width: auto;
    display: grid;
    grid-template: repeat(14, 7em) 1em/repeat(17, 1fr);
  }

  #header {
    grid-row: 2/100;
    grid-column: 2/span 7;
    text-transform: uppercase;
  }

  footer {
    display: flex;
    height: 1.5em;
  }

  #copyright {
    font-size: 0.5em;
    margin: auto;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  #text-2 {
    top: 7.5em;
  }

  #contactlink {
    top: 8.4em;
  }

  #une {
    grid-column: 9/17;
    grid-row: 2/span 6;
  }

  #deux {
    grid-column: 9/17;
    grid-row: 9/span 6;
  }

  #trois {
    grid-column: 9/17;
    grid-row: 16/span 6;
  }
}
@media (min-width: 414px) and (max-width: 666px) {
  h2, .mainlinks {
    font-size: 0.8em;
    font-weight: normal;
  }

  #topnav {
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    display: block;
    height: 3.5em;
    top: 0;
    left: 0;
    position: fixed;
    mix-blend-mode: normal;
    z-index: 1;
    border-bottom: #777777 1px solid;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  #title {
    position: absolute;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5em;
  }

  #container {
    position: relative;
    min-height: 100vh;
    width: auto;
    display: grid;
    grid-template: 4em repeat(15, 5em) 1em/0.5em repeat(5, 1fr) 0.5em;
  }

  #header {
    grid-row: 2/100;
    grid-column: 2/span 5;
    text-transform: uppercase;
  }

  footer {
    display: flex;
    height: 1.5em;
  }

  #copyright {
    font-size: 0.5em;
    margin: auto;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  #text-2 {
    top: 5em;
  }

  #contactlink {
    top: 6em;
  }

  #une {
    grid-column: 1/8;
    grid-row: 4/span 6;
  }

  #deux {
    grid-column: 1/8;
    grid-row: 11/span 6;
  }

  #trois {
    grid-column: 1/8;
    grid-row: 18/span 6;
  }
}
@media screen and (max-width: 413px) {
  h2, .mainlinks {
    font-size: 0.7em;
    font-weight: normal;
  }

  #topnav {
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    display: block;
    height: 3.5em;
    top: 0;
    left: 0;
    position: fixed;
    mix-blend-mode: normal;
    z-index: 1;
    border-bottom: #777777 1px solid;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  #title {
    position: absolute;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5em;
  }

  #container {
    position: relative;
    min-height: 100vh;
    width: auto;
    display: grid;
    grid-template: repeat(3, 3.5em) 2em repeat(15, 3.5em) 1em/0.5em repeat(5, 1fr) 0.5em;
  }

  #header {
    grid-row: 2/100;
    grid-column: 2/span 5;
    text-transform: uppercase;
  }

  footer {
    display: flex;
    height: 1.5em;
  }

  #copyright {
    font-size: 0.4rem;
    margin: auto;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  #text-2 {
    top: 6.5em;
  }

  #contactlink {
    top: 7em;
  }

  #une {
    grid-column: 1/8;
    grid-row: 5/span 7;
  }

  #deux {
    grid-column: 1/8;
    grid-row: 13/span 7;
  }

  #trois {
    grid-column: 1/8;
    grid-row: 21/span 7;
  }
}

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