@font-face {
    font-family: 'Greats';
    src: url('../fonts/Greats.eot');
    src: url('../fonts/Greats.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Greats.woff2') format('woff2'),
         url('../fonts/Greats.woff') format('woff'),
         url('../fonts/Greats.ttf')  format('truetype'),
         url('../fonts/Greats.svg#Greats') format('svg');
}
@font-face {
    font-family: 'Dx Monstral';
    src: url('../fonts/DxMonstral-Regular.woff2') format('woff2'),
         url('../fonts/DxMonstral-Regular.woff') format('woff'),
         url('../fonts/DxMonstral-Regular.ttf')  format('truetype');
}
:root {
	--bg: rgb(12,13,15);
	--text: rgb(245,245,245);
	--textFade: rgb(128, 132, 142);
	--grey: rgb(157,170,196);
	--greyDark: rgb(41, 44, 51);
	--accentColor: rgb(205, 14, 41);
	--green: rgb(62, 217, 80);
	--radius: 12px;
	--radiusL: 30px;
	--paddButton: 16px 30px 16px 30px;
	--paddSide: 80px;
	--fontTitle: "Dx Monstral";
}
*,a{margin:0;padding:0}
a,html{font-size:100%}
.clearfix,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,img,menu,nav,section,summary{display:block}
*,:focus{outline:0}
a,img{border:0}
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;background:0 0}
em,mark{font-style:italic}
ins,mark{background-color:#ff9;color:#000}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
a{vertical-align:baseline;background:0 0}
ins{text-decoration:none}
mark{font-weight:700}
del{text-decoration:line-through}
input,select{vertical-align:middle}
table{border-collapse:separate;border-spacing:0}
caption,td,th{text-align:left;font-weight:400}
input[type=submit]{-webkit-appearance:none}
img,object{max-width:100%}
p{margin-bottom:30px}
.gallery-caption{margin-left:0;margin-bottom:10px;padding:0 10px}
.aligncenter,.aligncenter img{margin-left:auto;margin-right:auto;clear:both}
.clear{clear:both;height:0}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.none{display:none}
.alignleft{float:left}
.alignright{float:right;text-align:right}
.aligncenter{display:block}
.alignleft img{float:left}
.alignright img{float:right}
.aligncenter img{display:block}
img.alignleft{float:left;margin:0 30px 0 0}
img.alignright{float:right;margin:0 0 0 30px}
img.aligncenter{margin-left:auto;margin-right:auto;display:block;clear:both}
iframe{display:block}
input,textarea{font-size:inherit;line-height:inherit;font-family:inherit;outline:0}
.inv{display:none}
a img{border:none}
img{margin:0;padding:0;white-space:normal;display:block}
.alignleft{text-align:left}
.aligncenter{text-align:center}
.alignRight{text-align:right}
.alignLeft{text-align:left}
.alignCenter{text-align:center}
.right{text-align:right}
.left{text-align:left}
.center{text-align:center}
.wp-smiley{display:inline}
img { max-width: 100%; height: auto !important; width: auto\9; }
a img { border: 0px; }
.notResponsive{ max-width: none!important; }
video { max-width: 100%; height: auto !important; }
.video-container {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container .mejs-video,
.video-container .mejs-layer,
.video-container video{ position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important; }
.onlyMobile{ display: none;}
html,
body {
	overflow-x: hidden;
}
html {
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
body {
	overflow-x: hidden;
	touch-action: pan-y;
}
html *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:"Instrument Sans",'Open Sans',sans-serif;font-size:18px;line-height:28px;font-weight:400;margin:0;padding:0;position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background-color:hsl(from var(--bg) h s 12%);color:var(--bg)}
::-moz-selection{background-color:hsl(from var(--bg) h s 12%);color:var(--bg)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:hsl(from var(--bg) h s 12%);border-radius:2px}
::-webkit-scrollbar-thumb:hover{cursor:ns-resize!important}
.gecko *{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a,input.button{cursor:pointer;text-decoration:none;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
h1,h2,h3,h4,h5,h6{color:inherit;font-family:var(--fontTitle);font-weight:400;font-style:normal;text-transform: uppercase;}
h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong{font-weight:700;font-weight:500}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{display:inline-block}
h1{font-size:72px;line-height:1.1;margin-bottom:10px}
h2{font-size:clamp(30px,5vw,60px);line-height:1.2;margin-bottom:10px}
h3{font-size:40px;line-height:50px;margin-bottom:10px}
h4{font-size:24px;line-height:30px;margin-bottom:10px}
h5{font-size:18px;line-height:24px;margin-bottom:10px}
h6{font-size:16px;line-height:19px;margin-bottom:10px}
strong{font-weight:700}
em{font-style:italic}
small{font-size:80%;line-height:60%}
sup{position:relative;font-size:60%;line-height:12px;top:-5px}
.font{font-size:calc(17px + (36 - 17) * ((100vw - 300px) / (2000 - 300)));line-height:normal}
.instrument-sans-reg{font-family:"Instrument Sans",sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:wdth 100}
.suptitle{font-family:"Instrument Sans",sans-serif;display:block;letter-spacing:.5em;text-transform:uppercase;font-size:12px;margin-bottom:40px}
.works img,.aboutSection img{border-radius:12px}
.limiter{padding-left:var(--paddSide);padding-right:var(--paddSide)}
.btGap{margin-bottom:40px}
.btGap2{margin-bottom:80px}
.headerdc81{position:fixed;top:0;left:0;right:0;z-index:10;font-size:13px;max-width:100vw}
.headerdc81--grid{display:grid;grid-template-columns:1fr auto;align-items:center;padding-top:var(--paddSide);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.isScrolling .headerdc81--grid{background-color:var(--bg);padding-top:10px;padding-bottom:10px}
.headerdc81--box{display:grid;grid-template-columns:40px 1fr;column-gap:15px}
.headerdc81--avatar{background-color:var(--accentColor);display:block;width:40px;height:40px;border-radius:20px;overflow:hidden}
.headerdc81--name{color:var(--textFade);line-height:1.5}
.headerdc81--name:first-line{color:var(--text)}
.headerdc81--status span{background:var(--green);border-radius:20px;display:inline-block;width:10px;height:10px;margin-right:15px}
.herodc81, .herodc81--content{position:relative}
.herodc81:after{content:'';background:radial-gradient(at center left,var(--grey),rgb(157 170 196 / 29%),transparent 70%);width:100vw;height:100vw;position:absolute;bottom:0;left:0;transform:translateY(50%);opacity:.2}
.herodc81--box{min-height:100svh;display:grid;align-items:end;padding-bottom:clamp(80px, 10vw, 120px);padding-top:100px;position:relative;z-index:3}
.herodc81--box h1,.ctaTitle{width:90%;max-width:1280px;font-size:clamp(40px,4vw,80px);text-wrap:balance}
.buttonSocial{ display: flex; align-items: center;     position: absolute; right: 0; bottom: 0; }
.buttonSocial div{ width: 20px; margin-left: 20px; }
.buttonSocial div:nth-child(1) path{ fill: var(--text);}
.buttonSocial div:nth-child(1) a:hover path{ fill: var(--accentColor);}
.buttonSocial div:nth-child(2) path{ stroke: var(--text);}
.buttonSocial div:nth-child(2) a:hover path{ stroke: var(--accentColor);}
.title{display:flex;flex-wrap:wrap;gap:2px}
.char{display:inline-block;will-change:filter,opacity,transform}
.word{display:inline-block;will-change:filter,opacity}
#webgl{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.footerdc81{position:relative}
.footerdc81:after{content:'';background:radial-gradient(at center,var(--grey),rgb(157 170 196 / 29%),transparent 70%);width:150vh;max-width:100vw;aspect-ratio:1 / 1;position:absolute;top:0;right:0;border-radius:50%;transform:translate(50%,-50%);opacity:.2;z-index:-1}
.footerdc81--box{padding-top:50vh;padding-bottom:10vh;position:relative}
.social{position:absolute;top:20%;right:0;width:46px; z-index: 2;}
.social a{background-color:var(--accentColor);color:var(--text);display:block;border-radius:40px;width:44px;height:44px;margin-bottom:20px;line-height:44px;position:relative;text-align:center}
.social a svg{width:28px;height:28px;position:relative;top:7px}
.socialLinkBox{position:relative}
.social .socialLinkBox span{opacity:0;visibility:hidden;position:absolute;color:var(--text);right:60px;top:7px;transform:rotate(-90deg);transform-origin:100% 0;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.social .socialLinkBox.active span{transform:rotate(0deg);opacity:1;visibility:visible}
.copyright{color:var(--textFade);padding:40px 0;margin-bottom:0;text-align:right}
.devcode81svg{position:absolute;bottom:0;left:0;width:100%;z-index:-1;opacity:.02}
@keyframes heyLook {
	0%,15%{transform:rotate(0deg)}
	19%{transform:rotate(-10deg)}
	21%{transform:rotate(5deg)}
	23%{transform:rotate(-5deg)}
	25%{transform:rotate(10deg)}
	30%{transform:translateY(0px)}
}
.hey-look{transform-origin:bottom 50%;animation:heyLook 5s cubic-bezier(0.2,0.9,0.5,1) infinite}
.aboutSection{padding-top:5vw;padding-bottom:5vw;position:relative}
.aboutSection--head-name{font-family:var(--fontTitle);font-size:60px;line-height:1.2}
.aboutSection--head-name span{ display: block;}
.aboutSection--head-subname,.aboutSection--head-subname h2{color:var(--textFade);font-family:var(--fontTitle);font-size:30px;line-height:1.2;display:flex;align-items:baseline;column-gap:16px}
.aboutSection--pics {display: flex; column-gap: 10px;}
.aboutTxt{display:grid;grid-template-columns:repeat(auto-fit,minmax(600px,1fr));position:relative}
.aboutTxt:after{content:'';background:radial-gradient(at center right,var(--grey),rgb(157 170 196 / 29%),transparent 70%);width:150vh;aspect-ratio:1 / 1;position:absolute;top:50%;right:calc(-1 * var(--paddSide));transform:translateY(-50%);opacity:.2}
.aboutTxt h2{font-size:clamp(40px,6vw,100px);line-height:1.1;text-wrap:balance;margin-bottom:14vw}
.aboutTxt--history{max-width:700px;margin:0 0 0 auto}
.skills{columns:2 280px}
.skills ul{columns:2 120px}
.skills ul li{border-bottom:1px solid var(--greyDark);font-size: 13px; padding: 6px 6px 6px 20px; position:relative;}
.skills ul li:after{content:''; border-radius: 8px; width:10px;height:10px;position:absolute;top:15px;left:0px;}
.skills ul.clients li:after{ background-color: #fc8f00; }
.skills ul.software li:after{ background-color: #00ccff; }
.skills ul.tools li:after{ background-color: #a100e6; }
.timeline{min-height:calc(100vh - 150px);display:flex;align-items:center;overflow:hidden;position: relative;}
.timeline-shadow{display:block;height:260px;width:20vw;position:absolute;left:0;background:linear-gradient(90deg,var(--bg),transparent);z-index:20}
.timeline-shadow2{display:block;height:260px;width:20vw;position:absolute;left:80vw;background:linear-gradient(270deg,var(--bg),transparent);z-index:20}
.timeline-list{display:flex;padding:0 50vw;position:relative}
.timeline-item{min-width:280px;padding-right:50px;position:relative;line-height:1.3}
.timeline-item:before{content:'';background-color:var(--grey);width:100%;height:1px;position:absolute;top:45px;opacity:.2}
.timeline-item:last-child:before{width:30px}
.timeline-item h3{font-family:"Instrument Sans";font-size:18px;line-height:1.3;margin-bottom:0}
.timeline-date{display:inline-block;position:relative;margin-bottom:50px;width:44px}
.timeline-date:after{content:'';background-color:var(--grey);width:2px;height:40px;position:absolute;top:100%;left:16px;border:4px solid var(--bg)}
.timeline-item.active .timeline-date:after{background-color:var(--accentColor)}
.timeline-item p{font-size:16px;color:var(--textFade)}
.timeline-title{padding:60px}
.works--article{padding-top:clamp(80px, 10vw, 500px);max-width: 1440px;margin: 0 auto;width: 100%;}
.works--article-header{display:grid;grid-template-columns:1fr 300px;align-items: end;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.works--article h2{ font-size: clamp(30px, 7vw, 120px); line-height: 1; margin-bottom: 0;}
.works--article .description{ max-width: 800px; line-height: 1.5; }
.works--article-img{margin-bottom:10px}
.works--gallery{display:grid;grid-template-columns:repeat(3,1fr);column-gap:10px}
.works--gallery figure{margin-bottom:10px}
.works--article-details{color:var(--textFade);display:flex;justify-content:flex-end;align-items:flex-end;text-align:right;flex-direction:column}
.works--article-details p{margin-bottom:0}
.works--article-details p:first-child{ border-top: 1px solid var(--accentColor); display: block; width: fit-content; padding-top: 10px;}
.works--logos{padding-top:clamp(40px,8vw,200px);text-align:center; position: relative;}
.works--gallery.logos{grid-template-columns:repeat(4,1fr);margin:0 auto;max-width:1080px}
.works--gallery.logos figure{background-color: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    padding: 10px;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;}
.works--logos-title{position:relative}
.button{background-color:var(--accentColor);box-shadow:0 0 0 0 var(--accentColor),0 0 0 0 var(--accentColor),0 0 0 0 hsl(from var(--accentColor) h s 30% / 0.2);color:var(--text);display:inline-block;font-size:14px;font-weight:700;text-transform:uppercase;padding:6px 20px;border-radius:var(--radius);
 	@supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 28px;
    }
}
.button:hover{background-color:transparent;color:var(--accentColor);box-shadow:0 0 0 1px var(--accentColor),0 0 30px 0 var(--accentColor),0 0 0 8px hsl(from var(--accentColor) h s 30% / 0.2)}
.mainContent{max-width:100vw; position: relative; z-index: 2;}

.svg-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; }

.about--me .svg-path {
    top: auto;
    max-width: 1800px;
    margin: 0px auto;
    bottom: 5vw;
}
.svg-path.inlogos {
    position: absolute;
    top: 80%;
    left: calc(-1 * var(--paddSide));
    width: calc(100% + calc(2 * var(--paddSide)));
    height: 100%;
    z-index: -2;
	max-width: 1800px;
}

.svg-path svg {
	width: 100%;
	max-width: 100vw;
	display: block;
    height: auto;
    transform: translateX(-50%);
    position: absolute;
    left: 50svw;
}
.line-path{
	fill:none;
	stroke:var(--accentColor);
	stroke-width:10;
	stroke-dasharray:1000;
	stroke-dashoffset:1000;
}

.vimeo-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.vimeo-wrapper:before { content: ''; background: radial-gradient(ellipse at top right, transparent, var(--bg) 70%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.vimeo-wrapper iframe { width: 100vw; height: 56.25vw; min-height: 100svh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.buttonBox{ display: inline-block; }

.about--me{ position: relative; padding-top:clamp(200px,10vw,500px); }
.about--me-inner{
	text-align: center;
	margin: 0 auto;
	max-width: 1200px;
}
.about--title{ font-size: clamp(40px, 8vw, 120px); line-height: 1; margin-bottom: 30px; position: relative; text-shadow: 1px 1px 8px var(--bg); }
.chapo{font-family:var(--fontTitle); font-size: clamp(30px, 5vw, 60px); color: var(--textFade);}
.about--picture{
    max-width: 700px;
    margin: 0 auto -10% auto;
	position: relative;
}
.about--picture:after{
    background: linear-gradient(0deg, var(--bg) 20%, transparent);
    bottom: 0;
    content: '';
    width: 100%;
    height: 85%;
    display: block;
    position: absolute;
}
.about--picture img{ border-radius: var(--radius);}
.about--me-writting{
    text-align: center;
    padding: clamp(200px, 18vw, 350px) 0;
    font-size: clamp(22px, 3vw, 40px);
    line-height: 1.5;
    max-width: 1000px;
    margin: 0 auto;
	position: relative;
	z-index: 1;
	text-shadow: 1px 1px 8px var(--bg);
}

.about--me-writting span {
	font-family:var(--fontTitle);
	cursor: pointer;
	color: var(--accentColor);
	position: relative;
	z-index: 2;
}

.cursor-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 20vw;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  z-index: -1;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}


@media screen and (max-width: 768px) {

	:root {
		--radius: 12px;
		--radiusL: 30px;
		--paddSide: 20px;
	}
	.aboutSection--head-name { font-size: 23px; letter-spacing: 0.03em; margin-bottom: 20px; }
	.works--article-header,.aboutTxt{grid-template-columns:1fr}
	.suptitle{letter-spacing:.2em}
	.aboutSection--head,
	.copyright{text-align:center}
	.timeline{display:block}
	.timeline-title{padding:20px}
	.timeline-list{display:block;padding:0 20px}
	.timeline-item h3,.timeline-item p{padding-left:50px}
	.timeline-date:after{background-color: var(--accentColor);height:24px}
	.timeline-item:before{width:1px;height:100%;top:26px;left:20px}
	.timeline-date{margin-bottom:10px}
	.timeline-shadow,.timeline-shadow2,.headerdc81--name{display:none}
	.timeline-item:last-child:before { width: 1px; }
	.social{top:30%}
	.works--gallery.logos { grid-template-columns: repeat(2, 1fr); }
	.works--article-details { padding-top:20px; align-items: flex-start; text-align: left;}
	.footerdc81:after{transform:translate(0,-50%);}
	.svg-path.inlogos { top: 100%;}
	.about--me .svg-path { top: 330px;}
	
}


.worksGrid{}
.wG--item{ position: relative; padding-top: 5vw; padding-bottom: 5vw; }
.wG--item img{ border-radius: var(--radius);}
.wG--item .ele{ display: block; position: absolute; }
.wG--item .ele:not(.wG--item-header){ width: 100%; }
.wG--item-header{
	top: 120px;
    padding: 20px;
	width: auto;
	z-index: 5;
}
.wG--item-header .labels{ display: block; font-size:13px; padding: 0 10px; background-color: var(--accentColor); color: var(--bg); width: fit-content;
    margin-bottom: 6px; }
.wG--item-mainImg{ width: 75%; margin-left: 10%; }
.wG--item-description{ border-left: 1px solid var(--greyDark); font-size: 15px; line-height: 1.5; padding: 0 20px; }

@media screen and (min-width: 1400px) {
	.wG--item-img1{top: 10%;
		max-width: 25%;
		right: 0;
	}
	.wG--item-img2{bottom: 0%;
		max-width: 20%;
		right: 0;
	}
	.wG--item-img3{
		bottom: 10%;
		max-width: 20%;
		left: 0;
	}
	.wG--item-img1 figure,
	.wG--item-img2 figure,
	.wG--item-img3 figure{
		aspect-ratio: 1 / 1;
		display: grid;
		align-items: center;
		justify-items: center;
	}
	.wG--item-img1 img{ max-width: 300px; box-shadow: 0px 10px 40px -10px var(--bg); }
	.wG--item-img2 img{ max-width: 220px; box-shadow: 0px 10px 10px -10px var(--bg); }
	.wG--item-img3 img{ max-width: 220px; box-shadow: 10px -10px 40px -10px var(--bg); }
}
.float1 { animation: float 10s ease-in-out infinite; }
.float2 { animation: float 15s ease-in-out infinite; }
.float3 { animation: float 20s ease-in-out infinite; }
.float4 { animation: float 25s ease-in-out infinite; }
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-60px); }
  100% { transform: translateY(0); }
}
@media screen and (max-width: 1400px) {

	.wG--item-description { margin: 20px 20%; }
	.wG--item .ele:not(.wG--item-header){ position: relative;}
	.wG--item-imgs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 10px;
		max-width: 75%;
		margin: 0 auto;
	}

}
@media screen and (max-width: 960px) {
	.wG--item .ele{ position: relative; }
	.wG--item-header { top: 0; }
	.wG--item-mainImg { width: 100%; margin-left: 0%; }
	.wG--item-description { margin: 20px; }
	.wG--item-imgs {
        max-width: 100%;
    }
}

/* =========================================================
   10 COLUMN GRID SYSTEM
========================================================= */

:root {
	--grid-columns: 10;
	--grid-gap: 24px;
	--container-width: 1800px;
	--container-padding: 24px;
}

/* =========================================================
   CONTAINER
========================================================= */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* =========================================================
   GRID
========================================================= */

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: var(--grid-gap);
}

/* =========================================================
   COLUMN SPANS
========================================================= */

.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }

/* =========================================================
   COLUMN STARTS
========================================================= */

.start-1  { grid-column-start: 1; }
.start-2  { grid-column-start: 2; }
.start-3  { grid-column-start: 3; }
.start-4  { grid-column-start: 4; }
.start-5  { grid-column-start: 5; }
.start-6  { grid-column-start: 6; }
.start-7  { grid-column-start: 7; }
.start-8  { grid-column-start: 8; }
.start-9  { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }

/* =========================================================
   ROW STARTS
========================================================= */

.row-1  { grid-row-start: 1; }
.row-2  { grid-row-start: 2; }
.row-3  { grid-row-start: 3; }
.row-4  { grid-row-start: 4; }
.row-5  { grid-row-start: 5; }
.row-6  { grid-row-start: 6; }
.row-7  { grid-row-start: 7; }
.row-8  { grid-row-start: 8; }
.row-9  { grid-row-start: 9; }
.row-10 { grid-row-start: 10; }

/* =========================================================
   ROW SPANS
========================================================= */

.row-span-1  { grid-row-end: span 1; }
.row-span-2  { grid-row-end: span 2; }
.row-span-3  { grid-row-end: span 3; }
.row-span-4  { grid-row-end: span 4; }
.row-span-5  { grid-row-end: span 5; }
.row-span-6  { grid-row-end: span 6; }
.row-span-7  { grid-row-end: span 7; }
.row-span-8  { grid-row-end: span 8; }
.row-span-9  { grid-row-end: span 9; }
.row-span-10 { grid-row-end: span 10; }

/* =========================================================
   ALIGNMENT
========================================================= */

.align-start  { align-self: start; }
.align-center { align-self: center; }
.align-end    { align-self: end; }
.align-stretch{ align-self: stretch; }

.justify-start  { justify-self: start; }
.justify-center { justify-self: center; }
.justify-end    { justify-self: end; }
.justify-stretch{ justify-self: stretch; }

.middleContent{
	display:flex;
	align-items: center;
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

	.grid {
		grid-template-columns: repeat(5, 1fr);
	}

	[class*="col-"] {
		grid-column: span 5 !important;
	}

	[class*="start-"] {
		grid-column-start: auto !important;
	}
}

@media (max-width: 768px) {

	.grid {
		grid-template-columns: 1fr;
	}

	[class*="col-"] {
		grid-column: span 1 !important;
	}
}

	/* ---------- Showcase ---------- */
	.showcase--wrapper{ position: relative; }
	.showcase--wrapper:after,.showcase--wrapper:before{content:'';display:block;height:100%;width:clamp(80px,10vw,200px);position:absolute;top:0;background:linear-gradient(90deg,var(--bg),transparent);z-index:20}
	.showcase--wrapper:after{background:linear-gradient(270deg,var(--bg),transparent);right:calc(-1 * var(--paddSide));}
	.showcase--wrapper:before{background:linear-gradient(90deg,var(--bg),transparent);left:calc(-1 * var(--paddSide));}
	.showcase--wrapper{
		margin:0 calc(-1 * var(--paddSide));
	}
	.showcase {
		display: flex;
		max-height: clamp(260px, 35vw, 600px);
		gap: 20px;
		padding: 16px var(--paddSide);
		overflow-x: auto;
		overflow-y: hidden;
		cursor: grab;
		user-select: none;
		-webkit-user-select: none;
		scrollbar-width: none;
		-ms-overflow-style: none;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--paddSide);
	}
	.showcase::-webkit-scrollbar { display: none; }

	.showcase-media {
		flex: 0 0 auto;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		background: #1a1a17;
		color: var(--ink);
	}
	.showcase.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
	}

	.showcase.is-dragging * {
		pointer-events: none;
	}

	.mediaWrap {
		display: block;
		max-height: clamp(260px, 35vw, 600px);
		line-height: 0;
	}
	.mediaWrap > img,
	.mediaWrap > video {
		display: block;
		max-height: inherit;
		width: auto;
		height: auto;
		max-width: none;
		pointer-events: none;
		-webkit-user-drag: none;
		user-drag: none;
	}
	.splide__track{ padding-left: var(--paddSide) !important; padding-right: var(--paddSide) !important; }
@media (max-width: 800px) {
	.mediaWrap {
		max-height: 50vw;
	}
}

.workTitle h2{
    display: inline-block;
    position: relative;
    padding: 10px 10px 10px 0;
}
.workTitle h2:before{
    content: '';
    background: var(--bg);
    width: 100%;
    height: 100%;
    transform: scale(1, 1);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 1;
    transition: all 0.6s 0.4s cubic-bezier(.52,.01,.53,.56);
    transform-origin: right;
}
.workTitle h2:after{
    content: '';
    background: var(--accentColor);
    width: 0%;
    height: 100%;
    transform: scale(1, 1);
    position: absolute;
    top: 0;
    display: block;
    z-index: 2;
    transition: all 0.8s cubic-bezier(.52,.01,.53,.56);
    transform-origin: right;
}
.workTitle.active h2:before{
	transform: scale(0, 1);
}
.workTitle.active h2:after{
	animation:  workTitleMask 0.8s forwards;
}
@keyframes workTitleMask {
  0% { left: 0%; right: auto; width: 0%; }
  50% { left: 0%; right: 0%; width: 100%; }
  50.1% { left: auto; right: 0%; width: 100%; }
  100% { left: auto; right: 0%; width: 0%; }
}