:root {

    --grid-columns: 7;

    --grid-gutter: 1rem;

    --grid-gutter-half: calc(0.5 * var(--grid-gutter));

    --grid-margin: 1.25rem;

    --container-width: calc(calc(100 * var(--vw, 1vw)) - 2 * var(--grid-margin));

    --font-size-h1: clamp(70px, 0.0857142857 * calc(100 * var(--vw, 1vw)), 120px);

    --font-size-h2: clamp(30px, 0.0357142857 * calc(100 * var(--vw, 1vw)), 50px);

    --font-size-h3: 2.5rem;

    --font-size-body: 1.0625rem;

    --font-size-small: 0.75rem;

    --font-size-medium: 1.25rem

}



@media(max-width: 699px) {

    :root {

        --font-size-huge: 35vw

    }

}



@media(min-width: 700px) {

    :root {

        --grid-columns: 14;

        --grid-gutter: 1.25rem;

        --grid-margin: 1.25rem;

        --font-size-huge: 25vw

    }

}



/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {

    line-height: 1.15;

    -webkit-text-size-adjust: 100%

}



body {

    margin: 0

}



main {

    display: block

}



h1 {

    font-size: 2em;

    margin: .67em 0

}



hr {

    box-sizing: content-box;

    height: 0;

    overflow: visible

}



pre {

    font-family: monospace, monospace;

    font-size: 1em

}



a {

    background-color: transparent

}



abbr[title] {

    border-bottom: none;

    text-decoration: underline;

    -webkit-text-decoration: underline dotted;

    text-decoration: underline dotted

}



b,

strong {

    font-weight: bolder

}



code,

kbd,

samp {

    font-family: monospace, monospace;

    font-size: 1em

}



small {

    font-size: 80%

}



sub,

sup {

    font-size: 75%;

    line-height: 0;

    position: relative;

    vertical-align: baseline

}



sub {

    bottom: -0.25em

}



sup {

    top: -0.5em

}



img {

    border-style: none

}



button,

input,

optgroup,

select,

textarea {

    font-family: inherit;

    font-size: 100%;

    line-height: 1.15;

    margin: 0

}



button,

input {

    overflow: visible

}



button,

select {

    text-transform: none

}



button,

[type=button],

[type=reset],

[type=submit] {

    -webkit-appearance: button

}



button::-moz-focus-inner,

[type=button]::-moz-focus-inner,

[type=reset]::-moz-focus-inner,

[type=submit]::-moz-focus-inner {

    border-style: none;

    padding: 0

}



button:-moz-focusring,

[type=button]:-moz-focusring,

[type=reset]:-moz-focusring,

[type=submit]:-moz-focusring {

    outline: 1px dotted ButtonText

}



fieldset {

    padding: .35em .75em .625em

}



legend {

    box-sizing: border-box;

    color: inherit;

    display: table;

    max-width: 100%;

    padding: 0;

    white-space: normal

}



progress {

    vertical-align: baseline

}



textarea {

    overflow: auto

}



[type=checkbox],

[type=radio] {

    box-sizing: border-box;

    padding: 0

}



[type=number]::-webkit-inner-spin-button,

[type=number]::-webkit-outer-spin-button {

    height: auto

}



[type=search] {

    -webkit-appearance: textfield;

    outline-offset: -2px

}



[type=search]::-webkit-search-decoration {

    -webkit-appearance: none

}



::-webkit-file-upload-button {

    -webkit-appearance: button;

    font: inherit

}



details {

    display: block

}



summary {

    display: list-item

}



template {

    display: none

}



[hidden] {

    display: none

}



html {

    box-sizing: border-box

}



template,

[hidden] {

    display: none

}



*,

:before,

:after {

    box-sizing: inherit

}



address {

    font-style: inherit

}



dfn,

cite,

em,

i {

    font-style: italic

}



b,

strong {

    font-weight: 700

}



a {

    text-decoration: none

}



a svg {

    pointer-events: none

}



ul,

ol {

    margin: 0;

    padding: 0;

    list-style: none

}



p,

figure {

    margin: 0;

    padding: 0

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin: 0

}



a,

area,

button,

input,

label,

select,

textarea,

[tabindex] {

    touch-action: manipulation

}



[hreflang]>abbr[title] {

    text-decoration: none

}



table {

    border-spacing: 0;

    border-collapse: collapse

}



hr {

    display: block;

    margin: 1em 0;

    padding: 0;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc

}



audio,

canvas,

iframe,

img,

svg,

video {

    vertical-align: middle

}



audio:not([controls]) {

    display: none;

    height: 0

}



img,

svg {

    max-width: 100%;

    height: auto

}



img[width],

img[height],

svg[width],

svg[height] {

    max-width: none

}



img {

    font-style: italic

}



svg {

    fill: currentColor

}



input,

select,

textarea {

    display: block;

    margin: 0;

    padding: 0;

    width: 100%;

    outline: 0;

    border: 0;

    border-radius: 0;

    background: none rgba(0, 0, 0, 0);

    color: inherit;

    font: inherit;

    line-height: normal;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none

}



select {

    text-transform: none

}



select::-ms-expand {

    display: none

}



select::-ms-value {

    background: none;

    color: inherit

}



textarea {

    overflow: auto;

    resize: vertical

}



button,

.c-button {

    display: inline-block;

    overflow: visible;

    margin: 0;

    padding: 0;

    outline: 0;

    border: 0;

    background: none rgba(0, 0, 0, 0);

    color: inherit;

    vertical-align: middle;

    text-align: center;

    text-decoration: none;

    text-transform: none;

    font: inherit;

    line-height: normal;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none

}



button:focus,

button:hover,

.c-button:focus,

.c-button:hover {

    text-decoration: none

}



*,

*:after,

*:before {

    position: relative;

    outline: none

}



@font-face {

    font-display: swap;

    font-family: "DIN Engschrift";

    src: url("../fonts/DINEngschrift.woff2") format("woff2"), url("../fonts/DINEngschrift.woff") format("woff");

    font-weight: normal;

    font-style: normal

}



@font-face {

    font-display: swap;

    font-family: "Suisse Intl";

    src: url("../fonts/SuisseIntl-Regular.woff2") format("woff2"), url("../fonts/SuisseIntl-Regular.woff") format("woff");

    font-weight: normal;

    font-style: normal

}



@font-face {

    font-display: swap;

    font-family: "NB International";

    src: url("../fonts/NBInternationalPro-Mono.woff2") format("woff2"), url("../fonts/NBInternationalPro-Mono.woff") format("woff");

    font-weight: normal;

    font-style: normal

}



html {

    --theme-color-text: #000000;

   

    --theme-color-difference: #ECE7DA;

    min-height: 100%;

    line-height: 1.22;

    font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

    color: var(--theme-color-text);

    background-color: var(--theme-color-bg);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale

}



@media(max-width: 699px) {

    html {

        font-size: 14px

    }

}



@media(min-width: 700px)and (max-width: 999px) {

    html {

        font-size: 14px

    }

}



@media(min-width: 1000px)and (max-width: 1199px) {

    html {

        font-size: 15px

    }

}



@media(min-width: 1200px)and (max-width: 1599px) {

    html {

        font-size: 16px

    }

}



@media(min-width: 1600px)and (max-width: 1999px) {

    html {

        font-size: 17px

    }

}



@media(min-width: 2000px)and (max-width: 2399px) {

    html {

        font-size: 18px

    }

}



@media(min-width: 2400px) {

    html {

        font-size: 20px

    }

}



html.is-loading {

    cursor: wait

}



html.has-scroll-smooth {

    overflow: hidden;

    position: fixed;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%

}



html.has-scroll-dragging {

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none

}



html[data-template=project-listing] {

    --theme-color-text: #ECE7DA;

    --theme-color-bg: #000000

}



.has-scroll-smooth body {

    overflow: hidden

}



@media(min-width: 1000px) {

    .o-main {

        z-index: 2

    }

}



::-moz-selection {

    background-color: #000;

    color: #fff;

    text-shadow: none

}



::selection {

    background-color: #000;

    color: #fff;

    text-shadow: none

}



a {

    color: inherit

}



*:focus:not(:focus-visible) {

    outline: none

}



*:focus-visible:not(input):not(textarea) {

    outline-color: var(--focus-visible-color, currentColor);

    outline-width: var(--focus-visible-width, 2px);

    outline-offset: var(--focus-visible-offset, 2px);

    outline-style: solid

}



.c-heading,

.o-wysiwyg h3,

.o-wysiwyg h2,

.o-wysiwyg h1 {

    font-family: "DIN Engschrift", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

    font-weight: 400;

    text-transform: uppercase

}



.c-heading.-huge,

.o-wysiwyg h3.-huge,

.o-wysiwyg h2.-huge,

.o-wysiwyg h1.-huge {

    font-size: var(--font-size-huge);

    line-height: 1.3

}



.c-heading.-h1,

.o-wysiwyg h3.-h1,

.o-wysiwyg h2.-h1,

.o-wysiwyg h1 {

    font-size: var(--font-size-h1);

    line-height: 1

}



.c-heading.-h2,

.o-wysiwyg h3.-h2,

.o-wysiwyg h2,

.o-wysiwyg h1.-h2 {

    font-family: "NB International", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

    font-size: var(--font-size-h2);

    line-height: 1.2;

    letter-spacing: -0.03em

}



.c-heading.-h3,

.o-wysiwyg h3,

.o-wysiwyg h2.-h3,

.o-wysiwyg h1.-h3 {

    font-size: var(--font-size-h3);

    line-height: normal

}



.o-text,

.o-text-mono,

.o-text-small {

    line-height: normal;

    font-weight: 400

}



.o-text,

.o-text-mono {

    font-size: var(--font-size-body)

}



.o-text-small {

    font-size: var(--font-size-small)

}



.o-text-mono,

.o-text-small {

    font-family: "NB International", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

    text-transform: uppercase

}



.o-text-mono {

    letter-spacing: -0.03em

}



.o-link {

    --link-underline-height: 1px

}



.o-link.-inline {

    display: inline;

    width: 100%;

    line-height: inherit;

    background-image: linear-gradient(180deg, transparent calc(100% - var(--link-underline-height)), currentColor 0);

    background-repeat: no-repeat;

    background-size: 0 calc(100% - var(--link-underline-height));

    transition: background-size .5s cubic-bezier(0.38, 0.005, 0.215, 1)

}



.o-link.-inline.c-heading,

.o-wysiwyg h3.o-link.-inline,

.o-wysiwyg h2.o-link.-inline,

.o-wysiwyg h1.o-link.-inline,

.c-heading .o-link.-inline,

.o-wysiwyg h3 .o-link.-inline,

.o-wysiwyg h2 .o-link.-inline,

.o-wysiwyg h1 .o-link.-inline {

    background-image: linear-gradient(180deg, transparent calc(100% - var(--link-underline-height) - 1px), currentColor 0)

}



.o-link:not(.-inline) {

    display: inline-block

}



.o-link:not(.-inline):after {

    content: "";

    position: absolute;

    bottom: 1px;

    left: 0;

    display: block;

    width: 100%;

    height: var(--link-underline-height);

    background-color: currentColor;

    transform: scale(0, 1);

    transform-origin: 100% 50%;

    transition: transform .5s cubic-bezier(0.38, 0.005, 0.215, 1)

}



.o-link.-inline:hover {

    background-size: 100% calc(100% - var(--link-underline-height))

}



.o-link:not(.-inline):hover:after {

    transform: scale(1);

    transform-origin: 0 50%

}



.o-wysiwyg>:first-child {

    margin-top: 0 !important

}



.o-wysiwyg>:last-child {

    margin-bottom: 0 !important

}



.o-wysiwyg h1:not(:first-child),

.o-wysiwyg h2:not(:first-child),

.o-wysiwyg h3:not(:first-child),

.o-wysiwyg h4:not(:first-child),

.o-wysiwyg h5:not(:first-child),

.o-wysiwyg h6:not(:first-child),

.o-wysiwyg video:not(:first-child),

.o-wysiwyg figure:not(:first-child) {

    margin-top: 2.44em

}



.o-wysiwyg h1 {

    margin-bottom: .5em

}



.o-wysiwyg h2 {

    margin-bottom: .5em

}



.o-wysiwyg h3 {

    margin-bottom: .5em

}



.o-wysiwyg p,

.o-wysiwyg ul,

.o-wysiwyg ol {

    line-height: 1.35

}



.o-wysiwyg p:not(:last-child),

.o-wysiwyg ul:not(:last-child),

.o-wysiwyg ol:not(:last-child) {

    margin-bottom: 2.44em

}



.o-wysiwyg ul ul,

.o-wysiwyg ul ol,

.o-wysiwyg ol ol,

.o-wysiwyg ol ul {

    margin-left: 2em

}



.o-wysiwyg li {

    padding-left: 1.5em

}



.o-wysiwyg li:before {

    content: "";

    position: absolute;

    left: 0

}



.o-wysiwyg ul li:before {

    top: .5em;

    display: block;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background-color: currentColor

}



.o-wysiwyg ol {

    counter-reset: counter

}



.o-wysiwyg ol li {

    counter-increment: counter

}



.o-wysiwyg ol li:before {

    content: counter(counter) ". ";

    top: 0

}



@keyframes plyr-progress {

    to {

        background-position: var(--plyr-progress-loading-size, 25px) 0

    }

}



@keyframes plyr-popup {

    0% {

        opacity: .5;

        transform: translateY(10px)

    }



    to {

        opacity: 1;

        transform: translateY(0)

    }

}



@keyframes plyr-fade-in {

    from {

        opacity: 0

    }



    to {

        opacity: 1

    }

}



.plyr {

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    align-items: center;

    direction: ltr;

    display: flex;

    flex-direction: column;

    font-family: var(--plyr-font-family, inherit);

    font-variant-numeric: tabular-nums;

    font-weight: var(--plyr-font-weight-regular, 400);

    line-height: var(--plyr-line-height, 1.7);

    max-width: 100%;

    min-width: 200px;

    position: relative;

    text-shadow: none;

    transition: box-shadow .3s ease;

    z-index: 0

}



.plyr video,

.plyr audio,

.plyr iframe {

    display: block;

    height: 100%;

    width: 100%

}



.plyr button {

    font: inherit;

    line-height: inherit;

    width: auto

}



.plyr:focus {

    outline: 0

}



.plyr--full-ui {

    box-sizing: border-box

}



.plyr--full-ui *,

.plyr--full-ui *::after,

.plyr--full-ui *::before {

    box-sizing: inherit

}



.plyr--full-ui a,

.plyr--full-ui button,

.plyr--full-ui input,

.plyr--full-ui label {

    touch-action: manipulation

}



.plyr__badge {

    background: var(--plyr-badge-background, hsl(216, 15%, 34%));

    border-radius: var(--plyr-badge-border-radius, 2px);

    color: var(--plyr-badge-text-color, #fff);

    font-size: var(--plyr-font-size-badge, 9px);

    line-height: 1;

    padding: 3px 4px

}



.plyr--full-ui ::-webkit-media-text-track-container {

    display: none

}



.plyr__captions {

    animation: plyr-fade-in .3s ease;

    bottom: 0;

    display: none;

    font-size: var(--plyr-font-size-small, 13px);

    left: 0;

    padding: var(--plyr-control-spacing, 10px);

    position: absolute;

    text-align: center;

    transition: transform .4s ease-in-out;

    width: 100%

}



.plyr__captions span:empty {

    display: none

}



@media(min-width: 480px) {

    .plyr__captions {

        font-size: var(--plyr-font-size-base, 15px);

        padding: calc(var(--plyr-control-spacing, 10px)*2)

    }

}



@media(min-width: 768px) {

    .plyr__captions {

        font-size: var(--plyr-font-size-large, 18px)

    }

}



.plyr--captions-active .plyr__captions {

    display: block

}



.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions {

    transform: translateY(calc(var(--plyr-control-spacing, 10px) * -4))

}



.plyr__caption {

    background: var(--plyr-captions-background, rgba(0, 0, 0, 0.8));

    border-radius: 2px;

    -webkit-box-decoration-break: clone;

    box-decoration-break: clone;

    color: var(--plyr-captions-text-color, #fff);

    line-height: 185%;

    padding: .2em .5em;

    white-space: pre-wrap

}



.plyr__caption div {

    display: inline

}



.plyr__control {

    background: rgba(0, 0, 0, 0);

    border: 0;

    border-radius: var(--plyr-control-radius, 4px);

    color: inherit;

    cursor: pointer;

    flex-shrink: 0;

    overflow: visible;

    padding: calc(var(--plyr-control-spacing, 10px)*.7);

    position: relative;

    transition: all .3s ease

}



.plyr__control svg {

    display: block;

    fill: currentColor;

    height: var(--plyr-control-icon-size, 18px);

    pointer-events: none;

    width: var(--plyr-control-icon-size, 18px)

}



.plyr__control:focus {

    outline: 0

}



.plyr__control:focus-visible {

    outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));

    outline-offset: 2px

}



a.plyr__control {

    text-decoration: none

}



a.plyr__control::after,

a.plyr__control::before {

    display: none

}



.plyr__control:not(.plyr__control--pressed) .icon--pressed,

.plyr__control.plyr__control--pressed .icon--not-pressed,

.plyr__control:not(.plyr__control--pressed) .label--pressed,

.plyr__control.plyr__control--pressed .label--not-pressed {

    display: none

}



.plyr--full-ui ::-webkit-media-controls {

    display: none

}



.plyr__controls {

    align-items: center;

    display: flex;

    justify-content: flex-end;

    text-align: center

}



.plyr__controls .plyr__progress__container {

    flex: 1;

    min-width: 0

}



.plyr__controls .plyr__controls__item {

    margin-left: calc(var(--plyr-control-spacing, 10px)/4)

}



.plyr__controls .plyr__controls__item:first-child {

    margin-left: 0;

    margin-right: auto

}



.plyr__controls .plyr__controls__item.plyr__progress__container {

    padding-left: calc(var(--plyr-control-spacing, 10px)/4)

}



.plyr__controls .plyr__controls__item.plyr__time {

    padding: 0 calc(var(--plyr-control-spacing, 10px)/2)

}



.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,

.plyr__controls .plyr__controls__item.plyr__time:first-child,

.plyr__controls .plyr__controls__item.plyr__time+.plyr__time {

    padding-left: 0

}



.plyr__controls:empty {

    display: none

}



.plyr [data-plyr=captions],

.plyr [data-plyr=pip],

.plyr [data-plyr=airplay],

.plyr [data-plyr=fullscreen] {

    display: none

}



.plyr--captions-enabled [data-plyr=captions],

.plyr--pip-supported [data-plyr=pip],

.plyr--airplay-supported [data-plyr=airplay],

.plyr--fullscreen-enabled [data-plyr=fullscreen] {

    display: inline-block

}



.plyr__menu {

    display: flex;

    position: relative

}



.plyr__menu .plyr__control svg {

    transition: transform .3s ease

}



.plyr__menu .plyr__control[aria-expanded=true] svg {

    transform: rotate(90deg)

}



.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {

    display: none

}



.plyr__menu__container {

    animation: plyr-popup .2s ease;

    background: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));

    border-radius: var(--plyr-menu-radius, 8px);

    bottom: 100%;

    box-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));

    color: var(--plyr-menu-color, hsl(216, 15%, 34%));

    font-size: var(--plyr-font-size-base, 15px);

    margin-bottom: 10px;

    position: absolute;

    right: -3px;

    text-align: left;

    white-space: nowrap;

    z-index: 3

}



.plyr__menu__container>div {

    overflow: hidden;

    transition: height .35s cubic-bezier(0.4, 0, 0.2, 1), width .35s cubic-bezier(0.4, 0, 0.2, 1)

}



.plyr__menu__container::after {

    border: var(--plyr-menu-arrow-size, 4px) solid rgba(0, 0, 0, 0);

    border-top-color: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));

    content: "";

    height: 0;

    position: absolute;

    right: calc(var(--plyr-control-icon-size, 18px)/2 + calc(var(--plyr-control-spacing, 10px) * 0.7) - var(--plyr-menu-arrow-size, 4px)/2);

    top: 100%;

    width: 0

}



.plyr__menu__container [role=menu] {

    padding: calc(var(--plyr-control-spacing, 10px)*.7)

}



.plyr__menu__container [role=menuitem],

.plyr__menu__container [role=menuitemradio] {

    margin-top: 2px

}



.plyr__menu__container [role=menuitem]:first-child,

.plyr__menu__container [role=menuitemradio]:first-child {

    margin-top: 0

}



.plyr__menu__container .plyr__control {

    align-items: center;

    color: var(--plyr-menu-color, hsl(216, 15%, 34%));

    display: flex;

    font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px));

    padding: calc(calc(var(--plyr-control-spacing, 10px) * 0.7)/1.5) calc(calc(var(--plyr-control-spacing, 10px) * 0.7)*1.5);

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;

    width: 100%

}



.plyr__menu__container .plyr__control>span {

    align-items: inherit;

    display: flex;

    width: 100%

}



.plyr__menu__container .plyr__control::after {

    border: var(--plyr-menu-item-arrow-size, 4px) solid rgba(0, 0, 0, 0);

    content: "";

    position: absolute;

    top: 50%;

    transform: translateY(-50%)

}



.plyr__menu__container .plyr__control--forward {

    padding-right: calc(calc(var(--plyr-control-spacing, 10px) * 0.7)*4)

}



.plyr__menu__container .plyr__control--forward::after {

    border-left-color: var(--plyr-menu-arrow-color, hsl(216, 15%, 52%));

    right: calc(calc(var(--plyr-control-spacing, 10px) * 0.7)*1.5 - var(--plyr-menu-item-arrow-size, 4px))

}



.plyr__menu__container .plyr__control--forward:focus-visible::after,

.plyr__menu__container .plyr__control--forward:hover::after {

    border-left-color: currentColor

}



.plyr__menu__container .plyr__control--back {

    font-weight: var(--plyr-font-weight-regular, 400);

    margin: calc(var(--plyr-control-spacing, 10px)*.7);

    margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) * 0.7)/2);

    padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7)*4);

    position: relative;

    width: calc(100% - calc(var(--plyr-control-spacing, 10px) * 0.7)*2)

}



.plyr__menu__container .plyr__control--back::after {

    border-right-color: var(--plyr-menu-arrow-color, hsl(216, 15%, 52%));

    left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7)*1.5 - var(--plyr-menu-item-arrow-size, 4px))

}



.plyr__menu__container .plyr__control--back::before {

    background: var(--plyr-menu-back-border-color, hsl(216, 15%, 88%));

    box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff);

    content: "";

    height: 1px;

    left: 0;

    margin-top: calc(calc(var(--plyr-control-spacing, 10px) * 0.7)/2);

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 100%

}



.plyr__menu__container .plyr__control--back:focus-visible::after,

.plyr__menu__container .plyr__control--back:hover::after {

    border-right-color: currentColor

}



.plyr__menu__container .plyr__control[role=menuitemradio] {

    padding-left: calc(var(--plyr-control-spacing, 10px)*.7)

}



.plyr__menu__container .plyr__control[role=menuitemradio]::before,

.plyr__menu__container .plyr__control[role=menuitemradio]::after {

    border-radius: 100%

}



.plyr__menu__container .plyr__control[role=menuitemradio]::before {

    background: rgba(0, 0, 0, .1);

    content: "";

    display: block;

    flex-shrink: 0;

    height: 16px;

    margin-right: var(--plyr-control-spacing, 10px);

    transition: all .3s ease;

    width: 16px

}



.plyr__menu__container .plyr__control[role=menuitemradio]::after {

    background: #fff;

    border: 0;

    height: 6px;

    left: 12px;

    opacity: 0;

    top: 50%;

    transform: translateY(-50%) scale(0);

    transition: transform .3s ease, opacity .3s ease;

    width: 6px

}



.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {

    background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))))

}



.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {

    opacity: 1;

    transform: translateY(-50%) scale(1)

}



.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible::before,

.plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {

    background: rgba(35, 40, 47, .1)

}



.plyr__menu__container .plyr__menu__value {

    align-items: center;

    display: flex;

    margin-left: auto;

    margin-right: calc((calc(var(--plyr-control-spacing, 10px) * 0.7) - 2px)*-1);

    overflow: hidden;

    padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7)*3.5);

    pointer-events: none

}



.plyr--full-ui input[type=range] {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background: rgba(0, 0, 0, 0);

    border: 0;

    border-radius: calc(var(--plyr-range-thumb-height, 13px)*2);

    color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));

    display: block;

    height: calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));

    margin: 0;

    min-width: 0;

    padding: 0;

    transition: box-shadow .3s ease;

    width: 100%

}



.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {

    background: rgba(0, 0, 0, 0);

    border: 0;

    border-radius: calc(var(--plyr-range-track-height, 5px)/2);

    height: var(--plyr-range-track-height, 5px);

    -webkit-transition: box-shadow .3s ease;

    transition: box-shadow .3s ease;

    -webkit-user-select: none;

    user-select: none;

    background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%))

}



.plyr--full-ui input[type=range]::-webkit-slider-thumb {

    background: var(--plyr-range-thumb-background, #fff);

    border: 0;

    border-radius: 100%;

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));

    height: var(--plyr-range-thumb-height, 13px);

    position: relative;

    -webkit-transition: all .2s ease;

    transition: all .2s ease;

    width: var(--plyr-range-thumb-height, 13px);

    -webkit-appearance: none;

    appearance: none;

    margin-top: calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1)

}



.plyr--full-ui input[type=range]::-moz-range-track {

    background: rgba(0, 0, 0, 0);

    border: 0;

    border-radius: calc(var(--plyr-range-track-height, 5px)/2);

    height: var(--plyr-range-track-height, 5px);

    -moz-transition: box-shadow .3s ease;

    transition: box-shadow .3s ease;

    -moz-user-select: none;

    user-select: none

}



.plyr--full-ui input[type=range]::-moz-range-thumb {

    background: var(--plyr-range-thumb-background, #fff);

    border: 0;

    border-radius: 100%;

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));

    height: var(--plyr-range-thumb-height, 13px);

    position: relative;

    -moz-transition: all .2s ease;

    transition: all .2s ease;

    width: var(--plyr-range-thumb-height, 13px)

}



.plyr--full-ui input[type=range]::-moz-range-progress {

    background: currentColor;

    border-radius: calc(var(--plyr-range-track-height, 5px)/2);

    height: var(--plyr-range-track-height, 5px)

}



.plyr--full-ui input[type=range]::-ms-track {

    background: rgba(0, 0, 0, 0);

    border: 0;

    border-radius: calc(var(--plyr-range-track-height, 5px)/2);

    height: var(--plyr-range-track-height, 5px);

    -ms-transition: box-shadow .3s ease;

    transition: box-shadow .3s ease;

    user-select: none;

    color: rgba(0, 0, 0, 0)

}



.plyr--full-ui input[type=range]::-ms-fill-upper {

    background: rgba(0, 0, 0, 0);

    border: 0;

    border-radius: calc(var(--plyr-range-track-height, 5px)/2);

    height: var(--plyr-range-track-height, 5px);

    -ms-transition: box-shadow .3s ease;

    transition: box-shadow .3s ease;

    user-select: none

}



.plyr--full-ui input[type=range]::-ms-fill-lower {

    background: rgba(0, 0, 0, 0);

    border: 0;

    border-radius: calc(var(--plyr-range-track-height, 5px)/2);

    height: var(--plyr-range-track-height, 5px);

    -ms-transition: box-shadow .3s ease;

    transition: box-shadow .3s ease;

    user-select: none;

    background: currentColor

}



.plyr--full-ui input[type=range]::-ms-thumb {

    background: var(--plyr-range-thumb-background, #fff);

    border: 0;

    border-radius: 100%;

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));

    height: var(--plyr-range-thumb-height, 13px);

    position: relative;

    -ms-transition: all .2s ease;

    transition: all .2s ease;

    width: var(--plyr-range-thumb-height, 13px);

    margin-top: 0

}



.plyr--full-ui input[type=range]::-ms-tooltip {

    display: none

}



.plyr--full-ui input[type=range]::-moz-focus-outer {

    border: 0

}



.plyr--full-ui input[type=range]:focus {

    outline: 0

}



.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track {

    outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));

    outline-offset: 2px

}



.plyr--full-ui input[type=range]:focus-visible::-moz-range-track {

    outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));

    outline-offset: 2px

}



.plyr--full-ui input[type=range]:focus-visible::-ms-track {

    outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));

    outline-offset: 2px

}



.plyr__poster {

    background-color: var(--plyr-video-background, var(--plyr-video-background, rgb(0, 0, 0)));

    background-position: 50% 50%;

    background-repeat: no-repeat;

    background-size: contain;

    height: 100%;

    left: 0;

    opacity: 0;

    position: absolute;

    top: 0;

    transition: opacity .2s ease;

    width: 100%;

    z-index: 1

}



.plyr--stopped.plyr__poster-enabled .plyr__poster {

    opacity: 1

}



.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {

    display: none

}



.plyr__time {

    font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px))

}



.plyr__time+.plyr__time::before {

    content: "⁄";

    margin-right: var(--plyr-control-spacing, 10px)

}



@media(max-width: 767px) {

    .plyr__time+.plyr__time {

        display: none

    }

}



.plyr__tooltip {

    background: var(--plyr-tooltip-background, #fff);

    border-radius: var(--plyr-tooltip-radius, 5px);

    bottom: 100%;

    box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));

    color: var(--plyr-tooltip-color, hsl(216, 15%, 34%));

    font-size: var(--plyr-font-size-small, 13px);

    font-weight: var(--plyr-font-weight-regular, 400);

    left: 50%;

    line-height: 1.3;

    margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) / 2)*2);

    opacity: 0;

    padding: calc(var(--plyr-control-spacing, 10px)/2) calc(calc(var(--plyr-control-spacing, 10px) / 2)*1.5);

    pointer-events: none;

    position: absolute;

    transform: translate(-50%, 10px) scale(0.8);

    transform-origin: 50% 100%;

    transition: transform .2s .1s ease, opacity .2s .1s ease;

    white-space: nowrap;

    z-index: 2

}



.plyr__tooltip::before {

    border-left: var(--plyr-tooltip-arrow-size, 4px) solid rgba(0, 0, 0, 0);

    border-right: var(--plyr-tooltip-arrow-size, 4px) solid rgba(0, 0, 0, 0);

    border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff);

    bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1);

    content: "";

    height: 0;

    left: 50%;

    position: absolute;

    transform: translateX(-50%);

    width: 0;

    z-index: 2

}



.plyr .plyr__control:hover .plyr__tooltip,

.plyr .plyr__control:focus-visible .plyr__tooltip,

.plyr__tooltip--visible {

    opacity: 1;

    transform: translate(-50%, 0) scale(1)

}



.plyr .plyr__control:hover .plyr__tooltip {

    z-index: 3

}



.plyr__controls>.plyr__control:first-child .plyr__tooltip,

.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip {

    left: 0;

    transform: translate(0, 10px) scale(0.8);

    transform-origin: 0 100%

}



.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,

.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before {

    left: calc(var(--plyr-control-icon-size, 18px)/2 + calc(var(--plyr-control-spacing, 10px) * 0.7))

}



.plyr__controls>.plyr__control:last-child .plyr__tooltip {

    left: auto;

    right: 0;

    transform: translate(0, 10px) scale(0.8);

    transform-origin: 100% 100%

}



.plyr__controls>.plyr__control:last-child .plyr__tooltip::before {

    left: auto;

    right: calc(var(--plyr-control-icon-size, 18px)/2 + calc(var(--plyr-control-spacing, 10px) * 0.7));

    transform: translateX(50%)

}



.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,

.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,

.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,

.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,

.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,

.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,

.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip,

.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,

.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible {

    transform: translate(0, 0) scale(1)

}



.plyr__progress {

    left: calc(var(--plyr-range-thumb-height, 13px)*.5);

    margin-right: var(--plyr-range-thumb-height, 13px);

    position: relative

}



.plyr__progress input[type=range],

.plyr__progress__buffer {

    margin-left: calc(var(--plyr-range-thumb-height, 13px)*-0.5);

    margin-right: calc(var(--plyr-range-thumb-height, 13px)*-0.5);

    width: calc(100% + var(--plyr-range-thumb-height, 13px))

}



.plyr__progress input[type=range] {

    position: relative;

    z-index: 2

}



.plyr__progress .plyr__tooltip {

    left: 0;

    max-width: 120px;

    overflow-wrap: break-word

}



.plyr__progress__buffer {

    -webkit-appearance: none;

    background: rgba(0, 0, 0, 0);

    border: 0;

    border-radius: 100px;

    height: var(--plyr-range-track-height, 5px);

    left: 0;

    margin-top: calc(var(--plyr-range-track-height, 5px)/2*-1);

    padding: 0;

    position: absolute;

    top: 50%

}



.plyr__progress__buffer::-webkit-progress-bar {

    background: rgba(0, 0, 0, 0)

}



.plyr__progress__buffer::-webkit-progress-value {

    background: currentColor;

    border-radius: 100px;

    min-width: var(--plyr-range-track-height, 5px);

    -webkit-transition: width .2s ease;

    transition: width .2s ease

}



.plyr__progress__buffer::-moz-progress-bar {

    background: currentColor;

    border-radius: 100px;

    min-width: var(--plyr-range-track-height, 5px);

    -moz-transition: width .2s ease;

    transition: width .2s ease

}



.plyr__progress__buffer::-ms-fill {

    border-radius: 100px;

    -ms-transition: width .2s ease;

    transition: width .2s ease

}



.plyr--loading .plyr__progress__buffer {

    animation: plyr-progress 1s linear infinite;

    background-image: linear-gradient(-45deg, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 25%, transparent 25%, transparent 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 75%, transparent 75%, transparent);

    background-repeat: repeat-x;

    background-size: var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px);

    color: rgba(0, 0, 0, 0)

}



.plyr--video.plyr--loading .plyr__progress__buffer {

    background-color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25))

}



.plyr--audio.plyr--loading .plyr__progress__buffer {

    background-color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6))

}



.plyr__progress__marker {

    background-color: var(--plyr-progress-marker-background, #fff);

    border-radius: 1px;

    height: var(--plyr-range-track-height, 5px);

    position: absolute;

    top: 50%;

    transform: translate(-50%, -50%);

    width: var(--plyr-progress-marker-width, 3px);

    z-index: 3

}



.plyr__volume {

    align-items: center;

    display: flex;

    position: relative

}



.plyr__volume input[type=range] {

    margin-left: calc(var(--plyr-control-spacing, 10px)/2);

    margin-right: calc(var(--plyr-control-spacing, 10px)/2);

    max-width: 90px;

    min-width: 60px;

    position: relative;

    z-index: 2

}



.plyr--audio {

    display: block

}



.plyr--audio .plyr__controls {

    background: var(--plyr-audio-controls-background, #fff);

    border-radius: inherit;

    color: var(--plyr-audio-control-color, hsl(216, 15%, 34%));

    padding: var(--plyr-control-spacing, 10px)

}



.plyr--audio .plyr__control:focus-visible,

.plyr--audio .plyr__control:hover,

.plyr--audio .plyr__control[aria-expanded=true] {

    background: var(--plyr-audio-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));

    color: var(--plyr-audio-control-color-hover, #fff)

}



.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {

    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)))

}



.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {

    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)))

}



.plyr--full-ui.plyr--audio input[type=range]::-ms-track {

    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)))

}



.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1))

}



.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1))

}



.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1))

}



.plyr--audio .plyr__progress__buffer {

    color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6))

}



.plyr--video {

    overflow: hidden

}



.plyr--video.plyr--menu-open {

    overflow: visible

}



.plyr__video-wrapper {

    background: var(--plyr-video-background, var(--plyr-video-background, rgb(0, 0, 0)));

    border-radius: inherit;

    height: 100%;

    margin: auto;

    overflow: hidden;

    position: relative;

    width: 100%

}



.plyr__video-embed,

.plyr__video-wrapper--fixed-ratio {

    aspect-ratio: 16/9

}



@supports not (aspect-ratio: 16/9) {



    .plyr__video-embed,

    .plyr__video-wrapper--fixed-ratio {

        height: 0;

        padding-bottom: 56.25%;

        position: relative

    }

}



.plyr__video-embed iframe,

.plyr__video-wrapper--fixed-ratio video {

    border: 0;

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%

}



.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {

    padding-bottom: 240%;

    position: relative;

    transform: translateY(-38.28125%)

}



.plyr--video .plyr__controls {

    background: var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)));

    border-bottom-left-radius: inherit;

    border-bottom-right-radius: inherit;

    bottom: 0;

    color: var(--plyr-video-control-color, #fff);

    left: 0;

    padding: calc(var(--plyr-control-spacing, 10px)/2);

    padding-top: calc(var(--plyr-control-spacing, 10px)*2);

    position: absolute;

    right: 0;

    transition: opacity .4s ease-in-out, transform .4s ease-in-out;

    z-index: 3

}



@media(min-width: 480px) {

    .plyr--video .plyr__controls {

        padding: var(--plyr-control-spacing, 10px);

        padding-top: calc(var(--plyr-control-spacing, 10px)*3.5)

    }

}



.plyr--video.plyr--hide-controls .plyr__controls {

    opacity: 0;

    pointer-events: none;

    transform: translateY(100%)

}



.plyr--video .plyr__control:focus-visible,

.plyr--video .plyr__control:hover,

.plyr--video .plyr__control[aria-expanded=true] {

    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));

    color: var(--plyr-video-control-color-hover, #fff)

}



.plyr__control--overlaid {

    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));

    border: 0;

    border-radius: 100%;

    color: var(--plyr-video-control-color, #fff);

    display: none;

    left: 50%;

    opacity: .9;

    padding: calc(var(--plyr-control-spacing, 10px)*1.5);

    position: absolute;

    top: 50%;

    transform: translate(-50%, -50%);

    transition: .3s;

    z-index: 2

}



.plyr__control--overlaid svg {

    left: 2px;

    position: relative

}



.plyr__control--overlaid:hover,

.plyr__control--overlaid:focus {

    opacity: 1

}



.plyr--playing .plyr__control--overlaid {

    opacity: 0;

    visibility: hidden

}



.plyr--full-ui.plyr--video .plyr__control--overlaid {

    display: block

}



.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {

    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)))

}



.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {

    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)))

}



.plyr--full-ui.plyr--video input[type=range]::-ms-track {

    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)))

}



.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5))

}



.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5))

}



.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {

    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5))

}



.plyr--video .plyr__progress__buffer {

    color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25))

}



.plyr:-webkit-full-screen {

    background: #000;

    border-radius: 0 !important;

    height: 100%;

    margin: 0;

    width: 100%

}



.plyr:fullscreen {

    background: #000;

    border-radius: 0 !important;

    height: 100%;

    margin: 0;

    width: 100%

}



.plyr:-webkit-full-screen video {

    height: 100%

}



.plyr:fullscreen video {

    height: 100%

}



.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {

    display: block

}



.plyr:fullscreen .plyr__control .icon--exit-fullscreen {

    display: block

}



.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg {

    display: none

}



.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg {

    display: none

}



.plyr:-webkit-full-screen.plyr--hide-controls {

    cursor: none

}



.plyr:fullscreen.plyr--hide-controls {

    cursor: none

}



@media(min-width: 1024px) {

    .plyr:-webkit-full-screen .plyr__captions {

        font-size: var(--plyr-font-size-xlarge, 21px)

    }



    .plyr:fullscreen .plyr__captions {

        font-size: var(--plyr-font-size-xlarge, 21px)

    }

}



.plyr--fullscreen-fallback {

    background: #000;

    border-radius: 0 !important;

    height: 100%;

    margin: 0;

    width: 100%;

    bottom: 0;

    left: 0;

    position: fixed;

    right: 0;

    top: 0;

    z-index: 10000000

}



.plyr--fullscreen-fallback video {

    height: 100%

}



.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {

    display: block

}



.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg {

    display: none

}



.plyr--fullscreen-fallback.plyr--hide-controls {

    cursor: none

}



@media(min-width: 1024px) {

    .plyr--fullscreen-fallback .plyr__captions {

        font-size: var(--plyr-font-size-xlarge, 21px)

    }

}



.plyr__ads {

    border-radius: inherit;

    bottom: 0;

    cursor: pointer;

    left: 0;

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 0;

    z-index: -1

}



.plyr__ads>div,

.plyr__ads>div iframe {

    height: 100%;

    position: absolute;

    width: 100%

}



.plyr__ads::after {

    background: #23282f;

    border-radius: 2px;

    bottom: var(--plyr-control-spacing, 10px);

    color: #fff;

    content: attr(data-badge-text);

    font-size: 11px;

    padding: 2px 6px;

    pointer-events: none;

    position: absolute;

    right: var(--plyr-control-spacing, 10px);

    z-index: 3

}



.plyr__ads:empty::after {

    display: none

}



.plyr__cues {

    background: currentColor;

    display: block;

    height: var(--plyr-range-track-height, 5px);

    left: 0;

    opacity: .8;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 3px;

    z-index: 3

}



.plyr__preview-thumb {

    background-color: var(--plyr-tooltip-background, #fff);

    border-radius: var(--plyr-menu-radius, 8px);

    bottom: 100%;

    box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));

    margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) / 2)*2);

    opacity: 0;

    padding: 3px;

    pointer-events: none;

    position: absolute;

    transform: translate(0, 10px) scale(0.8);

    transform-origin: 50% 100%;

    transition: transform .2s .1s ease, opacity .2s .1s ease;

    z-index: 2

}



.plyr__preview-thumb--is-shown {

    opacity: 1;

    transform: translate(0, 0) scale(1)

}



.plyr__preview-thumb::before {

    border-left: var(--plyr-tooltip-arrow-size, 4px) solid rgba(0, 0, 0, 0);

    border-right: var(--plyr-tooltip-arrow-size, 4px) solid rgba(0, 0, 0, 0);

    border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff);

    bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1);

    content: "";

    height: 0;

    left: calc(50% + var(--preview-arrow-offset));

    position: absolute;

    transform: translateX(-50%);

    width: 0;

    z-index: 2

}



.plyr__preview-thumb__image-container {

    background: #c1c8d1;

    border-radius: calc(var(--plyr-menu-radius, 8px) - 1px);

    overflow: hidden;

    position: relative;

    z-index: 0

}



.plyr__preview-thumb__image-container img,

.plyr__preview-thumb__image-container::after {

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%

}



.plyr__preview-thumb__image-container::after {

    border-radius: inherit;

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);

    content: "";

    pointer-events: none

}



.plyr__preview-thumb__image-container img {

    max-height: none;

    max-width: none

}



.plyr__preview-thumb__time-container {

    background: var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)));

    border-bottom-left-radius: calc(var(--plyr-menu-radius, 8px) - 1px);

    border-bottom-right-radius: calc(var(--plyr-menu-radius, 8px) - 1px);

    bottom: 0;

    left: 0;

    line-height: 1.1;

    padding: 20px 6px 6px;

    position: absolute;

    right: 0;

    z-index: 3

}



.plyr__preview-thumb__time-container span {

    color: #fff;

    font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px))

}



.plyr__preview-scrubbing {

    bottom: 0;

    filter: blur(1px);

    height: 100%;

    left: 0;

    margin: auto;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;

    position: absolute;

    right: 0;

    top: 0;

    transition: opacity .3s ease;

    width: 100%;

    z-index: 1

}



.plyr__preview-scrubbing--is-shown {

    opacity: 1

}



.plyr__preview-scrubbing img {

    height: 100%;

    left: 0;

    max-height: none;

    max-width: none;

    -o-object-fit: contain;

    object-fit: contain;

    position: absolute;

    top: 0;

    width: 100%

}



.plyr--no-transition {

    transition: none !important

}



.plyr__sr-only {

    clip: rect(1px, 1px, 1px, 1px);

    overflow: hidden;

    border: 0 !important;

    height: 1px !important;

    padding: 0 !important;

    position: absolute !important;

    width: 1px !important

}



.plyr [hidden] {

    display: none !important

}



.plyr {

    --plyr-badge-background: transparent;

    --plyr-badge-text-color: #FFFFFF;

    --plyr-badge-border-radius: 0;

    --plyr-color-main: #FFFFFF;

    --plyr-control-icon-size: 18px;

    --plyr-control-spacing: 7px;

    --plyr-control-padding: calc(var(--plyr-control-spacing) * 0.7);

    --plyr-focus-visible-color: #FFFFFF;

    --plyr-font-family: NB International, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

    --plyr-font-size-time: var(--font-size-small);

    --plyr-range-fill-background: #FFFFFF;

    --plyr-range-thumb-height: 7px;

    --plyr-range-track-height: 1px;

    --plyr-tooltip-arrow-size: 5px;

    --plyr-tooltip-background: #000000;

    --plyr-tooltip-color: #FFFFFF;

    --plyr-tooltip-radius: 0;

    --plyr-tooltip-shadow: none;

    --plyr-video-background: #000000;

    --plyr-video-controls-background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);

    --plyr-video-control-background-hover: transparent;

    --plyr-video-control-color-hover: #ECE7DA

}



@media(orientation: portrait) {

    .plyr.plyr--playing.-android-device .plyr__video-wrapper {

        aspect-ratio: none !important;

        width: 100vh !important;

        height: 100vw !important;

        margin-left: 0px;

        margin-right: 0px;

        transform: rotate(90deg)

    }



    .plyr.plyr--playing.-android-device .plyr__video-embed__container {

        position: absolute;

        inset: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        padding-bottom: 0;

        transform: none !important

    }

}



.plyr--full-ui input[type=range] {

    border-radius: 0

}



.plyr__controls {

    flex-wrap: wrap;

    width: 100%;

    justify-content: flex-start

}



.plyr__controls .plyr__time+.plyr__time {

    display: block;

    margin-right: auto

}



.plyr__controls .plyr__time+.plyr__time:before {

    margin-right: 5px;

    margin-left: 5px

}



.plyr__controls .plyr__progress {

    left: 0;

    width: calc(100% - 2*var(--plyr-control-spacing));

    margin: 0 auto

}



.plyr__controls .plyr__progress input[type=range],

.plyr__controls .plyr__progress__buffer {

    width: 100%;

    margin: 0

}



@media(max-width: 699px) {

    .plyr__controls {

        padding: calc(3*var(--grid-gutter-half)) calc(1.5*var(--grid-gutter-half)) var(--grid-gutter-half) !important

    }



    .plyr__controls .plyr__time {

        margin-right: auto

    }



    .plyr__controls .plyr__time+.plyr__time {

        display: none

    }



    .plyr__controls .plyr__volume input[type=range] {

        width: 60px

    }

}



@media(min-width: 700px) {

    .plyr__controls {

        padding: calc(3*var(--grid-gutter)) calc(1.5*var(--grid-gutter)) var(--grid-gutter) !important

    }

}



.plyr__tooltip {

    line-height: 1

}



.plyr__tooltip:before {

    bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1 + 1px)

}



.plyr__control.-fullscreen .plyr__tooltip {

    left: auto;

    right: 0;

    transform: translate(0, 10px) scale(0.8);

    transform-origin: 100% 100%

}



.plyr__control.-fullscreen .plyr__tooltip:before {

    left: auto;

    right: calc(var(--plyr-control-icon-size)/2 + var(--plyr-control-padding));

    transform: translateX(50%)

}



.plyr__control.-fullscreen:hover .plyr__tooltip,

.plyr__control.-fullscreen:focus-visible .plyr__tooltip,

.plyr__control.-fullscreen .plyr__tooltip.plyr__tooltip--visible {

    transform: translate(0, 0) scale(1)

}



.plyr__control:focus-visible {

    outline: 1px solid var(--plyr-focus-visible-color);

    outline-offset: 0

}



.plyr--full-ui input[type=range]:focus-visible::-ms-track {

    outline: 1px solid var(--plyr-focus-visible-color);

    outline-offset: 4px

}



.plyr--full-ui input[type=range]:focus-visible::-moz-range-track {

    outline: 1px solid var(--plyr-focus-visible-color);

    outline-offset: 4px

}



.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track {

    outline: 1px solid var(--plyr-focus-visible-color);

    outline-offset: 4px

}



.o-scroll {

    min-height: 100vh

}



.o-container {

    width: var(--container-width);

    margin-right: auto;

    margin-left: auto

}



@media(min-width: 1000px)and (max-width: 1199px) {

    .o-container.-small {

        --container-width: calc(0.8571428571 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.8571428571) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))

    }

}



@media(min-width: 1200px) {

    .o-container {

        --container-width: calc(0.8571428571 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.8571428571) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))

    }



    .o-container.-large {

        --container-width: calc(1 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 1) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))

    }



    .o-container.-small {

        --container-width: calc(0.7142857143 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.7142857143) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))

    }

}



.o-ratio {

    position: relative;

    display: block;

    overflow: hidden

}



.o-ratio:before {

    display: block;

    padding-bottom: 100%;

    width: 100%;

    content: ""

}



.o-ratio_content,

.o-ratio>img,

.o-ratio>iframe,

.o-ratio>embed,

.o-ratio>object {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: 100%

}



.o-icon {

    display: inline-block;

    vertical-align: middle

}



.o-icon svg {

    --icon-height: calc(var(--icon-width) * math.div(1, (var(--icon-ratio))));

    display: block;

    width: var(--icon-width);

    height: var(--icon-height);

    fill: currentColor

}



.svg-play {

    --icon-width: var(--font-size-h1);

    --icon-ratio: 1

}



.o-grid {

    display: grid;

    width: 100%

}



.o-grid:is(ul, ol) {

    margin: 0;

    padding: 0;

    list-style: none

}



.o-grid.-cols {

    grid-template-columns: repeat(var(--grid-columns), 1fr)

}



.o-grid.-col-14 {

    grid-template-columns: repeat(14, 1fr)

}



.o-grid.-col-4 {

    grid-template-columns: repeat(4, 1fr)

}



@media(min-width: 1000px) {

    .o-grid.-col-14\@from-medium {

        grid-template-columns: repeat(14, 1fr)

    }

}



.o-grid.-gutters {

    gap: var(--grid-gutter);

    -moz-column-gap: var(--grid-gutter);

    column-gap: var(--grid-gutter)

}



.o-grid.-full-height {

    height: 100%

}



.o-grid.-top-items {

    align-items: start

}



.o-grid.-right-items {

    justify-items: end

}



.o-grid.-bottom-items {

    align-items: end

}



.o-grid.-left-items {

    justify-items: start

}



.o-grid.-center-items {

    align-items: center;

    justify-items: center

}



.o-grid.-center-items-x {

    justify-items: center

}



.o-grid.-center-items-y {

    align-items: center

}



.o-grid.-stretch-items {

    align-items: stretch;

    justify-items: stretch

}



.o-grid.-top-cells {

    align-content: start

}



.o-grid.-right-cells {

    justify-content: end

}



.o-grid.-bottom-cells {

    align-content: end

}



.o-grid.-left-cells {

    justify-content: start

}



.o-grid.-center-cells {

    align-content: center;

    justify-content: center

}



.o-grid.-center-cells-x {

    justify-content: center

}



.o-grid.-center-cells-y {

    align-content: center

}



.o-grid.-stretch-cells {

    align-content: stretch;

    justify-content: stretch

}



.o-grid.-space-around-cells {

    align-content: space-around;

    justify-content: space-around

}



.o-grid.-space-around-cells-x {

    justify-content: space-around

}



.o-grid.-space-around-cells-y {

    align-content: space-around

}



.o-grid.-space-between-cells {

    justify-content: space-between;

    align-content: space-between

}



.o-grid.-space-between-cells-x {

    justify-content: space-between

}



.o-grid.-space-between-cells-y {

    align-content: space-between

}



.o-grid.-space-evenly-cells {

    justify-content: space-evenly;

    align-content: space-evenly

}



.o-grid.-space-evenly-cells-x {

    justify-content: space-evenly

}



.o-grid.-space-evenly-cells-y {

    align-content: space-evenly

}



.o-grid_item {

    grid-column-start: var(--gc-start, 1);

    grid-column-end: var(--gc-end, -1)

}



.o-grid_item.-align-end {

    align-self: end

}



[data-module-anim-text] {

    opacity: 0

}



.o-anim-text {

    --anim-text-line-count: 1;

    --anim-text-line-index: 0;

    --anim-text-char-count: 1;

    --anim-text-char-index: 0;

    --anim-text-enter-duration: 0.75s;

    --anim-text-enter-easing: cubic-bezier(0.38, 0.005, 0.215, 1);

    --anim-text-enter-delay: 0s;

    --anim-text-leave-duration: calc(0.5 * var(--anim-text-enter-duration));

    --anim-text-leave-easing: cubic-bezier(0.38, 0.005, 0.215, 1);

    --anim-text-leave-delay: 0s;

    opacity: 1

}



.o-anim-text.-block,

.o-anim-text.-lines .o-anim-text_word,

.o-anim-text.-chars .o-anim-text_char {

    transition-timing-function: var(--anim-text-leave-easing);

    transition-duration: var(--anim-text-leave-duration)

}



.o-anim-text.-block {

    opacity: 0;

    transform: translate(0, 2em);

    transition-delay: var(--anim-text-leave-delay)

}



.o-anim-text.-lines .o-anim-text_word {

    transform: translate(0, 120%);

    transition-delay: calc(.05s*(var(--anim-text-line-count) - var(--anim-text-line-index) - 1) + var(--anim-text-leave-delay))

}



.o-anim-text.-chars .o-anim-text_char {

    transform: translate(0, 125%);

    transition-delay: calc(.02s*(var(--anim-text-char-count) - var(--anim-text-char-index) - 1) + var(--anim-text-leave-delay))

}



.o-anim-text.-block {

    transition-property: opacity, transform;

    will-change: opacity, transform

}



html.is-ready .o-anim-text[data-scroll].is-inview.-block,

html.is-ready .o-anim-text[data-scroll].is-inview.-lines .o-anim-text_word,

html.is-ready .o-anim-text[data-scroll].is-inview.-chars .o-anim-text_char,

html.is-ready .is-inview .o-anim-text:not([data-scroll]).-block,

html.is-ready .is-inview .o-anim-text:not([data-scroll]).-lines .o-anim-text_word,

html.is-ready .is-inview .o-anim-text:not([data-scroll]).-chars .o-anim-text_char {

    transition-timing-function: var(--anim-text-enter-easing);

    transition-duration: var(--anim-text-enter-duration)

}



html.is-ready .o-anim-text[data-scroll].is-inview.-block,

html.is-ready .is-inview .o-anim-text:not([data-scroll]).-block {

    opacity: 1;

    transform: translate(0);

    transition-delay: var(--anim-text-enter-delay)

}



html.is-ready .o-anim-text[data-scroll].is-inview.-lines .o-anim-text_word,

html.is-ready .is-inview .o-anim-text:not([data-scroll]).-lines .o-anim-text_word {

    transform: translate(0);

    transition-delay: calc(.1s*var(--anim-text-line-index) + var(--anim-text-enter-delay))

}



html.is-ready .o-anim-text[data-scroll].is-inview.-chars .o-anim-text_char,

html.is-ready .is-inview .o-anim-text:not([data-scroll]).-chars .o-anim-text_char {

    transform: translate(0);

    transition-delay: calc(.02s*var(--anim-text-char-index) + var(--anim-text-enter-delay))

}



@supports((-webkit-clip-path: polygon(0 -10%, 100% -10%, 100% 110%, 0 110%)) or (clip-path: polygon(0 -10%, 100% -10%, 100% 110%, 0 110%))) {

    .o-anim-text.-lines .o-anim-text_line {

        -webkit-clip-path: polygon(0 -10%, 100% -10%, 100% 110%, 0 110%);

        clip-path: polygon(0 -10%, 100% -10%, 100% 110%, 0 110%)

    }

}



@supports not ((-webkit-clip-path: polygon(0 -10%, 100% -10%, 100% 110%, 0 110%)) or (clip-path: polygon(0 -10%, 100% -10%, 100% 110%, 0 110%))) {

    .o-anim-text.-lines .o-anim-text_line {

        overflow: hidden

    }

}



.o-anim-text_word {

    display: inline-flex

}



.o-anim-text.-lines .o-anim-text_word {

    transition-property: transform;

    will-change: transform

}



@supports((-webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 100%, 0 100%)) or (clip-path: polygon(0 -20%, 100% -20%, 100% 100%, 0 100%))) {

    .o-anim-text.-chars .o-anim-text_word {

        -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 100%, 0 100%);

        clip-path: polygon(0 -20%, 100% -20%, 100% 100%, 0 100%)

    }

}



@supports not ((-webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 100%, 0 100%)) or (clip-path: polygon(0 -20%, 100% -20%, 100% 100%, 0 100%))) {

    .o-anim-text.-chars .o-anim-text_word {

        overflow: hidden

    }

}



.o-anim-text_char {

    top: .1em

}



.o-anim-text.-chars .o-anim-text_char {

    transition-property: transform;

    will-change: transform

}



.o-name {

    z-index: 2;

    position: absolute;

    top: 0;

    left: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: var(--theme-color-difference);

    text-align: center;

    mix-blend-mode: difference;

    pointer-events: none

}



.c-scrollbar {

    position: absolute;

    right: 0;

    top: 0;

    width: 11px;

    height: 100vh;

    transform-origin: center right;

    transition: transform .3s, opacity .3s;

    opacity: 0

}



.c-scrollbar:hover {

    transform: scaleX(1.45)

}



.c-scrollbar:hover,

.has-scroll-scrolling .c-scrollbar,

.has-scroll-dragging .c-scrollbar {

    opacity: 1

}



.c-scrollbar_thumb {

    position: absolute;

    top: 0;

    right: 0;

    background-color: #000;

    opacity: .5;

    width: 7px;

    border-radius: 10px;

    margin: 2px;

    cursor: grab

}



.has-scroll-dragging .c-scrollbar_thumb {

    cursor: grabbing

}



.c-button {

    padding: .9375rem 1.25rem;

    background-color: #d3d3d3

}



.c-button:focus,

.c-button:hover {

    background-color: #a9a9a9

}



.c-asset {

    align-self: flex-start;

    width: 100%;

    background-color: var(--asset-bg, #ECE7DA);

    border-radius: 2px;

    overflow: hidden

}



.c-asset.-multiply {

    mix-blend-mode: multiply

}



.c-asset.-cover .c-asset,

.c-asset.-cover.c-asset,

.c-asset.-cover .c-asset_inner {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%

}



.c-asset.-cover .c-asset_element {

    height: 100%;

    -o-object-position: 50% 50%;

    object-position: 50% 50%;

    -o-object-fit: cover;

    object-fit: cover

}



.c-asset.-contain .c-asset,

.c-asset.-contain.c-asset,

.c-asset.-contain .c-asset_inner {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%

}



.c-asset.-contain .c-asset_element {

    height: 100%;

    -o-object-position: 50% 50%;

    object-position: 50% 50%;

    -o-object-fit: contain;

    object-fit: contain

}



.c-asset_inner {

    overflow: hidden;

    -webkit-mask-image: -webkit-radial-gradient(white, black)

}



.c-asset.-radius:not(.-parallax) .c-asset_inner {

    border-radius: var(--asset-radius, var(--radius-small))

}



.c-asset.-lazy-reveal.-lazy-load .c-asset_inner {

    opacity: 0

}



.c-asset.-lazy-reveal.-lazy-load.-lazy-loaded .c-asset_inner {

    opacity: 1;

    transition: opacity .5s cubic-bezier(0.38, 0.005, 0.215, 1)

}



.c-asset_element {

    width: 100%;

    height: auto

}



.c-section {

    --section-padding-y: var(--grid-gutter);

    background-color: #ece7da

}



.c-section.-lightest {

    --asset-bg: #FFFFFF;

    z-index: 1;

    background-color: #fff

}



.c-section.-min-100vh {

    text-align: center

}



.c-section.-header-about {

    min-height: calc(200*var(--vh, 1vh));

    margin-bottom: calc(-100*var(--vh, 1vh))

}



.c-section.-header-project {

    --theme-color-difference: #000000;

    min-height: calc(300*var(--vh, 1vh));

    margin-bottom: calc(-100*var(--vh, 1vh))

}



.c-section.-header-project [data-project-header=title] {

    pointer-events: none

}



.c-section.-padded {

    --section-padding-y: calc(7.5 * var(--vh, 1vh))

}



.c-section_inner {

    padding-top: var(--section-padding-y);

    padding-bottom: var(--section-padding-y)

}



.c-section.-min-100vh .c-section_inner {

    display: grid;

    grid-row-gap: var(--grid-gutter);

    grid-template-rows: 1em 1fr 1em;

    min-height: calc(100*var(--vh, 1vh))

}



.c-section.-header-about .c-section_inner,

.c-section.-header-project .c-section_inner {

    position: sticky;

    top: 0;

    height: calc(100*var(--vh, 1vh))

}



@media(min-width: 1000px) {

    .c-section.-min-100vh\@from-medium .c-section_inner {

        display: grid;

        min-height: calc(100*var(--vh, 1vh));

        grid-row-gap: var(--grid-gutter);

        grid-template-rows: 1em 1fr 1em

    }

}



.c-section.-min-100vh .c-section_content,

.c-section.-min-100vh\@from-medium .c-section_content {

    grid-row-start: 2;

    display: flex;

    flex-direction: column;

    justify-content: space-around

}



.c-section.-min-100vh .c-section_content:only-child,

.c-section.-min-100vh\@from-medium .c-section_content:only-child {

    grid-row: -1/1

}



.c-section.-header-project .c-section_content {

    padding-top: calc(calc(50 * var(--vh, 1vh)) - (2*var(--grid-gutter) + 1em))

}



.c-section_label {

    line-height: 1;

    flex-shrink: 0;

    text-align: center

}



.c-section:not(.-min-100vh):not(.-min-100vh\@from-medium) .c-section_label.-top {

    padding-bottom: calc(7.5*var(--vh, 1vh))

}



.c-section:not(.-min-100vh):not(.-min-100vh\@from-medium) .c-section_label.-bottom {

    padding-top: calc(7.5*var(--vh, 1vh))

}



.c-section.-min-100vh .c-section_label.-top,

.c-section.-min-100vh\@from-medium .c-section_label.-top {

    grid-row-start: 1

}



.c-section.-min-100vh .c-section_label.-bottom,

.c-section.-min-100vh\@from-medium .c-section_label.-bottom {

    grid-row-start: 3

}



.c-section_asset {

    --section-asset-width: 100%;

    width: var(--section-asset-width)

}



.c-section_asset:not(:last-child) {

    margin-bottom: calc(10*var(--vh, 1vh))

}



.c-section_asset.-small {

    --section-asset-width: calc(1 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 1) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px));

    margin: calc(10*var(--vh, 1vh)) auto

}



.c-section.-min-100vh .c-section_asset.-small {

    margin-top: 0;

    margin-bottom: 0

}



.c-section_asset.-center {

    max-height: calc(100*var(--vh, 1vh) - 4*var(--section-padding-y) - 2em)

}



@media(min-width: 700px) {

    .c-section_asset.-small {

        --section-asset-width: calc(0.7142857143 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.7142857143) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))

    }

}



@media(min-width: 1000px) {



    .c-section.-min-100vh .c-section_asset .c-asset_element,

    .c-section.-min-100vh\@from-medium .c-section_asset .c-asset_element {

        max-height: calc(calc(100 * var(--vh, 1vh)) - 2*var(--font-size-body) - 4*var(--grid-gutter));

        -o-object-fit: contain;

        object-fit: contain;

        -o-object-position: 50% 50%;

        object-position: 50% 50%

    }

}



.c-list {

    margin-bottom: calc(5*var(--vh, 1vh))

}



.c-list+.c-list {

    margin-top: calc(10*var(--vh, 1vh))

}



.c-list.-margin-top {

    margin-top: calc(20*var(--vh, 1vh))

}



.c-list_title {

    margin-top: calc(5*var(--vh, 1vh));

    text-align: center

}



.c-list_list {

    margin-top: var(--grid-gutter)

}



.c-list_item {

    display: grid;

    grid-gap: .375rem var(--grid-gutter);

    align-items: center;

    padding-top: .625rem;

    padding-bottom: .625rem

}



@media(max-width: 699px) {

    .c-list_item {

        grid-template-columns: calc(0.5*(100vw - 2*var(--grid-margin, 0px)) - (1 - 0.5)*var(--grid-gutter, 0px) + 0*var(--grid-gutter, 0px)) calc(0.5*(100vw - 2*var(--grid-margin, 0px)) - (1 - 0.5)*var(--grid-gutter, 0px) + 0*var(--grid-gutter, 0px))

    }

}



@media(min-width: 700px) {

    .c-list_item {

        grid-template-columns: 1fr 3fr 1fr

    }



    .c-list_item:before,

    .c-list_item:last-child:after {

        content: "";

        position: absolute;

        left: 0;

        display: block;

        width: 100%;

        height: 1px;

        background-color: currentColor;

        transform: scale(0, 1);

        transition: transform .75s cubic-bezier(0.38, 0.005, 0.215, 1)

    }



    .c-list_item:before {

        top: 0

    }



    .c-list_item:last-child:after {

        bottom: 0

    }



    .c-list_item.is-inview:before,

    .c-list_item.is-inview:last-child:after {

        transform: scale(1)

    }

}



.c-list_cell.-center {

    text-align: center

}



.c-list_cell.-right {

    text-align: right

}



@media(max-width: 699px) {

    .c-list_cell.-center {

        grid-column: -1/1;

        padding-top: .5em

    }



    .c-list_cell.-center:before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        display: block;

        width: 100%;

        height: 1px;

        background-color: currentColor;

        transform: scale(0, 1);

        transition: transform .75s cubic-bezier(0.38, 0.005, 0.215, 1)

    }



    .c-list_item.is-inview .c-list_cell.-center:before {

        transform: scale(1)

    }



    .c-list_cell.-right {

        grid-column-start: 2;

        grid-row-start: 1

    }

}



@media(min-width: 700px) {

    .c-list_cell.-center:only-child {

        grid-column: -1/1

    }

}



.c-header {

    --header-link-plus-size: 0.7em

}



html.has-home-intro .c-header {

    opacity: 0

}



.c-header_link {

    z-index: 200;

    position: fixed;

    display: block;

    color: var(--theme-color-difference);

    mix-blend-mode: difference

}



.c-header_link:nth-child(1) {

    top: var(--grid-gutter);

    left: calc(50% - .5*48px);

    min-width: 48px;

    text-align: center

}



.c-header_link:nth-child(2):after,

.c-header_link:nth-child(2):before,

.c-header_link:nth-child(3):after,

.c-header_link:nth-child(3):before {

    content: "";

    display: block;

    position: absolute;

    background-color: currentColor

}



.c-header_link:nth-child(2):before,

.c-header_link:nth-child(3):before {

    top: calc(50% - .5px);

    width: var(--header-link-plus-size);

    height: 1px

}



.c-header_link:nth-child(2):after,

.c-header_link:nth-child(3):after {

    top: calc(50% - .5*var(--header-link-plus-size) - .5px);

    width: 1px;

    height: var(--header-link-plus-size)

}



.c-header_link:nth-child(2) {

    left: var(--grid-margin);

    padding-right: calc(var(--header-link-plus-size) + .5em)

}



.c-header_link:nth-child(2):before {

    right: 0

}



.c-header_link:nth-child(2):after {

    right: calc(.5*var(--header-link-plus-size) - .5px)

}



.c-header_link:nth-child(3) {

    right: var(--grid-margin);

    padding-left: calc(var(--header-link-plus-size) + .5em)

}



.c-header_link:nth-child(3):before {

    left: 0

}



.c-header_link:nth-child(3):after {

    left: calc(.5*var(--header-link-plus-size) - .5px)

}



@media(max-width: 699px) {



    .c-header_link:nth-child(2),

    .c-header_link:nth-child(3) {

        top: var(--grid-gutter)

    }

}



@media(min-width: 700px) {



    .c-header_link:nth-child(2),

    .c-header_link:nth-child(3) {

        top: calc(50% - .5em)

    }

}



.c-home-intro {

    --home-intro-letter-delta: 0em;

    background-color: #ece7da;

    overflow: hidden

}



html.is-safari .c-home-intro {

    --home-intro-letter-delta: 0.08em

}



.c-home-intro_inner {

    display: flex;

    min-height: calc(100*var(--vh, 1vh));

    padding-top: var(--grid-gutter);

    padding-bottom: var(--grid-gutter)

}



@media(max-width: 699px) {

    .c-home-intro_inner {

        flex-direction: column-reverse;

        justify-content: center

    }

}



@media(min-width: 700px) {

    .c-home-intro_inner {

        flex-direction: column;

        justify-content: space-between

    }

}



.c-home-intro_letter {

    --home-intro-progress-x: 0;

    --home-intro-progress-y: 0;

    --home-intro-letter-width: 0.4em;

    --home-intro-letter-x: 0;

    --home-intro-letter-y: 0;

    position: absolute;

    top: calc(50% - .65em);

    display: block;

    width: var(--home-intro-letter-width);

    -webkit-clip-path: polygon(0 -35%, 110% -35%, 110% 110%, 0 110%);

    clip-path: polygon(0 -35%, 110% -35%, 110% 110%, 0 110%);

    transform: translate(calc(var(--home-intro-progress-x) * var(--home-intro-letter-x)), calc(var(--home-intro-progress-y) * var(--home-intro-letter-y)));

    will-change: transform

}



.c-home-intro_letter span {

    display: block

}



.c-home-intro_letter:nth-child(1) {

    left: calc(50% - 2.5*var(--home-intro-letter-width) - .035em)

}



.c-home-intro_letter:nth-child(2) {

    left: calc(50% - 1.5*var(--home-intro-letter-width) - .03em)

}



.c-home-intro_letter:nth-child(3) {

    left: calc(-7% - .5* var(--home-intro-letter-width) - .03em);

}



.c-home-intro_letter:nth-child(4) {

    left: calc(50% + .5*var(--home-intro-letter-width) - .03em)

}



.c-home-intro_letter:nth-child(5) {

    left: calc(50% + 1.5*var(--home-intro-letter-width) - .05em)

}



.c-home-intro_letter:nth-child(1) {

    --home-intro-letter-x: calc(-50vw + 2.5 * var(--home-intro-letter-width) + var(--grid-margin))

}



.c-home-intro_letter:nth-child(2) {

    --home-intro-letter-x: calc(-50vw + 2.5 * var(--home-intro-letter-width) + var(--grid-margin))

}



@media(max-width: 699px) {



    .c-home-intro_letter:nth-child(1),

    .c-home-intro_letter:nth-child(2),

    .c-home-intro_letter:nth-child(3) {

        --home-intro-letter-y: calc(calc(-50 * var(--vh, 1vh)) + 0.37em + var(--grid-gutter) + 1rem + 2rem + var(--home-intro-letter-delta))

    }



    .c-home-intro_letter:nth-child(4),

    .c-home-intro_letter:nth-child(5) {

        --home-intro-letter-y: calc(calc(50 * var(--vh, 1vh)) - 0.34em - var(--grid-gutter) - 1rem - 2rem + var(--home-intro-letter-delta))

    }



    .c-home-intro_letter:nth-child(3) {

        --home-intro-letter-x: calc(50vw - 0.5 * var(--home-intro-letter-width) - var(--grid-margin))

    }



    .c-home-intro_letter:nth-child(4) {

        --home-intro-letter-x: calc(-50vw - 0.5 * var(--home-intro-letter-width) + var(--grid-margin))

    }



    .c-home-intro_letter:nth-child(5) {

        --home-intro-letter-x: calc(-50vw - 1.5 * var(--home-intro-letter-width) + calc(0.2857142857 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.2857142857) * var(--grid-gutter, 0px) + 1 * var(--grid-gutter, 0px)) + var(--grid-margin))

    }

}



@media(min-width: 700px) {



    .c-home-intro_letter:nth-child(1),

    .c-home-intro_letter:nth-child(2),

    .c-home-intro_letter:nth-child(3) {

        --home-intro-letter-y: calc(calc(-50 * var(--vh, 1vh)) + var(--grid-gutter) + 0.37em + var(--home-intro-letter-delta))

    }



    .c-home-intro_letter:nth-child(4),

    .c-home-intro_letter:nth-child(5) {

        --home-intro-letter-y: calc(calc(50 * var(--vh, 1vh)) - var(--grid-gutter) - 0.34em + var(--home-intro-letter-delta))

    }



    .c-home-intro_letter:nth-child(3) {

        --home-intro-letter-x: calc(0.5 * var(--home-intro-letter-width) + calc(0.2857142857 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.2857142857) * var(--grid-gutter, 0px) + 1.5 * var(--grid-gutter, 0px)))

    }



    .c-home-intro_letter:nth-child(4) {

        --home-intro-letter-x: calc(-50vw - 0.5 * var(--home-intro-letter-width) + calc(0.0714285714 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.0714285714) * var(--grid-gutter, 0px) + 1 * var(--grid-gutter, 0px)) + var(--grid-margin))

    }



    .c-home-intro_letter:nth-child(5) {

        --home-intro-letter-x: calc(-50vw - 1.5 * var(--home-intro-letter-width) + calc(0.5714285714 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.5714285714) * var(--grid-gutter, 0px) + 1 * var(--grid-gutter, 0px)) + var(--grid-margin))

    }

   

}



.c-home-intro_asset {

    --asset-bg: transparent;

    --home-intro-asset-direction: 1;

    overflow: hidden;

    transform: translate(calc(var(--home-intro-asset-direction) * -100%), 0);

    will-change: transform

}



.c-home-intro_asset.-item-1 {

    --home-intro-asset-delay: 0s

}



.c-home-intro_asset.-item-2 {

    --home-intro-asset-direction: -1;

    --home-intro-asset-delay: 0s

}



.c-home-intro_asset .c-asset {

    transform: translate(calc(var(--home-intro-asset-direction) * (100% + 1px)), 0);

    transition: inherit;

    will-change: transform

}



html:not(.has-home-intro) .c-home-intro_asset {

    --home-intro-asset-direction: 0;

    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) var(--home-intro-asset-delay, 0s)

}



@media(max-width: 699px) {

    .c-home-intro_asset.-item-1 {

        width: calc(0.2857142857 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.2857142857) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px));

        margin-top: calc(5*var(--vh, 1vh));

        margin-right: auto;

        margin-left: auto

    }



    @supports(aspect-ratio: 1) {

        .c-home-intro_asset.-item-1 {

            aspect-ratio: 1.7777777778

        }

    }



    @supports not (aspect-ratio: 1) {

        .c-home-intro_asset.-item-1 {

            height: 0;

            padding-top: calc(calc(0.2857142857 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.2857142857) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))*0.5625)

        }

    }



    .c-home-intro_asset.-item-2 {

        width: calc(0.4285714286 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.4285714286) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px));

        position: absolute;

        right: 0;

        bottom: calc(2rem + var(--grid-gutter) + 1em)

    }



    @supports(aspect-ratio: 1) {

        .c-home-intro_asset.-item-2 {

            aspect-ratio: 1.7777777778

        }

    }



    @supports not (aspect-ratio: 1) {

        .c-home-intro_asset.-item-2 {

            height: 0;

            padding-top: calc(calc(0.4285714286 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.4285714286) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))*0.5625)

        }

    }

}



@media(max-width: 499px) {

    .c-home-intro_asset.-item-1 {

        width: calc(0.5714285714 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.5714285714) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))

    }



    @supports(aspect-ratio: 1) {

        .c-home-intro_asset.-item-1 {

            aspect-ratio: 1.7777777778

        }

    }



    @supports not (aspect-ratio: 1) {

        .c-home-intro_asset.-item-1 {

            height: 0;

            padding-top: calc(calc(0.5714285714 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.5714285714) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))*0.5625)

        }

    }

}



@media(min-width: 700px) {

    .c-home-intro_asset.-item-1 {

        width: calc(0.2142857143 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.2142857143) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px));

        left: calc(0.5714285714*(100vw - 2*var(--grid-margin, 0px)) - (1 - 0.5714285714)*var(--grid-gutter, 0px) + 1*var(--grid-gutter, 0px))

    }



    @supports(aspect-ratio: 1) {

        .c-home-intro_asset.-item-1 {

            aspect-ratio: 1.7777777778

        }

    }



    @supports not (aspect-ratio: 1) {

        .c-home-intro_asset.-item-1 {

            height: 0;

            padding-top: calc(calc(0.2142857143 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.2142857143) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))*0.5625)

        }

    }



    .c-home-intro_asset.-item-2 {

        width: calc(0.2857142857 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.2857142857) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px));

        margin-left: auto

    }



    @supports(aspect-ratio: 1) {

        .c-home-intro_asset.-item-2 {

            aspect-ratio: 1.7777777778

        }

    }



    @supports not (aspect-ratio: 1) {

        .c-home-intro_asset.-item-2 {

            height: 0;

            padding-top: calc(calc(0.2857142857 * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 0.2857142857) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px))*0.5625)

        }

    }

}



.c-home-intro_label {

    position: absolute;

    width: 3.3em;

    height: 1em

}



.c-home-intro_label.-item-2,

.c-home-intro_label.-item-4 {

    top: calc(50% - .5em)

}



.c-home-intro_label.-item-1 {

    top: calc(50% - calc(50 * var(--vh, 1vh)) + var(--grid-gutter));

    left: calc(50% - 1.65em)

}



.c-home-intro_label.-item-2 {

    left: 0

}



.c-home-intro_label.-item-3 {

    bottom: calc(50% - calc(50 * var(--vh, 1vh)) + var(--grid-gutter));

    left: calc(50% - 1.65em)

}



.c-home-intro_label.-item-4 {

    right: 0

}



html:not(.has-home-intro) .c-home-intro_label {

    display: none

}



@media(max-width: 699px) {



    .c-home-intro_label.-item-2,

    .c-home-intro_label.-item-4 {

        display: none

    }

}



html.has-home-intro .c-home-intro_name {

    display: none

}



@media(max-width: 699px) {

    .c-home-intro_name {

        position: relative

    }

}



.c-home-intro_sub {

    z-index: 1;

    position: absolute;

    left: 0;

    bottom: var(--grid-gutter);

    width: 100%;

    text-align: center

}



html.has-home-intro .c-home-intro_sub {

    display: none

}



.c-sticky-panels {

    background-color: #ece7da

}



.c-sticky-panels_wrap {

    position: sticky;

    top: 0

}



@media(min-width: 1000px) {

    .c-sticky-panels_wrap {

        height: calc(calc(100 * var(--vh, 1vh))*2*var(--panels-count))

    }

}



@media(min-width: 1000px) {

    .c-sticky-panels_inner {

        position: sticky;

        top: 0;

        left: 0;

        height: calc(100%/(2*var(--panels-count)))

    }

}



@media(max-width: 999px) {

    .c-sticky-panels_item {

        padding-top: calc(7.5*var(--vh, 1vh))

    }



    .c-sticky-panels_item:last-child {

        padding-bottom: calc(7.5*var(--vh, 1vh))

    }

}



@media(min-width: 1000px) {

    .c-sticky-panels_item {

        position: absolute;

        top: 0;

        left: 0;

        display: grid;

        grid-template-rows: 1em auto 1em;

        grid-row-gap: var(--grid-gutter);

        padding-top: var(--grid-gutter);

        padding-bottom: var(--grid-gutter);

        width: 100%;

        height: 100%

    }



    .c-sticky-panels_item:not(:first-child) .c-asset {

        overflow: hidden

    }



    .c-sticky-panels_item:not(.is-active) {

        pointer-events: none

    }

}



.c-sticky-panels_link {

    display: block

}



.c-sticky-panels_link:hover~.c-sticky-panels_title .o-link:after {

    transform: scale(1);

    transform-origin: 0 50%

}



@media(min-width: 1000px) {

    .c-sticky-panels_link {

        grid-row-start: 2;

        align-self: center;

        width: 100%;

        height: 0;

        padding-top: 56.25%

    }



    .c-sticky-panels_link .c-asset,

    .c-sticky-panels_link.c-asset,

    .c-sticky-panels_link .c-asset_inner {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%

    }



    .c-sticky-panels_link .c-asset_element {

        height: 100%;

        -o-object-position: 50% 50%;

        object-position: 50% 50%;

        -o-object-fit: cover;

        object-fit: cover

    }

}



@media(min-width: 1000px) {

    .c-sticky-panels.-videos .c-sticky-panels_asset .c-asset_element {

        transition: .5s cubic-bezier(0.38, 0.005, 0.215, 1)

    }



    .c-sticky-panels.-videos .c-sticky-panels_item.is-active .c-sticky-panels_asset .c-asset_element {

        transform: scale(1.2)

    }

}



.c-sticky-panels_title {

    text-align: center

}



@media(max-width: 999px) {

    .c-sticky-panels_title {

        padding-top: var(--grid-gutter)

    }

}



@media(min-width: 1000px) {

    .c-sticky-panels_title {

        grid-row-start: 3;

        width: 100%

    }



    .c-sticky-panels_item:not(.is-active) .c-sticky-panels_title {

        opacity: 0

    }



    .c-sticky-panels_item.is-active .c-sticky-panels_title {

        z-index: 1

    }

}



.c-text-asset {

    text-align: center;

    background-color: inherit

}



.c-text-asset_title {

    max-width: 24em;

    margin-right: auto;

    margin-left: auto;

    padding-top: calc(2.5*var(--vh, 1vh));

    padding-bottom: calc(7.5*var(--vh, 1vh))

}



.c-text-asset_title:first-child {

    padding-top: calc(10*var(--vh, 1vh));

    padding-bottom: calc(10*var(--vh, 1vh))

}



.c-text-asset_desc {

    max-width: 18em;

    margin-left: auto;

    margin-right: auto

}



.c-project-list {

    --project-list-color-text: #ECE7DA;

    --project-list-color-bg: #000000

}



.c-project-list.-light {

    --project-list-color-text: #000000;

    --project-list-color-bg: #ECE7DA

}



@media(max-width: 999px) {

    .c-project-list .o-name {

        display: none;

        visibility: hidden

    }

}



@media(min-width: 1000px) {

    .c-project-list {

        height: calc(100*var(--vh, 1vh))

    }



    .c-project-list.is-hovering .o-name {

        opacity: 0

    }

}



.c-project-list_inner {

    color: var(--project-list-color-text);

    background-color: var(--project-list-color-bg)

}



@media(min-width: 1000px) {

    .c-project-list_inner {

        position: fixed;

        bottom: 0;

        left: 0;

        width: 100%

    }

}



.c-project-list_list {

    z-index: 2;

    text-align: center

}



@media(max-width: 999px) {

    .c-project-list_list {

        display: flex;

        align-items: center;

        flex-direction: column;

        padding-top: calc(15*var(--vh, 1vh));

        padding-bottom: calc(15*var(--vh, 1vh))

    }

}



@media(min-width: 1000px) {

    .c-project-list_list {

        -moz-columns: 2;

        columns: 2;

        -moz-column-gap: calc(0.1428571429*(100vw - 2*var(--grid-margin, 0px)) - (1 - 0.1428571429)*var(--grid-gutter, 0px) + 3*var(--grid-gutter, 0px));

        column-gap: calc(0.1428571429*(100vw - 2*var(--grid-margin, 0px)) - (1 - 0.1428571429)*var(--grid-gutter, 0px) + 3*var(--grid-gutter, 0px))

    }



    .c-project-list.is-hovering .c-project-list_list {

        z-index: 2

    }



    .c-project-list.is-hovering .c-project-list_list~.c-project-list_asset {

        opacity: 1

    }



    .c-project-list.is-hovering .c-project-list_list .c-project-list_link {

        color: rgba(255, 255, 255, .2)

    }

}



.c-project-list_item {

    margin-bottom: -0.4em

}



@media(min-width: 1000px) {

    .c-project-list_item {

        -moz-column-break-inside: avoid;

        break-inside: avoid

    }

}



.c-project-list_link {

    display: block;

    width: 100%;

    padding-top: .2em;

    padding-bottom: .2em;

    mix-blend-mode: difference

}



@media(min-width: 1000px) {

    .c-project-list_link {

        transition: opacity .1s cubic-bezier(0.38, 0.005, 0.215, 1)

    }



    .c-project-list_link:hover {

        color: #fff !important

    }

}



.c-project-list_asset {

    position: absolute;

    top: 50%;

    left: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 0;

    padding-top: 56.25%;

    pointer-events: none;

    transform: translate(0, -50%)

}



.c-project-list_asset video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: 50% 50%;

    object-position: 50% 50%;

    background-color: rgba(0, 0, 0, .2)

}



@media(max-width: 999px) {

    .c-project-list_asset {

        display: none;

        visibility: hidden

    }

}



@media(min-width: 1000px) {

    .c-project-list_asset {

        opacity: 0

    }

}



.c-project-list_name {

    z-index: 1;

    line-height: 1.25

}



.c-player {

    position: absolute;

    top: 0;

    left: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    overflow: hidden;

    transform-origin: 50% 0

}



.c-player .plyr {

    width: 100%

}



.c-player:not(.is-active):not(.is-playing) {

    pointer-events: none

}



.c-player.is-active {

    z-index: 2

}



.c-player_bg {

    position: absolute;

    left: 0;

    bottom: 50%;

    width: 100%;

    height: 50%;

    background-color: #ece7da

}



.c-player_poster {

    z-index: 3;

    position: absolute;

    top: 0;

    left: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    background-color: #000;

    overflow: hidden

}



.c-player_poster video {

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: 50% 50%;

    object-position: 50% 50%;

    pointer-events: none;

    transition: .5s cubic-bezier(0.38, 0.005, 0.215, 1)

}



.c-player.is-playing .c-player_poster {

    opacity: 0;

    pointer-events: none

}



.c-player.is-active .c-player_poster {

    cursor: pointer

}



.c-player.is-active .c-player_poster:hover video {

    transform: scale(1.2)

}



.c-player_play {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: #fff;

    mix-blend-mode: difference;

    transform: scale(0)

}



.c-player.is-active .c-player_play {

    transform: scale(1);

    transition: transform .3s cubic-bezier(0.38, 0.005, 0.215, 1)

}



.c-content {

    display: grid;

    grid-gap: 2.44em var(--grid-gutter)

}



.c-content p {

    text-indent: calc(1/var(--grid-columns)*(100vw - 2*var(--grid-margin, 0px)) - (1 - 1/var(--grid-columns))*var(--grid-gutter, 0px) + 1*var(--grid-gutter, 0px))

}



@media(min-width: 700px) {

    .c-content {

        grid-template-columns: repeat(2, minmax(0, 1fr))

    }

}



@media(max-width: 699px) {

    .c-content_col:not(:last-child):after {

        content: "";

        display: block;

        width: 1em;

        height: 1px;

        margin: calc(calc(5 * var(--vh, 1vh)) + 1.22*2em) auto calc(5*var(--vh, 1vh));

        background-color: currentColor

    }

}



.c-content_lang {

    position: absolute;

    top: 0;

    left: 0

}



.c-loader {

    --loader-duration-out: 0s;

    z-index: 300;

    position: inherit;

    inset: 0;

    color: #000;

    background-color: #ece7da;

    overflow: hidden

}



.c-loader>* {

    position: absolute !important;

    mix-blend-mode: unset !important;

    color: inherit !important

}



html.is-firstload .c-loader {

    --loader-duration-out: 200ms

}



html.is-firstload .c-loader>* {

    display: none !important

}



html.is-ready .c-loader {

    left: 200vw;

    opacity: 0;

    transition: left 0s var(--loader-duration-out), opacity var(--loader-duration-out) cubic-bezier(0.38, 0.005, 0.215, 1)

}



.c-styleguide {

    padding-top: calc(10*var(--vh, 1vh));

    padding-bottom: calc(10*var(--vh, 1vh))

}



.c-styleguide code {

    padding: .1em .4em;

    font-size: var(--font-size-body);

    color: #fff;

    background-color: #000

}



.c-styleguide_section {

    margin-bottom: calc(10*var(--vh, 1vh))

}



.c-styleguide_header {

    padding-top: .625rem;

    padding-bottom: .625rem;

    border-bottom: 1px solid currentColor

}



.c-styleguide_inner.-grid {

    display: grid;

    grid-gap: var(--grid-gutter);

    grid-template-columns: repeat(var(--grid-columns), calc(1/var(--grid-columns) * (100vw - 2 * var(--grid-margin, 0px)) - (1 - 1/var(--grid-columns)) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px)));

    margin-top: var(--grid-gutter)

}



.c-styleguide_item {

    padding-top: var(--grid-gutter)

}



.c-styleguide_inner.-grid .c-styleguide_item {

    grid-column: span 3;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--grid-gutter-half);

    padding-top: 0

}



.c-styleguide_inner.-grid .c-styleguide_item.-large {

    grid-column: span 7

}



.c-styleguide_square {

    width: 100%;

    padding-top: 50%

}



.u-2\:1::before {

    padding-bottom: 50%

}



.u-4\:3::before {

    padding-bottom: 75%

}



.u-16\:9::before {

    padding-bottom: 56.25%

}



.u-clearfix::after {

    display: block;

    clear: both;

    content: ""

}



.u-truncate {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    word-wrap: normal;

    max-width: 100%

}



[hidden][aria-hidden=false] {

    position: absolute;

    display: inherit;

    clip: rect(0, 0, 0, 0)

}



[hidden][aria-hidden=false]:focus {

    clip: auto

}



.u-screen-reader-text {

    position: absolute !important;

    overflow: hidden;

    clip: rect(0 0 0 0);

    margin: 0;

    padding: 0;

    width: 1px;

    height: 1px;

    border: 0

}



@media not print {

    .u-screen-reader-text\@screen {

        position: absolute !important;

        overflow: hidden;

        clip: rect(0 0 0 0);

        margin: 0;

        padding: 0;

        width: 1px;

        height: 1px;

        border: 0

    }

}



.u-screen-reader-text.-focusable:focus,

.u-screen-reader-text.-focusable:active {

    clip: auto;

    width: auto;

    height: auto

}





.e-word {

    position: absolute;

    right: 27px;

    top: -96px;

    width: 250px;

}



.l-word {

     right: 0;

}

.a-word {

    right: calc(27% - 0.65em);

    top: calc(22% - .65em);

}



.t-word {

    right: calc(20% - 0.65em);

    top: calc(22% - .65em);

}