/*==================================================================
	Atera slider captions - centering + fluid typography

	Slider Revolution places every layer absolutely: it measures the layer
	and puts it at (gridwidth / 2 - layerwidth / 2). That measurement is
	taken before the layer is scaled down for the current breakpoint, and
	any extra width inside the layer (a trailing space, the gap that
	letter-spacing leaves after the last character) counts as well - so the
	visible text ends up next to the middle instead of on it. On top of
	that the font size comes from four fixed breakpoints, so the text jumps
	in steps at 1240 / 1024 / 778 / 480px instead of following the window.

	These rules take both things over:
	 - the caption layers are stretched across the whole slide and centered
	   by the browser, so the measured layer width no longer matters;
	 - size, line height, letter spacing and the spacing between title,
	   subtitle and button are fluid (clamp), so the whole block grows and
	   shrinks smoothly with the viewport.

	Everything is !important because Slider Revolution writes these same
	properties inline on the elements on every resize.

	NOTE: no rem units here - bootstrap.min.css sets html{font-size:10px},
	which makes rem values misleading. Sizes are in px / vw / vh / em.
==================================================================*/

#rev_slider_4_1 {
	/* min - fluid - max. The vh term keeps the block in proportion on short
	   or landscape windows, the way the slider's own scaling does. */
	--atera-title-fs: clamp(22px, min(6.2vw, 11.5vh), 96px);
	--atera-subtitle-fs: clamp(11px, min(1.3vw, 2.4vh), 21px);
	--atera-button-fs: clamp(11px, min(0.95vw, 1.75vh), 15px);

	/* line heights as multipliers - used both for text and for the layout
	   math below, so they must stay unitless */
	--atera-title-lh: 1.06;
	--atera-subtitle-lh: 1.5;
	--atera-button-lh: 3.3;

	/* vertical spacing between the three layers */
	--atera-gap: clamp(12px, 1.4vw, 20px);

	/* how many subtitle lines the block reserves room for - the layers are
	   positioned independently of each other, so on the narrow screens where
	   a long subtitle can wrap this has to be reserved up front, otherwise
	   the second line would run into the button */
	--atera-subtitle-lines: 1;

	/* letter-spacing of the subtitle, reused as text-indent (see below) */
	--atera-subtitle-ls: min(0.6vw, 0.55em);

	/* --- derived layout values ------------------------------------
	   Every layer is pinned to the middle of the slide (top:50% below,
	   data-voffset is 0 in index.html), so the margin-top of each layer is
	   simply the distance of its top edge from the middle. --- */
	--atera-subtitle-h: calc(
		var(--atera-subtitle-lh) * var(--atera-subtitle-fs) * var(--atera-subtitle-lines)
	);
	--atera-block-h: calc(
		var(--atera-title-lh) * var(--atera-title-fs) +
		var(--atera-subtitle-h) +
		var(--atera-button-lh) * var(--atera-button-fs) +
		2 * var(--atera-gap)
	);
}

/*-- 1. Stretch the caption layers across the full slide ------------*/

#rev_slider_4_1 .tp-parallax-wrap.atera-center-layer,
#rev_slider_4_1 .tp-parallax-wrap.atera-center-layer .tp-loop-wrap,
#rev_slider_4_1 .tp-parallax-wrap.atera-center-layer .tp-mask-wrap {
	left: 0 !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Pin every layer to the middle of the slide. Slider Revolution normally
   centers each layer on that line using the height it measured for it, and
   that measurement is not always up to date (it is taken before the layer
   is scaled for the breakpoint), which is what pushed the button out of
   place. top:50% + the margins in part 3 make the stack independent of it.

   The layers now cover the full width, so they must also not swallow clicks
   or the hover effect of the particle background. */
#rev_slider_4_1 .tp-parallax-wrap.atera-center-layer {
	top: 50% !important;
	pointer-events: none !important;
}

#rev_slider_4_1 .atera-slider-title,
#rev_slider_4_1 .atera-slider-subtitle {
	left: 0 !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	padding-left: 4vw !important;
	padding-right: 4vw !important;
	text-align: center !important;
}

/*-- 2. Fluid type --------------------------------------------------*/

/* Slider Revolution also writes its breakpoint font-size / line-height on
   the elements inside a layer (the <span> in the subtitle, the per-character
   spans it creates for the title animation). Left alone, a larger inline
   line-height makes the line box taller than the layer and throws the
   spacing below it off. */
#rev_slider_4_1 .atera-slider-title *,
#rev_slider_4_1 .atera-slider-subtitle * {
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
}

#rev_slider_4_1 .atera-slider-title {
	font-size: var(--atera-title-fs) !important;
	line-height: var(--atera-title-lh) !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
}

#rev_slider_4_1 .atera-slider-subtitle {
	font-size: var(--atera-subtitle-fs) !important;
	line-height: var(--atera-subtitle-lh) !important;
	letter-spacing: var(--atera-subtitle-ls) !important;
	/* letter-spacing also lands after the last character and drags the line
	   half a space to the left; an equal text-indent cancels it out. */
	text-indent: var(--atera-subtitle-ls) !important;
	white-space: nowrap !important;
}

/* The button keeps its own colours from the markup, it only gets the same
   fluid sizing so it stays in proportion with the text above it. */
#rev_slider_4_1 .atera-slider-button {
	position: relative !important;
	display: inline-block !important;
	left: 0 !important;
	top: 0 !important;
	pointer-events: auto !important;
	font-size: var(--atera-button-fs) !important;
	line-height: var(--atera-button-lh) !important;
	letter-spacing: 0.05em !important;
	padding-left: 2.3em !important;
	padding-right: 2.3em !important;
	white-space: nowrap !important;
}

/* the button is an inline-block, so it is centered by its wrapper */
#rev_slider_4_1 .tp-parallax-wrap.atera-button-layer,
#rev_slider_4_1 .tp-parallax-wrap.atera-button-layer .tp-loop-wrap,
#rev_slider_4_1 .tp-parallax-wrap.atera-button-layer .tp-mask-wrap {
	text-align: center !important;
}

/*-- 3. Vertical placement of the block -----------------------------

	title / gap / subtitle / gap / button, stacked from the top of the block,
	with the block itself centered on the middle of the slide.
-------------------------------------------------------------------*/

#rev_slider_4_1 .tp-parallax-wrap.atera-title-layer {
	margin-top: calc(var(--atera-block-h) / -2) !important;
}

#rev_slider_4_1 .tp-parallax-wrap.atera-subtitle-layer {
	margin-top: calc(
		var(--atera-block-h) / -2 +
		var(--atera-title-lh) * var(--atera-title-fs) +
		var(--atera-gap)
	) !important;
}

#rev_slider_4_1 .tp-parallax-wrap.atera-button-layer {
	margin-top: calc(
		var(--atera-block-h) / 2 -
		var(--atera-button-lh) * var(--atera-button-fs)
	) !important;
}

/*-- 4. Phones / small tablets: let the subtitle wrap ---------------*/

@media (max-width: 777px) {
	#rev_slider_4_1 .atera-slider-subtitle {
		white-space: normal !important;
	}
}

@media (min-width: 768px) and (max-width: 1366px) {
	#rev_slider_4_1 {
		--atera-title-fs: clamp(30px, min(4.8vw, 8.5vh), 58px);
		--atera-subtitle-fs: clamp(11px, min(1.15vw, 2vh), 16px);
		--atera-button-fs: clamp(11px, min(0.85vw, 1.55vh), 13px);
		--atera-gap: clamp(10px, 1.1vw, 16px);
	}
}

@media (max-width: 1366px) and (max-height: 500px) {
	#rev_slider_4_1 {
		--atera-title-fs: clamp(24px, min(4.6vw, 8vh), 38px);
		--atera-subtitle-fs: clamp(10px, min(1.2vw, 2.5vh), 13px);
		--atera-button-fs: 11px;
		--atera-gap: 9px;
	}
}

/* on the narrowest phones the longest subtitle needs two lines */
@media (max-width: 420px) {
	#rev_slider_4_1 {
		--atera-subtitle-lines: 2;
	}
}