body{
  background-color:#ffffff !important;
}
.wrapper {
  max-width: 320px;
  margin: 2em auto;
  justify-content: center;
  align-items: center;
}
.nav--icons {
  align-items: center;
  justify-content: center;
  position: relative;
  left: 1em;
  right: 1em;
}
.nav--icons ul {
  list-style-type: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
.nav--icons ul li a {
  height: 40px;
  font-family: sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #6B4FA1;
  line-height: 1;
  vertical-align: middle;
  display: flex;
  align-items: center;
  border-radius: 3em;
  padding: 0.75em 1.25em;
  transition: 0.6s ease-in-out;
}
.nav--icons ul li a span {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  padding-left: 0.5em;
  transform: translate3d(-0.5em, 0, 0);
  transition: opacity 0.6s, max-width 1s, transform 0.6s;
  transition-timing-function: ease-in-out;
}
.nav--icons ul li a:hover, .nav--icons ul li a.is-active {
  color: #ffffff;
  background-color: #6B4FA1;
}
.nav--icons ul li a:hover span, .nav--icons ul li a.is-active span {
  opacity: 1;
  max-width: fit-content;
  transform: translate3d(0, 0, 0);
}