.login-grid-container {
	display: grid;
	grid-template-areas: 'loginleft loginright'
	'logincontentleft logincontentright';
	grid-template-columns: 50% 50%;
	grid-gap: 20px;

}

.grid-lg-1 {
	grid-area: loginleft;
	background: #ffe600;
	font-size: 19px;
	text-align: center;
	padding: 20px;
	height: 150px;
	position: relative;
}

.grid-lg-2 {
	grid-area: loginright;
	background: #ffe600;
	font-size: 19px;
	text-align: center;
	padding: 20px;
	position: relative;

}

.grid-lg-3 {
	grid-area: logincontentleft;
	

}

.grid-lg-4 {
	grid-area: logincontentright;

}

.grid-lg-1 b,.grid-lg-2 b {
	margin-bottom: 20px;
	display: block;
}

.login-create-container {
	width: 85%;
	background: #e6e7e8;
	margin-left: auto;
}



.login-warranty-icon {
	width: 70px;
	position: absolute;
	bottom: -33px;
	left: 50%;
	margin-left: -35px;
}

.login-div {
	height: 1px;
	background: #e6e7e8;
	margin-top: 40px;
	margin-bottom: 20px;
}





.fieldmark {
	font-size: 12px;
    font-weight: bold;
    float: right;
}

.profile-textbox-container {
	position: relative;
}



.create-content {
	padding: 20px;
}

.create-title {
	padding: 10px 20px;
	background: #ffe600;
	padding-top: 15px;
}

.profile-textbox {
	width: 100%;
}


.login-textbox-bday {
	padding-left:35px;
}

.login-bday-icon {
	width: 20px;
	position: absolute;
	bottom:6px;
	left: 10px;
}

.login-create-button,
.login-signin-button {
	background:#ffe600;
	padding: 8px 18px;
	font-size: 14px;
	border: none;
	outline:none;
	font-weight: bold;
	cursor: pointer;
	min-width: 150px;
	margin-bottom: 10px;
	-webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.login-create-button:hover,
.login-signin-button:hover {
	background: #f0da0b;
	-webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}


.login-create-container-right {
	width: 85%;
	
	margin-right: auto;
}

.login-requiredfield {
	font-size:12px;
	font-weight: bold;
}


.login-mobile-tab {
	display: none;
}

.login-subnote {
	font-size:20px;
}



@media screen and (max-width: 800px) {

	.login-subnote {
		padding: 0px 20px;
	}

	.login-grid-container {
	    
	    grid-template-areas:
	        'loginleft'
	        'loginright'
	        'logincontentleft'
	        'logincontentright';
	    grid-template-columns: 100%;
	    grid-gap: 0px;
	}


	.grid-lg-1 {
	    margin-bottom: 50px;
    	margin-left: 20px;
    	margin-right: 20px;
    	padding-bottom: 55px;
	}

	.grid-lg-2 {
	    margin-bottom: 80px;
    	margin-left: 20px;
    	margin-right: 20px;
    	padding-bottom: 55px;
	}

	.login-div {
		display: none;
	}

	.login-create-container {
		display: none;
	}

	.login-create-container,
	.login-create-container-right {
		width: auto;
		margin: 0px 20px;

	}

	.login-mobile-tab {
		display: table;
		width: 100%;
		margin-bottom: 30px;
	}

	.login-mobile-tab td:first-child {
		border-right: 1px solid black;
	}

	.login-mobile-tab td{
		width: 50%;
		text-align: center;
		font-size: 18px;
		padding: 10px;
		padding-top:13px;
		border-bottom:1px solid #000;
		border-top:0px solid #000;
		cursor: pointer;
	}

	.login-mobile-tab .active {
		background: #fee600;
		border-top:1px solid #000;
		border-bottom:0px solid #000;
	}

	.create-title {
		display: none;
	}

	.login-create-button,
	.login-signin-button {
		width: 100%;
	}

}