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

.qodef-horizontal-showcase {

	&.qodef--has-appear {

		@include qodefScreenSize768 {
			opacity: 1;
		}

		&.qodef--appeared {
			opacity: 1;
		}
	}

	@include qodefScreenSize768 {
		height: auto !important;
	}

	.qodef-slides-holder {

		@include qodefScreenSize768() {
			display: block;
			width: 100%;
			height: 100%;
		}

		.scroll-content {

			@include qodefScreenSize768() {
				display: none;
			}
		}
	}

	.qodef-horizontal-slide {

		@include qodefScreenSize768 {
			align-items: flex-start;
			justify-content: center;
			flex-direction: column;
			width: 100% !important;
			height: 100%;
			padding: 0;
			opacity: 1;
		}

		&.intro {

			.qodef-item-featured {

				@include qodefScreenSize768() {
					width: 100%;
				}
			}

			.qodef-slide-title {

				@include qodefScreenSize768() {
					display: block;
					height: 100%;
					width: 100%;
					-webkit-transform: rotate(0);
					-moz-transform: rotate(0);
					transform: rotate(0);
				}

				h1 {
					@include qodefScreenSize1024() {
						font-size: 80px;
					}

					@include qodefScreenSize768() {
						position: relative;
						margin: 25px;
						text-align: center;
						font-size: 60px;
						transform: none;
						top: unset;
						left: unset;
					}

					@include qodefScreenSize680() {
						font-size: 50px;
					}
				}
			}

			.qodef-slide-gallery {

				@include qodefScreenSize768() {
					width: 100%;
					height: 100%;
					display: block;

					.swiper-pagination-bullets {
						position: absolute !important;
					}
				}

				@include qodefScreenSize680 {

					.swiper-pagination-bullets {
						padding-right: 23px;
						bottom: 25px !important;
					}
				}
			}

		}

		&.info {

			@include qodefScreenSize768 {
				height: 100vh;
			}

			.qodef-slide-content {

				@include qodefScreenSize1280() {
					padding: 10% 5% 10% 10%;
				}

				@media only screen and (max-width: 860px) and (orientation: landscape) {
					padding: 7% 5% 10% 10%;
				}

				@include qodefScreenSize768() {
					width: 100%;
					padding: 12% 10%;
				}

				.qodef-title {

					.qodef-section-title {

						@include qodefScreenSize1024() {
							justify-content: flex-start;
						}

						@include qodefScreenSize768() {
							justify-content: space-between;
						}

						.qodef-m-title {

							@include qodefScreenSize1024() {
								font-size: 40px;
							}

							@media only screen and (max-width: 860px) and (orientation: landscape) {
								font-size: 37px;
							}
						}

						.qodef-m-text {
							
							@media only screen and (max-width: 1100px) {
								font-size: 18px;
							}

							@include qodefScreenSize1024() {
								width: 100%;
								position: absolute;
								bottom: 20%;
							}

							@media only screen and (max-width: 860px) and (orientation: landscape) {
								bottom: 15%;
								font-size: 16px;
							}

							@include qodefScreenSize768() {
								position: relative;
								margin-top: 90px;
								bottom: unset;
							}
						}
					}
				}

				.next-slide {
					
					@include qodefScreenSize1280() {
						bottom: 50px;
						right: 50px;
					}

					@media only screen and (max-width: 1100px) {
						width: 100px;
						height: 100px;
					}

					@media only screen and (max-width: 920px) and (orientation: landscape) {
						width: 80px;
						height: 80px;
						bottom: 10px;
					}

					@include qodefScreenSize768() {
						display: none;
					}
				}
			}
		}

		&.portfolio {

			@include qodefScreenSize768() {
				display: block;
				padding: 80px 7.4%;

				.portfolio-item {
					position: relative;
					height: 100%;
					margin-right: 0;
					margin-bottom: 80px;
					width: 100%;
					display: block;
					float: none;

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

					.qodef-e-media-image {
						position: relative;

						img {
							height: auto;
							margin: 0 auto;
							display: block;
						}
					}
				}
			}

		}

		&.last {

			@include qodefScreenSize1024 {
				width: 30vw;
			}

			@include qodefScreenSize768() {
				padding: 40px 5%;
				height: 100vh;

				.qodef-social-networks {
					position: relative;
					top: unset;
					left: unset;
					transform: none;
					color: #fff;
					display: block;
					margin: 0 auto;
				}
			}

		}

		.qodef-scroll-back {

			.qodef-mark {

				@media only screen and (max-width: 1100px) {
					width: 100px;
					height: 100px;
				}

				@include qodefScreenSize1024 {
					left: 50%;
					transform: translatex(-50%);
				}

				@media only screen and (max-width: 920px) and (orientation: landscape) {
					width: 80px;
					height: 80px;
					bottom: 10px;
				}

				@include qodefScreenSize768() {
					display: none;
				}
			}
		}
	}
}
/* ==========================================================================
   Horizontal showcase shortcode responsive style - end
   ========================================================================== */