// Grid
//--------------------------------------------------
.pxl-grid {
    .pxl-grid-masonry {
        position: relative;
    }
    .grid-sizer {
        z-index: -1;
        display: none;
    }
    .pxl-load-more {
        text-align: center;
        padding: 0 15px;
    }
    @media #{$min-lg} {
        .col-lg-20-pxl {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
        .col-lg-40-pxl {
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
        }
    }
    @media #{$min-xl} {
        .col-xl-20-pxl {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
        .col-xl-40-pxl {
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
        }
    }
    &.pxl-portfolio-grid-layout1{
        .pxl-grid-inner{
            margin-right: -8px;
            margin-left: -8px;
            .pxl-grid-item {
                padding: 0 8px;
            }
        }
    }
}

.elementor-editor-active .grid-sizer {
    display: none;
}

// Elementor - Column Settings
//--------------------------------------------------
.pxl-col-align-start {
    > .elementor-widget-wrap {
        justify-content: flex-start;
    }
    .elementor-inner-section > .elementor-container {
        margin-left: 0;
    }
}
.pxl-col-align-center {
    > .elementor-widget-wrap {
        justify-content: center;
    }
}
.pxl-col-align-end {
    > .elementor-widget-wrap {
        justify-content: flex-end;
    }
    .elementor-inner-section > .elementor-container {
        margin-right: 0;
    }
}

// Start Swiper Carousel
//--------------------------------------------------
.pxl-carousel-inner {
    overflow: hidden;
}
.pxl-swiper-container {
    margin: 0 -15px;
    position: relative;
    overflow: hidden;
}
.pxl-swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.pxl-swiper-slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: auto;
    height: 100%;
    position: relative;
    padding: 0 15px;
}

.pxl-swiper-arrow {
    font-size: 15px;
    color: #1C2539;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    z-index: 2;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-color: $link_color_hover;
    border: none;
    @include border-radius(70px);
    @include transition(all 300ms linear 0ms);
    cursor: pointer;
    &:hover {
        background-color: $link_color;
        @include box-shadow(none);
        @include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
    }
    &.swiper-button-disabled {
        cursor: not-allowed;
    }
    &.pxl-mouse-effect {
        height: 100%;
        width: 140px;
        position: absolute;
        top: 0;
        margin: 0;
        opacity: 0;
        &.pxl-swiper-arrow-next {
            right: -120px;
        }
        &.pxl-swiper-arrow-prev {
            left: -120px;
        }
    }
}

.pxl-swiper-arrow-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.pxl-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    .pxl-swiper-current-slide, .pxl-swiper-total-slides {
        font-size: 18px;
        font-weight: 700;
        color: #cccabf;
        @extend .ft-theme-default;
        margin: 0 14px;
        &:before {
            content: '0';
        }
    }
    .pxl-swiper-current-slide {
        color: #0a1316;
    }
}

.pxl-swiper-dots {
    &.style-1 {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background-color: #E3E3E3;
        @include border-radius(5px);
        margin-top: 80px;
        overflow: hidden;
        @media (max-width: 991px) {
            margin-top: 50px;
        }
        @media (max-width: 575px) {
            margin-top: 30px;
        }
        &.pxl-swiper-pagination-bullets {
            span {
                cursor: pointer;
                width: 100px;
                height: 10px;
                display: inline-block;
                position: relative;
                @include border-radius(5px);
                background-color: unset;
                @include transition(all 220ms linear 0ms);
                &:last-child {
                    margin-right: 0px;
                }
                @media #{$max-md} {
                    width: 50px;
                    height: 7px;
                }
                &.swiper-pagination-bullet-active, &:hover {
                    background-color: #fff;
                    background-color: $link_color_hover;
                }
            }
        }
        &.pxl-swiper-pagination-progressbar {
            height: 1px;
            width: 100%;
            background-color: #c1b9b9;
            max-width: 1170px;
            margin-bottom: 4px;
            position: relative;
            .swiper-pagination-progressbar-fill {
                background: $secondary_color;
                position: absolute;
                left: 0;
                top: -3px;
                width: 100%;
                height: 8px;
                transform: scale(0);
                transform-origin: left top;
            }
        }
        &.pxl-swiper-pagination-fraction {
            font-size: 24px;
            color: $link_color;
            font-weight: 700;
            @extend .ft-theme-default;
            span {
                color: #0a1316;
                display: inline-flex;
                margin: 0 6px;
                &:before {
                    content: '0';
                }
            }
        }
    }
    &.style-2 {
        &.pxl-swiper-pagination-bullets {
            margin-top: 27px;
            span {
                cursor: pointer;
                width: 8px;
                height: 8px;
                display: inline-block;
                margin: 0 9px;
                position: relative;
                background-color: #e3e3e3;
                @include border-radius(8px);
                &.swiper-pagination-bullet-active, &:hover {
                    background-color: $secondary_color;
                }
            }
        }
    }
    &.style-3 {
        &.pxl-swiper-pagination-bullets {
            span {
                width: 12px;
                height: 12px;
                border-radius: 12px;
                display: inline-flex;
                background-color: #777;
                margin: 0 6px;
                cursor: pointer;
                @include transition(all 220ms linear 0ms);
                &.swiper-pagination-bullet-active {
                    background-color: transparent;
                    box-shadow: 0 0 0 4px $link_color;
                }
            }
        }
    }
    &.style-4 {
        &.pxl-swiper-pagination-bullets {
            text-align: center;
            span {
                width: 8px;
                height: 8px;
                border-radius: 7px;
                display: inline-flex;
                background-color: #dae1e3;
                margin: 0 6px;
                cursor: pointer;
                @include transition(all 220ms linear 0ms);
                &.swiper-pagination-bullet-active {
                    background-color: $link_color;
                    width: 8px;
                }
            }
        }
    }
}
.pxl-swiper-boxshadow {
    .pxl-carousel-inner {
        margin: 0 -30px;
        .pxl-swiper-container {
            padding: 0 30px;
        }
    }
    .pxl-swiper-slide {
        @include transition(opacity .25s cubic-bezier(.645,.045,.355,1));
    }
    .pxl-swiper-slide:not(.swiper-slide-visible) {
        opacity: 0;
    }
    @media #{$max-lg} {
        .pxl-swiper-dots.style-1.pxl-swiper-pagination-progressbar {
            margin-left: 45px;
            margin-right: 45px;
        }
    }
    .pxl-carousel-inner {
        overflow: visible;
    }
}

.pxl-swiper-sliders {
    position: relative;
    &.pxl-swiper-arrow-show .pxl-swiper-arrow {
        opacity: 1;
        visibility: visible;
    }
}

.pxl-swiper-nogap {
    .pxl-swiper-container {
        margin: 0;
        .pxl-swiper-slide {
            padding: 0;
        }
    }
}

.pxl-swiper-thumbs {
    overflow: hidden;
    padding: 0 15px;
    .swiper-slide {
        cursor: pointer;
        padding: 0 15px;
    }
}
.swiper-container-vertical {
    height: 300px;
    .pxl-swiper-wrapper {
        flex-direction: column;
    }
    .pxl-swiper-slide {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

[data-slider-mode="fade"] .swiper-slide-active {
    z-index: 9;
}
// End Swiper Carousel
//--------------------------------------------------

body.rtl {
    
}