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

	@package tendingroots

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

	@package tendingroots

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Widths */
/* 400px */
/* 600px */
/* 700px */
/* 800px */
/* 1000px */
/* 1400px */
/* 1800px */
/* Margins & Padding */
/* small, >750, >1100, >1500 */
/* Fonts */
/* 
 *
 * / Mixins
------------------------------------------------*/
/* 
 *
 * 1./  
------------------------------------------------*/
@keyframes translateUpFade {
  0% {
    transform: translateY(0);
    opacity: 1; }
  100% {
    transform: translateY(-100%);
    opacity: 0; } }
/* line 27, ../src/header.scss */
.site-header {
  padding: 4.5em 1em 1em 1em;
  position: relative;
  /*transition: opacity 1s;*/ }
  @media screen and (min-width: 50em) {
    /* line 27, ../src/header.scss */
    .site-header {
      padding: 6em 2em 2em 2em; } }
  @media screen and (min-width: 62.5em) {
    /* line 27, ../src/header.scss */
    .site-header {
      padding: 6em 3em 3em 3em; } }
  /* line 38, ../src/header.scss */
  .site-header a {
    text-decoration: none; }
  /* line 41, ../src/header.scss */
  .site-header .logo-root-wrapper {
    width: 100%;
    opacity: 0;
    transition: opacity 0.2s; }
    /* line 46, ../src/header.scss */
    .site-header .logo-root-wrapper.loaded {
      opacity: 1; }
    @media screen and (min-width: 62.5em) {
      /* line 41, ../src/header.scss */
      .site-header .logo-root-wrapper {
        width: 85%;
        margin-left: auto;
        margin-right: auto; }
        /* line 55, ../src/header.scss */
        html:lang(tl) .site-header .logo-root-wrapper {
          width: 95%; }
        /* line 58, ../src/header.scss */
        html:lang(vi) .site-header .logo-root-wrapper {
          width: 95%; } }
  /* line 64, ../src/header.scss */
  .site-header .logo {
    display: block; }
    @media screen and (min-width: 62.5em) {
      /* line 64, ../src/header.scss */
      .site-header .logo {
        margin-left: 1em;
        margin-right: 1em; } }
  /* line 72, ../src/header.scss */
  .story .site-header {
    animation: translateUpFade 1.5s forwards; }

/* line 78, ../src/header.scss */
html:lang(en) .logo--tending {
  width: 33%; }
/* line 81, ../src/header.scss */
html:lang(en) .logo--our {
  width: 16.5%; }
/* line 84, ../src/header.scss */
html:lang(en) .logo--roots {
  width: 27%; }
/* line 87, ../src/header.scss */
html:lang(en) .roots {
  width: 8%;
  min-width: 8%; }

/* line 94, ../src/header.scss */
html:lang(tl) .logo--tending {
  width: 33%; }
/* line 97, ../src/header.scss */
html:lang(tl) .logo--our {
  width: 22.5%; }
/* line 100, ../src/header.scss */
html:lang(tl) .logo--roots {
  width: 32.5%; }
/* line 103, ../src/header.scss */
html:lang(tl) .roots {
  width: 5%;
  min-width: 5%; }

/* line 110, ../src/header.scss */
html:lang(zh) .logo--tending {
  width: 23%; }
/* line 113, ../src/header.scss */
html:lang(zh) .logo--our {
  width: 34%; }
/* line 116, ../src/header.scss */
html:lang(zh) .logo--roots {
  width: 23%; }
/* line 119, ../src/header.scss */
html:lang(zh) .roots {
  width: 11%;
  min-width: 11%; }

/* line 126, ../src/header.scss */
html:lang(vi) .logo--tending {
  width: 25%; }
/* line 129, ../src/header.scss */
html:lang(vi) .logo--our {
  width: 29%; }
/* line 132, ../src/header.scss */
html:lang(vi) .logo--roots {
  width: 34%; }
/* line 135, ../src/header.scss */
html:lang(vi) .roots {
  width: 6%;
  min-width: 6%; }
/* line 139, ../src/header.scss */
html:lang(vi) .subtitle-section .home-description h2,
html:lang(vi) .subtitle-section .title,
html:lang(vi) .sidebar-section h3,
html:lang(vi) .story-listing__caption h3,
html:lang(vi) .story__subtitle {
  font-family: "CooperLtBTWXX-Light", serif, serif !important; }
/* line 146, ../src/header.scss */
html:lang(vi) .site-subtitle,
html:lang(vi) .subtitle-section .subtitle,
html:lang(vi) .subtitle-section .vision-values-description,
html:lang(vi) .story-listing__caption h2,
html:lang(vi) .talking-head__quote,
html:lang(vi) .story__title {
  font-family: sans-serif !important;
  font-weight: 500; }

/* line 158, ../src/header.scss */
html:lang(ja) .logo--tending {
  width: 38%; }
/* line 161, ../src/header.scss */
html:lang(ja) .logo--our {
  width: 12%; }
/* line 164, ../src/header.scss */
html:lang(ja) .logo--roots {
  width: 23%; }
/* line 167, ../src/header.scss */
html:lang(ja) .roots {
  width: 11%;
  min-width: 11%; }

/* line 174, ../src/header.scss */
html:lang(lo) .logo--tending {
  width: 23%; }
/* line 177, ../src/header.scss */
html:lang(lo) .logo--our {
  width: 14%; }
/* line 180, ../src/header.scss */
html:lang(lo) .logo--roots {
  width: 38%; }
/* line 183, ../src/header.scss */
html:lang(lo) .roots {
  width: 7.5%;
  min-width: 7.5%; }

/* line 190, ../src/header.scss */
html:lang(bn) .logo--tending {
  width: 33%; }
/* line 193, ../src/header.scss */
html:lang(bn) .logo--our {
  width: 34%; }
/* line 196, ../src/header.scss */
html:lang(bn) .logo--roots {
  width: 20%; }
/* line 199, ../src/header.scss */
html:lang(bn) .roots {
  width: 7.5%;
  min-width: 7.5%; }

/* line 206, ../src/header.scss */
html:lang(ne) .logo--tending {
  width: 25%; }
/* line 209, ../src/header.scss */
html:lang(ne) .logo--our {
  width: 28%; }
/* line 212, ../src/header.scss */
html:lang(ne) .logo--roots {
  width: 34%; }
/* line 215, ../src/header.scss */
html:lang(ne) .roots {
  width: 10.5%;
  min-width: 10.5%;
  margin-top: 1em; }

/* line 221, ../src/header.scss */
.menu-button {
  position: absolute;
  right: 1em;
  top: 1em;
  z-index: 999;
  transition: top 0.2s, right 0.2s;
  cursor: pointer;
  filter: drop-shadow(0rem 0.125rem 0.125rem rgba(0, 0, 0, 0.25)); }
  /* line 230, ../src/header.scss */
  .menu-button:before {
    content: "";
    display: inline-block;
    width: 2.25em;
    height: 2.25em;
    vertical-align: middle;
    background: url("../../images/menu.svg") no-repeat 0 0;
    background-size: contain; }
  /* line 239, ../src/header.scss */
  .show-menu .menu-button {
    right: 1.5em;
    top: 1.5em; }
    /* line 243, ../src/header.scss */
    .show-menu .menu-button:before {
      background: url("../../images/x.svg") no-repeat 0 0;
      background-size: contain; }
  @media screen and (min-width: 50em) {
    /* line 221, ../src/header.scss */
    .menu-button {
      display: none; } }

/* line 253, ../src/header.scss */
.main-navigation {
  height: 0;
  min-height: 0;
  pointer-events: none;
  background-color: #357FF1;
  position: absolute;
  top: 1em;
  left: 1em;
  right: 1em;
  opacity: 0;
  transition: min-height 0.2s, opacity 0.2s;
  z-index: 998; }
  @media screen and (min-width: 50em) {
    /* line 253, ../src/header.scss */
    .main-navigation {
      pointer-events: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      padding-left: 2em;
      padding-right: 2em;
      height: auto;
      min-height: auto;
      opacity: 1; } }
  @media screen and (min-width: 62.5em) {
    /* line 253, ../src/header.scss */
    .main-navigation {
      padding-left: 3em;
      padding-right: 3em; } }
  /* line 287, ../src/header.scss */
  .show-menu .main-navigation {
    min-height: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto; }

@media screen and (min-width: 50em) {
  /* line 294, ../src/header.scss */
  .menu {
    display: -ms-flexbox;
    display: flex; } }
/* line 300, ../src/header.scss */
.menu-item {
  padding-bottom: 0.25em;
  padding-left: 1em;
  vertical-align: middle;
  		/*&:last-child {
  			padding-bottom: 1em;
  
  			@media screen and (min-width: $medium) {
  				padding-bottom: 0;
  				display: none;
  			}
  		}*/ }
  /* line 306, ../src/header.scss */
  .menu-item:first-child {
    padding-top: 1em; }
    @media screen and (min-width: 50em) {
      /* line 306, ../src/header.scss */
      .menu-item:first-child {
        padding-top: 0; } }
  @media screen and (min-width: 50em) {
    /* line 300, ../src/header.scss */
    .menu-item {
      padding-right: 1.25em;
      padding-bottom: 0;
      padding-left: 0; } }
/* line 328, ../src/header.scss */
.menu a {
  text-decoration: none;
  color: #ffffff;
  font-family: "CooperLtBTWXX-Light", serif;
  font-size: 1.125em;
  border-color: transparent;
  transition: border-color 0.2s; }
  @media screen and (min-width: 50em) {
    /* line 328, ../src/header.scss */
    .menu a {
      font-size: 0.8em;
      color: #000000;
      font-family: "sunset-gothic-medium", sans-serif; } }
  /* line 342, ../src/header.scss */
  .menu a:hover {
    border-bottom: 2px solid #ffffff; }
    @media screen and (min-width: 50em) {
      /* line 342, ../src/header.scss */
      .menu a:hover {
        border-bottom: 2px solid #000000; } }

/* line 351, ../src/header.scss */
.mobile-language-text {
  font-size: 1.125em;
  color: #ffffff;
  padding-top: 1em;
  margin-left: 1em; }
  @media screen and (min-width: 50em) {
    /* line 351, ../src/header.scss */
    .mobile-language-text {
      display: none; } }

/* line 361, ../src/header.scss */
.menu-item-325,
.menu-item-2439,
.menu-item-2441,
.menu-item-2452,
.menu-item-2453,
.menu-item-2451,
.menu-item-2454,
.menu-item-2456 {
  border-top: 1px solid #ffffff;
  margin-top: 1.5em;
  padding-top: 1em;
  padding-right: 0; }
  /* line 374, ../src/header.scss */
  .menu-item-325.current-menu-item,
  .menu-item-2439.current-menu-item,
  .menu-item-2441.current-menu-item,
  .menu-item-2452.current-menu-item,
  .menu-item-2453.current-menu-item,
  .menu-item-2451.current-menu-item,
  .menu-item-2454.current-menu-item,
  .menu-item-2456.current-menu-item {
    border-bottom: 2px solid #000000; }
  @media screen and (min-width: 50em) {
    /* line 361, ../src/header.scss */
    .menu-item-325,
    .menu-item-2439,
    .menu-item-2441,
    .menu-item-2452,
    .menu-item-2453,
    .menu-item-2451,
    .menu-item-2454,
    .menu-item-2456 {
      margin-left: auto;
      margin-top: 0;
      padding-top: 0;
      border-top: none; } }

/* line 386, ../src/header.scss */
.current-lang a {
  border-bottom: 2px solid #ffffff; }
  @media screen and (min-width: 50em) {
    /* line 386, ../src/header.scss */
    .current-lang a {
      border-bottom: 2px solid #000000; } }

/* line 394, ../src/header.scss */
.logo-root-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: start;
      align-items: start; }

/* line 399, ../src/header.scss */
.roots {
  position: relative;
  /*width: 8%;*/
  margin-top: -0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  z-index: 10; }
  @media screen and (min-width: 50em) {
    /* line 399, ../src/header.scss */
    .roots {
      margin-top: -0.25em; } }

@keyframes showroot {
  0% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/* line 422, ../src/header.scss */
.root {
  opacity: 0;
  position: absolute;
  top: 0;
  object-fit: contain;
  object-position: 50% 50%;
  mix-blend-mode: multiply;
  transition: opacity 1s ease;
  width: 100%; }

/* line 432, ../src/header.scss */
.site-subtitle {
  color: #3C7C1E;
  font-family: "sunset-gothic-medium", sans-serif;
  font-size: 1.25em;
  text-align: center; }
  @media screen and (min-width: 50em) {
    /* line 432, ../src/header.scss */
    .site-subtitle {
      font-size: 1.5em; } }
  @media screen and (min-width: 62.5em) {
    /* line 432, ../src/header.scss */
    .site-subtitle {
      font-size: 1.75em; } }