@import url("//fonts.googleapis.com/css?family=Montserrat:700|Open+Sans");

* 
{
	margin: 0;
	padding: 0;
	border-width: 0;
	
	font: inherit;
	text-align: left;
	outline: 0;
}
body
{
	background: url("../img/bg-login.jpg") no-repeat 0 0;
}

ul{
	padding-left: 18px;
}

.bg-image
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	z-index: 1;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #A2ABB1; 
	/*background: url("../img/bg-cta-1.jpg") no-repeat 0 0;*/
	background-size: cover;
}
.container
{
	z-index: 10;
	padding-bottom: 60px;
}
.adverb-position
{
	position: absolute;
	top: 9%;
	left: 50%;
	padding-left: 105px;
	z-index: 10;
}
#title
{
	padding: 0;
	margin: 0;

	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	color: #00E8B2;
}
h1
{
	padding: 0;
	margin: 0 0 0;

	font-size: 40px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}
a.req-demo
{
	display: inline-block;
	padding: 12px 35px;
    margin-top: 35px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	background: #00E8B2;
	color: #002D3E;
}
a.req-demo:hover, 
a.req-demo:focus, 
a.req-demo:active
{
	background: #002D3E;
	color: #fff;
}

.logo
{
	display: block;
	width: 76px;
	height: 36px;
	margin: 0 auto;
}
.col-vert-position
{
	padding-top: 25px;
}
#form-title
{
	position: absolute;
	left: -10000em;
}
.site-url
{
	position: relative;
	padding-top: 8px;
	padding-bottom: 12px;

	font-size: 12px;
	font-weight: 400;
	font-family: "Open Sans";
	text-transform: uppercase;
}
.site-url:after
{
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 0;

	border-bottom: solid 1px #BEC9E2;
}
.form-area
{
	padding: 0 0 25px;
	border-bottom: solid 1px #BEC9E2;
}
label
{
	padding: 10px 0 0 35px;
	margin: 15px 0 17px;

	line-height: 1.2;
	font-size: 16px;
	font-weight: 700;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	background: no-repeat bottom left;
	color: #002D3E;
}
label[for=username]
{
	background-image: url("../img/username.svg");
}
label[for=pswd]
{
	background-image: url("../img/password.svg");
}
input[type=text], 
input[type=password]
{
	display: block;
	width: 100%;
	height: 3.57em;
	padding: 0 14px;
	border: solid 1px #BEC9E2;

	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	background: transparent;
	color: #333;
}
input[type=submit]
{
	display: block;
	width: 100%;
	padding: 15px 0;
	margin: 25px 0 0;

	font-size: 16px;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	text-align: center;
	background: #00E8B2;
	color: #002D3E;
}
input[type=submit]:hover,
input[type=submit]:focus, 
input[type=submit]:active
{
	background-color: #002D3E;
	color: #fff;
}
.v-align 
{
	max-width: 100%;
	width: 355px;
	margin: 0 auto;
}
.v-align > .row:first-child a
{
	display: block;
	float: none;
	padding: 0;
}
.v-align > .row:first-child a:after
{
	display: none;
}


.v-align > .row:nth-child(3), 
.v-align > .row:nth-child(4)
{
	float: left;
	width: 50%;
	margin: 0;
}
.v-align > .row:nth-child(3) > div:first-child
{
	padding-right: 0;
	padding-left: 0;
	text-align: right;
}
.v-align > .row:nth-child(4) .col-xs-6:first-child 
{
	display: block !important;
	width: 100%;
	padding-top: 20px;
	padding-left: 0;
	padding-right: 0;
	text-transform: uppercase;
}
.v-align > .row:nth-child(4) .col-xs-6:last-child
{
	display: block !important;
	width: 100%;
	padding-top: 25px;

	text-align: center;
}
.v-align .row:nth-child(3) a
{
	display: inline-block;
	padding: 20px 0 0;

	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #002D3E;
}
.v-align .row:nth-child(3) a:hover, 
.v-align .row:nth-child(3) a:focus, 
.v-align .row:nth-child(3) a:active
{
	text-decoration: none;
	color: #FF9D00;
}
.v-align .row:nth-child(3) a:after
{
	display: inline-block;
	content: "|";
	margin: 0 0.5em;

	color: #002D3E;
}

.vertical-align .req-demo
{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0;

	padding: 14px 18px;

	font-weight: 700;
	white-space: nowrap;
	background: #FF9D00;
	color: #002D3E;
	transform: translateX(-50%);
}
.vertical-align .req-demo:hover, 
.vertical-align .req-demo:focus, 
.vertical-align .req-demo:active
{
	background-color: #002D3E;
	color: #fff;
}



@media screen and (max-width: 1199px)
{
	body
	{
		background-size: cover;
	}
	.bg-image
	{
		display: none;
	}
}
@media screen and (max-width: 479px)
{
	.v-align > .row:nth-child(3) > div:first-child
	{
		padding-left: 0;
	}
	.vertical-align > .col-xs-6:first-child
	{
		padding-right: 0;
	}
	.v-align .row:nth-child(3) a, 
	.vertical-align > .col-xs-6:first-child
	{
		font-size: 12px;
	}
}

/*Need to add the missing link just after 'forgot password' link, then delete the unneeded stuff.*/
.v-align a strong {} /*to delete. not needed.*/
.v-align a p {display:inline;padding: 0;margin: 0;} /*to delete. Not w3c.*/
