/*
    ===========================
        Background Animation
    ===========================
    */
    .background-animation--one .blogistic-background-animation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        animation: animateBg 50s linear infinite;
    }

    @keyframes animateBg {
        0%,100% {
            transform:scale(1);
        }

        50% {
            transform:scale(1.2);
        }
    }

    .background-animation--one .blogistic-background-animation span.item {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background: var(--blogistic-animation-object-color);
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1);
        animation:  animate-star 3s linear infinite;
    }

    .background-animation--one .blogistic-background-animation span.item::before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        height: 1px;
        background: linear-gradient(90deg, var(--blogistic-animation-object-color), transparent);
    }

    @keyframes animate-star {
        0% {
            transform: rotate(315deg) translateX(0);
            opacity: 1;
        }

        70% {
            opacity: 1;
        }

        100% {
            transform: rotate(315deg) translateX(-1500px);
            opacity: 0;
        }
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(1) {
        top: 0;
        right: 0;
        left:initial;
        animation-delay: 0.5s;
        animation-duration: 1s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(2) {
        top: 0;
        right: 80px;
        left:initial;
        animation-delay: 0.2s;
        animation-duration: 3s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(3) {
        top: 80px;
        right: 0px;
        left:initial;
        animation-delay: 0.4s;
        animation-duration: 2s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(4) {
        top: 0;
        right: 180px;
        left:initial;
        animation-delay: 0.6s;
        animation-duration: 1.5s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(5) {
        top: 0;
        right: 400px;
        left:initial;
        animation-delay: 0.8s;
        animation-duration: 2.5s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(6) {
        top: 0;
        right: 600px;
        left:initial;
        animation-delay: 1s;
        animation-duration: 3s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(7 ) {
        top: 300px;
        right: 0px;
        left:initial;
        animation-delay: 1s;
        animation-duration: 1.75s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(8) {
        top: 0px;
        right: 700px;
        left:initial;
        animation-delay: 1.4s;
        animation-duration: 1.25s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(9) {
        top: 0px;
        right: 1220px;
        left:initial;
        animation-delay: 0.75s;
        animation-duration: 2.25s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(10) {
        top: 0px;
        right: 1000px;
        left:initial;
        animation-delay: 2.75s;
        animation-duration: 2.25s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(11) {
        top: 0;
        right: -430px;
        left: initial;
        animation-delay: 5s;
        animation-duration: 2s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(12) {
        top: 0;
        right: -330px;
        left: initial;
        animation-delay: 5s;
        animation-duration: 2s;
    }

    .background-animation--one .blogistic-background-animation span.item:nth-child(13) {
        top: 0px;
        right: 1330px;
        left: initial;
        animation-delay: 0.75s;
        animation-duration: 2.25s;
    }

/* BK Animation Two */
    .background-animation--two .blogistic-background-animation {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
        top: 0;
    }

    .background-animation--two .blogistic-background-animation .item {
        position: absolute;
        width: 60px;
        height: 60px;
        background-color: transparent;
        border: 4px solid var(--blogistic-animation-object-color);
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(1) {
        top: 12%;
        left: 42%;
        animation: animate 10s linear infinite;
    }

    .background-animation--two  .blogistic-background-animation .item:nth-child(2) {
        top: 70%;
        left: 50%;
        animation: animate 7s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(3) {
        top: 17%;
        left: 6%;
        animation: animate 9s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(4) {
        top: 20%;
        left: 60%;
        animation: animate 10s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(5) {
        top: 67%;
        left: 10%;
        animation: animate 6s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(6) {
        top: 80%;
        left: 70%;
        animation: animate 12s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(7) {
        top: 60%;
        left: 80%;
        animation: animate 15s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(8) {
        top: 32%;
        left: 25%;
        animation: animate 16s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(9) {
        top: 90%;
        left: 25%;
        animation: animate 9s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(10) {
        top: 20%;
        left: 80%;
        animation: animate 5s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(11) {
        top: 41%;
        right: 9%;
        animation: animate 5s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(12) {
        top: 80%;
        right: 11%;
        animation: animate 5s linear infinite;
    }

    .background-animation--two .blogistic-background-animation .item:nth-child(13) {
        top: 91%;
        left: 6%;
        animation: animate 5s linear infinite;
    }

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

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

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

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

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

    .background-animation--three .blogistic-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 .blogistic-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 .blogistic-background-animation .item:nth-child(2):after {
        content: '';
        position: absolute;
        border-width: 2.3em;
        border-style: solid;
        border-left-color: var(--blogistic-animation-object-color);
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: transparent;
    }

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

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

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

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

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

    .background-animation--three .blogistic-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 .blogistic-background-animation .item:nth-child(9),
    .background-animation--three .blogistic-background-animation .item:nth-child(10),
    .background-animation--three .blogistic-background-animation .item:nth-child(11),
    .background-animation--three .blogistic-background-animation .item:nth-child(12),
    .background-animation--three .blogistic-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--one .blogistic-background-animation,
    .boxed--layout.background-animation--two .blogistic-background-animation,
    .boxed--layout.background-animation--three .blogistic-background-animation {
        z-index: 1;
    }

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

body {
    overflow-x: hidden;
}

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

.boxed--layout .blogistic-cursor.type--one {
    transform: translate(-226%, -313%);
}

.boxed--layout .blogistic-cursor.type--one.isActive {
    transform: translate(-226%, -313%);
}

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

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

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

/* Animation Two */
.blogistic-cursor.type--two {
    content: '';
    width: 10px;
    height: 10px;
    background: var( --blogistic-global-preset-gradient-theme-color );
    border-radius: 50%;
    position: absolute;
    z-index: 999;
    pointer-events: none;
    overflow: hidden;
    transform: translate(92%, 106%);
    transition: .10s;
}

.blogistic-cursor.type--two.isActive {
    opacity: .5;
    transform: translate(105%, 106%) scale(4);
}