#new-feature::before {
    content: "New Feature!";
    color: red;
    font-size: .5rem;
    position: absolute;
    width: 150%;
    left: 30%;
    top: -5%;
}
.fa-2x {
        font-size: 2em;
    }

.fa{
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size:20px;
}
.mdi{
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size:20px;
}

.side-bar {
    background-color: var(--primary);
    /* background: linear-gradient(90deg, var(--primary) 0%, rgba(var(--primary-rgb),.9) 50%, var(--primary) 100%); */
    box-shadow: .05rem  0rem .5rem black;
    top:0;
    padding-top:1rem;
    bottom:0;
    height:100%;
    left:0;
    width:60px;
    overflow:hidden;
    position: fixed;
    -webkit-transition:width .05s linear;
    transition:width .05s linear;
    -webkit-transform:translateZ(0) scale(1,1);
    z-index:1000;
}
.side-bar:hover{
    width:200px;
    overflow:visible;
}

.side-bar>ul {
    margin: 7px 0;
}

.side-bar li {
    position:relative;
    display:block;
    width:250px;
}


.side-bar li>a {
    position:relative;
    display:table;
    border-collapse:collapse;
    border-spacing:0;
    color:#999;
    font-family: arial;
    font-size: 14px;
    text-decoration:none;
    -webkit-transform:translateZ(0) scale(1,1);
    -webkit-transition:all .1s linear;
    transition:all .1s linear;
    
}
.side-bar .nav-icon {
    position:relative;
    display:table-cell;
    width:60px;
    height:36px;
    text-align:center;
    vertical-align:middle;
    font-size:18px;
}
.side-bar .nav-text {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:140px; /*This width will modify the width of the highlight on nav item hover*/
    font-family: 'Titillium Web', sans-serif;
}
nav ul,nav li {
    outline:0;
    margin:0;
    padding:0;
    }
.side-bar section, .menu, .menu-list{
    height: 100%;
}
.menu {
    height: 100%;
}
.main-nav {
    left:0;
}
.account-nav {
    position:absolute;
    left:0;
    bottom:1rem;
}   


@media screen
and (min-width : 320px)
and (max-width : 480px){
    .side-bar:hover{
        width:100%;
        overflow:visible;
    } 
    .side-bar {
        height:fit-content;
        width:100%;
        position: relative;
    }
    .side-bar ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        list-style-type: none !important;
    }

    .side-bar li {
        width:fit-content;
    }


    /* .side-bar li>a {
        position:relative;
        display:table;
        border-collapse:collapse;
        border-spacing:0;
        color:#999;
        font-family: arial;
        font-size: .75rem;
        text-decoration:none;
        -webkit-transform:translateZ(0) scale(1,1);
        -webkit-transition:all .1s linear;
        transition:all .1s linear;
        
    } */
    .side-bar .nav-icon {
        position:relative;
        display:table-cell;
        width:60px;
        height:36px;
        text-align:center;
        vertical-align:middle;
        font-size:18px;
    }
    .side-bar .nav-text {
        position:relative;
        display:table-cell;
        vertical-align:middle;
        font-size: .75rem;
        max-width:80vw; /*This width will modify the width of the highlight on nav item hover*/
        font-family: 'Titillium Web', sans-serif;
    }
    #new-feature::before {
        left: 28%;
        top: 10%;
    }
}

/* Small Tablets */
@media screen
and (min-width : 481px)
and (max-width : 768px){

   
    .side-bar:hover{
        width:100%;
        overflow:visible;
    } 
    /* |  home-icon   about-icon    services-icon |
    |   "Home"        "about"      "services"  | */
    .side-bar {
        height:fit-content;
        width:100%;
        position: relative;
    }
    .side-bar ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
        list-style-type: none !important;
    }

    .side-bar li {
        position:relative;
        display:block;
        width:fit-content;
    }


    .side-bar li a {
        position:relative;
        display:table;
        border-collapse:collapse;
        border-spacing:0;
        color:#999;
        font-family: arial;
        font-size: 1.5em;
        text-decoration:none;
        -webkit-transform:translateZ(0) scale(1,1);
        -webkit-transition:all .1s linear;
        transition:all .1s linear;
        
    }
    .side-bar .nav-icon {
        position:relative;
        display:table-cell;
        width: 3.75rem;
        height: 2.25rem;
        text-align:center;
        vertical-align:middle;
        font-size: 1.5rem;
    }
    .side-bar .nav-text {
        position:relative;
        display:table-cell;
        vertical-align:middle;
        font-size: .75rem;
        /* width: 140px; This width will modify the width of the highlight on nav item hover */
        font-family: 'Titillium Web', sans-serif;
    }
    nav ul,nav li {
        outline:0;
        margin:0;
        padding:0;
        }
    /* .side-bar section, .menu, .menu-list{
        height: 100%;
    } */
    .menu {
        height: 100%;
    }
    /* .main-nav {
        left:0;
    } */
    .account-nav {
        position:absolute;
        left:0;
        bottom:1rem;
    }
}

/* Large Tablets/Laptops */
@media screen
and (min-width : 761px)
and (max-width : 1024px){

   
    .side-bar:hover{
        width:100%;
        overflow:visible;
    } 
    /* |  home-icon   about-icon    services-icon |
    |   "Home"        "about"      "services"  | */
    .side-bar {
        height:fit-content;
        width:100%;
        position: relative;
    }
    .side-bar ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
        list-style-type: none !important;
    }

    .side-bar li {
        position:relative;
        display:block;
        width:fit-content;
    }


    .side-bar li a {
        position:relative;
        display:table;
        border-collapse:collapse;
        border-spacing:0;
        color:#999;
        font-family: arial;
        font-size: 1.5em;
        text-decoration:none;
        -webkit-transform:translateZ(0) scale(1,1);
        -webkit-transition:all .1s linear;
        transition:all .1s linear;
        
    }
    .side-bar .nav-icon {
        position:relative;
        display:table-cell;
        width: 3.75rem;
        height: 2.25rem;
        text-align:center;
        vertical-align:middle;
        font-size: 1.5rem;
    }
    .side-bar .nav-text {
        position:relative;
        display:table-cell;
        vertical-align:middle;
        font-size: .75rem;
        /* width: 140px; This width will modify the width of the highlight on nav item hover */
        font-family: 'Titillium Web', sans-serif;
    }
}

@media screen 
and (min-width : 1025px)
and (max-width : 1200px) {
    .fa-2x {
        font-size: 2em;
    }

    .fa{
        position: relative;
        display: table-cell;
        width: 60px;
        height: 36px;
        text-align: center;
        vertical-align: middle;
        font-size:20px;
    }
    .mdi{
        position: relative;
        display: table-cell;
        width: 60px;
        height: 36px;
        text-align: center;
        vertical-align: middle;
        font-size:20px;
    }

    .side-bar {
        background-color: var(--primary);
        /* background: linear-gradient(90deg, var(--primary) 0%, rgba(var(--primary-rgb),.9) 50%, var(--primary) 100%); */
        box-shadow: .05rem  0rem .5rem black;
        top:0;
        padding-top:1rem;
        bottom:0;
        height:100%;
        left:0;
        width:60px;
        overflow:hidden;
        position: fixed;
        -webkit-transition:width .05s linear;
        transition:width .05s linear;
        -webkit-transform:translateZ(0) scale(1,1);
        z-index:1000;
    }
    

    
}

@media screen 
and (min-width : 1201px) {

}