abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none
}

ins {
    text-decoration: none
}

ins,
mark {
    background-color: #ff9;
    color: #000
}

mark {
    font-style: italic;
    font-weight: 700
}

del {
    text-decoration: line-through
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input,
select {
    vertical-align: middle
}

nav li,
nav ul {
    margin: 0;
    list-style: none;
    list-style-image: none
}

small {
    font-size: 85%
}

strong,
th {
    font-weight: 700
}

td {
    vertical-align: top
}

.ie6 legend,
.ie7 legend {
    margin-left: -7px
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

button,
input[type=button],
input[type=image],
input[type=submit],
label {
    cursor: pointer
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

[hidden],
audio:not([controls]) {
    display: none
}

svg:not(:root) {
    overflow: hidden
}

html {
    font-size: 100.01%
}

button,
input,
select,
textarea {
    font: 99% sans-serif
}

code,
kbd,
pre,
samp {
    font-family: monospace, sans-serif
}

input[type=radio] {
    vertical-align: text-bottom
}

input[type=checkbox] {
    vertical-align: bottom
}

.ie7 input[type=checkbox] {
    vertical-align: baseline
}

.ie6 input {
    vertical-align: text-bottom
}

button,
input,
select,
textarea {
    margin: 0
}

input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical
}

.ie7 img {
    -ms-interpolation-mode: bicubic
}

button,
optgroup,
select {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

legend {
    border: 0;
    padding: 0
}

optgroup {
    font-weight: 700
}

html {
    image-rendering: optimizeQuality;
    -webkit-font-smoothing: antialiased;
    -ms-interpolation-mode: nearest-neighbor
}

body {
    font: 62.5%/1.5 sans-serif;
    *font-size: small;
    -moz-osx-font-smoothing: grayscale
}

body,
html {
    height: 100%;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

a {
    text-decoration: none;
    outline: none
}

:focus {
    outline: 0
}

adress,
a img,
fieldset,
form,
img,
input,
li,
object,
ol,
p,
ul {
    border: 0
}

b {
    font-weight: 700
}

i {
    font-style: italic
}

u {
    text-decoration: underline
}

@media print {
    * {
        background: transparent!important;
        color: #000!important;
        text-shadow: none!important;
        -webkit-filter: none!important;
        filter: none!important;
        -ms-filter: none!important
    }
    a,
    a:visited {
        text-decoration: underline
    }
    a[href]:after {
        content: " (" attr(href) ")"
    }
    abbr[title]:after {
        content: " (" attr(title) ")"
    }
    .ir a:after,
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: ""
    }
    blockquote,
    pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }
    thead {
        display: table-header-group
    }
    img,
    tr {
        page-break-inside: avoid
    }
    img {
        max-width: 100%!important
    }
    @page {
        margin: .5cm
    }
    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }
    h2,
    h3 {
        page-break-after: avoid
    }
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0
}

.first,
.last {
    background: none;
    margin: 0;
    padding: 0
}

.hide {
    position: absolute;
    left: -99999px
}

.fl-l {
    float: left!important
}

.fl-r {
    float: right!important
}

.ta-l {
    text-align: left!important
}

.ta-c {
    text-align: center!important
}

.ta-r {
    text-align: right!important
}

.ta-j {
    text-align: justify!important
}

.dp-b {
    display: block!important
}

.dp-i {
    display: inline!important
}

.dp-ib {
    display: inline-block!important
}

.dp-no {
    display: none
}

.dp-t {
    display: table!important
}

.dp-tc {
    display: table-cell!important
}

.vs-1 {
    visibility: visible!important
}

.vs-0 {
    visibility: hidden!important
}

.pos-0 {
    position: relative;
    overflow: hidden
}

.pos-l {
    left: 0
}

.pos-l,
.pos-r {
    position: absolute
}

.pos-r {
    right: 0
}

.pos-t {
    top: 0
}

.pos-b,
.pos-t {
    position: absolute
}

.pos-b {
    bottom: 0
}

.ov-h {
    overflow: hidden!important
}

.ov-a {
    overflow: auto!important
}

.ov-s {
    overflow: scroll!important
}

.cl-0 {
    clear: none!important
}

.cl-l {
    clear: left!important
}

.cl-b {
    clear: both!important
}

.cl-r {
    clear: right!important
}

.fx-br {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}

.fx-bw {
    box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000
}

.fx-op {
    filter: alpha(opacity=50);
    opacity: .5;
    -khtml-opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    -moz-opacity: .5
}

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0
}

.ajaxhidden {
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden
}

.gcontainer {
    margin: 20px auto;
    position: relative;
    text-align: left
}

.gcols {
    margin-bottom: 1.5em;
    overflow: hidden
}

.gcol,
.gcol2,
.gcol3,
.gcol4,
.gcol5 {
    float: left;
    display: inline;
    margin-left: 2%
}

.gcol:first-child,
.gcols .first {
    margin-left: 0!important
}

.gcol {
    width: 49%
}

.gcols3 .gcol {
    width: 32%
}

.gcols4 .gcol {
    width: 23.5%
}

.gcols5 .gcol {
    width: 18.4%
}

.gcols6 .gcol {
    width: 15%
}

.gcols3 .gcol2 {
    width: 66%
}

.gcols4 .gcol2 {
    width: 49%
}

.gcols5 .gcol2 {
    width: 38.8%
}

.gcols6 .gcol2 {
    width: 32%
}

.gcols4 .gcol3 {
    width: 74.5%
}

.gcols5 .gcol3 {
    width: 59.2%
}

.gcols6 .gcol3 {
    width: 49%
}

.gcols5 .gcol4 {
    width: 79.6%
}

.gcols6 .gcol4 {
    width: 66%
}

.gcols6 .gcol5 {
    width: 83%
}

@font-face {
    font-family: PostGrotesk-Bold;
    src: url("../fonts/PostGrotesk-Bold.html") format("woff2"), url("../fonts/PostGrotesk-Bold.woff") format("woff"), url("../fonts/PostGrotesk-Bold-2.html") format("opentype");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: PostGrotesk-Book;
    src: url("../fonts/PostGrotesk-Book.html") format("woff2"), url("../fonts/PostGrotesk-Book.woff") format("woff"), url("../fonts/PostGrotesk-Book.otf") format("opentype");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: PostGrotesk-Light;
    src: url("../fonts/PostGrotesk-Light.woff2") format("woff2"), url("../fonts/PostGrotesk-Light.woff") format("woff"), url("../fonts/PostGrotesk-Light.otf") format("opentype");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: PostGrotesk-Medium;
    src: url("../fonts/PostGrotesk-Medium.html") format("woff2"), url("../fonts/PostGrotesk-Medium.woff") format("woff"), url("../fonts/PostGrotesk-Medium-2.html") format("opentype");
    font-style: normal;
    font-weight: 400
}

.btn-cta1 .text,
.description b,
.description strong,
.description sup,
.workspace-dispatch__alphabet .btn {
    font-family: PostGrotesk-Bold, sans-serif;
    font-style: normal;
    font-weight: 400
}

.breadcrumb li,
.btn-discover,
.btn-filter .text,
.btn-switch .text,
.description.is--smaller,
.fixed-nav__menu li,
.h4,
.h5,
.logo-index,
.secondary-nav__menu li,
.social li,
.ss-horizontal__cursor .text,
.video-bg.with--controls .timer span,
.workspace-list__item .link-context {
    font-family: PostGrotesk-Book, sans-serif;
    font-style: normal;
    font-weight: 400
}

.about-clients .entry,
.about .solitaire .text,
.description,
.description h3,
.h1,
.h2,
.primary-nav__menu li,
.quote .author,
.stats__item .value,
.workspace-dispatch__collection .btn .text,
.workspace-dispatch__form .fieldlabel,
.workspace-dispatch__form .fieldtext,
.workspace-dispatch__form .matches li {
    font-family: PostGrotesk-Light, sans-serif;
    font-style: normal;
    font-weight: 400
}

.contact .tagline,
.h6,
.social li:first-child {
    font-family: PostGrotesk-Medium, sans-serif;
    font-style: normal;
    font-weight: 400
}

.grid {
    display: block;
    padding: 0;
    margin: 0 -22.5px;
    text-align: left;
    letter-spacing: -.31em;
    text-rendering: optimizespeed
}

.grid.no--gutter {
    margin: 0
}

.grid,
.opera:-o-prefocus {
    word-spacing: -.43em
}

.grid>.grid {
    overflow: hidden;
    margin-right: 0;
    margin-left: 0
}

.grid__cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0 22.5px;
    vertical-align: top;
    text-align: left;
    letter-spacing: normal;
    word-spacing: normal;
    text-rendering: auto
}

.no--gutter .grid__cell {
    padding: 0
}

.grid--center {
    text-align: center
}

.grid--left {
    text-align: left
}

.grid--right {
    text-align: right
}

.grid__cell--center {
    display: block;
    margin: 0 auto
}

.grid__cell--left {
    display: block;
    margin-right: auto
}

.grid__cell--right {
    display: block;
    margin-left: auto
}

@font-face {
    font-family: icomoon;
    src: url("../fonts/icomoon8e8b.ttf?f92on7") format("truetype"), url("../fonts/icomoon8e8b.woff?f92on7") format("woff"), url("../fonts/icomoon8e8b.svg?f92on7#icomoon") format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=" icon-"],
[class^=icon-] {
    font-family: icomoon!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-fullscreen:before {
    content: "\E900"
}

.icon-pause:before {
    content: "\E901"
}

.icon-play:before {
    content: "\E902"
}

.btn-cta1 .text:after,
.btn-play .shape:after,
.btn-play:after,
.btn-play:before,
.btn-switch .state:before,
.fixed-nav__menu li a:after,
.home-slideshow__timer .shape:before,
.introduction:after,
.poster-single.with--border.y-bottom .subinner:before,
.poster-single.with--border.y-center .subinner:after,
.poster-single.with--border.y-center .subinner:before,
.poster-single.with--border.y-top .subinner:after,
.ss-horizontal__cursor:before,
.ss-separator,
.video-bg.center--block .subinner:after,
.video-bg.center--block .subinner:before,
.workspace-dispatch__alphabet .btn:after,
.workspace-list__item:after {
    content: " ";
    display: block
}

.cover .bg,
.cover .bg-mobile,
.home-slideshow__item .bg,
.home-slideshow__item .bg-mobile,
.poster-full .bg {
    left: 0;
    position: absolute;
    top: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    display: block;
    height: 100%;
    width: 100%
}

.cover .bg-mobile img,
.cover .bg img,
.home-slideshow__item .bg-mobile img,
.home-slideshow__item .bg img,
.poster-full .bg img {
    display: none
}

.contact .tagline,
.home-slideshow__item .video-bg,
.ss-horizontal__item .visual,
.ss-horizontal__item.with--border .shadow,
.video-bg .btn-play,
.video-bg.center--block .poster {
    left: 50%;
    position: absolute;
    top: 50%;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.cover,
.cover-dummy,
.introduction,
.poster-full,
.quote,
.single-next,
.single-next__dummy {
    height: 100vh
}

.safari.ios8 .cover,
.safari.ios8 .cover-dummy,
.safari.ios8 .introduction,
.safari.ios8 .poster-full,
.safari.ios8 .quote,
.safari.ios8 .single-next,
.safari.ios8 .single-next__dummy,
.safari.ios9 .cover,
.safari.ios9 .cover-dummy,
.safari.ios9 .introduction,
.safari.ios9 .poster-full,
.safari.ios9 .quote,
.safari.ios9 .single-next,
.safari.ios9 .single-next__dummy,
.safari.ios10 .cover,
.safari.ios10 .cover-dummy,
.safari.ios10 .introduction,
.safari.ios10 .poster-full,
.safari.ios10 .quote,
.safari.ios10 .single-next,
.safari.ios10 .single-next__dummy,
.safari.ios11 .cover,
.safari.ios11 .cover-dummy,
.safari.ios11 .introduction,
.safari.ios11 .poster-full,
.safari.ios11 .quote,
.safari.ios11 .single-next,
.safari.ios11 .single-next__dummy {
    height: -webkit-calc(100vh - 25px);
    height: calc(100vh - 25px)
}

.btn-discover,
.btn-filter,
.btn-menu,
.btn-play,
.btn-switch,
.home-slideshow__next,
.home-slideshow__previous,
.jsTrigger-mailto,
.video-bg.with--controls .fullscreen button,
.video-bg.with--controls .playpause button,
.workspace-dispatch__alphabet .btn,
.workspace-dispatch__collection .btn {
    border: 0 none;
    background: none;
    padding: 0
}

.about-clients .entry,
.fixed-nav__menu li a,
.secondary-nav__menu li a,
.social li a,
.video-bg.with--controls .fullscreen button,
.workspace-dispatch__alphabet .btn,
.workspace-dispatch__collection .btn .text {
    -webkit-transition: color .4s cubic-bezier(.215, .61, .355, 1);
    transition: color .4s cubic-bezier(.215, .61, .355, 1)
}

.contact .gwrapper .h2,
.description a,
.logo-index a:after,
.single-next .inner .h1 .false-link,
.video-bg.video--iosAutoplay .btn-play {
    opacity: 1;
    -webkit-transition: opacity .4s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .4s cubic-bezier(.215, .61, .355, 1)
}

.about-prez .description,
.about-prez .h6,
.detail__item,
.poster-text .inner .description,
.quote .author,
.quote .description,
.single-next .inner .h1,
.single-next .inner .h6,
.stats__item {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: opacity .9s cubic-bezier(.215, .61, .355, 1), -webkit-transform 1s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .9s cubic-bezier(.215, .61, .355, 1), -webkit-transform 1s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .9s cubic-bezier(.215, .61, .355, 1), transform 1s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .9s cubic-bezier(.215, .61, .355, 1), transform 1s cubic-bezier(.215, .61, .355, 1), -webkit-transform 1s cubic-bezier(.215, .61, .355, 1)
}

.about-prez.is--shown .description,
.about-prez.is--shown .h6,
.introduction.is--shown .inner .description,
.is--shown .detail__item,
.is--shown .stats__item,
.poster-text.is--shown .description,
.quote.is--shown .author,
.quote.is--shown .description,
.single-next.is--shown .h1,
.single-next.is--shown .h6 {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.intertext .inner .description,
.poster-full .bg,
.poster-multiple .item .visual,
.poster-multiple .item.with--border .border,
.poster-single.with--border .border,
.poster-single.x-center .visual,
.poster-single.x-left .visual,
.poster-single.x-right .visual,
.poster-text .inner .visual,
.poster-text.with--border .border,
.quote .fill,
.ss-horizontal__inner,
.stats .fill,
.video-bg.with--border .border,
.video-bg.with--border .element,
.video-bg.with--controls .btn-play {
    opacity: 0;
    -webkit-transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .9s cubic-bezier(.215, .61, .355, 1)
}

.intertext.is--shown .description,
.is--shown .ss-horizontal__inner,
.poster-full.is--shown .bg,
.poster-multiple.is--shown .item .border,
.poster-multiple.is--shown .item .visual,
.poster-single.is--shown .border,
.poster-single.is--shown .visual,
.poster-text.is--shown .border,
.poster-text.is--shown .visual,
.quote.is--shown .fill,
.stats.is--shown .fill,
.video-bg.is--shown .border,
.video-bg.is--shown .btn-play,
.video-bg.is--shown .element,
.video-bg.is--shown .poster {
    opacity: 1
}

.btn-play .shape,
.video-bg.with--controls .fullscreen button:before,
.video-bg.with--controls .playpause button:before {
    font-family: icomoon;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.gwrapper {
    margin: 0 auto;
    max-width: 1800px;
    width: 70%
}

@media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-width:768px) and (max-width:1024px) {
    .gwrapper {
        width: 75%
    }
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .gwrapper {
        width: 65%
    }
}

.main-transition {
    bottom: 0;
    right: 0;
    background-color: #fff;
    opacity: 0;
    z-index: 55
}

.main-progress,
.main-transition {
    left: 0;
    position: absolute;
    top: 0;
    pointer-events: none;
    position: fixed
}

.main-progress {
    height: 4px;
    background-color: #000;
    will-change: transform;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    width: 100%;
    z-index: 65
}

@-webkit-keyframes animExit {
    0% {
        top: 72px
    }
    to {
        top: -40px
    }
}


@keyframes animExit {
    0% {
        top: 72px
    }
    to {
        top: -40px
    }
}

@-webkit-keyframes animHide {
    0% {
        top: 72px
    }
    to {
        top: -40px
    }
}

@keyframes animHide {
    0% {
        top: 72px
    }
    to {
        top: -40px
    }
}

@-webkit-keyframes animExitMobile {
    0% {
        top: 20px
    }
    to {
        top: -40px
    }
}

@keyframes animExitMobile {
    0% {
        top: 20px
    }
    to {
        top: -40px
    }
}

@-webkit-keyframes animHideMobile {
    0% {
        top: 20px
    }
    to {
        top: -40px
    }
}

@keyframes animHideMobile {
    0% {
        top: 20px
    }
    to {
        top: -40px
    }
}

@-webkit-keyframes btnMenuShape1 {
    0% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
    50% {
        -webkit-transform: translateY(3px) rotate(0deg);
        transform: translateY(3px) rotate(0deg)
    }
    to {
        -webkit-transform: translateY(3px) rotate(45deg);
        transform: translateY(3px) rotate(45deg)
    }
}

@keyframes btnMenuShape1 {
    0% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
    50% {
        -webkit-transform: translateY(3px) rotate(0deg);
        transform: translateY(3px) rotate(0deg)
    }
    to {
        -webkit-transform: translateY(3px) rotate(45deg);
        transform: translateY(3px) rotate(45deg)
    }
}

@-webkit-keyframes btnMenuShape1Exit {
    0% {
        -webkit-transform: translateY(3px) rotate(45deg);
        transform: translateY(3px) rotate(45deg)
    }
    50% {
        -webkit-transform: translateY(3px) rotate(0deg);
        transform: translateY(3px) rotate(0deg)
    }
    to {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes btnMenuShape1Exit {
    0% {
        -webkit-transform: translateY(3px) rotate(45deg);
        transform: translateY(3px) rotate(45deg)
    }
    50% {
        -webkit-transform: translateY(3px) rotate(0deg);
        transform: translateY(3px) rotate(0deg)
    }
    to {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
}

@-webkit-keyframes btnMenuShape2 {
    0% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
    50% {
        -webkit-transform: translateY(-3px) rotate(0deg);
        transform: translateY(-3px) rotate(0deg)
    }
    to {
        -webkit-transform: translateY(-3px) rotate(-45deg);
        transform: translateY(-3px) rotate(-45deg)
    }
}

@keyframes btnMenuShape2 {
    0% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
    50% {
        -webkit-transform: translateY(-3px) rotate(0deg);
        transform: translateY(-3px) rotate(0deg)
    }
    to {
        -webkit-transform: translateY(-3px) rotate(-45deg);
        transform: translateY(-3px) rotate(-45deg)
    }
}

@-webkit-keyframes btnMenuShape2Exit {
    0% {
        -webkit-transform: translateY(-3px) rotate(-45deg);
        transform: translateY(-3px) rotate(-45deg)
    }
    50% {
        -webkit-transform: translateY(-3px) rotate(0deg);
        transform: translateY(-3px) rotate(0deg)
    }
    to {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes btnMenuShape2Exit {
    0% {
        -webkit-transform: translateY(-3px) rotate(-45deg);
        transform: translateY(-3px) rotate(-45deg)
    }
    50% {
        -webkit-transform: translateY(-3px) rotate(0deg);
        transform: translateY(-3px) rotate(0deg)
    }
    to {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
}

@-webkit-keyframes caret {
    0%,

    to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}

@keyframes caret {
    0%,
    to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}

.btn-discover {
    left: 0;
    position: absolute;
    top: 0;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 1;
    margin: -15px 0 0;
    position: fixed;
    text-transform: capitalize;
    z-index: 5
}

@media only screen and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-width:1024px) {
    .btn-discover {
        display: none
    }
}

.btn-discover.for--works {
    color: #fff;
    left: -60px;
    pointer-events: none;
    mix-blend-mode: difference;
    visibility: hidden
}

.btn-discover.for--works.is--active {
    visibility: visible
}

.btn-filter {
    left: -7px;
    position: absolute;
    top: 50%;
    display: block;
    margin: -9px 0 0;
    position: fixed;
    width: 120px;
    z-index: 52
}

@media only screen and (max-width:767px) {
    .btn-filter {
        left: -35px
    }
}

.btn-filter .text {
    color: rgba(0, 0, 0, .28);
    display: block;
    font-size: 12px;
    font-size: .75rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: color .2s cubic-bezier(.215, .61, .355, 1);
    transition: color .2s cubic-bezier(.215, .61, .355, 1)
}

.dispatch--isOpened .btn-filter .text {
    color: #606060
}

@media only screen and (max-width:767px) {
    .btn-filter .text {
        font-size: 10px;
        font-size: .625rem
    }
}

.btn-filter:hover .text {
    color: #000
}

.dispatch--isOpened .btn-filter:hover .text {
    color: #fff
}

.btn-menu {
    position: absolute;
    right: 0;
    top: 50%;
    height: 10px;
    margin: -5px 0 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
    transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
    transition: transform .2s cubic-bezier(.215, .61, .355, 1);
    transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
    width: 24px
}

.ui--menuShow .btn-menu {
    -webkit-transform: scale(1);
    transform: scale(1)
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .btn-menu {
        margin: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
        top: 10px
    }
}

.btn-menu .shape {
    display: block;
    height: 100%;
    width: 100%
}

.btn-menu .shape div {
    left: 0;
    position: absolute;
    top: 0;
    background: #000;
    display: block;
    height: 2px;
    -webkit-transition: background .5s cubic-bezier(.645, .045, .355, 1);
    transition: background .5s cubic-bezier(.645, .045, .355, 1);
    width: 100%
}

.currentView--works .btn-menu .shape div {
    background: #1a1a1a
}

.currentView--about .btn-menu .shape div,
.currentView--contact .btn-menu .shape div,
.currentView--home .btn-menu .shape div,
.mainnav--isOpened .btn-menu .shape div,
.skin--isWhite .btn-menu .shape div {
    background: #fff
}

.mainnav--isOpened .btn-menu .shape div:first-child {
    -webkit-animation: btnMenuShape1 1s 0s 1 cubic-bezier(.165, .84, .44, 1) both;
    animation: btnMenuShape1 1s 0s 1 cubic-bezier(.165, .84, .44, 1) both
}

.mainnav--isLeaving .btn-menu .shape div:first-child {
    -webkit-animation: btnMenuShape1Exit 1s 0s 1 cubic-bezier(.165, .84, .44, 1) both!important;
    animation: btnMenuShape1Exit 1s 0s 1 cubic-bezier(.165, .84, .44, 1) both!important
}

.btn-menu .shape div:nth-child(2) {
    top: 6px
}

.mainnav--isOpened .btn-menu .shape div:nth-child(2) {
    -webkit-animation: btnMenuShape2 1s 0s 1 cubic-bezier(.165, .84, .44, 1) both;
    animation: btnMenuShape2 1s 0s 1 cubic-bezier(.165, .84, .44, 1) both
}

.mainnav--isLeaving .btn-menu .shape div:nth-child(2) {
    -webkit-animation: btnMenuShape2Exit 1s 0s 1 cubic-bezier(.165, .84, .44, 1) both!important;
    animation: btnMenuShape2Exit 1s 0s 1 cubic-bezier(.165, .84, .44, 1) both!important
}

.btn-cta1 {
    display: block;
    line-height: 1
}

.btn-cta1 .text {
    color: #fff;
    font-size: 12px;
    font-size: .75rem;
    letter-spacing: .2px;
    position: relative;
    text-transform: uppercase
}

.btn-cta1 .text:after {
    left: 0;
    position: absolute;
    top: auto;
    background-color: #fff;
    bottom: -5px;
    height: 2px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
    transition: transform .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    -webkit-transform-origin: left 0;
    transform-origin: left 0;
    width: 100%
}

.btn-cta1.is--hovered .text:after {
    -webkit-transform-origin: right 0;
    transform-origin: right 0
}

.btn-cta1:hover .text:after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.btn-switch {
    position: absolute;
    right: 5px;
    top: 50%;
    display: block;
    margin: -9px 0 0;
    position: fixed;
    z-index: 4
}

@media only screen and (max-width:767px) {
    .btn-switch {
        display: none
    }
}

.btn-switch .inner {
    display: block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.btn-switch .text {
    color: #bebebe;
    font-size: 12px;
    font-size: .75rem;
    -webkit-transition: color .4s cubic-bezier(.215, .61, .355, 1);
    transition: color .4s cubic-bezier(.215, .61, .355, 1)
}

.btn-switch .text:first-child {
    color: #1a1a1a
}

.btn-switch .state {
    background-color: #d8d8d8;
    -webkit-border-radius: 1.5px;
    border-radius: 1.5px;
    display: inline-block;
    height: 2px;
    margin: 0 12px;
    position: relative;
    top: -3px;
    width: 20px
}

.btn-switch .state:before {
    left: 0;
    position: absolute;
    top: -4px;
    background-color: #9b9b9b;
    border: 1px solid #fff;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 8px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
    transition: -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
    width: 8px
}

.btn-switch.mode--list .text:first-child {
    color: #bebebe
}

.btn-switch.mode--list .text:nth-child(3) {
    color: #1a1a1a
}

.btn-switch.mode--list .state:before {
    -webkit-transform: translateX(13px);
    transform: translateX(13px)
}

.btn-switch:hover {
    cursor: pointer
}

.btn-play {
    height: 82px;
    opacity: 1;
    position: relative;
    width: 82px
}

.btn-play .shape {
    left: 50%;
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 15px;
    margin: -6.5px 0 0 -2px;
    -webkit-transition: color .5s cubic-bezier(.215, .61, .355, 1);
    transition: color .5s cubic-bezier(.215, .61, .355, 1);
    z-index: 1
}

.btn-play .shape:before {
    content: "\E902"
}

.btn-play .shape:after {
    left: 1px;
    position: absolute;
    top: 1px;
    border-style: solid;
    border-width: 6.5px 0 6.5px 11px;
    border-color: transparent transparent transparent #000;
    clip: rect(0, 0, 15px, 0);
    height: 0;
    -webkit-transition: clip .5s cubic-bezier(.215, .61, .355, 1);
    transition: clip .5s cubic-bezier(.215, .61, .355, 1);
    width: 0
}

.btn-play:before {
    background-color: #fff;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    margin: -39px 0 0 -39px;
    opacity: 0;
    -webkit-transition: opacity .4s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .4s cubic-bezier(.215, .61, .355, 1)
}

.btn-play:after,
.btn-play:before {
    left: 50%;
    position: absolute;
    top: 50%;
    height: 100%;
    width: 100%
}

.btn-play:after {
    border: 2px solid hsla(0, 0%, 100%, .2);
    -webkit-border-radius: 100%;
    border-radius: 100%;
    margin: -41px 0 0 -41px
}

.btn-play:hover:before {
    opacity: 1
}

.btn-play:hover .shape {
    color: #000
}

.btn-play:hover .shape:after {
    clip: rect(0, 12px, 15px, 0)
}

.unit-1-2,
.unit-2-4,
.unit-5-10,
.unit-10-20 {
    width: 50%
}

.unit-1-3 {
    width: 33.33333333%
}

.unit-2-3 {
    width: 66.66666667%
}

.unit-1-4,
.unit-5-20 {
    width: 25%
}

.unit-3-4,
.unit-15-20 {
    width: 75%
}

.unit-1-10,
.unit-2-20 {
    width: 10%
}

.unit-2-10 {
    width: 20%
}

.unit-3-10,
.unit-6-20 {
    width: 30%
}

.unit-4-10 {
    width: 40%
}

.unit-6-10 {
    width: 60%
}

.unit-7-10,
.unit-14-20 {
    width: 70%
}

.unit-8-10 {
    width: 80%
}

.unit-9-10,
.unit-18-20 {
    width: 90%
}

.unit-1-20 {
    width: 5%
}

.unit-3-20 {
    width: 15%
}

.unit-4-20 {
    width: 20%
}

.unit-7-20 {
    width: 35%
}

.unit-8-20 {
    width: 40%
}

.unit-9-20 {
    width: 45%
}

.unit-11-20 {
    width: 55%
}

.unit-12-20 {
    width: 60%
}

.unit-13-20 {
    width: 65%
}

.unit-16-20 {
    width: 80%
}

.unit-17-20 {
    width: 85%
}

.unit-19-20 {
    width: 95%
}

.logo-index {
    left: 45px;
    position: absolute;
    top: auto;
    bottom: 55px;
    color: #1a1a1a;
    font-size: 14px;
    font-size: .875rem;
    position: fixed;
    -webkit-transition: color .5s cubic-bezier(.645, .045, .355, 1);
    transition: color .5s cubic-bezier(.645, .045, .355, 1);
    z-index: 60
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .logo-index {
        bottom: auto;
        color: #1a1a1a;
        left: 30px;
        position: absolute;
        top: 24px
    }
}

.currentView--about .logo-index,
.currentView--contact .logo-index,
.dispatch--isOpened .logo-index {
    color: #fff
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .currentView--home .logo-index {
        color: #fff
    }
}

.mainnav--isOpened .logo-index {
    color: #fff
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .mainnav--isOpened .logo-index {
        color: #fff!important;
        position: fixed
    }
}

.skin--bottomIsWhite .logo-index {
    color: #fff
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .skin--bottomIsWhite .logo-index {
        color: #1a1a1a
    }
}

.logo-index a {
    color: inherit;
    display: block;
    left: -22px;
    position: relative;
    top: -15px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .logo-index a {
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        top: 0
    }
}

.logo-index a:after {
    content: "/";
    display: inline-block;
    margin: 0 0 0 10px;
    opacity: .2
}

.mainnav--isOpened .logo-index a:after {
    opacity: 0
}

.currentView--about .logo-index a:after,
.currentView--contact .logo-index a:after {
    opacity: 1
}

.dispatch--isOpened .logo-index a:after {
    opacity: .7
}

.currentView--home .logo-index a:after {
    opacity: 0
}

.skin--bottomIsWhite .logo-index a:after {
    opacity: 1
}

.social {
    list-style: none;
    position: relative
}

.social li {
    font-size: 14px;
    font-size: .875rem;
    line-height: 1.71428571
}

.social li:first-child {
    color: #fff;
    font-size: 12px;
    font-size: .75rem;
    margin: 0 0 25px;
    text-transform: uppercase
}

@media only screen and (max-width:767px) {
    .social li:first-child {
        margin: 0 0 15px
    }
}

.social li a {
    color: #9b9b9b
}

.social li a:hover {
    color: hsla(0, 0%, 61%, .7)
}

.description {
    color: #000;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.6
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .description {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.75
    }
}

.description p {
    display: block
}

.description em,
.description i {
    font-style: italic
}

.description a {
    color: inherit;
    opacity: 1;
    padding: 0 0 3px;
    position: relative;
    text-decoration: none
}

.description a:hover {
    opacity: .7
}

.description ul {
    list-style: none
}

.description ul li {
    display: block;
    float: left;
    margin: 0;
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .description ul li {
        float: none;
        width: 100%
    }
}

.description sup {
    color: #bebebe;
    font-size: 9px;
    font-size: .5625rem;
    margin: 0 2px;
    position: relative;
    top: -13px
}

.description h3 {
    color: #1a1a1a;
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 1.33333333
}

.description.is--xlarger {
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 1.84615385
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .description.is--xlarger {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 2.1
    }
}

.description.is--larger {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2
}

.description.is--smaller {
    font-size: 16px;
    font-size: 1rem;
    line-height: 2
}

.h1 {
    font-size: 60px;
    font-size: 3.75rem;
    line-height: 1.2
}

.h1 a {
    color: inherit
}

.h2 {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 1
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .h2 {
        font-size: 30px;
        font-size: 1.875rem
    }
}

.h4 {
    font-size: 20px;
    font-size: 1.25rem
}

.h5 {
    font-size: 14px;
    font-size: .875rem;
    line-height: 1.71428571
}

.h6 {
    font-size: 12px;
    font-size: .75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase
}

.text__color--white {
    color: #fff
}

.text__color--black {
    color: #000
}

.text__color--loud {
    color: #1a1a1a
}

.text__color--light {
    color: #9b9b9b
}

body {
    background: #fff
}

body.cursor-disabled * {
    cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), none
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    body.cursor-disabled * {
        cursor: auto
    }
}

#master {
    min-height: 100%;
    overflow: hidden
}

#master,
.main-content {
    height: auto;
    position: relative;
    width: 100%;
}

.main-content {
    display: block;
    z-index: 0
}

.currentView--contact .main-content,
.currentView--home .main-content {
    height: 100%;
    position: absolute;
}

.barba-container {
    min-height: 100%;
    position: relative
}

.barba-container.for--works {
    overflow: hidden
}

.v-desktop {
    display: block
}

@media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-width:768px) and (max-width:1024px) {
    .v-desktop {
        display: none
    }
}

@media only screen and (max-width:767px) {
    .v-desktop {
        display: none
    }
}

.v-tablet {
    display: none
}

@media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-width:768px) and (max-width:1024px) {
    .v-tablet {
        display: block
    }
}

@media only screen and (max-width:767px) {
    .v-tablet {
        display: none
    }
}

.v-desktoptablet {
    display: block
}

@media only screen and (max-width:767px) {
    .v-desktoptablet {
        display: none!important
    }
}

.v-tabletportrait {
    display: none
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .v-tabletportrait {
        display: block!important
    }
}

.v-tabletmobile {
    display: none
}

@media only screen and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-width:1024px) {
    .v-tabletmobile {
        display: block!important
    }
}

.v-mobile {
    display: none
}

@media only screen and (max-width:767px) {
    .v-mobile {
        display: block!important
    }
}

.zview-foreground {
    position: relative;
    z-index: 1
}

.zview-background {
    position: relative;
    z-index: 0
}

.main-nav {
    position: absolute;
    display: block;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 52
}

.main-nav,
.main-nav .fill {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

.main-nav .fill {
    position: absolute;
    background-color: #000;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 0
}

.mainnav--isOpened .main-nav {
    pointer-events: auto
}

.ie8.mainnav--isOpened .main-nav,
.ie9.mainnav--isOpened .main-nav,
.ie10.mainnav--isOpened .main-nav,
.oldie.mainnav--isOpened .main-nav {
    display: block
}

.ie8 .main-nav,
.ie9 .main-nav,
.ie10 .main-nav,
.oldie .main-nav {
    display: none
}

.main-nav__inner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 90px;
    position: relative;
    text-align: right;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .main-nav__inner {
        padding: 0 30px;
        text-align: left
    }
}

.primary-nav {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 50%;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: relative
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .primary-nav {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        height: 70%
    }
}

@media only screen and (max-width:767px) {
    .primary-nav {
        height: 100%
    }
}

.primary-nav__menu {
    list-style: none;
    position: relative;
    z-index: 1
}

.primary-nav__menu li {
    display: block;
    font-size: 60px;
    font-size: 3.75rem;
    line-height: 1.2;
    opacity: 0
}

.primary-nav__menu li a {
    color: #fff
}

.primary-nav__canvas {
    left: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%
}

.primary-nav__canvas canvas {
    left: 0;
    position: absolute;
    top: auto;
    bottom: 0
}

.secondary-nav {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 50%;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 0 0 135px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .secondary-nav {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 0 0 70px
    }
}

.secondary-nav__menu {
    list-style: none;
    position: relative
}

.secondary-nav__menu li {
    display: block;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0
}

.secondary-nav__menu li a {
    color: #fff
}

.secondary-nav__menu li a:hover {
    color: hsla(0, 0%, 100%, .6)
}

.fixed-nav {
    position: absolute;
    right: 90px;
    top: 85px;
    opacity: 1;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1);
    z-index: 50
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .fixed-nav {
        display: none
    }
}

.dispatch--isOpened .fixed-nav,
.view--isReverted .fixed-nav {
    opacity: 0;
    pointer-events: none
}

.fixed-nav__menu {
    list-style: none;
    position: relative
}

.fixed-nav__menu li {
    display: inline-block;
    font-size: 14px;
    font-size: .875rem;
    line-height: 1;
    margin: 0 24px 0 0
}

.fixed-nav__menu li a {
    color: #1a1a1a;
    position: relative
}

.fixed-nav__menu li a:after {
    left: 0;
    position: absolute;
    top: auto;
    background-color: #efefef;
    bottom: -5px;
    height: 1px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
    transition: -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%
}

.fixed-nav__menu li a:hover {
    color: rgba(26, 26, 26, .6)
}

.currentView--home .fixed-nav__menu li a:hover {
    color: hsla(0, 0%, 100%, .6)
}

.currentView--about .fixed-nav__menu li a,
.currentView--contact .fixed-nav__menu li a,
.currentView--home .fixed-nav__menu li a {
    color: #fff
}

.fixed-nav__menu li.is--active a:after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.fixed-nav__menu li:last-child {
    margin: 0
}

.ui {
    left: auto;
    position: absolute;
    top: 72px;
    height: 40px;
    right: 90px;
    pointer-events: none;
    position: fixed;
    will-change: top;
    width: 40px;
    z-index: 60
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .ui {
        left: 90px;
        pointer-events: auto;
        right: 30px;
        top: 20px;
        width: auto
    }
}

.ui--menuShow .ui {
    pointer-events: auto
}

.breadcrumb {
    left: 39px;
    position: absolute;
    top: auto;
    bottom: 92px;
    list-style: none;
    opacity: 1;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1);
    position: fixed;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 50
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .breadcrumb {
        bottom: auto;
        left: 88px;
        position: absolute;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        top: 24px
    }
}

.marquee--isHovered .breadcrumb,
.view--isReverted .breadcrumb {
    opacity: 0;
    pointer-events: none
}

.breadcrumb li {
    color: #9b9b9b;
    display: inline-block;
    font-size: 14px;
    font-size: .875rem
}

.currentView--about .breadcrumb li,
.currentView--contact .breadcrumb li {
    color: #bbb
}

.cover-dummy {
    background: transparent;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .cover-dummy {
        height: 90vh!important
    }
}

.cover {
    left: 0;
    position: absolute;
    top: 0;
    background-color: #fff;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 1
}

.cover--isHidden .cover {
    z-index: -1
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .cover {
        height: 90vh!important
    }
}

.cover .cachea,
.cover .cacheb {
    left: 0;
    position: absolute;
    top: 0;
    background: #fff;
    height: 100%;
    pointer-events: none;
    width: 176px;
    z-index: 5
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .cover .cachea {
        width: 30px
    }
}

.cover .cacheb {
    height: 176px;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .cover .cacheb {
        height: 100px
    }
}

@media only screen and (max-width:767px) {
    .cover .cacheb {
        height: 70px
    }
}

.cover .inner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    width: 100%
}

.cover .fill {
    bottom: 0;
    left: 176px;
    position: absolute;
    right: 0;
    top: 176px;
    background: #fff;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    z-index: 1
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .cover .fill {
        left: 30px;
        top: 100px
    }
}

@media only screen and (max-width:767px) {
    .cover .fill {
        top: 50px
    }
}

.cover .bg {
    bottom: 0;
    clip: rect(0, 0, 0, 0);
    height: auto;
    left: 176px;
    top: 176px;
    right: 0;
    will-change: clip, transform;
    width: auto
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .cover .bg {
        display: none
    }
}

.cover .bg-mobile {
    bottom: 0;
    clip: rect(0, 0, 0, 0);
    display: none;
    height: auto;
    left: 30px;
    top: 100px;
    right: 0;
    will-change: clip, transform;
    width: auto
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .cover .bg-mobile {
        display: block
    }
}

@media only screen and (max-width:767px) {
    .cover .bg-mobile {
        top: 70px
    }
}

.cover.is--shown .bg,
.cover.is--shown .bg-mobile {
    clip: auto
}

.details {
    overflow: hidden;
    position: relative;
    width: 100%
}

.details .inner {
    display: block;
    margin: 0 12vw 12vw;
    position: relative
}

.detail__item {
    border-bottom: 1px solid #e0e0e0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 40px 0;
    width: 100%
}

.detail__item:first-child {
    -webkit-transition-delay: 75ms;
    transition-delay: 75ms
}

.detail__item:nth-child(2) {
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

.detail__item:nth-child(3) {
    -webkit-transition-delay: 225ms;
    transition-delay: 225ms
}

.detail__item:nth-child(4) {
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.detail__item:nth-child(5) {
    -webkit-transition-delay: 375ms;
    transition-delay: 375ms
}

.detail__item:nth-child(6) {
    -webkit-transition-delay: .45s;
    transition-delay: .45s
}

.detail__item:nth-child(7) {
    -webkit-transition-delay: 525ms;
    transition-delay: 525ms
}

.detail__item:nth-child(8) {
    -webkit-transition-delay: .6s;
    transition-delay: .6s
}

.detail__item:nth-child(9) {
    -webkit-transition-delay: 675ms;
    transition-delay: 675ms
}

.detail__item:nth-child(10) {
    -webkit-transition-delay: .75s;
    transition-delay: .75s
}

.detail__item .description {
    display: block;
    line-height: 1.5;
    margin: -3px 0 0;
    width: 50%
}

.detail__item .h6 {
    color: #606060;
    display: inline-block;
    width: 50%
}

.introduction {
    margin: 0 0 12vw;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .introduction {
        height: auto!important
    }
}

.introduction .fill {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #000;
    z-index: 0
}

.introduction:after {
    left: 0;
    position: absolute;
    top: auto;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
    background: -webkit-linear-gradient(top, transparent, #000);
    background: linear-gradient(180deg, transparent 0, #000);
    height: 7.5vw;
    width: 100%;
    z-index: 1
}

.introduction .inner {
    bottom: 7.5vw;
    left: 12vw;
    position: absolute;
    right: 12vw;
    top: 12vw;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    visibility: visible;
    z-index: 1
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .introduction .inner {
        bottom: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        left: 0;
        padding: 30vw 12vw;
        position: relative;
        top: 0;
        right: 0;
        width: 100%
    }
}

.introduction .inner .description {
    margin: 0 0 0 auto;
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: opacity .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .4s cubic-bezier(.215, .61, .355, 1), transform .5s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .4s cubic-bezier(.215, .61, .355, 1), transform .5s cubic-bezier(.215, .61, .355, 1), -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);
    width: 45%
}

@media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-width:768px) and (max-width:1024px) {
    .introduction .inner .description {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        width: 65%
    }
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .introduction .inner .description {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        width: 100%
    }
}

.introduction.is--fixed .inner {
    position: fixed
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .introduction.is--fixed .inner {
        position: relative
    }
}

.introduction--isHidden .introduction .inner {
    visibility: hidden
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .introduction--isHidden .introduction .inner {
        visibility: visible
    }
}

.poster-multiple {
    overflow: hidden;
    position: relative;
    width: 100%
}

.poster-multiple .inner {
    margin: 0 12vw 12vw;
    position: relative
}

.poster-multiple .inner .subinner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-multiple .inner .subinner {
        display: block
    }
}

.poster-multiple.reduced--marginb .inner {
    margin-bottom: 80px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-multiple.reduced--marginb .inner {
        margin-bottom: 12vw
    }
}

.poster-multiple .item {
    position: relative;
    width: -webkit-calc(50% - 40px);
    width: calc(50% - 40px)
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-multiple .item {
        margin: 0 0 12vw!important;
        width: 100%!important
    }
}

.poster-multiple .item .visual {
    display: block;
    position: relative;
    width: 100%;
    z-index: 2
}

.poster-multiple .item.with--border .border {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #efefef;
    z-index: 0
}

.poster-multiple .item.with--border.y-center .wrapper {
    padding-bottom: 14%;
    padding-top: 14%
}

.poster-multiple .item.with--border.y-top .wrapper {
    padding-bottom: 14%
}

.poster-multiple .item.with--border.y-bottom .wrapper {
    padding-top: 14%
}

.poster-multiple .item.with--border.y-bottom .visual {
    -webkit-box-shadow: 0 -20px 50px rgba(0, 0, 0, .1);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .1)
}

.poster-multiple .item.with--border .visual {
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    margin: 0 auto;
    width: 70%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-multiple .item.with--border .visual {
        width: 80%!important
    }
}

.poster-multiple.for--3 .item {
    width: -webkit-calc(33% - 20px);
    width: calc(33% - 20px)
}

.poster-multiple.for--3 .item.with--border .visual {
    width: 84%
}

.poster-multiple.for--3 .item.with--border.y-center .wrapper {
    padding-bottom: 7%;
    padding-top: 7%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-multiple.for--3 .item.with--border.y-center .wrapper {
        padding-bottom: 14%;
        padding-top: 14%
    }
}

.poster-multiple.for--3 .item.with--border.y-top .wrapper {
    padding-bottom: 7%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-multiple.for--3 .item.with--border.y-top .wrapper {
        padding-bottom: 14%
    }
}

.poster-multiple.for--3 .item.with--border.y-bottom .wrapper {
    padding-top: 7%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-multiple.for--3 .item.with--border.y-bottom .wrapper {
        padding-top: 14%
    }
}

.poster-multiple.for--3 .item.with--border.y-bottom .visual {
    -webkit-box-shadow: 0 -20px 50px rgba(0, 0, 0, .1);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .1)
}

.poster-multiple.for--3 .item .visual {
    width: 100%
}

.poster-single {
    overflow: hidden;
    position: relative;
    width: 100%
}

.poster-single.x-center,
.poster-single.x-left,
.poster-single.x-right {
    text-align: center
}

.poster-single.x-center .inner,
.poster-single.x-left .inner,
.poster-single.x-right .inner {
    display: block;
    margin: 0 12vw 12vw;
    overflow: hidden;
    position: relative
}

.poster-single.x-center .visual,
.poster-single.x-left .visual,
.poster-single.x-right .visual {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 100%;
    z-index: 1
}

.poster-single.reduced--marginb .inner {
    margin-bottom: 80px
}

.poster-single.x-left .inner {
    margin: 0 24vw 12vw 0
}

.poster-single.x-left .inner .subinner {
    margin: 0
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-single.x-left .inner .visual {
        margin: 0!important;
        width: 85%
    }
}

.poster-single.x-right .inner {
    margin: 0 0 12vw 24vw
}

.poster-single.x-right .inner .subinner {
    margin: 0 0 0 auto
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-single.x-right .inner .visual {
        margin: 0 0 0 auto!important;
        width: 85%
    }
}

.poster-single.with--border .border {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #efefef;
    z-index: 0
}

.poster-single.with--border .visual {
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    width: 70%
}

.poster-single.with--border.y-center .subinner:after,
.poster-single.with--border.y-center .subinner:before {
    padding: 15% 0 0;
    width: 100%
}

.poster-single.with--border.y-center .subinner:after {
    padding: 0 0 15%
}

.poster-single.with--border.y-bottom .subinner {
    overflow: hidden
}

.poster-single.with--border.y-bottom .subinner:before,
.poster-single.with--border.y-top .subinner:after {
    padding-top: 15%;
    width: 100%
}

.poster-single.fat--border .visual {
    max-width: 500px;
    width: 30%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-single.fat--border .visual {
        width: 50%
    }
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-single.fat--border.x-left .visual,
    .poster-single.fat--border.x-right .visual {
        margin: 0 auto!important;
        width: 50%
    }
}

.poster-full {
    margin: 0 0 12vw;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-full {
        height: 50vh!important
    }
}

@media only screen and (max-width:767px) {
    .poster-full {
        height: 33vh!important
    }
}

.poster-text {
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-text {
        margin: 6vw 0
    }
}

.poster-text .inner {
    margin: 0 12vw 12vw;
    position: relative
}

.poster-text .inner .subinner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-text .inner .subinner {
        -webkit-box-orient: vertical!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important
    }
}

.poster-text .inner .description {
    -webkit-transition-delay: .15s;
    transition-delay: .15s;
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-text .inner .description {
        width: 100%
    }
}

.poster-text .inner .description.is--wide {
    width: 100%
}

.poster-text .inner .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0 0 10%;
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-text .inner .cell {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 0 6vw;
        padding: 0;
        width: 100%
    }
}

.poster-text .inner .visual {
    display: block;
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .poster-text .inner .visual {
        width: 100%
    }
}

.poster-text .inner .visual img {
    display: block;
    width: 100%
}

.poster-text.reduced--marginb .inner {
    margin-bottom: 80px
}

.poster-text.with--border .border {
    left: 0;
    position: absolute;
    top: 0;
    background-color: #efefef;
    height: 100%;
    width: 100%;
    z-index: 0
}

.poster-text.with--border figcaption {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 15%
}

.poster-text.with--border .visual {
    position: relative;
    z-index: 1
}

.poster-text.with--border .visual img {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15%;
    position: relative
}

.poster-text.x-right .subinner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.poster-text.x-right .subinner .cell {
    padding: 0 10% 0 0
}

.poster-text.x-right.with--border .border {
    left: auto;
    right: 0
}

.jsWaypoint--next {
    overflow: hidden;
    width: 100%
}

.single-next__dummy {
    left: 0;
    position: absolute;
    top: auto;
    bottom: 0;
    width: 100%
}

.single-next {
    left: 0;
    position: absolute;
    top: 0;
    overflow: hidden;
    position: fixed;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .single-next {
        position: relative
    }
}

.single-next .fill {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #000;
    z-index: 0
}

.single-next .inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1800px;
    padding: 0 12vw;
    position: relative
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .single-next .inner {
        margin: 0 12vw;
        padding: 0 0 50px
    }
}

.single-next .inner .h6 {
    color: #606060;
    position: relative;
    top: -50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.single-next .inner .h1 {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.single-next .inner .h1 .false-link {
    opacity: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.single-next .inner .h1 .false-link:hover {
    opacity: .6
}

.single-next .shape {
    position: absolute;
    right: 12vw;
    top: 50%;
    background-color: #fff;
    height: 2px;
    margin: -1px 0 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 1s cubic-bezier(.77, 0, .175, 1);
    transition: -webkit-transform 1s cubic-bezier(.77, 0, .175, 1);
    transition: transform 1s cubic-bezier(.77, 0, .175, 1);
    transition: transform 1s cubic-bezier(.77, 0, .175, 1), -webkit-transform 1s cubic-bezier(.77, 0, .175, 1);
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    width: 72px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .single-next .shape {
        left: 0;
        right: auto;
        bottom: 0;
        margin: 0;
        top: auto
    }
}

.single-next.is--shown .shape {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.quote {
    margin: 0 0 12vw;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .quote {
        height: auto!important
    }
}

.quote .author {
    color: #9b9b9b;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
    margin: 110px 0 0;
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .quote .author {
        margin: 55px 0 0
    }
}

.quote .description {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.5;
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.quote .fill {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #000;
    z-index: 0
}

.quote .inner {
    bottom: 12vw;
    left: 12vw;
    position: absolute;
    right: 12vw;
    top: 12vw;
    z-index: 1
}

.quote .inner .subinner {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .quote .inner {
        bottom: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        left: 0;
        padding: 30vw 12vw;
        position: relative;
        top: 0;
        right: 0;
        width: 100%
    }
}

.quote .inner .cell {
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .quote .inner .cell {
        width: 100%
    }
}

.quote.x-right .cell {
    margin: 0 0 0 auto
}

.stats {
    overflow: hidden;
    margin: 0 0 12vw;
    position: relative;
    width: 100%
}

.stats .fill {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #000;
    z-index: 0
}

.stats .inner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin: 0 12vw 12vw;
    position: relative
}

.stats .inner .subinner {
    padding: 12vw 0 0
}

.stats__item {
    margin: 0 0 60px auto;
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .stats__item {
        margin: 0 0 40px auto
    }
}

.stats__item:first-child {
    -webkit-transition-delay: .11s;
    transition-delay: .11s
}

.stats__item:nth-child(2) {
    -webkit-transition-delay: .22s;
    transition-delay: .22s
}

.stats__item:nth-child(3) {
    -webkit-transition-delay: .33s;
    transition-delay: .33s
}

.stats__item:nth-child(4) {
    -webkit-transition-delay: .44s;
    transition-delay: .44s
}

.stats__item:nth-child(5) {
    -webkit-transition-delay: .55s;
    transition-delay: .55s
}

.stats__item:nth-child(6) {
    -webkit-transition-delay: .66s;
    transition-delay: .66s
}

.stats__item:nth-child(7) {
    -webkit-transition-delay: .77s;
    transition-delay: .77s
}

.stats__item:nth-child(8) {
    -webkit-transition-delay: .88s;
    transition-delay: .88s
}

.stats__item:nth-child(9) {
    -webkit-transition-delay: .99s;
    transition-delay: .99s
}

.stats__item:nth-child(10) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .stats__item {
        width: 100%
    }
}

.stats__item .h6 {
    color: #7f7f7f;
    margin: 0 0 20px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .stats__item .h6 {
        margin: 0 0 10px
    }
}

.stats__item .value {
    color: #fff;
    font-size: 48px;
    font-size: 3rem
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .stats__item .value {
        font-size: 36px;
        font-size: 2.25rem
    }
}

.stats__item:last-child {
    margin: 0 0 0 auto
}

.ss-separator {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12vw 0 0;
    width: 100%
}

.ss-separator.reduced--marginb {
    padding: 80px 0 0
}

.ss-horizontal {
    background-color: #fff;
    height: 85vh;
    max-height: 900px;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .ss-horizontal {
        height: 33vh
    }
}

.ss-horizontal__inner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    margin: 0 12vw;
    position: relative
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .ss-horizontal__inner {
        height: 100%
    }
}

.ss-horizontal__subinner {
    height: 100%;
    margin: 0 auto;
    max-width: 1800px
}

.ss-horizontal__collection {
    height: 100%;
    position: relative;
    width: 99999px
}

.ss-horizontal__item {
    display: block;
    float: left;
    height: 100%;
    margin: 0 72px 0 0;
    overflow: hidden;
    position: relative
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .ss-horizontal__item {
        margin: 0 32px 0 0
    }
}

.ss-horizontal__item .bg {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-position: 50%;
    background-size: contain;
    background-color: #bebebe;
    background-repeat: no-repeat;
    height: auto;
    width: auto
}

.ss-horizontal__item .visual {
    display: block;
    height: 100%
}

.ss-horizontal__item .visual.forced--sized {
    height: 100%!important;
    width: auto!important
}

.ss-horizontal__item.with--border .border {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #efefef;
    z-index: 0
}

.ss-horizontal__item.with--border .bg {
    bottom: 12%;
    left: 12%;
    position: absolute;
    right: 12%;
    top: 12%;
    z-index: 1
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .ss-horizontal__item.with--border .bg {
        bottom: 8%;
        left: 8%;
        position: absolute;
        right: 8%;
        top: 8%
    }
}

.ss-horizontal__item.with--border .shadow {
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .25);
    box-shadow: 0 0 50px rgba(0, 0, 0, .25);
    z-index: 0
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .ss-horizontal__item.with--border .shadow {
        height: 35%
    }
}

.ss-horizontal__item.with--border .visual {
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    box-shadow: 0 0 50px rgba(0, 0, 0, .1)
}

.ss-horizontal__item:last-child {
    margin: 0
}

.ss-horizontal__item.is--loaded .bg {
    background-color: transparent
}

.ss-horizontal__cursor {
    left: -40px;
    position: absolute;
    top: -40px;
    height: 80px;
    mix-blend-mode: difference;
    position: fixed;
    text-align: center;
    pointer-events: none;
    width: 80px;
    z-index: 9999
}

.ss-horizontal__cursor:before {
    left: 0;
    position: absolute;
    top: 0;
    background: #fff;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: -webkit-transform .25s cubic-bezier(.215, .61, .355, 1);
    transition: -webkit-transform .25s cubic-bezier(.215, .61, .355, 1);
    transition: transform .25s cubic-bezier(.215, .61, .355, 1);
    transition: transform .25s cubic-bezier(.215, .61, .355, 1), -webkit-transform .25s cubic-bezier(.215, .61, .355, 1)
}

.ss-horizontal__cursor .text,
.ss-horizontal__cursor:before {
    height: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100%
}

.ss-horizontal__cursor .text {
    color: #000;
    display: block;
    font-size: 16px;
    font-size: 1rem;
    position: relative;
    top: 28px;
    -webkit-transition: -webkit-transform .15s cubic-bezier(.215, .61, .355, 1);
    transition: -webkit-transform .15s cubic-bezier(.215, .61, .355, 1);
    transition: transform .15s cubic-bezier(.215, .61, .355, 1);
    transition: transform .15s cubic-bezier(.215, .61, .355, 1), -webkit-transform .15s cubic-bezier(.215, .61, .355, 1)
}

.ss-horizontal__cursor.is--active .text,
.ss-horizontal__cursor.is--active:before {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.ss__next,
.ss__previous {
    left: 0;
    position: absolute;
    top: 0;
    background-color: transparent;
    height: 100%;
    width: 15%
}

.for--1 .ss__next,
.for--1 .ss__previous {
    display: none
}

.ss__next:hover,
.ss__previous:hover {
    cursor: pointer
}

.ss__next {
    left: auto;
    right: 0;
    z-index: 20
}

.intertext {
    overflow: hidden;
    position: relative;
    width: 100%
}

.intertext .inner {
    display: block;
    margin: 0 12vw 12vw;
    position: relative
}

.intertext .inner .description {
    width: 55%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .intertext .inner .description {
        width: 100%
    }
}

.intertext .inner .description p {
    margin: 0 0 25px
}

.intertext .inner .description p:last-child {
    margin: 0
}

.intertext.x-right .description {
    margin: 0 0 0 auto;
    width: -webkit-calc(50% - 40px);
    width: calc(50% - 40px)
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .intertext.x-right .description {
        width: 100%
    }
}

.video-bg {
    height: auto;
    margin: 0 0 12vw;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 2
}

.video-bg .subinner {
    max-width: none
}

.video-bg.with--border {
    margin: -12vw 0 12vw
}

.video-bg.with--border .subinner {
    max-width: 1800px
}

.video-bg.with--border.no--marginb {
    margin-bottom: 0
}

.video-bg .btn-play {
    display: none;
    z-index: 5
}

.video-bg .element {
    display: block;
    height: auto;
    position: relative;
    width: 100%
}

.video-bg .fill {
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: 2
}

.video-bg .fill,
.video-bg .poster {
    left: 0;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1)
}

.video-bg .poster {
    display: block;
    width: 100%;
    z-index: 1
}

.video-bg.with--border .border {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    z-index: 0
}

.video-bg.with--border .inner {
    margin: 12vw;
    position: relative
}

.video-bg.with--border .element {
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    box-shadow: 0 0 50px rgba(0, 0, 0, .1);
    margin: 0 auto;
    width: 100%
}

.video-bg.center--block {
    margin: 0 0 12vw
}

.video-bg.center--block .inner {
    margin: 0 12vw
}

.video-bg.center--block .element,
.video-bg.center--block .poster {
    width: 70%
}

.video-bg.center--block .subinner:after,
.video-bg.center--block .subinner:before {
    padding: 15% 0 0;
    width: 100%
}

.video-bg.center--block .subinner:after {
    padding: 0 0 15%
}

.video-bg.reduced--marginb {
    margin-bottom: 80px
}

.video-bg .controls {
    display: none
}

.video-bg.jsWaypoint--autoplay.video--isPlaying .poster {
    opacity: 0
}

.video-bg.with--controls .btn-play {
    display: block
}

.video-bg.with--controls .controls {
    left: 20px;
    position: absolute;
    top: auto;
    background-color: transparent;
    bottom: 60px;
    display: block;
    height: 20px;
    opacity: 0;
    right: 20px;
    pointer-events: none;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear
}

.video-bg.with--controls .fullscreen {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    text-align: center;
    width: 62px
}

.video-bg.with--controls .fullscreen button {
    color: #fff;
    position: relative;
    top: 3px
}

.video-bg.with--controls .fullscreen button:before {
    content: "\E900";
    font-size: 14px
}

.video-bg.with--controls .fullscreen button:hover {
    color: #bebebe
}

.video-bg.with--controls .playpause {
    height: 100%;
    line-height: 24px;
    text-align: center;
    width: 60px
}

@media only screen and (max-width:767px) {
    .video-bg.with--controls .playpause {
        width: 45px
    }
}

.video-bg.with--controls .playpause button {
    color: #fff;
    font-size: 15px;
    margin: 0;
    text-align: center
}

.video-bg.with--controls .playpause button:before {
    content: "\E902"
}

.video-bg.with--controls .timer {
    left: 60px;
    position: absolute;
    top: 0;
    display: block;
    height: 100%;
    line-height: 23px;
    text-align: center;
    width: 125px
}

.video-bg.with--controls .timer span {
    font-size: 14px;
    font-size: .875rem;
    line-height: 1
}

.video-bg.with--controls .timer span.current {
    color: #fff
}

.video-bg.with--controls .timer span.total {
    color: #9b9b9b
}

.video-bg.with--controls .progressbar {
    left: 185px;
    position: absolute;
    top: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    bottom: 9px;
    height: 2px;
    margin: 0;
    right: 146px;
    z-index: 5
}

.video-bg.with--controls .progressbar .progress {
    left: 0;
    position: absolute;
    top: auto;
    background-color: hsla(0, 0%, 100%, .2);
    bottom: 0;
    display: block;
    height: 2px;
    margin: 0;
    width: 100%
}

.video-bg.with--controls .progressbar .progress .buffer,
.video-bg.with--controls .progressbar .progress .current {
    background-color: #fff;
    display: block;
    height: 100%;
    position: relative;
    pointer-events: none;
    -webkit-transition: width .1s linear;
    transition: width .1s linear;
    width: 0;
    z-index: 2
}

.video-bg.with--controls .progressbar .progress .buffer {
    left: 0;
    position: absolute;
    top: 0;
    background-color: hsla(0, 0%, 61%, .5);
    width: 100%;
    z-index: 1
}

.video-bg.with--controls .volume {
    position: absolute;
    right: 62px;
    top: 0;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 45px
}

.video-bg.with--controls .volume .context {
    display: inline-block;
    height: 14px;
    position: relative;
    top: 3px
}

.video-bg.with--controls .volume .context span {
    display: inline-block;
    height: 100%;
    margin: 0;
    -webkit-transition: background-color .3s cubic-bezier(.215, .61, .355, 1);
    transition: background-color .3s cubic-bezier(.215, .61, .355, 1);
    width: 3px
}

.video-bg.with--controls .volume .context span:nth-child(odd) {
    background-color: transparent
}

.video-bg.with--controls .volume .context span:nth-child(2n) {
    background-color: #9b9b9b
}

.video-bg.with--controls .volume .context.for--1 span:nth-child(2),
.video-bg.with--controls .volume .context.for--2 span:nth-child(2),
.video-bg.with--controls .volume .context.for--2 span:nth-child(4),
.video-bg.with--controls .volume .context.for--3 span:nth-child(2),
.video-bg.with--controls .volume .context.for--3 span:nth-child(4),
.video-bg.with--controls .volume .context.for--3 span:nth-child(6),
.video-bg.with--controls .volume .context.for--4 span:nth-child(2),
.video-bg.with--controls .volume .context.for--4 span:nth-child(4),
.video-bg.with--controls .volume .context.for--4 span:nth-child(6),
.video-bg.with--controls .volume .context.for--4 span:nth-child(8) {
    background-color: #fff
}

.video-bg.with--controls.video--isPlaying .btn-play {
    opacity: 0;
    pointer-events: none
}

.video-bg.with--controls.video--isPlaying .playpause button:before {
    content: "\E901"
}

.video-bg.with--controls.touch--action .btn-play {
    opacity: 0;
    pointer-events: none
}

.video-bg.with--controls.video--isPausing .btn-play,
.video-bg.with--controls.video--isPausing .poster,
.video-bg.with--controls.video--isPlaying .poster {
    opacity: 0
}

.video-bg.with--controls.video--isPausing video,
.video-bg.with--controls.video--isPlaying video {
    visibility: visible
}

.video-bg.with--controls.video--isPausing.show-controls .controls,
.video-bg.with--controls.video--isPlaying.show-controls .controls {
    opacity: 1;
    pointer-events: auto
}

.video-bg.video--iosAutoplay .btn-play {
    display: block
}

.video-bg.video--iosAutoplay .btn-play .shape {
    background: url("../svg/play.svg") 0 0 no-repeat;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 64px;
    margin: -32px 0 0 -32px;
    width: 64px
}

.video-bg.video--iosAutoplay .btn-play .shape:after,
.video-bg.video--iosAutoplay .btn-play .shape:before {
    display: none!important
}

.video-bg.video--iosAutoplay .btn-play:after,
.video-bg.video--iosAutoplay .btn-play:before,
.video-bg.video--iosAutoplay .poster {
    display: none
}

.video-bg.video--iosAutoplay .element {
    pointer-events: none
}

.video-bg.video--iosAutoplaying .btn-play {
    opacity: 0
}

.about {
    overflow: hidden;
    padding: 0 0 200px;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about {
        padding: 0 0 250px
    }
}

.about .canvas {
    left: 0;
    position: absolute;
    top: auto;
    bottom: 0;
    height: 300px;
    width: 100%;
    z-index: 1
}

.about .canvas.is--active {
    cursor: pointer
}

.about .fill {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #141414;
    -webkit-transition: background-color .6s cubic-bezier(.215, .61, .355, 1);
    transition: background-color .6s cubic-bezier(.215, .61, .355, 1);
    z-index: 0
}

.marquee--isHovered .about .fill {
    background-color: #fff
}

.about .fxFill {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    transform-origin: right center
}

.about .gwrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 25vh 0 0;
    position: relative
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about .gwrapper {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 15vh 30px 0;
        width: 100%
    }
}

.about .gwrapper .brand {
    margin: 0 0 140px;
    opacity: 0;
    -webkit-transition: color .6s cubic-bezier(.215, .61, .355, 1);
    transition: color .6s cubic-bezier(.215, .61, .355, 1);
    width: 100%
}

.marquee--isHovered .about .gwrapper .brand {
    color: #141414
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about .gwrapper .brand {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 1.66666667;
        margin: 0 0 60px;
        min-height: 120px
    }
}

@media only screen and (max-width:767px) {
    .about .gwrapper .brand {
        margin: 0 0 60px;
        min-height: 240px
    }
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about .gwrapper .brand br {
        display: none
    }
}

.about .gwrapper .brand .typewrapper,
.about .gwrapper .brand p {
    display: inline;
    position: relative
}

.about .gwrapper .brand .typewrapper .text,
.about .gwrapper .brand p .text {
    display: none
}

.about .gwrapper .brand .typewrapper .text.is--ready,
.about .gwrapper .brand p .text.is--ready {
    display: inline
}

.about .gwrapper .brand .typewrapper .caret,
.about .gwrapper .brand p .caret {
    -webkit-animation: caret .9s step-end infinite;
    animation: caret .9s step-end infinite;
    margin: 0 -9px 0 0
}

.about .solitaire {
    left: 195px;
    position: absolute;
    top: auto;
    bottom: 147px;
    cursor: pointer;
    display: block;
    text-align: center;
    width: 61px;
    z-index: 5
}

.about .solitaire .text {
    color: #fff;
    font-size: 14px;
    font-size: .875rem;
    position: relative;
    text-transform: lowercase;
    top: 5px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about .solitaire {
        left: 30px
    }
}

.about .solitaire.is--disabled {
    pointer-events: none;
    z-index: 1
}

.about-prez {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 160px auto;
    width: 60%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about-prez {
        display: block;
        margin: 0 0 80px auto;
        width: 100%
    }
}

.about-prez.for--intro {
    margin: 0 0 80px auto
}

.about-prez .description {
    margin: -10px 0 0;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about-prez .description {
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 1.77777778;
        width: 100%
    }
}

.about-prez .h6 {
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about-prez .h6 {
        margin: 0 0 50px
    }
}

.about-prez.fxPrez .description,
.about-prez.fxPrez .h6 {
    opacity: 0;
    -webkit-transition: none 0s;
    transition: none 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.about-clients__canvas {
    height: 165px;
    position: relative;
    width: 9999px;
    z-index: 1
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about-clients__canvas {
        height: 100px;
        margin: 0 0 -8vh
    }
}

.about-clients__canvas canvas {
    position: absolute;
    z-index: 1
}

.about-clients {
    position: relative;
    width: 100%
}

.about-clients.with--canvas {
    margin: 0 0 -80px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about-clients.with--canvas {
        margin: 0 0 -36px
    }
}

.about-clients.with--canvas .cell {
    position: absolute;
    visibility: hidden
}

.about-clients .cell {
    height: 80px;
    position: relative;
    width: 99999px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about-clients .cell {
        height: 36px
    }
}

.about-clients .entry {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: block;
    font-size: 80px;
    font-size: 5rem;
    line-height: 1;
    padding: 0 40px 0 0;
    position: absolute;
    will-change: transform
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .about-clients .entry {
        font-size: 36px;
        font-size: 2.25rem;
        padding: 0 20px 0 0
    }
}

.marquee--isHovered .about-clients .entry {
    color: #141414
}

.about-clients .entry.can--hover:hover {
    color: hsla(0, 0%, 100%, .6)
}

.marquee--isHovered .about-clients .entry.can--hover:hover {
    color: hsla(0, 0%, 8%, .6)
}

.contact {
    z-index: 1
}

.contact,
.contact .fill,
.contact .fill-revert {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.contact .fill,
.contact .fill-revert {
    background-color: #000;
    z-index: 0
}

.contact .fill-revert {
    background-color: #fff;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.contact .fxFill {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    transform-origin: right center
}

.contact .gwrapper {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    text-align: left;
    z-index: 1
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .contact .gwrapper {
        width: 85%
    }
}

.contact .gwrapper .h2 {
    margin: 67px 0 100px;
    opacity: 1
}

@media only screen and (max-width:767px) {
    .contact .gwrapper .h2 {
        margin: 30px 0 40px
    }
}

.contact .gwrapper .h2:hover {
    opacity: .6
}

.contact .gwrapper .social {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .contact .gwrapper .social {
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start
    }
}

.contact .tagline {
    color: #000;
    font-size: 12px;
    font-size: .75rem;
    opacity: 0;
    pointer-events: none;
    text-transform: uppercase;
    z-index: 5
}

.view--isReverted .contact .tagline {
    pointer-events: auto
}

.contact .fxCanvas,
.contact .fxDesc,
.contact .fxSocial {
    opacity: 0;
    -webkit-transition: none 0s;
    transition: none 0s
}

.contact h2.fxButton {
    opacity: 0
}

.contact-canvas {
    opacity: .5;
    z-index: 0
}

.contact-canvas,
.home-fill {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.home-fill {
    background: #eee;
    pointer-events: none;
    z-index: 112;

}

.home-slideshow {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.home-slideshow__collection {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.home-slideshow__item {
    left: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%
}

.home-slideshow__item .bg,
.home-slideshow__item .bg-mobile {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    z-index: 1
}

.home-slideshow__item .bg-mobile {
    display: none
}

@media only screen and (max-width:767px) {
    .home-slideshow__item .bg-mobile {
        display: block
    }
}

.home-slideshow__item .content {
    position: absolute;
    right: 90px;
    top: auto;
    bottom: 72px;
    text-align: right;
    width: 30%;
    z-index: 5
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .home-slideshow__item .content {
        bottom: 40px;
        left: 30px;
        right: 30px;
        width: auto
    }
}

.home-slideshow__item .content .h2 {
    margin: 0 0 42px
}

.home-slideshow__item .content .jsTextFx {
    display: block;
    position: relative
}

.home-slideshow__item .video-bg {
    height: auto;
    opacity: 0;
    min-height: 101%;
    min-width: 101%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: auto;
    z-index: 2
}

@media only screen and (max-width:767px) {
    .home-slideshow__item .video-bg {
        display: none
    }
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .home-slideshow__item:before {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        background-color: rgba(0, 0, 0, .25);
        content: " ";
        display: block;
        pointer-events: none;
        z-index: 2
    }
}

.home-slideshow__item.video--canPlay .video-bg {
    opacity: 1
}

.home-slideshow__item.disabled {
    visibility: hidden
}

.home-slideshow__item.enabled {
    visibility: visible
}

.home-slideshow__timer {
    left: 0;
    position: absolute;
    top: auto;
    background: none;
    bottom: 0;
    height: 50%;
    overflow: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    width: 94px;
    z-index: 11
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .home-slideshow__timer {
        background-color: transparent;
        height: 50px;
        left: 30px;
        width: 40px
    }
}

.home-slideshow__timer .progress {
    left: 0;
    position: absolute;
    top: auto;
    background-color: #000;
    bottom: 0;
    height: 5px;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    width: 100%;
    z-index: 1
}

.home-slideshow__timer .shape {
    left: 50%;
    position: absolute;
    top: 60px;
    display: block;
    height: 16px;
    margin: 0 0 0 -8px;
    width: 16px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .home-slideshow__timer .shape {
        left: 0;
        margin: 0;
        top: 0
    }
}

.home-slideshow__timer .shape canvas {
    left: -2px;
    position: absolute;
    top: -2px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .home-slideshow__timer .shape canvas {
        left: 0;
        top: 0
    }
}

.home-slideshow__timer .shape:before {
    background-color: #000;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 100%;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .home-slideshow__timer .shape:before {
        display: none
    }
}

.home-slideshow__next,
.home-slideshow__previous {
    left: 0;
    position: absolute;
    top: 120px;
    bottom: 20vh;
    width: 80%;
    z-index: 4
}

.home-slideshow__next.disabled,
.home-slideshow__previous.disabled {
    display: none
}

.home-slideshow__previous {
    cursor: url("../images/download1.svg"), pointer
}

.home-slideshow__next {
    cursor: url("../images/download.svg"), pointer;
    left: 50%
}

.launcher {
    position: absolute;
    display: block;
    position: fixed;
    z-index: 100
}

.launcher,
.launcher .fill {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;    z-index:100;
}

.launcher .fill {
    position: absolute;
    background: #fefefe url(namrrta_raai_loader.gif) center no-repeat;
   
}

.launcher .logo {
    left: 50%;
    position: absolute;
    top: 50%;
    display: block;
    height: 109px;
    margin: -54.5px 0 0 -180.5px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    width: 361px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .launcher .logo {
        height: 87px;
        margin: -43.5px 0 0 -144.5px;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 289px
    }
}

.launcher .canvas {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.single-container {
    background: #fff;
    margin: 0 0 100vh;
    position: relative;
    width: 100%;
    z-index: 1
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .single-container {
        margin: 0
    }
}

.single-container.no--margin {
    margin: 0
}

.single-progression {
    left: 0;
    position: absolute;
    top: 0;
    height: 4px;
    position: fixed;
    width: 100%;
    z-index: 2
}

.single-progression .bar {
    background-color: #000;
    height: 100%;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    will-change: transform;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: background-color .3s cubic-bezier(.215, .61, .355, 1);
    transition: background-color .3s cubic-bezier(.215, .61, .355, 1);
    width: 100%
}

.skin--isWhite .single-progression .bar {
    background-color: #fff
}

.subinner {
    margin: 0 auto;
    max-width: 1800px;
    position: relative
}

.fxFilter {
    -webkit-transform: translateX(-90px);
    transform: translateX(-90px)
}

.fxSwitch {
    -webkit-transform: translateX(90px);
    transform: translateX(90px)
}

.workspace-grid {
    background: #fff;
    display: block;
    opacity: 0;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-grid {
        overflow: hidden
    }
}

.workspace__introduction {
    margin: 40vh 0 18vh;
    opacity: 0;
    text-align: right
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace__introduction {
        margin: 20vh 0 9vh
    }
}

.workspace__introduction .inner {
    display: inline-block;
    margin: 0 0 0 auto;
    width: 40%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace__introduction .inner {
        width: 60%
    }
}

@media only screen and (max-width:767px) {
    .workspace__introduction .inner {
        width: 100%
    }
}

.workspace__introduction .description {
    font-size: 24px;
    font-size: 1.5rem;
    text-align: left;
    max-width: 480px;
    width: 100%
}

.workspace__introduction .description .category {
    text-transform: lowercase
}

.workspace__introduction .description p {
    display: inline
}

.workspace-grid__collection {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%
}

.workspace-grid__collection .cell {
    width: 40%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-grid__collection .cell {
        width: 45%
    }
}

.workspace-grid__collection .cell:first-child .workspace-grid__item:nth-child(even) {
    left: 20%
}

.workspace-grid__collection .cell:nth-child(2) {
    margin-top: 105px
}

.workspace-grid__item {
    display: block;
    margin-bottom: 205px;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-grid__item {
        margin-bottom: 105px
    }
}

@media only screen and (max-width:767px) {
    .workspace-grid__item {
        margin-bottom: 75px
    }
}

.workspace-grid__item .h4 {
    margin: 0 0 3px
}

.workspace-grid__item .visual {
    display: block;
    margin: 0 0 22px;
    position: relative;
    width: 100%
}

.workspace-grid__item .visual .in,
.workspace-grid__item .visual .out {
    display: block;
    width: 100%
}

.workspace-grid__item .visual .in {
    left: 0;
    position: absolute;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1);
    will-change: opacity;
    z-index: 1
}

.workspace-grid__item .visual .out {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.workspace-grid__item:hover .visual .in {
    opacity: 1
}

.workspace-list {
    background: #fff;
    display: none;
    padding: 0 0 100px;
    opacity: 0;
    position: relative;
    width: 100%
}

.workspace-list .size {
    width: 40%
}

.workspace-list__collection {
    margin: 40vh 0 18vh;
    position: relative;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-list__collection {
        margin: 20vh 0 9vh
    }
}

.workspace-list__item {
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    mix-blend-mode: difference;
    padding: 15px 0;
    position: relative;
    width: 100%;
    z-index: 2
}

.workspace-list__item .link-context {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 100%
}

.workspace-list__item .category {
    color: hsla(0, 0%, 100%, .4);
    display: inline-block;
    font-size: 16px;
    font-size: 1rem;
    width: 45%
}

.workspace-list__item .date {
    color: hsla(0, 0%, 100%, .4);
    display: inline-block;
    font-size: 14px;
    font-size: .875rem;
    text-align: right;
    width: 10%
}

.workspace-list__item .title {
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-size: 1rem;
    position: relative;
    width: 45%;
    z-index: 5
}

.workspace-list__item .out {
    left: 0;
    position: absolute;
    top: -100px;
    width: 100px;
    z-index: 0
}

.workspace-list__item:after {
    left: 0;
    position: absolute;
    top: auto;
    background-color: #fff;
    bottom: -1px;
    height: 1px;
    opacity: 0;
    -webkit-transition: opacity .3s cubic-bezier(.215, .61, .355, 1);
    transition: opacity .3s cubic-bezier(.215, .61, .355, 1);
    width: 100%
}

.workspace-list__item:hover:after {
    opacity: 1
}

.workspace-list__cursor {
    left: 0;
    position: absolute;
    top: 0;
    display: block;
    height: auto;
    position: fixed;
    width: 15%;
    z-index: 0
}

.workspace-list__cursor .visual {
    left: 50%;
    position: absolute;
    top: 50%;
    display: block;
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
    visibility: hidden;
    width: 100%
}

.workspace-list__cursor .visual.is--active {
    visibility: visible
}

.workspace-dispatch {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #1a1a1a;
    display: block;
    position: fixed;
    pointer-events: none;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: transform .5s cubic-bezier(.165, .84, .44, 1);
    transition: transform .5s cubic-bezier(.165, .84, .44, 1), -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
    z-index: 5
}

@media only screen and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-width:1024px) {
    .workspace-dispatch {
        bottom: auto;
        right: auto;
        height: 100.5vh;
        position: absolute!important;
        width: 100vw
    }
}

.dispatch--isOpened .workspace-dispatch {
    pointer-events: auto;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.workspace-dispatch .inner {
    bottom: 0;
    left: 18vw;
    position: absolute;
    right: 90px;
    top: 0
}

@media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-width:768px) and (max-width:1024px) {
    .workspace-dispatch .inner {
        bottom: 0;
        left: 120px;
        position: absolute;
        right: 120px;
        top: 120px
    }
}

@media only screen and (max-width:767px) {
    .workspace-dispatch .inner {
        bottom: 0;
        left: 60px;
        position: absolute;
        right: 50px;
        top: 90px
    }
}

.workspace-dispatch .inner .cells {
    display: block;
    height: 100%;
    width: 100%
}

.workspace-dispatch .inner .cells .cell {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    float: left;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 50%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-dispatch .inner .cells .cell {
        display: block;
        float: none;
        width: 100%
    }
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-dispatch .inner .cells .cell:first-child {
        height: 50px
    }
}

@media only screen and (max-width:767px) {
    .workspace-dispatch .inner .cells .cell:first-child {
        display: none
    }
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-dispatch .inner .cells .cell:first-child::after {
        left: 0;
        position: absolute;
        top: auto;
        background-color: #fff;
        bottom: 10px;
        display: block;
        content: " ";
        height: 1px;
        width: 50px
    }
}

.workspace-dispatch .inner .cells .cell:nth-child(2) {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.workspace-dispatch .inner .cells .cell:nth-child(2)::-webkit-scrollbar {
    background: transparent;
    width: 5px
}

.workspace-dispatch .inner .cells .cell:nth-child(2)::-webkit-scrollbar-track {
    background: #1a1a1a;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.workspace-dispatch .inner .cells .cell:nth-child(2)::-webkit-scrollbar-thumb {
    background: #1a1a1a;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 5px
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-dispatch .inner .cells .cell:nth-child(2) {
        height: -webkit-calc(100% - 50px);
        height: calc(100% - 50px);
        padding: 0 0 35px
    }
}

.workspace-dispatch__form {
    display: block;
    opacity: 0;
    width: 100%
}

.workspace-dispatch__form .fields {
    position: relative
}

.workspace-dispatch__form .fields label {
    position: relative;
    z-index: 1
}

.workspace-dispatch__form .fieldlabel,
.workspace-dispatch__form .fieldtext {
    color: #fff;
    display: inline-block;
    font-size: 36px;
    font-size: 2.25rem;
    vertical-align: middle
}

@media only screen and (max-width:767px) {
    .workspace-dispatch__form .fieldlabel,
    .workspace-dispatch__form .fieldtext {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.workspace-dispatch__form .fieldlabel {
    width: 124px
}

@media only screen and (max-width:767px) {
    .workspace-dispatch__form .fieldlabel {
        width: 62px
    }
}

.workspace-dispatch__form .fieldtext {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #fff;
    display: inline-block;
    margin: 0 0 0 5px;
    padding: 0;
    text-transform: capitalize;
    width: -webkit-calc(100% - 134px);
    width: calc(100% - 134px)
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-dispatch__form .fieldtext {
        width: 50%
    }
}

.workspace-dispatch__form .matches {
    left: 132px;
    position: absolute;
    top: 0;
    list-style: none;
    z-index: 0
}

@media only screen and (max-width:767px) {
    .workspace-dispatch__form .matches {
        left: 70px
    }
}

.workspace-dispatch__form .matches li {
    color: #343434;
    display: block;
    font-size: 36px;
    font-size: 2.25rem;
    text-transform: capitalize
}

@media only screen and (max-width:767px) {
    .workspace-dispatch__form .matches li {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.workspace-dispatch__collection {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: -37px 0 90px;
    padding: 0 15%;
    position: relative;
    top: 50%;
    width: 100%
}

@media only screen and (max-width:767px),
only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .workspace-dispatch__collection {
        margin: 0;
        padding: 0;
        top: 100px
    }
}

@media only screen and (max-width:767px) {
    .workspace-dispatch__collection {
        top: 0
    }
}

.workspace-dispatch__collection .btn {
    display: block;
    font-size: 50px;
    font-size: 3.125rem;
    margin: 0
}

.workspace-dispatch__collection .btn .text {
    color: #fff;
    display: block;
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 2.05555556;
    text-transform: capitalize
}

@media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-width:768px) and (max-width:1024px) {
    .workspace-dispatch__collection .btn .text {
        line-height: 1.55555556
    }
}

@media only screen and (max-width:767px) {
    .workspace-dispatch__collection .btn .text {
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 2
    }
}

.workspace-dispatch__collection .btn.is--disabled .text {
    color: hsla(0, 0%, 100%, .2)
}

.workspace-dispatch__collection .btn:hover .text {
    color: hsla(0, 0%, 100%, .6)
}

.workspace-dispatch__alphabet {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    width: 5%
}

@media only screen and (max-width:767px) {
    .workspace-dispatch__alphabet {
        display: block
    }
}

.workspace-dispatch__alphabet .btn {
    color: #fff;
    display: block;
    font-size: 10px;
    font-size: .625rem;
    margin: 10px auto;
    text-transform: uppercase;
    position: relative
}

.workspace-dispatch__alphabet .btn:after {
    left: 0;
    position: absolute;
    top: auto;
    bottom: 0;
    background-color: #fff;
    height: 1px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
    transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
    transition: transform .2s cubic-bezier(.215, .61, .355, 1);
    transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
    width: 100%
}

.workspace-dispatch__alphabet .btn:hover {
    color: hsla(0, 0%, 100%, .6)
}

.workspace-dispatch__alphabet .btn.is--active:after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}
.logoname-img {
    z-index: 99;
}
.managemenu-pos {
    position: relative;
    z-index: 99;
}
/*# sourceMappingURL=front.css.map*/