/* 

    1.0 Banner Slider
    2.0 Cursor Animation

*/

/* 
MARK: 1.0 Banner Slider
*/

    .bbe-main-banner .slick-current .entry-inner .entry-categories {
        animation: fadeUp 0.5s ease 0.1s both;
    }
    
    .bbe-main-banner .slick-current .entry-inner .entry-title {
        animation: fadeUp 0.5s ease 0.22s both;
    }
    
    .bbe-main-banner .slick-current .entry-inner .entry-excerpt {
        animation: fadeUp 0.5s ease 0.34s both;
    }
    
    .bbe-main-banner .slick-current .entry-inner .entry-meta {
        animation: fadeUp 0.5s ease 0.44s both;
    }
    
    .bbe-main-banner .slick-current .entry-inner .entry-read-more {
        animation: fadeUp 0.5s ease 0.54s both;
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(22px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* 
MARK: 2.0 Cursor Animation
*/

    /* Layout One */
    .cursor-animation.layout--one {
        content: '';
        width: 25px;
        height: 25px;
        border: 1px dashed var(--bbe-theme-color);
        border-radius: 50%;
        position: fixed;
        z-index: 99999;
        pointer-events: none;
        overflow: hidden;
        transform: translate(12%, 16%);
    }

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

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

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

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

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

    /* Layout Two */
    .cursor-animation.layout--two {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background: var(--bbe-theme-color);
        border-radius: 50%;
        pointer-events: none;
        z-index: 999999;
        transform: translate(130%, 149%);
        mix-blend-mode: exclusion;
    }

    .cursor-animation.layout--two.isActive {
        width: 15px;
        height: 15px;
        transform: translate(50%, 60%);
    }

    .cursor-animation.layout--two:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 36px;
        height: 36px;
        border: 1.5px solid var(--bbe-theme-color);
        border-radius: 50%;
        transform: translate(-50%,-50%);
    }

/* 
MARK: 3.0 Background Animation
*/

    body .bbe-background {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* Layout One */
    .background--one .bbe-background .item {
        position: absolute;
        width: 60px;
        height: 60px;
        background-color: transparent;
        border: 4px solid var(--bbe-theme-color);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    .background--one .bbe-background .item:nth-child(n + 14) {
        display: none;
    }

     @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--one .bbe-background .item:nth-child(4),
        .background--one .bbe-background .item:nth-child(5),
        .background--one .bbe-background .item:nth-child(6),
        .background--one .bbe-background .item:nth-child(7),
        .background-one .bbe-background .item:nth-child(11),
        .background--one .bbe-background .item:nth-child(13),
        .background--one .bbe-background .item:nth-child(9) {
            display: none;
        }
    }

    /* Layout Two */
    .background--two .bbe-background {
        transform: rotateZ(45deg);
    }

    .background--two .item {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        background: linear-gradient(-45deg, var(--bbe-theme-color), rgba(0,0,255,0));
        border-radius: 999px;
        filter: drop-shadow(0 0 6px var(--bbe-theme-color));
        animation:
            appear 0.5s ease-out forwards,
            tail 3s ease-in-out infinite,
            shooting 3s ease-in-out infinite;
    }

    .background--two .item::before,
    .background--two .item::after {
        content: '';
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        height: 2px;
        background: linear-gradient(-45deg, rgba(0,0,255,0), var(--bbe-theme-color), rgba(0,0,255,0));
        border-radius: 100%;
        animation: shining 3s ease-in-out infinite;
    }

    .background--two .item::before {
        transform: translateX(50%) rotateZ(45deg);
    }

    .background--two .item::after {
        transform: translateX(50%) rotateZ(-45deg);
    }

    .background--two .item:nth-child(1) {
        top: 20%;
        left: 30%;
        animation-delay: 0s, 0s, 0s;
    }

    .background--two .item:nth-child(2) {
        top: 40%;
        left: 60%;
        animation-delay: 0.5s, 1s, 1s;
    }

    .background--two .item:nth-child(3) {
        top: 70%;
        left: 20%;
        animation-delay: 1s, 2s, 2s;
    }

    .background--two .item:nth-child(4) {
        top: 10%;
        left: 80%;
        animation-delay: 1.2s, 1.5s, 1.5s;
    }

    .background--two .item:nth-child(5) {
        top: 50%;
        left: 10%;
        animation-delay: 1.5s, 2.5s, 2.5s;
    }

    .background--two .item:nth-child(6) {
        top: 80%;
        left: 50%;
        animation-delay: 2s, 3s, 3s;
    }

    .background--two .item:nth-child(7) {
        top: 30%;
        left: 70%;
        animation-delay: 2.2s, 0.5s, 0.5s;
    }

    .background--two .item:nth-child(8) {
        top: 60%;
        left: 40%;
        animation-delay: 2.5s, 1.2s, 1.2s;
    }

    .background--two .item:nth-child(9) {
        top: 25%;
        left: 55%;
        animation-delay: 3s, 2.2s, 2.2s;
    }

    .background--two .item:nth-child(10) {
        top: 75%;
        left: 75%; animation-delay: 3.5s, 3.5s, 3.5s;
    }

    .background--two .bbe-background .item:nth-child(n + 11) {
        display: none;
    }

    @keyframes appear {
        0% { width: 0; height: 0; opacity: 0; }
        100% { width: 100px; height: 2px; opacity: 1; }
    }

    @keyframes tail {
        0% { width: 0; }
        30% { width: 100px; }
        100% { width: 0; }
    }

    @keyframes shining {
        0% { width: 0; }
        50% { width: 30px; }
        100% { width: 0; }
    }

    @keyframes shooting {
        0% { transform: translateX(0); opacity: 1; }
        100% { transform: translateX(300px); opacity: 0; }
    }

    @keyframes sky {
        0% { transform: rotate(45deg); }
        100% { transform: rotate(405deg); }
    }

    /* Layout Three  */
    .background--three .item {
        position: absolute;
        top: -20px;
        border-radius: 50%;
        background: var(--bbe-theme-color);
        box-shadow: 0 0 10px var(--bbe-theme-color);
        opacity: .8;
        animation: snowfall linear infinite;
    }

    .background--three .item:nth-child(1) {
        left:3%;
        width:3px;
        height:3px;
        animation-duration:11s;
    }

    .background--three .item:nth-child(2) {
        left:8%;
        width:6px;
        height:6px;
        animation-duration:15s;
    }

    .background--three .item:nth-child(3) {
        left:13%;
        width:4px;
        height:4px;
        animation-duration:9s;
    }

    .background--three .item:nth-child(4) {
        left:18%;
        width:7px;
        height:7px;
        animation-duration:13s;
    }

    .background--three .item:nth-child(5) {
        left:23%;
        width:5px;
        height:5px;
        animation-duration:17s;
    }

    .background--three .item:nth-child(6) {
        left:28%;
        width:4px;
        height:4px;
        animation-duration:10s;
    }

    .background--three .item:nth-child(7) {
        left:33%;
        width:8px;
        height:8px;
        animation-duration:16s;
    }

    .background--three .item:nth-child(8) {
        left:38%;
        width:3px;
        height:3px;
        animation-duration:12s;
    }

    .background--three .item:nth-child(9) {
        left:43%;
        width:6px;
        height:6px;
        animation-duration:14s;
    }

    .background--three .item:nth-child(10) {
        left:48%;
        width:5px;
        height:5px;
        animation-duration:11s;
    }

    .background--three .item:nth-child(11) {
        left:53%;
        width:7px;
        height:7px;
        animation-duration:18s;
    }

    .background--three .item:nth-child(12) {
        left:58%;
        width:4px;
        height:4px;
        animation-duration:9s;
    }

    .background--three .item:nth-child(13) {
        left:63%;
        width:6px;
        height:6px;
        animation-duration:13s;
    }

    .background--three .item:nth-child(14) {
        left:68%;
        width:3px;
        height:3px;
        animation-duration:15s;
    }

    .background--three .item:nth-child(15) {
        left:73%;
        width:8px;
        height:8px;
        animation-duration:12s;
    }

    .background--three .item:nth-child(16) {
        left:78%;
        width:5px;
        height:5px;
        animation-duration:17s;
    }

    .background--three .item:nth-child(17) {
        left:83%;
        width:4px;
        height:4px;
        animation-duration:10s;
    }

    .background--three .item:nth-child(18) {
        left:88%;
        width:7px;
        height:7px;
        animation-duration:14s;
    }

    .background--three .item:nth-child(19) {
        left:93%;
        width:3px;
        height:3px;
        animation-duration:11s;
    }

    .background--three .item:nth-child(20) {
        left:98%;
        width:6px;
        height:6px;
        animation-duration:16s;
    }

    @keyframes snowfall {
        0% {
            transform: translateY(-20px) translateX(0);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        25% {
            transform: translateY(25vh) translateX(-15px);
        }

        50% {
            transform: translateY(50vh) translateX(15px);
        }

        75% {
            transform: translateY(75vh) translateX(-10px);
        }

        100% {
            transform: translateY(110vh) translateX(20px);
            opacity: 0;
        }
    }

    /* Layout Four */
    .background--four .bbe-background .item {
        position: absolute;
        display: block;
        width: 40px;
        height: 40px;
        background-color: var(--bbe-theme-color);
        bottom: -160px;
        animation: floatUp 25s infinite;
        transition-timing-function: linear;
    }

    .background--four .bbe-background .item:nth-child(1) { 
        left: 10%;
        opacity: 0.15;
    }

    .background--four .bbe-background .item:nth-child(2) {
        left: 20%;
        width: 80px;
        height: 80px;
        animation-delay: 2s;
        animation-duration: 17s;
        opacity: 0.35;
    }

    .background--four .bbe-background .item:nth-child(3) {
        left: 25%;
        animation-delay: 4s;
        opacity: 0.20;
    }

    .background--four .bbe-background .item:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px; 
        animation-duration: 22s;
        opacity: 0.45;
    }

    .background--four .bbe-background .item:nth-child(5) {
        left: 70%;
        opacity: 0.30;
    }

    .background--four .bbe-background .item:nth-child(6) {
        left: 80%;
        width: 120px;
        height: 120px;
        animation-delay: 3s;
        opacity: 0.50;
    }

    .background--four .bbe-background .item:nth-child(7) {
        left: 32%;
        width: 160px;
        height: 160px;
        animation-delay: 7s;
        opacity: 0.20;
    }

    .background--four .bbe-background .item:nth-child(8) {
        left: 55%;
        width: 20px;
        height: 20px;
        animation-delay: 15s;
        animation-duration: 40s;
        opacity: 0.40;
    }

    .background--four .bbe-background .item:nth-child(9) {
        left: 25%;
        width: 10px;
        height: 10px;
        animation-delay: 2s;
        animation-duration: 40s;
        opacity: 0.60;
    }

    .background--four .bbe-background .item:nth-child(10) {
        left: 90%;
        width: 160px;
        height: 160px;
        animation-delay: 11s;
        opacity: 0.25;
    }

    .background--four .bbe-background .item:nth-child(n + 11) {
        display: none;
    }

    @keyframes floatUp {
        0%   { transform: translateY(0) rotate(0deg); }
        100% { transform: translateY(-120vh) rotate(600deg); }
    }