html {
    height: 100vh;
    margin: 0;
}


body {
	

background-image: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
display: block;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;	

}

.login-box{
	margin-top: 100px;
	background-color:#fff;
	border-radius: 10px;
	
}

.left {
	background-color: #dddddd ;
	padding: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	
}

.right{
		padding: 10px;
	}

.login-box label {
	color: #444;
}
.login-box .img {
	text-align: center;
}


.login-box h1 {
  font-size: 28px;
}

.login-box h2 {
  font-size: 18px;
}

.img img {
	width:100%;
}


/* Tablet */
@media (max-width: 992px) {
  .login-box h1 {
    font-size: 28px;
  }
	
	.login-box h2 {
	  font-size: 18px;
	}	
}

/* Tablet */
@media (max-width: 768px) {
	
	.left {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 10px;
	
}
	.right{
		height: 700px;
	}
	.img img {
	width:50%;
  }	
	
  .login-box h1 {
    font-size: 18px;
  }
	
	.login-box h2 {
	  font-size: 14px;
	}	
}

/* HP */
@media (max-width: 576px) {
	.outer {
		padding-left: 15px;
		padding-right: 15px;
	}
.left {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 10px;
	
}	
	
	
	.right{
		height: 700px;
	}	
	
  .img img {
	width:50%;
  }	
	
  .login-box h1 {
    font-size: 14px;
  }
	
	.login-box h2 {
 	 font-size: 12px;
	}
}