.main__navigation .level_1 li strong {
  color: white;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

.main__navigation .level_1 li.active strong {
    opacity: 1;
}
.main__navigation li.active.home:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f015";
    color: rgba(242, 242, 242, 1);
    font-size: 3rem;
}
.main__navigation li.active.faq:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f059";
    color: rgba(242, 242, 242, 1);
    font-size: 3rem;
}
.main__navigation li.active.itsolutions:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f2c1";
    color: rgba(242, 242, 242, 1);
    font-size: 3rem;
}

.main__navigation li.active.signage:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f26c";
    color: rgba(242, 242, 242, 1);
    font-size: 3rem;
}
.main__navigation li.active.web:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f121";
    color: rgba(242, 242, 242, 1);
    font-size: 3rem;
}
.main__navigation li.active.company:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f0c0";
    color: rgba(242, 242, 242, 1);
    font-size: 3rem;
}
.main__navigation li.active.contact:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f590";
    color: rgba(242, 242, 242, 1);
    font-size: 3rem;
}

.main__navigation .level_1 li strong {
    opacity: 0
}

.main__navigation .level_1 li strong:after { font-size: 3rem }

.main__navigation .level_1 li a {
  width: 100%;
  display: flex;
  justify-content: center;
}

.main__navigation .level_1 li a span {
    position: absolute;
    bottom: -2rem;
    opacity: 0;
    font-size: 1.4rem;
    color: white;
    text-align: center;
}

.main__navigation .level_1 li { 
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.main__navigation .level_1 li a:after { font-size: 3rem }

.main__navigation li a.home:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f015";
}
.main__navigation li a.itsolutions:after {
        font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f2c1";
}
.main__navigation li a.signage:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f26c";
}
.main__navigation li a.web:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f121";
}
.main__navigation li a.company:after {
  font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f0c0";
}
.main__navigation li a.contact:after {
  font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f590";
}
.main__navigation li a.faq:after {
    font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f059";
  }


.main__navigation .level_1 * {
  transition: all 300ms;
}

.main__navigation .level_1 li:hover a span { opacity: 1; }

.main__navigation {
  grid-column: 1;
  grid-row: 1;
  display: flex;
}

.main__navigation > ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main__navigation > ul > li {
  color: var(--font-color);
}

.main__navigation > ul > li:hover a:after{
  transform: scale(1.1) translateZ(0);
}