body.landingPage {
	display:initial;
	overflow-y: initial;
}
body.landingPage main {
	overflow:visible;
}

.landingLogo {
	width: 100%;
	height: 55vw;
	text-align: center;
	max-height: 42vh;
}
@media screen and (max-height: 300px) {
	.landingLogo {
		display:none;
	}
}
@media screen and (max-height: 380px) {
	.landingLogo {
		max-height: 30vh;
	}
}
@media screen and (max-width: 449px) and (max-height: 458px) {
	.landingLogo {
		display:none;
	}
}
svg.RegiaAnglorumLogo {
	width: 75%;
	height: 75%;
}
@media screen and (min-width: 599px) and (min-height: 649px) {
	svg.RegiaAnglorumLogo {
		padding: 50px;
	}
}
.landingLogo .crown {
	fill:gold;
}
.landingLogo .crownLine {
	fill:black;
}
.landingLogo .crossFill {
	fill:maroon;
}
.landingLogo .crossLine {
	fill:black;
}
.landingLogo .gem {
	fill:red;
}
.landingLogo .cap {
	fill:purple;
}
.landingLogo .letterFill {
	fill:gold;
}
.landingLogo .letterLine {
	fill:black;
}
.landingLogo .background {
	fill:var(--header-colour);
	fill:transparent;
}
.landingBottom {
	position:absolute;
	bottom:1.2em;
	width:100%;
	text-align:center;
}
.landingVideo {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	pointer-events: none;
	filter: brightness(50%) sepia(30%);
}
@media screen and (max-width: 319px) {
	.landingVideo {
		display:none;
	}
}

.videoPlaceholder,
.video {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
.videoPlaceholder {
	display:none;
}
.mobileData .video {
	display:none;
}
.mobileData .videoPlaceholder {
	display:block;
}
.landingCopyright {
	color:var(--text-colour-dull);
}
.landingPage .buttons a {
	position:relative;
	letter-spacing: 0.1em;
	line-height: 45px;
	color: var(--link-colour);
	background-color: var(--button-bg-colour);
	backdrop-filter: blur(4px) brightness(47%);;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	z-index: 2;
	color: gold;
	border: 4px solid rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	margin:12px 20px;
	font-size: 19px;
	width:100%;
}
.landingPage .buttons a:hover {
	border: 4px solid #666666d1;
	background-color: rgb(12 199 0 / 0.4);
	letter-spacing: 0.2em;
	color: #FFF;
}
.landingPage .buttons a:after {
	background:gold;
	content: "";
	height: 155px;
	left: -75px;
	opacity: .4;
	position: absolute;
	top: -50px;
	-webkit-transform: rotate(28deg);
	transform: rotate(28deg);
	width: 50px;
	transition:all 1s cubic-bezier(0.075, 0.82, 0.165, 1), color 0.1s;/*easeOutCirc*/
	z-index: 1;
}
.landingPage .buttons a:hover:after {
	background: #fff;
	opacity: 0;
	left: 120%;
}
.landingPage .buttons {
	align-items:center;
	margin:0 auto;
	height: 45vw;
	max-height: 58vh;
	padding-bottom:11%;
	max-width: min(1000px,100%);
	flex-wrap:wrap;
	justify-content:center;
	display:block;
	text-align:center;
	display: grid;
	grid-template-columns: calc(100% - 40px);
    grid-auto-rows: max-content;
}
.landingPage .buttons a {
	margin:12px auto;
}

@media screen and (max-height: 300px) {
	.landingPage .buttons {
		height: 100vh;
		max-height: 100vh;
		padding-bottom:0;
	}
}
@media screen and (max-width: 449px) and (max-height: 458px) {
	.landingPage .buttons {
		grid-template-rows: 1fr 1fr 1fr 1fr;
		height: 100vh;
		max-height: 100vh;
		padding-bottom:0;
	}
}
@media screen and (min-width: 450px)  {
	.landingPage .buttons {
		grid-template-columns: repeat(auto-fill, 50%);
	}
	.landingPage .buttons>a {
		max-width: 98%;
		margin: 12px auto;
	}
	.landingPage .buttons a {
		padding: 1rem;
		width:260px;
	}
}
@media screen and (min-width: 950px)  {
	.landingPage .buttons {
		grid-template-columns: repeat(auto-fill, 25%);
	}
}

.socialMedia .svgContainer {
	padding: 0 0 100%;
	position: relative;
	height: 0;
	width: 100%;
}
.socialMedia .svgContainer > * {
	position: absolute;
	height: 100%;
	width: 100%;
}
.socialMedia {
	position: absolute;
	right: 28px;
	top: 12px;
	display: block;
	font-size: 0;
	list-style: none;
	margin: 0 auto;
	text-align: right;
	max-width: 100%;
}
.socialMedia li {
	display: inline-block;
}
.socialMedia a, .socialMedia svg {
	display: block;
}
.socialMedia a {
    width: 25px;
    height: 25px;
    margin:-6px 6px 0;
  }
@media screen and (min-width: 700px)  {
	.socialMedia a {
		width: 40px;
		height: 40px;
		margin:0 10px
	}
}

.socialMedia svg {
	transition: transform 0.5s, transform 0.5s ease-out, background 0.5s, transform 0.5s ease-out, transform 0.5s, fill 0.5s ease-out;
	fill: rgba(255,215,0,0.5);
	border-radius: 100%;
}
.socialMedia a:hover svg {
	fill: gold;
	transform: scale(1.25);
	background: gold;
	fill:#121212;
}
.socialMedia .instagram svg {
	border-radius:30%;
}