@import url(../basic_new/responsive.css);

@media (max-width: 599px) {
	.login-container {width: 100%;}
	
	.custom-login-info, .custom-login-footer {width: 100%;}
   	.custom-login-footer {flex-direction: column;}
   	.custom-login-footer p {padding: 10px 0;}
   	.custom-login-footer img {height: 100px;}
}

@media (max-width: 900px) {
   .custom-login-footer {justify-content: space-between;}
   .custom-login-footer p {width: 100%;}
}

@media (min-width: 500px) {
	.login.page {background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url(images/ocloud-login-back-md.jpg) top center no-repeat fixed var(--main-theme-color-50); background-size: cover;}
}

@media (min-width: 1000px) {
	.login.page {background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url(images/ocloud-login-back.jpg) top center no-repeat fixed var(--main-theme-color-50); background-size: cover;}
}

@media (max-height: 600px) {
	.mobile .login-content {padding-top: 0;}
	.login .main-header {margin-bottom: 0;}
	.logo-container {margin-bottom: .7em;}
	.logo-container h1 {margin-left: .5em; font-size: 1.3em;}
	.login .logo {flex-shrink: 0; height: 100px; width: 100px; background-size: auto 100px !important;}

	@media (max-width: 550px) {
		.logo-container h1 small {display: none;}
	}
}