.navigation{
  margin: 0 auto;
  text-align: center;
  background: #fff;
  width:100%;
  position: relative;
}

.navigation .menu .active{
  background-color: var(--gray-color-menu);
}
.navigation .menu a:hover,
.navigation .menu .current.active a {
  background-color: var(--gray-color);
}

.navigation .menu .active a{
  color:var(--white-color);
}


.navigation .menu {
  width: 100%;
  display: table;
  vertical-align: top;
  background:#E6E6E6;
  /*table-layout: fixed;*/
}

.navigation .menu .menu__item,  .navigation .menu li{
  display: table-cell;
  border: 4px solid #fff;
  border-left: 0;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.navigation .menu#header li:last-of-type {
  border-right: 0;
}
.navigation .menu .menu__item .menu__link,  .navigation .menu li a {
  font-family: 'DIN2014', sans-serif;
  font-weight: 700;
  display: block;
  font-size: 28px;
  padding: 15px 7px;
  color: var(--dark-color);
}

/* FULL-HEIGHT NAV MENU
 * Define 100% height on main menu links and appropriate parent elements,
 * so that single-line-text links will still take up full height (important for
 * mouseover background-color) when other menu items have multiline text
 * (which, BTW, only happens at certain screen widths).
 */
nav.navigation div.navigation-block ul.menu,
nav.navigation div.navigation-block ul.menu li a {
  height: 100%;
}
/* The style for "FULL-HEIGHT NAV MENU" above causes the members and BoD menus
 * to mis-align. Remove relevant stylings for those menus.
 */
nav.navigation div.navigation-block .menu-optional ul.menu {
  height: auto;
}

.navigation .menu .menu__item:last-child{
  border-right: none;
}

.navigation .menu .menu__link:hover{
  color: #fff;
}

.open .dropdown-menu {
  display: block;
}

.menu .header-menu {
  display: flex;
  width: 100%;
  align-items: flex-end;
}

.navigation .menu .menu__item__active .menu__link{
  color: var(--white-color);
}

.menu__item--news.menu__item__active{
  background-color: var(--gray-color-menu);
}

.menu__item.menu__item--about.menu__item__active{
  background-color: var(--gray-color-menu);
}

.menu__item--professional.menu__item__active{
  background-color: var(--orange-color);
}

.menu__item--foundation.menu__item__active {
  background-color: var(--yellow-color);
}

.menu__item--education.menu__item__active {
  background-color: var(--blue-color);
}

.menu__item--membership.menu__item__active {
  background-color: var(--gray-color-menu);
}

.menu .menu__item--advocacy.menu__item__active{
  background-color: var(--green-color);
}

.menu__link--foundation:hover{
  background-color: var(--yellow-color);
}

.menu__item--membership:hover{
  background-color: var(--gray-color-menu);
}

.menu__item--advocacy:hover{
  background-color: var(--green-color);
}

.menu__item--education:hover{
  background-color: var(--blue-color);
}

.menu__item--foundation:hover{
  background-color: var(--yellow-color);
}

.menu__item--professional:hover{
  background-color: var(--orange-color);
}



.menu__item--news:hover{
  background-color: var(--gray-color-menu);
}

.menu__item--about:hover{
  background-color: var(--gray-color-menu);
}

.menu-optional{
  display: inline-flex;
  justify-content: flex-end;
  position: relative;
  right: 0;
  top: 100%;
  z-index: 2;
  min-height: 110px;
}
.menu-optional-wrapper {
  background: #333;
  text-align: right;
}

.menu-optional__block{
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 15px 30px 15px 45px;
  min-width: 450px;
}

.menu-optional__block div{
  display: flex;
  flex-direction: column;
  text-align: left;
}

.menu-optional__title{
  font-weight: 700;
  color: var(--white-color);
  font-size: 31px;
  max-width: 125px;
}

.menu-optional__block-last{
  margin-left: 7px;
}

.menu-optional__block a{
  font-size: 16px;
  color: #fff;
}

.burger.active div{
  transform: rotate(45deg);
}

.burger.active div:before{
  transform: rotate(90deg);
  top: 8px;
}

.burger.active div:after{
  display: none;
}

.burger.active {
  z-index: 9999;
  position: fixed;
  top: 25px;
}

body.active{
  overflow: hidden;
}

.current.active .professional,
a.professional:hover {
  background-color: var(--orange-color) !important;
}

.itemid-870 .current.active{
  background-color: var(--orange-color);
}

.current.active .advocacy,
a.advocacy:hover {
  background-color: var(--green-color) !important;
}

.itemid-871 .current.advocacy{
  background-color: var(--green-color);
}

.current.active .education,
a.education:hover {
  background-color: var(--blue-color) !important;
}

.itemid-872 .current.education{
  background-color: var(--blue-color);
}

.current.active .foundation,
a.foundation:hover {
  background-color: var(--yellow-color) !important;
}

.itemid-873 .current.active{
  background-color: var(--yellow-color);
}

/* Can't find any usage of class '_menu', so commenting this out.
.navigation-block ._menu{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0,0,0,0.8);
  flex-grow: 1;
  padding: 15px 30px 15px 45px;
  min-width: 450px;
}*/

.menu-optional__block .page-header{
  font-weight: 700;
  color: var(--white-color);
  font-size: 31px;
  max-width: 125px;
  text-align: right;
}

.navigation .menu-optional__block .menu{
  width: unset;
  display: flex;
  flex-direction: column;
  vertical-align: unset;
  background: transparent;
  margin-left: 30px;
}

.navigation .menu-optional__block .menu li{
  display: block;
  border: none;
}

.navigation .menu-optional__block .menu li a{
  font-size: 16px;
  color: #fff;
  padding: 0;
  font-weight: 400;
  text-align: left;
}