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

	@package hannahbahl

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

	@package hannahbahl

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Breakpoints */
/* 500px */
/* 600px */
/* 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: 4em; } }

/* line 38, ../src/header.scss */
.site-title-wrapper a {
  text-decoration: none;
  color: #000000;
  font-weight: 600;
  font-size: 1.9em;
  text-transform: uppercase; }

/* line 46, ../src/header.scss */
.site-title,
.site-subtitle {
  display: block; }

/* line 50, ../src/header.scss */
.site-subtitle {
  text-transform: uppercase;
  letter-spacing: 3.75px;
  font-weight: 300;
  font-size: 0.535em;
  margin-top: -0.25em; }

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

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

/* line 79, ../src/header.scss */
header nav li {
  animation-delay: calc(2 * 0.2s); }

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

/* Menu */
/* line 89, ../src/header.scss */
.menu-button-wrapper {
  position: absolute;
  top: 1.25em;
  right: 1em;
  text-transform: lowercase; }
  @media screen and (min-width: 37.5em) {
    /* line 89, ../src/header.scss */
    .menu-button-wrapper {
      display: none; } }

/* line 99, ../src/header.scss */
.menu-button {
  position: absolute;
  right: 0;
  transition: opacity 0.2s ease;
  cursor: pointer; }
  /* line 105, ../src/header.scss */
  .show-menu .menu-button {
    opacity: 0; }

/* line 109, ../src/header.scss */
.menu-close {
  opacity: 0;
  position: absolute;
  right: 0;
  transition: opacity 0.2s ease;
  z-index: 999;
  cursor: pointer; }
  /* line 117, ../src/header.scss */
  .show-menu .menu-close {
    opacity: 1; }

/* line 121, ../src/header.scss */
.main-navigation {
  width: 60%;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: -ms-flexbox;
  display: flex;
  background-color: #90EBD0;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  text-align: center;
  z-index: 998;
  pointer-events: none;
  font-size: 1.5em; }
  /* line 139, ../src/header.scss */
  .show-menu .main-navigation {
    opacity: 1;
    pointer-events: auto; }
  @media screen and (min-width: 37.5em) {
    /* line 121, ../src/header.scss */
    .main-navigation {
      display: block;
      position: static;
      text-align: left;
      height: auto;
      opacity: 1;
      font-size: 1em;
      background-color: transparent;
      pointer-events: auto;
      width: 50%;
      padding-top: 1.25em;
      margin-left: auto;
      padding-top: 0.5em; } }
  @media screen and (min-width: 50em) {
    /* line 121, ../src/header.scss */
    .main-navigation {
      font-size: 1.25em;
      width: 50%; } }
  @media screen and (min-width: 68.75em) {
    /* line 121, ../src/header.scss */
    .main-navigation {
      font-size: 1.25em;
      width: 40%; } }

@media screen and (min-width: 37.5em) {
  /* line 167, ../src/header.scss */
  .main-navigation .menu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between; } }
/* line 174, ../src/header.scss */
.main-navigation .menu a {
  color: #000000;
  text-decoration: none;
  font-weight: 600; }
  /* line 179, ../src/header.scss */
  .main-navigation .menu a:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 0.35em;
    transform-origin: left;
    transform: translateY(-0.4rem) scaleX(0);
    transition: transform 1s ease;
    background-color: #000000; }
    @media screen and (min-width: 37.5em) {
      /* line 179, ../src/header.scss */
      .main-navigation .menu a:after {
        height: 3px;
        margin-top: 0.25em; } }
  /* line 195, ../src/header.scss */
  .main-navigation .menu a:hover:after, .main-navigation .menu a:focus:after {
    transform: translateY(-0.4rem) scaleX(1); }
/* line 201, ../src/header.scss */
.main-navigation .menu .current_page_item a:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.35em;
  transform-origin: left;
  transform: translateY(-0.4rem) scaleX(1);
  transition: transform 1s ease;
  background-color: #000000; }
  @media screen and (min-width: 37.5em) {
    /* line 201, ../src/header.scss */
    .main-navigation .menu .current_page_item a:after {
      height: 3px;
      margin-top: 0.25em; } }
/* line 217, ../src/header.scss */
.main-navigation .menu .current_page_item a:hover:after,
.main-navigation .menu .current_page_item a:focus:after {
  transform-origin: left;
  transform: translateY(-0.4rem) scaleX(0); }