.navbar{display:flex;align-items:center;justify-content:space-between;width:100%;z-index:999;position:sticky;top:0}@media screen and (max-width:1024px){.navbar>.nav-items>ul{position:absolute;display:flex;flex-direction:column;z-index:999;left:0;top:100%;width:100%;transform:translateX(-200vh);transition:all .45s}.navbar>.nav-items.open>ul{transform:translateX(0)}.navbar>.nav-toggle{display:flex;align-items:center;justify-content:end;cursor:pointer;width:50px;height:50px;margin-top:-8px}.nav-toggle>.bar{position:relative;width:32px;height:2px;transition:all .45s ease-in-out}.nav-toggle>.bar.white{background:#fff}.nav-toggle>.bar.dark{background:#000}.nav-toggle>.bar:after,.nav-toggle>.bar:before{content:"";position:absolute;height:2px;border-radius:2px;transition:all .45s ease-in-out}.nav-toggle>.bar.white:after,.nav-toggle>.bar.white:before{background:#fff}.nav-toggle>.bar.dark:after,.nav-toggle>.bar.dark:before{background:#000}.nav-toggle>.bar:before{width:25px;transform:translateY(-8px);right:0}.nav-toggle>.bar:after{width:32px;transform:translateY(8px);right:0}.nav-toggle.open>.bar{transform:translateX(-46px);background:transparent}.nav-toggle.open>.bar:before{width:32px;transform:rotate(45deg) translate(26px,-26px)}.nav-toggle.open>.bar:after{width:32;transform:rotate(-45deg) translate(26px,26px)}}