/* 

    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 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 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;
        }
    }