﻿.carousel {
	position: relative;
}

	.carousel.pointer-event {
		touch-action: pan-y;
	}

.slideshowinner {
	position: relative;
	width: 100%;
	overflow: hidden;
	@include clearfix();
}

.slideshowitem {
	position: relative;
	display: none;
	float: left;
	width: 100%;
	margin-right: -100%;
	backface-visibility: hidden;
	@include transition($carousel-transition);
}

	.carousel-item.active,
	.carousel-item-next,
	.carousel-item-prev {
		display: block;
	}

		.carousel-item-next:not(.carousel-item-left),
		.active.carousel-item-right {
			transform: translateX(100%);
		}

		.carousel-item-prev:not(.carousel-item-right),
		.active.carousel-item-left {
			transform: translateX(-100%);
		}

.carousel-fade {
	.carousel-item

{
	opacity: 0;
	transition-property: opacity;
	transform: none;
}

.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
	z-index: 1;
	opacity: 1;
}

.active.carousel-item-left,
.active.carousel-item-right {
	z-index: 0;
	opacity: 0;
	@include transition(0s $carousel-transition-duration opacity);
}

}

.carousel-control-prev,
.carousel-control-next {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15%;
	color: #fff;
	text-align: center;
	opacity: .5;
	transition: opacity .15s ease;
}

.carousel-control-prev {
	left: 0;
}

.carousel-control-next {
	right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	display: inline-block;
	width: $carousel-control-icon-width;
	height: $carousel-control-icon-width;
	background: no-repeat 50% / 100% 100%;
}

.carousel-control-prev-icon {
	background-image: $carousel-control-prev-icon-bg;
}

.carousel-control-next-icon {
	background-image: $carousel-control-next-icon-bg;
}

.dots {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 15;
	display: flex;
	justify-content: center;
	padding-left: 0;
	margin-right: 15%;
	margin-left: 15%;
	list-style: none;
	
}

	.dots > li {
		box-sizing: content-box;
		flex: 0 1 auto;
		width: 10px;
		height: 10px;
		margin-right: 3px;
		margin-left: 3px;
		text-indent: -999px;
		cursor: pointer;
		/*background-color: #fff;*/
		background-clip: padding-box;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		opacity: .5;
		transition: opacity .6s ease;
		border-radius: 100%;
	}

.dots > li > .active {
	opacity: 1;
}

.carousel-caption {
	position: absolute;
	right: (100% - $carousel-caption-width) / 2;
	bottom: 20px;
	left: (100% - $carousel-caption-width) / 2;
	z-index: 10;
	padding-top: 20px;
	padding-bottom: 20px;
	color: $carousel-caption-color;
	text-align: center;
}
