body {
	&:before {
		content   : '';
		background: rgba(0, 0, 0, 0.7);
		position  : fixed;
		top       : 0;
		left      : 0;
		height    : 100%;
	}

	&.resmenu-open {
		&:before {
			z-index: 9999;
			width  : 100%;
		}
	}

	&.open {
		&:before {
			width  : 100%;
			z-index: 100;
		}
	}
}

.resmenu-container {
	.navbar-toggle {
		display         : none;
		float           : left;
		margin          : 0;
		background-color: transparent;
		border-color    : transparent;

		.icon-bar {
			background-color: #111;
			height          : 3px;
		}

		&:hover,
		&:focus {
			background-color: transparent;

			.icon-bar {
				background-color: var(--color);
			}
		}
	}

	.menu-responsive-wrapper {
		position  : absolute;
		top       : 55px;
		padding   : 0;
		min-width : 300px;
		background: lighten(@body-color, 14%);
		z-index   : 999;

		ul {
			list-style-type: none;
			margin         : 0;

			.dropdown-resmenu {
				display: none;

				>li {
					>a {
						padding-left: 25px;
					}
				}
			}

			>li {
				position: relative;
				.box-shadow(0 1px 0 0 #555);

				>a {
					color  : #fff;
					padding: 10px 20px;
					display: block;
					.box-shadow(0 1px 0 0 #555);
				}

				.show-dropdown {
					display    : block;
					width      : 40px;
					position   : absolute;
					right      : 0;
					top        : 0;
					height     : 39px;
					background : #111;
					cursor     : pointer;
					text-align : center;
					line-height: 39px;
					font-size  : 20px;

					&:after {
						content    : "+";
						font-family: FontAwesome;
					}

					&.show {
						&:after {
							content: "–";
						}
					}

					&:hover {
						color     : #fff;
						background: var(--color);
					}
				}

				&:hover,
				&.active {
					>a {
						background: #eee;
						color     : var(--color);
					}

					>.show-dropdown {
						background: var(--color);
						color     : #fff;
					}
				}

				&.has-img {
					>a {
						.flex-display(flex);
						.align-item(center);

						span.menu-img {
							display     : block;
							max-width   : 40px;
							margin-right: 10px;
						}
					}
				}
			}
		}
	}

	&.resmenu-container-sidebar {
		font-size: 14px;

		.menu-responsive-wrapper {
			min-width: 320px;
			position : fixed;
			top      : 0;
			bottom   : 0;
			left     : 0;
			width    : 0;
			.translate(-350px, 0);
			z-index: 9999;
			.transition(all 0.3s ease-out);

			&.open {
				.translate(0, 0);
			}

			.admin-bar & {
				top: 46px;
			}

			.menu-responsive-inner {
				background: #fff;
				position  : relative;
				height    : 100%;
				overflow-x: auto;

				ul {
					list-style-type: none;
					margin         : 0;

					>li {
						position: relative;
						.box-shadow(none);

						>a {
							color  : #333;
							padding: 12px 0;
							display: block;
							.box-shadow(none);
							border-bottom: 1px solid #eee;

							.fa {
								margin-right: 7px;
								margin-top  : 3px;
							}
						}

						.show-dropdown {
							display    : block;
							width      : 40px;
							position   : absolute;
							right      : 0;
							top        : 0;
							height     : 39px;
							cursor     : pointer;
							text-align : center;
							line-height: 39px;
							font-size  : 18px;
							color      : #ccc;
							background : none;

							&:after {
								content    : "\f105";
								font-family: FontAwesome;
							}

							&.show {
								&:after {
									content: "\f107";
								}
							}

							&:hover {
								color     : var(--color);
								background: none;
							}
						}

						&:hover,
						&.active {
							>a {
								color     : var(--color);
								background: none;
							}

							>.show-dropdown {
								color     : var(--color);
								background: none;
							}
						}

						>ul>li>a {
							padding-left: 10px;
						}

						&.has-img {
							>a {
								.flex-display(flex);
								.align-item(center);

								span.menu-img {
									display     : block;
									max-width   : 40px;
									margin-right: 10px;
								}
							}
						}
					}
				}

				.nav-tabs {
					border-top: 1px solid #e4e4e4;
					.flex-display(flex);

					>li {
						.box-shadow(none);
						.flex(4);

						>a {
							.flex-display(flex);
							.align-items(center);
							padding: 10px;
							.box-shadow(none);
							border-radius : 0;
							border        : 0;
							text-transform: uppercase;
							background    : #fafafa;
							color         : #999;
							margin        : 0;
							border-bottom : 1px solid #e4e4e4;
							border-right  : 1px solid #e4e4e4;
							height        : 100%;

							&:before {
								content     : '\f036';
								font-family : FontAwesome;
								margin-right: 10px;
							}

							&.tab-vertical {
								border-left: 1px solid #e4e4e4;

								&:before {
									content: '\f009';
								}
							}
						}

						&.active>a {
							color     : #333;
							background: none;
						}

						.dropdown {
							display: none;
						}

						&.more-menu {
							.flex(1);
							background   : #fafafa;
							border-bottom: 1px solid #e4e4e4;
							.flex-display(flex);
							.align-items(center);

							>a {
								.flex-display(flex);
								.align-items(center);
								border-bottom: 0;

								>span {
									font-size    : 14px;
									background   : #999;
									color        : #fff;
									width        : 30px;
									height       : 30px;
									display      : inline-block;
									text-align   : center;
									line-height  : 30px;
									border-radius: 50%;
								}

								&:before {
									display: none;
								}
							}

							>ul {
								position  : absolute;
								top       : 100%;
								background: #fafafa;
								right     : 0;
								min-width : 200px;
								z-index   : 99;
								.box-shadow(0 0 0 1px #ddd);
								text-transform: capitalize;
							}

							&:hover>a>span {
								background: var(--color);
							}
						}

						&:last-child>a {
							border-right: 0;
						}
					}
				}

				.tab-content {
					padding: 0 15px;
				}

				.resmenu-top {
					padding   : 10px;
					background: #fafafa;
					.flex-display(flex);
					.justify-content(space-between);
					position: relative;
					z-index : 99;

					.resmenu-top-mobile {
						>a {
							display: block;
							width  : 40px;
							height : 40px;
							.box-shadow(0 0 0 1px #e4e4e4);
							background : #fff;
							color      : #999;
							line-height: 40px;
							text-align : center;
							font-size  : 18px;
							margin-left: 15px;
						}

						#respmenu_setting_content {
							display   : none;
							position  : absolute;
							right     : 10px;
							top       : 60px;
							min-width : 120px;
							background: #fff;
							.box-shadow(0px 0px 3px #ccc);
							padding: 10px;

							#lang_sel>ul.nav {
								display: block;

								>li {
									padding: 0 0 10px;

									>a {
										padding: 0;
										color  : #333;
										border : none;

										&:after {
											color: #333;
											float: right;
										}
									}

									&:hover>ul {
										left      : -10px;
										top       : 30px;
										max-height: none;
									}
								}
							}

							ul.currency_w {
								li {
									padding: 0;

									>a {
										padding: 0;
										border : 0;

										&:after {
											color: #333;
											float: right;
										}
									}

									&:hover .currency_switcher {
										left     : -10px;
										top      : 28px;
										min-width: 122px;
									}
								}
							}
						}
					}
				}
			}

			.menu-close {
				position   : absolute;
				top        : 0px;
				right      : -25px;
				color      : #fff;
				font-size  : 16px;
				cursor     : pointer;
				background : #000;
				width      : 25px;
				height     : 25px;
				text-align : center;
				z-index    : 999;
				line-height: 25px;

				&:after {
					content: "x";
				}

				&:hover {
					background: var(--color);
				}
			}
		}
	}
}

@media (max-width: 991px) {
	#main-menu .primary-menu {
		.resmenu-container {
			.navbar-toggle {
				display       : inline-block;
				vertical-align: top;
				z-index       : 1;
				margin        : 8px 0;

				.header-style1 & {
					border: 1px solid #ff5c00;
				}
			}

			.menu-responsive-wrapper {
				.header-style4 & {
					top: 50px;
				}
			}
		}

		.nav-pills {
			display: none;
		}
	}

	.resmenu-container-sidebar {
		.emarket_top .top-form.top-search {
			min-width         : auto;
			box-shadow        : 0 0 0 1px #e4e4e4;
			-webkit-box-shadow: 0 0 0 1px #e4e4e4;
			border-radius     : 0;

			.cat-wrapper {
				display: none;
			}

			input {
				padding: 0 10px;
			}

			button.form-button {
				background: none;
				font-size : 16px;

				&:before {
					color: #999;
				}
			}
		}
	}
}