html, body { margin: 0; padding: 0; width: 100%; height: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-ms-overflow-style: scrollbar;
}

html {font-size: 10px;}

.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: #000;
	background: #F1F4F9;
	overflow: hidden;
}

.inner {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	min-width: 78vh;
	width: 78vh;
	height: 100%;
	text-decoration: none;
}

.bg {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(img/bg.png) 0 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

.box {
	position: relative;
	z-index: 3;
	width: 50vh;
	margin: 0 0 3vh;
}

.logo {
	position: relative;
	margin: 0 0 5.5vh;
	width: 100%;
	height: 3.3vh;
	background: url(img/logo.png) left center no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	overflow: hidden;
	text-indent: -5000px;
}

.title {
	position: relative;
	margin: 0 0 2.8vh;
	font: 500 5.3vh/1.1 'Mail Sans Roman', 'TT Norms Pro', 'Proxima Nova', Arial, Helvetica, sans-serif;
}
.description {
	position: relative;
	margin: 0 0 3.8vh;
	font: 400 2vh/1.5 'Mail Sans Roman', 'TT Norms Pro', 'Proxima Nova', Arial, Helvetica, sans-serif;
}
.note {
	font: 400 1vh/1.6 'Mail Sans Roman', 'TT Norms Pro', 'Proxima Nova', Arial, Helvetica, sans-serif;
	opacity: 0.5;
}

.btn,
.btn:hover {
	display: block;
	margin: 0 0 2vh;
	width: 21vh;
	height: 6.4vh;
	text-align: center;
	text-decoration: none;
	font: 500 2.2vh/6.4vh Arial, Helvetica, sans-serif;
	color: #fff;
	background: #FF9E00;
	-webkit-border-radius: 1.2vh;
	border-radius: 1.2vh;
	transition: opacity 300ms;
}
.btn:hover {
	opacity: 0.8;
}

@media screen and (max-width: 78vh) {
	.wrapper {
		justify-content: flex-start;
	}
}