.top-nav li.active-item a{
    background: none repeat scroll 0 0 #d00c27 !important;
}
.top-nav li a:hover, .top-nav li.active-item a
{
    background: none repeat scroll 0 0 #d00c27 !important;
}
.top-nav li.active-item a
{
    background: none repeat scroll 0 0 #d00c27 !important;
}
.top-nav li:hover > ul
{
    width: 10.9%;
}
.top-nav li ul li a
{
    color: #fff !important;
}

.popup {
    position: fixed;
    width: 200px; /* Using fixed width but can be anything! */
    height: 100px;
    top: calc(50% - 50px); /* Using calc for proper centering, 50 = height / 2 */
    left: calc(50% - 100px);
    z-index:1000; /* Should be greater than the topmost element to ensure front position */
    padding: 10px;
    color: white;
    visibility: visible; /* Not visible first */
    opacity: 0;         /* We can't animate visiblity so we set opacity to 0 */
    transition: all 0.6s;
}
/* When we want to show the overlay we add the visible class */
.visible {
  visibility: visible;
  opacity: 1;
}
/* Using a pseudo-selector to create an overlay */
.popup:before {
  content: '';
	position: fixed;
	/* width: 100vw;
	height: 100vh; */
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.85);
  z-index: -2; /* Needs to be less than :after */
}
.popup:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: green;
    top: 0; 
    left: 0;
    position: absolute;
    border: 1px solid lightgreen;
    border-radius: 10px;
    z-index: -1;  /* to be below the parent element but in front of before */
}

.close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  cursor:pointer;
  z-index:500;
  border: 1px solid lightgreen;
  border-radius: 5px;
}
.close::after, .close::before {
  content: '';
	position: absolute;
	width: 3px;
	height: 15px;
	top: 50%;
	left: 50%;
	background: lightgreen;
}
.close:hover, close:active {
  background-color: #cfc;
}
.close::after {
  transform: translate(-50%,-50%) rotate(45deg);
}
.close:before {
  transform: translate(-50%,-50%) rotate(-45deg);
}