Viewing File: /home/maglabs/etascom/wp-content/themes/agenzio/assets/scss/_layout.scss
// Start Main
//--------------------------------------------------
#pxl-wapper {
@media #{$min-xl} {
.container {
max-width: 1320px;
width: 100%;
}
}
@media #{$max-lg} {
.container {
max-width: 100%;
}
}
.elementor-widget:not(:last-child) {
margin-bottom: 0;
}
@media #{$max-md} {
#pxl-sidebar-area {
margin-top: 60px;
}
}
@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.elementor-column-gap-extended {
margin: 0 -15px;
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-wapper .elementor-top-section:not(.elementor-section-full_width) .elementor-section.elementor-inner-section.pxl-inner-section-maxwidth > .elementor-container {
max-width: 1170px !important;
margin: auto;
}
#pxl-main {
margin: 83px 0 120px 0;
min-height: calc(100vh - 606px);
@media (max-width: 991px) {
margin: 70px 0;
}
@media #{$max-lg} {
overflow-x: clip;
}
@media #{$max-md2} {
> .elementor-container {
padding: 0 15px;
}
}
}
.pxl-wapper {
overflow: clip;
}
.elementor-page:not(.single-post):not(.single-product) {
#pxl-main {
padding-top: 0;
padding-bottom: 0;
}
}
.elementor-page.single-product .woocommerce-Tabs-panel > .elementor {
margin: 0 -15px;
}
@media #{$min-xl} {
body:not(.elementor-editor-active) .pxl-row-scroll-fixed {
> .elementor-container {
align-items: flex-start;
justify-content: space-between;
}
.pxl-column-sticky {
position: sticky;
}
}
}
@media #{$max-lg} {
body:not(.elementor-editor-active) .pxl-row-scroll-fixed .pxl-column-sticky {
top: 0 !important;
}
}
body.elementor-editor-active .pxl-row-scroll-fixed .pxl-column-sticky {
top: 0 !important;
}
.elementor-page:not(.single-post):not(.single-product) {
#pxl-content-area.col-12, #pxl-footer-elementor .row > .col-12 {
padding: 0;
min-height: 0px;
}
}
@media #{$mm-md2} {
.elementor-page:not(.single) #pxl-content-area.col-12 {
padding-left: 15px;
padding-right: 15px;
}
}
.single-post .pxl-item--excerpt {
> .elementor {
margin: 0 -15px;
}
}
.pxl-bg-color-full {
z-index: 1;
.pxl-section-overlay-color {
z-index: -1;
content: '';
background-color: #070f01;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
@include transition(all 300ms linear 0ms);
}
}
.pxl-bg-color-skew {
z-index: 1;
.pxl-section-overlay-color {
z-index: -1;
content: '';
background-color: #080808;
position: absolute;
top: 0;
left: 6px;
right: 6px;
bottom: 0;
transform: skewX(-12deg);
max-width: 1160px;
margin: auto;
@include transition(all 200ms linear 0ms);
}
}
// Start Page Title
//--------------------------------------------------
#pxl-page-title-elementor {
background-color: #fff;
@media #{$max-lg} {
overflow: hidden;
}
}
#pxl-page-title-default {
background-color: #000;
padding: 150px 0;
text-align: center;
@media #{$max-sm} {
padding: 90px 0;
}
.pxl-page-title {
font-family: Outfit;
font-size: 80px;
font-style: normal;
font-weight: 500;
letter-spacing: -3.2px;
line-height: 1.1;
color: #fff;
margin: 0;
word-break: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
@media (max-width: 1024px) {
font-size: 70px;
}
@media (max-width: 880px) {
font-size: 65px;
}
@media (max-width: 767px) {
font-size: 45px;
}
}
.ptitle-col-right {
justify-content: flex-end;
display: inline-flex;
@media #{$max-sm} {
justify-content: center;
}
}
}
.pxl-breadcrumb-wrap {
text-align: center;
}
.pxl-breadcrumb {
display: inline-flex;
flex-wrap: wrap;
margin: 0;
list-style: none;
text-align: center;
align-items: center;
justify-content: center;
font-size: 16px;
font-style: normal;
font-weight: 600;
letter-spacing: -0.32px;
color: rgba(#fff,0.5);
margin-top: 35px;
text-transform: capitalize;
@media (max-width: 676px) {
font-size: 15px;
}
span.breadcrumb-entry {
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
border: 1px solid $primary_color;
border-radius: 100px;
padding: 11px 30px;
color: #fff;
@media (max-width: 676px) {
padding: 6px 25px;
}
}
a {
color: inherit;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #3A3A3A;
border-radius: 100px;
padding: 11px 30px;
@media (max-width: 676px) {
padding: 6px 25px;
}
&:hover {
color: #fff;
border-color: $primary_color;
}
}
}
body.single .pxl-breadcrumb {
li:not(:first-child):not(:last-child) {
display: none;
}
}
// End Page Title
//--------------------------------------------------
// Start Footer
//--------------------------------------------------
#pxl-footer-default {
padding: 30px 0;
background-color: $link_color;
text-align: center;
color: #9C9C9C;
font-family: "Inter", Sans-serif;
font-size: 18px;
font-weight: 400;
a {
color: #fff;
font-weight: 700;
&:hover {
color: $primary_color;
}
}
}
.pxl-scroll-top {
width: 55px;
height: 55px;
position: fixed;
bottom: 20px;
right: 40px;
line-height: 46px;
@include border-radius(50px);
z-index: 9999;
color: #fff;
text-align: center;
@include transform(rotate(-90deg));
font-size: 20px;
opacity: 0;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 2px rgba(#000, 0.3);
@media #{$max-md} {
right: 25px;
}
@media (max-width: 767px) {
width: 45px;
height: 45px;
font-size: 18px;
}
&:before {
content: '';
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
z-index: -1;
background-color: #fff;
border-radius: 100%;
}
.pxl-scroll-progress-circle {
position: absolute;
top: 0;
left: 0;
z-index: -1;
transform: rotate(90deg);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
path {
fill: none;
stroke: $primary_color;
stroke-width: 4;
box-sizing: border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
}
i {
@include transform(rotate(90deg));
color: $primary_color;
}
&.pxl-on {
bottom: 40px;
opacity: 1;
visibility: visible;
@media #{$max-md} {
bottom: 25px;
}
}
&:hover, &:focus {
color: #fff;
}
}
@keyframes pxl_scroll_top_effect {
0%{
transform:translateX(3px)
}
100%{
transform:translateX(-3px)
}
}
@keyframes pxl_scroll_bottom_effect {
0%{
transform:translateY(-3px)
}
100%{
transform:translateY(3px)
}
}
@media #{$max-md2} {
.section-bg-bl-lg {
background-position: left bottom !important;
}
}
#pxl-footer-elementor {
.pxl-footer-hide {
display: none !important;
}
.footer-elementor-inner > .container {
max-width: 100%;
}
}
.pxl-footer-fixed {
#pxl-footer-elementor {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: -1;
@media #{$max-lg} {
position: static;
overflow: hidden;
}
}
#pxl-header-elementor, #pxl-page-title-elementor {
background-color: $body_bg_color_hex;
}
#pxl-main {
background-color: $body_bg_color_hex;
@media #{$max-lg} {
margin-bottom: 0 !important;
}
}
}
// 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: 1200px;
padding: 0 15px;
margin: auto;
}
}
&.single-pxl-template {
background-color: rgba(0,0,0,0.1);
}
.elementor-inner-section > .elementor-element-overlay > .elementor-editor-element-settings {
margin-left: 84px;
}
.elementor-inner-section .elementor-column .elementor-editor-element-settings {
margin-left: 12px;
}
.elementor-section-wrap.ui-sortable {
margin-top: 30px;
}
}
// 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, 0.12);
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(all .25s cubic-bezier(.645,.045,.355,1));
background-color: #fff;
}
&: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: "Caseicon";
font-size: 20px;
color: #fff;
margin: 0;
padding: 0;
line-height: normal;
position: absolute;
top: 50%;
display: block;
@include transform(translate(-50%, -50%));
opacity: 1;
left: 50%;
width: auto;
height: auto;
}
&.mfp-arrow-left:before {
content: "\f136";
}
&.mfp-arrow-right:before {
content: "\f14d";
}
}
}
@media #{$min-xl} {
.mfp-wrap .mfp-container {
padding: 0 120px;
}
}
}
@media #{$min-lg} {
body.blog , body.archive:not(.post-type-archive):not(.tax-product_cat):not(.tax-product_tag), body.single-post {
.pxl-content-wrap.no-sidebar .pxl-content-area {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
}
// Row Divider
//--------------------------------------------------
.pxl-row-divider-active {
z-index: 1;
> .elementor-container {
z-index: 2;
}
.pxl-row-angle {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100px;
}
}
.pxl-row-divider-wave-animation-top .pxl-row-angle {
top: -1px;
@include transform(scaleY(-1));
height: 150px;
}
.pxl-row-divider-wave-animation-bottom .pxl-row-angle {
bottom: -1px;
height: 150px;
}
.pxl-row-divider-angle-top {
.pxl-row-angle {
top: -1px;
@include transform(scaleX(-1) scaleY(-1));
}
}
.pxl-row-divider-angle-top-right {
.pxl-row-angle {
top: -1px;
@include transform(scaleX(1) scaleY(-1));
}
}
.pxl-row-divider-angle-bottom {
.pxl-row-angle {
bottom: -1px;
}
}
.pxl-row-divider-angle-bottom-left {
.pxl-row-angle {
bottom: -1px;
@include transform(scaleX(-1));
}
}
.pxl-row-divider-angle-top-bottom {
.pxl-row-angle-top {
top: -1px;
@include transform(scaleX(-1) scaleY(-1));
}
.pxl-row-angle-bottom {
bottom: -1px;
}
}
.pxl-row-divider-angle-top-bottom-left {
.pxl-row-angle-top {
top: -1px;
@include transform(scaleX(1) scaleY(-1));
}
.pxl-row-angle-bottom {
bottom: -1px;
@include transform(scaleX(-1));
}
}
.pxl-row-divider-curved-top .pxl-row-angle {
top: -1px;
path {
fill-rule: evenodd;
}
}
.pxl-row-divider-curved-bottom .pxl-row-angle {
bottom: -1px;
@include transform(scaleY(-1));
path {
fill-rule: evenodd;
}
}
.pxl-row-divider-vertical1 {
.pxl-divider-vertical {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1490px;
margin: 0 auto;
> div {
background-color: #303233;
position: absolute;
width: 1px;
height: 100%;
top: 0;
}
.pxl-section-line1 {
left: 0;
}
.pxl-section-line2 {
left: 20%;
}
.pxl-section-line3 {
left: 40%;
}
.pxl-section-line4 {
left: 60%;
}
.pxl-section-line5 {
left: 80%;
}
.pxl-section-line6 {
right: 0;
}
}
}
&.pxl-row-divider-rounded-top {
&:before, &:after {
content: '';
position: absolute;
height: 53px;
background-color: #fff;
top: -53px;
width: 50%;
@media #{$max-sm} {
top: -30px;
height: 30px;
}
}
&:before {
left: 0;
border-radius: 28px 53px 0 0;
@media #{$max-sm} {
border-radius: 15px 30px 0 0;
}
}
&:after {
right: 0;
border-radius: 53px 28px 0 0;
@media #{$max-sm} {
border-radius: 30px 15px 0 0;
}
}
}
.pxl-curved-arrow {
position: absolute;
height: 48px;
z-index: 99;
left: 50%;
@include transform(translate(-50%, 0));
&.pxl-curved-arrow-top {
top: -48px;
}
&.pxl-curved-arrow-bottom {
bottom: -48px;
transform: translate(-50%, 0) scaleY(-1);
}
}
.pxl-curved-arrow-inner-top, .pxl-curved-arrow-inner-bottom {
height: 48px;
position: absolute;
left: 50%;
@include transform(translate(-50%, 0));
}
.pxl-curved-arrow-inner-top {
top: 0;
transform: translate(-50%, 0) scaleY(-1);
}
.pxl-curved-arrow-inner-bottom {
bottom: 0;
}
.pxl-divider-border {
position: absolute;
top: 62px;
left: 70px;
right: 70px;
bottom: 52px;
@media #{$max-lg} {
left: 15px;
right: 15px;
}
.pxl-divider-border-top, .pxl-divider-border-bottom {
background-color: #fff;
height: 12px;
position: absolute;
width: 100%;
@media #{$max-sm} {
height: 8px;
}
&:before, &:after {
content: '';
height: 94px;
background-color: #fff;
width: 12px;
position: absolute;
@media #{$max-sm} {
width: 8px;
}
}
&:before {
left: 0;
}
&:after {
right: 0;
}
}
.pxl-divider-border-top {
top: 0;
&:before, &:after {
top: 0;
}
}
.pxl-divider-border-bottom {
bottom: 0;
&:before, &:after {
bottom: 0;
}
}
}
// Row Particles
//--------------------------------------------------
.pxl-row-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
// Site Loader
//--------------------------------------------------
@keyframes pxl_loader_digital1 {
0%{left:20%;}
50%{left:50%;}
100%{left:20%;}
}
@keyframes pxl_loader_digital2 {
0%{left:80%;}
50%{left:50%;}
100%{left:80%;}
}
@keyframes pxl_folding {
0%,
10% {
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes pxl_loader_prixClipFix {
0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}
@keyframes pxl_loader_anim {
0% {
box-shadow: 20px -10px, 40px 10px, 60px 0px;
}
25% {
box-shadow: 20px 0px, 40px 0px, 60px 10px;
}
50% {
box-shadow: 20px 10px, 40px -10px, 60px 0px;
}
75% {
box-shadow: 20px 0px, 40px 0px, 60px -10px;
}
100% {
box-shadow: 20px -10px, 40px 10px, 60px 0px;
}
}
@keyframes pxl_loaderFlash {
0% {
background-color: rgba($primary_color_hex, 0.28);
box-shadow: 32px 0 rgba($primary_color_hex, 0.28), -32px 0 $primary_color;
}
50% {
background-color: $primary_color;
box-shadow: 32px 0 rgba($primary_color_hex, 0.28), -32px 0 rgba($primary_color_hex, 0.28);
}
100% {
background-color: rgba($primary_color_hex, 0.28);
box-shadow: 32px 0 $primary_color, -32px 0 rgba($primary_color_hex, 0.28);
}
}
@keyframes pxl_animloader {
50% {
transform: scale(1) translate(-50%, -50%);
}
}
@keyframes pxl_loader_photography {
0% {
left: 0;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}
@-webkit-keyframes pxl_site_loading{
0%{
-webkit-transform:translate(0) scaleX(0);
transform:translate(0) scaleX(0)
}
30%{
-webkit-transform:translate(0) scaleX(1);
transform:translate(0) scaleX(1)
}
100%,80%{
-webkit-transform:translate(100%) scaleX(0);
transform:translate(100%) scaleX(0)
}
}
@keyframes pxl_site_loading{
0%{
-webkit-transform:translate(0) scaleX(0);
transform:translate(0) scaleX(0)
}
30%{
-webkit-transform:translate(0) scaleX(1);
transform:translate(0) scaleX(1)
}
100%,80%{
-webkit-transform:translate(100%) scaleX(0);
transform:translate(100%) scaleX(0)
}
}
@-webkit-keyframes pxl_reveal{
0%{
-webkit-transform:translateY(0);
transform:translateY(0)
}
80%{
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
100%{
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}
@keyframes pxl_reveal{
0%{
-webkit-transform:translateY(0);
transform:translateY(0)
}
80%{
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
100%{
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}
@keyframes pxl_loader_rotate1 {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes pxl_loader_rotate2 {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes pxl_loader_rotate3 {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
/* Site Loader */
/* Mouse Move Animation */
.banner_canvas {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.17;
z-index: 99999;
pointer-events: none;
mix-blend-mode: difference;
background-color: #fff;
}
.pxl-enable-cursor .pxl-drag-area {
cursor: none;
}
.pxl-cursor {
position: fixed;
width: 12px;
height: 12px;
background-color: #fff;
user-select: none;
pointer-events: none;
z-index: 10000;
@include border-radius(100%);
@include transform(scale(1));
transform-origin: center;
@include transition(transform 0.3s linear, opacity 0.2s linear);
&.active {
color: #FFF;
background-color: #{'rgba(var(--primary-color-rgb),0.5)'};
opacity: 1;
@include transform(scale(2));
}
&:not(.active) {
mix-blend-mode: difference;
}
&.none-follower {
&.active {
@include transform(scale(2.5));
}
}
&.hide {
opacity: 0;
}
}
.pxl-cursor-follower {
position: fixed;
width: 20px;
height: 20px;
background-color: rgba(166, 161, 130, 0.2);
user-select: none;
pointer-events: none;
z-index: 10000;
@include border-radius(100%);
@include transform(translate(2px, 2px));
transform-origin: center;
@include transition(0.4s transform linear, opacity 0.2s linear, background 0.2s linear, width 0.2s linear, height 0.2s linear);
&.active {
color: #FFF;
background-color: transparent;
opacity: 1;
width: 40px;
height: 40px;
&:before {
content: "";
position: absolute;
left: -10px;
top: -10px;
display: block;
width: 100%;
height: 100%;
background: transparent;
border: 1.5px dashed $primary_color;
@include border-radius(100%);
@include animation(pxl_spin 4s linear infinite);
@include transform(none);
transform-origin: unset;
}
&.video {
background-color: rgba(255, 255, 255, 0.6);
}
}
&:not(.active) {
mix-blend-mode: difference;
}
&.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));
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));
}
&.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: 70px;
height: 70px;
.pxl-overlay {
@include transform(scale(0.8));
}
.icon-left {
@include transform(translateX(-50px));
}
.icon-right {
@include transform(translateX(50px));
}
}
}
/* End Mouse Move Animation */
.elementor-editor-active.page-template-default {
#pxl-content-area {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
#pxl-sidebar-area {
display: none;
}
}
/* Cookie Policy */
.pxl-cookie-policy {
position: fixed;
bottom: 20px;
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: 40px;
}
&.pxl-hidden {
opacity: 0;
visibility: hidden;
bottom: 30px;
}
}
/* PXL Popup */
.pxl-popup--close {
&.style2 {
border: none;
width: 24px;
height: 24px;
background-color: transparent;
&:before, &:after {
background-color: #878787;
}
}
}
.pxl-popup {
position: fixed;
background-color: rgba(#000000, 0.43);
z-index: 99991;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
opacity: 0;
visibility: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.pxl-popup--content {
width: 100%;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
.pxl-popup--close {
border-width: 8px;
&:before, &:after {
background-color: #a7a7a7;
}
&:hover {
&:before, &:after {
background-color: #111;
}
}
}
&.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 ));
}
}
}
/* Section Overlay Image */
.pxl-section-overlay-image {
.pxl-overlay--image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
&.pxl-overlay--imageLeft {
right: auto;
}
&.pxl-overlay--imageRight {
right: 0;
left: auto;
}
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
&.pxl-custom--bgposition .pxl-overlay--image {
right: 140px;
left: 46%;
@media #{$max-md2} {
display: none;
}
}
}
/* End Section Overlay Image */
.pxl-section-effect-images {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
.pxl-item--image {
position: absolute;
}
}
body.rtl {
.pxl-cursor {
&.is-active.has-icon .pxl-cursor--icon:before {
content: "\f111";
}
&.is-active.has-icon-right .pxl-cursor--icon:before {
content: "\f110";
}
}
.pxl-cookie-policy {
padding-left: 58px;
padding-right: 24px;
@media #{$max-sm} {
padding-left: 25px;
padding-right: 25px;
}
.pxl-item--close {
right: auto;
left: 10px;
}
}
}
/* Start Page Popup */
.pxl-page-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
padding: 60px 0;
@include transition(all 200ms linear 0ms);
opacity: 0;
visibility: hidden;
@include transform(scale(0.85));
&.active {
opacity: 1;
visibility: visible;
@include transform(scale(1));
}
.pxl-popup--conent {
overflow-x: hidden;
overflow-y: scroll;
max-height: 80vh;
}
.pxl-popup--close {
position: absolute;
top: 30px;
right: 30px;
.pxl-close {
border-width: 0px;
}
@media #{$max-xl} {
top: 20px;
right: 20px;
.pxl-close {
border-width: 3px;
}
}
}
}
.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 */
/* Waves Animation */
.pxl-section-waves1 {
position: absolute;
width: 100%;
height: 140px;
bottom: 0px;
@media #{$max-sm} {
height: 80px;
}
}
.pxl-wave-parallax > use {
animation: pxl-move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
fill: #ebeef6;
}
.pxl-wave-parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
opacity: 0.5;
}
.pxl-wave-parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
opacity: 0.4;
}
.pxl-wave-parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
opacity: 0.3;
}
.pxl-wave-parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes pxl-move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
@media #{$mm-md1} {
body:not(.elementor-editor-active) .elementor .elementor-hidden-tablet {
position: absolute;
visibility: hidden;
opacity: 0;
display: block !important;
text-indent: -99999px;
}
}
@media #{$max-sm} {
body:not(.elementor-editor-active) .elementor .elementor-hidden-mobile {
position: absolute;
visibility: hidden;
opacity: 0;
display: block !important;
text-indent: -99999px;
}
}
/* Section Parallax */
.pxl-section-bg-parallax, .pxl-column-bg-parallax {
background-repeat: no-repeat;
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
body:not(.elementor-editor-active) .pxl-section-parallax-overflow {
> .elementor-background-overlay {
z-index: 2;
+ .pxl-section-bg-parallax, .pxl-column-bg-parallax {
z-index: 1;
}
}
&.elementor-top-section > .elementor-container {
z-index: 3;
}
}
.pxl-section-parallax-overflow, .pxl-section-overflow-hidden {
overflow: hidden !important;
}
.elementor-column.pxl-column-overflow-hidden-yes{
overflow: hidden !important;
}
// Section Zoom Point
.pxl-zoom-point-true {
z-index: 1;
}
.pxl-zoom-point-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.pxl-zoom-point {
width: 240px;
height: 240px;
position: absolute;
z-index: -1;
right: 0;
top: -240px;
margin: auto;
left: 0;
.pxl-item--overlay {
width: 100%;
height: 100%;
background-color: #151a25;
z-index: -1;
@include border-radius(240px);
@include transition(all .25s cubic-bezier(.3,.3,0,.8));
}
}
// Loader Site
@-webkit-keyframes pxl_bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes px_bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
.pxl-loader {
background-color: #232323;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
&.is-loaded {
opacity: 0;
visibility: hidden;
}
.pxl-loader-spinner {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
@include transform(translate(0, -50%));
text-align: center;
.pxl-inner-loader {
width: 120px;
height: 120px;
position: relative;
display: block;
margin: 0 auto;
transition: all 2s ease-out;
transform: scale(1);
&:hover {
transition: all 1s ease-in;
transform: scale(1.3);
}
// Smoke
.pufs {
top: 0;
right: 0;
left: 0;
bottom: 0;
display: block;
position: absolute;
> i {
font: normal normal normal 14px/1 FontAwesome;
display: block;
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
&:after {
content: "\f111";
height: 9px;
width: 9px;
position: relative;
border-radius: 100%;
display: block;
margin: 0 auto;
top: 5px;
font-size: 9px;
opacity: 0;
animation-name: puf-white;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-duration: $animationTime;
background-color: #fff;
}
@for $i from 1 through $pufCount {
$pufRatio: $i * 100 / $pufCount;
$animationTimeDelay: $animationTime * $pufRatio / 100;
&:nth-child(#{$i}) {
transform: rotate(#{$i * $intervalDegree}deg);
}
&:nth-child(#{$i}):after {
animation-delay: $animationTimeDelay;
@if $i % 2 == 0 {
margin-top: 1px;
} @else {
margin-top: -1px;
}
}
}
}
}
// Debug Mode
div:not(.pufs, .particles) {
@if ($debug == 1) {
border: 1px solid #fff;
}
}
.particles {
position: absolute;
display: block;
top: 0;
right: 0;
left: 0;
bottom: 0;
> i {
font: normal normal normal 14px/1 FontAwesome;
display: block;
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
&:after {
content: "";
height: 2px;
width: 2px;
position: relative;
border-radius: 100%;
display: block;
margin: 0 auto;
top: 5px;
font-size: 2px;
opacity: 0; // INITIAL STATE
margin-top: 0;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-duration: $animationTime;
background-color: #fff;
}
@for $i from 1 through $pufCount {
$pufRatio: $i * 100 / $pufCount;
$animationTimeDelay: $animationTime * $pufRatio / 100;
&:nth-child(#{$i}) {
transform: rotate(#{$i * $intervalDegree}deg);
}
&:nth-child(#{$i}):after {
animation-delay: $animationTimeDelay;
@if $i % 3 == 0 {
animation-name: particle;
} @else {
animation-name: particle-o;
}
}
}
}
}
}
.pxl-content-loader {
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 100;
position: absolute;
display: block;
align-content: center;
.pxl-loadding-text {
color: #fff;
text-align: center;
line-height: 1;
font-family: Outfit;
font-size: 60px;
font-style: normal;
font-weight: 500;
text-transform: uppercase;
}
}
}
}
.elementor > .pin-spacer {
width: 100% !important;
> .elementor-section {
max-width: 100% !important;
width: 100% !important;
left: 0 !important;
}
}
.elementor-editor-active {
#pxl-loadding {
display: none !important;
}
.pin-spacer > .elementor-element {
position: static !important;
height: auto !important;
max-height: 100% !important;
}
}
.pxl-section-fix-bottom {
z-index: 999;
}
.scroll-top-active > .elementor-section {
top: 0 !important;
left: 0 !important;
position: relative !important;
}
@media #{$max-lg2} {
.pxl-section-fix-bottom {
.pxl-section-overlay-color {
left: 0 !important;
right: 0 !important;
}
}
}
@media #{$max-xl} {
body:not(.elementor-editor-active) .pxl-hide-sr-lg {
}
}
@media #{$max-lg} {
body:not(.elementor-editor-active) .pxl-hide-sr-md {
display: none !important;
}
}
Back to Directory
File Manager