body {
	background-color: #000;
}

#box-login {
	-webkit-animation: login 1s ease-in-out;
	-moz-animation: login 1s ease-in-out;
	-ms-animation: login 1s ease-in-out;
	-o-animation: login 1s ease-in-out;
	animation: login 1s ease-in-out;
	background-color: #ECEFF1;
	box-sizing: border-box;
	background-clip: padding-box;
	border: 10px solid rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	top: 50%;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	left: 50%;
	width: 540px;
}
#box-login h2 {
	color: #fff;
	background-color: #607D8B;
	text-align: center;
	box-sizing: border-box;
	padding: 20px;
	margin-bottom: 0;
}
#box-login form {
	box-sizing: border-box;
	padding: 20px;
}
#box-login form button[type=submit]:hover {
	cursor: pointer;
}

@keyframes login {
	0% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
		top: 100%;
	}
	100% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
		top: 50%;
	}
}

@-moz-keyframes login {
	0% {
		filter: alpha(opacity=0);
		opacity: 0;
		top: 100%;
	}
	100% {
		filter: alpha(opacity=100);
		opacity: 1;
		top: 50%;
	}
}

@-webkit-keyframes login {
	0% {
		filter: alpha(opacity=0);
		opacity: 0;
		top: 100%;
	}
	100% {
		filter: alpha(opacity=100);
		opacity: 1;
		top: 50%;
	}
}

@-ms-keyframes login {
	0% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
		top: 100%;
	}
	100% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
		top: 50%;
	}
}

@-o-keyframes login {
	0% {
		filter: alpha(opacity=0);
		opacity: 0;
		top: 100%;
	}
	100% {
		filter: alpha(opacity=100);
		opacity: 1;
		top: 50%;
	}
}

@media screen and (max-width: 579px) {
	#box-login {
		position: static;
		-webkit-transform: none;
		transform: none;
		width: 90%;
		margin: 60px auto 60px auto;
	}
}