/* Mobile sidebar */

.mobile-sidebar-open #close-sidebar-nav {
	left: 0;
	opacity: 1;
	visibility: visible;
	transform: translateX(260px);
	-webkit-transform: translateX(260px);
	-moz-transform: translateX(260px);
}

#close-sidebar-nav, .menu-toggle {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#close-sidebar-nav {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	text-decoration: none;
	top: 0;
	left: 0;
	font-size: 1.4em;
	color: #313131;
	padding: 10px;
	height: 100%;
	right: 0;
	background: transparent;
	z-index: 100001;
	cursor: pointer;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);

	&:before {
		content: '';
		position: absolute;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000;
		opacity: 0.8;
		z-index: 1;
	}

	i {
		margin-left: 10px;
		display: none;
		width: 24px;
		height: 24px;
		background-color: #fff;
		line-height: 24px;
		text-align: center;
		border-radius: 12px;
		font-size: 14px;
		position: relative;
		z-index: 2;
	}
}

.mobile-sidebar.fullwidth + #close-sidebar-nav {
	z-index: 100005;
	left: auto;
	right: 10px;
	height: auto;
	text-align: right;
	background: transparent;
	transform: none;

	i{
		color: #fff;
		background: #000;
	}
}

@media screen and (max-width: 1024px) {
	#close-sidebar-nav i {
		display: inline-block;
	}
}

.mobile-sidebar {
	width: 270px;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100%;
	z-index: 100003;
	overflow-y: auto;
	padding: 30px 20px 20px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transform: translateX(-270px);
	-webkit-transform: translateX(-270px);
	-moz-transform: translateX(-270px);
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	&.fullwidth {
		width: 100%;
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
	}

	&::-webkit-scrollbar {
		width: 6px;
		background: #848484;
	}

	&::-webkit-scrollbar-thumb {
		background-color: #313131;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
	}

	&::-webkit-scrollbar-corner {
		background-color: #ececec;
	}

	.mobile-navigation {
		clear: both;
		margin-top: 20px;
	}
}

.mobile-sidebar,
.penci-menu-hbg {
	.primary-menu-mobile {
		margin: 0;
		padding: 0;
		list-style: none;

		li > ul, li > ol {
			margin-bottom: 0;
		}

		> li:last-child, ul > li:last-child {
			border-bottom: none;
		}
		li {
			position: relative;
			display: block;
			border-bottom: 1px solid $color__border;
			margin-left: 0;

			a {
				font-size: 14px;
				font-weight: normal;
				letter-spacing: 0;
				text-transform: uppercase;
				color: #313131;
				margin: 0;
				position: relative;
				padding: 12px 0 12px 0;
				display: block;
				line-height: 1.3em;
			}
			&.menu-item-has-children a {
				padding-right: 17px;
			}
			a {
				&:hover {
					color: $color__blue;
				}
				> i {
					display: none;
				}
			}
		}
	}
	ul.sub-menu {
		border-top: 1px solid $color__border;
		display: none;
		padding: 10px 0 10px 12px;
		margin-left: 0;

		ul.sub-menu {
			border: none;
			padding: 5px 0 5px 12px;
			padding-right: 0;
			margin-left: 0;
		}

		li {
			overflow: hidden;
			border: none;
			a {
				margin: 0 0 0 0;
				padding: 10px 0;
				transition: all 0.3s;
				-webkit-transition: all 0.3s;
				-moz-transition: all 0.3s;
			}
		}
	}
	.primary-menu-mobile {
		.dropdown-toggle {
			text-decoration: none;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 20;
			font-size: 17px;
			font-style: normal;
			text-align: right;
			padding: 11px 0 11px 5px;
			line-height: 1;
			color: #313131;
			transition: all 0.3s;
		}
		.sub-menu li a .dropdown-toggle {
			padding: 8px 0 8px 5px;
		}

		li.toggled-on-first,
		li.toggled-on,
		li.current-menu-item {
			& > a,
			& > .dropdown-toggle {
				color: $color__blue;
			}
		}
	}
}

.mobile-sidebar {
	#sidebar-nav-logo {
		padding:0;
		text-align: center;
		margin: 0 0 10px 0;
		position: relative;
		font-size: 2em;

		a {
			font-family: "Teko", sans-serif;
			font-weight: 700;
			line-height: 1;
			color: #3f51b5;
			padding: 0;
			margin: 0;

			&:hover {
				color: #3f51b5;
			}
		}
	}

	.sidebar-nav-social {
		margin: 0;
		padding: 0;
		text-align: center;

		.inner-header-social {
			display: inline-block;
			vertical-align: top;
			position: relative;
		}

		a {
			display: inline-block;
			vertical-align: top;
			margin-left: 6px;
			margin-right: 6px;
			color: $color__dark;
		}
	}
}

.mobile-sidebar-open {
	.mobile-sidebar {
		transform: translateX(0);
		cursor: pointer;

		&.fullwidth {
			transform: translateX(0);
			-webkit-transform: translateX(0);
			-moz-transform: translateX(0);
		}
	}
}