/* ==========================================================================
   CAROUSELS
   ========================================================================== */

	/* carousel holder */
	.carousel-holder{
		position: relative;
	}

	.owl-carousel{
		position: relative;
	}

	//arrows in a fullwidth holder
	.content-row-wrapper.fullwidth .rt-carousel:not(.main-carousel)[data-nav="true"],
	.elementor-section-full_width .rt-carousel:not(.main-carousel)[data-nav="true"],
	.post-carousel{

		.owl-nav{
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		&:hover .owl-nav{
			opacity: 1;
		}

		.owl-nav > div{
			background: rgba(0, 0, 0, 0.25);
			color: #fff !important;
		}

		.owl-nav .owl-prev{
			left:0;
		}

		.owl-nav .owl-next{
			right:0;
		}		
	}

	//boxed carousel
	.boxed-carousel{
		.owl-stage-outer{
			padding-bottom: 4px;
		}

		.boxed{
			margin-right: 3px;
		}
	}

	/* navigation */
	.owl-nav{
		div{
			cursor: pointer;
			font-size: 22px;
			line-height: 3em;
			margin-top: -1.5em;
			padding: 0;
			position: absolute;
			top: 50%;
			@include transition(all 0.2s ease-out 0.1s);
		}

		.owl-next{
			right: -40px;
		}

		.owl-prev{
			left: -40px;
		}	
		
	}

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

	/* dots */
	.carousel-holder:not(.main-carousel) .dots-holder{
		opacity: 1;
		margin-top: 40px;
		width: 100%;
		text-align: center;

		> div{	
			zoom: 1;
			display: inline-block;
			margin: 0 5px;
		}

		> div span{
			-webkit-backface-visibility: visible;  
			@include transition( opacity 200ms ease );		
			border-radius: 50%;
			border-style: solid;
			border-width: 2px;
			cursor: pointer;
			display: block;
			height: 10px;
			margin: 0 0 4px !important; 
			width: 10px;
		}

		div.active span, div:hover span {
			opacity: 0.5;
		}	
	}

	.carousel-holder:not(.main-carousel) .dots-holder span{
		border-color: var(--font-color);
	}
	.carousel-holder:not(.main-carousel) .dots-holder .active span{
		border-color: var(--primary-color);
	}


	.carousel-holder:hover .dots-holder{
		opacity: 1;
		@include transition( opacity 200ms ease );	
	}	

	/* dots for main carousel */
	.carousel-holder.main-carousel .dots-holder{
		bottom: 10px;
		position: absolute;
		text-align: center;
		width: 100%;
		z-index: 9;

		> div{	
			zoom: 1;
			display: inline-block;
			margin-right: 5px;
		}

		> div span{
			cursor: pointer; 
			height: 15px;
			width: 15px;
			display: block;
			-webkit-backface-visibility: visible; 
			background: rgba(255,255,255,0.4);
			@include transition( all 200ms ease );		
			border-radius: 50%;
		}

		div.active span, div:hover span {
			background: rgba(255,255,255,0.8);
		}	
	} 

	/* arrows for main carousel state */
	.carousel-holder.main-carousel{

			overflow: hidden;
			
			/* hover state */
			.owl-carousel:hover .owl-nav:not(.disabled){
				div{
					@include transition(all 0.2s ease-out 0.1s);			
				}

				.owl-next{
					right: 10px;
				}

				.owl-prev{
					left: 10px;
				}	

				& > div:hover{

					&.owl-next{
						padding: 0 5px 0 15px;
					}

					&.owl-prev{
						padding: 0 15px 0 5px;
					}					
				}
			}
	}


	//dark - light nav item colors 
	.light-bg-tone{
		.owl-nav{
			div{
				background-color: transparent;
			}
			span:before{
				color: #fff;
			}
		}

		.dots-holder{
			> div span{
				background: rgba(255,255,255,0.4) !important;
			}

			div.active span, div:hover span {
				background: rgba(255,255,255,0.8) !important;
			}	
		}			
	}

	.dark-bg-tone{
		.owl-nav{
			div{
				background-color: transparent;
			}
			span:before{
				color: #000;
			}
		}

		.dots-holder{
			> div span{
				background: rgba(0,0,0,0.2) !important;
			}

			div.active span, div:hover span {
				background: rgba(0,0,0,0.6) !important;
			}	
		}			
	}	


	//image carousel
	.rt-image-carousel .owl-carousel .owl-item img{
		margin: auto; 
		height: auto;
	}

	//shadows
	.rt-carousel.shadows{

		 .owl-stage{
			.imgeffect{
				overflow: visible;
			}
			.owl-item > div{
				margin: 12px;
				
				> *{
					box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
				}
			}
		}

		.owl-nav div{
			margin-top: -24px;
		}
	}


	//scaled images
	.rt-carousel.scaled-imgs{
		.imgeffect,.has-overlay,img{
			max-width: 100% !important;
			width: 100%;
		}
	}

