.main-nav .children,
.nav-item-children {
  min-width: 232px;
  padding: 1.0625em 0;
  border-radius: 5px;
	position: absolute;
	top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 16px 50px rgba(#000, 0.07);
  visibility: hidden;
  font-size: 16px;
  line-height: 1.5em;
  list-style: none;
  text-align: left;

  > li {
    position: relative;
    font-size: 1em;
    line-height: normal;
    
    > a {
      display: block;
      padding: 0.7em 2.5em;
      width: 100%;
      color: #797b86;
    }
    &:hover > a {
      background-color: #e7eaee;
    }
    &.active > a,
    &.current-menu-item > a,
    &:hover > a {
      color: #181b31;
    }
  }
  
  .children,
  .nav-item-children {
    bottom: auto;
    top: 0;
    left: 100%;
    // z-index: -1; // issues in side layouts
    
    &.to-left {
      right: 100%;
    }
  }
  
  &.to-left {
    left: auto;
    right: 0;

    .children,
    .nav-item-children {
      left: auto;
      right: 100%;
    }
  }

}
.main-nav .position-applied > .children,
.position-applied > .nav-item-children {
  display: none;
  visibility: visible;
}