/* Slider */
.kt-blocks-carousel {
	padding: 0 0 25px 0;
	.slick-slider {
		position: relative;
		display: block;
		box-sizing: border-box;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-ms-touch-action: pan-y;
		touch-action: pan-y;
		-webkit-tap-highlight-color: transparent;
	}
	.slick-list {
		position: relative;
		overflow: hidden;
		display: block;
		margin: 0;
		padding: 0;

		&:focus {
			outline: none;
		}

		&.dragging {
			cursor: pointer;
			cursor: hand;
		}
	}
	.slick-slider .slick-track,
	.slick-slider .slick-list {
		transform: translate3d(0, 0, 0);
	}

	.slick-track {
		position: relative;
		left: 0;
		top: 0;
		display: block;
		margin-left: auto;
		margin-right: auto;

		&:before,
		&:after {
			content: "";
			display: table;
		}

		&:after {
			clear: both;
		}

	}
	.slick-loading .slick-track {
		visibility: hidden;
	}
	.slick-slide {
		float: left;
		height: 100%;
		min-height: 1px;
		[dir="rtl"] & {
			float: right;
		}
		img {
			display: block;
		}
		&.slick-loading img {
			display: none;
		}

		display: none;

		&.dragging img {
			pointer-events: none;
		}

	}
	.slick-initialized .slick-slide {
		display: block;
	}

	.slick-loading .slick-slide {
		visibility: hidden;
	}

	.slick-vertical .slick-slide {
		display: block;
		height: auto;
		border: 1px solid transparent;
	}
	.slick-arrow.slick-hidden {
		display: none;
	}

	// Default Variables

	// Slick icon entity codes outputs the following
	// "\2190" outputs ascii character "←"
	// "\2192" outputs ascii character "→"
	// "\2022" outputs ascii character "•"

	$slick-arrow-color: white !default;
	$slick-dot-color: black !default;
	$slick-dot-color-active: $slick-dot-color !default;
	$slick-dot-size: 10px !default;
	$slick-opacity-default: .25 !default;
	$slick-opacity-on-slider: .75 !default;
	$slick-opacity-on-hover: 1 !default;
	$slick-opacity-not-active: 0 !default;
	$slick-opacity-not-active-hover: 0.25 !default;
	/* Arrows */
	.slick-slider:hover {
		.slick-prev,
		.slick-next {
			opacity: $slick-opacity-on-slider;
			&:hover, &:focus {
				outline: none;
				opacity: $slick-opacity-on-hover;
			}
			&.slick-disabled {
				opacity: $slick-opacity-not-active-hover;
			}
		}
	}
	.slick-prev,
	.slick-next {
		position: absolute;
		display: block;
		height: 50px;
		width: 30px;
		line-height: 0px;
		font-size: 0px;
		cursor: pointer;
		background: rgba( 0,0,0,.8 );
		color: white;
		top: 50%;
		transform: translate(0, -50%);
		padding: 0;
		border: none;
		outline: none;
		box-shadow: none;
		transition: opacity .4s ease-in-out;
		opacity: $slick-opacity-default;
		z-index: 1;
		&:hover, &:focus {
			outline: none;
			opacity: $slick-opacity-on-hover;
		}
		&.slick-disabled {
			opacity: $slick-opacity-not-active;
		}
	}
	[dir="rtl"] .slick-prev {
		left: auto;
		right:0px;
		transform: translate(0, -50%) rotate(180deg);
	}
	.slick-prev {
		left: 15px;
		&:before {
			border-style: solid;
			border-width: 2px 2px 0 0;
			content: '';
			display: inline-block;
			height: 10px;
			position: relative;
			top: 0px;
			left: 2px;
			transform: rotate(-135deg);
			vertical-align: top;
			width: 10px;
		}
	}
	[dir="rtl"] .slick-next {
		left: -25px;
		right: auto;
		transform: translate(0, -50%) rotate(180deg);
	}
	.slick-next {
		right: 15px;
		&:before {
			border-style: solid;
			border-width: 2px 2px 0 0;
			content: '';
			display: inline-block;
			height: 10px;
			position: relative;
			top: 0px;
			left: -2px;
			transform: rotate(45deg);
			vertical-align: top;
			width: 10px;
		}
	}
	.kt-carousel-arrowstyle-blackonlight {
		.slick-prev,
		.slick-next {
			background: rgba( 255,255,255,.8 );
			color: black;
		}
	}
	.kt-carousel-arrowstyle-outlineblack {
		.slick-prev,
		.slick-next {
			background: transparent;
			border: 2px solid #000000;
			color: black;
		}
	}
	.kt-carousel-arrowstyle-outlinewhite {
		.slick-prev,
		.slick-next {
			background: transparent;
			border: 2px solid #ffffff;
			color: #ffffff;
		}
	}
	/* Dots */

	.slick-dotted.slick-slider {
		margin-bottom: 30px;
	}

	.slick-dots {
		position: absolute;
		bottom: -25px;
		list-style: none;
		display: block;
		text-align: center;
		padding: 0;
		margin: 0;
		width: 100%;
		left:0;
		li {
			position: relative;
			display: inline-block;
			height: 20px;
			width: 20px;
			margin: 0;
			padding: 0;
			cursor: pointer;
			button {
				border: 0;
				background: transparent;
				display: block;
				height: 20px;
				width: 20px;
				outline: none;
				line-height: 0px;
				font-size: 0px;
				color: transparent;
				padding: 5px;
				cursor: pointer;
				&:hover, &:focus {
					outline: none;
					&:before {
						opacity: $slick-opacity-on-hover;
					}
				}
				&:before {
					top: 5px;
					left: 5px;
					width: 10px;
					height: 10px;
					outline: none;
					border-radius: 50%;
					background-color: $slick-dot-color;
					opacity: $slick-opacity-not-active-hover;
					text-indent: -999em;
					cursor: pointer;
					position: absolute;
				}
			}
			&.slick-active button:before {
				background-color: $slick-dot-color;
				opacity: $slick-opacity-on-slider;
			}
		}
	}
	.kt-carousel-dotstyle-light .slick-dots li {
		button {
			&:before {
				background-color: white;
			}
		}
		&.slick-active button:before {
			background-color: white;
		}
	}
	.kt-carousel-dotstyle-outlinedark .slick-dots li {
		button {
			&:before {
				background-color: transparent;
				box-shadow: inset 0 0 0 1px #000;
				transition: box-shadow 0.3s ease;
			}
		}
		&.slick-active button:before {
			box-shadow: inset 0 0 0 8px #000;
		}
	}
	.kt-carousel-dotstyle-outlinelight .slick-dots li {
		button {
			&:before {
				background-color: transparent;
				box-shadow: inset 0 0 0 1px #fff;
				transition: box-shadow 0.3s ease;
			}
		}
		&.slick-active button:before {
			box-shadow: inset 0 0 0 8px #fff;
			background-color: #fff;
		}
	}
}