html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: sans-serif
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
vertical-align: baseline;
display: inline-block
}
audio:not([controls]) {
height: 0;
display: none
}
[hidden],
template {
display: none
}
a {
background-color: #0000
}
a:active,
a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: 700
}
dfn {
font-style: italic
}
h1 {
margin: .67em 0;
font-size: 2em
}
mark {
color: #000;
background: #ff0
}
small {
font-size: 80%
}
sub,
sup {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code,
kbd,
pre,
samp {
font-family: monospace;
font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type=button],
input[type=reset] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto
}
input[type=search] {
-webkit-appearance: none
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: 700
}
table {
border-collapse: collapse;
border-spacing: 0
}
td,
th {
padding: 0
}
@font-face {
font-family: webflow-icons;
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)format("truetype");
font-weight: 400;
font-style: normal
}
[class^=w-icon-],
[class*=\ w-icon-] {
speak: none;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-weight: 400;
line-height: 1;
font-family: webflow-icons !important
}
.w-icon-slider-right:before {
content: ""
}
.w-icon-slider-left:before {
content: ""
}
.w-icon-nav-menu:before {
content: ""
}
.w-icon-arrow-down:before,
.w-icon-dropdown-toggle:before {
content: ""
}
.w-icon-file-upload-remove:before {
content: ""
}
.w-icon-file-upload-icon:before {
content: ""
}
* {
box-sizing: border-box
}
html {
height: 100%
}
body {
color: #333;
background-color: #fff;
min-height: 100%;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px
}
img {
vertical-align: middle;
max-width: 100%;
display: inline-block
}
html.w-mod-touch * {
background-attachment: scroll !important
}
.w-block {
display: block
}
.w-inline-block {
max-width: 100%;
display: inline-block
}
.w-clearfix:before,
.w-clearfix:after {
content: " ";
grid-area: 1/1/2/2;
display: table
}
.w-clearfix:after {
clear: both
}
.w-hidden {
display: none
}
.w-button {
color: #fff;
line-height: inherit;
cursor: pointer;
background-color: #3898ec;
border: 0;
border-radius: 0;
padding: 9px 15px;
text-decoration: none;
display: inline-block
}
input.w-button {
-webkit-appearance: button
}
html[data-w-dynpage] [data-w-cloak] {
color: #0000 !important
}
.w-code-block {
margin: unset
}
pre.w-code-block code {
all: inherit
}
.w-optimization {
display: contents
}
.w-webflow-badge,
.w-webflow-badge>img {
box-sizing: unset;
width: unset;
height: unset;
max-height: unset;
max-width: unset;
min-height: unset;
min-width: unset;
margin: unset;
padding: unset;
float: unset;
clear: unset;
border: unset;
border-radius: unset;
background: unset;
background-image: unset;
background-position: unset;
background-size: unset;
background-repeat: unset;
background-origin: unset;
background-clip: unset;
background-attachment: unset;
background-color: unset;
box-shadow: unset;
transform: unset;
direction: unset;
font-family: unset;
font-weight: unset;
color: unset;
font-size: unset;
line-height: unset;
font-style: unset;
font-variant: unset;
text-align: unset;
letter-spacing: unset;
-webkit-text-decoration: unset;
text-decoration: unset;
text-indent: unset;
text-transform: unset;
list-style-type: unset;
text-shadow: unset;
vertical-align: unset;
cursor: unset;
white-space: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
transition: unset
}
.w-webflow-badge {
white-space: nowrap;
cursor: pointer;
box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
visibility: visible !important;
opacity: 1 !important;
z-index: 2147483647 !important;
color: #aaadb0 !important;
overflow: unset !important;
background-color: #fff !important;
border-radius: 3px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 6px !important;
font-size: 12px !important;
line-height: 14px !important;
text-decoration: none !important;
display: inline-block !important;
position: fixed !important;
inset: auto 12px 12px auto !important;
transform: none !important
}
.w-webflow-badge>img {
position: unset;
visibility: unset !important;
opacity: 1 !important;
vertical-align: middle !important;
display: inline-block !important
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 10px;
font-weight: 700
}
h1 {
margin-top: 20px;
font-size: 38px;
line-height: 44px
}
h2 {
margin-top: 20px;
font-size: 32px;
line-height: 36px
}
h3 {
margin-top: 20px;
font-size: 24px;
line-height: 30px
}
h4 {
margin-top: 10px;
font-size: 18px;
line-height: 24px
}
h5 {
margin-top: 10px;
font-size: 14px;
line-height: 20px
}
h6 {
margin-top: 10px;
font-size: 12px;
line-height: 18px
}
p {
margin-top: 0;
margin-bottom: 10px
}
blockquote {
border-left: 5px solid #e2e2e2;
margin: 0 0 10px;
padding: 10px 20px;
font-size: 18px;
line-height: 22px
}
figure {
margin: 0 0 10px
}
figcaption {
text-align: center;
margin-top: 5px
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
padding-left: 40px
}
.w-list-unstyled {
padding-left: 0;
list-style: none
}
.w-embed:before,
.w-embed:after {
content: " ";
grid-area: 1/1/2/2;
display: table
}
.w-embed:after {
clear: both
}
.w-video {
width: 100%;
padding: 0;
position: relative
}
.w-video iframe,
.w-video object,
.w-video embed {
border: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
fieldset {
border: 0;
margin: 0;
padding: 0
}
button,
[type=button],
[type=reset] {
cursor: pointer;
-webkit-appearance: button;
border: 0
}
.w-form {
margin: 0 0 15px
}
.w-form-done {
text-align: center;
background-color: #ddd;
padding: 20px;
display: none
}
.w-form-fail {
background-color: #ffdede;
margin-top: 10px;
padding: 10px;
display: none
}
label {
margin-bottom: 5px;
font-weight: 700;
display: block
}
.w-input,
.w-select {
color: #333;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
width: 100%;
height: 38px;
margin-bottom: 10px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.42857;
display: block
}
.w-input::placeholder,
.w-select::placeholder {
color: #999
}
.w-input:focus,
.w-select:focus {
border-color: #3898ec;
outline: 0
}
.w-input[disabled],
.w-select[disabled],
.w-input[readonly],
.w-select[readonly],
fieldset[disabled] .w-input,
fieldset[disabled] .w-select {
cursor: not-allowed
}
.w-input[disabled]:not(.w-input-disabled),
.w-select[disabled]:not(.w-input-disabled),
.w-input[readonly],
.w-select[readonly],
fieldset[disabled]:not(.w-input-disabled) .w-input,
fieldset[disabled]:not(.w-input-disabled) .w-select {
background-color: #eee
}
textarea.w-input,
textarea.w-select {
height: auto
}
.w-select {
background-color: #f3f3f3
}
.w-select[multiple] {
height: auto
}
.w-form-label {
cursor: pointer;
margin-bottom: 0;
font-weight: 400;
display: inline-block
}
.w-radio {
margin-bottom: 5px;
padding-left: 20px;
display: block
}
.w-radio:before,
.w-radio:after {
content: " ";
grid-area: 1/1/2/2;
display: table
}
.w-radio:after {
clear: both
}
.w-radio-input {
float: left;
margin: 3px 0 0 -20px;
line-height: normal
}
.w-file-upload {
margin-bottom: 10px;
display: block
}
.w-file-upload-input {
opacity: 0;
z-index: -100;
width: .1px;
height: .1px;
position: absolute;
overflow: hidden
}
.w-file-upload-default,
.w-file-upload-uploading,
.w-file-upload-success {
color: #333;
display: inline-block
}
.w-file-upload-error {
margin-top: 10px;
display: block
}
.w-file-upload-default.w-hidden,
.w-file-upload-uploading.w-hidden,
.w-file-upload-error.w-hidden,
.w-file-upload-success.w-hidden {
display: none
}
.w-file-upload-uploading-btn {
cursor: pointer;
background-color: #fafafa;
border: 1px solid #ccc;
margin: 0;
padding: 8px 12px;
font-size: 14px;
font-weight: 400;
display: flex
}
.w-file-upload-file {
background-color: #fafafa;
border: 1px solid #ccc;
flex-grow: 1;
justify-content: space-between;
margin: 0;
padding: 8px 9px 8px 11px;
display: flex
}
.w-file-upload-file-name {
font-size: 14px;
font-weight: 400;
display: block
}
.w-file-remove-link {
cursor: pointer;
width: auto;
height: auto;
margin-top: 3px;
margin-left: 10px;
padding: 3px;
display: block
}
.w-icon-file-upload-remove {
margin: auto;
font-size: 10px
}
.w-file-upload-error-msg {
color: #ea384c;
padding: 2px 0;
display: inline-block
}
.w-file-upload-info {
padding: 0 12px;
line-height: 38px;
display: inline-block
}
.w-file-upload-label {
cursor: pointer;
background-color: #fafafa;
border: 1px solid #ccc;
margin: 0;
padding: 8px 12px;
font-size: 14px;
font-weight: 400;
display: inline-block
}
.w-icon-file-upload-icon,
.w-icon-file-upload-uploading {
width: 20px;
margin-right: 8px;
display: inline-block
}
.w-icon-file-upload-uploading {
height: 20px
}
.w-container {
max-width: 940px;
margin-left: auto;
margin-right: auto
}
.w-container:before,
.w-container:after {
content: " ";
grid-area: 1/1/2/2;
display: table
}
.w-container:after {
clear: both
}
.w-container .w-row {
margin-left: -10px;
margin-right: -10px
}
.w-row:before,
.w-row:after {
content: " ";
grid-area: 1/1/2/2;
display: table
}
.w-row:after {
clear: both
}
.w-row .w-row {
margin-left: 0;
margin-right: 0
}
.w-col {
float: left;
width: 100%;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
position: relative
}
.w-col .w-col {
padding-left: 0;
padding-right: 0
}
.w-col-1 {
width: 8.33333%
}
.w-col-2 {
width: 16.6667%
}
.w-col-3 {
width: 25%
}
.w-col-4 {
width: 33.3333%
}
.w-col-5 {
width: 41.6667%
}
.w-col-6 {
width: 50%
}
.w-col-7 {
width: 58.3333%
}
.w-col-8 {
width: 66.6667%
}
.w-col-9 {
width: 75%
}
.w-col-10 {
width: 83.3333%
}
.w-col-11 {
width: 91.6667%
}
.w-col-12 {
width: 100%
}
.w-hidden-main {
display: none !important
}
@media screen and (max-width:991px) {
.w-container {
max-width: 728px
}
.w-hidden-main {
display: inherit !important
}
.w-hidden-medium {
display: none !important
}
.w-col-medium-1 {
width: 8.33333%
}
.w-col-medium-2 {
width: 16.6667%
}
.w-col-medium-3 {
width: 25%
}
.w-col-medium-4 {
width: 33.3333%
}
.w-col-medium-5 {
width: 41.6667%
}
.w-col-medium-6 {
width: 50%
}
.w-col-medium-7 {
width: 58.3333%
}
.w-col-medium-8 {
width: 66.6667%
}
.w-col-medium-9 {
width: 75%
}
.w-col-medium-10 {
width: 83.3333%
}
.w-col-medium-11 {
width: 91.6667%
}
.w-col-medium-12 {
width: 100%
}
.w-col-stack {
width: 100%;
left: auto;
right: auto
}
}
@media screen and (max-width:767px) {
.w-hidden-main,
.w-hidden-medium {
display: inherit !important
}
.w-hidden-small {
display: none !important
}
.w-row,
.w-container .w-row {
margin-left: 0;
margin-right: 0
}
.w-col {
width: 100%;
left: auto;
right: auto
}
.w-col-small-1 {
width: 8.33333%
}
.w-col-small-2 {
width: 16.6667%
}
.w-col-small-3 {
width: 25%
}
.w-col-small-4 {
width: 33.3333%
}
.w-col-small-5 {
width: 41.6667%
}
.w-col-small-6 {
width: 50%
}
.w-col-small-7 {
width: 58.3333%
}
.w-col-small-8 {
width: 66.6667%
}
.w-col-small-9 {
width: 75%
}
.w-col-small-10 {
width: 83.3333%
}
.w-col-small-11 {
width: 91.6667%
}
.w-col-small-12 {
width: 100%
}
}
@media screen and (max-width:479px) {
.w-container {
max-width: none
}
.w-hidden-main,
.w-hidden-medium,
.w-hidden-small {
display: inherit !important
}
.w-hidden-tiny {
display: none !important
}
.w-col {
width: 100%
}
.w-col-tiny-1 {
width: 8.33333%
}
.w-col-tiny-2 {
width: 16.6667%
}
.w-col-tiny-3 {
width: 25%
}
.w-col-tiny-4 {
width: 33.3333%
}
.w-col-tiny-5 {
width: 41.6667%
}
.w-col-tiny-6 {
width: 50%
}
.w-col-tiny-7 {
width: 58.3333%
}
.w-col-tiny-8 {
width: 66.6667%
}
.w-col-tiny-9 {
width: 75%
}
.w-col-tiny-10 {
width: 83.3333%
}
.w-col-tiny-11 {
width: 91.6667%
}
.w-col-tiny-12 {
width: 100%
}
}
.w-widget {
position: relative
}
.w-widget-map {
width: 100%;
height: 400px
}
.w-widget-map label {
width: auto;
display: inline
}
.w-widget-map img {
max-width: inherit
}
.w-widget-map .gm-style-iw {
text-align: center
}
.w-widget-map .gm-style-iw>button {
display: none !important
}
.w-widget-twitter {
overflow: hidden
}
.w-widget-twitter-count-shim {
vertical-align: top;
text-align: center;
background: #fff;
border: 1px solid #758696;
border-radius: 3px;
width: 28px;
height: 20px;
display: inline-block;
position: relative
}
.w-widget-twitter-count-shim * {
pointer-events: none;
-webkit-user-select: none;
user-select: none
}
.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
text-align: center;
color: #999;
font-family: serif;
font-size: 15px;
line-height: 12px;
position: relative
}
.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
display: block;
position: relative
}
.w-widget-twitter-count-shim.w--large {
width: 36px;
height: 28px
}
.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
font-size: 18px;
line-height: 18px
}
.w-widget-twitter-count-shim:not(.w--vertical) {
margin-left: 5px;
margin-right: 8px
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large {
margin-left: 6px
}
.w-widget-twitter-count-shim:not(.w--vertical):before,
.w-widget-twitter-count-shim:not(.w--vertical):after {
content: " ";
pointer-events: none;
border: solid #0000;
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 0
}
.w-widget-twitter-count-shim:not(.w--vertical):before {
border-width: 4px;
border-color: #75869600 #5d6c7b #75869600 #75869600;
margin-top: -4px;
margin-left: -9px
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
border-width: 5px;
margin-top: -5px;
margin-left: -10px
}
.w-widget-twitter-count-shim:not(.w--vertical):after {
border-width: 4px;
border-color: #fff0 #fff #fff0 #fff0;
margin-top: -4px;
margin-left: -8px
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
border-width: 5px;
margin-top: -5px;
margin-left: -9px
}
.w-widget-twitter-count-shim.w--vertical {
width: 61px;
height: 33px;
margin-bottom: 8px
}
.w-widget-twitter-count-shim.w--vertical:before,
.w-widget-twitter-count-shim.w--vertical:after {
content: " ";
pointer-events: none;
border: solid #0000;
width: 0;
height: 0;
position: absolute;
top: 100%;
left: 50%
}
.w-widget-twitter-count-shim.w--vertical:before {
border-width: 5px;
border-color: #5d6c7b #75869600 #75869600;
margin-left: -5px
}
.w-widget-twitter-count-shim.w--vertical:after {
border-width: 4px;
border-color: #fff #fff0 #fff0;
margin-left: -4px
}
.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
font-size: 18px;
line-height: 22px
}
.w-widget-twitter-count-shim.w--vertical.w--large {
width: 76px
}
.w-background-video {
color: #fff;
height: 500px;
position: relative;
overflow: hidden
}
.w-background-video>video {
object-fit: cover;
z-index: -100;
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
margin: auto;
position: absolute;
inset: -100%
}
.w-background-video>video::-webkit-media-controls-start-playback-button {
-webkit-appearance: none;
display: none !important
}
.w-background-video--control {
background-color: #0000;
padding: 0;
position: absolute;
bottom: 1em;
right: 1em
}
.w-background-video--control>[hidden] {
display: none !important
}
.w-slider {
text-align: center;
clear: both;
-webkit-tap-highlight-color: #0000;
tap-highlight-color: #0000;
background: #ddd;
height: 300px;
position: relative
}
.w-slider-mask {
z-index: 1;
white-space: nowrap;
height: 100%;
display: block;
position: relative;
left: 0;
right: 0;
overflow: hidden
}
.w-slide {
vertical-align: top;
white-space: normal;
text-align: left;
width: 100%;
height: 100%;
display: inline-block;
position: relative
}
.w-slider-nav {
z-index: 2;
text-align: center;
-webkit-tap-highlight-color: #0000;
tap-highlight-color: #0000;
height: 40px;
margin: auto;
padding-top: 10px;
position: absolute;
inset: auto 0 0
}
.w-slider-nav.w-round>div {
border-radius: 100%
}
.w-slider-nav.w-num>div {
font-size: inherit;
line-height: inherit;
width: auto;
height: auto;
padding: .2em .5em
}
.w-slider-nav.w-shadow>div {
box-shadow: 0 0 3px #3336
}
.w-slider-nav-invert {
color: #fff
}
.w-slider-nav-invert>div {
background-color: #2226
}
.w-slider-nav-invert>div.w-active {
background-color: #222
}
.w-slider-dot {
cursor: pointer;
background-color: #fff6;
width: 1em;
height: 1em;
margin: 0 3px .5em;
transition: background-color .1s, color .1s;
display: inline-block;
position: relative
}
.w-slider-dot.w-active {
background-color: #fff
}
.w-slider-dot:focus {
outline: none;
box-shadow: 0 0 0 2px #fff
}
.w-slider-dot:focus.w-active {
box-shadow: none
}
.w-slider-arrow-left,
.w-slider-arrow-right {
cursor: pointer;
color: #fff;
-webkit-tap-highlight-color: #0000;
tap-highlight-color: #0000;
-webkit-user-select: none;
user-select: none;
width: 80px;
margin: auto;
font-size: 40px;
position: absolute;
inset: 0;
overflow: hidden
}
.w-slider-arrow-left [class^=w-icon-],
.w-slider-arrow-right [class^=w-icon-],
.w-slider-arrow-left [class*=\ w-icon-],
.w-slider-arrow-right [class*=\ w-icon-] {
position: absolute
}
.w-slider-arrow-left:focus,
.w-slider-arrow-right:focus {
outline: 0
}
.w-slider-arrow-left {
z-index: 3;
right: auto
}
.w-slider-arrow-right {
z-index: 4;
left: auto
}
.w-icon-slider-left,
.w-icon-slider-right {
width: 1em;
height: 1em;
margin: auto;
inset: 0
}
.w-slider-aria-label {
clip: rect(0 0 0 0);
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden
}
.w-slider-force-show {
display: block !important
}
.w-dropdown {
text-align: left;
z-index: 900;
margin-left: auto;
margin-right: auto;
display: inline-block;
position: relative
}
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
vertical-align: top;
color: #222;
text-align: left;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
padding: 20px;
text-decoration: none;
position: relative
}
.w-dropdown-toggle {
-webkit-user-select: none;
user-select: none;
cursor: pointer;
padding-right: 40px;
display: inline-block
}
.w-dropdown-toggle:focus {
outline: 0
}
.w-icon-dropdown-toggle {
width: 1em;
height: 1em;
margin: auto 20px auto auto;
position: absolute;
top: 0;
bottom: 0;
right: 0
}
.w-dropdown-list {
background: #ddd;
min-width: 100%;
display: none;
position: absolute
}
.w-dropdown-list.w--open {
display: block
}
.w-dropdown-link {
color: #222;
padding: 10px 20px;
display: block
}
.w-dropdown-link.w--current {
color: #0082f3
}
.w-dropdown-link:focus {
outline: 0
}
@media screen and (max-width:767px) {
.w-nav-brand {
padding-left: 10px
}
}
.w-lightbox-backdrop {
cursor: auto;
letter-spacing: normal;
text-indent: 0;
text-shadow: none;
text-transform: none;
visibility: visible;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
color: #fff;
text-align: center;
z-index: 2000;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-tap-highlight-color: transparent;
background: #000000e6;
outline: 0;
font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 300;
line-height: 1.2;
list-style: disc;
position: fixed;
inset: 0;
-webkit-transform: translate(0)
}
.w-lightbox-backdrop,
.w-lightbox-container {
-webkit-overflow-scrolling: touch;
height: 100%;
overflow: auto
}
.w-lightbox-content {
height: 100vh;
position: relative;
overflow: hidden
}
.w-lightbox-view {
opacity: 0;
width: 100vw;
height: 100vh;
position: absolute
}
.w-lightbox-view:before {
content: "";
height: 100vh
}
.w-lightbox-group,
.w-lightbox-group .w-lightbox-view,
.w-lightbox-group .w-lightbox-view:before {
height: 86vh
}
.w-lightbox-frame,
.w-lightbox-view:before {
vertical-align: middle;
display: inline-block
}
.w-lightbox-figure {
margin: 0;
position: relative
}
.w-lightbox-group .w-lightbox-figure {
cursor: pointer
}
.w-lightbox-img {
width: auto;
max-width: none;
height: auto
}
.w-lightbox-image {
float: none;
max-width: 100vw;
max-height: 100vh;
display: block
}
.w-lightbox-group .w-lightbox-image {
max-height: 86vh
}
.w-lightbox-caption {
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
background: #0006;
padding: .5em 1em;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden
}
.w-lightbox-embed {
width: 100%;
height: 100%;
position: absolute;
inset: 0
}
.w-lightbox-control {
cursor: pointer;
background-position: 50%;
background-repeat: no-repeat;
background-size: 24px;
width: 4em;
transition: all .3s;
position: absolute;
top: 0
}
.w-lightbox-left {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==);
display: none;
bottom: 0;
left: 0
}
.w-lightbox-right {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+);
display: none;
bottom: 0;
right: 0
}
.w-lightbox-close {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=);
background-size: 18px;
height: 2.6em;
right: 0
}
.w-lightbox-strip {
white-space: nowrap;
padding: 0 1vh;
line-height: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: auto hidden
}
.w-lightbox-item {
box-sizing: content-box;
cursor: pointer;
width: 10vh;
padding: 2vh 1vh;
display: inline-block;
-webkit-transform: translate(0, 0)
}
.w-lightbox-active {
opacity: .3
}
.w-lightbox-thumbnail {
background: #222;
height: 10vh;
position: relative;
overflow: hidden
}
.w-lightbox-thumbnail-image {
position: absolute;
top: 0;
left: 0
}
.w-lightbox-thumbnail .w-lightbox-tall {
width: 100%;
top: 50%;
transform: translateY(-50%)
}
.w-lightbox-thumbnail .w-lightbox-wide {
height: 100%;
left: 50%;
transform: translate(-50%)
}
.w-lightbox-spinner {
box-sizing: border-box;
border: 5px solid #0006;
border-radius: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
animation: .8s linear infinite spin;
position: absolute;
top: 50%;
left: 50%
}
.w-lightbox-spinner:after {
content: "";
border: 3px solid #0000;
border-bottom-color: #fff;
border-radius: 50%;
position: absolute;
inset: -4px
}
.w-lightbox-hide {
display: none
}
.w-lightbox-noscroll {
overflow: hidden
}
@media (min-width:768px) {
.w-lightbox-content {
height: 96vh;
margin-top: 2vh
}
.w-lightbox-view,
.w-lightbox-view:before {
height: 96vh
}
.w-lightbox-group,
.w-lightbox-group .w-lightbox-view,
.w-lightbox-group .w-lightbox-view:before {
height: 84vh
}
.w-lightbox-image {
max-width: 96vw;
max-height: 96vh
}
.w-lightbox-group .w-lightbox-image {
max-width: 82.3vw;
max-height: 84vh
}
.w-lightbox-left,
.w-lightbox-right {
opacity: .5;
display: block
}
.w-lightbox-close {
opacity: .8
}
.w-lightbox-control:hover {
opacity: 1
}
}
.w-lightbox-inactive,
.w-lightbox-inactive:hover {
opacity: 0
}
.w-richtext:before,
.w-richtext:after {
content: " ";
grid-area: 1/1/2/2;
display: table
}
.w-richtext:after {
clear: both
}
.w-richtext[contenteditable=true]:before,
.w-richtext[contenteditable=true]:after {
white-space: initial
}
.w-richtext ol,
.w-richtext ul {
overflow: hidden
}
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,
.w-richtext .w-richtext-figure-selected[data-rt-type=video] div:after,
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
.w-richtext .w-richtext-figure-selected[data-rt-type=image] div {
outline: 2px solid #2895f7
}
.w-richtext figure.w-richtext-figure-type-video>div:after,
.w-richtext figure[data-rt-type=video]>div:after {
content: "";
display: none;
position: absolute;
inset: 0
}
.w-richtext figure {
max-width: 60%;
position: relative
}
.w-richtext figure>div:before {
cursor: default !important
}
.w-richtext figure img {
width: 100%
}
.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
opacity: .6
}
.w-richtext figure div {
color: #0000;
font-size: 0
}
.w-richtext figure.w-richtext-figure-type-image,
.w-richtext figure[data-rt-type=image] {
display: table
}
.w-richtext figure.w-richtext-figure-type-image>div,
.w-richtext figure[data-rt-type=image]>div {
display: inline-block
}
.w-richtext figure.w-richtext-figure-type-image>figcaption,
.w-richtext figure[data-rt-type=image]>figcaption {
caption-side: bottom;
display: table-caption
}
.w-richtext figure.w-richtext-figure-type-video,
.w-richtext figure[data-rt-type=video] {
width: 60%;
height: 0
}
.w-richtext figure.w-richtext-figure-type-video iframe,
.w-richtext figure[data-rt-type=video] iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.w-richtext figure.w-richtext-figure-type-video>div,
.w-richtext figure[data-rt-type=video]>div {
width: 100%
}
.w-richtext figure.w-richtext-align-center {
clear: both;
margin-left: auto;
margin-right: auto
}
.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image>div,
.w-richtext figure.w-richtext-align-center[data-rt-type=image]>div {
max-width: 100%
}
.w-richtext figure.w-richtext-align-normal {
clear: both
}
.w-richtext figure.w-richtext-align-fullwidth {
text-align: center;
clear: both;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
display: block
}
.w-richtext figure.w-richtext-align-fullwidth>div {
padding-bottom: inherit;
display: inline-block
}
.w-richtext figure.w-richtext-align-fullwidth>figcaption {
display: block
}
.w-richtext figure.w-richtext-align-floatleft {
float: left;
clear: none;
margin-right: 15px
}
.w-richtext figure.w-richtext-align-floatright {
float: right;
clear: none;
margin-left: 15px
}
.w-nav {
z-index: 1000;
background: #ddd;
position: relative
}
.w-nav:before,
.w-nav:after {
content: " ";
grid-area: 1/1/2/2;
display: table
}
.w-nav:after {
clear: both
}
.w-nav-brand {
float: left;
color: #333;
text-decoration: none;
position: relative
}
.w-nav-link {
vertical-align: top;
color: #222;
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 20px;
text-decoration: none;
display: inline-block;
position: relative
}
.w-nav-link.w--current {
color: #0082f3
}
.w-nav-menu {
float: right;
position: relative
}
[data-nav-menu-open] {
text-align: center;
background: #c8c8c8;
min-width: 200px;
position: absolute;
top: 100%;
left: 0;
right: 0;
overflow: visible;
display: block !important
}
.w--nav-link-open {
display: block;
position: relative
}
.w-nav-overlay {
width: 100%;
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
overflow: hidden
}
.w-nav-overlay [data-nav-menu-open] {
top: 0
}
.w-nav[data-animation=over-left] .w-nav-overlay {
width: auto
}
.w-nav[data-animation=over-left] .w-nav-overlay,
.w-nav[data-animation=over-left] [data-nav-menu-open] {
z-index: 1;
top: 0;
right: auto
}
.w-nav[data-animation=over-right] .w-nav-overlay {
width: auto
}
.w-nav[data-animation=over-right] .w-nav-overlay,
.w-nav[data-animation=over-right] [data-nav-menu-open] {
z-index: 1;
top: 0;
left: auto
}
.w-nav-button {
float: right;
cursor: pointer;
-webkit-tap-highlight-color: #0000;
tap-highlight-color: #0000;
-webkit-user-select: none;
user-select: none;
padding: 18px;
font-size: 24px;
display: none;
position: relative
}
.w-nav-button:focus {
outline: 0
}
.w-nav-button.w--open {
color: #fff;
background-color: #c8c8c8
}
.w-nav[data-collapse=all] .w-nav-menu {
display: none
}
.w-nav[data-collapse=all] .w-nav-button,
.w--nav-dropdown-open,
.w--nav-dropdown-toggle-open {
display: block
}
.w--nav-dropdown-list-open {
position: static
}
@media screen and (max-width:991px) {
.w-nav[data-collapse=medium] .w-nav-menu {
display: none
}
.w-nav[data-collapse=medium] .w-nav-button {
display: block
}
}
@media screen and (max-width:767px) {
.w-nav[data-collapse=small] .w-nav-menu {
display: none
}
.w-nav[data-collapse=small] .w-nav-button {
display: block
}
.w-nav-brand {
padding-left: 10px
}
}
@media screen and (max-width:479px) {
.w-nav[data-collapse=tiny] .w-nav-menu {
display: none
}
.w-nav[data-collapse=tiny] .w-nav-button {
display: block
}
}
.w-tabs {
position: relative
}
.w-tabs:before,
.w-tabs:after {
content: " ";
grid-area: 1/1/2/2;
display: table
}
.w-tabs:after {
clear: both
}
.w-tab-menu {
position: relative
}
.w-tab-link {
vertical-align: top;
text-align: left;
cursor: pointer;
color: #222;
background-color: #ddd;
padding: 9px 30px;
text-decoration: none;
display: inline-block;
position: relative
}
.w-tab-link.w--current {
background-color: #c8c8c8
}
.w-tab-link:focus {
outline: 0
}
.w-tab-content {
display: block;
position: relative;
overflow: hidden
}
.w-tab-pane {
display: none;
position: relative
}
.w--tab-active {
display: block
}
@media screen and (max-width:479px) {
.w-tab-link {
display: block
}
}
.w-ix-emptyfix:after {
content: ""
}
@keyframes spin {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
.w-dyn-empty {
background-color: #ddd;
padding: 10px
}
.w-dyn-hide,
.w-dyn-bind-empty,
.w-condition-invisible {
display: none !important
}
.wf-layout-layout {
display: grid
}
@font-face {
font-family: Aeonik;
src: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/6403b44fbac136503d77fd12_Aeonik-Light.otf)format("opentype");
font-weight: 300;
font-style: normal;
font-display: block
}
@font-face {
font-family: Aeonik;
src: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/6403b44f19731c1598b44e50_Aeonik-Bold.otf)format("opentype");
font-weight: 700;
font-style: normal;
font-display: block
}
@font-face {
font-family: Aeonik;
src: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/6403b44f9d734164539f9f14_Aeonik-Medium.otf)format("opentype");
font-weight: 500;
font-style: normal;
font-display: block
}
@font-face {
font-family: Aeonik;
src: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/6403b44f40112182417d6f05_Aeonik-Regular.otf)format("opentype");
font-weight: 400;
font-style: normal;
font-display: block
}
@font-face {
font-family: Fkgrotesktrial;
src: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/67ad2e05ea9bf38396f495b7_FKGroteskTrial-Regular.otf)format("opentype");
font-weight: 400;
font-style: normal;
font-display: block
}
:root {
--black: black;
--white: white;
--gray: #ccc;
--blue: #b8ceff
}
.w-layout-layout {
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-auto-columns: 1fr;
justify-content: center;
padding: 20px
}
.w-layout-cell {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex
}
.w-layout-grid {
grid-row-gap: 16px;
grid-column-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid
}
body {
color: #333;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px
}
h1 {
color: #101010;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-family: Aeonik, sans-serif;
font-size: 7vw;
font-weight: 400;
line-height: 6.5vw
}
h3 {
color: #101010;
letter-spacing: -.5px;
margin-top: 0;
margin-bottom: 0;
font-family: Aeonik, sans-serif;
font-size: 1.4vw;
font-weight: 400;
line-height: 1.7vw
}
h4 {
color: #101010;
margin-top: 0;
margin-bottom: 0;
font-family: Aeonik, sans-serif;
font-size: 1.1vw;
font-weight: 400;
line-height: 1.3vw
}
a {
color: #101010;
text-decoration: underline
}
.utility-page-wrap {
justify-content: center;
align-items: center;
width: 100vw;
max-width: 100%;
height: 100vh;
max-height: 100%;
display: flex
}
.utility-page-content {
text-align: center;
flex-direction: column;
width: 260px;
display: flex
}
.utility-page-form {
flex-direction: column;
align-items: stretch;
display: flex
}
.home-cover {
background-color: #151515;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0;
display: flex
}
.form-fun-home {
color: #cfcfcf;
text-align: left;
letter-spacing: -9px;
flex: 0 auto;
order: 0;
align-self: center;
font-family: Aeonik, sans-serif;
font-size: 12vw;
font-weight: 400;
line-height: 12vw
}
.body {
cursor: none
}
.module-blocks {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
padding-top: 4vw;
padding-left: 1vw;
padding-right: 1vw;
display: flex
}
.module-blocks.small-gap-bottom {
padding-bottom: 1vw
}
.module-blocks.no-gap-up-down {
padding-top: 1vw;
padding-bottom: 0
}
.module-blocks.no-gap-up {
padding-top: 0
}
.module-blocks.no-gap-up-bottom {
padding-top: 1vw;
padding-bottom: 0
}
.module-blocks.hide {
display: none
}
.module-blocks.awards {
margin-top: 0
}
.module-blocks.about {
margin-bottom: 6vw;
padding-top: 8vw
}
.module-hero {
padding-left: 1vw;
padding-right: 1vw
}
.module-hero.studio {
margin-top: 8vw
}
.module-hero.intro {
padding-top: 8vw;
padding-bottom: 8vw
}
.header-container {
aspect-ratio: 2;
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
display: flex;
position: relative;
overflow: hidden
}
.header-container.height-auto {
height: auto
}
.header-container.home {
background-color: #f5f4f2
}
.field-label {
display: none
}
.h1-intro {
color: #1d1d1d;
letter-spacing: -.1vw;
white-space: normal;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 4.4vw;
line-height: 100%;
display: inline
}
.h1-intro.intro-text-indent {
text-indent: 8.33%
}
.hero-container {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr
}
.copy {
color: #1d1d1d;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 1vw;
line-height: 120%
}
.overflow {
cursor: none;
width: 100%;
position: relative;
overflow: hidden
}
.slider-css {
object-fit: fill;
height: 0;
position: fixed;
inset: 0% 0% auto
}
.section {
cursor: none
}
.container {
cursor: none;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 25.7vw 0 20.7vw
}
.splide {
width: 100%;
position: relative
}
.splide.slider3 {
font-family: Aeonik, sans-serif;
overflow: hidden
}
.splide__track {
width: 100%
}
.splide__list {
width: 58.6vw;
display: flex
}
.splide__list.home {
width: auto
}
.splide__list.home-marquee {
align-items: flex-start;
width: 100%
}
.splide__list.expertise {
width: 100%
}
.splide__list.awards {
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-top: 0;
margin-bottom: 0
}
.splide__slide {
flex: none;
align-self: center;
padding-left: 5.1vw;
padding-right: 5.1vw
}
.splide__slide.home {
aspect-ratio: 3/3.5;
cursor: none;
width: 100%;
padding-left: 0;
padding-right: 0;
position: relative
}
.splide__slide.home.expertise {
aspect-ratio: auto
}
.splide__slide.home-marquee {
align-self: flex-start;
padding-left: 0;
padding-right: 0
}
.splide__slide.awards {
width: 100%;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
padding-right: 0
}
.slider-square {
border-radius: 8px;
overflow: hidden
}
.module-slider {
grid-column-gap: 8vw;
grid-row-gap: 8vw;
flex-flow: column;
padding-top: 8vw;
padding-bottom: 8vw;
display: flex
}
.module-slider.no-gap-bottom {
padding-bottom: 0
}
.module-slider.home {
padding-top: 8vw;
padding-bottom: 8vw
}
.module-slider.expertise {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
padding-top: 0;
padding-left: 1vw;
padding-right: 1vw
}
.full-video {
box-sizing: border-box;
aspect-ratio: 2;
object-fit: cover;
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: block;
overflow: hidden
}
.full-video.home {
background-color: #f5f4f2
}
.secondary-copy {
color: #1d1d1d;
font-family: Aeonik, sans-serif;
font-size: .9vw;
line-height: 120%
}
.secondary-copy.floating {
margin-top: .8vw;
position: absolute
}
.secondary-copy.gray {
color: #a7aaae;
cursor: default
}
.context-cell {
grid-column-gap: .4vw;
grid-row-gap: .4vw;
flex-flow: column;
justify-content: flex-start;
display: flex
}
.subhead {
color: #1d1d1d;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 1.35vw;
font-weight: 400;
line-height: 130%
}
.nav {
z-index: 100;
grid-column-gap: 1vw;
grid-row-gap: 0px;
background-color: #fff;
width: 100%;
height: 46px;
padding: 0 1vw;
position: fixed;
top: 0
}
.nav.internal {
position: static
}
.nav-inner {
grid-column-gap: 1vw;
display: flex
}
.nav-cell {
justify-content: center;
align-items: flex-end
}
.h1-heading {
color: #1d1d1d;
text-align: center;
letter-spacing: -.2vw;
text-transform: uppercase;
white-space: normal;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 9.2vw;
line-height: 1;
overflow: hidden
}
.full-image {
object-fit: cover;
width: 100%;
height: 100%
}
.bodycopy {
color: #1d1d1d;
text-align: center;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: .9vw;
line-height: 130%
}
.small-title {
color: #1d1d1d;
text-transform: uppercase;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 1vw;
font-weight: 500;
line-height: 120%
}
.h1-title {
color: #1d1d1d;
letter-spacing: -.4vw;
text-transform: uppercase;
white-space: nowrap;
word-break: keep-all;
overflow-wrap: break-word;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 12.4vw;
line-height: .9;
overflow: hidden
}
.h1-title.fade-up.tricks {
white-space: nowrap;
overflow: hidden
}
.h1-title.doordash {
font-size: 9.5vw
}
.h1-title.powerade {
font-size: 9.9vw
}
.project-tag {
background-color: #f3f4f2;
border-radius: 5vw;
flex: none;
padding: 1vw 1.6vw
}
.small-container {
aspect-ratio: 35/28;
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 50%;
display: flex;
position: relative;
overflow: hidden
}
.large-container {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
aspect-ratio: 36/29;
object-fit: cover;
background-color: #f5f4f2;
border-radius: 8px;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.center-cell {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
padding: 0 2vw;
display: flex
}
.small-video {
aspect-ratio: 35/28;
width: 100%;
overflow: hidden
}
.text-wrapper {
color: #1d1d1d;
text-transform: uppercase;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-top: 3vw;
margin-bottom: 1vw;
font-family: Aeonik, sans-serif;
font-size: 3.8rem;
line-height: 1;
display: flex;
overflow: hidden
}
.module-heading {
grid-row-gap: 2vw;
flex-flow: column;
justify-content: center;
align-items: center;
padding: 8vw 1vw 0;
display: flex
}
.h1-subhead {
color: #a7aaae;
text-align: center;
cursor: default;
width: 40%;
font-family: Aeonik, sans-serif;
font-size: 1.2vw;
font-weight: 400;
line-height: 130%
}
.h1-subhead.large {
width: 55%
}
.oreo-overview {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
padding: 8vw 1vw 0
}
.grid-container {
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
height: 26vw;
display: flex;
overflow: hidden
}
.arcade-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66a575e4aa88c4c4252e23f1_01-Arcade.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.medium-video {
z-index: 1;
aspect-ratio: 16/9;
width: 100%;
position: relative;
overflow: hidden
}
.small-image {
object-fit: cover;
width: 100%
}
.large-image {
object-fit: cover;
width: 100%;
height: 39vw
}
.suitcase-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66a575e47f78e27bf16639ca_02-Suitcase.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.mini-arcade-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66a575e4ac633bfd0f3a7e96_03-Mini-Arcade.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.mini-game-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66a92d22cddd615e2b6a844c_04-Mini-Game.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.large-video {
box-sizing: border-box;
aspect-ratio: 36/29;
object-fit: cover;
background-color: #f5f4f2;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
overflow: hidden
}
.wide-container {
aspect-ratio: 2;
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.oreo-play-reel {
cursor: none;
width: 100%;
height: 100%
}
.slider {
cursor: none;
background-color: #fff0;
width: 100%;
height: 100%
}
.slide-nav {
display: none
}
.right-arrow {
cursor: none;
width: 50%;
inset: 0% 0% 0% auto
}
.left-arrow {
cursor: none;
width: 50%;
inset: 0% auto 0% 0%
}
.cursor-container {
z-index: 200;
pointer-events: none;
cursor: none;
justify-content: center;
align-items: center;
display: flex;
position: fixed;
inset: 0%
}
.cursor-gallery {
pointer-events: none;
cursor: none;
border: 1.2px solid #fff0;
border-radius: 50%;
width: 2.5vw;
height: 2.5vw;
overflow: hidden
}
.gallery-arrow {
opacity: 0;
cursor: none;
width: .4vw;
position: absolute
}
.left-arrow-cta,
.right-arrow-cta {
cursor: none;
background-color: #ddd;
border-radius: 50px;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
display: none
}
.counter {
cursor: none;
background-color: #ddd;
border-radius: 50px;
justify-content: center;
align-items: center;
width: 2.5vw;
height: 2.5vw;
margin-bottom: 1vw;
margin-left: 1vw;
margin-right: 1vw;
display: flex
}
.counter.right {
margin-left: 0;
margin-right: 1vw;
inset: auto 0% 0% auto
}
.counter.right.gray {
background-color: #1d1d1d
}
.counter-copy {
color: #1d1d1d;
text-align: center;
font-family: Aeonik, sans-serif;
font-size: .6vw;
line-height: 120%
}
.counter-copy.white {
color: #f5f4f2
}
.splide__arrows {
z-index: 2;
opacity: 0;
pointer-events: none;
object-fit: fill;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
margin-left: -1.2vw;
padding-left: 0;
padding-right: 0;
display: flex;
position: absolute;
inset: 0%
}
.splide__arrow {
pointer-events: auto;
background-color: #f5f4f2;
border-radius: 50px;
justify-content: center;
align-items: center;
width: 2.5vw;
height: 2.5vw;
display: flex
}
.splide__arrow.splide__arrow--next {
margin-right: -7.4vw
}
.slider-arrow-icon {
filter: invert();
width: .4vw;
position: absolute
}
.play {
opacity: 0;
cursor: none;
width: .6vw;
height: .6vw;
margin-left: 3px;
position: absolute
}
.drag {
opacity: 0;
width: 1.2vw;
height: .8vw;
margin-top: .05vw;
overflow: visible
}
.drag-container {
cursor: none;
justify-content: center;
align-self: center;
align-items: flex-start;
width: 1.2vw;
height: .8vw;
display: flex;
position: absolute;
overflow: hidden
}
.text-block {
font-size: 4rem
}
.h1-container {
overflow: hidden
}
.h1-container.line-2 {
margin-top: -1vw;
padding-top: 0;
padding-bottom: 1vw
}
.h1-container.line-1 {
padding-top: 65px;
padding-bottom: 1vw
}
.video-player-wrapper {
width: 100%;
max-width: 67.5rem;
margin-left: auto;
margin-right: auto;
position: relative
}
.padding-global {
padding-left: 2.5rem;
padding-right: 2.5rem
}
.html-video-wrapper {
border-radius: 1.5rem;
width: 100%;
min-width: 1080px;
min-height: 600px;
position: relative;
overflow: hidden
}
.video-controls-wrapper {
z-index: 3;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
color: #fff;
background-image: linear-gradient(#fff0, #08090d 95%);
border-bottom-right-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
flex-direction: column;
align-items: stretch;
width: 100%;
padding: 1rem 3rem;
display: flex;
position: absolute;
inset: auto 0% 0%
}
.video-controls-wrapper.is-blurred {
grid-column-gap: .5rem;
grid-row-gap: .5rem;
-webkit-backdrop-filter: blur(13px);
backdrop-filter: blur(13px);
background-color: #232323cc;
background-image: none;
border-radius: 1.25rem;
flex-direction: column;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
align-items: stretch;
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding: .625rem 2.1875rem 1.25rem;
display: grid;
bottom: 3.125rem;
box-shadow: inset 0 0 0 1px #23232380
}
.container-large {
width: 100%;
max-width: 80rem;
margin-left: auto;
margin-right: auto
}
.padding-bottom {
padding-top: 0;
padding-left: 0;
padding-right: 0
}
.control-button {
z-index: 19;
color: #fff;
border-radius: 100vw;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
display: flex;
position: relative
}
.control-button.is-padding {
padding: .6rem;
display: block
}
.video-controls {
grid-column-gap: 6px;
grid-row-gap: 6px;
color: #fff;
align-items: center;
display: flex
}
.video-controls.player_2 {
justify-content: center
}
.section_player-2 {
background-color: #f3fcff;
justify-content: center;
align-items: center;
min-height: 100vh;
display: flex
}
.time-controls-wrapper {
grid-column-gap: .1rem;
grid-row-gap: .1rem;
grid-template-rows: auto;
grid-template-columns: 5% 90% 5%;
grid-auto-columns: 1fr;
justify-content: stretch;
align-items: center;
display: flex
}
.html-icon {
justify-content: center;
align-items: center;
width: 1.3rem;
height: 1.3rem;
display: flex
}
.padding-section-small {
padding-top: 4rem;
padding-bottom: 4rem
}
.track {
background-color: #fafafa29;
width: 100%;
height: 5px
}
.track.video-element {
border-radius: 40px;
position: relative
}
.track.video-element.large {
height: 8px;
overflow: hidden
}
.html-video-player {
z-index: 0;
aspect-ratio: 16/9;
border-radius: 25px;
width: 100%;
height: 100%;
position: relative;
overflow: hidden
}
.video-element {
color: #fff9f9
}
.video-loading-track {
background-color: #9094a0;
border-radius: 40px;
width: 0%;
height: 100%;
position: absolute;
inset: 0%
}
.trackinner {
z-index: 1;
background-color: #fff;
border-radius: 40px;
width: 0%;
height: 100%;
position: relative
}
.trackinner.large {
height: 8px
}
.tutorial-1-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66b559ab486034127cb2d282_Tutorial_01.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.tutorial-2-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66b559acaaf61151853da7fa_Tutorial_02.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.tutorial-3-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66b559acf461c0738a000ac8_Tutorial_03.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.tutorial-4-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66b559aba7af0fb805433e38_Tutorial_04.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
._2-column-grid {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
align-items: flex-start;
display: flex
}
._2-column-small {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
justify-content: flex-start;
align-items: center;
width: 100%;
display: flex
}
.large-container-no-bg {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
aspect-ratio: 36/29;
object-fit: cover;
border-radius: 8px;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
overflow: hidden
}
._2-column-grid-gallery {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
align-items: flex-start;
display: flex
}
.grid-context-container {
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template: ".Area Area Area-2 Area-2 Area-3 Area-3 Area-4 Area-4 Area-5 Area-5" /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
width: 100%;
margin-top: 3vw
}
.grid-context-subhead {
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template: "Area-2 Area Area Area Area Area Area Area Area" /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
width: 100%;
margin-top: 4vw
}
.grid-tags {
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
width: 100%;
margin-top: 4vw
}
.container-tags {
grid-column-gap: .6vw;
grid-row-gap: .6vw;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
display: flex
}
.slider-arrow-icon-mobile {
filter: invert();
width: 10px;
position: absolute
}
.container-counter {
position: absolute;
inset: auto 0% 0%
}
.container-counter.right {
left: auto
}
._3-grid-posters {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
padding: 4vw 1vw 0
}
.vertical-poster-container {
aspect-ratio: 29/41;
background-color: #f5f4f2;
border-radius: 8px;
width: 100%;
overflow: hidden
}
.doordash-grid {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "Area Area-3 Area-3 Area-2" "Area-4 Area-3 Area-3 Area-5";
width: 100%;
padding-top: 8vw;
padding-left: 1vw;
padding-right: 1vw
}
.square-portrait-container {
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
height: 53vw;
display: flex;
overflow: hidden
}
.grid-container-small {
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
height: 26vw;
display: flex;
overflow: hidden
}
.grid-context-container-2-item {
grid-column-gap: 1vw;
grid-row-gap: 3vw;
grid-template: ".Area Area Area-2 Area-2" /1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
width: 100%;
margin-top: 3vw
}
.doordash-flamingo {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c527b8ceddba8df92a054f_Still-Flamingo.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-milkshake {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c527b868d9a7f4e2681973_Still-Milkshake.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-watermelon {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c527b88f3edd7f9e382949_Still-Watermelon.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-hotdog {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c527b811536d0751ade039_Still-Hotdog.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-cocktail {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c527b88f3edd7f9e38292a_Still-Cocktail.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-sunscreen {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c527b89f2822faedd1b1dc_Still-Sunscreen.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-sunglasses {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c606985d7178b9abcf916f_Still-Sunglasses.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-popsicle {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c60698b043605c2daa5805_Still-Popsicle.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-flipflop {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c60698af563308863a5804_Still-Flipflop.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.doordash-dogtreat {
aspect-ratio: 16/9;
background-color: #f5f4f2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/66c6069825a1a0dd87b2bc38_Still-Dogtreat.jpg);
background-position: 50%;
background-size: cover;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.powerade-overview {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
padding: 8vw 1vw 0
}
.grid-container-vertical {
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
height: 53vw;
display: flex;
overflow: hidden
}
.image-container-slider {
aspect-ratio: auto;
border-radius: 8px;
overflow: hidden
}
.landscape-video-container {
aspect-ratio: 16/9;
background-color: #f5f4f2;
border-radius: 8px;
width: 57vw;
position: relative;
overflow: hidden
}
.center-cell-gallery {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
justify-content: center;
align-items: center;
width: 40vw;
height: 32vw;
padding-left: 12vw;
padding-right: 12vw;
display: flex
}
.center-cell-gallery.wide {
padding-left: 6vw;
padding-right: 6vw
}
.module-gallery {
grid-column-gap: 6vw;
grid-row-gap: 6vw;
flex-flow: column;
padding: 4vw 1vw 5vw;
display: flex
}
.overview-image {
border-radius: 30px;
width: 100%
}
.overview-line {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
align-items: flex-start;
display: flex
}
.module-overview-gallery {
grid-column-gap: 3vw;
grid-row-gap: 3vw;
flex-flow: column;
align-items: flex-start;
padding-top: 6vw;
padding-bottom: 2vw;
display: flex;
overflow: hidden
}
.container-rotation {
perspective: 800px;
min-width: 24vw;
transform: perspective(1000px)
}
.ai-container {
width: 50%
}
.ai-wrapper {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
align-items: flex-start;
margin-top: 3vw;
display: flex
}
.ai-image-container {
object-fit: fill;
background-color: #e4e4e4;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
height: 47.7vw;
display: flex;
position: relative;
overflow: hidden
}
.form-fun-wrapper {
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
display: flex
}
.lottie-animation {
width: 48.3vw
}
.home-intro {
color: #1d1d1d;
letter-spacing: -.1vw;
white-space: normal;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 4.4vw;
line-height: 100%;
display: inline
}
.home-slider-container {
cursor: none;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0;
padding-bottom: 0;
padding-left: 1vw
}
.video {
z-index: 1;
aspect-ratio: 5/6;
width: 100%;
height: 100%;
position: relative;
overflow: hidden
}
.home-video-container {
cursor: none;
border-radius: 8px;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
position: relative;
overflow: hidden
}
.home-video-container.landscape {
background-color: #f5f4f2;
justify-content: center;
width: 64vw;
height: 42vw
}
.home-video-container.portrait {
background-color: #f5f4f2;
width: 33vw;
height: 42vw
}
.portfolio-container {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
align-items: flex-start;
display: flex
}
.h2-title {
pointer-events: none;
color: #1d1d1d;
letter-spacing: -.2vw;
text-transform: uppercase;
white-space: nowrap;
word-break: keep-all;
overflow-wrap: break-word;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 7vw;
line-height: .9;
overflow: hidden
}
.h2-title.gray {
color: #e5e5e5
}
.h2-title.sticky-title {
pointer-events: auto;
margin-bottom: 4vw
}
.work-tag-container {
z-index: 5;
justify-content: space-between;
align-items: flex-start;
width: 100%;
padding-left: 1vw;
padding-right: 1vw;
display: flex
}
.myvideoclass-bkp {
z-index: 2;
background-color: #f5f4f2;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: relative
}
.myvideoclass-bkp.landscape {
display: block
}
.myvideoclass-bkp.portrait {
width: 100%;
display: block
}
.myvideoclass-bkp.expertise {
aspect-ratio: 1;
border-radius: 8px;
width: 100%
}
.myvideoclass-bkp.nav {
width: 50%
}
.myvideoclass-bkp.work-nav {
aspect-ratio: 3/2;
border-radius: 8px;
flex: none;
overflow: hidden
}
.work-marquee {
margin-bottom: 0
}
.video-slider-container {
background-color: #f5f4f2;
border-radius: 8px;
width: 100%;
height: 100%;
position: relative;
overflow: hidden
}
.expertise-container {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
cursor: auto;
border-radius: 8px;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
padding-top: 0;
padding-left: 0;
padding-right: 0;
text-decoration: none;
transition: padding .4s cubic-bezier(.23, 1, .32, 1);
display: flex;
overflow: hidden
}
.expertise-container.blue {
transition: background-color .4s cubic-bezier(.23, 1, .32, 1), padding .4s cubic-bezier(.23, 1, .32, 1)
}
.expertise-container.blue:hover {
background-color: #d5f2f6
}
.expertise-container.magenta {
transition: background-color .4s cubic-bezier(.23, 1, .32, 1)
}
.expertise-container.magenta:hover {
background-color: #fbefff
}
.expertise-container.green {
transition: background-color .4s cubic-bezier(.23, 1, .32, 1), padding .4s cubic-bezier(.23, 1, .32, 1)
}
.expertise-container.green:hover {
background-color: #e5f4e1
}
.expertise-wrapper {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
justify-content: space-between;
align-items: flex-start;
display: flex
}
.h4 {
color: #1d1d1d;
text-align: left;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 1vw;
font-weight: 400;
line-height: 130%
}
.h4.gray {
color: #9a9a9a
}
.h4.floating {
cursor: default;
margin-top: .6vw;
position: absolute
}
.h3 {
color: #1d1d1d;
letter-spacing: -.1vw;
text-transform: none;
white-space: normal;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 3.4vw;
line-height: 100%
}
.expertise-image-container {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
border-radius: 8px;
flex-flow: column;
flex: 1;
align-items: flex-start;
width: 100%;
transition: padding .4s cubic-bezier(.23, 1, .32, 1);
display: flex;
position: relative;
overflow: hidden
}
.expertise-image-container:hover {
padding: 1.4vw
}
.h3-expertise {
color: #a7aaae;
text-align: left;
cursor: none;
font-family: Aeonik, sans-serif;
font-size: 1vw;
font-weight: 400;
line-height: 130%
}
.h3-expertise.dark {
color: #1d1d1d
}
.ai-info-wrapper {
cursor: none;
border-top: 1px solid #0000001a;
flex-flow: row;
align-items: flex-start;
padding-top: 1.6vw;
padding-bottom: 1.8vw;
text-decoration: none;
display: flex
}
.ai-info-wrapper.last {
border-bottom: 1px solid #0000001a
}
.text-container {
grid-column-gap: 1.2vw;
grid-row-gap: 1.2vw;
flex-flow: column;
align-items: flex-start;
width: 75%;
display: flex
}
.ai-counter-wrapper {
width: 8vw;
padding-top: .2vw
}
.expertise-categories {
width: 100%;
display: flex
}
.div-block-10 {
grid-column-gap: .3vw;
grid-row-gap: .3vw;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
width: 50%;
display: flex
}
.view-container {
cursor: none;
justify-content: center;
align-self: center;
align-items: flex-start;
width: 1.3vw;
height: .8vw;
display: flex;
position: absolute;
overflow: hidden
}
.view {
opacity: 0;
width: 1.3vw;
height: .8vw;
margin-top: .05vw;
overflow: visible
}
.marquee-container {
grid-column-gap: 2.4vw;
grid-row-gap: 2.4vw;
align-items: center;
width: 100%;
height: 6vw;
display: flex
}
.creative-tech-marquee {
text-align: center;
text-transform: uppercase;
font-family: Aeonik, sans-serif;
font-size: .6vw;
font-weight: 500;
line-height: 1.1
}
.logo-marquee {
width: 26vw
}
.marquee-block {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
width: 100%;
padding-top: 8vw;
padding-bottom: 8vw;
display: flex;
overflow: hidden
}
.code-embed {
width: 100%
}
.brands-general-container {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: row;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-top: 2vw;
display: flex
}
.brands-block-container {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
object-fit: fill;
border-radius: 8px;
flex-flow: column;
align-items: flex-start;
width: 100%;
height: 15vw;
overflow: hidden
}
.brands-block-container.swiper5 {
display: none
}
.single-brand-container {
aspect-ratio: 1;
background-color: #f6f6f6;
overflow: hidden
}
.brands-container-slider {
width: 100%
}
.footer {
padding: 6vw 1vw 1vw
}
.logo-footer {
width: 100%
}
.footer-grid {
grid-column-gap: 0px;
grid-row-gap: 2vw;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-columns: auto;
margin-bottom: 10vw;
padding: 0
}
.footer-links {
color: #1d1d1d;
font-family: Aeonik, sans-serif;
font-size: 1vw;
line-height: 120%;
text-decoration: none;
transition: opacity .2s
}
.footer-links:hover {
text-decoration: underline
}
.footer-links.gray {
color: #9a9a9a;
cursor: default
}
.footer-links.gray:hover {
text-decoration: none
}
.footer-links-container {
grid-column-gap: .7vw;
grid-row-gap: .7vw;
flex-flow: column;
align-items: flex-start;
padding-left: .5vw;
display: flex
}
.form-fun-logo {
width: 40px
}
.nav-logo {
width: 34px
}
.selected-work-container {
flex-flow: column;
justify-content: flex-start;
align-items: flex-end;
margin-top: .8vw;
display: flex
}
.work-tags-container {
z-index: 5;
justify-content: space-between;
align-self: flex-start;
align-items: flex-start;
width: 100%;
padding-top: 1vw;
padding-left: 1vw;
padding-right: 1vw;
display: flex;
position: absolute
}
.work-tags-container.nav {
position: static
}
.work-tags-container.work-nav {
flex: none;
justify-content: space-between;
align-items: center;
width: auto;
height: 100%;
padding-top: 0;
padding-left: 0;
padding-right: 0;
position: static
}
.work-tags {
color: #fff;
cursor: none;
font-family: Aeonik, sans-serif;
font-size: 1vw;
line-height: 140%;
text-decoration: none;
transition: opacity .2s;
overflow: hidden
}
.work-tags.dark {
color: #1d1d1d
}
.work-tags.fade-up.tricks.work-title.hide-tablet {
display: block
}
.work-tags.nav-work {
color: #a0a0a0;
text-transform: uppercase;
font-size: .8vw
}
.work-tags.work-title.nav-work {
color: #1d1d1d;
text-transform: none;
font-size: 1.2vw
}
.project-name-container {
grid-column-gap: .6vw;
grid-row-gap: .6vw;
justify-content: flex-start;
align-items: center;
width: 15vw;
display: flex
}
.description-container {
align-items: flex-start;
display: flex
}
.description-container.nav-work {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
justify-content: center;
align-items: flex-start
}
.work-plus {
color: #fff;
width: .8vw;
height: .8vw
}
.work-plus.dark {
color: #1d1d1d
}
.video-case-wrapper {
z-index: 120;
background-color: #000;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: none;
position: fixed;
inset: 0%
}
.video-player {
aspect-ratio: 16/9;
pointer-events: auto;
border-radius: 1vw;
width: 70vw;
overflow: hidden
}
.close-video {
pointer-events: auto;
cursor: none;
background-color: #1b1b1b;
border-radius: 1vw;
justify-content: center;
align-items: center;
width: 3vw;
height: 3vw;
margin-top: 2vw;
margin-right: 2vw;
display: flex;
position: absolute;
inset: 0% 0% auto auto
}
.close-icon {
width: 1vw
}
.video-case-player {
z-index: 30;
cursor: none;
background-color: #fff;
border-radius: 1vw;
justify-content: center;
align-items: center;
width: 3vw;
height: 3vw;
transition: height .25s, width .25s;
display: flex;
position: absolute
}
.video-case-player:hover {
width: 3.8vw;
height: 3.8vw
}
.play-video-case {
filter: invert();
width: .8vw;
margin-left: .1vw
}
.full-image-height {
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
overflow: hidden
}
.hero-image {
aspect-ratio: 2;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/679ba410bd9df8c92515cc9f_Hero.jpg);
background-position: 50%;
background-size: cover;
width: 100%
}
.nav-info {
color: #1d1d1d;
white-space: nowrap;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 1vw;
line-height: 120%;
text-decoration: none
}
.nav-info.nav-work-link,
.nav-info.nav-contact-link {
cursor: pointer
}
.nav-external-wrapper {
flex-flow: row;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden
}
.nav-external-wrapper.hide-tablet {
display: flex
}
.nav-external-wrapper.height-100 {
height: 100%
}
.nav-logo-container {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
align-items: flex-start;
width: 100%;
display: block;
position: absolute;
overflow: hidden
}
.nav-logo-container.hide-tablet {
display: block
}
.nav-tech-right-container {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
align-items: center;
overflow: hidden
}
.nav-tech-left-container {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
width: 100%;
overflow: hidden
}
.learn-more-cta {
color: #fff;
text-align: center;
vertical-align: text-bottom;
background-color: #1d1d1d;
border-radius: 2vw;
justify-content: center;
align-items: center;
margin-left: 1.4vw;
padding: .8vw 1.4vw;
font-family: Aeonik, sans-serif;
font-size: 1vw;
text-decoration: none;
display: inline-block
}
.learn-more-cta:hover {
color: #1d1d1d;
background-color: #e5e5e5
}
.work-title {
color: var(--white);
cursor: none;
font-family: Aeonik, sans-serif;
font-size: 1vw;
line-height: 110%;
text-decoration: none;
transition: opacity .2s;
overflow: hidden
}
.title-wrapper {
width: 100%;
overflow: hidden
}
.sticky-cards {
flex-direction: column;
display: flex
}
.sticky-card {
background-color: var(--white);
height: calc(100vh - 65px);
margin-left: -1vw;
margin-right: -1vw;
padding: 1vw;
transition-property: border-radius, background-color;
transition-duration: .2s, .5s;
transition-timing-function: ease, cubic-bezier(.645, .045, .355, 1);
position: sticky;
top: 65px
}
.sticky-card.sticky-hidden {
background-color: var(--gray)
}
.sticky-card-inner {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
height: 100%;
display: grid
}
.sticky-card-content {
grid-column-gap: 1.2vw;
grid-row-gap: 1.2vw;
flex-flow: column;
justify-content: center;
align-items: flex-start;
padding-left: 8vw;
padding-right: 8vw;
display: flex
}
.cell,
.cell-2,
.cell-3 {
justify-content: center;
align-items: flex-start
}
.sticky-card-embed {
border-radius: 8px;
width: 100%;
height: 100%;
position: relative;
overflow: hidden
}
.single-brand-logo {
z-index: 1;
width: 100%;
max-width: 65%;
position: relative
}
.single-brand-logo.active {
z-index: 1
}
.single-brand-hover {
border-radius: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.single-brand-hover._01 {
background-color: #00acec;
width: 0;
height: 0
}
.single-brand-hover._03 {
background-color: #5286ed;
width: 0;
height: 0
}
.single-brand-hover._04 {
background-color: #e61d2b;
width: 0;
height: 0
}
.single-brand-hover._02 {
background-color: #5b2d90;
width: 0;
height: 0
}
.single-brand-hover._05 {
background-color: #1ed760;
width: 0;
height: 0
}
.single-brand-hover._06 {
background-color: #2259c2;
width: 0;
height: 0
}
.single-brand-hover._07 {
background-color: #ec3f43;
width: 0;
height: 0
}
.single-brand-hover._08 {
background-color: #000;
width: 0;
height: 0
}
.overlay-link {
z-index: 10;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.hide-mobile {
color: var(--black)
}
.grid-context-intro {
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
width: 100%;
margin-top: 8vw
}
.hide-desktop {
display: none
}
.nav-work-wrapper {
z-index: 100;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
width: 100vw;
height: 100vh;
font-family: Aeonik, sans-serif;
display: none;
position: fixed;
top: 0;
left: 0
}
.nav-work-wrapper.active {
display: block
}
.overlay-nav-work {
z-index: 1;
background-color: #0000004d;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.nav-work-inner {
z-index: 1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
flex-flow: column;
justify-content: flex-end;
align-items: stretch;
width: 34vw;
padding-top: 1vw;
display: flex;
position: absolute;
right: 1vw
}
.nav-work-inner.active {
top: 1.5vh
}
.nav-work-title {
font-size: 2.4vw;
line-height: 1
}
.nav-video-container {
grid-column-gap: 1.2vw;
grid-row-gap: 1.2vw;
cursor: pointer;
flex: none;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
justify-content: flex-start;
place-items: stretch stretch;
text-decoration: none;
display: grid;
position: relative;
overflow: hidden
}
.nav-video-container.w--current {
cursor: pointer
}
.nav-work-list-wrapper {
scrollbar-width: none;
flex-flow: column;
justify-content: flex-start;
align-items: stretch;
display: flex;
overflow: auto
}
.nav-work-header {
z-index: 10;
background-color: var(--white);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1.2vw 1vw 1vw 1.2vw;
display: flex;
position: absolute;
top: 0;
left: 0;
right: 1vw
}
.nav-work-toggle {
cursor: pointer;
background-color: #f2f2f2;
border-radius: .5vw;
width: 2.8vw;
height: 2.8vw;
overflow: hidden
}
.nav-work-content {
background-color: var(--white);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
flex-flow: column;
justify-content: flex-end;
align-items: stretch;
height: calc(100vh - 1vw);
display: flex;
position: relative
}
.nav-work-list {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
padding: 9vh 1vw 1vw;
display: flex
}
.text-block-2 {
text-transform: uppercase;
background-color: #f3f3f3;
border-radius: 1.2vw;
justify-content: center;
align-items: center;
height: 1.2vw;
padding-left: .6vw;
padding-right: .6vw;
font-size: .5vw;
display: flex
}
.navvideoclass {
z-index: 2;
aspect-ratio: 3/2;
background-color: #f5f4f2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: relative
}
.myvideoclass {
z-index: 2;
cursor: none;
background-color: #f5f4f2;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: relative
}
.myvideoclass.landscape {
aspect-ratio: 3/2;
border-radius: 8px;
display: block;
overflow: hidden
}
.myvideoclass.portrait {
width: 100%;
display: block
}
.myvideoclass.expertise {
aspect-ratio: 1;
border-radius: 8px;
width: 100%
}
.myvideoclass.nav {
width: 50%
}
.myvideoclass.work-nav {
aspect-ratio: 3/2;
border-radius: 8px;
flex: none;
overflow: hidden
}
.myvideoclass.square {
aspect-ratio: 1
}
.overlay-hover {
z-index: 10;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.nav-work-close {
height: 100%
}
.swiper-wrapper {
display: flex
}
.swiper-slide {
width: 25vw
}
.inner-video-embed {
width: 100%;
height: 100%;
position: relative
}
.inner-video-embed.expertise {
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden
}
.nav-video-overlay {
z-index: 10;
aspect-ratio: 3/2;
cursor: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.nav-video-overlay.pointer-off {
cursor: none
}
.nav-video-overlay.pointer-on {
cursor: pointer
}
.nav-video-wrapper {
aspect-ratio: 3/2;
border-radius: 8px;
overflow: hidden
}
.plyr_component {
width: 100%;
position: relative
}
.plyr_component.is-full-screen {
height: 100vh
}
.plyr_embed {
width: 100%;
height: 100%;
position: relative
}
.plyr_cover {
z-index: 2;
cursor: pointer;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: opacity .4s;
display: flex;
position: absolute;
inset: 0%;
overflow: hidden
}
.plyr_cover-img {
z-index: 1;
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .4s;
position: absolute;
inset: 0%
}
.plyr_cover-button {
z-index: 2;
color: #000;
background-color: #fff;
border-radius: 100vw;
justify-content: center;
align-items: center;
width: 6em;
height: 6em;
display: flex;
position: relative
}
.plyr_cover-icon {
width: 40%;
height: 40%
}
.plyr_pause-trigger {
display: none
}
.close {
opacity: 0;
width: 75%;
height: .8vw;
margin-top: .05vw;
overflow: visible
}
.cursor-gallery-1 {
background-color: #1d1d1d0d;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex
}
.cursor-gallery-2 {
background-color: #ffffff1a;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: none
}
.embed-case-video {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden
}
.soon-container {
cursor: none;
justify-content: center;
align-self: center;
align-items: flex-start;
width: 1.3vw;
height: .8vw;
display: flex;
position: absolute;
overflow: hidden
}
.soon {
opacity: 0;
width: 1.3vw;
height: .8vw;
margin-top: .05vw;
overflow: visible
}
.hide-tablet {
display: none
}
.code-embed-2,
.video-desktop {
display: block
}
.video-tablet {
display: none
}
.awards {
margin-top: 6vw;
margin-bottom: 2vw
}
.inner-awards {
font-family: Aeonik, sans-serif
}
.item-awards {
color: #1d1d1d;
border-top: 1px solid #1d1d1d33;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-auto-columns: 1fr;
width: 100%;
padding-top: 1.5vw;
padding-bottom: 2.5vw;
display: flex
}
.order-awards {
width: 10%;
font-family: Aeonik, sans-serif;
font-size: .9vw;
line-height: 1
}
.client-awards {
align-self: flex-start;
width: 41%;
font-family: Aeonik, sans-serif;
font-size: 1.5vw;
line-height: 120%
}
.infos-awards {
grid-column-gap: .5vw;
grid-row-gap: .5vw;
flex-flow: column;
width: 22%;
font-size: .9vw;
line-height: 1;
display: flex
}
.infos-awards.last {
text-align: right;
width: 6%
}
.label-info-awards {
color: #1d1d1d4d;
font-family: Aeonik, sans-serif
}
.powerade-reel {
padding-top: 8vw;
padding-left: 6vw;
padding-right: 6vw
}
.inner-powerade-reel {
cursor: none;
border-radius: 8px;
position: relative;
overflow: hidden
}
.title-powerade-reel {
color: var(--white);
margin-top: 1vw;
font-family: Aeonik, sans-serif;
font-size: 2vw;
line-height: 2vw;
transform: translateY(-50%)
}
.poster-powerade-reel {
aspect-ratio: 2.39;
background-image: url(https://cdn.prod.website-files.com/6403ade6e2cfd9c42fe587b0/6825fd7c2f47e387ab6e1175_poster_reel-powerade-mindzone.jpg);
background-position: 50%;
background-repeat: repeat;
background-size: cover;
background-attachment: scroll;
width: 100%;
max-width: 100%;
display: block
}
.close-case-video {
z-index: 1;
cursor: pointer;
background-color: #fff3;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
padding: 12px;
display: flex;
position: fixed;
top: 20px;
right: 20px
}
.about-hero-container-left {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
justify-content: space-between;
align-items: flex-start;
width: 100%;
height: 82vh;
display: flex
}
.description-info-awards {
color: #1d1d1d;
text-align: left;
font-family: Aeonik, sans-serif;
font-size: .9vw;
font-weight: 400;
line-height: 1.1vw
}
.description-info-awards.gray {
color: #9a9a9a
}
.description-info-awards.floating {
margin-top: .6vw;
position: absolute
}
.description-info-awards.right {
text-align: right
}
.the-studio {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
display: flex
}
.h2 {
color: #1d1d1d;
letter-spacing: -.1vw;
text-transform: none;
white-space: normal;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 4.2vw;
line-height: 100%
}
.h2.about {
margin-top: -.5vw
}
.about-container {
width: 60%
}
._2-column-grid-about {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
align-items: flex-start;
display: flex
}
.approach {
color: #1d1d1d;
border-top: 1px solid #1d1d1d33;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-auto-columns: 1fr;
width: 100%;
padding-top: 1.5vw;
padding-bottom: 4vw;
display: flex
}
.approach-title {
align-self: flex-start;
width: 40.5%;
font-family: Aeonik, sans-serif;
font-size: 1.5vw;
line-height: 120%
}
.approach-numbers {
cursor: default;
width: 10%;
font-family: Aeonik, sans-serif;
font-size: .9vw;
line-height: 1
}
.label-approach {
color: #1d1d1d4d;
cursor: default;
font-family: Aeonik, sans-serif
}
.approach-description {
color: #1d1d1d;
text-align: left;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 1vw;
font-weight: 400;
line-height: 130%
}
.approach-description.gray {
color: #9a9a9a
}
.approach-description.floating {
margin-top: .6vw;
position: absolute
}
.infos-approach {
grid-column-gap: .5vw;
grid-row-gap: .5vw;
flex-flow: column;
width: 30%;
font-size: .9vw;
line-height: 1;
display: flex
}
.infos-approach.last {
text-align: right;
width: 6%
}
.get-in-touch-cta {
color: #fff;
text-align: center;
vertical-align: text-bottom;
background-color: #1d1d1d;
border-radius: 2vw;
justify-content: center;
align-items: center;
padding: .8vw 1.4vw;
font-family: Aeonik, sans-serif;
font-size: 1vw;
text-decoration: none;
display: inline-block
}
.get-in-touch-cta:hover {
color: #1d1d1d;
background-color: #e5e5e5
}
.h2-title-about {
pointer-events: none;
color: #1d1d1d;
text-align: center;
letter-spacing: -.2vw;
text-transform: uppercase;
word-break: keep-all;
overflow-wrap: break-word;
cursor: default;
font-family: Aeonik, sans-serif;
font-size: 7vw;
line-height: .9
}
.h2-title-about.gray {
color: #e5e5e5
}
.h2-title-about.sticky-title {
pointer-events: auto;
margin-bottom: 4vw
}
.module-contact {
grid-column-gap: 3vw;
grid-row-gap: 3vw;
flex-flow: column;
align-items: center;
padding: 6vw 10vw;
display: flex
}
.nav-link {
color: #1d1d1d;
white-space: nowrap;
font-family: Aeonik, sans-serif;
font-size: 1vw;
line-height: 120%;
text-decoration: none
}
.nav-link.nav-work-link {
cursor: pointer
}
.about-image {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
object-fit: cover;
background-color: #f5f4f2;
background-image: url(/studio.png);
background-position: 50%;
background-size: cover;
border-radius: 8px;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: 82vh;
display: flex;
position: relative;
overflow: hidden
}
.line {
background-color: #1d1d1d;
width: 3vw;
height: 2px
}
.about-title-container {
height: 4.4vw;
overflow: hidden
}
.nav-contact-wrapper {
z-index: 100;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
width: 100vw;
height: 100vh;
font-family: Aeonik, sans-serif;
display: none;
position: fixed;
top: 0;
left: 0
}
.nav-contact-wrapper.active {
display: block
}
.overlay-nav-contact {
z-index: 1;
background-color: #0000004d;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.nav-contact-inner {
z-index: 1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
flex-flow: column;
justify-content: flex-end;
align-items: stretch;
width: 34vw;
padding-top: 1vw;
display: flex;
position: absolute;
right: 1vw
}
.nav-contact-inner.active {
top: 1.5vh
}
.nav-contact-content {
background-color: var(--white);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
flex-flow: column;
justify-content: flex-end;
align-items: stretch;
height: calc(100vh - 1vw);
display: flex;
position: relative
}
.nav-contact-header {
z-index: 10;
background-color: var(--white);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1.2vw 1vw 1vw 1.2vw;
display: flex;
position: absolute;
top: 0;
left: 0;
right: 1vw
}
.nav-contact-list-wrapper {
scrollbar-width: none;
flex-flow: column;
justify-content: flex-start;
align-items: stretch;
display: flex;
overflow: auto
}
.nav-contact-title {
font-size: 2.4vw;
line-height: 1
}
.nav-contact-toggle {
cursor: pointer;
background-color: #f2f2f2;
border-radius: .5vw;
width: 2.8vw;
height: 2.8vw;
overflow: hidden
}
.nav-contact-list {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
justify-content: flex-start;
padding: 0vw 1vw 1vw;
display: flex
}
.field-contact-label {
color: #1d1d1d;
font-family: Aeonik, sans-serif;
font-size: 1.1vw;
font-weight: 400;
line-height: 1.6vw
}
.text-field {
color: #1d1d1d;
text-transform: uppercase;
background-color: #f5f5f5;
border: 1px #000;
border-radius: 8px;
height: 3.4vw;
padding: 1vw 1.4vw;
font-size: .8vw;
line-height: 1vw
}
.field-container {
grid-column-gap: .4vw;
grid-row-gap: .4vw;
flex-flow: column;
display: flex
}
.form-container {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column;
display: flex
}
.message-field {
color: #1d1d1d;
text-transform: uppercase;
background-color: #f5f5f5;
border: 1px #000;
border-radius: 8px;
width: 100%;
min-width: 100%;
max-width: 100%;
height: 14vw;
min-height: 14vw;
max-height: 14vh;
padding: 1vw 1.4vw;
font-size: .8vw;
line-height: 1vw
}
.submit-button {
color: #fff;
text-transform: uppercase;
background-color: #1d1d1d;
border-radius: 8px;
width: 100%;
height: 3.4vw;
font-family: Aeonik, sans-serif;
font-size: .8vw;
line-height: 1vw
}
.submit-button:hover {
background-color: #000
}
.contact-info {
color: #a0a0a0;
font-family: Aeonik, sans-serif;
font-size: 1.1vw;
font-weight: 400;
line-height: 1.6vw
}
.lets-talk-container {
justify-content: flex-start;
align-items: flex-start;
height: 8%;
padding-left: 1vw;
padding-right: 1vw;
display: flex
}
.nav-contact-close {
height: 100%
}
.play-reel-container {
justify-content: center;
align-items: center;
display: flex;
position: absolute;
inset: 0%
}
.div-block-12 {
aspect-ratio: 2;
border-radius: 8px;
justify-content: center;
align-items: center;
display: flex;
overflow: hidden
}
.success-message {
background-color: #f5f5f5;
border-radius: 8px;
height: 5vw;
padding: 1.9vw 1vw;
font-family: Aeonik, sans-serif;
font-size: .9vw;
font-weight: 400;
line-height: 1vw
}
.error-message {
text-align: center;
border-radius: 8px
}
.fullbleed-video {
aspect-ratio: 16/9;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 100%;
overflow: hidden
}
._2-column-image {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
display: flex
}
._2-column-container {
border-radius: 8px;
width: 50%;
overflow: hidden
}
.embed-video {
width: 100vw;
height: 100vh;
overflow: hidden
}
.soon-tag-mobile {
text-transform: uppercase;
background-color: #fff;
border-radius: 1.2vw;
justify-content: center;
align-items: center;
height: 1.2vw;
padding-left: .6vw;
padding-right: .6vw;
font-size: .6vw;
display: none
}
.tag-container {
padding-bottom: 1vw;
padding-left: 1vw;
position: absolute;
inset: auto auto 0% 0%
}
.soon-tag-desktop {
text-transform: uppercase;
background-color: #fff;
border-radius: 1.2vw;
justify-content: center;
align-items: center;
height: 1.2vw;
padding-left: .6vw;
padding-right: .6vw;
font-size: .6vw;
display: flex
}
@media screen and (min-width:1920px) {
.header-container {
justify-content: center;
align-items: center;
display: flex
}
.copy {
font-size: .8vw
}
.secondary-copy {
font-size: .7vw
}
.nav {
height: 2.5vw
}
.bodycopy {
font-size: .74vw
}
.small-title {
font-size: .8vw
}
.center-cell {
padding-left: 4vw;
padding-right: 4vw
}
.h1-subhead {
width: 35%;
font-size: 1vw
}
.center-cell-gallery.wide {
padding-left: 9vw;
padding-right: 9vw
}
.h4,
.h3-expertise {
font-size: .8vw
}
.form-fun-logo {
width: 3vw
}
.video-player {
overflow: hidden
}
.video-case-player:hover {
width: 3.8vw;
height: 3.8vw
}
.nav-info {
font-size: .8vw
}
.nav-tech-right-container {
width: 100%
}
.learn-more-cta {
padding-left: 1.2vw;
padding-right: 1.2vw;
font-size: .8vw
}
.single-brand-hover._05 {
background-color: #1ed760
}
.single-brand-hover._06 {
background-color: #2259c2
}
.single-brand-hover._07 {
background-color: #ec3f43
}
.hide-tablet {
display: block
}
.nav-work-wrapper {
display: none
}
.video-desktop {
display: block
}
.video-tablet {
display: none
}
.label-info-awards {
line-height: 1.1
}
.description-info-awards {
font-size: .9vw
}
.about-container {
width: 60%
}
.label-approach {
line-height: 1.1
}
.approach-description {
font-size: .8vw
}
.get-in-touch-cta {
padding-left: 1.2vw;
padding-right: 1.2vw;
font-size: .8vw
}
.nav-link {
font-size: .8vw
}
.nav-contact-wrapper {
display: none
}
}
@media screen and (max-width:991px) {
h1 {
font-size: 9vw;
line-height: 8.5vw
}
h3 {
font-size: 2vw;
line-height: 2.4vw
}
h4 {
font-size: 1.8vw;
line-height: 2vw
}
.home-cover {
margin: 0 0
}
.form-fun-home {
letter-spacing: -6px;
font-size: 16vw;
line-height: 16vw
}
.module-blocks {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-top: 6vw;
padding-left: 2vw;
padding-right: 2vw
}
.module-blocks.small-gap-bottom {
padding-bottom: 2vw;
padding-left: 2vw;
padding-right: 2vw
}
.module-blocks.no-gap-up-down {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-top: 2vw;
padding-left: 2vw;
padding-right: 2vw
}
.module-blocks.no-gap-up {
padding-left: 2vw;
padding-right: 2vw
}
.module-blocks.no-gap-up-bottom {
padding-bottom: 0;
padding-left: 2vw;
padding-right: 2vw
}
.module-blocks.about {
padding-top: 14vw
}
.module-hero {
padding-left: 2vw;
padding-right: 2vw
}
.module-hero.studio {
margin-top: 14vw
}
.module-hero.intro {
padding-top: 14vw;
padding-bottom: 14vw
}
.header-container {
aspect-ratio: 2
}
.h1-intro {
font-size: 7vw
}
.h1-intro.intro-text-indent {
text-indent: 16.66%
}
.copy {
font-size: 1.6vw
}
.overflow,
.section {
cursor: auto
}
.container {
cursor: auto;
padding-left: 10vw;
padding-right: 10vw
}
.splide__list {
width: auto;
padding-right: 15%
}
.splide__list.awards {
padding-right: 0%
}
.splide__slide {
padding-left: 6vw;
padding-right: 6vw
}
.module-slider {
padding-top: 12vw;
padding-bottom: 12vw
}
.module-slider.no-gap-bottom {
padding-bottom: 4vw
}
.module-slider.home {
padding-top: 14vw;
padding-bottom: 14vw
}
.module-slider.expertise {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-left: 2vw;
padding-right: 2vw
}
.secondary-copy {
font-size: 1.6vw
}
.secondary-copy.floating {
margin-top: 1.2vw
}
.context-cell {
grid-column-gap: .6vw;
grid-row-gap: .6vw
}
.subhead {
font-size: 1.8vw
}
.nav {
padding-left: 2vw;
padding-right: 2vw
}
.nav-inner {
grid-column-gap: 1.6vw
}
.h1-heading {
font-size: 9vw;
overflow: hidden
}
.bodycopy {
font-size: 1.4vw
}
.small-title {
font-size: 1.6vw
}
.h1-title {
font-size: 11.9vw
}
.h1-title.doordash {
font-size: 9.3vw
}
.h1-title.powerade {
font-size: 9.6vw
}
.project-tag {
padding: 1.8vw 2.8vw
}
.center-cell {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-left: 8vw;
padding-right: 8vw
}
.module-heading {
padding-top: 14vw
}
.h1-subhead {
width: 70%;
font-size: 1.8vw
}
.h1-subhead.large {
width: 91%
}
.oreo-overview {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-top: 14vw;
padding-left: 2vw;
padding-right: 2vw
}
.grid-container {
height: 50vw
}
.small-image,
.large-image {
height: 100%
}
.oreo-play-reel,
.slider {
cursor: auto
}
.right-arrow {
cursor: auto;
justify-content: flex-end;
align-items: center;
padding-right: 2vw;
display: flex
}
.left-arrow {
cursor: auto;
justify-content: flex-start;
align-items: center;
padding-left: 2vw;
display: flex;
position: absolute;
inset: 0% auto 0% 0%
}
.cursor-gallery {
opacity: 0
}
.left-arrow-cta {
cursor: pointer;
width: 5.5vw;
height: 5.5vw;
display: flex
}
.left-arrow-cta.gray {
background-color: #1d1d1d
}
.right-arrow-cta {
cursor: pointer;
width: 5.5vw;
height: 5.5vw;
display: flex
}
.right-arrow-cta.gray {
background-color: #1d1d1d
}
.counter {
width: 5.5vw;
height: 5.5vw;
margin-bottom: 2vw;
inset: auto 0% 0% auto
}
.counter.right {
margin-right: 0
}
.counter-copy {
font-size: 1.6vw
}
.splide__arrows {
opacity: 1;
cursor: auto;
margin-left: -3.5vw;
padding-left: 0;
padding-right: 1vw
}
.splide__arrow {
cursor: pointer;
width: 5.5vw;
height: 5.5vw
}
.splide__arrow.splide__arrow--next {
cursor: pointer;
margin-right: -8vw
}
.splide__arrow.splide__arrow--prev {
cursor: pointer
}
.slider-arrow-icon {
width: .9vw
}
.h1-container {
padding-bottom: 2vw
}
.h1-container.line-2 {
margin-top: -2vw;
padding-bottom: 2vw
}
.h1-container.line-1 {
padding-bottom: 2vw
}
.html-video-wrapper {
border-radius: 1.25rem;
min-width: 90vw;
min-height: auto
}
.video-controls-wrapper.is-blurred {
width: 90%;
padding: .6rem 1.85rem 1.15rem;
bottom: 2rem
}
.padding-bottom {
padding-top: 0;
padding-left: 0;
padding-right: 0
}
._2-column-grid,
._2-column-small,
.large-container-no-bg {
grid-column-gap: 2vw;
grid-row-gap: 2vw
}
._2-column-grid-gallery {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex-flow: column
}
.grid-context-container {
grid-row-gap: 4vw;
grid-template-areas: ". .Area Area Area Area Area-2 Area-2 Area-2 Area-2. ." ". .Area-3 Area-3 Area-3 Area-3 Area-4 Area-4 Area-4 Area-4 Area-5 Area-5";
margin-top: 6vw
}
.grid-context-subhead {
grid-row-gap: 4vw;
grid-template-rows: auto;
grid-template-areas: "Area-2 Area-2 Area Area Area Area Area Area Area Area Area";
margin-top: 8vw
}
.grid-tags {
grid-row-gap: 4vw;
grid-template-rows: auto;
margin-top: 8vw
}
.container-tags {
flex-flow: wrap
}
.slider-arrow-icon-mobile {
width: .9vw
}
.slider-arrow-icon-mobile.gray {
filter: none
}
.container-counter {
justify-content: center;
align-items: center;
display: flex
}
.container-counter.right {
inset: auto 0% 0%
}
._3-grid-posters {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-left: 2vw;
padding-right: 2vw
}
.doordash-grid {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
grid-template: "Area Area Area-2 Area-2" "Area-3 Area-3 Area-3 Area-3" "Area-4 Area-4 Area-5 Area-5" /1fr 1fr;
padding-top: 14vw;
padding-left: 2vw;
padding-right: 2vw
}
.square-portrait-container {
height: 100vw
}
.grid-container-small {
height: 50vw
}
.grid-context-container-2-item {
grid-row-gap: 4vw;
grid-template-rows: auto;
grid-template-areas: ". .Area Area Area Area Area-2 Area-2 Area-2 Area-2";
margin-top: 6vw
}
.powerade-overview {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-top: 14vw;
padding-left: 2vw;
padding-right: 2vw
}
.grid-container-vertical {
height: 102vw
}
.center-cell-gallery {
padding-left: 6vw;
padding-right: 6vw
}
.center-cell-gallery.wide,
.module-gallery {
padding-left: 2vw;
padding-right: 2vw
}
.overview-image {
border-radius: 18px
}
.module-overview-gallery {
padding-left: 2vw;
padding-right: 2vw
}
.home-intro {
margin-bottom: 4vw;
font-size: 7vw;
display: block
}
.home-slider-container {
cursor: auto;
padding-left: 2vw;
padding-right: 10vw
}
.home-video-container {
aspect-ratio: 1;
cursor: auto;
border-radius: 0;
flex-flow: column;
flex: 1;
justify-content: flex-start;
align-items: center
}
.home-video-container.landscape {
background-color: #0000;
flex: 1;
justify-content: flex-start;
align-items: center
}
.home-video-container.portrait {
background-color: #0000
}
.portfolio-container {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
justify-content: center;
align-items: center
}
.h2-title {
font-size: 9vw
}
.work-tag-container {
padding-left: 2vw;
padding-right: 2vw
}
.myvideoclass-bkp {
aspect-ratio: 3/2;
background-color: #0000;
border-radius: 8px;
height: auto;
overflow: hidden
}
.expertise-container {
width: 100%;
height: 100%
}
.expertise-container.blue {
background-color: #d5f2f6
}
.expertise-container.magenta {
background-color: #fbefff
}
.expertise-container.green {
background-color: #e5f4e1
}
.expertise-wrapper {
margin-left: -2vw;
margin-right: -2vw;
padding-left: 2vw;
padding-right: 2vw;
overflow: hidden
}
.h4 {
width: 70%;
font-size: 3vw
}
.h4.floating {
width: auto;
margin-top: .4vw;
font-size: 2.2vw
}
.h3 {
font-size: 5vw
}
.expertise-image-container {
grid-column-gap: 3vw;
grid-row-gap: 3vw;
padding: 2vw 2vw 3vw
}
.expertise-image-container:hover {
padding: 2vw
}
.h3-expertise {
opacity: 100;
font-size: 1.8vw
}
.marquee-container {
grid-column-gap: 8vw;
grid-row-gap: 8vw
}
.creative-tech-marquee {
font-size: 1.4vw
}
.logo-marquee {
width: 50vw
}
.marquee-block {
padding: 16vw 2vw
}
.brands-block-container.swiper1,
.brands-block-container.swiper2,
.brands-block-container.swiper3,
.brands-block-container.swiper4 {
display: none
}
.brands-block-container.swiper5 {
aspect-ratio: 16/9;
height: auto;
display: block
}
.single-brand-container.swiper-slide {
aspect-ratio: 16/9;
justify-content: center;
align-items: center;
display: flex
}
.single-brand-container.swiper-slide.powerade {
background-color: #00acec
}
.single-brand-container.swiper-slide.spotify {
background-color: #1ed760
}
.single-brand-container.swiper-slide.doordash {
background-color: #5b2d90
}
.single-brand-container.swiper-slide.oreo {
background-color: #2259c2
}
.single-brand-container.swiper-slide.google {
background-color: #5286ed
}
.single-brand-container.swiper-slide.ogilvy {
background-color: #ec3f43
}
.single-brand-container.swiper-slide.coca-cola {
background-color: #e61d2b
}
.single-brand-container.swiper-slide.saatchi-saatchi {
background-color: #000
}
.footer {
padding: 12vw 2vw 4vw
}
.footer-grid {
grid-row-gap: 6vw;
margin-bottom: 12vw
}
.footer-links {
font-size: 2.4vw
}
.footer-links-container {
grid-column-gap: 1.2vw;
grid-row-gap: 1.2vw
}
.selected-work-container {
display: none
}
.work-tags-container {
padding-left: 0;
padding-right: 0;
position: static
}
.work-tags {
color: #a0a0a0;
text-transform: uppercase;
font-size: 1.2vw
}
.work-tags.dark {
color: #a0a0a0
}
.work-tags.dark.fade-up.tricks.work-title {
color: var(--black)
}
.work-tags.fade-up.tricks.work-title.hide-tablet {
display: none
}
.work-tags.nav-work {
font-size: 2.4vw
}
.work-tags.work-title.nav-work {
font-size: 4vw
}
.project-name-container {
grid-column-gap: 1.2vw;
grid-row-gap: 1.2vw;
width: auto
}
.description-container {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
flex-flow: column
}
.description-container.nav-work {
grid-column-gap: 2vw;
grid-row-gap: 2vw
}
.work-plus {
display: none
}
.video-player {
border-radius: 2vw;
width: 80vw
}
.close-video {
border-radius: 2vw;
width: 6vw;
height: 6vw;
margin-top: 3vw;
margin-right: 3vw
}
.close-icon {
width: 2vw
}
.video-case-player {
border-radius: 1.6vw;
width: 6vw;
height: 6vw
}
.video-case-player:hover {
width: 6vw;
height: 6vw
}
.play-video-case {
width: 1.4vw
}
.hero-image {
aspect-ratio: auto;
height: 100%
}
.nav-info {
font-size: 1.6vw
}
.nav-external-wrapper.hide-tablet,
.nav-logo-container.hide-tablet {
display: none
}
.learn-more-cta {
border-radius: 3vw;
width: 50%;
margin-left: 0;
padding-top: 1.6vw;
padding-bottom: 1.6vw;
font-size: 2vw;
display: block
}
.work-title {
color: var(--black);
text-transform: none;
font-size: 2.4vw
}
.sticky-card {
margin-left: -2vw;
margin-right: -2vw;
padding: 2vw
}
.sticky-card-inner {
flex-flow: column;
display: flex
}
.sticky-card-content {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
justify-content: center;
align-items: flex-start;
padding: 2vw 35vw 8vw 0
}
.text-span {
display: block
}
.grid-context-intro {
grid-template-areas: "Area-2 Area-2 Area Area Area Area Area Area Area Area Area";
margin-top: 14vw
}
.hide-desktop {
display: block
}
.hide-tablet {
display: none
}
.nav-work-wrapper {
height: 100svh
}
.nav-work-inner {
width: 96vw;
padding-top: 2vw;
left: 2vw;
right: 2vw
}
.nav-work-title {
font-size: 7vw
}
.nav-video-container {
grid-column-gap: 2.8vw;
grid-row-gap: 2.8vw;
border-radius: 0;
flex-flow: column
}
.nav-work-list-wrapper {
grid-column-gap: 2vw;
grid-row-gap: 2vw
}
.nav-work-header {
padding: 2.4vw 2vw 2vw 2.4vw
}
.nav-work-toggle {
border-radius: 1.4vw;
width: 9vw;
height: 9vw
}
.nav-work-content {
height: calc(100svh - 1vw)
}
.nav-work-list {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-bottom: 2vw;
padding-left: 2vw;
padding-right: 2vw
}
.text-block-2 {
border-radius: 3.2vw;
height: 3.2vw;
padding-left: 1.4vw;
padding-right: 1.4vw;
font-size: 1.4vw
}
.navvideoclass {
aspect-ratio: 3/2;
background-color: #0000;
border-radius: 8px;
overflow: hidden
}
.myvideoclass {
aspect-ratio: 3/2;
background-color: #0000;
border-radius: 8px;
height: auto;
padding-bottom: 0%;
overflow: hidden
}
.myvideoclass.height-100-tablet {
aspect-ratio: auto;
height: 100%
}
.swiper-wrapper {
width: 100%;
padding-right: 15%
}
.swiper-slide {
padding-left: 6vw;
padding-right: 6vw
}
.inner-video-embed {
aspect-ratio: 3/2;
border-radius: 8px;
height: auto;
overflow: hidden
}
.plyr_component.is-full-screen {
height: 80vw
}
.video-desktop {
display: none
}
.video-tablet {
display: block
}
.item-awards {
grid-column-gap: 1vw;
grid-row-gap: 1vw
}
.order-awards {
width: 8%;
font-size: 1.2vw;
line-height: 1.4
}
.client-awards {
font-size: 2vw
}
.infos-awards.last {
justify-content: flex-start;
align-items: flex-end
}
.label-info-awards {
font-size: 1.2vw;
line-height: 1.4
}
.title-powerade-reel {
margin-top: 2vw;
font-size: 3vw;
line-height: 3vw
}
.about-hero-container-left {
height: 60vw
}
.description-info-awards {
width: 70%;
font-size: 1.3vw;
line-height: 1.5vw
}
.description-info-awards.floating {
width: auto;
font-size: 2.5vw
}
.h2 {
font-size: 9vw
}
.about-container {
width: 74%
}
._2-column-grid-about {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex-flow: column
}
.approach {
grid-column-gap: 8vw;
grid-row-gap: 8vw;
padding-top: 3vw;
padding-bottom: 8vw
}
.approach-title {
width: 40%;
font-size: 3vw
}
.approach-numbers {
width: auto;
font-size: 3vw;
line-height: 120%
}
.label-approach {
font-size: 2vw;
line-height: 1.4
}
.approach-description {
width: auto;
font-size: 2vw
}
.approach-description.floating {
width: auto;
font-size: 2.5vw
}
.infos-approach {
grid-column-gap: 1vw;
grid-row-gap: 1vw;
width: 100%
}
.get-in-touch-cta {
border-radius: 3vw;
width: 50%;
margin-left: 0;
padding-top: 1.6vw;
padding-bottom: 1.6vw;
font-size: 2vw;
display: block
}
.h2-title-about {
font-size: 9vw
}
.module-contact {
padding-left: 4vw;
padding-right: 4vw
}
.nav-link {
font-size: 1.6vw
}
.about-image {
height: 86vw
}
.line {
width: 5vw
}
.about-title-container {
height: 10vw
}
.nav-contact-wrapper {
height: 100svh
}
.nav-contact-inner {
width: 96vw;
padding-top: 2vw;
left: 2vw;
right: 2vw
}
.nav-contact-content {
height: calc(100svh - 1vw)
}
.nav-contact-header {
padding: 2.4vw 2vw 2vw 2.4vw
}
.nav-contact-list-wrapper {
grid-column-gap: 2vw;
grid-row-gap: 2vw
}
.nav-contact-title {
font-size: 7vw
}
.nav-contact-toggle {
border-radius: 1.4vw;
width: 9vw;
height: 9vw
}
.nav-contact-list {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding: 12vw 2vw 2vw
}
.field-contact-label {
font-size: 3vw;
line-height: 3.6vw
}
.text-field {
height: 9vw;
padding-left: 3vw;
padding-right: 3vw;
font-size: 2vw;
line-height: 2.2vw
}
.field-container {
grid-column-gap: 1vw;
grid-row-gap: 1vw
}
.form-container {
grid-column-gap: 3vw;
grid-row-gap: 3vw
}
.message-field {
height: 35vw;
min-height: 35vw;
max-height: 35vh;
padding: 3vw;
font-size: 2vw;
line-height: 2.2vw
}
.submit-button {
height: 9vw;
font-size: 2.2vw;
line-height: 3vw
}
.contact-info {
font-size: 2.6vw;
line-height: 3vw
}
.lets-talk-container {
height: 6%;
padding-left: 2vw;
padding-right: 2vw
}
.success-message {
height: 9vw;
padding-top: 3vw;
padding-bottom: 3vw;
font-size: 2.4vw;
line-height: 3vw
}
._2-column-image {
grid-column-gap: 2vw;
grid-row-gap: 2vw
}
.soon-tag-mobile {
background-color: #f3f3f3;
border-radius: 3.2vw;
height: 3.2vw;
padding-left: 1.4vw;
padding-right: 1.4vw;
font-size: 1.2vw;
display: flex
}
.tag-container {
display: none
}
.soon-tag-desktop {
background-color: #f3f3f3;
border-radius: 3.2vw;
height: 3.2vw;
padding-left: 1.4vw;
padding-right: 1.4vw;
font-size: 1.2vw;
display: flex
}
}
@media screen and (max-width:767px) {
h1 {
font-size: 8vw;
line-height: 8vw
}
h3,
h4 {
font-size: 14px;
line-height: 16px
}
.form-fun-home {
text-align: center;
letter-spacing: -4px;
font-size: 14vw;
line-height: 14vw
}
.h1-intro {
font-size: 4.6vw;
line-height: 110%
}
.copy {
font-size: 2vw
}
.container {
padding-left: 2vw;
padding-right: 2vw
}
.splide__slide {
padding-left: 0;
padding-right: 0
}
.secondary-copy {
font-size: 1.8vw
}
.secondary-copy.floating {
margin-top: .8vw
}
.nav {
padding-left: 2.4vw;
padding-right: 2.4vw
}
.nav-inner {
grid-column-gap: 2.4vw
}
.h1-title.powerade {
font-size: 9.5vw
}
.grid-container {
height: 46vw
}
.left-arrow-cta,
.right-arrow-cta {
width: 5vw;
height: 8vw
}
.counter {
width: 8vw;
height: 5vw
}
.counter-copy {
font-size: 2vw
}
.splide__arrows {
margin-left: 0;
padding-left: 2vw;
padding-right: 2vw
}
.splide__arrow {
background-color: #fff;
width: 5vw;
height: 8vw
}
.splide__arrow.splide__arrow--next {
margin-right: 0
}
.slider-arrow-icon {
width: 1.2vw
}
.padding-global {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.video-controls-wrapper.is-blurred {
flex-direction: row;
grid-template-rows: auto;
width: 95%;
padding: .2rem 1rem .9rem;
bottom: .8rem
}
.padding-bottom {
padding-top: 0;
padding-left: 0;
padding-right: 0
}
.control-button {
width: 2rem;
height: 2rem
}
.control-button.is-padding {
width: 2.4rem;
height: 2.4rem;
display: flex
}
.video-controls.player_2 {
grid-column-gap: 10px;
grid-row-gap: 10px
}
.time-controls-wrapper {
grid-column-gap: .2rem;
grid-row-gap: .2rem
}
.html-icon {
width: 1.5rem;
height: 1.5rem
}
.padding-section-small {
padding-top: 2rem;
padding-bottom: 2rem
}
.track.video-element.large {
height: 7px
}
.grid-context-container {
grid-template-areas: ". .Area Area Area Area Area Area-2 Area-2 Area-2 Area-2 Area-2" ". .Area-3 Area-3 Area-3 Area-3 Area-3 Area-4 Area-4 Area-4 Area-4 Area-4" ". .Area-5 Area-5 Area-5 Area-5 Area-5. . . . ."
}
.grid-context-subhead {
grid-template-areas: "Area-2 Area-2 Area Area Area Area Area Area Area Area Area"
}
.slider-arrow-icon-mobile {
width: 1.2vw
}
.square-portrait-container {
height: 90vw
}
.grid-container-small {
height: 46vw
}
.grid-context-container-2-item {
grid-template-areas: ". .Area Area Area Area Area Area-2 Area-2 Area-2 Area-2 Area-2"
}
.grid-container-vertical {
height: 94vw
}
.overview-image {
border-radius: 14px
}
.module-overview-gallery {
padding-bottom: 1vw
}
.home-intro {
line-height: 110%;
display: block
}
.home-slider-container {
padding-right: 2vw
}
.home-video-container {
aspect-ratio: auto
}
.home-video-container.landscape {
width: 100%
}
.home-video-container.landscape.no-margin {
margin-bottom: 0
}
.home-video-container.portrait {
width: 100%
}
.portfolio-container {
grid-column-gap: 8vw;
grid-row-gap: 8vw;
flex-flow: column;
justify-content: flex-start;
align-items: center;
margin-bottom: 6vw
}
.portfolio-container.no-margin {
margin-bottom: 0
}
.h2-title {
font-size: 14vw
}
.myvideoclass-bkp {
aspect-ratio: 3/2
}
.h4 {
font-size: 4vw
}
.h4.floating {
margin-top: 0;
font-size: 2.6vw
}
.h3 {
font-size: 8vw;
line-height: 110%
}
.expertise-image-container {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
padding-bottom: 4vw
}
.expertise-categories {
grid-column-gap: .3vw;
grid-row-gap: .3vw;
flex-flow: column
}
.div-block-10 {
width: 100%
}
.marquee-block {
padding-top: 20vw;
padding-bottom: 20vw
}
.footer-links {
font-size: 2.4vw
}
.work-tags-container {
padding-top: 2vw
}
.work-tags {
font-size: 1.8vw
}
.work-tags.fade-up.tricks.work-title {
font-size: 3.6vw
}
.work-tags.nav-work {
font-size: 2.6vw
}
.work-tags.work-title.nav-work {
font-size: 4.2vw
}
.project-name-container {
grid-column-gap: 1.4vw;
grid-row-gap: 1.4vw
}
.video-case-player,
.video-case-player:hover {
width: 7vw;
height: 7vw
}
.play-video-case {
width: 2vw
}
.nav-info {
font-size: 2.4vw
}
.learn-more-cta {
border-radius: 4vw;
padding-top: 2vw;
padding-bottom: 2vw;
font-size: 2.4vw
}
.work-title {
font-size: 1.8vw
}
.sticky-card-content {
grid-column-gap: 2.4vw;
grid-row-gap: 2.4vw;
padding-top: 3.2vw;
padding-bottom: 12vw;
padding-right: 25vw
}
.cell-2,
.cell-3,
.hide-mobile {
display: none
}
.grid-context-intro {
grid-template-areas: "Area-2 Area-2 Area Area Area Area Area Area Area Area Area"
}
.hide-desktop {
display: block
}
.hide-tablet {
display: none
}
.text-block-2 {
border-radius: 3.4vw;
height: 3.4vw;
padding-left: 1.6vw;
padding-right: 1.6vw
}
.navvideoclass,
.myvideoclass {
aspect-ratio: 3/2
}
.swiper-slide {
padding-left: 0;
padding-right: 0
}
.plyr_component.is-full-screen {
height: 110vw
}
.plyr_cover-button {
font-size: .8em
}
.video-desktop {
display: none
}
.video-tablet {
display: block
}
.awards {
margin-top: 9vw;
margin-bottom: 4vw
}
.order-awards {
width: 6%;
font-size: 1.9vw
}
.client-awards {
font-size: 2.6vw
}
.infos-awards {
font-size: 1.9vw
}
.break-line-mobile {
display: block
}
.powerade-reel {
padding-top: 12vw
}
.title-powerade-reel {
margin-top: 3vw
}
.about-hero-container-left {
height: 50vw
}
.description-info-awards {
font-size: 1.4vw;
line-height: 1.7vw
}
.description-info-awards.floating {
font-size: 3vw
}
.h2 {
font-size: 8vw;
line-height: 110%
}
.approach-title {
font-size: 2.6vw
}
.approach-numbers {
width: 6%;
font-size: 1.9vw
}
.label-approach {
font-size: 2vw;
line-height: 100%
}
.approach-description {
font-size: 2vw
}
.approach-description.floating {
font-size: 3vw
}
.infos-approach {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
font-size: 1.9vw
}
.get-in-touch-cta {
border-radius: 4vw;
padding-top: 2vw;
padding-bottom: 2vw;
font-size: 2.4vw
}
.h2-title-about {
font-size: 8vw
}
.module-contact {
grid-column-gap: 4vw;
grid-row-gap: 4vw
}
.nav-link {
font-size: 2.4vw
}
.about-image {
height: 90vw
}
.line {
width: 8vw
}
.about-title-container {
height: 9.2vw
}
.nav-contact-list {
padding-top: 16vw
}
.text-field {
font-size: 2.4vw;
line-height: 3vw
}
.message-field {
height: 30vw;
min-height: 30vw;
max-height: 30vh;
font-size: 2.4vw;
line-height: 3vw
}
.lets-talk-container {
height: 24%
}
._2-column-image {
grid-column-gap: 2vw;
grid-row-gap: 2vw
}
.soon-tag-mobile,
.soon-tag-desktop {
border-radius: 3.4vw;
height: 3.4vw;
padding-left: 1.6vw;
padding-right: 1.6vw
}
}
@media screen and (max-width:479px) {
h1 {
font-size: 12vw;
line-height: 12vw
}
h3,
h4 {
font-size: 14px;
line-height: 16px
}
.home-cover {
margin: 0 0
}
.form-fun-home {
letter-spacing: -1px;
font-size: 15vw;
line-height: 15vw
}
.module-blocks {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-top: 8vw;
padding-left: 4vw;
padding-right: 4vw
}
.module-blocks.small-gap-bottom {
padding-bottom: 2vw;
padding-left: 4vw;
padding-right: 4vw
}
.module-blocks.no-gap-up-down {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding-left: 4vw;
padding-right: 4vw
}
.module-blocks.no-gap-up {
padding-left: 4vw;
padding-right: 4vw
}
.module-blocks.no-gap-up-bottom {
padding-bottom: 0;
padding-left: 4vw;
padding-right: 4vw
}
.module-blocks.about {
padding-top: 30vw
}
.module-hero {
margin-bottom: 12vw;
padding-left: 4vw;
padding-right: 4vw
}
.module-hero.studio {
margin-top: 20vw
}
.module-hero.intro {
margin-bottom: 0;
padding-top: 20vw;
padding-bottom: 20vw
}
.h1-intro {
font-size: 7vw
}
.h1-intro.intro-text-indent {
text-indent: 0%
}
.copy {
font-size: 4vw
}
.container {
padding-left: 4vw;
padding-right: 4vw
}
.splide.slider3 {
width: 100vw;
margin-left: -4vw;
margin-right: -4vw;
padding-left: 4vw;
padding-right: 4vw
}
.splide__list.awards {
flex-flow: row;
justify-content: flex-start;
align-items: flex-start;
padding-right: 15%
}
.splide__slide.awards {
align-self: flex-start
}
.module-slider,
.module-slider.home {
padding-top: 20vw;
padding-bottom: 20vw
}
.module-slider.expertise {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
padding-left: 4vw;
padding-right: 4vw
}
.full-video {
height: 100%;
display: block
}
.secondary-copy {
font-size: 4vw
}
.secondary-copy.floating {
margin-top: .4vw
}
.context-cell {
grid-column-gap: 2vw;
grid-row-gap: 2vw
}
.subhead {
font-size: 4vw
}
.nav {
padding-left: 4vw;
padding-right: 4vw
}
.h1-heading {
font-size: 9.4vw
}
.bodycopy {
font-size: 2.6vw
}
.small-title {
font-size: 3.4vw
}
.h1-title {
font-size: 11.4vw
}
.h1-title.doordash {
font-size: 9vw
}
.h1-title.powerade {
font-size: 9.1vw
}
.project-tag {
border-radius: 8vw;
padding: 4vw 6vw
}
.small-container {
width: 100%
}
.center-cell {
order: 1;
width: 90%;
padding: 4vw 2vw 12vw
}
.center-cell.no-pb-mobile {
padding-bottom: 0
}
.module-heading {
grid-row-gap: 4vw;
padding-top: 20vw
}
.h1-subhead {
width: 80%;
font-size: 3.4vw
}
.h1-subhead.large {
width: 96%
}
.oreo-overview {
padding-top: 8vw;
padding-left: 4vw;
padding-right: 4vw
}
.grid-container {
height: 52vw
}
.wide-container {
aspect-ratio: 2;
flex-flow: column
}
.right-arrow {
padding-right: 4vw
}
.left-arrow {
padding-left: 4vw
}
.left-arrow-cta,
.right-arrow-cta {
width: 8vw;
height: 14vw
}
.counter {
width: 14vw;
height: 8vw;
margin-bottom: 4vw
}
.counter.right {
margin-right: 0
}
.counter-copy {
font-size: 3.2vw
}
.splide__arrows {
padding-left: 4vw;
padding-right: 4vw
}
.splide__arrow {
width: 8vw;
height: 14vw
}
.slider-arrow-icon {
width: 2vw
}
.h1-container {
padding-top: 8vw;
padding-bottom: 4vw
}
.h1-container.line-2 {
margin-top: -4vw;
padding-bottom: 4vw
}
.h1-container.line-1 {
padding-bottom: 4vw
}
.video-controls-wrapper.is-blurred {
border-radius: .8rem;
bottom: .4rem
}
.padding-bottom {
padding-top: 0;
padding-left: 0;
padding-right: 0
}
.control-button {
height: 2.5rem;
padding: 0
}
.video-controls.player_2 {
grid-column-gap: 0px;
grid-row-gap: 0px
}
.html-icon {
width: 1rem;
height: 1rem
}
.tutorial-1-container,
.tutorial-2-container,
.tutorial-3-container,
.tutorial-4-container {
aspect-ratio: 3/2
}
._2-column-grid {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex-flow: column
}
._2-column-small {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex-flow: column;
justify-content: flex-start;
align-items: center
}
.large-container-no-bg {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
aspect-ratio: auto
}
._2-column-grid-gallery {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
flex-flow: column
}
.grid-context-container {
grid-row-gap: 12vw;
grid-template-areas: "Area Area Area Area Area Area Area-2 Area-2 Area-2 Area-2 Area-2 Area-2" "Area-3 Area-3 Area-3 Area-3 Area-3 Area-3 Area-4 Area-4 Area-4 Area-4 Area-4 Area-4" "Area-5 Area-5 Area-5 Area-5 Area-5 Area-5. . . . . .";
margin-top: 12vw
}
.grid-context-subhead {
grid-column-gap: 4vw;
grid-row-gap: 8vw;
grid-template-rows: auto;
grid-template-areas: ".";
margin-top: 12vw
}
.grid-tags {
grid-column-gap: 4vw;
grid-row-gap: 8vw;
grid-template-rows: auto auto;
margin-top: 12vw
}
.container-tags {
grid-column-gap: 2vw;
grid-row-gap: 2vw
}
.slider-arrow-icon-mobile {
width: 2vw
}
._3-grid-posters {
padding-left: 4vw;
padding-right: 4vw
}
.doordash-grid {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
grid-template: "Area Area Area Area" "Area-2 Area-2 Area-2 Area-2" "Area-3 Area-3 Area-3 Area-3" "Area-4 Area-4 Area-4 Area-4" "Area-5 Area-5 Area-5 Area-5" /1fr;
padding-top: 8vw;
padding-left: 4vw;
padding-right: 4vw
}
.square-portrait-container,
.grid-container-small {
height: 100vw
}
.grid-context-container-2-item {
grid-column-gap: 4vw;
grid-row-gap: 12vw;
grid-template-areas: "Area Area Area Area Area Area Area-2 Area-2 Area-2 Area-2 Area-2 Area-2";
margin-top: 12vw
}
.doordash-flamingo,
.doordash-milkshake,
.doordash-watermelon,
.doordash-hotdog,
.doordash-cocktail,
.doordash-sunscreen,
.doordash-sunglasses,
.doordash-popsicle,
.doordash-flipflop,
.doordash-dogtreat {
aspect-ratio: 16/9
}
.powerade-overview {
padding-top: 8vw;
padding-left: 4vw;
padding-right: 4vw
}
.grid-container-vertical {
height: 106vw
}
.landscape-video-container {
width: 100%
}
.center-cell-gallery {
order: 1;
width: 100%;
height: 18vw
}
.module-gallery {
grid-column-gap: 14vw;
grid-row-gap: 14vw;
padding: 8vw 4vw 7vw
}
.overview-image {
border-radius: 6px
}
.overview-line {
grid-column-gap: 6vw;
grid-row-gap: 6vw
}
.module-overview-gallery {
grid-column-gap: 6vw;
grid-row-gap: 6vw;
padding-top: 8vw;
padding-left: 4vw;
padding-right: 4vw
}
.container-rotation {
min-width: 32vw
}
.home-slider-container {
padding-left: 4vw;
padding-right: 4vw
}
.home-video-container {
margin-bottom: 4vw
}
.home-video-container.portrait {
aspect-ratio: auto
}
.portfolio-container {
grid-column-gap: 6vw;
grid-row-gap: 6vw;
margin-bottom: 4vw
}
.work-tag-container {
padding-left: 4vw;
padding-right: 4vw
}
.expertise-wrapper {
margin-left: -4vw;
margin-right: -4vw;
padding-left: 4vw;
padding-right: 4vw
}
.h4 {
width: 80%;
font-size: 5.6vw
}
.h4.floating {
font-size: 4vw
}
.expertise-image-container {
grid-column-gap: 5vw;
grid-row-gap: 5vw;
padding: 4vw 4vw 5vw
}
.expertise-image-container:hover {
padding: 4vw
}
.h3-expertise {
font-size: 3.4vw
}
.creative-tech-marquee {
font-size: 1.6vw
}
.marquee-block {
grid-column-gap: 2vw;
grid-row-gap: 2vw;
padding: 30vw 4vw
}
.footer {
padding: 14vw 4vw 4vw
}
.footer-grid {
grid-row-gap: 10vw;
margin-bottom: 18vw
}
.footer-links {
font-size: 4vw
}
.work-tags-container {
padding-top: 4vw
}
.work-tags {
font-size: 2.4vw
}
.work-tags.fade-up.tricks.work-title {
font-size: 4.8vw
}
.description-container {
grid-column-gap: 1.4vw;
grid-row-gap: 1.4vw
}
.description-container.nav-work {
grid-column-gap: 4vw;
grid-row-gap: 4vw
}
.video-player {
width: 95vw
}
.close-video {
width: 12vw;
height: 12vw;
margin-top: 4vw;
margin-right: 4vw
}
.close-icon {
width: 4vw
}
.video-case-player {
border-radius: 2.4vw;
width: 12vw;
height: 12vw
}
.video-case-player:hover {
width: 12vw;
height: 12vw
}
.play-video-case {
width: 3vw
}
.full-image-height {
flex-flow: column
}
.nav-info {
font-size: 4vw
}
.learn-more-cta {
border-radius: 6vw;
width: 100%;
padding: 3.2vw 2.8vw;
font-size: 4vw
}
.work-title {
font-size: 4vw
}
.sticky-card {
margin-left: -4vw;
margin-right: -4vw;
padding: 4vw
}
.sticky-card-content {
grid-column-gap: 3.2vw;
grid-row-gap: 3.2vw;
padding-top: 4.2vw;
padding-bottom: 14vw;
padding-right: 0
}
.grid-context-intro {
grid-column-gap: 4vw;
grid-row-gap: 8vw;
grid-template-rows: auto auto;
grid-template-areas: "." ".";
margin-top: 20vw
}
.hide-desktop {
display: block
}
.hide-tablet {
display: none
}
.nav-work-inner {
width: 92vw;
padding-top: 4vw;
left: 4vw;
right: 4vw
}
.nav-video-container {
grid-column-gap: 4.8vw;
grid-row-gap: 4.8vw
}
.nav-work-list-wrapper {
grid-column-gap: 4vw;
grid-row-gap: 4vw
}
.nav-work-header {
padding: 4vw
}
.nav-work-list {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
padding-bottom: 8vw;
padding-left: 4vw;
padding-right: 4vw
}
.plyr_cover-button {
font-size: .7em
}
.video-desktop {
display: none
}
.video-tablet {
display: block
}
.item-awards {
grid-column-gap: 3.5vw;
grid-row-gap: 3.5vw;
flex-flow: column;
padding-top: 2.5vw
}
.order-awards {
width: 100%;
font-size: 4.4vw
}
.client-awards {
width: 100%;
padding-bottom: 3.5vw;
font-size: 6vw
}
.infos-awards {
width: 100%;
font-size: 4.4vw
}
.infos-awards.last {
justify-content: flex-start;
align-items: flex-start;
width: 30%
}
.label-info-awards {
font-size: 3.6vw
}
.powerade-reel {
padding-top: 12vw;
padding-left: 5vw;
padding-right: 5vw
}
.title-powerade-reel {
margin-top: 6vw;
font-size: 5vw;
line-height: 5vw
}
.poster-powerade-reel {
aspect-ratio: 2
}
.about-hero-container-left {
height: 92vw
}
.description-info-awards {
width: 80%;
font-size: 3.6vw;
line-height: 4vw
}
.description-info-awards.right {
text-align: left
}
.h2 {
font-size: 8.6vw
}
.h2.about {
margin-top: -1vw
}
.about-container {
width: 95%
}
._2-column-grid-about {
grid-column-gap: 8vw;
grid-row-gap: 8vw;
flex-flow: column
}
.approach {
grid-column-gap: 0vw;
grid-row-gap: 0vw;
flex-flow: column;
padding-top: 6vw;
padding-bottom: 14vw
}
.approach-title {
width: 100%;
padding-bottom: 3.5vw;
font-size: 6vw
}
.approach-numbers {
width: 100%;
font-size: 6vw
}
.label-approach {
font-size: 4.4vw
}
.approach-description {
width: 100%;
font-size: 4.4vw
}
.infos-approach {
width: 100%;
margin-top: 8vw;
font-size: 4.4vw
}
.get-in-touch-cta {
border-radius: 6vw;
width: 100%;
padding: 3.2vw 2.8vw;
font-size: 4vw
}
.h2-title-about {
font-size: 12vw
}
.module-contact {
grid-column-gap: 12vw;
grid-row-gap: 12vw;
padding-top: 10vw;
padding-bottom: 10vw
}
.nav-link {
font-size: 4vw
}
.about-image {
height: 85vw
}
.line {
width: 12vw
}
.about-title-container {
height: 9.6vw
}
.nav-contact-inner {
width: 92vw;
padding-top: 4vw;
left: 4vw;
right: 4vw
}
.nav-contact-header {
padding: 4vw
}
.nav-contact-list-wrapper {
grid-column-gap: 4vw;
grid-row-gap: 4vw
}
.nav-contact-list {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
padding: 20vw 4vw 8vw
}
.field-contact-label {
font-size: 4vw;
line-height: 4.2vw
}
.text-field {
height: 14vw;
padding-left: 4vw;
padding-right: 4vw;
font-size: 3.6vw;
line-height: 4vw
}
.message-field {
height: 35vw;
min-height: 35vw;
max-height: 35vh;
padding: 4vw;
font-size: 3.6vw;
line-height: 4vw
}
.submit-button {
height: 14vw;
font-size: 4vw;
line-height: 4vw
}
.contact-info {
font-size: 4vw;
line-height: 4.2vw
}
.lets-talk-container {
height: 35%;
padding-left: 4vw;
padding-right: 4vw
}
.success-message {
height: 24vw;
padding: 6.2vw 6vw;
font-size: 4.6vw;
line-height: 5.4vw
}
.error-message {
font-size: 12px;
line-height: 16px
}
._2-column-image {
grid-column-gap: 4vw;
grid-row-gap: 4vw;
flex-flow: column
}
._2-column-container {
width: 100%
}
.soon-tag-mobile,
.soon-tag-desktop {
height: 6vw;
padding-left: 3vw;
padding-right: 3vw;
font-size: 2.6vw
}
}
#w-node-d162c96d-def7-dca0-b5b9-c4c4c5ca370d-73e587b1 {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-_8ece97d5-8390-c4a9-01ac-134fef86db51-73e587b1,
#w-node-_5f3954d6-13b0-7421-6366-3903a5e0d112-73e587b1,
#w-node-_59cc6db0-f532-43ca-3196-4151693042e2-73e587b1,
#w-node-df9c8768-38e0-fc6e-b3ea-6aed01a26f30-73e587b1,
#w-node-b9862708-68a1-be19-902c-b96e5e47ac42-73e587b1,
#w-node-f1f92f3f-89ca-efe7-18ac-9bab118079d1-73e587b1,
#w-node-_6ce3b0f9-86b9-8d09-52b2-6c624b22da61-73e587b1,
#w-node-_313168da-5749-36b9-8c52-4e838a7dce7b-73e587b1,
#w-node-_2a30d62f-ec3f-6e62-42f6-6071ed53a083-73e587b1,
#w-node-b8043d5a-fea5-91ce-e5c7-0bc369799531-73e587b1 {
grid-area: 1/1/2/2
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d75b-2fa3d759 {
grid-area: span 2/span 1/span 2/span 1
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d75d-2fa3d759 {
grid-area: 1/7/3/8
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d75e-2fa3d759 {
grid-area: span 1/span 1/span 1/span 1
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d766-2fa3d759 {
grid-area: 1/8/3/9
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d767-2fa3d759 {
grid-area: span 1/span 1/span 1/span 1
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d76f-2fa3d759 {
grid-area: 1/10/2/13
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d770-2fa3d759 {
grid-area: span 1/span 1/span 1/span 1
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d774-2fa3d759 {
grid-area: 2/10/3/13
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d775-2fa3d759 {
grid-area: span 1/span 1/span 1/span 1
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c57-4119f33b {
grid-area: span 1/span 12/span 1/span 12
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c5c-4119f33b {
grid-area: 1/2/2/10
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c5f-4119f33b {
grid-area: Area
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c64-4119f33b {
grid-area: Area-2
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c6b-4119f33b {
grid-area: 1/6/2/10
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c75-4119f33b {
grid-area: Area-5
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c7d-4119f33b {
grid-area: 1/2/2/13
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-4119f33b {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-4119f33b {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-4119f33b,
#w-node-e64a0745-e7fb-eb87-0efc-92fadbe95124-4119f33b {
grid-column: span 2/span 2
}
#w-node-_9b54f69c-50ed-a294-49b7-f16dd3421e11-4119f33b {
grid-column: span 3/span 3
}
#w-node-_363eba5b-e02c-3766-98d7-b74ccfa396a3-4119f33b,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-4119f33b {
grid-column: span 2/span 2
}
#w-node-_2ca11587-9cbe-3afb-5ffc-93a6d8a9d259-d8a9d259 {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa8d-082ab33e {
grid-area: span 1/span 12/span 1/span 12
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa92-082ab33e {
grid-area: 1/2/2/10
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa9a-082ab33e {
grid-area: Area
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aaab-082ab33e {
grid-area: Area-2
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aab3-082ab33e {
grid-area: 1/2/2/13
}
#w-node-_010204a2-3937-6892-26f7-d0aa252b0a4c-082ab33e {
grid-area: Area
}
#w-node-_463208d6-2d48-3ec3-18ef-fab0e8d89c82-082ab33e {
grid-area: Area-2
}
#w-node-_12919df2-5c70-7d81-762d-209f3dba6510-082ab33e {
grid-area: Area-3
}
#w-node-_959fe97a-b64d-fc03-feb6-17d5202d4ecb-082ab33e {
grid-area: Area-4
}
#w-node-a0d47e31-c4ea-d275-9235-3e1dac6ce3c8-082ab33e {
grid-area: Area-5
}
#w-node-c7bf83cd-ca65-02b1-b8b0-ae30f15474b0-082ab33e {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr
}
#w-node-_55a11eda-ab2b-e7e8-e21f-d73a389cd73d-0dbef032 {
grid-area: 1/2/2/13
}
#w-node-bdc6d105-a9a5-8c18-5c5c-7c94c0e17ef6-0dbef032 {
grid-area: 1/2/2/10
}
#w-node-d9f06db4-d5f5-38e5-6043-a78f420d8d56-0dbef032 {
grid-area: Area
}
#w-node-_2dc21ce8-c8d5-314b-69b5-01fcb8441db7-0dbef032 {
grid-area: Area-2
}
#w-node-a8354e2c-7cf3-b663-3454-638dae8374b5-0dbef032 {
grid-area: Area-3
}
#w-node-_893d6f84-acd7-2742-7b0a-7f5403b39407-0dbef032 {
grid-area: Area-4
}
#w-node-_62003944-9e27-56c4-e32d-72e03b252ab4-0dbef032 {
grid-area: Area-5
}
#w-node-_7725ad5b-22a3-3040-c041-778bcfa53746-0dbef032 {
grid-area: 1/2/2/13
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-0dbef032 {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-0dbef032 {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-0dbef032 {
grid-column: span 2/span 2
}
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-0dbef032 {
grid-area: span 2/span 2/span 2/span 2
}
#w-node-_40923f14-7c78-7f2b-36b4-3f66bdd2f727-0dbef032 {
grid-column: span 2/span 2
}
#w-node-b0a5532f-e6bc-5407-dc79-141de236c66f-0dbef032 {
grid-column: span 4/span 4
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38d9f-9c94beae {
grid-area: span 1/span 12/span 1/span 12
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38da4-9c94beae {
grid-area: 1/2/2/10
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38da7-9c94beae {
grid-area: Area
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38dac-9c94beae {
grid-area: Area-2
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38db3-9c94beae {
grid-area: Area-3
}
#w-node-e985e82d-1b12-996a-76c6-3b5fdf11ac8b-9c94beae {
grid-area: Area-4
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38dba-9c94beae {
grid-area: Area-5
}
#w-node-eb2589ec-baef-1266-8d9c-e67f1689aafd-9c94beae {
grid-area: 1/2/2/13
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-9c94beae {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-9c94beae {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-9c94beae {
grid-column: span 2/span 2
}
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-9c94beae {
grid-area: span 2/span 2/span 2/span 2
}
#w-node-_40923f14-7c78-7f2b-36b4-3f66bdd2f727-9c94beae {
grid-column: span 2/span 2
}
#w-node-b0a5532f-e6bc-5407-dc79-141de236c66f-9c94beae {
grid-column: span 4/span 4
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af71-666388a8 {
grid-area: 1/2/2/13
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af76-666388a8 {
grid-area: 1/2/2/10
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af79-666388a8 {
grid-area: Area
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af7e-666388a8 {
grid-area: Area-2
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af85-666388a8 {
grid-area: Area-3
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af8c-666388a8 {
grid-area: Area-4
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af94-666388a8 {
grid-area: 1/2/2/13
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-666388a8 {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-666388a8 {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-666388a8,
#w-node-e64a0745-e7fb-eb87-0efc-92fadbe95124-666388a8 {
grid-column: span 2/span 2
}
#w-node-_9b54f69c-50ed-a294-49b7-f16dd3421e11-666388a8 {
grid-column: span 3/span 3
}
#w-node-_363eba5b-e02c-3766-98d7-b74ccfa396a3-666388a8,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-666388a8 {
grid-column: span 2/span 2
}
#w-node-_83546a8d-85ba-83f2-c353-eb55d9058b34-c8cb2641 {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-_85728b85-81a5-a9bc-720d-d2fc110b8585-5b936b71,
#w-node-_8f81ce43-5359-797f-1936-b3ac2f38ffc9-5b936b71,
#w-node-ebfd278e-f65b-32a5-f502-cb9bdafc8960-5b936b71,
#w-node-af5b2ffd-0d15-7a21-212b-91d9b0c44500-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67cca5b-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67cca70-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67cca85-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67cca9c-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67ccab1-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67ccaca-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67ccae1-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67ccaf6-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67ccb0b-5b936b71,
#w-node-_3c3e215a-c2bc-dcae-50b1-61f5a67ccb20-5b936b71 {
grid-area: 1/1/2/2
}
@media screen and (max-width:991px) {
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d75b-2fa3d759 {
grid-area: span 1/span 4/span 1/span 4
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d75d-2fa3d759 {
grid-column: 5/9;
grid-row-end: 2
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d766-2fa3d759 {
grid-column: 9/13;
grid-row-end: 2
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d76f-2fa3d759 {
grid-area: 2/5/3/9
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d774-2fa3d759 {
grid-area: 2/9/3/13
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c55-4119f33b,
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c5a-4119f33b {
grid-column: span 2/span 2
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c5c-4119f33b {
grid-column: 3/13
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c6b-4119f33b {
grid-row-start: 2;
grid-column-start: 3
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c75-4119f33b {
grid-area: Area-4
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c7b-4119f33b {
grid-column: span 2/span 2
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c7d-4119f33b {
grid-column-start: 3
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-4119f33b {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-4119f33b {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-4119f33b,
#w-node-e64a0745-e7fb-eb87-0efc-92fadbe95124-4119f33b {
grid-column: span 2/span 2
}
#w-node-_9b54f69c-50ed-a294-49b7-f16dd3421e11-4119f33b {
grid-column: span 3/span 3
}
#w-node-_363eba5b-e02c-3766-98d7-b74ccfa396a3-4119f33b,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-4119f33b,
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa8b-082ab33e,
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa90-082ab33e {
grid-column: span 2/span 2
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa92-082ab33e {
grid-column: 3/13
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aab1-082ab33e {
grid-column: span 2/span 2
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aab3-082ab33e {
grid-column-start: 3
}
#w-node-_010204a2-3937-6892-26f7-d0aa252b0a4c-082ab33e {
grid-area: Area
}
#w-node-_463208d6-2d48-3ec3-18ef-fab0e8d89c82-082ab33e {
grid-area: Area-2
}
#w-node-_12919df2-5c70-7d81-762d-209f3dba6510-082ab33e {
grid-area: Area-3
}
#w-node-_959fe97a-b64d-fc03-feb6-17d5202d4ecb-082ab33e {
grid-area: Area-4
}
#w-node-a0d47e31-c4ea-d275-9235-3e1dac6ce3c8-082ab33e {
grid-area: Area-5
}
#w-node-_8340f0f4-47dc-0401-fecc-89b205765957-0dbef032 {
grid-column: span 2/span 2
}
#w-node-_55a11eda-ab2b-e7e8-e21f-d73a389cd73d-0dbef032 {
grid-column-start: 3
}
#w-node-_5e6f005b-c61d-0215-2b67-7f9eb825ccad-0dbef032 {
grid-column: span 2/span 2
}
#w-node-bdc6d105-a9a5-8c18-5c5c-7c94c0e17ef6-0dbef032 {
grid-column: 3/13
}
#w-node-cc250500-6417-6dfc-6964-b3c06eb2bc6a-0dbef032 {
grid-column: span 2/span 2
}
#w-node-_7725ad5b-22a3-3040-c041-778bcfa53746-0dbef032 {
grid-column-start: 3
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-0dbef032 {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-0dbef032 {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-0dbef032,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-0dbef032,
#w-node-b542e775-bb16-366d-768c-72e9c1f38d9d-9c94beae,
#w-node-b542e775-bb16-366d-768c-72e9c1f38da2-9c94beae {
grid-column: span 2/span 2
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38da4-9c94beae {
grid-column: 3/13
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38dc0-9c94beae {
grid-column: span 2/span 2
}
#w-node-eb2589ec-baef-1266-8d9c-e67f1689aafd-9c94beae {
grid-column-start: 3
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-9c94beae {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-9c94beae {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-9c94beae,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-9c94beae,
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af6f-666388a8 {
grid-column: span 2/span 2
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af71-666388a8 {
grid-column-start: 3
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af74-666388a8 {
grid-column: span 2/span 2
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af76-666388a8 {
grid-column: 3/13
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af92-666388a8 {
grid-column: span 2/span 2
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af94-666388a8 {
grid-column-start: 3
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-666388a8 {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-666388a8 {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-666388a8,
#w-node-e64a0745-e7fb-eb87-0efc-92fadbe95124-666388a8 {
grid-column: span 2/span 2
}
#w-node-_9b54f69c-50ed-a294-49b7-f16dd3421e11-666388a8 {
grid-column: span 3/span 3
}
#w-node-_363eba5b-e02c-3766-98d7-b74ccfa396a3-666388a8,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-666388a8 {
grid-column: span 2/span 2
}
}
@media screen and (max-width:767px) {
#w-node-d162c96d-def7-dca0-b5b9-c4c4c5ca370d-73e587b1 {
display: grid
}
#w-node-d162c96d-def7-dca0-b5b9-c4c4c5ca371d-73e587b1 {
grid-column: span 3/span 3
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d75b-2fa3d759 {
grid-row: span 1/span 1
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d75d-2fa3d759,
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d766-2fa3d759 {
grid-row-end: 2
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d76f-2fa3d759 {
grid-row: 2/3;
grid-column-end: 13
}
#w-node-_3aa839be-0153-6f63-9dfa-e7f82fa3d774-2fa3d759 {
grid-area: 3/5/4/13
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c6b-4119f33b {
grid-column-end: 13
}
#w-node-_2ca11587-9cbe-3afb-5ffc-93a6d8a9d259-d8a9d259 {
display: grid
}
#w-node-_2ca11587-9cbe-3afb-5ffc-93a6d8a9d266-d8a9d259 {
grid-column: span 3/span 3
}
#w-node-_83546a8d-85ba-83f2-c353-eb55d9058b34-c8cb2641 {
display: grid
}
#w-node-_6b5c0517-b245-58e4-21d8-b1202468008c-c8cb2641 {
grid-column: span 3/span 3
}
}
@media screen and (max-width:479px) {
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c55-4119f33b {
grid-area: span 1/span 12/span 1/span 12
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c57-4119f33b {
grid-area: 2/1/3/13
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c5a-4119f33b {
grid-column: span 12/span 12
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c5c-4119f33b {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c6b-4119f33b {
grid-column-start: 1
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c75-4119f33b {
grid-area: Area-5
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c7b-4119f33b {
grid-column: span 12/span 12
}
#w-node-_7d58b140-02a4-2c3d-fdef-f7a91dd27c7d-4119f33b {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-4119f33b {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-4119f33b {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-4119f33b,
#w-node-e64a0745-e7fb-eb87-0efc-92fadbe95124-4119f33b {
grid-column: span 2/span 2
}
#w-node-_9b54f69c-50ed-a294-49b7-f16dd3421e11-4119f33b {
grid-column: span 3/span 3
}
#w-node-_363eba5b-e02c-3766-98d7-b74ccfa396a3-4119f33b,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-4119f33b {
grid-column: span 2/span 2
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa8b-082ab33e {
grid-area: span 1/span 12/span 1/span 12
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa8d-082ab33e {
grid-area: 2/1/3/13
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa90-082ab33e {
grid-column: span 12/span 12
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aa92-082ab33e {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aab1-082ab33e {
grid-column: span 12/span 12
}
#w-node-_3166a89d-d39a-a7ee-2000-44ea8348aab3-082ab33e {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-c7bf83cd-ca65-02b1-b8b0-ae30f15474b0-082ab33e {
grid-template-rows: auto;
grid-template-columns: 1fr
}
#w-node-_8340f0f4-47dc-0401-fecc-89b205765957-0dbef032 {
grid-area: span 1/span 12/span 1/span 12
}
#w-node-_55a11eda-ab2b-e7e8-e21f-d73a389cd73d-0dbef032 {
grid-area: 2/1/3/13
}
#w-node-_5e6f005b-c61d-0215-2b67-7f9eb825ccad-0dbef032 {
grid-column: span 12/span 12
}
#w-node-bdc6d105-a9a5-8c18-5c5c-7c94c0e17ef6-0dbef032 {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-cc250500-6417-6dfc-6964-b3c06eb2bc6a-0dbef032 {
grid-column: span 12/span 12
}
#w-node-_7725ad5b-22a3-3040-c041-778bcfa53746-0dbef032 {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-0dbef032 {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-0dbef032 {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-0dbef032,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-0dbef032 {
grid-column: span 2/span 2
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38d9d-9c94beae {
grid-area: span 1/span 12/span 1/span 12
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38d9f-9c94beae {
grid-area: 2/1/3/13
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38da2-9c94beae {
grid-column: span 12/span 12
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38da4-9c94beae {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-b542e775-bb16-366d-768c-72e9c1f38dc0-9c94beae {
grid-column: span 12/span 12
}
#w-node-eb2589ec-baef-1266-8d9c-e67f1689aafd-9c94beae {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-9c94beae {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-9c94beae {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-9c94beae,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-9c94beae {
grid-column: span 2/span 2
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af6f-666388a8 {
grid-area: span 1/span 12/span 1/span 12
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af71-666388a8 {
grid-area: 2/1/3/13
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af74-666388a8 {
grid-column: span 12/span 12
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af76-666388a8 {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af92-666388a8 {
grid-column: span 12/span 12
}
#w-node-c9d2f170-339d-e46e-f476-98dee4b5af94-666388a8 {
grid-row: 2/3;
grid-column-start: 1
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a68-666388a8 {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr
}
#w-node-ab6b4929-a86e-5177-3b05-67e144ba9a69-666388a8 {
grid-column: span 4/span 4
}
#w-node-_99fdfb28-f584-5c87-164f-819ae7a9d5ef-666388a8,
#w-node-e64a0745-e7fb-eb87-0efc-92fadbe95124-666388a8 {
grid-column: span 2/span 2
}
#w-node-_9b54f69c-50ed-a294-49b7-f16dd3421e11-666388a8 {
grid-column: span 3/span 3
}
#w-node-_363eba5b-e02c-3766-98d7-b74ccfa396a3-666388a8,
#w-node-_3a49a1b6-3504-f4f5-6c52-db2ec7349e03-666388a8 {
grid-column: span 2/span 2
}
}