.section-enterwapp[data-node].ralco-cta {
	--ralco-red: rgb(185, 27, 33);
	--ralco-red-2: rgb(221, 51, 51);
	--ralco-muted: rgb(68, 68, 68);
	--ralco-offwhite: rgb(242, 242, 242);
	--ralco-grey: rgb(237, 237, 237);
	--ralco-dark: rgb(26, 26, 26);
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 23px;
}

.section-enterwapp[data-node].ralco-cta *,
.section-enterwapp[data-node].ralco-cta *::before,
.section-enterwapp[data-node].ralco-cta *::after {
	box-sizing: border-box;
	font-family: inherit;
}

.section-enterwapp[data-node].ralco-cta .ralco-wrap {
	width: 100%;
	max-width: 1245px;
	margin: 0 auto;
	padding: 0;
}

@media (max-width: 1425px) {
	.section-enterwapp[data-node].ralco-cta .ralco-wrap {
		max-width: calc(100vw - 180px);
	}
}

@media (max-width: 999px) {
	.section-enterwapp[data-node].ralco-cta .ralco-wrap {
		max-width: 600px;
	}
}

@media (max-width: 767px) {
	.section-enterwapp[data-node].ralco-cta .ralco-wrap {
		max-width: 320px;
	}
}

.fl-module-ralco-cta > .fl-module-content {
	margin: 0;
}

.fl-row:has(.fl-module-ralco-cta) > .fl-row-content-wrap {
	padding: 0;
}

.fl-col:has(> .fl-col-content > .fl-module-ralco-cta) > .fl-col-content {
	padding-left: 0;
	padding-right: 0;
}

.fl-col-group > .fl-col:only-child:has(> .fl-col-content > .fl-module-ralco-cta) {
	width: 100%;
	max-width: 100%;
}

.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-cta) {
	display: flex;
	flex-wrap: wrap;
}

.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-cta) > .fl-col {
	flex: 1 1 0;
	width: auto;
	max-width: none;
}

@media (max-width: 999px) {
	.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-cta) > .fl-col {
		flex: 0 0 100%;
	}
}

.fl-content:has(.fl-module-ralco-cta) {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}

.fl-page-content:has(.fl-module-ralco-cta) .container,
.fl-page-content:has(.fl-module-ralco-cta) .fl-content,
.fl-page-content:has(.fl-module-ralco-cta) .fl-row-fixed-width,
.fl-page-content:has(.fl-module-ralco-cta) .fl-row-content.fl-row-fixed-width {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.fl-page-content:has(.fl-module-ralco-cta) .container > .row {
	margin-left: 0;
	margin-right: 0;
}

.section-enterwapp[data-node].ralco-cta h1,
.section-enterwapp[data-node].ralco-cta h2,
.section-enterwapp[data-node].ralco-cta h3,
.section-enterwapp[data-node].ralco-cta h4,
.section-enterwapp[data-node].ralco-cta p,
.section-enterwapp[data-node].ralco-cta a,
.section-enterwapp[data-node].ralco-cta li,
.section-enterwapp[data-node].ralco-cta span,
.section-enterwapp[data-node].ralco-cta address,
.section-enterwapp[data-node].ralco-cta strong,
.section-enterwapp[data-node].ralco-cta figure {
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-grid {
	display: flex;
	flex-wrap: wrap;
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-panel {
	flex: 0 0 50%;
	max-width: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 303px;
	overflow: hidden;
	background-color: var(--ralco-dark);
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center center;
	transition: transform 0.6s cubic-bezier(0.24, 1, 0.3, 1);
}

/* The reference masks the first panel white and the second red, and frames the
   text in a 3px box that picks up the opposite colour. */
.section-enterwapp[data-node].ralco-cta .ralco-cta-scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	transition: background-color 0.6s cubic-bezier(0.24, 1, 0.3, 1);
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd) .ralco-cta-scrim {
	background: rgba(255, 255, 255, 0.8);
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(even) .ralco-cta-scrim {
	background: rgba(185, 27, 33, 0.8);
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:hover .ralco-cta-bg {
	transform: scale(1.05);
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd):hover .ralco-cta-scrim {
	background: rgba(255, 255, 255, 0.72);
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(even):hover .ralco-cta-scrim {
	background: rgba(185, 27, 33, 0.9);
}

/* Reference box: a fixed 271x133 - both panels identical, so the two boxes
   line up - with a 3px border and 21.375px of padding, centred in the panel.
   Both boxes are WHITE on white text; only the wash behind them differs. */
.section-enterwapp[data-node].ralco-cta .ralco-cta-body {
	position: relative;
	z-index: 1;
	width: 271px;
	max-width: 100%;
	text-align: center;
	padding: 21.375px;
	border: 3px solid #ffffff;
	color: #ffffff;
	transition: border-color 0.45s cubic-bezier(0.25, 1, 0.2, 1);
}

/* Written with :nth-child on purpose. The previous build coloured the odd
   panel red through a :nth-child rule, and the stale unversioned copy of this
   stylesheet still carries it - a plainer selector here would lose to it on
   specificity no matter which file loads last. */
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd) .ralco-cta-body,
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(even) .ralco-cta-body { color: #ffffff; border-color: #ffffff; }
/* Measured off the reference: the left panel ("Continue Exploring") carries a
   3px #dd3333 frame with its action line in the darker brand red, the right one
   is white on white. Neither changes colour on hover there - the white-on-hover
   border was mine, and it is what made the red frame disappear under the
   cursor. Both selectors carry :nth-child so neither can lose to the cached
   copy of this stylesheet, which already ships an (even) rule. */
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd) .ralco-cta-body { color: #ffffff; border-color: var(--ralco-red-2); }
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd):hover .ralco-cta-body { border-color: var(--ralco-red-2); }
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(even):hover .ralco-cta-body { border-color: #ffffff; }

/* Read off the <em> that actually holds each line on the reference, not the
   wrapper: the left panel is red throughout ("Continue Exploring" AND
   "View More" are rgb(185,27,33)) and the right panel is white throughout. */
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd) .ralco-cta-label { color: var(--ralco-red); }
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(even) .ralco-cta-label { color: #ffffff; }

.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd) .ralco-cta-action,
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd) .ralco-cta-action a,
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(odd) .ralco-cta-action a:hover { color: var(--ralco-red); }

.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(even) .ralco-cta-action,
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(even) .ralco-cta-action a,
.section-enterwapp[data-node].ralco-cta .ralco-cta-panel:nth-child(even) .ralco-cta-action a:hover { color: #ffffff; }

.section-enterwapp[data-node].ralco-cta .ralco-cta-label {
	display: block;
	font-size: 15px;
	line-height: 23px;
	font-weight: 300;
	color: #ffffff;
	margin: 0;
	padding-bottom: 27px;
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-action {
	font-size: 20px;
	line-height: 34px;
	font-weight: 400;
	color: #ffffff;
	margin: 0;
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-action a {
	color: #ffffff;
	text-decoration: none;
}

.section-enterwapp[data-node].ralco-cta .ralco-cta-action a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/* Typical laptop screen size*/
@media (max-width: 1400px) {
	.section-enterwapp[data-node].ralco-cta .ralco-cta-panel { min-height: 270px; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 999px) {
}

/* Below the reference's 1000px container breakpoint */
@media (max-width: 999px) {
	.section-enterwapp[data-node].ralco-cta .ralco-cta-panel { flex: 0 0 100%; max-width: 100%; min-height: 225px; }
	.section-enterwapp[data-node].ralco-cta .ralco-cta-action { font-size: 18px; }
}

/* Mobile screen size */
@media (max-width: 480px) {
	.section-enterwapp[data-node].ralco-cta .ralco-cta-panel { min-height: 153px; }
}