/* ==========================================================================
   Portfolio List shortcode styles
   ========================================================================== */

.qodef-portfolio-list {

	.qodef-e-inner {
		position: relative;
	}

	&.qodef-has-appear {

		.qodef-e-inner {
			clip-path: inset(0 100% 0 0);
			transition: clip-path .8s cubic-bezier(0.37, 0, 0.63, 1);
		}

		.qodef--appeared {

			.qodef-e-inner {
				clip-path: inset(0 0 0 0);
			}
		}
	}

	.qodef-e-inner,
	.qodef-e-media,
	.qodef-e-content {
		@include qodefRelativeLayout();
	}

	.qodef-e-media {

		> * {
			margin-bottom: 30px;
		}

		iframe {
			display: block;
			height: 100%;
		}
	}

	.qodef-e-media-image {
		position: relative;
		display: inline-block;
		vertical-align: top;
		width: 100%;

		a, img {
			display: block;
			width: 100%;
		}

		&.qodef--background {
			width: 100%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;

			img {
				visibility: hidden;
			}
		}
	}

	.qodef-e-title {
		margin: 0;
	}

	.qodef-e-excerpt {
		margin: 15px 0 0;
	}

	.qodef-e-read-more {
		margin: 15px 0 0;
	}

	.qodef-e-top-holder {
		margin-bottom: 2px;
	}

	.qodef-e-post-link {
		@include qodefAbsoluteLayout();
	}

	.qodef-m-pagination {
		margin-top: 35px;
	}

	&.qodef-items--fixed {

		.qodef-e-image {
			//because of the custom padding around item
			height: 100%;
			overflow: hidden;
		}

		.qodef-e-media-image {
			height: 100%;

			a {
				@include qodefRelativeLayout();
				height: 100%;
			}
		}
	}

	&.qodef-swiper-container {

		.swiper-pagination-fraction {
			margin-left: 56px;

			@include qodefScreenSize680 {
				margin-left: 0;
			}
		}
	}

	.qodef-custom-padding {

		.qodef-e-inner {
			width: auto;
		}
	}
}