* {
	margin: 0;
	padding: 0;
	list-style-type: none;
    font-weight: 400;
}

/* listas (MENÚ) */
ul{
	display: flex;
	width: 100%;
	margin: auto;
	text-align: left;
}
li {
	font-size: 17px;
	line-height: 15px;
  	text-transform: uppercase;
  	cursor: pointer;
  	color: #fff;
	min-width: 55px;
	border-left:1px solid #fff;
	padding-top: 2.2em;
	padding-left: 0.2em;
	padding-bottom: 0.2em;
    opacity:0.3;
}

li:hover {
  background-size: 100% 100%;
  color: #fff;
  animation: spring 300ms ease-out;
    opacity:1;
}
li:active {
  transform: translateY(1.5px);
        opacity:1;
}
li a {
    text-decoration:none;
    color: #fff;
}

.on {
        opacity:1 !important;
}

@keyframes spring {
  15% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.2, 1.1);
  }
  40% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(0.95, 0.95);
  }
  75% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.05, 1);
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1, 1);
  }
}