/* ==========================================================================
   Image With Text shortcode styles
   ========================================================================== */

.qodef-image-with-text {
	@include qodefRelativeLayout();

	&.qodef-has-appear {
		opacity: 0;
		transform: translateY(50px);
		transition: .7s ease-out;

		&.qodef--appeared {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.qodef-m-image {
		@include qodefRelativeLayout();

		a, img {
			display: block;
		}
	}

	.qodef-m-content {
		position: relative;
		display: inline-flex;
		width: 100%;
		align-items: baseline;
	}

	.qodef-m-tagline {
		display: inline-block;
		font-size: 25px;
		font-family: $meta-font;
		color: #000;
		font-style: italic;
		margin: 0 17px 0 0;
	}

	.qodef-m-title {
		display: inline-block;
		margin: 31px 0 0;
	}

	.qodef-m-text {
		margin: 15px 0 0;
	}

	&.qodef-e-image-shadow {

		.qodef-m-image {
			box-shadow: 4px 4px 27.26px 1.74px rgba(0, 0, 0, 0.09);
		}
	}

	&.qodef-layout--text-on-image {
		width: auto;

		.qodef-m-content {
			display: block;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.qodef-m-title {
				display: block;
				margin: 0;
			}
		}
	}
}