.civi-swiper {
	position: relative;
	z-index: 1;

	&:hover {
		.swiper-nav-button {
			@extend %NormalTransition;
			opacity: 1;
			visibility: visible;
		}
	}

	.swiper-inner {
		position: relative;
	}

	.swiper-container {
		width: 100%;
	}

	.swiper-slide {
		box-sizing: border-box;
		text-align: left;
		overflow: visible;
	}

	// Content Alignment.
	&.v-stretch {
		> .swiper-inner {
			> .swiper-container {
				> .swiper-wrapper {
					> .swiper-slide {
						height: auto;

						> div {
							height: 100%;
						}
					}
				}
			}
		}
	}

	&.v-top {
		> .swiper-inner {
			> .swiper-container {
				> .swiper-wrapper {
					> .swiper-slide {
						display: flex;
						align-self: start;
					}
				}
			}
		}
	}

	&.v-middle {
		> .swiper-inner {
			> .swiper-container {
				> .swiper-wrapper {
					> .swiper-slide {
						display: flex;
						align-self: center;
					}
				}
			}
		}
	}

	&.v-bottom {
		> .swiper-inner {
			> .swiper-container {
				> .swiper-wrapper {
					> .swiper-slide {
						display: flex;
						align-self: flex-end;
					}
				}
			}
		}
	}

	&.h-left {
		> .swiper-inner {
			> .swiper-container {
				> .swiper-wrapper {
					> .swiper-slide {
						display: flex;
						justify-content: flex-start;
					}
				}
			}
		}
	}

	&.h-center {
		> .swiper-inner {
			> .swiper-container {
				> .swiper-wrapper {
					> .swiper-slide {
						display: flex;
						justify-content: center;
					}
				}
			}
		}
	}

	&.h-right {
		> .swiper-inner {
			> .swiper-container {
				> .swiper-wrapper {
					> .swiper-slide {
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	// Smooth Transition.
	&[data-autoplay="1"] {
		.swiper-wrapper {
			transition-timing-function: linear !important;
		}
	}

	// Bullets.
	&.highlight-centered-items {
		.swiper-slide {
			transition: opacity 0.25s linear;

			&:not(.swiper-slide-active) {
				opacity: 0.4;
			}
		}
	}

	&:not(.bullets-v-align-below) {
		.swiper-pagination-container {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			pointer-events: none;
		}
	}

	.swiper-pagination-container {
		.container,
		.row,
		.col-md-12 {
			height: 100%;
		}
	}
	.swiper-pagination-wrap {
		height: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.swiper-pagination-inner {
		pointer-events: auto;
	}

	.swiper-pagination {
		position: relative;
		user-select: none;
		outline: none;
		width: auto;

		&.swiper-pagination-progressbar {
			width: 100%;
			height: 3px;
			left: 0;
			top: 0;
			background: #bbb;
		}

		&.swiper-pagination-custom {
			top: auto;
			left: auto;
			bottom: auto;
			right: auto;
		}
	}

	&.bullets-v-align-below {
		.swiper-pagination-wrap {
			position: static;
			margin-top: 40px;
		}
	}

	.swiper-pagination-bullets {
		font-size: 0;
	}

	.swiper-pagination-bullet {
		display: inline-block;
		vertical-align: middle;
		box-sizing: border-box;
		margin: 0 2px;
		width: 20px;
		height: 20px;
		border: 0;
		border-radius: 0;
		background: transparent;
		opacity: 1;
		position: relative;
		outline: none;
		color: #d8d8d8;

		&:hover,
		&.swiper-pagination-bullet-active {
			&:before {
				border-color: $accent_color;
				background-color: $accent_color;
			}
		}

		&.swiper-pagination-bullet-active {
			cursor: default;
		}

		&:before {
			@extend %NormalTransition;
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 100%;
			width: 8px;
			height: 8px;
			border: 1px solid $primary_color;
			background: transparent;
			z-index: 1;
		}

		&:only-child {
			visibility: hidden;
		}
	}

	.fraction {
		display: inline-block;
	}

	&.bullets-vertical {
		.swiper-pagination-bullet {
			display: block;
			margin: 0;

			+ .swiper-pagination-bullet {
				margin-top: 10px;
			}
		}
	}

	&.pagination-style-02 {
		.swiper-pagination-bullet {
			width: 22px;
			margin: 0 4px;

			&:before {
				border-radius: 0;
				width: 22px;
				height: 4px;
			}
		}
	}

	&.pagination-style-03 {
		.fraction {
			font-size: 18px;
			font-weight: 500;
			color: #2d2d2d;

			* {
				display: inline-block;
				vertical-align: middle;
			}

			.separator {
				width: 40px;
				height: 1px;
				background: #ababab;
				margin-left: 13px;
				margin-right: 13px;
			}
		}
	}

	&.pagination-style-04 {
		.swiper-pagination-inner {
			width: 94px;
			height: 94px;
			line-height: 94px;
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
		}

		.fraction {
			font-size: 17px;
			font-weight: 500;
			color: $accent_color;
			letter-spacing: 1.31px;

			div {
				display: inline-block;
			}
		}

		.swiper-pagination-inner {
			position: relative;
		}

		.swiper-alt-arrow-button {
			position: absolute;
			width: 21px;
			height: 21px;
			left: 50%;
			top: 50%;
			z-index: 12;
			background-position: center;
			background-repeat: no-repeat;
			cursor: pointer;
		}

		.swiper-alt-arrow-prev {
			transform: translate(-10px, -35px);
			background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAYAAADebrddAAAAAXNSR0IArs4c6QAAAJZJREFUGBltjUEKwyAURNVCs4klTREUWnsAz5P75LRZZCMFCVoj1lkk2LSz8H/nzfAJOWgYhpNS6ol5QOTHsNZq7/1lmqbGOfeqC19hKaUIIdwQWNe16boul8KyFfawEKKNMT42gJlSajnnS9Ebf4bHGHMuQGM/Cj44fDaOI5vnWeec9yt1AT44crTv+3sxrnXg304ptR/PET/We1JFoAAAAABJRU5ErkJggg==");
		}

		.swiper-alt-arrow-next {
			transform: translate(-10px, 15px);
			background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAYAAADebrddAAAAAXNSR0IArs4c6QAAAKBJREFUGBmFjb0KwyAUhWsaqoUMUcgQ6FLo5iv4TL6tW6FLiWKGhiIWgmK9BUNxaO9y7s93zkWMsVNKie7+FELo0Ugpp7ZtX79YuAOHAOKcH7TWl/xhX5tyYhzH8aqUWj8wAMMwdCGEcw3n1Ns8zw72W5L3fu37PsUYu2LAGBtr7VLmDYaFc85TSo/5AyaEPI0xUwFBm+8BeiHEHUDQ+vYGfjU7ajWU+XYAAAAASUVORK5CYII=");
		}

		&.bullets-horizontal {
			.swiper-alt-arrow-prev {
				transform: translate(-40px, -11px) rotate(-90deg);
			}

			.swiper-alt-arrow-next {
				transform: translate(20px, -11px) rotate(-90deg);
			}
		}
	}

	&.pagination-style-05 {
		.swiper-pagination-bullet {
			width: 32px;
			height: 32px;
			margin: 0 4px;
			color: #2d2d2d;

			&:before {
				width: 6px;
				height: 6px;
			}

			&:after {
				@extend %NormalTransition;
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 16px;
				height: 16px;
				opacity: 0;
				border: 1px solid transparent;
				border-radius: 50%;
			}

			&:hover,
			&.swiper-pagination-bullet-active {
				&:after {
					opacity: 1;
					border-color: $accent_color;
				}
			}

			&.swiper-pagination-bullet-active {
				color: $accent_color;
				&:after {
					opacity: 0.5;
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	&.pagination-style-06 {
		.fraction {
			font-size: 24px;
			font-weight: 500;
			letter-spacing: 3.2px;
			color: $accent_color;

			* {
				display: inline-block;
				vertical-align: top;
			}

			.current {
				font-size: 60px;
				line-height: 1;
			}
		}
	}

	// Arrows.
	.swiper-nav-buttons-wrap {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;

		.container,
		.row,
		.col-md-12 {
			height: 100%;
		}
	}

	.swiper-nav-buttons {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}

	.swiper-nav-button {
		transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1),
			visibility 0.25s linear 2s, opacity 0.25s linear 2s;
		background-image: none;
		text-align: center;
		user-select: none;
		outline: none;
		width: 48px;
		height: 48px;
		font-size: 24px;
		color: $primary_color;
		border: 1px solid $primary_color;
		border-radius: 50%;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.01);
		opacity: 0;
		visibility: hidden;
		transform: none;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		margin: 10px;
		pointer-events: auto;

		&.swiper-button-disabled {
			opacity: 0.35;
			cursor: auto;
			pointer-events: none;
		}

		&:hover {
			border-color: $accent_color;
			background: $accent_color;
			color: #fff;
		}

		i {
			font-family: "Font Awesome 5 Pro";
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		// Disable default arrows.
		&:after {
			display: none;
		}
	}

	&.nav-show-always {
		.swiper-nav-button {
			opacity: 1;
			visibility: visible;
		}
	}

	.swiper-button-prev {
		i {
			&:before {
				content: "\f104";
			}
		}
	}

	.swiper-button-next {
		i {
			&:before {
				content: "\f105";
			}
		}
	}

	.nav-button-text {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 13px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	&.nav-style-02 {
		.swiper-nav-button {
			border: 1px solid #eee;
			height: 50px;
			width: 60px;
			border-radius: 0;
		}

		.nav-button-text {
			display: block;
		}

		.nav-button-icon {
			display: none;
		}
	}

	&.nav-style-03 {
		.swiper-nav-button {
			border: 0;
			height: 48px;
			width: 48px;
			background-color: #fff;
			&:hover {
				background-color: $accent_color;
			}
		}
	}
}

@media (max-width: 1199px) {
	.swiper-nav-buttons-wrap {
		display: none;
	}
}

@media (max-width: 766px) {
	.civi-swiper {
		&[data-sm-items="auto"] {
			.swiper-slide {
				width: auto !important;

				img {
					width: auto;
				}
			}
		}
	}
}

@media (min-width: 767px) {
	.civi-swiper {
		&[data-md-items="auto"] {
			.swiper-slide {
				width: auto !important;

				img {
					width: auto;
				}
			}
		}
	}
}

@media (min-width: 1024px) {
	.civi-swiper {
		&[data-lg-items="auto"] {
			.swiper-slide {
				width: auto !important;

				img {
					width: auto;
				}
			}
		}
	}
}
