/* Common */
:root{    
    --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
    --ease-default: cubic-bezier(0, 0, 0.58, 1);
    --ease-out-long: cubic-bezier(0,.5,0,1);
    --ease-out-medium: cubic-bezier(0,.57,.55,1);
    --ease-out-short: cubic-bezier(.15,.7,.78,1);
    --ease-elastic-1: cubic-bezier(0.68,-0.55,0.27,1.55);
    --ease-elastic-2: cubic-bezier(0.68,-3,0.27,5);
}

/* Header - Navigation */
@media screen and (max-width:1024px) {
    .header-theme.mobile-on .header-navi { padding-bottom: 1rem; height: calc(100vh - 96px); overflow-y: auto; }
}

/* Owl Carousel Animation */

html:not(.mobile) .owl-animate-chars .char{
    opacity: 0;
    transform: translateY(.5em) rotate(7deg);
    transform-origin: 0 50%;
    transition: transform .62s var(--ease-out-short), opacity .62s var(--ease-default);
    transition-delay: calc( 0.027s * var(--char-index) );
}
html:not(.mobile) .owl-animate-chars .char{
    will-change: opacity, transform;
}
@media print{
    .owl-animate-chars .char{
        opacity: 1 !important;
        transform: none !important;
    }
}
.owl-item.active .owl-animate-chars .char,
.mobile .owl-animate-chars .char{
    opacity: 1;
    transform: none;
}

html:not(.mobile) .owl-animate-fadeInUp{
    opacity: 0;
    transform: translateY(37px) translateZ(0);
    transition: all 1s;
}
.owl-item.active .owl-animate-fadeInUp{
    opacity: 1;
    transform: translateY(0) scale(1);
}

html:not(.mobile) .owl-animate-fadeInDown{
    opacity: 0;
    transform: translateY(-37px) translateZ(0);
    transition: all 1s;
}
.owl-item.active .owl-animate-fadeInDown{
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media print{
    .owl-animate-fadeInUp,
    .owl-animate-fadeInDown{
        -webkit-transition: none !important;
        transition: none !important;
    }
}

.owl-delay-200{
    transition-delay: .20s !important;
}
.owl-delay-250{    
    transition-delay: .25s !important;
}
.owl-delay-300{    
    transition-delay: .3s !important;
}
.owl-delay-350{    
    transition-delay: .35s !important;
}
.owl-delay-400{    
    transition-delay: .4s !important;
}
.owl-delay-450{    
    transition-delay: .45s !important;
}
.owl-delay-500{    
    transition-delay: .5s !important;
}
.owl-delay-550{    
    transition-delay: .55s !important;
}
.owl-delay-600{    
    transition-delay: .6s !important;
}
.owl-delay-650{    
    transition-delay: .65s !important;
}
.owl-delay-700{    
    transition-delay: .7s !important;
}
.owl-delay-750{    
    transition-delay: .75s !important;
}
.owl-delay-800{    
    transition-delay: .8s !important;
}
.owl-delay-850{    
    transition-delay: .85s !important;
}
.owl-delay-900{    
    transition-delay: .9s !important;
}
.owl-delay-950{    
    transition-delay: .95s !important;
}
.owl-delay-1000{    
    transition-delay: 1s !important;
}

/* Button */
.btn-animate-y{
    position: relative;
    display: block;
    overflow: hidden;
}
.btn-animate-y-1{
    display: block;
    transition: all .37s var(--ease-out-short), opacity .37s linear;
}
.btn-animate-y-2{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translate(0,100%);
    transition: all .37s var(--ease-out-short), opacity .37s linear;
}
.btn-mod:hover .btn-animate-y-1,
a:not(.no-hover):hover .btn-animate-y-1{
    opacity: 0;
    transform: translate(0,-100%);
}
.btn-mod:hover .btn-animate-y-2,
a:not(.no-hover):hover .btn-animate-y-2{
    opacity: 1;
    transform: translate(0,0);
}

.btn-mod.btn-border-grad .btn-animate-y-1,
.btn-mod.btn-border-grad .btn-animate-y-2{
    background: var(--gradient-primary-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==============================
   Custom appear animation
   ============================== */
  
/*
 * Splitting JS chars animation
 */

.appear-animate .charsAnimIn .char{
    opacity: 0;
    transform: translateY(.5em) rotate(7deg);
    transform-origin: 0 50%;
    transition: transform .62s var(--ease-out-short), opacity .62s var(--ease-default);
    transition-delay: calc( 0.027s * var(--char-index) );
}
html:not(.mobile) .appear-animate .charsAnimIn .char{
    will-change: opacity, transform;
}
@media print{
    .appear-animate .charsAnimIn .char{
        opacity: 1 !important;
        transform: none !important;
    }
}
.charsAnimIn.animated .char,
.mobile .charsAnimIn .char{
    opacity: 1;
    transform: none;
}

/*
 * Splitting JS chars animation 1
 */

.appear-animate .charsAnimIn-1 .char{
    opacity: 0;
    transform: translateX(.01em) translateY(.27em) translateZ(0) rotate(0.0003deg);
    transition: transform 1s var(--ease-out-short), opacity 1s var(--ease-default);
    transition-delay: calc( 0.037s * var(--char-index) );
}
html:not(.mobile) .appear-animate .charsAnimIn-1 .char{
    will-change: opacity, transform;
}
@media print{
    .appear-animate .charsAnimIn-1 .char{
        opacity: 1 !important;
        transform: none !important;
    }
}
.charsAnimIn-1.animated .char,
.mobile .charsAnimIn-1 .char{
    opacity: 1;
    transform: none;
}

/*
 * Splitting JS chars animation 2
 */

.appear-animate .charsAnimIn-2 .char{
    opacity: 0;
    transform: translateY(0.2em) translateZ(0) rotate(5deg);
    transition: transform 0.5s var(--ease-out-short), opacity 1s var(--ease-default);
    transition-delay: calc( 0.0427s * var(--char-index) );
}
html:not(.mobile) .appear-animate .charsAnimIn-2 .char{
    will-change: opacity, transform;
}
@media print{
    .appear-animate .charsAnimIn-2 .char{
        opacity: 1 !important;
        transform: none !important;
    }
}
.charsAnimIn-2.animated .char,
.mobile .charsAnimIn-2 .char{
    opacity: 1;
    transform: none;
}

/*
 * Splitting JS chars animation long
 */

.appear-animate .charsAnimInLong .char{
    opacity: 0;
    transform: translateX(.5em);
    transform-origin: 0 50%;
    transition: transform .85s var(--ease-out-short), opacity .62s var(--ease-default);
    transition-delay: calc( 0.03s * var(--char-index) );
}
html:not(.mobile) .appear-animate .charsAnimInLong .char{
    will-change: opacity, transform;
}
@media print{
    .appear-animate .charsAnimInLong .char{
        opacity: 1 !important;
        transform: none !important;
    }
}
.charsAnimInLong.animated .char,
.mobile .charsAnimInLong .char{
    opacity: 1;
    transform: none;
}

/*
 * Splitting JS chars animation long 1
 */

.appear-animate .charsAnimInLong-1 .char{
    opacity: 0;
    transform: translateX(.275em);
    transform-origin: 0 50%;
    transition: transform 1s var(--ease-out-short), opacity .62s var(--ease-default);
    transition-delay: calc( 0.039s * var(--char-index) );
}
html:not(.mobile) .appear-animate .charsAnimInLong-1 .char{
    will-change: opacity, transform;
}
@media print{
    .appear-animate .charsAnimInLong-1 .char{
        opacity: 1 !important;
        transform: none !important;
    }
}
.charsAnimInLong-1.animated .char,
.mobile .charsAnimInLong-1 .char{
    opacity: 1;
    transform: none;
}

/*
 * Splitting JS words animation
 */

.appear-animate .wordsAnimIn .word{
    opacity: 0;
    transform: translateY(1em) scale(.75) skew(-5deg) rotate(7deg);
    transform-origin: 0 50%;
    transition: transform 0.5s var(--ease-out-short), opacity 0.5s var(--ease-out-short);
    transition-delay: calc( 0.05s * var(--word-index) );
}
html:not(.mobile) .appear-animate .wordsAnimIn .word{
    will-change: opacity, transform;
}
@media print{
    .appear-animate .wordsAnimIn .word{
        opacity: 1 !important;
        transform: none !important;
    }
}
.wordsAnimIn.animated .word,
.mobile .wordsAnimIn .word{
    opacity: 1;
    transform: none;
}

/*
 * Splitting JS lines animation
 */

.appear-animate .linesAnimIn .word{
    opacity: 0;
    backface-visibility: hidden;   
    transform: translateY(39px) translateZ(0) scale(1.0) rotate(0.02deg);
    transform-origin: 0 50%;
    transition: transform 1s cubic-bezier(0, 0.55, 0.45, 1), opacity 1s cubic-bezier(0, 0.55, 0.45, 1);
    transition-delay: calc( 0.05s * var(--line-index) );
}
html:not(.mobile) .appear-animate .linesAnimIn .word{
    will-change: opacity, transform;
}
@media print{
    .appear-animate .linesAnimIn .word{
        opacity: 1 !important;
        transform: none !important;
    }
}
.linesAnimIn.animated .word,
.mobile .linesAnimIn .word{
    opacity: 1;   
    transform: none;
}

/*
 * Splitting JS lines animation long
 */

.appear-animate .linesAnimInLong .word{
    opacity: 0;
    backface-visibility: hidden;   
    transform: translateY(39px) translateZ(0) scale(1.0) rotate(0.02deg);
    transform-origin: 0 50%;
    transition: transform 1s cubic-bezier(0, 0.55, 0.45, 1), opacity 1s cubic-bezier(0, 0.55, 0.45, 1);
    transition-delay: calc( 0.1s * var(--line-index) );
}
html:not(.mobile) .appear-animate .linesAnimInLong .word{
    will-change: opacity, transform;
}
@media print{
    .appear-animate .linesAnimInLong .word{
        opacity: 1 !important;
        transform: none !important;
    }
}
.linesAnimInLong.animated .word,
.mobile .linesAnimInLong .word{
    opacity: 1;   
    transform: none;
}

/*
 * Appearing animation styles
 */

:root {
	--animate-duration: 1s;
	--animate-delay: 1s;
	--animate-repeat: 1
}
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-duration: var(--animate-duration);
	animation-duration: var(--animate-duration);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.wow,
.wow-menubar,
.wow-p{
    opacity: 0.001;  
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;    
    -webkit-transform: translateZ(0);
    transform: translateZ(0);  
}
/*
html:not(.mobile) .wow, 
html:not(.mobile) .wow-menubar, 
html:not(.mobile) .wow-p{
   will-change: opacity, transform;
}
*/
.appear-animate .wow.scaleOutIn{
    opacity: 1;
    transform: scale(1.2);
}
.appear-animate .wow.animated,
.appear-animate .wow.scaleOutIn.animated,
.appear-animate .wow-p.amimated,
.appear-animate .wow-menubar.animated,
.mobile .appear-animate .wow,
.mobile .appear-animate .wow-menubar,
.mobile .appear-animate .wow-p{
    opacity: 1;
    transform: scale(1.0);
}
@media print{
    .wow,
    .wow.scaleOutIn,
    .wow-menubar,
    .wow-p{
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}
@keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}
.fadeIn {
	animation-name: fadeIn
}

@keyframes fadeInDown{
    0%{
        opacity: 0;
        transform: translate3d(0,-37px,0)
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
.fadeInDown{
    animation-name: fadeInDown
}
@keyframes fadeInUp{
    0%{
        opacity: 0;
        transform: translate3d(0,37px,0);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
.fadeInUp{
    animation-name: fadeInUp;
}
@keyframes fadeInLeft{
    0%{
        opacity: 0;
        transform: translate3d(37px,0,0);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
.fadeInLeft{
    animation-name: fadeInLeft;
}
@keyframes fadeInRight{
    0%{
        opacity: 0;
        transform: translate3d(-37px,0,0);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
.fadeInRight{
    animation-name: fadeInRight;
}
@keyframes fadeInDownShort{
    0%{
        opacity: 0;
        transform: translate3d(0,-12px,0)
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
.fadeInDownShort{
    animation-name: fadeInDownShort
}
@keyframes fadeInUpShort{
    0%{
        opacity: 0;
        transform: translate3d(0,12px,0);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
.fadeInUpShort{
    animation-name: fadeInUpShort;
}
@keyframes fadeInLeftShort{
    0%{
        opacity: 0;
        transform: translate3d(12px,0,0);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
.fadeInLeftShort{
    animation-name: fadeInLeftShort;
}
@keyframes fadeInRightShort{
    0%{
        opacity: 0;
        transform: translate3d(-12px,0,0);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}
.fadeInRightShort{
    animation-name: fadeInRightShort;
}
@keyframes scalexIn{
    0%{
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left center;        
    }
    to{
        opacity: 1;
        transform: scaleX(1);
        transform-origin: left center;
    }
}
.scalexIn{
    animation-name: scalexIn;
}
@keyframes fadeScaleIn{
    0%{
        opacity: 0;
        transform: scale(.95) translateZ(0.1px);
    }
    to{
        opacity: 1;
        transform: scale(1.00);
    }
}
.fadeScaleIn{
    animation-name: fadeScaleIn;
}
@keyframes scaleOutIn{
    0%{
        transform: scale(1.2) translateZ(0.1px);      
    }
    to{
        transform: scale(1.0);
    }
}
.scaleOutIn{
    animation-name: scaleOutIn;
    animation-timing-function: var(--ease-out-short);
}
@keyframes fadeScaleOutIn{
    0%{
        opacity: 0;
        transform: translateY(10px) translateZ(0.1px) scale(1.1);      
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}
.fadeScaleOutIn{
    animation-name: fadeScaleOutIn;
}
@keyframes clipRightIn{
	0% {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0);
	}
}
.clipRightIn{
	animation-name: clipRightIn;
    animation-timing-function: var(--ease-out-medium);
}
@keyframes fadeRotateIn{
    0%{
        opacity: 0;
        transform: rotateX(60deg) rotateY(10deg) rotateZ(-10deg);
        transform-origin: top;
        animation-timing-function: var(--ease-out-short);        
    }
    to{
        opacity: 1;
        transform: none;
    }
}
.fadeRotateIn{
    animation-name: fadeRotateIn;  
}

/* ==============================
   Links
   ============================== */

.link-hover-anim{    
    position: relative;
    display: inline-block;
    padding: 6px 0;
    overflow: hidden;    
    font-size: 17px;    
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}
.link-hover-anim:hover{
    text-decoration: none !important;
}
.main-nav .link-hover-anim{
    top: 1px;
}
.link-strong{
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 7px 0;
    transition: transform 0.5s var(--ease-elastic-1), opacity 0.5s var(--ease-elastic-1), color 0.2s var(--ease-default);
}
.underline .link-strong{
    border-bottom: 2px solid currentColor;
}
.underline .link-strong i{
    position: relative;
    top: 0.075em;
}
.link-hover-anim:not(.underline) .link-strong i:not([class^="icon-"]){
    position: relative;
    top: -0.05em;
    vertical-align: middle;
}
.link-strong svg{
    position: relative;
    top: -0.1em;
    margin-right: 0.2em;
}
.link-strong-hovered{
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    opacity: 0;
    transform: translateY(150%) translateZ(0.001px) skewY(10deg);
}
.link-hover-anim:hover{
    color: inherit;
}
.link-strong-unhovered{
    display: block;
}
.link-hover-anim:hover .link-strong-unhovered{ 
    opacity: 0;
    transform: translateY(-150%) translateZ(0.001px) skewY(-10deg);
}

.link-hover-anim:hover .link-strong-hovered{
    opacity: 1;
    transform: translateY(0) translateZ(0.001px) skewY(0);
}
.light-content .link-strong,
.light-content .link-hover-anim{
    color: #fff;
}

.link-hover-anim.link-gradient .link-strong{
    background: var(--gradient-primary-1-a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.link-hover-anim.link-gradient .link-strong i{
    -webkit-text-fill-color: var(--color-primary-1);
}

.link-circle{
    padding-right: 22px;
}
.link-circle:before{
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    right: 7px;
    transform: translate3d(0, -50%, 0.001px);
    display: block;
    width: 51px;
    height: 51px;    
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: all .5s var(--ease-elastic-2);
}
.link-circle:hover:before{
    transform: translate3d(0, -50%, 0.001px) scale(1.1);
}
.link-circle .link-strong{
    padding: 20px 0;
}

.link-circle-1{
    margin-left: -7px;
    padding-left: 27px;
}
.link-circle-1:before{
    content: "";
    position: absolute;
    top: calc(50%);
    left: 7px;
    transform: translate3d(0, -50%, 0.001px);
    display: block;
    width: 60px;
    height: 60px;    
    border: 2px solid var(--color-dark-1);
    border-radius: 50%;
    opacity: .15;
    transition: all .5s var(--ease-elastic-2);
}
.link-circle-1 .link-strong-hovered{
    left: 27px;
}
.light-content .link-circle-1:before{
    border-color: #fff;
    opacity: .25;
}
.link-circle-1:hover:before{
    transform: translate3d(0, -50%, 0.001px) scale(0.88);
}
.link-circle-1 .link-strong{
    padding: 24px 0;
}

/*
 * Works grid 
 */

.works-grid{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-item{
    width: 25%;;
    margin: 0;  
}
.work-grid-2 .work-item{
    width: 49.99%;
}
.work-grid-3 .work-item{
    width: 33.333%;
}

.works-grid.work-grid-gut{
    margin: -30px 0 0 -30px;
}
.works-grid.work-grid-gut .work-item{
    padding: 30px 0 0 30px;
}
.works-grid.work-grid-gut-sm{
    margin: 0 10px 10px 0;
}
.works-grid.work-grid-gut-sm .work-item{
    padding: 10px 0 0 10px;
}
.works-grid.work-grid-gut-lg{
    margin: -80px 0 0 -70px;
}
.works-grid.work-grid-gut-lg .work-item{
    padding: 80px 0 0 70px;
}
.works-grid.work-grid-gut-xl{
    margin: -80px 0 0 -90px;
}
.works-grid.work-grid-gut-xl .work-item{
    padding: 80px 0 0 90px;
}

.work-item a{
    display: block;    
    padding: 0;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
}
.work-item a,
.work-item a:hover{
    color: var(--color-dark-1);
    border: none;
}
.light-content .work-item a,
.light-content .work-item a:hover{
    color: #fff;
}
.work-img{
    position: relative;
    overflow: hidden;
    transform: rotate(0.001deg) translateZ(0);
}
.work-img-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-gray-light-2);
}
.light-content .work-img-bg{
    background-color: var(--color-dark-3);
}
.work-img img{
    display: block;
    position: relative;
    width: 100%;    
    overflow: hidden;
    transform: rotate(0.001deg) translateZ(0);
}
.work-intro{
    width: 100%;
    padding-top: 18px;       
    text-align: center;
    transform: translateZ(0);
}
.work-title{
    margin: 0 0 3px 0;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.007em;
    line-height: 1.4;
    text-transform: none;
    transform: translateZ(0);
}
.work-descr{   
    display: block; 
    color: var(--color-gray-1);
    font-size: 15px;
    line-height: 1.4;
    text-transform: none;
    transform: translateZ(0);
}
.light-content .work-descr{    
    color: var(--color-dark-mode-gray-1);
}

/* Work item hover state */
.work-item .work-img,
.work-item .work-img > img{    
    transition: all 2s var(--ease-out-medium);
}
.work-item .work-img{
   clip-path: inset(-1px);
   will-change: clip-path;
}
.work-item a:hover .work-img{
   clip-path: inset(10px);
}
.work-item a:hover .work-img > img{
    transform: scale(1.05) rotate(0.001deg) translateZ(0);
}
.work-item .work-intro{
    transition: all 2s var(--ease-out-medium);
}
.work-item .work-intro.text-start{
    padding-right: 10px;
}
.work-item a:hover .work-intro{
    transform: translate(10px, -10px);
}

/* Work item hover state alt */
.works-grid.work-grid-hover-alt .work-item .work-img{ 
    overflow: hidden;
    transition: all .2s var(--ease-default);  
}
.works-grid.work-grid-hover-alt .work-item .work-img img{ 
    transition: all .27s var(--ease-default);
}
.works-grid.work-grid-hover-alt .work-item a:hover .work-img{
   clip-path: none;
   transform: translateY(-7px) rotate(0.001deg) translateZ(0);
}
.works-grid.work-grid-hover-alt .work-item a:hover .work-img img{
   transform: scale(1) rotate(0.001deg) translateZ(0);
}
.works-grid.work-grid-hover-alt .work-item a:hover .work-intro{
    transform: none;
    opacity: 1;
}

/* Work item round */
.works-grid.work-grid-round .work-item .work-img{ 
    overflow: hidden;
    border-radius: var(--border-radius-default);
    isolation: isolate;
    transform: translateZ(0);
}
.works-grid.work-grid-round .work-item .work-img-bg{ 
    border-radius: var(--border-radius-default);
}

/* Work item with hidden title */
.works-grid.hide-titles .work-item a{
    overflow: hidden;    
}
.works-grid.hide-titles .work-item .work-img{    
    transition: all .37s var(--ease-out-short);
}
.works-grid.hide-titles .work-item a:hover .work-img > img{
    transform: none;
}
.works-grid.hide-titles .work-intro{
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 30px;    
    opacity: 0;
    transition: all .37s var(--ease-default);
}
.works-grid.hide-titles .work-intro:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-dark-1);
    opacity: 0.85;
}
.works-grid.hide-titles .work-intro > *{
    position: relative;
    transform: translateY(25px);
    transition: transform .37s var(--ease-out-short), opacity .37s var(--ease-default);
}
.works-grid.hide-titles .work-title{
    margin-bottom: 5px;
    color: #fff;
    font-size: 21px;
    line-height: 1.2;
}
.works-grid.hide-titles:not(.work-grid-2, .work-grid-3) .work-title{
    font-size: 19px;
}
.works-grid.hide-titles .work-descr{
    color: #fff;
    opacity: .7;
}
.works-grid.hide-titles .work-item a:hover .work-img,
.works-grid.hide-titles .work-item a.focus-visible .work-img{
   clip-path: none;
   transform: scale(1.05) translateZ(0.1px);
}
.works-grid.hide-titles .work-item a:hover .work-intro > *,
.works-grid.hide-titles .work-item a:focus-visible .work-intro > *{
    transform: none;
}
.works-grid.hide-titles .work-item a:hover .work-intro,
.works-grid.hide-titles .work-item a:focus-visible .work-intro{
    transform: none;
    opacity: 1;
}
/* Work item with hidden title hover white */
.works-grid.hide-titles.hover-white .work-intro:before{
    background: #fff;
}
.works-grid.hide-titles.hover-white .work-title{
    color: var(--color-dark-1);
}
.works-grid.hide-titles.hover-white .work-descr{
    color: var(--color-gray-1);
    opacity: 1;
}

/* Work item fancy */
.works-grid.work-grid-fancy .work-item a{
    overflow: hidden;   
    border-radius: var(--border-radius-default);
    box-shadow: var(--box-shadow-block); 
    transition: all .27s var(--ease-default);
    isolation: isolate;
    transform: translateZ(0);
}
.works-grid.work-grid-fancy .work-item a:hover{
    box-shadow: var(--box-shadow-block-strong);
    transform: translateY(-7px);
}
.works-grid.work-grid-fancy .work-item a:hover .work-img > img{
    transform: none;
}
.works-grid.work-grid-fancy .work-intro{
    padding: 30px;
}
.works-grid.work-grid-fancy .work-title{
    font-size: 20px;
}
.works-grid.work-grid-fancy .work-item a:hover .work-img{
   clip-path: none;
}
.works-grid.work-grid-fancy .work-item a:hover .work-intro{
    transform: none;
    opacity: 1;
}
.light-content .works-grid.work-grid-fancy .work-item a{
    background: var(--color-dark-3);
    border: 1px solid var(--color-dark-mode-gray-2);
}

@media screen and (max-width:1040px) {
    .header-navi { 
        position: absolute;
        left: 0px;
        right: 0px;
        top: 100%;
        display: flex;
        border-top-width: 1px;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .header-theme.mobile-on .header-navi {
        padding-bottom: 1rem;
        height: calc(100vh - 96px);
        overflow-y: auto;
    }
}