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

	@package museumofthesoul

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

	@package museumofthesoul

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Breakpoints */
/* 500px */
/* 600px */
/* 800px */
/* 1100px */
/* 1400px */
/* Fonts */
/* 
 *
 * / Mixins
------------------------------------------------*/
/* 
 *
 * 1./  
------------------------------------------------*/
/* line 16, ../src/header.scss */
.site-header {
  margin-top: 1em;
  margin-bottom: 2em;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: end;
      align-items: flex-end; }
  @media screen and (min-width: 50em) {
    /* line 16, ../src/header.scss */
    .site-header {
      margin-top: 2em;
      margin-bottom: 4em; } }
  @media screen and (min-width: 68.75em) {
    /* line 16, ../src/header.scss */
    .site-header {
      margin-top: 3em;
      margin-bottom: 6em; } }

/* line 33, ../src/header.scss */
.site-title {
  font-size: 1.25em;
  text-transform: lowercase;
  font-weight: 300; }
  @media screen and (min-width: 50em) {
    /* line 33, ../src/header.scss */
    .site-title {
      font-size: 1.5em; } }
  @media screen and (min-width: 68.75em) {
    /* line 33, ../src/header.scss */
    .site-title {
      font-size: 2em; } }
  /* line 45, ../src/header.scss */
  .site-title a {
    color: #000000;
    display: inline-block;
    text-decoration: none; }
  /* line 50, ../src/header.scss */
  .home .site-title {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0; }

/* Menu */
/* line 60, ../src/header.scss */
.menu-button {
  font-size: 1em;
  position: absolute;
  top: 0.5em;
  right: 1em;
  z-index: 999;
  border-radius: 100%;
  transition: color 0.2s; }
  @media screen and (min-width: 50em) {
    /* line 60, ../src/header.scss */
    .menu-button {
      font-size: 1.125em;
      right: 2em; } }
  @media screen and (min-width: 68.75em) {
    /* line 60, ../src/header.scss */
    .menu-button {
      font-size: 1.25em;
      right: 3em; } }
  /* line 78, ../src/header.scss */
  .menu-button:before {
    content: '';
    width: 4em;
    height: 4em;
    background: black;
    background: radial-gradient(circle, black 0%, #dee1cc 70%);
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    top: -1.35em;
    left: -0.95em;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.2s; }
  /* line 93, ../src/header.scss */
  .menu-button:hover {
    color: #ffffff; }
  /* line 96, ../src/header.scss */
  .menu-button:hover:before {
    opacity: 1; }
  /* line 100, ../src/header.scss */
  .home .menu-button {
    color: #ffffff;
    filter: drop-shadow(0 0 2px #000000); }
    /* line 104, ../src/header.scss */
    .home .menu-button:hover {
      filter: none; }
  /* line 108, ../src/header.scss */
  .home.menu-open .menu-button {
    filter: none;
    color: #000000; }
    /* line 112, ../src/header.scss */
    .home.menu-open .menu-button:hover {
      color: #DEE1CC; }

/* line 117, ../src/header.scss */
.main-navigation {
  opacity: 0;
  transform: translateY(-1000px);
  transition: opacity 0.2s, transform 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background-color: #E5EACF;
  border: #DEE1CC 4px solid;
  pointer-events: none;
  z-index: 998; }
  @media screen and (min-width: 50em) {
    /* line 117, ../src/header.scss */
    .main-navigation {
      top: -2em; } }
  @media screen and (min-width: 68.75em) {
    /* line 117, ../src/header.scss */
    .main-navigation {
      top: -3em; } }
  /* line 147, ../src/header.scss */
  .main-navigation .menu {
    padding: 0.75em; }
    @media screen and (min-width: 37.5em) {
      /* line 147, ../src/header.scss */
      .main-navigation .menu {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr;
        min-height: 100vh;
        gap: 0.75em; } }
    /* line 158, ../src/header.scss */
    .main-navigation .menu__description {
      font-size: 1em;
      padding: 3em 2em 1em 2em;
      text-align: center; }
      @media screen and (min-width: 37.5em) {
        /* line 158, ../src/header.scss */
        .main-navigation .menu__description {
          font-size: 1.125em; } }
      /* line 167, ../src/header.scss */
      .main-navigation .menu__description a {
        color: #000000; }
    /* line 171, ../src/header.scss */
    .main-navigation .menu__drawer {
      background-color: #DEE1CC;
      padding: 0.75em 0.5em;
      margin-bottom: 0.75em; }
      @media screen and (min-width: 37.5em) {
        /* line 171, ../src/header.scss */
        .main-navigation .menu__drawer {
          padding: 1.5em 1em;
          margin-bottom: 0; } }
      @media screen and (min-width: 50em) {
        /* line 171, ../src/header.scss */
        .main-navigation .menu__drawer {
          padding: 2em 2em; } }
      @media screen and (min-width: 68.75em) {
        /* line 171, ../src/header.scss */
        .main-navigation .menu__drawer {
          padding: 2em 3em; } }
      /* line 187, ../src/header.scss */
      .main-navigation .menu__drawer .what-list__project {
        max-width: 4em;
        margin-bottom: 2em; }
      /* line 191, ../src/header.scss */
      .main-navigation .menu__drawer .what-list__title {
        font-size: 0.7em; }
    /* line 195, ../src/header.scss */
    .main-navigation .menu__heading {
      text-align: center;
      font-size: 1.125em; }
      @media screen and (min-width: 37.5em) {
        /* line 195, ../src/header.scss */
        .main-navigation .menu__heading {
          margin-bottom: 1.5em;
          font-size: 1.25em; } }
      @media screen and (min-width: 50em) {
        /* line 195, ../src/header.scss */
        .main-navigation .menu__heading {
          font-size: 1.5em; } }
      /* line 207, ../src/header.scss */
      .main-navigation .menu__heading a {
        text-decoration: none;
        color: #000000; }
    /* line 212, ../src/header.scss */
    .main-navigation .menu__mobile-links {
      margin-top: 1em;
      text-align: center;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
          justify-content: space-around; }
      /* line 218, ../src/header.scss */
      .main-navigation .menu__mobile-links a {
        text-decoration: none;
        color: #000000; }
      @media screen and (min-width: 37.5em) {
        /* line 212, ../src/header.scss */
        .main-navigation .menu__mobile-links {
          display: none; } }
    /* line 227, ../src/header.scss */
    .main-navigation .menu__image-link {
      display: none; }
      @media screen and (min-width: 37.5em) {
        /* line 227, ../src/header.scss */
        .main-navigation .menu__image-link {
          display: block;
          margin-bottom: 2em;
          position: relative; } }
    /* line 236, ../src/header.scss */
    .main-navigation .menu__image {
      position: relative; }
    /* line 239, ../src/header.scss */
    .main-navigation .menu__image__text {
      color: #ffffff;
      background: black;
      background: radial-gradient(circle, black 0%, rgba(222, 225, 204, 0.9) 60%);
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center;
      opacity: 0;
      z-index: 10;
      transition: opacity 0.5s;
      text-transform: lowercase;
      text-align: center; }
      @media screen and (min-width: 37.5em) {
        /* line 239, ../src/header.scss */
        .main-navigation .menu__image__text {
          font-size: 0.9em; } }
      @media screen and (min-width: 50em) {
        /* line 239, ../src/header.scss */
        .main-navigation .menu__image__text {
          font-size: 1.25em; } }
      @media screen and (min-width: 68.75em) {
        /* line 239, ../src/header.scss */
        .main-navigation .menu__image__text {
          font-size: 1.5em; } }
      /* line 269, ../src/header.scss */
      .main-navigation .menu__image__text:hover {
        opacity: 1; }
    /* line 273, ../src/header.scss */
    .main-navigation .menu .what-list__listing {
      display: none; }
      @media screen and (min-width: 37.5em) {
        /* line 273, ../src/header.scss */
        .main-navigation .menu .what-list__listing {
          display: block; } }
  /* line 281, ../src/header.scss */
  .menu-open .main-navigation {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll; }

/* line 293, ../src/header.scss */
.menu-open {
  overflow: hidden; }

/* When mouse is hovering over what items */
/* line 297, ../src/header.scss */
.hover .what-list__title {
  opacity: 1; }

/* 
 *
 * 2./  Wandering SVG Animation
------------------------------------------------*/
/* line 305, ../src/header.scss */
.wandering-text {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  height: 120%; }
  @media screen and (min-width: 50em) {
    /* line 305, ../src/header.scss */
    .wandering-text {
      height: auto;
      width: auto; } }
  /* line 318, ../src/header.scss */
  .wandering-text path {
    fill: transparent; }
  /* line 321, ../src/header.scss */
  .wandering-text text {
    font-size: 1.25em; }
  /* line 324, ../src/header.scss */
  .home .wandering-text {
    z-index: 100; }
    /* line 327, ../src/header.scss */
    .home .wandering-text text {
      fill: #ffffff;
      filter: drop-shadow(0 0 2px #000000); }
  /* line 332, ../src/header.scss */
  .menu-open .wandering-text {
    opacity: 0;
    pointer-events: none;
    z-index: -1; }