@layer base {
    #timeline-container {
        width: 100%;
    }

    #timeline {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    #certification-logos div {
        @apply
        flex-center
        max-h-[90px]
        max-w-[100px]
        w-full
        lg:max-w-[220px];
    }

    .timeline-slider .swiper-slide {
        @apply
        !w-[calc(100%-2rem)];
    }

    .timeline-year-block {
        @apply
        h-screen
        flex
        flex-col
        items-start
        justify-center
        md:items-center
        xl:items-start;
    }

    .timeline-year-box {
        @apply
        bg-tlx-white-90-opacity
        p-4
        relative
        rounded-20
        pl-[5.5rem]
        2xl:p-0;
    }

    .timeline-dot {
        @apply
        absolute
        aspect-square
        bg-tlx-blue
        border-4
        border-white
        left-[27px]
        rounded-full
        top-[6px]
        w-[35px]
        2xl:-left-[53px];
    }


    .location-dot {
        @apply
        absolute
        aspect-square
        cursor-pointer
        duration-200
        opacity-90
        rounded-full
        scale-100
        transition
        w-3
        hover:duration-200
        hover:opacity-100
        hover:scale-150
        hover:transition;
    }

    .location-dot.active {
        @apply
        animate-pulse
        !bg-tlx-light-blue
        border
        border-tlx-blue
        scale-150
        z-20;
    }

    .location-dot.international-agent-location {
        @apply
        bg-tlx-dark-blue;
    }


    .location-dot.sales-office-location {
        @apply
        bg-tlx-blue
    }

    .charities-slide {
        @apply
        aspect-square
        bg-tlx-white-90-opacity
        flex-center
        px-14
        py-4
        rounded-20
        text-center
        !w-[calc(100%-1.5rem)]
        !max-w-[340px];
    }

    /*#certification-logos img {*/
    /*    @apply*/
    /*    max-h-[60px]*/
    /*    mx-auto;*/
    /*}*/
    /*.timeline-content {*/
    /*    width: 50%;*/
    /*    will-change: transform;*/
    /*}*/
    /*.timeline-step {*/
    /*    @apply */
    /*}*/
    /*section.test {*/
    /*    height: 100svh;*/
    /*    width: 100%;*/
    /*    top: 0;*/
    /*    position: fixed;*/
    /*    visibility: hidden;*/
    /*}*/
    /*.outer,*/
    /*.inner {*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    overflow-y: hidden;*/
    /*}*/
    /*.bg {*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    justify-content: center;*/
    /*    position: absolute;*/
    /*    height: 100%;*/
    /*    width: 100%;*/
    /*    top: 0;*/
    /*    background-size: cover;*/
    /*    background-position: center;*/
    /*}*/
    /*h2 {*/
    /*    z-index: 999;*/
    /*}*/
    /*.clip-text {*/
    /*    overflow: hidden;*/
    /*}*/
    /*.first {*/
    /*    .bg {*/
    /*        background-image:*/
    /*        url("https://assets.codepen.io/16327/site-landscape-1.jpg");*/
    /*    }*/
    /*}*/
    /*.second {*/
    /*    .bg {*/
    /*        background-image:*/
    /*        url("https://assets.codepen.io/16327/site-landscape-2.jpg");*/
    /*    }*/
    /*}*/
    /*.third {*/
    /*    .bg {*/
    /*        background-image:*/
    /*        url("https://assets.codepen.io/16327/site-landscape-3.jpg");*/
    /*    }*/
    /*}*/
    /*.fourth {*/
    /*    .bg {*/
    /*        background-image:*/
    /*        url("https://assets.codepen.io/16327/site-landscape-4.jpg");*/
    /*    }*/
    /*}*/
    /*.fifth {*/
    /*    .bg {*/
    /*        background-image:*/
    /*        url("https://assets.codepen.io/16327/site-landscape-5.jpg");*/
    /*        background-position: 50% 45%;*/
    /*    }*/
    /*}*/
    /*h2 * {*/
    /*    will-change: transform;*/
    /*}*/
    #about-page #about-introduction {
        @apply bg-tlx-dark-blue-gradient overflow-hidden pt-2 xl:mx-0 xl:pt-4;
    }
    #about-page #about-introduction-de {
        @apply
        bg-tlx-dark-blue
        flex
        h-[80svh]
        items-center
        justify-center
        overflow-hidden
        pt-2
        text-center
        xl:mx-0
        xl:pt-4;
    }
    #about-page #about-introduction #left-background {
        @apply bg-[url("../images/about/intro-1-7c603b8c6fad07c494e79659b269a6b0.webp")] bg-no-repeat bg-left-bottom bg-[length:auto_320px] w-full md:bg-center md:bg-cover;
    }
    #about-page #about-introduction #right-background {
        @apply md:bg-[url("../images/about/intro-2-d5b5456c03f4a10a9fa1e1dcbba5d420.webp")] md:bg-center md:bg-cover md:bg-no-repeat 2xl:bg-right-top;
    }
    #about-page #about-introduction #about-intro-text {
        @apply max-w-600 mx-auto pb-64 pt-12 md:py-16;
    }
    #about-page #about-introduction-de #left-background {
        @apply basis-full lg:basis-1/3;
    }
    #about-page #about-introduction h1 {
        @apply
        text-center
        mx-auto
        text-white;
    }
    #about-page #about-introduction h1 {
        @apply
        mb-8
        mt-0
        md:mb-16;
    }
    #about-page #about-introduction-de h1 {
        @apply
        mb-4
        my-0;
    }
    #about-page #about-introduction h3 {
        @apply my-4 text-center text-white md:mt-24;
    }
    #about-page h2 {
        @apply mb-8 text-center mx-4 mt-0;
    }
    #about-page #about-introduction p,
    #about-page #au-intro p {
        @apply my-4 text-white;
    }
    #about-page #quality-control {
        @apply bg-white overflow-hidden py-12 md:py-16;
    }
    #about-page #quality-control h2 {
        @apply mb-8 text-center mx-4;
    }
    #about-page #certificates-container {
        @apply flex gap-4 justify-center w-full;
    }
    #about-page .certificate-box {
        @apply basis-1/4;
    }
    #about-page .certificate-box img {
        @apply border border-tlx-dark-blue;
    }
    #about-page .certificate-box p {
        @apply text-center mt-0;
    }
    #about-page #icons {
        @apply pt-0 lg:flex-container;
    }
    #about-page #icons img {
        @apply h-[100px] lg:h-[unset] lg:max-w-full;
    }
    #about-page .info-gallery {
        @apply bg-tlx-light-blue pb-0 py-12 md:pb-20;
    }
    #about-page .info-gallery .gallery {
        @apply overflow-hidden md:pb-[75px];
    }
    #about-page .info-gallery .gallery #led-prototyping-pic {
        @apply bg-[url("../images/about/led-prototyping-64a99c1a7385791a6cff3b6f02993d83.webp")];
    }
    #about-page .info-gallery .gallery #design-pic {
        @apply bg-[url("../images/about/design-e44cb6c643f3bf8b8f78237faebf983f.webp")];
    }
    #about-page .info-gallery .gallery #product-testing-pic {
        @apply bg-[url("../images/about/product-testing-df0a27ddc6bb09ded691c86e92159663.webp")];
    }
    #about-page .info-gallery .gallery #photometric-data-pic {
        @apply bg-[url("../images/about/photometric-data-80a2c6f68d830ee70d671ecc89be95fc.webp")];
    }
    #about-page .info-gallery .gallery #export-pic {
        @apply bg-[url("../images/about/export-6e0059c3c06d4c01043aa37f416cac7d.webp")];
    }
    #about-page .info-gallery .gallery #help-and-advice-pic {
        @apply bg-[url("../images/about/help-and-advice-11f2b1bdf44599f546621da6fd9aa059.webp")];
    }
    #about-page .info-gallery .gallery #technical-support-pic {
        @apply bg-[url("../images/about/technical-support-454286ea2c661f3754ecf6feb7de2517.webp")];
    }
    #about-page .info-gallery .gallery #lighting-design-pic {
        @apply bg-[url("../images/about/lighting-design-35c713cae6bef1190ba2fcc38ee4a59d.webp")];
    }
    #about-page .info-gallery .gallery-links {
        @apply border border-tlx-blue flex flex-wrap list-none mx-auto pl-0 w-full lg:relative lg:ml-[10%] lg:top-[1px] lg:w-4/5;
    }
    #about-page .article-wrapper {
        @apply bg-white border border-tlx-blue border-t-0 box-border mx-auto p-4 relative lg:w-4/5 lg:p-8;
    }
    #about-page .article-wrapper div {
        @apply hidden;
    }
    #about-page .article-wrapper div.active {
        @apply block;
    }
    #about-page .article-wrapper p {
        @apply m-0 p-12;
    }
    #about-page .article-wrapper p:nth-child(2) {
        @apply hidden;
    }
    #about-page .article-wrapper a {
        @apply font-semibold text-tlx-blue underline;
    }
    #about-page .gallery-links li {
        @apply align-middle bg-[#FFFFFFCC] border-tlx-blue border-l box-border cursor-pointer h-[55px] m-0 px-0.5 pt-3.5 text-xl text-center w-full hover:bg-tlx-blue-80-opacity hover:text-white md:w-1/4 md:first:border-l-0;
    }
    #about-page .gallery-links li.active {
        @apply bg-tlx-blue-80-opacity text-white;
    }
    #about-page .info-gallery .gallery div {
        @apply hidden overflow-hidden rounded-b-none rounded-t-3xl lg:rounded-3xl;
    }
    #about-page .info-gallery .gallery div.active {
        @apply bg-center-cover-no-repeat block relative;
    }
}