@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');



* {

	margin: 0;

	padding: 0;

	-moz-box-sizing: border-box;

	-webkit-box-sizing: border-box;

	box-sizing: border-box;

}



.clearfix:before {

	display: table;

	content: " ";

}



.clearfix:after {

	display: block;

	visibility: hidden;

	height: 0;

	clear: both;

	content: " ";

}



.clearfix::after {

	display: block;

	content: ".";

	clear: both;

	font-size: 0;

	line-height: 0;

	height: 0;

	overflow: hidden;

}



:focus {

	outline: 0;

}



body {

	font-family: 'Open Sans', sans-serif;

	background: url("../images/") no-repeat fixed;

	background-size: cover;

}



li {

	list-style: none;

}



input[type="text"],

input[type="password"] {

	width: 100%;

	height: 35px;

	border: 1px solid #b1b3b7;

	border-radius: 5px;

	padding: 0 20px;

	color: #000;

	font-size: 15px;

	-moz-transition: 0.5s all ease;

	-webkit-transition: 0.5s all ease;

	-o-transition: 0.5s all ease;

	-ms-transition: 0.5s all ease;

	transition: 0.5s all ease;

}



input[type="text"]:focus,

input[type="password"]:focus {

	box-shadow: 0 0 10px rgba(21, 60, 105, 0.3);

	-moz-transition: 0.5s all ease;

	-webkit-transition: 0.5s all ease;

	-o-transition: 0.5s all ease;

	-ms-transition: 0.5s all ease;

	transition: 0.5s all ease;

}



a {

	text-decoration: none;

	-moz-transition: 0.5s all ease;

	-webkit-transition: 0.5s all ease;

	-o-transition: 0.5s all ease;

	-ms-transition: 0.5s all ease;

	transition: 0.5s all ease;

}



a:hover {

	-moz-transition: 0.5s all ease;

	-webkit-transition: 0.5s all ease;

	-o-transition: 0.5s all ease;

	-ms-transition: 0.5s all ease;

	transition: 0.5s all ease;

}



.login-container {

	width: 50%;

	float: left;

	padding: 60px 0 60px 80px;

	position: relative;

}



.login-container::before {

	content: "";

	width: 120%;

	height: 140%;

	background: #DCF2F0;

	position: absolute;

	top: -20%;

	left: -30%;

	z-index: 0;

	-moz-transform: rotate(23deg);

	-webkit-transform: rotate(23deg);

	-o-transform: rotate(23deg);

	-ms-transform: rotate(23deg);

	transform: rotate(23deg);

	border-radius: 0 77% 104% 0;

	box-shadow: 10px 10px 0 #e38216;

}



.login-inner {

	position: relative;

	z-index: 1;

}



.logo-container {

	margin: 0 0 30px 0;

}



.login-content {

	width: 70%;

}



.login-content h1 {

	font-size: 15px;

	color: #1c1c1c;

	margin: 0 0 20px 0;

}



.login-content h1 span {

	font-size: 20px;

	color: #01305e;

}



.d-block {

	display: block;

}



.fields-container ul li {

	margin: 0 0 10px 0;

	font-size: 13px;

	color: #1d1d1e;

}



.fields-container ul li.new-user {

	margin-top: 30px;

}



label.label-checkbox {

	background: url("../images/keyboard.png") no-repeat 100% center;

	padding: 0 40px 0 11px;

	position: relative;

}



label.label-checkbox:before {

	content: "";

	

	border-radius: 4px;

	position: absolute;

	left: 0;

	top: 0;

}



input[type=checkbox].input-checkbox:checked + label.label-checkbox:before {

	background: #e87f21;

	border-color: #e87f21;

}



input[type=checkbox].input-checkbox:checked + label.label-checkbox:after {

	content: '';

	width: 3px;

	height: 6px;

	border: solid #000000;

	border-width: 0 2px 2px 0;

	transform: rotate(45deg);

	position: absolute;

	top: 3px;

	left: 6px;

}



.fields-container ul li.virtual-keyboard {

	position: relative;

}



.input-checkbox {

	position: relative;

	top: 3px;

	left: 0;

}



.btn {

	border: 1px solid transparent;

	cursor: pointer;

	text-transform: uppercase;

	font-size: 14px;

	padding: 12px 20px;

	width: 100%;

	border-radius: 5px;

	-moz-transition: 0.5s all ease;

	-webkit-transition: 0.5s all ease;

	-o-transition: 0.5s all ease;

	-ms-transition: 0.5s all ease;

	transition: 0.5s all ease;

}



.btn:hover {

	-moz-transition: 0.5s all ease;

	-webkit-transition: 0.5s all ease;

	-o-transition: 0.5s all ease;

	-ms-transition: 0.5s all ease;

	transition: 0.5s all ease;

}



.btn-primary {

	background: #153c69;

	color: #ffffff;

}



.btn-primary:hover {

	background: #e87f21;

}



.btn-secondary {

	border-color: #153c69;

	background: #ffffff;

	color: #153c69;

}



.btn-secondary:hover {

	background: #e87f21;

	color: #ffffff;

	border-color: #e87f21;

}



.card {

	color: #e87f21;

	font-size: 12px;

	text-transform: uppercase;

	background: url("../images/card.png") no-repeat 0 center;

	padding: 0 0 0 40px;

}



.card:hover {

	color: #153c69;

}



.login-links {

	margin: 32px 0 0 0;

}



.login-links li {

	margin: 0 0 15px 0;

	font-size: 13px;

	color: #153c69;

}



.login-links li a {

	color: #153c69;

	background: no-repeat 0 center;

	padding: 2px 0 2px 35px;

}



.login-links li a:hover {

	color: #e87f21;

}



.login-links li.forgot-user a {

	background-image: url("../images/login.png");

}



.login-links li.forgot-user a:hover {

	background-image: url("../images/login-active.png");

}



.login-links li.trouble a {

	background-image: url("../images/trouble.png");

}



.login-links li.trouble a:hover {

	background-image: url("../images/trouble-active.png");

}



.login-links li.gst a {

	background-image: url("../images/gst.png");

}



.login-links li.gst a:hover {

	background-image: url("../images/gst-active.png");

}



.customer-care-container {

	width: 50%;

	float: right;

	padding: 60px 80px 60px 60px;

	background: #D05301;

}



.customer-care {

	background: #ffffff;

	float: right;

	padding: 8px 25px 8px 60px;

	font-size: 13px;

	text-transform: uppercase;

	border-radius: 20px;

	position: relative;

}



.customer-care .icon {

	background: #e68629 url("../images/icon1.jpg") no-repeat center;

	display: block;

	width: 48px;

	height: 48px;

	border-radius: 50%;

	position: absolute;

	top: 50%;

	left: -1px;

	-moz-transform: translateY(-50%);

	-webkit-transform: translateY(-50%);

	-o-transform: translateY(-50%);

	-ms-transform: translateY(-50%);

	transform: translateY(-50%);

}



.customer-care-content {

	margin: 60px 0 0 0;

	position: relative;

}



.customer-care-content h2 {

	color: #fff;

	font-size: 15px;

	text-transform: uppercase;

	margin: 0 0 40px 0;

}



.customer-care-content ul li {

	color: rgba(255, 255, 255, 0.9);

	font-size: 14px;

	margin: 0 0 30px 0;

	position: relative;

	padding: 0 0 0 18px;

}



.customer-care-content ul li::before {

	background: rgba(255, 255, 255, 0.9);

	width: 5px;

	height: 5px;

	border-radius: 50%;

	content: "";

	position: absolute;

	top: 8px;

	left: 0;

}



.customer-care-content a {

	color: #000000;

}



.customer-care-content a.view {

	text-decoration: underline;

}



.security {

	background: rgba(255, 255, 255, 0.1);

	border: 1px solid rgba(255, 255, 255, 0.2);

	padding: 20px;

	font-size: 12px;

	color: rgba(255, 255, 255, 0.8);

	line-height: 20px;

	margin: 60px 0 0 0;

}



.footer-container {

	margin: 80px 0 30px 0;

}



.footer-container ul {

	text-align: right;

}



.footer-container ul li {

	display: inline-block;

	font-size: 14px;

	margin: 0 0 0 20px;

}



.footer-container ul li a {

	color: #000000;

	position: relative;

}



.footer-container ul li a::after {

	content: "";

	width: 10%;

	height: 1px;

	background: #000000;

	opacity: 0;

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	margin: auto;

	-moz-transition: 0.5s all ease;

	-webkit-transition: 0.5s all ease;

	-o-transition: 0.5s all ease;

	-ms-transition: 0.5s all ease;

	transition: 0.5s all ease;

}



.footer-container ul li a:hover::after {

	opacity: 1;

	width: 100%;

	-moz-transition: 0.5s all ease;

	-webkit-transition: 0.5s all ease;

	-o-transition: 0.5s all ease;

	-ms-transition: 0.5s all ease;

	transition: 0.5s all ease;

}



/* keyboard-start */

.ml-0 {

	margin-left: 0 !important;

}



.mb-0 {

	margin-bottom: 0 !important;

}



@media (min-width:993px) {

	html,

	body {

		height: 100%;

		min-height: 100%;

		overflow: hidden;

	}



	.container,

	.login-container,

	.customer-care-container {

		height: 100%;

	}



}



@media (max-width:1200px) {

	.login-container::before {

		width: 135%;

		left: -35%;

		transform: rotate(13deg);

	}



	.login-container {

		padding-left: 50px;

	}



	.login-content {

		width: 80%;

	}



	.customer-care-container {

		padding-right: 40px;

	}



}



@media (min-height:1024px) {

	.login-container::before {

		width: 125%;

		left: -40%;

		transform: rotate(13deg);

	}



}



@media (max-width:992px) {

	.login-container {

		width: 100%;

		float: none;

		padding: 40px;

		margin: 0 0 40px 0;

	}



	.login-container::before {

		width: 100%;

		height: 100%;

		left: 0;

		transform: rotate(0deg);

		top: 0;

		border-radius: 0 0 30% 0;

	}



	.customer-care-container {

		width: 100%;

		float: none;

		padding: 40px;

	}



	.fields-container ul li.virtual-keyboard {

		display: none;

	}



	.footer-container ul {

		text-align: center;

	}



	.footer-container ul li {

		margin: 0 10px;

	}



	.customer-care-content h2 {

		text-align: center;

	}



	.login-content {

		width: 100%;

	}



	.login-content h1 {

		text-align: center;

	}



	.logo-container {

		text-align: center;

	}



	.customer-care {

		float: none;

		width: 190px;

		margin: 0 auto;

	}



	.login-container::before {

		box-shadow: 0px 10px 0 #e38216;

	}



	.login-inner {

		width: 60%;

		margin: 0 auto;

	}



}



@media (max-width:767px) {

	.login-content h1 {

		text-align: center;

	}



	.logo-container {

		text-align: center;

	}



	.login-content {

		width: 100%;

	}



	.customer-care-content h2 {

		text-align: center;

	}



	.footer-container ul {

		text-align: center;

	}



	.login-inner {

		width: 70%;

	}



}



@media (max-width:568px) {

	.login-inner {

		width: 100%;

	}



	.footer-container ul li {

		display: block;

		margin: 0 0 5px 0;

	}



}



@media (max-width:568px) {

	.login-container {

		padding: 40px 20px;

	}



	.login-container::before {

		border-radius: 0;

	}



}

.login-links li.kyc-user a {

	background-image: url("../images/icon1.jpg");

}