/* header */

#header { 
    background-color: #323232; color: #999; font-size: 16px; margin: 0; padding: 0; 
}
#header a.logo {
    float: left; margin: 10px 0;
}
#header h1 {
    font-size: 26.5px; font-weight: 400; color: #eee; float: right; margin: 30px 60px; display: none; 
}
@media (min-width: 768px) {
    #header h1 {
        display: block;  
    }
}

/* breadcrumb */

#breadcrumb {
    background-color: #fafafa; border-top: 1px solid #fff; border-bottom: 1px solid #e5e5e5; min-height: 6px;
}
#breadcrumb .breadcrumbnav {
    color: #888; font-size: 12px; line-height: 2; margin: 0; padding: 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#breadcrumb .breadcrumbnav a {
    color: #888; text-decoration: none;
}
#breadcrumb .breadcrumbnav a:hover {
    color: #333; text-decoration: none
}
#breadcrumb .breadcrumbnav i.fa.fa-home {
    font-size: 125%; position: relative; top: 1px; width: 1.2em; text-align: left;
}
#breadcrumb .breadcrumbnav .sep {
    color: #ccc; margin: 0; padding: 0 5px;
}

/* footer */

#footer { 
    background-color: #323232; border: 0; color: #999; font-size: 12px; font-weight: 400; text-align: center; margin: 0; padding: 15px 0;
}

/* RTL */

[dir="rtl"] #header a.logo {
    float: right;
}
[dir="rtl"] #header h1 {
    float: left;
}
[dir="rtl"] #breadcrumb .breadcrumbnav i.fa.fa-home {
    text-align: right;
}