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

	@package piknikpress

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

	@package piknikpress

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Widths */
/* Breakpoints */
/* 500px */
/* 600px */
/* 700px */
/* 800px */
/* 1100px */
/* 1400px */
/* Fonts */
/* 
 *
 * / Mixins
------------------------------------------------*/
/* 
 *
 * 1./  
------------------------------------------------*/
/* line 16, ../src/header.scss */
.site-header {
  padding-top: 1em;
  padding-bottom: 2em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  position: fixed;
  width: 100%;
  top: 0;
  transition: opacity 0.5s ease, z-index 0.3s ease;
  z-index: 100; }
  @media screen and (min-width: 37.5em) {
    /* line 16, ../src/header.scss */
    .site-header {
      padding-top: 2em;
      padding-bottom: 3em; } }
  @media screen and (min-width: 68.75em) {
    /* line 16, ../src/header.scss */
    .site-header {
      padding-top: 3em;
      padding-bottom: 6em; } }

/* line 36, ../src/header.scss */
.hide {
  opacity: 0;
  z-index: -1; }

/* line 40, ../src/header.scss */
.site-branding {
  width: 45%; }

/* line 43, ../src/header.scss */
.site-logo-link {
  background-position: 0;
  background-size: 200%;
  border-radius: 100%;
  height: 5em;
  width: 5em;
  display: block;
  padding: 0.25em;
  margin-left: -0.25em;
  margin-top: -0.25em;
  transition: transform 1s ease; }
  @media screen and (min-width: 37.5em) {
    /* line 43, ../src/header.scss */
    .site-logo-link {
      height: 6em;
      width: 6em; } }
  @media screen and (min-width: 50em) {
    /* line 43, ../src/header.scss */
    .site-logo-link {
      height: 7em;
      width: 7em; } }
  /* line 63, ../src/header.scss */
  .site-logo-link:hover, .site-logo-link:focus {
    background-image: linear-gradient(to right, #6a78d5, #e483be, #a5f7d3, #35cce4, #6a78d5);
    animation: hologram 1.5s infinite alternate;
    transform: rotate(360deg); }

@keyframes hologram {
  0% {
    background-position: 0; }
  100% {
    background-position: 100%; } }
/* SVG Logo */
/* line 81, ../src/header.scss */
.site-logo-svg .cls-1 {
  fill: #016937;
  transition: fill 0.3s ease; }
/* line 85, ../src/header.scss */
.site-logo-svg:hover .cls-1, .site-logo-svg:focus .cls-1 {
  fill: #000000; }

/* line 91, ../src/header.scss */
.dark-mode .cls-1 {
  fill: #ffffff; }

/* header timing */
@keyframes fade {
  0% {
    opacity: 0;
    transform: translate(0, 30px); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }
/* line 107, ../src/header.scss */
header h1,
header nav li,
footer {
  animation: fade 0.2s ease both; }

/* line 113, ../src/header.scss */
header h1 {
  animation-delay: 0.2s; }

/* line 116, ../src/header.scss */
header nav li:nth-of-type(1) {
  animation-delay: calc(2 * 0.2s); }

/* line 119, ../src/header.scss */
header nav li:nth-of-type(2) {
  animation-delay: calc(3 * 0.2s); }

/* line 122, ../src/header.scss */
header nav li:nth-of-type(3) {
  animation-delay: calc(4 * 0.2s); }

/* line 125, ../src/header.scss */
footer {
  animation-delay: calc(4 * 0.2s); }

/* Menu */
/* line 132, ../src/header.scss */
.main-navigation {
  width: 55%;
  padding-top: 1.25em;
  margin-left: auto;
  max-width: 12em; }
  @media screen and (min-width: 37.5em) {
    /* line 132, ../src/header.scss */
    .main-navigation {
      padding-top: 0.5em;
      font-size: 1.25em; } }
  @media screen and (min-width: 50em) {
    /* line 132, ../src/header.scss */
    .main-navigation {
      font-size: 1.35em; } }
  @media screen and (min-width: 68.75em) {
    /* line 132, ../src/header.scss */
    .main-navigation {
      font-size: 1.5em; } }

/* line 153, ../src/header.scss */
.dark-mode .main-navigation .menu a {
  color: #ffffff; }
  /* line 156, ../src/header.scss */
  .dark-mode .main-navigation .menu a:after {
    background-color: #ffffff; }
/* line 160, ../src/header.scss */
.dark-mode .main-navigation .menu .current_page_item a:after {
  background-color: #ffffff; }

/* line 165, ../src/header.scss */
.main-navigation .menu {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between; }
  /* line 169, ../src/header.scss */
  .main-navigation .menu a {
    color: #016937;
    text-decoration: none;
    text-transform: lowercase;
    font-weight: 500; }
  /* line 176, ../src/header.scss */
  .main-navigation .menu .current_page_item a:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 0.25em;
    background-color: #016937;
    transform-origin: right;
    transform: translateY(-0.4rem) scaleX(1);
    transition: transform 1s ease; }
    @media screen and (min-width: 37.5em) {
      /* line 176, ../src/header.scss */
      .main-navigation .menu .current_page_item a:after {
        height: 3px;
        margin-top: 0.125em; } }
  /* line 192, ../src/header.scss */
  .main-navigation .menu .current_page_item a:hover:after,
  .main-navigation .menu .current_page_item a:focus:after {
    transform-origin: right;
    transform: translateY(-0.4rem) scaleX(0); }