.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: transparent;
  z-index: 160;
  -webkit-transition: 500ms ease-in-out;
  -moz-transition: 500ms ease-in-out;
  -ms-transition: 500ms ease-in-out;
  -o-transition: 500ms ease-in-out;
  transition: 500ms ease-in-out; }
  .header .header-logo {
    height: 80px;
    padding: 6.4px 16px; }
    .header .header-logo a {
      height: calc(80px - 16px * 2.5); }
    .header .header-logo .logo-img {
      height: calc(80px - 16px * 2.5);
      z-index: 170;
      -webkit-transition: opacity 250ms ease-in-out;
      -moz-transition: opacity 250ms ease-in-out;
      -ms-transition: opacity 250ms ease-in-out;
      -o-transition: opacity 250ms ease-in-out;
      transition: opacity 250ms ease-in-out; }
      .header .header-logo .logo-img:hover {
        opacity: 0.6; }
  .header.not-transparent {
    background-color: rgba(26, 110, 166, 0.98);
    box-shadow: 0px 2px 8px rgba(45, 45, 45, 0.4); }
  .header .header-logo,
  .header .header-navigation {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
  .header .header-navigation .navigation {
    display: none;
    margin-right: 16px;
    list-style-type: none; }
    @media only screen and (min-width: 1023px) and (min-height: 420px) {
      .header .header-navigation .navigation {
        display: inherit; } }
    .header .header-navigation .navigation li {
      display: inline-block;
      height: 42px;
      margin-right: 8px; }
      .header .header-navigation .navigation li a:link,
      .header .header-navigation .navigation li a:visited {
        display: block;
        min-height: 42px;
        padding: 8px 16px;
        color: #FFFFFF;
        font-weight: 500;
        text-transform: uppercase;
        background-color: transparent;
        border-radius: 8px;
        text-decoration: none; }
      .header .header-navigation .navigation li a:active,
      .header .header-navigation .navigation li a:focus,
      .header .header-navigation .navigation li a:hover {
        background-color: #14547e;
        color: #FFFFFF; }
      .header .header-navigation .navigation li.active a:link,
      .header .header-navigation .navigation li.active a:visited,
      .header .header-navigation .navigation li.active a:active,
      .header .header-navigation .navigation li.active a:focus,
      .header .header-navigation .navigation li.active a:hover {
        background-color: #FFFFFF;
        color: #1a6ea6; }

#menuToggle {
  display: block;
  position: absolute;
  top: 24px;
  right: 16px;
  z-index: 165;
  width: auto;
  height: auto;
  padding: 4px;
  -webkit-user-select: none;
  user-select: none; }
  @media only screen and (min-width: 1023px) and (min-height: 420px) {
    #menuToggle {
      display: none; } }

#menuToggle input {
  display: block;
  width: 40px;
  height: 34px;
  position: fixed;
  margin-top: -4px;
  margin-left: -4px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none; }

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #FFFFFF;
  border-radius: 3px;
  z-index: 166;
  pointer-events: none;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }

#menuToggle span:first-child {
  transform-origin: 0% 0%; }

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%; }

#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #FFFFFF; }

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2); }

#menuToggle input:checked ~ span:nth-last-child(2) {
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px); }

#menu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: 0 0 0 0;
  padding: 16px;
  padding-top: 64px;
  overflow: hidden;
  background: #104264;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(0, -100%);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
  #menu a:link,
  #menu a:visited {
    color: #d1e2ed; }
    #menu a:link.button,
    #menu a:visited.button {
      width: calc(100%/2 - 16px/2);
      margin-top: 16px;
      color: #FFFFFF;
      text-align: center; }

#menu li {
  padding: 16px;
  font-size: 22px;
  border-top: 1px solid #14547e; }
  #menu li:last-child {
    border-bottom: 1px solid #14547e; }
  #menu li:hover {
    background-color: #14547e; }

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul {
  transform: scale(1, 1);
  opacity: 1; }