@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900');

html, body {
	height: 100%;
}
body {
	font-family: 'Lato', sans-serif;
}
img {
	max-width: 100%;
	height: auto;
}
a {

}
a:hover {
	text-decoration: none;
}

/*----------------
background
-----------------*/

#lenders {
	background: url(../img/bg.jpg) #000 no-repeat center center;
}
@media screen and (min-width: 720px) {
	#lenders {
		height: 100%;
		overflow: hidden;
	}
}
#lenders::after {
	content: "";
	display: table;
	clear: both;
}

/*----------------
left bar
-----------------*/

#lenders .bar {
	padding: 15px 0;
	text-align: center;
	background: rgba(0,0,0,1);
}
@media screen and (min-width: 720px) {
	#lenders .bar {
		float: left;
		width: 81px;
		height: 100%;
		padding: 15px 0;
		background: rgba(0,0,0,0.8);
	}
}
#lenders .bar::after {
	content: "";
	display: table;
	clear: both;
}

/*----------------
menu trigger
-----------------*/

.menu-trigger {
	display: block;
	position: absolute;
	left: 10px;
	margin: 0;
}
@media screen and (min-width: 720px) {
	.menu-trigger {
		position: static;
		display: inline-block;
		float: none;
		width: auto;
		vertical-align: middle;
		overflow: visible;
		margin: 0 auto 20px 0;
	}
}
.menu-trigger img {
	max-width: none;
	display: block;
	padding-top: 1px;
}

/*----------------
logos
-----------------*/

#lenders .bar .logo img:nth-of-type(1) {
	display: block;
	max-width: 125px;
	height: auto;
	margin: 0 auto;
}
@media screen and (min-width: 720px) {
	#lenders .bar .logo img:nth-of-type(1) {
		display: none;
	}
}
#lenders .bar .logo img:nth-of-type(2) {
	display: block;
	width: 35px;
    height: auto;
    position: absolute;
    right: 10px;
    top: 9.5px;
}
@media screen and (min-width: 720px) {
	#lenders .bar .logo img:nth-of-type(2) {
		width: auto;
		position: static;
		margin: 0 auto;
		float: none;
	}
}

/*----------------
main container
-----------------*/

@media screen and (min-width: 720px) {
	#lenders .content-container {
		float: left;
		width: calc(100% - 81px);
		height: 100%;
		background: rgba(0,0,0,0.4);
	}
}
#lenders .content-container::after {
	content: "";
	display: table;
	clear: both;
}

/*----------------
chat aside
-----------------*/

#lenders .content-container aside {
	background: #f2f1ed;
	padding-bottom: 15px;
}
@media screen and (min-width: 720px) {
	#lenders .content-container aside {
		float: left;
		width: 390px;
		height: 100%;
		overflow: auto;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		padding-bottom: 0;
	}
}
/* width */
#lenders .content-container aside::-webkit-scrollbar {
    width: 6px;
}
/* Track */
#lenders .content-container aside::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
/* Handle */
#lenders .content-container aside::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}
/* Handle on hover */
#lenders .content-container aside::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/*----------------
chat aside title
-----------------*/

.aside-title {
	background: #ff6500;
	color: #fff;
	padding: 5px;
}
.aside-title::after {
	content: "";
	display: table;
	clear: both;
}
.aside-title img {
	display: block;
	float: left;
	width: 30px;
	height: 30px;
	margin: 8px 10px;
}
.aside-title h2 {
	font-size: 24px;
	margin: 0;
}
.aside-title p {
	font-size: 12px;
	margin: 0;
}

/*----------------
chat aside messages
-----------------*/

.chatbox {
	margin: 15px 35px;
	background: #fff;
	padding: 13px;
	padding-left: 27px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 0 4px 8px 0 rgba(109, 98, 72, 0.5);
}
.afterSubmit {
	display: none;
}
.chatbox::after {
	content: "";
	display: table;
	clear: both;
}
.chatbox img {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	margin-left: -37px;
}
.chatbox span {
	display: block;
	font-size: 12px;
	color: #7b6f51;
}
.chatbox p {
	margin: 0;
	font-size: 13px;
	color: #000000;
}
.chatbox button {
	width: 30px;
	height: 30px;
	border: none;
	background: #ff6500;
	color: #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	float: right;
	text-align: center;
	padding: 0;
	-webkit-appearance: none;
}
.chatbox button:active {
	transform: translateY(2px);
}
.mobile-hide {
	display: none;
}
.mobile-show {
	display: inline-block;
}
@media screen and (min-width: 720px) {
	.mobile-hide {
		display: inline-block;
	}
	.mobile-show {
		display: none;
	}
}

/*----------------
content
-----------------*/

@media screen and (min-width: 720px) {
	#lenders .content-container .content {
		float: left;
		width: calc(100% - 390px);
		padding: 30px;
	}
}
#lenders .content-container .content::after {
	content: "";
	display: table;
	clear: both;
}

/*----------------
widgets
-----------------*/

@media screen and (min-width: 720px) {
	.widget {
		width: 380px;
		background: #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		overflow: hidden;
		float: left;
		margin-right: 30px;
	}
}

/*----------------
widget title
-----------------*/

.widget-title {
	background: #f2f1ed;
	padding: 10px 15px;
}
.widget-title h3 {
	font-size: 22px;
	font-weight: 700;
	color: #584d34;
	margin: 0;
}
.widget-title span {
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
}

/*----------------
widget content
-----------------*/

.widget-content {
	background: #fff;
	font-size: 14px;
}
.widget-content .form-group {
	border-top: solid 1px rgba(88, 77, 52, 0.2);
	margin: 0;
	padding: 12px;
}
.widget-content .form-group::after {
	content: "";
	display: table;
	clear: both;
}
.widget-content .form-group label,
.widget-content .form-group span {
	display: block;
	margin: 0;
	color: #584d34;
	float: left;
	margin: 6.5px 0;
}
.widget-content .form-group input[type="text"],
.widget-content .form-group input[type="number"],
.widget-content .form-group select {
	float: right;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: none;
	border: solid 1px rgba(109, 98, 72, 0.75);
	box-shadow: inset 0 0 2px 0 rgba(109, 98, 72, 0.75);
	background: #fff;
	padding: 5px 7px;
	outline: none;
}
@media screen and (min-width: 720px) {
	.widget-content .form-group input[type="text"],
	.widget-content .form-group input[type="number"],
	.widget-content .form-group select {
		border: solid 1px transparent;
	}
}
.widget-content .form-group input[type="text"]:focus,
.widget-content .form-group input[type="number"]:focus,
.widget-content .form-group select:focus {
	border: solid 1px #ff6500;
}
.widget-content .form-group span,
.widget-content .form-group select {
	float: none;
	display: inline;
}
.widget-content .input-group {
	width: auto;
	display: block;
	float: right;
}

/*----------------
widget footer
-----------------*/

.widget-footer {
	padding: 15px;
	background: #f2f1ed;
}
.widget-footer button {
	display: block;
	width: 210px;
	margin: 0 auto;
	background: #ff6500;
	color: #fff;
	border: none;
	box-shadow: 0 4px 8px 0 rgba(60, 53, 76, 0.3);
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	font-size: 18px;
	padding: 10px 0;
	outline: none;
	cursor: pointer;
}
.widget-footer button:active {
	transform: translateY(2px);
}

/*----------------
contact form
-----------------*/

#contact-form {
	display: none;
}