.header {
  position: fixed;
  top: 0px;
  background: #1f4ab8;
  height: 60px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #EEEEEE;
  z-index: 10;
  box-shadow: 0px 0px 8px black;
  transition: transform 300ms;
  transform: translateY(-110%); }
  .header > button.open-drawer {
    width: 50px;
    height: 50px;
    margin: 5px;
    background: transparent;
    border: none; }
    .header > button.open-drawer > svg use {
      transition: transform 200ms;
      fill: #EEEEEE; }
  .header > button.open-drawer:hover > svg use {
    fill: white; }
  .header > button.open-drawer:hover > svg use:nth-child(1) {
    transform: translateX(10%) translateY(-5%) rotate(21deg); }
  .header > button.open-drawer:hover > svg use:nth-child(2) {
    transform: translateX(150%); }
  .header > button.open-drawer:hover > svg use:nth-child(3) {
    transform: translateX(-25%) translateY(5%) rotate(-21deg); }
  .header > .header-title {
    flex-grow: 1;
    color: inherit;
    text-decoration: none;
    text-align: center; }

.header.show {
  transform: none; }