.menu-icon{cursor:pointer;transition:all .3s ease-in-out}.menu-icon line{transform-origin:50%;transform-box:fill-box;transition:transform .3s ease-in-out,opacity .3s ease-in-out}.menu-icon.open line:first-child{transform:rotate(45deg)translate(4px,4px)}.menu-icon.open line:nth-child(2){opacity:0}.menu-icon.open line:nth-child(3){transform:rotate(-45deg)translate(4px,-5px)}
.side-bar-open{animation:.5s ease-out forwards slideIn}.side-bar-close{animation:.5s ease-in forwards slideOut}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0%)}}@keyframes slideOut{0%{transform:translate(0%)}to{transform:translate(100%)}}