/****    Main    ****/

.filterBarWrapper li{
    min-height: 50px;
}

.filterBarWrapper .selected{
    background-color: #b64240 !important;
}

.filterBarWrapper .noDisplay{
    display: none !important;
}

.filterBarWrapper{
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.filterBarWrapper .filtertoggle{
    width: 50px;
    height: 20px;
    position: absolute;
    background-color: #b64240;
    top: -20px;
    left: calc(50% - 25px);
    transition: top .75s ease-in-out;
    -webkit-transition: top .75s ease-in-out;
    -moz-transition: top .75s ease-in-out;
    -o-transition: top .75s ease-in-out;
}

.filterBarWrapper .toggle i{
    color: #ddd;
    cursor: pointer;
}

.filterBarWrapper .filterBar{
    background-color: #333;
    margin: 0 auto;
    display: inline-block;
}

.filterBarWrapper .catList{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0; /* close the gap in list items that are inline-block */
}

.filterBarWrapper .catList li{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    align-items: center;
    white-space: nowrap;
    padding: 0 4px;
    background-color: #333;
    transition: all .3s ease-in-out;
    height: 35px;
}

.filterBarWrapper .catList img{
    flex-grow:0;
    flex-shrink:0;
}

.filterBarWrapper .catList li i{
    font-size: 23px;
    color: #ddd;
}

.filterBarWrapper .catList li img{
    width: 20px;
}

.filterBarWrapper .catList li span{
    color: #ddd;
    text-transform: lowercase;
    font-size: 20px;
    font-family: Novecento;
    padding-left: 10px;
}

.filterBarWrapper .fa-sort-up{
    vertical-align: -4px;
}

.filterBarWrapper .closed{
    top: -4px;
}

.filterBarWrapper li:hover{cursor: pointer;}

.filterBarWrapper .catList .main:hover, .arrowBack:hover{background-color: #b64240 !important;}

/****    Main Menu Styling    ****/

.filterBarWrapper .main{
    padding-right: 10px !important;
    padding-left: 10px !important;
}

/****    House Selection Styling    ****/

.filterBarWrapper .house:not(:last-child){
    padding-right: 15px !important;
}

.filterBarWrapper .house-container span{
    vertical-align: -7px;
}

/****    Division Selection Styling    ****/

.filterBarWrapper .division{
    border-radius: 0px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/****    Game Selection Styling    ****/

.filterBarWrapper .game{
    height: 50px !important;
    padding: 0 10px !important;
    width: auto !important;
}

.filterBarWrapper .game span{
    font-size: 14px !important;
}

.filterBarWrapper .game-container img, .game-container span{
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 0 !important;
}

/****    Rank Selection Styling    ****/

.filterBarWrapper .rank{
    padding: 0 5px !important;
}

.filterBarWrapper .rank span{
    font-size: 14px !important;
    padding: 0 !important;
}


/****    Rep Selection Styling    ****/

.filterBarWrapper .rep{
    padding: 0 10px !important;
}

.filterBarWrapper .rep span{
    padding: 0 !important;
}

/****    Notices    ****/

.filterBarWrapper .notice{
    padding: 0 10px !important;
}

.filterBarWrapper .notice i{
    vertical-align: -2px;
}

.filterBarWrapper .notice .fa-chess-queen{
    color: #a79a62;
}

.filterBarWrapper .notice .orange{
    color: #b65c40;
    background-color: unset !important;
}

/* Ranks */
.leader{color:#c0392b}
.chancellor{color:#9b59b6}
.general{color:#3b97d3}
.commander{color:#d16e7d}
.vice{color:#aba88c}
.captain{color:#93906d}
.member, .rl, .warden, .veteran, .elite, .mentor, .associate {color:#51765d}
.awayst{color:#0d0d0d}
.initiate, .initiate-star{color:#636355}
.applicant{color:#7f7f7d}