@charset "utf-8";

/* CSS Document */

@font-face {

 font-family: 'gothic';

 src: url('../fonts/gothic/GOTHIC.TTF');

}
@font-face {

 font-family: 'gothic-bold';

 src: url('../fonts/gothic/GOTHICB.TTF');

}
@font-face {

 font-family: 'gothic-bold';

 src: url('../fonts/gothic/ufonts.com_century-gothic.ttf');

}


body {

  color: #151515;

  font-size: 1rem;

}

@charset "UTF-8";

.ir:before,

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section,

summary {

    display: block

}



.hidden,

.invisible {

    visibility: hidden

}



.carousel,

.rsNav {

    -webkit-user-select: none

}



#company-tabs a:hover,

#contact-offices .offices .office-container .office .get-in-touch a.call,

#main-slider a,

.all-projects a,

.carousel.full-viewport .details-container .link a,

.flat-button:hover,

.hok-overview__post a:hover,

.hok-post-section .article-content .to-back a:hover,

.information a:hover,

.navigation a:hover,

.paging-nav a,

.related .inner:hover,

.related a,

.sharemenu ul a,

.thumbnail a,

[class*=" icon-"]:hover,

[class^=icon-]:hover,

a,

a.icon:hover,

a:hover,

header a,

header a:visited,

header h1 a:hover,

header h2 a:hover,

nav #nav-header .center li a.home:hover,

nav #nav-header .center-map a:hover,

nav #nav-header .center-map li a.home:hover,

ul.tabs li a:hover {

    text-decoration: none

}



a,

abbr,

acronym,

address,

applet,

article,

aside,

audio,

b,

big,

blockquote,

body,

canvas,

caption,

center,

cite,

code,

dd,

del,

details,

dfn,

div,

dl,

dt,

em,

embed,

fieldset,

figcaption,

figure,

footer,

form,

h1,

h2,

h3,

h4,

h5,

h6,

header,

hgroup,

html,

i,

iframe,

img,

ins,

kbd,

label,

legend,

li,

mark,

menu,

nav,

object,

ol,

output,

p,

pre,

q,

ruby,

s,

samp,

section,

small,

span,

strike,

strong,

sub,

summary,

sup,

table,

tbody,

td,

tfoot,

th,

thead,

time,

tr,

tt,

u,

ul,

var,

video {

    margin: 0;

    padding: 0;

    border: 0;

    font: inherit;

    font-size: 100%;

    vertical-align: baseline

}



#client-list-full ul li,

.career__meta,

.main-slide,

.navigation a,

.responsibilites ul li,

[class*=" icon-"],

[class^=icon-],

p,

ul {

    -webkit-font-smoothing: antialiased

}



body,

caption,

h2,

td,

th {

    font-weight: 400

}



ol,

ul {

    list-style: none

}



table {

    border-collapse: collapse;

    border-spacing: 0

}



caption,

td,

th {

    text-align: left;

    vertical-align: middle

}



blockquote,

q {

    quotes: none

}



blockquote:after,

blockquote:before,

q:after,

q:before {

    content: "";

    content: none

}



a img {

    border: none

}



.ir,

.visuallyhidden {

    border: 0;

    overflow: hidden

}



@font-face {

    font-family: icomoon;

    src: url('../fonts/icomoon-dc3216558f7ad4c0a5a794ea31809450.eot');

    src: url('../fonts/icomoon-dc3216558f7ad4c0a5a794ea31809450.eot') format("embedded-opentype"),

	 url('../fonts/icomoon-aad187d17194b50e44cfa0b7130df0c1.woff') format("woff"), url('../fonts/icomoon-66f7d327f049a8d93da61256564e6735.ttf') format("truetype"), 

	 url('../fonts/icomoon-c4a5b93d6511eb22c5b9f90ad1cb3db3.svg#icomoon') format("svg");

    font-weight: 400;

    font-style: normal

}



@font-face {

    font-family: company-icons;

    src: url('../fonts/company-icons-60a481d79af6d63ad27eafdff740c422.eot');

    src: url('../fonts/company-icons-60a481d79af6d63ad27eafdff740c422.eot?#iefix') format("embedded-opentype"), 

	url('../fonts/company-icons-4b09a040063a82058d59536f632f41a6.woff') format("woff"), url('../fonts/company-icons-2cdc397ed03f6ee514e45bf1e0d9f817.svg#company-icons') format("svg");

    font-weight: 400;

    font-style: normal

}
[class*=" icon-"],

[class^=icon-] {

    font-family: icomoon;

    speak: none;

    font-style: normal;

    font-weight: 400;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    font-size: 40px;

    font-size: 4rem;

    -moz-osx-font-smoothing: grayscale

}



.icon-camera:before {

    content: "\e90f"

}



.icon-email:before {

    content: "\e601"

}



.icon-down:before {

    content: "\e602"

}



.icon-view:before {

    content: "\e603"

}



.icon-twitter:before {

    content: "\e604"

}



.icon-call:before {

    content: "\e605"

}



.icon-back:before {

    content: "\e606"

}



.icon-reload:before {

    content: "\e607"

}



.icon-play:before {

    content: "\e608"

}



.icon-right:before {

    content: "\e609"

}



.icon-left:before {

    content: "\e60a"

}



.icon-menu:before {

    content: "\e60b"

}



.icon-lor:before {

    content: "\e60c"

}



.icon-locked:before {

    content: "\e60d"

}



.icon-linkedin:before {

    content: "\e60e"

}



.icon-location:before {

    content: "\e60f"

}



.icon-instagram:before {

    content: "\e610"

}



.icon-home:before {

    content: "\e611"

}



.icon-full-viewport:before {

    content: "\e612"

}



.icon-facebook:before {

    content: "\e613"

}



.icon-play-poster:before {

    content: "\e614"

}



.icon-info:before {

    content: "\e615"

}



.icon-close:before,

.icon-company-client-nike:before {

    content: "\e600"

}



[class*=" icon-company-"],

[class^=icon-company-] {

    font-family: company-icons;

    font-size: 150px;

    font-size: 15rem

}



.icon-company-client-mazda:before {

    content: "\e601"

}



.icon-company-client-lacoste:before {

    content: "\e602"

}



.icon-company-client-hyundai:before {

    content: "\e603"

}



.icon-company-client-google:before {

    content: "\e604"

}



.icon-company-client-canon:before {

    content: "\e605"

}



.icon-company-client-bespoken:before {

    content: "\e606"

}



.icon-company-client-apple:before {

    content: "\e607"

}



.icon-company-award-webby:before {

    content: "\e608"

}



.icon-company-award-oneshow:before {

    content: "\e609"

}



.icon-company-award-nyf:before {

    content: "\e60a"

}



.icon-company-award-clio:before {

    content: "\e60b"

}



.icon-company-award-cannes:before {

    content: "\e60c"

}



.icon-company-award-aicp:before {

    content: "\e60d"

}



.icon-company-award-adc:before {

    content: "\e60e"

}



body {

    font-family: gothic;

    line-height: 1.2

}



em {

    font-style: italic

}



h1,

h2 {

    text-rendering: optimizeLegibility

}



h2 {

    font-size: 4.4rem;

    line-height: 5.2rem;

    letter-spacing: -1px;

    font-style: normal

}



h3 {

    
    font-size: 50px;

    letter-spacing: 4px;

    letter-spacing: .4rem;

    font-weight: 800;

    text-transform: uppercase

}



p {

    font-size: 21px;

    font-size: 2.1rem;

    line-height: 1.5

}



p.small {

    font-size: 17px;

    font-size: 1.7rem

}



strong {

    font-weight: 700

}



::-moz-selection {

    background: #c79086;

    color: #fff!important

}



::selection {

    background: #c79086;

    color: #fff!important

}



.ir {

    background-color: transparent

}



.ir:before {

    content: "";

    width: 0;

    height: 150%

}



.hidden {

    display: none!important

}



.visuallyhidden {

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    padding: 0;

    position: absolute;

    width: 1px

}



.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto

}



#contact-newsletter form fieldset .formfield-container:after,

#contact-newsletter form fieldset .formfield-container:before,

.clearfix:after,

.clearfix:before,

.contact-newsletter form fieldset .formfield-container:after,

.contact-newsletter form fieldset .formfield-container:before {

    content: " ";

    display: table

}



#contact-newsletter form fieldset .formfield-container:after,

.clearfix:after,

.contact-newsletter form fieldset .formfield-container:after {

    clear: both

}



.flat-button,

.main-slide.case a,

.main-slide.hok a,

nav #nav-header .center-map a,

nav #nav-newsletter input[type=submit] {

   

    color: #000;

    background: #fff;

    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;

    border: none;

    display: inline-block;

    font-size: 11px;

    font-size: 1.1rem;

    letter-spacing: 4px;

    letter-spacing: .4rem;

    padding: 1.2rem 2.5rem 1.2rem 2.8rem;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px

}



.flat-button:hover,

.main-slide.case a:hover,

.main-slide.hok a:hover,

nav #nav-header .center-map a:hover,

nav #nav-newsletter input[type=submit]:hover {

    background: #c79086;

    color: #fff

}



.flat-button:active,

.main-slide.case a:active,

.main-slide.hok a:active,

nav #nav-header .center-map a:active,

nav #nav-newsletter input[type=submit]:active {

    -webkit-transform: translate3d(0, 1px, 0);

    -moz-transform: translate3d(0, 1px, 0);

    -ms-transform: translate3d(0, 1px, 0);

    -o-transform: translate3d(0, 1px, 0);

    transform: translate3d(0, 1px, 0)

}



.main-slide.case a.only-tablet,

.main-slide.hok a.only-tablet,

.only-tablet.flat-button,

nav #nav-header .center-map a.only-tablet,

nav #nav-newsletter input.only-tablet[type=submit] {

    display: none

}



@media (max-width:1000px) {

    .main-slide.case a.only-desktop,

    .main-slide.hok a.only-desktop,

    .only-desktop,

    .only-desktop.flat-button,

    nav #nav-header .center-map a.only-desktop,

    nav #nav-newsletter input.only-desktop[type=submit] {

        display: none

    }

    .main-slide.case a.only-tablet,

    .main-slide.hok a.only-tablet,

    .only-tablet.flat-button,

    nav #nav-header .center-map a.only-tablet,

    nav #nav-newsletter input.only-tablet[type=submit] {

        display: inline-block

    }

}



.main-slide.case .touch a.only-desktop,

.main-slide.hok .touch a.only-desktop,

.touch .main-slide.case a.only-desktop,

.touch .main-slide.hok a.only-desktop,

.touch .only-desktop.flat-button,

.touch nav #nav-header .center-map a.only-desktop,

.touch nav #nav-newsletter input.only-desktop[type=submit],

nav #nav-header .center-map .touch a.only-desktop,

nav #nav-newsletter .touch input.only-desktop[type=submit] {

    display: none

}



.main-slide.case .touch a.only-tablet,

.main-slide.hok .touch a.only-tablet,

.touch .main-slide.case a.only-tablet,

.touch .main-slide.hok a.only-tablet,

.touch .only-tablet.flat-button,

.touch nav #nav-header .center-map a.only-tablet,

.touch nav #nav-newsletter input.only-tablet[type=submit],

nav #nav-header .center-map .touch a.only-tablet,

nav #nav-newsletter .touch input.only-tablet[type=submit] {

    display: inline-block

}



nav #nav-items a,

nav #nav-mobile a {

    width: 100%;

    height: 93px;

    height: 9.3rem;

    float: left;

    text-align: center;

    position: relative;

    color: #151515;

    background: #fff;

    -webkit-box-shadow: inset 0 -1px 0 .5px #e4e4e4;

    -moz-box-shadow: inset 0 -1px 0 .5px #e4e4e4;

    box-shadow: inset 0 -1px 0 .5px #e4e4e4;
		text-transform: uppercase;

}



@media (max-width:980px) {

    nav #nav-items a:hover,

    nav #nav-mobile a:hover {

        background: #fff

    }

}



.flat-button.purple,

.flat-button.purple:active,

.flat-button.purple:hover {

    background-color: #c79086!important

}



nav #nav-items a span,

nav #nav-mobile a span {

    position: absolute;

    top: 50%;

    left: 50%;

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

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

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

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

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

    font-size: 17px;

    font-size: 1.7rem;

    font-weight: 500;

    letter-spacing: 2px;

    letter-spacing: .2rem

}



#company-intro-case .formulation,

.token.bold,

.token.important {

    font-weight: 700

}



nav #nav-items a i,

nav #nav-mobile a i {

    font-family: icomoon

}



nav #nav-items a.mobile,

nav #nav-mobile a.mobile {

    width: 100%;

    height: 42px;

    height: 4.2rem;

    -webkit-box-shadow: inset 0 -1px 0 .5px #e4e4e4;

    -moz-box-shadow: inset 0 -1px 0 .5px #e4e4e4;

    box-shadow: inset 0 -1px 0 .5px #e4e4e4;

    display: none

}



@media (max-width:1024px) {

    nav #nav-items a span,

    nav #nav-mobile a span {

        font-size: 12px;

        font-size: 1.2rem

    }

    nav #nav-items a.mobile,

    nav #nav-mobile a.mobile {

        display: block

    }

}



body.home nav #nav-items a.mobile,

body.home nav #nav-mobile a.mobile,

nav #nav-items body.home a.mobile,

nav #nav-mobile body.home a.mobile {

    display: none

}



nav #nav-items a.mobile i,

nav #nav-mobile a.mobile i {

    color: #aaa;

    font-size: 21px;

    font-size: 2.1rem;

    margin-right: 1rem

}



nav #nav-items a.mobile span,

nav #nav-mobile a.mobile span {

    text-align: left;

    left: 17px;

    left: 1.7rem;

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

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

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

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

    transform: translate(0, -50%);

    font-size: 17px;

    font-size: 1.7rem

}



.flat-button.purple {

    color: #fff

}



.flat-button.dark {

    padding: 1.2rem 3rem 1.1rem;

    -webkit-transition: border .35s;

    -moz-transition: border .35s;

    -o-transition: border .35s;

    transition: border .35s;

    color: #fff;

    background-color: transparent;

    border: 1px solid #444

}



.flat-button.dark:hover {

    border-color: #666

}



.flat-button.grey {

    background-color: #999;

    color: #fff

}



.flat-button.grey:hover {

    background-color: #c79086;

    color: #fff

}



.flat-button.grey.disabled,

.flat-button.grey.disabled:hover {

    background-color: #dcdcdc;

    color: #fff

}



.flat-button.grey.disabled:hover {

    cursor: default

}



.flat-button.disabled {

    background-color: #2d2d2d;

    color: #999

}



.touch input {

    -webkit-appearance: none

}



.validation-error {

    border: 1px solid #f3484e!important

}



@-ms-keyframes spin {

    from {

        -ms-transform: rotate(0)

    }

    to {

        -ms-transform: rotate(360deg)

    }

}



@-moz-keyframes spin {

    from {

        -moz-transform: rotate(0)

    }

    to {

        -moz-transform: rotate(360deg)

    }

}



@-webkit-keyframes spin {

    from {

        -webkit-transform: rotate(0)

    }

    to {

        -webkit-transform: rotate(360deg)

    }

}



@-o-keyframes spin {

    from {

        -o-transform: rotate(0)

    }

    to {

        -o-transform: rotate(360deg)

    }

}



@keyframes spin {

    from {

        transform: rotate(0)

    }

    to {

        transform: rotate(360deg)

    }

}



.career__header .arrow,

.hok-post-section .header .arrow,

.projects.show .header .arrow {

    position: absolute;

    bottom: 0;

    left: 50%;

    cursor: pointer;

    margin-left: -2rem;

    width: 40px;

    width: 4rem;

    height: 26px;

    height: 2.6rem;

    -webkit-transform: translate3d(0, 26px, 0);

    -moz-transform: translate3d(0, 26px, 0);

    -ms-transform: translate3d(0, 26px, 0);

    -o-transform: translate3d(0, 26px, 0);

    transform: translate3d(0, 26px, 0);

    display: block;

    background: url(../assets/svg/arrow-more-64633a989e9f378970dd8d18195cf55c.svg);

    -webkit-animation-name: arrow-slide-in;

    -webkit-animation-duration: .5s;

    -webkit-animation-delay: 1s;

    -webkit-animation-iteration-count: 1;

    -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1);

    -moz-animation-name: arrow-slide-in;

    -moz-animation-duration: .5s;

    -moz-animation-delay: 1s;

    -moz-animation-iteration-count: 1;

    -moz-animation-timing-function: cubic-bezier(.23, 1, .32, 1);

    -ms-animation-name: arrow-slide-in;

    -ms-animation-duration: .5s;

    -ms-animation-delay: 1s;

    -ms-animation-iteration-count: 1;

    -ms-animation-timing-function: cubic-bezier(.23, 1, .32, 1);

    -o-animation-name: arrow-slide-in;

    -o-animation-duration: .5s;

    -o-animation-delay: 1s;

    -o-animation-iteration-count: 1;

    -o-animation-timing-function: cubic-bezier(.23, 1, .32, 1);

    animation-name: arrow-slide-in;

    animation-duration: .5s;

    animation-delay: 1s;

    animation-iteration-count: 1;

    animation-timing-function: cubic-bezier(.23, 1, .32, 1);

    -webkit-animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -ms-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    animation-fill-mode: forwards

}



@-webkit-keyframes arrow-slide-in {

    0% {

        -webkit-transform: translate3d(0, 26px, 0);

        -moz-transform: translate3d(0, 26px, 0);

        -ms-transform: translate3d(0, 26px, 0);

        -o-transform: translate3d(0, 26px, 0);

        transform: translate3d(0, 26px, 0)

    }

    100% {

        -webkit-transform: translate3d(0, 0, 0);

        -moz-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        -o-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

}



@-moz-keyframes arrow-slide-in {

    0% {

        -webkit-transform: translate3d(0, 26px, 0);

        -moz-transform: translate3d(0, 26px, 0);

        -ms-transform: translate3d(0, 26px, 0);

        -o-transform: translate3d(0, 26px, 0);

        transform: translate3d(0, 26px, 0)

    }

    100% {

        -webkit-transform: translate3d(0, 0, 0);

        -moz-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        -o-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

}



@-o-keyframes arrow-slide-in {

    0% {

        -webkit-transform: translate3d(0, 26px, 0);

        -moz-transform: translate3d(0, 26px, 0);

        -ms-transform: translate3d(0, 26px, 0);

        -o-transform: translate3d(0, 26px, 0);

        transform: translate3d(0, 26px, 0)

    }

    100% {

        -webkit-transform: translate3d(0, 0, 0);

        -moz-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        -o-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

}



@keyframes arrow-slide-in {

    0% {

        -webkit-transform: translate3d(0, 26px, 0);

        -moz-transform: translate3d(0, 26px, 0);

        -ms-transform: translate3d(0, 26px, 0);

        -o-transform: translate3d(0, 26px, 0);

        transform: translate3d(0, 26px, 0)

    }

    100% {

        -webkit-transform: translate3d(0, 0, 0);

        -moz-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        -o-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

}



code[class*=language-],

pre[class*=language-] {

    direction: ltr;

    text-align: left;

    white-space: pre;

    word-spacing: normal;

    word-break: normal;

    color: #151515;

    

    font-size: 16px;

    font-size: 1.6rem;

    line-height: 24px;

    line-height: 2.4rem;

    -moz-tab-size: 4;

    -o-tab-size: 4;

    tab-size: 4;

    -webkit-hyphens: none;

    -moz-hyphens: none;

    -ms-hyphens: none;

    hyphens: none

}



code[class*=language-]::-moz-selection,

pre[class*=language-]::-moz-selection {

    text-shadow: none;

    background: #b3d4fc

}



code[class*=language-]::selection,

pre[class*=language-]::selection {

    text-shadow: none;

    background: #b3d4fc

}



@media print {

    code[class*=language-],

    pre[class*=language-] {

        text-shadow: none

    }

}



pre[class*=language-] {

    padding: 40px 80px;

    margin: 0 -80px 2em;

    background: #fff7d9;

    overflow: auto

}



code[class*=language-] {

    display: block;

    margin-left: 22px;

    padding: 0

}



.token.cdata,

.token.comment,

.token.doctype,

.token.prolog {

    color: #708090

}



.token.punctuation {

    color: #818181

}



.namespace {

    opacity: .7

}



.token.boolean,

.token.constant,

.token.deleted,

.token.number,

.token.property,

.token.symbol,

.token.tag {

    color: #66c

}



.token.attr-name,

.token.builtin,

.token.char,

.token.inserted,

.token.selector,

.token.string {

    color: #690

}



.language-css .token.string,

.style .token.string,

.token.entity,

.token.keyword,

.token.operator,

.token.url {

    color: #a67f59

}



.token.atrule,

.token.attr-value {

    color: #151515

}



.token.function,

.token.important,

.token.regex,

.token.variable {

    color: #66c

}



.token.italic {

    font-style: italic

}



.token.entity {

    cursor: help

}



pre.line-numbers {

    padding-left: 3.8em;

    counter-reset: linenumber;

    position: relative

}



.line-numbers .line-numbers-rows {

    position: absolute;

    pointer-events: none;

    top: 0;

    font-size: 85%;

    left: 0;

    padding: 42px 0 38px;

    width: 38px;

    letter-spacing: -1px;

    border-right: 1px solid #999;

    text-indent: 0;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none

}



.line-numbers-rows>span {

    pointer-events: none;

    display: block;

    counter-increment: linenumber

}



.line-numbers-rows>span:before {

    content: counter(linenumber);

    color: #999;

    display: block;

    padding-right: .8em;

    text-align: right

}



.line-numbers-rows>span:last-child {

    display: none

}



@media screen and (max-width:820px) {

    code[class*=language-],

    pre[class*=language-] {

        font-size: 12px;

        font-size: 1.2rem;

        line-height: 18px;

        line-height: 1.8rem

    }

    pre[class*=language-] {

        padding: 40px 0;

        margin: 0 -20px

    }

    .line-numbers-rows {

        display: none

    }

}



*,

:after,

:before {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box

}



html {

    line-height: 1;

    width: 100%;

    height: 100%;

    font-size: 62.5%

}



body {

    background: #fff;

    color: #151515;

    font-size: 1rem

}



a {

    color: #c79086;

    -webkit-tap-highlight-color: rgba(255, 255, 255, .1)

}



::-webkit-input-placeholder {

    font-size: 17px;

    font-size: 1.7rem;

    color: #aaa;

  

}



:-moz-placeholder {

    font-size: 17px;

    font-size: 1.7rem;

    color: #aaa;

    

}



::-moz-placeholder {

    font-size: 17px;

    font-size: 1.7rem;

    color: #aaa;

    

}



:-ms-input-placeholder {

    font-size: 17px;

    font-size: 1.7rem;

    color: #aaa;

    

}



#main-body {

    text-align: center;

    opacity: 1;

    -webkit-transition: opacity .1s cubic-bezier(.075, .82, .165, 1);

    -moz-transition: opacity .1s cubic-bezier(.075, .82, .165, 1);

    -o-transition: opacity .1s cubic-bezier(.075, .82, .165, 1);

    transition: opacity .1s cubic-bezier(.075, .82, .165, 1)

}



html.page-transition #main-body {

    opacity: 0

}



.section-centered {

    max-width: 960px;

    margin: 0 auto

}



.section-centered-wide {

    max-width: 1386px;

    margin: 0 auto

}



.section-full {

    width: 100%

}



body.home,

body.home #main,

body.home #main-body {

    width: 100%;

    height: 100%;

    background: #151515;

    color: #fff

}



body.home {

    overflow: hidden

}



@media screen and (max-width:600px) {

    body.home {

        overflow: visible

    }

}



.company h3 {

    margin-bottom: 6rem

}



.company {

    background: #fff

}



.company p {

    line-height: 32px;

    line-height: 3.2rem

}



#company-intro {

    margin-top: 27.6rem

}



#company-intro h2 {

    max-width: 736px;

    max-width: 73.6rem

}



#company-intro p {

    margin: 0 auto;

    text-align: left;

    max-width: 625px;

    max-width: 62.5rem

}



#company-intro .image-loader-container {

    margin-bottom: 9rem

}



#company-background {

    margin-top: 8.7rem;

    max-width: 820px;

    max-width: 82rem

}



#company-background p {

    max-width: 636px;

    max-width: 63.6rem;

    margin: 0 auto 10.5rem;

    text-align: left

}



#company-background .img-brand-helmet {

    margin-bottom: 8.4rem

}



#company-background .img-art-craft {

    margin: 0 auto 5.4rem;

    width: 100%

}



#company-background h3 {

    margin-bottom: 5rem

}



#company-intro-case {

    position: relative;

    max-width: 736px;

    max-width: 73.6rem;

    margin: 0 auto 3rem

}



#company-intro-case .formulation-container {

    width: 100%;

    min-height: 242px;

    min-height: 24.2rem

}



#company-intro-case .line {

    height: 1px;

    height: .1rem;

    max-width: 636px;

    max-width: 63.6rem;

    margin: 0 auto;

    border-top: solid 1px #e5e5e5

}



#company-intro-case .refresh {

    width: 52px;

    width: 5.2rem;

    height: 52px;

    height: 5.2rem;

    padding: 0;

    margin: -2.5rem 0 0;

    -webkit-transition: -webkit-transform .2s;

    -moz-transition: -moz-transform .2s;

    -o-transition: -o-transform .2s;

    transition: transform .2s;

    -webkit-border-radius: 26px;

    -moz-border-radius: 26px;

    -ms-border-radius: 26px;

    -o-border-radius: 26px;

    border-radius: 26px;

    border: 1px solid #e5e5e5;

    background: #fff;

    color: #c79086;

    cursor: pointer;

    outline: 0

}



#company-tabs li:last-child,

#contact-newsletter .tabs li:last-child,

.contact-newsletter .tabs li:last-child {

    border-left: 1px solid #dcdcdc

}



#company-intro-case .refresh:hover {

    opacity: .85

}



#company-intro-case .refresh.rotate {

    -webkit-transform: rotate(180deg);

    -moz-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    -o-transform: rotate(180deg);

    transform: rotate(180deg)

}



#company-intro-case .content {

    width: 100%;

    padding: 6rem 5rem 3.6rem

}



#company-intro-case .link {

    font-size: 17px;

    font-size: 1.7rem;

    margin-top: 1.8rem;

    font-style: italic;

    color: #aaa

}



#company-intro-case .link a {

    color: #151515

}



#company-intro-case .formulation,

#company-intro-case .link {

    -webkit-transition: all .3s ease-out;

    -moz-transition: all .3s ease-out;

    -o-transition: all .3s ease-out;

    transition: all .3s ease-out;

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);

    opacity: 1

}



#company-intro-case .fade,

.main-slide .bg,

.main-slide .content {

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0)

}



#company-intro-case .link {

    -webkit-transition-delay: .1s;

    -moz-transition-delay: .1s;

    -o-transition-delay: .1s;

    transition-delay: .1s

}



#company-intro-case .fade {

    opacity: 0

}



#company-stories {

    margin-top: 10rem;

    padding: 7.2rem 0 16rem;

    border-top: 2px solid #dcdcdc;

    background: url()

}



#company-stories ul {

    width: 798px;

    width: 79.8rem;

    margin: 0 auto

}



#company-stories li {

    font-size: 21px;

    font-size: 2.1rem;

    padding-top: 23.7rem;

    width: 50%;

    float: left



}



#company-stories li a {

    font-size: 17px;

    font-size: 1.7rem;

    margin-top: 1rem;

    display: block

}



#company-knighthood {

    margin-top: 13.7rem;

    margin-bottom: 21.5rem

}



#company-knighthood h3 {

    margin-bottom: 5.6rem

}



#company-knighthood p.first {

    text-align: left;

    max-width: 636px;

    max-width: 63.6rem;

    margin: 0 auto 8rem

}



#company-knighthood p.offices {

    margin: 19rem 0 0

}



#company-knighthood .carousel {

    max-width: 1260px;

    max-width: 126rem

}



#company-knighthood .carousel .caption,

#company-knighthood .carousel .index {

    margin-top: 1.1rem

}



#company-tabs {

    height: 54px;

    height: 5.4rem;

    line-height: 54px;

    line-height: 5.4rem;

    margin: 8.4rem 0 6rem

}



#company-tabs .tabs {

    display: inline-block;

    border: 1px solid #dcdcdc;

    overflow: hidden;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px

}



#company-tabs li.active a {

    color: #333

}



#company-tabs a {

    color: #999;

    margin: 0;

    padding: 0 4rem

}



.company-icon-list {

    text-align: center

}



.company-icon-list ul {

    margin: 0;

    padding: 0;

    list-style: none;

    display: inline-block;

    width: 974px;

    width: 97.4rem

}



#client-list-selected li {

    background-image: url(../assets/svg/clients-662f135acbc1b8d0df9e9cdde7524ff4.svg)

}



#award-list-selected li {

    background-image: url(../assets/svg/awards-17fe526fba1988ed777718320a6b106a.svg)

}



.company-icon-list li {

    background-repeat: no-repeat;

    width: 121px;

    height: 148px;

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: middle;

    zoom: 1

}



.company-icon-list li:nth-child(1) {

    background-position: center 0

}



.company-icon-list li:nth-child(2) {

    background-position: center -149px

}



.company-icon-list li:nth-child(3) {

    background-position: center -297px

}



.company-icon-list li:nth-child(4) {

    background-position: center -445px

}



.company-icon-list li:nth-child(5) {

    background-position: center -593px

}



.company-icon-list li:nth-child(6) {

    background-position: center -741px

}



.company-icon-list li:nth-child(7) {

    background-position: center -889px

}



.company-icon-list li:nth-child(8) {

    background-position: center -1037px

}



.company-icon-list li:nth-child(9) {

    background-position: center -1185px

}



#company-clients h3 {

    margin-bottom: 1.1rem

}



#company-clients [class*=" icon-company-"],

#company-clients [class^=icon-company-] {

    font-size: 150px;

    font-size: 15rem

}



#client-list-selected {

    margin-top: -4.2rem;

    height: 95px;

    height: 9.5rem

}



#client-list-full {

    max-width: 960px;

    max-width: 96rem;

    margin: 3.3rem auto;

    line-height: 40px;

    line-height: 4rem;

    height: auto;

    max-height: 2000px;

    overflow: hidden;

    -webkit-transition: all .25s ease-in-out;

    -moz-transition: all .25s ease-in-out;

    -o-transition: all .25s ease-in-out;

    transition: all .25s ease-in-out

}



.toggle-content-hidden #client-list-full {

    max-height: 0

}



#client-list-full ul {

    margin: 0;

    padding: 0;

    list-style: none

}



#client-list-full li,

#client-list-full ul>li>ul {

    display: inline

}



#client-list-full li {

    text-transform: none;

    font-weight: 400;

    padding: 0 1.1rem

}



#client-list-full ul.clients>li {

    font-size: 11px;

    font-size: 1.1rem;

    letter-spacing: 4px;

    letter-spacing: .4rem;

    font-weight: 800;

    text-transform: uppercase

}



#client-list-full ul.clients>li ul li {

    letter-spacing: 0;

    font-size: 21px;

    font-size: 2.1rem

}



#client-list-full ul li {

    font-size: 21px;

    font-size: 2.1rem;

    font-weight: 400

}



#client-list-full .clients {

    margin-bottom: 5.8rem

}



.client-list-full-toggle {

    margin-top: .6rem



}



.client-list-full-toggle a {

    font-size: 17px;

    font-size: 1.7rem;

    padding-left: 1.2rem;

    color: #c79086

}



.client-list-full-toggle a .icon {

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: middle;

    zoom: 1;

    margin: 0 0 0 -.4rem

}



.client-list-full-toggle a .icon.up {

    margin: -.1rem 0 0 -.4rem;

    -webkit-transform: rotate(180deg);

    -moz-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    -o-transform: rotate(180deg);

    transform: rotate(180deg)

}



#company-clients.toggle-content-hidden #client-list-full {

    margin-bottom: 0

}



#company-awards p {

    max-width: 636px;

    max-width: 63.6rem;

    margin: 0 auto 3.3rem;

    text-align: left

}



#company-awards p.last {

    margin-bottom: 1.5rem

}



#company-awards p.awards {

    font-size: 14px;

    font-size: 1.4rem;

    margin: 1rem auto 1.7rem;

    font-style: italic;

    font-weight: 400;

    color: #999

}



#company-ventures {

    min-height: 250px;

    min-height: 25rem;

    padding: 6rem 0;

    font-size: 17px;

    font-size: 1.7rem;

    background: url(../assets/footer.jpg) no-repeat #151515;

    background-size: cover;

    color: #999;

    position: relative

}



#company-ventures:before {

    height: 144px;

    height: 14.4rem;

    top: -133px;

    top: -13.3rem;

    content: "";

    position: absolute;

    display: block;

    width: 100%

}



#company-ventures a,

#company-ventures h3 {

    color: #fff

}



#company-ventures h3 {

    padding-bottom: 12.8rem;

    margin-bottom: 4.6rem;

    background: url() bottom center no-repeat

}



#company-ventures p {

    color: #333;

    margin-top: 6.1rem

}



#company-ventures p.small {

    color: #999

}



#company-ventures ul {

    margin: 0;

    padding: 0;

    list-style: none

}



#company-ventures .venture-list {

    max-width: 636px;

    max-width: 63.6rem;

    margin: 0 auto;

    border-top: 1px solid #2d2d2d

}



#company-ventures .venture-item {

    line-height: 60px;

    line-height: 6rem;

    border-bottom: 1px solid #2d2d2d

}



#company-ventures .venture-item .link,

#company-ventures .venture-item .name,

#company-ventures .venture-item .office {

    float: left

}



#company-ventures .venture-item .name {

    width: 62.89308%;

    text-align: left;

    color: #fff

}



#company-ventures .venture-item .office {

    width: 14.15094%;

    text-align: right

}



#company-ventures .venture-item .link {

    width: 22.95597%;

    text-align: right

}



#company-ventures .venture-item .flat-button {

    width: 110px;

    width: 11rem;

    line-height: 39px;

    line-height: 3.9rem;

    padding: 0;

    display: inline-block;

    text-align: center

}



@media (max-width:1024px) {

    .company-icon-list ul {

        width: 100%;

        text-align: center

    }

    .company-icon-list ul li {

        float: none;

        display: -moz-inline-stack;

        display: inline-block;

        vertical-align: middle;

        zoom: 1

    }

    #company-intro h2 {

        font-size: 40px;

        font-size: 4rem;

        line-height: 46px;

        line-height: 4.6rem;
        text-transform: uppercase;

    }

    #company-intro-case .formulation-container {

        min-height: 0

    }

    #company-intro-case .content .formulation {

        font-size: 21px;

        font-size: 2.1rem

    }

    p {

        font-size: 16px;

        font-size: 1.6rem

    }

    #client-list-full ul.clients>li,

    h3 {

        font-size: 9px;

        font-size: .9rem

    }

    #client-list-full ul.clients>li ul li {

        margin-top: -.4rem;

        display: -moz-inline-stack;

        display: inline-block;

        vertical-align: middle;

        zoom: 1;

        font-size: 16px;

        font-size: 1.6rem

    }

    #client-list-full>h3+ul li {

        font-size: 16px;

        font-size: 1.6rem

    }

    #client-list-selected {

        height: auto

    }

}



@media (max-width:1020px) {

    #award-list-selected {

        max-width: 370px;

        margin: 0 auto 6rem

    }

    .company-icon-list ul {

        max-width: 600px

    }

    .company-icon-list ul li {

        margin-bottom: -50px

    }

}



@media (max-width:835px) {

    #client-list-selected ul {

        max-width: 420px

    }

}



@media (max-width:1024px) and (orientation:landscape) {

    body.company {

        padding-top: 0rem

    }

    #company-intro {

        margin-top: 0

    }

}



@media (max-width:768px) {

    body.company {

        padding-top: 9rem;

        padding-bottom: 4rem

    }

    #company-ventures {

        background: 0 0;

        min-height: 0;

        margin-top: 0

    }

    #company-ventures p.small,

    #company-ventures:before {

        display: none

    }

    p.offices {

        margin-left: 2rem;

        margin-right: 2rem

    }

    #company-intro {

        margin-top: 10rem

    }

    #company-intro h2 {

        margin-bottom: 16.4rem

    }

    #company-awards,

    #company-background,

    #company-clients,

    #company-intro {

        padding-left: 2rem;

        padding-right: 2rem

    }

    #company-intro-case .formulation-container {

        min-height: 0

    }

    #company-intro-case .content {

        max-width: 480px;

        max-width: 48rem;

        min-height: 145px;

        min-height: 14.5rem;

        padding: 1.5rem 0 0;

        margin: 0 auto

    }

    #company-intro-case .content .formulation {

        font-size: 21px;

        font-size: 2.1rem

    }

    #company-intro-case .link {

        margin-top: 1.3rem

    }

    #company-intro-case .refresh {

        margin-bottom: 1.8rem;

        font-size: 30px;

        font-size: 3rem

    }

    #company-intro-case .link,

    .small {

        font-size: 14px;

        font-size: 1.4rem

    }

    #company-background {

        margin-top: 4rem

    }

    #company-background .img-brand-helmet {

        margin-bottom: 2.4rem

    }

    #company-knighthood {

        margin-top: 5rem;

        margin-bottom: 3rem

    }

    #company-knighthood p.offices {

        margin-top: 0

    }

    #company-ventures {

        padding: 0

    }

}



@media (max-width:480px) {

    #company-intro h2 {

        margin-bottom: 8rem;

        font-size: 24px;

        font-size: 2.4rem;

        line-height: 28px;

        line-height: 2.8rem

    }

    #company-intro .img-brand-helmet {

        width: 90px;

        height: auto

    }

    #company-intro-case {

        margin-top: 6rem

    }

    #company-intro-case .formulation-container {

        min-height: 156px;

        min-height: 15.6rem

    }

    #company-background .img-art-craft,

    #company-background p {

        margin: 0

    }

    #company-tabs {

        margin-top: 4.5rem

    }

}



@media (max-width:568px) {

    body.company {

        padding-top: 8rem

    }

    #company-knighthood p:first-child {

        margin: 0 20px 45px

    }

    #company-tabs {

        margin: 4.5rem 2rem 6rem

    }

    #company-tabs ul {

        width: 100%

    }

    #company-tabs li {

        width: 50%

    }

    .company-icon-list li:nth-child(even) {

        margin-left: 1.2rem

    }

}



body.projects.index {

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJUlEQVQIW2P89u3bfwYg+P79O4hiYMQQePv2LVgFJycnRAW6AACKZBVT1hQc5AAAAABJRU5ErkJggg==)

}



body.projects.unauthorized {

    background: url() #000

}



.archived-projects,

.featured-projects {

    max-width: 1024px;

    max-width: 102.4rem;

    margin: 10rem auto 0;

    padding: 0 3.2rem;

    text-align: left

}



.all-projects {

    margin-bottom: 6rem

}



.all-projects a,

.all-projects h2,

.all-projects h3 {

    color: #151515

}



.all-projects li.project {

    width: -moz-calc(50% - 1px);

    width: -o-calc(50% - 1px);

    width: -webkit-calc(50% - 1px);

    width: calc(50% - 1px);

    margin: 0 .2rem .2rem 0;

    -webkit-transition: background .15s;

    -moz-transition: background .15s;

    -o-transition: background .15s;

    transition: background .15s;

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

    transform-style: preserve-3d;

    background: #fff;

    float: left;

    text-align: center;

    cursor: pointer

}



.all-projects li.project a {

    display: block;

    padding: 8rem 0 6rem

}



.all-projects li.project:nth-child(2n+2) {

    margin-right: 0

}



.all-projects li.project.locked i.icon-locked {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 999;

    color: #fff;

    opacity: .6;

    margin: -2rem 0 0 -2rem

}



.all-projects li.project.locked .thumb {

    opacity: .8

}



html:not(.touch) .all-projects li.project.locked:hover .thumb,

html:not(.touch) .all-projects li.project.locked:hover i.icon-locked {

    opacity: 1

}



.all-projects li.project h2,

.all-projects li.project h3 {

    -webkit-transition: font-size .5s;

    -moz-transition: font-size .5s;

    -o-transition: font-size .5s;

    transition: font-size .5s

}



.all-projects li.project .thumb-container {

    margin: 0 auto 6rem;

    width: 70%;

    height: 150px;

    padding-bottom: 65%;

    position: relative;

    background: #151515;

    overflow: hidden

}



.all-projects li.project .thumb-container:after {

    content: "";

    position: absolute;

    top: -5px;

    right: -5px;

    left: -5px;

    bottom: -5px;

    border: 6px solid #fff;

    -webkit-transition: border .15s;

    -moz-transition: border .15s;

    -o-transition: border .15s;

    transition: border .15s

}



.all-projects li.project .thumb {

    width: 100%;

    height: 100%;

    position: absolute;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover

}



.all-projects li.project h2,

.all-projects li.project h3 {

    width: 85%;

    margin: 0 auto

}



.all-projects li.project h3 {

    margin-bottom: .5rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap

}



.all-projects li.project h2 {

    font-size: 32px;

    font-size: 3.2rem;

    line-height: 36px;

    line-height: 3.6rem;

    height: 108px;

    height: 10.8rem;

    letter-spacing: 0;

    overflow: hidden

}



.archived-projects .all-projects li.project {

    width: -moz-calc((100% - 4px)/ 3);

    width: -o-calc((100% - 4px)/ 3);

    width: -webkit-calc((100% - 4px)/ 3);

    width: calc((100% - 4px)/ 3)

}



.archived-projects .all-projects li.project:nth-child(2n+2) {

    margin-right: 2px

}



.archived-projects .all-projects li.project:nth-child(3n+3) {

    margin-right: 0

}



.archived-projects .all-projects li.project a {

    padding: 4.5rem 0 4rem

}



.archived-projects .all-projects li.project .thumb-container {

    margin: 0 auto 3.5rem

}



.archived-projects .all-projects li.project h2 {

    font-size: 24px;

    font-size: 2.4rem;

    line-height: 28px;

    line-height: 2.8rem;

    height: 84px;

    height: 8.4rem

}



#client-page .body blockquoute p,

section.quote blockquote p {

    font-style: italic;

    -webkit-font-smoothing: antialiased

}



.divider {

    width: 100%;

    background: #dcdcdc;

    height: 1px;

    height: .1rem;

    margin: 9rem 0 8rem

}



section.quote blockquote {

   
    color: #151515;

    font-size: 34px;

    font-size: 3.4rem;

    display: block;

    overflow: hidden;

    max-width: 864px;

    max-width: 86.4rem;

    margin: 0 auto 10rem;

    padding: 0 3.2rem;

    width: 100%

}



section.quote blockquote p {

    font-size: 34px;

    font-size: 3.4rem;

    line-height: 4.5rem;

    word-spacing: -.1rem;

    margin-bottom: .5rem

}



section.quote blockquote span {

    

    font-size: 17px;

    font-size: 1.7rem;

    color: #999;

    float: right;

    padding-right: 1.6rem

}
section.quote blockquote .author-photo {

    width: 70px;

    width: 7rem;

    height: 70px;

    height: 7rem;

    margin: 3rem auto 2.5rem;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    background-color: #db966f

}



section.quote blockquote .author-name {

    font-size: 17px;

    font-size: 1.7rem;

    margin: 3rem auto 2.5rem;
   
	  display: block;

    text-align: center;

    float: none;

    color: #151515

}



section.quote blockquote .author-name:before {

    content: "— "

}



.projects.unauthorized {

    padding-top: 6rem

}



.projects.unauthorized h3 {

    font-size: 4.4rem;

    line-height: 5.2rem;

    font-weight: 400;

    letter-spacing: -1px;

    text-transform: none

}



.projects.show,

.projects.show #main,

.projects.show #main-body,

.projects.show article {

    height: 100%

}



.projects.show .header {

    width: 100%;

    height: 100%;

    position: relative;

    background: #000;

    overflow: hidden

}



.projects.show .header .cover {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);

    opacity: .8

}



.projects.show .header .inner {

    max-width: 660px;

    position: absolute;

    top: 50%;

    left: 50%;

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

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

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

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

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

    text-align: center;

    color: #fff

}



.projects.show .header .inner h1 {

    font-size: 44px;

    font-size: 4.4rem;

    line-height: 52px;

    line-height: 5.2rem;

    font-weight: 400;

    letter-spacing: -1px

}



.projects.show .header .inner h3 {

    margin-bottom: 1.5rem;
    font-size:5rem;

}



.projects.show .navigation.header-navigation {

    position: relative;

    background-color: #fff;

    margin-bottom: 2.8rem

}



.projects.show .navigation.header-navigation a {

    color: #151515

}



.projects.show .navigation.header-navigation ul {

    overflow: hidden

}



.projects.show .navigation.header-navigation li {

    width: 106px;

    width: 10.6rem;

    display: inline-block;

    border-left: 1px solid #e4e4e4

}



.projects.show .navigation.header-navigation li a {

    width: 109px;

    width: 10.9rem

}



.projects.show .navigation.header-navigation li a.icon-view:before {

    margin-top: -.1rem

}



.projects.show .navigation.header-navigation li a.icon-play:before {

    margin-left: -.2rem;

    margin-top: .1rem

}



.projects.show .navigation.header-navigation li a.icon-info:before {

    margin-left: -.4rem;

    margin-top: -.3rem

}



.projects.show .navigation.header-navigation li:first-child {

    border-left: none

}



.projects.show .navigation.header-navigation li a:hover {

    background: #fbfbfb

}



.projects.show .tagline {

    max-width: 640px;

    text-align: left;

    margin: 0 auto

}



.projects.show .tagline p {

    font-size: 26px;

    font-size: 2.6rem;

    line-height: 36px;

    line-height: 3.6rem;

    padding: 2.3rem 0 5.5rem

}



.projects.show .content h2 {

    font-size: 11px;

    font-size: 1.1rem;

    text-transform: uppercase;

    font-weight: 800;

    letter-spacing: 4px;

    letter-spacing: .4rem;

    margin-bottom: 2.2rem

}



.projects.show .content p {

    max-width: 640px;

    margin: 0 auto 3.2rem;

    line-height: 33px;

    line-height: 3.3rem;

    text-align: left;

    color: #333

}



.projects.show .content.information {

    padding-top: 2rem

}



.projects.show .content.information p {

    text-align: center;

    margin: 0 auto 4.2rem

}



.projects.show .content.information h2 {

    margin-bottom: 0;

    line-height: 22px;

    line-height: 2.2rem

}



.projects.show .meta {



    font-weight: 400;

    max-width: 640px;

    position: relative;

    font-size: 21px;

    font-size: 2.1rem;

    padding-top: 2rem;

    margin: 0 auto 8rem

}



.projects.show .meta .flat-button {

    margin-bottom: 7rem

}



.projects.show .meta p.site {

    width: 100%;

    float: left;

    text-align: center;

    line-height: inherit

}



.container {

    margin: 0 auto;

    width: 480px;

    width: 48rem

}



.locked-container {

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowN0E3RkYwRTYwREUxMUUzQUFCQ0I1MDcyNUJDRTU1NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowN0E3RkYwRjYwREUxMUUzQUFCQ0I1MDcyNUJDRTU1NCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3QTdGRjBDNjBERTExRTNBQUJDQjUwNzI1QkNFNTU0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA3QTdGRjBENjBERTExRTNBQUJDQjUwNzI1QkNFNTU0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+h43HwgAAAChJREFUeNpilJOTY2Bg+PjxI5BkYkACzED88+dPfn5+Dg4OFBmAAAMA0M8GZnwioWAAAAAASUVORK5CYII=) #000;

    color: #fff;

    padding: 7.5rem 0 6rem

}



.locked-container img {

    width: 58px;

    padding-bottom: 20%

}



.locked-container fieldset {

    width: 64%;

    height: 40px;

    height: 4rem;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    margin: 0 auto;

    position: relative;

    border: 1px solid #333;

    overflow: hidden

}



.locked-container input[type=password] {

    width: 100%;

    color: #fff;

    border: none;

    background: 0 0;

    padding: 2% 58px 2% 4%;

    left: 0;

    outline: 0;

    position: absolute;

    font-size: 24px;

    font-size: 2.4rem;

    margin-top: -.2rem;

    line-height: 30px;

    line-height: 3rem;

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: middle;

    zoom: 1

}



.locked-container input[type=password]:focus {

    background: #000

}



.locked-container input[type=password]:focus+input[type=submit] {

    background: #c79086

}



.locked-container input[type=submit] {

    background: #333;

    text-align: center;

    color: #fff;

    outline: 0;

    position: absolute;

    top: 0;

    right: 0;

    height: 30px;

    height: 3rem;

    width: 50px;

    width: 5rem;

    margin: .4rem .4rem .4rem 0;

    padding: .2rem 0 0 .4rem

}



.locked-container .status {

    color: #04b1ba;

    font-weight: 200;

    font-style: italic;

    font-size: 14px;

    font-size: 1.4rem;

    margin: 1.5rem 0 3rem

}



.locked-container p.working {

    font-size: 16px;

    font-size: 1.6rem;

    font-weight: 400;

    width: 60%;

    margin: 0 auto;

    color: #999

}



.locked-container p.working a {

    padding: 0;

    color: #fff;

    display: inline;

    font-weight: 400

}



@media screen and (min-width:1440px) {

    .archived-projects,

    .featured-projects {

        max-width: 1440px;

        max-width: 144rem

    }

    .all-projects li.project {

        width: -moz-calc((100% - 4px)/ 3);

        width: -o-calc((100% - 4px)/ 3);

        width: -webkit-calc((100% - 4px)/ 3);

        width: calc((100% - 4px)/ 3)

    }

    .all-projects li.project:nth-child(2n+2) {

        margin-right: 2px

    }

    .all-projects li.project:nth-child(3n+3) {

        margin-right: 0

    }

    .archived-projects .all-projects li.project {

        width: -moz-calc((100% - 6px)/ 4);

        width: -o-calc((100% - 6px)/ 4);

        width: -webkit-calc((100% - 6px)/ 4);

        width: calc((100% - 6px)/ 4)

    }

    .archived-projects .all-projects li.project:nth-child(2n+2),

    .archived-projects .all-projects li.project:nth-child(3n+3) {

        margin-right: 2px

    }

    .archived-projects .all-projects li.project:nth-child(4n+4) {

        margin-right: 0

    }

}



@media screen and (max-width:1024px) {

    .archived-projects,

    .featured-projects {

        padding: 0;

        max-width: 960px;

        max-width: 96rem

    }

}



@media screen and (max-width:980px) {

    .archived-projects,

    .featured-projects {

        padding: 0 2rem

    }

}



@media screen and (max-width:840px) {

    .all-projects li.project a {

        padding: 5.5rem 0 3.5rem

    }

    .all-projects li.project a h2 {

        font-size: 24px;

        font-size: 2.4rem;

        line-height: 28px;

        line-height: 2.8rem;

        height: 84px;

        height: 8.4rem

    }

    .all-projects li.project a .thumb-container {

        margin: 0 auto 3rem

    }

    .archived-projects .all-projects li.project {

        width: -moz-calc(50% - 1px);

        width: -o-calc(50% - 1px);

        width: -webkit-calc(50% - 1px);

        width: calc(50% - 1px)

    }

    .archived-projects .all-projects li.project:nth-child(3n+3) {

        margin-right: 2px

    }

    .archived-projects .all-projects li.project:nth-child(2n+2) {

        margin-right: 0

    }

}



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

    .projects.show .tagline {

        max-width: 100%

    }

    .projects.show .tagline p {

        padding-left: 2rem;

        padding-right: 2rem

    }

    .projects.show .content p {

        padding: 0 2rem;

        max-width: 100%

    }

}



@media screen and (max-width:568px) {

    body.projects.unauthorized .container {

        width: 100%

    }

    .projects.show .navigation.header-navigation li {

        width: 82px;

        width: 8.2rem

    }

    .projects.show .navigation.header-navigation li.icon-info:before {

        margin-left: -.4rem;

        margin-top: -.2rem

    }

    .projects.show .navigation.header-navigation li a {

        width: 85px;

        width: 8.5rem

    }

    .projects.show .tagline p {

        font-size: 22px;

        font-size: 2.2rem;

        line-height: 32px;

        line-height: 3.2rem

    }

    .projects.show .content p {

        line-height: 24px;

        line-height: 2.4rem

    }

    .projects .header .inner {

        width: 100%

    }

    .projects .header .inner h1 {

        padding: 0 20px;

        font-size: 35px!important;

        font-size: 3.5rem!important;

        line-height: 42px!important;

        line-height: 4.2rem!important

    }

    .archived-projects,

    .featured-projects {

        max-width: 420px;

        max-width: 42rem;

        padding: 0

    }

    .all-projects li.project,

    .archived-projects .all-projects li.project {

        margin: 0 0 .2rem;

        width: 100%;

        float: none

    }

    .all-projects li.project:nth-child(2n+2),

    .all-projects li.project:nth-child(3n+3),

    .archived-projects .all-projects li.project:nth-child(2n+2),

    .archived-projects .all-projects li.project:nth-child(3n+3) {

        margin-right: 0

    }

    .archived-projects .all-projects li.project {

        text-align: left

    }

    .archived-projects .all-projects li.project a {

        padding: 2rem 0

    }

    .archived-projects .all-projects li.project a .thumb-container {

        width: 53px;

        width: 5.3rem;

        height: 53px;

        height: 5.3rem;

        margin: 0 1.5rem;

        padding: 0;

        float: left

    }

    .archived-projects .all-projects li.project a .thumb-container:after {

        display: none

    }

    .archived-projects .all-projects li.project a h3 {

        float: left;

        width: -moz-calc(100% - 100px);

        width: -o-calc(100% - 100px);

        width: -webkit-calc(100% - 100px);

        width: calc(100% - 100px);

        margin-bottom: .2rem

    }

    .archived-projects .all-projects li.project a h2 {

        font-size: 17px;

        font-size: 1.7rem;

        line-height: 22px;

        line-height: 2.2rem;

        height: auto;

        overflow: visible

    }

}



#contact-offices {

    padding: 90px 0 0;

    color: #fff;

    background: #fff;

    text-align: center;

    position: relative

}



#contact-offices .background,

section .background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 580px;

    background: #151515

}



#contact-offices .background .image,

section .background .image {

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%

}



#contact-offices .offices {

    margin-bottom: -10px

}



#contact-offices .offices .office-container {

    margin: 0 6px;

    display: inline-block;

    width: 312px

}



#contact-offices .offices .office-container .flat-button.copy {

    pointer-events: none

}



#contact-offices .offices .office-container .get-in-touch,

#contact-offices .offices .office-container .location {

    -webkit-transition: all .5s cubic-bezier(.68, -.55, .265, 1.55);

    -moz-transition: all .5s cubic-bezier(.68, -.55, .265, 1.55);

    -o-transition: all .5s cubic-bezier(.68, -.55, .265, 1.55);

    transition: all .5s cubic-bezier(.68, -.55, .265, 1.55);

    -webkit-perspective: 1000;

    -moz-perspective: 1000;

    -ms-perspective: 1000;

    -o-perspective: 1000;

    perspective: 1000

}



#contact-offices .offices .office-container.show-map .flat-button.copy {

    pointer-events: auto

}



#content-list button.pager,

.main-slide img,

.main-slide.loaded .icon {

    pointer-events: none

}



#contact-offices .offices .office-container.show-map .office .get-in-touch {

    -webkit-transform: rotateY(180deg);

    -moz-transform: rotateY(180deg);

    -ms-transform: rotateY(180deg);

    -o-transform: rotateY(180deg);

    transform: rotateY(180deg)

}



.no-csstransforms3d #contact-offices .offices .office-container.show-map .office .get-in-touch {

    display: none

}



#contact-offices .offices .office-container.show-map .office .location {

    -webkit-transform: rotateY(360deg);

    -moz-transform: rotateY(360deg);

    -ms-transform: rotateY(360deg);

    -o-transform: rotateY(360deg);

    transform: rotateY(360deg)

}



#contact-offices .offices .office-container .office {

    -webkit-perspective: 1000;

    -moz-perspective: 1000;

    -ms-perspective: 1000;

    -o-perspective: 1000;

    perspective: 1000;

    position: relative;

    width: 312px;

    min-height: 500px

}



#contact-offices .offices .office-container .office .get-in-touch {

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    -o-backface-visibility: hidden;

    backface-visibility: hidden;

    position: absolute;

    top: 0;

    left: 0;

    width: 312px;

    min-height: 500px;

    z-index: 2;

    background: #151515

}



#main-slider,

.carousel .rsContainer .play,

.rsWebkit3d .rsABlock,

.rsWebkit3d .rsAbsoluteEl,

.rsWebkit3d .rsBtnCenterer,

.rsWebkit3d .rsContainer,

.rsWebkit3d .rsLink,

.rsWebkit3d .rsOverflow,

.rsWebkit3d .rsPreloader,

.rsWebkit3d .rsSlide,

.rsWebkit3d .rsThumbs,

.rsWebkit3d img {

    -webkit-backface-visibility: hidden

}



#contact-offices .offices .office-container .office .get-in-touch h2 {

    margin-top: 8.1rem;

    margin-bottom: 6.1rem;

    font-size: 22px;

    font-size: 2.2rem;

    line-height: 32px;

    line-height: 3.2rem

}



#contact-offices .offices .office-container .office .get-in-touch h2 span,

#contact-offices .offices .office-container .office .get-in-touch h2 strong {

    display: block;

    font-weight: 400;

    letter-spacing: 0

}



#contact-offices .offices .office-container .office .get-in-touch h2 strong {

    font-size: 32px;

    font-size: 3.2rem;

    margin-bottom: .8rem

}



#contact-offices .offices .office-container .office .get-in-touch a.call {

    color: #fff

}



#contact-offices .offices .office-container .office .get-in-touch .new-business h3 {

    margin-bottom: 1rem

}



#contact-offices .offices .office-container .office .get-in-touch .new-business a {

    font-size: 21px;

    font-size: 2.1rem;

    color: #fff

}



#contact-offices .offices .office-container .office .location {

    -webkit-transform: rotateY(180deg);

    -moz-transform: rotateY(180deg);

    -ms-transform: rotateY(180deg);

    -o-transform: rotateY(180deg);

    transform: rotateY(180deg);

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    -o-backface-visibility: hidden;

    backface-visibility: hidden;

    position: absolute;

    top: 0;

    left: 0;

    width: 312px;

    min-height: 500px;

    z-index: 0

}



#contact-offices .offices .office-container .office .location .map {

    min-height: 500px

}



#contact-offices .offices .office-container .office .location .vcard {

    padding: 2.8rem 0 3.3rem;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: rgba(102, 0, 255, .8)

}



#contact-offices .offices .office-container .office .location .vcard .cta {

    margin-bottom: 1.6rem

}



#contact-offices .offices .office-container .office .location .vcard .cta .flat-button {

    padding: 1.1rem 2.2rem 1rem 2.5rem

}



#contact-offices .offices .office-container .office .location .vcard .adr {

    font-size: 17px;

    font-size: 1.7rem;

    padding: 0 2rem;

    min-height: 72px;

    min-height: 7.2rem;

    line-height: 1.45;

    font-weight: 400

}



#contact-quick {

    border-bottom: 1px solid #dcdcdc;

    background: #fff

}



#contact-quick p {

    font-size: 17px;

    font-size: 1.7rem;

    padding: 2.55em 0

}



#contact-quick .divider {

    padding: 0 10px;

    background: 0 0

}



#contact-newsletter,

.contact-newsletter {

    padding: 82px 0 90px;

    background: #fff;

    border-bottom: 1px solid #dcdcdc

}



#contact-newsletter h2,

.contact-newsletter h2 {

    margin-bottom: .9em

}



#contact-newsletter .tabs,

.contact-newsletter .tabs {

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    margin: 0 auto 3em;

    border: 1px solid #dcdcdc;

    max-width: 352px;

    overflow: hidden

}



#contact-newsletter .tabs li,

.contact-newsletter .tabs li {

    width: 175px

}



#contact-newsletter .tabs li a,

.contact-newsletter .tabs li a {

    margin: 0;

    color: #999

}



#contact-newsletter .tabs li.active a,

.contact-newsletter .tabs li.active a {

    color: #151515

}



#contact-newsletter form,

.contact-newsletter form {

    margin: 0 auto;



}



#contact-newsletter form.active,

.contact-newsletter form.active {

    display: block

}



#contact-newsletter form fieldset,

.contact-newsletter form fieldset {

    margin: 0;

    padding: 0

}



#contact-newsletter form fieldset h2,

.contact-newsletter form fieldset h2 {

    color: #f0f;

    display: block;

    width: 250px;

    height: 250px;

    background: url();

    margin: 0 auto;

    text-indent: -9999px;

    overflow: hidden

}



#contact-newsletter form fieldset p,

.contact-newsletter form fieldset p {

    margin-bottom: 1em

}



#contact-newsletter form fieldset p .divider,

.contact-newsletter form fieldset p .divider {

    margin: 0 1rem;

    background: 0 0

}



#contact-newsletter form fieldset .formfield-container,

.contact-newsletter form fieldset .formfield-container {

    width: 474px;

    width: 47.4rem;

    margin: 0 auto

}



#contact-newsletter form fieldset input[type=date],

#contact-newsletter form fieldset input[type=email],

#contact-newsletter form fieldset input[type=text],

#contact-newsletter form fieldset select,

#contact-newsletter form fieldset textarea,

.contact-newsletter form fieldset input[type=date],

.contact-newsletter form fieldset input[type=email],

.contact-newsletter form fieldset input[type=text],

.contact-newsletter form fieldset select,

.contact-newsletter form fieldset textarea {

    display: block;

    border: 1px solid #dcdcdc;

    color: #aaa;

    text-transform: lowercase;

    float: left;

    outline: 0;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    width: 367px;

    width: 36.7rem;

    height: 62px;

    height: 6.2rem;

    padding: 0 1.5rem;

    font-size: 17px;

    font-size: 1.7rem;

    resize: none;

    margin-top: 2px;

    background-color: transparent!important

}



#contact-newsletter form fieldset textarea,

.contact-newsletter form fieldset textarea {

    padding-top: 15px;

    height: 100px;

    height: 10rem

}



#contact-newsletter form fieldset input[type=date]:focus,

#contact-newsletter form fieldset input[type=date]:hover,

#contact-newsletter form fieldset input[type=email]:focus,

#contact-newsletter form fieldset input[type=email]:hover,

#contact-newsletter form fieldset input[type=text]:focus,

#contact-newsletter form fieldset input[type=text]:hover,

#contact-newsletter form fieldset select:focus,

#contact-newsletter form fieldset select:hover,

#contact-newsletter form fieldset textarea:focus,

#contact-newsletter form fieldset textarea:hover,

.contact-newsletter form fieldset input[type=date]:focus,

.contact-newsletter form fieldset input[type=date]:hover,

.contact-newsletter form fieldset input[type=email]:focus,

.contact-newsletter form fieldset input[type=email]:hover,

.contact-newsletter form fieldset input[type=text]:focus,

.contact-newsletter form fieldset input[type=text]:hover,

.contact-newsletter form fieldset select:hover,

.contact-newsletter form fieldset textarea:focus.contact-newsletter form fieldset textarea:hover {

    border: 1px solid #c79086;

    cursor: pointer

}



#contact-newsletter form fieldset button,

.contact-newsletter form fieldset button {

    padding: 0;

    border: 0;

    outline: 0;

    background: 0 0;

    display: block;

    float: right;

    margin-top: 4px

}



#contact-newsletter form fieldset button span,

.contact-newsletter form fieldset button span {

    width: 100px;

    width: 10rem;

    height: 52px;

    height: 5.2rem;

    line-height: 52px;

    line-height: 5.2rem;

    padding: 0;

    display: block;

    color: #fff

}



#contact-newsletter form#ten-things fieldset h2,

.contact-newsletter form#ten-things fieldset h2 {

    background: url()

}



#contact-careers-teaser {

    padding: 156px 0 100px;

    color: #fff;

    text-align: center;

    background: url() center center no-repeat #60f;

    background-size: cover;

    display: none

}



#contact-careers-teaser .hatnote {

    font-size: 11px;

    font-size: 1.1rem;

    letter-spacing: 3px;

    letter-spacing: .3rem;

    margin-bottom: 2.1rem;

    display: block;

    text-transform: uppercase

}



#contact-careers-teaser .main-message {

    font-size: 34px;

    font-size: 3.4rem;

    margin: 0 auto 9.7rem;

    max-width: 820px;

    line-height: 130%

}



#contact-careers {

    margin-top: -10px;

    display: none

}



#contact-careers ul {

    margin-bottom: 5.1rem

}



#contact-careers ul li {

    margin-bottom: 2px;

    background: #fff;

    text-align: left

}



#contact-careers ul li p {

    font-size: 17px;

    font-size: 1.7rem;

    margin: 19px 0 18px;

    float: left

}



#contact-careers ul li p.job-description {

    width: 632px

}



#contact-careers ul li p.job-description .job-title {

    margin-left: 20px

}



#contact-careers ul li p.location {

    width: 146px;

    color: #999

}



#contact-careers ul li p.location .short {

    display: none

}



#contact-careers ul li p.cta {

    margin: 10px 0;

    width: 122px

}



#contact-careers ul li p.cta a {

    -webkit-transition: background .35s;

    -moz-transition: background .35s;

    -o-transition: background .35s;

    transition: background .35s;

    padding: 1.3rem 2.1rem 1.2rem

}



#contact-careers ul li p.cta a:hover {

    background: #c79086

}



#contact-careers ul li .share {

    margin: 0;

    border-left: 1px solid #fbfbfb;

    float: right;

    width: 59px;

    min-height: 60px

}



#contact-careers ul li .share a {

    display: block

}



#contact-careers .footnote {

    font-size: 17px;

    font-size: 1.7rem;

    margin: 0 auto 7.7rem;

    max-width: 560px;

    line-height: 170%

}



#contact-careers .footnote a {

    -webkit-transition: border .35s;

    -moz-transition: border .35s;

    -o-transition: border .35s;

    transition: border .35s;

    border-bottom: 1px solid #fbfbfb

}



#contact-careers .footnote a:hover {

    border-color: #c79086

}



#contact-social {

    padding-top: 5rem;

    padding-bottom: 5rem;

    text-align: center;

    background: #fff

}



#contact-social ul {

    margin: 0 auto;

    max-width: 960px

}



#contact-social ul li {

    margin: 0 -5px;

    width: 25%;

    height: 80px;

    display: inline-block

}



#contact-social ul li [class^=icon-] {

    font-size: 60px;

    font-size: 6rem;

    margin-left: -.1rem

}



#contact-social ul li a {

    -webkit-transition: color .25s;

    -moz-transition: color .25s;

    -o-transition: color .25s;

    transition: color .25s;

    margin: 0 auto;

    padding-top: 6px;

    position: relative;

    display: block;

    color: #151515;

    text-align: center

}



#contact-social ul li a span {

    position: absolute;

    text-indent: -9999px

}



#contact-social ul li a:hover {

    color: #c79086

}



.touch #contact-offices .location {

    display: none

}



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

    #contact-offices {

        background: #151515

    }

    #contact-offices .background {

        display: none

    }

    #contact-offices .offices {

        margin-bottom: 0

    }

    #contact-offices .offices .office-container {

        margin: 0;

        border-bottom: 1px solid #444;

        display: block;

        width: auto

    }

    #contact-offices .offices .office-container .office {

        width: auto;

        min-height: 400px

    }

    #contact-offices .offices .office-container .office .get-in-touch,

    #contact-offices .offices .office-container .office .location {

        width: 100%;

        min-height: 400px

    }

    #contact-offices .offices .office-container .office .get-in-touch h2 {

        margin-top: 5rem;

        margin-bottom: 4rem

    }

    #contact-offices .offices .office-container .office .get-in-touch h2 strong {

        margin-bottom: .8rem

    }

    #contact-offices .offices .office-container .office .get-in-touch p.new-business {

        margin-bottom: 4rem

    }

    #contact-offices .offices .office-container .office .location .map {

        min-height: 400px

    }

    #contact-quick p {

        padding: 1.6rem 0

    }

    #contact-quick span.divider {

        display: block;

        border-bottom: 1px solid #dcdcdc;

        color: rgba(255, 255, 255, 0);

        margin: 1.4rem 0

    }

}



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

    #contact-newsletter form#ten-things fieldset h2,

    .contact-newsletter form#ten-things fieldset h2 {

        -webkit-background-size: 60%;

        -moz-background-size: 60%;

        -o-background-size: 60%;

        background-size: 60%;

        background-position: center center;

        background-repeat: no-repeat

    }

    #contact-newsletter form fieldset .formfield-container,

    .contact-newsletter form fieldset .formfield-container {

        width: 80%

    }

    #contact-newsletter form fieldset h2,

    .contact-newsletter form fieldset h2 {

        height: 180px;

        height: 18rem;

        -webkit-background-size: 60%;

        -moz-background-size: 60%;

        -o-background-size: 60%;

        background-size: 60%;

        background-position: center center;

        background-repeat: no-repeat

    }

    #contact-newsletter form fieldset input[type=date],

    #contact-newsletter form fieldset input[type=email],

    #contact-newsletter form fieldset input[type=text],

    #contact-newsletter form fieldset select,

    #contact-newsletter form fieldset textarea,

    .contact-newsletter form fieldset input[type=date],

    .contact-newsletter form fieldset input[type=email],

    .contact-newsletter form fieldset input[type=text],

    .contact-newsletter form fieldset select,

    .contact-newsletter form fieldset textarea {

        width: 100%;

        float: none

    }

    #contact-newsletter form fieldset button,

    .contact-newsletter form fieldset button {

        width: 100%;

        float: none;

        margin-top: 20px

    }

    #contact-newsletter form fieldset button span,

    .contact-newsletter form fieldset button span {

        width: 100%

    }

    #contact-newsletter form fieldset p,

    .contact-newsletter form fieldset p {

        width: 80%;

        margin-left: auto;

        margin-right: auto

    }

}



@media screen and (max-width:500px) {

    #contact-offices {

        padding-top: 4.4rem

    }

    #contact-offices .offices .office-container .office {

        min-height: 300px

    }

    #contact-offices .offices .office-container .office .get-in-touch,

    #contact-offices .offices .office-container .office .location,

    #contact-offices .offices .office-container .office .location .map {

        min-height: 296px

    }

    #contact-offices .offices .office-container .office .get-in-touch h2 {

        margin-top: 4.2rem;

        margin-bottom: 2.3rem;

        font-size: 17px;

        font-size: 1.7rem;

        line-height: 30px;

        line-height: 3rem

    }

    #contact-offices .offices .office-container .office .get-in-touch h2 strong {

        font-size: 24px;

        font-size: 2.4rem;

        margin-bottom: 0

    }

    #contact-offices .offices .office-container .office .get-in-touch .new-business {

        margin-bottom: 3.5rem

    }

    #contact-offices .offices .office-container .office .get-in-touch .new-business h3 {

        font-size: 11px;

        font-size: 1.1rem

    }

    #contact-offices .offices .office-container .office .get-in-touch .new-business a {

        font-size: 17px;

        font-size: 1.7rem

    }

    #contact-offices .offices .office-container .office .get-in-touch p.new-business {

        margin-bottom: 1.7rem

    }

    #contact-offices .offices .office-container .office .get-in-touch p.new-business span {

        margin-bottom: .1rem

    }

    #contact-offices .offices .office-container .office .get-in-touch p.new-business a {

        font-size: 16px;

        font-size: 1.6rem

    }

    #contact-offices .offices .office-container .office .location .vcard {

        padding: 1.8rem 0 2.3rem

    }

    #contact-offices .offices .office-container .office .location .vcard .cta {

        margin-bottom: 1rem

    }

    #contact-offices .offices .office-container .office .location .vcard .adr {

        font-size: 16px;

        font-size: 1.6rem;

        min-height: 63px;

        min-height: 6.3rem;

        line-height: 1.35

    }

    #contact-newsletter h2,

    .contact-newsletter h2 {

        font-size: 24px;

        font-size: 2.4rem;

        line-height: 30px;

        line-height: 3rem

    }

    #contact-newsletter .tabs,

    .contact-newsletter .tabs {

        max-width: 100%;

        margin: 0 20px

    }

    #contact-newsletter .tabs li,

    .contact-newsletter .tabs li {

        width: 50%

    }

    #contact-newsletter .tabs li a,

    .contact-newsletter .tabs li a {

        margin: 0

    }

    #contact-newsletter .tabs li:first-child a,

    .contact-newsletter .tabs li:first-child a {

        visibility: hidden;

        position: relative

    }

    #contact-newsletter .tabs li:first-child a:before,

    .contact-newsletter .tabs li:first-child a:before {

        background: #e8e8e8;

        width: 100%;

        visibility: visible;

        content: "LoR";

        position: absolute;

        right: 50%;

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

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

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

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

        transform: translate(50%, 0)

    }

    #contact-newsletter .tabs li.active a:before,

    .contact-newsletter .tabs li.active a:before {

        background: #fff

    }

    #contact-newsletter form,

    .contact-newsletter form {

        margin: 0 20px

    }

    #contact-newsletter form fieldset .formfield-container,

    .contact-newsletter form fieldset .formfield-container {

        width: 100%

    }

    #contact-newsletter form fieldset p,

    .contact-newsletter form fieldset p {

        font-size: 16px;

        font-size: 1.6rem

    }

    #contact-social {

        padding: 2rem 0

    }

    #contact-social ul li {

        height: 40px;

        height: 4rem

    }

    #contact-social ul li [class^=icon-] {

        font-size: 30px;

        font-size: 3rem

    }

}



.hok-posts-section {

    padding: 7.5rem 0 0;

    position: relative;

    text-align: center

}



.hok-posts-section .paginator {

    text-align: center

}



.hok-posts-section .paginator .paginator-nav {

    margin-bottom: 1.7rem

}



.hok-posts-section .paginator .paginator-nav a {

    margin: 0 .2rem;

    background: #999;

    cursor: pointer

}



.hok-posts-section .paginator .paginator-nav a:hover {

    background: #151515

}



.hok-posts-section .paginator .indicator {

    font-size: 16px;

    font-size: 1.6rem;

    color: #aaa

}



.hok-overview__post a {

    position: relative;

    display: block;

    padding: 80px 0;

    border-bottom: 1px solid #e4e4e4;

    color: #151515;

    background: #fff

}



.hok-overview__post a:hover {

    background: #fbfbfb

}



.hok-overview__post__thumb {

    display: block;

    width: 298px;

    height: 298px;

    overflow: hidden;

    position: relative

}



.hok-overview__post__date {

    display: inline-block;

    color: #c79086;

    font-size: 17px;

    font-size: 1.7rem

}



.hok-overview__post__title {

    display: block;

    margin: 3px auto 24px;

    max-width: 660px;

    font-weight: 400;

    letter-spacing: 0;

    font-size: 42px;

    font-size: 4.2rem;

    line-height: 52px;

    line-height: 5.2rem

}



.hok-overview__post__excerpt {

    display: block;

    margin: 0 auto 10px;

    max-width: 660px;

    color: #aaa;

    font-size: 21px;

    font-size: 2.1rem;

    line-height: 30px;

    line-height: 3rem

}



.hok-overview__post__meta {

    display: block;

    margin: 0 auto;

    color: #aaa;

    font-size: 17px;

    font-size: 1.7rem

}



.hok-overview__post__meta__divider {

    margin: 0 .25em;

    background: 0 0

}



.hok-overview__loader__container {

    position: relative;

    width: 100%;

    height: 115px

}



.hok-overview__loader {

    position: absolute;

    width: 10px;

    height: 36px;

    top: 50%;

    left: 50%;

    margin: -18px 0 0 -5px

}



.hok-overview__loader i {

    position: absolute;

    left: 0;

    top: 0;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #c79086;

    opacity: 0;

    -webkit-animation: pulse-1 .75s infinite

}



.hok-overview__loader i:nth-child(2) {

    top: 13px;

    -webkit-animation-name: pulse-2;

    animation-name: pulse-2

}



.hok-overview__loader i:nth-child(3) {

    top: 26px;

    -webkit-animation-name: pulse-3;

    animation-name: pulse-3

}



.contact-newsletter--template,

.hok-overview__loader__container.hide,

.hok-overview__post--template {

    display: none

}



.contact-newsletter form {

    display: block

}



@-webkit-keyframes pulse-1 {

    0%,

    100% {

        opacity: 0

    }

    30%,

    70% {

        opacity: 1

    }

}



@-webkit-keyframes pulse-2 {

    0%,

    100%,

    20% {

        opacity: 0

    }

    50%,

    70% {

        opacity: 1

    }

}



@-webkit-keyframes pulse-3 {

    0%,

    100%,

    40% {

        opacity: 0

    }

    70% {

        opacity: 1

    }

}



body.hok_posts.show,

body.hok_posts.show #main,

body.hok_posts.show #main-body,

body.hok_posts.show .header-visual,

body.hok_posts.show .hok-post-section,

body.hok_posts.show .main-visual,

body.hok_posts.show article {

    height: 100%

}



.hok-post-section {

    background: #fff

}



.hok-post-section article:not(.figureless) .header {

    background: #000;

    width: 100%;

    height: 100%;

    position: relative;

    overflow: hidden

}



.hok-post-section article:not(.figureless) .header .inner {

    color: #fff;

    max-width: 660px;

    position: absolute;

    top: 50%;

    left: 50%;

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

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

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

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

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

    text-align: center

}



.hok-post-section article.figureless {

    margin-top: 12rem

}



.hok-post-section article.figureless .header .inner {

    max-width: 636px;

    max-width: 63.6rem;

    margin: 0 auto;

    text-align: left

}



.hok-post-section .header {

    margin-bottom: 5.4rem

}



.hok-post-section .header .cover {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);

    opacity: .8

}



.hok-post-section .header .figcaption {

    font-size: 13px;

    font-size: 1.3rem;

    padding: .5em 1.5em .5em .75em;

    position: absolute;

    right: 0;

    bottom: 0;

    color: #fff;

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);

    opacity: .5;

    background: #000;

    z-index: 1

}



.hok-post-section .header .inner h1 {

    font-size: 54px;

    font-size: 5.4rem;

    line-height: 60px;

    line-height: 6rem;

    font-weight: 400;

    letter-spacing: -1px;

}



.hok-post-section .header .inner .meta p {

    opacity: .7;

    font-size: 17px;

    font-size: 1.7rem;

    margin-top: 1.5rem

}



.hok-post-section .header .inner .meta p .divider {

    background: 0 0

}



.hok-post-section .header .inner h3 {

    margin-bottom: 1.5rem

}



.hok-post-section .figureless {

    margin-top: 5.2rem

}



.hok-post-section .article-content {

    position: relative;

    text-align: left

}



.hok-post-section .article-content .body,

.hok-post-section .article-content .excerpt,

.hok-post-section .article-content .header {

    max-width: 636px;

    margin: 0 auto

}



.hok-post-section .article-content .header {

    padding: 3.3rem 0 0

}



.hok-post-section .article-content .header h1 {

    margin-bottom: 1.4rem;

    font-size: 44px;

    font-size: 4.4rem;

    line-height: 50px;

    line-height: 5rem;

    font-weight: 700

}



.hok-post-section .article-content .header .meta p {

    font-size: 16px;

    font-size: 1.6rem;

    color: #aaa

}



.hok-post-section .article-content .header .meta p .divider {

    margin: 0 .25em;

    background: 0 0

}



.hok-post-section .article-content .excerpt {

    margin-bottom: 3.4rem

}



.hok-post-section .article-content .excerpt p {

    font-size: 24px;

    font-size: 2.4rem;

    color: #c79086;

    font-style: italic;

    line-height: 1.35

}



.hok-post-section .article-content .body {

    margin-bottom: 5rem

}



.hok-post-section .article-content .body h2 {

    font-size: 21px;

    font-size: 2.1rem;

    margin-bottom: 1rem;

    font-weight: 700;

    letter-spacing: 0;

    line-height: 1.6

}



.hok-post-section .article-content .body p {

    color: #333

}



.hok-post-section .article-content .body li,

.hok-post-section .article-content .body p {

    font-size: 21px;

    font-size: 2.1rem;

    margin-bottom: 1.6em;

    line-height: 1.6

}



.hok-post-section .article-content .body p code {

    font-size: 24px;

    font-size: 2.4rem;

    color: #151515

}



.hok-post-section .article-content .body img {

    max-width: 100%

}



.hok-post-section .article-content .body .caption {

    font-weight: 400;

    color: #666;

    font-size: 14px;

    font-size: 1.4rem;

    margin-top: -3rem

}



.hok-post-section .article-content .body ol {

    list-style: decimal;

    margin-left: 4.4rem

}



.hok-post-section .article-content .body ul {

    font-size: 21px;

    font-size: 2.1rem;

    margin-bottom: 1.6em

}



.hok-post-section .article-content .body ul li {

    padding-left: 4.7rem;

    margin-bottom: .75em;

    position: relative

}



.hok-post-section .article-content .body ul li:after {

    top: 14px;

    top: 1.4rem;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    display: block;

    content: '';

    width: 7px;

    height: 7px;

    background: #333;

    position: absolute;

    left: 31px

}



.hok-post-section .article-content .body blockquote {

    position: relative;

    max-width: 636px;

    max-width: 63.6rem;

    margin: 3.2rem auto

}



.hok-post-section .article-content .body blockquote p {

    position: relative;

    color: #333;

    font-weight: 600;

    border-left: 4px solid #d6d6d6;

    font-size: 21px;

    font-size: 2.1rem;

    line-height: 30px;

    line-height: 3rem;

    padding-left: 2rem;

    margin: 0 0 .4rem

}



.hok-post-section .article-content .body blockquote p:before {

    content: "";

    position: absolute;

    left: -4px;

    background: #fff;

    width: 4px;

    height: 7px;

    top: 0

}



.hok-post-section .article-content .body blockquote p:after {

    content: "";

    position: absolute;

    left: -4px;

    background: #fff;

    width: 4px;

    height: 8px;

    top: auto;

    bottom: 0

}



.hok-post-section .article-content .body blockquote p:last-child {

    border-left: 0;

    max-width: 636px;

    max-width: 63.6rem;

    font-size: 16px;

    font-size: 1.6rem;

    color: #999;

    text-align: right;

    font-weight: 400

}



.hok-post-section .article-content .share-meta {

    margin-bottom: 8rem

}



.hok-post-section .article-content .other_old {

    margin-bottom: 6rem;

    padding: 1.3rem 0 1.2rem

}



.hok-post-section .article-content .other_old .category {

    float: left;

    width: 50%

}



.hok-post-section .article-content .other_old .category a {

    -webkit-transition: border .15s linear;

    -moz-transition: border .15s linear;

    -o-transition: border .15s linear;

    transition: border .15s linear;

    border-bottom: 1px solid #fff

}



.hok-post-section .article-content .other_old .category a:hover {

    border-bottom: 1px solid #c79086

}



.hok-post-section .article-content .other_old .social {

    float: right;

    width: 50%;

    text-align: right

}



.hok-post-section .article-content .other_old .social [class^=icon-] {

    font-size: 40px;

    font-size: 4rem

}



.hok-post-section .article-content .other_old .social li,

.hok-post-section .article-content .other_old .social p,

.hok-post-section .article-content .other_old .social ul {

    display: inline-block

}



.hok-post-section .article-content .other_old .social li {

    width: 60px;

    width: 6rem;

    position: relative;

    height: 21px

}



.hok-post-section .article-content .other_old .social li a {

    -webkit-transition: color .15s linear;

    -moz-transition: color .15s linear;

    -o-transition: color .15s linear;

    transition: color .15s linear;

    width: 60px;

    width: 6rem;

    font-size: 22px;

    font-size: 2.2rem;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    display: block;

    text-align: center;

    color: #151515

}



.hok-post-section .article-content .other_old .social li a:hover {

    color: #c79086

}



.hok-post-section .article-content .author-bio {

    margin: 0 auto;

    width: 336px;

    text-align: center

}



.hok-post-section .article-content .author-bio img {

    margin: 0 auto 1.5rem;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    filter: grayscale(100%);

    display: block;

    overflow: hidden

}



.hok-post-section .article-content .author-bio p {

    font-size: 16px;

    font-size: 1.6rem

}



.hok-post-section .article-content .author-bio p span {

    display: block

}



.hok-post-section .article-content .author-bio p span.author-role {

    color: #aaa;

    font-style: italic

}



.hok-post-section .article-content .to-back {

    position: absolute;

    top: 40px;

    left: -160px

}



.hok-post-section .article-content .to-back a {

    display: block;

    width: 40px;

    height: 40px;

    color: #aaa

}



.hok-post-section .article-content .to-back a:hover {

    color: #c79086

}



.hok-related-post-section {

    border-top: 1px solid #dcdcdc;

    position: relative;

    text-align: left;

    background: #f5f5f5

}



.hok-related-post-section .previous-article {

    margin: 0 auto;

    max-width: 636px

}



.hok-related-post-section .previous-article a {

    display: inline-block;

    font-weight: 700;

    position: relative;

    color: #151515;

    -webkit-transition: color .15s linear;

    -moz-transition: color .15s linear;

    -o-transition: color .15s linear;

    transition: color .15s linear;

    padding: 3.6rem 0 .6rem;

    font-size: 24px;

    font-size: 2.4rem;

    line-height: 30px;

    line-height: 3rem

}



.hok-related-post-section .previous-article .image {

    float: left;

    width: 90px;

    width: 9rem;

    height: 90px;

    height: 9rem;

    margin: 3rem 0 3rem -13.3rem;

    -webkit-border-radius: 45px;

    -moz-border-radius: 45px;

    -ms-border-radius: 45px;

    -o-border-radius: 45px;

    border-radius: 45px;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    background-position: center center

}



.hok-related-post-section .previous-article p {

    color: #aaa;

    font-size: 17px;

    font-size: 1.7rem

}



.hok-related-post-section .to-back {

    font-size: 13px;

    font-size: 1.3rem;

    margin: 0 0 0 -477px;

    position: absolute;

    top: 50px;

    left: 50%

}



.hok-related-post-section .to-back a {

    -webkit-transition: color .15s linear;

    -moz-transition: color .15s linear;

    -o-transition: color .15s linear;

    transition: color .15s linear;

    display: block;

    width: 23px;

    height: 15px;

    color: #aaa

}



.hok-related-post-section .to-back a:hover {

    color: #c79086

}



@media screen and (max-width:960px) {

    .hok-post-section .main-visual figcaption,

    .hok-posts-section .posts-header {

        right: auto;

        bottom: auto;

        position: relative

    }

    .hok-related-post-section .previous-article a span,

    .hok-related-post-section .to-back {

        display: none

    }

    .hok-posts-section {

        padding: 9.4rem 0;

        margin: 0 20px

    }

    .hok-posts-section .posts-header {

        left: auto

    }

    .hok-posts-section .posts-list .post a {

        padding-right: 2rem

    }

    .hok-post-section .article-content {

        margin: 0 20px;

        max-width: 100%

    }

    .hok-post-section .article-content .other {

        margin-bottom: 6rem;

        padding: 1.3rem 0 1.2rem

    }

    .hok-post-section .article-content .other .category {

        float: left;

        width: 30%

    }

    .hok-post-section .article-content .other .category a {

        -webkit-transition: border .15s linear;

        -moz-transition: border .15s linear;

        -o-transition: border .15s linear;

        transition: border .15s linear;

        border-bottom: 1px solid #fff

    }

    .hok-post-section .article-content .other .category a:hover {

        border-bottom: 1px solid #c79086

    }

    .hok-post-section .article-content .other .social {

        float: right;

        width: 70%;

        text-align: right

    }

    .hok-post-section .article-content .to-back {

        padding: 2rem 0;

        position: relative;

        top: auto;

        left: auto

    }

    .hok-post-section .article-content .to-back a {

        margin: 0 auto

    }

    .hok-related-post-section .previous-article {

        margin: 0 20px;

        max-width: 100%

    }

    .hok-related-post-section .previous-article .image {

        margin-left: 0

    }

    .hok-related-post-section .previous-article .details {

        float: left;

        padding-left: 3rem;

        width: -moz-calc(100% - 90px);

        width: -o-calc(100% - 90px);

        width: -webkit-calc(100% - 90px);

        width: calc(100% - 90px)

    }

}



@media screen and (max-width:1024px) {

    .hok-post-section .figcaption {

        display: none

    }

}



@media screen and (max-width:690px) {

    .hok-post-section .header {

        padding: 0 2rem;

        margin-bottom: 3rem

    }

    .hok-post-section .header h1 {

        font-size: 35px!important;

        font-size: 3.5rem!important;

        line-height: 42px!important;

        line-height: 4.2rem!important

    }

    .hok-post-section .caption {

        margin-top: -2.2rem!important

    }

}



@media screen and (max-width:568px) {

    .hok-overview__post a {

        padding: 40px 0

    }

    .hok-overview__post__thumb {

        width: 234px;

        height: 234px;

        margin: 0 auto 3rem

    }

    .hok-overview__post__thumb img {

        width: 100%;

        height: 100%

    }

    .hok-overview__post__title {

        width: 90%;

        font-size: 26px;

        font-size: 2.6rem;

        line-height: 36px;

        line-height: 3.6rem;

        margin-bottom: 10px

    }

    .hok-overview__post__excerpt {

        font-size: 18px;

        font-size: 1.8rem;

        line-height: 28px;

        line-height: 2.8rem

    }

    .hok-overview__post__meta {

        font-size: 14px;

        font-size: 1.4rem

    }

    .contact-newsletter li {

        width: 50%

    }

    .hok-post-section article:not(.figureless) .header .inner {

        width: 90%

    }

    .hok-post-section .article-content .header h1 {

        font-size: 32px;

        font-size: 3.2rem;

        line-height: 38px;

        line-height: 3.8rem

    }

    .hok-post-section .article-content .excerpt p {

        font-size: 18px;

        font-size: 1.8rem

    }

    .hok-post-section .article-content .meta {

        margin: 0 auto 2.5rem

    }

    .hok-post-section .article-content .body h2 {

        font-size: 18px;

        font-size: 1.8rem

    }

    .hok-post-section .article-content .body li,

    .hok-post-section .article-content .body p {

        font-size: 16px;

        font-size: 1.6rem

    }

    .hok-post-section .article-content .body p code {

        font-size: 18px;

        font-size: 1.8rem

    }

    .hok-post-section .article-content .body ul {

        font-size: 16px;

        font-size: 1.6rem

    }

    .hok-post-section .article-content .body ul li:after {

        top: 10px;

        top: 1rem;

        width: 5px;

        height: 5px

    }

    .hok-post-section .article-content .body blockquote {

        margin-bottom: 4rem

    }

    .hok-post-section .article-content .body blockquote p {

        font-size: 16px;

        font-size: 1.6rem;

        line-height: 1.6

    }

    .hok-post-section .article-content .meta,

    .hok-post-section .article-content .site {

        font-size: 16px;

        font-size: 1.6rem;

        line-height: 25px;

        line-height: 2.5rem

    }

    .hok-post-section .article-content .meta ul li:last-child {

        display: none

    }

    .hok-post-section .article-content .other .category {

        font-size: 16px;

        font-size: 1.6rem;

        float: none;

        width: auto

    }

    .hok-post-section .article-content .other .social {

        float: none;

        width: auto;

        text-align: left

    }

    .hok-post-section .article-content .other .social p {

        margin-bottom: .6rem;

        font-size: 16px;

        font-size: 1.6rem

    }

    .hok-post-section .article-content .other .social li a {

        width: 30px;

        width: 3rem;

        font-size: 18px;

        font-size: 1.8rem;

        position: absolute;

        top: 6px;

        left: 0;

        right: 0

    }

    .hok-post-section .article-content .author-bio {

        width: auto

    }

    .hok-related-post-section .previous-article {

        padding: 20px 0;

        max-width: 100%

    }

    .hok-related-post-section .previous-article .image {

        float: none;

        margin: 0 auto 1rem

    }

    .hok-related-post-section .previous-article .details {

        width: 100%;

        text-align: center;

        padding-left: 0

    }

    .hok-related-post-section .previous-article .details a {

        padding: 0;

        font-size: 18px;

        font-size: 1.8rem;

        line-height: 1.25

    }

    .hok-related-post-section .previous-article .details p.meta {

        clear: both;

        font-size: 14px;

        font-size: 1.4rem;

        padding-top: .6rem

    }

}



.career__header,

body.careers,

body.careers #main,

body.careers #main-body {

    position: relative;

    height: 100%

}



.career__body p,

.career__body ul,

.career__meta {

    text-align: left

}



.career__header {

    width: 100%;

    min-height: 800px;

    overflow: hidden;

    background: #c79086

}



.career__header__title {

    position: absolute;

    opacity: 0;

    top: 50%;

    left: 50%;

    width: 100%;

    max-width: 656px;

    color: #fff;
    font-weight: 400;

    z-index: 1;

    text-indent: 15px;

    -webkit-transform: translate3d(-50%, -50%, 0);

    -moz-transform: translate3d(-50%, -50%, 0);

    -ms-transform: translate3d(-50%, -50%, 0);

    -o-transform: translate3d(-50%, -50%, 0);

    transform: translate3d(-50%, -50%, 0);

    font-size: 60px;

    font-size: 6rem;

    line-height: 70px;

    line-height: 7rem;

    -webkit-transition: opacity .2s cubic-bezier(.595, .01, .38, .99);

    -moz-transition: opacity .2s cubic-bezier(.595, .01, .38, .99);

    -o-transition: opacity .2s cubic-bezier(.595, .01, .38, .99);

    transition: opacity .2s cubic-bezier(.595, .01, .38, .99)

}



.career__header__title.show {

    opacity: 1

}



.career__header__title__animation {

    position: relative;

    z-index: 2

}



.career__header__animation__holder {

    position: relative

}



.typed-selection {

    position: absolute;

    top: 0;

    right: -6px;

    height: 100%;

    width: 0;

    background: #000;

    z-index: 1

}



.typed-selection.select {

    width: calc(100% + 10px);

    -webkit-transition: width .35s cubic-bezier(.595, .01, .38, .99);

    -moz-transition: width .35s cubic-bezier(.595, .01, .38, .99);

    -o-transition: width .35s cubic-bezier(.595, .01, .38, .99);

    transition: width .35s cubic-bezier(.595, .01, .38, .99)

}



.typed-selection.select--quick {

    width: calc(100% + 10px);

    -webkit-transition: width .15s cubic-bezier(.595, .01, .38, .99);

    -moz-transition: width .15s cubic-bezier(.595, .01, .38, .99);

    -o-transition: width .15s cubic-bezier(.595, .01, .38, .99);

    transition: width .15s cubic-bezier(.595, .01, .38, .99)

}



.typed-cursor {

    position: absolute;

    top: 10%;

    left: 100%;

    margin-left: 6px;

    width: 3px;

    height: 80%;

    background: #fff;

    opacity: 1;

    -webkit-animation: blink .7s infinite;

    animation: blink .7s infinite;

    z-index: 2

}



.typed-cursor.select {

    left: 0;

    margin-left: -6px;

    -webkit-transition: left .35s cubic-bezier(.595, .01, .38, .99);

    -moz-transition: left .35s cubic-bezier(.595, .01, .38, .99);

    -o-transition: left .35s cubic-bezier(.595, .01, .38, .99);

    transition: left .35s cubic-bezier(.595, .01, .38, .99)

}



.typed-cursor.select--quick {

    left: 0;

    margin-left: -6px;

    -webkit-transition: left .15s cubic-bezier(.595, .01, .38, .99);

    -moz-transition: left .15s cubic-bezier(.595, .01, .38, .99);

    -o-transition: left .15s cubic-bezier(.595, .01, .38, .99);

    transition: left .15s cubic-bezier(.595, .01, .38, .99)

}



@-webkit-keyframes blink {

    0%,

    100% {

        opacity: 1

    }

    50% {

        opacity: 0

    }

}



@keyframes blink {

    0%,

    100% {

        opacity: 1

    }

    50% {

        opacity: 0

    }

}



.career__svg {

    display: inline-block;

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 850px;

    height: 576px;

    fill: #000;

    opacity: 0;

    z-index: 0

}



.career__body,

.career__contact__form,

.career__culture,

.career__form__holder {

    position: relative;

    z-index: 2

}



.career__svg--header__holder {

    bottom: 0;

    left: 50%;

    opacity: 0;

    -webkit-transform: translate3d(-50%, 54%, 0);

    -moz-transform: translate3d(-50%, 54%, 0);

    -ms-transform: translate3d(-50%, 54%, 0);

    -o-transform: translate3d(-50%, 54%, 0);

    transform: translate3d(-50%, 54%, 0);

    -webkit-transition: all 1.75s cubic-bezier(.595, .01, .38, .99);

    -moz-transition: all 1.75s cubic-bezier(.595, .01, .38, .99);

    -o-transition: all 1.75s cubic-bezier(.595, .01, .38, .99);

    transition: all 1.75s cubic-bezier(.595, .01, .38, .99)

}



.career__svg--header__holder.show {

    opacity: .3;

    -webkit-transform: translate3d(-50%, 50%, 0);

    -moz-transform: translate3d(-50%, 50%, 0);

    -ms-transform: translate3d(-50%, 50%, 0);

    -o-transform: translate3d(-50%, 50%, 0);

    transform: translate3d(-50%, 50%, 0)

}



.career__svg--header__holder svg {

    position: relative;

    width: 100%;

    height: 100%

}



@-webkit-keyframes horse {

    0%,

    100% {

        -webkit-transform: translate3d(0, 0, 0) rotate(0);

        -moz-transform: translate3d(0, 0, 0) rotate(0);

        -ms-transform: translate3d(0, 0, 0) rotate(0);

        -o-transform: translate3d(0, 0, 0) rotate(0);

        transform: translate3d(0, 0, 0) rotate(0)

    }

    33% {

        -webkit-transform: translate3d(0, -16px, 0) rotate(-1deg);

        -moz-transform: translate3d(0, -16px, 0) rotate(-1deg);

        -ms-transform: translate3d(0, -16px, 0) rotate(-1deg);

        -o-transform: translate3d(0, -16px, 0) rotate(-1deg);

        transform: translate3d(0, -16px, 0) rotate(-1deg)

    }

    66% {

        -webkit-transform: translate3d(2px, -12px, 0) rotate(1deg);

        -moz-transform: translate3d(2px, -12px, 0) rotate(1deg);

        -ms-transform: translate3d(2px, -12px, 0) rotate(1deg);

        -o-transform: translate3d(2px, -12px, 0) rotate(1deg);

        transform: translate3d(2px, -12px, 0) rotate(1deg)

    }

}



@keyframes horse {

    0%,

    100% {

        -webkit-transform: translate3d(0, 0, 0) rotate(0);

        -moz-transform: translate3d(0, 0, 0) rotate(0);

        -ms-transform: translate3d(0, 0, 0) rotate(0);

        -o-transform: translate3d(0, 0, 0) rotate(0);

        transform: translate3d(0, 0, 0) rotate(0)

    }

    33% {

        -webkit-transform: translate3d(0, -16px, 0) rotate(-1deg);

        -moz-transform: translate3d(0, -16px, 0) rotate(-1deg);

        -ms-transform: translate3d(0, -16px, 0) rotate(-1deg);

        -o-transform: translate3d(0, -16px, 0) rotate(-1deg);

        transform: translate3d(0, -16px, 0) rotate(-1deg)

    }

    66% {

        -webkit-transform: translate3d(2px, -12px, 0) rotate(1deg);

        -moz-transform: translate3d(2px, -12px, 0) rotate(1deg);

        -ms-transform: translate3d(2px, -12px, 0) rotate(1deg);

        -o-transform: translate3d(2px, -12px, 0) rotate(1deg);

        transform: translate3d(2px, -12px, 0) rotate(1deg)

    }

}



.career__svg--footer {

    top: 0;

    left: 50%;

    opacity: .16;

    -webkit-transform: translate3d(-50%, -50%, 0);

    -moz-transform: translate3d(-50%, -50%, 0);

    -ms-transform: translate3d(-50%, -50%, 0);

    -o-transform: translate3d(-50%, -50%, 0);

    transform: translate3d(-50%, -50%, 0)

}



.career__body {

    width: 100%;

    max-width: 636px;

    margin: 0 auto

}



.career__body--copy {

    padding-top: 6.2rem

}



.career__body--culture {

    margin-top: -38px;

    overflow: hidden

}



.career__body h3,

.career__body p,

.career__list__holder ul {

    width: 100%;

    margin-bottom: 5.6rem

}



.career__body #company-intro-case .formulation-container {

    min-height: 220px;

    min-height: 22rem

}



.career__body__markdown h3:first-child+p {

    margin-top: -10px;

    font-size: 26px;

    font-size: 2.6rem;

    line-height: 32px;

    line-height: 3.2rem

}



#company-intro-case .content {

    padding-top: 2.4rem;

    padding-bottom: 2.4rem

}



.career__list__holder ul {

    margin-left: -20px;

    margin-right: -20px

}



.career__list__holder h3 {

    display: block;

    width: 100%;

    padding: 20px;

    margin: 0 -20px;

    color: #c79086;

    border-bottom: 1px solid #e0e0e0;

    letter-spacing: 4px;

    font-weight: 800;

    text-transform: uppercase;

    text-align: left;

    font-size: 11px;

    font-size: 1.1rem

}



.career__list__holder li {

    display: inline-block;

    width: 100%;

    padding: 10px 20px 9px;

    color: #666;

    border-bottom: 1px solid #e0e0e0;

    font-size: 17px;

    font-size: 1.7rem;

    line-height: 23px;

    line-height: 2.3rem

}



.career__list__holder li:last-child {

    border-bottom: 0

}



.career__meta {

    color: #c79086;

    font-size: 24px;

    font-style: italic;

    line-height: 1.35

}



.career__culture {

    margin-top: 195px;

    padding-bottom: 80px;

    color: #fff;

    background-color: #272727;

    box-shadow: 0 11px 0 rgba(0, 0, 0, .21)

}



.career__culture__carousel {

    width: 100%;

    display: inline-block;

    margin-top: -120px

}



.career__culture__carousel .carousel {

    margin-top: 0

}



.career__culture .carousel .details .caption,

.career__culture .carousel .details .index {

    color: #fff

}



.career__culture .carousel .details .link {

    display: none

}



.career__box {

    width: 100%;

    max-width: 686px;

    margin: 0 auto;

    padding: 40px;

    border: 1px solid #464646;

    border-radius: 5px;

    font-size: 0

}



.career__box__avatar {

    display: inline-block;

    width: 40%;

    margin: 4px 6% 0 0;

    text-align: center;

    vertical-align: top

}



.career__box__avatar__image {

    display: inline-block;

    width: 153px;

    height: 153px;

    border-radius: 100%;

    border: 2px solid #fff;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover

}



.career__box__avatar__name {

    display: inline-block;

    margin-top: 32px;

    width: 100%;

    color: #616161;

    font-weight: 500;

    font-size: 16px;

    font-size: 1.6rem;

    line-height: 25px;

    line-height: 2.5rem

}



.career__box__avatar__name span {

    display: inline-block;

    width: 100%;

    color: #fff

}



.career__box__interview {

    display: inline-block;

    width: 54%;

    text-align: left

}



.career__box__interview h4,

.career__box__interview p {

    font-size: 16px;

    font-size: 1.6rem;

    line-height: 25px;

    line-height: 2.5rem

}



.career__box__interview h4 {

    margin-top: 23px;

    display: inline-block;

    width: 100%;

    font-weight: 600

}



.career__box__interview h4:first-child {

    margin-top: 0

}



.career__contact {

    position: relative;

    padding: 144px 0 165px;

    background: #c79086;

    color: #fff;

    overflow: hidden

}



.career__contact p {

    margin: 16px auto 0;

    max-width: 540px;

    width: 100%;

    text-align: center;

    font-weight: 500;



    font-size: 16px;

    font-size: 1.6rem;

    line-height: 25px;

    line-height: 2.5rem

}



.career__contact__title {

    font-size: 41px;

    font-size: 4.1rem

}



.career__contact__form {

    width: 86%;

    max-width: 498px;

    margin: 26px auto 0

}



.career__content__loader {

    position: absolute;

    right: 6px;

    top: 0;

    width: 119px;

    height: 52px;

    border-radius: 4px;

    background: url(../assets/loader.gif) center no-repeat #1f1f1f;

    background-size: 25px;

    display: none

}



.career__contact__form.loading .career__content__loader {

    display: block

}



.career__contact__input {

    width: 367px;

    height: 52px;

    padding: 0 15px;

    border: 1px solid #D6D6D6;

    border-radius: 4px;

    color: #000;

    float: left;

    outline: 0;

    font-size: 17px;

    font-size: 1.7rem

}



.career__contact__input:focus,

.career__contact__input:hover {

    border: 1px solid #5E4C7A

}



.career__contact__input.error {

    background: #f8d1d1

}



.career__contact__input::-webkit-input-placeholder {

    color: #A4A4A4

}



.career__contact__input::-moz-placeholder {

    color: #A4A4A4

}



.career__contact__input:-ms-input-placeholder {

    color: #A4A4A4

}



.career__contact__back,

.career__contact__submit {

    display: inline-block;

    padding: 12px 0;

    width: 119px;

    height: 52px;

    background: #1F1F1F;

    color: #fff;

    border: none;

    border-radius: 4px;

    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;

    font-size: 11px;

    letter-spacing: 4px;

    outline: 0

}



.career__contact__submit:active,

.career__contact__submit:hover {

    background: #000

}



.career__contact__back:active,

.career__contact__submit:active {

    -webkit-transform: translateY(1px);

    -moz-transform: translateY(1px);

    -ms-transform: translateY(1px);

    -o-transform: translateY(1px);

    transform: translateY(1px)

}



.career__contact__back {

    margin-top: 30px;

    background: 0 0;

    border: 1px solid #fff;

    line-height: 28px;

    cursor: pointer

}



.career__contact__back:active,

.career__contact__back:hover {

    background: rgba(255, 255, 255, .05)

}



.career__contact__message {

    position: relative;

    width: 86%;

    max-width: 498px;

    opacity: 0;

    z-index: 1;

    margin: 8px auto 0;

    padding: 0 14px;

    text-align: left;

    font-size: 12px;

    font-size: 1.2rem;

    -webkit-transition: opacity .12s cubic-bezier(.595, .01, .38, .99);

    -moz-transition: opacity .12s cubic-bezier(.595, .01, .38, .99);

    -o-transition: opacity .12s cubic-bezier(.595, .01, .38, .99);

    transition: opacity .12s cubic-bezier(.595, .01, .38, .99)

}



#client-page .header h1,

.main-slide h2,

.main-slide.case,

.main-slide.hok {

    text-align: center

}



.career__form__holder .career__contact__title,

.career__form__holder p {

    -webkit-transition: -webkit-transform .2s cubic-bezier(.595, .01, .38, .99), opacity .2s cubic-bezier(.595, .01, .38, .99)

}



.career__contact__message.show {

    opacity: 1

}



.career__form__holder.hide .career__contact__form,

.career__form__holder.hide .career__contact__title,

.career__form__holder.hide p {

    opacity: 0;

    -webkit-transform: translateX(100px);

    -moz-transform: translateX(100px);

    -ms-transform: translateX(100px);

    -o-transform: translateX(100px);

    transform: translateX(100px)

}



.career__form__holder.unhide .career__contact__form,

.career__form__holder.unhide .career__contact__title,

.career__form__holder.unhide p {

    opacity: 1;

    -webkit-transform: translateX(0);

    -moz-transform: translateX(0);

    -ms-transform: translateX(0);

    -o-transform: translateX(0);

    transform: translateX(0)

}



.career__form__holder .career__contact__title {

    -webkit-transition-delay: 0s, 0s;

    -moz-transition: -moz-transform .2s cubic-bezier(.595, .01, .38, .99) 0s, opacity .2s cubic-bezier(.595, .01, .38, .99) 0s;

    -o-transition: -o-transform .2s cubic-bezier(.595, .01, .38, .99) 0s, opacity .2s cubic-bezier(.595, .01, .38, .99) 0s;

    transition: transform .2s cubic-bezier(.595, .01, .38, .99) 0s, opacity .2s cubic-bezier(.595, .01, .38, .99) 0s

}



.career__form__holder p {

    -webkit-transition-delay: .1s, .1s;

    -moz-transition: -moz-transform .2s cubic-bezier(.595, .01, .38, .99) .1s, opacity .2s cubic-bezier(.595, .01, .38, .99) .1s;

    -o-transition: -o-transform .2s cubic-bezier(.595, .01, .38, .99) .1s, opacity .2s cubic-bezier(.595, .01, .38, .99) .1s;

    transition: transform .2s cubic-bezier(.595, .01, .38, .99) .1s, opacity .2s cubic-bezier(.595, .01, .38, .99) .1s

}



.career__form__holder .career__contact__form {

    -webkit-transition: -webkit-transform .2s cubic-bezier(.595, .01, .38, .99), opacity .2s cubic-bezier(.595, .01, .38, .99);

    -webkit-transition-delay: .2s, .2s;

    -moz-transition: -moz-transform .2s cubic-bezier(.595, .01, .38, .99) .2s, opacity .2s cubic-bezier(.595, .01, .38, .99) .2s;

    -o-transition: -o-transform .2s cubic-bezier(.595, .01, .38, .99) .2s, opacity .2s cubic-bezier(.595, .01, .38, .99) .2s;

    transition: transform .2s cubic-bezier(.595, .01, .38, .99) .2s, opacity .2s cubic-bezier(.595, .01, .38, .99) .2s

}



.career__form__holder.unhide .career__contact__title {

    -webkit-transition: -webkit-transform .28s cubic-bezier(.595, .01, .38, .99), opacity .28s cubic-bezier(.595, .01, .38, .99);

    -webkit-transition-delay: .15s, .15s;

    -moz-transition: -moz-transform .28s cubic-bezier(.595, .01, .38, .99) .15s, opacity .28s cubic-bezier(.595, .01, .38, .99) .15s;

    -o-transition: -o-transform .28s cubic-bezier(.595, .01, .38, .99) .15s, opacity .28s cubic-bezier(.595, .01, .38, .99) .15s;

    transition: transform .28s cubic-bezier(.595, .01, .38, .99) .15s, opacity .28s cubic-bezier(.595, .01, .38, .99) .15s

}



.career__form__holder.unhide .career__contact__form,

.career__form__holder.unhide p {

    -webkit-transition: -webkit-transform .28s cubic-bezier(.595, .01, .38, .99), opacity .28s cubic-bezier(.595, .01, .38, .99)

}



.career__form__holder.unhide p {

    -webkit-transition-delay: .25s, .25s;

    -moz-transition: -moz-transform .28s cubic-bezier(.595, .01, .38, .99) .25s, opacity .28s cubic-bezier(.595, .01, .38, .99) .25s;

    -o-transition: -o-transform .28s cubic-bezier(.595, .01, .38, .99) .25s, opacity .28s cubic-bezier(.595, .01, .38, .99) .25s;

    transition: transform .28s cubic-bezier(.595, .01, .38, .99) .25s, opacity .28s cubic-bezier(.595, .01, .38, .99) .25s

}



.career__form__holder.unhide .career__contact__form {

    -webkit-transition-delay: .35s, .35s;

    -moz-transition: -moz-transform .28s cubic-bezier(.595, .01, .38, .99) .35s, opacity .28s cubic-bezier(.595, .01, .38, .99) .35s;

    -o-transition: -o-transform .28s cubic-bezier(.595, .01, .38, .99) .35s, opacity .28s cubic-bezier(.595, .01, .38, .99) .35s;

    transition: transform .28s cubic-bezier(.595, .01, .38, .99) .35s, opacity .28s cubic-bezier(.595, .01, .38, .99) .35s

}



.career__thanks__holder .career__contact__title,

.career__thanks__holder p {

    -webkit-transition: -webkit-transform .28s cubic-bezier(.595, .01, .38, .99), opacity .28s cubic-bezier(.595, .01, .38, .99)

}



.career__thanks__holder {

    position: absolute;

    top: 0;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

    z-index: 1

}



.career__thanks__holder.show .career__contact__back,

.career__thanks__holder.show .career__contact__title,

.career__thanks__holder.show p {

    opacity: 1;

    -webkit-transform: translateX(0);

    -moz-transform: translateX(0);

    -ms-transform: translateX(0);

    -o-transform: translateX(0);

    transform: translateX(0)

}



.career__thanks__holder .career__contact__back,

.career__thanks__holder .career__contact__title,

.career__thanks__holder p,

.career__thanks__holder.unshow .career__contact__back,

.career__thanks__holder.unshow .career__contact__title,

.career__thanks__holder.unshow p {

    opacity: 0;

    -webkit-transform: translateX(-100px);

    -moz-transform: translateX(-100px);

    -ms-transform: translateX(-100px);

    -o-transform: translateX(-100px);

    transform: translateX(-100px)

}



.career__thanks__holder .career__contact__title {

    -webkit-transition-delay: .15s, .15s;

    -moz-transition: -moz-transform .28s cubic-bezier(.595, .01, .38, .99) .15s, opacity .28s cubic-bezier(.595, .01, .38, .99) .15s;

    -o-transition: -o-transform .28s cubic-bezier(.595, .01, .38, .99) .15s, opacity .28s cubic-bezier(.595, .01, .38, .99) .15s;

    transition: transform .28s cubic-bezier(.595, .01, .38, .99) .15s, opacity .28s cubic-bezier(.595, .01, .38, .99) .15s

}



.career__thanks__holder p {

    -webkit-transition-delay: .25s, .25s;

    -moz-transition: -moz-transform .28s cubic-bezier(.595, .01, .38, .99) .25s, opacity .28s cubic-bezier(.595, .01, .38, .99) .25s;

    -o-transition: -o-transform .28s cubic-bezier(.595, .01, .38, .99) .25s, opacity .28s cubic-bezier(.595, .01, .38, .99) .25s;

    transition: transform .28s cubic-bezier(.595, .01, .38, .99) .25s, opacity .28s cubic-bezier(.595, .01, .38, .99) .25s

}



.career__thanks__holder .career__contact__back {

    -webkit-transition: -webkit-transform .28s cubic-bezier(.595, .01, .38, .99), opacity .28s cubic-bezier(.595, .01, .38, .99);

    -webkit-transition-delay: .35s, .35s;

    -moz-transition: -moz-transform .28s cubic-bezier(.595, .01, .38, .99) .35s, opacity .28s cubic-bezier(.595, .01, .38, .99) .35s;

    -o-transition: -o-transform .28s cubic-bezier(.595, .01, .38, .99) .35s, opacity .28s cubic-bezier(.595, .01, .38, .99) .35s;

    transition: transform .28s cubic-bezier(.595, .01, .38, .99) .35s, opacity .28s cubic-bezier(.595, .01, .38, .99) .35s

}



.career__thanks__holder.unshow .career__contact__title,

.career__thanks__holder.unshow p {

    -webkit-transition: -webkit-transform .2s cubic-bezier(.595, .01, .38, .99), opacity .2s cubic-bezier(.595, .01, .38, .99)

}



.career__thanks__holder.unshow .career__contact__title {

    -webkit-transition-delay: 0s, 0s;

    -moz-transition: -moz-transform .2s cubic-bezier(.595, .01, .38, .99) 0s, opacity .2s cubic-bezier(.595, .01, .38, .99) 0s;

    -o-transition: -o-transform .2s cubic-bezier(.595, .01, .38, .99) 0s, opacity .2s cubic-bezier(.595, .01, .38, .99) 0s;

    transition: transform .2s cubic-bezier(.595, .01, .38, .99) 0s, opacity .2s cubic-bezier(.595, .01, .38, .99) 0s

}



.career__thanks__holder.unshow p {

    -webkit-transition-delay: .1s, .1s;

    -moz-transition: -moz-transform .2s cubic-bezier(.595, .01, .38, .99) .1s, opacity .2s cubic-bezier(.595, .01, .38, .99) .1s;

    -o-transition: -o-transform .2s cubic-bezier(.595, .01, .38, .99) .1s, opacity .2s cubic-bezier(.595, .01, .38, .99) .1s;

    transition: transform .2s cubic-bezier(.595, .01, .38, .99) .1s, opacity .2s cubic-bezier(.595, .01, .38, .99) .1s

}



.career__thanks__holder.unshow .career__contact__back {

    -webkit-transition: -webkit-transform .2s cubic-bezier(.595, .01, .38, .99), opacity .2s cubic-bezier(.595, .01, .38, .99);

    -webkit-transition-delay: .2s, .2s;

    -moz-transition: -moz-transform .2s cubic-bezier(.595, .01, .38, .99) .2s, opacity .2s cubic-bezier(.595, .01, .38, .99) .2s;

    -o-transition: -o-transform .2s cubic-bezier(.595, .01, .38, .99) .2s, opacity .2s cubic-bezier(.595, .01, .38, .99) .2s;

    transition: transform .2s cubic-bezier(.595, .01, .38, .99) .2s, opacity .2s cubic-bezier(.595, .01, .38, .99) .2s

}



.career__thanks__url {

    display: inline-block;

    width: 100%;

    font-weight: 700

}



@media screen and (max-width:676px) {

    .career__header {

        height: auto;

        min-height: 0;

        padding: 140px 0

    }

    .career__header__title {

        position: relative;

        padding: 0 11.6875%;

        top: 0;

        left: 0;

        font-size: 40px;

        line-height: 50px;

        -webkit-transform: translate3d(0, 0, 0);

        -moz-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        -o-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

    .career__svg {

        width: 96%;

        max-width: 400px;

        height: 300px

    }

    .career__body {

        padding: 0 4.6875%

    }

    .career__body--copy {

        padding-top: 4.7rem

    }

    .career__body__markdown h3:first-child+p,

    .career__meta {

        margin-top: 0;

        font-size: 20px;

        font-size: 2rem;

        line-height: 27px;

        line-height: 2.7rem

    }

    .career__body h3 {

        font-size: 11px;

        font-size: 1.1rem

    }

    .career__body h3,

    .career__body p,

    .career__list__holder ul {

        margin-bottom: 3.6rem

    }

    .career__body div#company-intro-case {

        margin-top: 48px

    }

    .career__body #company-intro-case .formulation-container {

        min-height: 0

    }

    .career__list__holder ul {

        margin-left: -2.34375%;

        margin-right: -2.34375%

    }

    .career__list__holder li {

        padding-left: 2.34375%;

        padding-right: 2.34375%;

        font-size: 13px;

        font-size: 1.3rem;

        line-height: 18px;

        line-height: 1.8rem

    }

    .career__list__holder h3 {

        margin: 0 -2.34375%;

        padding: 10px 2.34375%

    }

    .career__culture {

        margin-top: 165px;

        padding-bottom: 50px

    }

    .career__culture .carousel .details {

        min-height: 100px

    }

    .career__box {

        position: relative;

        margin-top: 38px;

        padding: 128px 4.6875% 36px;

        width: 90.625%

    }

    .career__box__avatar {

        position: absolute;

        width: 100%;

        top: -39px;

        left: 0

    }

    .career__box__avatar__image {

        width: 76px;

        height: 76px

    }

    .career__box__avatar__name {

        margin-top: 16px

    }

    .career__box__interview {

        width: 100%

    }

    .career__box__avatar__name,

    .career__box__interview p {

        font-size: 13px;

        font-size: 1.3rem;

        line-height: 23px;

        line-height: 2.3rem

    }

    .career__svg--footer {

        opacity: .3

    }

    .career__contact {

        padding: 94px 0

    }

    .career__contact__title {

        font-size: 28px;

        font-size: 2.8rem;

        line-height: 31px;

        line-height: 3.1rem

    }

    .career__contact__input,

    .career__contact__submit {

        width: 100%;

        margin-bottom: 8px

    }

    .career__contact__back {

        margin-top: 0

    }

    .career__content__loader {

        right: 0;

        top: 60px;

        width: 100%

    }

    #company-intro-case .content {

        padding: 1.5rem 0 0

    }

    .typed-cursor {

        top: 4px;

        margin-left: 3px

    }

    .typed-cursor.select,

    .typed-cursor.select--quick {

        margin-left: -4px

    }

}



.scrolled header h1,

.scrolled header h2,

nav.active {

    opacity: 0

}



@media screen and (max-width:460px) {

    .typed-cursor {

        top: 2px;

        width: 2px

    }

    .career__header__title {

        font-size: 23px;

        font-size: 2.3rem;

        line-height: 36px;

        line-height: 3.6rem;

        padding: 0 8.25%

    }

}



nav #nav-footer {

    background: #fff;

    -webkit-box-shadow: inset 0 -5px 0 -2.5px #e4e4e4;

    -moz-box-shadow: inset 0 -5px 0 -2.5px #e4e4e4;

    box-shadow: inset 0 -5px 0 -2.5px #e4e4e4;

    color: #151515;

    position: relative;

    height: 105px;

    height: 10.5rem

}



nav #nav-footer .center {

    position: absolute;

    top: 50%;

    left: 50%;

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

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

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

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

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

}



nav #nav-footer .center ul {

    margin-left: 1.1rem

}



nav #nav-footer .center li {

    float: left;

    margin-right: 5rem

}



nav #nav-footer .center li:last-child {

    margin-right: 0

}



nav #nav-footer .center a {

    color: #151515

}



nav #nav-footer .center a:hover {

    color: #c79086

}



nav #nav-header {

    background: #fff;

    -webkit-box-shadow: inset 0 -1px 0 .5px #e4e4e4;

    -moz-box-shadow: inset 0 -1px 0 .5px #e4e4e4;

    box-shadow: inset 0 -1px 0 .5px #e4e4e4;

    color: #aaa;

    position: relative;

    height: 70px;

    height: 7rem

}



nav #nav-header #nav-header-wrapper {

    position: relative;

    max-width: 960px;

    height: 100%;

    margin: 0 auto

}



nav #nav-header .left {

    position: absolute;

    left: 0;

    top: 50%;

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

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

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

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

    transform: translate(0, -50%);

    font-size: 17px;

    font-size: 1.7rem;

    font-weight: 200

}



.main-slide .bg video,

nav #nav-header .center,

nav #nav-header .center-map {

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

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

}



nav #nav-header .left .icon-back {

    display: none;

    color: #e4e4e4

}



nav #nav-header .center li a.home,

nav #nav-header .center-map li a.home,

nav #nav-header .left .icon-back:hover {

    color: #151515

}



nav #nav-header .left .title {

    font-weight: 400

}



@media (max-width:1024px) {

    nav #nav-footer,

    nav #nav-header .left span {

        display: none

    }

    nav #nav-header .left {

        left: 13px;

        left: 1.3rem

    }

    nav #nav-header .left .mobile {

        display: block;

        font-size: 12px;

        font-size: 1.2rem

    }

}



nav #nav-header .center,

nav #nav-header .center-map {

    position: absolute;

    top: 50%;

    left: 50%;

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

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

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

}



header,

nav.animate-in {

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0)

}



nav #nav-header .center li,

nav #nav-header .center-map li {

    float: left;

    margin-right: 5rem

}



@media (max-width:1024px) {

    nav #nav-header .center li,

    nav #nav-header .center-map li {

        margin-right: 2.2rem

    }

}



nav #nav-header .center li a.home:hover,

nav #nav-header .center-map li a.home:hover {

    color: #c79086

}



nav #nav-header .center-map a,

nav #nav-header .center-map a:hover {

    background: #fff;

    color: #151515

}



nav #nav-header .center li:last-child,

nav #nav-header .center-map li:last-child {

    margin-right: 0

}



.pages.home nav #nav-header .center a.home,

.pages.home nav #nav-header .center-map a.home,

nav #nav-header .center-map,

nav .pages.home #nav-header .center a.home,

nav .pages.home #nav-header .center-map a.home {

    display: none

}



nav #nav-header .center-map ul {

    margin-left: 0

}



nav #nav-header .center-map li {

    margin-right: .8rem

}



nav #nav-header .center-map a {

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -ms-border-radius: 3px;

    -o-border-radius: 3px;

    border-radius: 3px;

    padding: .6rem .6rem .5rem .9rem

}



#main-slider ul.dots li:before,

.scrolled header #menu-toggler-container:after {

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px

}



nav #nav-header .center-map a.active {

    text-decoration: none;

    background: #c79086;

    color: #fff

}



nav .map-open#nav-header .center-map {

    display: block

}



nav .map-open#nav-header .center {

    display: none

}



nav .map-open#nav-header .icon-back {

    display: block

}



nav #nav-header .right {

    position: absolute;

    top: 13px;

    top: 1.3rem;

    right: -8px;

    right: -.8rem

}



@media (max-width:960px) {

    nav #nav-header .right {

        right: 21px;

        right: 2.1rem

    }

}



nav #nav-header .right a {

    color: #e4e4e4

}



nav #nav-header .right a:hover {

    color: #151515

}



header {

    transform: translate3d(0, 0, 0);

    position: fixed;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 10;

}



header h1,

header h2 {

    display: inline;

    color: #fff;

    font-size: 17px;

    font-size: 1.7rem;

    -webkit-transition: opacity 70ms ease-out;

    -moz-transition: opacity 70ms ease-out;

    -o-transition: opacity 70ms ease-out;

    transition: opacity 70ms ease-out;

    top: 6px;

    top: .6rem;

    position: relative

}



header h1 {

    font-weight: 100

}



.home header h1,

header h2 {

    font-weight: 400

}



header h1 span {

    margin-left: 0 .2rem

}




header .wrapper {

    max-width: 960px;

    margin: 21px auto 0;

    position: relative

}



header #menu-toggler-container {

    position: absolute;

    cursor: pointer;

    top: -8px;

    top: -.8rem;

    right: -8px;

    right: -.8rem

}



.blog header a,

.blog header a:visited,

.blog header h1,

.blog header h2,

.company header a,

.company header a:visited,

.company header h1,

.company header h2,

.dark header a,

.dark header a:visited,

.dark header h1,

.dark header h2,

.hok_posts.index header a,

.hok_posts.index header a:visited,

.hok_posts.index header h1,

.hok_posts.index header h2,

.work header a,

.work header a:visited,

.work header h1,

.work header h2,

header.dark a,

header.dark a:visited,

header.dark h1,

header.dark h2 {

    color: #151515

}



.scrolled header #menu-toggler-container a {

    color: #fff

}



.scrolled header #menu-toggler-container:after {

    width: 39px;

    width: 3.9rem;

    height: 31px;

    height: 3.1rem;

    top: 5px;

    top: .5rem;

    left: 1px;

    left: .1rem;

    border-radius: 4px;

    content: '';

    display: block;

    position: absolute;

    z-index: -1

}



@media (max-width:980px) {

    header .wrapper {

        padding: 0 21px

    }

    .scrolled header #menu-toggler-container,

    header #menu-toggler-container {

        right: 21px;

        right: 2.1rem

    }

}



@media (min-width:1440px) {

    body.work header .wrapper {

        max-width: 1386px

    }

}



nav #nav-items {

    display: none;

    width: 100%;

    position: relative;

    overflow: hidden

}



nav .active#nav-items {

    display: block;

		background:#fff;

}



nav #nav-mobile {

    height: 42px;

    height: 4.2rem;

    display: none;

    -webkit-box-shadow: inset 0 -5px 0 -2.5px #e4e4e4;

    -moz-box-shadow: inset 0 -5px 0 -2.5px #e4e4e4;

    box-shadow: inset 0 -5px 0 -2.5px #e4e4e4;

    margin-bottom: 100px;

    width: 100%;

    overflow-x: hidden

}



nav #nav-mobile #nav-mobile-wrapper {

    height: 42px;

    height: 4.2rem;

    width: 101%

}



@media (max-width:1024px) {

    nav #nav-mobile {

        display: block

    }

}



nav #nav-mobile a {

    width: 50%

}



body.home nav #nav-mobile a,

nav body.home #nav-mobile a {

    height: 100%

}



nav #nav-mobile a:nth-child(1) {

    -webkit-box-shadow: inset -3px -5px 0 -2.5px #e4e4e4;

    -moz-box-shadow: inset -3px -5px 0 -2.5px #e4e4e4;

    box-shadow: inset -3px -5px 0 -2.5px #e4e4e4

}



nav #nav-mobile a:nth-child(2) {

    -webkit-box-shadow: inset -3px -5px 0 -2.5px #e4e4e4;

    -moz-box-shadow: inset -3px -5px 0 -2.5px #e4e4e4;

    box-shadow: inset -3px -5px 0 -2.5px #e4e4e4;

    display: none

}



nav #nav-mobile a:nth-child(3) {

    -webkit-box-shadow: inset 0 -5px 0 -2.5px #e4e4e4;

    -moz-box-shadow: inset 0 -5px 0 -2.5px #e4e4e4;

    box-shadow: inset 0 -5px 0 -2.5px #e4e4e4

}



nav #nav-mobile a span {

    font-size: 12px;

    font-size: 1.2rem;

    letter-spacing: 0;

    margin-top: -2px

}



nav #nav-mobile a span span {

    position: relative;

    left: auto

}



@media (max-width:640px) {

    nav #nav-mobile a {

        width: 33%

    }

    nav #nav-mobile a:nth-child(2) {

        display: block

    }

    nav #nav-mobile a span span {

        display: none

    }

}



nav #nav-mobile a.map i {

    margin-right: .3rem

}



nav #nav-mobile a.map span span {

    top: -12px;

    top: -1.2rem

}



nav #nav-mobile a.call {

    width: 34%

}



nav #nav-mobile a.call i {

    margin-right: .3rem

}



nav #nav-mobile a.call span span {

    top: -12px;

    top: -1.2rem

}



nav #nav-mobile a.email i {

    margin-right: .3rem

}



nav #nav-mobile a.email span span {

    top: -12px;

    top: -1.2rem

}



nav #nav-mobile a.hide,

nav #nav-mobile a.maps-open {

    display: none;

    color: #9d9d9d

}



nav .map-open#nav-mobile a {

    display: none

}



nav #nav-map #nav-map-label li.active,

nav #nav-newsletter,

nav .active#nav-map,

nav .map-open#nav-mobile a.hide,

nav .map-open#nav-mobile a.maps-open,

nav.active {

    display: block

}



nav .map-open#nav-mobile a.map {

    -webkit-box-shadow: inset -1px -1px 0 .5px #e4e4e4;

    -moz-box-shadow: inset -1px -1px 0 .5px #e4e4e4;

    box-shadow: inset -1px -1px 0 .5px #e4e4e4

}



nav .map-open#nav-mobile {

    box-shadow: none;

    margin-bottom: 0

}



nav #nav-map {

    display: none;

    background: #151515;

    position: relative;

    height: -moz-calc(100% - 85px);

    height: -o-calc(100% - 85px);

    height: -webkit-calc(100% - 85px);

    height: calc(100% - 85px)

}



nav #nav-map #nav-map-target {

    height: 100%;

    background: #151515

}



nav #nav-map #nav-map-label {

    position: absolute;

    z-index: 10;

    background: #c79086;

    display: block;

    width: 100%;

    top: -43px;

    top: -4.3rem

}



nav #nav-map #nav-map-label ul {

    width: 100%;

    height: 100%

}



nav #nav-map #nav-map-label li {

    float: left;

    width: 100%;

    padding: 1.5rem 2rem 1.4rem;

    font-size: 12px;

    font-size: 1.2rem;

    color: #fff;

    text-align: center;

    display: none

}



nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 120%;

    background: rgba(21, 21, 21, .5);

    z-index: 10;

    display: none;

    overflow: auto;

    -webkit-overflow-scrolling: touch;

    -webkit-transition: all .1s cubic-bezier(.075, .82, .165, 1);

    -moz-transition: all .1s cubic-bezier(.075, .82, .165, 1);

    -o-transition: all .1s cubic-bezier(.075, .82, .165, 1);

    transition: all .1s cubic-bezier(.075, .82, .165, 1);

    -webkit-transform: translate3d(0, -50px, 0);

    -moz-transform: translate3d(0, -50px, 0);

    -ms-transform: translate3d(0, -50px, 0);

    -o-transform: translate3d(0, -50px, 0);

    transform: translate3d(0, -50px, 0)

}



#main-slider,

.main-slide,

.main-slide .bg,

:not(.no-touch) .pages.home {

    overflow: hidden

}



nav.animate-in {

    opacity: 1;

    transform: translate3d(0, 0, 0)

}



#main-slider,

nav.animate-out {

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0)

}



nav.animate-out {

    opacity: 0;

    transform: translate3d(0, 0, 0)

}



nav #nav-items a.selected {

    background: #c79086;

    color: #fff

}



nav #nav-newsletter {

    width: 100%;

    height: 100%;

    height: 86px;

    height: 8.6rem;

    position: relative

}



@media (max-width:1024px) {

    nav #nav-newsletter {

        display: none

    }

}



nav #nav-newsletter input[type=submit] {

    position: absolute;

    top: 50%;

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

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

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

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

    transform: translate(0, -50%);

    right: 20px;

    right: 2rem

}



nav #nav-newsletter input[type=email] {

    font-size: 24px;

    font-size: 2.4rem;

    font-weight: 200;

    color: #9d9d9d;

    width: 100%;

    height: 85px;

    height: 8.5rem;

    background-image: url();

    background-repeat: no-repeat;

    border: none;

    outline: 0;

    background-size: 30px 39px;

    background-position: 20px center;

    padding-left: 70px

}



nav #nav-newsletter input[type=email]:hover {

    background-color: #fbfbfb

}



#main-slider {

    width: 100%;

    height: 100%;

    position: relative;

    transform: translate3d(0, 0, 0)

}



#main-slider .icon {

    width: 10px;

    width: 1rem;

    height: 10px;

    height: 1rem;

    -webkit-border-radius: 100%;

    -moz-border-radius: 100%;

    -ms-border-radius: 100%;

    -o-border-radius: 100%;

    border-radius: 100%;

    display: block;

    background: #c79086;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -.5rem 0 0 -.5rem;

    -webkit-animation: pulse 1s infinite alternate;

    -moz-animation: pulse 1s infinite alternate;

    -o-animation: pulse 1s infinite alternate;

    animation: pulse 1s infinite alternate

}



#main-slider .main-slides {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0)

}



#main-slider .main-slides.animate {

    -webkit-transition: -webkit-transform .35s cubic-bezier(.165, .84, .44, 1);

    -moz-transition: -moz-transform .35s cubic-bezier(.165, .84, .44, 1);

    -o-transition: -o-transform .35s cubic-bezier(.165, .84, .44, 1);

    transition: transform .35s cubic-bezier(.165, .84, .44, 1)

}



#main-slider ul.dots {

    position: absolute;

    top: 50%;

    z-index: 2;

    right: 15px;

    right: 1.5rem

}



#main-slider ul.dots li {

    cursor: pointer;

    display: block;

    position: relative;

    width: 20px;

    width: 2rem;

    height: 20px;

    height: 2rem;

    padding: .6rem

}



#main-slider ul.dots li:before {

    content: "";

    display: block;

    background: rgba(153, 153, 153, .75);

    width: 8px;

    width: .8rem;

    height: 8px;

    height: .8rem;

    border-radius: 4px

}



#main-slider ul.dots li.active:before,

#main-slider ul.dots li:hover:before {

    background: #fff

}



.main-slide {

    width: 100%;

    height: 100%;

    position: relative;

    background: #000

}



.main-slide .bg {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: 0;

    -webkit-transition: opacity .2s ease-in-out;

    -webkit-transition-delay: .2s;

    -moz-transition: opacity .2s ease-in-out .2s;

    -o-transition: opacity .2s ease-in-out .2s;

    transition: opacity .2s ease-in-out .2s

}



.main-slide .bg video {

    position: absolute;

    height: 100%;

    top: 50%;

    left: 50%;

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

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

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

}



html.touch .main-slide .bg {

    width: 100%

}



.main-slide .bg.wide video {

    width: 100%;

    height: auto

}



.main-slide .content {

    position: absolute;

    top: 50%;

    left: 10%;

    width: 90%;

    max-width: 100%;

    z-index: 2;

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    opacity: 0;

    -webkit-transition: opacity 0s cubic-bezier(.165, .84, .44, 1);

    -webkit-transition-delay: .1s;

    -moz-transition: opacity 0s cubic-bezier(.165, .84, .44, 1) .1s;

    -o-transition: opacity 0s cubic-bezier(.165, .84, .44, 1) .1s;

    transition: opacity 0s cubic-bezier(.165, .84, .44, 1) .1s

}



#client-page .header h1,

.carousel .rsContainer .video {

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

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

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

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

    top: 50%

}



@media screen and (min-width:950px) {

    .main-slide .content {

        left: 5% !important;

        margin-left: 0;

    }

}



@media screen and (max-width:568px) {

    .main-slide .content {

        width: 70%;

        left: 15%

    }

}



.main-slide h2 {

    width: 100%

}



.main-slide.harbour h2 {

    

    font-weight: 200;

    color: #fff;

    font-size: 106px;

    font-size: 10.6rem

}



.main-slide.case h2 {

    font-weight: 800;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: -1px;

    margin-bottom: 3rem;

    font-size: 64px;

    font-size: 10rem; 
		
		margin-top:16%;

}

.main-slides .main-slide:nth-child(2) h2{
	font-size: 46px;
	margin-top: 15%;
	color: #c79086;
	width:1180px;
	margin:15% auto 0 !important;

}
.main-slides .main-slide:nth-child(2) p{
    
    font-size: 22px !important;
    left: 0;
    line-height: normal;
    padding-left: 0px !important;
    padding-right: 0px !important;
    position: relative;
    right: 0;
    text-align: center !important;
    width: 100%;
	 
    width:1180px !important;
    margin:10px auto 0 !important;
		display:block;
}

.main-slide.case p {

    width: 100%;

    color: #fff;

    font-size: 34px;

    font-size: 3.4rem;

    line-height: 40px;

    line-height: 4rem;

    margin-bottom: 3rem

}



@media screen and (max-width:600px) {

    .main-slide.case .content h2 {

        font-size: 32px;

        font-size: 3.2rem;

        line-height: 36px;

        line-height: 3.6rem

    }

}



.main-slide.hok h2 {

    

    color: #fff;

    letter-spacing: -1px;

    max-width: 960px;

    max-width: 96rem;

    margin: 3.5rem auto 3rem;

    font-size: 62px;

    font-size: 6.2rem;

    line-height: 72px;

    line-height: 7.2rem

}



.main-slide.hok h2 em {

    font-style: italic

}



@media screen and (max-height:600px) {

    .main-slide.hok .content img {

        display: none

    }

}



.main-slide.brand h2 {

    max-width: 992px;

    max-width: 99.2rem;

    font-weight: 400;

    margin: 0 auto

}



.main-slide.brand .content img {

    max-width: 100%

}



@media screen and (max-width:600px) {

    .main-slide.hok .content img {

        display: none

    }

    .main-slide.hok .content h2 {

        font-size: 32px;

        font-size: 3.2rem;

        line-height: 36px;

        line-height: 3.6rem

    }

    .main-slide.brand .content h2 {

        font-size: 32px;

        font-size: 3.2rem;

        line-height: 36px;

        line-height: 3.6rem;

        letter-spacing: 0

    }

}



.main-slide.loaded .icon {

    display: none!important

}



.main-slide.loaded .bg {

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=85);

    opacity: .95

}



.main-slide.active .content {

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);

    opacity: 1;

    -webkit-transition: opacity 1s cubic-bezier(.165, .84, .44, 1);

    -webkit-transition-delay: .1s;

    -moz-transition: opacity 1s cubic-bezier(.165, .84, .44, 1) .1s;

    -o-transition: opacity 1s cubic-bezier(.165, .84, .44, 1) .1s;

    transition: opacity 1s cubic-bezier(.165, .84, .44, 1) .1s

}



@media screen and (max-width:600px) {

    #main-slider {

        height: auto;

        overflow: visible

    }

    #main-slider ul.dots {

        display: none

    }

    .main-slide {

        width: 100%;

        height: 0;

        padding-bottom: 100%

    }

    .main-slide.case .content h2 {

        font-size: 26px;

        font-size: 2.6rem;

        line-height: 22px;

        line-height: 2.2rem;

        margin-bottom: .6rem

    }

    .main-slide.case .content p {

        font-size: 21px;

        font-size: 2.1rem;

        line-height: 24px;

        line-height: 2.4rem

    }

    .main-slide.brand .content h2 {

        font-size: 22px;

        font-size: 2.2rem;

        line-height: 26px;

        line-height: 2.6rem

    }

    .main-slide.hok .content h2 {

        font-size: 26px;

        font-size: 2.6rem;

        line-height: 30px;

        line-height: 3rem

    }

}



#client-page {

    min-height: 100%;

    background: #fff

}



#client-page .header {

    width: 100%;

    height: 580px;

    height: 58rem;

    background: url(static/client.jpg) center center;

    background-size: cover;

    position: relative

}



#client-page .header h1 {

    position: absolute;

    left: 50%;

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

    font-size: 64px;

    font-size: 6.4rem;

    color: #fff;

   

    text-transform: uppercase

}



#client-page .header h1 sup {

    font-size: 21px;

    font-size: 2.1rem

}



#client-page .body {

    margin: 4rem auto 0;

    max-width: 653px;

    max-width: 65.3rem;

    padding-left: 6.8rem;

    padding-right: 6.8rem

}



#client-page .body blockquoute {

    
    color: #151515;

    font-size: 34px;

    font-size: 3.4rem;

    display: block;

    overflow: hidden;

    margin-bottom: 6.5rem

}



#client-page .body blockquoute p {

    font-size: 34px;

    font-size: 3.4rem;

    line-height: 4.5rem;

    word-spacing: -.1rem;

    margin-bottom: .5rem

}



#client-page .body blockquoute span {

    

    font-size: 17px;

    font-size: 1.7rem;

    color: #999;

    float: right;

    padding-right: 1.6rem

}



.royalSlider>*,

.rsGCaption,

.rsOverflow,

.rsTabs,

.rsThumb,

.rsThumbs,

.sharemenu ul li,

ul.tabs li {

    float: left

}




#client-page .body p {

    
    font-size: 29px;

    font-size: 2.9rem;

    line-height: 45px;

    line-height: 4.5rem;

    word-spacing: -2px;

    word-spacing: -.2rem;

    margin-bottom: 6rem

}



.main-slide.case h2,

.main-slide.case p,

.projects.show .header .inner h1,

ul.tabs li a {

    
    line-height: 54px;

    line-height: 5.4rem;

    

    font-weight: 400;

    color: #fff;

    display: block

}



ul.tabs li a:hover {

    background: #fff

}



ul.tabs li.active a {

    background: #fff;

    color: #151515

}



.tab {

    display: none

}



.tab.active {

    display: block

}



.carousel {

    max-width: 960px;

    max-width: 96rem;

    margin: 5.1rem auto 0;

    overflow: hidden;

    position: relative

}



.carousel .carousel-nav {

    color: #fff;

    top: 50%;

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

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

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

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

    transform: translate(0, -50%);

    height: 40px;

    height: 4rem;

    width: 40px;

    width: 4rem;

    margin-top: -5.6rem;

    padding: 4rem;

    position: absolute;

    z-index: 1;

    -webkit-transition: opacity .1s ease-in;

    -moz-transition: opacity .1s ease-in;

    -o-transition: opacity .1s ease-in;

    transition: opacity .1s ease-in;

    text-shadow: 0 0 1px #aaa;

    outline: 0

}



.carousel .previous {

    background: url(../assets/svg/arr-left.svg) 0 50% no-repeat;

    left: 0

}



.carousel .next {

    background: url(../assets/svg/arr-right.svg) 40px 50% no-repeat;

    right: 0

}



.carousel .inner {

    width: 100%

}



.carousel .rsContainer {

    height: 100%

}



.carousel .rsContainer div {

    height: 100%;

    background-size: contain;

    background-position: center center;

    background-repeat: no-repeat

}



.carousel .rsContainer div.image-loader-buffer {

    height: 10px;

    height: 1rem

}



.carousel .rsContainer div.playing-video {

    background-position-x: -100000px

}



.carousel .rsContainer .video {

    position: relative;

    height: 0;

    padding-bottom: 56.25%;

    left: 50%;

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

    text-align: left

}



.carousel .rsContainer .play,

.video-overlay-inner {

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

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

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

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

}



.carousel .rsContainer .video iframe {

    width: 100%;

    height: 100%;

    position: absolute

}



.carousel .rsContainer .play {

    background: url(../assets/svg/play.svg) center center no-repeat;

    color: #fff;

    width: 96px;

    width: 9.6rem;

    height: 100%;

    padding-left: 10%;

    padding-right: 10%;

    position: absolute;

    top: 50%;

    left: 50%;

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

}



.carousel .rsContainer .play:hover {

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);

    opacity: 1

}



.carousel .details {

    margin: .6rem auto 1rem;

    text-align: left;

    position: relative;

    height: auto;

    min-height: 98px;

    min-height: 9.8rem

}



.carousel .details p {

    margin: 0;

    padding: 0!important;

    max-width: 960px;

    max-width: 96rem;

    font-size: 14px;

    font-size: 1.4rem;

    font-weight: 200

}



.carousel .details .caption,

.carousel .details .index {

    font-weight: 400;

    color: #666;

    display: table-cell;

    line-height: 33px!important;

    line-height: 3.3rem!important

}



.carousel .details .index {

    padding-right: 3.6rem!important;

    vertical-align: top

}



.carousel .details .icon-full-viewport,

.navigation,

.navigation a {

    vertical-align: middle;

    zoom: 1

}



.carousel .details .caption {

    font-style: italic;

    padding-right: 1.5rem;

    padding-top: .6rem!important;

    line-height: 20px!important;

    line-height: 2rem!important

}



.carousel .details .link {

    width: 40px;

    width: 4rem;

    position: absolute;

    right: 1px;

    top: 2px;

    text-align: right

}



.carousel .details .link a {

    display: block;

    margin-left: 1px;

    color: #adadad

}



.carousel .details .icon-full-viewport {

    font-size: 40px;

    font-size: 4rem;

    line-height: 37px;

    line-height: 3.7rem;

    width: 40px;

    width: 4rem;

    height: 40px;

    height: 4rem;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    display: inline-block;

    border: 1px solid #e4e4e4

}



.carousel .details .icon-full-viewport:hover {

    background: #fbfbfb;

    color: #c79086

}



.carousel.full-viewport {

    background: #fff;

    width: 100%;

    height: 100%;

    max-width: none;

    z-index: 9999;

    margin: 0;

    top: 0;

    left: 0;

    position: fixed

}



.carousel.full-viewport ul {

    height: calc(100% - 48px);

    border-bottom: 1px solid #e4e4e4

}



.carousel.full-viewport li {

    background-position: center

}



.carousel.full-viewport .carousel-nav {

    margin-top: -2.4rem

}



.carousel.full-viewport .video {

    margin-top: 0

}



.carousel.full-viewport .details-container {

    width: 100%;

    padding: 0 0 0 2rem;

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

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

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

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

    transform: translate(-50%, 0);

    bottom: 0;

    left: 50%;

    margin: 0;

    position: fixed;

    z-index: 9999;

    background: #fff;

    border-top: 1px solid #e4e4e4;

    text-align: center

}



.carousel.full-viewport .details-container .details {

    max-width: 960px;

    max-width: 96rem;

    margin: 0 auto .6rem;

    min-height: 0

}



.carousel.full-viewport .details-container .link {

    top: -3px

}



.carousel.full-viewport .previous {

    background: url(../assets/svg/arr-left.svg) 0 50% no-repeat;

    left: 0

}



.carousel.full-viewport .next {

    background: url(../assets/svg/arr-right.svg) 40px 50% no-repeat;

    right: 0

}



.carousel.tapped .carousel-nav,

.no-touch .carousel .carousel-nav {

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);

    -webkit-transition: opacity .1s ease-in;

    -moz-transition: opacity .1s ease-in;

    -o-transition: opacity .1s ease-in;

    transition: opacity .1s ease-in

}



.touch .carousel .link {

    display: none!important

}



.no-touch .carousel:hover .carousel-nav {

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);

    opacity: 1;

    visibility: visible

}



@media screen and (max-width:990px) and (min-width:640px) {

    .carousel {

        margin: 0 1rem

    }

}



@media screen and (min-width:1440px) {

    .carousel {

        max-width: 1280px;

        max-width: 128rem

    }

}



@media screen and (max-width:768px) {

    .carousel:not(.full-viewport) .link {

        visibility: hidden

    }

}



@media screen and (max-width:640px) {

    .carousel:not(.full-viewport) .details {

        position: relative;

        padding-left: 2rem!important;

        padding-right: 2rem!important

    }

    .carousel:not(.full-viewport) .details .index {

        padding-right: 2.2rem!important

    }

    .carousel:not(.full-viewport) .details .caption {

        line-height: 16px!important;

        line-height: 1.6rem!important;

        padding-top: .9rem!important

    }

    .carousel .details p {

        line-height: 33px!important;

        line-height: 3.3rem!important

    }

}



@media screen and (max-width:320px) {

    .carousel ul .play {

        background-size: contain;

        width: 66px;

        width: 6.6rem;

        height: 66px;

        height: 6.6rem

    }

}



.royalSlider {

    width: 600px;

    height: 400px;

    position: relative;

    direction: ltr

}



.rsContainer,

.rsOverflow,

.rsVisibleNearbyWrap {

    height: 100%;

    -webkit-tap-highlight-color: transparent;

    width: 100%

}



.rsWebkit3d .rsSlide {

    -webkit-transform: translateZ(0)

}



.rsFade.rsWebkit3d .rsContainer,

.rsFade.rsWebkit3d .rsSlide,

.rsFade.rsWebkit3d img {

    -webkit-transform: none

}



.rsOverflow {

    position: relative;

    overflow: hidden

}



.rsVisibleNearbyWrap {

    position: relative;

    overflow: hidden;

    left: 0;

    top: 0

}



.rsVisibleNearbyWrap .rsOverflow {

    position: absolute;

    left: 0;

    top: 0

}



.rsContainer,

.rsThumb {

    position: relative

}



.rsArrow,

.rsThumbsArrow {

    cursor: pointer

}



.rsArrow,

.rsNav,

.rsThumbsArrow {

    opacity: 1;

    -webkit-transition: opacity .3s linear;

    -moz-transition: opacity .3s linear;

    -o-transition: opacity .3s linear;

    transition: opacity .3s linear

}



.rsHidden {

    opacity: 0;

    visibility: hidden;

    -webkit-transition: visibility 0s linear .3s, opacity .3s linear;

    -moz-transition: visibility 0s linear .3s, opacity .3s linear;

    -o-transition: visibility 0s linear .3s, opacity .3s linear;

    transition: visibility 0s linear .3s, opacity .3s linear

}



.rsGCaption {

    width: 100%;

    text-align: center

}



.royalSlider.rsFullscreen {

    position: fixed!important;

    height: auto!important;

    width: auto!important;

    margin: 0!important;

    padding: 0!important;

    z-index: 2147483647!important;

    top: 0!important;

    left: 0!important;

    bottom: 0!important;

    right: 0!important

}



.royalSlider .rsSlide.rsFakePreloader {

    opacity: 1!important;

    -webkit-transition: 0s;

    -moz-transition: 0s;

    -o-transition: 0s;

    transition: 0s;

    display: none

}



.rsSlide {

    position: absolute;

    left: 0;

    top: 0;

    display: block;

    overflow: hidden;

    height: 100%;

    width: 100%

}



.royalSlider.rsAutoHeight,

.rsAutoHeight .rsSlide {

    height: auto

}



.rsContent {

    width: 100%;

    height: 100%;

    position: relative

}



.rsPreloader {

    position: absolute;

    z-index: 0

}



.rsNav {

    -moz-user-select: -moz-none;

    user-select: none

}



.rsNavItem {

    -webkit-tap-highlight-color: rgba(0, 0, 0, .25)

}



.rsThumbs {

    cursor: pointer;

    position: relative;

    overflow: hidden;

    z-index: 22

}



.rsTabs {

    background: 0 0!important

}



.rsTabs,

.rsThumbs {

    -webkit-tap-highlight-color: transparent

}



.rsVideoContainer {

    width: auto;

    height: auto;

    line-height: 0;

    position: relative

}



.rsABlock,

.rsLink,

.rsVideoFrameHolder {

    position: absolute;

    top: 0;

    left: 0

}



.rsVideoFrameHolder {

    background: #141414;

    opacity: 0;

    -webkit-transition: .3s

}



.rsVideoFrameHolder.rsVideoActive {

    opacity: 1

}



.rsVideoContainer .rsVideoObj,

.rsVideoContainer embed,

.rsVideoContainer iframe,

.rsVideoContainer video {

    position: absolute;

    z-index: 50;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%

}



.rsVideoContainer.rsIOSVideo embed,

.rsVideoContainer.rsIOSVideo iframe,

.rsVideoContainer.rsIOSVideo video {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    padding-right: 44px

}



.rsABlock {

    z-index: 15

}



img.rsImg {

    max-width: none

}



.grab-cursor {

    cursor: url(grab.png) 8 8, move

}



.grabbing-cursor {

    cursor: url(grabbing.png) 8 8, move

}



.rsNoDrag {

    cursor: auto

}



.rsLink {

    width: 100%;

    height: 100%;

    display: block;

    z-index: 20;

    background: url(blank.gif)

}



.image-loader {

    position: relative

}



.image-loader.img {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0

}



.image-loader figcaption {

    display: none

}



.image-loader-container {

    position: relative

}



.image-loader-buffer {

    width: 10px;

    width: 1rem;

    height: 10px;

    height: 1rem;

    -webkit-border-radius: 100%;

    -moz-border-radius: 100%;

    -ms-border-radius: 100%;

    -o-border-radius: 100%;

    border-radius: 100%;

    display: block;

    background: #c79086;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -.5rem 0 0 -.5rem;

    -webkit-animation: pulse 1s infinite alternate;

    -moz-animation: pulse 1s infinite alternate;

    -o-animation: pulse 1s infinite alternate;

    animation: pulse 1s infinite alternate

}



@-webkit-keyframes pulse {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}



@-moz-keyframes pulse {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}



@-o-keyframes pulse {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}



@keyframes pulse {

    0% {

        opacity: 0

    }

    100% {

        opacity: 1

    }

}



.video-overlay {

    width: 100%;

    height: 100%;

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

    position: fixed;

    z-index: 11

}



.video-overlay-inner {

    width: 100%;

    position: absolute;

    top: 50%;

    left: 50%;

    padding-bottom: 45%;

    height: 0;

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

}



.video-overlay-inner .video {

    width: 80%;

    height: 0;

    position: relative;

    padding-bottom: 45%;

    margin: 0 auto;

    background: #000

}



.video-overlay-inner iframe {

    width: 100%;

    height: 100%;

    position: absolute

}



.video-overlay-meta {

    height: 80px;

    height: 8rem;

    position: relative

}



.video-overlay-meta a {

    color: #e4e4e4;

    position: absolute;

    top: 50%;

    left: 50%;

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

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

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

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

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

}



.sharemenu h2 {

    text-align: center;

    text-transform: uppercase;

    font-weight: 800;

    font-size: 11px;

    font-size: 1.1rem;

    letter-spacing: 4px;

    letter-spacing: .4rem

}



.sharemenu ul {

    text-align: center;

    margin: 0 auto;

    width: 29rem

}



.sharemenu ul li:first-child,

.sharemenu ul li:first-child+li {

    margin-right: 1rem

}



.sharemenu ul a {

    display: block;

    color: #151515;

    width: 63px;

    width: 6.3rem

}



.sharemenu ul a:hover {

    color: #c79086

}



.related,

.related a {

    color: #151515

}



.sharemenu ul a.icon-facebook {

    text-align: left

}



.sharemenu ul a.icon-linkedin {

    text-align: right

}



.related {

    display: block;

    text-align: center;

    border-top: 1px solid #e4e4e4;

    padding-bottom: 6rem

}



.related.layout-hok h2 {

    letter-spacing: 0;

    font-weight: 600;

    margin-top: 2.5rem;

    font-size: 24px;

    font-size: 2.4rem;

    line-height: 30px;

    line-height: 3rem;

    margin-bottom: .9rem;

    padding: 0 2rem

}



.related.layout-hok h2 a {

    color: #333

}



.related.layout-hok h3 {

    color: #aaa;

    letter-spacing: 0;

    font-weight: 400;

    text-transform: none;

    padding: 0 2rem;

    font-size: 15px;

    font-size: 1.5rem

}



.related.layout-work h3 {

    margin: 3.5rem 0 .5rem;

    padding: 0 2rem

}



.related.layout-work h2 {

    letter-spacing: 0;

    padding: 0 2rem;

    font-size: 24px;

    font-size: 2.4rem;

    line-height: 30px;

    line-height: 3rem

}



.related.layout-work h2 a {

    color: #333

}



.related .inner {

    max-width: 640px;

    margin: 0 auto

}



.related .inner .thumb-container {

    width: 208px;

    height: 208px;

    position: relative;

    margin: 0 auto;

    display: block

}



.related .inner .thumb-container:after {

    content: "";

    position: absolute;

    top: -5px;

    right: -5px;

    left: -5px;

    bottom: -5px;

    border: 0 solid #fff;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    -webkit-transition: border .25s;

    -moz-transition: border .25s;

    -o-transition: border .25s;

    transition: border .25s

}



.related .inner .thumb-container .thumb {

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    width: 100%;

    height: 100%;

    position: absolute;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover

}



.related .inner:hover .thumb-container:after {

    border: 15px solid #fff

}



.navigation {

    display: inline-block;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    margin-top: 5.4rem;

    border: 1px solid #e4e4e4;

    overflow: hidden

}



.navigation a {

    line-height: 54px;

    line-height: 5.4rem;

    width: 107px;

    width: 10.7rem;

    height: 56px;

    height: 5.6rem;

    display: -moz-inline-stack;

    display: inline-block;

    text-align: center;

    color: #aaa;

    border-right: 1px solid #e4e4e4!important

}



.navigation a:last-child {

    border-right: none!important

}



.navigation a:hover {

    background: #fbfbfb;

    color: #c79086

}



@media screen and (max-width:500px) {

    .navigation a {

        height: 43px;

        height: 4.3rem;

        line-height: 43px;

        line-height: 4.3rem

    }

    .projects.show .navigation.header-navigation {

        margin-bottom: 1rem

    }

}



body {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    cursor: default

}
section.faq {

    margin: 20px!important

}



section.faq h2 {

    text-align: left;

    font-size: 22px!important;

    color: #c68d86;

    font-weight: 400;

    letter-spacing: 1px;

    margin: 40px 0 10px!important;



    padding: 0 0 10px!important;

    line-height: 2.2rem

}



section.faq p {

    -webkit-margin-before: inherit!important;

    -webkit-margin-after: inherit!important;

    -webkit-margin-start: inherit!important;

    -webkit-margin-end: inherit!important;

    margin: 15px 0 0!important;

    padding: 0!important;

    text-align: left;

    font-size: 18px;

    line-height: 2rem!important

}



.main-slide.case p {

    font-style: normal;

    font-weight: 400

}



.projects.show .header .inner h3 {

    font-weight: 400

}



#main-body .main-slides .splash .content .touch-link {

    position: relative;

    bottom: -240px

}



.single-project .header .inner .touch-link {

    color: #000;

    background: #fff;

    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;

    border: none;

    display: inline-block;

    font-size: 11px;

    font-size: 1.1rem;

    letter-spacing: 4px;

    letter-spacing: .4rem;

    padding: 1.2rem 2.5rem 1.2rem 2.8rem;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    margin-top: 20px

}



header .wrapper h1 span,

header .wrapper h2 a:link,

header .wrapper h2 a:visited {

    color: #666!important

}



header .wrapper h2 a:hover {

    color: #fff!important

}



.projects.show .tagline p {

    color: #000;

    font-weight: 700;

    text-transform: uppercase;

    text-align: center

}



.projects.show .tagline p:after,

.projects.show .tagline p:before {

    display: block;

    width: 20px;

    height: 2px;

    content: "";

    background-color: rgba(0, 0, 0, 1);

    margin: 20px auto 0

}



.projects.show .tagline p:before {

    margin-top: 0!important;

    margin-bottom: 20px

}



.flexbox-container {

    display: -ms-flex;

    display: -webkit-flex;

    display: flex

}



.flexbox-container>div {

    width: 50%;

    padding: 10px

}



.flexbox-container>div:first-child {

    margin-right: 20px

}



.projects.show .content.information h2 {

    font-weight: 400;

    letter-spacing: 2px;

    color: #aaa

}



article .enquiry-cta:link,

article .enquiry-cta:visited,

section .touch-link:link,

section .touch-link:visited {
    
    color: #fff;

    background: #c79086;

    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;

    text-align: center

}



section .touch-link:link,

section .touch-link:visited {

    border: 1px solid #eee;

    display: inline-block;

    font-size: 11px;

    font-size: 1.1rem;

    letter-spacing: 4px;

    letter-spacing: .4rem;

    padding: 1.2rem 2.5rem 1.2rem 2.8rem;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    margin-top: 20px

}



article .enquiry-cta:link,

article .enquiry-cta:visited {

    border: 1px solid #eee;

    display: block;

    font-size: 11px;

    font-size: 1.1rem;

    letter-spacing: 4px;

    letter-spacing: .4rem;

    padding: 10px;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    margin: 20px auto 0;

    line-height: 18px

}



article .enquiry-cta:hover,

section .touch-link:hover {

    background: #fff;

    color: #c79086;

    border: 1px solid #c79086

}



.section-centered {

    margin-top: 12rem!important

}



#company-intro h2 {

    margin: 0 auto 5.5rem

}



.office h2 strong {

    text-transform: uppercase

}



.office a:link,

.office a:visited {

    padding-bottom: 5px;

    border-bottom: 1px dotted #555

}



.office a:hover {

    color: #555;

    border-bottom: 1px dotted #fff

}



.office h2 small {

    font-size: smaller;

    color: #777;

    margin-top: 10px;

    display: block

}



.office h2 strong:after {

    display: block;

    width: 20px;

    height: 2px;

    content: "";

    background-color: rgba(255, 255, 255, 1);

    margin: 20px auto 0

}



#company-intro-case .formulation {

    font-size: 28px

}



.projects.show .content.information p.vendor-list,

header h1 span {

    font-size: small

}



#company-intro-case .formulation small {

    font-size: small;

    color: #aaa;

    font-weight: 400

}



#company-background h3 small {

    color: #aaa;

    margin-top: 10px;

    display: block

}



.information a:link,

.information a:visited {

    color: #000;

    padding-bottom: 5px;

    border-bottom: 1px dotted #aaa

}



.information a:hover {

    border-bottom: 1px dotted #000

}



.projects.show .content.information p.vendor-list i {

    font-weight: 400;

    color: #666;

    font-style: italic

}



header h1 span {

    color: #fff!important

}



.all-projects li.project .thumb,

.all-projects li.project .thumb-container,

.all-projects li.project .thumb-container:after {

    -webkit-border-radius: 0!important;

    -moz-border-radius: 0!important;

    -ms-border-radius: 0!important;

    -o-border-radius: 0!important;

    border-radius: 0!important

}



.all-projects li.project h2 {

    text-transform: capitalize

}



.all-projects li.project h2 small {

    color: #666;

    font-size: 19px!important

}



#company-ventures {

    margin-top: 10rem

}



html:not(.touch) .all-projects li.project:hover {

    background: #eee

}



html:not(.touch) .all-projects li.project:hover .thumb-container:after {

    border: 15px solid #fff

}



.projects.show .content.information {

    margin-top: 0!important

}



header #menu-toggler-container {

    background: rgba(51, 51, 51, .1)

}



#contact-offices .offices .office-container .office .get-in-touch .new-business {

    margin-bottom: 3rem

}



.office h2 small i {

    font-size: smaller

}



#contact-newsletter,

.contact-newsletter {

    padding-top: 40px!important

}



.carousel.tapped .carousel-nav,

.no-touch .carousel .carousel-nav {

    opacity: .5!important

}



.carousel .rsContainer .play {

    opacity: 1!important;

    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100)!important

}



nav #nav-items a {

    height: 6rem!important

}



nav #nav-mobile a {

    height: 4.3rem!important

}



nav #nav-items a i {

    color: #aaa!important

}



:required:focus {

    box-shadow: 0 0 3px rgba(255, 0, 0, .5)

}



.pagination li {

    display: inline-block;

    padding: 5px

}



.pagination li a:link,

.pagination li a:visited {

    font-size: 28px;

    margin: 1px;

    padding: 10px 15px;

    border: 1px dotted #ccc!important;

    color: #ccc;

    font-weight: 400;

    content: " "!important;

    float: left

}



.pagination li a:hover {

    background-color: #fff;

    color: #000

}



nav #nav-items a:hover,

nav #nav-mobile a:hover {

    background: #c79086!important;

    color: #fff

}



.paging-nav ol,

.paging-nav ul {

    overflow: hidden;

    list-style: none;

    margin: 2em 0 1em;

    padding: 0;

    float: right;

    display: block

}



.paging-nav li {

    float: left;

    cursor: pointer;

    margin: 0 .5em 0 0

}



.paging-nav a {

    display: block;

    cursor: pointer;

    height: 1.4em;

    width: 1.4em;

    border: 1px solid #ccc;

    line-height: 1.4em;

    text-align: center;

    color: #111

}



.paging-nav .active a {

    border-color: red;

    color: red

}



#content-list button {

    margin-bottom: 10px;

    margin-top: 10px;

    padding: 10px;

    text-transform: uppercase;

    background-color: #fff;

    border: 0 solid #ddd;

    float: right;

    margin-right: 5px;

    display: block

}



#content-list button.next {

    margin-right: 20px

}



#content-list .pager {

    display: block;

    float: right;

    font-size: 2rem;

    position: relative;

    top: 13px;

    cursor: default;

    margin-right: 10px

}



#content-list button.pager-label {

    float: right;

    pointer-events: none;

    background-color: transparent;

    font-style: italic;

    text-transform: capitalize

}



#content-list .pager span {

    color: #ccc

}



#content-list button:hover {

    background-color: #000;

    color: #fff;

    cursor: pointer

}



#content-list #paginate-pagination {

    display: block;

    float: left;

    margin-bottom: 20px;

    margin-top: 20px;

    position: fixed;

    bottom: 0;

    left: 20;

}



#content-list #paginate-pagination a:link,

#content-list #paginate-pagination a:visited {

    padding: 10px;

    background-color: #fff;

    color: #000;

    text-transform: uppercase

}



#content-list #paginate-pagination a:hover {

    background-color: #c79086;

    color: #fff

}



.subfooter {

    margin-top: 20px

}



.subfooter p {

    font-size: 28px;

    margin-top: 50px;

    cursor: default

}



.subfooter p small {

    font-size: 11px;

    font-size: 1.1rem;

    letter-spacing: 1px;

    letter-spacing: .1rem;

    font-weight: 500;

    text-transform: uppercase;

    color: #999;
    display: block

}



.content .ctas {

    height: 100px

}



.content .ctas-wrap {

    margin: 0 auto;

    height: 100px;

    width: 495px

}



.content .ctas-wrap a.enquiry-cta:link,

.content .ctas-wrap a.enquiry-cta:visited {

    margin-bottom: 5px;

    color: #fff!important;

    font-weight: 600;

    width: 100%!important;

    float: left;

    margin-right: 5px!important;

    letter-spacing: .3rem!important

}



.content .ctas-wrap a.enquiry-cta:hover {

    color: #c79086!important;

    border: 1px solid #c79086

}



.content .ctas-wrap a.enquiry-cta-grey:link,

.content .ctas-wrap a.enquiry-cta-grey:visited {

    margin-bottom: 5px;

    color: #000!important;

    font-weight: 600;

    width: 200px!important;

    float: left;

    background-color: #eee;

    border: 1px solid #ccc

}



.content .ctas-wrap a.enquiry-cta-grey:hover {

    color: #c79086!important;

    border: 1px solid #c79086;

    background-color: #fff

}



.subfooter p.address {

    font-size: 14px;
    margin-top: 10px;

    padding-top: 0

}



.subfooter p.address a:link,

.subfooter p.address a:visited {

    margin-bottom: 5px;

    border-bottom: 1px dotted #999

}



.subfooter p.address a:hover {

    border-bottom: 1px solid #ddd

}



.subfooter p.address i {

    color: #999;

    text-transform: uppercase;

    margin-left: 10px

}



.related {

    padding-top: 2rem;
		clear:both;

}



.featherlight-gallery2 {

    background: rgba(100, 100, 100, .5)

}



.featherlight-gallery2 .featherlight-content {

    background: #000

}



.featherlight-gallery2 .featherlight-next:hover,

.featherlight-gallery2 .featherlight-previous:hover {

    background: rgba(0, 0, 0, .5)

}



.featherlight-gallery2 .featherlight-next:hover span,

.featherlight-gallery2 .featherlight-previous:hover span {

    font-size: 25px;

    line-height: 25px;

    margin-top: -12.5px;

    color: #fff

}



.featherlight-gallery2 .featherlight-close {

    background: 0 0;

    color: #fff;

    font-size: 1.2em

}



.blurb {

    display: inline-block;

    width: 150px;

    height: 150px

}



.blurb h2 {

    text-align: center

}



.blurb .detail {

    display: none

}



.blurb .teaser {

    font-style: italic;

    text-align: center

}



.featherlight .blurb {

    display: inline-block;

    width: 500px;

    height: 300px;

    color: #99f

}



.featherlight .blurb .detail {

    color: #ddf;

    font-size: large;

    display: inherit

}



.featherlight .blurb .teaser {

    display: none

}



.hok-overview__post__thumb {

    margin: 0 auto 5px

}



.hok-overview__post a:hover {

    background-color: #f8f8f8!important

}



.hok-overview__post__thumb img {

    display: block;

    -webkit-border-radius: 0!important;

    -moz-border-radius: 0!important;

    -ms-border-radius: 0!important;

    -o-border-radius: 0!important;

    border-radius: 0!important;

    height: 90%!important;

    width: 100%!important

}



@media screen and (max-width:500px) {

    #main-body .main-slides .splash .content .touch-link {

        position: relative;

        bottom: -140px

    }

    img.responsiveimg {

        max-width: 90%;

        max-height: 90%

    }

}



@media (max-width:1000px) {

    header h1 {

        display: inline-block!important

    }

    .section-centered {

        margin-top: 7rem!important

    }

    section.faq p {

        font-size: 14px

    }

    img.responsiveimg {

        max-width: 90%;

        max-height: 90%

    }

}



@media screen and (orientation:portrait) {

    img.responsiveimg {

        max-width: 90%;

        max-height: 90%

    }

}



@media screen and (orientation:landscape) {

    img.responsiveimg {

        max-width: 90%;

        max-height: 90%

    }

}



@media only screen and (max-width:767px) {

    .fb-comments,

    .fb-comments iframe span[style],

    .fb-comments iframe[style],

    .fb-comments span,

    .fb-like-box,

    .fb-like-box iframe span[style],

    .fb-like-box iframe[style],

    .fb-like-box span {

        width: 100%!important

    }

}



section.joblisting {

    padding-top: 40px;

    padding-left: 20px;

    padding-right: 20px

}



section.joblisting p {

    text-align: left;

    padding-bottom: 15px

}



.responsibilites {

    padding: 20px;

    width: 80%;

    margin: 0 auto

}



.responsibilites h3 {

    margin-bottom: 20px;

    letter-spacing: 1px;

    font-weight: 600;

    font-size: 1.4em;

    color: #aaa!important;

    text-align: left;

    text-transform: uppercase

}



.responsibilites ul li {

    list-style: square;

    text-align: left;

    font-size: 21px;

    font-size: 2.1rem;

    line-height: 1.5;

    margin-bottom: 5px

}



@media (max-width:1024px) {

    .responsibilites ul li {

        font-size: 16px;

        font-size: 1.6rem

    }

}



header a,

header a:visited {

    color: #000!important;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #555

}



#menu-toggler-container .icon-menu,

#menu-toggler-container.icon-menu,

header a span,

header a:visited span {

    -webkit-text-stroke-width: 0!important;

    font-weight: 100;

    color: #fff!important

}



.back-color {

  background-color: #1f1f1f;
	margin-top: 155px;

}

.back-color .contact-heading{

color:#fff;

font-size: 35px;

    letter-spacing: 4px;

margin-bottom: 1rem;	

}

.back-color p{

color:#fff;

}

.contact-section-centered form input, .contact-section-centered form textarea {

  background: #fff none repeat scroll 0 0;

  border: 1px solid #1f1f1f;

  box-sizing: border-box;

  font-size: 14px;

  font-weight: bold;

  line-height: inherit;

  padding: 12px 20px;

  width: 100%;

}

.contact-section-centered {

  margin: 0 auto;

  max-width: 730px;

}

.contact-section-centered .eventype {

  height: 40px;

  width: 100%;

  font-size:16px;

}

.contact-section-centered .eventype2 {

  height: 40px;

  font-size:16px;

}

.date-event{float: left;

    text-align: left;

    width: 100%;

}

.date-event strong{

font-size:16px;

}

.contact-section-centered .mc-field-group{

margin-bottom:15px;

}

:required:focus {

  box-shadow: none;

  border-color: #aaa;

}

.contact-section-centered form input:focus {

  box-shadow: none;

  border-color: #aaa;

}

.submitbut {

  background: #c79086 none repeat scroll 0 0 !important;

  color: #fff !important;

  width:100% !important;

  height:40px !important;

  font-size:16px !important;

  text-transform:uppercase !important;

  border:1px solid #1f1f1f !important;

  box-shadow: none !important;

	padding:0 !important;

}

.submitbut:hover{

	border-color: #aaa;

}

.submitbut:focus{

	border-color: #aaa;



}

.home_slider .main-slide.case p {
  color: #fff;
  font-size: 16px;
  left: 0;
  line-height: normal;
  margin-bottom: 0;
  margin-top: 10px;
  padding-left: 0;
  position: relative;
  right: 0;
  text-align: center;
  width: 100%;
}

.home_slider h2.title {

  font-size: 26px !important;

}

.home_slider .content > ul {

	font-size: 16px;

	list-style: inside none nu;

	margin: 0 auto;

	padding-left: 20px;

	text-align: left;

	width: 100%;

}

.first.content p{

	text-align:left;

}



nav #nav-items a.odd, nav #nav-mobile a.odd {

	float: left; width: 50%;

}



nav #nav-items a.even, nav #nav-mobile a.even { 

float: left; width: 50%; border-right: 1px dotted #ccc !important;  

}


.content .left-side {
  border-right: 1px dashed #fff;
  float: left;
  margin-bottom: 30px;
  padding-right: 30px;
  width: 50%;
}
.content .left-side p::before, .content .right-side p::before {
  content: "»";
  font-size: 26px;
  left: 0;
  position: absolute;
  top: -10px;
}

.content.first > h2 {
  margin-bottom: 30px;
}
.content .right-side {
  float: left;
  width: 50%;
	padding-left:30px;
}
.content .lik-bottom {
  clear: both;
  width: 100%;
}
.content .right-side > ul {
  font-size: 16px;
  line-height: 28px;
  list-style: inside none number;
  margin-left: 30px;
  margin-top: 15px;
  text-align: left;
}

.lik-bottom .touch-link {
  margin-right: 10px;
}

.home .wrapper h1 {
  display: block;
}
.bg p {
  display: inline-block;
  font-size: 30px !important;
  left: 30%;
  margin: 0 0 17px !important;
  position: relative;
}
#SubmitForm{
cursor: pointer;
border-color:#c79086 !important;
}
.main-slides .main-slide:nth-child(2) .lik-bottom{
margin-top:15px;
 display: inline-block;
}
nav #nav-items li{
  list-style:none;
}

nav #nav-items li:last-child a {
  width: 100%;
}
.gallery {
  float: none;
  margin: 0 auto;
  width: 1170px;
}
.gallery li {
  float: left;
  height: 400px;
  padding: 15px;
  width: 50%;
}
.gallery-responsiveimg {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}
@media only screen and (min-width:300px) and (max-width:500px){
    
.home .wrapper h1 {
  display: block  !important;
}
/*.main-slide.case h2 {
   font-size: 4rem;
 }*/
 .main-slide.case h2 {
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 10px;
  margin-top: 40%;
  text-transform: uppercase;
}
  .home_slider .main-slide.case p {
  color: #fff;
  float: left;
  font-size: 18px !important;
  left: 0;
  line-height: normal;
  margin-bottom: 0;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  right: 0;
  text-align: center;
  width: 100%;
}
.back-color {
margin-top: 0px;
}
.main-slides .main-slide:nth-child(1) h2 {
  font-size: 24px;
  color:#c79086;
  line-height: 32px;
  margin-top: 50%;
  width: 100%;
}
.main-slides .main-slide:nth-child(1) p{
    
   display: none;
    
}
.gallery {
  width: 100%;
}
.gallery li {
  float: left;
	height:auto;
	text-align:center;
  padding: 15px;
  width: 100%;
}
.content .ctas-wrap {
  height: 100px;
  margin: 0 auto;
  width: 90%;
}
.main-slides .main-slide:nth-child(2) h2 {
  color: #fff;
  font-size: 4rem;
  margin: 16% auto 0 !important;
  width: 100%;
}

}
@media only screen and (min-width:501px) and (max-width:600px){
	.back-color {
margin-top: 150px;
}
.main-slides .main-slide:nth-child(1) h2{
color:#c79086;
  line-height: 45px;
  margin: 35% auto 0;
font-size: 4rem;
width:90% !important;
}
.main-slides .main-slide:nth-child(1) p{
     display: none;
    
}

}
@media only screen and (min-width:501px) and (max-width:767px){
    
.home .wrapper h1 {
  display: block  !important;
}
.main-slide.case h2 {
   font-size: 4rem;
 }
  .home_slider .main-slide.case p {
  color: #fff;
  float: left;
  font-size: 24px !important;
  left: 0;
  line-height: normal;
  margin-bottom: 0;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  right: 0;
  text-align: center;
  width: 100%;
}
.back-color {
margin-top: 0px;
}
.main-slides .main-slide:nth-child(2) h2{
color:#c79086;
  line-height: 48px;
  margin: 35% auto 0 !important;
font-size: 4rem;
width:90% !important;
}
.main-slides .main-slide:nth-child(2) p{
    
    display: none;
}

.gallery {
  width: 100%;
}
.gallery li {
  float: left;
  padding: 15px;
	height:auto;
  width: 100%;
	text-align:center;
}

}

@media only screen and (min-width:768px) and (max-width:991px){
   
.home .wrapper h1 {
  display: block  !important;
}
/*.main-slide.case h2 {
   font-size: 4rem;
 }*/
  .main-slide.case h2 {
  color: #fff;
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 20px;
  margin-top: 40%;
  text-transform: uppercase;
}
  .home_slider .main-slide.case p {
  color: #fff;
  float: left;
  font-size: 24px !important;
  left: 0;
  line-height: normal;
  margin-bottom: 0;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  right: 0;
  text-align: center;
  width: 100%;
}
.back-color {
margin-top: 155px;
}
.main-slides .main-slide:nth-child(2) h2 {
  color: #c79086;
  font-size: 4rem;
  line-height: 40px;
  margin: 20% auto 0 !important;
  width: 90% !important;
}
.main-slides .main-slide:nth-child(2) p{
    
    font-size: 16px !important;
		width:90% !important;
margin: 0 auto !important;
    
}

.gallery {
  float: none;
  margin: 0 auto;
  width: 100%;
}
}


@media only screen and (min-width:992px) and (max-width:1199px){
   
.home .wrapper h1 {
  display: block  !important;
}
.main-slide.case h2 {
   font-size: 4rem;
 }
 .main-slides .main-slide:nth-child(2) h2{
	color:#c79086;
	line-height: 38px;
	margin-top: 35%;
	font-size: 4rem;
	width:90% !important;
}
.main-slides .main-slide:nth-child(2) p{
    
    font-size: 17px !important;
		width:90% !important;
margin: 0 auto !important;
    
}
 
.gallery {
  float: none;
  margin: 0 auto;
  width: 100%;
}

}
@media only screen and (min-width:979px) and (max-width:1279px){
	.main-slides .main-slide:nth-child(2) h2 {
  color: #c79086;
  font-size: 4rem;
  line-height: 40px;
  margin: 20% auto 0 !important;
  width: 90% !important;
}
	.main-slides .main-slide:nth-child(2) p {
		font-size: 18px !important;
		margin: 0 42px !important;
		width: 90% !important;
		margin-bottom:5px;
	}
	.flat-button, .main-slide.case a, .main-slide.hok a, nav #nav-header .center-map a, nav #nav-newsletter input[type="submit"] {
  background: #fff none repeat scroll 0 0;
  border: medium none;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.4rem;
  margin-top: 8px;
  padding: 1.2rem 2.5rem 1.2rem 2.8rem;
  text-transform: uppercase;
}
}