/* Header Nav Main */
@media (min-width: 992px) {
	#header {

		// Header Nav Main
		.header-nav-main {
			float: $right;
			margin: 12px 0 0;
			min-height: 45px;
			nav {
				> ul {
					> li {
						> a {
							border-radius: 4px;
							font-size: 12px;
							font-style: normal;
							font-weight: 700;
							line-height: 20px;
							padding: 10px 13px;
							text-transform: uppercase;
							&:focus, &:hover {
								background: transparent;
							}
							&.dropdown-toggle {
								padding-#{$right}: 23px;
								.fa-caret-down {
									display: none;
								}
								&:after {
								    border-color: #CCC transparent transparent transparent;
								    border-style: solid;
								    border-width: 4px;
								    content: " ";
								    display: block;
								    float: $right;
								    height: 0;
								    margin-right: -10px;
								    margin-top: 5px;
								    position: absolute;
								    #{$right}: 20px;
								    top: 12px;
								    width: 0;
								}
							}
						}
						&.open, &:hover {
							> a {
								background: #CCC;
								color: #FFF;
							}
						}
						&.dropdown {
							.dropdown-menu {
								top: -10000px;
								display: block;
								opacity: 0;
								left: auto;
								border-radius: corner-values(0 4px 4px);
								border: 0;
								border-top: 5px solid #CCC;
								box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
								margin: -3px 0 0 0;
								min-width: 200px;
								padding: 5px;
								text-align: $left;
								li {
									a {
										border-bottom: 1px solid #f4f4f4;
										color: #777;
										font-size: 0.9em;
										font-weight: 400;
										padding: side-values(8px 20px 8px 8px);
										position: relative;
										text-transform: none;
									}
									&.dropdown-submenu {
										position: relative;
										> a {
											.fa-caret-down {
												display: none;
											}
											&:after {
												border-color: transparent transparent transparent #CCC;
												border-style: solid;
												border-width: side-values(4px 0 4px 4px);
												content: " ";
												display: block;
												float: $right;
												height: 0;
												margin-#{$right}: -10px;
												margin-top: 5px;
												position: absolute;
												right: 15px;
												top: 8px;
												width: 0;
											}
										}
										> .dropdown-menu {
											display: block;
											#{$left}: 100%;
											margin-top: -10px;
											margin-#{$left}: -1px;
											border-radius: 4px;
											opacity: 0;
										}
										&:hover {
											> .dropdown-menu {
												top: 0;
												opacity: 1;
											}
										}
									}
									&:last-child {
										a {
											border-bottom: 0;
										}
									}
								}
							}
							&.open, &:hover {
								> a {
									padding-bottom: 15px;
								}
								> .dropdown-menu {
									top: auto;
									display: block;
									opacity: 1;
								}
							}
						}

						// Reverse
						&.dropdown-reverse {
							.dropdown-menu {
								li {
									a {
										padding-right: 8px;
										padding-left: 20px;
									}
									&.dropdown-submenu > a {
										&:after {
											left: 8px;
											border-width: 5px 5px 5px 0;
										}
									}									
								}
							}
						}

						// Mega Menu
						&.dropdown-mega {
							position: static;
							> .dropdown-menu {
								border-radius: 4px;
								left: 15px;
								right: 15px;
								width: auto;
							}
							.dropdown-mega-content {
								padding: 20px 30px;
							}
							.dropdown-mega-sub-title {
								color: #333333;
								display: block;
								font-size: 1em;
								font-weight: 600;
								margin-top: 20px;
								padding-bottom: 5px;
								text-transform: uppercase;
								&:first-child {
									margin-top: 0;
								}
							}
							.dropdown-mega-sub-nav {
								list-style: none;
								padding: 0;
								margin: 0;
								> li {
									> a {
										border: 0 none;
										border-radius: 4px;
										color: #777;
										display: block;
										font-size: 0.9em;
										font-weight: normal;
										margin: side-values(0 0 0 -8px);
										padding: 3px 8px;
										text-shadow: none;
										text-transform: none;
										text-decoration: none;
									}
									&:hover {
										> a {
											background: #f4f4f4;
										}
									}
								}
							}
						}
					}
				}
			}

			// Header Nav Main Square
			&.header-nav-main-square {
				margin-bottom: -9px;
				nav {
					> ul {
						> li {
							> a {
								border-radius: 0;
							}
							&.dropdown {
								.dropdown-menu {
									margin-top: 0;
									border-radius: 0;
									li {
										&.dropdown-submenu {
											> .dropdown-menu {
												border-radius: 0;
											}
										}
									}
								}
							}
							&.dropdown-mega {
								> .dropdown-menu {
									border-radius: 0;
								}
								.dropdown-mega-sub-nav {
									> li {
										> a {
											border-radius: 0;
										}
									}
								}
							}
						}
					}
				}
			}

			// Thumb Preview
			a {
				> .thumb-info-preview {
					position: absolute;
					display: block;
					#{$left}: 100%;
					opacity: 0;
					border: 0;
					padding-left: 10px;
					background: transparent;
					overflow: visible;
					margin-top: 15px;
					top: -10000px;
					@include transition (transform .2s ease-out, opacity .2s ease-out);
					transform: translate3d(-20px,0,0);
					.thumb-info-wrapper {
						background: #FFF;
						display: block;
						border-radius: 4px;
						border: 0;
						box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
						margin: 0;
						padding: 4px;
						text-align: $left;
						width: 190px;
					}
					.thumb-info-image {
						transition: all 6s linear 0s;
						width: 182px;
						height: 136px;
						min-height: 0;
					}
				}
				&:hover {
					> .thumb-info-preview {
						transform: translate3d(0,0,0);
						top: 0;
						opacity: 1;
						margin-top: -5px;
					}
				}
			}

			.dropdown-reverse {
				a {
					> .thumb-info-preview {
						transform: translate3d(20px,0,0);
						right: 100%;
						left: auto;
						padding-left: 0;
						margin-right: 10px;
					}
					&:hover {
						> .thumb-info-preview {
							transform: translate3d(0,0,0);
						}
					}
				}
			}
		}

		// Header Nav Main Styles
		.header-nav {
			display: block !important;
			
			// Header Nav Stripe
			&.header-nav-stripe {
				margin-bottom: -9px;
				nav {
					> ul {
						> li, > li:hover {
							> a {
								background: transparent;
								padding: side-values(70px 13px 24px);
								margin: -5px 0 0;
								&.dropdown-toggle {
									padding-#{$right}: 23px;
									&:after {
										top: 72px;
									}
								}
							}
						}
						> li {
							> a {
								color: #444;
							}
							&:hover {
								> a {
									color: #FFF;
								}
							}
						}
					}
				}
				.header-social-icons {
					margin-top: 70px;
				}
			}

			// Header Nav Top Line
			&.header-nav-top-line {
				margin-bottom: -9px;
				nav {
					> ul {
						> li, > li:hover {
							> a {
								background: transparent;
								color: #444;
								padding: side-values(65px 13px 24px);
								margin: 0;
								&:before {
									content: "";
									position: absolute;
									width: 100%;
									height: 5px;
									top: -16px;
									left: -5px;
									opacity: 0;
								}
								&.dropdown-toggle {
									padding-#{$right}: 23px;
									&:after {
										top: 65px;
									}
								}
							}
						}
						> li {
							&.active, &:hover {
								> a {
									&:before {
										opacity: 1;
									}
								}
							}
						}
					}
				}
				.header-social-icons {
					margin-top: 70px;
				}
			}

			// Header Nav Dark Dropdown
			&.header-nav-dark-dropdown {
				margin-bottom: -9px;
				nav {
					> ul {
						> li, > li:hover {
							> a {
								background: transparent;
								color: #444;
								padding: side-values(65px 13px 24px);
								margin: 0;
								&.dropdown-toggle {
									padding-#{$right}: 23px;
									&:after {
										top: 65px;
									}
								}
							}
						}
						> li.dropdown {
							li {
								a {
									border-bottom-color: #2a2a2a;
								}
							}
							.dropdown-menu {
								background: #1e1e1e;
								> li {
									> a {
										color: #969696;
										&:hover, &:focus {
											background: #282828;
										}
									}
								}
							}
							&.dropdown-mega {
								.dropdown-mega-sub-title {
									color: #ababab;
								}
								.dropdown-mega-sub-nav {
									> li:hover {
										> a {
											background: #282828;
										}
									}
								}
							}
						}
					}
				}
				.header-social-icons {
					margin-top: 70px;
				}
			}

			// Header Nav Center
			&.header-nav-center {
				.header-nav-main {
					float: none;
					margin: 0;
					> nav {
						width: 100%;
						text-align: center;
						> ul {
							> li {
								display: inline-block;
								float: none;
								text-align: $left;
							}
						}
					}
				}
			}
		}

		.header-nav-main {
			display: block !important;
			height: auto !important;
		}

		// Header Navbar
		.header-nav-bar {
			background: #F4F4F4;
			padding: 0 10px 5px;
			margin-bottom: 0;
			.header-nav-main {
				float: $left;
				margin-bottom: 0;
			}
		}

	}
}

/* Header Narrow */
@media (min-width: 992px) {
	#header.header-narrow {

		// Header Nav Main Styles
		.header-nav {
			
			// Header Nav
			&.header-nav-stripe, &.header-nav-dark-dropdown {
				nav {
					> ul {
						> li, > li:hover {
							> a {
								padding: side-values(35px 13px 30px);
								margin: -12px 0 0;
								&.dropdown-toggle {
									padding-#{$right}: 23px;
									&:after {
										top: 35px;
									}
								}
							}
						}
					}
				}
				.header-social-icons {
					margin-top: 30px;
				}
			}

			// Header Nav Top Line
			&.header-nav-top-line {
				nav {
					> ul {
						> li, > li:hover {
							> a {
								padding: side-values(22px 13px 30px);
								margin: 5px 0 0;
								&.dropdown-toggle {
									padding-#{$right}: 23px;
									&:after {
										top: 22px;
									}
								}
							}
						}
					}
				}
				.header-social-icons {
					margin-top: 30px;
				}
			}

		}
	
	}
}

// Header Nav Main Light
@media (min-width: 992px) {
	#header {

		.header-nav-main.header-nav-main-light {
			nav {
				> ul {
					> li {
						> a {
							color: #FFF;
						}
						&.open, &:hover {
							> a {
								background: #FFF;
							}
							> .dropdown-menu {
								border-top-color: #FFF;
								box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05);
								.dropdown-submenu:hover > {
									.dropdown-menu {
										border-top-color: #FFF;
									}
								}
							}
						}
						&.active {
							> a {
								background: #FFF;
							}
						}
					}
				}
			}
			.dropdown-menu {
				> li {
					> a:hover, > a:focus {
						background: #f5f5f5;
					}
				}
			}
		}

	}
}

// Header Nav Effect 1
@media (min-width: 992px) {
	#header {

		.header-nav-main-effect-1 {
			nav {
				> ul {
					> li {
						&.dropdown {
							.dropdown-menu, .dropdown-mega-sub-nav {
								li {
									a {
										@include transition (transform .2s ease-out);
										transform: translate3d(0,-5px,0);
									}
								}
							}
							&:hover {
								> .dropdown-menu, .dropdown-mega-sub-nav {
									li {
										a {
											transform: translate3d(0,0,0);
										}
									}
								}
							}
						}
						&.dropdown {
							.dropdown-menu {
								@include transition (transform .2s ease-out);
								transform: translate3d(0,-5px,0);
							}
							&:hover {
								> .dropdown-menu {
									transform: translate3d(0,0,0);
								}
							}
						}
					}
				}
			}
		}

	}
}

// Header Nav Effect 2
@media (min-width: 992px) {
	#header {

		.header-nav-main-effect-2 {
			nav {
				> ul {
					> li {
						&.dropdown {
							.dropdown-menu {
								@include transition (transform .2s ease-out, opacity .2s ease-out);
								transform: translate3d(0,-5px,0);
								opacity: 0;
							}
							&:hover {
								> .dropdown-menu {
									transform: translate3d(0,-1px,0);
									opacity: 1;
								}
							}
						}
					}
				}
			}
		}

	}
}

// Header Nav Effect 3
@media (min-width: 992px) {
	#header {

		.header-nav-main-effect-3 {
			nav {
				> ul {
					> li {
						&.dropdown {
							.dropdown-menu {
								@include transition (transform .2s ease-out);
								transform: translate3d(0,10px,0);
							}
							&:hover {
								> .dropdown-menu {
									transform: translate3d(0,0,0);
								}
							}
						}
					}
				}
			}
		}

	}
}

// Header Nav Sub Effect 1
@media (min-width: 992px) {
	#header {

		.header-nav-main-sub-effect-1 {
			nav {
				> ul {
					> li {
						&.dropdown {
							.dropdown-menu {
								li {
									&.dropdown-submenu {
										> .dropdown-menu {
											@include transition (transform .2s ease-out, opacity .2s ease-out);
											transform: translate3d(-20px,0,0);
											opacity: 0;
										}
										&:hover {
											> .dropdown-menu {
												transform: translate3d(0,0,0);
												opacity: 1;
											}
										}
									}
								}
							}
							&.dropdown-reverse {
								.dropdown-menu {
									li {
										&.dropdown-submenu {
											> .dropdown-menu {
												@include transition (transform .2s ease-out, opacity .2s ease-out);
												transform: translate3d(20px,0,0);
												left: auto;
												right: 100%;
												opacity: 0;
											}
											&:hover {
												> .dropdown-menu {
													transform: translate3d(0,0,0);
													opacity: 1;
												}
											}
										}
									}
								}
							}

						}
					}
				}
			}
		}

	}
}