/*
==================
    1.0  Header Builder
        1.1 Site Identity
        1.2 Primary Menu
        1.3 Search
        1.4 Dark Mode
==================
*/

/* Social Icons */
/* Official Colors */
/* Facebook */
.official--on .facebook i {
    color: var(--bbe-site-facebook-color);
}

.official--on.outline .facebook i {
    border-color: var(--bbe-site-facebook-color);
}

.official--on.outline .facebook i:hover {
    color: #fff;
    background: var(--bbe-site-facebook-color);
}

.official--on.filled .facebook i {
    color: #fff;
    background: var(--bbe-site-facebook-color);
}

.official--on.filled .facebook i:hover {
    background: #4191f9;
}

/* Twitter */
.official--on .twitter i {
    color: var(--bbe-site-twitter-color);
}

.official--on.outline .twitter i {
    border-color: var(--bbe-site-twitter-color);
}

.official--on.outline .twitter i:hover {
    color: #fff;
    background: var(--bbe-site-twitter-color);
}

.official--on.filled .twitter i {
    color: #fff;
    background: var(--bbe-site-twitter-color);
}

.official--on.filled .twitter i:hover {
    background: #42b5fb;
}

/* Instagram */
.official--on .instagram i {
    background: var(--bbe-site-instagram-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.official--on.outline .instagram i {
    border-color: #f56040;
}

.official--on.outline .instagram i:hover {
    -webkit-text-fill-color: #fff;
    background: var(--bbe-site-instagram-color);
}

.official--on.filled .instagram i {
    -webkit-text-fill-color: #fff;
    background: var(--bbe-site-instagram-color);
}

.official--on.filled .instagram i:hover {
    background: linear-gradient(192deg, #5A73EB, #6F6AE3, #9A57C2, #D04C96, #E5527A, #FF4A4A, #F77A57, #F88C55, #FDBB5F, #FFE39A);
}

/* Threads */
.official--on .threads i {
    color: var(--bbe-site-threads-color);
}

.official--on.outline .threads i {
    border-color: var(--bbe-site-threads-color);
}

.official--on.outline .threads i:hover {
    color: #fff;
    background: var(--bbe-site-threads-color);
}

.official--on.filled .threads i {
    color: #fff;
    background: var(--bbe-site-threads-color);
}

.official--on.filled .threads i:hover {
    background: #585858;
}

/* WhatsApp */
.official--on .whatsapp i {
    color: var(--bbe-site-whatsapp-color);
}

.official--on.outline .whatsapp i {
    border-color: var(--bbe-site-whatsapp-color);
}

.official--on.outline .whatsapp i:hover {
    color: #fff;
    background: var(--bbe-site-whatsapp-color);
}

.official--on.filled .whatsapp i {
    color: #fff;
    background: var(--bbe-site-whatsapp-color);
}

.official--on.filled .whatsapp i:hover {
    background: #38e378;
}

/* X */
.official--on .x i {
    color: var(--bbe-site-x-color);
}

.official--on.outline .x i {
    border-color: var(--bbe-site-x-color);
}

.official--on.outline .x i:hover {
    color: #fff;
    background: var(--bbe-site-x-color);
}

.official--on.filled .x i {
    color: #fff;
    background: var(--bbe-site-x-color);
}

.official--on.filled .x i:hover {
    background: #585858;
}

/* TikTok */
.official--on .tiktok i {
    color: var(--bbe-site-tiktok-color);
}

.official--on.outline .tiktok i {
    border-color: var(--bbe-site-tiktok-color);
}

.official--on.outline .tiktok i:hover {
    color: #fff;
    background: var(--bbe-site-tiktok-color);
}

.official--on.filled .tiktok i {
    color: #fff;
    background: var(--bbe-site-tiktok-color);
}

.official--on.filled .tiktok i:hover {
    background: #585858;
}

/* Snapchat */
.official--on .snapchat i {
    color: var(--bbe-site-snapchat-color);
}

.official--on.outline .snapchat i {
    border-color: var(--bbe-site-snapchat-color);
}

.official--on.outline .snapchat i:hover {
    color: #fff;
    background: var(--bbe-site-snapchat-color);
}

.official--on.filled .snapchat i {
    color: #fff;
    background: var(--bbe-site-snapchat-color);
}

.official--on.filled .snapchat i:hover {
    background: #e1df26;
}

/* Pinterest */
.official--on .pinterest i {
    color: var(--bbe-site-pinterest-color);
}

.official--on.outline .pinterest i {
    border-color: var(--bbe-site-pinterest-color);
}

.official--on.outline .pinterest i:hover {
    color: #fff;
    background: var(--bbe-site-pinterest-color);
}

.official--on.filled .pinterest i {
    color: #fff;
    background: var(--bbe-site-pinterest-color);
}

.official--on.filled .pinterest i:hover {
    background: #ff3e5b;
}

/* Reddit */
.official--on .reddit i {
    color: var(--bbe-site-reddit-color);
}

.official--on.outline .reddit i {
    border-color: var(--bbe-site-reddit-color);
}

.official--on.outline .reddit i:hover {
    color: #fff;
    background: var(--bbe-site-reddit-color);
}

.official--on.filled .reddit i {
    color: #fff;
    background: var(--bbe-site-reddit-color);
}

.official--on.filled .reddit i:hover {
    background: #fd8559;
}

/* Tumblr */
.official--on .tumblr i {
    color: var(--bbe-site-tumblr-color);
}

.official--on.outline .tumblr i {
    border-color: var(--bbe-site-tumblr-color);
}

.official--on.outline .tumblr i:hover {
    color: #fff;
    background: var(--bbe-site-tumblr-color);
}

.official--on.filled .tumblr i {
    color: #fff;
    background: var(--bbe-site-tumblr-color);
}

.official--on.filled .tumblr i:hover {
    background: #536e91;
}

/* Mastodon */
.official--on .mastodon i {
    color: var(--bbe-site-mastodon-color);
}

.official--on.outline .mastodon i {
    border-color: var(--bbe-site-mastodon-color);
}

.official--on.outline .mastodon i:hover {
    color: #fff;
    background: var(--bbe-site-mastodon-color);
}

.official--on.filled .mastodon i {
    color: #fff;
    background: var(--bbe-site-mastodon-color);
}

.official--on.filled .mastodon i:hover {
    background: #8384fb;
}

/* Bluesky */
.official--on .bluesky i {
    color: var(--bbe-site-bluesky-color);
}

.official--on.outline .bluesky i {
    border-color: var(--bbe-site-bluesky-color);
}

.official--on.outline .bluesky i:hover {
    color: #fff;
    background: var(--bbe-site-bluesky-color);
}

.official--on.filled .bluesky i {
    color: #fff;
    background: var(--bbe-site-bluesky-color);
}

.official--on.filled .bluesky i:hover {
    background: #41a4ff;
}

/* LinkedIn */
.official--on .linkedin i {
    color: var(--bbe-site-linkedin-color);
}

.official--on.outline .linkedin i {
    border-color: var(--bbe-site-linkedin-color);
}

.official--on.outline .linkedin i:hover {
    color: #fff;
    background: var(--bbe-site-linkedin-color);
}

.official--on.filled .linkedin i {
    color: #fff;
    background: var(--bbe-site-linkedin-color);
}

.official--on.filled .linkedin i:hover {
    background: #4483c3;
}

/* YouTube */
.official--on .youtube i {
    color: var(--bbe-site-youtube-color);
}

.official--on.outline .youtube i {
    border-color: var(--bbe-site-youtube-color);
}

.official--on.outline .youtube i:hover {
    color: #fff;
    background: var(--bbe-site-youtube-color);
}

.official--on.filled .youtube i {
    color: #fff;
    background: var(--bbe-site-youtube-color);
}

.official--on.filled .youtube i:hover {
    background: #ff6060;
}

/* Twitch */
.official--on .twitch i {
    color: var(--bbe-site-twitch-color);
}

.official--on.outline .twitch i {
    border-color: var(--bbe-site-twitch-color);
}

.official--on.outline .twitch i:hover {
    color: #fff;
    background: var(--bbe-site-twitch-color);
}

.official--on.filled .twitch i {
    color: #fff;
    background: var(--bbe-site-twitch-color);
}

.official--on.filled .twitch i:hover {
    background: #8769bf;
}

/* Vimeo */
.official--on .vimeo i {
    color: var(--bbe-site-vimeo-color);
}

.official--on.outline .vimeo i {
    border-color: var(--bbe-site-vimeo-color);
}

.official--on.outline .vimeo i:hover {
    color: #fff;
    background: var(--bbe-site-vimeo-color);
}

.official--on.filled .vimeo i {
    color: #fff;
    background: var(--bbe-site-vimeo-color);
}

.official--on.filled .vimeo i:hover {
    background: #57d3fb;
}

/* Dailymotion */
.official--on .dailymotion i {
    color: var(--bbe-site-dailymotion-color);
}

.official--on.outline .dailymotion i {
    border-color: var(--bbe-site-dailymotion-color);
}

.official--on.outline .dailymotion i:hover {
    color: #fff;
    background: var(--bbe-site-dailymotion-color);
}

.official--on.filled .dailymotion i {
    color: #fff;
    background: var(--bbe-site-dailymotion-color);
}

.official--on.filled .dailymotion i:hover {
    background: #5fc2f3;
}

/* Discord */
.official--on .discord i {
    color: var(--bbe-site-discord-color);
}

.official--on.outline .discord i {
    border-color: var(--bbe-site-discord-color);
}

.official--on.outline .discord i:hover {
    color: #fff;
    background: var(--bbe-site-discord-color);
}

.official--on.filled .discord i {
    color: #fff;
    background: var(--bbe-site-discord-color);
}

.official--on.filled .discord i:hover {
    background: #848df3;
}

/* Telegram */
.official--on .telegram i {
    color: var(--bbe-site-telegram-color);
}

.official--on.outline .telegram i {
    border-color: var(--bbe-site-telegram-color);
}

.official--on.outline .telegram i:hover {
    color: #fff;
    background: var(--bbe-site-telegram-color);
}

.official--on.filled .telegram i {
    color: #fff;
    background: var(--bbe-site-telegram-color);
}

.official--on.filled .telegram i:hover {
    background: #359bcf;
}

/* Skype */
.official--on .skype i {
    color: var(--bbe-site-skype-color);
}

.official--on.outline .skype i {
    border-color: var(--bbe-site-skype-color);
}

.official--on.outline .skype i:hover {
    color: #fff;
    background: var(--bbe-site-skype-color);
}

.official--on.filled .skype i {
    color: #fff;
    background: var(--bbe-site-skype-color);
}

.official--on.filled .skype i:hover {
    background: #36bbed;
}

/* Viber */
.official--on .viber i {
    color: var(--bbe-site-viber-color);
}

.official--on.outline .viber i {
    border-color: var(--bbe-site-viber-color);
}

.official--on.outline .viber i:hover {
    color: #fff;
    background: var(--bbe-site-viber-color);
}

.official--on.filled .viber i {
    color: #fff;
    background: var(--bbe-site-viber-color);
}

.official--on.filled .viber i:hover {
    background: #8d7ef5;
}

/* WeChat */
.official--on .weixin i {
    color: var(--bbe-site-weixin-color);
}

.official--on.outline .weixin i {
    border-color: var(--bbe-site-weixin-color);
}

.official--on.outline .weixin i:hover {
    color: #fff;
    background: var(--bbe-site-weixin-color);
}

.official--on.filled .weixin i {
    color: #fff;
    background: var(--bbe-site-weixin-color);
}

.official--on.filled .weixin i:hover {
    background: #3dcf83;
}

/* QQ */
.official--on .qq i {
    color: var(--bbe-site-qq-color);
}

.official--on.outline .qq i {
    border-color: var(--bbe-site-qq-color);
}

.official--on.outline .qq i:hover {
    color: #fff;
    background: var(--bbe-site-qq-color);
}

.official--on.filled .qq i {
    color: #fff;
    background: var(--bbe-site-qq-color);
}

.official--on.filled .qq i:hover {
    background: #3bc5f9;
}

/* KK */
.official--on .kk i {
    color: var(--bbe-site-kk-color);
}

.official--on.outline .kk i {
    border-color: var(--bbe-site-kk-color);
}

.official--on.outline .kk i:hover {
    color: #fff;
    background: var(--bbe-site-kk-color);
}

.official--on.filled .kk i {
    color: #fff;
    background: var(--bbe-site-kk-color);
}

.official--on.filled .kk i:hover {
    background: #efdc32;
}

/* Odnoklassniki */
.official--on .odnoklassniki i {
    color: var(--bbe-site-odnoklassniki-color);
}

.official--on.outline .odnoklassniki i {
    border-color: var(--bbe-site-odnoklassniki-color);
}

.official--on.outline .odnoklassniki i:hover {
    color: #fff;
    background: var(--bbe-site-odnoklassniki-color);
}

.official--on.filled .odnoklassniki i {
    color: #fff;
    background: var(--bbe-site-odnoklassniki-color);
}

.official--on.filled .odnoklassniki i:hover {
    background: #ed9d43;
}

/* Weibo */
.official--on .weibo i {
    color: var(--bbe-site-weibo-color);
}

.official--on.outline .weibo i {
    border-color: var(--bbe-site-weibo-color);
}

.official--on.outline .weibo i:hover {
    color: #fff;
    background: var(--bbe-site-weibo-color);
}

.official--on.filled .weibo i {
    color: #fff;
    background: var(--bbe-site-weibo-color);
}

.official--on.filled .weibo i:hover {
    background: #e54254;
}

/* Renren */
.official--on .renren i {
    color: var(--bbe-site-renren-color);
}


.official--on.outline .renren i {
    border-color: var(--bbe-site-renren-color);
}

.official--on.outline .renren i:hover {
    color: #fff;
    background: var(--bbe-site-renren-color);
}

.official--on.filled .renren i {
    color: #fff;
    background: var(--bbe-site-renren-color);
}

.official--on.filled .renren i:hover {
    background: #277cc3;
}

/* ========= Global ================ */
    .align--center .content-wrapper .entry-categories,
    .align--center .content-wrapper .entry-categories,
    .align--center .content-wrapper .entry-meta,
    .align--center .entry-inner .entry-categories,
    .align--center .entry-inner .entry-meta {
        justify-content: center;
    }

    .align--right .content-wrapper .entry-categories,
    .align--right .content-wrapper .entry-meta,
    .align--right .entry-inner .entry-categories,
    .align--right .entry-inner .entry-meta {
        justify-content: right;
    }

/* Button Hover Effects */
    .controller-wrap .filled {
        --bbe-site-bg-color: #30344b;
        background: var(--bbe-site-bg-color);
    } 

    .controller-wrap .outline {
        border: 1px solid var(--bbe-site-border-color);
    }

    .controller-wrap .rounded {
        border-radius: 6px;
    }

    .controller-wrap .circle {
        border-radius: 30px;
    }