.container{ max-width: 1200px; margin: 0 auto;}

/**
Header
**/
header{ display: flex; align-items: center; justify-content: space-between; position: sticky; position: -webkit-sticky; top: 0; z-index: 9; background: #fff; padding: 15px 30px; box-shadow: 0 4px 8px 0 rgba(138, 107, 118, 0.08);}
header h1{ display: inline-flex; flex-shrink: 0;}
header h1 a{ display: inline-block;}

.menuBtn{ display: none;}
.topNav ul{ display: flex; align-items: center;}
.topNav ul li{ font-family: 'gothammedium', Arial; font-size: 15px; text-transform: uppercase; color: #4A4A4A; border-right: 2px #aaaaaa solid;}
.topNav ul li:last-child{ margin-right: 0; border-right: 0;}
.topNav ul li a{ color: #4A4A4A; position: relative; background-image:none; padding: 4px 12px;}
.topNav ul li a.activePage:after{ width: 80%; height: 4px; background-image: linear-gradient(90deg, #2979B8, #20253A); content: ""; position: absolute; left: 50%; bottom: -12px; border-radius: 30px; transform: translateX(-50%);}
.contactMobile{ display: none; align-items: center; justify-content: center;}

header.homeHeader .topNav ul li a{ color: #fff;}
header.homeHeader .topNav ul li a.activePage{ color: #FF8D6B;}
header.homeHeader .logo{ width: 159px; height: 93px; background: url(../images/Logo-white.png) 0 0 no-repeat;}

.rightHeader{ display: flex; align-items: center;}
.ctaBtnCont{ margin-left: 10px; display: flex; align-items: center;}
.ctaBttn{ padding: 8px 15px; border: 1px #0084ff solid; border-radius: 4px; color: #0084ff; display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 10px;}
.ctaBttn span{ margin-right: 10px; display: flex; align-items: center;}

/* Nav Bar */
.navBar {
    display: inline-block;
    width: 36px;
    height: 24px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}


.navBar span {
  display: block;
  position: absolute;
  height: 3px;
  width: 50%;
  background: #31CEB4;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.navBar span:nth-child(even) {
  left: 50%;
}

.navBar span:nth-child(odd) {
  left:0px;
}

.navBar span:nth-child(1), .navBar span:nth-child(2) {
  top: 0px;
}

.navBar span:nth-child(3), .navBar span:nth-child(4) {
  top: 10px;
}

.navBar span:nth-child(5), .navBar span:nth-child(6) {
  top: 20px;
}

.navBar.open span:nth-child(1),.navBar.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navBar.open span:nth-child(2),.navBar.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.navBar.open span:nth-child(1) {
  left: 5px;
  top: 4px;
}

.navBar.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 4px;
}

.navBar.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

.navBar.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

.navBar.open span:nth-child(5) {
  left: 5px;
  top: 12px;
}

.navBar.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 12px;
}

/**
Home
**/
.homeContentOuter{ background: #f0f4f7;}
.homeBanner img{ width: 100%; vertical-align: top;}
.homeContent p{ font-family: 'gothamlight'; font-size: 16px; line-height: 26px; margin-bottom: 30px;}
.homeContent{ background: #fff; padding: 40px; text-align: center;}
.btnLearnMore{ 
  font-family: 'gothambook'; 
  font-size: 22px; 
  line-height: 24px; 
  color: #0A6BDC; 
  width: 220px; 
  height: 70px; 
  display: inline-block; 
  text-align: center;
  background-image: linear-gradient(90deg, #2B37C8, #31CEB4);
  position: relative;
  padding: 3px;
}
.btnLearnMoreInner{
  width: 214px;
  height: 64px;
  background: #fff;
  position: absolute;
  background: #fff;
  left: 3px;
  top: 3px;
  text-align: center;
  line-height: 64px;
}

.slideItem{ position: relative;}
.slideDetails{ position: absolute; width: 100%; padding: 0 50px; top: 50%; left: 0; transform: translateY(-50%);}
.slideDetails h3{ font-family: 'gothammedium'; font-size: 70px; line-height: 72px; color: #fff; position: relative;}
.slideDetails h3:after{ width: 450px; height: 8px; background: #F9BF3C;  border-radius: 25px; content: ""; position: absolute; left: 0; bottom: -30px;}
.owl-dots{ width: 100%; text-align: center; position: absolute; left: 0; bottom: 35px;}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{ width: 16px; height: 16px; border: 2px #E0E0E0 solid !important; border-radius: 50%; outline: 0;
border:0; transition: all 0.3s linear; margin: 0 3px;}
.owl-carousel .owl-nav button.owl-next.active, .owl-carousel .owl-nav button.owl-prev.active, .owl-carousel button.owl-dot.active{ border: 2px #fff solid !important; background: #fff;}

.franchisePartners{ text-align: center; padding: 50px;}
.franchisePartners h3{ font-family: 'gothammedium', Arial; font-size: 24px; text-transform: uppercase; line-height: 38px; color: #000; margin-bottom: 50px;}
.franchisePartners h3 span{ display: inline-block; transform: scale(1.2, 0.8);}

.franchisePartnersList{ display: flex; align-items: center; overflow-x: scroll;}
.franchisePartnersList li{ display: flex; flex-shrink: 0; align-items: center; justify-content: center; margin: 0 30px 0 0;}

.monyMarketRates{ background: #fff; padding: 50px 0;}
.monyMarketRates h3{ font-family: 'gothammedium', Arial; font-size: 24px; line-height: 38px; text-transform: uppercase; color: #000; margin-bottom: 50px; text-align: center;}
.monyMarketRates h3 span{ display: inline-block; transform: scale(1.2, 0.8);}
.graph{ display: flex; align-items: center; justify-content: center;}

.dayList{ display: flex; padding-left: 57px; padding-bottom: 20px;}
.dayList li{ display: inline-flex; width: 100px; margin-right: 20px; font-size: 20px; color: #9B9B9B; flex-shrink: 0;}

/**
Company
**/
/* body.innerBg{ background: url(../images/bg.jpg) 0 0 no-repeat; background-size: cover;} */
body.innerBg{ 
  background: #EBF4F5;
 /** background: -moz-linear-gradient(top, #042a2b 0%, #535e62 100%);
  background: -webkit-linear-gradient(top, #042a2b 0%,#535e62 100%);
  background: linear-gradient(to bottom, #042a2b 0%,#535e62 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#042a2b', endColorstr='#535e62',GradientType=0 ); */
}
.company h2{ text-align: center; font-family: 'gothammedium'; color: #113234; padding: 50px 0; text-transform: uppercase;}
.company h2 span{ display: inline-block; transform: scale(1.2, 0.8); font-size: 30px; line-height: 36px;}
.company h3{ text-align: center; font-size: 20px; line-height: 30px; color: #fff; margin-bottom: 50px;}
.companyDetails{ background: #fff;  padding: 40px; margin-bottom: 50px; box-shadow: 0 4px 8px 0 rgba(138, 107, 118, 0.08);}
.companyRow{ display: flex;}
.companyCol{ flex: 1;}
.companyCol.mLeft40{ margin-left: 40px;}
.companyCol.mLeft40{ margin-left: 40px;}

.companyDetails p{ font-family: 'gothamlight'; font-size: 16px; line-height: 26px; margin-bottom: 50px;}
.companyDetails h4{ color: #666666; font-size: 20px; margin-bottom: 20px;}
.listing li{ font-family: 'gothamlight'; font-size: 16px; line-height: 20px; color: #666666; position: relative; padding-left: 20px; margin-bottom: 10px;}
.listing li:before{ width: 6px; height: 6px; background: #CBD3D7; border-radius: 50%; content: ""; position: absolute; left: 0; top: 6px;}


/**
Principal
**/
.principalDetails{ background: #fff; padding: 40px; margin-bottom: 50px; box-shadow: 0 4px 8px 0 rgba(138, 107, 118, 0.08);}
.principalDetailsInner{ display: flex;}
.principalDetailsLeft{ flex: 1;}
.principalDetailsLeft p{ font-family: 'gothamlight'; font-size: 16px; line-height: 26px; color: #666666; margin-bottom: 20px;}
.principalDetailsRight{ width: 130px; margin-left: 40px; display: flex; flex-direction: column; align-items: center;}
.principalDetailsRight span{ margin-bottom: 10px;}
.principalDetailsRight h5{ color: #222222; font-size: 18px; line-height: 22px; font-family: 'gothambook'; margin-bottom: 5px;}
.principalDetailsRight p{ font-size: 14px; color: #999999;}

/**
Financing
**/
.financingList{ display: flex; margin: 0 0 50px 0; flex-wrap: wrap; justify-content: center; align-items: center;}
.financingList li{ display: inline-flex; width: 290px; height: 200px; align-items: center; justify-content: center; margin: 0 15px 30px 15px; font-size: 24px; color: #fff; line-height: 28px; text-align: center; font-family: 'gothammedium'; border:6px #ccc solid;}
.financingList li.constructionLoan{ background: url(../images/Construction-Loans.jpg) 0 0 no-repeat; background-size: cover;}
.financingList li.bridgeLoan{ background: url(../images/Bridge-Loans.jpg) 0 0 no-repeat; background-size: cover;}
.financingList li.permanentLoan{ background: url(../images/Permanent-Loans.jpg) 0 0 no-repeat; background-size: cover;}
.financingList li.MezzanineFinancing{ background: url(../images/Mezzanine-Financing.jpg) 0 0 no-repeat; background-size: cover;}
.financingList li.PreferredEquity{ background: url(../images/Preferred-Equity.jpg) 0 0 no-repeat; background-size: cover;}



/**
Closed Loans
**/
.closedLoansList{ display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin-bottom: 50px;}
.closedLoansList li{ width: 368px; background: #fff; box-shadow: 0 4px 8px 0 rgba(138, 107, 118, 0.08); margin: 0 15px 30px 15px; flex-shrink: 0; padding: 15px; display: flex; flex-direction: column;}
.closedLoansList li > span img{ width: 100%;}
.closedLoansList li p{ font-size: 14px; color: #000000; line-height: 18px; text-align: center; padding: 10px 0 0 0;}

/**
Contact Us
**/

.contactUs{ background: #fff; padding: 40px; margin-bottom: 50px; box-shadow: 0 4px 8px 0 rgba(138, 107, 118, 0.08); display: flex;}
.contactUsLeft{ width: 300px; flex-shrink: 0; padding-right: 30px; margin-right: 30px; border-right: 2px #ededed solid;}
.contactUsLeft h5{ font-size: 20px; line-height: 22px; color: #000000; margin-bottom: 10px;}
.contactUsLeft h6{ font-family: 'gothambold'; font-size: 20px; line-height: 26px; color: #000000; margin-bottom: 30px;}
.contactUsLeft p{ font-size: 16px; line-height: 24px; color: #666666;}
.contactUsRight{ flex: 1;}
.frmRow{ display: flex; justify-content: space-between; margin-bottom: 35px;}
.frmCol{ flex: 1; display: flex; flex-direction: column; margin: 0 12px;}
.lblFrm{ font-size: 16px; color: #000000; margin-bottom: 10px;}
.txtInput{ background: #f9fbfa; border:2px #ecf1f4 solid; outline: 0; padding: 15px; width: 100%; font-size: 16px; color: #000; font-family: 'gothambook'; -webkit-appearance: none;}
.txtArea{ background: #f9fbfa; border:2px #ecf1f4 solid; outline: 0; height: 140px; padding: 15px; width: 100%; font-size: 16px; color: #000; font-family: 'gothambook'; resize: none; -webkit-appearance: none;}
.btnSubmit{ 
  font-family: 'gothambook'; 
  font-size: 22px; 
  line-height: 24px; 
  color: #0A6BDC; 
  width: 220px; 
  height: 70px; 
  display: inline-block; 
  text-align: center;
  background-image: linear-gradient(90deg, #2B37C8, #31CEB4);
  position: relative;
  padding: 3px;
}
.btnSubmitInner{
  width: 214px;
  height: 64px;
  background: #fff;
  position: absolute;
  background: #fff;
  left: 3px;
  top: 3px;
  text-align: center;
  line-height: 64px;
}



/**
Footer
**/
footer{ background: #113234; padding: 30px 50px;}
footer .container{ display: flex; align-items: flex-end; justify-content: space-between; flex: 1;}
.footerLeft{ width: 350px; flex-shrink: 0; display: flex; flex-direction: column;}
.footerLeft span{ margin-bottom: 10px;}
.footerLeft p{ color: #fff; font-size: 16px; line-height: 20px;}
.footerLeft p span{ font-size: 12px;}
.footerLeft p a{ color: #fff;}
.footerRight{ flex: 1; text-align: right; display: flex; flex-direction: column;}
.footerRight ul{ display: flex; align-items: center; justify-content: flex-end; margin-bottom: 30px;}
.footerRight ul li{ margin-left: 20px;}
.footerRight ul li a{ color: #fff;}
.footerRight p{ color: #fff;}
.footerRight p a{ color: #fff;}




#makeMeScrollable{
  width:100%;
  position: relative;
}

/* Replace the last selector for the type of element you have in
  your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
  if you have links use #makeMeScrollable div.scrollableArea a and so on. */

#makeMeScrollable div.scrollableArea img{
  position: relative;
  float: left;
  margin: 0 20px 0 0;
  padding: 0;
  /* If you don't want the images in the scroller to be selectable, try the following
      block of code. It's just a nice feature that prevent the images from
      accidentally becoming selected/inverted when the user interacts with the scroller. */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  vertical-align: middle;
}