@media (max-width: 380px){
	/* for smartphone and tablet */
		.login .brand .logo img{ max-width: 200px;  }
		.login.login-page .login-content { padding: 30px 10px; }
}

@media (max-width: 600px){
	/* for smartphone and tablet */
	.login.login-page .left-content { display: none; }
	.login.login-page .right-content { float: none; width: auto; margin-top: 50px;}
	.login { margin: 108px 0; }
	.login-content { width: 100%!important; }
}

@media (min-width: 601px) and (max-width: 800px) { 
	/* for smartphone and tablet */

	.login.login-page .left-content {right: 0px; top: 0; bottom: 0; }
	.login.login-page .right-content { float: none; width: 100%; position: fixed; top: 230px; padding: 40px;}
	.login.login-page .login-content { background-color:rgba(255, 255, 255, 0.8); box-shadow: 7px 7px 8px rgba(1, 1, 1, 0.4);}
}

@media (min-width: 801px) and (max-width: 1024px) { 
	/* for smartphone and tablet */

	.login.login-page .left-content {right: 0px; top: 0; bottom: 0; }
	.login.login-page .right-content { float: none; width: 80%; margin-left:10%; position: fixed; top: 130px; padding: 40px;}
	.login.login-page .login-content { background-color:rgba(255, 255, 255, 0.8); box-shadow: 7px 7px 8px rgba(1, 1, 1, 0.4);}
}

@media (min-width: 1025px) { 
	/* for smartphone and tablet */
	.login.login-page .right-content { margin-top: 100px; }
}

@media (max-height: 600px) and (max-width:750px){ 
	/* for smartphone and tablet */
	.login.login-page .right-content { float: none; width: 100%; position: fixed; top: 0px; padding: 20px 40px;}
	.login .brand { padding: 0px 0px 15px 0px; }
	.login.login-page .login-content { padding-top: 15px;  padding-bottom: 5px; }
	.form-group { margin-bottom: 10px; }
	hr { margin-top: 10px; margin-bottom: 10px;}
}
@media (max-height: 600px) { 
	/* for smartphone and tablet */
	.login.login-page .right-content { top: 0px; 
	}
}

@media (max-height: 321px) { 
	/* for smartphone and tablet */
.login.login-page .right-content { margin-top: 0px; }
.login.login-page .right-content { padding: 5px 40px;} 
}