
/************************************************************
 * Hero
 ************************************************************/
.service-gif img:not(.postid-139 .service-gif img):not(.postid-4478 .service-gif img) {
	width: min(350px, 100%);
	max-height: 400px;
}

/* Marketing GIF position */
.postid-150 .service-gif {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(80%, -50%);
}

.postid-150 .service-gif img {
	width: auto !important;
}

/* Account Management GIF position */
.postid-4478 #hero-gif-section {
	align-self: center;
}

@media only screen and (max-width: 980px) {
	.postid-150 .service-gif {
		position: relative;
		top: 50%;
		right: 0;
		transform: translate(70%, 0%);
	}
	
	.postid-150 #hero-gif-section {
		background-position: left;
		background-size: 60vw;
	}
}

@media only screen and (max-width: 768px) {
	.service-gif img {
		max-height: 50vw;
	}
}

@media only screen and (max-width: 500px) {
	.postid-150 .service-gif img {
		width: auto !important;
		max-height: 250px !important;
	}
}

/************************************************************
 * Benefits Container
 ************************************************************/
.benefits-container .benefit {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 3em;
}

.benefits-container .benefit .content {
	font-weight: 300;
}

.benefits-container .benefit > div {
	flex: 1 1 48%;
}

.benefits-container .benefit > div:nth-child(1) {
	max-width: 50%;
}

.benefits-container .benefit:nth-child(even) {
	flex-direction: row-reverse;
}

.benefits-container .benefit:nth-child(even) > div:nth-child(2), .benefits-container .benefit:nth-child(odd) > div:nth-child(1) {
	margin-right: 2em;
}

.benefits-container .benefit a.lf-btn.case-study-link {
	display: block;
	padding: 0;
	margin-top: 1em;
	border: none;
	color: var(--lfRed);
	font-weight: 600;
	font-size: 19px;
}

.benefits-container .benefita.lf-btn.case-study-link:hover {
	text-decoration: underline;
}

.benefits-container .benefit a.lf-btn.demo-link {
	background-color: var(--lfRed);
	color: #fff;
	margin-top: 1em;
	padding: .5rem 2rem;
}

@media only screen and (max-width: 980px) {
	.benefits-container .benefit {
		display: grid;
		gap: 2em;
	}
	
	.benefits-container .benefit .gif-only {
		margin: 0 !important;
	}
	
	.benefits-container .benefit > div:nth-child(1) {
		max-width: 100%;
		margin-bottom: 1em;
	}
}
