.page-open-mobile-menu {

	cursor: pointer;

	.inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;
	}

	.icon {
		position: relative;
		width: 24px;
		height: 18px;
	}

	&:hover {
		i {
			&:before {
				width: 80%;
			}

			&:after {
				width: 65%;
			}
		}
	}

	i {
		@extend %transit;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -1px;
		width: 100%;
		height: 2px;
		background: currentColor;

		&:before,
		&:after {
			position: absolute;
			left: 0;
			width: 100%;
			height: 100%;
			background: inherit;
			content: '';
			transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		}

		&:before {
			top: -8px;
		}

		&:after {
			top: 8px;
		}
	}
}

.page-close-mobile-menu {
	position: relative;
	cursor: pointer;
	height: 40px;
	width: 40px;
	flex-shrink: 0;
	color: #222;

	&:before,
	&:after {
		@extend %transit;
		position: absolute;
		top: 19px;
		left: 8px;
		content: '';
		width: 24px;
		height: 3px;
		background: currentColor;
		transform-origin: 50% 50%;
	}

	&:before {
		transform: rotate(-45deg);
	}

	&:after {
		transform: rotate(45deg);
	}

	&:hover {
		&:before,
		&:after {
			transform: none;
		}
	}
}

.page-mobile-menu-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 0 15px 0 30px;
	height: 80px;
	align-items: center;
}

.page-mobile-menu-logo {
	flex-grow: 1;
}

.page-mobile-menu-opened {
	overflow: hidden;

	&.mobile-menu-push-to-right {
		.site {
			@extend %transit;
			transform: translateX(350px);
		}
	}

	&.mobile-menu-push-to-left {
		.site {
			@extend %transit;
			transform: translateX(-350px);
		}
	}
}

.mobile-menu-push-to-left {
	.page-mobile-main-menu {
		> .inner {
			float: right;
			transform: translateX(100%);
		}
	}
}

.mobile-menu-slide-to-left {
	.page-mobile-main-menu {
		> .inner {
			float: right;
			transform: translateX(100%);
		}
	}
}

.page-mobile-main-menu {
	@extend %transit;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	background: rgba(0, 0, 0, .7);
	visibility: hidden;
	opacity: 0;
	cursor: url('assets/images/cursor/light-close.png') 16 16, pointer;

	.admin-bar & {
		top: 32px;
		height: calc(100% - 32px);
	}

	> .inner {
		position: relative;
		height: 100%;
		max-width: 80%;
		text-align: left;
		transition: all .3s;
		padding-top: 80px;
		transform: translateX(-100%);
		cursor: default;
		background: #fff;
		width: 360px;
	}

	.page-mobile-menu-opened & {
		visibility: visible;
		opacity: 1;

		> .inner {
			transform: translateX(0);
		}
	}

	ul {
		margin: 0;
		padding: 0;
	}

	li {
		display: block;
		list-style-type: none;

		&.opened {
			> a {
				.toggle-sub-menu {
					&:after {
						content: '\f106';
					}
				}
			}
		}
	}

	.sub-menu {
		display: none;
		margin: 14px 0;

		.sub-menu {
			margin-left: 10px;
		}

		a {
			padding: 8px 0;
		}
	}

	.wpb_column {
		&.vc_column_container {
			width: 100% !important;
		}

		+ .wpb_column {
			margin-top: 30px;
		}
	}

	.menu__container {
		padding: 0;
		margin: 20px 30px 100px;

		> li {

			> a {
				padding: 10px 0;
				border: 0;
				border-color: transparent;
			}

			+ li {
				> a {
					border-top: 1px solid transparent;
				}
			}

			&.opened {
				> a {
					border-bottom: 1px solid transparent;
				}
			}
		}

		a {
			position: relative;
			display: block;
		}
	}

	.tm-list {
		margin-bottom: 16px;
	}

	.mega-menu {
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.wpb_button,
	.wpb_content_element,
	ul.wpb_thumbnails-fluid > li {
		margin-bottom: 30px;
	}

	.widget_nav_menu,
	.insight-core-bmw {
		li {
			margin: 0;
			padding: 0;
			border: 0;
		}
	}

	.toggle-sub-menu {
		@extend %transit;
		position: absolute;
		top: 50%;
		right: 0;
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, .1);
		color: #fff;
		text-align: center;
		line-height: 40px;
		transform: translate(0, -50%);

		&:after {
			@extend %FontAwesomeRegular;
			content: '\f107';
			font-size: 18px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&:hover {
			background: rgba(255, 255, 255, .2);
		}
	}

	.mega-menu-content {
		.container {
			max-width: 100%;

			> .row {
				> .col-md-12 {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}
	}
}

.page-mobile-menu-content {
	overflow-y: auto;
	height: calc(100vh - 80px);

	.handheld & {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
}

@media screen and (max-width: 782px) {
	.page-mobile-main-menu {
		.admin-bar & {
			top: 46px;
			height: calc(100% - 46px);
		}
	}
}

@media screen and (max-width: 600px) {
	.page-mobile-main-menu {
		.admin-bar & {
			top: 0;
			height: 100%;
		}
	}
}

.desktop-menu {
	.page-open-mobile-menu {
		display: none !important;
	}
}