/* NAVIGATION STYLE 1 */

.nav-style_1 > .level_1.mainnav__list > li > a {
  text-decoration: none!important;
  position: relative!important;
  overflow: hidden!important;
}

.nav-style_1 > .level_1.mainnav__list > li > a::before,
.nav-style_1 > .level_1.mainnav__list > li > a::after {
  content: ""!important;
  position: absolute!important;
  width: 0!important;
  height: 2px!important;
  background: var(--color-default)!important;
  transition: all 0.5s!important;
}

.nav-style_1 > .level_1.mainnav__list > li > a::before {
  top: 0!important;
  left: 0!important;
}

.nav-style_1 > .level_1.mainnav__list > li > a::after {
  bottom: 0!important;
  right: 0!important;
}

.nav-style_1 > .level_1.mainnav__list > li > a:hover {
  background-color: transparent!important;
}

.nav-style_1 > .level_1.mainnav__list > li > a:hover::before {
  width: 100%!important;
  transition: width 0.25s ease-in-out!important;
}

.nav-style_1 > .level_1.mainnav__list > li > a:hover::after {
  width: 100%!important;
  transition: width 0.25s ease-in-out 0.25s!important;
}

/* NAVIGATION STYLE 2 */

.nav-style_2 > .level_1.mainnav__list > li > a {
  text-decoration: none!important;
  position: relative!important;
  z-index: 1!important;
  transition: color 0.3s!important;
}

.nav-style_2 > .level_1.mainnav__list > li > a::after {
  content: ""!important;
  position: absolute!important;
  top: 50%!important;
  left: 50%!important;
  width: 0!important;
  height: 0!important;
  background-color: var(--color-default)!important;
  transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s!important;
  z-index: -1!important;
  margin-left: 0!important;
}

.nav-style_2 > .level_1.mainnav__list > li > a:hover {
  background-color: transparent!important;
  color:white!important;
}

.nav-style_2 > .level_1.mainnav__list > li > a:hover::after {
  width: 100%!important;
  height: 100%!important;
  left: 0!important;
  top: 0!important;
}

/* NAVIGATION STYLE 3 */

.nav-style_3 > .level_1.mainnav__list > li > a:hover {
  background-color: transparent!important;
}

.nav-style_3 > .level_1.mainnav__list > li > a {
  text-decoration: none!important;
  position: relative!important;
}

.nav-style_3 > .level_1.mainnav__list > li > a::before,
.nav-style_3 > .level_1.mainnav__list > li > a::after {
  content: ""!important;
  position: absolute!important;
  display: block!important;
  border: 0 solid transparent!important;
  width: 0%!important;
  height: 0%!important;
  transition: all 0.3s ease!important;
}

.nav-style_3 > .level_1.mainnav__list > li > a::after {
  top: 0!important;
  right: 0!important;
  border-top: 2px solid transparent!important;
  border-right: 2px solid transparent!important;
}

.nav-style_3 > .level_1.mainnav__list > li > a::before {
  left: 0!important;
  bottom: 0!important;
  border-bottom: 2px solid transparent!important;
  border-left: 2px solid transparent!important;
}

.nav-style_3 > .level_1.mainnav__list > li > a:hover::before,
.nav-style_3 > .level_1.mainnav__list > li > a:hover::after {
  width: 10px!important;
  height: 10px!important;
  border-color: var(--color-default)!important;
}

/* NAVIGATION STYLE 4 */

.nav-style_4 > .level_1.mainnav__list > li > a {
  text-decoration: none!important;
  position: relative!important;
  transition: 0.4s!important;
  font-size: 1.5rem!important;
  color: #ffffff!important;
}

.nav-style_4 > .level_1.mainnav__list > li > a:hover,
.nav-style_4 > .level_1.mainnav__list > li > a.active {
  background-color: transparent!important;
  color: var(--color-default)!important;
}

.nav-style_4 > .level_1.mainnav__list > li > a::before {
  content: ""!important;
  position: absolute!important;
  width: 0!important;
  height: 4px!important;
  bottom: 0!important;
  left: 50%!important;
  background-color: var(--color-default2)!important;
  transition: all 0.4s!important;
}

.nav-style_4 > .level_1.mainnav__list > li > a:hover::before,
.nav-style_4 > .level_1.mainnav__list > li > a.active::before {
  width: 100%!important;
  left: 0!important;
}

/* NAVIGATION STYLE 5 */

.nav-style_5 > .level_1.mainnav__list > li > a {
  text-decoration: none!important;
  transition: all 0.4s!important;
  position: relative!important;
  border: 2px solid transparent!important;
}

.nav-style_5 > .level_1.mainnav__list > li > a:hover {
  border: 2px solid var(--color-default)!important;
  background-color: transparent!important;
}