@charset "UTF-8"; @font-face { font-family: 'NHaasGroteskDSPro-75Bd'; src: url("../webfonts/2C0D5B_0_0.eot"); src: url("../webfonts/2C0D5B_0_0.eot%3F") format("embedded-opentype"), url("../webfonts/2C0D5B_0_0.woff") format("woff"), url("../webfonts/2C0D5B_0_0.ttf.html") format("truetype"); } .animate { -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate-fast { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate-faster { -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .transition-bounce { -webkit-transition: all 0.35s cubic-bezier(0.18, 0.9, 0.4, 1.3); transition: all 0.35s cubic-bezier(0.18, 0.9, 0.4, 1.3); } .transition-bounce-fast { -webkit-transition: all 0.25s cubic-bezier(0.18, 0.9, 0.4, 1.3); transition: all 0.25s cubic-bezier(0.18, 0.9, 0.4, 1.3); } .transition, .nav--mobile { -webkit-transition: all 0.35s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.35s cubic-bezier(0.77, 0, 0.175, 1); } .transition-fast { -webkit-transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1); } .transition-faster { -webkit-transition: all 0.3s cubic-bezier(0, 0.865, 0.17, 1); transition: all 0.3s cubic-bezier(0, 0.865, 0.17, 1); } .transition-fastest { -webkit-transition: all 0.2s cubic-bezier(0, 0.865, 0.17, 1); transition: all 0.2s cubic-bezier(0, 0.865, 0.17, 1); } .transition-btn, .btn--big .label { -webkit-transition: all 0.35s cubic-bezier(0, 0.865, 0.17, 1); transition: all 0.35s cubic-bezier(0, 0.865, 0.17, 1); } .transition-btnsfaster { -webkit-transition: all 0.2s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.2s cubic-bezier(0.77, 0, 0.175, 1); } .transition-btnleave { -webkit-transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1); } [data-anim='fadeIn'] { visibility: hidden; } .visible { visibility: visible; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .animate-fadeIn { -webkit-animation: fadeIn 0.3s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: fadeIn 0.3s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation: fadeIn 0.3s cubic-bezier(0.77, 0, 0.175, 1); -o-animation: fadeIn 0.3s cubic-bezier(0.77, 0, 0.175, 1); animation: fadeIn 0.3s cubic-bezier(0.77, 0, 0.175, 1); } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .animate-fadeOut { -webkit-animation: fadeOut 0.5s cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: fadeOut 0.5s cubic-bezier(0.77, 0, 0.175, 1); -ms-animation: fadeOut 0.5s cubic-bezier(0.77, 0, 0.175, 1); -o-animation: fadeOut 0.5s cubic-bezier(0.77, 0, 0.175, 1); animation: fadeOut 0.5s cubic-bezier(0.77, 0, 0.175, 1); } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre-wrap; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } html, button, input, select, textarea { color: #0d0d0d; font-family: NHaasGroteskDSPro-75Bd, "Helvetica Neue", "Helvetica", sans-serif; font-weight: 400; text-rendering: optimizeLegibility; } .bighuge { font-size: 100px; font-size: 5rem; font-weight: 700; line-height: 0.9em; margin-right: -5px; } @media only screen and (min-width: 40.063em) { .bighuge { font-size: 350px; font-size: 17.5rem; line-height: 1.1em; margin-right: 0; } } .cap-wrap>.cap { width: 130%; line-height: 1em; margin-bottom: 0; } .giga { font-size: 44px; font-size: 2.2rem; line-height: 1.1; } @media only screen and (min-width: 40.063em) { .giga { font-size: 90px; font-size: 4.5rem; } } .mega { font-size: 44px; font-size: 2.2rem; } @media only screen and (min-width: 40.063em) { .mega { font-size: 72px; font-size: 3.6rem; } } h1, .alpha { font-size: 33px; font-size: 1.65rem; } @media only screen and (min-width: 40.063em) { h1, .alpha { font-size: 44px; font-size: 2.2rem; } } h2, .beta { font-size: 26px; font-size: 1.3rem; } @media only screen and (min-width: 40.063em) { h2, .beta { font-size: 33px; font-size: 1.65rem; } } h3, .gamma { font-size: 22px; font-size: 1.1rem; } @media only screen and (min-width: 40.063em) { h3, .gamma { font-size: 27px; font-size: 1.35rem; } } h4, .delta { font-size: 18px; font-size: 0.9rem; } @media only screen and (min-width: 40.063em) { h4, .delta { font-size: 22px; font-size: 1.1rem; } } h5, .epsilon { font-size: 16px; font-size: 0.8rem; } @media only screen and (min-width: 40.063em) { h5, .epsilon { font-size: 18px; font-size: 0.9rem; } } .smaller-type p, .smaller-type ol, .smaller-type li, .smaller-type span { font-size: 16px; font-size: 0.8rem; } @media only screen and (min-width: 40.063em) { .smaller-type p, .smaller-type ol, .smaller-type li, .smaller-type span { font-size: 18px; font-size: 0.9rem; } } h6, .zeta { font-size: 14px; font-size: 0.7rem; } @media only screen and (min-width: 40.063em) { h6, .zeta { font-size: 16px; font-size: 0.8rem; } } h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0 0 1rem; color: #0d0d0d; letter-spacing: -0.01em; } @media only screen and (min-width: 40.063em) { h1, h2, h3, h4, h5, h6 { margin-bottom: 1.5rem; } } p, ul, ol, dl { color: #0d0d0d; margin: 0 0 1em; font-family: 'ff-meta-serif-web-pro', Georgia, serif; } p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; } p.small, ul.small, ol.small, dl.small { font-size: 14px; font-size: 0.7rem; } @media only screen and (min-width: 40.063em) { p, ul, ol, dl { font-size: 22px; font-size: 1.1rem; margin: 0 0 2.1rem; } } dt { font-weight: 400; } .lead { font-size: 20px; font-size: 1rem; } @media only screen and (min-width: 40.063em) { .lead { font-size: 24px; font-size: 1.2rem; } } html { background-color: #FFF; } body { font-size: 1em; line-height: 1.5; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } figure { margin-bottom: 1.65rem; } figure img { display: block; margin-bottom: 0.55rem; } @media only screen and (min-width: 40.063em) { figcaption { font-size: 22px; font-size: 1.1rem; } } img { height: auto; max-width: 100%; vertical-align: middle; } blockquote { font-style: italic; margin-top: 0; margin-right: 0; margin-left: 0; } blockquote p { font-size: 18px; font-size: 0.9rem; } @media only screen and (min-width: 40.063em) { blockquote p { font-size: 24px; font-size: 1.2rem; } } blockquote .cite { font-style: normal; } blockquote .cite:before { content: '\2014'; } pre, .example, code { margin: 0; padding: 1.6rem 2.4rem; background-color: #888888; border: 1px solid #818181; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } code { color: #6a6a6a; font-family: 'Inconsolata', sans-serif; padding: 0; } @media only screen and (min-width: 40.063em) { code { font-size: 22px; font-size: 1.1rem; } } pre>code { background: transparent; border: none; } a { color: #00b6e4; text-decoration: none; -webkit-transition: all .12s ease-in-out; transition: all .12s ease-in-out; } a:hover { color: #e60045; } ::-webkit-input-placeholder { color: #ccc; } ::-moz-placeholder { color: #ccc; } fieldset { border: 0; margin: 0; padding: 0; } textarea { line-height: 1.6; resize: vertical; } label { cursor: pointer; } input[type=text], input[type=search], input[type=email], input[type=password], input[type=url], textarea { font-size: 20px; font-size: 1rem; -webkit-appearance: none; -webkit-box-shadow: 0 0 0 1000px white inset; -webkit-appearance: none; border: none; border-bottom: 1px solid #cfd7df; -moz-box-sizing: border-box; box-sizing: border-box; color: #0d0d0d; outline: none; font-weight: 700; padding: 0.3rem 0 0.6rem 0; -webkit-transition: all .25s ease; transition: all .25s ease; width: 100%; } input[type=text].small-text, input[type=search].small-text, input[type=email].small-text, input[type=password].small-text, input[type=url].small-text, textarea.small-text { font-size: 14px; font-size: 0.7rem; font-weight: 400; font-family: "ff-meta-serif-web-pro", Georgia, serif; } input[type=text]::-webkit-input-placeholder, input[type=search]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { -webkit-transition: color .25s ease; } input[type=text]:hover::-webkit-input-placeholder, input[type=search]:hover::-webkit-input-placeholder, input[type=email]:hover::-webkit-input-placeholder, input[type=password]:hover::-webkit-input-placeholder, input[type=url]:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder { color: #999; } input[type=text]:hover, input[type=search]:hover, input[type=email]:hover, input[type=password]:hover, input[type=url]:hover, textarea:hover { border-color: #9c9c9c; } input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus { border-color: #00b6e4; color: #000; } @media only screen and (min-width: 40.063em) { input[type=text], input[type=search], input[type=email], input[type=password], input[type=url], textarea { font-size: 36px; font-size: 1.8rem; padding: 0.3rem 0 1rem 0; } input[type=text].small-text, input[type=search].small-text, input[type=email].small-text, input[type=password].small-text, input[type=url].small-text, textarea.small-text { font-size: 24px; font-size: 1.2rem; } } input[type=text] .status--error, input[type=search] .status--error, input[type=email] .status--error, input[type=password] .status--error, input[type=url] .status--error, textarea .status--error { border-color: #e60045; } *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .float-right { float: right; } .hide { display: none; } .clickable { cursor: pointer; } .bighuge, .giga, .nav--primary { text-transform: uppercase; } .nav { list-style: none; margin-top: 0; margin-left: 0; padding-left: 0; } .background-cover { background-size: cover; background-position: center; } .margin-center { margin-left: auto; margin-right: auto; } .absolute-bottom, .app-sidebar>.footer { position: absolute; bottom: 0; } .background-cover { background-size: cover; background-position: top center; } .background-topright { background-position: right top!important; } .no-animation { -moz-transition-property: none!important; -webkit-transition-property: none!important; -o-transition-property: none!important; transition-property: none!important; } .device-border { border: 1px solid #000; } .btn { position: relative; color: #000; } .btn a { color: #000; } .btn--clean { border: none; background-color: transparent; } .btn--primary { -webkit-transition: background-color 0.15s ease-in-out, color 0.25s ease-in-out; -moz-transition: background-color 0.15s ease-in-out, color 0.25s ease-in-out; -ms-transition: background-color 0.15s ease-in-out, color 0.25s ease-in-out; -o-transition: background-color 0.15s ease-in-out, color 0.25s ease-in-out; transition: background-color 0.15s ease-in-out, color 0.25s ease-in-out; font-size: 17px; font-size: 0.85rem; background-color: transparent; border: 1px solid #000; display: inline-block; font-weight: 400; white-space: nowrap; } .btn--primary:hover { background-color: transparent; } .btn--big { overflow: hidden; font-weight: 700; font-size: 17px; font-size: 0.85rem; padding: 0.9rem 1.6rem 0.81818rem; } @media only screen and (min-width: 40.063em) { .btn--big { padding: 1.6rem 2.4rem 1.33333rem; font-size: 24px; font-size: 1.2rem; } } .btn--big .overlay { -webkit-transition: width 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615); -moz-transition: width 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615); -ms-transition: width 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615); -o-transition: width 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615); transition: width 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.15s cubic-bezier(0.595, 0.005, 0.995, 0.615); background-color: #00b6e4; position: absolute; width: 0%; top: 0; bottom: 0; left: 50%; display: block; z-index: 10; -webkit-transform: skew(-20deg); transform: skew(-20deg); } .btn--big .label { position: relative; z-index: 20; display: block; } .hero { text-align: left; } .nav>li { display: inline-block; vertical-align: middle; } .nav a { display: inline-block; padding: .3em .6em; color: #5b666d; font-weight: 600; } @media only screen and (min-width: 40.063em) { nav { padding-top: 1.8em; padding-bottom: .2em; } } .nav--tabs a, .nav--inline a, .nav--stacked a { padding: 0.9rem 1.6rem 0.81818rem; } .nav--primary { background-color: #f5f5f5; border-bottom: 1px solid #0d0d0d; margin-bottom: 0; } .nav--primary>li { display: block; } @media only screen and (min-width: 40.063em) { .nav--primary>li { display: inline-block; } } .nav--primary a { border-bottom: 1px solid #fff; display: block; padding: 0.6em 0.9em; } @media only screen and (min-width: 40.063em) { .nav--primary a { display: inline-block; padding: 0; } } @media only screen and (min-width: 40.063em) { .nav--primary { font-size: 18px; font-size: 0.9rem; background-color: transparent; border: 0; margin-right: auto; margin-left: auto; max-width: 45rem; padding-right: 0.9rem; padding-left: 0.9rem; text-align: justify; } .nav--primary:after { content: ''; display: inline-block; width: 100%; } } .drawer { -webkit-transform: translate3d(0, -230px, 0); transform: translate3d(0, -230px, 0); -webkit-transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; } @media only screen and (min-width: 40.063em) { .drawer { -webkit-transform: none; transform: none; } } .form { margin: 0; padding: 0 0 2rem 0; list-style: none; } .form>li { margin-bottom: 1rem; } .form>li:last-of-type { margin-bottom: 0; } .form .help { opacity: 0; display: none; } .form--submitcontainer { padding-top: 2rem; } .form--aligntotitle { margin-top: -9px; } .form-default input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .section { margin-top: 1.75rem; margin-bottom: 1.75rem; } .section h3 { font-weight: bold; font-size: 1.1rem; } .section .list--title { color: #0d0d0d; } .section .content-list { list-style-type: none; padding: 0; margin: 0; } meta.foundation-version { font-family:"/{{ VERSION }}/"; } meta.foundation-mq-small { font-family: "/only screen/"; width: 0em; } meta.foundation-mq-medium { font-family: "/only screen and (min-width:40.063em)/"; width: 40.063em; } meta.foundation-mq-large { font-family: "/only screen and (min-width:64.063em)/"; width: 64.063em; } meta.foundation-mq-xlarge { font-family: "/only screen and (min-width:90.063em)/"; width: 90.063em; } meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width:120.063em)/"; width: 120.063em; } meta.foundation-data-attribute-namespace { font-family: false; } .row { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 61.875rem; padding-left: 0.625rem; padding-right: 0.625rem; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .row.collapse>.column, .row.collapse>.columns { padding-left: 0; padding-right: 0; } .row.collapse .row { margin-left: 0; margin-right: 0; } .row .row { width: auto; margin-left: -0.625rem; margin-right: -0.625rem; margin-top: 0; margin-bottom: 0; max-width: none; padding-left: 0.625rem; padding-right: 0.625rem; } .row .row:before, .row .row:after { content: " "; display: table; } .row .row:after { clear: both; } .row .row.collapse { width: auto; margin: 0; max-width: none; padding-left: 0.625rem; padding-right: 0.625rem; } .row .row.collapse:before, .row .row.collapse:after { content: " "; display: table; } .row .row.collapse:after { clear: both; } .column, .columns { padding-left: 0.625rem; padding-right: 0.625rem; width: 100%; float: left; } [class*="column"]+[class*="column"]:last-child { float: right; } [class*="column"]+[class*="column"].end { float: left; } @media only screen { .small-push-0 { position: relative; left: 0%; right: auto; } .small-pull-0 { position: relative; right: 0%; left: auto; } .small-push-1 { position: relative; left: 8.33333%; right: auto; } .small-pull-1 { position: relative; right: 8.33333%; left: auto; } .small-push-2 { position: relative; left: 16.66667%; right: auto; } .small-pull-2 { position: relative; right: 16.66667%; left: auto; } .small-push-3 { position: relative; left: 25%; right: auto; } .small-pull-3 { position: relative; right: 25%; left: auto; } .small-push-4 { position: relative; left: 33.33333%; right: auto; } .small-pull-4 { position: relative; right: 33.33333%; left: auto; } .small-push-5 { position: relative; left: 41.66667%; right: auto; } .small-pull-5 { position: relative; right: 41.66667%; left: auto; } .small-push-6 { position: relative; left: 50%; right: auto; } .small-pull-6 { position: relative; right: 50%; left: auto; } .small-push-7 { position: relative; left: 58.33333%; right: auto; } .small-pull-7 { position: relative; right: 58.33333%; left: auto; } .small-push-8 { position: relative; left: 66.66667%; right: auto; } .small-pull-8 { position: relative; right: 66.66667%; left: auto; } .small-push-9 { position: relative; left: 75%; right: auto; } .small-pull-9 { position: relative; right: 75%; left: auto; } .small-push-10 { position: relative; left: 83.33333%; right: auto; } .small-pull-10 { position: relative; right: 83.33333%; left: auto; } .small-push-11 { position: relative; left: 91.66667%; right: auto; } .small-pull-11 { position: relative; right: 91.66667%; left: auto; } .column, .columns { position: relative; padding-left: 0.625rem; padding-right: 0.625rem; float: left; } .small-1 { width: 8.33333%; } .small-2 { width: 16.66667%; } .small-3 { width: 25%; } .small-4 { width: 33.33333%; } .small-5 { width: 41.66667%; } .small-6 { width: 50%; } .small-7 { width: 58.33333%; } .small-8 { width: 66.66667%; } .small-9 { width: 75%; } .small-10 { width: 83.33333%; } .small-11 { width: 91.66667%; } .small-12 { width: 100%; } .small-offset-0 { margin-left: 0%!important; } .small-offset-1 { margin-left: 8.33333%!important; } .small-offset-2 { margin-left: 16.66667%!important; } .small-offset-3 { margin-left: 25%!important; } .small-offset-4 { margin-left: 33.33333%!important; } .small-offset-5 { margin-left: 41.66667%!important; } .small-offset-6 { margin-left: 50%!important; } .small-offset-7 { margin-left: 58.33333%!important; } .small-offset-8 { margin-left: 66.66667%!important; } .small-offset-9 { margin-left: 75%!important; } .small-offset-10 { margin-left: 83.33333%!important; } .small-offset-11 { margin-left: 91.66667%!important; } .small-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } .column.small-centered, .columns.small-centered { margin-left: auto; margin-right: auto; float: none; } .column.small-uncentered, .columns.small-uncentered { margin-left: 0; margin-right: 0; float: left; } .column.small-centered:last-child, .columns.small-centered:last-child { float: none; } .column.small-uncentered:last-child, .columns.small-uncentered:last-child { float: left; } .column.small-uncentered.opposite, .columns.small-uncentered.opposite { float: right; } } @media only screen and (min-width: 40.063em) { .medium-push-0 { position: relative; left: 0%; right: auto; } .medium-pull-0 { position: relative; right: 0%; left: auto; } .medium-push-1 { position: relative; left: 8.33333%; right: auto; } .medium-pull-1 { position: relative; right: 8.33333%; left: auto; } .medium-push-2 { position: relative; left: 16.66667%; right: auto; } .medium-pull-2 { position: relative; right: 16.66667%; left: auto; } .medium-push-3 { position: relative; left: 25%; right: auto; } .medium-pull-3 { position: relative; right: 25%; left: auto; } .medium-push-4 { position: relative; left: 33.33333%; right: auto; } .medium-pull-4 { position: relative; right: 33.33333%; left: auto; } .medium-push-5 { position: relative; left: 41.66667%; right: auto; } .medium-pull-5 { position: relative; right: 41.66667%; left: auto; } .medium-push-6 { position: relative; left: 50%; right: auto; } .medium-pull-6 { position: relative; right: 50%; left: auto; } .medium-push-7 { position: relative; left: 58.33333%; right: auto; } .medium-pull-7 { position: relative; right: 58.33333%; left: auto; } .medium-push-8 { position: relative; left: 66.66667%; right: auto; } .medium-pull-8 { position: relative; right: 66.66667%; left: auto; } .medium-push-9 { position: relative; left: 75%; right: auto; } .medium-pull-9 { position: relative; right: 75%; left: auto; } .medium-push-10 { position: relative; left: 83.33333%; right: auto; } .medium-pull-10 { position: relative; right: 83.33333%; left: auto; } .medium-push-11 { position: relative; left: 91.66667%; right: auto; } .medium-pull-11 { position: relative; right: 91.66667%; left: auto; } .column, .columns { position: relative; padding-left: 0.625rem; padding-right: 0.625rem; float: left; } .medium-1 { width: 8.33333%; } .medium-2 { width: 16.66667%; } .medium-3 { width: 25%; } .medium-4 { width: 33.33333%; } .medium-5 { width: 41.66667%; } .medium-6 { width: 50%; } .medium-7 { width: 58.33333%; } .medium-8 { width: 66.66667%; } .medium-9 { width: 75%; } .medium-10 { width: 83.33333%; } .medium-11 { width: 91.66667%; } .medium-12 { width: 100%; } .medium-offset-0 { margin-left: 0%!important; } .medium-offset-1 { margin-left: 8.33333%!important; } .medium-offset-2 { margin-left: 16.66667%!important; } .medium-offset-3 { margin-left: 25%!important; } .medium-offset-4 { margin-left: 33.33333%!important; } .medium-offset-5 { margin-left: 41.66667%!important; } .medium-offset-6 { margin-left: 50%!important; } .medium-offset-7 { margin-left: 58.33333%!important; } .medium-offset-8 { margin-left: 66.66667%!important; } .medium-offset-9 { margin-left: 75%!important; } .medium-offset-10 { margin-left: 83.33333%!important; } .medium-offset-11 { margin-left: 91.66667%!important; } .medium-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } .column.medium-centered, .columns.medium-centered { margin-left: auto; margin-right: auto; float: none; } .column.medium-uncentered, .columns.medium-uncentered { margin-left: 0; margin-right: 0; float: left; } .column.medium-centered:last-child, .columns.medium-centered:last-child { float: none; } .column.medium-uncentered:last-child, .columns.medium-uncentered:last-child { float: left; } .column.medium-uncentered.opposite, .columns.medium-uncentered.opposite { float: right; } .push-0 { position: relative; left: 0%; right: auto; } .pull-0 { position: relative; right: 0%; left: auto; } .push-1 { position: relative; left: 8.33333%; right: auto; } .pull-1 { position: relative; right: 8.33333%; left: auto; } .push-2 { position: relative; left: 16.66667%; right: auto; } .pull-2 { position: relative; right: 16.66667%; left: auto; } .push-3 { position: relative; left: 25%; right: auto; } .pull-3 { position: relative; right: 25%; left: auto; } .push-4 { position: relative; left: 33.33333%; right: auto; } .pull-4 { position: relative; right: 33.33333%; left: auto; } .push-5 { position: relative; left: 41.66667%; right: auto; } .pull-5 { position: relative; right: 41.66667%; left: auto; } .push-6 { position: relative; left: 50%; right: auto; } .pull-6 { position: relative; right: 50%; left: auto; } .push-7 { position: relative; left: 58.33333%; right: auto; } .pull-7 { position: relative; right: 58.33333%; left: auto; } .push-8 { position: relative; left: 66.66667%; right: auto; } .pull-8 { position: relative; right: 66.66667%; left: auto; } .push-9 { position: relative; left: 75%; right: auto; } .pull-9 { position: relative; right: 75%; left: auto; } .push-10 { position: relative; left: 83.33333%; right: auto; } .pull-10 { position: relative; right: 83.33333%; left: auto; } .push-11 { position: relative; left: 91.66667%; right: auto; } .pull-11 { position: relative; right: 91.66667%; left: auto; } } @media only screen and (min-width: 64.063em) { .large-push-0 { position: relative; left: 0%; right: auto; } .large-pull-0 { position: relative; right: 0%; left: auto; } .large-push-1 { position: relative; left: 8.33333%; right: auto; } .large-pull-1 { position: relative; right: 8.33333%; left: auto; } .large-push-2 { position: relative; left: 16.66667%; right: auto; } .large-pull-2 { position: relative; right: 16.66667%; left: auto; } .large-push-3 { position: relative; left: 25%; right: auto; } .large-pull-3 { position: relative; right: 25%; left: auto; } .large-push-4 { position: relative; left: 33.33333%; right: auto; } .large-pull-4 { position: relative; right: 33.33333%; left: auto; } .large-push-5 { position: relative; left: 41.66667%; right: auto; } .large-pull-5 { position: relative; right: 41.66667%; left: auto; } .large-push-6 { position: relative; left: 50%; right: auto; } .large-pull-6 { position: relative; right: 50%; left: auto; } .large-push-7 { position: relative; left: 58.33333%; right: auto; } .large-pull-7 { position: relative; right: 58.33333%; left: auto; } .large-push-8 { position: relative; left: 66.66667%; right: auto; } .large-pull-8 { position: relative; right: 66.66667%; left: auto; } .large-push-9 { position: relative; left: 75%; right: auto; } .large-pull-9 { position: relative; right: 75%; left: auto; } .large-push-10 { position: relative; left: 83.33333%; right: auto; } .large-pull-10 { position: relative; right: 83.33333%; left: auto; } .large-push-11 { position: relative; left: 91.66667%; right: auto; } .large-pull-11 { position: relative; right: 91.66667%; left: auto; } .column, .columns { position: relative; padding-left: 0.625rem; padding-right: 0.625rem; float: left; } .large-1 { width: 8.33333%; } .large-2 { width: 16.66667%; } .large-3 { width: 25%; } .large-4 { width: 33.33333%; } .large-5 { width: 41.66667%; } .large-6 { width: 50%; } .large-7 { width: 58.33333%; } .large-8 { width: 66.66667%; } .large-9 { width: 75%; } .large-10 { width: 83.33333%; } .large-11 { width: 91.66667%; } .large-12 { width: 100%; } .large-offset-0 { margin-left: 0%!important; } .large-offset-1 { margin-left: 8.33333%!important; } .large-offset-2 { margin-left: 16.66667%!important; } .large-offset-3 { margin-left: 25%!important; } .large-offset-4 { margin-left: 33.33333%!important; } .large-offset-5 { margin-left: 41.66667%!important; } .large-offset-6 { margin-left: 50%!important; } .large-offset-7 { margin-left: 58.33333%!important; } .large-offset-8 { margin-left: 66.66667%!important; } .large-offset-9 { margin-left: 75%!important; } .large-offset-10 { margin-left: 83.33333%!important; } .large-offset-11 { margin-left: 91.66667%!important; } .large-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; } .column.large-centered, .columns.large-centered { margin-left: auto; margin-right: auto; float: none; } .column.large-uncentered, .columns.large-uncentered { margin-left: 0; margin-right: 0; float: left; } .column.large-centered:last-child, .columns.large-centered:last-child { float: none; } .column.large-uncentered:last-child, .columns.large-uncentered:last-child { float: left; } .column.large-uncentered.opposite, .columns.large-uncentered.opposite { float: right; } .push-0 { position: relative; left: 0%; right: auto; } .pull-0 { position: relative; right: 0%; left: auto; } .push-1 { position: relative; left: 8.33333%; right: auto; } .pull-1 { position: relative; right: 8.33333%; left: auto; } .push-2 { position: relative; left: 16.66667%; right: auto; } .pull-2 { position: relative; right: 16.66667%; left: auto; } .push-3 { position: relative; left: 25%; right: auto; } .pull-3 { position: relative; right: 25%; left: auto; } .push-4 { position: relative; left: 33.33333%; right: auto; } .pull-4 { position: relative; right: 33.33333%; left: auto; } .push-5 { position: relative; left: 41.66667%; right: auto; } .pull-5 { position: relative; right: 41.66667%; left: auto; } .push-6 { position: relative; left: 50%; right: auto; } .pull-6 { position: relative; right: 50%; left: auto; } .push-7 { position: relative; left: 58.33333%; right: auto; } .pull-7 { position: relative; right: 58.33333%; left: auto; } .push-8 { position: relative; left: 66.66667%; right: auto; } .pull-8 { position: relative; right: 66.66667%; left: auto; } .push-9 { position: relative; left: 75%; right: auto; } .pull-9 { position: relative; right: 75%; left: auto; } .push-10 { position: relative; left: 83.33333%; right: auto; } .pull-10 { position: relative; right: 83.33333%; left: auto; } .push-11 { position: relative; left: 91.66667%; right: auto; } .pull-11 { position: relative; right: 91.66667%; left: auto; } } .row.row--full { width: 100%; max-width: 100%; } .webapp-frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .app-sidebar { background-color: #e60045; position: fixed; width: 250px; left: 0; top: 0; bottom: 0; } .app-sidebar p, .app-sidebar a { color: #FFF; } .app-sidebar .nav a { border-bottom: 1px solid #ff0b54; } .app-sidebar .nav a:hover { background-color: #ff0b54; } .app-content { position: fixed; top: 0; left: 250px; right: 0; bottom: 0; overflow-y: auto; } .row--constrained, .constrained { max-width: 47rem; } @-webkit-keyframes revealUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 50% { opacity: 1; } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes revealUp { 0% { opacity: 0; transform: translateY(20px); } 50% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } .form-success { display: none!important; } .form-success.show { display: block!important; } .form-default.hide { display: none!important; } .animate-revealUp { -webkit-animation-name: revealUp; -moz-animation-name: revealUp; animation-name: revealUp; -webkit-animation-timing-function: cubic-bezier(0, 0.865, 0.17, 1); animation-timing-function: cubic-bezier(0, 0.865, 0.17, 1); } @-webkit-keyframes hideDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @keyframes hideDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .animate-hideDown { -webkit-animation-name: hideDown; -moz-animation-name: hideDown; animation-name: hideDown; -webkit-animation-timing-function: cubic-bezier(0, 0.865, 0.17, 1); animation-timing-function: cubic-bezier(0, 0.865, 0.17, 1); } @-webkit-keyframes revealToLeft { 0% { opacity: 0; -webkit-transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes revealToLeft { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } } .animate-revealToLeft { -webkit-animation-name: revealToLeft; -moz-animation-name: revealToLeft; animation-name: revealToLeft; -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } @-webkit-keyframes revealQuote { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes revealQuote { 0% { opacity: 0; } 100% { opacity: 1; } } .animate-revealQuote { -webkit-animation-name: revealQuote; -moz-animation-name: revealQuote; animation-name: revealQuote; -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } @-webkit-keyframes hideQuote { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes hideQuote { 0% { opacity: 1; } 100% { opacity: 0; } } .address-row { display: block; white-space: nowrap; } .animate-hideQuote { -webkit-animation-name: hideQuote; -moz-animation-name: hideQuote; animation-name: hideQuote; -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } #mobile-menu li { -webkit-transition-property: all; -webkit-transition-duration: 0.15s; -webkit-transition-timing-function: cubic-bezier(0.18, 0.9, 0.4, 1.3); transition-property: all; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.18, 0.9, 0.4, 1.3); opacity: 0; -webkit-transform: translateY(-10px) scale(0.6); transform: translateY(-10px) scale(0.6); } #mobile-menu li .divider { -webkit-transition: all 0.2s cubic-bezier(0.18, 0.9, 0.4, 1.3); transition: all 0.2s cubic-bezier(0.18, 0.9, 0.4, 1.3); -webkit-transform: scaleX(0); transform: scaleX(0); } #mobile-menu li.animate-item { opacity: 1; -webkit-transform: translateY(0px) scale(1); transform: translateY(0px) scale(1); } #mobile-menu li.animate-item .divider.animate-divider { -webkit-transform: scaleX(1); transform: scaleX(1); } @-webkit-keyframes hideDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 50% { opacity: 0; } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @keyframes hideDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } .animate-hideDown { -webkit-animation-name: hideDown; -moz-animation-name: hideDown; animation-name: hideDown; -webkit-animation-timing-function: cubic-bezier(0.18, 0.9, 0.4, 1.3); animation-timing-function: cubic-bezier(0.18, 0.9, 0.4, 1.3); } .gallery--image { overflow: hidden; } ::-webkit-selection { color: #FFF; background-color: #e60045; } ::-moz-selection { color: #FFF; background-color: #e60045; } ::-ms-selection { color: #FFF; background-color: #e60045; } ::selection { color: #FFF; background-color: #e60045; } html { overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; color: #0d0d0d; } body>* { box-sizing: border-box; } address { font-style: normal; } .hero-wrapper { position: relative; height: 100%; } .hero-wrapper.init { height: auto; } .image-parent { background-color: #ececec; } .main-nav { z-index: 500; position: relative; } .animate-all { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .divider { background-color: #0d0d0d; border: none; height: 1px; margin-top: 1.75rem; margin-bottom: 2.25rem; width: 100%; display: inline-block; } .home--hero { min-height: 300px; } .home--hero .hero--quote { font-family: NHaasGroteskDSPro-75Bd, "Helvetica Neue", "Helvetica", sans-serif; opacity: 0; } .home--hero .hero--quote .word { opacity: 0; position: relative; display: inline-block; } .home--hero .hero--quote.init { opacity: 0!important; position: relative; } .divider--big { height: 3px; } .no-side-padding { padding-left: 0; padding-right: 0; } .no-left-padding { padding-left: 0; } .no-padding { padding: 0!important; } .no-margin { margin: 0; } .highlight-wrapper { position: absolute; top: 0px; } .dropcase-small { font-size: 2.4rem; color: #0d0d0d; line-height: normal; font-weight: bold; font-family: NHaasGroteskDSPro-75Bd, "Helvetica Neue", "Helvetica", sans-serif; } .highlight-line { background-color: black; border: none; height: 4px; margin-top: 1.75rem; margin-bottom: 1.75rem; width: 100%; display: inline-block; } .twitter-icon-big { width: 1.9rem; margin-top: 2rem; } .lmy-logo { max-width: 100%; position: relative; top: 0; opacity: 1; } .lmy-logo.hover--logo { top: auto; left: 0; opacity: 0; position: absolute; z-index: 100; } .nav-mobile--active .lmy-logo { opacity: 0; transform: translateY(10px); } .nars-title-fix { margin-top: -13px; } .float-title-fix { margin-top: -5px; } @media only screen { .footer--copyright { white-space: nowrap; } .inner-img-thumb img { margin-bottom: 40px; border: 1px solid #cecece; } .desktop-wrapper { position: relative; } .desktop-wrapper .desktop-content { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-top: 5%; padding-right: 5%; padding-left: 5%; } .desktop-wrapper .screen-content { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-right: 5%; padding-left: 5%; } .phone-wrapper { position: absolute; right: 0; bottom: 10%; width: 30%; max-width: 263px; } .phone-wrapper .phone { width: 100%; } .phone-wrapper .phone-content { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-top: 30%; padding-right: 8%; padding-left: 12%; width: 100%; } .products-wrapper { position: relative; } .products-wrapper .product { position: absolute; bottom: -20px; } .products-wrapper .cream-1 { left: 12%; width: 8%; } .products-wrapper .cream-2 { left: 25%; width: 18%; } .products-wrapper .lipstick { right: 14%; width: 4%; } .work-logonav .divider { margin-bottom: 1.75rem; } .hero--quote { padding-top: 1rem; padding-bottom: 1rem; width: 100%; position: relative; z-index: 10; } .home--hero .hero--quote { position: absolute; left: 26px; opacity: 0; } .is-not-scrollable { overflow: hidden; } .is-not-scrollable .nav--mobile { overflow-x: auto; } #brand-mark.to-top { position: absolute; top: 1rem; z-index: 999; } #mobile-nav-trigger-close { margin-top: -4px; } #mobile-nav-trigger-close i { position: relative; top: 2px; font-size: 20px; line-height: 0; color: #e60045; } .mobile-nav-trigger { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; margin-top: 28px; } .mobile-nav-trigger .mobile-menu-icon { font-style: normal; padding-right: 0.4rem; font-size: 0.75rem; } .mobile-nav-trigger .mobile-menu-text { font-size: 0.75rem; } .mobile-nav-trigger.active .mobile-menu-icon { color: #e60045; line-height: 0px; font-size: 1rem; } .mobile-menu { padding: 0; padding-bottom: 4.5rem; list-style: none; margin-top: 2.5rem; font-family: NHaasGroteskDSPro-75Bd, "Helvetica Neue", "Helvetica", sans-serif; } .mobile-menu li { width: 100%; text-align: center; font-size: 1.5rem; font-weight: bold; padding: 0; text-transform: capitalize; } .mobile-menu li .divider { width: 20%; height: 3px; max-width: 4rem; display: block; margin-top: 1.25rem; margin-bottom: 1.25rem; } .mobile-menu li a { color: #0d0d0d; position: relative; } .mobile-menu li a:hover { color: #00b6e4; } .mobile-menu li #menu-twitter-icon { margin-top: 1rem; zoom: 0.2; position: relative; top: 70px; } .nav--mobile { overflow-y: auto; opacity: 0; display: none; } .nav--mobile .brand-svg { width: 44px; height: 29px; margin-top: -5px; } .nav--mobile.active { opacity: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; display: block; background-color: #fff; } .nav--divider { margin-bottom: 0.25rem; } .work--logo { background-position: left top; background-repeat: no-repeat; text-indent: -9999px; position: relative; display: block; color: transparent!important; } .app--logo { float: left; font-size: 1.3rem; } .app--logo a { color: #e60045; } .app--logo a:before { content: ""; border-top: 4px solid #0d0d0d; width: 100%; height: 5px; display: block; position: relative; top: -5px; } .nav--inline { display: none; } .app--menu { display: block; } .hero--quote { font-weight: 700; font-size: 1.5rem; line-height: 2rem; top: -25%; } .hero--quote:before { opacity: 0; content: "\201C"; position: absolute; left: -0.7em; margin-top: -4px; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .hero--quote.active:before { opacity: 1; } .hero--quote.quote-hide:before { opacity: 0; } .hero--quote.quote-visible:before { opacity: 1; } .hero--author { padding-top: 0.5rem; display: block; width: 100%; font-size: 1rem; font-weight: 400; font-family: 'ff-meta-serif-web-pro', Georgia, serif; color: #141e28; opacity: 0; } .section--title { display: inline-block; font-weight: bold; font-size: 1.3rem; color: #e60045; padding: 0 0 1.5rem 0; line-height: 1.1em; } .section--title:before { content: ""; border-top: 4px solid #0d0d0d; width: 100%; height: 5px; display: block; position: relative; top: -37px; } .section--title>img { padding-top: 0.25rem; padding-bottom: 1rem; } .alt--title { color: #00b6e4; font-weight: bold; font-size: 1.3rem; } .section-projects { margin-top: 0; } .section-projects .divider:first-child { margin-top: 0; } .section-projects .project-thumb { -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; opacity: 0.9; margin-bottom: 0.75rem; padding-left: 0; padding-right: 0; overflow: hidden; position: relative; z-index: 1; } .section-projects .project-thumb .thumb--content { position: absolute; width: 100%; top: 50%; z-index: 100; text-align: center; } .section-projects .project-thumb .thumb--logo { margin-bottom: 30px; } .section-projects .project-thumb p { opacity: 0; } .section-projects .project-thumb>a { overflow: hidden; position: relative; display: block; z-index: 1; } .section-projects .thumb--small .thumb--logo { max-width: 80%; } .section-projects .thumb--small .logo--trunkclub { margin-top: -12px; } .section-projects .thumb--small .logo--nars { margin-top: -27px; } .section-projects .thumb--small .logo--float { margin-top: -18px; } .section-projects .thumb--trunkclub .image-parent { background-color: #a7aebc; } .section-projects .thumb--trunkclub .thumb--content { margin-top: -15px; } .section-projects .thumb--nars .image-parent { background-color: #cbb0b0; } .section-projects .thumb--nars .thumb--content { margin-top: -30px; } .section-projects .thumb--float .image-parent { background-color: #87c3e7; } .section-projects .thumb--float .thumb--content { margin-top: -20px; } .container { padding-top: 1rem; padding-bottom: 1rem; } .text-alt { color: #797979; } .container--logos { overflow: hidden; padding-top: 0; padding-bottom: 0; } .container--logos a { padding-top: 0rem; padding-bottom: 0.5rem; text-align: center; display: block; } footer { padding-bottom: 2.5rem; font-family: 'ff-meta-serif-web-pro', Georgia, serif; } footer.page-home { opacity: 0; } footer.page-home.visible { opacity: 1; } footer .lmy-logo { margin-top: -3px; margin-bottom: 5px; } footer .logo-svg { width: 44px; height: 29px; margin-top: -5px; } footer .footer--copyright { font-size: 0.75rem; } footer .address { font-size: 0.9rem; margin-top: 0rem; } footer .address .address--city { font-family: NHaasGroteskDSPro-75Bd, "Helvetica Neue", "Helvetica", sans-serif; font-size: 1rem; } .page--work, .page--contact, .page--jobs { padding-top: 3rem; padding-bottom: 1.5rem; } .page--jobs { padding-bottom: 0; } .page--title { line-height: 2.5rem; } .about--title { font-size: 2rem; margin-top: 14.2%; line-height: 2.5rem; padding-right: 0; font-weight: 700; } .about--header { padding-top: 3.5rem; } .about-title--container { padding-top: 3rem; padding-bottom: 3rem; } .about--desc { padding-left: 0.5rem; } .about--container { padding-left: 4rem; } .service-middle { margin-top: 1.5rem; margin-bottom: 1.5rem; } .team--gallery { margin-top: 1.5rem; } .team--gallery .image-parent { display: block; margin-top: 0.65rem; margin-bottom: 0.65rem; } .team--gallery img { width: 100%; } .contact--header { padding-bottom: 3rem; } .jobs-catalog .section--title, .jobs-catalog .section--title>a { color: #0d0d0d; } .jobs-catalog .section--title:not(:first-child):before, .jobs-catalog .section--title>a:not(:first-child):before { display: none; } .jobs-catalog .section--title.active, .jobs-catalog .section--title.active>a, .jobs-catalog .section--title>a.active, .jobs-catalog .section--title>a.active>a { color: #e60045; } .jobs-catalog .section--title:hover, .jobs-catalog .section--title>a:hover { color: #00b6e4; } .list--header { font-size: 1.1rem; } .job-list { list-style: none; margin: 0; margin-bottom: 2.5rem; padding: 0; } .job-list li:before { content: "• "; font-size: 1rem; position: absolute; color: red; } .job-list li>span { padding-left: 15px; display: inline-block; } .job-offer p, .job-offer li { color: #797979; } .page--workinner .image-container { margin-top: 0.5rem; } .page--workinner .logo-nav:before { content: ""; border-top: 4px solid black; width: 100%; height: 5px; display: block; position: relative; top: -29px; } .page--workinner .workinner--hero { margin-top: 3rem; margin-bottom: 3rem; } .page--workinner .workinner--hero.nars-hero { margin-bottom: 0rem; } .page--workinner .section--title { padding-bottom: 0; margin-bottom: 1rem; } .page--workinner .job-list { margin-top: 0.25rem; margin-bottom: 2rem; color: #797979; } .page--workinner .job-list li { height: 30px; } .page--jobs .section--title.clickable { padding-bottom: 0; margin-bottom: 1rem; } } @media only screen and (max-width: 40.063em) { .small-no-padding-right { padding-right: 0; } .smallonly-fullwidth { width: 100%; text-align: center; display: block; } .smallup-only { display: none; } .job-offer { margin-bottom: 2.5rem; display: block!important; } .partner-logo img { max-width: 126%; left: -13%; position: relative; } .divider--small { margin-top: 1.5rem; margin-bottom: 1.5rem; } } @media only screen and (min-width: 40.063em) { .home--hero { min-height: 420px; } .lmy-logo-link:before { content: ""; position: absolute; width: 100%; height: 4px; background-color: #e60045; z-index: 100; top: -27px; } .lmy-logo-link { position: relative; display: block; } .lmy-logo-link .lmy-logo { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; } .lmy-logo-link .hover--logo { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; } .lmy-logo-link:before { -webkit-transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); -moz-transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); -ms-transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); -o-transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); left: 50%; width: 100%; height: 5px; display: block; position: relative; content: ""; height: 4px; width: 0; background-color: #00b6e4; } .lmy-logo-link:hover .lmy-logo { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: 0; } .lmy-logo-link:hover .hover--logo { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: 1; } .lmy-logo-link:hover:before { -webkit-transition: width 0.22s cubic-bezier(0, 0.865, 0.17, 1), left 0.22s cubic-bezier(0, 0.865, 0.17, 1); -moz-transition: width 0.22s cubic-bezier(0, 0.865, 0.17, 1), left 0.22s cubic-bezier(0, 0.865, 0.17, 1); -ms-transition: width 0.22s cubic-bezier(0, 0.865, 0.17, 1), left 0.22s cubic-bezier(0, 0.865, 0.17, 1); -o-transition: width 0.22s cubic-bezier(0, 0.865, 0.17, 1), left 0.22s cubic-bezier(0, 0.865, 0.17, 1); transition: width 0.22s cubic-bezier(0, 0.865, 0.17, 1), left 0.22s cubic-bezier(0, 0.865, 0.17, 1); left: 0; width: 100%; } .btn--send:hover .overlay { -webkit-transition: width 0.35s cubic-bezier(0, 0.865, 0.17, 1), left 0.35s cubic-bezier(0, 0.865, 0.17, 1); -moz-transition: width 0.35s cubic-bezier(0, 0.865, 0.17, 1), left 0.35s cubic-bezier(0, 0.865, 0.17, 1); -ms-transition: width 0.35s cubic-bezier(0, 0.865, 0.17, 1), left 0.35s cubic-bezier(0, 0.865, 0.17, 1); -o-transition: width 0.35s cubic-bezier(0, 0.865, 0.17, 1), left 0.35s cubic-bezier(0, 0.865, 0.17, 1); transition: width 0.35s cubic-bezier(0, 0.865, 0.17, 1), left 0.35s cubic-bezier(0, 0.865, 0.17, 1); width: 120%; left: -10%; } .btn--send:hover .label { color: #FFF; } .products-wrapper { bottom: -30px; } .products-wrapper .cream-1 { width: 7%; } .products-wrapper .cream-2 { width: 16%; } .products-wrapper .lipstick { width: 4%; } .desktop-wrapper { position: relative; } .desktop-wrapper .desktop-content { margin-top: 4%; } .smallup-no-left-padding { padding-left: 0; } .smallup-no-right-padding { padding-right: 0; } .container--logos { padding-top: 0; padding-bottom: 0.5rem; } .container--logos a { padding-top: 0; padding-bottom: 0; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .container--logos a:hover { opacity: 0.5; } .page--workinner .workinner--hero { margin-top: 0rem; position: relative; } .page--workinner .workinner--hero.nars-hero { margin-bottom: 3rem; } .highlight-wrapper { position: relative; top: -13px; } .is-not-scrollable { overflow: auto; } #main-nav .highlight-line { margin-top: 0; margin-bottom: 1.45rem; } #main-nav .nav--wrapper .btn.twitter:before { top: -17px; } .nav--wrapper { margin-top: 0; } .page--work, .page--contact, .page--jobs, .page--workinner { padding-top: 4rem; padding-bottom: 3rem; } .page--jobs { padding-bottom: 8rem; } .page--jobs .jobs-container { padding-top: 0.1rem; } .page--workinner { padding-top: 5rem; } .page--workinner .container { padding-bottom: 4rem; } .small-only { display: none!important; } .smallup-inlineblock { width: auto; display: inline-block; } .nav--divider { margin-top: 0; margin-bottom: 0.75rem; } .app--logo { padding-top: 0.55rem; font-size: 1.5rem; } .app--logo a { color: #e60045; } .app--logo a:before { top: -12px; } .app--menu { display: none; } .nav--main a { font-size: 0.85rem; font-family: NHaasGroteskDSPro-75Bd, "Helvetica Neue", "Helvetica", sans-serif; } .nav--inline { display: block; font-size: 1rem; } .nav--inline .btn { margin-left: 0.75rem; margin-right: 0.75rem; } .nav--inline .btn a { padding-left: 0; padding-right: 0; color: #0d0d0d; } .nav--inline .btn:before { -webkit-transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); -moz-transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); -ms-transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); -o-transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); transition: width 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615), left 0.1s cubic-bezier(0.595, 0.005, 0.995, 0.615); left: 50%; width: 100%; height: 5px; display: block; position: relative; top: -13px; content: ""; height: 4px; width: 0; background-color: #00b6e4; } .nav--inline .btn:hover:before { -webkit-transition: width 0.4s cubic-bezier(0, 0.865, 0.17, 1), left 0.4s cubic-bezier(0, 0.865, 0.17, 1); -moz-transition: width 0.4s cubic-bezier(0, 0.865, 0.17, 1), left 0.4s cubic-bezier(0, 0.865, 0.17, 1); -ms-transition: width 0.4s cubic-bezier(0, 0.865, 0.17, 1), left 0.4s cubic-bezier(0, 0.865, 0.17, 1); -o-transition: width 0.4s cubic-bezier(0, 0.865, 0.17, 1), left 0.4s cubic-bezier(0, 0.865, 0.17, 1); transition: width 0.4s cubic-bezier(0, 0.865, 0.17, 1), left 0.4s cubic-bezier(0, 0.865, 0.17, 1); left: 0; height: 4px; width: 100%; } .nav--inline .btn.active:before { left: 0; width: 100%; background-color: #e60045; } .nav--inline li:last-child a { padding-right: 0; } .hero { padding-top: 0; padding-bottom: 0; text-align: left; position: relative; } .hero--quote { font-size: 3.5rem; line-height: initial; } .hero--quote:before { left: -0.65em; margin-top: -9px; } .home--hero .hero--quote { padding-top: 6rem; padding-bottom: 6rem; padding-right: 1rem; left: 44px; } .section--title { line-height: 1.6em; margin-top: -4px; font-size: 1.2rem; } .section--title:before { top: -33px; } .section--aligntotitle { margin-top: -13px; } .service-middle { margin-top: 0; margin-bottom: 0; } .team--gallery { margin-top: 2.5rem; } .team--gallery img { width: 100%; } .gallery--middle { margin: 0; } .gallery--bottom-left { padding-left: 0.9rem; } .gallery--bottom-right { padding-right: 0.9rem; } .section-projects .project-thumb:not(.thumb--big) { padding-right: 5px; padding-left: 5px; } .section-projects .project-thumb:not(.thumb--big):first-child { padding-left: 0; padding-right: 10px; } .section-projects .project-thumb:not(.thumb--big):last-child { padding-left: 10px; padding-right: 0; } .section-projects .project-thumb .thumb--border { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid black; z-index: 150; opacity: 0; -webkit-transition: all 0.35s cubic-bezier(0, 0.865, 0.17, 1); -moz-transition: all 0.35s cubic-bezier(0, 0.865, 0.17, 1); -ms-transition: all 0.35s cubic-bezier(0, 0.865, 0.17, 1); -o-transition: all 0.35s cubic-bezier(0, 0.865, 0.17, 1); transition: all 0.35s cubic-bezier(0, 0.865, 0.17, 1); } .section-projects .project-thumb .thumb--background { z-index: 1; position: relative; -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-transition: all 4s cubic-bezier(0, 0.865, 0.17, 1); -moz-transition: all 4s cubic-bezier(0, 0.865, 0.17, 1); -ms-transition: all 4s cubic-bezier(0, 0.865, 0.17, 1); -o-transition: all 4s cubic-bezier(0, 0.865, 0.17, 1); transition: all 4s cubic-bezier(0, 0.865, 0.17, 1); } .section-projects .project-thumb:hover .thumb--border { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .section-projects .project-thumb:hover .image-loaded { opacity: 1; } .section-projects .project-thumb:hover .image-loaded .overlay { opacity: 1; } .section-projects .project-thumb:hover .image-loaded .thumb--background { -webkit-transform: scale(1); transform: scale(1); } .section-projects .thumb--big p { color: rgba(255, 255, 255, 0.85); position: relative; z-index: 15; -webkit-transition: all 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-transition: all 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955); -ms-transition: all 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: all 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: all 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition-delay: 0s; transition-delay: 0s; } .section-projects .thumb--big .thumb--background { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 2.5s cubic-bezier(0, 0.865, 0.17, 1); -moz-transition: all 2.5s cubic-bezier(0, 0.865, 0.17, 1); -ms-transition: all 2.5s cubic-bezier(0, 0.865, 0.17, 1); -o-transition: all 2.5s cubic-bezier(0, 0.865, 0.17, 1); transition: all 2.5s cubic-bezier(0, 0.865, 0.17, 1); } .section-projects .thumb--big:hover p { -webkit-transition-delay: 0.12s; transition-delay: 0.12s; opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } footer { padding-bottom: 5rem; } footer .logo-svg { width: 30px; height: 20px; margin-top: 0; } footer .footer--copyright { margin-top: 1.7rem; font-size: 1rem; } footer .address { margin-top: 0rem; font-size: 1rem; padding-left: 0.5rem; } footer .address .address--city { font-size: 1rem; } .projects--home .project-thumb { margin-bottom: 0; } #app-main { display: block; } .nav-mobile--active .lmy-logo { opacity: 1; } } @media only screen and (min-width: 40.063em) and (max-width: 64em) { .products-wrapper { bottom: -10px; } .products-wrapper .cream-1 { width: 9%; } .products-wrapper .cream-2 { width: 20%; } .products-wrapper .lipstick { width: 5%; } #nav--main .nav--wrapper { margin-top: 4px; } } @media only screen and (min-width: 64.063em) { .contact--header, .jobs--header, .workinner--header { padding-bottom: 3rem; } .products-wrapper .cream-1 { width: 7%; } .products-wrapper .cream-2 { width: 16%; } .products-wrapper .lipstick { width: 4%; } .phone-wrapper { bottom: 1%; } .thumb--big { min-height: 472px; } .about--title { margin-top: 16.3%; } .hero--quote { left: 0px; } .home--hero .hero--quote { left: 10px; } .workinner--hero { width: 120%; left: -10%; margin-left: -20px; position: relative; text-align: center; } .app--logo { padding-top: 0rem; font-size: 1.7rem; } .app--logo a:before { top: -12px; } #main-nav .nav--wrapper { margin-top: 8px; } #main-nav .nav--wrapper .btn:before { top: -21px; } #main-nav .nav--wrapper .btn.twitter { position: relative; top: -2px; } #main-nav .nav--wrapper .btn.twitter:before { top: -23px; } } .not-visible { opacity: 0; } .visible { opacity: 1; } .load-fix { position: relative; } .load-fix.thumb--big { padding-bottom: 49%; } .load-fix.thumb--small { padding-bottom: 100%; overflow: hidden; } .load-fix.work-inner-thumb { padding-bottom: 94%; } .load-fix.work-inner-thumb-nars { padding-bottom: 75%; } .load-fix .absolute { position: absolute!important; top: 0; bottom: 0; left: 0; right: 0; }