:root {
    
    --minSize:    320;
    --maxSize:    1440;

    /* Media Queries*/

    
    --media-sh:    screen and (min-width: 1350px) and (min-aspect-ratio: 1440/900) and (orientation: landscape);
    --media-ld:    screen and (min-width: 1920px) and (orientation: landscape);
    --media-d:     screen and (max-width: 2560px) and (orientation: landscape);
    --media-l:     screen and (max-width: 1280px) and (orientation: landscape);
    --media-t:     screen and (min-width: 897px) and (max-width: 1180px) and (orientation: landscape), screen and (min-width: 429px) and (max-width: 1024px) and (orientation: portrait);
    --media-tl:    screen and (min-width: 897px) and  (max-width: 1180px) and (orientation: landscape);
    --media-mt:    screen and (max-width: 1180px) and (orientation: landscape), screen and (max-width: 1024px) and (orientation: portrait);
    --media-m-t:    screen and (max-width: 1180px) and (orientation: landscape), screen and (max-width: 1024px) and (orientation: portrait);
    --media-tp:    screen and (min-width: 429px) and (max-width: 1024px) and (orientation: portrait);
    --media-mtp:   screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 428px) and (orientation: portrait);
    --media-m-tp:   screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 428px) and (orientation: portrait);
    --media-m:     screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 428px) and (orientation: portrait);
    --media-ml:    screen and (max-width: 896px) and (orientation: landscape);
    --media-mp:    screen and (max-width: 428px) and (orientation: portrait);
    --media-wide:  screen and (min-aspect-ratio: 1728/968);

    /* FontFamily */
    --alias-main:   'Neutraface2Text', sans-serif;
    --alias-alt:   'KenjoI', sans-serif;

    /* Colors */
    --alias-theme: #000;
    --alias-dark-theme: #000;
    
    --alias-dark: #000;
    --alias-light: #fff;
    --alias-lightGrad: linear-gradient(0deg, white, transparent);
    
    --alias-gradPurple: linear-gradient(129deg,#dc79ff,#256bfa);

    --alias-white10: rgba(255,255,255,0.1);
    --alias-white20: rgba(255,255,255,0.2);
    --alias-white30: rgba(255,255,255,0.3);
    --alias-white40: rgba(255,255,255,0.4);
    --alias-white50: rgba(255,255,255,0.5);
    --alias-white60: rgba(255,255,255,0.6);
    --alias-black10: rgba(0,0,0,0.1);
    --alias-black20: rgba(0,0,0,0.2);
    --alias-black30: rgba(0,0,0,0.3);
    --alias-black40: rgba(0,0,0,0.4);
    --alias-black50: rgba(0,0,0,0.5);
    --alias-black60: rgba(0,0,0,0.6);

    /* Easings */
    --alias-easeOut: cubic-bezier(0.430, 0.195, 0.020, 1.000);
    --alias-easeIn: cubic-bezier(0.98, 0.0, 0.57, 0);
    --alias-easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    --alias-easeOut2: cubic-bezier(0.9, 0.1, 0.15, 1.05);
    --alias-easeOut3: cubic-bezier(0.630, 0.195, 0.010, 1.000);
    --alias-easeOutSlow: cubic-bezier(.43,.195,.02,1);
    --alias-easeMap: cubic-bezier(0.735, 0.200, 0.200, 0.900);
    --alias-easeExpoOut: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    --alias-easeCubicOut: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    --alias-easeExpoIn: cubic-bezier(0.950, 0.050, 0.795, 0.035);
    --alias-easeCubicIn: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    

    
    /* Units*/
    --unit-md:  calc( 1rem * pow(1.618, var(--currentValue) ) );
    --unit-vr:  calc(15 / 1440 * var(--vw));
    --unit-fx:  calc( var(--vw) / 1440 );
    --unit-fy:  calc( var(--vh) / 900 );
    
    --vhfix: 100vh;
    --vhfixonce: 100vh;
    --vw: 100vw;
    --vh: 100vh;
    --unit-vw:  calc( var( --vw ) / 100 );
    --unit-vh:  calc( var( --vh ) / 100 );
    --unit-vhfix:  calc( var( --vhfix ) / 100 );

    --unit-vhfixonce:  calc( var( --vhfixonce ) / 100 );
}


/* @media screen and (max-width: 1280px) and (orientation: landscape) {
    :root {
        --unit-fx:  calc( var(--vw) / 1280 );
        --unit-fy:  calc( var(--vh) / 800 );
    }
} */
@media screen and (max-width: 1180px) and (orientation: landscape), screen and (max-width: 1024px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 1024 );
        --unit-fy:  calc( var(--vh) / 768 );
    }
}
@media screen and (max-width:1024px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 768 );
        --unit-fy:  calc( var(--vh) / 1024 );
    }
}
@media screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 428px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 667 );
        --unit-fy:  calc( var(--vh) / 375 );
    }
}
@media screen and (max-width: 428px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 375 );
        --unit-fy:  calc( var(--vh) / 667 );
    }
}
  

/* -------------------------------------------- */
/* FONTS */

@font-face {
    font-family: "KenjoI";  
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/KenjoI.woff2') format('woff2');
}

@font-face {
    font-family: "Neutraface2Text";
    font-weight: 400;
    src: url('assets/fonts/Neutraface2Text-Book.woff2') format('woff2');
}
@font-face {
    font-family: "Neutraface2Text";
    font-weight: 100;
    src: url('assets/fonts/Neutraface2Text-Light.woff2') format('woff2');
}
@font-face {
    font-family: "Neutraface2Text";
    font-weight: 500;
    src: url('assets/fonts/Neutraface2Text-Demi.woff2') format('woff2');
}


/* -------------------------------------------- */
/* Reset */

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
}

html {
    /* height: 100%; */
    /* overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch; */
    /* height: 100vh; */
    display: block;
}

body {
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    font-family: var(--alias-main);
    -moz-font-feature-settings: 'c2sc';
    -webkit-font-feature-settings: 'c2sc';
    -o-font-feature-settings: 'c2sc';
    font-feature-settings: 'c2sc';

    overflow: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    display: block;
}

input, button, textarea, select {
    font: inherit;
}

button, input, a {
    outline: none;
    cursor: pointer;
    font:inherit
}

h1,h2,h3,h4,h5,h6 {
    font: inherit;
    color: inherit;
    margin: 0;
}

fieldset, button, input, select, textarea, hr {
    -webkit-appearance: none;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    width: 100%;
}

a { 
    text-decoration: none;
    color: inherit; 
}


@keyframes scaleXIn {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes slideFromBottom {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes slideToTop {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-100%);
    }
}


@keyframes slideFromLeft {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
@keyframes slideToright {
    0% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}



@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes fadeOut {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}




@keyframes scrollLine {
    0%   { transform: translateY(-100%) translateZ(0); transform-origin: 0% 0%; }
    40%  { transform: translateY(0%) translateZ(0); transform-origin: 0% 0%; }
    60%  { transform: translateY(0%) translateZ(0); transform-origin: 0% 100%; }
    100% { transform: translateY(100%) translateZ(0); transform-origin: 0% 100%; }
}



@keyframes spinLoader {
    0%   { transform: translate(-50%, -50%) rotate(0deg) translateZ(0) }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateZ(0) }
}




@keyframes closeBtnHover {
    0%   { transform: scale(1) translateZ(0); color: #fff; }
    50%  { transform: scale(0.6) translateZ(0); color: #fff; }
    100% { transform: scale(1) translateZ(0); color: #666; }
}





@keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.preloader {
    position: absolute;
    transform: translate(-50%, -50%) translateZ(0);
    top: 50%;
    left: 50%;
    z-index: 100000;
    pointer-events: none;
    transition: opacity 1.3s cubic-bezier(0.43, 0.195, 0.02, 1);
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 100px;
    color: #fff;
}
.preloader div {
    box-sizing: border-box;
    border-radius: 100px;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 3px;
    border: 3px solid currentColor;
    border-radius: 50%;
    animation: lds-ring 1.3s cubic-bezier(0.43, 0.195, 0.02, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}
.preloader div:nth-child(1) {
    animation-delay: -0.45s;
}



.c2sc { 
    -moz-font-feature-settings: 'c2sc';
    -webkit-font-feature-settings: 'c2sc';
    -o-font-feature-settings: 'c2sc';
    font-feature-settings: 'c2sc';
}


/************************/
/* 
.img-reveal{
    -webkit-clip-path: inset(50% 0% 0% 0%);
    clip-path: inset(50% 0% 0% 0%);
    transition: clip-path 2.8s var(--alias-easeCubicOut);
} 
.img-reveal-reverse{
    -webkit-clip-path: inset(0% 0% 100% 0%);
    clip-path: inset(0% 0% 100% 0%);
    transition: clip-path 2.8s var(--alias-easeCubicOut);
}
.img-reveal-active {
    -webkit-clip-path: inset(100% 0% 0% 0%);
    clip-path: inset(100% 0% 0% 0%);
    transition: clip-path 2.8s var(--alias-easeCubicOut);
}
.enter-view .img-reveal,
.enter-view .img-reveal-reverse,
.is-active .enter-view .img-reveal-active {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%);
}
.is-active .is-leaving .img-reveal-leave {
    -webkit-clip-path: inset(0% 0% 100% 0%);
    clip-path: inset(0% 0% 100% 0%);
    transition: clip-path 1s var(--alias-easeCubicIn);
} 

*/
.img-reveal{
    will-change: transform;
    transform: translateY(50%) translateZ(0);
    transition: transform 2.8s var(--alias-easeCubicOut);
}
.img-reveal__inner {
    will-change: transform;
    transform: translateY(-50%) translateZ(0);
    transition: transform 2.8s var(--alias-easeCubicOut);
}
.enter-view .img-reveal,
.enter-view.img-reveal,
.enter-view .img-reveal__inner {
    transform: translateY(0%) translateZ(0);
}



.img-reveal-active {
    will-change: transform;
    transform: translateY(100%) translateZ(0);
}
.img-reveal__inner-active {
    will-change: transform;
    transform: translateY(-100%) translateZ(0);
}
.is-active .enter-view .img-reveal-active,
.is-active .enter-view .img-reveal__inner-active {
    transition: transform 2.8s var(--alias-easeCubicOut);
    transform: translateY(0%) translateZ(0);
}



.is-active .is-leaving .img-reveal-leave {
    transform: translateY(-105%) translateZ(0);
    transition: transform 1s var(--alias-easeCubicIn);
} 
.is-active .is-leaving .img-reveal-leave .img-reveal__inner {
    transform: translateY(105%) translateZ(0);
    transition: transform 1s var(--alias-easeCubicIn);
} 



.is-active .leave-view .img-reveal-leave-view,
.is-active .leave-view.img-reveal-leave-view {
    transform: translateY(-105%) translateZ(0);
    transition: transform 1s var(--alias-easeCubicIn);
} 
.is-active .leave-view .img-reveal-leave-view .img-reveal__inner,
.is-active .leave-view.img-reveal-leave-view .img-reveal__inner {
    transform: translateY(105%) translateZ(0);
    transition: transform 1s var(--alias-easeCubicIn);
} 

/************************/


.strokeline {
    stroke: #000 !important;
    stroke-dasharray:  4500 !important;
    stroke-dashoffset: 4500 !important;
    transition: all 12s 1s var(--alias-easeOut);
}
.is-active .strokeline {
    stroke-dashoffset: 0 !important;
}


* {
    font-variant-ligatures: none;
}



/* 
.text {
    fill-opacity: 0;
    opacity: 0;
    transition: all 1.8s var(--alias-easeOut) ;
}
.is-active .text {
    opacity: 1 !important;
    fill-opacity: 1 !important;
} */
/* .text--0 { --textDelay: calc(2s + 0.1s * 0); }
.text--1 { --textDelay: calc(2s + 0.1s * 1); }
.text--2 { --textDelay: calc(2s + 0.1s * 2); }
.text--3 { --textDelay: calc(2s + 0.1s * 3); }
.text--4 { --textDelay: calc(2s + 0.1s * 4); }
.text--5 { --textDelay: calc(2s + 0.1s * 5); }
.text--6 { --textDelay: calc(2s + 0.1s * 6); }
.text--7 { --textDelay: calc(2s + 0.1s * 7); }
.text--8 { --textDelay: calc(2s + 0.1s * 8); }
.text--9 { --textDelay: calc(2s + 0.1s * 9); }
.text--10 { --textDelay: calc(2s + 0.1s * 10); }
.text--11 { --textDelay: calc(2s + 0.1s * 11); }
.text--12 { --textDelay: calc(2s + 0.1s * 12); }
.text--13 { --textDelay: calc(2s + 0.1s * 13); }
.text--14 { --textDelay: calc(2s + 0.1s * 14); }
.text--15 { --textDelay: calc(2s + 0.1s * 15); }
.text--16 { --textDelay: calc(2s + 0.1s * 16); }
.text--17 { --textDelay: calc(2s + 0.1s * 17); }
.text--18 { --textDelay: calc(2s + 0.1s * 18); }
.text--19 { --textDelay: calc(2s + 0.1s * 19); }
.text--20 { --textDelay: calc(2s + 0.1s * 20); }
.text--21 { --textDelay: calc(2s + 0.1s * 21); }
.text--22 { --textDelay: calc(2s + 0.1s * 22); }
.text--23 { --textDelay: calc(2s + 0.1s * 23); }
.text--24 { --textDelay: calc(2s + 0.1s * 24); }
.text--25 { --textDelay: calc(2s + 0.1s * 25); }
.text--26 { --textDelay: calc(2s + 0.1s * 26); }
.text--27 { --textDelay: calc(2s + 0.1s * 27); }
.text--28 { --textDelay: calc(2s + 0.1s * 28); }
.text--29 { --textDelay: calc(2s + 0.1s * 29); }
.text--30 { --textDelay: calc(2s + 0.1s * 30); }
.text--31 { --textDelay: calc(2s + 0.1s * 31); }
.text--32 { --textDelay: calc(2s + 0.1s * 32); }
.text--33 { --textDelay: calc(2s + 0.1s * 33); }
.text--34 { --textDelay: calc(2s + 0.1s * 34); }
.text--35 { --textDelay: calc(2s + 0.1s * 35); }
.text--36 { --textDelay: calc(2s + 0.1s * 36); }
.text--37 { --textDelay: calc(2s + 0.1s * 37); }
.text--38 { --textDelay: calc(2s + 0.1s * 38); }
.text--39 { --textDelay: calc(2s + 0.1s * 39); }
.text--40 { --textDelay: calc(2s + 0.1s * 40); }
.text--41 { --textDelay: calc(2s + 0.1s * 41); }
.text--42 { --textDelay: calc(2s + 0.1s * 42); }
.text--43 { --textDelay: calc(2s + 0.1s * 43); }
.text--44 { --textDelay: calc(2s + 0.1s * 44); }
.text--45 { --textDelay: calc(2s + 0.1s * 45); }
.text--46 { --textDelay: calc(2s + 0.1s * 46); }
.text--47 { --textDelay: calc(2s + 0.1s * 47); }
.text--48 { --textDelay: calc(2s + 0.1s * 48); }
.text--49 { --textDelay: calc(2s + 0.1s * 49); }
.text--50 { --textDelay: calc(2s + 0.1s * 50); } */




.btn--sound {
    background: none;
    fill: #fff;
    width: 25px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 30px;
    border:none;
    z-index: 10;
    -webkit-appearance: none;
  }
  .btn--sound svg {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
  .btn--sound .unmute {
    opacity: 0;
  }
  .btn--sound .mute {
    opacity: 1;
  }
  .is-muted .btn--sound .unmute {
    opacity: 1;
  }
  .is-muted .btn--sound .mute {
    opacity: 0;
  }
  @media screen and (max-width: 850px) and (orientation: landscape) {
    .btn--sound {
      left: 38px;
      right: auto;
      bottom: 70px;
      transform-origin: 0% 100%;
    }
  }
  @media screen and (max-width: 767px) and (orientation: portrait) {
    .btn--sound {
      left: 20px;
      right: auto;
      bottom: 70px;
      transform-origin: 0% 100%;
    }
  }





.scrollLine {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform: translateY(-65px) translateZ(0);
    animation: anim-vlineslow 3.5s infinite;
}
.scrollLine svg {
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform: translateY(200px) translateZ(0);
    animation: anim-vlineslow-inner 3.5s infinite;
}
@keyframes anim-vlineslow {
    0% {
      transform: translateY(-65px) translateZ(0);
    }
    50% {
      transform: translateY(0px) translateZ(0);
    }
    51% {
      transform: translateY(0px) translateZ(0);
    }
    100% {
      transform: translateY(65px) translateZ(0);
    }
}
@keyframes anim-vlineslow-inner {
    0% {
      transform: translateY(-100px) translateZ(0);
    }
    50% {
      transform: translateY(0px) translateZ(0);
    }
    51% {
      transform: translateY(0px) translateZ(0);
    }
    100% {
      transform: translateY(100px) translateZ(0);
    }
  }


  .textbox {
    stroke: none !important;
  }



  body {-webkit-backface-visibility:hidden;} 




svg .dot {
    cursor: pointer;
}



.h4-c2sc h4 {
    -moz-font-feature-settings: 'c2sc';
    -webkit-font-feature-settings: 'c2sc';
    -o-font-feature-settings: 'c2sc';
    font-feature-settings: 'c2sc';
}