/* -- */


:root
{
  --menu-height: 62px;
  --menu-border-color: var(--accent-color);

  --menu-active-filter: var(--accent-color-filter);
  --menu-inactive-filter: invert(81%) sepia(0%) saturate(14%) hue-rotate(156deg) brightness(82%) contrast(88%);
  --menu-filter: var(--menu-active-filter);
}


/* -- */


.menu
{
  position: fixed;
  z-index: 3;

  width: var(--window-width);
  height: var(--menu-height);

  box-sizing: border-box;
  padding: 0 var(--page-horizontal-padding);

  border-bottom: 1px solid var(--menu-border-color);

  background-color: var(--white-color);
  color: #000000;

  transition: border-bottom-color 2s ease;
}


/* -- */


.menu_logo
{
  position: relative;
  float: left;

  width: 180px;
  height: var(--menu-height);

  background-image: none;
  background-position: left calc(50% - 1px);
  background-size: 180px auto;
  background-repeat: no-repeat;

  cursor: pointer;
}

.menu_logo img
{
  position: absolute;
  width: auto;
  height: 24px;
  left: 50%;
  top: calc(50% - 1px);
  transform: translateX(-50%) translateY(-50%);
}


/* -- */


.menu_items
{
  float: right;

  width: auto;
  height: var(--menu-height);
  line-height: calc(var(--menu-height) - 1px);

  font-family: "Open Sans";
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* -- */


.menu_item
{
  position: relative;
  float: left;

  width: auto;
  height: auto;

  margin-right: 28px;

  filter: var(--menu-filter);
  transition: filter 2s ease;
  cursor: pointer;
}

.menu_item:last-child { margin-right: 0; }

.menu_item:hover { filter: var(--menu-active-filter); }

.menu_item a
{
  color: inherit;
  font-weight: inherit;
  transition: none;
  text-decoration: none;
}



/* -- */


.menu_item_underline
{
  position: absolute;
  content: '';

  bottom: 20px;
  left: auto;
  right: 0;

  width: 0%;
  height: 1px;

  background-color: black;
  transition: width 0.5s ease-in-out;
}

.menu_item:hover .menu_item_underline
{
  width: 100%;
  right: auto;
}


/* -- */