.navbar-nav {
			
			margin-bottom: 0;
			.active {
				.a {
					// color: $primary;
					span {

						// background: $primary;
						color: $primary;
						border-radius: 30px;
						display: inline-block;
						padding: 5px 20px;
					}
				}
			}
			a {
				text-decoration: none!important;
				display: inline-block;
			}
			.li {
				display: inline-block;
				.a {
					padding: 10px 0px;
					color: $white;
					text-decoration: none!important;
					.span {
						padding: 5px 20px;
						display: inline-block;
						transition: .3s all ease;
						border-radius: 30px;
					}
					&:hover {
						.span {
							// background: $primary;
							color: $white;
							border-radius: 30px;
							display: inline-block;
						}
					}
				}
			}
			.has-children {
				position: relative;
				.a {
					span {
						position: relative;
						padding-right: 30px;						
						&:before {
							position: absolute;
							content: "\e313";
							font-size: 16px;
							top: 50%;
							right: 10px;
							transform: translateY(-50%);
							font-family: 'icomoon';
						}
					}
				}
				.dropdown {
					visibility: hidden;
					opacity: 0;
					top: 100%;
					position: absolute;
					text-align: left;
					border-top: 2px solid $primary;
					box-shadow: 0 2px 10px -2px rgba(0,0,0,.1);
					border-left: 1px solid $gray-4;
					border-right: 1px solid $gray-4;
					border-bottom: 1px solid $gray-4;
					padding: 0px 0;
					margin-top: 20px;
					margin-left: 0px;
					background: $white;
					transition: 0.2s 0s;
				
					&.arrow-top {
						position: absolute;
						&:before {
							bottom: 100%;
							left: 20%;
							border: solid transparent;
							content: " ";
							height: 0;
							width: 0;
							position: absolute;
							pointer-events: none;
						}
						&:before {
							border-color: rgba(136, 183, 213, 0);
							border-bottom-color: $white;
							border-width: 10px;
							margin-left: -10px;
						}	
					}
					

					a {
						// font-size: 16px;
						text-transform: none;
						letter-spacing: normal;
						transition: 0s all;
						color: $gray-800;
					}
					.active {
						.a {
							color: $primary!important;
						}
					}
					.li {
						list-style: none;
						padding: 0;
						margin: 0;
						min-width: 200px;
						.a {
							padding: 9px 20px;
							display: block;
							&:hover {
								background: lighten($gray-4, 2%);
								color: $gray-1;
							}
						}

						&.has-children {
							.a {
								position: relative;
								&:after {
									position: absolute;
									right: 0;
									content: "\e315";
									right: 20px;
									font-family: 'icomoon';
								}
							}
							..dropdown, .ul {
								left: 100%;
								top: 0;
							}
							&:hover, &:active, &:focus {
								.a {
									background: lighten($gray-4, 2%);
									color: $gray-1;
								}
							}
						}
					}
				}
				
				&:hover, &:focus, &:active {
					.a {
						color: $primary;
						span {
							// background: $primary;
							color: $primary;
						}
					}
				}
				&:hover, &:focus, &:active {
					cursor: pointer;
					..dropdown {
						transition-delay: 0s;
						margin-top: 0px;
						visibility: visible;
						opacity: 1;
				
					}
				}
			}
		}