#header{position:absolute;transition:0.5s cubic-bezier(0.5, 0.25, 0, 1);width:100%;z-index:100}#header #header-wrapper{position:relative;z-index:100;padding:30px 0;border-radius:50px}#header #h-logo{width:160px;height:30px;display:block;background:url("../images/logo-dark.svg") no-repeat;background-size:contain}#header #burger-btn{position:relative;z-index:1;display:block;cursor:pointer;z-index:101;width:45px;height:45px;border-radius:100%}#header #burger-btn span,#header #burger-btn span:before,#header #burger-btn span:after{height:2px;background:black;transform-origin:center;transition:0.5s cubic-bezier(0.5, 0.25, 0, 1)}#header #burger-btn span{width:18px;display:block;position:absolute;top:20px;left:13px}#header #burger-btn span:before{content:'';top:-5px;right:0;width:18px;display:block;position:absolute}#header #burger-btn span:after{content:'';bottom:-5px;right:0;width:9px;display:block;position:absolute}#header #main-nav ul{list-style:none;font-weight:400}#header #main-nav ul li{font-size:0.95rem}#header #main-nav ul li a{color:var(--bg-dark);transition:var(--transition);position:relative}#header #main-nav ul li a:after{content:'';width:0;height:2px;position:absolute;left:0;bottom:-2px;display:block;background:var(--secondary-color);transition:all 0.3s ease-in-out}#header #main-nav ul li a:hover{color:black}#header #main-nav ul li a:hover:after{width:100%}#header #main-nav ul li a:not(:hover):after{left:inherit;right:0;width:0}#header #product-menu{width:100%;position:absolute;top:0;left:0;transform:translate3d(0, -120%, 0);background:white;transition:0.6s cubic-bezier(0.5, 0.25, 0, 1);transition-behavior:allow-discrete;filter:drop-shadow(0 0 5px rgba(0,0,0,0.2))}#header #product-menu .products{max-width:1200px;opacity:0;margin:0 auto;padding:90px 15px 15px 15px}#header #product-menu .products a{width:100%;display:block;color:black;border-radius:5px;font-size:0.85rem;padding:30px 10px;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:5px}#header #product-menu .products a img{width:40px}#header #product-menu .products a:hover{background:var(--bg-mid)}#header .overlay-nav{position:fixed;visibility:hidden;opacity:0;height:100%;width:inherit !important;right:0;left:0;background:rgba(39,39,77,0.5);backdrop-filter:blur(10px);top:0;z-index:99;color:white;transform:translate3d(0, -100%, 0);transition:0.8s cubic-bezier(0.5, 0.25, 0, 1);transition-behavior:allow-discrete}#header .overlay-nav .nav-wrapper{padding:0;filter:blur(100px);transition:0.8s cubic-bezier(0.5, 0.25, 0, 1)}#header .overlay-nav p.nav-ttl{font-size:1.6rem}#header .overlay-nav nav{height:100%}#header .overlay-nav nav ul li a{color:white;font-size:1rem;padding:8px 0;display:inline-block;line-height:1;transition:0.2s cubic-bezier(0.5, 0.25, 0, 1);position:relative}#header .overlay-nav nav#primary-nav ul li a{font-size:clamp(20px, 4vw, 40px);padding:10px 0}#header .overlay-nav nav#primary-nav ul li a:after{content:'';width:0;height:3px;display:block;background:var(--secondary-color);position:absolute;left:0;bottom:8px;transition:0.8s cubic-bezier(0.5, 0.25, 0, 1)}#header .overlay-nav nav#primary-nav ul li a:hover:after,#header .overlay-nav nav#primary-nav ul li a.active:after{width:100%}#header .overlay-nav nav#secondary-nav ul li a:hover{transform:translate3d(5px, 0, 0)}#header .overlay-nav nav#product-nav{background:url("../images/dot-bg.svg") rgba(39,39,77,0.3);background-size:20px;padding:15px;border-radius:20px;border:solid 1px rgba(39,39,77,0.3)}#header .overlay-nav nav#product-nav ul li{width:50%}#header .overlay-nav nav#product-nav ul li a{display:flex;gap:10px;align-items:center}#header .overlay-nav nav#product-nav ul li a img{width:30px}#header.nav-open #h-logo,#header.header-fixed #h-logo{background:url("../images/logo-light.svg") no-repeat}#header.nav-open #burger-btn span,#header.nav-open #burger-btn span:before,#header.nav-open #burger-btn span:after,#header.header-fixed #burger-btn span,#header.header-fixed #burger-btn span:before,#header.header-fixed #burger-btn span:after{background:white}#header.nav-open #utility-nav a#tag-search,#header.header-fixed #utility-nav a#tag-search{background:url("../images/icons/search-w.svg") no-repeat}#header.nav-open #utility-nav a#favourites,#header.header-fixed #utility-nav a#favourites{background:url("../images/icons/fav-w.svg") no-repeat}#header.nav-open #utility-nav a#user-nav,#header.header-fixed #utility-nav a#user-nav{background:url("../images/icons/user-nav-w.svg") no-repeat}#header.nav-open #burger-btn span{transform:rotate(45deg);background:white}#header.nav-open #burger-btn span:before{transform:rotate(-90deg);top:0;background:white}#header.nav-open #burger-btn span:after{display:none}#header.nav-open .nav-wrapper{padding:150px 0 0 0;filter:blur(0px)}#header.nav-open .overlay-nav{visibility:visible;opacity:1;transform:translate3d(0, 0, 0)}#header.prod-open #product-btn a:after{width:100% !important}#header.prod-open #product-menu{transform:translate3d(0, 0, 0)}#header.prod-open #product-menu .products{animation-delay:0.4s;animation-name:prods-slide;animation-duration:0.5s;animation-iteration-count:1;animation-fill-mode:forwards}#header.header-fixed{position:fixed;width:100%;left:0;right:0}#header.header-fixed #h-logo{background:url("../images/logo-light-sm.svg") no-repeat;width:25px;height:25px}#header.header-fixed #header-wrapper{top:10px;width:100%;height:45px;max-width:280px;padding:5px 50px 5px 10px;background:rgba(39,39,77,0.2);backdrop-filter:blur(15px);margin:auto;overflow:hidden;animation-name:slide-down;animation-duration:0.5s;animation-iteration-count:1;animation-fill-mode:forwards}#header.header-fixed #header-wrapper #main-nav{display:none !important}#header.header-fixed #header-wrapper #burger-btn{display:block !important;position:absolute;right:0;top:0;border-radius:100%;background:rgba(39,39,77,0.2)}#header.header-fixed #header-wrapper .btn.btn-sm{padding:0 12px;font-size:0.7rem;background-image:none;height:35px}#header.header-fixed #product-menu{transform:translate3d(0, -120%, 0)}@media (max-width: 768px){#header{position:fixed}#header #h-logo{width:140px}#header #header-wrapper{padding:20px 0}#header .nav-wrapper{padding:100px 0 0 0;text-align:center}#header .nav-wrapper #primary-nav{margin:0 0 40px}}@keyframes prods-slide{0%{transform:translate3d(-50px, 0, 0);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}
