@keyframes bgMove {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -30000px;
    }
}
@keyframes bgMoveY {
    0% {
        background-position-Y: 0;
    }
    100% {
        background-position-Y: -50000px;
    }
   }
@keyframes logo-cog {
    0%,100% {
        transform: rotate(-180deg);
        transform-origin: center;
    }
    50% {
        transform: rotate(180deg);
    }
}
@keyframes logo-text {
    0%,100% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(-180deg);
        transform-origin: center;
    }
}

/* Header - Menu */
@media screen and (max-width: 1024px) {
    .header-menu {
        top: 0;
        padding-top: 204px;
        padding-bottom: 40px;
        height: 100vh;
        transition: all 700ms cubic-bezier(0.995,0.075,0.21,0.78); transition-delay: 0.3s;
        transform: translateX(-100%);
    }
    .show-mobile-menu .header-menu {
        transform: translateX(0);
    }
}
@media screen and (max-width: 768px) {
    .header-menu {
        padding-top: 128px;
        padding-bottom: 20px;
    }
}


/* Product */
.swiper-view .swiper-slide,
.swiper-thumb .swiper-slide { height: auto; background-color: #fff; }
.swiper-thumb .swiper-slide {
    opacity: 0.6;
}
.swiper-thumb .swiper-slide-thumb-active {
    opacity: 1;
}

.thumb-next .material-icons,
.thumb-prev .material-icons { font-size: 24px;}
.swiper-button-disabled { opacity: 0.4;}

/* simple lightbox */
.sl-wrapper { backdrop-filter: blur(10px); }


/* Home - Ani-Text */
.ani-text { height: calc( 35 / 1920* 100vw); animation: bgMove 800s infinite linear; }
.ani-name { animation: bgMove 1200s infinite linear; }
.ani-cog { animation: logo-cog 30s infinite linear; }
.ani-text { animation: logo-text 30s infinite linear; }
@media screen and (max-width: 480px) {
    .ani-text { height: calc( 60 / 1920* 100vw); animation: bgMove 1400s infinite linear; }
}

.responsive-table { margin-bottom: 20px; overflow-x: auto;}
.responsive-table table { width: 100%; border: 1px solid #888; border-collapse: collapse;}
.responsive-table table th,
.responsive-table table td { padding: 10px; border: 1px solid #888;}
.responsive-table table thead tr { background-color: #000;}
.responsive-table table thead tr:nth-child(even) { background-color: #2563eb;}
.responsive-table table thead th,
.responsive-table table thead td { color: #fff;}
.responsive-table table tbody tr:nth-child(odd) { background-color: #f4f4f4;}
.responsive-table table tbody tr th { background-color: #e8eefa; text-align: left;}

/* Ani - Car */
.ani-car-red {
    offset-path: path("M2006.2,448.1c0,0-294.3-68.8-681.2,163.8 s-261.1,512.7-686,652.7s-833.1-9.5-833.1-9.5");
    animation: moveCar 24s linear infinite;
    /*animation-timeline: scroll(root);*/
}
.ani-car-white {
    offset-path: path("M-165.7,2036.1c0,0,157.9,365.4,548.3,365.4 s489-237.2,989.8-237.2s674.1,432,674.1,432");
    animation: moveCar 4s linear infinite;
    /*animation-timeline: scroll(root);*/
}
@keyframes moveCar {
    0% {
        offset-distance: 0%;
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        offset-distance: 100%;
    }
}

#svgpath-red {
    animation: lineMove 1s linear;
    animation-timeline: scroll(root);
    stroke-width: 1rem;
    stroke: #000;    
    stroke-dasharray: 2222, 2222;
}
@keyframes lineMove {
    0% {
        stroke-dashoffset: 2222;
    }
    100% {
        stroke-dashoffset: 0;
    }
}