:root {
    --cc-primary: #003a4e;
    --cc-cre: rgb(52, 152, 219);
    --cc-rco: rgb(155, 89, 182);
    --cc-swmr: rgb(192, 57, 43);
    --cc-st: rgb(211, 84, 0);
    --cc-wcp: rgb(241, 196, 15);
    --cc-pimary-rgb: 8, 61, 101;

    --cccc: rgb(8, 61, 101); /* Blue */
    --cem: rgb(62, 32, 84); /* Purple */
    --rhc: rgb(212, 196, 18); /* Yellow */
    --sws: rgb(0, 148, 216); /* Light Blue */
    --cre: rgb(246, 179, 48); /* Orange */
    --dce: rgb(129, 189, 65); /* Green */
    --sbd: rgb(183, 106, 190); /* Pink */
}

#resource-toolkit {
    width: 60rem;
    height: 25rem;
    object-fit: cover;
    -webkit-clip-path: polygon(0 0, 0 21rem, 59rem 19rem, 48rem 0);
    clip-path: polygon(0 0, 0 21rem, 59rem 19rem, 48rem 0);
    position: absolute;
    top: 0rem;
    transform: translateY(-5rem)
}

#toolkit-thumbnail {
    position: absolute;
    left: -8rem;
    bottom: 15rem;
}

.diagonal {
    -webkit-clip-path: polygon(0 0, 0 4.15vw, 100vw 0, 100vw 0);
    clip-path: polygon(0 0, 0 4.15vw, 100vw 0, 100vw 0);
    height: 15rem;
    width: 100%;
    position: absolute;
    transform: translateY(-1px); 
}

@media (max-width: 576px) {
    .diagonal {
        transform: translateY(0px);
    }
}


.bg-cc-cre {
    background-color: var(--cc-cre)
}
.bg-cc-rco {
    background-color: var(--cc-rco)
}
.bg-cc-swmr {
    background-color: var(--cc-swmr)
}
.bg-cc-st {
    background-color: var(--cc-st)
}
.bg-cc-wcp {
    background-color: var(--cc-wcp)
}

.bg-cc-blogItem {
    background-color: var(--cc-primary);
}

#resourceHeroImg {
    filter: brightness(75%);
}

/*@media (max-width: 992px) {
    #resourceHero,
    #resourceHeroImg,
    #resourceHeroText {
        height: 45vh;
    }
}*/

#resourcesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    grid-column-gap: 2rem;
    grid-row-gap: 5rem;
}

#resourcesGridContainer {
    height: 75rem;
    overflow:hidden;
}

@media (max-width: 576px) {
    #resourcesGridContainer {
        height: 90rem;
    }
}

#resourcesGrid > .resourceGridItem > .resourceItem {
    width: 100%;
}

    #resourcesGrid > .resourceGridItem > .resourceItem > img {
        width: 100%;
        max-height: 15rem;
        object-fit: cover;
    }

#resourceContainer {
    scroll-margin: 6rem;
}
#loadMore {
    scroll-margin: 50rem;
}

.placeholder-text-white::placeholder,
.placeholder-text-white:not(:focus) {
    color: white;
}

#resourceSort .btn-check + .btn {
    text-align: left;
}

#resourceFilterDropdown .btn-check:checked + .btn {
    background: rgba(0,0,0,.05);
    border: 0 !important;
}