/* 50 Aspen Grove: style.css + nav.css + media.css from the old site, merged and trimmed
   (form, tariffs table, sIFR, recaptcha, flash, subnav and IE rules removed). */

@font-face {
	font-family: 'ITCAvantGardeStd-XLt';
	src: url('/fonts/ITCAvantGardeStd-XLt_gdi.woff') format('woff');
	font-weight: 275;
	font-style: normal;
	font-display: swap;
}

body {
	width: 100%;
	min-width: 320px;
	color: #222;
	background: #fff;
	font-family: "ITC Avant Garde Gothic", AppleGothic, Futura, "Century Gothic", sans-serif;
	font-size: 14px;
	text-align: center;
	padding: 0;
	margin: 40px auto 0 auto;
}
html { min-height: 100%; }
img, object, embed { border: 0; display: block; outline: none; margin: 0; padding: 0; }
form, section, article, nav, aside, footer, menu { margin: 0; padding: 0; }

a:link, a:visited { color: #222; text-decoration: underline; }
a:hover, a:active, a.active:visited, a.active:link { color: #865500; text-decoration: underline; }

h2, h3, h4 { padding: 0; margin: 1em 0 .6em 0; display: block; font-size: 1.5em; line-height: 1.1em; color: #222; font-weight: normal; }
h2.nomargin { margin-top: 0; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.3em; }
p { padding: 0; margin: 0 0 .6em 0; font-size: 1.1em; line-height: 1.3em; }
ul, ol { margin: 0 0 1.2em 0; padding: 0 0 0 20px; }
ul li, ol li { font-size: 1.1em; line-height: 1.4em; }

/* Header */
div.header .logo, div.header p.qtnz, div.home p {
	margin: 0; padding: 0; float: left; display: block;
	text-indent: -8000px; font-size: .05em; line-height: .05em;
}
div.header .logo a { float: left; display: block; text-decoration: none; }
div.header .logo, div.header .logo a { width: 112px; height: 179px; background: url(/images/logo.gif) no-repeat; }
div.header p.qtnz { float: right; width: 169px; height: 12px; background: url(/images/qtnz.gif) no-repeat; }

div.aspengrove { width: 901px; margin: auto; text-align: left; }
div.header { float: left; width: 876px; height: 179px; padding: 0 0 0 25px; margin-bottom: -156px; position: relative; z-index: 200; }
div.page { float: left; width: 901px; position: relative; z-index: 100; background: url(/images/page.png) repeat-y; }

/* Nav */
div.nav { float: left; width: 163px; }
div.nav ul { position: relative; z-index: 200; float: left; list-style-type: none; padding: 185px 25px 0 15px; margin: 0; height: 24px; width: 123px; }
div.nav ul li { float: left; width: 123px; margin: 0; padding: 0 0 8px 0; line-height: 1.1em; font-size: 1em; letter-spacing: -.03em; text-align: right; text-transform: uppercase; }
div.nav ul li a { float: left; width: 123px; text-decoration: none; }
div.nav ul li a:link, div.nav ul li a:visited { color: #fff; text-decoration: none; }
div.nav ul li a:hover, div.nav ul li a:active,
div.nav ul li a.active:link, div.nav ul li a.active:visited { color: #bea477; text-decoration: none; }
div.nav ul li a:hover, div.nav ul li a:active { text-decoration: underline; }

/* Home */
div.homecover { left: 0; top: 0; position: absolute; z-index: 101; width: 163px; height: 479px; background: #000; opacity: .55; }
div.home { position: relative; z-index: 100; margin-top: -209px; float: left; width: 901px; }
div.home p { position: absolute; z-index: 101; left: 623px; top: 417px; }
div.home p.picturethis { width: 252px; height: 34px; background: url(/titles/picturethis.png) no-repeat; background-size: 100%; }
div.eos { float: left; width: 712px; padding: 15px 25px 10px 164px; background: #dfdecd; }

/* Home slideshow (replaces slick) */
.slides { position: relative; background: #000; }
.slides img { width: 100%; height: auto; vertical-align: top; }
.slides img + img { position: absolute; top: 0; left: 0; }
.slides img { opacity: 0; transition: opacity 700ms; }
.slides img.on, .slides:not(.js) img:first-child { opacity: 1; }

/* Content pages */
h1.sifr { margin: 0; padding: 0; font-weight: normal; line-height: 1.1em; text-transform: uppercase; width: 100%; color: #000; font-size: 2em; min-height: 40px; }
div.content { float: right; width: 737px; min-height: 400px; }
div.content div.images { width: 737px; float: left; }
div.content div.images p { margin: 0; }
div.content div.inner { padding: 32px 30px 20px 30px; width: 677px; float: left; }
div.content div.inner div.left { float: left; width: 325px; }
div.content div.inner div.right { float: right; width: 325px; }
div.content div.inner div.map { float: right; width: 323px; height: 323px; position: relative; border: 1px solid #ccc; background: #f7f9fa; margin: 0 0 10px 0; }
div.content div.inner div.map iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 .6em; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Gallery */
div.gallery, div.galleryinner { float: left; width: 737px; height: 491px; }
div.gallery { background: #333; }
div.gallery img { float: left; margin: 0; width: 100%; height: 100%; object-fit: contain; }
div.gallery p { margin: 0; }
div.gallery p.image { float: left; width: 737px; height: 100%; }
ul.gallery { overflow: hidden; width: 738px; margin: 0 -1px 0 0; padding: 0; list-style-type: none; float: left; }
ul.gallery li { float: left; padding: 1px 1px 0 0; font-size: 1em; line-height: 0; }
ul.gallery li a.active img { opacity: .55; }

/* Footer */
div.footer { float: left; width: 901px; padding: 12px 0 6px 0; color: #444; }
div.footer ul { float: left; width: 901px; margin: 0; padding: 0 0 5px 0; list-style-type: none; }
div.footer ul li { text-transform: uppercase; border-left: 1px solid #afafaf; padding: 0 10px; float: left; margin: 0; font-size: 1em; line-height: 1.2em; }
div.footer ul li.contact, div.footer ul li.copy { padding-left: 0; border-left: 0 none; }
div.footer ul li.swordfox { padding-right: 0; }
div.footer ul li.swordfox, div.footer ul li.copy { float: right; }
div.footer ul li a:link, div.footer ul li a:visited { color: #865500; text-decoration: underline; }
div.footer ul li a:hover, div.footer ul li a:active { color: #000; }

/* Video teaser popup (home page) */
.teaser-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 90px 15px 15px; background: rgba(0, 0, 0, .8); overflow-y: auto; }
.teaser-overlay[hidden] { display: none; }
#videoteaser { width: 628px; max-width: 100%; padding: 30px 44px; background: #2c2c2c url(/images/videoteaser-bg.jpg) repeat-x center top; box-sizing: border-box; font-family: 'ITCAvantGardeStd-XLt', Arial, sans-serif; text-align: center; color: #fff; }
#videoteaser .title, #videoteaser .subtitle, #videoteaser .btn { margin: 0; }
#videoteaser .title { font-size: 45px; line-height: 1.1; text-transform: uppercase; }
#videoteaser .subtitle { font-size: 19px; }
#videoteaser p { margin-bottom: 20px; font-size: 15px; }
#videoteaser .btn a { display: inline-block; width: 167px; height: 41px; background: url(/images/btn-bg.jpg) repeat-x center top; font-size: 25px; text-decoration: none; text-transform: uppercase; line-height: 41px; color: #fff; transition: background-position .3s ease-in-out; }
#videoteaser .btn a:hover { background-position: center bottom; }
#videoteaser .videoarea { width: 540px; max-width: 100%; height: 0; margin: 20px auto; padding-bottom: 55.096%; background: #000; position: relative; }
#videoteaser .videoarea img { width: 100%; height: auto; }
#videoteaser .videoarea iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

iframe { border: none; }

/* Mobile menu button */
.menu-btn { display: none; background: none; border: none; margin: 15px; padding: 0; outline: none; cursor: pointer; color: #000; font: inherit; }
.menu-btn__icon { margin-right: 5px; position: relative; top: -1px; vertical-align: middle; }
.menu-btn__icon::before { top: -5px; }
.menu-btn__icon::after { bottom: -5px; }
.menu-btn__icon, .menu-btn__icon::before, .menu-btn__icon::after { display: inline-block; width: 16px; height: 2px; background: #000; }
.menu-btn__icon::before, .menu-btn__icon::after { position: absolute; left: 0; content: ''; }
.menu-btn__icon--x { background: transparent; }
.menu-btn__icon--x::before { top: 0; transform: rotate(45deg); }
.menu-btn__icon--x::after { bottom: 0; transform: rotate(-45deg); }
.menu-btn__text { font-size: 16px; text-transform: uppercase; vertical-align: middle; line-height: 1; }

@media screen and (max-width: 960px), screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	html { box-sizing: border-box; }
	*, *:before, *:after { box-sizing: inherit; }

	header::after, div.content div.inner::after, div.footer ul::after { display: table; clear: both; content: ''; }

	div.header, div.page, div.nav ul, div.nav ul li, div.nav ul li a, div.home, div.eos, div.content,
	div.content div.images, div.content div.inner, div.gallery, div.galleryinner, div.gallery p.image,
	ul.gallery, div.footer, div.footer ul { width: 100%; float: none; }

	div.header, div.page, div.home { z-index: initial; }

	div.content div.images img, ul.gallery img { width: 100%; height: auto; }

	body { margin: 0; }
	div.aspengrove { width: auto; padding-top: 1px; float: none; background: none; }
	div.header { height: 156px; margin: 0; padding: 0; background: #333; position: relative; }
	div.header .logo { float: none; margin-left: -56px; position: absolute; top: -23px; left: 50%; z-index: 1; }
	div.header p.qtnz { display: none; }
	div.page { background: #dfdecd; }
	div.homecover { display: none; }
	.menu-btn { display: block; }

	div.nav { width: 230px; height: 100%; padding-top: 1px; background: #fff; border-right: 1px solid #eee; position: fixed; top: 0; left: 0; z-index: 10; overflow-y: auto; transform: translateX(-100%); transition: transform .3s ease; visibility: hidden; }
	.menu-open div.nav { box-shadow: 0 0 5px #999; transform: translateX(0); visibility: visible; }
	div.nav ul { height: auto; padding: 0; border-top: 1px solid #eee; }
	div.nav ul li { padding: 0; border-bottom: 1px solid #eee; text-align: left; font-size: 16px; }
	div.nav ul li a:link, div.nav ul li a:visited { display: block; padding: 10px 15px; text-decoration: none; color: #333; }
	div.nav ul li a.active:link, div.nav ul li a.active:visited { color: #865500; }

	div.home { margin-top: 0; }
	div.home p { top: auto; right: 28px; bottom: 28px; left: auto; z-index: 1; }

	div.eos, div.content div.inner { padding: 35px 15px 15px; }
	div.content div.inner div.left, div.content div.inner div.right { width: 50%; }
	div.content div.inner div.left { padding-right: 10px; }
	div.content div.inner div.right { padding-left: 10px; }
	div.content div.inner div.map { width: 100%; height: 0; margin: 0; padding-bottom: 100%; }

	div.gallery { height: 0; padding-bottom: 66.621438%; position: relative; }
	div.galleryinner { position: absolute; inset: 0; height: 100%; }
	ul.gallery li { width: 10%; }

	div.footer { padding: 15px; }
	div.footer ul { padding: 0; }
}

@media screen and (max-width: 720px) {
	div.home p { right: 21px; bottom: 21px; }
	div.home p.picturethis { width: 189px; height: 26px; }
	ul.gallery li { width: 20%; }
	#videoteaser { padding: 25px 20px; }
	#videoteaser .title { font-size: 34px; }
	#videoteaser .subtitle { font-size: 14px; }
}

@media screen and (max-width: 540px) {
	div.content div.inner div.left, div.content div.inner div.right { width: 100%; padding: 0; float: none; }
	div.content div.inner div.left > :last-child { margin-bottom: 0; }
	div.content div.inner div.map { margin-top: 15px; }
	div.footer ul { text-align: center; }
	div.footer ul li { margin-bottom: 5px; padding: 0; }
	div.footer ul li.contact, div.footer ul li.swordfox, div.footer ul li.copy { float: none; border: none; }
}

@media screen and (max-width: 380px) {
	ul.gallery li { width: 25%; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
