// ============================
// Owl carousel Modules
// ============================

/*==================== Base styles =================*/

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;

    .animated {
        animation-duration: 1000ms;
        animation-fill-mode: both;
    }

    .owl-animated-in {
        z-index: 0;
    }

    .owl-animated-out {
        z-index: 1;
    }

    .fadeOut {
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
    }

    .owl-stage {
        position: relative;
        -ms-touch-action: pan-Y;
        -moz-backface-visibility: hidden;
        /* fix firefox animation glitch */
        &: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);
        -moz-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;

        img {
            display: block;

            &.owl-lazy {
                transform-style: preserve-3d;
            }
        }

        .owl-lazy {
            opacity: 0;
            transition: opacity 400ms ease;
        }
    }

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

            &:before,
            &:after {
                display: none;
            }
        }
    }

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

    &.owl-loaded {
        display: block;
    }

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

    &.owl-hidden {
        opacity: 0;
    }

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

    &.owl-drag {
        .owl-item {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    }

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

    &.owl-rtl {
        direction: rtl;

        .owl-item {
            float: right;
        }
    }


    &.mod_owl_carousel__home_gallery {
        .owl-nav {
            .owl-prev {
                top: 37% !important;
                left: -110px;
            }
            .owl-next {
                top: 62% !important;
                left: -110px;
                right: auto;
            }
        }

        .owl-item {
            .item_img {
                a {
                    position: relative;
                    display: block;
                    .box-shadow(0px 0px 10px rgba(0, 0, 0, 0.0));
                    &:before {
                        content: "";
                        left: 0;
                        right: 0;
                        bottom: 0;
                        top: 0;
                        position: absolute;
                        background: fade(@white, 0%);
                        border: solid 0px @white;
                        opacity: 1;
                        .transition(all 0.3s ease);
                    }

                    figcaption {
                        position: absolute;
                        left: 50%;
                        text-align: center;
                        top: 70%;
                        width: 80%;
                        .translate(-50%, -50%);
                        font: 700 14px/20px @font-family-base;
                        text-transform: uppercase;
                        color: @headings-color;
                        .transition(all 0.3s ease);
                        opacity: 0;
                    }

                    &:hover {
                        .box-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
                        &:before {
                            content: "";
                            left: 0;
                            right: 0;
                            bottom: 0;
                            top: 0;
                            position: absolute;
                            background: fade(@white, 70%);
                            border: solid 30px @white;
                            opacity: 1;
                        }

                        figcaption {
                            position: absolute;
                            left: 50%;
                            text-align: center;
                            top: 50%;
                            width: 80%;
                            .translate(-50%, -50%);
                            font: 700 14px/20px @font-family-base;
                            text-transform: uppercase;
                            color: @headings-color;
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }


    &.mod_owl_carousel__people_say {
        .owl-nav {
            .owl-prev {
                top: 130% !important;
                left: 43%;
                background: transparent;
                .box-shadow(0px 0px 10px rgba(0, 0, 0, 0.0));
                &:hover {
                    background: transparent;
                    .box-shadow(0px 0px 10px rgba(0, 0, 0, 0.0));
                    color: @global-color;
                }
            }
            .owl-next {
                top: 130% !important;
                left: auto;
                right: 43%;
                background: transparent;
                .box-shadow(0px 0px 10px rgba(0, 0, 0, 0.0));
                &:hover {
                    background: transparent;
                    .box-shadow(0px 0px 10px rgba(0, 0, 0, 0.0));
                    color: @global-color;
                }
            }
        }
    }
}






/* No Js */

.no-js .owl-carousel {
    display: block;
}

.owl-height {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}






/*===================================================*/

.mod_owl_carousel {
    .owl-prev,
    .owl-next {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        font: 400 24px/53px @li;
        text-align: center;
        color: @headings-color;
        width: 53px;
        background: @white;
        .box-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
        .transition(all 0.3s ease);



        &:hover {
            .box-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
        }
    }

    .owl-prev {
        left: 0;
        &:before {
            content: '\ec3b';
        }
    }

    .owl-next {
        right: 0;
        &:before {
            content: '\ec3c';
        }
    }

    .owl-dots {
        text-align: center;
        margin-top: 10px;

        .owl-dot {
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            position: relative;
            margin-left: 10px;
            width: 16px;
            height: 16px;
            outline: none;
            cursor: pointer;
            background-color: transparent;
            box-shadow: inset 0 0 0 2px #000;
            transition: box-shadow 0.3s ease;

            &:hover,
            &:focus {
                box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6);
            }

            &.active {
                box-shadow: inset 0 0 0 8px #000;
            }
        }
    }
}

.mod_owl_carousel__ {}