/*
 *	side-push-panel.scss
 * -----------------------------------------------
*/
.side-push-panel {
	overflow-x: hidden;
	&.fullwidth-page {
		#wrapper {
			right: 0;
			position: relative;
		}
		header {
			.header-nav-wrapper.scroll-to-fixed-fixed {
				.container {
					right: 0;
				}
			}
		}
		&.side-panel-left {
			#wrapper {
				left: 0;
				right: auto;
			}
			header {
				.header-nav-wrapper.scroll-to-fixed-fixed {
					.container {
						left: 0;
						right: auto;
					}
				}
			}
		}
		&.side-panel-open {
			#wrapper {
				right: 400px;
			}
			header {
				.header-nav-wrapper.scroll-to-fixed-fixed {
					.container {
						right: 400px;
					}
				}
			}
		}
		&.side-panel-left.side-panel-open {
			#wrapper {
				left: 400px;
				right: auto;
			}
			header {
				.header-nav-wrapper.scroll-to-fixed-fixed {
					.container {
						left: 400px;
						right: auto;
					}
				}
			}
		}
	}

	/* -------- Has Side Panel ---------- */
	&.has-side-panel .menuzord .showhide {
		float: left;
	}
}



/* -------- Body Overlay ---------- */
.has-side-panel {
	.side-panel-body-overlay {
		@include transition(opacity .3s ease);
		background-color: rgba($black, 0.8);
		height: 100%;
		left: 0;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: $zindex-side-push-panel-body-overlay;
	}
}
.has-side-panel.side-panel-open {
	.side-panel-body-overlay {
		opacity: 1;
		pointer-events: auto;
		z-index: $zindex-side-push-panel-side-panel-open-body-overlay;
	}
}

.side-panel-open:not(.device-xxs):not(.device-xs):not(.device-sm) .side-panel-body-overlay:hover { 
	cursor: url('../images/close.png') 15 15, default;
}

/* -------- Side Panel ---------- */
#side-panel-container {
	-webkit-backface-visibility: hidden;
	background-color: $white-base;
	height: 100%;
	overflow: hidden;
	position: fixed;
	right: -400px;
	top: 0;
	text-align: left;
	width: 400px;
	z-index: $zindex-side-panel;
	@include transition(all .4s ease);
	@include media-breakpoint-down(md) {
		width: 300px;
	}
	
	ul {
		padding-left: 0;
	}
	.side-panel-wrap {
		bottom: 0;
		height: 100%;
		left: 0;
		overflow: auto;
		padding: 50px 60px 50px 40px;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.widget.widget-side-push-panel {
		width: 100%;
		font-size: 14px;
		margin-bottom: 20px;
		.widget-title {
			font-weight: 700;
		}
		.textwidget {
			color: $black-333;
		}
		&.widget-horizontal-row {
			margin-top: 0;
			margin-bottom: 0;
		}
		&.widget-image-widget {
			.thumb {
				margin-bottom: 20px;
			}
		}
	}
}
.side-panel-open #side-panel-container { right: 0; }
.side-panel-left #side-panel-container {
	left: -400px;
	right: auto;
}
.side-panel-left.side-panel-open #side-panel-container {
	left: 0;
	right: auto;
}
.device-touch #side-panel-container .side-panel-wrap { overflow-y: scroll; }

/* -------- Side-Panel-Trigger And Close ---------- */
#side-panel-trigger {
	cursor: pointer;
	display: block;
	z-index: $zindex-side-panel-trigger;
	@include media-breakpoint-down(lg) {
	}
}
#side-panel-trigger-close {
	position: absolute;
	right: 0;
	top: 0;
	.side-panel-trigger-icon {
		font-size: 18px;
		color: $black-333;
		margin-top: 20px;
		margin-right: 15px;
		background: #eee;
		padding: 13px 16px 14px 16px;
		border-radius: 30px;
	}
}

/* -------- Transition ---------- */
.side-push-panel.fullwidth-page #wrapper,
.side-push-panel.fullwidth-page header .header-nav-wrapper.scroll-to-fixed-fixed .container {
	@include transition(all .4s ease);
}

/* Hamburger Menu */
.hamburger-box {
	display: inline-block;
	height: 20px;
	position: relative;
	width: 20px;
	padding: 12px 5px;

	.hamburger-inner {
		margin-left: 3px;
		top: 16px;
	}
	.hamburger-inner,
	.hamburger-inner:after,
	.hamburger-inner:before {
		background-color: $headings-nav-side-icons-color;
		border-radius: 4px;
		height: 4px;
		position: absolute;
		width: 4px;
		@include transition(all .15s ease);
	}
	.hamburger-inner:after,
	.hamburger-inner:before{
		display:block;
		content:"";
	}
	.hamburger-inner:before{
		top: -8px;
	}
	.hamburger-inner:after{
		bottom: -8px;
	}
	&:hover {
		.hamburger-inner,
		.hamburger-inner:after,
		.hamburger-inner:before {
			background-color: #888;
		}
	}
}