.topnav{background:var(--scolor); z-index:95;}
.topnav > .container{display:flex; z-index:95;}
.topnav .logo-container .logo{
    display:flex; align-items:center; height:4rem; line-height:4rem; padding:0 2rem 0 0; color:#757c8a; 
    font-size:1.125rem; font-weight:600; letter-spacing:.025rem; outline:none;
}
.topnav .logo-container .logo img{
    display:block; max-width:13rem; max-height:3rem; opacity:1; outline:none; transition:opacity .3s;
}
.topnav .logo-container .logo:hover img{opacity:.75;}
.topnav .menu{display:flex; padding:.5rem 0;}
.topnav .menu.menu-right{margin-left:auto;}
.topnav .menu-item{position:relative;}
.topnav .menu-item > a{
    display:block; color:#737d90; font-size:.75rem; text-transform:uppercase; letter-spacing:.05rem;
    font-weight:600; line-height:3rem; padding:0 1rem;
}
.topnav .menu-item.icon > a{font-size:1.25rem; padding:0 .6rem;}
.topnav .menu-item.icon > a ion-icon{margin:0 0 -.25rem 0;}
.topnav .menu-item:hover > a, .topnav .menu-item.active > a{color:var(--pcolor);}
.topnav .submenu{
    position:absolute; top:calc(100% + 7px); left:0; padding:.5rem 0; border-radius:.25rem;
    background:#fff; opacity:0; pointer-events:none; transition:all .3s ease-in-out;
    box-shadow:0 1px 5px rgba(0,0,0,.1); z-index:95;
}
.topnav .submenu.submenu-right{left:auto; right:0;}
.topnav .menu-item:hover > .submenu{opacity:1; pointer-events:auto; top:100%;}
.topnav .submenu-item > a{
    display:block; padding:0 1rem; line-height:2.75rem; cursor:pointer; font-size:.9375rem;
    color:#121212; min-width:10rem; white-space:nowrap; overflow:hidden; transition:background .25s;
}
.topnav .submenu-item:hover > a{background:#f1f1f1;}
.topnav .submenu-item ion-icon{color:#737d90; font-size:1.2rem; margin:0 .5rem -.25rem 0;}
.topnav .menu-item .user-profile .img-bg{
    display:block; width:2rem; height:2rem; border-radius:50%; margin:.5rem 0;
}
.topnav .submenu .user-header{padding:0 1rem .75rem 1rem; margin:0 0 .5rem 0; border-bottom:1px solid #ddd;}
.topnav .submenu .user-header .name{font-size:1rem; color:#4b5362; font-weight:400; margin:0;}
.topnav .submenu .user-header .email{
    color:#8799b6; font-size:.9375rem; overflow:hidden; letter-spacing:.025rem; margin:0;
}
.topnav .submenu .user-header .buttons{margin-top:.625rem;}
.topnav .bottom-section{align-items:center; padding:1.5rem 0 1.75rem 0;}
.topnav .bottom-section .pagename{
    color:var(--pcolor); font-size:2.75rem; font-weight:300; letter-spacing:.08rem;
}
.topnav .bottom-section .buttons{width:auto; margin-left:auto;}

.subnav{z-index:90;}
.subnav > .container{display:flex; flex-wrap:wrap; padding:1.5rem 0 1.5rem 0; z-index:90;}
.subnav .menu{display:flex; padding:.5rem 0;}
.subnav .menu.menu-right{margin-left:auto;}
.subnav .menu-item{position:relative;}
.subnav .menu-item > a{
    display:block; color:#8C96A9; font-size:.75rem; text-transform:uppercase; letter-spacing:.05rem;
    font-weight:600; line-height:1.5; padding:.77rem .25rem; margin:0 2rem 0 0;
    border-bottom:3px solid transparent;
}
.subnav .menu-item:hover > a{color:#4b5362;}
.subnav .submenu{
    position:absolute; top:calc(100% + 7px); left:0; padding:.5rem 0; border-radius:.25rem;
    background:#fff; opacity:0; pointer-events:none; transition:all .3s ease-in-out;
    box-shadow:0 1px 5px rgba(0,0,0,.1); z-index:90;
}
.subnav .menu-item:hover > .submenu{opacity:1; pointer-events:auto; top:100%;}
.subnav .submenu-item > a{
    display:block; padding:0 1rem; line-height:2.75rem; cursor:pointer; font-size:.9375rem;
    color:#121212; min-width:10rem; overflow:hidden; white-space:nowrap; transition:background .25s;
}
.subnav .submenu-item:hover > a{background:#f1f1f1;}