.resource-all-banner-bg {
    background-image: url(https://www.coolmuster.com/public/module/resource/assets/images/3_0/all/banner.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: auto;
    height: 420px;
}

.resource-one-card-size {
    height: 280px;
    width: 244px;
    max-width: 280px;
    margin-right: 20px;
    margin-top: 20px;
}

.resource-one-card-size:hover {
    border-bottom: 5px solid #ff7000;
}

.resource-one-card-size a{
    text-decoration: none;
    color: #2e2e2e;
    font-weight: bold;
}

.resource-left-menu-font{
    color: #2e2e2e;
}

a.resource-left-menu-font:hover{
    color:#2e2e2e
}

.nav-pills .nav-link.active{
    background-color: #F4F9FF;
    color: black;
    font-weight: bold;
    border-left: 3px solid #67a4ff;
    border-top: 0px;
    border-radius: 0;
}

.resource-left-menu-size{
    width: 260px !important;
    min-width: 260px;
    flex-direction: column;
}

.resource-left-category-intro{
    display:flex;
    flex-direction: row;
}

.resource-left-category-intro-button{
    background-color: #FF7000;
    color: white;
}

.resource-left-category-intro-button:hover{
    color: white;
}

.resource-left-shadow{
    box-shadow: 0 .4rem 0.6rem rgba(0,0,0,.15)!important;
}

.resource-left-menu-layout{
    display:flex !important;
}

.resource-left-menu-all-topics{
    display: inline-block;
}

@media (min-width: 1400px){
    .resource-one-card-size {
        width: 304px;
        max-width: 310px;
    }
}

@media (max-width: 575.98px) {
    .resource-one-card-size {
        width: 280px;
    }

    .resource-left-menu-size{
        width: auto;
        min-width: 100%;
        flex-direction: row;
    }

    .resource-left-menu-layout{
        display:block !important;
    }

    .nav-pills .nav-link.active{
        background-color: #F4F9FF;
        color: black;
        font-weight: bold;
        border-top: 3px solid #67a4ff;
        border-radius: 0;
        border-left:0px;
    }

    .resource-left-menu-all-topics{
        display: none;
    }

    .resource-left-category-intro{
        flex-direction: column;
    }

    .intro-img{
        width:100%;
    }
}