body {
    margin: 0;
    font-family: 'SF Compact Display Regular';
    font-size: 15px;
    line-height: 1.3;
    color: #212529;
}

.title {
    font-family: 'Playfair Display Bold';
    font-size: 0.9rem;
    line-height: 1.3;
}

.title-lg {
    font-family: 'Playfair Display Bold';
    /* font-size: 22px; */
    line-height: 1.3;
}

.og-sf-title {
    font-family: 'SF Compact Display Medium';
    font-size: 15px;
}

.og-sf-bold-title {
    font-family: 'SF Compact Display bold';
    font-size: 15px;
}

.category-title {
    font-family: 'SF Compact Display Semibold';
    font-size: 13px;
    line-height: 1.3;
    padding: 7px;
    background-color: #008BF4 !important;
    color: white !important;
}

.post-image {
    border-radius: 6px
}

.time-label {
    font-size: 14px;
}

a[href] {
    cursor: pointer;
    text-decoration: none;
    color: #212529;
}

.og-success {
    background-color: #008BF4
}

.og-light {
    background-color: #DCDDE5
}

.og-badge {
    position: absolute;
    font-family: 'SF Compact Display Medium';
    font-size: 13px;
    left: 10px;
    bottom: 10px;
    border-radius: 0.15rem;

}

.badge-title {
    position: absolute;
    line-height: 1.2;
}

.position-relative .og-shadow {
    background: rgb(0, 0, 0);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9220063025210083) 0%, rgba(255, 255, 255, 0.07326680672268904) 49%);
}

.og-image-card {
    border-radius: 6px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center"
}
/* RESPONSIVE */
.gs-o-responsive-image {
    border-radius: 6px;
    position: relative;
    height: auto;
    background-color: #f0f0f0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNC4xNiIgaGVpZ2h0PSI1Mi4wMTUiIHZpZXdCb3g9IjAgMCAzNC4xNiA1Mi4wMTUiPg0KICA8ZyBpZD0iR3JvdXBfMSIgZGF0YS1uYW1lPSJHcm91cCAxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQ0LjEwNiAtMjIuODMpIj4NCiAgICA8cGF0aCBpZD0iRmlsbF80NCIgZGF0YS1uYW1lPSJGaWxsIDQ0IiBkPSJNMTQuODQ4LjQ2OGExMS41MzQsMTEuNTM0LDAsMCwxLS43MjMsMi44NjRjLTEuOTUzLDUuMjU5LTUuNjg1LDkuNTM3LTguOTQ3LDE0LTQuNyw2LjQzMi02LjYxNiwxNC41ODMtNCwyMi4yNzFhMjQuMTQxLDI0LjE0MSwwLDAsMCw4LjMsMTEuMTc0Yy4yMTQuMTY5LjQwOC4zLjU3My40MTIuMzUuMjI4LjYyNS4xMjIuNjk0LS4xMjYuMzc2LTEuMzcsMS43MTYtNS42LDYuNjEzLTEwLjQ4NEEyNC45ODEsMjQuOTgxLDAsMCwwLDIyLjU3NSwzMy4yYzIuMDM2LTQuNDc3LDEuOTctOS41LjkzNC0xNC4yMjhhNjIuMTgxLDYyLjE4MSwwLDAsMC02Ljc3LTE2LjYwOEEyNC4zNzMsMjQuMzczLDAsMCwwLDE1LjM1Ny4xMzljLS4yOC0uMzc1LS40ODguMS0uNTA5LjMyOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQ0LjEwNiAyMi44MykiIGZpbGw9IiNmZmYiLz4NCiAgICA8cGF0aCBpZD0iRmlsbF80NiIgZGF0YS1uYW1lPSJGaWxsIDQ2IiBkPSJNLjY2OSwzMy41NTRjLTEuMy0uMTQzLS4zNDMtMi44MjYtLjEtMy40ODIsMS40ODctMy45Nyw0LjYxNC02LjcsNy0xMC4wNzNBMjIuMzczLDIyLjM3MywwLDAsMCwxMS42NTYsOS4wNDVhMjkuNjU2LDI5LjY1NiwwLDAsMC0uNTYzLTguNWMtLjExNC0uNTY4LjQyNC0uNzUuOC0uMjY5LDQuNTE2LDUuNzUzLDguMDM1LDEzLjIsNS45NDEsMjAuNjE5QTE3Ljg1LDE3Ljg1LDAsMCwxLDQuNSwzMy4zOTRhMTIuNjI0LDEyLjYyNCwwLDAsMS0zLjgzMS4xNjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1OS44MTEgNDEuMjE0KSIgZmlsbD0iI2ZmZiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 30%;
}
.gs-o-responsive-image img {
    border-radius: 6px;
    width: 100%;
    height: auto;

}
@media (max-width: 768px) {
    .gs-o-responsive-image img {
        height: auto;
    }
}

.black-wall {
    position: absolute;
    /* Position the background text */
    bottom: 0;
    /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0);
    /* Fallback color */
    background: rgba(0, 0, 0, 0.3);
    /* Black background with 0.5 opacity */
    width: 100%;
    /* Full width */
    height: 100%;
    padding: 15px;
    /* Some padding */
}

input:focus {
    box-shadow: none !important;
    border-color: none !important
}

.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

@media (max-width: 600px) {
    .banner-wrapper img {
        object-fit: contain;
    }
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color:  #008BF4;
    border-color: #008BF4;
}