.blog-item {
    cursor: pointer;
}

.blog-item .shadow-sm {
    background-color: white;
    transition: ease .5s;
}

@media (min-width: 768px) {
    .blog-item .shadow-sm:hover {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }
}

.blog-category {
    color: #2ca8c7;
    transition: ease .2s;
    cursor: pointer;
}

.blog-category:hover {
    background-color: #e0e0e0;
}

.blog-category.blog-category-active {
    color: white;
    background-color: #2ca8c7;
}

.blog-thumbnail-container {
    overflow: hidden;
}

.blog-thumbnail {
    margin-top: 0;
    transition: ease .8s;
}

.blog-description{
    font-size: small;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: ease .5s;
}

.blog-description div{
    position: absolute;
}

@media (min-width: 768px) {
    .blog-item:hover .blog-thumbnail {
        margin-top: -100%;
    }

    .blog-item:hover .blog-description {
        opacity: 1;
        transition: ease .8s;
    }

    .blog-item:hover .hr-light-blue {
        width: 50% !important;
    }
}

.hr-light-blue {
    transition: ease .5s;
}

.pagination-button {
    font-size: small;
    font-weight: bold;
    background-color: white;
    color: #186f98;
    cursor: pointer;
    transition: ease .2s;
}

.pagination-button i {
    color: #186f98;
}

.pagination-button:hover {
    color: white;
    background-color: #2ca8c7;
}

.pagination-button:hover i {
    color: white;
}

.pagination-button.disabled {
    pointer-events: none;
    color: #cecece;
}

.pagination-button.disabled i {
    color: #cecece;
}

.pagination-count {
    font-size: small;
    font-weight: bold;
    background-color: white;
    color: #6c757d;
}

pre p {
    margin: 0;
}