/* Promo */
.promo{position:relative; width:100%; background:var(--pcolor); z-index:95;}
.promo .wrapper{width:100%; display:flex; justify-content:center; align-items:center; height:34px;}
.promo a{
    display:block; font-size:13.5px; font-weight:800; text-transform:uppercase; color:#fff;
    letter-spacing:.6px; transition:opacity .3s;
}
.promo a:hover{opacity:.8;}
@media screen and (max-width:991.98px){
    .promo a{font-size:12px;}
}

/* Topnav */
nav.topnav{
    display:block; position:absolute; left:0; width:100vw; background:#fff; z-index:95;
    padding:8px 0; transition:box-shadow .3s;
}
nav.topnav.sticky{position:fixed; top:0; box-shadow:rgba(0,0,0,.05) 0px 20px 40px;}
nav.topnav .topnav-wrapper{width:100%; display:flex; align-items:center;}
nav.topnav .logo{
    display:block; margin:0; padding:0; /*background:var(--pcolor);*/ transition:opacity .3s;
}
nav.topnav .logo:hover{opacity:.8;}
nav.topnav .logo > img{display:block; /*height:45px; width:auto;*/ height:auto; width:125px;}
nav.topnav .menu-container{display:flex; align-items:center; padding:0 0 0 10px;}
nav.topnav .menu-container.right{margin:0 0 0 auto;}

nav.topnav .menu{position:relative; margin:0 0 0 40px;}
nav.topnav .menu > a{
    display:flex; align-items:center; padding:20px 10px; font-size:16px; color:#000; font-weight:800;
    letter-spacing:.25px; text-transform:uppercase; transition:color .3s;
}
nav.topnav .menu:hover > a{color:var(--pcolor);}
nav.topnav .menu > a i{
    color:#000; margin:0 0 0 5px; font-size:12px; transition:color .3s, transform .3s;
}
nav.topnav .menu:hover > a i{color:var(--pcolor); transform:rotate(180deg);}
nav.topnav .submenu-container{
    position:absolute; top:calc(100% + 4px); left:0; background:#fff; padding:15px 0;
    border:1px solid rgba(100,100,100,.4); border-top:2px solid #000; opacity:0; pointer-events:none;
    transition:top .3s, opacity .3s;
}
nav.topnav .menu:hover > .submenu-container{top:calc(100% - 1px); opacity:1; pointer-events:all;}
nav.topnav .submenu > a{
    display:block; position:relative; padding:14px 30px; font-size:16px; color:#646464; font-weight:800;
    white-space:nowrap; letter-spacing:.25px; text-transform:uppercase; transition:color .3s;
}
nav.topnav .submenu:hover > a{color:var(--pcolor);}

nav.topnav .menu-icon{position:relative; margin:0 0 0 6px;}
nav.topnav .menu-icon > a{
    display:block; position:relative; padding:20px 10px; font-size:22px; color:#000; font-weight:800;
    transition:color .3s;
}
nav.topnav .menu-icon:hover > a{color:var(--pcolor);}
nav.topnav .menu-icon > a .quantity{
    position:absolute; top:14px; right:-3px; width:16px; height:16px; font-size:10px; color:#fff;
    background:var(--pcolor); border-radius:50%; font-weight:400; text-align:center;
    line-height:16px;
}

nav.topnav .sidenav-btn{display:none; width:74px;}
nav.topnav ~ .topnav-spacer{width:100%; height:94px;}

@media screen and (max-width:991.98px){
    nav.topnav{padding:12px 0;}
    nav.topnav .topnav-wrapper{justify-content:space-between;}
    nav.topnav .logo{padding:5px 10px;}
    nav.topnav .logo > img{height:35px;}
    nav.topnav .main-menu{display:none;}
    nav.topnav .sidenav-btn{display:block;}
    nav.topnav .menu-container.right{margin:0; padding:0;}
    nav.topnav .menu-icon{position:relative; margin:0;}
    nav.topnav .menu-icon > a{padding:8px 8px; font-size:21px;}
    nav.topnav .menu-icon > a .quantity{top:4px;}
    nav.topnav ~ .topnav-spacer{height:70px;}
}

/* Sidenav */
nav.sidenav{
    display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; overflow:hidden; z-index:94;
    background:#fff; padding:130px 0 70px 0; opacity:0; pointer-events:none; transition:opacity .4s;
}
nav.topnav.sticky ~ .topnav-spacer ~ nav.sidenav{padding:96px 0 70px 0;}
nav.sidenav .menu-container{width:100%; height:calc(100vh - 200px); overflow-y:auto;}
nav.topnav.sticky ~ .topnav-spacer ~ nav.sidenav .menu-container{height:calc(100vh - 166px);}
nav.sidenav .menu-container{padding:0 20px;}
nav.sidenav .menu{width:100%; padding:18px 0; border-bottom:1px solid rgba(100,100,100,.4);}
nav.sidenav .menu > a{
    display:flex; align-items:center; position:relative; font-size:16px; color:#000; font-weight:800;
    white-space:nowrap; letter-spacing:.25px; text-transform:uppercase; transition:color .3s;
}
nav.sidenav .menu > a i{font-size:12.5px; margin:0 0 0 5px;}
nav.sidenav .menu:hover > a, nav.sidenav .menu.active > a{color:var(--pcolor);}
nav.sidenav .submenu-container{display:none; padding:10px 0 0 0;}
nav.sidenav .submenu > a{
    display:block; position:relative; font-size:14px; color:#000; font-weight:700;
    padding:7px 0 7px 15px; white-space:nowrap; letter-spacing:.25px; text-transform:uppercase;
    transition:color .3s;
}
nav.sidenav .submenu > a:hover{color:var(--pcolor);}
@media screen and (max-width:991.98px){
    nav.sidenav.active{opacity:1; pointer-events:all;}

}