/* underline */
.nav-hover-style-3::before,
.nav-hover-style-4::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
.nav-hover-style-3:hover:before,
.nav-hover-style-4:hover:before {
    opacity: 1;
    pointer-events: all;
    height: 3px;
    bottom: 0;
}

/* underline (central expansion) & background only */
.nav-hover-style-8::after,
.nav-hover-style-9::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 3px;
    right: -50%;
    left: -50%;
    z-index: -1;
    margin: 0 auto;
    opacity: 0;
}
.nav-hover-style-7::before,
.nav-hover-style-8::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    bottom: 0;
    left: -50%;
    right: -50%;
    margin: 0 auto;
    opacity: 0;
    pointer-events: none;
}
.nav-hover-style-7:hover:before,
.nav-hover-style-8:hover:before,
.nav-hover-style-8:hover:after,
.nav-hover-style-9:hover:after {
    width: 100%;
    opacity: 1;
    pointer-events: all;
}

/* overline */
.nav-hover-style-11::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 3px;
    right: -50%;
    left: -50%;
    z-index: -1;
    margin: 0 auto;
    opacity: 0;
}

/* overline */
.nav-hover-style-10::before,
.nav-hover-style-11::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    top: 0;
    left: -50%;
    right: -50%;
    margin: 0 auto;
    opacity: 0;
    pointer-events: none;
}
.nav-hover-style-10:hover:before,
.nav-hover-style-11:hover:before,
.nav-hover-style-11:hover:after {
    width: 100%;
    opacity: 1;
    pointer-events: all;
}

.nav-hover-style-5::before, 
.nav-hover-style-6::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
.nav-hover-style-5:hover:before,
.nav-hover-style-6:hover:before {
    opacity: 1;
    pointer-events: all;
    height: 3px;
    bottom: 0;
}

/* left line */
.nav-hover-style-13::after,
.nav-hover-style-15::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 3px;
    left: 0;
    top: 0;
    z-index: -1;
    margin: 0 auto;
    opacity: 0;
}
.nav-hover-style-12::before,
.nav-hover-style-13::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 0;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}
.nav-hover-style-14::before,
.nav-hover-style-15::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}
.nav-hover-style-14:hover:before,
.nav-hover-style-15:hover:before {
    width: 3px;
    opacity: 1;
    visibility: visible;
}
.nav-hover-style-13:hover:after,
.nav-hover-style-15:hover:after {
    width: 100%;
    opacity: 1;
}
/* right line */
.nav-hover-style-16::before,
.nav-hover-style-17::before {
    content: "";
    position: absolute;
    height: 0;
    width: 3px;
    right: 0;
    top: 0;
    z-index: 1;
    margin: 0 auto;
    opacity: 0;
}
.nav-hover-style-18::before,
.nav-hover-style-19::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    opacity: 0;
    z-index: 1;
    visibility: hidden;
}
.nav-hover-style-17::after,
.nav-hover-style-19::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 3px;
    right: 0;
    top: 0;
    z-index: -1;
    margin: 0 auto;
    opacity: 0;
}
.nav-hover-style-18:hover:before,
.nav-hover-style-19:hover:before {
    width: 3px;
    opacity: 1;
    visibility: visible;
}
.nav-hover-style-12:hover:before,
.nav-hover-style-13:hover:before,
.nav-hover-style-16:hover:before,
.nav-hover-style-17:hover:before {
    height: 100%;
    opacity: 1;
    visibility: visible;
}
.nav-hover-style-17:hover:after,
.nav-hover-style-19:hover:after {
    width: 100%;
    opacity: 1;
}

/* SUB NAVIGATION OPTIONS */
.sub-nav-hover-style-0,
.sub-nav-hover-style-1,
.sub-nav-hover-style-3,
.sub-nav-hover-style-5,
.sub-nav-hover-style-7,
.sub-nav-hover-style-9,
.sub-nav-hover-style-11 {
    background-color: transparent !important;
}
/* line left */
.sub-nav-hover-style-1::before,
.sub-nav-hover-style-2::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}
/* line right */
.sub-nav-hover-style-3::before,
.sub-nav-hover-style-4::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
}
/* underline */
.sub-nav-hover-style-5::before,
.sub-nav-hover-style-6::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
/* underline center expansion */
.sub-nav-hover-style-7::before,
.sub-nav-hover-style-8::before {
    content: "";
    position: absolute;
    height: 3px;
    width: 3px;
    right: -50%;
    left: -50%;
    bottom: 0;
    z-index: 1;
    margin: 0 auto;
    opacity: 0;
}
/* overline */
.sub-nav-hover-style-9::before,
.sub-nav-hover-style-10::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
/* overline center expansion */
.sub-nav-hover-style-11::before,
.sub-nav-hover-style-12::before {
    content: "";
    position: absolute;
    height: 3px;
    width: 3px;
    right: -50%;
    left: -50%;
    top: 0;
    z-index: 1;
    margin: 0 auto;
    opacity: 0;
}
/* right or left line appear */
.sub-nav-hover-style-1:hover:before,
.sub-nav-hover-style-2:hover:before,
.sub-nav-hover-style-3:hover:before,
.sub-nav-hover-style-4:hover:before {
    opacity: 1;
    width: 3px;
    visibility: visible;
}
/* under or over line appear */
.sub-nav-hover-style-5:hover:before,
.sub-nav-hover-style-6:hover:before,
.sub-nav-hover-style-9:hover:before,
.sub-nav-hover-style-10:hover:before {
    opacity: 1;
    height: 3px;
    visibility: visible;
}
.sub-nav-hover-style-7:hover:before,
.sub-nav-hover-style-8:hover:before,
.sub-nav-hover-style-11:hover:before,
.sub-nav-hover-style-12:hover:before  {
    opacity: 1;
    width: 100%;
    visibility: visible;
}