:root {
    --easeOut: cubic-bezier(.77, 0, .175, 1);
    --easeOutBack: cubic-bezier(.175, 0, .77, 1);
    --easeOutQuint: cubic-bezier(.23, 1, .32, 1)
}

[data-delay=".1"] {
    transition-delay: .1s
}

[data-delay=".2"] {
    transition-delay: .2s
}

[data-delay=".3"] {
    transition-delay: .3s
}

[data-delay=".4"] {
    transition-delay: .4s
}

[data-delay=".5"] {
    transition-delay: .5s
}

[data-delay=".6"] {
    transition-delay: .6s
}

[data-delay=".8"] {
    transition-delay: .8s
}

[data-delay="1"] {
    transition-delay: 1s
}

[data-delay="1.2"] {
    transition-delay: 1.2s
}

[data-delay="1.4"] {
    transition-delay: 1.4s
}

[data-delay="1.6"] {
    transition-delay: 1.6s
}

[data-delay="1.8"] {
    transition-delay: 1.8s
}

[data-delay="2"] {
    transition-delay: 2s
}

html.lenis,
html.lenis body {
    height: auto
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain
}

.lenis.lenis-stopped {
    overflow: clip
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

:root {
    --easeOut: cubic-bezier(.77, 0, .175, 1);
    --easeOutBack: cubic-bezier(.175, 0, .77, 1);
    --easeOutQuint: cubic-bezier(.23, 1, .32, 1);
    --customEase: cubic-bezier(.19, 1, .22, 1);
    --panels-duration: .9s
}

.svg-logo path {
    mix-blend-mode: difference
}

[data-a=y] {
    --duration: .8s;
    --halfDuration: .55s;
    --ease: var(----customEase);
    transform: translate3d(0, 150%, 0);
    transition-property: transform;
    transition-duration: .2s;
    transition-timing-function: var(--ease)
}

.menu-w:has(input:checked) [data-a=y] {
    transform: translateZ(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

[data-menu=iconline] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

[data-menu=iconline]:nth-child(1) {
    transform: translate3d(0, -5px, 0);
    transition-delay: 0s
}

[data-menu=iconline]:nth-child(2) {
    transform: translateZ(0);
    transition-delay: .05s
}

[data-menu=iconline]:nth-child(3) {
    transform: translate3d(0, 5px, 0);
    transition-delay: 0s
}

.menu-w:has(#mainpanel:checked) [data-menu=iconline]:nth-child(1) {
    transform: translateZ(0) rotate(-45deg) scaleX(.8);
    transition-delay: .05s
}

.menu-w:has(#mainpanel:checked) [data-menu=iconline]:nth-child(2) {
    transform: translateZ(0) scaleX(0);
    transition-delay: 0s
}

.menu-w:has(#mainpanel:checked) [data-menu=iconline]:nth-child(3) {
    transform: translateZ(0) rotate(45deg) scaleX(.8);
    transition-delay: .05s
}

[data-a=arrow] {
    transition: transform .8s var(--customEase), opacity .8s var(--customEase);
    transform: rotate(0)
}

.menu-w:has(#mainpanel:checked) [data-a=arrow] {
    opacity: 0
}

.menu-w:has(input:checked) [data-a=arrow] {
    transform: rotate(180deg)
}

.menu-w:has(.open) [data-a=arrow] {
    transform: rotate(180deg)
}

.open [data-a=y] {
    transform: translateZ(0)
}

.open [data-menu=line] {
    transform: scaleX(1) !important
}

.open [data-menu=x] {
    transform: scaleX(1) translate(0) !important
}

.open [data-menu=x] {
    transform: scaleX(1)
}

.menu-w:has(#mainpanel:not(:checked)) [data-menu=mainpanel] * {
    transition-delay: 0s !important
}

.menu-w:has(#smallpanel:not(:checked)) [data-menu=smallpanel] * {
    transition-delay: 0s !important
}

[data-hover=bggrow] {
    --duration: 1.1s;
    --halfDuration: .55s;
    --ease: var(--easeOutQuint)
}

[data-hover=bggrow]:before {
    content: " ";
    background-color: #d6d3cc;
    position: absolute;
    inset: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition-property: all;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

@media only screen and (min-width: 767px) {
    [data-hover=bggrow]:hover:before {
        transform: scaleY(1)
    }
}

.menu-film:last-of-type {
    clip-path: url(#smallPanelClip)
}

.menu-film:first-of-type {
    clip-path: url(#smallPanelClipTop)
}

.menu-w:has(#mainpanel:checked) [data-hover=bggrow]:before {
    opacity: 0
}

.menu-w {
    counter-reset: menulinks
}

[data-counter=menuLinkText]:before {
    counter-increment: menulinks;
    content: "0" counter(menulinks);
    font-size: .8rem;
    padding-right: .6rem;
    opacity: 50%
}

.nav-w.on-dark .logo {
    color: #000;

    svg.svg-logo {
        color: #000
    }
}

.about-menu-w,
.contact-menu-w {
    display: none
}

[data-page=about] {
    .menu-row-film-w {
        display: none
    }

    .about-menu-w {
        display: flex
    }

    .small-panel,
    .footage-panel {
        display: none
    }

    .checkbox-w {
        pointer-events: none
    }
}

[data-page=contact] {
    .menu-row-film-w {
        display: none
    }

    .contact-menu-w {
        display: flex
    }

    .nav-shadow,
    .small-panel,
    .footage-panel {
        display: none
    }

    .checkbox-w {
        pointer-events: none
    }
}

[data-page=policy] {
    .menu-row-film-w {
        display: none
    }

    .mmenu-col>.abs {
        pointer-events: none
    }

    #smallpanel {
        display: none
    }
}

.menu-close-trig {
    display: none
}

.nav-w:has(input:checked) .menu-close-trig {
    display: block
}

.menu-mobile-bg {
    transition: visibility 0s, opacity .3s ease-in-out;
    opacity: 0
}

.nav-w:has(#mainpanel:checked) .menu-mobile-bg {
    transition: visibility 0s, opacity .3s ease-in-out;
    opacity: .8
}

[data-menu=mainpanel] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--panels-duration) var(--customEase)
}

[data-menu=mainpanel]>* {
    overflow: hidden
}

.menu-w:has(#mainpanel:checked) [data-menu=mainpanel] {
    grid-template-rows: 1fr
}

[data-menu=mainpanel] [data-menu=line] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform-origin: left;
    transform: scaleX(0)
}

.menu-w:has(input:checked) [data-menu=mainpanel] [data-menu=line] {
    transform: scaleX(1);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--customEase)
}

[data-menu=mainline] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform-origin: left;
    transform: scaleX(1);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

.menu-w:has(#mainpanel:checked) [data-menu=mainline] {
    transform: scaleX(0)
}

[data-menu=mainy] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform: translateY(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

.menu-w:has(#mainpanel:checked) [data-menu=mainy] {
    transform: translateY(120%)
}

@media only screen and (max-width: 767px) {
    .menu-w:has(#mainpanel:checked) [data-menu=mainy] {
        transform: translateY(0)
    }
}

[data-menu=mainyr] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform: translateY(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

.menu-w:has(#mainpanel:checked) [data-menu=mainyr] {
    transform: translateY(-120%)
}

@media only screen and (max-width: 767px) {
    [data-menu=mainyr] {
        transition-property: opacity
    }

    .menu-w:has(#mainpanel:checked) [data-menu=mainyr] {
        transform: translateY(0);
        opacity: 0
    }
}

[data-menu=mainx] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--customEase);
    transform: translate(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease)
}

.menu-w:has(#mainpanel:checked) [data-menu=mainx] {
    transform: translate(-200%)
}

.moving {
    --duration: .2s
}

.main-panel {
    [data-hover=mainlinkgroup] {
        [data-hover=mainlink] {
            transition: opacity .2s
        }
    }

    [data-hover=mainlinkgroup]:has([data-hover=mainlink]:hover) {
        [data-hover=mainlink] {
            opacity: 70%;
            transition: opacity .2s
        }

        [data-hover=mainlink]:hover {
            opacity: 100%;
            transition: opacity .2s
        }
    }
}

[data-menu=smallpanel] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--panels-duration) var(--customEase)
}

[data-menu=smallpanel]>* {
    overflow: hidden
}

.menu-w:has(#smallpanel:checked) [data-menu=smallpanel] {
    grid-template-rows: 1fr
}

[data-menu=smallpanel] [data-menu=line] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--easeOutQuint);
    transform-origin: left;
    transform: scaleX(0)
}

.menu-w:has(input:checked) [data-menu=smallpanel] [data-menu=line] {
    transform: scaleX(1);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transition-delay: var(--delay)
}

.menu-w:has(#smallpanel:checked) [data-a=y] {
    transition-delay: var(--delay)
}

[data-menu=smallpanel] [data-menu=x] {
    --duration: 1.1s;
    --halfDuration: .7s;
    --ease: var(--easeOutQuint);
    transform: translate(-300%)
}

.menu-w:has(input:checked) [data-menu=smallpanel] [data-menu=x] {
    transform: translate(0);
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transition-delay: var(--delay)
}

.menu-film:last-of-type {
    .line-menu {
        display: none
    }
}

.menu-film-item .menu-film-direct-link {
    transition: opacity .2s ease-out, transform .2s ease-out;
    transform: scale(.5);
    opacity: 0
}

.menu-film-item:hover .menu-film-direct-link {
    transition: opacity .2s ease-out, transform .2s ease-out;
    opacity: 1;
    transform: scale(1)
}

.menu-film-item:hover .dot {
    transform: scale(0)
}

.menu-film-direct-link:hover svg path {
    transition: fill .2s ease-out;
    fill: #fff
}

.menu-film-direct-link:hover svg path:first-of-type {
    transition: fill .4s ease-out;
    fill: #000
}

[data-roll=menuItem] .dot {
    --duration: 1.1s;
    --halfDuration: .55s;
    --ease: var(--easeOutQuint);
    transition-property: all;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transform: scale(0)
}

.current .dot {
    transform: scale(1)
}

[data-menu=footagepanel] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--panels-duration) var(--customEase)
}

[data-menu=footagepanel]>* {
    overflow: hidden
}

[data-footagemenu=w]:hover {
    transition: color .6s ease-out
}

[data-footagemenu=w]:hover [data-footagemenu=bg] {
    transition: fill .6s ease-out
}

[data-footagemenu=w]:hover {
    color: #fff;
    transition: fill .6s ease-out
}

[data-footagemenu=w]:hover [data-footagemenu=bg],
.footagemenu-cta-w:hover [data-footagemenu=bg] {
    fill: #000 !important;
    transition: fill .6s ease-out
}

[data-menu=casepanel] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--panels-duration) var(--customEase)
}

[data-menu=casepanel]>* {
    overflow: hidden
}

[data-cursor=home] {
    --duration: .3s;
    --durationLong: .5s;
    --durationShort: .15s;
    --ease: var(--easeOutQuint)
}

[data-cursor=home] .arrow-of:first-of-type>svg {
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transform: translateY(130%)
}

[data-cursor=home] .arrow-of:last-of-type>svg {
    transition-property: transform;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
    transform: translateY(-130%) rotate(180deg)
}

[data-cursor=home] .circle {
    transition-property: transform;
    transition-duration: var(--durationLong);
    transition-timing-function: var(--ease);
    transform: scale(1)
}

[data-cursor=home] .text-of-w>* {
    transition-property: transform;
    transition-duration: var(--durationLong);
    transition-timing-function: var(--ease);
    transform: translateY(0)
}

.pressed[data-cursor=home] .arrow-of:first-of-type>svg {
    transform: translateY(0);
    transition-delay: .1s
}

.pressed[data-cursor=home] .arrow-of:last-of-type>svg {
    transform: translateY(0) rotate(180deg);
    transition-delay: .1s
}

.pressed[data-cursor=home] .circle {
    transform: scale(.7)
}

.pressed[data-cursor=home] .text-of-w>* {
    transform: translateY(150%);
    transition-duration: .2s
}

.prevnext[data-cursor=home] .circle {
    transform: scale(.7);
    transition-duration: .2s
}

.prevnext[data-cursor=home] .text-of-w>* {
    transform: translateY(200%)
}

.top[data-cursor=home] .arrow-of:first-of-type>svg {
    transform: translateY(0);
    transition-delay: .1s
}

.bottom[data-cursor=home] .arrow-of:last-of-type>svg {
    transform: translateY(0) rotate(180deg);
    transition-delay: .1s
}

.left[data-cursor=work] .arrow-of:first-of-type>svg {
    transform: translate(0);
    transition-delay: .1s
}

.right[data-cursor=work] .arrow-of:last-of-type>svg {
    transform: translate(0) rotate(180deg);
    transition-delay: .1s
}

.prevnext.pressed[data-cursor=home] .arrow-of:first-of-type>svg {
    transform: translateY(130%) !important
}

.prevnext.pressed[data-cursor=home] .arrow-of:last-of-type>svg {
    transform: translateY(-130%) rotate(180deg) !important
}

.prevnext.pressed[data-cursor=home] .circle {
    transform: scale(1) !important
}

.hide[data-cursor=home] {
    transition-property: opacity;
    transition-duration: var(--durationShort)
}

.hide[data-cursor=home] .arrow-of:first-of-type>svg {
    transform: translateY(130%)
}

.hide[data-cursor=home] .arrow-of:last-of-type>svg {
    transform: translateY(-130%) rotate(180deg)
}

.hide[data-cursor=home] .circle {
    transform: scale(0)
}

.hide[data-cursor=home] .text-of-w>* {
    opacity: 0
}

@media only screen and (min-width: 767px) {
    [data-btn=explore] {
        --duration: .8s;
        --durationShort: .4s;
        --ease: var(--easeOutQuint);
        transition: opacity .6s var(--ease)
    }

    [data-btn=explore] [data-after] {
        position: relative
    }

    [data-btn=explore] [data-after]:after {
        content: attr(data-after);
        position: absolute;
        inset: 150% 0 0
    }

    [data-btn=explore] [data-explore=bg] {
        transition: fill var(--duration) var(--ease);
        fill: transparent
    }

    [data-btn=explore]:hover [data-explore=bg] {
        fill: #fff
    }

    [data-btn=explore]:hover [data-explore=line] {
        stroke: #000
    }

    [data-btn=explore] [data-after] {
        transition: transform var(--duration) var(--ease) .1s;
        transform: translateY(0)
    }

    [data-btn=explore]:hover [data-after] {
        transition: transform var(--duration) var(--ease) .1s, color var(--duration) var(--ease) .1s;
        transform: translateY(-150%);
        color: #000
    }

    [data-btn=explore] [data-x] {
        transition: transform var(--duration) var(--ease);
        transform: translate(0)
    }

    [data-btn=explore]:hover [data-x] {
        transition: transform var(--duration) var(--ease), color var(--duration) var(--ease);
        transform: translate(100%);
        color: #000
    }

    [data-tuto=true]:hover [data-explore=line] {
        stroke: #fff
    }

    [data-tuto=true]:hover [data-x] {
        color: #fff
    }

    [data-tuto=true]:hover [data-after] {
        transition: transform var(--duration) var(--ease) .1s, color var(--duration) var(--ease) .1s;
        transform: translateY(-150%);
        color: #fff
    }

    [data-wf--explore-btn--variant=white] {
        color: #000
    }

    [data-wf--explore-btn--variant=white] [data-explore=bg] {
        fill: #fff;
        stroke: transparent !important
    }
}

@media only screen and (max-width: 767px) {
    [data-btn=explore] .abs svg {
        fill: #fff;
        stroke: #000
    }

    [data-wf--explore-btn--variant=white] [data-explore=line] {
        stroke: #000
    }
}

.work-toggle {
    --duration: .6s;
    --ease: var(--easeOutQuint)
}

.toggle-switch-cont .toggle-switch {
    transform: translate(0);
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}

.toggle-switch-cont.toggled .toggle-switch {
    transform: translate(100%)
}

.toggle-switch-cont .switch-alt-tx>* {
    transition: transform .4s ease-out;
    transform: translateY(0)
}

.toggle-switch-cont.toggled .switch-alt-tx>* {
    transform: translateY(-100%)
}

.work-roll-c {
    .roll-cont-item {
        .linecallout-list {
            .linecallout-item:nth-child(1) div:nth-child(2) {
                transform: translate(-15%)
            }

            .linecallout-item:nth-child(1) div:nth-child(3) {
                transform: translate(-20%)
            }

            .linecallout-item:nth-child(2) div:nth-child(1) {
                transform: translate(10%)
            }

            .linecallout-item:nth-child(2) div:nth-child(2) {
                transform: translate(-5%)
            }

            .linecallout-item:nth-child(3) div:nth-child(1) {
                transform: translate(-10%)
            }

            .linecallout-item:nth-child(3) div:nth-child(1) {
                transform: translate(-5%)
            }
        }
    }
}

[data-fade-x="1"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)
}

[data-fade-x="2"] {
    -webkit-mask-image: linear-gradient(to right, transparent 15%, black 30%, black 70%, transparent 85%);
    mask-image: linear-gradient(to right, transparent 15%, black 30%, black 70%, transparent 85%)
}

[data-fade-y="1"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)
}

[data-page=work] {
    @media (min-width: 1024px) and (max-height: 750px) {
        .work-roll-item {
            max-width: 100%;
            min-width: auto;
            width: 18vw !important
        }

        .roll-cont-he {
            font-size: 5vh !important
        }

        .roll-subh-flip-w {
            width: 10em
        }
    }
}

[data-page=home] {
    .awards-w>div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center
    }

    @media only screen and (max-width: 767px) {
        .awards-w {
            align-items: start;
            gap: .2rem
        }

        .awards-w h3 {
            font-size: 1.2rem
        }

        [data-hide=desktop] {
            [data-roll=reviews].mobile {
                display: flex;
                flex-direction: row;
                width: 100%;
                justify-content: space-between;

                div:nth-child(3) {
                    display: none
                }
            }
        }
    }

    @media (min-width: 1024px) and (max-height: 890px) {
        .awards-w>div>h3 {
            margin-bottom: 1.3rem;
            font-size: 1.2rem
        }

        .awards-w>div>figure>div>img {
            padding-bottom: .2rem
        }
    }

    @media (min-width: 1024px) and (max-height: 750px) {
        .awards-w>div>h3 {
            margin-bottom: 1.3rem;
            font-size: 2vh
        }

        .awards-w>div>figure>div>img {
            padding-bottom: .1vh;
            margin-bottom: .6vh
        }

        h2 {
            font-size: 8vh
        }

        .award_headline {
            font-size: 2vh
        }

        .award_img-wrap {
            margin-top: .5vh
        }

        .award-year {
            font-size: 3vh
        }

        .roll-content-w {
            padding: 1vh 2vh
        }

        .linecallout-item {
            height: 12px
        }
    }
}

@media (min-width: 1024px) and (max-height: 550px) {
    .awards-w>div:last-of-type {
        display: none
    }
}

[data-css=aboutdash] {
    opacity: .6;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='12' ry='12' fill='none' stroke='%23FFF' stroke-width='1.8' stroke-dasharray='2%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 12px
}

[data-css=aboutdashwhite] {
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='12' ry='12' fill='none' stroke='%23FFF' stroke-width='1.8' stroke-dasharray='2%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
}

[data-page=about] {
    @media (min-width: 1024px) and (max-height: 750px) {

        .span-clip,
        .span-move,
        .about-he {
            font-size: 10vh
        }
    }

    [data-svg=resize] rect:first-child {
        stroke-dasharray: .4vh;
        stroke-width: .16vh
    }
}

@media (max-width: 1220px) {
    .about-he {
        font-size: 4vw !important
    }

    .about-he>.span-move {
        font-size: 4vw !important;
        transform: translate(0, 0, 0) !important
    }

    .about-he>.span-clip {
        font-size: 4vw !important
    }

    .about-he-sm-tx {
        font-size: 1.8vw !important
    }
}

[data-css=creditgrid2]:nth-child(-n+2) {
    display: none
}

[data-css=creditgrid3]:last-child {
    .dot-separator {
        display: none
    }
}

.review-slider-slide {
    --slider-dur: .8s
}

.review-slide-cont {

    .review-he,
    .roll-cont-eyeb {
        transition: color var(--slider-dur) var(--easeOutQuint)
    }

    .review-svg {
        transform: scale(1);
        transition: transform var(--slider-dur) var(--easeOutQuint)
    }

    .cta-hide {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--slider-dur) var(--easeOutQuint)
    }
}

.review-slide-cont:hover {

    .review-he,
    .roll-cont-eyeb {
        color: red;
        transition: color var(--slider-dur) var(--easeOutQuint)
    }

    .review-svg {
        transform: scale(.95);
        transition: transform var(--slider-dur) var(--easeOutQuint)
    }

    .cta-hide {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows var(--slider-dur) var(--easeOutQuint)
    }
}

@keyframes arrow {
    0% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(10px)
    }

    16% {
        transform: translateY(0)
    }

    to {
        transform: translateY(0)
    }
}

.arrow-link-w {
    .down-arrow-btn {
        animation: arrow 10s infinite
    }
}

.all-work-cta-w {
    transition: background-color .5s var(--easeOutQuint), color .5s var(--easeOutQuint)
}

.all-work-cta-w:hover {
    background-color: #000;
    color: #fff;

    .down-arrow-btn.black {
        transition: background-color .5s var(--easeOutQuint), color .5s var(--easeOutQuint);
        background-color: #fff;
        color: #000
    }
}

.previousnext-item {
    .full-img-w {
        transform: scale(1);
        transition: transform 1.2s var(--easeOutQuint)
    }
}

.previousnext-item:hover {
    .full-img-w {
        transform: scale(1.1)
    }
}

[data-marquee-active]>div {
    animation: marquee infinite linear
}

[data-marquee-active="1"]>div {
    animation-duration: 2s
}

[data-marquee-active="2"]>div {
    animation-duration: 4s
}

[data-marquee-active="3"]>div {
    animation-duration: 6s
}

[data-marquee-active="4"]>div {
    animation-duration: 8s
}

[data-marquee-active="5"]>div {
    animation-duration: 10s
}

[data-marquee-active="6"]>div {
    animation-duration: 12s
}

[data-marquee-active="7"]>div {
    animation-duration: 14s
}

[data-marquee-active="8"]>div {
    animation-duration: 16s
}

[data-marquee-active="9"]>div {
    animation-duration: 18s
}

[data-marquee-active="10"]>div {
    animation-duration: 20s
}

[data-marquee-active="11"]>div {
    animation-duration: 22s
}

[data-marquee-active="12"]>div {
    animation-duration: 24s
}

[data-marquee-active="13"]>div {
    animation-duration: 26s
}

[data-marquee-active="14"]>div {
    animation-duration: 28s
}

@keyframes marquee {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-100%)
    }
}

[data-menu=casepanel].open,
[data-page=case] [data-menu=mainpanel] {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1))
}

[data-page=contact] {
    @media (min-width: 1024px) and (max-height: 750px) {

        .contact-h-of,
        .contact-h {
            font-size: 18vh
        }
    }

    @media (min-width: 1024px) and (max-height: 550px) {

        .contact-h-of,
        .contact-h {
            font-size: 10vh
        }
    }
}

[data-s=footer] {
    .ft-sitemap-lk {
        transition: opacity .3s var(--easeOutQuint);

        .down-arrow-btn {
            transform: scale(0) rotate(-90deg);
            transition: transform .3s var(--easeOutQuint)
        }
    }

    .ft-sitemap-lk:hover {
        opacity: 1;
        transition: opacity .4s var(--easeOutQuint);

        .down-arrow-btn {
            transform: scale(1) rotate(-135deg);
            transition: transform .8s var(--easeOutQuint)
        }
    }
}

@media only screen and (min-width: 767px) {
    .moon {
        .split-line-move:nth-child(1) {
            transform: translate(0)
        }

        .split-line-move:nth-child(2) {
            transform: translate(20%)
        }

        .split-line-move:nth-child(3) {
            transform: translate(0)
        }
    }

    .kafka {
        .split-line-move:nth-child(1) {
            transform: translate(0)
        }

        .split-line-move:nth-child(2) {
            transform: translate(-15%)
        }
    }

    .my,
    .ana {
        .split-line-move:nth-child(1) {
            transform: translate(0)
        }

        .split-line-move:nth-child(2) {
            transform: translate(0)
        }
    }

    .freud {
        .split-line-move:nth-child(1) {
            transform: translate(0)
        }

        .split-line-move:nth-child(2) {
            transform: translate(10%)
        }
    }
}

.split-line-move {
    line-height: .5em
}

.split-line-move>div {
    overflow: hidden;
    line-height: .8em
}

.cloneText {
    position: absolute;
    top: 115%
}

.cloneText2 {
    position: absolute;
    top: 100%
}

@media only screen and (min-width: 1800px) {
    .preloader-video {
        width: 100vw !important;
        height: auto
    }
}

[data-vid=play]>div:nth-child(1) {
    opacity: 0
}

[data-vid=play].pause>div:nth-child(1) {
    opacity: 1
}

[data-vid=play]>div:nth-child(2) {
    opacity: 1
}

[data-vid=play].pause>div:nth-child(2) {
    opacity: 0
}

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-overflow-style: none;
    scrollbar-width: none
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

:root {
    overscroll-behavior: none;
    overflow-x: hidden
}

.open {
    grid-template-rows: 1fr
}

@media only screen and (min-width: 767px) {
    [data-hide=desktop] {
        display: none !important
    }
}

@media (min-width: 1920px) {

    .contact-h,
    .contact-h-of {
        font-size: 20vh
    }
}

@media only screen and (max-width: 767px) {
    [data-hide=mobile] {
        display: none !important
    }

    :root {
        --text-h1: 3.2rem;
        --gx: 1.5rem;
        --sgx: 1.1rem;
        --roll-gx: 1.5rem;
        --white--hole-size: .6rem
    }

    .awards-w {
        align-items: start;
        gap: .2rem
    }

    .awards-w h3 {
        font-size: 1.2rem
    }
}