ul{
    padding: 0;
}
li{
    color: #fff !important;
    font-weight: 400;
}

.themeHighlight{
    position: relative;
    z-index: 800;
}

.themeHighlight::after{
    position: absolute;
    bottom: 0;
    left: -5px;
    content: "";
    background-color: var(--projectColor);
    width: 50px;
    height: 10px;
    z-index: -1;
}

.projectColorBG{
    background-color: var(--projectColor);
    border: 2px dashed var(--projectColor);
    
}

.projectColorBG div, .projectColorBG i{
    transition: .3s;
}

.projectColorBG:hover div, .projectColorBG:hover i{
    color: var(--projectColor) !important;
    transition: .3s;
}

.fancy {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

.text-primary{
    color: var(--projectColor) !important;
}

.width50{
    width: 50%;
    max-width:50%; 
    margin-left: 25%;
}

.glassHover i{
    transition: .25s;
}

.glassHover:hover i{
    margin-right: 15px !important;
    transition: .25s;
}

@media (width <= 800px) { /* MD breakpoint */
    .width50{
        width: 80%;
        max-width: 80%;
        margin-left: 10%;
    }

}

@media (width <= 992px) { /* LG breakpoint */
    .width50{
        width: 80%;
        max-width: 80%;
        margin-left: 10%;
    }

    .projectColorBG{
        border-radius: 0 !important;
    }
}

.menu-item{
    color: #FFFFFF8C !important;
}

/* Project datalist */
.projects-datalist-grid, .projects-datalist-grid2{


    background-color: var(--projectColor);
    height: 80px;
    text-transform: uppercase;


    opacity: .9;

    transition: .3s;
    /*transform: skew(-20deg) !important;*/
}

.categoryContainer:first-of-type .projects-datalist-grid2{
    border-radius: 30px 0 0 0;
}

.categoryContainer:nth-of-type(4) .projects-datalist-grid2{
    border-radius: 0 30px 0 0;
}

.categoryContainer:nth-of-type(5) .projects-datalist-grid2{
    border-radius: 0 0 0 30px;
}

.categoryContainer:last-of-type .projects-datalist-grid2{
    border-radius: 0 0 30px 0;
}

.projects-datalist-grid:hover, .projects-datalist-grid2:hover{
    opacity: 1;
    transition: .3s;

    border-radius: 50px !important;
    background-color: transparent;
}

.projects-datalist-grid i, .projects-datalist-grid2 i{
    font-size: 40px;
    color: #fff;
}

.projects-datalist-grid div{
    color: #fff;
    /*transform: skew(10deg) !important;*/
}

.projects-datalist-grid2 div{
    color: #fff;
    /*transform: skew(-10deg) !important;*/
}