@charset "UTF-8";
body,
html {
    height: 100vh;
    margin: 0;
    padding: 0
}

*,
:after,
:before,
input[type=search] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

b,
strong {
    font-weight: 700
}

.ir {
    text-indent: -10000px
}

address {
    font-style: normal
}

figure {
    margin: 0
}

ul {
    list-style: none
}

ul,
ul li {
    margin: 0;
    padding: 0
}

img {
    max-width: 100%
}

.icon,
svg {
    display: block
}

button {
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    padding: 0
}

a {
    text-decoration: none;
    color: inherit
}

a[href^="tel:"] {
    color: inherit;
    cursor: text
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn)
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@font-face {
    font-family: f37bolton;
    src: url(../fonts/f37bolton-regular-webfont.woff2) format("woff2"), url(../fonts/f37bolton-regular-webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: f37bolton;
    src: url(../fonts/f37bolton-bold-webfont.woff2) format("woff2"), url(../fonts/f37bolton-bold-webfont.woff) format("woff");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: f37bolton;
    src: url(../fonts/f37bolton-italic-webfont.woff2) format("woff2"), url(../fonts/f37bolton-italic-webfont.woff) format("woff");
    font-weight: 400;
    font-style: italic
}

::-moz-selection {
    background: #000;
    color: #fff
}

::selection {
    background: #000;
    color: #fff
}

html {
    background-color: #f8f8f8;
    font-size: 10px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only all and (min-width:700px) and (max-width:1099px) {
    html {
        font-size: 7px
    }
}

@media only all and (max-width:699px) {
    html {
        font-size: 6px
    }
}

body {
    font-family: f37bolton, helvetica neue, helvetica, sans-serif;
    font-weight: 500;
    color: #242426;
    -webkit-font-variant-ligatures: none;
    font-variant-ligatures: none;
    font-size: 2.8rem;
    line-height: 1.5;
    text-align: left;
    overflow-x: hidden
}

@media only all and (min-width:768px) {
    body {
        padding-top: 90px
    }
}

html.noscroll {
    height: 100%
}

html.noscroll body {
    height: 100%;
    overflow: hidden
}

h1,
h2,
h3 {
    font-size: inherit;
    font-weight: inherit
}

hr {
    height: 1px;
    border: 0;
    background-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .1)
}

svg {
    display: block;
    width: 100%
}

html.js #app {
    display: none
}

html.js #app.loaded,
html.js.state-error #app {
    display: block
}

header {
    -webkit-transition: -webkit-transform .5s cubic-bezier(.25, .46, .45, .94), color .4s;
    -webkit-transition: color .4s, -webkit-transform .5s cubic-bezier(.25, .46, .45, .94);
    transition: color .4s, -webkit-transform .5s cubic-bezier(.25, .46, .45, .94);
    transition: transform .5s cubic-bezier(.25, .46, .45, .94), color .4s;
    transition: transform .5s cubic-bezier(.25, .46, .45, .94), color .4s, -webkit-transform .5s cubic-bezier(.25, .46, .45, .94)
}

@media only all and (min-width:768px) {
    header {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 3%;
        font-size: 24px;
        height: 90px;
        line-height: 90px
    }
}

@media only all and (min-width:768px) and (min-width:700px) and (max-width:999px) {
    header {
        font-size: 20px
    }
}

@media only all and (min-width:0px) and (max-width:767px) {
    header {
        text-align: center;
        position: static;
        font-size: 16px;
        margin: 20px 0 40px
    }
}

@media only all and (min-width:0px) and (max-width:767px) and (min-width:0px) and (max-width:359px) {
    header {
        font-size: 14px
    }
}

header.down {
    -webkit-transform: translate3d(0, -110px, 0);
    transform: translate3d(0, -110px, 0)
}

header .brand {
    color: inherit;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: -webkit-transform .1s cubic-bezier(.25, .46, .45, .94);
    transition: -webkit-transform .1s cubic-bezier(.25, .46, .45, .94);
    transition: transform .1s cubic-bezier(.25, .46, .45, .94);
    transition: transform .1s cubic-bezier(.25, .46, .45, .94), -webkit-transform .1s cubic-bezier(.25, .46, .45, .94)
}

@media only all and (min-width:0px) and (max-width:767px) {
    header .brand {
        font-size: 20px;
        display: inline-block;
        line-height: 1;
        text-align: center;
        margin-bottom: 10px
    }
}

@media only all and (min-width:768px) {
    header .brand {
        float: left;
        padding-left: 0
    }
}

header .brand span:before {
    left: 0
}

header .brand .icon-logo {
    display: inline-block
}

@media only all and (min-width:768px) {
    header .brand .icon-logo svg {
        width: 222px;
        height: 19px
    }
}

@media only all and (min-width:768px) and (min-width:700px) and (max-width:999px) {
    header .brand .icon-logo svg {
        width: 200px;
        height: 16px
    }
}

@media only all and (min-width:0px) and (max-width:767px) {
    header .brand .icon-logo svg {
        width: 54vw;
        max-width: 200px;
        height: 16px
    }
}

header .search-overlay {
    display: none
}

header .search-toggler,
header a {
    position: relative;
    text-decoration: none;
    display: inline-block;
    font-weight: 700
}

@media only all and (min-width:768px) {
    header .search-toggler,
    header a {
        padding: 0 20px;
        height: 100%;
        vertical-align: top
    }
}

@media only all and (min-width:768px) and (min-width:700px) and (max-width:999px) {
    header .search-toggler,
    header a {
        padding: 0 15px
    }
}

@media only all and (min-width:768px) {
    header .search-toggler>span,
    header a>span {
        display: block;
        position: relative
    }
    header .search-toggler>span:before,
    header a>span:before {
        content: " ";
        position: absolute;
        height: 5px;
        top: -5px;
        left: 0;
        right: 0;
        background-color: currentColor;
        -webkit-transition: top .15s cubic-bezier(.215, .61, .355, 1);
        transition: top .15s cubic-bezier(.215, .61, .355, 1)
    }
}

@media only all and (min-width:768px) {
    header .search-toggler.active span:before,
    header a.active span:before {
        top: 0
    }
}

@media only all and (min-width:768px) and (min-width:768px) {
    header .search-toggler:hover span:before,
    header a:hover span:before {
        top: 0
    }
}

@media only all and (min-width:768px) {
    html.touch header .search-toggler.state-touchdown span:before,
    html.touch header a.state-touchdown span:before {
        top: 0
    }
}

@media only all and (min-width:0px) and (max-width:767px) {
    header .search-toggler,
    header a {
        margin: 0 8px;
        vertical-align: middle;
        border-bottom: 3px solid transparent
    }
}

@media only all and (min-width:0px) and (max-width:767px) and (min-width:0px) and (max-width:359px) {
    header .search-toggler,
    header a {
        margin: 0 5px
    }
}

@media only all and (min-width:0px) and (max-width:767px) {
    header .search-toggler.active,
    header a.active {
        border-bottom-color: currentColor
    }
}

header .search-toggler {
    background-color: transparent;
    padding-right: 0;
    display: none
}

html.js header .search-toggler {
    display: inline-block
}

@media only all and (min-width:768px) {
    header .search-toggler {
        float: right
    }
}

@media only all and (min-width:0px) and (max-width:767px) {
    header .search-toggler {
        vertical-align: -10px;
        margin: 0 4px
    }
}

@media only all and (min-width:0px) and (max-width:767px) and (min-width:0px) and (max-width:359px) {
    header .search-toggler {
        vertical-align: -7px
    }
}

header .search-toggler .icon {
    -webkit-transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, transform .2s;
    transition: opacity .2s, transform .2s, -webkit-transform .2s
}

header .search-toggler .icon svg {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: -11px
}

@media only all and (max-width:999px) {
    header .search-toggler .icon svg {
        width: 35px;
        height: 35px
    }
}

@media only all and (min-width:0px) and (max-width:767px) {
    header .search-toggler .icon svg {
        display: block;
        width: 26px;
        height: 26px;
        position: relative;
        top: -2px
    }
}

@media only all and (min-width:0px) and (max-width:767px) and (min-width:0px) and (max-width:359px) {
    header .search-toggler .icon svg {
        width: 21px;
        height: 21px
    }
}

body.search-body header .search-toggler>span:before {
    top: 0;
    color: #000
}

@media only all and (min-width:768px) {
    header nav {
        float: right
    }
}

@media only all and (min-width:0px) and (max-width:767px) {
    header nav {
        text-align: center;
        padding: 0 0 15px
    }
}

header.state-menu nav {
    opacity: 1;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

header.state-menu nav a {
    color: #000;
    text-align: center;
    display: block
}

.langpicker-temp nav a {
    font-size: 12px;
    letter-spacing: 2px;
    padding: 0 8px
}

.langpicker-temp nav a i {
    font-style: normal
}

.langpicker-temp nav a.active i {
    border-bottom: 4px solid #fff;
    padding-bottom: 6px
}

main {
    margin: 12rem 0 10rem;
    min-height: 100vh
}

@media only all and (max-width:999px) {
    main {
        margin-top: 40px
    }
}

body.home-route-body main {
    z-index: 1;
    position: relative
}

html:not(.touch) body.lastpage-body main {
    pointer-events: none
}

footer {
    color: #b1b1b1;
    background-color: #fff
}

@media only all and (max-width:999px) {
    footer {
        font-size: 16px
    }
}

@media only all and (min-width:1000px) {
    footer {
        font-size: 20px
    }
}

footer .footer-content {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10rem 0 5rem
}

@media only all and (min-width:700px) and (max-width:999px) {
    footer .footer-content {
        width: 85%
    }
}

@media only all and (max-width:699px) {
    footer .footer-content {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

body.worklist-body footer .footer-content {
    max-width: 100%;
    width: auto;
    margin-left: 7%;
    margin-right: 7%
}

footer .col {
    line-height: 1.6;
    font-weight: 700
}

@media only all and (min-width:700px) {
    footer .col {
        display: inline-block;
        vertical-align: top;
        padding-right: 11rem
    }
}

@media only all and (max-width:699px) {
    footer .col {
        margin-bottom: 40px
    }
}

footer .col h4 {
    margin: 0 0 10px;
    color: #242426
}

footer .col ul {
    margin: 0;
    padding: 0
}

@media only all and (max-width:699px) {
    footer .col ul {
        margin-bottom: 15px
    }
}

@media only all and (min-width:700px) {
    footer .col ul {
        margin-bottom: 40px
    }
}

footer .col a {
    display: inline-block;
    line-height: 1;
    color: #b56b3c;
    -webkit-transition: color .18s;
    transition: color .18s
}

@media only all and (min-width:768px) {
    footer .col a:hover {
        color: #c9865b
    }
}

html.touch footer .col a.state-touchdown {
    color: #c9865b
}

footer .icon-rightArrow {
    display: inline-block;
    vertical-align: -1px;
    width: 15px;
    height: 15px;
    margin-left: 3px
}

footer .icon-rightArrow svg {
    fill: currentColor
}

footer .bottom {
    overflow: hidden;
    margin: 10rem 0 0;
    font-size: 14px;
    color: #242426
}

footer .bottom .legal {
    margin: 0;
    letter-spacing: .025em
}

@media only all and (min-width:1000px) {
    footer .bottom .legal {
        float: left
    }
}

@media only all and (max-width:699px) {
    footer .bottom .legal {
        font-size: 12px
    }
}

@media only all and (min-width:1000px) {
    footer .bottom .legal {
        margin-top: 25px
    }
}

@media only all and (min-width:1000px) {
    footer .bottom .social {
        float: right
    }
}

@media only all and (max-width:999px) {
    footer .bottom .social {
        margin-bottom: 15px
    }
}

footer .bottom .social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    -webkit-transition: color .18s;
    transition: color .18s
}

@media only all and (max-width:999px) {
    footer .bottom .social a {
        margin-right: 10px;
        width: 35px;
        height: 35px;
        padding: 2px
    }
}

@media only all and (min-width:1000px) {
    footer .bottom .social a {
        margin-left: 22px
    }
}

footer .bottom .social a svg {
    fill: #b56b3c;
    -webkit-transition: fill .18s;
    transition: fill .18s
}

footer .bottom .social a:hover svg {
    fill: #c9865b
}

html:not(.touch) body.home-route-body footer {
    position: fixed;
    bottom: 0;
    width: 100%
}

@-webkit-keyframes showAwardInfo {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -10px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0)
    }
}

@keyframes showAwardInfo {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -10px, 0);
        transform: translate3d(-50%, -10px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }
}

.award {
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 1rem .5rem;
    width: 20%
}

html.js .award {
    width: 9rem
}

html.js .award.state-active .info {
    visibility: visible;
    -webkit-animation: showAwardInfo .3s cubic-bezier(.4, 0, .2, 1);
    animation: showAwardInfo .3s cubic-bezier(.4, 0, .2, 1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.award.unlinked {
    cursor: default
}

.award img {
    display: block;
    margin: 0 auto;
    width: 9rem
}

.award .info {
    border: 2px solid transparent;
    margin-top: 20px;
    pointer-events: none
}

html.js .award .info {
    position: absolute;
    background: #fff;
    z-index: 1;
    top: 100%;
    left: 50%;
    width: 24rem;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0)
}

html.js .award .info:after {
    content: " ";
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 14px solid #fff
}

html.touch .award .info {
    pointer-events: auto
}

html.js .award .info {
    opacity: 0;
    visibility: hidden
}

.award .info .content {
    padding: 2rem;
    font-size: 16px
}

@media only all and (max-width:699px) {
    .award .info .content {
        font-size: 12px
    }
}

.award .info .content .title {
    display: block;
    padding-bottom: 4px
}

.award .info .content>div {
    padding: 12px 0 8px;
    line-height: 1.2;
    position: relative
}

.award .info .content>div:last-child {
    padding-bottom: 0
}

.award .info .content>div:before {
    content: " ";
    position: absolute;
    bottom: 100%;
    width: 10%;
    left: 50%;
    margin-left: -5%;
    height: 2px;
    background-color: #000
}

.award .info .content .viewCase a {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(currentColor, currentColor);
    background-size: .05em 1px, .05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: .03em 0 #f8f8f8, -.03em 0 #f8f8f8, 0 .03em #f8f8f8, 0 -.03em #f8f8f8, .06em 0 #f8f8f8, -.06em 0 #f8f8f8, .09em 0 #f8f8f8, -.09em 0 #f8f8f8, .12em 0 #f8f8f8, -.12em 0 #f8f8f8, .15em 0 #f8f8f8, -.15em 0 #f8f8f8;
    background-position: 0 92%, 100% 92%, 0 92%
}

.contentWrapper {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto
}

@media only all and (min-width:700px) and (max-width:999px) {
    .contentWrapper {
        width: 85%
    }
}

@media only all and (max-width:699px) {
    .contentWrapper {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

html.js:not(.state-error) .image-container {
    overflow: hidden;
    height: 0
}

html.js:not(.state-error) .image-container.ready .image {
    opacity: 1
}

.image-container .image {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat, repeat;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: opacity .4s ease-out;
    transition: opacity .4s ease-out;
    background-blend-mode: multiply
}

html.js:not(.state-error) .image-container .image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5
}

.image-container .image img {
    width: 100%
}

.image-container.nofade .image {
    -webkit-transition: none;
    transition: none
}

.image-container.loading .image,
.image-container.waiting .image {
    opacity: 0
}

.image-container.padding.two-thirds {
    padding-bottom: 66.666666667%
}

html.js .image-container.padding img {
    position: absolute;
    top: 0;
    left: 0
}

.moveOnUp {
    position: fixed;
    z-index: 11;
    background: #fff;
    opacity: 0;
    -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0)
}

.moveOnUp.state-visible {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media only all and (max-width:999px) {
    .moveOnUp {
        right: 0;
        bottom: 20px
    }
}

@media only all and (min-width:1000px) {
    .moveOnUp {
        right: 25px;
        bottom: 25px
    }
}

.moveOnUp .icon {
    margin: 15px 10px
}

.moveOnUp .icon svg {
    width: 40px;
    height: 30px
}

.moveOnUp .icon svg .filled,
.moveOnUp .icon svg .outline {
    -webkit-transition: all .18s cubic-bezier(.4, 0, .2, 1);
    transition: all .18s cubic-bezier(.4, 0, .2, 1)
}

.moveOnUp .icon svg .filled {
    opacity: 0;
    -webkit-transform: translate3d(0, 80%, 0);
    transform: translate3d(0, 80%, 0)
}

@media only all and (min-width:768px) {
    .moveOnUp>a:hover {
        cursor: pointer
    }
    .moveOnUp>a:hover .icon svg .filled {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    .moveOnUp>a:hover .icon svg .outline {
        -webkit-transform: translate3d(0, -80%, 0);
        transform: translate3d(0, -80%, 0)
    }
}

html.touch .moveOnUp>a.state-touchdown {
    cursor: pointer
}

html.touch .moveOnUp>a.state-touchdown .icon svg .filled {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

html.touch .moveOnUp>a.state-touchdown .icon svg .outline {
    -webkit-transform: translate3d(0, -80%, 0);
    transform: translate3d(0, -80%, 0)
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000
}

.overlay .counter {
    position: absolute;
    z-index: 6000;
    cursor: pointer;
    top: 18px;
    left: 18px;
    width: 30px;
    height: 30px;
    font-weight: 400;
    font-size: 11px;
    color: #fff;
    white-space: nowrap
}

.overlay .counter i {
    font-style: normal;
    margin: 0 3px 0 4px;
    display: inline-block;
    color: hsla(0, 0%, 100%, .8)
}

.overlay .image-nav {
    position: fixed;
    top: 50%;
    width: 100%;
    margin-top: -50px;
    color: #fff
}

.overlay .image-nav .link {
    height: 100px;
    width: 60px;
    position: fixed;
    top: 50%;
    left: 0;
    margin-top: -50px;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: all .18s ease-out;
    transition: all .18s ease-out
}

@media only all and (min-width:768px) {
    .overlay .image-nav .link:hover {
        opacity: .6
    }
}

html.touch .overlay .image-nav .link.state-touchdown {
    opacity: .6
}

.overlay .image-nav .link.next {
    right: 0;
    left: auto
}

.overlay .image-nav .link svg {
    width: 16px;
    fill: #fff;
    display: block;
    margin: 29px auto 0
}

.overlay.state-active {
    display: block
}

.overlay.state-inactive {
    display: none
}

.overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5)
}

.overlay-wrapper {
    background: #fff;
    position: absolute;
    height: 60%;
    width: 60%;
    max-width: 600px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only all and (min-width:0px) and (max-width:767px) {
    .overlay-wrapper {
        width: 90%;
        height: 90%
    }
}

.overlay-wrapper .image-content {
    display: none
}

.overlay-wrapper .content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    padding: 30px 40px;
    line-height: 1.3
}

.overlay-wrapper .content a {
    color: #b56b3c
}

@media only all and (min-width:768px) {
    .overlay-wrapper .content a:hover {
        color: #242426
    }
}

html.touch .overlay-wrapper .content a.state-touchdown {
    color: #242426
}

.overlay-wrapper .content h1,
.overlay-wrapper .content h2,
.overlay-wrapper .content h3 {
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 2px
}

.overlay-wrapper .close-button {
    position: absolute;
    z-index: 6000;
    cursor: pointer;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px
}

.overlay-wrapper .close-button svg polygon {
    -webkit-transition: opacity .18s;
    transition: opacity .18s;
    fill: #fff
}

@media only all and (min-width:768px) {
    .overlay-wrapper .close-button:hover svg polygon {
        opacity: .7
    }
}

html.touch .overlay-wrapper .close-button.state-touchdown svg polygon {
    opacity: .7
}

.overlay.image .overlay-wrapper {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transform: none;
    transform: none;
    max-width: 100%;
    background: rgba(0, 0, 0, .9)
}

.overlay.image .overlay-wrapper .spinner {
    border-color: hsla(0, 0%, 100%, .5) transparent hsla(0, 0%, 100%, .5) hsla(0, 0%, 100%, .5)
}

.overlay.image .overlay-wrapper .image-content {
    display: block;
    padding: 0;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 0;
    right: 0;
    cursor: -webkit-zoom-out;
    cursor: zoom-out
}

.overlay.image .overlay-wrapper .image-content .image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    margin: 0;
    background: #000;
    color: hsla(0, 0%, 100%, .95);
    max-height: 93px;
    line-height: 16px;
    font-size: 12px;
    letter-spacing: .35px;
    white-space: pre-line
}

.overlay.general-error .overlay-wrapper {
    height: 180px
}

.overlay.general-error .overlay-wrapper .content {
    padding-top: 80px;
    background: url(/i/warning.svg) no-repeat;
    background-size: 50px;
    font-size: 20px;
    text-align: center;
    background-position: 50% 40px
}

.overlay.general-error .overlay-wrapper .content a {
    color: #b56b3c;
    border-bottom: 1px solid;
    cursor: pointer
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    text-indent: -9999em;
    margin: -10px 0 0 -10px;
    border: 3px solid hsla(0, 0%, 100%, .2);
    border-left-color: #fff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s linear infinite;
    animation: load8 1.1s linear infinite
}

.spinner.grey {
    border-color: rgba(36, 36, 38, .4) rgba(36, 36, 38, .4) rgba(36, 36, 38, .4) #fff
}

.spinner.thin {
    border-width: 1px
}

.spinner.black {
    border-color: #000 #000 #000 #fff
}

.spinner.big {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px
}

.spinner,
.spinner:after {
    border-radius: 50%;
    width: 20px;
    height: 20px
}

.video-comp {
    height: 0;
    padding-bottom: 56.25%;
    background-color: transparent;
    position: relative;
    display: block;
    overflow: hidden
}

.video-comp.state-autoplay {
    pointer-events: none
}

.video-comp.state-autoplay .videoContainer iframe {
    display: block
}

.video-comp .videoContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.video-comp .videoContainer .icon {
    position: absolute;
    z-index: 2;
    width: 12rem;
    height: 13rem;
    overflow: hidden;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.video-comp .videoContainer .icon svg {
    fill: #fff
}

.video-comp .videoContainer .icon svg path {
    -webkit-transition: opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-transform .15s cubic-bezier(.4, 0, .2, 1);
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-transform .15s cubic-bezier(.4, 0, .2, 1);
    transition: transform .15s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1);
    transition: transform .15s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-transform .15s cubic-bezier(.4, 0, .2, 1)
}

.video-comp .videoContainer .icon svg .filled {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms
}

.video-comp .videoContainer .icon svg .outline {
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
}

.video-comp .videoContainer iframe {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 0
}

.video-comp.state-touchactive {
    background-color: #000
}

.video-comp.state-active iframe {
    display: block
}

.video-comp.state-active .poster .icon {
    display: none
}

@media only all and (min-width:768px) {
    .video-comp:hover {
        cursor: pointer
    }
    .video-comp:hover .icon svg path {
        -webkit-transition: opacity .15s cubic-bezier(.4, 0, .2, 1), -webkit-transform .2s cubic-bezier(.4, 0, .2, 1);
        transition: opacity .15s cubic-bezier(.4, 0, .2, 1), -webkit-transform .2s cubic-bezier(.4, 0, .2, 1);
        transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .15s cubic-bezier(.4, 0, .2, 1);
        transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .15s cubic-bezier(.4, 0, .2, 1), -webkit-transform .2s cubic-bezier(.4, 0, .2, 1)
    }
    .video-comp:hover .icon svg .filled {
        -webkit-transition-delay: .1s;
        transition-delay: .1s;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
    .video-comp:hover .icon svg .outline {
        -webkit-transition-delay: 0ms;
        transition-delay: 0ms;
        -webkit-transform: translate3d(60%, 0, 0);
        transform: translate3d(60%, 0, 0);
        opacity: 0
    }
}

html.touch .video-comp.state-touchdown {
    cursor: pointer
}

html.touch .video-comp.state-touchdown .icon svg path {
    -webkit-transition: opacity .15s cubic-bezier(.4, 0, .2, 1), -webkit-transform .2s cubic-bezier(.4, 0, .2, 1);
    transition: opacity .15s cubic-bezier(.4, 0, .2, 1), -webkit-transform .2s cubic-bezier(.4, 0, .2, 1);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .15s cubic-bezier(.4, 0, .2, 1);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .15s cubic-bezier(.4, 0, .2, 1), -webkit-transform .2s cubic-bezier(.4, 0, .2, 1)
}

html.touch .video-comp.state-touchdown .icon svg .filled {
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
}

html.touch .video-comp.state-touchdown .icon svg .outline {
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0
}

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

html.js:not(.state-error) .awards-comp {
    opacity: 0;
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94);
    transition: all .4s cubic-bezier(.25, .46, .45, .94)
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .awards-comp {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0)
    }
}

html.js:not(.state-error) .awards-comp.state-ticked {
    opacity: 1
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .awards-comp.state-ticked {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.awards-comp h1 {
    font-size: 5rem;
    margin: 0 0 9rem
}

.awards-comp h1,
.awards-comp h2 {
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    padding: 0
}

.awards-comp h2 {
    font-size: 3.3rem;
    margin: 0 0 12px
}

.awards-comp .festivalList {
    padding-bottom: 15rem
}

.awards-comp .awardsList {
    margin-bottom: 10rem;
    text-align: center
}

.clients-comp {
    font-size: 85%
}

.clients-comp h1,
.clients-comp h2 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 9rem;
    padding: 0
}

.clients-comp ul {
    margin: 0;
    padding: 0
}

@media only all and (min-width:700px) and (max-width:1099px) {
    .clients-comp ul {
        -moz-columns: 2;
        -webkit-columns: 2;
        column-count: 2
    }
}

@media only all and (min-width:700px) {
    .clients-comp ul {
        -moz-column-fill: balance;
        -webkit-column-fill: balance;
        column-fill: balance
    }
}

@media only all and (min-width:1100px) {
    .clients-comp ul {
        -moz-columns: 3;
        -webkit-columns: 3;
        column-count: 3
    }
}

.clients-comp ul li {
    line-height: 1.1;
    padding-right: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -moz-page-break-inside: avoid;
    column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column
}

@media only all and (max-width:699px) {
    .clients-comp ul li {
        text-align: center
    }
}

.clients-comp ul a {
    font-weight: 700;
    display: block;
    padding-top: 5px;
    margin-bottom: 1.4rem;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .clients-comp ul a:hover {
        opacity: .7
    }
}

html.touch .clients-comp ul a.state-touchdown {
    opacity: .7
}

.clients-comp .currentClientList {
    margin-bottom: 11rem
}

html.js:not(.state-error) .contact-comp {
    opacity: 0;
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94);
    transition: all .4s cubic-bezier(.25, .46, .45, .94)
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .contact-comp {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0)
    }
}

html.js:not(.state-error) .contact-comp.state-ticked {
    opacity: 1
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .contact-comp.state-ticked {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@media only all and (min-width:700px) {
    .contact-comp {
        font-size: 80%
    }
}

.contact-comp h1 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 9rem;
    padding: 0
}

.contact-comp h2 {
    font-weight: 700;
    font-size: 3.6rem;
    margin-top: 0;
    margin-bottom: 4rem
}

@media only all and (min-width:0px) and (max-width:767px) {
    .contact-comp h2 {
        text-align: center
    }
}

.contact-comp .preamble {
    margin-bottom: 10rem
}

@media only all and (min-width:768px) {
    .contact-comp .preamble {
        width: 80%;
        margin-left: auto;
        margin-right: auto
    }
}

html:not(.touch) .contact-comp a[href^="tel:"] {
    color: inherit
}

.contact-comp .socialLinks {
    margin-top: 2rem
}

.contact-comp .socialLinks a {
    display: inline-block;
    width: 3.75rem;
    height: 3.75rem;
    margin-right: 1.175rem;
    -webkit-transition: color .18s;
    transition: color .18s
}

.contact-comp .socialLinks a svg {
    fill: #b56b3c;
    -webkit-transition: fill .18s;
    transition: fill .18s
}

.contact-comp .socialLinks a:hover svg {
    fill: #c9865b
}

.contact-comp .emails {
    margin-top: 6rem
}

.contact-comp hr {
    margin: 10rem 0
}

.contact-comp p {
    margin: 0 0 2rem
}

.contact-comp p:last-of-type {
    margin-bottom: 0
}

.contact-comp section {
    padding: 6rem 0
}

.contact-comp section:first-child {
    padding-top: 0
}

.contact-comp section:last-child {
    padding-bottom: 0
}

.contact-comp section:nth-child(2n) {
    background-color: #fff
}

@media only all and (max-width:699px) {
    .contact-comp .cols {
        text-align: center
    }
}

.contact-comp .cols+* {
    margin-top: 10rem
}

.contact-comp .cols .col a {
    color: #b56b3c;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .contact-comp .cols .col a:hover {
        opacity: .7
    }
}

html.touch .contact-comp .cols .col a.state-touchdown {
    opacity: .7
}

@media only all and (max-width:699px) {
    .contact-comp .cols .col {
        margin-bottom: 7rem;
        word-break: break-word
    }
}

@media only all and (min-width:700px) {
    .contact-comp .cols .col {
        display: inline-block;
        vertical-align: top;
        width: 30%
    }
    .contact-comp .cols .col:nth-of-type(2) {
        margin-left: 5%;
        margin-right: 5%
    }
}

.content-comp section {
    width: 80%;
    max-width: 1200px;
    margin: 6rem auto 0
}

@media only all and (min-width:700px) and (max-width:999px) {
    .content-comp section {
        width: 85%
    }
}

@media only all and (max-width:699px) {
    .content-comp section {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

.content-comp section:first-of-type {
    margin-top: 0
}

.content-comp section:empty {
    height: 0;
    margin-top: 10rem
}

.content-comp section.fullWidth {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0
}

.content-comp h1 {
    font-size: 5rem
}

.content-comp h1,
.content-comp h2 {
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0
}

.content-comp h2 {
    font-size: 3.3rem;
    font-size: 3.6rem
}

.content-comp h3 {
    font-weight: 700;
    margin: 0
}

.content-comp h1,
.content-comp h2,
.content-comp ol,
.content-comp p,
.content-comp ul {
    width: 70%;
    margin: 0 auto 5rem
}

@media only all and (min-width:0px) and (max-width:767px) {
    .content-comp h1,
    .content-comp h2,
    .content-comp ol,
    .content-comp p,
    .content-comp ul {
        width: 100%
    }
}

.content-comp h1+ol,
.content-comp h1+p,
.content-comp h1+ul,
.content-comp h2+ol,
.content-comp h2+p,
.content-comp h2+ul,
.content-comp ol+ol,
.content-comp ol+p,
.content-comp ol+ul,
.content-comp p+ol,
.content-comp p+p,
.content-comp p+ul,
.content-comp ul+ol,
.content-comp ul+p,
.content-comp ul+ul {
    margin-top: -2.5rem
}

.content-comp h1 a,
.content-comp h2 a,
.content-comp ol a,
.content-comp p a,
.content-comp ul a {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(currentColor, currentColor);
    background-size: .05em 2px, .05em 2px, 2px 2px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: .03em 0 #f8f8f8, -.03em 0 #f8f8f8, 0 .03em #f8f8f8, 0 -.03em #f8f8f8, .06em 0 #f8f8f8, -.06em 0 #f8f8f8, .09em 0 #f8f8f8, -.09em 0 #f8f8f8, .12em 0 #f8f8f8, -.12em 0 #f8f8f8, .15em 0 #f8f8f8, -.15em 0 #f8f8f8;
    background-position: 0 92%, 100% 92%, 0 92%;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .content-comp h1 a:hover,
    .content-comp h2 a:hover,
    .content-comp ol a:hover,
    .content-comp p a:hover,
    .content-comp ul a:hover {
        opacity: .7
    }
}

html.touch .content-comp h1 a.state-touchdown,
html.touch .content-comp h2 a.state-touchdown,
html.touch .content-comp ol a.state-touchdown,
html.touch .content-comp p a.state-touchdown,
html.touch .content-comp ul a.state-touchdown {
    opacity: .7
}

.content-comp:not(h1)+h2 {
    margin-top: 8rem
}

.content-comp ul {
    list-style-type: disc;
    list-style-position: inside;
    padding: 0 0 0 20px
}

.content-comp ul li {
    list-style-position: initial
}

.content-comp ul li p {
    width: 100%;
    margin: 0
}

.content-comp ol {
    list-style-type: decimal;
    list-style-position: outside
}

.content-comp ol li {
    margin-bottom: 2rem
}

.content-comp ol li p {
    width: 100%
}

.content-comp blockquote {
    font-style: italic;
    font-size: 3.4rem;
    color: #b2b2b2;
    width: 70%;
    padding-left: 6%;
    padding-right: 6%;
    margin-left: auto;
    margin-right: auto;
    quotes: "“" "”" "‘" "’"
}

.content-comp blockquote:before {
    content: open-quote
}

.content-comp blockquote:after {
    content: close-quote
}

.content-comp .text.alignLeft h1,
.content-comp .text.alignLeft h2,
.content-comp .text.alignLeft h3 {
    text-align: left
}

.content-comp .text.alignRight,
.content-comp .text.alignRight h1,
.content-comp .text.alignRight h2,
.content-comp .text.alignRight h3 {
    text-align: right
}

.content-comp .text.alignCenter,
.content-comp .text.alignCenter h1,
.content-comp .text.alignCenter h2,
.content-comp .text.alignCenter h3 {
    text-align: center
}

.content-comp .caption {
    font-size: 1.8rem;
    padding: 15px 0
}

.content-comp .caption a {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(currentColor, currentColor);
    background-size: .05em 1px, .05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: .03em 0 #f8f8f8, -.03em 0 #f8f8f8, 0 .03em #f8f8f8, 0 -.03em #f8f8f8, .06em 0 #f8f8f8, -.06em 0 #f8f8f8, .09em 0 #f8f8f8, -.09em 0 #f8f8f8, .12em 0 #f8f8f8, -.12em 0 #f8f8f8, .15em 0 #f8f8f8, -.15em 0 #f8f8f8;
    background-position: 0 92%, 100% 92%, 0 92%;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .content-comp .caption a:hover {
        opacity: .7
    }
}

html.touch .content-comp .caption a.state-touchdown {
    opacity: .7
}

.content-comp .gallery,
.content-comp .image.legacy {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto
}

.content-comp .gallery>.link {
    display: block
}

.content-comp .gallery>.link>.image-container {
    margin-top: 6rem
}

.content-comp .image-fullwidth {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0
}

.content-comp .image-fullwidth .caption {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto
}

@media only all and (min-width:700px) and (max-width:999px) {
    .content-comp .image-fullwidth .caption {
        width: 85%
    }
}

@media only all and (max-width:699px) {
    .content-comp .image-fullwidth .caption {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

.content-comp .image-2col {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.content-comp .image-2col.legacy {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto
}

.content-comp .image-2col figure {
    width: 47.5%;
    width: calc(50% - 3rem);
    display: inline-block;
    vertical-align: top
}

body.home-route-body {
    padding-top: 0
}

@media only all and (min-width:768px) {
    body.home-route-body header {
        position: fixed;
        color: #fff;
        background: transparent
    }
    html.touch body.home-route-body header {
        position: absolute
    }
}

@media only all and (min-width:0px) and (max-width:767px) {
    body.home-route-body header {
        position: absolute;
        z-index: 10;
        width: 100%;
        color: #fff
    }
}

body.home-route-body header svg {
    fill: currentColor
}

@media only all and (min-width:768px) {
    body.home-route-body.blackmenu-body header {
        color: #242426
    }
}

body.home-route-body main {
    margin: 0
}

@media only all and (min-width:768px) {
    body.home-route-body .moveOnUp {
        display: none
    }
}

.home-comp {
    overflow: hidden
}

.home-comp .page {
    position: relative;
    height: 100vh;
    z-index: 5
}

.home-comp .page.half {
    height: 400vh
}

.home-comp .page .page-inner,
.home-comp .page .page-outer {
    height: 100%;
    width: 100%
}

.home-comp .page .page-inner {
    background: #000
}

.home-comp .item {
    position: relative;
    z-index: 5;
    overflow: hidden;
    -webkit-perspective: 800px;
    perspective: 800px;
    color: #fff
}

.home-comp .item .veil {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0
}

.home-comp .item .image-container {
    -webkit-transition: -webkit-transform .1s ease-out;
    transition: -webkit-transform .1s ease-out;
    transition: transform .1s ease-out;
    transition: transform .1s ease-out, -webkit-transform .1s ease-out
}

.home-comp .item .image-container.ready .image {
    opacity: 1
}

.home-comp .item .image {
    position: absolute;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    -webkit-transition: opacity .5s, -webkit-transform .9s;
    transition: opacity .5s, -webkit-transform .9s;
    transition: opacity .5s, transform .9s;
    transition: opacity .5s, transform .9s, -webkit-transform .9s
}

.home-comp .item .image.blur {
    opacity: 1
}

.home-comp .item .label {
    position: absolute;
    z-index: 2;
    top: 25%;
    height: 50%;
    width: 80%;
    left: 10%;
    text-align: center;
    display: table;
    line-height: 1
}

.home-comp .item .label .align {
    display: table-cell;
    vertical-align: middle
}

.home-comp .item .label .client,
.home-comp .item .label .title {
    font-weight: 700;
    -webkit-transition: all .5s cubic-bezier(.4, 0, .2, 1);
    transition: all .5s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.home-comp .item .label .client {
    position: relative;
    letter-spacing: 0;
    display: block;
    color: hsla(0, 0%, 100%, .7)
}

.home-comp .item .label .title {
    position: relative
}

.home-comp .item .label .viewCaseBtn {
    color: inherit;
    position: relative;
    z-index: 100;
    padding: 0 18px;
    height: 40px;
    line-height: 45px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    -webkit-transition: all .8s cubic-bezier(.23, 1, .32, 1);
    transition: all .8s cubic-bezier(.23, 1, .32, 1);
    -webkit-transform: translate3d(0, 4px, 0);
    transform: translate3d(0, 4px, 0)
}

.home-comp .item .label .viewCaseBtn span {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    width: 100%;
    color: transparent;
    border-bottom: 5px solid #fff
}

.home-comp .item .label .viewCaseBtn span:after,
.home-comp .item .label .viewCaseBtn span:before {
    content: attr(title);
    position: absolute;
    height: 100%;
    -webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
    bottom: 0;
    color: #fff;
    left: 0;
    right: 0
}

.home-comp .item .label .viewCaseBtn span:before {
    opacity: 1;
    bottom: 0;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}

.home-comp .item .label .viewCaseBtn span:after {
    -webkit-transform: translate3d(0, 100%, 0) rotateX(-110deg);
    transform: translate3d(0, 100%, 0) rotateX(-110deg);
    opacity: 0;
    bottom: 0
}

@media only all and (min-width:768px) {
    .home-comp .item .label .viewCaseBtn:hover {
        cursor: pointer
    }
    .home-comp .item .label .viewCaseBtn:hover span:before {
        -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
        transform: translate3d(0, -100%, 0) rotateX(110deg);
        opacity: 0
    }
    .home-comp .item .label .viewCaseBtn:hover span:after {
        -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
        transform: translateZ(0) rotateX(0deg) scale(1);
        opacity: 1
    }
}

html.touch .home-comp .item .label .viewCaseBtn.state-touchdown {
    cursor: pointer
}

html.touch .home-comp .item .label .viewCaseBtn.state-touchdown span:before {
    -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
    transform: translate3d(0, -100%, 0) rotateX(110deg);
    opacity: 0
}

html.touch .home-comp .item .label .viewCaseBtn.state-touchdown span:after {
    -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
    transform: translateZ(0) rotateX(0deg) scale(1);
    opacity: 1
}

@media only all and (min-width:768px) {
    html:not(.touch) .home-comp .item .label .viewCaseBtn {
        opacity: 0
    }
}

@media only all and (max-width:699px) {
    .home-comp .item .label {
        width: 90%;
        left: 5%
    }
}

.home-comp .item .vimeo-veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.home-comp .item .vimeo-veil .vimeo-link {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    display: block
}

.home-comp .item .vimeo-video-mobile {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    height: 100%
}

.home-comp .item .vimeo-video-mobile iframe {
    width: 100%
}

.home-comp .item .vimeo-fullscreen {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 0;
    left: 0;
    background-color: #000;
    background-size: cover
}

.home-comp .item .vimeo-fullscreen .vimeo-video {
    height: 100%;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
}

.home-comp .item .vimeo-fullscreen .vimeo-video,
.home-comp .item .vimeo-fullscreen .vimeo-video .vimeo-wrapper {
    display: block;
    left: 0;
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.home-comp .item .vimeo-fullscreen .vimeo-video .vimeo-wrapper {
    height: 300%
}

.home-comp .item .vimeo-fullscreen .vimeo-video .vimeo-wrapper iframe {
    display: block;
    height: 100%;
    width: 100%;
    border: 0;
    -webkit-transition: opacity 1s cubic-bezier(.165, .84, .44, 1);
    transition: opacity 1s cubic-bezier(.165, .84, .44, 1);
    opacity: 0
}

.home-comp .item .vimeo-fullscreen .vimeo-video .vimeo-wrapper iframe.state-playing,
html.touch .home-comp .item .vimeo-fullscreen .vimeo-video .vimeo-wrapper iframe {
    opacity: 1
}

.home-comp .item .explainer {
    background: #fff;
    color: #242426;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    font-size: 5.8rem;
    line-height: 1.3
}

@media screen and (max-height:820px) {
    .home-comp .item .explainer {
        font-size: 3.3rem
    }
}

@media only all and (max-width:699px) {
    .home-comp .item .explainer {
        font-size: 3.3rem;
        padding: 20px;
        text-align: center
    }
}

.home-comp .item .explainer a {
    color: #b56b3c;
    font-weight: 600;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .home-comp .item .explainer a:hover {
        opacity: .7
    }
}

html.touch .home-comp .item .explainer a.state-touchdown {
    opacity: .7
}

.home-comp .item .explainer ul li {
    margin-bottom: 1rem
}

.home-comp .item .explainer p {
    margin: 2rem 0 6rem
}

.home-comp .item .explainer h2 {
    font-size: 20rem;
    font-weight: 600;
    letter-spacing: -.025em;
    margin: 0 0 2rem;
    line-height: 1
}

@media screen and (max-height:820px) {
    .home-comp .item .explainer h2 {
        font-size: 14rem
    }
}

@media only all and (max-width:699px) {
    .home-comp .item .explainer h2 {
        font-size: 14rem
    }
}

.home-comp .item .links {
    position: absolute;
    pointer-events: all;
    z-index: 2;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none
}

.home-comp .item .links>div {
    display: inline-block;
    opacity: 0;
    margin: 20px;
    -webkit-transition: opacity .3s cubic-bezier(.4, 0, .2, 1), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
}

@media only all and (min-width:0px) and (max-width:767px) {
    .home-comp .item .links>div {
        display: block
    }
}

.home-comp .item .links>div:first-child {
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.home-comp .item .links>div:nth-child(2) {
    -webkit-transition-delay: 1.25s;
    transition-delay: 1.25s
}

.home-comp .item .links>div:nth-child(3) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s
}

.home-comp .item .links>div a {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 1
}

@media only all and (min-width:768px) {
    .home-comp .item .links>div a:hover {
        opacity: .6
    }
}

html.touch .home-comp .item .links>div a.state-touchdown {
    opacity: .6
}

.home-comp .item.state-showlinks .links {
    pointer-events: all
}

.home-comp .item.state-showlinks .links>div {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
}

.home-comp .item.half {
    width: 50%;
    height: 50%;
    float: left
}

@media only all and (min-width:0px) and (max-width:767px) {
    html.touch .home-comp .item.half {
        width: 100%;
        height: 25%;
        float: none
    }
}

.home-comp .item.half .label .client,
.home-comp .item.half .label .title {
    font-size: 3.8rem
}

@media only all and (min-width:0px) and (max-width:767px) {
    html.touch .home-comp .item.half .label .client,
    html.touch .home-comp .item.half .label .title {
        font-size: 6rem
    }
}

.home-comp .item.half .label .viewCaseBtn {
    font-size: 12px;
    margin-top: 10px;
    height: 34px;
    line-height: 38px
}

.home-comp .item.half .label .title {
    margin-bottom: .5rem;
    margin-top: 40px
}

.home-comp .item.half .label .client {
    margin-bottom: 20px
}

.home-comp .item.full {
    width: 100%;
    height: 100%
}

.home-comp .item.full .label .viewCaseBtn {
    font-size: 14px
}

.home-comp .item.full .label .client {
    display: block;
    margin-bottom: 36px
}

.home-comp .item.full .label .client,
.home-comp .item.full .label .title {
    font-size: 6rem;
    line-height: 1.1
}

.home-comp .item.full .label .title {
    margin-bottom: .5rem;
    margin-top: 80px
}

@media only all and (min-width:768px) {
    html:not(.touch) .home-comp .page.state-leave-down .label .client,
    html:not(.touch) .home-comp .page.state-leave-down .label .title,
    html:not(.touch) .home-comp .page.state-leave-up .label .client,
    html:not(.touch) .home-comp .page.state-leave-up .label .title {
        opacity: 0
    }
    html:not(.touch) .home-comp .page.state-leave-up .label .title {
        -webkit-transform: translate3d(0, -35px, 0);
        transform: translate3d(0, -35px, 0)
    }
    html:not(.touch) .home-comp .page.state-leave-up .label .client {
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0)
    }
    html:not(.touch) .home-comp .page.state-leave-up .label .viewCaseBtn {
        opacity: 0!important;
        -webkit-transform: translate3d(0, 4px, 0);
        transform: translate3d(0, 4px, 0)
    }
    html:not(.touch) .home-comp .page.state-leave-down .label .title {
        -webkit-transform: translate3d(0, 35px, 0);
        transform: translate3d(0, 35px, 0)
    }
    html:not(.touch) .home-comp .page.state-leave-down .label .client {
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    html:not(.touch) .home-comp .page.state-leave-down .label .viewCaseBtn {
        opacity: 0!important;
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
    html:not(.touch) .home-comp .page.state-enter-from-above .image-container .image.main,
    html:not(.touch) .home-comp .page.state-enter-from-below .image-container .image.main,
    html:not(.touch) .home-comp .page.state-leave-down .image-container .image.main,
    html:not(.touch) .home-comp .page.state-leave-up .image-container .image.main {
        -webkit-transform: perspective(500px) translateZ(40px);
        transform: perspective(500px) translateZ(40px)
    }
    html:not(.touch) .home-comp .page.state-enter-from-below .label .client,
    html:not(.touch) .home-comp .page.state-enter-from-below .label .title {
        opacity: 0
    }
    html:not(.touch) .home-comp .page.state-enter-from-below .label .title {
        -webkit-transform: translate3d(0, 35px, 0);
        transform: translate3d(0, 35px, 0)
    }
    html:not(.touch) .home-comp .page.state-enter-from-below .label .client {
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    html:not(.touch) .home-comp .page.state-enter-from-above .label .client,
    html:not(.touch) .home-comp .page.state-enter-from-above .label .title {
        opacity: 0
    }
    html:not(.touch) .home-comp .page.state-enter-from-above .label .title {
        -webkit-transform: translate3d(0, -35px, 0);
        transform: translate3d(0, -35px, 0)
    }
    html:not(.touch) .home-comp .page.state-enter-from-above .label .client {
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0)
    }
    html:not(.touch) .home-comp .page.state-entering .image-container .image.main {
        -webkit-transform: perspective(500px) translateZ(20px);
        transform: perspective(500px) translateZ(20px)
    }
    html:not(.touch) .home-comp .page.state-entering .label .client,
    html:not(.touch) .home-comp .page.state-entering .label .title {
        -webkit-transition-delay: .43s;
        transition-delay: .43s
    }
    html:not(.touch) .home-comp .page.state-active .label .viewCaseBtn {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.home-comp ul.indicator {
    position: fixed;
    z-index: 15;
    top: 50%;
    right: 30px;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

html.touch .home-comp ul.indicator {
    display: none
}

.home-comp ul.indicator li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: hsla(0, 0%, 100%, .5);
    -webkit-transition: background .3s;
    transition: background .3s;
    margin: 18px 0;
    cursor: pointer
}

.home-comp ul.indicator li:hover {
    opacity: .5
}

.home-comp ul.indicator li.state-active {
    background-color: #fff
}

body.blackmenu-body .home-comp ul.indicator li {
    background-color: rgba(0, 0, 0, .3)
}

body.blackmenu-body .home-comp ul.indicator li.state-active {
    background-color: #000
}

.home-comp .page.news {
    z-index: 6;
    background-color: #f8f8f8
}

@media only all and (max-width:699px) {
    html.touch .home-comp .page.news {
        height: auto!important;
        padding: 2rem 0
    }
}

.home-comp .page.news .page-inner {
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

body.lastpage-body .home-comp .page.news .page-inner {
    opacity: .2
}

.home-comp .page.news .page-outer {
    display: table;
    height: 100%;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto
}

@media only all and (min-width:700px) and (max-width:999px) {
    .home-comp .page.news .page-outer {
        width: 85%
    }
}

@media only all and (max-width:699px) {
    .home-comp .page.news .page-outer {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

.home-comp .page.news .page-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
    background: inherit
}

.home-comp .page.news .page-inner .item {
    width: 27%;
    display: inline-block;
    vertical-align: top;
    color: #242426;
    text-align: left
}

@media only all and (max-width:699px) {
    .home-comp .page.news .page-inner .item {
        width: 100%;
        margin-bottom: 8rem
    }
    .home-comp .page.news .page-inner .item:nth-of-type(4) {
        margin-bottom: 0
    }
}

@media only all and (min-width:700px) and (max-width:1300px) {
    .home-comp .page.news .page-inner .item {
        width: 45%
    }
    .home-comp .page.news .page-inner .item:first-of-type,
    .home-comp .page.news .page-inner .item:nth-of-type(3) {
        margin-right: 5%
    }
    .home-comp .page.news .page-inner .item:nth-of-type(2),
    .home-comp .page.news .page-inner .item:nth-of-type(4) {
        margin-left: 5%
    }
    .home-comp .page.news .page-inner .item:nth-of-type(3),
    .home-comp .page.news .page-inner .item:nth-of-type(4) {
        margin-top: 7%
    }
}

@media only all and (min-width:1100px) and (max-width:1300px) {
    .home-comp .page.news .page-inner .item:nth-of-type(3),
    .home-comp .page.news .page-inner .item:nth-of-type(4) {
        display: none
    }
}

@media only all and (min-width:1301px) {
    .home-comp .page.news .page-inner .item:nth-of-type(2) {
        margin-left: 8%;
        margin-right: 8%
    }
    .home-comp .page.news .page-inner .item:nth-of-type(4) {
        display: none
    }
}

.home-comp .page.news .page-inner .item .title {
    display: block;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

.home-comp .page.news .page-inner .item .title h3 {
    font-size: 3.3rem;
    text-align: center;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    text-align: left;
    font-size: 2.8rem
}

@media only all and (min-width:768px) {
    .home-comp .page.news .page-inner .item .title:hover {
        opacity: .7
    }
}

html.touch .home-comp .page.news .page-inner .item .title.state-touchdown {
    opacity: .7
}

.home-comp .page.news .page-inner .item .date {
    font-size: 70%;
    margin: 1rem 0 2rem;
    letter-spacing: .02em;
    opacity: .6
}

.home-comp .page.news .page-inner .item .intro {
    line-height: 1.4;
    font-size: 2.4rem
}

.home-comp .page.news .page-inner .item .intro a {
    color: #b56b3c;
    font-weight: 700;
    -webkit-transition: color .18s;
    transition: color .18s
}

@media only all and (min-width:768px) {
    .home-comp .page.news .page-inner .item .intro a:hover {
        color: #c9865b
    }
}

html.touch .home-comp .page.news .page-inner .item .intro a.state-touchdown {
    color: #c9865b
}

.home-comp .page.news .page-inner .viewAll {
    padding: 0 18px;
    height: 40px;
    line-height: 45px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    margin-top: 30px
}

@media only all and (min-width:768px) {
    .home-comp .page.news .page-inner .viewAll {
        font-size: 16px
    }
}

.home-comp .page.news .page-inner .viewAll span {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    width: 100%;
    color: transparent;
    border-bottom: 5px solid #242426
}

.home-comp .page.news .page-inner .viewAll span:after,
.home-comp .page.news .page-inner .viewAll span:before {
    content: attr(title);
    position: absolute;
    height: 100%;
    -webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
    bottom: 0;
    color: #242426;
    left: 0;
    right: 0
}

.home-comp .page.news .page-inner .viewAll span:before {
    opacity: 1;
    bottom: 0;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}

.home-comp .page.news .page-inner .viewAll span:after {
    -webkit-transform: translate3d(0, 100%, 0) rotateX(-110deg);
    transform: translate3d(0, 100%, 0) rotateX(-110deg);
    opacity: 0;
    bottom: 0
}

@media only all and (min-width:768px) {
    .home-comp .page.news .page-inner .viewAll:hover {
        cursor: pointer
    }
    .home-comp .page.news .page-inner .viewAll:hover span:before {
        -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
        transform: translate3d(0, -100%, 0) rotateX(110deg);
        opacity: 0
    }
    .home-comp .page.news .page-inner .viewAll:hover span:after {
        -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
        transform: translateZ(0) rotateX(0deg) scale(1);
        opacity: 1
    }
}

html.touch .home-comp .page.news .page-inner .viewAll.state-touchdown {
    cursor: pointer
}

html.touch .home-comp .page.news .page-inner .viewAll.state-touchdown span:before {
    -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
    transform: translate3d(0, -100%, 0) rotateX(110deg);
    opacity: 0
}

html.touch .home-comp .page.news .page-inner .viewAll.state-touchdown span:after {
    -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
    transform: translateZ(0) rotateX(0deg) scale(1);
    opacity: 1
}

@media only all and (min-width:0px) and (max-width:767px) {
    .home-comp .page.news .page-inner .viewAll {
        margin-bottom: 30px
    }
}

.home-comp .page.news .page-inner h2 {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 10rem
}

@media only all and (min-width:0px) and (max-width:767px) {
    .home-comp .page.news .page-inner h2 {
        margin: 6rem
    }
}

html.js:not(.state-error) .home-comp .image {
    opacity: 0
}

html.js:not(.state-error) .most-awarded-comp {
    opacity: 0;
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94);
    transition: all .4s cubic-bezier(.25, .46, .45, .94)
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .most-awarded-comp {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0)
    }
}

html.js:not(.state-error) .most-awarded-comp.state-ticked {
    opacity: 1
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .most-awarded-comp.state-ticked {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.most-awarded-comp>h1 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 9rem;
    padding: 0
}

.most-awarded-comp .case {
    width: 50%;
    margin-bottom: 6rem;
    display: inline-block;
    vertical-align: top;
    line-height: 1;
    text-align: left
}

.most-awarded-comp .case .item-subtitle,
.most-awarded-comp .case .item-title {
    opacity: 1;
    -webkit-transition: all .7s cubic-bezier(.25, .46, .45, .94);
    transition: all .7s cubic-bezier(.25, .46, .45, .94);
    font-weight: 700;
    font-size: 20px
}

@media only all and (min-width:0px) and (max-width:767px) {
    .most-awarded-comp .case .item-subtitle,
    .most-awarded-comp .case .item-title {
        font-size: 16px
    }
}

.most-awarded-comp .case .item-title {
    padding-right: 15%;
    margin: 20px 0 0
}

.most-awarded-comp .case .item-title span {
    -webkit-transition: border 20ms;
    transition: border 20ms;
    border-bottom: 0 solid transparent
}

.most-awarded-comp .case .item-subtitle {
    color: #aeaeae;
    font-size: 18px;
    margin-top: 5px
}

@media only all and (min-width:0px) and (max-width:767px) {
    .most-awarded-comp .case .item-subtitle {
        font-size: 15px
    }
}

.most-awarded-comp .case .image-container {
    background: #eee;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.most-awarded-comp .case .image-container .image.main {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity .4s ease-out, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    transition: opacity .4s ease-out, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, .46, .45, .94), filter .5s;
    transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, .46, .45, .94), filter .5s, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media only all and (min-width:768px) {
    .most-awarded-comp .case:hover .image-container .image.main {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
        -webkit-filter: brightness(1.1) saturate(1.1);
        filter: brightness(1.1) saturate(1.1)
    }
}

html.touch .most-awarded-comp .case.state-touchdown .image-container .image.main {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-filter: brightness(1.1) saturate(1.1);
    filter: brightness(1.1) saturate(1.1)
}

@media only all and (max-width:999px) {
    .most-awarded-comp .case {
        width: 100%
    }
}

@media only all and (min-width:1000px) {
    .most-awarded-comp .case:nth-child(2n) {
        padding-left: 20px
    }
    .most-awarded-comp .case:nth-child(odd) {
        padding-right: 20px
    }
}

.most-awarded-comp .case:last-child {
    margin-bottom: 0
}

.most-awarded-comp .case .item-subtitle,
.most-awarded-comp .case .item-title {
    padding-right: 0;
    font-size: 2.6rem
}

.most-awarded-comp .case .item-title {
    margin-top: 2.5rem
}

.most-awarded-comp .case .item-subtitle {
    display: block;
    margin-bottom: 1rem
}

.most-awarded-comp .viewCaseBtn {
    padding: 0 18px;
    height: 40px;
    line-height: 45px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    display: none;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto
}

.most-awarded-comp .viewCaseBtn span {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    width: 100%;
    color: transparent;
    border-bottom: 5px solid #242426
}

.most-awarded-comp .viewCaseBtn span:after,
.most-awarded-comp .viewCaseBtn span:before {
    content: attr(title);
    position: absolute;
    height: 100%;
    -webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
    bottom: 0;
    color: #242426;
    left: 0;
    right: 0
}

.most-awarded-comp .viewCaseBtn span:before {
    opacity: 1;
    bottom: 0;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}

.most-awarded-comp .viewCaseBtn span:after {
    -webkit-transform: translate3d(0, 100%, 0) rotateX(-110deg);
    transform: translate3d(0, 100%, 0) rotateX(-110deg);
    opacity: 0;
    bottom: 0
}

@media only all and (min-width:768px) {
    .most-awarded-comp .viewCaseBtn:hover {
        cursor: pointer
    }
    .most-awarded-comp .viewCaseBtn:hover span:before {
        -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
        transform: translate3d(0, -100%, 0) rotateX(110deg);
        opacity: 0
    }
    .most-awarded-comp .viewCaseBtn:hover span:after {
        -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
        transform: translateZ(0) rotateX(0deg) scale(1);
        opacity: 1
    }
}

html.touch .most-awarded-comp .viewCaseBtn.state-touchdown {
    cursor: pointer
}

html.touch .most-awarded-comp .viewCaseBtn.state-touchdown span:before {
    -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
    transform: translate3d(0, -100%, 0) rotateX(110deg);
    opacity: 0
}

html.touch .most-awarded-comp .viewCaseBtn.state-touchdown span:after {
    -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
    transform: translateZ(0) rotateX(0deg) scale(1);
    opacity: 1
}

@media only all and (min-width:0px) and (max-width:767px) {
    .most-awarded-comp .viewCaseBtn {
        font-size: 12px
    }
}

.news-detail-comp h1 {
    font-size: 5rem;
    text-align: center;
    font-weight: 700;
    padding: 0;
    line-height: 1.2;
    margin: 0 0 5rem;
    text-align: left
}

@media only all and (min-width:1000px) {
    .news-detail-comp .newsItem {
        width: 70%;
        margin: 0 auto
    }
}

.news-detail-comp .newsItem .date {
    opacity: .6;
    margin-bottom: 1rem;
    font-size: 70%;
    letter-spacing: .02em
}

.news-detail-comp .newsItem .content h2,
.news-detail-comp .newsItem .content h3 {
    font-size: 3.3rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0;
    text-align: left
}

.news-detail-comp .newsItem img {
    max-width: 100%
}

.news-detail-comp .newsItem a {
    -webkit-transition: opacity .18s;
    transition: opacity .18s;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(currentColor, currentColor);
    background-size: .05em 2px, .05em 2px, 2px 2px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: .03em 0 #f8f8f8, -.03em 0 #f8f8f8, 0 .03em #f8f8f8, 0 -.03em #f8f8f8, .06em 0 #f8f8f8, -.06em 0 #f8f8f8, .09em 0 #f8f8f8, -.09em 0 #f8f8f8, .12em 0 #f8f8f8, -.12em 0 #f8f8f8, .15em 0 #f8f8f8, -.15em 0 #f8f8f8;
    background-position: 0 92%, 100% 92%, 0 92%
}

@media only all and (min-width:768px) {
    .news-detail-comp .newsItem a:hover {
        opacity: .7
    }
}

html.touch .news-detail-comp .newsItem a.state-touchdown {
    opacity: .7
}

.news-detail-comp .latestNews {
    margin-top: 15rem
}

.news-detail-comp .latestNews>h2 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 5rem;
    padding: 0
}

.news-detail-comp .latestNews .item {
    width: 28%;
    display: inline-block;
    vertical-align: top
}

.news-detail-comp .latestNews .item .title {
    display: block;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

.news-detail-comp .latestNews .item .title h3 {
    font-size: 3.3rem;
    text-align: center;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    text-align: left;
    font-size: 2.8rem
}

@media only all and (min-width:768px) {
    .news-detail-comp .latestNews .item .title:hover {
        opacity: .7
    }
}

html.touch .news-detail-comp .latestNews .item .title.state-touchdown {
    opacity: .7
}

.news-detail-comp .latestNews .item .date {
    font-size: 70%;
    margin: 1rem 0 2rem;
    letter-spacing: .02em;
    opacity: .6
}

.news-detail-comp .latestNews .item .intro {
    line-height: 1.4;
    font-size: 2.4rem
}

.news-detail-comp .latestNews .item .intro a {
    color: #b56b3c;
    font-weight: 700;
    -webkit-transition: color .18s;
    transition: color .18s
}

@media only all and (min-width:768px) {
    .news-detail-comp .latestNews .item .intro a:hover {
        color: #c9865b
    }
}

html.touch .news-detail-comp .latestNews .item .intro a.state-touchdown {
    color: #c9865b
}

@media only all and (max-width:699px) {
    .news-detail-comp .latestNews .item {
        width: 100%;
        margin-bottom: 6rem
    }
    .news-detail-comp .latestNews .item:last-child {
        margin-bottom: 0
    }
}

@media only all and (min-width:700px) {
    .news-detail-comp .latestNews .item:nth-of-type(2) {
        margin-left: 8%;
        margin-right: 8%
    }
}

.news-detail-comp .latestNews .viewAll {
    text-align: center;
    margin: 5rem 0
}

.news-detail-comp .latestNews .viewAll a {
    padding: 0 18px;
    height: 40px;
    line-height: 45px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    font-size: 12px
}

@media only all and (min-width:768px) {
    .news-detail-comp .latestNews .viewAll a {
        font-size: 16px
    }
}

.news-detail-comp .latestNews .viewAll a span {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    width: 100%;
    color: transparent;
    border-bottom: 5px solid #242426
}

.news-detail-comp .latestNews .viewAll a span:after,
.news-detail-comp .latestNews .viewAll a span:before {
    content: attr(title);
    position: absolute;
    height: 100%;
    -webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
    bottom: 0;
    color: #242426;
    left: 0;
    right: 0
}

.news-detail-comp .latestNews .viewAll a span:before {
    opacity: 1;
    bottom: 0;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}

.news-detail-comp .latestNews .viewAll a span:after {
    -webkit-transform: translate3d(0, 100%, 0) rotateX(-110deg);
    transform: translate3d(0, 100%, 0) rotateX(-110deg);
    opacity: 0;
    bottom: 0
}

@media only all and (min-width:768px) {
    .news-detail-comp .latestNews .viewAll a:hover {
        cursor: pointer
    }
    .news-detail-comp .latestNews .viewAll a:hover span:before {
        -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
        transform: translate3d(0, -100%, 0) rotateX(110deg);
        opacity: 0
    }
    .news-detail-comp .latestNews .viewAll a:hover span:after {
        -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
        transform: translateZ(0) rotateX(0deg) scale(1);
        opacity: 1
    }
}

html.touch .news-detail-comp .latestNews .viewAll a.state-touchdown {
    cursor: pointer
}

html.touch .news-detail-comp .latestNews .viewAll a.state-touchdown span:before {
    -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
    transform: translate3d(0, -100%, 0) rotateX(110deg);
    opacity: 0
}

html.touch .news-detail-comp .latestNews .viewAll a.state-touchdown span:after {
    -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
    transform: translateZ(0) rotateX(0deg) scale(1);
    opacity: 1
}

html.js:not(.state-error) .news-comp {
    opacity: 0;
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94);
    transition: all .4s cubic-bezier(.25, .46, .45, .94)
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .news-comp {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0)
    }
}

html.js:not(.state-error) .news-comp.state-ticked {
    opacity: 1
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .news-comp.state-ticked {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.news-comp h1,
.news-comp h2 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 9rem;
    padding: 0
}

.news-comp .newsGrid {
    text-align: center
}

.news-comp .newsGrid .items {
    display: -webkit-box;
    display: flex;
    width: auto;
    margin-left: -80px
}

.news-comp .newsGrid .itemCol {
    background-clip: padding-box;
    padding-left: 80px
}

.news-comp .newsGrid .itemCol>.item {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    text-align: left;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    opacity: 1;
    margin-top: 0;
    margin-bottom: 80px
}

.news-comp .newsGrid .itemCol>.item .title {
    display: block;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

.news-comp .newsGrid .itemCol>.item .title h3 {
    font-size: 3.3rem;
    text-align: center;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    text-align: left;
    font-size: 2.8rem
}

@media only all and (min-width:768px) {
    .news-comp .newsGrid .itemCol>.item .title:hover {
        opacity: .7
    }
}

html.touch .news-comp .newsGrid .itemCol>.item .title.state-touchdown {
    opacity: .7
}

.news-comp .newsGrid .itemCol>.item .date {
    font-size: 70%;
    margin: 1rem 0 2rem;
    letter-spacing: .02em;
    opacity: .6
}

.news-comp .newsGrid .itemCol>.item .intro {
    line-height: 1.4;
    font-size: 2.4rem
}

.news-comp .newsGrid .itemCol>.item .intro a {
    color: #b56b3c;
    font-weight: 700;
    -webkit-transition: color .18s;
    transition: color .18s
}

@media only all and (min-width:768px) {
    .news-comp .newsGrid .itemCol>.item .intro a:hover {
        color: #c9865b
    }
}

html.touch .news-comp .newsGrid .itemCol>.item .intro a.state-touchdown {
    color: #c9865b
}

html.js:not(.state-error) .news-comp .newsGrid .itemCol>.item:not([style]) {
    opacity: 1
}

.news-comp .newsGrid .loadMoreBtn {
    padding: 0 18px;
    height: 40px;
    line-height: 45px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    margin-top: 40px
}

@media only all and (min-width:768px) {
    .news-comp .newsGrid .loadMoreBtn {
        font-size: 16px
    }
}

.news-comp .newsGrid .loadMoreBtn span {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    width: 100%;
    color: transparent;
    border-bottom: 5px solid #242426
}

.news-comp .newsGrid .loadMoreBtn span:after,
.news-comp .newsGrid .loadMoreBtn span:before {
    content: attr(title);
    position: absolute;
    height: 100%;
    -webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
    bottom: 0;
    color: #242426;
    left: 0;
    right: 0
}

.news-comp .newsGrid .loadMoreBtn span:before {
    opacity: 1;
    bottom: 0;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}

.news-comp .newsGrid .loadMoreBtn span:after {
    -webkit-transform: translate3d(0, 100%, 0) rotateX(-110deg);
    transform: translate3d(0, 100%, 0) rotateX(-110deg);
    opacity: 0;
    bottom: 0
}

@media only all and (min-width:768px) {
    .news-comp .newsGrid .loadMoreBtn:hover {
        cursor: pointer
    }
    .news-comp .newsGrid .loadMoreBtn:hover span:before {
        -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
        transform: translate3d(0, -100%, 0) rotateX(110deg);
        opacity: 0
    }
    .news-comp .newsGrid .loadMoreBtn:hover span:after {
        -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
        transform: translateZ(0) rotateX(0deg) scale(1);
        opacity: 1
    }
}

html.touch .news-comp .newsGrid .loadMoreBtn.state-touchdown {
    cursor: pointer
}

html.touch .news-comp .newsGrid .loadMoreBtn.state-touchdown span:before {
    -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
    transform: translate3d(0, -100%, 0) rotateX(110deg);
    opacity: 0
}

html.touch .news-comp .newsGrid .loadMoreBtn.state-touchdown span:after {
    -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
    transform: translateZ(0) rotateX(0deg) scale(1);
    opacity: 1
}

.news-comp .newsGrid .loadMoreBtn.state-disabled {
    visibility: hidden
}

body.about-route-body .image,
body.about-route-body .image-fullwidth,
body.our-way-of-working-route-body .image,
body.our-way-of-working-route-body .image-fullwidth,
body.technology-data-media-route-body .image,
body.technology-data-media-route-body .image-fullwidth {
    pointer-events: none;
    cursor: default
}

html.js:not(.state-error) body.about-route-body .about-comp {
    opacity: 0;
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94);
    transition: all .4s cubic-bezier(.25, .46, .45, .94)
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) body.about-route-body .about-comp {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0)
    }
}

html.js:not(.state-error) body.about-route-body .about-comp.state-ticked {
    opacity: 1
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) body.about-route-body .about-comp.state-ticked {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

body.about-route-body h1 {
    text-align: left
}

@media only all and (min-width:768px) {
    body.about-route-body h1 {
        width: 70%;
        margin: 0 auto 5rem
    }
}

body.about-route-body .accordion {
    list-style: none;
    padding: 0
}

body.about-route-body .accordion li {
    border-top: 1px solid #999;
    margin-bottom: 0;
    counter-increment: item
}

body.about-route-body .accordion li button {
    display: block;
    padding: 3rem 0 2.5rem;
    width: 100%;
    text-align: left;
    position: relative
}

body.about-route-body .accordion li button:before {
    content: "+";
    position: absolute;
    line-height: 0;
    top: 50%;
    width: 28px;
    text-align: center;
    right: 3rem;
    font-size: 4rem
}

body.about-route-body .accordion li h3:before {
    content: counter(item) ".";
    margin-right: 1.5rem
}

body.about-route-body .accordion li button~p {
    display: none
}

body.about-route-body .accordion li.state-open button:before {
    content: "–"
}

body.about-route-body .accordion li.state-open p {
    display: block
}

html.js:not(.state-error) .ourwayofworking-comp,
html.js:not(.state-error) .techdatamedia-comp {
    opacity: 0;
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94);
    transition: all .4s cubic-bezier(.25, .46, .45, .94)
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .ourwayofworking-comp,
    html.js:not(.state-error) .techdatamedia-comp {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0)
    }
}

html.js:not(.state-error) .ourwayofworking-comp.state-ticked,
html.js:not(.state-error) .techdatamedia-comp.state-ticked {
    opacity: 1
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .ourwayofworking-comp.state-ticked,
    html.js:not(.state-error) .techdatamedia-comp.state-ticked {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.rss-comp,
.rss-comp h1 {
    text-align: center
}

.rss-comp h1 {
    font-size: 5rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0
}

.rss-comp .separator {
    margin: 0 5px;
    color: #999
}

.rss-comp span {
    display: inline-block
}

.rss-comp a {
    -webkit-transition: opacity .18s;
    transition: opacity .18s;
    color: #b56b3c
}

@media only all and (min-width:768px) {
    .rss-comp a:hover {
        opacity: .7
    }
}

html.touch .rss-comp a.state-touchdown {
    opacity: .7
}

#search-form {
    position: absolute;
    top: -500px;
    left: 0;
    width: 100%;
    opacity: 0
}

body.search-route-body #search-form {
    top: 20rem;
    opacity: 1
}

body.search-route-body #search-form input {
    display: block;
    border: 0;
    padding: 0 10px;
    text-align: center;
    background: transparent;
    font-size: 4.6rem;
    letter-spacing: -.02em;
    width: 100%;
    max-width: 50%;
    min-width: 280px;
    margin: 0 auto;
    font-weight: 700;
    height: 68px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1.5
}

body.search-route-body #search-form input:focus {
    border-bottom-color: transparent;
    outline: none
}

body.search-route-body #search-form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f8f8f8 inset
}

body.search-route-body #search-form input::-webkit-input-placeholder {
    color: rgba(36, 36, 38, .2);
    position: relative;
    top: 2px
}

body.search-route-body #search-form input::-moz-placeholder {
    color: rgba(36, 36, 38, .2)
}

body.search-route-body #search-form input:-ms-input-placeholder {
    color: rgba(36, 36, 38, .2)
}

.search-comp {
    display: block;
    text-align: center;
    min-height: 100vh;
    margin: 20rem calc(7% - 20px) 0
}

.search-comp .results {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: inherit;
    align-items: inherit;
    position: relative;
    text-align: left;
    -webkit-transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, transform .2s;
    transition: opacity .2s, transform .2s, -webkit-transform .2s
}

.search-comp .results.count-1,
.search-comp .results.count-2,
.search-comp .results.count-3 {
    -webkit-box-pack: center;
    justify-content: center
}

.search-comp .results .page .cover {
    background: #ccc
}

.search-comp .results .case,
.search-comp .results .client,
.search-comp .results .news,
.search-comp .results .page,
.search-comp .results .tweet {
    padding: 20px;
    width: 100%;
    line-height: 1;
    text-align: left
}

.search-comp .results .case .item-subtitle,
.search-comp .results .case .item-title,
.search-comp .results .client .item-subtitle,
.search-comp .results .client .item-title,
.search-comp .results .news .item-subtitle,
.search-comp .results .news .item-title,
.search-comp .results .page .item-subtitle,
.search-comp .results .page .item-title,
.search-comp .results .tweet .item-subtitle,
.search-comp .results .tweet .item-title {
    opacity: 1;
    -webkit-transition: all .7s cubic-bezier(.25, .46, .45, .94);
    transition: all .7s cubic-bezier(.25, .46, .45, .94);
    font-weight: 700;
    font-size: 20px
}

@media only all and (min-width:0px) and (max-width:767px) {
    .search-comp .results .case .item-subtitle,
    .search-comp .results .case .item-title,
    .search-comp .results .client .item-subtitle,
    .search-comp .results .client .item-title,
    .search-comp .results .news .item-subtitle,
    .search-comp .results .news .item-title,
    .search-comp .results .page .item-subtitle,
    .search-comp .results .page .item-title,
    .search-comp .results .tweet .item-subtitle,
    .search-comp .results .tweet .item-title {
        font-size: 16px
    }
}

.search-comp .results .case .item-title,
.search-comp .results .client .item-title,
.search-comp .results .news .item-title,
.search-comp .results .page .item-title,
.search-comp .results .tweet .item-title {
    padding-right: 15%;
    margin: 20px 0 0
}

.search-comp .results .case .item-title span,
.search-comp .results .client .item-title span,
.search-comp .results .news .item-title span,
.search-comp .results .page .item-title span,
.search-comp .results .tweet .item-title span {
    -webkit-transition: border 20ms;
    transition: border 20ms;
    border-bottom: 0 solid transparent
}

.search-comp .results .case .item-subtitle,
.search-comp .results .client .item-subtitle,
.search-comp .results .news .item-subtitle,
.search-comp .results .page .item-subtitle,
.search-comp .results .tweet .item-subtitle {
    color: #aeaeae;
    font-size: 18px;
    margin-top: 5px;
    display: block
}

@media only all and (min-width:0px) and (max-width:767px) {
    .search-comp .results .case .item-subtitle,
    .search-comp .results .client .item-subtitle,
    .search-comp .results .news .item-subtitle,
    .search-comp .results .page .item-subtitle,
    .search-comp .results .tweet .item-subtitle {
        font-size: 15px
    }
}

.search-comp .results .case .image-container,
.search-comp .results .client .image-container,
.search-comp .results .news .image-container,
.search-comp .results .page .image-container,
.search-comp .results .tweet .image-container {
    background: #eee;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.search-comp .results .case .image-container .image.main,
.search-comp .results .client .image-container .image.main,
.search-comp .results .news .image-container .image.main,
.search-comp .results .page .image-container .image.main,
.search-comp .results .tweet .image-container .image.main {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity .4s ease-out, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    transition: opacity .4s ease-out, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, .46, .45, .94), filter .5s;
    transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, .46, .45, .94), filter .5s, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media only all and (min-width:768px) {
    .search-comp .results .case:hover .image-container .image.main,
    .search-comp .results .client:hover .image-container .image.main,
    .search-comp .results .news:hover .image-container .image.main,
    .search-comp .results .page:hover .image-container .image.main,
    .search-comp .results .tweet:hover .image-container .image.main {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
        -webkit-filter: brightness(1.1) saturate(1.1);
        filter: brightness(1.1) saturate(1.1)
    }
}

html.touch .search-comp .results .case.state-touchdown .image-container .image.main,
html.touch .search-comp .results .client.state-touchdown .image-container .image.main,
html.touch .search-comp .results .news.state-touchdown .image-container .image.main,
html.touch .search-comp .results .page.state-touchdown .image-container .image.main,
html.touch .search-comp .results .tweet.state-touchdown .image-container .image.main {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-filter: brightness(1.1) saturate(1.1);
    filter: brightness(1.1) saturate(1.1)
}

@media only all and (min-width:700px) and (max-width:999px) {
    .search-comp .results .case,
    .search-comp .results .client,
    .search-comp .results .news,
    .search-comp .results .page,
    .search-comp .results .tweet {
        max-width: 50%;
        -webkit-box-flex: 1;
        flex: 1 0 50%
    }
}

@media only all and (min-width:1000px) and (max-width:1699px) {
    .search-comp .results .case,
    .search-comp .results .client,
    .search-comp .results .news,
    .search-comp .results .page,
    .search-comp .results .tweet {
        max-width: 33.33333%;
        -webkit-box-flex: 1;
        flex: 1 0 33%
    }
}

@media only all and (min-width:1700px) {
    .search-comp .results .case,
    .search-comp .results .client,
    .search-comp .results .news,
    .search-comp .results .page,
    .search-comp .results .tweet {
        max-width: 25%;
        -webkit-box-flex: 1;
        flex: 1 0 25%
    }
}

.search-comp .results .case p,
.search-comp .results .client p,
.search-comp .results .news p,
.search-comp .results .page p,
.search-comp .results .tweet p {
    font-size: 15px;
    line-height: 1.3;
    margin: 0 0 10px
}

.search-comp.state-empty .results {
    display: none;
    opacity: 0;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
}

.search-comp.state-search .query {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.sitemap-comp {
    text-align: center
}

html.js:not(.state-error) .sitemap-comp {
    opacity: 0;
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94);
    transition: all .4s cubic-bezier(.25, .46, .45, .94)
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .sitemap-comp {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0)
    }
}

html.js:not(.state-error) .sitemap-comp.state-ticked {
    opacity: 1
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .sitemap-comp.state-ticked {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.sitemap-comp h1 {
    font-size: 5rem;
    margin: 0 0 9rem
}

.sitemap-comp h1,
.sitemap-comp h2 {
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    padding: 0
}

.sitemap-comp h2 {
    font-size: 3.3rem;
    margin: 0 0 2.5rem
}

.sitemap-comp .client>a,
.sitemap-comp .currentClients a,
.sitemap-comp .news .newsItem a,
.sitemap-comp .pages a,
.sitemap-comp .previousClients a {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(currentColor, currentColor);
    background-size: .05em 2px, .05em 2px, 2px 2px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: .03em 0 #f8f8f8, -.03em 0 #f8f8f8, 0 .03em #f8f8f8, 0 -.03em #f8f8f8, .06em 0 #f8f8f8, -.06em 0 #f8f8f8, .09em 0 #f8f8f8, -.09em 0 #f8f8f8, .12em 0 #f8f8f8, -.12em 0 #f8f8f8, .15em 0 #f8f8f8, -.15em 0 #f8f8f8;
    background-position: 0 92%, 100% 92%, 0 92%;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .sitemap-comp .client>a:hover,
    .sitemap-comp .currentClients a:hover,
    .sitemap-comp .news .newsItem a:hover,
    .sitemap-comp .pages a:hover,
    .sitemap-comp .previousClients a:hover {
        opacity: .7
    }
}

html.touch .sitemap-comp .client>a.state-touchdown,
html.touch .sitemap-comp .currentClients a.state-touchdown,
html.touch .sitemap-comp .news .newsItem a.state-touchdown,
html.touch .sitemap-comp .pages a.state-touchdown,
html.touch .sitemap-comp .previousClients a.state-touchdown {
    opacity: .7
}

.sitemap-comp .clients {
    margin-bottom: 10rem
}

.sitemap-comp .clients .client {
    margin-bottom: 5rem
}

.sitemap-comp .clients .client .work {
    margin-top: 1rem
}

.sitemap-comp .clients .client .work .case {
    display: inline-block;
    vertical-align: top;
    width: 130px;
    height: 87px;
    margin: 5px;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .sitemap-comp .clients .client .work .case:hover {
        opacity: .7
    }
}

html.touch .sitemap-comp .clients .client .work .case.state-touchdown {
    opacity: .7
}

.sitemap-comp .clients .client .work .case a {
    display: block
}

.sitemap-comp .news {
    margin-bottom: 10rem
}

.sitemap-comp .news .newsItem {
    margin-bottom: 2rem;
    line-height: 1.2
}

.sitemap-comp .currentClients,
.sitemap-comp .pages {
    margin-bottom: 10rem
}

body.workdetail-body {
    padding-top: 0
}

@media only all and (min-width:768px) {
    body.workdetail-body header {
        color: #fff
    }
    body.workdetail-body header svg {
        fill: #fff
    }
}

body.workdetail-body main {
    margin-top: 0!important;
    margin-bottom: 0
}

body.workdetail-body footer {
    background-color: #fff;
    position: relative;
    z-index: 4
}

body.workdetail-body .cover {
    position: relative;
    z-index: 0;
    overflow: hidden
}

@media only all and (min-width:768px) {
    body.workdetail-body .cover {
        padding-bottom: 43.5%;
        height: 0
    }
}

body.workdetail-body .cover .intro {
    width: 80%;
    max-width: 1360px;
    padding: 9rem 0 0;
    background-color: #f8f8f8
}

@media only all and (min-width:0px) and (max-width:767px) {
    body.workdetail-body .cover .intro {
        margin-left: auto;
        margin-right: auto;
        padding-top: 7rem
    }
}

@media only all and (min-width:768px) {
    body.workdetail-body .cover .intro {
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        padding-left: 8rem;
        padding-right: 8rem
    }
}

body.workdetail-body .cover>.image-container {
    background: #ccc
}

@media only all and (min-width:768px) {
    body.workdetail-body .cover>.image-container {
        padding-bottom: 43.5%!important;
        position: fixed!important;
        top: 0;
        left: 0;
        height: 0;
        width: 100%
    }
}

body.workdetail-body .cover .vimeo-fullscreen {
    pointer-events: none;
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #000
}

body.workdetail-body .cover .vimeo-fullscreen .vimeo-video {
    height: 100%;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
}

body.workdetail-body .cover .vimeo-fullscreen .vimeo-video,
body.workdetail-body .cover .vimeo-fullscreen .vimeo-video .vimeo-wrapper {
    display: block;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

body.workdetail-body .cover .vimeo-fullscreen .vimeo-video .vimeo-wrapper {
    height: 300%
}

body.workdetail-body .cover .vimeo-fullscreen .vimeo-video .vimeo-wrapper iframe {
    display: block;
    height: 100%;
    width: 100%
}

body.workdetail-body .cover .vimeo-veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

body.workdetail-body .cover .vimeo-veil .vimeo-link {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    display: block
}

.page-comp .client,
.page-comp h1,
.workdetail-comp .client,
.workdetail-comp h1 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    padding: 0;
    letter-spacing: .02em;
    margin: 0 0 3rem
}

.page-comp .viewMoreBtn,
.workdetail-comp .viewMoreBtn {
    padding: 0 18px;
    height: 40px;
    line-height: 45px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    font-size: 12px
}

@media only all and (min-width:768px) {
    .page-comp .viewMoreBtn,
    .workdetail-comp .viewMoreBtn {
        font-size: 16px
    }
}

.page-comp .viewMoreBtn span,
.workdetail-comp .viewMoreBtn span {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    width: 100%;
    color: transparent;
    border-bottom: 5px solid #242426
}

.page-comp .viewMoreBtn span:after,
.page-comp .viewMoreBtn span:before,
.workdetail-comp .viewMoreBtn span:after,
.workdetail-comp .viewMoreBtn span:before {
    content: attr(title);
    position: absolute;
    height: 100%;
    -webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
    bottom: 0;
    color: #242426;
    left: 0;
    right: 0
}

.page-comp .viewMoreBtn span:before,
.workdetail-comp .viewMoreBtn span:before {
    opacity: 1;
    bottom: 0;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}

.page-comp .viewMoreBtn span:after,
.workdetail-comp .viewMoreBtn span:after {
    -webkit-transform: translate3d(0, 100%, 0) rotateX(-110deg);
    transform: translate3d(0, 100%, 0) rotateX(-110deg);
    opacity: 0;
    bottom: 0
}

@media only all and (min-width:768px) {
    .page-comp .viewMoreBtn:hover,
    .workdetail-comp .viewMoreBtn:hover {
        cursor: pointer
    }
    .page-comp .viewMoreBtn:hover span:before,
    .workdetail-comp .viewMoreBtn:hover span:before {
        -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
        transform: translate3d(0, -100%, 0) rotateX(110deg);
        opacity: 0
    }
    .page-comp .viewMoreBtn:hover span:after,
    .workdetail-comp .viewMoreBtn:hover span:after {
        -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
        transform: translateZ(0) rotateX(0deg) scale(1);
        opacity: 1
    }
}

html.touch .page-comp .viewMoreBtn.state-touchdown,
html.touch .workdetail-comp .viewMoreBtn.state-touchdown {
    cursor: pointer
}

html.touch .page-comp .viewMoreBtn.state-touchdown span:before,
html.touch .workdetail-comp .viewMoreBtn.state-touchdown span:before {
    -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
    transform: translate3d(0, -100%, 0) rotateX(110deg);
    opacity: 0
}

html.touch .page-comp .viewMoreBtn.state-touchdown span:after,
html.touch .workdetail-comp .viewMoreBtn.state-touchdown span:after {
    -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
    transform: translateZ(0) rotateX(0deg) scale(1);
    opacity: 1
}

html:not(js) .page-comp .cover .intro,
html:not(js) .workdetail-comp .cover .intro {
    margin-top: 6rem
}

.page-comp .cover .client,
.page-comp .cover h1,
.workdetail-comp .cover .client,
.workdetail-comp .cover h1 {
    margin-bottom: 0
}

.page-comp .cover .client,
.workdetail-comp .cover .client {
    text-align: center;
    display: block;
    letter-spacing: .1rem;
    color: #aeaeae
}

.page-comp article,
.workdetail-comp article {
    position: relative;
    z-index: 1;
    background: #f8f8f8;
    padding-bottom: 10rem
}

.page-comp article .content h2,
.workdetail-comp article .content h2 {
    font-size: 3.3rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0
}

.page-comp article .content h3,
.workdetail-comp article .content h3 {
    font-size: 2.2rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0
}

.page-comp .story,
.workdetail-comp .story {
    padding-top: 6rem;
    background-color: #f8f8f8;
    position: relative;
    z-index: 4
}

.page-comp .story hr,
.workdetail-comp .story hr {
    margin-bottom: 4rem
}

.page-comp .story .content-comp,
.workdetail-comp .story .content-comp {
    margin-bottom: 10rem
}

.page-comp .story .meta,
.workdetail-comp .story .meta {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    font-size: 20px
}

@media only all and (min-width:700px) and (max-width:999px) {
    .page-comp .story .meta,
    .workdetail-comp .story .meta {
        width: 85%
    }
}

@media only all and (max-width:699px) {
    .page-comp .story .meta,
    .workdetail-comp .story .meta {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
}

@media only all and (max-width:999px) {
    .page-comp .story .meta,
    .workdetail-comp .story .meta {
        font-size: 16px
    }
}

.page-comp .story .meta strong,
.workdetail-comp .story .meta strong {
    font-weight: 600;
    display: block
}

@media only all and (min-width:1000px) {
    .page-comp .story .meta strong,
    .workdetail-comp .story .meta strong {
        margin-top: 40px
    }
}

@media only all and (max-width:999px) {
    .page-comp .story .meta strong,
    .workdetail-comp .story .meta strong {
        margin-top: 20px
    }
}

.page-comp .story .meta .content a,
.workdetail-comp .story .meta .content a {
    padding: 9px 10px 4px;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    background-color: #b56b3c;
    color: #fff;
    margin: 5px 5px 0;
    line-height: 1;
    -webkit-transition: background .18s cubic-bezier(.25, .46, .45, .94);
    transition: background .18s cubic-bezier(.25, .46, .45, .94)
}

@media only all and (min-width:768px) {
    .page-comp .story .meta .content a:hover,
    .workdetail-comp .story .meta .content a:hover {
        background-color: #c9865b
    }
}

html.touch .page-comp .story .meta .content a.state-touchdown,
html.touch .workdetail-comp .story .meta .content a.state-touchdown {
    background-color: #c9865b
}

.page-comp .story .meta .content .office,
.workdetail-comp .story .meta .content .office {
    padding: 4px 6px
}

.page-comp .extra,
.workdetail-comp .extra {
    background-color: #fff;
    margin-top: 10rem
}

.page-comp .extra hr,
.workdetail-comp .extra hr {
    margin: 0
}

.page-comp .extra h2,
.workdetail-comp .extra h2 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    padding: 0;
    margin: 0 0 5rem
}

.page-comp .awards,
.page-comp .buzz,
.page-comp .other,
.workdetail-comp .awards,
.workdetail-comp .buzz,
.workdetail-comp .other {
    padding: 10rem 0
}

.page-comp .buzz,
.workdetail-comp .buzz {
    font-size: 2.2rem;
    position: relative;
    z-index: 4;
    text-align: center
}

.page-comp .buzz h2,
.workdetail-comp .buzz h2 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    padding: 0;
    margin: 0 0 5rem
}

@media only all and (min-width:700px) {
    .page-comp .buzz.count-1 ul,
    .page-comp .buzz.count-2 ul,
    .workdetail-comp .buzz.count-1 ul,
    .workdetail-comp .buzz.count-2 ul {
        display: block
    }
    .page-comp .buzz.count-1 ul li,
    .page-comp .buzz.count-2 ul li,
    .workdetail-comp .buzz.count-1 ul li,
    .workdetail-comp .buzz.count-2 ul li {
        display: inline-block;
        vertical-align: top;
        padding: 0 30px
    }
}

.page-comp .buzz ul,
.workdetail-comp .buzz ul {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap
}

.page-comp .buzz ul li,
.workdetail-comp .buzz ul li {
    line-height: 1.4;
    width: 30%;
    margin-bottom: 6rem;
    text-align: left
}

@media only all and (max-width:999px) {
    .page-comp .buzz ul li,
    .workdetail-comp .buzz ul li {
        width: 46%
    }
}

.page-comp .buzz ul li q:after,
.page-comp .buzz ul li q:before,
.workdetail-comp .buzz ul li q:after,
.workdetail-comp .buzz ul li q:before {
    display: none
}

.page-comp .buzz ul li cite,
.workdetail-comp .buzz ul li cite {
    font-style: normal;
    display: block;
    font-weight: 600
}

.page-comp .buzz ul li cite a,
.workdetail-comp .buzz ul li cite a {
    color: #b56b3c;
    -webkit-transition: color .18s;
    transition: color .18s
}

@media only all and (min-width:768px) {
    .page-comp .buzz ul li cite a:hover,
    .workdetail-comp .buzz ul li cite a:hover {
        color: #c9865b
    }
}

html.touch .page-comp .buzz ul li cite a.state-touchdown,
html.touch .workdetail-comp .buzz ul li cite a.state-touchdown {
    color: #c9865b
}

.page-comp .awards>.contentWrapper,
.workdetail-comp .awards>.contentWrapper {
    max-width: 1100px
}

.page-comp .awards ol,
.workdetail-comp .awards ol {
    list-style: none;
    padding: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 -5rem
}

.page-comp .awards ol li,
.workdetail-comp .awards ol li {
    width: 33%;
    text-align: center;
    margin-bottom: 5rem;
    padding: 0 15px
}

@media only all and (max-width:999px) {
    .page-comp .awards ol li,
    .workdetail-comp .awards ol li {
        width: 50%
    }
}

.page-comp .awards ol li .award,
.workdetail-comp .awards ol li .award {
    cursor: default
}

.page-comp .awards ol li .award .info,
.workdetail-comp .awards ol li .award .info {
    border-color: rgba(0, 0, 0, .1)
}

.page-comp .awards ol li .award .info:before,
.workdetail-comp .awards ol li .award .info:before {
    content: " ";
    position: absolute;
    top: -17px;
    left: 50%;
    margin-left: -11px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 15px solid rgba(0, 0, 0, .1)
}

.page-comp .awards ol li .award .info:after,
.workdetail-comp .awards ol li .award .info:after {
    border-bottom-color: #fff
}

.page-comp .awards ol li a,
.workdetail-comp .awards ol li a {
    display: inline;
    padding: 5px
}

.page-comp .awards ol li a:nth-of-type(3n+3):after,
.workdetail-comp .awards ol li a:nth-of-type(3n+3):after {
    display: block;
    content: " "
}

.page-comp .awards ol li h3,
.workdetail-comp .awards ol li h3 {
    font-size: 2.2rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0
}

.page-comp .otherWork,
.workdetail-comp .otherWork {
    text-align: center;
    padding-bottom: 0;
    padding-top: 10rem
}

.page-comp .otherWork h2,
.workdetail-comp .otherWork h2 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 5rem;
    padding: 0
}

.page-comp .otherWork .case,
.workdetail-comp .otherWork .case {
    padding: 2rem;
    line-height: 1.2;
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
    line-height: 1;
    text-align: left;
    display: block
}

.page-comp .otherWork .case .item-subtitle,
.page-comp .otherWork .case .item-title,
.workdetail-comp .otherWork .case .item-subtitle,
.workdetail-comp .otherWork .case .item-title {
    opacity: 1;
    -webkit-transition: all .7s cubic-bezier(.25, .46, .45, .94);
    transition: all .7s cubic-bezier(.25, .46, .45, .94);
    font-weight: 700;
    font-size: 20px
}

@media only all and (min-width:0px) and (max-width:767px) {
    .page-comp .otherWork .case .item-subtitle,
    .page-comp .otherWork .case .item-title,
    .workdetail-comp .otherWork .case .item-subtitle,
    .workdetail-comp .otherWork .case .item-title {
        font-size: 16px
    }
}

.page-comp .otherWork .case .item-title,
.workdetail-comp .otherWork .case .item-title {
    padding-right: 15%;
    margin: 20px 0 0
}

.page-comp .otherWork .case .item-title span,
.workdetail-comp .otherWork .case .item-title span {
    -webkit-transition: border 20ms;
    transition: border 20ms;
    border-bottom: 0 solid transparent
}

.page-comp .otherWork .case .item-subtitle,
.workdetail-comp .otherWork .case .item-subtitle {
    color: #aeaeae;
    font-size: 18px;
    margin-top: 5px;
    display: block
}

@media only all and (min-width:0px) and (max-width:767px) {
    .page-comp .otherWork .case .item-subtitle,
    .workdetail-comp .otherWork .case .item-subtitle {
        font-size: 15px
    }
}

.page-comp .otherWork .case .image-container,
.workdetail-comp .otherWork .case .image-container {
    background: #eee;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.page-comp .otherWork .case .image-container .image.main,
.workdetail-comp .otherWork .case .image-container .image.main {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity .4s ease-out, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    transition: opacity .4s ease-out, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, .46, .45, .94), filter .5s;
    transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, .46, .45, .94), filter .5s, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media only all and (min-width:768px) {
    .page-comp .otherWork .case:hover .image-container .image.main,
    .workdetail-comp .otherWork .case:hover .image-container .image.main {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
        -webkit-filter: brightness(1.1) saturate(1.1);
        filter: brightness(1.1) saturate(1.1)
    }
}

html.touch .page-comp .otherWork .case.state-touchdown .image-container .image.main,
html.touch .workdetail-comp .otherWork .case.state-touchdown .image-container .image.main {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-filter: brightness(1.1) saturate(1.1);
    filter: brightness(1.1) saturate(1.1)
}

@media only all and (min-width:700px) {
    .page-comp .otherWork .case,
    .workdetail-comp .otherWork .case {
        width: 33.3%;
        display: inline-block;
        vertical-align: top
    }
}

.page-comp .otherWork .cases-list,
.workdetail-comp .otherWork .cases-list {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 5rem
}

@media only all and (max-width:699px) {
    .page-comp .otherWork .cases-list,
    .workdetail-comp .otherWork .cases-list {
        margin-left: -10px;
        margin-right: -10px
    }
}

.work-comp {
    margin: 0 7%;
    position: relative
}

@media only all and (min-width:2030px) {
    .work-comp {
        margin: 0 auto;
        width: 1750px
    }
}

.work-comp .client-info {
    margin-bottom: 10rem;
    text-align: center
}

@media only all and (max-width:699px) {
    .work-comp .client-info {
        text-align: left
    }
}

.work-comp .client-info .website {
    display: inline-block;
    margin-top: 3rem;
    padding-top: 3rem;
    position: relative
}

.work-comp .client-info .website:before {
    content: " ";
    position: absolute;
    top: 0;
    height: 4px;
    width: 30px;
    background-color: #000;
    left: 0
}

@media only all and (min-width:700px) {
    .work-comp .client-info .website:before {
        left: 50%;
        margin-left: -15px
    }
}

.work-comp .client-info .website a {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f8f8f8)), -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
    background-image: linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(#f8f8f8, #f8f8f8), linear-gradient(currentColor, currentColor);
    background-size: .05em 2px, .05em 2px, 2px 2px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: .03em 0 #f8f8f8, -.03em 0 #f8f8f8, 0 .03em #f8f8f8, 0 -.03em #f8f8f8, .06em 0 #f8f8f8, -.06em 0 #f8f8f8, .09em 0 #f8f8f8, -.09em 0 #f8f8f8, .12em 0 #f8f8f8, -.12em 0 #f8f8f8, .15em 0 #f8f8f8, -.15em 0 #f8f8f8;
    background-position: 0 92%, 100% 92%, 0 92%;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .work-comp .client-info .website a:hover {
        opacity: .7
    }
}

html.touch .work-comp .client-info .website a.state-touchdown {
    opacity: .7
}

.work-comp .client-info p {
    margin: 2rem 0 0
}

.work-comp .client-info h2 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0
}

.work-comp .tag-info {
    margin-bottom: 3rem;
    text-align: center
}

.work-comp .tag-info h2 {
    font-size: 5rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    padding: 0;
    margin: 0 0 9rem
}

.work-comp .tag-info h2:first-letter {
    text-transform: uppercase
}

.work-comp .cases .clients-comp,
.work-comp .cases .offices {
    display: none;
    opacity: 1;
    transition: none;
    transform: none;
    -webkit-transform: none;
    -webkit-transition: none
}

.work-comp .cases .clients-comp .contentWrapper,
.work-comp .cases .offices .contentWrapper {
    padding-bottom: 40px;
    max-width: 100%;
    width: auto
}

.work-comp .cases .clients-comp h1,
.work-comp .cases .offices h1 {
    display: none
}

.work-comp .cases .clients-comp h2,
.work-comp .cases .offices h2 {
    font-size: 20px;
    margin: 0;
    padding: 30px 0 40px;
    text-align: left
}

@media only all and (max-width:699px) {
    .work-comp .cases .clients-comp h2,
    .work-comp .cases .offices h2 {
        text-align: center
    }
}

.work-comp .cases .clients-comp ul,
.work-comp .cases .offices ul {
    margin: 0;
    padding: 0;
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    column-gap: 40px
}

@media only all and (min-width:700px) and (max-width:999px) {
    .work-comp .cases .clients-comp ul,
    .work-comp .cases .offices ul {
        -moz-columns: 2;
        -webkit-columns: 2;
        column-count: 2
    }
}

@media only all and (min-width:1000px) {
    .work-comp .cases .clients-comp ul,
    .work-comp .cases .offices ul {
        -moz-columns: 3;
        -webkit-columns: 3;
        column-count: 3
    }
}

@media only all and (min-width:1700px) {
    .work-comp .cases .clients-comp ul,
    .work-comp .cases .offices ul {
        -moz-columns: 4;
        -webkit-columns: 4;
        column-count: 4
    }
}

.work-comp .cases .clients-comp ul li,
.work-comp .cases .offices ul li {
    font-size: 16px
}

@media only all and (max-width:699px) {
    .work-comp .cases .clients-comp ul li,
    .work-comp .cases .offices ul li {
        text-align: center
    }
}

.work-comp .cases .clients-comp ul li a,
.work-comp .cases .offices ul li a {
    margin-bottom: .7rem;
    color: #b56b3c;
    -webkit-transition: color .18s;
    transition: color .18s;
    font-weight: 700
}

@media only all and (min-width:768px) {
    .work-comp .cases .clients-comp ul li a:hover,
    .work-comp .cases .offices ul li a:hover {
        color: #c9865b
    }
}

html.touch .work-comp .cases .clients-comp ul li a.state-touchdown,
html.touch .work-comp .cases .offices ul li a.state-touchdown {
    color: #c9865b
}

.work-comp .cases .offices {
    padding-bottom: 40px
}

.work-comp .cases .offices a {
    font-weight: 700;
    display: block;
    padding-top: 5px;
    margin-bottom: 1.4rem;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .work-comp .cases .offices a:hover {
        opacity: .7
    }
}

html.touch .work-comp .cases .offices a.state-touchdown {
    opacity: .7
}

.work-comp .cases .filter {
    text-align: left;
    font-size: 20px;
    padding-bottom: 30px;
    font-weight: 700
}

@media only all and (max-width:699px) {
    .work-comp .cases .filter {
        text-align: center;
        font-size: 16px
    }
}

.work-comp .cases .filter button {
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .work-comp .cases .filter button:hover {
        opacity: .7
    }
}

html.touch .work-comp .cases .filter button.state-touchdown {
    opacity: .7
}

.work-comp .cases .filter .plus-minus {
    position: relative;
    top: -1px;
    margin-left: 4px
}

.work-comp .cases .filter .toggleFilter {
    cursor: pointer;
    margin: 8px 12px;
    padding-left: 2px;
    padding-right: 2px;
    font-weight: 700
}

.work-comp .cases .filter .toggleFilter:first-child {
    margin-left: 0
}

.work-comp .cases .filter .toggleFilter.state-active {
    border-bottom: 3px solid #242426;
    -webkit-transition: opacity .18s;
    transition: opacity .18s
}

@media only all and (min-width:768px) {
    .work-comp .cases .filter .toggleFilter.state-active:hover {
        opacity: .7
    }
}

html.touch .work-comp .cases .filter .toggleFilter.state-active.state-touchdown {
    opacity: .7
}

.work-comp .cases.state-clientsopen .clients-comp,
.work-comp .cases.state-officesopen .offices {
    display: block
}

.work-comp .cases .more {
    text-align: center;
    margin: 50px 0
}

.work-comp .cases .more .viewMoreBtn {
    padding: 0 18px;
    height: 40px;
    line-height: 45px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

@media only all and (min-width:768px) {
    .work-comp .cases .more .viewMoreBtn {
        font-size: 16px
    }
}

.work-comp .cases .more .viewMoreBtn span {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    width: 100%;
    color: transparent;
    border-bottom: 5px solid #000
}

.work-comp .cases .more .viewMoreBtn span:after,
.work-comp .cases .more .viewMoreBtn span:before {
    content: attr(title);
    position: absolute;
    height: 100%;
    -webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
    transition: all .3s cubic-bezier(.215, .61, .355, 1);
    bottom: 0;
    color: #000;
    left: 0;
    right: 0
}

.work-comp .cases .more .viewMoreBtn span:before {
    opacity: 1;
    bottom: 0;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}

.work-comp .cases .more .viewMoreBtn span:after {
    -webkit-transform: translate3d(0, 100%, 0) rotateX(-110deg);
    transform: translate3d(0, 100%, 0) rotateX(-110deg);
    opacity: 0;
    bottom: 0
}

@media only all and (min-width:768px) {
    .work-comp .cases .more .viewMoreBtn:hover {
        cursor: pointer
    }
    .work-comp .cases .more .viewMoreBtn:hover span:before {
        -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
        transform: translate3d(0, -100%, 0) rotateX(110deg);
        opacity: 0
    }
    .work-comp .cases .more .viewMoreBtn:hover span:after {
        -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
        transform: translateZ(0) rotateX(0deg) scale(1);
        opacity: 1
    }
}

html.touch .work-comp .cases .more .viewMoreBtn.state-touchdown {
    cursor: pointer
}

html.touch .work-comp .cases .more .viewMoreBtn.state-touchdown span:before {
    -webkit-transform: translate3d(0, -100%, 0) rotateX(110deg);
    transform: translate3d(0, -100%, 0) rotateX(110deg);
    opacity: 0
}

html.touch .work-comp .cases .more .viewMoreBtn.state-touchdown span:after {
    -webkit-transform: translateZ(0) rotateX(0deg) scale(1);
    transform: translateZ(0) rotateX(0deg) scale(1);
    opacity: 1
}

.work-comp .cases-list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: inherit;
    align-items: inherit;
    position: relative;
    margin: -20px
}

.work-comp .cases-list.count-1,
.work-comp .cases-list.count-2,
.work-comp .cases-list.count-3 {
    -webkit-box-pack: center;
    justify-content: center
}

.work-comp .cases-list.client-filter {
    -webkit-box-pack: start;
    justify-content: flex-start
}

.work-comp .cases-list .noCasesFound {
    font-size: 18px;
    margin: 20px
}

@media only all and (max-width:699px) {
    .work-comp .cases-list .noCasesFound {
        font-size: 14px;
        width: 100%;
        text-align: center
    }
}

html.js:not(.state-error) .work-comp .cases-list {
    opacity: 0
}

html.js:not(.state-error) .work-comp .cases-list.state-static {
    opacity: 1
}

html.js:not(.state-error) .work-comp .cases-list.state-animate {
    -webkit-transition: opacity .4s cubic-bezier(.25, .46, .45, .94), -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    transition: opacity .4s cubic-bezier(.25, .46, .45, .94), -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    transition: transform .4s cubic-bezier(.25, .46, .45, .94), opacity .4s cubic-bezier(.25, .46, .45, .94);
    transition: transform .4s cubic-bezier(.25, .46, .45, .94), opacity .4s cubic-bezier(.25, .46, .45, .94), -webkit-transform .4s cubic-bezier(.25, .46, .45, .94);
    opacity: 0
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .work-comp .cases-list.state-animate {
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0)
    }
}

html.js:not(.state-error) .work-comp .cases-list.state-ticked {
    opacity: 1
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    html.js:not(.state-error) .work-comp .cases-list.state-ticked {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@media only all and (min-width:1700px) {
    .work-comp .cases-list.state-selected .case {
        max-width: 33.333%;
        -webkit-box-flex: 1;
        flex: 1 0 33%
    }
}

.work-comp .case {
    padding: 20px;
    width: 100%;
    line-height: 1;
    text-align: left;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 1
}

.work-comp .case .item-subtitle,
.work-comp .case .item-title {
    opacity: 1;
    -webkit-transition: all .7s cubic-bezier(.25, .46, .45, .94);
    transition: all .7s cubic-bezier(.25, .46, .45, .94);
    font-weight: 700;
    font-size: 20px
}

@media only all and (min-width:0px) and (max-width:767px) {
    .work-comp .case .item-subtitle,
    .work-comp .case .item-title {
        font-size: 16px
    }
}

.work-comp .case .item-title {
    padding-right: 15%;
    margin: 20px 0 0
}

.work-comp .case .item-title span {
    -webkit-transition: border 20ms;
    transition: border 20ms;
    border-bottom: 0 solid transparent
}

.work-comp .case .item-subtitle {
    color: #aeaeae;
    font-size: 18px;
    margin-top: 5px;
    display: block
}

@media only all and (min-width:0px) and (max-width:767px) {
    .work-comp .case .item-subtitle {
        font-size: 15px
    }
}

.work-comp .case .image-container {
    background: #eee;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.work-comp .case .image-container .image.main {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity .4s ease-out, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    transition: opacity .4s ease-out, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, .46, .45, .94), filter .5s;
    transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, .46, .45, .94), filter .5s, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94), -webkit-filter .5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media only all and (min-width:768px) {
    .work-comp .case:hover .image-container .image.main {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
        -webkit-filter: brightness(1.1) saturate(1.1);
        filter: brightness(1.1) saturate(1.1)
    }
}

html.touch .work-comp .case.state-touchdown .image-container .image.main {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-filter: brightness(1.1) saturate(1.1);
    filter: brightness(1.1) saturate(1.1)
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    .work-comp .case {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition: -webkit-transform 1s cubic-bezier(.165, .84, .44, 1);
        transition: -webkit-transform 1s cubic-bezier(.165, .84, .44, 1);
        transition: transform 1s cubic-bezier(.165, .84, .44, 1);
        transition: transform 1s cubic-bezier(.165, .84, .44, 1), -webkit-transform 1s cubic-bezier(.165, .84, .44, 1)
    }
}

@media only all and (min-width:700px) and (max-width:999px) {
    .work-comp .case {
        max-width: 50%;
        -webkit-box-flex: 1;
        flex: 1 0 50%
    }
}

@media only all and (min-width:1000px) and (max-width:1699px) {
    .work-comp .case {
        max-width: 33.33333%;
        -webkit-box-flex: 1;
        flex: 1 0 33%
    }
}

@media only all and (min-width:1700px) {
    .work-comp .case {
        max-width: 25%;
        -webkit-box-flex: 1;
        flex: 1 0 25%
    }
}

.work-comp .case.state-below {
    opacity: 0
}

@media only screen and (-moz-min-device-pixel-ratio:2),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2),
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi) {
    .work-comp .case.state-below {
        opacity: 1;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    html.touch .work-comp .case.state-below {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.work-comp .case .case-inner {
    height: 100%;
    overflow: hidden
}

.work-comp .case .image-placeholder {
    height: 0;
    padding-bottom: 66.67%;
    position: relative
}

.work-comp .case .image-placeholder div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .05)
}

 
/*# sourceMappingURL=main.css.map?3e103b0e2f355fcade9b*/