/*
 * Bootstrap 5 port of the Native Church / Balanced By Oils theme.
 * Loaded last: keeps the Bootstrap 3-era look (style.css) working on Bootstrap 5,
 * and styles the components that replaced the old jQuery plugins.
 */

/* Bootstrap 3 metrics the design was built on */
body { font-size: 14px; line-height: 1.42857143; }
a { text-decoration: none; }
@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}
h1, h2, h3, h4, h5, h6 { line-height: 1.1; }

/* Bootstrap 3 helper classes still used in page content */
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; }
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; color: #fff; border-radius: .25em; }
.text-align-right { text-align: right; }
.clearfix::after { content: ""; display: table; clear: both; }
@media (max-width: 575.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 576px) and (max-width: 991.98px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) { .visible-xs, .visible-sm { display: none !important; } }
.col-xs-1 { flex: 0 0 auto; width: 8.333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.333333%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-8 { flex: 0 0 auto; width: 66.666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* The menu bar is absolutely positioned; in Bootstrap 3 it spanned the column, so pin it to the column's inner edges */
@media (min-width: 992px) {
    .navigation { left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5); }
}

/* Header: sticky main menu (was jquery.sticky) */
.main-menu-wrapper { position: sticky; top: 0; z-index: 100; }
.logged-in .main-menu-wrapper { top: 48px; } /* below the Concrete toolbar */
.site-header .menu-toggle { background: none; border: 0; color: inherit; font-size: 24px; }
@media (max-width: 991.98px) {
    .main-menu-wrapper { display: none; position: static; }
    .main-menu-wrapper.open { display: block; position: relative; z-index: 200; }
    .navigation > ul > li { float: none; display: block; }
    .navigation > ul > li ul { position: static; display: block; box-shadow: none; }
    .navigation > ul > li ul:before { display: none; }
}

/* Breadcrumbs: Bootstrap 5 adds its own separators; the theme draws its own */
.breadcrumb { background: none; margin: 0; padding: 0; justify-content: center; }
.breadcrumb > li + li::before { content: "/\00a0"; padding: 0 5px; color: #ccc; }

/* Hero slider (was FlexSlider): Bootstrap carousel with the same size and position */
.hero-slider.carousel { height: 500px; }
.hero-slider .carousel-inner,
.hero-slider .carousel-item { height: 100%; }
.hero-slider .carousel-item { background-size: cover; background-position: center; }
.hero-slider .carousel-indicators { opacity: 0; transition: opacity .3s .2s; }
.hero-slider:hover .carousel-indicators { opacity: 1; }
.hero-slider .carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 100%; margin: 0 6px; border: 0; }

/* Galleries (was isotope + prettyPhoto) */
.gallery-grid { margin-top: 20px; }
.gallery-grid .grid-item { margin-bottom: 30px; }
.gallery-grid .grid-item img { width: 100%; height: auto; }

/* Videos (was JW Player) */
video { width: 100%; background: #000; }

/* Blog tags */
.tag-cloud { margin: 15px 0; }
.tag-cloud i { margin-right: 6px; }
.tag-cloud a { display: inline-block; margin: 0 6px 6px 0; padding: 2px 8px; border: 1px solid #e5e5e5; border-radius: 3px; }

#back-to-top { display: none; }
#back-to-top.visible { display: block; }