.nav ul li a, .nav ul li a:after, .nav ul li a:before {
  transition: all .5s;
}

.nav ul li a:hover {
  color: #555;
}

/* stroke */

.nav.stroke ul li a, .nav.fill ul li a {
  position: relative;
}

.nav.stroke ul li a:after, .nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #ffffff;
  height: 1px;
}

.navbar-light .nav.stroke ul li a:after, .navbar-light .nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #000000;
  height: 1px;
}

.nav.stroke ul li a:hover:after {
  width: 100%;
}

.nav.fill ul li a {
  transition: all 2s;
}

.nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}

.nav.fill ul li a:hover {
  color: #fff;
  z-index: 1;
}

.nav.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: rgb(255 255 255);
}

/* toggler */

.toggle-active .bar {
  background-color: #fff;
}