// Start Main
//--------------------------------------------------
#pxl-wapper {
	position: relative;
	@media #{$min-xl} {
		.container {
			max-width: 1326px;
      		width: 100%;
		}
	}
	@media #{$max-lg} {
		.container {
			max-width: 100%;
		}
	}
	.elementor-widget:not(:last-child) {
		margin-bottom: 0;
	}
	.pxl-sidebar-area {
		@media #{$max-lg} {
			margin-top: 100px;
		}
	}
	@media #{$min-lg} {
		.pxl-has-sidebar.pxl-sidebar-left {
			flex-direction: row-reverse;
		}
	}
	.elementor-top-section:not(.elementor-section-full_width) .elementor-section.elementor-inner-section > .elementor-container {
		margin: 0 -10px;
		max-width: inherit !important;
	}
	@media #{$max-lg} {
		.elementor-top-section > .elementor-column-gap-extended .elementor-inner-section > .elementor-column-gap-extended {
			margin-left: -15px;
			margin-right: -15px;
		}
	}
	.pxl-sidebar-left {
		@media #{$min-xl} {
			.pxl-content-area {
				padding-left: 12px;
			}
			.pxl-sidebar-area {
				padding-right: 12px;
			}
		}
	}
	.pxl-sidebar-right {
		@media #{$min-xl} {
			.pxl-content-area {
				padding-right: 12px;
			}
			.pxl-sidebar-area {
				padding-left: 12px;
			}
		}
	}
}
#pxl-main {
	padding: 120px 0;
	@media #{$max-lg} {
		padding: 100px 0;
	}
	.elementor-container .elementor-section.elementor-section-boxed > .elementor-container {
		&.elementor-column-gap-default {
			max-width: 1326px;
			margin: 0 auto;
		}
		&.elementor-column-gap-no {
			max-width: 1326px;
		}
	}
}
.single-service {
	#pxl-main {
		.elementor-section.elementor-section-boxed > .elementor-container {
			padding: 0;
		}
	}
}
.woocommerce #pxl-wapper #pxl-main {
	@media #{$min-xl} {
		.pxl-has-sidebar.pxl-sidebar-left {
			flex-direction: row-reverse;
		}
	}
	@media #{$max-lg} {
		.pxl-sidebar-area {
			margin-top: 80px;
		}
	}
}
@media #{$min-xl} {
    .pxl-row-scroll-fixed {
        > .elementor-container, &.e-con.e-flex > .e-con-inner {
            align-items: flex-start;
            justify-content: space-between;
        }
        .pxl-column-sticky {
            position: sticky;
            top: 30px;
        }
    }
}

// Breadcrumb
//--------------------------------------------------
.pxl-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	max-width: 100%;
	a {
		position: relative;
		color: inherit;
		&:before {
			content: attr(data-hover);
			position: absolute;
			top: 0;
			left: 0;
			right: 100%;
			white-space: nowrap;
			background-color: $primary_color;
			-webkit-background-clip: text;
			-webkit-text-stroke: 0px;
			-webkit-text-fill-color: transparent;
		}
		&:after {
			content: '\00a0/\00a0';
			color: $body_color;
		}
		&:hover {
			color: $primary_color;
			&:before {
				right: 0;
			}
		}
	}
	li {
		position: relative;
		display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;
		-webkit-box-align: center;-ms-flex-align: center;align-items: center;
		font-size: 14px;
		font-weight: 600;
		color: $body_color;
		max-width: 100%;
		text-transform: uppercase;
		overflow: hidden;
		@extend .pxl-font-secondary;
		span {
			font-size: inherit;
			max-width: 100%;
			-ms-word-wrap: break-word;
			word-wrap: break-word;
		}
		&:last-child {
			color: $primary_color;
		}
	}
}

// Start Page Title
//--------------------------------------------------
#pxl-page-title-default {
	position: relative;
	padding: 133px 0;
	background-color: #F2F6FE;
	@media #{$max-md} {
		padding: 100px 0;
	}
	.container {
		position: relative;
		z-index: 99;
	}
	.pxl-page-title {
		margin: 0;
		max-width: 100%;
		-ms-word-wrap: break-word;
		word-wrap: break-word;
		@extend .pxl-h1-size;
	}
}
#pxl-page-title-shop {
	padding: 20px 0;
	.pxl-breadcrumb {
		justify-content: left;
	}
	+ #pxl-main{
		padding-top: 140px;
		@media #{$max-lg} {
			padding-top: 100px;
		}
	}
}
.error404 {
	.px-header--default section {
		background-color: transparent;
	}
	#pxl-main {
		padding: 0;
	}
	#pxl-content-main {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		text-align: center;
		padding: 100px 0 180px;
		@media #{$max-lg} {
			padding: 100px 0 120px;
		}
		.pxl-error-inner {
			margin: auto;
			.pxl-error-heading {
				font-size: 158px;
				line-height: 1.2025;
				color: $primary_color;
				margin-bottom: 0;
				@media #{$max-md} {
					font-size: 130px;
				}
				@media #{$max-sm} {
					font-size: 100px;
				}
			}
			.pxl-error-title {
				font-size: 52px;
				line-height: 1.423;
				max-width: 80%;
				margin: 0 auto 48px;
				@extend .pxl-h2-size;
				@media #{$max-sm} {
					max-width: 100%;
				}
			}
		}
	}
}
// Start Footer
//--------------------------------------------------
#pxl-footer-default {
	padding: 46.5px 0;
	text-align: center;
	background-color: #232323;
	color: #fff;
	font-weight: 400;
	a {
		color: inherit;
		font-weight: 600;
		@include text-decoration(1px underline transparent);
		&:hover {
			color: #FFF;
			@include text-decoration(1px underline #FFF);
		}
	}
}

.pxl-scroll-top {
	position: fixed;
	width: 48px;
	height: 48px;
	line-height: 48px;
	right: 25px;
	bottom: 25px;
	font-size: 16px;
	text-align: center;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	background-color: $body_color;
	cursor: pointer;
	@extend .pxl-item--flexct;
	@include border-radius(5px);
	@include transition(all 400ms ease-in-out);
	&:after {
		content: '';
		position: absolute;
		left: -10%;
		right: -10%;
		top: -30%;
		bottom: -10%;
		width: calc(100% + 20%);
		height: calc(100% + 45%);
		-webkit-clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 50% 92%, 0% 100%, 0% 30%);clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 50% 92%, 0% 100%, 0% 30%);
		background-color: $primary_color;
		z-index: -1;
		-webkit-transform-origin: top center;transform-origin: top center;
		@include transform(scaleY(0));
		@include transition(transform 400ms ease-in-out);
	}
	&:hover {
		&:after {
			-webkit-transform-origin: bottom center;transform-origin: bottom center;
			@include transform(scaleY(1));
		}
	}
	i {
		display: inline-block;
		@include transform(translateY(5px));
		@include transition(all 300ms ease-in-out);
	}
    a {
    	display: block;
    	width: 100%;
    	height: 100%;
    	color: $secondary_color;
    	&:hover, &:active, &:focus {
    		color: $secondary_color !important;
    	}
    }
	&.pxl-on {
		opacity: 1;
		visibility: visible;
		i {
			@include transform(translateY(0));
		}
	}
}

.pxl-footer-fixed {
	#pxl-footer-elementor {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		@media #{$max-lg} {
			position: static;
		}
	}
	#pxl-header-elementor {
		background-color: #fff;
	}
	#pxl-main {
		position: relative;
		z-index: 2;
		background-color: #fff;
		@media #{$max-lg} {
			margin-bottom: 0 !important;
		}
	}
}

/* Mouse Move Animation */
.pxl-enable-cursor .pxl-drag-area {
	* {
		cursor: none;
	}
}
.pxl-cursor {
	position: fixed;
	width: 1.5rem;
    height: 1.5rem;
	background-color: $primary_color;
	opacity: 0.35;
	user-select: none;
	pointer-events: none;
	z-index: 10000;
	@include border-radius(100%);
	@include transform(scale(1));
	@include transition(transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1));
	&.active {
		opacity: 0;
		@include transform(scale(3.6));
		@include box-shadow(0 0 8px 0 rgba(0, 0, 0, 0.7));
	}
	&.hide {
		opacity: 0;
	}
}
.pxl-cursor-follower {
	position: fixed;
	width: 12px;
	height: 12px;
	background-color: transparent;
	user-select: none;
	pointer-events: none;
	overflow: hidden;
	z-index: 10000;
	mix-blend-mode: difference;
	@include border-radius(100%);
	@include transition(width .5s cubic-bezier(0.19, 0.94, 0.336, 1), height .5s cubic-bezier(0.19, 0.94, 0.336, 1));
	&.active {
		width: 40px;
		height: 40px;
		&:before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			display: block;
			width: 40px;
			height: 40px;
			background: transparent;
			border: 1px dashed #FFFFFF;
			@include border-radius(100%);
			@include animation(pxl_spin 4s linear infinite);
		}
	}
	&.hide {
		opacity: 0;
	}
}

.pxl-cursor-drag {
	position: fixed;
	width: 40px;
	height: 40px;
	color: #FFF;
	opacity: 0;
	user-select: none;
	pointer-events: none;
	mix-blend-mode: difference;
	z-index: 1000;
	@extend .pxl-item--flexct;
	@include border-radius(100%);
	@include transform(scale(0.5));
	@include transform-origin(center);
	@include transition(all .08s linear);
	> * {
		display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;
	}
	&.active {
		opacity: 1;
		@include transform(scale(1));
	}
	&.vertical {
		@include transform(scale(0.5) rotate(90deg));
	}
	&.active.vertical {
		@include transform(scale(1) rotate(90deg));
	}
	&.hide {
		opacity: 0;
	}
	.pxl-overlay {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, .08);
		@include box-shadow(0 0 10px rgba(255, 255, 255, 0.4));
		@include border-radius(100%);
		@include transition(all .3s ease);
	}
	.icon {
		position: absolute;
		font-size: 16px;
		color: #FFF;
		z-index: 1;
		@include transition(all .3s ease);
		&.icon-left {
			left: -22px;
		}
		&.icon-right {
			right: -22px;
		}
	}
	&.clicked {
		width: 60px;
		height: 60px;
		.pxl-overlay {
			@include transform(scale(0.8));
		}
		.icon-left {
			@include transform(translateX(-30px));
		}
		.icon-right {
			@include transform(translateX(30px));
		}
	}
}
/* End Mouse Move Animation */

// Start Elementor Grid
//--------------------------------------------------
.elementor-editor-active {
	#pxl-header-default, #pxl-header-elementor, #pxl-page-title-default, #pxl-footer-elementor, .pxl-menu-primary .sub-menu, .pxl-menu-primary .children, #pxl-page-title-elementor {
		display: none;
	}
	&.single-footer, &.single-header {
		#pxl-main {
			max-width: 1326px;
			margin: auto;
		}
	}
}

// Lightbox Popup
//--------------------------------------------------
body {
    img.mfp-img {
        padding: 0 !important;
    }
    .mfp-fade.mfp-bg.mfp-ready {
        opacity: 0.85;
        background-color: #000;
    }
    .mfp-bottom-bar {
        margin-top: 0;
    }
    .mfp-wrap .mfp-container {
        .mfp-content {
            max-width: 1170px;
            position: static;
            .mfp-close {
                padding: 0;
                right: 0;
                text-align: center;
                top: -36px;
                width: 36px;
                height: 36px;
                @include border-radius(0);
                background: rgba(#fff, 1);
                cursor: pointer;
                opacity: 1;
             	font-size: 0px;
             	border: 9px solid transparent;
             	position: absolute;
             	&:before, &:after {
			        content: '';
			        position: absolute;
			        height: 2px;
			        width: 100%;
			        top: 50%;
			        left: 0;
			        margin-top: -1px;
			        transform-origin: 50% 50%;
			        @include transition(.2s cubic-bezier(.24,.74,.58,1));
			        background-color: #222;
			    }
			    &:before {
			        @include transform(rotate(45deg));
			    }
			    &:after {
			        @include transform(rotate(-45deg));
			    }
			    &:hover {
			        &:before, &:after {
			            @include transform(rotate(0deg));
			        }
			    }
            }
        }
        .mfp-iframe-scaler {
            position: relative;
            overflow: visible;
        }
        .mfp-arrow {
            background-color: $primary_color;
            width: 60px;
            height: 120px;
            opacity: 1;
            &:before, &:after {
                border: none;
            }
            &:before {
                font-family: "bootstrap-icons";
                font-size: 30px;
                color: #FFF;
                margin: 0;
                padding: 0;
                line-height: normal;
                position: absolute;
                top: 50%;
                display: block;
                opacity: 1;
                left: 50%;
                width: auto;
                height: auto;
                @include transform(translate(-50%, -50%));
            }
            &.mfp-arrow-left:before {
            	content: '\f12f';
            }
            &.mfp-arrow-right:before {
            	content: '\f138';
            }
        }
    }
    @media #{$min-xl} {
        .mfp-wrap .mfp-container {
            padding: 0 120px;
        }
    }
}

@media #{$min-lg} {
	body.blog , body.single-post {
		.pxl-content-wrap.no-sidebar .pxl-content-area {
			max-width: 1326px;
			margin-left: auto;
			margin-right: auto;
		}
	}
}

// Site Loader
//--------------------------------------------------
.pxl-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	&.style-text {
		@include transition(all 1s ease-in-out);
		.pxl-loader-inner {
			position: relative;
			width: 100%;
			height: 100%;
		}
		.preloader-inner {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 0 15px;
			text-align: center;
		}
		.loading-text {
			position: relative;
			display: inline-block;
			top: 50%;
			z-index: 1;
			@include transform(translateY(-50%));
			[data-splitting] {
				font-size: 10vmin;
				color: #FFFFFF;
				text-align: center;
				user-select: none;
				.char {
					position: relative;
					background: linear-gradient(
						-45deg,
						$secondary_color 45%,
						$primary_color 45%,
						$primary_color 50%,
						$primary_color 50%
						);
					background-size: 2em 3em;
					-webkit-background-clip: text;background-clip: text;
					-webkit-text-fill-color: transparent;
					@include animation(pxl_bg_pos 2s cubic-bezier(0.6, 0, 0, 1) infinite alternate);
					@include animation-delay(calc((var(--char-index)) * 0.1s));
					z-index: calc(var(--char-total) - var(--char-index));
				}
				+ .loader {
					width: calc(100% - 15px);
				}
			}
			.loader {
				position: relative;
				width: 50vmin;
				margin: 0 auto;
				border-radius: 10px;
				border: 4px solid transparent;
				padding: 1px;
				&:before {
					content:'';
					position: absolute;
					top: -4px;
					right: -4px;
					bottom: -4px;
					left: -4px;
					border: 1px solid #FFFFFF;
					@include border-radius(10px);
				}
				.loaderBar {
					position: absolute;
					top: 0;
					right: 100%;
					bottom: 0;
					left: 0;
					width: 0;
					background: #FFFFFF;
					@include border-radius(10px);
					@include animation(pxl_borderisBar 2s linear infinite);
				}
			}
		}
		.loading-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			.shape-wrap {
				position: relative;
				width: 100%;
				height: 100vh;
				background: #1A1A1A;
			}
			.svg-wrap {
				fill: #1A1A1A;
			}
		}
		&.hide {
			visibility: hidden;
			pointer-events: none;
			@include transform(translateY(-200%));
		}
	}
	&.style-tower {
		.pxl-loader-inner {
			@extend .pxl-middle;
		}
		background-image: -o-linear-gradient(310deg, #434343 0%, black 100%);background-image: linear-gradient(140deg, #434343 0%, black 100%);
		&:before, &:after {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include transition(1s cubic-bezier(0.858, 0.01, 0.068, 0.99));
		}
		&:before {
			background-color: $heading_color;
			z-index: 4;
		}
		&:after {
			background-color: $primary_color;
			mix-blend-mode: difference;
			z-index: 3;
			@include transition-delay(0.13s);
		}
		.pxl-loader-inner {
			z-index: 5;
		}
		.preloader-inner {
			display: -webkit-box;display: -ms-flexbox;display: flex;
			-webkit-box-align: center;-ms-flex-align: center;align-items: center;
			-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
			height: 100%;
			margin: auto;
			perspective:800px;
			visibility: hidden;
			@include transform(scale(0.8));
			@media #{$max-lg} {
				@include transform(scale(0.7));
			}
			@media #{$max-md} {
				@include transform(scale(0.6));
			}
			@media #{$max-sm} {
				@include transform(scale(0.5));
			}
			@media #{$max-xs} {
				@include transform(scale(0.4));
			}
		}
		.scene {
			display: -webkit-box;display: -ms-flexbox;display: flex;
			-webkit-box-align: center;-ms-flex-align: center;align-items: center;
			-ms-flex-pack: distribute;justify-content: space-around;
			width: 80%;
			height: 100%;
			-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
		}
		.cubes {
			-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
		}
		.cube {
			position: relative;
			width: 160px;
			height: 8px;
			margin-bottom: 15px;
			-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
			.face {
				position: absolute;
				left: 0;
				top: 0;
				background: #000000;
			}
			.face--top {
				background: rgba(25,25,25, 1);
			}
			.face--bottom {
				@include box-shadow(0px 10px 40px rgba(#000000, 0.8));
			}
			.face--front {
				width: 160px;
				height: 8px;
				@include transform(translateZ(calc(#{160px}/2)));
			}
			.face--back {
				width: 160px;
				height: 8px;
				@include transform(translateZ(calc(#{160px}/2 *-1)) rotateY(180deg));
			}
			.face--left {
				width: 160px;
				height: 8px;
				@include transform(translateX(calc(#{160px}/2 *-1)) rotateY(-90deg));
			}
			.face--right {
				width: 160px;
				height: 8px;
				@include transform(translateX(calc(#{160px} - #{160px}/2)) rotateY(90deg));
			}
			.face--top {
				width: 160px;
				height: 160px;
				@include transform(translateY(calc(#{160px}/2 *-1)) rotateX(90deg));
			}
			.face--bottom {
				width: 160px;
				height: 160px;
				@include transform(translateY(calc(#{8px} - #{160px}/2)) rotateX(-90deg));
			}
		}
		.cube-ring {
			position: absolute;
			top: 0;
			left: 0;
			background: transparent;
			width: calc(#{160px} * 1.5);
			height: calc(#{160px} * 1.5);;
			-webkit-box-shadow: 0px 0px 50px #{'rgba(var(--primary-color-rgb),0.6)'},0px 0px 60px #{'rgba(var(--primary-color-rgb),0.6)'} inset;box-shadow: 0px 0px 50px #{'rgba(var(--primary-color-rgb),0.6)'},0px 0px 60px #{'rgba(var(--primary-color-rgb),0.6)'} inset;
			@include transform-origin(center center);
			@include transform(translateX(calc( (#{calc(#{160px} * 1.5)} - #{160px})/2 * -1  )) translateY(calc( (#{calc(#{160px} * 1.5)} - #{8px})/2 * -1 )) rotateX(90deg));
		}
		.cube-ring__rect-inner {
			stroke-width: 6px;
			stroke: $primary_color;
		}
		.cube-ring__rect-outer {
			stroke-width: 2px;
			stroke: $primary_color;
		}
		&.hide {
			width: 0%;
			pointer-events: none;
			@include transition-delay(0.26s);
			&:before, &:after {
				@include transform(translateX(-105%));
			}
			.pxl-loader-inner {
				opacity: 0;
				visibility: hidden;
				@include transition-delay(0.18s);
			}
		}
	}
}

// Subscribe Popup
//--------------------------------------------------
/* Cookie Policy */
.pxl-cookie-policy {
	position: fixed;
	bottom: 30px;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 570px;
	background-color: #fff;
	@include border-radius(57px);
	padding: 17px 58px 17px 24px;
	@include box-shadow(0 8px 8px rgba(#1d1b4c, 0.08));
	font-size: 15px;
	color: #111013;
	z-index: 9999;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	@include transition(all .25s cubic-bezier(.645,.045,.355,1));
	opacity: 0;
	visibility: hidden;
	@media #{$max-sm} {
		max-width: 290px;
		padding-left: 25px;
		padding-right: 25px;
		@include border-radius(20px);
		display: none;
	}
	a {
		font-weight: 700;
		text-decoration: underline;
		color: inherit;
		text-underline-offset: 2px;
		margin: 0 4px;
		white-space: nowrap;
		&:hover {
			text-decoration: none;
			color: $primary_color;
		}
	}
	.pxl-item--icon {
		min-width: 20px;
		img {
			max-height: 20px;
		}
	}
	.pxl-item--close {
		position: absolute;
		top: 50%;
		right: 10px;
		@include transform(translate(0, -50%));
		border-width: 12px;
		&:before, &:after {
			height: 1px;
		}
		@media #{$max-sm} {
			top: 10px;
			@include transform(translate(0, 0%));
		}
	}
	&.pxl-active {
		opacity: 1;
		visibility: visible;
		bottom: 60px;
	}
	&.pxl-hidden {
		opacity: 0;
		visibility: hidden;
		bottom: 30px;
	}
}

/* Pxl Popup */
.pxl-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(27, 27, 27, 0.50);
	-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
	display: -webkit-box;display: -ms-flexbox;display: flex;
	-ms-flex-wrap: wrap;flex-wrap: wrap;
	-webkit-box-align: center;-ms-flex-align: center;align-items: center;
	-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
	opacity: 0;
	visibility: hidden;
	z-index: 99991;
	@extend .pxl-user-select;
	@include transition(all .25s cubic-bezier(.645,.045,.355,1));
	.pxl-popup--content {
		width: 100%;
		@include transition(all .25s cubic-bezier(.645,.045,.355,1));
	}
	.pxl-popup--close {
		width: 44px;
		height: 44px;
		background-color: transparent;
		&:before, &:after {
			background-color: #8F9BAD;
		}
		&:hover {
			&:before, &:after {
				background-color: $primary_color;
			}
		}
	}
	&.pxl-effect-zoom {
		.pxl-popup--content {
			@include transform(scale(0));
		}
	}
	&.pxl-effect-fade-slide {
		.pxl-popup--content {
			@include transform(translateY(-20px) perspective( 600px ) rotateX( 14deg ));
		}
	}
	&.pxl-active {
		opacity: 1;
		visibility: visible;
		&.pxl-effect-zoom .pxl-popup--content {
			@include transform(scale(1));
		}
		&.pxl-effect-fade-slide .pxl-popup--content {
			@include transform(translateY(0) perspective( 600px ) rotateX( 0 ));
		}
	}
}

/* Start Page Popup */
.pxl-page-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background-color: $background_color;
	display: -webkit-box;display: -ms-flexbox;display: flex;
	-ms-flex-wrap: wrap;flex-wrap: wrap;
	-webkit-box-align: center;-ms-flex-align: center;align-items: center;
	-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
	padding: 60px 0;
	opacity: 0;
	visibility: hidden;
	@include transform(scale(0.85));
	@include transition(all 200ms linear 0ms);
	&.active {
		opacity: 1;
		visibility: visible;
		@include transform(scale(1));
	}
	.pxl-popup--conent {
		overflow-x: hidden;
		overflow-y: scroll;
		max-height: 80vh;
		&::-webkit-scrollbar {
			width: 4px;
		}
		&::-webkit-scrollbar-thumb {
			background: $primary_color;
			@include border-radius(30px);
		}
		&::-webkit-scrollbar-track {
			background-color: $secondary_color;
		}
	}
	.pxl-popup--close {
		position: absolute;
		top: 30px;
		right: 30px;
        width: 40px;
        height: 40px;
		background-color: $primary_color;
		.pxl-icon-close {
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
            background-color: transparent;
            &:before, &:after {
                background-color: rgba(#fff, 0.9);
            }
        }
		@media #{$max-xl} {
	        top: 20px;
			right: 20px;
	    }
	}
}
.admin-bar .pxl-page-popup {
	top: 32px;
	@media screen and (max-width: 782px) {
		top: 46px;
	}
	@media screen and (max-width: 600px) {
		top: 0;
	}
}
/* End Page Popup */
