header { background-color:$lessdark; @include position(fixed,0,0,null,0); padding-top:0.25em; padding-bottom:0.25em; height:$header-height; z-index:$z-header;
  //> .inner { color:$white; @extend %inner; }
  span { display:inline-block; vertical-align: middle; }
  //.percent { display: none; }
  .label { font-size:0.7em; font-family: $sans; line-height: 200%; padding-right: 0.5em; }
  .number { font-size:1.8em; font-weight: $light; line-height: 50%; color:$green;
    &.bad { color:$red; }
  }
  
  > .inner { color:$white; @extend %inner;  @include flex-container(); padding-top:0.2rem;
    .box { @include flex-item(50%); text-align: center; }
  }
  
  .hamburger { background:transparent; padding:3px; border:none; cursor: pointer; color:$blue; outline:none; height: $header-height; width: $header-height; @include position(absolute,0,2rem);
    .fill, .x { opacity: 0; }
    &:hover { 
      .fill { opacity: 1; }
      .question-mark, .x { fill:$dark; }
    }
    &.is-active {
      .question-mark { opacity: 0; }
      .x { opacity: 1; }
    }
  }
}

@media (max-width:$max-width) {
  header { 
    //.number { font-size:1.5em;}
    > .inner {
      .box { @include flex-item(33.3333%);
        &.hamburger-holder { @include flex-item(3rem); }
      }
    } 
    .hamburger-holder { text-align: right !important;
      .hamburger { position:relative; top: auto; right:auto; height: 100%;
        svg { height: 1.6rem; }
      }
    }
  }
}