:root {
/* css variables for colours ----------------------------------------------------------------------*/
	--darkGrey1: #1f1f1f;
	--darkGrey2: #181818;
	--darkGrey3: #0f0f0f;
	--blueGrey: #1f1f3f;
/* css variables for layout ----------------------------------------------------------------------*/
	
}

body {
	background-color: var(--darkGrey3);
	color: white;
	margin: 0;
	font-family: Helvetica, sans-serif;
}

.super-container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.logo-container {
	position: absolute;
	width: 100%;
	height: 20vw;
	top: 50%;
	transform: translate(0, -50%);
	
}

.logo-inner-container {
	position: relative;
}

.logo {
	position: absolute;
	width: 100%;
	height: 15vw;
	background-image: url("/img/logowide2.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 98%;
}

@keyframes reveal {
	from {background-position: 100% center;}
	to {background-position: -150% center;}
}

.logo-cover {
	position: absolute;
	width: 100%;
	height: 15vw;
	background-image: url("/img/logocover.svg");
    background-repeat: no-repeat;
    background-position: -150% center;
    background-size: auto 100%;
	animation-name: reveal;
	animation-timing-function: linear;
	animation-duration: 1.5s;
}

@keyframes reveal-lower {
	80% {opacity: 0;}
	100% {opacity: 1;}
	
}

.logo-lower {
	position: absolute;
	top: 15vw;
	height: 5vw;
	width: 100%;
	text-align: center;
	font-family: "Arial";
	font-weight: 700;
	font-size: 3vw;
    margin-top: 0.5vw;
	opacity: 0;
	animation-name: reveal-lower;
	animation-delay: 0.5s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@media (max-aspect-ratio: 2/3) {
	.logo-container {
		height: 30vw;
	}
	.logo, .logo-cover {
		height: 25vw;
		animation-duration: 3s;
	}
	.logo-lower {
		top: 25vw;
		font-size: 6vw;
		animation-delay: 1s;
	}
}