#g-navigation {
    background: $navigation-background;
    color: $navigation-text-color;  
    border-top: 5px solid $accent-color-1;
    position: relative;
    z-index: 10011;     

    // Off Canvas Toggle
    .g-offcanvas-toggle {
    	display: block;
    	position: relative;
    	top: 0;
    	left: 0;
    	padding: 0.25rem 0;
    	color: $accent-color-1;
		@include breakpoint(mobile-only) {
			display: none;
		}    	
		&:hover {
			color: $accent-color-1;
		}
    }   
}

// Main Navigation

%link-parent-indicator {
	border: 1px solid lighten($navigation-background, 6%);
	background: darken($navigation-background, 4%);
	&:hover {
		background: darken($navigation-background, 8%);
	}
}

#g-navigation {

	// g-container
	> .g-container {
		position: relative;
		margin: 2rem auto;
	}

	// g-content
	.g-content {
		padding: 0;
	}

    // Logo
	.g-logo {
	    display: block;
	    margin: -5px 0;		
		@include breakpoint(mobile-only) {
			display: block;
			width: 100%;
			text-align: center;
		}		
	}

	// Social Icons
	.g-social {
		text-align: right;
		@include breakpoint(mobile-only) {
			text-align: center;
		}		
		a {
			color: $header-text-color;
			&:hover {
				color: $accent-color-1;
			}
		}
	}

	// Menu Styling
	.g-main-nav {
		margin: 0;

		.g-toplevel {

			> li {
				margin: 0 0.5rem;
				> .g-menu-item-container {
					color: $navigation-text-color;
					padding: $content-padding/4 0;
					.g-menu-item-title {
						padding-bottom: 5px;
						border-bottom: 1px solid lighten($navigation-text-color, 15%);
						padding-right: 2.5rem;
						.dir-rtl & {
							padding-right: 0;
							padding-left: 2.5rem;
						}
						@include breakpoint(desktop-range) {
							padding-right: 1.75rem;
						}						
						@include breakpoint(tablet-range) {
							font-size: 0.75rem;
							padding-right: 1rem;
						}						
					}
					.g-menu-parent-indicator {
						position: relative;
						right: 15px;
						margin-right: -15px;
						.dir-rtl & {
							right: inherit;
							margin-right: 0;
							left: 15px;
							margin-left: -15px;
						}						
						&:after {
							content: "\f13a";
							opacity: 0.75;
						}
					}
				}
				&:hover {
					> .g-menu-item-container {
						color: $accent-color-1;
						.g-menu-item-title {
							border-bottom: 1px solid;
						}						
						> .g-selected {
							color: $accent-color-1;
						}
					}
				}
				&.active {
					> .g-menu-item-container {
						color: $accent-color-1;		
						.g-menu-item-title {
							border-bottom: 1px solid;
						}					
						> .g-selected {
							color: $accent-color-1;

							&:after {
							    background: $accent-color-1;
							    bottom: -10px;
							    content: '';
							    height: 2px;
							    position: absolute;
							    width: 38px;			
							    left: 50%;
							    margin-left: -19px;
							}							
						}
					}
				}
				&.active.g-parent {
					> .g-menu-item-container {
						&:after {
						    margin-left: -29px;
						}	
					}					
				}	
				&.g-parent .g-menu-parent-indicator {
					vertical-align: top;
					margin-top: 3px;
				}
			}
		}

		.g-dropdown {
			background: $accent-color-1;
			border: 1px solid darken($accent-color-1, 15%);
			border-radius: 0;
			> .g-dropdown-column {
				border: 1px solid transparent;
			}
			a {
				color: $white;
				&:hover {
					color: darken($accent-color-1, 25%);
				}
			}
		}

		.g-sublevel {
			> li {
				> .g-menu-item-container {
					color: $white;
					font-weight: bold;
					border: 1px solid transparent;
					> .g-selected {
						color: $white;
						font-weight: bold;
						border: 1px solid transparent;						
					}					
				}

				&:hover, &.active {
					> .g-menu-item-container {
						background: darken($accent-color-1, 10%);
						color: $white;
						border: 1px solid darken($accent-color-1, 12%);
						border-radius: 2px;
						> .g-selected {
							background: darken($accent-color-1, 10%);
							color: $white;
							border: 1px solid darken($accent-color-1, 12%);
							border-radius: 2px;
						}
					}
				}
				&.g-menu-item-type-particle {
					&:hover, &.active {
						> .g-menu-item-container {		
							border: 1px solid transparent;	
						}
					}				
				}

				&:last-child {
					border-bottom: none;					
				}

				&.g-menu-item-type-particle {
					&:hover {
						> .g-menu-item-container {
							background: inherit;
						}	
					}
				}
			}
		}
	}	
	.g-menu-block {
		@include breakpoint(mobile-only) {
			display: none;
		}		
	}	
	.g-menu-item-subtitle {
		text-transform: lowercase;
		font-size: 0.85rem;
		font-weight: bold;
		opacity: 0.8;
		padding-top: 15px;
	}
}

.g-menu-hastouch {
	.g-standard, .g-fullwidth {
		.g-toplevel {
			> li {
				&.g-menu-item-link-parent {
					> .g-menu-item-container {
						> .g-menu-parent-indicator {
							@extend %link-parent-indicator;
						}
					}
				}
			}
		}		
		.g-sublevel {
			> li {
				&.g-menu-item-link-parent {
					> .g-menu-item-container {
						> .g-menu-parent-indicator {
							@extend %link-parent-indicator;
						}
					}
				}
			}
		}
	}	
}

.menu-item-particle {
	a {
		color: $accent-color-1;
		&:hover {
			color: $navigation-text-color;
		}
	}
}

@media print {
	#g-navigation {
		background: #fff !important;
		color: #000 !important;
	}
}