/* LW ADS */
.lw_ad {
	display: none;
	z-index: 100;
	line-height: 0;
	text-align: center;
}
.lw_ad .lw_ad_creative {
	overflow: hidden;
	margin: 0 auto;
}
.lw_ad iframe {
	display: block;
	border: 0;
	transform-origin: 0 0;
}

/* Anchored near the top of the hero and capped against the viewport height, so
   the whole creative sits above the fold on load - the script scales it down to
   whatever the cap leaves. */
.lw_ad_left,
.lw_ad_right {
	position: absolute;
	top: 32px;
	width: 160px;
	height: 600px;
	max-height: calc(100vh - 200px);
}
.lw_ad_left {
	left: 16px;
}
.lw_ad_right {
	right: 16px;
}
.lw_ad_bottom {
	width: 320px;
	height: 100px;
	margin: 24px auto 0;
}

@media screen and (min-width: 1440px) {
	.lw_ad_left,
	.lw_ad_right {
		display: block;
	}
}
@media screen and (min-width: 1680px) {
	.lw_ad_left {
		left: 32px;
	}
	.lw_ad_right {
		right: 32px;
	}
}
/* Everything below the rails breakpoint: the banner sits in the flow, so it
   cannot collide with the container at any width. */
@media screen and (max-width: 1439px) {
	.lw_ad_bottom {
		display: block;
	}
}
/* Last, so it beats the display:block above: an unfilled slot gives its reserved box back. */
.lw_ad_empty {
	display: none;
}
/* LW ADS */