/*----------------------------------------------*\
    HEADER
	======

	@package piknikpress

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package piknikpress

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Widths */
/* 400px */
/* 600px */
/* 800px */
/* 1100px */
/* 1400px */
/* Fonts */
/* 
 *
 * / Mixins
------------------------------------------------*/
/* 
 *
 * 1./  
------------------------------------------------*/
/* line 17, ../src/header.scss */
.site-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: start;
      align-items: flex-start;
  padding-bottom: 2em; }
  /* line 23, ../src/header.scss */
  .home .site-header {
    opacity: 0;
    transition: opacity 0.2s; }
    /* line 27, ../src/header.scss */
    .home .site-header.loaded {
      opacity: 1; }

/* line 32, ../src/header.scss */
.site-title {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2em; }

/* line 37, ../src/header.scss */
.filter-list-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
  -ms-flex-pack: end;
      justify-content: flex-end;
  font-size: 0.8em; }

/* line 43, ../src/header.scss */
.filter-heading {
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 1em; }

/* line 48, ../src/header.scss */
.filter-list {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1em;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 50em; }

/* line 54, ../src/header.scss */
.filter {
  background-color: #ffffff;
  border: 1px solid #000000;
  padding: 0.5em 0.25em 0.5em 1em;
  text-transform: uppercase;
  margin-right: 1em;
  margin-bottom: 1em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, padding 0.2s;
  font-size: 0.8em; }
  /* line 65, ../src/header.scss */
  .filter:after {
    content: 'x';
    display: inline-block;
    transition: opacity 0.2s;
    opacity: 0;
    margin-left: 0.25em; }
  /* line 73, ../src/header.scss */
  .filter:hover {
    /* don't focus */
    background-color: #000000;
    color: #ffffff; }
  /* line 78, ../src/header.scss */
  .filter:active, .filter.is-checked {
    background-color: #000000;
    color: #ffffff;
    padding: 0.5em 0.65em 0.5em 0.6em; }
    /* line 84, ../src/header.scss */
    .filter:active:after, .filter.is-checked:after {
      opacity: 1; }