@charset "UTF-8";

:root
{
  --navigation-border-color: #e9f1d4;
  --navigation-link-color: #131313;
  --navigation-link-bg-hover-color: #98c411;
  --navigation-link-hover-color: #fff;
  --navigation-arrow-color: #3d4d16;
  --navigation-submenu-bg-color: #f8fbef;
  --navigation-submenu-border-color: #e2eec5;
  --navigation-submenu-link-color: #131313;
  --navigation-submenu-link-bg-hover-color: #3d4d16;
  --navigation-submenu-link-hover-color: #fff;
}

.navigation,
.navigation > li > ul
{
  margin: 0;
  padding: 0;
}

.navigation > li > ul
{
  display: none;
}

.navigation > li,
.navigation > li > ul > li
{
  list-style: none;
  position: relative;
}

.navigation > li > a
{
  font-size: 13px;
  font-weight: 500;
  color: var(--navigation-link-color);
  display: block;
  border-bottom: 1px solid var(--navigation-border-color);
  padding: 13px 29px;
  transition: .4s;
}

.navigation > li > a:hover,
.navigation > li.active > a
{
  background: var(--navigation-link-bg-hover-color);
  color: var(--navigation-link-hover-color);
}

.navigation > li > i
{
  position: absolute;
  right: 22px;
  top: 13px;
  color: var(--navigation-arrow-color);
}

.navigation > li > ul,
.navigation > li.active > ul,
.navigation > li:hover > ul
{
  padding: 13px 17px;
  background: var(--navigation-submenu-bg-color);
}

.navigation > li > ul > li > a
{
  font-size: 13px;
  font-weight: 400;
  color: var(--navigation-submenu-link-color);
  padding: 7px 29px;
  border-bottom: 1px solid var(--navigation-submenu-border-color);
  display: block;
  transition: .4s;
}

.navigation > li > ul > li:last-child > a
{
  border-bottom: 0;
}

.navigation > li > ul > li > a:hover,
.navigation > li > ul > li.active > a
{
  background: var(--navigation-submenu-link-bg-hover-color);
  color: var(--navigation-submenu-link-hover-color);
}