.ct-nav-menu1 {
	@media #{$max-lg} {
		display: none;
	}
	&.style1 {
		.ct-main-menu > li {
			margin: 0 20px;
			> a {
				padding: 0;
				line-height: 84px;
				align-items: center;
				display: inline-flex;
				z-index: 1;
			}
		}
	}
	&.style2 {
		position: relative;
		z-index: 1;
		&:before {
			z-index: -1;
			position: absolute;
			top: 0;
			left: -30px;
			height: 100%;
			width: 500%;
			content: "";
			background-color: $primary_color;
			@include transform(skew(-35deg));
			bottom: 0;
		}
		.ct-main-menu > li {
			margin: 0 20px;
			> a {
				padding: 0;
				line-height: 84px;
				align-items: center;
				display: inline-flex;
				z-index: 1;
			}
		}
	}

	/* Level 1 Hover Active Style */
	&.hv-style2 {
		.ct-main-menu > li {
			> a:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				@include transform(translate(-50%, -50%) scaleX(0));
				width: 62px;
				height: 62px;
				@include border-radius(62px);
				z-index: -1;
				@include background-horizontal($gradient_color_to 15%, $gradient_color_from);
				opacity: 0;
				@include transition(.3s cubic-bezier(.24,.74,.58,1));
			}
			&:hover > a,
            &.current_page_item > a:not(.is-one-page),
            &.current-menu-item > a:not(.is-one-page),
            &.current_page_ancestor > a:not(.is-one-page),
            &.current-menu-ancestor > a:not(.is-one-page),
            a.is-one-page.ct-onepage-active {
            	&:before {
            		opacity: 1;
            		@include transform(translate(-50%, -50%) scaleX(1));
            	}
            }
		}
	}
	&.hv-style3 {
		.ct-main-menu > li {
			position: relative;
			z-index: 1;
			@media #{ $mm-xl } {
				margin-left: 9px;
				margin-right: 9px;
			}
            &.current_page_item, &.current-menu-item,
            &.current_page_ancestor, &.current-menu-ancestor,
			&.menu-item-has-children, &.page_item_has_children {
				&:before {
					content: '';
					position: absolute;
					top: -1px;
					left: 50%;
					@include transform(translateX(-50%) scaleX(0));
					width: 100%;
					height: 5px;
					z-index: -1;
					@include border-radius(0);
					background-color: #faa80a;
					opacity: 0;
					@include transition(.3s cubic-bezier(.24,.74,.58,1));				
				}
			}
			&:hover,
			&.current_page_item, &.current-menu-item,
			&.current_page_ancestor, &.current-menu-ancestor {
				&:before {
            		opacity: 1;
            		@include transform(translateX(-50%) scaleX(1));
				}
			}
		}
	}
	/* Sub Menu Hover Active Style */
	&.sub-hv-style2 {
		.sub-menu > li {
			> a {
				&:before {
					content: '';
					@include background-horizontal($gradient_color_to 15%, $gradient_color_from);
					width: 7px;
					height: 7px;
					@include border-radius(8px);
					left: -10px;
					opacity: 0;
					top: 50%;
					@include transform(translate(0, -50%));
					@include transition(.3s cubic-bezier(.24,.74,.58,1));
					position: absolute;
				}
 			}
 			&:hover > a,
            &.current_page_item > a:not(.is-one-page),
            &.current-menu-item > a:not(.is-one-page),
            &.current_page_ancestor > a:not(.is-one-page),
            &.current-menu-ancestor > a:not(.is-one-page) {
            	padding-left: 16px;
            	&:before {
            		left: 0;
            		opacity: 1;
            	}
            }
		}
	}
	&.sub-hv-style3 {
		.sub-menu > li {
			> a {
				&:before {
					content: '';
					background-color: $primary_color;
					width: 0px;
					height: 2px;
					@include border-radius(8px);
					left: 0px;
					opacity: 0;
					top: 50%;
					@include transform(translate(0, -50%));
					@include transition(.3s cubic-bezier(.24,.74,.58,1));
					position: absolute;
				}
 			}
 			&:hover > a,
            &.current_page_item > a:not(.is-one-page),
            &.current-menu-item > a:not(.is-one-page),
            &.current_page_ancestor > a:not(.is-one-page),
            &.current-menu-ancestor > a:not(.is-one-page) {
            	padding-left: 16px;
            	&:before {
            		width: 9px;
            		opacity: 1;
            	}
            }
		}
	}
 	.ct-main-menu li.megamenu .sub-menu {
		min-width: 1170px;
		@media #{ $min-xl } {
			max-width: 100%;
			width: 100%;
		}
	}
}
.ct-menu-item {
    li {
        list-style: none;
        span.ct-icon {
            margin-right: 5px;
            display: inline-block;
        }
        a {
            padding-left: 0!important;
            &:before {
                width: 10px;
                height: 2px;
                background-color: $primary_color;
                display: block;
                content: ""!important;
                position: absolute;
                top: 18px;
                left: -15px!important;
                opacity: 0;
                @include transition(all 300ms linear 0ms);
            }
            &:hover {
                padding-left: 25px!important;
                &:before {
                    opacity: 1;
                    left: 0!important;
                }
            }
        }
        + li {
            margin-top: 10px;
        }
    }
}