nav.main ul {
  display: flex;
  flex-wrap: wrap;
}

nav.main ul li {
  width: 50%;
}

@media screen and (min-width: 500px) {
  nav.main ul {
    flex-direction: column;
  }
  nav.main ul li {
    width: 100%;
  }
}

nav.main a {
  display: block;
  padding: 1em .5em;
  color: white;
  text-decoration: none;
  background-image: linear-gradient(to bottom right, rgba(68, 98, 134, 0.2), rgba(68, 98, 134, 0.9));
  background-size: 100% 200%;
  transition: all 300ms ease-out;
}

nav.main a:hover {
  background-position: 0 100%;
}

nav.main li {
  background-size: cover;
}

/*nav.main .li-about {
  background-image: url(./images/ecm.png);
}

nav.main .li-training {
  background-image: url(./images/computers.png);
}

nav.main .li-cfi {
  background-image: url(./images/hat.jpg);
}

nav.main .li-certificate {
  background-image: url(./images/exam.png);
}

nav.main .li-ist {
  background-image: url(./images/technology.png);
}

nav.main .li-management {
  background-image: url(./images/iso.png);
}

nav.main .li-sme {
  background-image: url(./images/ecm.png);
}*/