/*------------------------------------------------------------------
[22. Login]
*/

.login-triangle {
	display: inline-block;
	position: absolute;
	right: 0; top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 100vh 14rem;
	border-color: transparent transparent #fff;
	z-index: 10;
}

.login-wrapper {
	background: linear-gradient(rgba(0, 0, 0, 0.6), $color-primary), url('../images/iStock-976354264_Malaysia.jpg');
	background-size: cover;
	padding: 80px 0 20px 0;
	min-height: 100%;
	.bg-pic{
		position: absolute;
		width: 100%;
		overflow: hidden;
		& > img{
			height: 100%;
			opacity: 0.6;
		}
	}
	.login-container{
		width: 496px;
		display: block;
		position: relative;
		float:right;
	}
	.bg-caption{
		width: 500px;
	}
}
.register-container{
	width: 550px;
	margin: auto;
	height: 100%;
}


/* Responsive handlers : Login
------------------------------------
*/

@media (max-width: 768px) {
	.login-wrapper{
		.login-container{
			width: 100%;
		}
	}
	.register-container{
		width: 100%;
		padding: 15px;
	}
}

@media only screen and (max-width : 321px) {
	.login-wrapper{
		.login-container{
			width: 100%;
		}
	}
}