/* Header Default */
#pxl-header-default {
	position: relative;
	z-index: 999;
	background-color: #fff;

	.row {
		align-items: center;

		@media #{$min-xl} {
			>div {
				padding: 0 15px;
			}
		}
	}

	.container {
		max-width: 1775px;
	}

	.pxl-header-branding {
		display: flex;
		align-items: center;
		flex-grow: 1;

		a {
			display: inline-flex;
		}

		img {
			height: 30px;
			max-width: inherit;
		}
	}

	#pxl-nav-mobile {
		display: none;
	}
}

/* Header Elementor */
#pxl-header-elementor {
	@media #{$min-xl} {
		min-height: 0px !important;
		position: relative;
		z-index: 1001;

		.col-12 {
			min-height: 0px;
		}
	}

	#pxl-header-mobile {
		display: none;
	}

	.pxl-header-elementor-main {
		position: relative;
		z-index: 999;
	}

	.pxl-header-elementor-sticky {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		top: 0;
		@include transform(translateY(-120%));
		@include transition(.6s cubic-bezier(.24, .74, .58, 1));
		visibility: hidden;

		&.pxl-header-fixed {
			@include transform(translateY(0%));
			visibility: visible;
		}
	}

	&.pxl-header-rmboxshadow .pxl-header-elementor-sticky.pxl-header-fixed {
		@include box-shadow(none);

		.pxl-logo-nav {
			@include box-shadow(0 3px 18px rgba(#02154e, 0.09));
		}
	}

	.px-header--transparent {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 999;
	}

	.elementor-section .elementor-container,
	.elementor-inner-section,
	.elementor-widget:not(.elementor-absolute),
	.elementor-widget-wrap,
	.elementor-column,
	.elementor-column-wrap {
		position: static;
	}
}

.pxl-header-mobile-elementor {
	opacity: 0;

	&.px-header--transparent {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 999;
	}
}

/* Header Menu */
@media #{$min-xl} {
	#pxl-header-default .pxl-menu-primary>li {
		&.menu-item-has-children {
			>a span:after {
				font-family: Caseicon;
				font-size: 10px;
				margin-left: 6px;
				font-weight: 400;
				@include transition(all .25s cubic-bezier(.645, .045, .355, 1));
			}

			&:hover>a span:after {
				transform: scaleY(-1);
			}
		}
	}

	.pxl-menu-primary {
		list-style: none;
		margin: 0;
		padding: 0;

		&.pxl-primary-menu-not-set>li>a {
			line-height: 83px;
		}

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

		li {
			position: relative;
			color: #5e6e6e;

			a {
				font-size: 15px;
				color: rgba(0, 0, 0, 0.9);
				position: relative;
				font-weight: 500;
			}
		}

		>li {
			display: inline-block;
			vertical-align: middle;
			margin: 0 14px;

			>a {
				line-height: 83px;
				font-size: 16px;
				font-weight: 700;
				display: inline-block;
				color: #0a0f0e;

				span {
					position: relative;
					padding-right: 8px;

					// &::before {
					// 	position: absolute;
					// 	content: '';
					// 	width: 5px;
					// 	height: 5px;
					// 	background: $primary_color;
					// 	top: -4px;
					// 	right: 1px;
					// }

					// &::after {
					// 	content: '';
					// 	width: 0;
					// 	left: 0;
					// 	height: 2px;
					// 	position: absolute;
					// 	bottom: -3px;
					// 	-webkit-transition: width 0.25s;
					// 	transition: width 0.25s;
					// 	background-color: var(--primary-color);
					// }
				}
			}

			&:hover,
			&:active,
			&:focus,
			&.current_page_item {
				>a {
					span {
						&::after {
							width: 100%;
						}
					}
				}
			}
		}
		
		.sub-menu,
		.children {
			position: absolute;
			top: 100%;
			left: 0;
			background-color: #ffffff;
			margin-top: 10px;
			margin-bottom: 0;
			min-width: 235px;
			z-index: 99;
			visibility: hidden;
			opacity: 0;
			@include box-shadow(0 15px 30px -10px rgba(0, 0, 0, .09));
			@include transition(all 300ms linear 0ms);
			transform-origin: 0 0 0;
			-webkit-transform-origin: 0 0 0;
			-ms-transform-origin: 0 0 0;
			-o-transform-origin: 0 0 0;
			text-align: left;
			border-radius: 0 0 5px 5px;
			border: solid $primary_color;
			border-width: 4px 0px 4px 0px;
			padding: 0;
			
			li {
				white-space: nowrap;

				a {
					padding: 10px 20px;
					display: block;
					span {
		        		@include transition(all 220ms linear 0ms);
		        		position: relative;
		        		.char {
		        			transition: transform 0.3s ease, color 0.3s ease;
							transition-delay: calc(var(--char-index) * 0.03s);
		        		}
		        	}
				}

				>a:hover,
				&.current_page_item>a,
				&.current-menu-item>a,
				&.current_page_ancestor>a,
				&.current-menu-ancestor>a {
					color: rgba(0, 0, 0, .9);
					span {
			    		.char {
							color: $primary_color;
							@include transform(translateY(-10px));
						}
			    	}
				}

				&:last-child>a {
					border-bottom: none;
				}
			}

			&.pxl-sub-reverse {
				left: auto;
				right: 0;

				li.menu-item-has-children>a::after {
					content: "\f136";
					right: auto;
					left: 0;
				}
			}

			.sub-menu,
			.children {
				top: 0;
				left: 100%;

				&.pxl-sub-reverse {
					left: auto;
					right: 100%;
				}
			}
		}

		li:hover {

			>.sub-menu,
			>.children {
				visibility: visible;
				opacity: 1;
				margin-top: 0px;

				&:not(.pxl-mega-menu) {
					
				}
			}
		}

		.sub-menu li:hover {
			>.sub-menu {
				margin-top: 0;
			}
		}

		.pxl-megamenu {
			position: static;

			>.sub-menu {
				max-width: 100%;
				margin-left: auto;
				margin-right: auto;
				left: 0;
				right: 0;
			}

			.pxl-link li {
				padding: 0;
				margin-bottom: 0;
			}
		}
	}

	.pxl-menu-toggle {
		display: none;
	}
}

/* Header Tablet/Mobile */
@media #{$max-lg} {

	#pxl-header-default,
	#pxl-header-elementor {
		position: relative;
		background-color: #fff;
		z-index: 99;
		.pxl-header-main {
			position: relative;
		}

		.pxl-header-branding {
			margin: 15px;
			min-height: 50px;
			align-items: center;
			display: flex;

			img {
				height: 30px;
			}
		}

		#pxl-nav-mobile {
			display: block;
			position: absolute;
			top: 50%;
			right: 15px;
			@include transform(translate(0, -50%));
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.pxl-mobile-meta-item {
				margin-left: 10px;
			}
		}
	}

	.pxl-header-menu-backdrop {
		z-index: 998;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(#000, 0.6);
		@include transition(all .25s cubic-bezier(.645, .045, .355, 1));
		opacity: 0;
		visibility: hidden;
	}

	.pxl-header-menu {
		position: fixed;
		height: 100vh;
		width: 300px;
		top: 0;
		left: 0;
		bottom: 0;
		margin: 0;
		overflow: hidden;
		z-index: 999;
		@include transition(all .25s cubic-bezier(.645, .045, .355, 1));
		@include transform(translateX(-100%));
		visibility: hidden;
		@include box-shadow(0 0 15px rgba(0, 0, 0, 0.08));
		background-color: #fff;
		overflow-y: scroll;

		&.active {
			visibility: visible;
			opacity: 1;
			@include transform(translateX(0%));

			+.pxl-header-menu-backdrop {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	.pxl-header-menu-scroll {
		padding: 40px 15px;
	}

	.pxl-menu-toggle {
		position: absolute;
		top: 10px;
		height: 28px;
		line-height: 28px;
		text-align: center;
		right: 0px;
		width: 28px;
		cursor: pointer;
		font-size: 10px;
		@include transition(all .25s cubic-bezier(.645, .045, .355, 1));
		color: #1b1b1b;
		@include border-radius(3px);
		background-color: rgba(#000, 0.03);

		&:before {
			content: "\f150";
			font-family: "Caseicon";
		}

		&.active:before {
			content: "\f13d";
		}
	}

	.pxl-menu-primary {
		list-style: none;
		margin: 0;
		padding: 0;

		li.menu-item,
		li.pxl-item--link {
			position: relative;

			>a {
				display: block;
				line-height: 46px;
				color: #000000;
				font-size: 14px;
				font-weight: 700;
				border-bottom: 1px solid rgba(#000, 0.06);
			}

			>a:hover,
			>a.current,
			&.current_page_item>a,
			&.current-menu-item>a,
			&.current_page_ancestor>a,
			&.current-menu-ancestor>a {
				color: $primary_color;
			}
		}

		.sub-menu,
		.children {
			position: relative;
			display: none;
			list-style: none;
			margin: 0;
			padding: 0;

			li {
				a {
					font-weight: 500;
					padding-left: 14px;
				}
			}
		}

		>li>.sub-menu>li>.sub-menu>li a {
			padding-left: 28px;
		}

		.pxl-megamenu {
			.pxl-mega-menu-elementor {
				margin-top: 20px;

				.pxl-showcase-grid {
					.pxl-grid-inner {
						height: auto !important;
						display: block;

						.pxl-grid-item {
							position: static !important;
							width: 100% !important;
							max-width: 100% !important;
						}
					}
				}
			}

			.elementor-container {
				>.elementor-column {
					width: 100%;
				}

				.elementor-widget-wrap {
					padding: 0 !important;
				}
			}

			.pxl-link li {
				margin: 0;
			}

			.pxl-heading {
				padding-left: 14px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.06);
				padding-top: 12px;
				padding-bottom: 12px;

				.pxl-item--title {
					margin-bottom: 0 !important;
					font-size: 14px !important;
					border-bottom: none !important;
				}
			}

			.elementor-widget-heading>.elementor-widget-container {
				margin-bottom: 0 !important;
				border-bottom: none !important;
			}

			.elementor-section .elementor-container {
				flex-wrap: wrap;
			}
		}
	}

	.pxl-logo-mobile {
		margin-bottom: 35px;

		img {
			height: 30px;
		}

		.pxl-logo--light {
			display: none;
		}
	}

	.pxl-header-mobile-search {
		margin-bottom: 20px;

		form {
			position: relative;
		}

		.search-field {
			height: 44px;
			border: none;
			padding: 0 22px;
			background-color: #f8f8f8;
			border-radius: 4px;
		}

		.search-submit {
			position: absolute;
			top: 0;
			right: 0;
			@include border-radius(0px);
			line-height: 44px;
			padding: 0;
			min-width: 44px;
			height: 44px;
			line-height: 44px;
			background: none;
			color: #000;
			border: none;
			margin: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			i{
				color: #fff;
				font-size: 14px;
			}
			&:hover,
			&:focus {
				color: $primary_color;
				background-color: transparent;
			}
		}
	}

	.pxl-menu-close {
		background-color: rgba(0, 0, 0, 0.03);
		position: absolute;
		top: 0;
		right: 0;
		@include border-radius(0px);
	}

	#pxl-header-elementor {

		.pxl-header-elementor-main,
		.pxl-header-elementor-sticky {
			display: none;
		}

		#pxl-header-mobile {
			display: block;
			position: relative;
			z-index: 999;
			.sub-menu{
				.elementor-section{
					width: 100% !important;
					.elementor-column{
						margin-bottom: 15px;
					}
				}
			}
			&.style-dark {
				background-color: #0B0C10;

				.pxl-logo-mobile {
					.pxl-logo--dark {
						display: none;
					}

					.pxl-logo--light {
						display: block;
					}
				}

				&.pxl-header-mobile-fixed {
					background-color: #0B0C10;
				}

				.pxl-nav-mobile-button .pxl-icon-line:after,
				.pxl-nav-mobile-button .pxl-icon-line:before {
					background-color: #fff;
				}

				.pxl-header-menu {
					background-color: #000;
				}

				.pxl-header-mobile-search {
					.search-field {
						background-color: rgba(255, 255, 255, 0.12);
						border-color: rgba(255, 255, 255, 0.12);
						color: rgba(#fff, 0.67);

						&:focus {
							color: #fff;
						}
					}

					.search-submit {
						color: rgba(#fff, 0.8);
						font-size: 14px;
					}
				}

				.pxl-menu-primary li {
					a {
						color: rgba(#fff, 0.8);
						border-color: rgba(#fff, 0.08);
					}

					>a:hover,
					>a.current,
					&.current_page_item>a,
					&.current-menu-item>a,
					&.current_page_ancestor>a,
					&.current-menu-ancestor>a {
						color: #fff;
					}
				}

				.pxl-menu-close {
					background-color: rgba(255, 255, 255, 0.12);

					&:before,
					&:after {
						background-color: #fff;
					}
				}

				.pxl-menu-toggle {
					background-color: rgba(255, 255, 255, 0.1);
					color: rgba(#fff, 0.8);
				}
			}
		}
	}

	#pxl-header-elementor #pxl-header-mobile {
		.pxl-header-sticky {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			opacity: 0;
			visibility: hidden;
		}

		&.pxl-header-mobile-fixed .pxl-header-sticky {
			visibility: visible;
			opacity: 1;
			@include animation(0.95s ease 0s normal forwards 1 running PXL_Header_SlideDown);
		}
	}
}

@media #{$max-sm} {
	.pxl-header-menu {
		width: 100%;
	}
}

/* Hidden Panel */
.pxl-hidden-panel-popup {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999;
	height: 100vh;
	width: 100%;
	visibility: hidden;

	@media #{$max-lg} {
		display: none;
	}

	.pxl-popup--overlay {
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(#1f2022, 0.76);
		opacity: 0;
		visibility: hidden;
		@include transition(all .5s cubic-bezier(0.46, 0.03, 0.52, 0.96));
		cursor: pointer;
	}

	.elementor>.elementor-section {
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
	}

	.pxl-popup--conent {
		max-height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: none;
		background-color: #fff;
	}

	&.pxl-pos-top {
		.pxl-popup--conent {
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			@include transition(all .5s cubic-bezier(0.46, 0.03, 0.52, 0.96));
			@include transform(translateY(-100%));
		}
	}

	&.pxl-pos-right {
		.pxl-popup--conent {
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			width: 470px;
			@include transition(all .25s cubic-bezier(.645, .045, .355, 1));
			@include transform(translateX(100%));
			padding: 60px 0;
			overflow-y: scroll;
			overflow-x: hidden;
			margin-right: -30px;
		}
	}

	&.active {
		visibility: visible;

		.pxl-popup--conent {
			@include transform(translateY(0%));
			transition-delay: 0s !important;
		}

		.pxl-popup--overlay {
			opacity: 1;
			visibility: visible;
			transition-delay: 0s !important;
		}

		.pxl-search-form .pxl-searchform-divider {
			webkit-animation-name: PXLfadeInMove;
			animation-name: PXLfadeInMove;
			-webkit-animation-duration: 0.7s;
			animation-duration: 0.7s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			visibility: visible;
			animation-delay: 0.8s;
			-webkit-animation-delay: 0.8s;
		}
	}

	&:not(.active) .pxl-search-form .pxl-searchform-divider {
		webkit-animation-name: PXLfadeOutMove;
		animation-name: PXLfadeOutMove;
		-webkit-animation-duration: 0.7s;
		animation-duration: 0.7s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		visibility: visible;
	}
}

.pxl-anchor-divider {
	overflow: hidden;
	width: 30px;
	height: 21px;
	cursor: pointer;
	position: relative;

	.pxl-icon-line {
		height: 3px;
		position: absolute;
		right: 0;
		border-radius: 3px;

		&:before,
		&:after {
			content: '';
			position: absolute;
			height: 100%;
			top: 0;
			right: 0;
			bottom: 0;
			right: 0;
			background: #000000;
			opacity: 1;
			width: 100%;
			@include border-radius(3px);
		}

		&:before {
			@include transform(translate3d(100%, 0, 0));
		}

		&:after {
			@include transform(translate3d(0, 0, 0));
		}

		&.pxl-icon-line1 {
			top: 0;
			width: 22px;
		}

		&.pxl-icon-line2 {
			top: 50%;
			width: 100%;
			transform: translate(0, -50%);
		}

		&.pxl-icon-line3 {
			width: 16px;
			bottom: 0;
		}
	}
}

.pxl-anchor-button {
	cursor: pointer;

	&.style-2 {
		height: 46px;
		width: 46px;
		border-radius: 46px;
		border: 2px solid rgba(#cfcfcf, 0.45);
		background-color: rgba(#535254, 0.45);
		display: inline-flex;
		justify-content: center;
		align-items: center;

		.pxl-anchor-divider {
			height: 16px;
			width: 25px;

			.pxl-icon-line {
				height: 2px;

				&:before,
				&:after {
					background-color: #fff;
				}

				&.pxl-icon-line1 {
					width: 19px;
				}

				&.pxl-icon-line2 {
					top: 7px;
				}

				&.pxl-icon-line3 {
					width: 14px;
				}
			}
		}
	}

	.pxl-anchor-theme-style1 {
		position: relative;
		width: 29px;
		height: 26px;
		cursor: pointer;

		span {
			position: absolute;
			width: 13px;
			height: 12px;
			border: 2px solid #141515;
			@include transition(all 300ms linear 0ms);

			&:nth-child(1) {
				top: 0;
				left: 0;
				border-radius: 13px 0 0 0;
			}

			&:nth-child(2) {
				top: 0;
				right: 0;
				border-radius: 0 13px 0 0;
			}

			&:nth-child(3) {
				bottom: 0;
				right: 0;
				border-radius: 0 0 13px 0;
			}

			&:nth-child(4) {
				bottom: 0;
				left: 0;
				border-radius: 0 0 0 13px;
			}
		}

		&:hover {
			span {
				border-color: $primary_color;
			}
		}
	}

	&.type-icon {
		display: inline-flex;
		align-items: center;
		color: #2c2c2b;
		@include transition(all 300ms linear 0ms);

		&:hover {
			color: $primary_color;
		}

		label {
			font-size: 19px;
			font-weight: 600;
			cursor: pointer;
		}

		i {
			font-size: 20px;
		}
	}
}

.pxl-anchor-divider:hover .pxl-icon-line,
.pxl-anchor-button.type-menu-hidden:hover .pxl-icon-line,
.pxl-menu-hidden-sidebar .pxl-menu-button:hover .pxl-icon-line {
	&.pxl-icon-line1 {
		&:before {
			@include transform(translate3d(0, 0, 0));
			opacity: 1;
			@include transition(transform .8s cubic-bezier(.215, .61, .355, 1) 460ms, opacity .8s cubic-bezier(.215, .61, .355, 1) 460ms);
		}

		&:after {
			@include transform(translate3d(-36px, 0, 0));
			opacity: 0;
			@include transition(transform .6s cubic-bezier(.165, .84, .44, 1) 0s, opacity .6s cubic-bezier(.165, .84, .44, 1) 0s);
		}
	}

	&.pxl-icon-line2 {
		&:before {
			@include transform(translate3d(0, 0, 0));
			opacity: 1;
			@include transition(transform .8s cubic-bezier(.215, .61, .355, 1) 620ms, opacity .8s cubic-bezier(.215, .61, .355, 1) 620ms);
		}

		&:after {
			@include transform(translate3d(-36px, 0, 0));
			opacity: 0;
			@include transition(transform .6s cubic-bezier(.165, .84, .44, 1) 160ms, opacity .6s cubic-bezier(.165, .84, .44, 1) 160ms);
		}
	}

	&.pxl-icon-line3 {
		&:before {
			@include transform(translate3d(0, 0, 0));
			opacity: 1;
			@include transition(transform .8s cubic-bezier(.215, .61, .355, 1) 780ms, opacity .8s cubic-bezier(.215, .61, .355, 1) 780ms);
		}

		&:after {
			@include transform(translate3d(-36px, 0, 0));
			opacity: 0;
			@include transition(transform .6s cubic-bezier(.165, .84, .44, 1) 320ms, opacity .6s cubic-bezier(.165, .84, .44, 1) 320ms);
		}
	}
}

.admin-bar {

	#pxl-header-elementor .pxl-header-elementor-sticky.pxl-header-fixed,
	#pxl-search-popup,
	.pxl-hidden-panel-popup {
		top: 32px;

		@media screen and (max-width: 782px) {
			top: 46px;
		}

		@media screen and (max-width: 600px) {
			top: 0;
		}
	}

	.pxl-header-menu {
		top: 32px;

		@media screen and (max-width: 782px) {
			top: 46px;
		}
	}
}

@-moz-keyframes PXL_Header_SlideDown {
	0% {
		margin-top: -150px;
	}

	100% {
		margin-top: 0
	}
}

@-ms-keyframes PXL_Header_SlideDown {
	0% {
		margin-top: -150px;
	}

	100% {
		margin-top: 0
	}
}

@-webkit-keyframes PXL_Header_SlideDown {
	0% {
		margin-top: -150px;
	}

	100% {
		margin-top: 0
	}
}

@keyframes PXL_Header_SlideDown {
	0% {
		margin-top: -150px;
	}

	100% {
		margin-top: 0
	}
}

/* Header Left Sidebar */
.px-header--left_sidebar {

	&.px-header-sidebar-style1,
	&.px-header--left_shadow {
		@include box-shadow(0px 0 18px rgba(#6d6d6d, 0.13));
	}

	&.px-header-sidebar-style2 {
		overflow: hidden;

		.pxl-header-content {
			overflow-y: scroll;
			height: 100vh;
			width: calc(100% + 60px);
			margin: 0 -30px;
		}
	}
}

@media #{$max-lg2} {
	.bd-px-header--left_sidebar:not(.elementor-editor-active) {
		.elementor-section.elementor-section-boxed>.elementor-container {
			max-width: 1130px;
		}
	}
}

@media #{$min-xl} {
	.bd-px-header--left_sidebar {
		.pxl-content-wrap.no-sidebar {
			margin-left: 0;
			margin-right: 0;
		}

		&:not(.elementor-editor-active) {
			#pxl-header-elementor .px-header--left_sidebar {
				width: 300px;
				position: fixed;
				top: 0;
				left: 0;
				height: 100vh;
				background-color: #fff;
			}

			#pxl-main,
			#pxl-footer-elementor,
			#pxl-page-title-elementor {
				padding-left: 300px;

				.elementor>.elementor-section {
					left: 0 !important;
					right: 0 !important;
					width: 100% !important;
				}
			}

			#pxl-footer-elementor .container {
				max-width: 100%;
			}

			&.pxl-footer-fixed {
				#pxl-wapper #pxl-main {
					margin-bottom: 0 !important;
				}

				#pxl-footer-elementor {
					position: static;
				}
			}
		}
	}

	.admin-bar.bd-px-header--left_sidebar:not(.elementor-editor-active) #pxl-header-elementor .px-header--left_sidebar {
		top: 32px;
	}
}

  
  