@import url("https://use.typekit.net/hwd6hsf.css");

*{color:#fff;text-decoration:none}
body,html{height:100%;margin:0}
body{overflow:hidden;margin:0;background: #1c1c1e;font-family: 'Mukta', sans-serif;}
img {pointer-events: none;border-radius:20px;width: 100%;}
::-webkit-scrollbar{display:none}
::-webkit-scrollbar-thumb{background:#4d4d52}
::-webkit-scrollbar-track{background:#1c1f21}

.core-page *{box-sizing:border-box;}
.core-page{width:100%;margin:0 auto;}

.back-wrapper {margin: 2%;}
.back{width: 1.2%;position: absolute;mix-blend-mode: color-dodge;}
.r{animation:15s infinite linear rd}
@keyframes rd{
    0%{transform:scaleY(.9);}
    50%{transform:scaleY(1.4)scaleX(1.2);}
    100%{transform:scaleY(.9);}
    }
.g{animation:15s infinite linear grn}
@keyframes grn{
0%{transform:skew(.3deg,.3deg)scaleY(1);}
25%{transform:skew(-.3deg,-1.3deg)}
50%{transform:skew(-.3deg,-.3deg)scaleY(1.5)scaleX(1.3);}
75%{transform:skew(1.3deg,.3deg)}
100%{transform:skew(.3deg,.3deg)scaleY(1);}
}
.b{animation:15s infinite linear blu}
@keyframes blu{
0%{transform:skew(-.3deg,-.3deg)scaleY(.8);}
25%{transform:skew(.3deg,1.3deg)}
50%{transform:skew(.3deg,.3deg)scaleY(1.3)scaleX(1.5);}
75%{transform:skew(-1.3deg,-.3deg)}
100%{transform:skew(-.3deg,-.3deg)scaleY(.8);}
}

h2{font-family:jetlab-variable,sans-serif;font-variation-settings: "HORZ" 0, "LIFT" 50, "THRU" 60, "VERT" 0;font-size: 18rem;line-height: 18rem;font-weight:700;letter-spacing: 0rem;transform: rotate(-90deg);margin: 0;}

#container{width: auto;margin: 0;transform: rotate(-90deg);}
h2{text-align:center;color:#fff;font-family:jetlab-variable,sans-serif;font-variation-settings: "HORZ" 0, "LIFT" 50, "THRU" 60, "VERT" 0;font-size:18rem;font-weight:700;letter-spacing:0rem;margin:0;line-height:0;animation:glitch1 4s infinite;mix-blend-mode: lighten;}
h2:nth-child(2){color:#0000ff;animation:glitch2 4s infinite}
h2:nth-child(3){color:#ff0000;animation:glitch3 4s infinite}
h2:nth-child(4){color:#00ff00;animation:glitch4 4s infinite}
@keyframes glitch1{
0%{transform:none;opacity:1}
7%{transform:skew(-.5deg,-.9deg);opacity:1}
10%{transform:none;opacity:1}
27%{transform:none;opacity:1}
30%{transform:skew(.8deg,-.1deg);opacity:1}
35%{transform:none;opacity:1}
52%{transform:none;opacity:1}
55%{transform:skew(-1deg,.2deg);opacity:1}
50%{transform:none;opacity:1}
72%{transform:none;opacity:1}
75%{transform:skew(.4deg,1deg);opacity:1}
80%{transform:none;opacity:1}
100%{transform:none;opacity:1}
}
@keyframes glitch2{
0%{transform:none;opacity:1}
7%{transform:translate(-2px,-3px);opacity:1}
10%{transform:none;opacity:1}
27%{transform:none;opacity:1}
30%{transform:translate(-5px,-2px);opacity:1}
35%{transform:none;opacity:1}
52%{transform:none;opacity:1}
55%{transform:translate(-5px,-1px);opacity:1}
50%{transform:none;opacity:1}
72%{transform:none;opacity:1}
75%{transform:translate(-2px,-6px);opacity:1}
80%{transform:none;opacity:1}
100%{transform:none;opacity:1}
}
@keyframes glitch3{
0%{transform:none;opacity:1}
7%{transform:translate(2px,3px);opacity:1}
10%{transform:none;opacity:1}
27%{transform:none;opacity:1}
30%{transform:translate(5px,2px);opacity:1}
35%{transform:none;opacity:1}
52%{transform:none;opacity:1}
55%{transform:translate(5px,1px);opacity:1}
50%{transform:none;opacity:1}
72%{transform:none;opacity:1}
75%{transform:translate(2px,6px);opacity:1}
80%{transform:none;opacity:1}
100%{transform:none;opacity:1}
}
@keyframes glitch4{
0%{transform:none;opacity:1}
7%{transform:skew(-.7deg,-.2deg);opacity:1}
10%{transform:none;opacity:1}
27%{transform:none;opacity:1}
30%{transform:skew(.99deg,-.3deg);opacity:1}
35%{transform:none;opacity:1}
52%{transform:none;opacity:1}
55%{transform:skew(-3deg,.4deg);opacity:1}
50%{transform:none;opacity:1}
72%{transform:none;opacity:1}
75%{transform:skew(.6deg,2.5deg);opacity:1}
80%{transform:none;opacity:1}
100%{transform:none;opacity:1}
}

.core-section{display:inline-block;position:relative;width:100%;margin:30px auto;}

.scroller{height:90dvh;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;-webkit-overflow-scrolling:touch}
.panel{box-sizing:border-box;align-items:center;margin:.5%;display:flex;align-content:space-between;justify-content:space-between;flex:0 0 50vw;height:75vh;flex-wrap:wrap;border-radius:20px}
.panel.thin{flex:0 0 25vw}
.swatch{display:block;position:relative;height:calc(50% - 2%);width:100%;max-width:none;margin-right:0;object-fit:cover}
.swatch.four{width:calc(50% - 2%)}
.swatch.six{width:calc(50% - 2%);height:calc(50% - 18.5%)}
.swatch.eight{width:calc(50% - 2%);height:calc(50% - 24.5%)}
.swatch-content{display:block;position:absolute;transform:translate3d(-50%,-50%,0);text-align:left;top:93%;left:33%;width:50%}
.eight .swatch-content{top:77%}
.swatch-content p{margin:0;line-height:1rem;font-size:.8rem;font-weight:700}
.intro{color:#fff;padding:2%;align-content:center}

.feature, .featuretwo { opacity: 0; }
.is-visible { opacity: 1; }

.white{color:#fff;}
.black{color:#000;}

/* Footer */
footer {text-align: center;font-size: .8rem;}

@media (prefers-reduced-motion:reduce){
body{overflow:auto}
}
@media (max-width:700px){
body{overflow:auto}
.scroller{display:block;overflow:auto}
.panel{width:100%;height:80vh}
}

@media only screen and (min-width: 2500px) {
.panel{height:73vh;}
}


.horizontal-content-layout{display:flex;flex-direction:row;align-items:flex-start;gap: 20px;padding-right:50px;align-items: center;}
.column{display:flex;flex-direction:column;gap:20px;flex-shrink:0}
.column:last-of-type {margin-right: 8%;}
.horizontal-content-layout img, .horizontal-content-layout video{display:block;border-radius:10px;}
.column p {max-width: 25vw;padding: 0% 5% 0% 15%;}
.full {width: 50%;}
.quarter {width: 25%;}
.third {width: 12.5%;}
.large {width:62%}