.view-slideshow {
	color: $color-beta;
	.container > img {
		width: 100%;
		height: auto;
		max-width: none;
		transform: translate(0, -13%);
	}
	.promo-container {
		position: relative;
		// height: 250px !important;
		// max-width: 1680px;
	}
	.swiper-wrapper {
		.more {
			position: absolute;
			bottom: 0;
			width: 100%;
			text-align: center;
			height: 100px;
			text-transform: uppercase;
			font-size: 11px;
			cursor: pointer;
			span {
				display: block;
				margin: 0 auto;
				width: 10px;
				height: 38px;
				position: relative;
			}
			span:before {
				position: absolute;
				top: 0px;
				left: 50%;
				margin-left: -2px;
				width: 1px;
				height: 38px;
				background: #fff;
				content: ' ';
			}
			span:after {
				content: '';
				display: block;
				margin: 0;
				padding: 0;
				width: 7px;
				height: 7px;
				position: absolute;
				bottom: 0;
				border-top: 1px solid #fff;
				border-right: 1px solid #fff;
				behavior: url(-ms-transform.htc);
				-moz-transform: rotate(135deg);
				-webkit-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				transform: rotate(135deg);
			}
		}
	}
	.swiper-slide {
		overflow: hidden;
		position: relative;
		// background-attachment: fixed;
		background-size: cover;
		transition: 1s ease;
		opacity: 0.5;
		&.loaded {
			opacity: 1;
		}

		.promo-image {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: cover;
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
		}

		.container.inner {
			max-width: 1200px;
			margin: 0 auto;
			position: relative;
			// height: 280px !important;
			top: 50px;
			@include breakpoint($breakpoint-s) {
				top: 150px;
			}
			@include breakpoint($breakpoint-l) {
				top: 200px;
			}
			&:before {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;

				opacity: 0.9;
				@include breakpoint($breakpoint-m) {
					// background: #ffba00;
				}
			}
		}

		.overlay {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #999;
			background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(255,255,255,0) 70%);
			opacity: 0.7;
		}
	}
}

.slideshow-text {
	position: absolute;
	top: initial;
	bottom: -200px;
	width: 100%;
	transition: 1s ease;

	&.loaded {
		top: initial;
		bottom: 30px;
	}

	@include breakpoint($breakpoint-l) {
		&.top-left {

		}
		&.top-center {

		}
		&.top-right {

		}
		&.middle-left {

		}
		&.middle-center {

		}
		&.middle-right {

		}
		&.bottom-left {
			bottom: 30px;
			left: 0;
		}
		&.bottom-center {
			bottom: 30px;
			left: 30%;
		}
		&.bottom-right {
			bottom: 30px;
			right: 0;
			.promo-text {
				text-align: right;
			}
		}
	}
}

.slideshow-title {
	position: relative;
	left: 0;
	display: block;
	width: 100%;
	padding: 0 20px;
	z-index: 1;
	@include breakpoint($breakpoint-l-max) {
		padding: 0;
	}

	.title {
		display: block;
		font-size: 22px;
		line-height: 1.2em;
		//text-shadow: 0 2px 5px rgba(225, 225, 225, 0.5);
		padding: 0;
		margin: 0 auto;
		text-transform: none;
		font-family: $base-font !important;
		color: $color-beta;

		@media (min-width: 480px) {
			font-size: 32px;
		}
		@media (min-width: 768px) {
			// line-height: 1.5em;
		}
		@include breakpoint($breakpoint-l-max) {
			margin: 0 auto;
		}

		.page-node-type-page.path-frontpage & {
		}
	}
	.highlight {
		display: block;
		@media (min-width: 980px) {
			//max-width: 1120px;
			margin: 0 auto;
			//padding: 0 40px;
			padding: 0 20px;
		}
		a {
			background: rgba(92, 119, 98, 0.6);
			filter: progid:DXImageTransform.Microsoft.gradient(
					GradientType=0,
					startColorstr='#5c7762',
					endColorstr='#5c7762'
				); /* IE */
			border-radius: 0;
			color: #fff;
			text-transform: uppercase;
			padding: 9px 12px;
		}
	}
}
.promo-text {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	padding: 0 20px;
	text-align: initial;
	z-index: 1;
	@include breakpoint($breakpoint-l-max) {
		padding: 0;
	}
	.text {
		display: block;
		padding: 0 0 20px;
		font-size: 22px;
		line-height: 1.5em;
		font-weight: 400;
		@media (min-width: 980px) {
			margin: 20px auto;
			padding: 0 30px 20px;
		}
	}
	h1 {
		color: $color-beta;
		@media (max-width: 560px) {
			font-size: 1.5rem;
		}
	}
	h2 {
		margin: 0;
	}
	img {
		width: auto;
	}
}
.promo-button {
	position: absolute;
	bottom: 60px;
	left: 0;
	display: block;
	width: 100%;
	padding: 0 20px;
	text-align: center;
	z-index: 1;
	@include breakpoint($breakpoint-l-max) {
		padding: 0;
	}
	.b {
		display: inline-block;
		color: $color-delta;
		font-size: 15px;
		font-weight: 300;
		a {
			display: block;
			color: $color-delta;
			letter-spacing: 0px;
			padding: 8px 22px;
			border-radius: 0;
			border: 1px solid $color-delta;
			white-space: nowrap;
			@include breakpoint($breakpoint-xs) {
				display: inline-block;
			}
			&:hover,
			&:focus {
				background-color: $color-delta;
				border: 1px solid $color-delta;
				color: $color-beta;
				text-decoration: none;
			}
			&:first-child {
				@include breakpoint($breakpoint-xs) {
					margin-right: 15px;
				}
			}
			&:nth-child(2) {
				margin-top: 10px;
				@include breakpoint($breakpoint-xs) {
					margin-left: 15px;
					margin-top: 0;
				}
			}
		}
	}
}

.video-embed-field-responsive-video {
	position: relative;
}

.video-embed-field-responsive-video:after {
	content: '';
	display: block;
	padding-bottom: 56.25%;
}

.video-embed-field-responsive-video iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.video-embed-field-responsive-modal {
	max-width: 100%;
}

.swiper-pagination,
.swiper-pagination-slider {
	.swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		background: $color-gamma;
		position: relative;
		&:before {
			content: '';
			width: 25px;
			height: 25px;
			position: absolute;
			left: -8px;
			top: -8px;
		}

		&.swiper-pagination-bullet-active {
			&:after {
				content: '';
				border: 1px solid $color-alpha;
				width: 18px;
				height: 18px;
				position: absolute;
				border-radius: 50%;
				left: -5px;
				top: -5px;
			}
		}
	}
}

.swiper-button-next {
	background-image: url('../images/flex-next-dark@2x.png');
	background-repeat: no-repeat;
	background-size: 41px 41px;
}
.swiper-button-prev {
	background-image: url('../images/flex-prev-dark@2x.png');
	background-position: -7px 0;
	background-repeat: no-repeat;
	background-size: 41px 41px;
}

.testimonials-slider {
	.heading {
		text-align: center;
		a {
			color: $color-alpha;
		}
	}
	.slick-track {
		// height: 160px;
		margin: 20px 0;
	}
	.slick-slide {
		width: 400px;
		padding: 0 1rem;
		cursor: grab;
		user-select: none;
		outline: none;

	}
	.slick-prev:before,
	.slick-next:before {
		color: black;
	}
}