/*----------------------------------------------*\
    HEADER
	======
	
	@package sibylle
	
\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========
	
	@package sibylle
	
\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Widths */
/* Media Queries */
/* 480px */
/* 800px */
/* 1000px */
/* 1500px */
/* Fonts */
/* $serif: "freight-text-pro", sans-serif; */
/* 
 *
 * / Mixins
------------------------------------------------*/
/* Site Header */
/* line 13, ../src/main/header.scss */
.site-header {
  margin-bottom: 3em;
  margin-top: 5em; }

/* line 17, ../src/main/header.scss */
.site-logo {
  display: block;
  width: 16em;
  max-height: 100%;
  margin-right: auto;
  margin-left: auto; }

/* line 24, ../src/main/header.scss */
.logo--line-top {
  display: none; }

@media (min-width: 30em) {
  /* line 28, ../src/main/header.scss */
  .site-logo {
    display: inline;
    /* prevents white space next to logo from being clickable as link */
    margin: 0 22%;
    width: 33.3%; }

  /* line 33, ../src/main/header.scss */
  .logo--line-top {
    display: block; } }
@media (min-width: 93.75em) {
  /* line 38, ../src/main/header.scss */
  .site-logo {
    max-width: 30em;
    position: relative;
    left: -10.5em;
    margin: 0 auto;
    display: block; } }
/* Menu */
/* line 49, ../src/main/header.scss */
.menu {
  margin: 1em;
  text-align: center; }
  @media (min-width: 62.5em) {
    /* line 49, ../src/main/header.scss */
    .menu {
      margin-left: 50%;
      margin-right: 1em;
      text-align: left; } }
  /* line 58, ../src/main/header.scss */
  .menu .menu-item {
    display: inline-block;
    margin-right: 0.25em;
    letter-spacing: 1px;
    /* Friends */
    /* About (Compass) */ }
    /* line 63, ../src/main/header.scss */
    .menu .menu-item:before {
      content: '/';
      margin-right: 0.5em; }
    /* line 67, ../src/main/header.scss */
    .menu .menu-item:first-child:before {
      content: '';
      margin-right: 0; }
    /* line 71, ../src/main/header.scss */
    .menu .menu-item:last-child:before {
      content: '';
      margin-right: 0; }
    @media (min-width: 520px) {
      /* line 77, ../src/main/header.scss */
      .menu .menu-item--friends {
        margin-left: 2.25em; }
        /* line 80, ../src/main/header.scss */
        .menu .menu-item--friends:before {
          content: '\2248'; } }
    @media (min-width: 1050px) {
      /* line 86, ../src/main/header.scss */
      .menu .menu-item--friends {
        margin-left: 3.25em; } }
    /* line 91, ../src/main/header.scss */
    .menu .menu-item--about {
      position: absolute;
      top: 1em;
      left: 0;
      right: 0;
      text-align: center; }
      /* line 98, ../src/main/header.scss */
      .menu .menu-item--about a {
        display: block;
        width: 20px;
        margin: 0 auto;
        position: relative; }
        @media (min-width: 30em) {
          /* line 98, ../src/main/header.scss */
          .menu .menu-item--about a {
            margin: 0 47.4%; } }
        @media (min-width: 50em) {
          /* line 98, ../src/main/header.scss */
          .menu .menu-item--about a {
            margin: 0 47.9%; } }
        @media (min-width: 62.5em) {
          /* line 98, ../src/main/header.scss */
          .menu .menu-item--about a {
            margin: 0 48.2%; } }
        @media (min-width: 93.75em) {
          /* line 98, ../src/main/header.scss */
          .menu .menu-item--about a {
            margin: 0 48.3%; } }
      /* line 117, ../src/main/header.scss */
      .menu .menu-item--about:before {
        content: ''; }
      /* line 120, ../src/main/header.scss */
      .menu .menu-item--about a:before {
        content: "";
        display: block;
        height: 20px;
        width: 20px;
        background-image: url("https://sibylle.life/wp-content/themes/sibylle/images/compass.svg");
        background-size: cover; }
      /* line 128, ../src/main/header.scss */
      .menu .menu-item--about__text {
        color: #ff7300;
        font-size: 0.85em;
        position: absolute;
        left: 2.75em;
        top: 0.15em; }
  /* line 137, ../src/main/header.scss */
  .menu a {
    text-decoration: none;
    font-family: "jaf-facitweb", sans-serif;
    text-transform: uppercase;
    color: #414042;
    font-size: 0.8em; }
  /* line 144, ../src/main/header.scss */
  .menu .current-menu-item a {
    color: #ff7300; }
  /* line 147, ../src/main/header.scss */
  .menu .menu-item--friends.current-menu-item:before {
    color: #ff7300; }

/* Search */
/* line 153, ../src/main/header.scss */
.gradient {
  background-color: #FFF;
  padding-bottom: 1.5em;
  transition: opacity 0.5s ease 0s; }

/* line 160, ../src/main/header.scss */
.menu .search a {
  outline: none; }
  /* line 163, ../src/main/header.scss */
  .menu .search a:before {
    content: '\21';
    font-family: fontello;
    margin-left: 2em; }

/* line 170, ../src/main/header.scss */
.search-form {
  position: absolute;
  top: -20em;
  right: 0;
  left: 0;
  transition: top 0.25s ease 0s;
  background-color: #ff7300;
  padding: 3.5em 0 1.75em;
  z-index: 100;
  text-align: center; }
  /* line 181, ../src/main/header.scss */
  .search-form .search-close {
    position: absolute;
    top: 0.625em;
    right: 0.625em;
    cursor: pointer;
    font-size: 1.2em;
    color: #fff; }

/* line 192, ../src/main/header.scss */
.search-form-open .search-form {
  top: 0; }
/* line 195, ../src/main/header.scss */
.search-form-open .gradient {
  opacity: .25; }

/* line 199, ../src/main/header.scss */
.search-field {
  border: 0 none;
  font-size: 1em;
  max-width: 90%;
  padding: 0.8em 1.5em;
  width: 30em;
  font-family: "jaf-facitweb", sans-serif;
  outline: none; }
  /* line 208, ../src/main/header.scss */
  .search-field:focus {
    box-shadow: inset 0 0 4px #ff7300; }
  /* line 211, ../src/main/header.scss */
  .not-found .search-field {
    border: 1px solid #414042;
    margin-bottom: 1em; }
    /* line 215, ../src/main/header.scss */
    .not-found .search-field:focus {
      box-shadow: inset 0 0 5px #414042; }

/* line 220, ../src/main/header.scss */
.search-submit {
  background-color: #ff7300;
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 1em;
  margin-top: 1.5em;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  text-transform: uppercase;
  font-family: "jaf-facitweb", sans-serif;
  letter-spacing: 1px;
  transition: color 0.3s ease, background-color 0.3s ease; }
  /* line 236, ../src/main/header.scss */
  .search-submit:hover {
    background-color: #fff;
    color: #ff7300; }
  /* line 240, ../src/main/header.scss */
  .not-found .search-submit {
    background-color: #fff;
    border: 2px solid #ff7300;
    color: #ff7300; }
    /* line 245, ../src/main/header.scss */
    .not-found .search-submit:hover {
      background-color: #ff7300;
      color: #fff; }

/* line 251, ../src/main/header.scss */
.not-found .search-close {
  display: none; }

@media only screen and (min-width: 50em) {
  /* Search */
  /* line 257, ../src/main/header.scss */
  .search-form {
    padding: 2em 0; }

  /* line 260, ../src/main/header.scss */
  .search-submit {
    display: inline-block;
    margin-top: 0;
    margin-left: 1em;
    margin-right: 1em; } }