body {
	width: 100%; 
	background:#000 url("/assets/images/login-background.jpg") no-repeat top;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif;
	color: #333;
	font-size: 14px;
}

.clear { clear: both;}

h1.pagetitle {color: #333; font-size: 38px; margin: 30px 0 0 0; padding: 0; font-weight: normal;}

a {color: #f00; text-decoration: none;}
a:visited {color: #f00; text-decoration: none;}
a:hover {color: #900; text-decoration: none;}

.content {font-size: 18px; color: #777; line-height: 30px;}

input.input-textbox {font-size: 18px; color: #333; padding: 15px; width: 300px; border: 1px solid #ccc; text-align: center; font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif;}
input.input-button {font-size: 18px; background-color: #08b1f0; color: #fff; text-align: center; font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif; text-transform: uppercase; border: 0px; padding: 15px; width: 330px;}

.login-message { color: red; }


@media screen and (min-width: 0px) and (max-width: 1400px) {


    @media screen and (min-width: 1024px) and (max-width: 1400px) {

		.mobile-menu {display: none;}

		.wrapper {width: calc(100% - 100px); padding: 0px; margin: 0 auto; text-align: center;}
	
		.logo {margin: 100px 0 0 0;}
	
		.container-login {width: 80%; background-color: #f3f3f3; padding: 50px 50px 30px 50px; max-width: 700px; margin: 50px auto; -moz-box-shadow: inset 0 0 20px #000000; -webkit-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000;}
	
		.title {text-transform: uppercase; color: #999; font-weight: 300; letter-spacing: 5px; font-size: 18px; margin: 0 0 30px 0;}
		.input-login {margin: 20px 0;}
	
		.forgotpassword {font-weight: 300; font-size: 18px; margin: 30px 0;}
		
    }
    
    @media screen and (min-width: 768px) and (max-width: 1023px) {
	
	

	@media screen and (min-width: 768px) and (max-width: 1023px) {
	    
	    	.mobile-menu {display: none;}

		.wrapper {width: calc(100% - 100px); padding: 0px; margin: 0 auto; text-align: center;}
	
		.logo {margin: 100px 0 0 0;}
	
		.container-login {width: 80%; background-color: #f3f3f3; padding: 50px 50px 30px 50px; max-width: 700px; margin: 50px auto; -moz-box-shadow: inset 0 0 20px #000000; -webkit-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000;}
	
		.title {text-transform: uppercase; color: #999; font-weight: 300; letter-spacing: 5px; font-size: 18px; margin: 0 0 30px 0;}
		.input-login {margin: 20px 0;}
	
		.forgotpassword {font-weight: 300; font-size: 18px; margin: 30px 0;}
	    
	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	    
		.mobile-menu {display: none;}

		.wrapper {width: calc(100% - 100px); padding: 0px; margin: 0 auto; text-align: center;}
	
		.logo {margin: 100px 0 0 0;}
	
		.container-login {width: 80%; background-color: #f3f3f3; padding: 50px 50px 30px 50px; max-width: 700px; margin: 50px auto; -moz-box-shadow: inset 0 0 20px #000000; -webkit-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000;}
	
		.title {text-transform: uppercase; color: #999; font-weight: 300; letter-spacing: 5px; font-size: 18px; margin: 0 0 30px 0;}
		.input-login {margin: 20px 0;}
	
		.forgotpassword {font-weight: 300; font-size: 18px; margin: 30px 0;}
	    
	}

    }
    
    @media screen and (min-width: 481px) and (max-width: 767px) {
	
		.mobile-menu {display: none;}

		.wrapper {width: calc(100% - 100px); padding: 0px; margin: 0 auto; text-align: center;}
	
		.logo {margin: 100px 0 0 0;}
	
		.container-login {width: 80%; background-color: #f3f3f3; padding: 50px 50px 30px 50px; max-width: 700px; margin: 50px auto; -moz-box-shadow: inset 0 0 20px #000000; -webkit-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000;}
	
		.title {text-transform: uppercase; color: #999; font-weight: 300; letter-spacing: 5px; font-size: 18px; margin: 0 0 30px 0;}
		.input-login {margin: 20px 0;}
	
		.forgotpassword {font-weight: 300; font-size: 18px; margin: 30px 0;}
	
    }
    
    @media screen and (min-width: 0px) and (max-width: 480px) {
	
       	.mobile-menu {display: none;}

		.wrapper {width: calc(100% - 100px); padding: 0px; margin: 0 auto; text-align: center;}
	
		.logo {margin: 60px 0 0 0;}
	
		.container-login {width: 65%; background-color: #f3f3f3; padding: 50px 50px 30px 50px; max-width: 700px; margin: 50px auto; -moz-box-shadow: inset 0 0 20px #000000; -webkit-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000;}
	
		.title {text-transform: uppercase; color: #999; font-weight: 300; letter-spacing: 5px; font-size: 18px; margin: 0 0 30px 0;}
		.input-login {margin: 20px 0;}
	
		.forgotpassword {font-weight: 300; font-size: 18px; margin: 30px 0;}
		
		input.input-textbox {font-size: 18px; color: #333; padding: 15px; width: 165px; border: 1px solid #ccc; text-align: center; font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif;}
		input.input-button {font-size: 18px; background-color: #08b1f0; color: #fff; text-align: center; font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif; text-transform: uppercase; border: 0px; padding: 15px; width: 195px;}
	
    }
    
}

@media screen and (min-width: 1401px) {

	.mobile-menu {display: none;}

	.wrapper {width: calc(100% - 100px); padding: 0px; margin: 0 auto; text-align: center;}
	
	.logo {margin: 100px 0 0 0;}
	
	.container-login {width: 80%; background-color: #f3f3f3; padding: 50px 50px 30px 50px; max-width: 700px; margin: 50px auto; -moz-box-shadow: inset 0 0 20px #000000; -webkit-box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000;}
	
	.title {text-transform: uppercase; color: #999; font-weight: 300; letter-spacing: 5px; font-size: 18px; margin: 0 0 30px 0;}
	.input-login {margin: 20px 0;}
	
	.forgotpassword {font-weight: 300; font-size: 18px; margin: 30px 0;}
	
}