/* Single Page Stylesheet */

/* Normal Page
-------------------------------------------------------- */

/* Hero Section - Page hero image handled in front-page.css file  */

.page-hero {
	position:relative;
	display:flex;
	align-items:end;
}

.page-hero img {
	width:100%;
	position:relative;
	display:block;
	top:0;
	object-fit:cover;
	z-index:-1;
}

/* Page background image */

.page-wrap {padding:40px 0 80px;}

.page-wrap h1 {
	width:100%;
	margin:0 0 40px;
    padding:20px 40px;
	text-align:center;
	font-size:5vw;
	line-height:1.1;
}

.page-bg-img {
	position:fixed;
	background:white;
	width:100%;
	top:0;
	z-index:-2;
}

.page-bg-img img {
	height:1020px;
	width:100%;
	opacity:.3;
	filter:blur(10px);
}

/* Festured Image */

.page-thumbnail img.size-large-entry-image {
	border-radius:20px 20px 0 0;
	display:block;
	object-fit:cover;
	margin:0 auto;
	width:900px;
}

/* Page Content */

.page-content {
	max-width:100%;
	width:900px;
	margin:0 auto;
	padding:80px;
	border-radius:0 0 20px 20px;
}

.page-content h2 {
	padding:20px;
	margin-left:-40px;
	border-radius:20px;
	box-shadow:3px 3px 6px #222;
}

.page-content li {padding:10px 20px;}

/* Media Queries
-------------------------------------------------------- */

@media (min-width: 641px) {.page-hero img {height:367px;}} /* HERO IMAGE */

@media (min-width: 1009px) {.page-hero img {height:525px;}} /* HERO IMAGE */

@media (min-width: 1441px) {.page-hero img {height:700px;}} /* HERO IMAGE */

@media (max-width:1008px) {
	.page-hero.normal-page {
		align-items:end;
	}
}

@media (max-width:900px) {
	.page-thumbnail img.size-large-entry-image {width:100%;} /* Keeps featured image centered while clipping sides evenly */
	.page-content {margin:0;padding:7%;}
	.page-content h2 {font-size:4.7vw;padding:6%}
}

@media (max-width:839px) {
	.page-hero h1 {
	padding:10px 40px 10px;
	}
	.page-hero {
		align-items:center;
	}
}

@media (max-width:640px) {
	.page-hero {align-items:end;}
	.page-hero img {height:233px;} /* HERO IMAGE */
	.page-hero h1 {padding:10px 14px 10px;}
}

@media (max-width:479px) {
	.page-hero h1 {
	font-size:5.3vw;
	padding:10px;
	}
}

@media (max-width:410px) {
	.page-content {
		font-size:12px;
		margin:0;
		padding:8% 4%;
	}
	.page-content h2 {
		margin-left:-10px;
	}
}