@charset "UTF-8";
body {
	margin: 0;
	padding: 0;
}
img {
	width: 100%;
	height: auto;
	transform: translateZ(0.1px)
}
.container {
	display: flex;
	padding: 2em;
	max-width: 400px;
}
.brand {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}
.brand .key {
	opacity: 0;
	filter: brightness(10);
	transform: rotateY(180deg);
}
.brand .logo {
	opacity: 0;
	filter: brightness(20);
}
.brand.loaded .key {
	opacity: 1;
	transform: rotateY(0);
}
.brand.loaded .logo {
	opacity: 1;
}
body .background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(0,77,94);
	background: linear-gradient(90deg, rgba(0,77,94,1) 0%, rgba(0,145,155,1) 100%)
}
body .background:after {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}
body.active .background:after {
	opacity: 1;
	background-color: white;
}
body.active .key, body.active .logo {
	filter: brightness(1);
}
.brand .key {
	-webkit-transition: transform 2s ease;
	-moz-transition: transform 2s ease;
	-ms-transition: transform 2s ease;
	-o-transition: transform 2s ease;
	transition: all 2s ease 0.25s;
}
.brand .logo {
	-webkit-transition: transform 2s ease;
	-moz-transition: transform 2s ease;
	-ms-transition: transform 2s ease;
	-o-transition: transform 2s ease;
	transition: all 2s ease 1.5s;
}
.background:after {
	-webkit-transition: transform 2s ease;
	-moz-transition: transform 2s ease;
	-ms-transition: transform 2s ease;
	-o-transition: transform 2s ease;
	transition: opacity 2s ease !important;
}
body.active .key, body.active .logo {
	-webkit-transition: transform 2s ease;
	-moz-transition: transform 2s ease;
	-ms-transition: transform 2s ease;
	-o-transition: transform 2s ease;
	transition: all 1s ease !important;
}