body#login{
	position:relative;
}

.form-wrapper {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	padding:3em 2em 0;
	width:370px;
	height:380px;
/**	background:url(../images/login.png);**/
	background-color: lavender;
	box-sizing:border-box;
}

.form-wrapper.logout{
	height:230px;
}

.form-wrapper.logout p{
	font-size:18px;
	font-weight:bold;
	margin:0 0 40px 0;
}


h1 {
	text-align: center;
	margin:0 0 40px 0;
}

form {
	padding: 0 1.5em;
}

.form-item {
	margin-bottom: 0.75em;
	width:100%;
}

.form-item input {
	background:#FFF;
	border: none;
	width: 100%;
	padding:10px;
	font-size:16px;
	box-sizing:border-box;
}

.form-item input:focus {
	outline: none;
}

.button-panel {
	margin: 2em 0 0;
	width: 100%;
}

.button-panel .button {
	background: #222222;
	border: none;
	color: #fff;
	cursor: pointer;
	height: 50px;
	font-size:16px;
	letter-spacing: 0.1em;
	text-align: center;
	width: 100%;
}

.button:hover {
	background: #aa8d47;
}

.form-footer {
	margin:20px 0 0 0;
}

.form-footer a {
	margin:0 10px;
}

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

.form-wrapper {
	width:96.75%;
	height:380px;
	background:url(../images/login.png);
}

.form-wrapper.logout{
	height:250px;
}

.form-wrapper.logout p{
	font-size:18px;
	font-weight:bold;
	margin:0 0 40px 0;
}


h1 {
	text-align: center;
	margin:0 0 40px 0;
}

form {
	padding: 0 1.5em;
}

.form-item {
	margin-bottom: 0.75em;
	width:100%;
}

.form-item input {
	background:#FFF;
	border: none;
	width: 100%;
	padding:10px;
	font-size:16px;
}

.form-item input:focus {
	outline: none;
}

.button-panel {
	margin: 2em 0 0;
	width: 100%;
}

.button-panel .button {
	background: #222222;
	border: none;
	color: #fff;
	cursor: pointer;
	height: 50px;
	font-size:16px;
	letter-spacing: 0.1em;
	text-align: center;
	width: 100%;
}

.button:hover {
	background: #aa8d47;
}

.form-footer {
	margin:20px 0 0 0;
}

.form-footer a {
	margin:0 10px;
}

}