/*
    ===========================
        Background Animation
    ===========================
    */
        /* boxed layout */
        .background-animation--enabled.boxed--layout .widget-area .widget,
        .background-animation--enabled.boxed--layout .widget-area #widget_block,
        .background-animation--enabled.boxed--layout .category-collection-wrap,
        .background-animation--enabled.boxed--layout .site-header .bb-bldr--normal .bb-bldr-row,
        .background-animation--enabled.boxed--layout .site-footer {
            position: relative;
        }

        .background-animation--enabled.boxed--layout .site-main,
        .background-animation--enabled.boxed--layout .widget-area .widget,
        .background-animation--enabled.boxed--layout .widget-area #widget_block,
        .background-animation--enabled.boxed--layout .category-collection-wrap,
        .background-animation--enabled.boxed--layout .carousel-wrap,
        .background-animation--enabled.boxed--layout .site-footer {
            z-index: 2;
        }
        
        .background-animation--enabled.boxed--layout .site-header .bb-bldr--normal .bb-bldr-row {
            z-index: 3;
        }

        @media (max-width: 610px) {
            .background-animation--three .blog-postx-background-animation .item:nth-child(9),
            .background-animation--three .blog-postx-background-animation .item:nth-child(4),
            .background-animation--three .blog-postx-background-animation .item:nth-child(12),
            .background-animation--three .blog-postx-background-animation .item:nth-child(10),
            .background-animation--three .blog-postx-background-animation .item:nth-child(2),
            .background-animation--three .blog-postx-background-animation .item:nth-child(5),
            .background-animation--three .blog-postx-background-animation .item:nth-child(1),
            .blog-postx-background-animation.hide-on-mobile {
                display: none;
            }
        }

    /* BK Animation Three */
        .background-animation--three .blog-postx-background-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
        }

        .background-animation--three .blog-postx-background-animation .item {
            position: absolute;
            display: block;
            width: 25px;
            height: 25px;
            background-color: var(--blog-postx-animation-object-color);
            animation: animate-up 20s linear infinite;
            bottom: -150px;
            border-radius: 6px;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(1) {
            left: 86%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
            border-radius: 33% 67% 58% 42% / 30% 32% 68% 70%;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(2) {
            left: 12%;
            width: 30px;
            height: 30px;
            animation-delay: 1.5s;
            animation-duration: 10s;
            background-color: transparent;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(2):after {
            content: '';
            position: absolute;
            border-width: 2.3em;
            border-style: solid;
            border-left-color: var(--blog-postx-animation-object-color);
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-top-color: transparent;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(3) {
            left: 70%;
            width: 100px;
            height: 100px;
            animation-delay: 1.5s;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(4) {
            left: 42%;
            width: 150px;
            height: 150px;
            animation-delay: 0s;
            animation-duration: 15s;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(5) {
            left: 65%;
            width: 40px;
            height: 40px;
            animation-delay: 0s;
            border-radius: 50%;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(6) {
            left: 15%;
            width: 110px;
            height: 110px;
            animation-delay: 3.5s;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(7) {
            left: 27%;
            width: 110px;
            height: 110px;
            animation-delay: 9s;
            border-radius: 50%;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(8) {
            left: 59%;
            width: 90px;
            height: 90px;
            animation-delay: 6.2s;
            border-radius: 73% 27% 58% 42% / 43% 56% 44% 57%;
        }

        .background-animation--three .blog-postx-background-animation .item:nth-child(9),
        .background-animation--three .blog-postx-background-animation .item:nth-child(10),
        .background-animation--three .blog-postx-background-animation .item:nth-child(11),
        .background-animation--three .blog-postx-background-animation .item:nth-child(12),
        .background-animation--three .blog-postx-background-animation .item:nth-child(13) {
            display: none;
        }

        @keyframes animate-up {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: translateY(-800px) rotate(360deg);
                opacity: 0;
            }
        }

        .boxed--layout.background-animation--three .blog-postx-background-animation {
            z-index: 1;
        }

/*
===========================
Cursor Animation
===========================
*/

    body {
        overflow-x: hidden;
    }

    .blog-postx-cursor.type--one {
        content: '';
        width: 25px;
        height: 25px;
        border: 1px dashed var(--blog-postx-global-preset-theme-color);
        border-radius: 50%;
        position: absolute;
        z-index: 99999;
        pointer-events: none;
        overflow: hidden;
        transform: translate(12%, 16%);
    }

    .blog-postx-cursor.type--one.isActive {
        animation: spin 4000ms infinite linear;
        width: 35px;
        height: 35px;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }