/* Menu */
header .primary-menu span.top-link,
header .primary-menu a.top-link,
.page--contact header .primary-menu .top-link,
.page-node-type-ingredient header .primary-menu .top-link,
.page-node-type-core-content-item header .primary-menu .top-link,
header.active .primary-menu .top-link,
header:hover .primary-menu .top-link,
.path-frontpage header.black .primary-menu .top-link,
.path-frontpage header:hover .primary-menu .top-link,
.path-locations header:hover .primary-menu .top-link,
.path-locations header .primary-menu .top-link,
header .secondary-menu ul.menu li > a.top-link {
  font-family: var(--title-font);
}

header {
  z-index: 500;
}

header .secondary-menu span.top-link {
  font-family: var(--title-font) !important;
}

header .language-switcher ul.links li {
  font-family: var(--title-font);
  text-transform: capitalize;
}

[lang="ja"] header .language-switcher ul.links li {
  font-size: var(--font-body-small);
  line-height: 1rem;
  padding-top: 0;
  padding-bottom: 0;
}

[lang="ja"] header .language-switcher .block.block-language ul.links {
  width: 60px;
}

[lang="ja"] header div.language-switcher {
  padding-top: 4px;
}

header .language-switcher ul.links li::marker {
  font-size: 0;
}

header .language-switcher.expanded .block.block-language ul.links {
  overflow: visible;
}

header .region-header-1 .site-name a {
  height: 1.4rem;
  width: 110px;
}

header
  .menu-wrapper
  .main-menu
  > .submenu-wrapper
  > ul.menu
  li
  > .submenu-wrapper
  > .highlight
  span.secondary-title-text.mobile {
  display: none;
}

header
  .menu-wrapper
  .main-menu
  > .submenu-wrapper
  > ul.menu
  li
  > .submenu-wrapper
  > .highlight
  a.main-action {
  text-transform: none;
}

header
  .menu-wrapper
  .main-menu
  > .submenu-wrapper
  > ul.menu
  li
  > .submenu-wrapper
  > .highlight
  span
  a.secondary-title,
header
  .menu-wrapper
  .main-menu
  > .submenu-wrapper
  > ul.menu
  li
  > .submenu-wrapper
  > .highlight
  span {
  font-size: 24px;
  font-family: var(--title-font);
}

header
  .menu-wrapper
  .primary-menu
  .submenu-wrapper
  ul
  li
  .submenu-wrapper
  ul
  > li:not(.landing-link)
  > a,
header
  .menu-wrapper
  .secondary-menu
  .submenu-wrapper
  ul
  li
  .submenu-wrapper
  ul
  > li
  > a,
#wrapper
  header.active
  .menu-wrapper
  .secondary-menu
  .submenu-wrapper
  ul
  li
  .submenu-wrapper
  ul
  > li
  > a {
  font-size: 14px;
  font-family: var(--title-font);
}

#wrapper
  header.active
  .menu-wrapper
  .main-menu
  > .submenu-wrapper
  > ul.menu
  > li
  > .submenu-wrapper
  ul.expanded-menu.thirdlevel
  li
  a {
  font-size: 12px;
  font-family: var(--text-font);
  opacity: 1;
}

#wrapper
  header.active
  .menu-wrapper
  .secondary-menu
  .submenu-wrapper
  ul
  li
  .submenu-wrapper
  ul
  > li
  > a:not(:hover),
#wrapper
  header.active
  .menu-wrapper
  .primary-menu
  .submenu-wrapper
  ul
  li
  .submenu-wrapper
  ul
  > li
  > a:not(:hover),
#wrapper
  header.active
  .menu-wrapper
  .main-menu
  > .submenu-wrapper
  > ul.menu
  > li
  > .submenu-wrapper
  ul.expanded-menu.thirdlevel
  li
  a:not(:hover) {
  color: unset !important;
}

header
  .menu-wrapper
  .primary-menu
  .submenu-wrapper
  ul
  li
  .submenu-wrapper
  ul
  > li,
header
  .menu-wrapper
  .secondary-menu
  .submenu-wrapper
  ul
  li
  .submenu-wrapper
  ul
  > li {
  font-family: var(--text-font);
  color: var(--dark-grey) !important;
}

header
  .menu-wrapper
  .main-menu
  > .submenu-wrapper
  > ul.menu.expanded-menu-parent
  > li
  > .submenu-wrapper:after {
  background-color: var(--grey-extra-light) !important;
}

header .primary-menu .top-link {
  text-transform: none;
}

header
  .menu-wrapper
  .main-menu
  > .submenu-wrapper
  > ul.menu
  li
  > .submenu-wrapper
  > .highlight
  a.main-action {
  font-family: var(--text-font) !important;
  font-size: var(--font-body-medium) !important;
  line-height: var(--line-height-medium);
  padding: 9px 20px 9px;
  background-color: var(--menu-color, #000);
  border-color: var(--menu-color, #000);
}

header.active .secondary-menu ul.menu li > .top-link:not(.expanded-menu-item),
header.active .primary-menu ul.menu li > .top-link:not(.expanded-menu-item) {
  border-bottom: 6px solid transparent !important;
}

@media (min-width: 1119px) and (max-width: 3440px) {
  :root {
    --header-height: 4.5rem;
  }

  header .secondary-menu ul.menu li:nth-child(1) > .top-link,
  header:hover .secondary-menu .top-link,
  .path-frontpage header:hover .secondary-menu .top-link,
  header .secondary-menu .top-link {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    padding: 26px 0px 18.75px !important;
  }

  header .primary-menu ul.menu li:nth-child(1) > .top-link,
  header .primary-menu .top-link {
    font-size: 1rem;
    line-height: 1.5rem !important;
    padding: 24px 0px 16.5px !important;
  }

  header .menu-wrapper .menu-close {
    top: 100px;
  }

  #wrapper
    header.active
    .menu-wrapper
    .secondary-menu
    .submenu-wrapper
    ul
    li
    .submenu-wrapper
    ul
    > li
    > a,
  #wrapper
    header.active
    .menu-wrapper
    .primary-menu
    .submenu-wrapper
    ul
    li
    .submenu-wrapper
    ul
    > li
    > a {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  #wrapper
    header.active
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu.thirdlevel
    li
    a {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  header .region-header-2 {
    height: 100%;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper,
  body.user-logged-in
    header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper {
    top: 72px;
  }
}

@media (max-width: 767px) {
  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span.secondary-title-text {
    display: none;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span.secondary-title-text.mobile {
    display: block;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span.secondary-title-text.mobile
    a {
    text-decoration: none;
    color: black;
    font-family: var(--title-font);
  }

  header
    .menu-wrapper
    .third-level-opened
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.thirdlevel
    > li,
  header
    .menu-wrapper
    .primary-menu
    .submenu-wrapper
    ul
    li
    .submenu-wrapper
    ul
    > a {
    padding: 7px 0 !important;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    > div {
    padding: 10px 5% 7px !important;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu
    li {
    padding: 7px 5% !important;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    .submenu-wrapper
    ul.thirdlevel {
    padding-top: 20px;
  }

  body.user-logged-in
    header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper {
    top: 0;
  }
}

@media (max-width: 1119px) {
  :root {
    --header-height: 90px;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span.secondary-title-text {
    display: none;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span.secondary-title-text.mobile {
    display: block;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span.secondary-title-text.mobile
    a {
    text-decoration: none;
    color: black;
    font-family: var(--title-font);
  }

  header .mobile-menu-icon {
    mix-blend-mode: normal;
  }

  body.page-node-type-landing-page header .mobile-menu-icon::before,
  header .mobile-menu-icon::before {
    background-image: url(../images/mobile-menu-icon.png) !important;
  }

  body #header .region-header-1 .site-name a {
    background-image: url("../images/logo_givaudan_black.png");
  }

  body
    header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.thirdlevel
    li
    .menu__link,
  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu
    li
    .menu__link,
  body
    header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.thirdlevel
    li.menu__item.responsive
    a,
  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu
    li.menu__item.responsive
    a {
    font-family: var(--title-font) !important;
  }

  header
    .menu-wrapper
    .secondary-menu
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu
    li
    ul.menu.thirdlevel
    .menu__link {
    font-size: 14px;
  }

  header
    .menu-wrapper
    .secondary-menu
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu
    li
    .menu__link,
  header
    .menu-wrapper
    .secondary-menu
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu
    li.menu__item.responsive
    > a {
    font-size: 18px;
  }

  body
    header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.thirdlevel
    li.menu__item.responsive
    > a,
  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu
    li.menu__item.responsive
    > a {
    color: #999 !important;
    font-size: 18px;
  }

  header .primary-menu ul.menu li > .top-link {
    font-family: var(--title-font);
  }

  header .region-header-2 {
    z-index: 3;
  }

  body header#header {
    height: var(--header-height) !important;
    background-color: white !important;
    top: 0 !important;
  }
}

@media (min-width: 1120px) and (max-width: 1280px) {
  header .secondary-menu {
    flex: 4;
    -webkit-box-flex: 4;
    -ms-flex: 4;
  }
}

@media all and (min-width: 3441px) {
  :root {
    --header-height: 190px;
  }

  body header .region-header-1 .site-name a {
    height: 3.2875rem;
    width: 20.6875rem;
  }

  body header {
    height: var(--header-height);
    min-height: 190px;
  }

  .site-name {
    text-align: right;
    font-size: 4.5rem;
    line-height: 5.625rem;
  }

  header .primary-menu .submenu-wrapper ul li .submenu-wrapper ul > li,
  header .secondary-menu .submenu-wrapper ul li .submenu-wrapper ul > li {
    width: calc(33% - 75px);
  }

  body header .primary-menu ul.menu li:nth-child(1) > .top-link,
  body header .primary-menu .top-link {
    font-size: 2rem;
    line-height: 2.375rem !important;
  }

  body header .primary-menu ul.menu li {
    padding-right: 81px;
  }

  body.path-frontpage header:hover .secondary-menu .top-link,
  body.path-frontpage header.black .secondary-menu ul.menu li > .top-link,
  body header .secondary-menu ul.menu li:nth-child(1) > .top-link,
  body header .secondary-menu ul.menu li > .top-link {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  body header .secondary-menu ul.menu li {
    padding-right: 50px;
  }

  body header .region-header-1 .site-name a {
    text-indent: 350px;
  }

  body header .region-header-3 .search .search-toggle.opened {
    background-size: 28px;
  }

  body header .region-header-3 .search .search-toggle {
    width: 28px;
    height: 28px;
    background-size: 28px;
  }

  body header .language-switcher ul.links li {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  body header .language-switcher .block.block-language ul.links {
    height: 40px;
    width: 90px;
  }

  body header .language-switcher .expand-icon {
    height: 25px;
    width: 25px;
    background-size: 17px;
    top: 17px;
    left: -7px;
    position: relative;
  }

  body
    header
    .region-header-3
    .search
    .search-api-page-block-form.opened
    form
    input[type="text"] {
    left: -430px;
    height: 30px;
    top: -13px;
    line-height: 1.2rem;
    font-size: 1.5rem;
    width: 440px;
  }

  header .region-header-3 .search .search-toggle.opened {
    top: 4px;
    left: 13px;
    background-size: 16px;
    height: 16px;
  }

  header .language-switcher.expanded .block.block-language ul.links {
    height: 135px;
  }

  header .region-header-2 {
    height: 100%;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper,
  body.user-logged-in
    header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper,
  body.page-node-type-story-item
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu.expanded-menu-parent
    > li
    > .submenu-wrapper,
  body.page-node-type-landing-page
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu.expanded-menu-parent
    > li
    > .submenu-wrapper,
  body.page-node-type-core-content-item
    header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu.expanded-menu-parent
    > li
    > .submenu-wrapper {
    top: 189px;
  }

  header .secondary-menu .main-menu > .submenu-wrapper,
  header .secondary-menu ul.menu li,
  header .primary-menu ul.menu li,
  header .menu,
  header .menu .menu-wrapper,
  header .menu .menu-wrapper nav,
  header .secondary-menu .main-menu,
  header .primary-menu .main-menu {
    height: 100%;
  }

  header .secondary-menu ul.menu li > .top-link,
  header .secondary-menu ul.menu li:nth-child(1) > .top-link,
  body header .primary-menu ul.menu li > .top-link,
  header .primary-menu ul.menu li:nth-child(1) > .top-link {
    padding: 80px 0px 28px !important;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span
    a.secondary-title,
  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span {
    font-size: 2.5rem;
    line-height: 3.5rem;
    height: 52%;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    a.main-action {
    font-size: var(--font-body-small) !important;
    line-height: var(--font-body-small);
    font-family: var(--text-font) !important;
    padding: 24px 40px 27px 40px;
    text-transform: inherit;
  }

  header .menu-wrapper .main-menu > .submenu-wrapper .highlight.active {
    padding-top: 80px !important;
    padding-bottom: 100px !important;
  }

  #wrapper
    header.active
    .menu-wrapper
    .secondary-menu
    .submenu-wrapper
    ul
    li
    .submenu-wrapper
    ul
    > li
    > a,
  #wrapper
    header.active
    .menu-wrapper
    .primary-menu
    .submenu-wrapper
    ul
    li
    .submenu-wrapper
    ul
    > li
    > a {
    font-size: var(--font-body-medium);
    line-height: var(--line-height-medium);
  }

  #wrapper
    header.active
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu.thirdlevel
    li
    a {
    font-size: var(--font-body-small);
    line-height: var(--line-height-small);
  }

  body header .menu-wrapper .menu-close {
    top: 250px;
  }

  body header .menu-wrapper .menu-close > svg {
    width: 25px !important;
    height: 25px !important;
  }
}

@media all and (min-width: 1921px) {
  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span
    a.secondary-title,
  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    span {
    font-size: var(--font-body-large);
    line-height: var(--line-height-large);
  }

  #wrapper
    header.active
    .menu-wrapper
    .secondary-menu
    .submenu-wrapper
    ul
    li
    .submenu-wrapper
    ul
    > li
    > a,
  #wrapper
    header.active
    .menu-wrapper
    .primary-menu
    .submenu-wrapper
    ul
    li
    .submenu-wrapper
    ul
    > li
    > a {
    font-size: var(--font-body-medium);
    line-height: var(--line-height-medium);
  }

  header .primary-menu ul.menu li:nth-child(1) > .top-link,
  header .primary-menu .top-link {
    font-size: var(--font-body-medium);
    line-height: var(--line-height-medium);
  }

  #wrapper
    header.active
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    > li
    > .submenu-wrapper
    ul.expanded-menu.thirdlevel
    li
    a,
  header .secondary-menu ul.menu li:nth-child(1) > .top-link,
  header:hover .secondary-menu .top-link,
  .path-frontpage header:hover .secondary-menu .top-link,
  header .secondary-menu .top-link {
    font-size: var(--font-body-small) !important;
    line-height: var(--line-height-small);
  }

  header .language-switcher ul.links li {
    font-size: 14px;
    line-height: 12px;
  }

  header .language-switcher .block.block-language ul.links {
    height: 20px;
  }

  header .region-header-1 .site-name a {
    height: 2rem;
    width: 8rem;
  }

  header
    .menu-wrapper
    .main-menu
    > .submenu-wrapper
    > ul.menu
    li
    > .submenu-wrapper
    > .highlight
    a.main-action {
    font-size: var(--font-body-small) !important;
    line-height: var(--line-height-small);
  }
}

header .language-switcher .expand-icon {
  top: 3px;
  position: relative;
  right: 9px;
}

body header .region-header-1 .site-name a {
  mix-blend-mode: normal;
  transition: ease-in-out 0.5s all;
  background-image: url("../images/logo_givaudan.png");
}

body.page--contact header .region-header-1 .site-name a,
body.page-node-type-core-content-item
  header:hover
  .region-header-1
  .site-name
  a,
body.search-page header .region-header-1 .site-name a,
body.page-node-type-story-item header .region-header-1 .site-name a,
body.page-node-type-core-content-item .region-header-1 .site-name a,
body header.black .region-header-1 .site-name a,
body header:hover .region-header-1 .site-name a,
body.path-locations header .region-header-1 .site-name a,
body.path-locations header:hover .region-header-1 .site-name a {
  background-image: url("../images/logo_givaudan_black.png");
}

/* fix for japanese menu */
@media (min-width: 1120px) and (max-width: 1800px) {
  [lang="ja"] #header .region-header-1 {
    flex: 1;
  }

  [lang="ja"] header .primary-menu {
    flex: 5;
  }

  [lang="ja"] header .primary-menu .main-menu {
    margin-left: 2rem;
  }

  [lang="ja"] header .secondary-menu {
    flex: 4;
  }
}

@media (min-width: 1120px) and (max-width: 1280px) {
  header .primary-menu ul.menu li {
    padding-right: 1rem;
  }

  header .region-header-2 {
    -webkit-box-flex: 20;
    -ms-flex: 20;
    flex: 20;
  }

  header .region-header-2 .primary-menu {
    flex: 6;
  }
}

header .language-switcher .block.block-language ul.links {
  padding-left: 0.5rem;
}

header .language-switcher.expanded .block.block-language ul.links {
  height: auto;
  position: relative;
  top: 1.75rem;
}

header.black .language-switcher.expanded .block.block-language ul.links,
header.active .language-switcher.expanded .block.block-language ul.links,
header:hover .language-switcher.expanded .block.block-language ul.links {
  background-color: #fff;
}

.block.block-language ul.links .bold {
  font-weight: 700;
}

/** MENU COLORS **/

@media (min-width: 1120px) {

  .menu-close.active:hover #ico_close line {
    stroke: var(--menu-color, #000);
  }
  
  #header .top-link.expanded-menu-item {
    border-bottom: 6px solid var(--menu-color, #000);
  }

  #wrapper #header .submenu-wrapper a:not(.top-link):hover,
  #wrapper #header .submenu-wrapper a.active {
    color: var(--menu-color, #000) !important;
  }

  #wrapper #header .submenu-wrapper .highlight a:hover {
    color: #fff !important;
  }

}