/*------------------------------------*\

    Contained Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Contained Image + Text' block.
    If there is any reasons why you would need to style them separately,
    please create a block-specific stylesheet for it (don't forget to register that block-specific stylesheet in acf-start-blocks.php)

\*------------------------------------*/

.flex-row {
	display: flex;
	flex-wrap: wrap;
}

/* .image-text .flex-row {
    align-items: center
} */

.image-text__img__wrap {
	height: 222px;
	position: relative;
}

.image-text__img__wrap img {
	box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);
}

.image-text__bttn {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: rgba(0, 44, 95, 0.5);
	border: none !important;
}
.image-text__bttn::after,
.image-text__bttn::before {
	display: none !important;
}

.image-text__text {
	padding-top: 40px;
	color: #475565;
}

.bg-light-gray .image-text__text h2::after,
.bg-light-gray .image-text__text h2 span::before,
.bg-light-gray .image-text__text h2 span::after {
	background: #d0d3d4;
}

@media (min-width: 768px) {
	.image-text__img__wrap {
		height: 444px;
	}
}

@media (min-width: 1200px) {
	.flex-opposite {
		flex-direction: row-reverse;
	}

	.image-text__img__wrap {
		height: 403px;
	}

	.image-text__text {
		padding-top: 0;
	}

	.image-text--left .image-text__img__wrap {
		margin-right: 18px;
	}

	.image-text--right .image-text__img__wrap {
		margin-left: 18px;
	}

	.image-text__bttn svg {
		transition: all 0.5s;
	}

	.image-text__bttn:hover svg {
		transform: scale(1.1);
	}
	.flex-opposite {
		flex-direction: row-reverse;
	}
	/* .image-text__text .h2:first-of-type,
    .image-text__text h2:first-of-type {
        margin-top: -10px;
    } */
}
.bg-light-gray + .bg-light-gray {
	padding-top: 0;
}

/*
 * Logos
 */
.image-text__logos {
	margin: 20px 0 0;
	padding: 0;
}

.image-text__logos li {
	margin: 0;
	width: 70px;
}

.image-text__logos li:before {
	content: none !important;
}

/*
.image-text__logos li img {
    -webkit-filter: invert(100%); /* Safari/Chrome */
/* filter: invert(100%);
} */

@media (min-width: 1200px) {
	.image-text__logos li {
		width: 110px;
	}
}