/*
    green:  #7ac943;
    blue:   #0071bc; 0f4b9e 0670b9

    purple #08214a
 */
:root {
    --nav-bg-color:             #000000;
    --nav-text-color:           #d4d4d6;
    --nav-text-hover-color:     #eec062;
    --nav-text-active-color:    #eec062;

    --nav-sub-bg-color:             #151515;
    --nav-sub-bg-active-color:      #f3f6f8;
    --nav-sub-bg-hover-color:       #ffffff;

    --nav-sub-text-color:           #d4d4d6;
    --nav-sub-text-hover-color:     #e73827;
    --nav-sub-text-active-color:    #050505;

    --nav-border-color:         rgba(212,212,214,.50);
}
.jcsnav {
    background-color:   var(--nav-bg-color);
    position:           fixed;
    top:                0;
    z-index:            1000;
    width:              100%;
}

#no-nav {
    border-top:         1px solid var(--nav-border-color);
}

.jcsnav-logo img {
    max-height:         60px;
}

.jcsnav-item {
    padding-left:       25px;
    padding-right:      25px;
}

a.jcsnav-item {
    color:              var(--nav-text-color) !important;
    text-decoration:    none;
    line-height:        11pt;
}

a.jcsnav-item:hover {
    color:              var(--nav-text-hover-color) !important;
}

.jcsnav-item:hover .fal {
    font-weight:        bold;
    color:              var(--nav-text-hover-color) !important;
}

.jcsnav-item.active {
    color:              var(--nav-text-active-color) !important;
}

.jcsnav-item.active .fal {
    font-weight:        bold;
}

.jcssubnav {
    /* background-image:   linear-gradient(#1f97e6, #0071bc, #015f9e); */
    background-image:   linear-gradient(#4c4c4c, #2e2e2e, #050505);
}

.jcsnav-sub-item:last-of-type{
    border-right:       1px solid var(--nav-border-color);
}

a.jcsnav-sub-item {
    border-top:         0px solid var(--nav-border-color);
    border-left:        1px solid var(--nav-border-color);
    border-bottom:      0px solid var(--nav-border-color);
    padding-bottom:     5px;
    text-decoration:    none;
    color:              var(--nav-sub-text-color);
}

a.jcsnav-sub-item.active {
    /*background-image:           linear-gradient(#adfa78, #76c73e, #509d1b); */
    background-image:           linear-gradient(#ce953c, #eeca74, #ecb14b);
    color:                      #000000;
    border-bottom-color:        #f50000 !important;
    border-top-color:           #fa5032 !important;
}

.jcsnav-sub-item:hover {
    background-image:   linear-gradient(#ce953c, #eeca74, #ecb14b);
    color:              		#000000;
    border-bottom-color:        #f50000 !important;
    border-top-color:           #fa5032 !important;
}

.jcsnav-sub-item.active .fal {
    font-weight:        bold;
}

.jcsnav-sub-item:hover .fal {
    font-weight:        bold;
}

img.award:hover {
    -webkit-filter: grayscale(0%);
    -webkit-transition: .5s ease-in-out;
    -moz-filter: grayscale(0%);
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(0%);
    -o-transition: .5s ease-in-out;
    filter: grayscale(0%);
}

img.award {
    -webkit-filter: grayscale(100%);
    -webkit-transition: .5s ease-in-out;
    -moz-filter: grayscale(100%);
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(100%);
    -o-transition: .5s ease-in-out;
    filter: grayscale(100%);
}