.hCategories {
    height: calc(100vh - 13px);
    margin: 7px 0px 0px -11px !important;
    overflow: auto;
}

.hCategories .category {
    padding: 0px;
    -webkit-transition: filter 500ms linear;
    -moz-transition: filter 500ms linear;
    -o-transition: filter 500ms linear;
    -ms-transition: filter 500ms linear;
    transition: filter 500ms linear;
}

.hCategories .category a {
    text-decoration: none;
}

.hCategories .category .details {
    text-align: center;
    display: grid;
    padding-left: 1vw;
    justify-content: start;
    align-items: center;
    -webkit-transition: background 500ms linear;
    -moz-transition: background 500ms linear;
    -o-transition: background 500ms linear;
    -ms-transition: background 500ms linear;
    transition: background 500ms linear;
}

.hCategories .category .details:hover {
    background: rgba(0,0,0,0.5) !important;
}

.hCategories .category .details .title {
    opacity: 0;
    margin-bottom: 5px;
    color: #fff;
    font-size: 22px;
    font-weight: bolder;
    text-shadow: 3px 3px 7px rgba(0,0,0,0.3);

    -webkit-transition: opacity 300ms linear;
    -moz-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear;
    -ms-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
}

.hCategories .category .details:hover .title {
    opacity: 1;
}

.hCategories .category .details .desc {
    opacity: 0;
    color: #fff;
    font-size: 12px;
    font-weight: bolder;

    -webkit-transition: opacity 300ms linear;
    -moz-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear;
    -ms-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
}

.hCategories .category .details:hover .desc {
    opacity: 1;
}


.is-active {
    .details{
        background: rgba(0, 0, 0, 0.5) !important;
    }
    .details .title {
        opacity: 1 !important;
    }
     .details .desc {
        opacity: 1 !important;
    }
}