html,
body {
	height: 100%;
	padding: 0;
	margin: 0
}

.page {
	overflow: auto;
	width: 100%;
	height: 100%;
	line-height: normal;
	text-align: center;
	font-family: Signika, sans-serif;
	font-size: 2em;
	color: #2C2C2C;
	background-color: #f0f0f0;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed
}

h1,
h2,
h3,
h4,
h5 {
	line-height: 1.3;
	font-weight: normal
}

.page:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	filter: alpha(opacity=40);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	opacity: 0.4
}

img {
	max-width: 100%;
	width: auto\9;
	height: auto
}

a,
a:link {
	color: inherit;
	filter: alpha(opacity=85);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	opacity: 0.85
}

a:hover,
a:focus,
a:active {
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity: 1;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}

ul,
ol {
	display: inline-block;
	text-align: left;
	max-width: 50%
}

.container {
	width: 100%;
	z-index: 1;
	position: relative;
}

.content {
	max-width: 900px;
	margin: 12% auto;
}

.overlay-dark {
	background-color: #333
}

.overlay-dark:before {
	background-color: #333
}

.overlay-bright {
	background-color: white
}

.overlay-bright:before {
	background-color: white;
	filter: alpha(opacity=50);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: 0.5
}

@media screen {
	.page[class] {
		background-image: url("./VSG-DL5a_Terrace_low.jpg?1627576495");
		background-size: cover;
	}
}

body.debug:after {
	content: "default";
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: white;
	color: black;
	padding: 0.5em;
	font-size: 10px;
	text-transform: uppercase
}

@media screen and (max-width: 640px) {
	h1 {
		font-size: 2em
	}
	ul,
	ol {
		max-width: none
	}
	.page {
		min-width: 300px
	}

	.content {
		max-width: 900px;
		margin: 40% auto;
	}
}

@media screen and (max-width: 1024px) {
	.content {
		max-width: 900px;
		margin: 24% auto;
	}
}

.page .fallback-bg {
	display: none
}

.ie8 .page .fallback-bg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	max-width: inherit;
	z-index: 0
}