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

    /* Media Queries*/
    --media-d:    1440px;/*desktop*/
    --media-d:    1440px;/*desktop*/
    --media-l:    1439px;/*laptop*/
    --media-t:    1024px;/*tablet*/
    --media-tp:   1024px;/*  and (orientation: portrait)   tablet portrait*/
    --media-m:    screen and (max-width:767px);/*mobile landscape*/
    --media-mp:   600px;/* and (orientation: portrait) mobile portrait*/
    --media-nom:  768px;/*not mobile*/
    
    /* FontFamily */
    --alias-main:   'GoodSans', sans-serif;

    /* Colors */
    --alias-theme: #000;
    --alias-themeBackground: #000;
    --alias-themeColor: #fff;
    --alias-dark: #000;
    --alias-light: #fff;
    --alias-grey10: rgba(196,196,196,0.1);
    --alias-white20: rgba(255,255,255,0.2);
    --alias-white25: rgba(255,255,255,0.25);
    --alias-black10: rgba(0,0,0,0.1);
    --alias-black20: rgba(0,0,0,0.2);
    --alias-black30: rgba(0,0,0,0.3);/*#b7b7b7*/
    --alias-black40: rgba(0,0,0,0.4);
    --alias-black50:rgba(0,0,0,0.5);/*#808080*/

    --alias-sidebarWidth: calc(100% - 20px);

    /* Easings */
    --alias-easeOut: cubic-bezier(0.430, 0.195, 0.020, 1.000);
    --alias-easeOut2: cubic-bezier(0.77,0.0,0.175,1);
    --alias-easeOut3: cubic-bezier(0.165,0.84,0.44,1);
    --alias-easeOutSlow: cubic-bezier(.43,.195,.02,1);

    /* Units*/
    --vw: 100vw;
    --vh: 100vh;
    --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 );
    --unit-c:  calc( var(--vw) / 14 );
    --unit-vw:  calc( var( --vw ) / 100 );

    /* Reset */
    --baseColor:      var(--alias-light);
    --baseBackground: var(--alias-dark);
}

@media screen and (max-width:600px ) {
    :root {
        --unit-fx:  calc( var(--vw) / 375 );
        --unit-fy:  calc( var(--vh) / 755 );
    }
}

@font-face {
    font-family: 'GoodSans';
    src: url('../fonts/GoodSans-Medium.93ed9ede.woff') format('woff');
}

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

html {
    display: block;
    font-family: 'GoodSans';
    width: 100%;
    max-width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
}


body {
    color: var(--baseColor);
    background: var(--baseBackground);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    width: 100%;
}




@media screen and (max-width:767px ) {
    body {
        /* overflow-y: visible; */
    }
}



ol, ul, li {
    list-style: none;
}
button {
    font-family: inherit;
    background: none;
    color: inherit;
}

button, input, a {
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
h1,h2,h4,h4,h5,h6 {
    font-weight: normal;
    color: inherit;
    margin: 0;
    font-size: inherit;
}
fieldset, button, input, select, textarea, hr {
    -webkit-appearance: none;
    border: none;
}
a { 
    text-decoration: none;
    color: inherit; 
}
textarea {
    font-family: inherit;
}
address {
    font-style: normal;
}
page-block {
    /* overflow: unset; */
    display: block;
}
page-block > * {
    display: block;
}
i {
    font-style: normal;
}






.fadeIn {
    display: block;
    will-change: opacity, transform;
    opacity: 1;
    transform: translateZ(0);
    animation: 0s cubic-bezier(0.430, 0.195, 0.020, 1.000) 0s forwards fadeout;
}
.is-active .fadeIn {
    opacity: 0; 
    animation: 2s cubic-bezier(0.430, 0.195, 0.020, 1.000) forwards fadein;
}
.anim--underline {
    position: relative;
}
.anim--underline > span {
    position: relative;
    z-index: 3;
    text-shadow: 2px 0px 0px #fff, 0px 2px #fff, -2px 0px #fff, 0px -2px #fff;
}
.anim--underline:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 2px; left: 0; width: 100%;
    height: 2px; background: currentColor;
    animation: 0s cubic-bezier(0.430, 0.195, 0.020, 1.000) 0s forwards scaleXOut;
    transform-origin: 100% 0;
}
.is-active .anim--underline:before {
    animation: 1.8s cubic-bezier(0.430, 0.195, 0.020, 1.000) 0s forwards scaleXIn;
    transform-origin: 0% 0;
}






/* ANIMATIONS */
@keyframes letter_enter { 
    0%  { opacity: 0; } 
    20% { opacity: 1; }
    40% { opacity: 1; }
    60% { opacity: 0; }
    80% { opacity: 1; } 
    100% { opacity: 1; }  
}
@keyframes letter_leave { 

}
@keyframes blink { 
    0%  { opacity: 0; } 
    20% { opacity: 1; }
    40% { opacity: 1; }
    60% { opacity: 0; }
    80% { opacity: 1; } 
    100% { opacity: 1; }  
}
@keyframes blink_hover { 
    0%  { opacity: 0; } 
    30% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 0; }
    90% { opacity: 0; } 
    100% { opacity: 1; }  
}
@keyframes double_blink { 
    0%  { opacity: 0; } 
    5% { opacity: 1; }
    10% { opacity: 1; }
    15% { opacity: 0; }
    20% { opacity: 1; } 
    25% { opacity: 0; } 
    75%  { opacity: 0; } 
    80% { opacity: 1; }
    85% { opacity: 1; }
    90% { opacity: 0; }
    95% { opacity: 1; } 
    100% { opacity: 1; } 
}
@keyframes fadein { 
    from { opacity: 0;transform: translateZ(0); } 
    to {   opacity: 1;transform: translateZ(0); }  
}
@keyframes fadeout { 
    from { opacity: 1;transform: translateZ(0); } 
    to {   opacity: 0;transform: translateZ(0); } 
}
@keyframes scaleXIn { 
    0% { transform: scaleX(0) translateZ(0); } 
    to {   transform: scaleX(1) translateZ(0); }  
}
@keyframes scaleXOut { 
    0% { transform: scaleX(1) translateZ(0); } 
    to {   transform: scaleX(0) translateZ(0); } 
}
@keyframes burger_line1_start { 
    0% { transform: scaleX(0) translateZ(0); } 
    100% { transform: scaleX(1) translateZ(0); } 
}
@keyframes burger_line1_end { 
    0% { transform: translateX(0%) scaleX(0) translateZ(0); } 
    100% { transform: translateX(115%) scaleX(0.15) translateZ(0); } 
}
@keyframes burger_line1_start_leave { 
    0% { transform: scaleX(1) translateZ(0); } 
    100% { transform: scaleX(0) translateZ(0); } 
}
@keyframes burger_line2_start { 
    0% { transform: scaleX(0) translateZ(0); } 
    100% { transform: scaleX(1) translateZ(0); } 
}
@keyframes burger_line2_end { 
    0% { transform: translateX(0%) scaleX(0) translateZ(0); } 
    100% { transform: translateX(-115%) scaleX(0.15) translateZ(0); } 
}
@keyframes burger_close_line1 { 
    0% { transform: translateY(-2.5px) rotate(0deg) scale(1) translateZ(0); } 
    50% { transform: translateY(0) rotate(45deg) scale(1) translateZ(0); } 
    100% { transform: translateY(0) rotate(45deg) scale(0.5) translateZ(0); } 
}
@keyframes burger_close_line2 { 
    0% { transform: translateY(2.5px) rotate(0deg) scale(1) translateZ(0); } 
    50% { transform: translateY(0) rotate(-45deg) scale(1) translateZ(0); } 
    100% { transform: translateY(0) rotate(-45deg) scale(0.5) translateZ(0); } 
}
@keyframes underline_start { 
    0% { transform: scaleX(1) translateZ(0); } 
    100% { transform: scaleX(0) translateZ(0); } 
}
@keyframes underline_end { 
    0% { transform: scaleX(0) translateZ(0); } 
    100% { transform: scaleX(1) translateZ(0); } 
}



@keyframes introLogoIn { 
    0% { transform:  translateX(0vw)  scale(1) translateZ(0); } 
    100% { transform:  translateX(0vw)  scale(0.5) translateZ(0); } 
}

@keyframes introVideoIn { 
    0% { transform: translateX(-100%) translateZ(0); } 
    100% { transform: translateX(-50%)  translateZ(0); } 
}


@keyframes introPanelIn { 
    0% { transform:  translateX(0vw)  translateZ(0); } 
    100% { transform:  translateX(-20%)  translateZ(0); } 
}

@keyframes introSidebarIn { 
    0%   { transform:  translateX(20%)  translateZ(0); } 
    100% { transform:  translateX(0%)  translateZ(0); } 
} 










[data-pattern='big-square'] [data-layer-y] {
    background-image: linear-gradient(to right, #fff 1px, transparent 1px);
    background-size: 60px 60px;
}
[data-pattern='big-square'] [data-layer-x] {
    background-image: linear-gradient(to top, #fff 1px, transparent 1px);
    background-size: 60px 60px;
}
[data-pattern='small-square'] [data-layer-x] {
    background-image: linear-gradient(to right, #fff 1px, transparent 1px);
    background-size: 20px 20px;
}
[data-pattern='small-square'] [data-layer-y] {
    background-image: linear-gradient(to top, #fff 1px, transparent 1px);
    background-size: 20px 20px;
}
[data-pattern='small-cross'] [data-layer-x] {
    background-image:url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><line stroke='white' x1='20' x2='20' y1='16' y2='24' /><line stroke='white' x1='16' x2='24' y1='20' y2='20' /></svg>");
}
[data-pattern='big-cross']  [data-layer-x]{
    background-image:url("data:image/svg+xml;utf8,<svg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'><line stroke='white' x1='40' x2='40' y1='36' y2='44' /><line stroke='white' x1='36' x2='44' y1='40' y2='40' /></svg>");
}
[data-pattern='small-dots']  [data-layer-x]{
    background-image:url("data:image/svg+xml;utf8,<svg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><circle cx='15' cy='15' r='2' fill='white' /></svg>");
}
[data-pattern='big-dots']  [data-layer-x]{
    background-image:url("data:image/svg+xml;utf8,<svg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'><circle cx='30' cy='30' r='2' fill='white' /></svg>");
}







@keyframes starHover { 
    0%   { transform:  scaleX(1)  translateZ(0); } 
    40%  { transform:  scaleX(2)  translateZ(0); } 
    60%  { transform:  scaleX(2)  translateZ(0); } 
    100% { transform:  scaleX(1)  translateZ(0); } 
} 
@keyframes dashLine { 
    0%   { transform:  scaleY(1)  translateZ(0); transform-origin: 0 0; } 
    45%  { transform:  scaleY(0)  translateZ(0); transform-origin: 0 0; } 
    46%  { transform:  scaleY(0)  translateZ(0); transform-origin: 0 100%;} 
    55%  { transform:  scaleY(0)  translateZ(0); transform-origin: 0 100%;} 
    100% { transform:  scaleY(1)  translateZ(0); transform-origin: 0 100%;} 
} 
.group:hover .starLine,
.is-selected .starLine {
    animation: 1.6s var(--alias-easeOut) forwards starHover
}
.group:hover .dashLine,
.is-selected .dashLine {
    animation: 0.8s var(--alias-easeOut) forwards dashLine
}