img[data-lazy-src] {
opacity: 0
}
img.lazyloaded {
transition: opacity .2s linear .2s;
opacity: 1
}
html {
box-sizing: border-box;
font-size: 16px
}
*,*:before,*:after {
box-sizing: inherit
}
body,h1,h2,h3,h4,h5,h6,p,ol,ul {
margin: 0;
padding: 0;
font-weight: normal
}
ol,ul {
list-style: none
}
img {
max-width: 100%;
height: auto
}
a {
color: inherit;
text-decoration: none
}
.a1,h5 {
font-size: .24rem;
line-height: .2208rem;
font-family: "neue-haas-grotesk-text",sans-serif;
letter-spacing: .004em
}
@media screen and (max-width: 768px) {
.a1,h5 {
font-size:.2rem;
line-height: .19rem
}
}
.b0,.b-0,p {
font-family: "neue-haas-grotesk-text",sans-serif;
font-size: .22rem;
line-height: .264rem;
letter-spacing: -0.0022rem
}
@media screen and (max-width: 768px) {
.b0,.b-0,p {
font-size:.16rem;
line-height: .1952rem;
letter-spacing: -0.0032rem
}
}
.b1 {
font-family: "neue-haas-grotesk-text",sans-serif;
font-size: .18rem;
line-height: .216rem;
letter-spacing: -0.0018rem
}
@media screen and (max-width: 768px) {
.b1 {
font-size:.16rem;
line-height: .1952rem;
letter-spacing: -0.0032rem
}
}
.b2,.btn,.p-small {
font-family: "neue-haas-grotesk-text",sans-serif;
font-size: .14rem;
line-height: .1568rem;
letter-spacing: -0.0014rem
}
@media screen and (max-width: 768px) {
.b2,.btn,.p-small {
font-size:.14rem;
line-height: .168rem;
letter-spacing: -0.0014rem
}
}
.a6 {
font-size: 3.6rem;
line-height: 2.88rem;
letter-spacing: -0.216rem;
font-weight: 600;
font-family: "neue-haas-grotesk-display",sans-serif
}
@media screen and (max-width: 768px) {
.a6 {
font-size:1rem;
line-height: .9rem;
letter-spacing: -0.05rem
}
}
.a5,h1 {
font-size: 1.08rem;
line-height: .9;
letter-spacing: -0.02em;
font-weight: 600;
font-family: "neue-haas-grotesk-display",sans-serif
}
@media screen and (max-width: 768px) {
.a5,h1 {
font-size:.44rem;
line-height: .418rem;
letter-spacing: -0.0044rem
}
}
.a4,h2 {
font-size: .8rem;
line-height: .72rem;
letter-spacing: -0.016rem;
font-weight: 600;
font-family: "neue-haas-grotesk-display",sans-serif
}
@media screen and (max-width: 768px) {
.a4,h2 {
font-size:.32rem;
line-height: .304rem;
letter-spacing: -0.0032rem
}
}
.a3,h3 {
font-size: .54rem;
line-height: .486rem;
letter-spacing: -0.0054rem;
font-weight: 600;
font-family: "neue-haas-grotesk-display",sans-serif
}
@media screen and (max-width: 768px) {
.a3,h3 {
font-size:.32rem;
line-height: .304rem;
letter-spacing: -0.0032rem
}
}
.a2,h4 {
font-size: .4rem;
line-height: .392rem;
letter-spacing: -0.004rem;
font-weight: 600;
font-family: "neue-haas-grotesk-text",sans-serif
}
@media screen and (max-width: 768px) {
.a2,h4 {
font-family:"neue-haas-grotesk-display",sans-serif;
font-size: .32rem;
line-height: .304rem;
letter-spacing: -0.0032rem
}
}
.hero_title {
padding-top: 1.82rem;
padding-bottom: .6rem
}
@media screen and (max-width: 768px) {
.hero_title {
padding-top:1.4rem;
padding-bottom: .3rem
}
}
.hero_title .title {
overflow: hidden;
padding-bottom: .082rem
}
.hero_title .title .copyright {
position: relative;
width: -moz-fit-content;
width: fit-content;
display: block
}
.hero_title .title .copyright .split-lines:last-child {
width: -moz-fit-content;
width: fit-content;
padding-right: .22rem
}
@media screen and (max-width: 768px) {
.hero_title .title .copyright .split-lines:last-child {
padding-right:.16rem
}
}
.hero_title .title .copyright .split-lines:last-child::after {
position: absolute;
content: "";
background-image: url("data:image/svg+xml,");
background-size: cover;
width: .17rem;
height: .17rem;
display: block;
right: 0;
bottom: -0.5rem;
font-size: .17rem;
line-height: 1;
transition: 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition-delay: 300ms
}
@media screen and (max-width: 768px) {
.hero_title .title .copyright .split-lines:last-child::after {
width:.1rem;
height: .1rem;
right: 0rem;
bottom: -0.13rem
}
}
.hero_title .title .copyright.loaded .split-lines:last-child::after {
bottom: .28rem
}
@media screen and (max-width: 768px) {
.hero_title .title .copyright.loaded .split-lines:last-child::after {
bottom:.1rem
}
}
.hero_title .title .flip-anim {
display: inline-block;
position: relative;
color: rgba(0,0,0,0)
}
@media screen and (max-width: 768px) {
.hero_title .title .flip-anim {
min-width:1.4rem
}
}
.hero_title .title .flip-anim .span-flip {
position: absolute;
width: -moz-max-content;
width: max-content;
top: 0;
left: 0;
color: #fff
}
.hero_title .title .flip-anim .span-flip>div {
padding-bottom: .15rem;
margin-bottom: -0.15rem;
padding-right: .22rem
}
.hero_title .title .flip-anim .span-flip .split_chars:last-child::after {
position: absolute;
content: "";
background-image: url("data:image/svg+xml,");
background-size: cover;
width: .17rem;
height: .17rem;
display: block;
right: -0.18rem;
bottom: .14rem;
font-size: .17rem;
line-height: 1
}
@media screen and (max-width: 768px) {
.hero_title .title .flip-anim .span-flip .split_chars:last-child::after {
width:.1rem;
height: .1rem;
right: -0.12rem;
bottom: .05rem
}
}
@media screen and (max-width: 768px) {
.hero_title .title .a5 {
letter-spacing:-0.01em
}
}
.video_module,.image_module {
padding-bottom: 1rem
}
.video_module .video-wrapper,.video_module .image-wrapper,.image_module .video-wrapper,.image_module .image-wrapper {
position: relative
}
.video_module .video-wrapper video.video,.video_module .video-wrapper img,.video_module .image-wrapper video.video,.video_module .image-wrapper img,.image_module .video-wrapper video.video,.image_module .video-wrapper img,.image_module .image-wrapper video.video,.image_module .image-wrapper img {
aspect-ratio: 16/9;
width: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
height: auto;
border-radius: .05rem
}
.video_module .video-wrapper .animation-overlay,.video_module .image-wrapper .animation-overlay,.image_module .video-wrapper .animation-overlay,.image_module .image-wrapper .animation-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
background: #000
}
.video_module .video-wrapper video.video-full,.video_module .image-wrapper video.video-full,.image_module .video-wrapper video.video-full,.image_module .image-wrapper video.video-full {
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
inset: 0;
aspect-ratio: unset;
-o-object-fit: contain;
object-fit: contain
}
.video_module .video-wrapper video.video-full.is-visible,.video_module .image-wrapper video.video-full.is-visible,.image_module .video-wrapper video.video-full.is-visible,.image_module .image-wrapper video.video-full.is-visible {
opacity: 1;
visibility: visible;
pointer-events: all
}
.video_module .video-wrapper .video-preview,.video_module .image-wrapper .video-preview,.image_module .video-wrapper .video-preview,.image_module .image-wrapper .video-preview {
cursor: none
}
.video_module .video-wrapper .text-overlay,.video_module .image-wrapper .text-overlay,.image_module .video-wrapper .text-overlay,.image_module .image-wrapper .text-overlay {
display: none
}
@media screen and (max-width: 768px) {
.video_module,.image_module {
padding-bottom:.9rem
}
.video_module .video-wrapper video.video,.image_module .video-wrapper video.video {
aspect-ratio: 390/350;
-o-object-fit: cover;
object-fit: cover
}
.video_module .video-wrapper video.video-full,.image_module .video-wrapper video.video-full {
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
inset: 0;
aspect-ratio: unset;
-o-object-fit: contain;
object-fit: contain
}
.video_module .video-wrapper video.video-full.is-visible,.image_module .video-wrapper video.video-full.is-visible {
opacity: 1;
visibility: visible;
pointer-events: all
}
.video_module .video-wrapper .text-overlay,.image_module .video-wrapper .text-overlay {
position: absolute;
padding: .15rem .2rem;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
bottom: 0;
left: 0
}
.video_module .video-wrapper .text-overlay .text .duration,.image_module .video-wrapper .text-overlay .text .duration {
opacity: .5
}
.video_module .video-wrapper .text-overlay .text .video-text,.image_module .video-wrapper .text-overlay .text .video-text {
font-weight: 500
}
.video_module .video-wrapper .text-overlay .play-button,.image_module .video-wrapper .text-overlay .play-button {
width: .5rem;
height: .5rem;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
.video_module .video-wrapper .text-overlay .play-button svg,.image_module .video-wrapper .text-overlay .play-button svg {
width: .16rem;
height: .12rem
}
}
.fullscreen-video {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none
}
.fullscreen-video.single-work .video-controls {
width: -moz-fit-content;
width: fit-content;
right: .55rem;
left: unset;
padding-left: 0;
padding-right: 0
}
@media screen and (max-width: 768px) {
.fullscreen-video.single-work .video-controls {
right:unset;
left: .8rem
}
}
@media screen and (max-width: 768px) {
.fullscreen-video {
display:flex;
align-items: center;
background: #000
}
}
.fullscreen-video video {
-o-object-fit: cover;
object-fit: cover;
display: block;
width: 100%;
height: 100%
}
@media screen and (max-width: 768px) {
.fullscreen-video video {
height:-moz-fit-content;
height: fit-content
}
}
.fullscreen-video .close-fullscreen-btn {
position: absolute;
right: .5rem;
bottom: .3rem;
width: .5rem;
height: .5rem;
background: #1d1d1d;
display: flex;
padding: 0;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
cursor: pointer;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform-origin: center
}
@media screen and (max-width: 768px) {
.fullscreen-video .close-fullscreen-btn {
bottom:unset;
top: .3rem;
right: .2rem
}
}
.fullscreen-video .close-fullscreen-btn svg {
width: .2rem;
height: .2rem;
flex-shrink: 0;
transform: none;
position: relative;
z-index: 9
}
.fullscreen-video .close-fullscreen-btn .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
transform: scale(0);
background: #434343;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.fullscreen-video .close-fullscreen-btn:hover .circle {
transform: scale(1.08)
}
.fullscreen-video .close-fullscreen-btn:hover .circle-overlay {
transform: scale(1)
}
.fullscreen-video .video-controls {
position: absolute;
bottom: 0;
padding: 1rem 1rem .3rem 1rem;
left: 50%;
transform: translateX(-50%);
width: 100%;
display: flex;
align-items: center;
gap: .1rem;
justify-content: space-between;
max-width: 5.2rem;
opacity: 0
}
@media screen and (max-width: 768px) {
.fullscreen-video .video-controls {
padding:.2rem
}
}
.fullscreen-video .video-controls .progress {
width: 2rem;
height: .5rem;
position: relative;
border-radius: .7rem;
overflow: hidden
}
.fullscreen-video .video-controls .progress input[type=range] {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 99;
cursor: pointer
}
.fullscreen-video .video-controls .progress .preview-images {
display: flex;
background: #000;
flex-wrap: nowrap;
width: 100%
}
.fullscreen-video .video-controls .progress .preview-images img {
display: block;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
flex: 1 1 0px;
min-width: 0
}
.fullscreen-video .video-controls .progress .preview-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
border-left: .03rem solid #ff1b1b
}
.fullscreen-video .video-controls #muteBtn {
height: .5rem
}
.fullscreen-video .video-controls #muteBtn .arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: .19rem;
height: .14rem
}
.fullscreen-video .video-controls #muteBtn .arrows svg {
transition: opacity 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.fullscreen-video .video-controls #muteBtn .arrows svg.mute {
opacity: 1;
width: .19rem;
height: .14rem
}
.fullscreen-video .video-controls #muteBtn .arrows svg.unmute {
opacity: 0;
width: .19rem;
height: .14rem
}
.fullscreen-video .video-controls #muteBtn.muted .arrows svg.mute {
opacity: 0
}
.fullscreen-video .video-controls #muteBtn.muted .arrows svg.unmute {
opacity: 1
}
.fullscreen-video .video-controls #playPauseBtn {
height: .5rem
}
.fullscreen-video .video-controls #playPauseBtn .arrows {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0px);
width: 100%;
height: 100%;
backface-visibility: hidden
}
.fullscreen-video .video-controls #playPauseBtn .arrows svg {
display: block;
transition: opacity 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
backface-visibility: hidden
}
.fullscreen-video .video-controls #playPauseBtn .arrows svg.pause {
opacity: 1;
width: .08rem;
height: .16rem
}
.fullscreen-video .video-controls #playPauseBtn .arrows svg.play {
opacity: 0;
width: .12rem
}
.fullscreen-video .video-controls #playPauseBtn.paused .arrows svg.pause {
opacity: 0
}
.fullscreen-video .video-controls #playPauseBtn.paused .arrows svg.play {
opacity: 1
}
.fullscreen-video .video-controls .circle {
display: block;
width: .5rem;
height: .5rem;
background: #1d1d1d;
padding: 0;
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform: translate3d(0px, 0px, 0px) scale(1);
transform-origin: 50%;
backface-visibility: hidden
}
.fullscreen-video .video-controls .circle .arrows {
overflow: hidden;
position: relative;
z-index: 2;
transition: 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.fullscreen-video .video-controls .circle .arrows svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0px);
width: 100%;
height: 100%;
backface-visibility: hidden
}
.fullscreen-video .video-controls .circle .arrows svg.play {
left: 52.5%;
top: 51.5%
}
.fullscreen-video .video-controls .circle .arrows svg.pause {
top: 51.5%
}
.fullscreen-video .video-controls .circle .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
inset: 0;
transform: translate3d(0px, 0px, 0px) scale(0);
background: #434343;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.fullscreen-video .video-controls .circle:hover {
transform: translate3d(0px, 0px, 0px) scale(1.15)
}
.fullscreen-video .video-controls .circle:hover .circle-overlay {
transform: translate3d(0px, 0px, 0px) scale(1)
}
.featured_work_slider,.store_showcase {
padding-bottom: 2.2rem
}
.featured_work_slider .big-title,.store_showcase .big-title {
max-width: 8.83rem
}
.featured_work_slider .big-title.big-content-title,.store_showcase .big-title.big-content-title {
max-width: 7.69rem
}
@media screen and (max-width: 768px) {
.featured_work_slider .big-title,.store_showcase .big-title {
max-width:2.4rem;
font-weight: 600
}
}
.featured_work_slider .big-titles,.store_showcase .big-titles {
display: flex;
justify-content: space-between;
padding-bottom: .6rem;
padding-right: .5rem
}
.featured_work_slider .big-titles .column,.store_showcase .big-titles .column {
display: flex;
flex-direction: column
}
.featured_work_slider .big-titles .a6 .split-lines,.store_showcase .big-titles .a6 .split-lines {
padding-bottom: 0;
margin-bottom: 0;
padding-right: .2rem;
margin-right: -0.2rem
}
.featured_work_slider .container-slider,.store_showcase .container-slider {
cursor: pointer;
width: 100%;
max-width: 13.4rem;
margin: auto
}
.featured_work_slider .team-arrows,.store_showcase .team-arrows {
margin-top: .4rem
}
@media screen and (max-width: 768px) {
.featured_work_slider .team-arrows,.store_showcase .team-arrows {
display:none
}
}
.featured_work_slider .title-arrows,.store_showcase .title-arrows {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-bottom: .6rem
}
.featured_work_slider .title-arrows .featured-work-arrows,.store_showcase .title-arrows .featured-work-arrows {
display: flex;
gap: .05rem
}
.featured_work_slider .title-arrows .featured-work-arrows .arrow,.store_showcase .title-arrows .featured-work-arrows .arrow {
width: .5rem;
height: .5rem;
background: #1d1d1d;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: none;
cursor: pointer
}
@media screen and (max-width: 768px) {
.featured_work_slider .title-arrows .featured-work-arrows .arrow,.store_showcase .title-arrows .featured-work-arrows .arrow {
display:none
}
}
.featured_work_slider .splide .splide__track,.store_showcase .splide .splide__track {
overflow: visible
}
.featured_work_slider .splide .splide__slide,.store_showcase .splide .splide__slide {
width: 4.27rem
}
.featured_work_slider .splide .splide__slide.work-last video,.store_showcase .splide .splide__slide.work-last video {
opacity: 1 !important
}
.featured_work_slider .splide .splide__slide.work-last .text-overlay,.store_showcase .splide .splide__slide.work-last .text-overlay {
position: absolute;
left: 0;
bottom: 0;
padding: .3rem;
z-index: 1;
color: #000
}
.featured_work_slider .splide .splide__slide.work-last .text-overlay .email,.store_showcase .splide .splide__slide.work-last .text-overlay .email {
border-bottom: 1px solid #000;
padding-top: .2rem
}
.featured_work_slider .splide .splide__slide .case-study,.store_showcase .splide .splide__slide .case-study {
display: block
}
.featured_work_slider .splide .splide__slide .case-study .img-video-wrapper,.store_showcase .splide .splide__slide .case-study .img-video-wrapper {
position: relative;
aspect-ratio: 4/5;
width: 100%;
border-radius: .05rem;
overflow: hidden
}
.featured_work_slider .splide .splide__slide .case-study .img-video-wrapper.store-variant,.store_showcase .splide .splide__slide .case-study .img-video-wrapper.store-variant {
aspect-ratio: 1/1
}
.featured_work_slider .splide .splide__slide .case-study .img-video-wrapper.store-variant .cat-pill,.store_showcase .splide .splide__slide .case-study .img-video-wrapper.store-variant .cat-pill {
position: absolute;
left: .15rem;
top: .15rem;
background: #000;
padding: .05rem .06rem;
border-radius: .03rem;
color: #fff;
font-size: .12rem;
line-height: .1283rem;
font-weight: 600
}
.featured_work_slider .splide .splide__slide .case-study .img-video-wrapper .preview-video,.store_showcase .splide .splide__slide .case-study .img-video-wrapper .preview-video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
transition: opacity .3s ease-in-out;
display: block
}
@media screen and (max-width: 768px) {
.featured_work_slider .splide .splide__slide .case-study .img-video-wrapper .preview-video,.store_showcase .splide .splide__slide .case-study .img-video-wrapper .preview-video {
opacity:1
}
}
.featured_work_slider .splide .splide__slide .case-study .img-video-wrapper .work-card-img,.store_showcase .splide .splide__slide .case-study .img-video-wrapper .work-card-img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
transition: opacity .3s ease-in-out
}
.featured_work_slider .splide .splide__slide .case-study.video-parent:hover .work-card-img,.store_showcase .splide .splide__slide .case-study.video-parent:hover .work-card-img {
opacity: 0
}
.featured_work_slider .splide .splide__slide .case-study:hover .preview-video,.store_showcase .splide .splide__slide .case-study:hover .preview-video {
opacity: 1
}
.featured_work_slider .splide .splide__slide .case-study .text,.store_showcase .splide .splide__slide .case-study .text {
padding-top: .3rem
}
.featured_work_slider .splide .splide__slide .case-study .text .work-name,.store_showcase .splide .splide__slide .case-study .text .work-name {
font-weight: 500
}
.featured_work_slider .splide .splide__slide .case-study .text .work-description,.store_showcase .splide .splide__slide .case-study .text .work-description {
margin-top: .05rem;
color: #767676
}
.featured_work_slider .splide .splide__slide .case-study.last,.store_showcase .splide .splide__slide .case-study.last {
background: #fff;
border-radius: .05rem
}
.featured_work_slider .splide .splide__slide .case-study.last:hover .button-single .circle,.store_showcase .splide .splide__slide .case-study.last:hover .button-single .circle {
transform: scale(1.08)
}
.featured_work_slider .splide .splide__slide .case-study.last:hover .button-single .circle .circle-overlay,.store_showcase .splide .splide__slide .case-study.last:hover .button-single .circle .circle-overlay {
transform: scale(1)
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper {
padding: .3rem;
display: flex;
flex-direction: column;
justify-content: space-between
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper {
display: flex;
gap: .3rem
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video {
aspect-ratio: 168/240;
height: 2.4rem;
-o-object-fit: cover;
object-fit: cover;
border-radius: .05rem;
flex-shrink: 0
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview {
aspect-ratio: 168/240;
height: 2.4rem;
border-radius: .05rem;
flex-shrink: 0;
position: relative
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview .overlay-text,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview .overlay-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview img,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview img {
width: 100%;
height: 100%;
border-radius: .05rem;
-o-object-fit: cover;
object-fit: cover
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single {
color: #000;
display: flex;
align-items: center;
justify-content: space-between
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle {
width: .5rem;
height: .5rem;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform-origin: center
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .arrows,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .arrows {
width: .16rem;
height: .16rem;
overflow: hidden;
display: flex;
position: relative;
z-index: 2
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .arrows svg,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .arrows svg {
width: 100%;
height: 100%;
flex-shrink: 0;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg {
width: .16rem;
height: .16rem
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg path,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg path {
fill: #000
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .circle-overlay,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
transform: scale(0);
background: #f5f5f5;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.featured_work_slider .splide .splide__slide.big,.store_showcase .splide .splide__slide.big {
width: 6.55rem
}
.featured_work_slider .splide .splide__slide.big .case-study .img-video-wrapper,.store_showcase .splide .splide__slide.big .case-study .img-video-wrapper {
aspect-ratio: 4/3
}
@media screen and (max-width: 768px) {
.featured_work_slider .splide .splide__slide.big,.store_showcase .splide .splide__slide.big {
width:2.98rem
}
}
@media screen and (max-width: 768px) {
.featured_work_slider,.store_showcase {
padding-bottom:1.2rem
}
.featured_work_slider .title-arrows,.store_showcase .title-arrows {
padding-bottom: .4rem
}
.featured_work_slider .big-titles,.store_showcase .big-titles {
padding-bottom: .4rem;
padding-right: .15rem
}
.featured_work_slider .big-title,.store_showcase .big-title {
font-size: .31rem
}
.featured_work_slider .container-slider,.store_showcase .container-slider {
padding-left: .1489rem;
padding-right: .1489rem
}
.featured_work_slider .splide .splide__slide,.store_showcase .splide .splide__slide {
width: 2.98rem
}
.featured_work_slider .splide .splide__slide .case-study .text,.store_showcase .splide .splide__slide .case-study .text {
padding-top: .2rem
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper {
padding: .15rem
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper {
gap: .15rem
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .placeholder-video {
height: 1.8rem
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .previews-wrapper .img-preview {
height: 1.8rem
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle {
width: .4rem;
height: .4rem
}
.featured_work_slider .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg,.store_showcase .splide .splide__slide .case-study.last .img-video-wrapper .button-content .button-single .circle svg {
width: .18rem;
height: .18rem
}
}
.store_showcase .splide__slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.simple_text {
padding-bottom: 1rem
}
@media screen and (max-width: 768px) {
.simple_text {
padding-bottom:.8rem
}
}
.simple_text .big-title {
max-width: 12.23rem
}
@media screen and (max-width: 768px) {
.simple_text .big-title {
max-width:2.98rem
}
}
.slider_with_text {
padding-bottom: 2.2rem
}
.slider_with_text .container-slider {
cursor: pointer;
margin-left: .5rem
}
.slider_with_text .splide .splide__track {
overflow: visible;
padding-right: .5rem !important
}
.slider_with_text .splide .splide__slide {
height: 5.34rem
}
.slider_with_text .splide .splide__slide img,.slider_with_text .splide .splide__slide video {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: auto;
border-radius: .05rem
}
.slider_with_text .boxes {
display: flex;
justify-content: space-between;
padding-top: .6rem
}
.slider_with_text .boxes .boxes-extra {
display: flex;
flex-wrap: wrap;
gap: .3rem;
row-gap: 0;
max-width: 8.82rem
}
.slider_with_text .boxes .boxes-extra .box {
max-width: 4.25rem;
font-family: "neue-haas-grotesk-text",sans-serif;
margin-top: .1rem
}
.slider_with_text .boxes .button {
display: flex;
align-items: center;
margin-top: .4rem;
font-family: "neue-haas-grotesk-text",sans-serif;
width: -moz-fit-content;
width: fit-content;
font-weight: 500
}
.slider_with_text .boxes .button .circle {
width: .5rem;
height: .5rem;
border-radius: 50%;
background: #1d1d1d;
display: flex;
align-items: center;
justify-content: center;
margin-left: .3rem;
position: relative;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform-origin: center;
backface-visibility: hidden
}
.slider_with_text .boxes .button .circle .arrows {
width: .14rem;
height: .14rem;
height: auto;
overflow: hidden;
display: flex;
position: relative;
z-index: 2
}
.slider_with_text .boxes .button .circle .arrows svg {
width: 100%;
height: 100%;
flex-shrink: 0
}
.slider_with_text .boxes .button .circle .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
transform: scale(0);
background: #434343;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.slider_with_text .boxes .button:hover .circle {
transform: scale(1.08)
}
.slider_with_text .boxes .button:hover .circle .circle-overlay {
transform: scale(1)
}
.slider_with_text .boxes .slider-arrows {
padding-top: .1rem
}
@media screen and (max-width: 768px) {
.slider_with_text {
padding-bottom:1.2rem
}
.slider_with_text .container-slider {
margin-left: .15rem
}
.slider_with_text .splide .splide__track {
padding-right: .1489rem !important
}
.slider_with_text .splide .splide__slide {
height: 3.85rem
}
.slider_with_text .splide .splide__slide img,.slider_with_text .splide .splide__slide video {
width: auto
}
.slider_with_text .boxes {
padding-top: .4rem
}
.slider_with_text .boxes .boxes-extra {
flex-direction: column;
gap: 0
}
.slider_with_text .boxes .boxes-extra .box {
max-width: 2.9rem;
margin-top: 0
}
.slider_with_text .boxes .button .circle {
width: .4rem;
height: .4rem
}
.slider_with_text .boxes .button .circle .arrows {
width: .14rem;
height: .14rem
}
}
.background_video_cta {
padding-bottom: 2.2rem
}
.background_video_cta .video-wrapper {
position: relative;
aspect-ratio: 16/9;
width: 100%;
display: block;
border-radius: .05rem;
overflow: hidden
}
.background_video_cta .video-wrapper video.video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.background_video_cta .video-wrapper .text-wrapper {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: .6rem
}
.background_video_cta .video-wrapper .text-wrapper .title {
max-width: 7.09rem
}
.background_video_cta .video-wrapper .text-wrapper .button {
display: flex;
gap: .3rem;
align-items: center;
margin-top: .4rem;
font-weight: 500
}
.background_video_cta .video-wrapper .text-wrapper .button .circle {
width: .5rem;
height: .5rem;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform-origin: center
}
.background_video_cta .video-wrapper .text-wrapper .button .circle .arrows {
width: .16rem;
height: .16rem;
height: auto;
overflow: hidden;
display: flex;
position: relative;
z-index: 2
}
.background_video_cta .video-wrapper .text-wrapper .button .circle .arrows svg {
width: 100%;
height: 100%;
flex-shrink: 0;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.background_video_cta .video-wrapper .text-wrapper .button .circle .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
transform: scale(0);
background: #fff;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.background_video_cta .video-wrapper .text-wrapper .button:hover .circle {
transform: scale(1.08) !important
}
.background_video_cta .video-wrapper .text-wrapper .button:hover .circle .circle-overlay {
transform: scale(1) !important
}
@media screen and (max-width: 768px) {
.background_video_cta {
padding-bottom:1.2rem
}
.background_video_cta .container {
padding: 0
}
.background_video_cta .video-wrapper {
aspect-ratio: 4/5;
border-radius: 0
}
.background_video_cta .video-wrapper .text-wrapper {
padding: .1489rem
}
.background_video_cta .video-wrapper .text-wrapper .title {
max-width: 2.98rem
}
.background_video_cta .video-wrapper .text-wrapper .button {
margin-top: .3rem
}
.background_video_cta .video-wrapper .text-wrapper .button .circle {
width: .5rem;
height: .5rem
}
}
@media screen and (max-width: 768px)and (max-width: 768px) {
.background_video_cta .video-wrapper .text-wrapper .button .circle {
width:.4rem;
height: .4rem
}
}
@media screen and (max-width: 768px) {
.background_video_cta .video-wrapper .text-wrapper .button .circle .arrows {
width:100%;
height: 100%;
justify-content: center;
align-items: center
}
.background_video_cta .video-wrapper .text-wrapper .button .circle .arrows svg {
width: .14rem;
height: .14rem
}
.background_video_cta .video-wrapper:hover .button .circle .arrows svg:first-child {
transform: none
}
.background_video_cta .video-wrapper:hover .button .circle .arrows svg:last-child {
transform: none
}
}
.background_video_cta_variation {
padding-bottom: 2.2rem
}
.background_video_cta_variation .btn-pill {
padding: .05rem .15rem .07rem .15rem;
background-color: rgba(255,255,255,.91);
border-radius: .6rem;
margin-left: auto;
margin-right: auto;
margin-top: .2rem;
font-weight: 500;
width: -moz-fit-content;
width: fit-content;
color: #000;
display: none
}
@media screen and (max-width: 768px) {
.background_video_cta_variation .btn-pill {
display:block
}
}
.background_video_cta_variation .video-wrapper {
position: relative;
aspect-ratio: 16/9;
width: 100%;
display: block;
border-radius: .05rem;
overflow: hidden;
z-index: 2;
cursor: none
}
.background_video_cta_variation .video-wrapper video.video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media screen and (max-width: 768px) {
.background_video_cta_variation .video-wrapper video.video {
-o-object-fit:cover;
object-fit: cover;
aspect-ratio: 4/5
}
}
.background_video_cta_variation .video-wrapper .text-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 9.45rem;
display: flex;
flex-direction: column;
justify-content: space-between;
mix-blend-mode: difference
}
@media screen and (max-width: 768px) {
.background_video_cta_variation .video-wrapper .text-wrapper {
width:100%;
padding: .3rem;
justify-content: center;
align-items: center
}
}
.background_video_cta_variation .video-wrapper .text-wrapper .title {
width: 9.45rem;
text-align: center
}
.background_video_cta_variation .video-wrapper .text-wrapper .title svg {
width: .4rem;
height: auto
}
@media screen and (max-width: 768px) {
.background_video_cta_variation .video-wrapper .text-wrapper .title svg {
width:.25rem
}
}
.background_video_cta_variation .video-wrapper .text-wrapper .button {
display: flex;
gap: .3rem;
align-items: center;
margin-top: .4rem;
font-weight: 500
}
.background_video_cta_variation .video-wrapper .text-wrapper .button .circle {
width: .5rem;
height: .5rem;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform-origin: center
}
.background_video_cta_variation .video-wrapper .text-wrapper .button .circle .arrows {
width: .16rem;
height: .16rem;
height: auto;
overflow: hidden;
display: flex;
position: relative;
z-index: 2
}
.background_video_cta_variation .video-wrapper .text-wrapper .button .circle .arrows svg {
width: 100%;
height: 100%;
flex-shrink: 0;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.background_video_cta_variation .video-wrapper .text-wrapper .button .circle .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
transform: scale(0);
background: #fff;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.background_video_cta_variation .video-wrapper .text-wrapper .button:hover .circle {
transform: scale(1.08) !important
}
.background_video_cta_variation .video-wrapper .text-wrapper .button:hover .circle .circle-overlay {
transform: scale(1) !important
}
@media screen and (max-width: 768px) {
.background_video_cta_variation {
padding-bottom:1.2rem
}
.background_video_cta_variation .container {
padding: 0
}
.background_video_cta_variation .video-wrapper {
aspect-ratio: unset;
border-radius: 0
}
.background_video_cta_variation .video-wrapper .text-wrapper {
padding: .1489rem
}
.background_video_cta_variation .video-wrapper .text-wrapper .title {
max-width: 2.98rem
}
.background_video_cta_variation .video-wrapper .text-wrapper .button {
margin-top: .3rem
}
.background_video_cta_variation .video-wrapper .text-wrapper .button .circle {
width: .5rem;
height: .5rem
}
}
@media screen and (max-width: 768px)and (max-width: 768px) {
.background_video_cta_variation .video-wrapper .text-wrapper .button .circle {
width:.4rem;
height: .4rem
}
}
@media screen and (max-width: 768px) {
.background_video_cta_variation .video-wrapper .text-wrapper .button .circle .arrows {
width:100%;
height: 100%;
justify-content: center;
align-items: center
}
.background_video_cta_variation .video-wrapper .text-wrapper .button .circle .arrows svg {
width: .14rem;
height: .14rem
}
.background_video_cta_variation .video-wrapper:hover .button .circle .arrows svg:first-child {
transform: none
}
.background_video_cta_variation .video-wrapper:hover .button .circle .arrows svg:last-child {
transform: none
}
}
.accordions-section {
padding-bottom: 2.2rem
}
.accordions-section .main-wrapper {
max-width: 8.83rem;
margin-left: auto
}
.accordions-section .main-wrapper .title {
padding-bottom: .6rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item {
border-bottom: 1px solid #434343
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-btn svg path:first-child {
transition: .3s ease-in-out
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item.active .accordion-btn svg path:first-child {
opacity: 0
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item:first-child .accordion-header {
border-top: 1px solid #434343
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-header {
display: flex;
cursor: pointer;
justify-content: space-between;
align-items: center;
padding: .3rem .15rem .3rem 0
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-header .count-name {
display: flex;
align-items: center;
position: relative
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-header .count-name .count {
position: absolute;
left: 0
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-header .count-name .header-title {
padding-left: 1.1rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content {
max-height: 0;
overflow: hidden;
transition: .5s ease
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper {
padding-top: .3rem;
padding-bottom: .6rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award {
display: flex;
align-items: center;
position: relative;
cursor: pointer
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .award-image {
position: absolute;
opacity: 0;
transition: .3s ease-in-out opacity;
-o-object-fit: cover;
object-fit: cover;
border-radius: .05rem;
width: .84rem;
aspect-ratio: 4/3
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .award-video {
width: .84rem;
aspect-ratio: 4/3;
position: absolute;
opacity: 0;
transition: .3s ease-in-out opacity;
-o-object-fit: cover;
object-fit: cover;
border-radius: .05rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year {
width: 100%;
padding-left: 1.1rem;
display: flex;
justify-content: space-between;
color: #434343;
transition: .3s ease-in-out color
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year .name {
width: -moz-fit-content;
width: fit-content;
padding-right: .3rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year .placement {
margin-left: .2rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year .year {
min-width: .3rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year .year-placement {
display: flex;
min-width: 2.6rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award:hover .award-image,.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award:hover .award-video {
opacity: 1
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award:hover .name-and-year {
color: #fff
}
@media screen and (max-width: 768px) {
.accordions-section {
padding-bottom:1.2rem
}
.accordions-section .main-wrapper .title {
padding-bottom: .4rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-header {
padding: .2rem 0rem .2rem 0
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-header .count-name .header-title {
padding-left: .4rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper {
padding-top: .2rem;
padding-bottom: .4rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .award-image {
display: none
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .award-video {
display: none
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year {
padding-left: .4rem;
color: #fff
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: .1rem;
max-width: 1.7rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year .placement {
margin-left: .15rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year .year {
min-width: .2rem
}
.accordions-section .main-wrapper .accordions-wrapper .accordion-item .accordion-content .accordion-content-wrapper .single-award .name-and-year .year-placement {
display: flex;
min-width: 1.3rem
}
}
.services_module {
padding-bottom: 2.2rem
}
.services_module .wrapper {
position: relative
}
.services_module .wrapper .title {
position: absolute;
left: 0;
top: 0;
font-weight: 500
}
.services_module .wrapper .single-service {
position: relative
}
.services_module .wrapper .single-service .service-img,.services_module .wrapper .single-service .service-video {
width: 5.41rem;
height: 4.06rem;
-o-object-fit: cover;
object-fit: cover;
border-radius: .05rem;
opacity: 0;
transition: opacity 300ms ease-in;
position: absolute;
top: 50%;
transform: translateY(-50%);
will-change: transform;
pointer-events: none
}
.services_module .wrapper .single-service:nth-child(2) .service-img,.services_module .wrapper .single-service:nth-child(2) .service-video {
top: .47rem;
transform: translateY(0)
}
.services_module .wrapper .single-service:nth-child(3) .service-img,.services_module .wrapper .single-service:nth-child(3) .service-video {
top: -0.25rem;
transform: translateY(0)
}
.services_module .wrapper .single-service:nth-child(4) .service-img,.services_module .wrapper .single-service:nth-child(4) .service-video {
top: -0.97rem;
transform: translateY(0)
}
.services_module .wrapper .single-service:nth-last-child(3) .service-img,.services_module .wrapper .single-service:nth-last-child(3) .service-video {
top: unset;
bottom: -1.44rem;
transform: translateY(0)
}
.services_module .wrapper .single-service:nth-last-child(2) .service-img,.services_module .wrapper .single-service:nth-last-child(2) .service-video {
top: unset;
bottom: -0.72rem;
transform: translateY(0)
}
.services_module .wrapper .single-service:nth-last-child(1) .service-img,.services_module .wrapper .single-service:nth-last-child(1) .service-video {
top: unset;
bottom: 0;
transform: translateY(0)
}
.services_module .wrapper .single-service .service-name {
padding-left: 6.85rem;
color: #434343;
transition: .3s ease-in-out;
line-height: .74rem;
pointer-events: none
}
.services_module .wrapper .single-service:last-child .service-name {
position: relative;
width: -moz-fit-content;
width: fit-content
}
.services_module .wrapper .single-service:last-child .service-name .copyright-svg {
position: absolute;
width: .17rem;
height: .17rem;
display: block;
right: -0.2rem;
bottom: .09rem;
font-size: .17rem;
line-height: 1
}
.services_module .wrapper .single-service:last-child .service-name .copyright-svg path {
transition: .3s ease-in-out
}
@media screen and (max-width: 768px) {
.services_module .wrapper .single-service:last-child .service-name .copyright-svg {
width:.1rem;
height: .1rem;
right: -0.12rem;
bottom: .05rem
}
.services_module .wrapper .single-service:last-child .service-name .copyright-svg path {
transition: none
}
}
.services_module .wrapper .single-service::before {
content: "";
position: absolute;
top: 20%;
left: 0;
width: 100%;
height: 80%;
pointer-events: all
}
.services_module .wrapper .single-service:hover .service-name {
transform: translateX(0.8rem);
color: #fff
}
.services_module .wrapper .single-service:hover .service-name .copyright-svg path {
fill: #fff
}
.services_module .wrapper .single-service:hover .service-img,.services_module .wrapper .single-service:hover .service-video {
opacity: 1
}
@media screen and (max-width: 768px) {
.services_module {
padding-bottom:1.2rem
}
.services_module .wrapper {
position: static
}
.services_module .wrapper .title {
position: static;
padding-bottom: .2rem
}
.services_module .wrapper .single-service {
position: static
}
.services_module .wrapper .single-service .service-img,.services_module .wrapper .single-service .service-video {
width: 2.35rem;
height: 1.8rem;
opacity: 0;
position: fixed;
transition: transform 300ms ease;
bottom: .3rem !important;
right: .15rem;
pointer-events: none;
visibility: hidden;
z-index: 9;
top: unset !important;
transform: none !important
}
.services_module .wrapper .single-service .service-name {
padding-left: 0;
color: #434343;
transition: none;
font-size: .4rem;
line-height: .418rem;
letter-spacing: -0.0044rem
}
.services_module .wrapper .single-service::before {
display: none
}
.services_module .wrapper .single-service.active .service-name {
color: #fff
}
.services_module .wrapper .single-service.active .service-name .copyright-svg path {
fill: #fff
}
.services_module .wrapper .single-service.active .service-img,.services_module .wrapper .single-service.active .service-video {
opacity: 1;
visibility: visible;
pointer-events: all
}
.services_module .wrapper .single-service:hover .service-name {
transform: none;
color: #434343
}
.services_module .wrapper .single-service:hover .service-img,.services_module .wrapper .single-service:hover .service-video {
opacity: 0
}
}
@media screen and (max-width: 768px) {
.scroll-up .wrapper .single-service .service-img,.scroll-up .wrapper .single-service .service-video {
transform:translateY(0.15rem) !important
}
}
.contact_blocks {
padding-bottom: 1.6rem
}
.contact_blocks .single-contact {
display: flex;
justify-content: space-between;
position: relative;
padding-top: .3rem;
padding-bottom: .6rem;
border-top: 1px solid #434343;
border-bottom: 1px solid #434343;
cursor: none
}
.contact_blocks .single-contact:last-child {
border-bottom: none
}
.contact_blocks .single-contact .info {
color: #434343;
transition: color .3s ease-in-out
}
.contact_blocks .single-contact:hover .info {
color: #fff
}
@media screen and (max-width: 768px) {
.contact_blocks {
padding-bottom:.8rem
}
.contact_blocks .single-contact {
flex-direction: column;
padding-top: .2rem;
padding-bottom: .4rem
}
.contact_blocks .single-contact .label {
padding-bottom: .2rem
}
.contact_blocks .single-contact .info {
color: #fff;
padding-right: 0
}
}
.index_module {
padding-top: 2.5rem;
padding-bottom: 2.2rem
}
.index_module .titles {
display: flex;
padding-bottom: .3rem;
position: relative
}
.index_module .titles .right-title {
position: absolute;
left: 7.85rem
}
.index_module .mobile {
display: none
}
.index_module .single-items-wrapper .single-item {
display: flex;
justify-content: space-between;
position: relative;
transition: color .3s ease-in-out
}
.index_module .single-items-wrapper .single-item .a2 {
font-size: .36rem
}
.index_module .single-items-wrapper .single-item .brand-name {
width: 6rem;
transition: transform .3s ease-in-out
}
.index_module .single-items-wrapper .single-item .brand-services {
transition: transform .3s ease-in-out
}
.index_module .single-items-wrapper .single-item .service-img {
position: absolute;
left: 5.26rem;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
border-radius: .05rem;
width: 2.28rem;
height: 1.72rem;
-o-object-fit: cover;
object-fit: cover
}
.index_module .single-items-wrapper .single-item .service-wrap {
width: 6.3rem;
display: flex;
align-items: flex-end
}
.index_module .single-items-wrapper .single-item .service-wrap .year {
position: relative;
top: -0.04rem;
padding-right: .3rem;
width: .75rem
}
.index_module .single-items-wrapper .single-item:hover {
color: #fff !important
}
.index_module .single-items-wrapper .single-item:hover .service-img {
opacity: 1;
visibility: visible
}
.index_module .single-items-wrapper .single-item:hover .brand-name {
transform: translateX(0.3rem)
}
.index_module .single-items-wrapper .single-item:hover .brand-services {
transform: translateX(0.3rem)
}
.index_module .single-items-wrapper:hover .single-item {
color: #434343
}
@media screen and (max-width: 768px) {
.index_module {
padding-top:1.4rem;
padding-bottom: 1.2rem
}
.index_module .desktop {
display: none
}
.index_module .mobile {
display: block;
padding-right: 0;
position: relative
}
.index_module .mobile .titles .right-title-mobile {
position: absolute;
left: 2.59rem
}
.index_module .mobile .text-custom {
font-size: .16rem;
line-height: .1952rem;
font-weight: 500;
letter-spacing: -0.0032rem;
font-family: "neue-haas-grotesk-text",sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.index_module .mobile .wrapper {
display: flex
}
.index_module .mobile .wrapper .titles-mobile {
width: 1.73rem
}
.index_module .mobile .wrapper .years-and-services {
width: 2.9rem;
padding-left: .23rem;
overflow: scroll
}
.index_module .mobile .wrapper .years-and-services * {
flex-shrink: 0 !important
}
.index_module .mobile .wrapper .services-container {
display: flex
}
.index_module .mobile .wrapper .services-container .year {
width: .64rem;
padding-right: .15rem
}
}
.hero_title:has(+.portfolio_module) {
padding-top: 2.54rem
}
@media screen and (max-width: 768px) {
.hero_title:has(+.portfolio_module) {
padding-top:1.4rem
}
}
.portfolio_module {
padding-bottom: 1rem;
margin-top: -1.2rem
}
.portfolio_module #scrollToTop {
display: none
}
.portfolio_module .cards-wrapper {
display: flex;
flex-wrap: wrap;
gap: .36rem .29rem
}
.portfolio_module .cards-wrapper .work-card {
display: block
}
.portfolio_module .cards-wrapper .work-card .img-video-wrapper {
width: 4.27rem;
height: auto;
position: relative
}
.portfolio_module .cards-wrapper .work-card .img-video-wrapper img,.portfolio_module .cards-wrapper .work-card .img-video-wrapper video {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
border-radius: .05rem;
z-index: 1;
position: relative;
display: block
}
.portfolio_module .cards-wrapper .work-card .img-video-wrapper .preview-img {
transition: cubic-bezier(0.51, 0.01, 0.2, 1) 300ms opacity
}
.portfolio_module .cards-wrapper .work-card.has-preview:hover .img-video-wrapper .preview-img {
opacity: 0
}
.portfolio_module .cards-wrapper .work-card .text {
padding-top: .2rem
}
.portfolio_module .cards-wrapper .work-card .text .a1 {
font-weight: 500
}
.portfolio_module .cards-wrapper .work-card .text .work-description {
color: #767676;
margin-top: .05rem
}
.portfolio_module .categories {
margin-left: .42rem;
margin-right: .52rem;
z-index: 9;
display: flex;
justify-content: flex-end;
position: fixed;
opacity: 0;
visibility: hidden;
right: .05rem;
top: .36rem;
width: 100%
}
.portfolio_module .categories .categories-something {
display: flex;
width: -moz-fit-content;
width: fit-content;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 2;
padding: .15rem .2rem;
padding-top: .155rem;
background: #000;
border-radius: .4rem
}
.portfolio_module .categories .categories-something .hidden-wrapper {
overflow: hidden
}
.portfolio_module .categories .categories-something .wrapper {
display: flex;
opacity: .9;
overflow: hidden;
gap: .25rem
}
.portfolio_module .categories .categories-something .wrapper .cat-list_item {
background: rgba(0,0,0,0);
border: none;
color: #fff;
padding: 0;
cursor: pointer
}
.portfolio_module .categories .categories-something .wrapper.wrapper-expanded {
overflow: hidden;
padding-right: .01rem
}
.portfolio_module .categories .categories-something .wrapper .cat-list_item {
background: rgba(0,0,0,0);
border: none;
color: #fff;
padding: 0;
cursor: pointer;
position: relative;
padding-bottom: .02rem
}
.portfolio_module .categories .categories-something .wrapper .cat-list_item .hover-line {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transform: scaleX(0);
transform-origin: left
}
.portfolio_module .categories .categories-expanded {
width: 0;
overflow: hidden;
opacity: 0;
z-index: 1
}
.portfolio_module .categories .categories-expanded .wrapper {
padding: .15rem .2rem;
display: flex;
gap: .25rem;
border-radius: .4rem;
background: #000;
opacity: .9
}
.portfolio_module .categories.active-scrolling .wrapper {
border-color: #000 !important
}
.portfolio_module .categories-static {
margin-bottom: .6rem;
z-index: 9;
display: flex;
justify-content: flex-end;
position: relative;
transition: opacity 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.portfolio_module .categories-static .wrapper {
display: flex;
border-radius: .4rem;
background: #000;
opacity: .9;
gap: .1rem
}
.portfolio_module .categories-static .wrapper .cat-list_item {
background: rgba(0,0,0,0);
border: none;
color: #fff;
padding: 0;
cursor: pointer;
transition: 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
overflow: visible;
padding: .14rem .25rem;
border: 2px solid #1d1d1d;
border-radius: 1.4rem;
position: relative
}
.portfolio_module .categories-static .wrapper .cat-list_item .fill-overlay {
transform-origin: center;
transform: scale(0);
position: absolute;
left: -0.04rem;
top: -0.04rem;
width: calc(100% + .08rem);
height: calc(100% + .08rem);
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
background: #434343;
border-radius: 1.4rem;
z-index: 1
}
.portfolio_module .categories-static .wrapper .cat-list_item span {
z-index: 2;
position: relative;
transition: color 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.portfolio_module .categories-static .wrapper .cat-list_item.active .fill-overlay {
background: #fff
}
.portfolio_module .categories-static .wrapper .cat-list_item.active span {
color: #000
}
.portfolio_module .categories-static .wrapper .cat-list_item.active .fill-overlay,.portfolio_module .categories-static .wrapper .cat-list_item:hover .fill-overlay {
transform: scale(1)
}
@media screen and (max-width: 768px) {
.portfolio_module {
padding-bottom:.9rem;
margin-top: -0.3rem
}
.portfolio_module #scrollToTop {
position: fixed;
bottom: .6rem;
right: .8rem;
background-color: rgba(0,0,0,.9);
z-index: 99;
border-radius: 50%;
border: none;
transform: rotateZ(90deg);
width: .5rem;
height: .5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer
}
}
@media screen and (max-width: 768px)and (max-width: 768px) {
.portfolio_module #scrollToTop {
bottom:.3rem;
right: .2rem
}
}
@media screen and (max-width: 768px) {
.portfolio_module #scrollToTop svg {
width:.11rem;
height: .14rem;
transform: rotateZ(-90deg)
}
.portfolio_module .cards-wrapper {
gap: .4rem
}
.portfolio_module .cards-wrapper .work-card {
width: 100%
}
.portfolio_module .cards-wrapper .work-card .img-video-wrapper {
width: 100%
}
.portfolio_module .cards-wrapper .work-card .text {
padding-top: .15rem
}
.portfolio_module .categories-static {
margin: 0;
padding: 0
}
.portfolio_module .categories-static .cat-list_item {
background: rgba(0,0,0,0);
border: none;
color: #fff;
padding: 0;
cursor: pointer;
transition: 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
overflow: hidden;
padding: .14rem .25rem;
border: 2px solid #434343;
border-radius: 1.4rem
}
.portfolio_module .categories-static .wrapper {
display: block;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: scroll;
gap: .2rem;
padding-top: .16rem;
padding-bottom: .15rem;
margin-bottom: .15rem;
padding-left: .15rem;
background: #000;
opacity: .9;
border-radius: 0;
visibility: visible;
pointer-events: all
}
.portfolio_module .categories-static .wrapper .cat-list_item {
margin-right: .1rem
}
.portfolio_module .categories {
gap: .2rem;
padding: 0;
z-index: 9;
display: flex;
position: relative;
overflow: hidden;
margin-left: 0;
margin-right: 0;
cursor: pointer;
display: none
}
.portfolio_module .categories .categories-collapsed {
display: none
}
.portfolio_module .categories .categories-expanded {
overflow: hidden;
opacity: 1;
max-width: 100%;
transform: translateX(0)
}
.portfolio_module .categories .categories-expanded .wrapper {
padding: .15rem .2rem;
padding-top: .16rem;
padding-bottom: .15rem;
margin-bottom: .15rem;
display: block;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: scroll;
gap: .25rem;
border-radius: 0;
border: none;
background: #000;
opacity: .9
}
.portfolio_module .categories .categories-expanded .wrapper .cat-list_item {
background: rgba(0,0,0,0);
border: none;
color: #fff;
padding: 0;
cursor: pointer;
transition: 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
overflow: hidden;
padding: .11rem .21rem;
border: 2px solid #434343;
border-radius: 1.4rem
}
.portfolio_module .categories .categories-expanded .wrapper .cat-list_item::after {
display: none
}
.portfolio_module .categories .categories-expanded .wrapper .cat-list_item.active {
border-color: #fff;
color: #000;
background: #fff
}
.portfolio_module .categories:hover .categories-expanded {
max-width: 100%;
transform: translateX(0)
}
.portfolio_module .categories:hover .categories-collapsed {
transform: translateX(-100%);
opacity: 0
}
.portfolio_module .categories.active-scrolling .wrapper {
border-color: #000 !important
}
}
.text_blocks_with_title {
padding-top: 2.5rem;
padding-bottom: 2.2rem
}
.text_blocks_with_title .small-title {
padding-bottom: .4rem;
color: #767676;
padding-left: 3.43rem
}
.text_blocks_with_title .text-block {
display: flex;
justify-content: space-between
}
.text_blocks_with_title .text-block:nth-child(2) {
padding-bottom: .6rem
}
.text_blocks_with_title .text-block:not(:nth-child(2)) {
padding-top: .6rem;
border-top: 1px solid #434343;
padding-bottom: .6rem;
border-bottom: 1px solid #434343
}
.text_blocks_with_title .text-block:last-child {
border-bottom: 0;
padding-bottom: 0
}
.text_blocks_with_title .text-block .text-block-title {
width: 2.28rem
}
.text_blocks_with_title .text-block .text-block-content {
width: 9.97rem
}
.text_blocks_with_title .text-block .text-block-content p {
font-size: .4rem;
line-height: .392rem;
letter-spacing: -0.004rem;
font-weight: 600;
font-family: "neue-haas-grotesk-display",sans-serif
}
.text_blocks_with_title .text-block .text-block-content p+p {
margin-top: .6rem
}
@media screen and (max-width: 768px) {
.text_blocks_with_title .text-block .text-block-content p {
font-size:.32rem;
line-height: .304rem;
letter-spacing: -0.0032rem
}
}
@media screen and (max-width: 768px) {
.text_blocks_with_title {
padding-top:1rem;
padding-bottom: 1.2rem
}
.text_blocks_with_title .small-title {
padding-bottom: .3rem;
padding-left: 0rem
}
.text_blocks_with_title .text-block {
justify-content: space-between;
flex-direction: column
}
.text_blocks_with_title .text-block:nth-child(2) {
padding-bottom: .4rem
}
.text_blocks_with_title .text-block:not(:nth-child(2)) {
padding-top: .4rem;
padding-bottom: .4rem
}
.text_blocks_with_title .text-block:last-child {
border-bottom: 0;
padding-bottom: 0
}
.text_blocks_with_title .text-block .text-block-title {
width: 100%;
padding-bottom: .2rem
}
.text_blocks_with_title .text-block p {
font-family: "neue-haas-grotesk-display",sans-serif
}
.text_blocks_with_title .text-block .text-block-content {
width: 100%
}
.text_blocks_with_title .text-block .text-block-content p+p {
margin-top: .3rem
}
}
.masonry_module {
padding-bottom: 2.2rem
}
.masonry_module .grid .grid-item {
width: calc(33.3% - .3rem);
margin: .15rem
}
@media screen and (max-width: 768px) {
.masonry_module .grid .grid-item {
width:calc(50% - .15rem);
margin: .075rem
}
}
.masonry_module .grid .grid-item .copy-button {
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: .3s ease-in-out;
position: absolute;
bottom: .1rem;
right: .1rem;
width: .35rem;
height: .35rem;
background: #f5f5f5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 9;
cursor: pointer
}
@media screen and (max-width: 768px) {
.masonry_module .grid .grid-item .copy-button {
display:none
}
}
.masonry_module .grid .grid-item .copy-button svg {
width: .12rem;
height: .14rem
}
.masonry_module .grid .grid-item .copied-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: .3rem;
padding: .15rem;
background: #f5f5f5;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: .3s ease-in-out;
color: #000
}
.masonry_module .grid .grid-item .copied-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: all
}
.masonry_module .grid .grid-item:hover .copy-button {
opacity: 1;
visibility: visible;
pointer-events: all
}
.masonry_module .grid .grid-item img,.masonry_module .grid .grid-item video {
display: block;
width: 100%;
height: auto;
border-radius: .05rem
}
@media screen and (max-width: 768px) {
.masonry_module {
padding-bottom:1.2rem
}
}
@media screen and (min-width: 2000px) {
.masonry_module .grid .grid-item {
width:calc(25% - .3rem)
}
}
.rotating_slider {
padding-bottom: 2.2rem
}
.rotating_slider .wrapper {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: .57rem
}
.rotating_slider .wrapper.reverse {
flex-direction: row-reverse
}
@media screen and (max-width: 768px) {
.rotating_slider .wrapper.reverse {
flex-direction:column
}
}
.rotating_slider .wrapper .column {
width: 4.1rem;
margin-left: 2.18rem
}
.rotating_slider .wrapper .column.video {
width: 6.55rem;
margin-left: unset
}
.rotating_slider .wrapper .column.video video {
width: 100%;
height: auto;
display: block
}
.rotating_slider .wrapper .button {
display: flex;
align-items: center;
margin-top: .4rem;
font-family: "neue-haas-grotesk-text",sans-serif
}
.rotating_slider .wrapper .button .circle {
width: .5rem;
height: .5rem;
border-radius: 50%;
background: #1d1d1d;
display: flex;
align-items: center;
justify-content: center;
margin-left: .3rem;
position: relative;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform-origin: center
}
@media screen and (max-width: 768px) {
.rotating_slider .wrapper .button .circle {
width:.4rem;
height: .4rem
}
}
.rotating_slider .wrapper .button .circle .arrows {
width: .14rem;
height: .14rem;
height: auto;
overflow: hidden;
display: flex;
position: relative;
z-index: 2
}
.rotating_slider .wrapper .button .circle .arrows svg {
width: 100%;
height: 100%;
flex-shrink: 0
}
.rotating_slider .wrapper .button .circle .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
transform: scale(0);
background: #434343;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.rotating_slider .wrapper .button:hover .circle {
transform: scale(1.08)
}
.rotating_slider .wrapper .button:hover .circle .circle-overlay {
transform: scale(1)
}
@media screen and (max-width: 768px) {
.rotating_slider {
padding-bottom:1.2rem
}
.rotating_slider .wrapper {
gap: .4rem;
margin-left: 0;
flex-direction: column
}
.rotating_slider .wrapper .column {
width: 100%
}
.rotating_slider .wrapper .column.video {
width: 100%
}
.rotating_slider .wrapper .column .description {
max-width: 2.9rem
}
.rotating_slider .wrapper .button {
margin-top: .2rem
}
}
.full-width-image-block {
padding-bottom: .3rem
}
.full-width-image-block img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: .05rem
}
@media screen and (max-width: 768px) {
.full-width-image-block {
padding-bottom:.2rem
}
}
.full-width-inline-video-block {
padding-bottom: .3rem
}
.full-width-inline-video-block video {
border-radius: .05rem;
width: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media screen and (max-width: 768px) {
.full-width-inline-video-block {
padding-bottom:.2rem
}
}
.intro-block {
padding-bottom: 1rem
}
.intro-block .columns {
display: flex;
justify-content: space-between
}
.intro-block .columns .column.one {
max-width: 6rem
}
.intro-block .columns .column.two {
max-width: 6.55rem
}
.intro-block .columns .column .small {
color: #767676;
margin-bottom: .05rem
}
.intro-block .columns .column .client-wrap {
padding-bottom: .3rem
}
@media screen and (max-width: 768px) {
.intro-block {
padding-bottom:.9rem
}
.intro-block .columns .column.one {
display: none
}
}
.video-text-block,.image-text-block {
padding-bottom: 1rem
}
.video-text-block .wrapper,.image-text-block .wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end
}
.video-text-block .wrapper.left,.image-text-block .wrapper.left {
flex-direction: row-reverse
}
.video-text-block .wrapper img,.video-text-block .wrapper video,.image-text-block .wrapper img,.image-text-block .wrapper video {
width: 6.55rem;
display: block;
border-radius: .05rem
}
.video-text-block .wrapper .text,.image-text-block .wrapper .text {
width: 5.41rem
}
@media screen and (max-width: 768px) {
.video-text-block,.image-text-block {
padding-bottom:.9rem
}
.video-text-block .wrapper,.image-text-block .wrapper {
flex-wrap: wrap
}
.video-text-block .wrapper video,.image-text-block .wrapper video {
width: 100%
}
.video-text-block .wrapper .text,.image-text-block .wrapper .text {
width: 100%;
padding-top: .4rem
}
}
.two-images-block,.video-video-block,.image-video-block {
padding-bottom: .3rem
}
.two-images-block .wrapper,.video-video-block .wrapper,.image-video-block .wrapper {
display: flex;
gap: .3rem
}
.two-images-block .wrapper.left,.video-video-block .wrapper.left,.image-video-block .wrapper.left {
flex-direction: row-reverse
}
.two-images-block .wrapper img,.video-video-block .wrapper img,.image-video-block .wrapper img {
width: 6.55rem;
height: auto;
-o-object-fit: cover;
object-fit: cover;
border-radius: .05rem
}
.two-images-block .wrapper video,.video-video-block .wrapper video,.image-video-block .wrapper video {
width: 6.55rem;
height: auto;
-o-object-fit: cover;
object-fit: cover;
border-radius: .05rem
}
@media screen and (max-width: 768px) {
.two-images-block,.video-video-block,.image-video-block {
padding-bottom:.2rem
}
.two-images-block .wrapper,.video-video-block .wrapper,.image-video-block .wrapper {
display: block
}
.two-images-block .wrapper img,.video-video-block .wrapper img,.image-video-block .wrapper img {
display: block;
width: 100%
}
.two-images-block .wrapper img:not(:last-child),.video-video-block .wrapper img:not(:last-child),.image-video-block .wrapper img:not(:last-child) {
margin-bottom: .2rem
}
.two-images-block .wrapper video,.video-video-block .wrapper video,.image-video-block .wrapper video {
display: block;
width: 100%
}
.two-images-block .wrapper video:not(:last-child),.video-video-block .wrapper video:not(:last-child),.image-video-block .wrapper video:not(:last-child) {
margin-bottom: .2rem
}
}
.simple-text-block-label {
padding-bottom: 1rem;
padding-top: 1rem
}
.simple-text-block-label .wrapper {
display: flex;
justify-content: space-between
}
.simple-text-block-label .wrapper .text {
max-width: 8.83rem
}
@media screen and (max-width: 768px) {
.simple-text-block-label {
padding-bottom:.9rem
}
.simple-text-block-label .wrapper {
flex-direction: column
}
.simple-text-block-label .wrapper .label {
padding-bottom: .2rem
}
}
.two-column-content {
padding-bottom: 1rem
}
.two-column-content.small {
padding-bottom: .3rem
}
.two-column-content.has-text .wrapper {
align-items: flex-end
}
.two-column-content .wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start
}
.two-column-content .wrapper.end {
align-items: flex-end
}
.two-column-content .wrapper.top {
align-items: flex-start
}
.two-column-content .wrapper.center {
align-items: center
}
.two-column-content .wrapper .column {
width: 6.55rem
}
.two-column-content .wrapper .column.no-margin-left .text-wrap {
margin-left: 0
}
.two-column-content .wrapper .column img,.two-column-content .wrapper .column video {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: .05rem;
height: auto
}
.two-column-content .wrapper .column .text-wrap {
max-width: 5.41rem;
margin-left: auto
}
.two-column-content .wrapper .column .text-wrap p {
max-width: 4.26rem;
padding-top: .6rem
}
.two-column-content .wrapper .column .text-wrap p:only-child {
padding-top: 0
}
@media screen and (max-width: 768px) {
.two-column-content {
padding-bottom:.9rem
}
.two-column-content.small {
padding-bottom: .3rem
}
.two-column-content .wrapper {
flex-direction: column
}
.two-column-content .wrapper .column {
width: 100%
}
.two-column-content .wrapper .column .text-wrap {
margin-left: "auto"
}
.two-column-content .wrapper .column .text-wrap p {
padding-top: .4rem
}
.two-column-content .wrapper .column.first {
padding-bottom: .9rem
}
.two-column-content.fifty-fifty .wrapper {
display: block
}
.two-column-content.fifty-fifty .wrapper .column {
width: 100%
}
.two-column-content.fifty-fifty .wrapper .column.first {
padding-bottom: 0
}
.two-column-content.fifty-fifty .wrapper .column:not(:last-child) {
margin-bottom: .2rem
}
.two-column-content.fifty-fifty .wrapper video,.two-column-content.fifty-fifty .wrapper img {
display: block
}
}
.big-text {
padding: 1rem 0;
max-width: 11.12rem;
margin-left: .5rem
}
@media screen and (max-width: 768px) {
.big-text {
margin-left:0;
padding-left: .15rem;
padding-right: .15rem;
padding: .9rem .15rem .9rem .15rem
}
}
.image-automatic-sliders {
margin-top: .3rem;
margin-bottom: .3rem
}
.image-automatic-sliders .track {
display: flex;
white-space: nowrap;
align-items: center
}
.image-automatic-sliders .track .track-wrap {
display: flex;
width: -moz-max-content;
width: max-content
}
.image-automatic-sliders .track .track-wrap .track-inner {
display: flex;
white-space: nowrap;
gap: .3rem;
width: -moz-max-content;
width: max-content;
margin-left: .3rem
}
.image-automatic-sliders .track .track-wrap .track-inner .track-piece {
position: relative;
display: flex;
align-items: center;
gap: .3rem
}
.image-automatic-sliders .track .track-wrap .track-inner .track-piece .looped-img {
height: 6.55rem;
border-radius: .05rem;
width: auto
}
@media screen and (max-width: 768px) {
.image-automatic-sliders {
margin-top:.2rem;
margin-bottom: .2rem
}
.image-automatic-sliders .track .track-wrap .track-inner {
gap: .15rem;
margin-left: .15rem
}
.image-automatic-sliders .track .track-wrap .track-inner .track-piece {
gap: .15rem
}
.image-automatic-sliders .track .track-wrap .track-inner .track-piece .looped-img {
height: 3.6rem;
width: auto
}
}
section.full_width_media_modul {
margin-bottom: .3rem
}
section.full_width_media_modul .columns {
display: flex;
gap: .3rem
}
@media screen and (max-width: 768px) {
section.full_width_media_modul .columns {
flex-wrap:wrap;
gap: .12rem
}
}
section.full_width_media_modul .columns.bottom .media-card {
align-items: flex-end
}
section.full_width_media_modul .columns.middle .media-card {
align-items: center
}
section.full_width_media_modul .columns.top .media-card {
align-items: flex-start
}
section.full_width_media_modul .columns .media-card {
width: calc(33.33333% - .15rem);
height: auto;
display: flex;
align-items: flex-end
}
@media screen and (max-width: 768px) {
section.full_width_media_modul .columns .media-card {
width:100%
}
section.full_width_media_modul .columns .media-card.text-card {
aspect-ratio: unset
}
}
section.full_width_media_modul .columns .media-card video,section.full_width_media_modul .columns .media-card img {
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
display: block;
border-radius: .05rem
}
.scroll-down header {
transform: translateY(-100%)
}
.sticky-active header {
transform: translateY(-100%)
}
.scroll-past-top header {
background: rgba(0,0,0,.8784313725);
padding-top: .2rem;
padding-bottom: .2rem
}
body:not(.scroll-past-top) header {
transform: translateY(0)
}
.categories.expanded {
transition: .3s ease-in-out
}
.categories.expanded.scroll-up {
top: 1rem
}
header {
padding-top: .21rem;
padding-bottom: .34rem;
background: #000;
position: fixed;
width: 100%;
z-index: 999;
transition: .3s ease-in-out
}
header.hide-header {
z-index: 0
}
header .container {
display: flex;
justify-content: space-between;
align-items: center
}
header .container .nav-logo {
width: 1.14rem;
height: auto
}
header .container .nav-logo img {
width: 100%;
opacity: 1;
height: auto
}
header .container .hamburger {
display: none
}
header .container .main-nav ul {
display: flex;
gap: .2rem;
align-items: center
}
header .container .main-nav ul .btn {
padding: .1rem .2rem
}
header .container .main-nav ul .single-item .single-item-link {
position: relative
}
header .container .main-nav ul .single-item .single-item-link svg {
margin-left: .05rem;
width: .08rem
}
header .container .main-nav ul .single-item .single-item-link span {
font-weight: 500
}
header .container .main-nav ul .single-item .single-item-link.active .hover-line {
transition: transform 300ms ease;
transform: scaleX(1) !important;
background-color: #fff
}
header .container .main-nav ul .single-item .hover-line {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transform: scaleX(0);
transform-origin: left
}
@media screen and (max-width: 768px) {
header {
padding-top:.2rem;
padding-bottom: .2rem
}
header .container {
align-items: center
}
header .container .nav-logo {
width: 1.09rem
}
header .container .hamburger {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
display: block;
position: relative;
top: -0.02rem;
cursor: pointer;
padding: .12rem;
margin: -0.12rem 0;
margin-right: -0.12rem
}
header .container .hamburger .hamburger-wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
width: .25rem;
height: .09rem;
margin: auto 0
}
header .container .hamburger span {
display: block;
height: .02rem;
width: 100%;
background-color: #fff;
transition: .2s ease-out transform
}
header .container .hamburger.close span:first-child {
transform: rotateZ(45deg) translate(0.02rem, 0.03rem)
}
header .container .hamburger.close span:last-child {
transform: rotateZ(-45deg) translate(0.02rem, -0.03rem)
}
header .container .main-nav {
display: none
}
}
.dropdown-menu {
display: none;
opacity: 0;
width: 100%;
height: 100%;
background: #000;
position: fixed;
inset: 0;
z-index: 998
}
@media screen and (max-width: 768px) {
.dropdown-menu .container {
height:100%;
justify-content: space-between;
display: flex;
flex-direction: column
}
.dropdown-menu .main-nav {
padding-top: .97rem
}
.dropdown-menu .main-nav .single-item .single-item-link span {
font-size: .64rem;
line-height: .608rem;
letter-spacing: -0.0057rem;
font-family: "neue-haas-grotesk-display",sans-serif;
font-weight: 600
}
.dropdown-menu .main-nav .single-item .single-item-link svg {
width: .3rem;
height: auto;
margin-left: .1rem
}
.dropdown-menu .social-networks ul {
display: flex;
gap: .06rem .15rem;
flex-flow: column wrap;
height: 1rem
}
}
footer {
padding-top: .6rem;
padding-bottom: .1rem
}
footer .social-networks ul {
display: flex;
justify-content: space-between;
border-top: 1px solid #434343
}
footer .social-networks ul .social-network a {
display: block;
padding: 0 .3rem;
position: relative;
transition: .3s ease-in-out color;
padding-top: .2rem;
font-weight: 500
}
footer .social-networks ul .social-network a .hover-item {
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
width: 3.1rem;
max-width: unset;
display: block;
aspect-ratio: 16/9;
border-radius: .05rem;
height: auto;
top: 0;
left: 50%;
transform: translate(-50%, 0.5rem);
-o-object-fit: cover;
object-fit: cover;
transition: opacity .3s ease-in-out;
will-change: transform
}
footer .social-networks ul .social-network:first-child a {
padding-left: 0
}
footer .social-networks ul .social-network:first-child a img,footer .social-networks ul .social-network:first-child a video {
left: 0;
transform: translate(0%, 0.5rem)
}
footer .social-networks ul .social-network:last-child a {
padding-right: 0
}
footer .social-networks ul .social-network:last-child a img,footer .social-networks ul .social-network:last-child a video {
left: unset;
right: 0;
transform: translate(0%, 0.5rem)
}
footer .upper-wrapper {
display: flex;
justify-content: space-between;
padding-top: .12rem
}
footer .upper-wrapper .info-text {
max-width: 3rem
}
footer .upper-wrapper .info-text p {
color: #767676;
font-size: .14rem;
line-height: .1568rem;
letter-spacing: -0.01em
}
footer .upper-wrapper .gdpr-menu ul {
display: flex;
gap: .2rem
}
footer .upper-wrapper .gdpr-menu ul .single-item {
display: block;
margin-top: -0.05rem
}
footer .upper-wrapper .gdpr-menu ul .single-item .single-item-link {
display: block
}
footer .upper-wrapper .gdpr-menu ul .single-item .single-item-link:hover span {
color: #fff
}
footer .upper-wrapper .gdpr-menu ul .single-item span {
color: #767676;
transition: color .3s ease-in-out
}
footer .lower-wrapper {
width: 100%;
padding-top: 2.2rem
}
footer .lower-wrapper img {
width: 100%
}
@media screen and (hover: hover) {
footer .social-networks ul:hover .social-network a {
color:#434343
}
}
@media screen and (hover: hover)and (min-width: 768px) {
footer .social-networks ul .social-network a:hover {
color:#fff
}
footer .social-networks ul .social-network a:hover .hover-item {
opacity: 1;
visibility: visible;
pointer-events: all
}
}
@media screen and (max-width: 768px) {
footer {
padding-top:.2rem;
padding-bottom: .15rem
}
footer .social-networks ul {
display: block;
padding-bottom: 0;
border: none
}
footer .social-networks ul .social-network:not(:last-child) {
padding-bottom: .04rem
}
footer .social-networks ul .social-network:first-child a .hover-item,footer .social-networks ul .social-network:last-child a .hover-item {
transform: translate(0, -50%);
left: auto;
right: 0
}
footer .social-networks ul .social-network.active a {
opacity: 1
}
footer .social-networks ul .social-network.active a .hover-item {
opacity: 1;
visibility: visible
}
footer .social-networks ul .social-network a {
padding: 0;
font-size: .2rem;
line-height: .19rem;
letter-spacing: -0.01em;
font-weight: 500;
color: #fff;
opacity: .2
}
footer .social-networks ul .social-network a .hover-item {
transform: translate(0, -50%);
left: auto;
right: 0;
width: 2.35rem;
height: 1.32rem
}
footer .social-networks ul .social-network a:hover img {
opacity: 0;
visibility: hidden;
pointer-events: none
}
footer .upper-wrapper {
padding-bottom: 0rem;
padding-top: .1rem;
flex-wrap: wrap
}
footer .upper-wrapper .info-text {
max-width: 3rem;
padding-bottom: .2rem
}
footer .upper-wrapper .info-text p {
font-size: .13rem;
line-height: .16rem;
letter-spacing: 0
}
footer .upper-wrapper .gdpr-menu {
width: 100%
}
footer .upper-wrapper .gdpr-menu ul {
display: flex;
gap: 0;
justify-content: space-between
}
footer .upper-wrapper .gdpr-menu ul .single-item {
flex-shrink: 0
}
footer .upper-wrapper .gdpr-menu ul .single-item span {
font-size: .13rem
}
footer .lower-wrapper {
padding-bottom: .2rem;
border-bottom: 1px solid #434343;
padding-top: 0
}
footer .mobile_layout_shifter {
display: flex;
flex-direction: column;
padding-top: 1.2rem
}
}
.mouse-frame {
pointer-events: none;
display: block;
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 9999
}
@media screen and (max-width: 768px) {
.mouse-frame {
display:none
}
}
.mouse-frame .mouse-follower {
position: absolute;
transform: translate(-1rem, -1rem);
top: 0;
left: 0
}
.mouse-frame .mouse-follower .mouse {
position: relative
}
.mouse-frame .mouse-follower .mouse-video {
width: 1.6rem;
height: 1.6rem;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
background: #fff;
opacity: 0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #000;
font-weight: 600
}
.mouse-frame .mouse-follower .copy-pill,.mouse-frame .mouse-follower .copy-overlay {
padding: .11rem .2rem;
background: #fff;
width: -moz-max-content;
width: max-content;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: .6rem;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease-in-out;
z-index: 99
}
.mouse-frame .mouse-follower .copy-pill span,.mouse-frame .mouse-follower .copy-overlay span {
color: #000
}
.mouse-frame .mouse-follower .mouse-slider {
padding: .11rem .2rem;
background: #fff;
width: -moz-max-content;
width: max-content;
position: absolute;
transform: translate(0.2rem, -0.4rem);
border-radius: .6rem;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease-in-out;
z-index: 99
}
.mouse-frame .mouse-follower .mouse-slider span {
color: #000
}
.mouse-frame .mouse-follower .mouse-cta {
padding: .07rem .15rem;
background: #fff;
width: -moz-max-content;
width: max-content;
position: absolute;
transform: translate(0.1rem, 0.3rem);
border-radius: .6rem;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease-in-out;
z-index: 99;
line-height: 1;
background-color: rgba(0,0,0,.1)
}
.mouse-frame .mouse-follower .mouse-cta span {
color: #000
}
.mouse-frame.active .mouse-video {
opacity: .9;
transform: translate(-50%, -50%) scale(1)
}
.mouse-frame.active-cta .mouse-cta {
opacity: 1;
visibility: visible
}
.mouse-frame.active-slider .mouse-slider {
opacity: 1;
visibility: visible;
font-weight: 500
}
.mouse-frame.active-copy .copy-pill {
opacity: 1;
visibility: visible
}
body.single-work .video_module {
padding-bottom: 1rem
}
body.single-work .video_module .video-preview {
border-radius: .05rem
}
body.single-work .featured_work_slider {
padding-top: 2rem
}
@media screen and (max-width: 768px) {
body.single-work .video_module {
padding-bottom:.4rem
}
body.single-work .featured_work_slider {
padding-top: 1rem
}
body.single-work .hero_title {
padding-bottom: .4rem
}
body.single-work .hero_title .columns {
display: flex;
padding-top: .4rem
}
body.single-work .hero_title .columns .column {
width: 50%
}
body.single-work .hero_title .columns .column .small {
color: #767676
}
}
.hero_title .columns {
display: none
}
.page-template-tpl-impressum .text_blocks_with_title .split-wrapper {
display: flex;
justify-content: space-between;
margin-top: .6rem;
margin-bottom: .6rem
}
.page-template-tpl-impressum .text_blocks_with_title .split-wrapper.mobile {
display: none
}
.page-template-tpl-impressum .text_blocks_with_title p+p {
margin-top: 0 !important
}
.page-template-tpl-impressum .text_blocks_with_title .board-members {
padding-top: .6rem
}
@media screen and (max-width: 768px) {
.page-template-tpl-impressum .text_blocks_with_title .split-wrapper {
margin-top:.3rem;
margin-bottom: .3rem
}
.page-template-tpl-impressum .text_blocks_with_title .split-wrapper.desktop {
display: none
}
.page-template-tpl-impressum .text_blocks_with_title .split-wrapper.mobile {
display: block
}
.page-template-tpl-impressum .text_blocks_with_title .split-wrapper.mobile .single-item {
margin-bottom: .1rem
}
.page-template-tpl-impressum .text_blocks_with_title .split-wrapper.mobile p {
font-size: .29rem
}
.page-template-tpl-impressum .text_blocks_with_title .board-members {
padding-top: .3rem
}
}
.error404 .hero_title .title .copyright::after {
display: none
}
body {
font-size: .2rem;
line-height: .24rem;
font-weight: 400;
overflow-x: hidden;
position: relative;
display: block;
color: #fff;
background: #000;
font-family: "neue-haas-grotesk-display",sans-serif;
-webkit-font-smoothing: antialiased
}
html {
font-size: 6.944vw
}
@media screen and (max-width: 768px) {
html {
font-size:25.641vw;
overflow-x: hidden
}
}
html.overflow-hidden {
overflow: hidden
}
.scrollbar {
position: fixed;
top: 0;
right: 0;
z-index: 9999;
height: 100%;
background: #f0f0f0
}
.container {
width: 100%;
max-width: 13.4rem;
margin: auto
}
@media screen and (max-width: 768px) {
.container {
padding-left:.1489rem;
padding-right: .1489rem
}
}
[data-fade-reveal],[data-portfolio-fade-reveal] {
will-change: transform
}
.pages {
position: relative;
display: grid;
width: 100%;
min-height: 100vh
}
.page {
min-width: 0;
position: relative;
grid-row: 1;
grid-column: 1;
background: #000;
z-index: 2
}
.page+.page {
z-index: 1
}
html.is-changing .transition-slide {
transition: transform 1s cubic-bezier(0.44, 0, 0.28, 0.99)
}
.transition-slide.is-next-container {
transform: translate3d(0, 100vh, 0)
}
.preloader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1099
}
.preloader .bg {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: #fff;
backface-visibility: hidden;
will-change: transform
}
.preloader .logo-outer {
padding-top: .31rem;
padding-bottom: .34rem
}
@media screen and (max-width: 768px) {
.preloader .logo-outer {
padding-top:.2rem
}
}
.preloader .logo-preload {
width: 1.14rem;
height: auto;
position: relative;
transform: translate3d(0px, calc(50vh - 50%), 0px);
overflow: hidden
}
@media screen and (max-width: 768px) {
.preloader .logo-preload {
transform:translate3d(0px, calc(50dvh - 0.24rem), 0px)
}
}
.preloader .logo-preload path {
fill: #000
}
.preloader .logo-preload .letter {
transform: translateY(150%)
}
.preloader .logo-preload .copy {
opacity: 0
}
.btn {
color: #fff;
padding: .17rem .26rem;
border: 2px solid #1d1d1d;
border-radius: .7rem;
transition: 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
font-weight: 500;
position: relative
}
.btn .fill-overlay {
transform-origin: center;
transform: scale(0);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
background: #1d1d1d;
border-radius: .7rem;
z-index: 1
}
.btn span {
z-index: 2;
position: relative
}
.btn:hover .fill-overlay {
transform: scale(1)
}
[data-portfolio-fade-reveal] {
opacity: 0
}
html.lenis {
height: auto
}
.lenis.lenis-smooth {
scroll-behavior: auto
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain
}
.lenis.lenis-scrolling iframe {
pointer-events: none
}
.split-lines {
overflow: hidden;
padding-bottom: .15em;
margin-bottom: -0.15em
}
[data-scrub-title-reveal] .split-lines div {
transform: translateY(100%)
}
.fw-100 {
font-weight: 100
}
.fw-200 {
font-weight: 200
}
.fw-300 {
font-weight: 300
}
.fw-400 {
font-weight: 400
}
.fw-500 {
font-weight: 500
}
.fw-600 {
font-weight: 600
}
.fw-700 {
font-weight: 700
}
.fw-800 {
font-weight: 800
}
.fw-900 {
font-weight: 900
}
.relative {
position: relative
}
.display-hidden {
display: none
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.overflow-hidden {
overflow: hidden
}
.pointer-events-none {
pointer-events: none
}
.pointer-events-none * {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.transform-style {
transform-style: preserve-3d
}
.text-uppercase {
text-transform: uppercase
}
.text-capitalize {
text-transform: capitalize
}
.w-full {
width: 100%
}
.size-slider-arrows {
display: flex;
gap: .05rem
}
@media screen and (max-width: 768px) {
.size-slider-arrows {
display:none
}
}
.size-slider-arrows .arrow {
padding: 0;
flex-shrink: 0;
background: rgba(0,0,0,0);
border: none;
height: -moz-fit-content;
height: fit-content
}
.size-slider-arrows .arrow .circle {
width: .5rem;
height: .5rem;
background: #1d1d1d;
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
transform-origin: center
}
.size-slider-arrows .arrow .circle .arrows {
width: .16rem;
height: .16rem;
overflow: hidden;
display: flex;
position: relative;
z-index: 2;
transition: 300ms cubic-bezier(0.51, 0.01, 0.2, 1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.size-slider-arrows .arrow .circle .arrows svg {
width: 100%;
height: 100%;
flex-shrink: 0;
transform: none
}
.size-slider-arrows .arrow .circle .circle-overlay {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform-origin: center;
transform: scale(0);
background: #434343;
transition: transform 300ms cubic-bezier(0.51, 0.01, 0.2, 1)
}
.size-slider-arrows .arrow:hover .circle {
transform: scale(1.08)
}
.size-slider-arrows .arrow:hover .circle-overlay {
transform: scale(1)
}
[data-line-reveal-flip],[data-portfolio-fade-reveal],[video-reveal-anim],[data-fade-reveal] {
opacity: 0
}
[data-line-reveal-flip].inited,[data-portfolio-fade-reveal].inited,[video-reveal-anim].inited,[data-fade-reveal].inited {
opacity: 1
}
.splide__container {
box-sizing: border-box;
position: relative
}
.splide__list {
backface-visibility: hidden;
display: -ms-flexbox;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block
}
.splide__pagination {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
pointer-events: none
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto
}
.splide:not(.is-overflow) .splide__pagination {
display: none
}
.splide__progress__bar {
width: 0
}
.splide {
position: relative;
visibility: hidden
}
.splide.is-initialized,.splide.is-rendered {
visibility: visible
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative
}
.splide__slide img {
vertical-align: bottom
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid #999;
border-left-color: rgba(0,0,0,0);
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px
}
.splide__sr {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause {
display: none
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0
}
@keyframes splide-loading {
0% {
transform: rotate(0)
}
to {
transform: rotate(1turn)
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none
}
.splide__track--fade>.splide__list>.splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0
}
.splide__track--fade>.splide__list>.splide__slide.is-active {
opacity: 1;
z-index: 1
}
.splide--rtl {
direction: rtl
}
.splide__track--ttb>.splide__list {
display: block
}
.splide__arrow {
-ms-flex-align: center;
align-items: center;
background: #ccc;
border: 0;
border-radius: 50%;
cursor: pointer;
display: -ms-flexbox;
display: flex;
height: 2em;
-ms-flex-pack: center;
justify-content: center;
opacity: .7;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2em;
z-index: 1
}
.splide__arrow svg {
fill: #000;
height: 1.2em;
width: 1.2em
}
.splide__arrow:hover:not(:disabled) {
opacity: .9
}
.splide__arrow:disabled {
opacity: .3
}
.splide__arrow:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide__arrow--prev {
left: 1em
}
.splide__arrow--prev svg {
transform: scaleX(-1)
}
.splide__arrow--next {
right: 1em
}
.splide.is-focus-in .splide__arrow:focus {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide__pagination {
bottom: .5em;
left: 0;
padding: 0 1em;
position: absolute;
right: 0;
z-index: 1
}
.splide__pagination__page {
background: #ccc;
border: 0;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 3px;
opacity: .7;
padding: 0;
position: relative;
transition: transform .2s linear;
width: 8px
}
.splide__pagination__page.is-active {
background: #fff;
transform: scale(1.4);
z-index: 1
}
.splide__pagination__page:hover {
cursor: pointer;
opacity: .9
}
.splide__pagination__page:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide.is-focus-in .splide__pagination__page:focus {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide__progress__bar {
background: #ccc;
height: 3px
}
.splide__slide {
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
.splide__slide:focus {
outline: 0
}
@supports(outline-offset: -3px) {
.splide__slide:focus-visible {
outline:3px solid #0bf;
outline-offset: -3px
}
}
@media screen and (-ms-high-contrast: none) {
.splide__slide:focus-visible {
border: 3px solid #0bf
}
}
@supports(outline-offset: -3px) {
.splide.is-focus-in .splide__slide:focus {
outline:3px solid #0bf;
outline-offset: -3px
}
}
@media screen and (-ms-high-contrast: none) {
.splide.is-focus-in .splide__slide:focus {
border: 3px solid #0bf
}
.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
border-color: #0bf
}
}
.splide__toggle {
cursor: pointer
}
.splide__toggle:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide.is-focus-in .splide__toggle:focus {
outline: 3px solid #0bf;
outline-offset: 3px
}
.splide__track--nav>.splide__list>.splide__slide {
border: 3px solid rgba(0,0,0,0);
cursor: pointer
}
.splide__track--nav>.splide__list>.splide__slide.is-active {
border: 3px solid #000
}
.splide__arrows--rtl .splide__arrow--prev {
left: auto;
right: 1em
}
.splide__arrows--rtl .splide__arrow--prev svg {
transform: scaleX(1)
}
.splide__arrows--rtl .splide__arrow--next {
left: 1em;
right: auto
}
.splide__arrows--rtl .splide__arrow--next svg {
transform: scaleX(-1)
}
.splide__arrows--ttb .splide__arrow {
left: 50%;
transform: translate(-50%)
}
.splide__arrows--ttb .splide__arrow--prev {
top: 1em
}
.splide__arrows--ttb .splide__arrow--prev svg {
transform: rotate(-90deg)
}
.splide__arrows--ttb .splide__arrow--next {
bottom: 1em;
top: auto
}
.splide__arrows--ttb .splide__arrow--next svg {
transform: rotate(90deg)
}
.splide__pagination--ttb {
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
left: auto;
padding: 1em 0;
right: .5em;
top: 0
}