/*! normalize.sass v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}
body {
  margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline
}
audio:not([controls]) {
  display: none;
  height: 0
}
[hidden],
template {
  display: none
}
a {
  background-color: transparent
}
a:active,
a:hover {
  outline: 0
}
abbr[title] {
  border-bottom: 1px dotted
}
b,
strong {
  font-weight: 700
}
dfn {
  font-style: italic
}
h1 {
  font-size: 2em;
  margin: .67em 0
}
mark {
  background: #ff0;
  color: #000
}
small {
  font-size: 80%
}
sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -.5em
}
sub {
  bottom: -.25em
}
img {
  border: 0
}
svg:not(:root) {
  overflow: hidden
}
figure {
  margin: 1em 40px
}
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0
}
pre {
  overflow: auto
}
code,
kbd,
pre,
samp {
  font-family: monospace,monospace;
  font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0
}
button {
  overflow: visible;
  text-transform: none
}
select {
  text-transform: none
}
button,
html input[type=button] {
  -webkit-appearance: button;
  cursor: pointer
}
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}
button[disabled],
html input[disabled] {
  cursor: default
}
button::-moz-focus-inner {
  border: 0;
  padding: 0
}
input {
  line-height: normal
}
input::-moz-focus-inner {
  border: 0;
  padding: 0
}
input[type=checkbox],
input[type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto
}
input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}
fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}
legend {
  border: 0;
  padding: 0
}
textarea {
  overflow: auto
}
optgroup {
  font-weight: 700
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
td,
th {
  padding: 0
}
@font-face {
  font-family: DSPLC;
  src: url(../fonts/Displace2.0-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal
}
@font-face {
  font-family: DSPLC;
  src: url(../fonts/Displace2.0-Bold.otf) format("opentype");
  font-weight: 700;
  font-style: normal
}
@font-face {
  font-family: MNTSRT;
  src: url(../fonts/Montserrat-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal
}
@font-face {
  font-family: MNTSRT;
  src: url(../fonts/Montserrat-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal
}
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  background-repeat: no-repeat;
  background-position: center
}
body {
  font-family: MNTSRT,sans-serif;
  font-size: 16px;
  line-height: 28px;
  font-family: MNTSRT,sans-serif;
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-feature-settings: "onum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "onum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1
}
@media screen and (min-width:768px) {
  body {
    font-size: 20px;
    line-height: 36px
  }
}
@media screen and (min-width:1280px) {
  body {
    font-size: 28px;
    line-height: 48px
  }
}
p {
  margin: 0 0 16px
}
h1 {
  font-size: 36px;
  line-height: 44px;
  font-family: DSPLC,sans-serif;
  font-weight: 400;
  color: #fff;
  margin: 0
}
@media screen and (min-width:360px) {
  h1 {
    font-size: 44px;
    line-height: 52px
  }
}
@media screen and (min-width:640px) {
  h1 {
    font-size: 64px;
    line-height: 72px
  }
}
@media screen and (min-width:1280px) {
  h1 {
    font-size: 96px;
    line-height: 120px
  }
}
h2 {
  font-size: 36px;
  line-height: 48px;
  font-family: DSPLC,sans-serif;
  font-weight: 400;
  color: #fff;
  margin: 0
}
h3 {
  font-size: 20px;
  line-height: 28px;
  font-family: DSPLC,sans-serif;
  font-weight: 400;
  color: #fff;
  margin: 0
}
@media screen and (min-width:768px) {
  h3 {
    font-size: 24px;
    line-height: 32px
  }
}
img {
  max-width: 100%;
  height: auto!important
}
a {
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: opacity,color,background-color;
  transition-property: opacity,color,background-color;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  color: #fff;
  text-decoration: none
}
a:active {
  opacity: .5
}
.html--desktop a:hover {
  color: #bfb69a
}
a:active {
  opacity: .5
}
a:focus {
  outline: 0
}
.body {
  background-color: #000;
  color: #bfb69a
}
.app {
  padding-top: 56px
}
.app .app__header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0
}
.app .app__matrix {
  margin-bottom: 100px
}
.app .app__about {
  margin-bottom: 100px
}
.app .app__howto {
  margin-bottom: 100px
}
.app .app__index {
  margin-bottom: 100px
}
.app .app__share {
  margin-bottom: 100px
}
.app .app__portfolio {
  margin-bottom: 100px
}
.app .app__credits {
  margin-bottom: 64px
}
@media screen and (min-width:640px) {
  .app .app__credits {
    margin-bottom: 80px
  }
}
@media screen and (min-width:768px) {
  .app .app__matrix {
    margin-bottom: 200px
  }
  .app .app__about {
    margin-bottom: 148px
  }
  .app .app__howto {
    margin-bottom: 148px
  }
  .app .app__index {
    margin-bottom: 148px
  }
  .app .app__share {
    margin-bottom: 148px
  }
  .app .app__portfolio {
    margin-bottom: 148px
  }
}
@media screen and (min-width:1024px) {
  .app .app__credits {
    margin-bottom: 64px
  }
}
@media screen and (min-width:1280px) {
  .app .app__credits {
    margin-bottom: 48px
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
.intro {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 56px;
  padding-bottom: 56px;
  min-height: 60vh
}
@media screen and (min-width:480px) {
  .intro {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .intro {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .intro {
    padding-left: 96px;
    padding-right: 96px
  }
}
.intro .intro__wrapper {
  margin: auto
}
.intro .intro__sup {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em
}
@media screen and (min-width:768px) {
  .intro .intro__sup {
    font-size: 11px
  }
}
.intro .intro__portrait {
  width: 96px;
  height: 96px;
  background-color: rgba(191,182,154,.1);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  line-height: 0;
  overflow: hidden;
  border-radius: 100%;
  background-size: cover
}
.intro .intro__title {
  margin-bottom: 12px
}
.intro .intro__years {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 10px
}
@media screen and (min-width:768px) {
  .intro .intro__years {
    font-size: 11px
  }
}
.intro .intro__lead {
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  margin-left: auto;
  margin-right: auto
}
.intro .intro__lead br {
  display: none
}
.intro .intro__more {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-top: 4px
}
@media screen and (min-width:768px) {
  .intro .intro__more {
    font-size: 11px
  }
}
.intro.intro--index {
  padding-top: 0
}
.intro.intro--index .intro__sup {
  margin-bottom: 20px;
  opacity: 0;
  -webkit-animation: fadeIn 1s ease-out forwards;
  animation: fadeIn 1s ease-out forwards;
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}
.intro.intro--index .intro__title {
  margin-bottom: 24px;
  opacity: 0;
  -webkit-animation: fadeIn 1s ease-out forwards;
  animation: fadeIn 1s ease-out forwards;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  max-width: 360px
}
.intro.intro--index .intro__lead {
  padding-left: 8px;
  padding-right: 8px;
  max-width: 280px;
  opacity: 0;
  -webkit-animation: fadeIn 1s ease-out forwards;
  animation: fadeIn 1s ease-out forwards;
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}
@media screen and (min-width:360px) {
  .intro .intro__title {
    margin-bottom: 12px
  }
}
@media screen and (min-width:640px) {
  .intro .intro__title {
    margin-bottom: 8px
  }
  .intro.intro--index .intro__title {
    max-width: 640px
  }
  .intro.intro--index .intro__lead {
    max-width: 300px
  }
}
@media screen and (min-width:768px) {
  .intro {
    padding-top: 80px;
    padding-bottom: 80px
  }
  .intro .intro__title {
    margin-bottom: 12px
  }
  .intro .intro__years {
    margin-bottom: 16px
  }
  .intro .intro__lead {
    font-size: 17px;
    line-height: 30px;
    max-width: 600px
  }
  .intro .intro__more {
    margin-top: 6px
  }
  .intro.intro--index {
    padding-top: 0
  }
  .intro.intro--index .intro__sup {
    margin-bottom: 12px
  }
  .intro.intro--index .intro__title {
    margin-bottom: 24px
  }
  .intro.intro--index .intro__lead {
    max-width: 400px
  }
}
@media screen and (min-width:1000px) {
  .intro.intro--index .intro__title {
    max-width: 1000px
  }
}
@media screen and (min-width:1280px) {
  .intro .intro__title {
    margin-bottom: 12px
  }
  .intro .intro__years {
    margin-top: 0;
    margin-bottom: 20px
  }
  .intro .intro__lead {
    font-size: 20px;
    line-height: 36px;
    max-width: 900px
  }
  .intro .intro__lead br {
    display: block
  }
  .intro .intro__more {
    margin-top: 8px
  }
  .intro.intro--index {
    padding-top: 80px;
    padding-bottom: 120px
  }
  .intro.intro--index .intro__sup {
    display: none
  }
  .intro.intro--index .intro__title {
    margin-bottom: 32px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    max-width: 100%
  }
  .intro.intro--index .intro__lead {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    max-width: 500px
  }
}
@media screen and (min-width:1480px) {
  .intro {
    padding-top: 128px;
    padding-bottom: 128px;
    min-height: 50vh
  }
  .intro.intro--index {
    padding-top: 128px
  }
}
.links {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}
@media screen and (min-width:768px) {
  .links {
    font-size: 11px
  }
}
.links .links__item {
  margin: 0 20px 0 0;
  padding: 0
}
.credits {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto;
  list-style-type: none
}
@media screen and (min-width:768px) {
  .credits {
    font-size: 11px
  }
}
@media screen and (min-width:480px) {
  .credits {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .credits {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .credits {
    padding-left: 96px;
    padding-right: 96px
  }
}
.credits .credits__item {
  margin-bottom: 12px;
  margin-right: 20px;
  display: inline-block
}
.credits .credits__item:last-child {
  margin-bottom: 0
}
@media screen and (min-width:1000px) {
  .credits {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}
.displace {
  font-family: DSPLC,sans-serif;
  font-weight: 700
}
.index {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto
}
@media screen and (min-width:480px) {
  .index {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .index {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .index {
    padding-left: 96px;
    padding-right: 96px
  }
}
.index .index__title {
  font-size: 36px;
  line-height: 48px;
  font-family: DSPLC,sans-serif;
  font-weight: 400;
  color: #fff;
  margin-bottom: 32px;
  margin-left: -1px
}
@media screen and (min-width:768px) {
  .index .index__title {
    font-size: 48px;
    line-height: 64px
  }
}
@media screen and (min-width:1280px) {
  .index .index__title {
    font-size: 64px;
    line-height: 80px
  }
}
@media screen and (min-width:768px) {
  .index .index__title {
    margin-bottom: 48px;
    margin-left: -2px
  }
}
@media screen and (min-width:1280px) {
  .index .index__title {
    margin-left: -3px
  }
}
.list {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 8px;
  -moz-column-gap: 8px;
  column-gap: 8px;
  overflow: hidden
}
@media screen and (min-width:768px) {
  .list {
    font-size: 11px
  }
}
.list .list__item {
  margin: 0;
  padding: 0
}
.list .list__link {
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 2px;
  white-space: nowrap
}
.list .list__item--active .list__link {
  color: #bfb69a;
  pointer-events: none;
  cursor: text
}
.list .list__full {
  display: none
}
@media screen and (min-width:360px) {
  .list .list__link {
    padding-top: 4px;
    padding-bottom: 4px
  }
}
@media screen and (min-width:480px) {
  .list .list__full {
    display: inline
  }
  .list .list__short {
    display: none
  }
}
@media screen and (min-width:800px) {
  .list {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3
  }
  .list .list__link {
    padding-top: 6px;
    padding-bottom: 6px
  }
}
@media screen and (min-width:1280px) {
  .list {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4
  }
  .list .list__link {
    padding-top: 8px;
    padding-bottom: 8px
  }
}
.share {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto
}
@media screen and (min-width:480px) {
  .share {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .share {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .share {
    padding-left: 96px;
    padding-right: 96px
  }
}
.share .share__wrapper {
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: dense;
  grid-gap: 8px;
  margin: 0;
  padding: 0
}
.share .share__link {
  display: block;
  text-align: center;
  height: 44px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.share .share__item {
  padding: 0;
  margin: 0
}
.share .share__item.share__item--fb .share__link {
  background-color: #06083f;
  background-image: url(../images/share-fb.svg)
}
.share .share__item.share__item--vk .share__link {
  background-color: #031360;
  background-image: url(../images/share-vk.svg)
}
.share .share__item.share__item--tw .share__link {
  background-color: #011d80;
  background-image: url(../images/share-tw.svg)
}
@media screen and (min-width:360px) {
  .share .share__wrapper {
    grid-gap: 12px
  }
}
@media screen and (min-width:640px) {
  .share .share__wrapper {
    max-width: calc(50% - 12px);
    padding-right: 0
  }
}
@media screen and (min-width:800px) {
  .share .share__wrapper {
    max-width: calc(66.6% - 40px)
  }
}
@media screen and (min-width:1000px) {
  .share .share__wrapper {
    max-width: 34%
  }
}
@media screen and (min-width:1280px) {
  .share .share__wrapper {
    max-width: 27%
  }
}
.html--desktop .share .share__item:hover .share__link {
  background-color: #bfb69a;
  color: #fff
}
.about {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto
}
@media screen and (min-width:480px) {
  .about {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .about {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .about {
    padding-left: 96px;
    padding-right: 96px
  }
}
.about .about__lead em {
  font-family: DSPLC,sans-serif;
  font-size: 17px;
  font-style: normal;
  color: #fff;
  padding-right: 1em
}
.about .about__lead span {
  font-weight: 300;
  padding-right: 1em
}
.about .about__lead span a {
  color: #bfb69a;
  -webkit-transition-property: border-color,opacity;
  transition-property: border-color,opacity;
  border-bottom: 1px solid rgba(191,182,154,.2)
}
.about .about__links {
  display: inline-block;
  margin-top: 6px;
  margin-bottom: 36px
}
@media screen and (min-width:768px) {
  .about .about__lead em {
    font-size: 21px
  }
  .about .about__links {
    margin-top: 9px;
    margin-bottom: 64px
  }
}
@media screen and (min-width:1280px) {
  .about {
    display: block
  }
  .about .about__lead em {
    font-size: 29px
  }
  .about .about__links {
    margin-top: 13px;
    margin-bottom: 80px
  }
}
.html--desktop .about .about__lead span a:hover {
  border-bottom: 1px solid rgba(191,182,154,.3)
}
.howto {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}
@media screen and (min-width:480px) {
  .howto {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .howto {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .howto {
    padding-left: 96px;
    padding-right: 96px
  }
}
.howto .howto__step {
  margin-left: auto;
  margin-right: auto;
  margin-top: 36px;
  max-width: 600px
}
.howto .howto__sup {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 4px
}
@media screen and (min-width:768px) {
  .howto .howto__sup {
    font-size: 11px
  }
}
.howto .howto__short {
  margin-bottom: 8px
}
.howto .howto__full {
  font-size: 14px;
  line-height: 24px;
  font-family: MNTSRT,sans-serif
}
@media screen and (min-width:1280px) {
  .howto .howto__full {
    font-size: 16px;
    line-height: 28px
  }
}
@media screen and (min-width:768px) {
  .howto .howto__step {
    margin-top: 48px
  }
}
@media screen and (min-width:1280px) {
  .howto .howto__heading {
    margin-bottom: 48px
  }
  .howto .howto__steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -6px;
    margin-right: -6px
  }
  .howto .howto__step {
    width: 33.3%;
    padding-left: 6px;
    padding-right: 6px;
    margin-top: 0
  }
  .howto .howto__sup {
    margin-bottom: 8px
  }
  .howto .howto__short {
    margin-bottom: 12px
  }
}
.portfolio {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto
}
@media screen and (min-width:480px) {
  .portfolio {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .portfolio {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .portfolio {
    padding-left: 96px;
    padding-right: 96px
  }
}
.portfolio .portfolio__title {
  font-size: 36px;
  line-height: 48px;
  font-family: DSPLC,sans-serif;
  font-weight: 400;
  color: #fff;
  margin-bottom: 8px;
  margin-left: -1px
}
@media screen and (min-width:768px) {
  .portfolio .portfolio__title {
    font-size: 48px;
    line-height: 64px
  }
}
@media screen and (min-width:1280px) {
  .portfolio .portfolio__title {
    font-size: 64px;
    line-height: 80px
  }
}
.portfolio .portfolio__lead {
  font-weight: 300;
  margin-bottom: 6px;
  max-width: 400px
}
.portfolio .portfolio__links {
  margin-bottom: 48px
}
.portfolio .portfolio__item {
  margin-bottom: 48px
}
.portfolio .portfolio__item:last-child {
  margin-bottom: 0
}
@media screen and (min-width:768px) {
  .portfolio .portfolio__title {
    margin-left: -2px;
    margin-bottom: 4px
  }
  .portfolio .portfolio__lead {
    max-width: 550px;
    margin-bottom: 9px
  }
  .portfolio .portfolio__links {
    margin-bottom: 64px
  }
}
@media screen and (min-width:1000px) {
  .portfolio .portfolio__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -6px;
    margin-right: -6px
  }
  .portfolio .portfolio__item {
    margin-top: 0;
    width: 33.3%;
    padding-left: 6px;
    padding-right: 6px
  }
}
@media screen and (min-width:1280px) {
  .portfolio .portfolio__title {
    margin-left: -3px;
    margin-bottom: 0
  }
  .portfolio .portfolio__lead {
    max-width: 700px;
    margin-bottom: 13px
  }
  .portfolio .portfolio__links {
    margin-bottom: 72px
  }
  .portfolio .portfolio__item {
    margin-bottom: 0
  }
}
.teaser {
  display: block
}
.teaser .teaser__img {
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-property: opacity,-webkit-transform;
  transition-property: opacity,-webkit-transform;
  transition-property: opacity,transform;
  transition-property: opacity,transform,-webkit-transform;
  line-height: 0;
  position: relative;
  z-index: 1;
  overflow: hidden
}
.teaser .teaser__img:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  display: block;
  background: -webkit-gradient(linear,left bottom,left top,from(black),color-stop(60%,rgba(0,0,0,0)));
  background: linear-gradient(0deg,#000 0,rgba(0,0,0,0) 60%)
}
.teaser .teaser__img img {
  padding-bottom: 1px;
  width: 100%;
  height: auto
}
.teaser .teaser__title {
  margin-top: -12px;
  margin-bottom: 8px;
  position: relative;
  z-index: 2
}
.teaser .teaser__title br {
  display: none
}
.teaser .teaser__url {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #bfb69a
}
@media screen and (min-width:768px) {
  .teaser .teaser__url {
    font-size: 11px
  }
}
@media screen and (min-width:768px) {
  .teaser .teaser__title {
    margin-top: -20px;
    margin-bottom: 8px
  }
}
@media screen and (min-width:1280px) {
  .teaser .teaser__title br {
    display: block
  }
}
.teaser:active {
  opacity: 1
}
.html--desktop .teaser:hover .teaser__img,
.teaser:active .teaser__img {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  opacity: .75;
  -webkit-transform: scale(.99) translateY(4px);
  transform: scale(.99) translateY(4px)
}
.html--desktop .teaser:hover .teaser__img {
  -webkit-transition-duration: .1s;
  transition-duration: .1s
}
.html--desktop .teaser:active .teaser__img {
  opacity: .5;
  -webkit-transform: scale(.99) translateY(4px);
  transform: scale(.99) translateY(4px)
}
.header {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto;
  background-color: #000;
  position: relative
}
@media screen and (min-width:480px) {
  .header {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .header {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .header {
    padding-left: 96px;
    padding-right: 96px
  }
}
.header:after {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 1px;
  background-color: #bfb69a;
  opacity: .2
}
.header .header__link {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  display: block;
  text-align: center;
  line-height: 56px
}
@media screen and (min-width:768px) {
  .header .header__link {
    font-size: 11px
  }
}
.header .header__extra {
  display: none
}
.html--index .header {
  display: none
}
@media screen and (min-width:480px) {
  .header:after {
    left: 48px;
    right: 48px
  }
}
@media screen and (min-width:640px) {
  .header:after {
    left: 80px;
    right: 80px
  }
}
@media screen and (min-width:768px) {
  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
  .header .header__extra {
    display: block
  }
}
@media screen and (min-width:1280px) {
  .header:after {
    left: 96px;
    right: 96px
  }
  .html--index .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}
.html--desktop .header:after {
  opacity: .25
}
@-webkit-keyframes emerge {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@keyframes emerge {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
.matrix {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1428px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px
}
@media screen and (min-width:480px) {
  .matrix {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:640px) {
  .matrix {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:1280px) {
  .matrix {
    padding-left: 96px;
    padding-right: 96px
  }
}
.matrix .matrix__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  grid-gap: 8px
}
.matrix .matrix__item.matrix__item--hidden {
  display: none
}
.matrix .matrix__item.matrix__item--visible {
  -webkit-animation: emerge .4s ease-out forwards;
  animation: emerge .4s ease-out forwards
}
.matrix .matrix__item:nth-child(5n+1) {
  grid-column: span 2
}
@media screen and (min-width:360px) {
  .matrix .matrix__content {
    grid-gap: 12px
  }
}
@media screen and (min-width:480px) {
  .matrix {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1428px;
    margin-left: auto;
    margin-right: auto
  }
}
@media screen and (min-width:480px) and (min-width:480px) {
  .matrix {
    padding-left: 48px;
    padding-right: 48px
  }
}
@media screen and (min-width:480px) and (min-width:640px) {
  .matrix {
    padding-left: 80px;
    padding-right: 80px
  }
}
@media screen and (min-width:480px) and (min-width:1280px) {
  .matrix {
    padding-left: 96px;
    padding-right: 96px
  }
}
@media screen and (min-width:1000px) {
  .matrix .matrix__content {
    grid-template-columns: 1fr 1fr 1fr
  }
  .matrix .matrix__item:nth-child(5n+1) {
    grid-column: span 1
  }
  .matrix .matrix__item:nth-child(7n+1) {
    grid-column: span 2;
    grid-row: span 2
  }
}
@media screen and (min-width:1280px) {
  .matrix .matrix__content {
    grid-template-columns: 1fr 1fr 1fr 1fr
  }
}
.matrix.matrix--1 .matrix__content {
  display: block;
  max-width: 612px;
  margin-left: auto;
  margin-right: auto
}
.matrix.matrix--2 .matrix__item {
  grid-column: span 2
}
@media screen and (min-width:1000px) {
  .matrix.matrix--2 .matrix__content {
    grid-template-columns: 1fr 1fr
  }
  .matrix.matrix--2 .matrix__item {
    grid-column: span 1
  }
}
@media screen and (min-width:1280px) {
  .matrix.matrix--3 .matrix__content {
    grid-template-columns: 1fr 1fr 1fr
  }
}
.matrix.matrix--4 .matrix__item:nth-child(4) {
  grid-column: span 2
}
@media screen and (min-width:1000px) {
  .matrix.matrix--4 .matrix__content {
    grid-template-columns: 1fr 1fr!important
  }
  .matrix.matrix--4 .matrix__item {
    grid-column: span 1!important;
    grid-row: span 1!important
  }
}
@media screen and (min-width:1000px) {
  .matrix.matrix--6 .matrix__content {
    grid-template-columns: 1fr 1fr 1fr
  }
  .matrix.matrix--6 .matrix__item:nth-child(5) {
    grid-column: span 2;
    grid-row: span 2
  }
}
.book {
  display: block;
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: opacity,-webkit-transform;
  transition-property: opacity,-webkit-transform;
  transition-property: transform,opacity;
  transition-property: transform,opacity,-webkit-transform;
  position: relative;
  text-align: center;
  display: block
}
.book .book__sub,
.book .book__sup {
  -webkit-font-kerning: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-variant-ligatures: common-ligatures contextual;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
  font-size: 10px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 1.88vw;
  line-height: 1.6
}
@media screen and (min-width:768px) {
  .book .book__sub,
  .book .book__sup {
    font-size: 11px
  }
}
.book .book__sup {
  padding-top: 8px
}
.book .book__sub {
  padding-bottom: 8px
}
.book .book__title {
  font-size: 5.5vw;
  line-height: 1.2
}
@media screen and (min-width:414px) {
  .book .book__sup {
    padding-top: 12px
  }
  .book .book__sub {
    padding-bottom: 12px
  }
}
@media screen and (min-width:530px) {
  .book .book__sub,
  .book .book__sup {
    font-size: 10px
  }
  .book .book__sup {
    padding-top: 16px
  }
  .book .book__sub {
    padding-bottom: 16px
  }
  .book .book__title {
    font-size: 4.8vw
  }
}
@media screen and (min-width:768px) {
  .book .book__sub,
  .book .book__sup {
    font-size: 11px
  }
  .book .book__sup {
    padding-top: 24px
  }
  .book .book__sub {
    padding-bottom: 24px
  }
}
@media screen and (min-width:1000px) {
  .book .book__title {
    font-size: 2.8vw
  }
}
@media screen and (min-width:1280px) {
  .book .book__title {
    font-size: 2.4vw
  }
}
@media screen and (min-width:1428px) {
  .book .book__title {
    font-size: 35px
  }
}
.book:after {
  content: "";
  display: block;
  padding-top: 100%
}
.book .book__sup {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  color: #c0a166
}
.book .book__title {
  font-family: DSPLC,sans-serif;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-52%);
  transform: translateY(-52%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 10%;
  padding-right: 10%;
  color: #fff
}
.book .book__sub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  color: #c0a166
}
.html--desktop .book {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all
}
.book:active {
  -webkit-transform: scale(.96);
  transform: scale(.96);
  opacity: .75
}
.html--desktop .book:hover {
  opacity: .9
}
.html--desktop .book:active {
  -webkit-transform: scale(.96);
  transform: scale(.96);
  opacity: .75
}
.matrix__item:nth-child(5n+1) .book .book__sub,
.matrix__item:nth-child(5n+1) .book .book__sup {
  font-size: 10px
}
.matrix__item:nth-child(5n+1) .book .book__sup {
  padding-top: 16px
}
.matrix__item:nth-child(5n+1) .book .book__sub {
  padding-bottom: 16px
}
.matrix__item:nth-child(5n+1) .book .book__title {
  font-size: 11vw
}
@media screen and (min-width:768px) {
  .matrix__item:nth-child(5n+1) .book .book__sub,
  .matrix__item:nth-child(5n+1) .book .book__sup {
    font-size: 11px
  }
  .matrix__item:nth-child(5n+1) .book .book__sup {
    padding-top: 24px
  }
  .matrix__item:nth-child(5n+1) .book .book__sub {
    padding-bottom: 24px
  }
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 10vw
  }
}
@media screen and (min-width:1000px) {
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 7vw
  }
}
@media screen and (min-width:1280px) {
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 5.1vw
  }
}
@media screen and (min-width:1428px) {
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 73px
  }
}
@media screen and (min-width:1000px) {
  .matrix__item:nth-child(5n+1) .book {
    display: block
  }
  .matrix__item:nth-child(5n+1) .book .book__sub,
  .matrix__item:nth-child(5n+1) .book .book__sup {
    -webkit-font-kerning: normal;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-variant-ligatures: common-ligatures contextual;
    font-variant-ligatures: common-ligatures contextual;
    font-variant-numeric: lining-nums;
    -webkit-font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
    font-feature-settings: "lnum" 1,"pnum" 1,"liga" 1,"hlig" 1,"calt" 1,"swsh" 1,"hist" 1,"kern" 1;
    font-size: 10px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 1.88vw;
    line-height: 1.6
  }
}
@media screen and (min-width:1000px) and (min-width:768px) {
  .matrix__item:nth-child(5n+1) .book .book__sub,
  .matrix__item:nth-child(5n+1) .book .book__sup {
    font-size: 11px
  }
}
@media screen and (min-width:1000px) {
  .matrix__item:nth-child(5n+1) .book .book__sup {
    padding-top: 8px
  }
}
@media screen and (min-width:1000px) {
  .matrix__item:nth-child(5n+1) .book .book__sub {
    padding-bottom: 8px
  }
}
@media screen and (min-width:1000px) {
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 5.5vw;
    line-height: 1.2
  }
}
@media screen and (min-width:1000px) and (min-width:414px) {
  .matrix__item:nth-child(5n+1) .book .book__sup {
    padding-top: 12px
  }
  .matrix__item:nth-child(5n+1) .book .book__sub {
    padding-bottom: 12px
  }
}
@media screen and (min-width:1000px) and (min-width:530px) {
  .matrix__item:nth-child(5n+1) .book .book__sub,
  .matrix__item:nth-child(5n+1) .book .book__sup {
    font-size: 10px
  }
  .matrix__item:nth-child(5n+1) .book .book__sup {
    padding-top: 16px
  }
  .matrix__item:nth-child(5n+1) .book .book__sub {
    padding-bottom: 16px
  }
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 4.8vw
  }
}
@media screen and (min-width:1000px) and (min-width:768px) {
  .matrix__item:nth-child(5n+1) .book .book__sub,
  .matrix__item:nth-child(5n+1) .book .book__sup {
    font-size: 11px
  }
  .matrix__item:nth-child(5n+1) .book .book__sup {
    padding-top: 24px
  }
  .matrix__item:nth-child(5n+1) .book .book__sub {
    padding-bottom: 24px
  }
}
@media screen and (min-width:1000px) and (min-width:1000px) {
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 2.8vw
  }
}
@media screen and (min-width:1000px) and (min-width:1280px) {
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 2.4vw
  }
}
@media screen and (min-width:1000px) and (min-width:1428px) {
  .matrix__item:nth-child(5n+1) .book .book__title {
    font-size: 35px
  }
}
@media screen and (min-width:1000px) {
  .matrix__item:nth-child(7n+1) .book .book__sub,
  .matrix__item:nth-child(7n+1) .book .book__sup {
    font-size: 10px
  }
  .matrix__item:nth-child(7n+1) .book .book__sup {
    padding-top: 16px
  }
  .matrix__item:nth-child(7n+1) .book .book__sub {
    padding-bottom: 16px
  }
  .matrix__item:nth-child(7n+1) .book .book__title {
    font-size: 11vw
  }
}
@media screen and (min-width:1000px) and (min-width:768px) {
  .matrix__item:nth-child(7n+1) .book .book__sub,
  .matrix__item:nth-child(7n+1) .book .book__sup {
    font-size: 11px
  }
  .matrix__item:nth-child(7n+1) .book .book__sup {
    padding-top: 24px
  }
  .matrix__item:nth-child(7n+1) .book .book__sub {
    padding-bottom: 24px
  }
  .matrix__item:nth-child(7n+1) .book .book__title {
    font-size: 10vw
  }
}
@media screen and (min-width:1000px) and (min-width:1000px) {
  .matrix__item:nth-child(7n+1) .book .book__title {
    font-size: 7vw
  }
}
@media screen and (min-width:1000px) and (min-width:1280px) {
  .matrix__item:nth-child(7n+1) .book .book__title {
    font-size: 5.1vw
  }
}
@media screen and (min-width:1000px) and (min-width:1428px) {
  .matrix__item:nth-child(7n+1) .book .book__title {
    font-size: 73px
  }
}
.matrix--1 .matrix__item .book .book__title {
  font-size: 9.09vw
}
@media screen and (min-width:768px) {
  .matrix--1 .matrix__item .book .book__title {
    font-size: 70px
  }
}
.matrix--2 .matrix__item .book .book__sub,
.matrix--2 .matrix__item .book .book__sup {
  font-size: 10px
}
.matrix--2 .matrix__item .book .book__sup {
  padding-top: 16px
}
.matrix--2 .matrix__item .book .book__sub {
  padding-bottom: 16px
}
.matrix--2 .matrix__item .book .book__title {
  font-size: 11vw
}
@media screen and (min-width:768px) {
  .matrix--2 .matrix__item .book .book__sub,
  .matrix--2 .matrix__item .book .book__sup {
    font-size: 11px
  }
  .matrix--2 .matrix__item .book .book__sup {
    padding-top: 24px
  }
  .matrix--2 .matrix__item .book .book__sub {
    padding-bottom: 24px
  }
  .matrix--2 .matrix__item .book .book__title {
    font-size: 10vw
  }
}
@media screen and (min-width:1000px) {
  .matrix--2 .matrix__item .book .book__title {
    font-size: 5.1vw
  }
}
@media screen and (min-width:1428px) {
  .matrix--2 .matrix__item .book .book__title {
    font-size: 70px
  }
}
@media screen and (min-width:1280px) {
  .matrix--3 .matrix__item .book .book__title {
    font-size: 3.3vw
  }
}
@media screen and (min-width:1428px) {
  .matrix--3 .matrix__item .book .book__title {
    font-size: 48px
  }
}
@media screen and (min-width:1000px) {
  .matrix--3 .matrix__item:nth-child(1) .book .book__title {
    font-size: 6.5vw
  }
}
@media screen and (min-width:1428px) {
  .matrix--3 .matrix__item:nth-child(1) .book .book__title {
    font-size: 94px
  }
}
.matrix--4 .matrix__item:nth-child(4) .book .book__sub,
.matrix--4 .matrix__item:nth-child(4) .book .book__sup {
  font-size: 10px
}
.matrix--4 .matrix__item:nth-child(4) .book .book__sup {
  padding-top: 16px
}
.matrix--4 .matrix__item:nth-child(4) .book .book__sub {
  padding-bottom: 16px
}
.matrix--4 .matrix__item:nth-child(4) .book .book__title {
  font-size: 11vw
}
@media screen and (min-width:768px) {
  .matrix--4 .matrix__item:nth-child(4) .book .book__sub,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sup {
    font-size: 11px
  }
  .matrix--4 .matrix__item:nth-child(4) .book .book__sup {
    padding-top: 24px
  }
  .matrix--4 .matrix__item:nth-child(4) .book .book__sub {
    padding-bottom: 24px
  }
  .matrix--4 .matrix__item:nth-child(4) .book .book__title {
    font-size: 10vw
  }
}
@media screen and (min-width:1000px) {
  .matrix--4 .matrix__item:nth-child(4) .book .book__title {
    font-size: 7vw
  }
}
@media screen and (min-width:1280px) {
  .matrix--4 .matrix__item:nth-child(4) .book .book__title {
    font-size: 5.1vw
  }
}
@media screen and (min-width:1428px) {
  .matrix--4 .matrix__item:nth-child(4) .book .book__title {
    font-size: 73px
  }
}
@media screen and (min-width:1000px) {
  .matrix--4 .matrix__item .book .book__sub,
  .matrix--4 .matrix__item .book .book__sup,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sub,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sup {
    font-size: 10px
  }
  .matrix--4 .matrix__item .book .book__sup,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sup {
    padding-top: 16px
  }
  .matrix--4 .matrix__item .book .book__sub,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sub {
    padding-bottom: 16px
  }
  .matrix--4 .matrix__item .book .book__title,
  .matrix--4 .matrix__item:nth-child(4) .book .book__title {
    font-size: 11vw
  }
}
@media screen and (min-width:1000px) and (min-width:768px) {
  .matrix--4 .matrix__item .book .book__sub,
  .matrix--4 .matrix__item .book .book__sup,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sub,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sup {
    font-size: 11px
  }
  .matrix--4 .matrix__item .book .book__sup,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sup {
    padding-top: 24px
  }
  .matrix--4 .matrix__item .book .book__sub,
  .matrix--4 .matrix__item:nth-child(4) .book .book__sub {
    padding-bottom: 24px
  }
  .matrix--4 .matrix__item .book .book__title,
  .matrix--4 .matrix__item:nth-child(4) .book .book__title {
    font-size: 10vw
  }
}
@media screen and (min-width:1000px) and (min-width:1000px) {
  .matrix--4 .matrix__item .book .book__title,
  .matrix--4 .matrix__item:nth-child(4) .book .book__title {
    font-size: 5.1vw
  }
}
@media screen and (min-width:1000px) and (min-width:1428px) {
  .matrix--4 .matrix__item .book .book__title,
  .matrix--4 .matrix__item:nth-child(4) .book .book__title {
    font-size: 70px
  }
}
@media screen and (min-width:1280px) {
  .matrix--6 .matrix__item .book .book__title {
    font-size: 3.3vw
  }
}
@media screen and (min-width:1428px) {
  .matrix--6 .matrix__item .book .book__title {
    font-size: 48px
  }
}
@media screen and (min-width:1000px) {
  .matrix--6 .matrix__item:nth-child(1) .book .book__title,
  .matrix--6 .matrix__item:nth-child(5) .book .book__title {
    font-size: 6.5vw
  }
}
@media screen and (min-width:1428px) {
  .matrix--6 .matrix__item:nth-child(1) .book .book__title,
  .matrix--6 .matrix__item:nth-child(5) .book .book__title {
    font-size: 94px
  }
}
.emerge {
  -webkit-transition-duration: .4s;
  transition-duration: .4s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-property: opacity,-webkit-transform;
  transition-property: opacity,-webkit-transform;
  transition-property: opacity,transform;
  transition-property: opacity,transform,-webkit-transform;
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px)
}
.emerge.emerge--matrix {
  -webkit-transition-delay: .2s;
  transition-delay: .2s
}
.emerge.emerge--visible {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.html--index .emerge.emerge--matrix {
  -webkit-transition-delay: .3s;
  transition-delay: .3s
}
@media screen and (min-width:1280px) {
  .emerge.emerge--1 {
    -webkit-transition-delay: 0s;
    transition-delay: 0s
  }
  .emerge.emerge--2 {
    -webkit-transition-delay: .1s;
    transition-delay: .1s
  }
  .emerge.emerge--3 {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
  }
  .html--index .emerge.emerge--matrix {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
  }
}
.more {
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: opacity,color,background-color;
  transition-property: opacity,color,background-color;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  transition-duration: .1s;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: opacity,background-color,-webkit-transform;
  transition-property: opacity,background-color,-webkit-transform;
  transition-property: transform,opacity,background-color;
  transition-property: transform,opacity,background-color,-webkit-transform;
  position: relative;
  border-radius: 100%;
  cursor: pointer;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.more:active {
  opacity: .5
}
.html--desktop .more:hover {
  color: #bfb69a
}
.more:after {
  content: "";
  display: block;
  padding-top: 100%
}
.more .more__label {
  font-family: DSPLC,sans-serif;
  font-size: 5.5vw;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center
}
.more:active {
  -webkit-transform: scale(.96);
  transform: scale(.96);
  opacity: .75
}
.html--desktop .more:hover {
  opacity: .9
}
.html--desktop .more:active {
  -webkit-transform: scale(.96);
  transform: scale(.96);
  opacity: .75
}
@media screen and (min-width:530px) {
  .more .more__label {
    font-size: 4.8vw
  }
}
@media screen and (min-width:1000px) {
  .more .more__label {
    font-size: 2.8vw
  }
}
@media screen and (min-width:1280px) {
  .more .more__label {
    font-size: 2.2vw
  }
}
@media screen and (min-width:1428px) {
  .more .more__label {
    font-size: 32px
  }
}