*
{
	margin:0;
	padding:0;
}

#logo
{
	margin-top:2%;
	margin-bottom:2%;
}

#login
{
	width:500px;
	margin:0 auto;
	margin-top:5%;
	margin-bottom:2%;
	transition:opacity 1s;
	-webkit-transition:opacity 1s;
}

#login h1
{
	background: #2b3643;
	padding:20px 0;
	font-size:140%;
	font-weight:300;
	text-align:center;
	color:#fff;
}

form
{
	background:#fff;
	padding: 8% 4%;
}

input[type="username"], input[type="password"]
{
	width:100%;
	margin-bottom:4%;
	padding:4%;
}

input[type="submit"]
{
	width:100%;
	background:#3399cc;
	margin-top:4%;
	border:0;
	padding:4%;
	transition:background .3s;
	-webkit-transition:background .3s;
}

input[type="submit"]:hover
{
	background:#2288bb;
}



@media screen and (max-width: 767px){
.login .content {
    background-color: #fff;
    width: 100% !important;
    border-radius: 0px;
    margin: 0 auto;
    padding: 20px 30px 15px;
}
.login .content .form-title {
    font-weight: 300;
    margin-bottom: 25px;
    font-size: 22px;
}
.login .content p {
    color: #989393;
    font-size: 12px;
}
.login .logo {
    margin: 30% auto !important;
}
}


@media screen and (min-width: 320px) and (max-width: 340px){
.login .logo {
    margin: 8% auto !important;
}
}

@media screen and (min-width: 600px) and (max-width: 610px){
/* login */
.login .content {
    width: 65% !important;
}
}

@media screen and (max-width: 767px) and (orientation: landscape){
.login .content {
    width: 360px !important;
}
.login .logo {
    margin: 0% auto !important;
}
}


@media screen and (min-width: 768px) and (max-width: 991px){
.login .logo {
    margin: 35% auto !important;
}
}


@media screen and (min-width: 992px) and (max-width: 1199px){
.login .logo {
    margin: 35% auto !important;
}
}