/* JAC- Johnny A C */
:root{
    --fade-delay: 0.2s;
}
.over-hidden{
    display: block;
    overflow: hidden;
}
.over-hidden-inblock{
    display: inline-block;
    overflow: hidden;
}


.fade-up,
.fade-up-seen{
    display: inherit;
    transform: translateY(100%) scaleY(1.1);
    transition: transform 0.8s;
    transition-delay: var(--fade-delay);
    transform-origin: top;
}
.is-inview .fade-up,
.seen .fade-up-seen{
    transform: none;
}
.fade,
.fade-seen{
    opacity: 0;
    transition: opacity 0.8s;
}
.is-inview .fade,
.seen .fade-seen{
    opacity: 1;
}
.fade-delay1{
    transition-delay: calc(var(--fade-delay) * 2);
}
.fade-delay2{
    transition-delay: calc(var(--fade-delay) * 3);
}
.fade-delay3{
    transition-delay: calc(var(--fade-delay) * 4);
}
.fade-delay4{
    transition-delay: calc(var(--fade-delay) * 5);
}
.fade-delay5{
    transition-delay: calc(var(--fade-delay) * 6);
}

.no-js .fade-up,
.no-js .fade-up-seen{
    transform: unset;
}

.no-js .fade,
.no-js .fade-seen{
    opacity: 1;
}

.marquee-container {
  overflow: hidden;
}

.marquee-track {
    display: flex;
    animation: marqueeAnim var(--marquee-speed) linear infinite;
    animation-play-state: paused;
}
.marquee-container.active .marquee-track{
    animation-play-state: running;
}
@keyframes marqueeAnim {
    0% { transform: translateX(0); }
    100%   { transform: translateX(var(--marquee-length)); }
}

.marquee {
    display: flex;
    flex: 0 0 100%;
    justify-content: space-evenly;
}
.marquee *{
    white-space: nowrap;
}

[data-scroll-event-progress="scroll-prlx"] img{
    position: absolute;
    width: 100%;
    height: 150%;
    top: 0;
    left: 0;
    object-fit: cover;
    animation: prlximg 1s;
    animation-play-state: paused;
}

@keyframes prlximg {
    0%{
        transform: translateY(-20%);
    }
    100%{
        transform: none;
    }
}


[data-scroll-event-progress="scroll-horiz"] > div{
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.scroll-horiz-container{
    flex: 1;
    overflow: hidden;
}
.scroll-horiz-container > div,
.scroll-horiz-container .contained{
    height: 100%;
}
.scroll-horiz{
    display: flex;
    flex-direction: row;
    height: 100%;
}

.scroll-horiz-item{
    display: flex;
    flex: 0 0 100%;
    border-radius: calc(40px * var(--globalScale));
    overflow: hidden;
}
[data-scroll-event-progress="scroll-horiz"] .scroll-goleft,
[data-scroll-event-progress="scroll-horiz"] .scroll-goright,
[data-scroll-event-progress="scroll-horiz"] .scroll-goup{
    display: block;
    transform: none;
    animation-play-state: paused;
    animation-duration: 1s;
}
[data-scroll-event-progress="scroll-horiz"] .scroll-goleft{
    animation-name: goleft;
}
@keyframes goleft {
    0%{
        transform: translateX(10%);
    }
    100%{
        transform: none;
    }
}
[data-scroll-event-progress="scroll-horiz"] .scroll-goright{
    animation-name: goright;
}
@keyframes goright {
    0%{
        transform: translateX(-10%);
    }
    100%{
        transform: none;
    }
}
[data-scroll-event-progress="scroll-horiz"] .scroll-goup{
    display: flex;
    animation-name: goup;
}
@keyframes goup {
    0%{
        transform: translateY(50%);
    }
    100%{
        transform: none;
    }
}

[data-scroll-event-progress="scroll-horiz"] .scroll-horiz-img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    backface-visibility: hidden;
}

[data-scroll-event-progress="scroll-stick-fade"] > .stick-fade-item{
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
}
[data-scroll-event-progress="scroll-stick-fade"] .stick-fade{
    margin: auto;
    width: 100%;
}


.sticky-overlap{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    mix-blend-mode: difference;
    color: var(--color-white);
}
.sticky-overlap > div *{
    color: var(--color-white);
}
.sticky-overlap > div{
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
}
.sticky-overlap > div *{
    margin: auto;
}


.prlx-col{
    display: flex;
}
.prlx-col > div{
    flex: 1;
}
.prlx-col > .prlx-spacer{
    width: 25%;
    flex: unset;
}
.prlx-col img,
.prlx-col video{
    width: 100%;
    height: auto;
    display: block;
    border-radius: calc(15px * var(--globalScale));
}
.prlx-ts{
    margin-top: calc(300px * var(--globalScale));
}
.prlx-tm{
    margin-top: calc(600px * var(--globalScale));
}
.prlx-tl{
    margin-top: calc(900px * var(--globalScale));
}

[data-scroll-event-progress="prlx-col-reveal"] div{
    animation: 1s prlxcolimg;
    animation-play-state: paused;
}

@keyframes prlxcolimg {
    0%{
        /* clip-path: inset(50% 50% 50% 50%); */
        transform: translateY(10%);
    }
    100%{
        /* clip-path: inset(0 0 0 0); */
        transform: none;
    }
}


[data-scroll-event-progress="scroll-bgchange"]{
    position: absolute;
    width: 100%;
    left: 0;
    height: 150vh;
    background: var(--color-bg-A1);
}
[data-scroll-event-progress="scroll-bgchange"]::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
[data-transition="in"][data-scroll-event-progress="scroll-bgchange"]{
    top: 0;
}
[data-transition="out"][data-scroll-event-progress="scroll-bgchange"]{
    bottom: 0;
}


[data-scroll-event-progress="scroll-flyby"],
.scroll-flyby-sm *{
    color: #110d2e;
    text-align: center;
    line-height: 0.8;
    font-size: calc(var(--h1TextSize) * 3.825);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}
.scroll-flyby-sm *{
    font-size: calc(var(--h1TextSize) * 1.955);
}
.scroll-flyby-sm [class*="ttx-"]{
    display: block;
    padding: calc(30px * var(--globalScale)) 0;
}
.scroll-flyby-sm .typo-center > :last-child{
    padding-bottom: 0;
}
.scroll-flyby-sm .typo-center{
    display: inline-block;
    transform: translateX(-8%);
}
.scroll-flyby-sm .ttx-l{
    transform: translateX(-16%);
}
.scroll-flyby-sm .ttx-r{
    transform: translateX(16%);
}


[data-scroll-event-progress="jac-kinetic-slide"]{
    display: flex;
    flex-direction: column;
}
[data-scroll-event-progress="jac-kinetic-slide"] > div{
    width: 100%;
    overflow: hidden;
}
[data-scroll-event-progress="jac-kinetic-slide"].layout-shift > div{
    position: sticky;
    top: 0;
    height: 100vh;
}
.kinetic-slide-item{
    height: 200vh;
    margin-bottom: auto;
    display: flex;
}
.layout-shift .kinetic-slide-item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.layout-shift .kinetic-slide-item.seen{
    pointer-events: all;
}

.scroll-kinetic{
    width: 100%;
    display: flex;
}
.m-a-all{
    margin: auto;
}

.scroll-kinetic h2,
.scroll-kinetic p{
    margin: 0;
}

.kinetic-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kinetic-anim-recenter,
.kinetic-anim-reveal-l,
.kinetic-anim-fadein,
.kinetic-anim-fadeout,
.kinetic-anim-expandswipe,
.kinetic-anim-rotate-goleft,
.kinetic-anim-rotate-goleft2,
.kinetic-anim-goleft,
.kinetic-anim-goright,
.kinetic-anim-golefthalf,
.kinetic-anim-gorighthalf,
.kinetic-anim-goup,
.kinetic-anim-gouphalf,
.kinetic-anim-godown,
.kinetic-anim-godownhalf,
.kinetic-anim-reposup,
.kinetic-anim-reposdown,
.kinetic-anim-reposleft,
.kinetic-anim-reposright,
.kinetic-anim-reposuphalf,
.kinetic-anim-reposdownhalf,
.kinetic-anim-reposlefthalf,
.kinetic-anim-reposrighthalf,
.kinetic-anim-scale,
.kinetic-anim-scaledown,
.kinetic-anim-scale0,
.kinetic-anim-clipright,
.kinetic-anim-stitch,
.kinetic-anim-goleftstitch,
.scroll-stitchtop,
.kinetic-anim-rotate5,
.kinetic-anim-rotaterev5,
.kinetic-anim-clipinset,
.kinetic-anim-textreveal,
.scroll-stitchtopleft,
.kinetic-anim-colordark{
    animation-play-state: paused;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: calc(-1s * var(--kinetic));
    animation-fill-mode: forwards;
}
.kinetic-anim-recenter{
    animation-name: kineticRecenter;
}
@keyframes kineticRecenter {
    0%{
        transform: none;
    }
    100%{
        transform: translate(20%, -20%);
    }
}
.kinetic-anim-reveal-l{
    display: inline-block;
    animation-name: kineticRevealL;
}
@keyframes kineticRevealL {
    0%{
        opacity: 0;
        transform: translateX(50%);
    }
    50%{
        opacity: 1;
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-fadein{
    animation-name: kineticFadeIn;
}
@keyframes kineticFadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.kinetic-anim-fadeout{
    animation-name: kineticFadeOut;
}
@keyframes kineticFadeOut {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.kinetic-anim-expandswipe{
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--color-bg-A1);
    border-top: solid calc(2px * var(--globalScale)) black;
}
.kinetic-anim-expandswipe{
    animation-name: kineticExpandSwipe;
}
@keyframes kineticExpandSwipe {
    0%{
        transform: translateY(calc(100% - calc(2px * var(--globalScale))));
        clip-path: inset(0 100% 0 0);
    }
    50%{
        transform: translateY(calc(100% - calc(2px * var(--globalScale))));
        clip-path: inset(0 0 0 0);
    }
    100%{
        transform: none;
    }
}

.kinetic-anim-rotate-goleft{
    transform-origin: top left;
    animation-name: kineticRotateGoleft;
}
@keyframes kineticRotateGoleft {
    0%{
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 0 0);
    }
    40%,80%{
        transform: rotate(90deg);
        clip-path: inset(0 75% 0 0);
    }
    95%{
        opacity: 1;
    }
    100%{
        transform: rotate(90deg);
        clip-path: inset(0 100% 0 0);
    }
}
.kinetic-anim-rotate-goleft2{
    transform-origin: top left;
    animation-name: kineticRotateGoleft2;
}
@keyframes kineticRotateGoleft2 {
    0%{
        transform: none;
    }
    100%{
        transform: rotate(90deg);
    }
}


.kinetic-anim-goright{
    animation-name: kineticGoRight;
}
@keyframes kineticGoRight {
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-goleft{
    animation-name: kineticGoLeft;
}
@keyframes kineticGoLeft {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-golefthalf{
    animation-name: kineticGoLeftHalf;
}
@keyframes kineticGoLeftHalf {
    0%{
        transform: translateX(-25%);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-gorighthalf{
    animation-name: kineticGoRightHlaf;
}
@keyframes kineticGoRightHlaf {
    0%{
        transform: translateX(25%);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-goup{
    animation-name: kineticGoUp;
}
@keyframes kineticGoUp {
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-gouphalf{
    animation-name: kineticGoUpHalf;
}
@keyframes kineticGoUpHalf {
    0%{
        transform: translateY(25%);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-godown{
    animation-name: kineticGoDown;
}
@keyframes kineticGoDown {
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-godownhalf{
    animation-name: kineticGoDownHalf;
}
@keyframes kineticGoDownHalf {
    0%{
        transform: translateY(-25%);
    }
    100%{
        transform: none;
    }
}

.kinetic-anim-reposup{
    animation-name: kineticReposUp;
}
@keyframes kineticReposUp {
    0%{
        transform: none;
    }
    100%{
        transform: translateY(-100%);
    }
}
.kinetic-anim-reposuphalf{
    animation-name: kineticReposUpHalf;
}
@keyframes kineticReposUpHalf {
    0%{
        transform: none;
    }
    100%{
        transform: translateY(-25%);
    }
}
.kinetic-anim-reposdown{
    animation-name: kineticReposDown;
}
@keyframes kineticReposDown {
    0%{
        transform: none;
    }
    100%{
        transform: translateY(100%);
    }
}
.kinetic-anim-reposdownhalf{
    animation-name: kineticReposDownHalf;
}
@keyframes kineticReposDownHalf {
    0%{
        transform: none;
    }
    100%{
        transform: translateY(25%);
    }
}
.kinetic-anim-reposleft{
    animation-name: kineticReposLeft;
}
@keyframes kineticReposLeft {
    0%{
        transform: none;
    }
    100%{
        transform: translateX(-100%);
    }
}
.kinetic-anim-reposlefthalf{
    animation-name: kineticReposLeftHalf;
}
@keyframes kineticReposLeftHalf {
    0%{
        transform: none;
    }
    100%{
        transform: translateX(-25%);
    }
}
.kinetic-anim-reposright{
    animation-name: kineticReposRight;
}
@keyframes kineticReposRight {
    0%{
        transform: none;
    }
    100%{
        transform: translateX(100%);
    }
}
.kinetic-anim-reposrighthalf{
    animation-name: kineticReposRightHalf;
}
@keyframes kineticReposRightHalf {
    0%{
        transform: none;
    }
    100%{
        transform: translateX(25%);
    }
}
.kinetic-anim-scale{
    animation-name: kineticScale;
}
@keyframes kineticScale {
    0%{
        transform: scale(0);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-scaledown{
    animation-name: kineticScaleDown;
}
@keyframes kineticScaleDown {
    0%{
        transform: scale(1.5);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-scale0{
    animation-name: kineticScale0;
}
@keyframes kineticScale0 {
    0%{
        transform: none;
    }
    100%{
        transform: scale(0);
    }
}
.kinetic-anim-rotate5{
    animation-name: kineticRotate5;
}
@keyframes kineticRotate5 {
    0%{
        transform: none;
    }
    100%{
        transform: rotate(5deg);
    }
}
.kinetic-anim-rotaterev5{
    animation-name: kineticRotateRev5;
}
@keyframes kineticRotateRev5 {
    0%{
        transform: none;
    }
    100%{
        transform: rotate(-5deg);
    }
}
.kinetic-anim-clipinset{
    animation-name: kineticClipInset;
}

@keyframes kineticClipInset {
    0%{
        clip-path: inset(50% 50% 50% 50%);
    }
    100%{
        clip-path: inset(0 0 0 0);
    }
}
.kinetic-anim-textreveal{
    animation-name: kineticTextReveal;
    background: linear-gradient(135deg, black 45%, rgba(0, 0, 0, 0.2) 55%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; 
}

@keyframes kineticTextReveal {
    0%{
        background-position-x: 100%;
    }
    100%{
        background-position-x: 0%;
    }
}

.kinetic-anim-clipright{
    animation-name: kineticClipRight;
}
@keyframes kineticClipRight {
    0%{
        clip-path: inset(0 100% 0 0);
    }
    100%{
        clip-path: inset(0 0 0 0);
    }
}

.kinetic-anim-stitch{
    animation-name: kineticStitch;
}
@keyframes kineticStitch {
    0%{
        transform: translate(0%, 0%);
    }
    100%{
        transform: translate(0%, 100%);
    }
}
.kinetic-anim-goleftstitch{
    animation-name: goleftstitch;
}
@keyframes goleftstitch {
    0%{
        opacity: 1;
        transform: none;
    }
    100%{
        opacity: 1;
        transform: translateX(-100%);
    }
}

.scroll-stitchtop{
    animation-name: scrollStitchTop;
}
@keyframes scrollStitchTop {
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: none;
    }
}
.scroll-stitchtopleft{
    animation-name: scrollStitchTopLeft;
}
@keyframes scrollStitchTopLeft {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: none;
    }
}
.kinetic-anim-colordark{
    animation-name: recolorDark;
}
@keyframes recolorDark {
    0%{
        color: inherit;
    }
    100%{
        color: black;
    }
}

.d-block{
    display: block;
}
.d-inblock{
    display: inline-block;
}



@media only screen and (max-width: 950px){
    [data-scroll-event-progress="scroll-flyby"]{
        font-size: calc(var(--h1TextSize) * 2.55);
    }

    .scroll-flyby-sm *{
        font-size: calc(var(--h1TextSize) * 1.53);
    }
}
@media only screen and (max-width: 768px){
    [data-scroll-event-progress="scroll-flyby"]{
        font-size: calc(var(--h1TextSize) * 2.125);
    }

    .scroll-flyby-sm *{
        font-size: calc(var(--h1TextSize) * 1.105);
    }
    .prlx-col{
        padding: 0 24px;
        flex-direction: column;
    }
    .prlx-spacer{
        display: none;
    }
}


@media only screen and (max-width: 500px){
    [data-scroll-event-progress="scroll-horiz"]{
        height: auto !important;
    }
    [data-scroll-event-progress="scroll-horiz"] > div{
        height: auto;
        position: relative;
        top: auto;
    }
    .scroll-horiz{
        flex-wrap: wrap;
    }
    
    .kinetic-anim-stitch,
    .kinetic-anim-goleftstitch,
    .scroll-stitchtop,
    .scroll-stitchtopleft{
        animation: none;
        transform: none;
        animation-play-state: unset;
        opacity: 1;
    }
    .scroll-horiz .scroll-horiz-item{
        flex: unset;
        padding: 6px;
        padding-top: 30px;
    }
    [data-scroll-event-progress="scroll-horiz"] .scroll-horiz-img,
    [data-scroll-event-progress="scroll-horiz"] .scroll-horiz-txt{
        width: 100%;
    }
    [data-scroll-event-progress="scroll-horiz"] .scroll-horiz-txt{
        padding: 20px 0;
        padding-left: 10px;
        overflow: hidden;
    }
    .scroll-horiz-item h2::before{
        display: none;
    }
    [data-scroll-event-progress="scroll-horiz"] .scroll-horiz-img img{
        position: relative;
        max-height: 300px;
    }
    [data-scroll-event-progress="scroll-horiz"] .scroll-goleft,
    [data-scroll-event-progress="scroll-horiz"] .scroll-goright{
        animation: unset;
    }

    [data-scroll-event-progress="scroll-stick-fade"]{
        height: auto;
        padding-top: 60px;
    }
    [data-scroll-event-progress="scroll-stick-fade"]+[data-scroll-event-progress="scroll-stick-fade"]{
        padding-top: 0;
    }


    
    [data-scroll-event-progress="scroll-flyby"]{
        font-size: calc(var(--h1TextSize) * 1.955);
    }

    

    
}
@media only screen and (max-width: 400px){
    
    [data-scroll-event-progress="scroll-flyby"]{
        font-size: calc(var(--h1TextSize) * 1.785);
    }
}








.no-js [class*="kinetic-anim-"],
.no-js [class*="scroll-stitch"],
.no-js [class*="scroll-go"]{
    animation: unset;
    transform: unset;
    clip-path: unset;
    opacity: 1;
}
.no-js .kinetic-anim-expandswipe{
    display: none;
}
.no-js .kinetic-wrap{
    position: relative;
    height: auto;
    padding: 60px 0;
}

.no-js .flexeven{
    flex-wrap: wrap;
    justify-content: flex-start;
}
.no-js .flexeven > span{
    padding: 0 10px;
}


.no-js [data-scroll-event-progress="scroll-horiz"],
.no-js [data-scroll-event-progress="scroll-horiz"] > div{
    height: auto !important;
}
.no-js [data-scroll-event-progress="scroll-horiz"] > .scroll-horiz-item{
    height: auto;
    position: relative;
    top: auto;
}
.no-js .scroll-horiz{
    flex-wrap: wrap;
}
.no-js .scroll-horiz-item{
    flex: unset;
    width: 50%;
    padding: 6px;
    height: 100%;
}
.no-js .scroll-horiz > :first-child{
    margin-top: 0;
}

@media only screen and (max-width: 768px){
    .no-js .scroll-horiz-item{
        width: 100%;
    }
}

.no-js .stick-fade-item{
    position: relative;
    padding: calc(60px * var(--globalScale)) 0;
}


.no-js [data-scroll-event-progress="prlx-col-reveal"] div{
    animation: none;
}

.no-js [data-transition="in"][data-scroll-event-progress="scroll-bgchange"]{
    background: linear-gradient(0deg, var(--color-bg-B1) 20%, var(--color-bg-A1));
}
.no-js [data-transition="out"][data-scroll-event-progress="scroll-bgchange"]{
    background: linear-gradient(0deg, var(--color-bg-A1) 20%, var(--color-bg-B1));
}

.no-js .kinetic-slide-item{
    height: auto;
}



.no-js .kinetic-override > div{
    height: auto;
}
.no-js .kinetic-override h2,
.no-js .kinetic-override p{
    font-size: 10em;
}
@media only screen and (max-width: 992px){
    .no-js .kinetic-override h2,
    .no-js .kinetic-override p{
        font-size: 5em;
    }
}
.no-js .kinetic-override span{
    font-size: inherit;
}
.no-js .kinetic-override .over-hidden{
    overflow: visible;
}
.no-js .kinetic-override .m-a-all{
    transform: none;
}