header {position: sticky;top: 0; z-index: 100;display: flex; justify-content: space-between; padding: 0 2rem;height:6rem}
header h1 {  text-align: left;}
header h1 a {display: flex;text-align: left;height: 6rem;align-items: center; justify-content: center;}
header h1 a img {height: 3rem;}
header > div {width:6rem}
header .open_nav { right: 1.5rem;}
header .back {right: 1.5rem;}
header div img {width: 3rem; position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);}

nav {position: fixed; right: -100%; top:0; width: 77%; z-index: 150;background: #382276;height: 100vh;transition:.5s}
nav.on {right:-2px; transition:.5s}
nav h1 {height: 2rem; margin: 1.5rem 1.5rem 1.5rem 6rem;}
nav h1 img {height: 100%;}
nav > ul {display: flex;flex-flow: column;align-items: center;padding: 0 2rem;margin-top:6rem}
nav > ul > li {padding:0 1rem; display: block; width: 100%;}
nav > ul > li > ul > li { font-size: 1.2rem;line-height: 1.5;}
nav > ul > li > a  {display: flex;padding: 2rem 0;align-items: center;justify-content: space-between;}
nav > ul > li > a > span {font-size:2.2rem; font-weight:900; width:100%}
nav > ul > li > a img {width:2rem}

nav .close_nav {position: absolute; right: 2.5rem; top:1.5rem; height: 3rem;}
nav .close_nav img {height: 100%;}

.nav_bg {background: rgba(0,0,0,0.6); position: fixed; left: 0; top:0; width: 100%; height: 100vh; z-index: 140; display: none;}
.nav_bg.on {display: block;}