.boxPageWrapper {
	background: #0f0f0f url("../img/box-bg.png") top left no-repeat;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	margin: 0px;
	padding: 0px;
}

.boxEmailCodePageWrapper {
	width: 100%;
	height: 100%;
	background:  rgba(216, 225, 240, 1) url("../img/email-code-bg.png");
	background-repeat:  no-repeat;
	background-size: cover;
	position: absolute;
}

.boxWrapper {
	position: absolute;
	left: 0;
	top: 40%;
	transform: translateY(-50%);
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.box {
	width: 400px;
	margin: 0 auto;
	border-radius: .4em;
	border: 1px solid #3869B2;
	overflow: hidden;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.box-email-code {
	width: 95%;
	max-width: 500px;
	margin: 0 auto;
	border-radius: .4em;
	overflow: hidden;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.box > div {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}

.box-header {
	background-color: #3869b2;
	padding: 12px 21px 12px 21px;
}

.box-header h1 {
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	font-size: 24px;
	margin: 0px;
	text-align: center;
}

.box-content {
	background-color: white;
	padding: 10px;
}

.box-footer {
	background-color: white;
}

@media screen and (max-width: 451px) {
	.box {
		min-width: 300px;
	}
}

@media screen and (max-width: 758px) {
	.box {
		width: 80%;
	}
}

@media screen and (min-width: 759px) and (max-width: 940px) {

}

@media screen and (max-width: 940px) {

}