.navbar{display:flex;justify-content:start;align-items:center;padding:5px 0;gap:5rem}
.menu{display:flex;flex-direction:row}
.menu li{list-style:none}
.menu li a{display:block;text-decoration:none;color:#fff;padding:1rem;font-size:1.37rem;}
.has-dd{position:relative}
.submenu,.submenu-right{position:absolute;left:0;background-color:#144183;white-space:nowrap;min-width:200px;opacity:0;transform:scaleY(0);transform-origin:top center; z-index:99;}
.submenu .submenu,.submenu-right .submenu-right{border-left:0.5rem solid #ccc;}
.submenu > li > a,.submenu-right > li > a{color:var(--lightbg);}
.submenu > li > a > span,.submenu-right > li > a > span{margin-left:15px}
.submenu li,.submenu-right li{position:relative}
.submenu li .submenu,.submenu-right li .submenu-right{left:100%;top:0;background-color:var(--darkbg);position:absolute;width:auto}
.submenu li:hover .submenu,.submenu-right li:hover .submenu-right{width:100%}
.submenu-right li .submenu-right{left:-100%}
.menu > li:hover > a,.submenu > li:hover > a,.submenu-right > li:hover > a{background-color:var(--accentCol);color:#fff}
.arrow{width:.8rem;height:.8rem;display:inline-block;vertical-align:middle;border-left:.2rem solid currentColor;border-bottom:.2rem solid currentColor;transform:rotate(-45deg);margin-top:-.4rem;transition:transform 100ms ease-in-out}
.menu > li:hover > a + .submenu,.submenu > li:hover > a + .submenu{opacity:1;transform:scaleY(1)}
.menu > li:hover > a > .arrow,.submenu > li:hover > a > .arrow{transform:rotate(225deg)}
.menu > li:hover > a + .submenu-right,.submenu-right > li:hover > a + .submenu-right{opacity:1;transform:scaleY(1)}
.menu > li:hover > a > .arrow,.submenu-right > li:hover > a > .arrow{transform:rotate(225deg)}
.hamburger{display:none}

@media only screen and (min-width: 1280px) {
	.menu li a{text-transform:uppercase}
	.submenu > li > a,.submenu-right > li > a{text-transform:capitalize}
}

@media only screen and (max-width: 1023px) {
.navbar{padding:0 20px;justify-content:space-between}
.menu{flex-flow:column;position:absolute;background:var(--lightbg);top:10.5rem;left:0;right:0;height:100vh;opacity:0;transform:scaleY(0);transform-origin:top center;transition:transform 200ms cubic-bezier(0.36,0.4,0.42,1.48) 100ms,opacity 100ms ease-in-out;overflow-y:scroll;padding:1rem; z-index:1}
.menu > li > a{font-size:1.4rem;color:var(--bgSecondary);padding:1.6rem 1rem; display:flex; align-items:center; justify-content:space-between;}
.submenu > li > a,.submenu-right > li > a{font-size:1.4rem;  display:flex; align-items:center; justify-content:space-between;}
.submenu,.submenu-right{top:0;padding-left:1.5rem;border-left:.12rem dotted hsla(342,99%,45%,0.95)}
.submenu li .submenu,.submenu-right li .submenu-right{left:0;display:none}
.menu > li:hover > a,.submenu > li:hover > a,.submenu-right > li:hover > a{background-color:rgba(0,0,255,.65)}
.menu > li:hover > a + .submenu,.submenu > li:hover > a + .submenu,.menu > li:hover > a + .submenu-right,.submenu-right > li:hover > a + .submenu-right{position:static; display:block;}
.hamburger{width:3rem;height:.2rem;display:block;background:var(--darkbg);position:absolute;cursor:pointer;transition:.2s transform ease-in-out;top:7.5rem;right:2rem}
.hamburger::after,.hamburger::before{content:"";position:absolute;left:0;background:inherit;width:inherit;height:inherit;transition:.2s transform ease-in-out}
.hamburger::after{top:1rem}
.hamburger::before{bottom:1rem}
.close::after,.close::before{top:0;transition:.2s transform ease-in-out}
.close::before{display:none}
.close{transform:rotate(45deg);transition:.2s transform ease-in-out}
.close::after{transform:rotate(-90deg)}
input[type="checkbox"]:checked + .menu{position:absolute;opacity:1;transform:scaleY(1)}
}