/* ==========================================================================
   Horizontal showcase shortcode style - begin
   ========================================================================== */

.qodef-horizontal-showcase {
	position: relative;
	margin: 0;
	height: 100vh;
	overflow: hidden;

	.admin-bar & {
		height: calc(100vh - 32px);
	}

	.qodef-slides-holder {
		height: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;

		.scroll-content {
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0;
		}

		.scrollbar-track {

			&.scrollbar-track-y {
				display: none !important;
			}

			.scrollbar-thumb {
				background: var(--qode-main-color);
			}
		}
	}

	.scroll-content {

		.qodef-horizontal-slide {
			opacity: 1;
		}
	}

	.qodef-horizontal-slide {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: $additional-background-color;
		opacity: 0;

		&.intro {
			width: 100vw;
			background-color: #fff;

			.qodef-item-featured {
				width: 47.708%;
				height: 100%;
				display: inline-block;

				img {
					display: block;
					height: 100%;
					object-fit: cover;
				}
			}

			.qodef-slide-title {
				display: inline-block;
				height: 100%;
				width: 8.854%;
				-webkit-transform: rotate(-90deg);
				-moz-transform: rotate(-90deg);
				transform: rotate(-90deg);

				h1 {
					font-size: 120px;
					font-family: $meta-font;
					line-height: 0.8em;
					color: $heading-color;
					font-weight: 400;
					position: absolute;
					-webkit-transform: translate(-50%, -50%);
					-moz-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					top: 50%;
					left: 50%;
					margin: 0;
				}
			}

			.qodef-slide-gallery {
				width: 43.437vw;
				height: 100%;
				display: inline-block;

				.qodef-image-gallery {
					height: 100% !important;
				}

				.swiper-pagination-bullets {
					justify-content: flex-end;
					padding-right: 47px;
					bottom: 67px !important;
				}

				.swiper-slide {

					img {
						width: 100%;
						height: 100% !important;
						object-fit: cover;
					}
				}

				.swiper-pagination {

					&.swiper-pagination-fraction {
						position: absolute;
					}
				}
			}

		}

		&.info {
			position: relative;
			background-color: $heading-color;
			width: 43vw;

			.qodef-slide-content {
				width: auto;
				padding: 95px 60px 95px 100px;
				height: 100%;

				.qodef-title {
					display: flex;
					height: 100%;

					.qodef-section-title {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.qodef-m-title {
							color: #fff;
							align-items: flex-start;
						}

						.qodef-m-text {
							align-items: flex-end;
							font-family: $text-font;
							font-weight: $text-font-weight;
							font-size: $text-font-size;
							line-height: $text-line-height;
							color: #fff;
							width: 60%;
						}
					}
				}

				.next-slide {
					position: absolute;
					bottom: 65px;
					right: 60px;
					color: #fff;
					width: 135px;
					height: 135px;
					display: flex;
					cursor: pointer;

					svg {
						fill: currentColor;
						display: block;
						margin: auto;

						g {
							&:first-of-type {
								transform: translateX(-100%);
								transition: transform .4s ease;
							}

							&:last-of-type {
								transform: translateX(0);
								transition: transform .4s ease .2s;
							}
						}
					}

					&:after {
						content: '';
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						border: 1px solid currentColor;
						border-radius: 50%;
						transform: rotate(0);
						transform-origin: 50% 47%;
						transition: transform .8s ease-in-out;
					}

					&:hover {

						svg {

							g {
								&:first-of-type {
									transform: translateX(0);
									transition: transform .4s ease .2s;
								}

								&:last-of-type {
									transform: translateX(100%);
									transition: transform .4s ease;
								}
							}
						}

						&:after {
							transform: rotate(360deg);
						}
					}
				}
			}
		}

		&.portfolio {
			padding: 54px 63px 58px 90px;
			width: fit-content;

			.portfolio-item {
				position: relative;
				height: 100%;
				margin-right: 80px;
				width: 23.8vw;

				&:last-of-type {
					margin-right: 0;
				}

				.qodef-e-media-image {
					@include qodefAbsoluteLayout();

					img {
						height: 100%;
						object-fit: cover;
					}
				}

				.qodef-e-content {
					@include qodefAbsoluteLayout();
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding: 2%;
					background-color: rgba($additional-background-color, .85);
					opacity: 0;
					transition: opacity .3s ease-out;

					a {
						position: relative;
						z-index: 3;
					}
				}

				.qodef-e-title {
					@include qodefHeadingStyle(h5);
					color: $heading-color;
					transform: translateY(20px);
					opacity: 0;
					transition: opacity .4s ease-out, transform .6s ease-out;

					a {
						color: inherit;
					}
				}

				.qodef-e-info {

					> * {
						color: #fff;
					}

					a {

						&:hover {
							color: var(--qode-main-color);
						}
					}
				}

				.qodef-e-post-link {
					z-index: 2;
				}

				&:hover {


					.qodef-e-content {
						opacity: 1;
					}

					.qodef-e-title {
						transform: translateY(0);
						opacity: 1;
					}
				}

			}
		}

		&.last {
			width: 18.385vw;
			height: 100%;
			background-color: $heading-color;
			position: relative;
			justify-content: center;

			.qodef-social-networks {
				display: flex;
				flex-direction: column;
				color: #fff;

				.qodef-social-title {
					display: block;
					color: currentColor;
					font-family: $heading-font;
					font-weight: 700;
					font-size: 19px;
					line-height: $text-line-height;
					text-transform: uppercase;
					margin-bottom: 17px;
				}

				.qodef--textual {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-bottom: 5px;

					a {
						position: relative;
						color: inherit;
						font-family: $text-font;
						font-size: 18px;
						font-weight: $text-font-weight;
						line-height: $text-line-height;
						transition: color .2s ease-out;

						&:after {
							content: '';
							position: absolute;
							left: 0;
							right: 0;
							bottom: 1px;
							width: 100%;
							height: 1px;
							background-color: currentColor;
							transform-origin: left;
							transform: scaleX(0);
							transition: transform .6s cubic-bezier(0.33, 1, 0.68, 1);
						}

						&:hover {
							color: currentColor;

							&:after {
								transform: scaleX(1);
							}
						}
					}

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	.qodef-scroll-back {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		height: auto;
		background-color: transparent;
		visibility: hidden;
		opacity: 0;
		transition: all .3s ease;

		&.qodef-appear {
			visibility: visible;
			opacity: 1;
		}

		.qodef-mark {
			position: absolute;
			bottom: 65px;
			left: 25%;
			color: #fff;
			width: 135px;
			height: 135px;
			display: flex;
			cursor: pointer;

			svg {
				fill: currentColor;
				display: block;
				margin: auto;

				g {
					&:first-of-type {
						transform: translateX(100%);
						transition: transform .4s ease;
					}

					&:last-of-type {
						transform: translateX(0);
						transition: transform .4s ease .2s;
					}
				}
			}

			&:after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				border: 1px solid currentColor;
				border-radius: 50%;
				transform: rotate(0);
				transform-origin: 50% 47%;
				transition: transform .8s ease-in-out;
			}

			&:hover {

				svg {

					g {
						&:first-of-type {
							transform: translateX(0);
							transition: transform .4s ease .2s;
						}

						&:last-of-type {
							transform: translateX(-100%);
							transition: transform .4s ease;
						}
					}
				}

				&:after {
					transform: rotate(360deg);
				}
			}
		}
	}

	.scrollbar-thumb {
		border-radius: 0;
	}
}

/* ==========================================================================
   Horizontal showcase shortcode style - end
   ========================================================================== */