/* ==========================================================================
# Carousels style - begin
========================================================================== */

.qodef-carousel-holder {

    .qodef-carousel-item-holder {
        position: relative;

        /* Image zoom - begin
        ========================================================================== */

        .qodef-carousel-first-image-holder.qodef-image-zoom img {
            @include qodefTransition(transform 0.15s ease-out);
            -webkit-backface-visibility: hidden;
            display: inline-block;
            width: auto;
        }

        .qodef-carousel-first-image-holder.qodef-image-zoom:hover img {
            @include qodefTransform(scale(0.9));
        }

        /* Image zoom - end
        ========================================================================== */


        /* Image change on hover - begin
        ========================================================================== */

        .qodef-carousel-first-image-holder.qodef-image-change {
            position: relative;
            opacity: 1;
            z-index: 5;
            @include qodefTransition(opacity 0.15s ease-out);
            display: inline-block;
        }

        .qodef-carousel-second-image-holder {
            position: absolute;
            top: 0;
            left: 0;
            @include qodefTransition(opacity 0.15s ease-out);
            opacity: 0;
        }

        &:hover .qodef-carousel-first-image-holder.qodef-image-change {
            opacity: 0;
        }

        &:hover .qodef-carousel-second-image-holder {
            opacity: 1;
        }

        /* Image change on hover - end
        ========================================================================== */

    }

	/* Carousel navigation - begin
	========================================================================== */

	.qodef-carousel.owl-carousel {

		.owl-nav {

			width: 100%;

			.owl-prev {
				position: absolute;
				top: 50%;
				@include qodefTransform(translateY(-50%));
				left: 1%;
			}

			.owl-next {
				position: absolute;
				top: 50%;
				@include qodefTransform(translateY(-50%));
				right: 1%;
			}

			.qodef-prev-icon,
			.qodef-next-icon {
				display: inline-block;
				width: 40px;
				height: 40px;
				text-align: center;

				i,
                span {
					font-size: 26px;
					line-height: 40px;
					color: #ccc;
				}

			}

		}

		.owl-dots {
			text-align: center;

			.owl-dot {
				display: inline-block;
			}

			.owl-dot span {
				display: inline-block;
				width: 12px;
				height: 12px;
				margin: 3px;
				filter: Alpha(Opacity=50);
				opacity: 0.5;
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border-radius: 20px;
				background: #74797b;
			}

			.owl-dot.active span {
				opacity: 1;
			}

		}

	}

	/* Carousel navigation - end
	========================================================================== */

}

/* ==========================================================================
# Carousels style - end
========================================================================== */