/* Plantation Eye Associates: small additions on top of the original Bridge CSS. */

/* Gravity Forms 2.10 (legacy markup) nests the required asterisk in two spans that both get a
   4px left margin; Gravity Forms 2.1.1, which the original page used, had one. The leading
   "body" makes this win over the plugin's rule whatever order the stylesheets print in. */
body .gform_legacy_markup_wrapper .gfield_required .gfield_required {
	margin-left: 0;
}

/* ------------------------------------------------------------------ Home page hero
   Static rebuild of the 2018 LayerSlider 5.6 slider (one slide, 1280x600 stage, max-width 1280px, centred).
   LayerSlider scaled the whole stage by (stage width / 1280): the stage is a 1280:600 box and every layer is
   sized in container-query units (1cqw = 1/100 of the stage width, so 1280px = 100cqw; px value / 12.8 = cqw).
   The px declaration before each cqw one is the full-size fallback for browsers without container queries. */
.pe-hero {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	aspect-ratio: 1280 / 600;
	overflow: hidden;
	container-type: inline-size;
	text-align: left;
}
.pe-hero > * {
	position: absolute;
	margin: 0;
	max-width: none;
}
/* background image (ls-bg): natural size x scale, centred in the stage */
.pe-hero .pe-hero-bg {
	top: 0;
	left: 190.5px;
	left: 14.8828cqw;
	width: 899px;
	width: 70.2344cqw;
	height: 600px;
	height: 46.875cqw;
}
/* photo layer: top -225px, left -4px, natural size 1400x934 */
.pe-hero .pe-hero-photo {
	top: -225px;
	top: -17.5781cqw;
	left: -4px;
	left: -0.3125cqw;
	width: 1400px;
	width: 109.375cqw;
	height: 934px;
	height: 72.9688cqw;
}
/* the two heading layers (font-family rockwell; size 42px and 35px at full scale) */
.pe-hero .pe-hero-title {
	left: 57px;
	left: 4.4531cqw;
	padding: 0;
	font-family: rockwell, serif;
	line-height: normal;
	white-space: nowrap;
	animation: pe-hero-in 4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.pe-hero .pe-hero-title-1 {
	top: 43px;
	top: 3.3594cqw;
	font-size: 42px;
	font-size: 3.2813cqw;
}
.pe-hero .pe-hero-title-2 {
	top: 100px;
	top: 7.8125cqw;
	font-size: 35px;
	font-size: 2.7344cqw;
}
/* entrance as in the original: from 200px right and 80px down, fading in, 4s, easeOutCubic */
@keyframes pe-hero-in {
	from {
		opacity: 0;
		transform: translate(200px, 80px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pe-hero .pe-hero-title {
		animation: none;
	}
}
/* LayerSlider's hideOnMobile hid the slider on phones and tablets (it tested the browser's user agent for
   Android, iPhone, iPad, iPod, BlackBerry, webOS and Windows Phone; it had no width breakpoint). CSS cannot
   read the user agent: touch-only devices (no hover, coarse pointer) stand in for that test, and windows
   narrower than 768px are hidden too. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
	.pe-hero-holder {
		display: none;
	}
}

/* ------------------------------------------------------------------ Home page map
   The 2018 page had a Bridge Google Maps shortcode (needs the Google Maps JavaScript API, which now requires
   an API key). Its box was 450px tall (Bridge's default; the shortcode's "300pxpx" height was invalid CSS).
   This static block keeps that box and links to the practice on Google Maps. */
.pe-map-static {
	height: 450px;
	background-color: #e5e3df;
}
.pe-map-static .pe-map-static-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	color: #303030;
	text-decoration: none;
}
.pe-map-static .pe-map-static-link > span {
	display: block;
}
.pe-map-static .pe-map-static-pin {
	width: 22px;
	height: 22px;
	margin-bottom: 14px;
	border-radius: 50% 50% 50% 0;
	background-color: #d93a2b;
	transform: rotate(-45deg);
}
.pe-map-static .pe-map-static-name {
	font-weight: 700;
	margin-bottom: 6px;
}
.pe-map-static .pe-map-static-cta {
	margin-top: 14px;
	color: #323485;
	text-decoration: underline;
}
.pe-map-static .pe-map-static-link:hover .pe-map-static-cta,
.pe-map-static .pe-map-static-link:focus .pe-map-static-cta {
	color: #09096c;
}