@if $ui-carousel == true and $ui == true {
	.carousel {
		.animated {
			-webkit-animation-duration: 1000ms;
			animation-duration: 1000ms;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.owl-animated-in {
			z-index: 0;
		}
		.owl-animated-out {
			z-index: 1;
		}
		.fadeOut {
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
	}

	@-webkit-keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

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

	.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;
	}

	.carousel {
		display: none;
		width: 100%;
		-webkit-tap-highlight-color: transparent;
		position: relative;
		z-index: 1;
		.owl-stage {
			position: relative;
			-ms-touch-action: pan-Y;
			&:after {
				content: '.';
				display: block;
				clear: both;
				visibility: hidden;
				line-height: 0;
				height: 0;
			}
		}
		.owl-stage-outer {
			position: relative;
			overflow: hidden;
			-webkit-transform: translate3d(0px, 0px, 0px);
		}
		.owl-controls {
			.owl-nav {
				.owl-prev, .owl-next {
					cursor: pointer;
					cursor: hand;
					-webkit-user-select: none;
					-khtml-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
			}
			.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 {
			opacity: 0;
			display: block;
		}
		&.owl-hidden {
			opacity: 0;
		}
		.owl-refresh .owl-item {
			display: none;
		}
		.owl-item {
			position: relative;
			float: left;
			-webkit-backface-visibility: hidden;
			-webkit-tap-highlight-color: transparent;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			img {
				display: block;
				width: 100%;
				-webkit-transform-style: preserve-3d;
			}
		}
		&.owl-text-select-on .owl-item {
			-webkit-user-select: auto;
			-moz-user-select: auto;
			-ms-user-select: auto;
			user-select: auto;
		}
		.owl-grab {
			cursor: move;
			cursor: -webkit-grab;
			cursor: -o-grab;
			cursor: -ms-grab;
			cursor: grab;
		}
		&.owl-rtl {
			direction: rtl;
			.owl-item {
				float: right;
			}
		}
	}

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

	// 	Owl Carousel - Lazy Load Plugin

	.carousel {
		.owl-item {
			.owl-lazy {
				opacity: 0;
				-webkit-transition: opacity 400ms ease;
				-moz-transition: opacity 400ms ease;
				-ms-transition: opacity 400ms ease;
				-o-transition: opacity 400ms ease;
				transition: opacity 400ms ease;
			}
			img {
				transform-style: preserve-3d;
			}
		}
		.owl-video-wrapper {
			position: relative;
			height: 100%;
			background: #000;
		}
		.owl-video-play-icon {
			position: absolute;
			height: 120px;
			width: 120px;
			left: 50%;
			top: 50%;
			margin-left: -60px;
			margin-top: -10px;
			background: url('owl.video.play.png') no-repeat;
			cursor: pointer;
			z-index: 1;
			-webkit-backface-visibility: hidden;
			-webkit-transition: scale 100ms ease;
			-moz-transition: scale 100ms ease;
			-ms-transition: scale 100ms ease;
			-o-transition: scale 100ms ease;
			transition: scale 100ms ease;
			&:before {
				font-family: 'fontawesome';
				content: $fa-var-play-circle-o;
				font-size: 10rem;
				font-weight: normal;
				color: #fff;
				text-shadow: 1px 1px 1px #000;
			}
			&:hover {
				-webkit-transition: scale(1.3, 1.3);
				-moz-transition: scale(1.3, 1.3);
				-ms-transition: scale(1.3, 1.3);
				-o-transition: scale(1.3, 1.3);
				transition: scale(1.3, 1.3);
			}
		}
		.owl-video-playing {
			.owl-video-tn, .owl-video-play-icon {
				display: none;
			}
		}
		.owl-video-tn {
			& {
				opacity: 0;
				height: 100%;
				background-position: center center;
				background-repeat: no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: contain;
				background-size: cover;
				-webkit-transition: opacity 400ms ease;
				-moz-transition: opacity 400ms ease;
				-ms-transition: opacity 400ms ease;
				-o-transition: opacity 400ms ease;
				transition: opacity 400ms ease;
				-webkit-filter: blur(5px);
				-moz-filter: blur(5px);
				-o-filter: blur(5px);
				-ms-filter: blur(5px);
				filter: blur(5px);
			}

		}

		.owl-video-frame {
			position: relative;
			z-index: 1;
		}
	}

	//	Owl Carousel - Video Plugin

	.carousel-theme {
		&:hover {
			.owl-nav {
				& {
					display: block !important;
				}
				[class*=owl-] {
					& {
						font-family: 'FontAwesome';
						color: #fff;
						font-size: 2.5rem;
						padding: $spacing/4;
						margin: $spacing/4;
						display: inline-block;
						cursor: pointer;
						@include opacity(.5);
						@include text-shadow(0 0 10px rgba(0, 0, 0, .5));
						top: 33%;
					}
					&:hover {
						@include opacity(.8);
						text-decoration: none;
					}
				}
				.disabled {
					opacity: .5;
					cursor: default;
				}
			}
			.owl-prev {
				position: absolute;
				left: 0;
				&:before {
					content: $fa-var-chevron-left;
				}
			}
			.owl-next {
				position: absolute;
				right: 0;
				&:before {
					content: $fa-var-chevron-right;
				}
			}
		}
		.owl-controls {
			margin-top: 10px;
			text-align: center;
			-webkit-tap-highlight-color: transparent;
			.owl-nav {
				display: none;
			}

		}
		.owl-dots .owl-dot {
			display: inline-block;
			zoom: 1;
			*display: inline;
			span {
				width: 10px;
				height: 10px;
				margin: 5px 7px;
				background: #d6d6d6;
				display: block;
				-webkit-backface-visibility: visible;
				-webkit-transition: opacity 200ms ease;
				-moz-transition: opacity 200ms ease;
				-ms-transition: opacity 200ms ease;
				-o-transition: opacity 200ms ease;
				transition: opacity 200ms ease;
				-webkit-border-radius: 30px;
				-moz-border-radius: 30px;
				border-radius: 30px;
			}
			&.active span, &:hover span {
				background: #869791;
			}
		}
	}
}