#navigation {
  position: relative;
  min-height: 30px;
  width: 100%;
  z-index: 9;
  background-color: transparent;
  transition: background-color 0.5s;
}
#navigation.scrolled {
  position: fixed;
  top: 0px; right: 0px;
  background-color: #425ABD;
}
/* Header logo - set to display:none in inline style, hence needing !important */
#navigation.scrolled img { display: initial !important; }
/* Burger is hidden in standard CSS; we need to over-ride that */
.nav-burger, .nav-burger + label { display: initial; }

label[for="nav-burger"] {
  position: absolute;
  right: 10px; top: 0px;
  z-index: 2;
  
  height: 30px;
  min-width: 30px;
  width: auto;
  text-align: right;
  padding-right: 35px; padding-left: 5px;
  cursor: pointer;
  background-color: white;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30'><rect width='30' height='6' fill='rgb(66, 90, 189)' rx='3' ry='3'/><rect y='8' x='0'  width='17' height='6' fill='rgb(66, 90, 189)' rx='3' ry='3' transform='rotate(12 3 11)'/><rect y='8' x='13' width='17' height='6' fill='rgb(66, 90, 189)' rx='3' ry='3' transform='rotate(-12 27 11)'/><rect y='16' x='0'  width='18' height='6' fill='rgb(66, 90, 189)' rx='3' ry='3' transform='rotate(24 3 19)'/><rect y='16' x='12' width='18' height='6' fill='rgb(66, 90, 189)' rx='3' ry='3' transform='rotate(-24 27 19)'/></svg>");
  background-size: contain;
  background-position-x: right;
  background-repeat-x: no-repeat;
}

.nav-burger + label {
  color: #425ABD;
  /* transition-out timing etc: */
  transition: transform 0.5s, padding 0.5s, width 0.5s, color 0.5s, background-color 0.5s;
  transition-timing-function: ease, step-end, step-end, step-end, ease;
}
.nav-burger:checked + label {
  transform: rotate(-180deg);
  /* Hide text */
  padding-right: 2px; width: 30px; color: transparent !important;
  /* transition-in timing etc: */
  transition: transform 0.5s, padding 0s, width 0s, color 0s, background-color 0.5s; /* 0s specified because not all browsers support the transition-timing-function properly */
  transition-timing-function: ease, step-start, step-start, step-start, ease;
}
#navigation.scrolled label[for="nav-burger"] {
  color: #ffffff;
  background-color: #425ABD;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30'><rect width='30' height='6' fill='#FFFFFF' rx='3' ry='3'/><rect y='8' x='0'  width='17' height='6' fill='#FFFFFF' rx='3' ry='3' transform='rotate(12 3 11)'/><rect y='8' x='13' width='17' height='6' fill='#FFFFFF' rx='3' ry='3' transform='rotate(-12 27 11)'/><rect y='16' x='0'  width='18' height='6' fill='#FFFFFF' rx='3' ry='3' transform='rotate(24 3 19)'/><rect y='16' x='12' width='18' height='6' fill='#FFFFFF' rx='3' ry='3' transform='rotate(-24 27 19)'/></svg>");
}

#menu {
  transition: max-height 0.4s, opacity 0.5s;
  max-height: 0px;
  overflow-y: hidden;
  opacity: 0;
  clear: left;
}
#menupusher {
  /*
  Purely to provide space for the burger button,
  shifting the menu down 30px without overlapping the content.
  */
  height: 30px;
}
#nav-burger:checked ~ #menu {
  max-height: 800px;
  opacity: 1;
  overflow-y: auto;
}

#menu ul li { display: block; }
#menu ul li a { width: auto; padding: 7px 0px; }