/*
 *  Owl Carousel - Core
 */
.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    /* position relative and z-index fix webkit rendering fonts issue */
    position: relative;
    z-index: 1;

    .owl-stage {
        position: relative;
        -ms-touch-action: pan-Y;
        touch-action: manipulation;
        -moz-backface-visibility: hidden; /* fix firefox animation glitch */
    }

    .owl-stage:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .owl-stage-outer {
        position: relative;
        overflow: hidden;
        /* fix for flashing background */
        -webkit-transform: translate3d(0px, 0px, 0px);
    }

    .owl-wrapper,
    .owl-item{
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
    }

    .owl-item {
        position: relative;
        min-height: 1px;
        float: left;
        -webkit-backface-visibility: hidden;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    .owl-item img {
        display: block;
        width: 100%;
    }

    .owl-nav.disabled,
    .owl-dots.disabled {
        display: none;
    }

    .owl-nav .owl-prev,
    .owl-nav .owl-next,
    .owl-dot {
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .owl-nav .owl-prev,
    .owl-nav .owl-next,
    .owl-dot {
        background: none;
        color: inherit;
        border: none;
        padding:0;
        font: inherit;
    }

    &.owl-loaded {
        display: block;
    }

    &.owl-loading {
        opacity: 0;
        display: block;
    }

    &.owl-hidden {
        opacity: 0;
    }

    &.owl-refresh .owl-item {
        visibility: hidden;
    }

    &.owl-drag .owl-item {
        touch-action: pan-y;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    &.owl-grab {
        cursor: move;
        cursor: grab;
    }

    &.owl-rtl {
        direction: rtl;
    }

    &.owl-rtl .owl-item {
        float: right;
    }

    @media ( min-width: 992px ) {
        &.flick-carousel {
            .e-con-inner & {
                --porto-flick-carousel-width: var( --content-width );
                --porto-flick-carousel-space: 0px;
            }
            width: calc( var( --porto-flick-carousel-width, var( --porto-container-width ) ) - ( var( --porto-flick-carousel-space, var( --porto-column-spacing ) ) * 2 ) ) !important;
            margin-left: auto !important;
            margin-right: auto !important;
            .slider-wrapper & {
                width: calc( var( --porto-flick-carousel-width, var( --porto-container-width ) ) - ( var( --porto-flick-carousel-space, var( --porto-column-spacing ) )  * 2 ) + var( --porto-el-spacing, var( --porto-grid-gutter-width ) ) ) !important;
            }
            .owl-item:not(.active) {
                pointer-events: none;
            }
        }
        &.flick-carousel > .owl-stage-outer {
            width: 100vw !important;
            #{$left}: calc( ( ( var( --porto-flick-carousel-width, var( --porto-container-width ) ) ) - 100vw ) / 2 - var( --porto-flick-carousel-space, var( --porto-column-spacing ) ) ) !important;
            .slider-wrapper & {
                #{$left}: calc( ( ( var( --porto-flick-carousel-width, var( --porto-container-width ) ) + var( --porto-el-spacing, var( --porto-grid-gutter-width ) ) ) - 100vw ) / 2 - var( --porto-flick-carousel-space, var( --porto-column-spacing ) ) ) !important;
            }
        }
        &.flick-carousel > .owl-stage-outer > .owl-stage {
            margin-#{$left}: calc( ( 100vw - ( var( --porto-flick-carousel-width, var( --porto-container-width ) ) ) ) / 2 + var( --porto-flick-carousel-space, var( --porto-column-spacing ) ) ) !important;
            .slider-wrapper & {
                margin-#{$left}: calc( ( 100vw - ( var( --porto-flick-carousel-width, var( --porto-container-width ) ) + var( --porto-el-spacing, var( --porto-grid-gutter-width ) ) ) ) / 2 + var( --porto-flick-carousel-space, var( --porto-column-spacing ) ) ) !important;
            }
        }
    }
}

/* No Js */
.no-js .owl-carousel {
    display: block;
}
