@font-face {
  font-family: "Fakt Pro Normal";
  src: url(https://assets.wetransfer.net/fonts/FaktPro-Normal.eot);
  /* IE9 Compat Modes */
  src: url(https://assets.wetransfer.net/fonts/FaktPro-Normal.eot?#iefix) format("embedded-opentype"), url(https://assets.wetransfer.net/fonts/FaktPro-Normal.woff) format("woff"), url(https://assets.wetransfer.net/fonts/FaktPro-Normal_web.ttf) format("truetype");
  /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Fakt Pro Medium";
  src: url(https://assets.wetransfer.net/fonts/FaktPro-Medium.eot);
  /* IE9 Compat Modes */
  src: url(https://assets.wetransfer.net/fonts/FaktPro-Medium.eot?#iefix) format("embedded-opentype"), url(https://assets.wetransfer.net/fonts/FaktPro-Medium.woff) format("woff"), url(https://assets.wetransfer.net/fonts/FaktPro-Medium_web.ttf) format("truetype");
  /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 700;
}

body, html {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Fakt Pro Normal", -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #FFFCF8;
  margin: 0;
}

a,
a:visited,
a:focus,
a:active {
  color: #000000;
}

a:hover{
  color: #409fff;
}

.error-page {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 16px;
}

.error-page__logo {
  position: fixed;
  left: 15px;
  top: 15px;
  width: 52px;
  height: 29px;
}

.error-page__content p {
  margin: 0 auto;
  font-size: 1em;
  line-height: 1.25em;
}

.error-page__content h1 {
  font-family: "Fakt Pro Medium", -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
  margin: 1em 0 0.2em 0;
  font-size: 1em;
}

.error-page-404 .spiral {
  margin-bottom: 2em;
  max-width: 600px;
}

.error-page-400 .error-page__content,
.error-page-422 .error-page__content,
.error-page-429 .error-page__content,
.error-page-404 .error-page__content,
.error-page-500 .error-page__content,
.error-page-502 .error-page__content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.error-page-500 .error-page__content {
  margin: 0 2em;
}

.error-page-400 .error-page__content,
.error-page-404 .error-page__content {
  margin: 0 auto;
  width: 70%;
}

@media only screen and (min-width: 650px) {
  .error-page-500 .error-page__content p,
  .error-page-404 .error-page__content p {
    font-size: 1.4em;
    line-height: 1.25em;
  }

  .error-page-404 .error-page__content {
    width: 60%;
  }

  .error-page-500 .error-page__content p {
    margin: 0 auto;
  }

  .error-page-500 .spiral {
    width: 70%;
  }

  .error-page__content h1 {
    font-size: 1.4em;
  }
}

@media only screen and (min-width: 800px) {
  .error-page-404 .error-page__content {
    width: 38%;
  }
}

@media only screen and (min-width: 1120px) {
  .error-page-404 .error-page__content {
    width: 34%;
  }
}

@media only screen and (min-width: 1280px) {
  .error-page__content p {
    max-width: 500px;
  }
}