/*** importing fonts ***/
@font-face {
font-family: "Avenir-Next-Condensed";
src: url("font/Avenir-Next-Condensed.ttc") format("truetype")
}

body {
	position: relative;
}

/*** page styles ***/
#wrapper {
	max-width: 1200px;
	margin: auto;
	font-family: 'Avenir-Next-Condensed', Arial, sans-serif;
	padding-bottom: 20px;
}

img {
	width: 100%;
}

.banner {
	margin-bottom: 120px;
}

.logo {
	max-width: 500px;
	margin: 0 auto 120px;
}

.slogan {
	text-align: center;
	margin-bottom: 30px;
}

.slogan p {
	margin: 0 0 10px;
	font-size: 15px;
	color: #b76e79;
}

.login {
	max-width: 400px;
	margin: 0 auto 120px;
	border: 1px solid #cccccc;
	border-radius: 4px;
}

.login .head {
	color: #713a4a;
	font-size: 16px;
	border-bottom: 1px solid #cccccc;
	background-color: #f5f5f5;
	padding: 15px 20px;
}

.login .head img {
	width: 15px;
	float: right;
}

form {
	padding: 20px;
	margin-bottom: 0;
}

form input {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	padding: 10px;
}

form input[type="submit"] {
	text-align: center;
	background-color: #929292;
	margin-bottom: 0;
	color: #fff;
	cursor: pointer;
}

form input[type="submit"]:hover{
	background-color: #713a4a;
}

form .error {
	margin-bottom: 0;
	color: red;
}

.copyright {
	color: #b76e79;
	text-align: center;
	font-size: 16px;
	text-transform: uppercase;

	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -177px;
}


.banner-mobile,
.logo-mobile {
	display: none;
}
@media (max-width: 768px) {

	.banner-desktop,
	.logo-desktop {
		display: none;
	}

	.logo-mobile,
	.banner-mobile {
		display: block;
	}

	.logo {
		max-width: 400px;
	}
}