.ul-styl{
    width: 48%;
}

.a-styl{
    position: relative;
    background-color: #707070;
    box-sizing: border-box;
    font-family: Helvetica;
    display: block;
    transform: skewX(-25deg);
    width: 100%;
    min-height: 3em;
    text-align: center;
}

.li-styl{
    display: inline-block;
    margin-right: -10px;
    width: 15%;
}

.span-styl{
    color: #fff;
    position: absolute;
    box-sizing: border-box;
    transform: translate(-50%, -50%) skewX(25deg);
    top: 50%;
    left: 50%;
    width: 80%;
}

.explore-btn-group {
  display: inline-block;
  margin: 0px 0 0px;
  width: 100%;
}

.active, a-styl:hover{
    background-color: #F0F0F0;
}

.active, span:hover {
  color: #ee1c25;
}

.ul-styl li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #F0F0F0;
  opacity: 0;
  z-index: -1;
}


.ul-styl li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}