/**
 * Home page slider
 */

.sliderContainer {
	float: left;
	width: 100%;
	overflow: hidden;
	margin: 0 0 20px;

	&.boxed {
		max-width: var(--wrapper_width);
		margin: 20px auto 20px;
		float: none;
	}
}

.sliderWrap {
	position: relative;
	max-width: 100%;

	@media @mobile {
		margin-bottom: 15px;
	}

	.slider {
		width: 100%;

		@media @mobile {
			width: auto;
			margin: 0;
		}

		> li {
			position: relative;
			min-height: 600px;
			overflow: hidden;

			a {
				display: block;
			}

			@media @mobile {
				min-height: initial;
			}
		}

		img {
			position: absolute;
			top: 0;
			left: 50%;
			width: 2000px;
			max-width: 2000px;
			transform: translate(-50%, 0);

			@media @mobile {
				position: relative;
				width: auto;
				top: auto;
				left: auto;
				min-height: initial;
				max-width: 100%;
				transform: translate(0, 0);
			}
		}
	}

	.innerText {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		background: rgba(0, 0, 0, 0.1);
		padding: 20px;

		.slideshowPosition {
			display: table;
			height: 100%;
			width: 100%;
		}

		.slideshowText {
			display: table-cell;
			vertical-align: middle;

			h2 {
				.headingStyle(h1);
				margin-bottom: 30px;
				color: #fff;

				@media @mobile {
					.headingStyle(h2);
					margin-bottom: 10px;
				}
			}

			h3 {

				.headingStyle(h3);
				margin-bottom: 40px;
				color: #fff;
				text-transform: none;

				@media @mobile {
					.headingStyle(h4);
					margin-bottom: 20px;
				}
			}

			.button {
				clear: both;
				margin: 0;
			}
		}
	}
}


/*
* Swiper
*/
.swiper-wrapper {
	&:before, &:after {
		display: none;
	}
}

.swiper-button-prev,
.swiper-button-next {
	background: transparent !important;
	color: #fff;
	width: 48px;
	height: 48px;
	opacity: 1;

	&:after {
		content: "";
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background: var(--primary_color);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 1;
		transition: background-color 200ms linear;
		font-size: 0;
	}

	svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 2;
		width: 10px;
		height: 10px;

		path {
			fill: #fff;
		}
	}

	&:hover, &:active, &:focus {
		&:after {
			background: color-mix(in srgb, var(--primary_color), var(--darken_mixin_color) 8%);
			transition: background-color 200ms linear;
		}
	}
}

.swiper-button-prev {
	svg {
		transform: translate(-50%,-50%) rotate(-180deg);
	}
}


