html {
scroll-behavior: smooth;
}
/* COLORS */
.bebas {
font-family: "bebas-neue";
}
.proxima {
font-family: "proxima-nova", sans-serif;
}
.fut {
font-family: "futura-pt";
}
h1, h2, h3, h4, h5 {
font-family: "bebas-neue";
color: #385887;
}
a {
color: #385887;
}
.invert-white {
filter: brightness(0) invert(1);
}
.text-shadow {
text-shadow: 1px 1px 1px gray;
}
.mobile {
display: none;
}
#mobile-only {
display: none;
}
.navbar-toggler:focus {
outline-color: #196EB7;
}
dt {
line-height: 1.2;
}
#menu {
display: flex;
list-style: none;
justify-content: flex-end;
flex-wrap: wrap;
margin-bottom: 0;
}
.blue-gradient-bg {
background: rgb(183,241,243);
background: radial-gradient(circle at 20%, rgba(183,241,243,1) 0%, rgba(128,202,231,.1) 40%), radial-gradient(circle at 60% -20%, rgba(244,234,237,1) 0%, rgba(128,202,231,1) 40%);
}
.overflow-img {
margin-bottom: -1%;
transform: scale(1.03);
}
.nav-selection ul#menu li {
font-size: 80%;
margin: 0;
}
.nav-selection ul#menu li.active {
background-color: #196EB7;
color: white;
}
.nav-selection a {
margin: 0;
padding: 10px;
display: block;
}
.nav-selection a:hover {
text-decoration: none;
background-color: #314c75;
color: #fff;
}
#active {
background-color: #196EB7;
color: #fff;
}
.sidebar ul {
list-style-type: none;
}
.sidebar ul li {
color: #385887;
}
.sidebar ul a {
text-decoration: none;
}
.footer .icons {
font-size: 25px;
margin-bottom: 2px;
}
.footer {
line-height: 1.2;
}
.footer .icons img {
width: 40px;
}
.btn {
border-radius: 0;
}
.btn-primary {
font-family: "futura-pt";
background-color: #385887;
border-color: #385887;
}
.bg-primary {
background-color: #16284c !important;
}
.badge-primary {
background-color: #385887;
border-color: #385887;
}
.btn-primary:hover {
background-color: #314c75;
}
.btn-primary:active {
background-color: #314c75;
}
.btn-primary:focus {
background-color: #314c75;
}
.btn-secondary {
background-color: #314c75;
}
.btn-secondary:hover {
background-color: #b5bd00;
border-color: #b5bd00;
}
.btn-warning {
background-color: #196EB7;
color:#FFF!important;
}
.btn-warning:hover {
background-color: #314c75;
}
.btn-warning:active {
background-color: #196EB7;
}
.btn-warning:focus {
background-color: #196EB7;
}
.btn-success {
background-color: #b5bd00;
border-color: #b5bd00;
}
.btn-success:hover {
background-color: #196EB7;
border-color: #196EB7;
}
.text-green {
color: #95a83a;
}
.btn-info {
background-color: #196EB7;
}
.btn-info:hover {
background-color: #314c75;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #314c75;
border-color: #314c75;
}
.bottom-btn a {
background-color: #385887;
color: #fff;
margin: 0 4px;
padding: 12px 8px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
font-family: "futura-pt";
}
.bottom-btn a:first-of-type {
background-color: #196EB7;
}
.bottom-btn a:hover {
background-color: #196EB7;
text-decoration: none;
}
.bottom-btn svg {
margin-right: 2px;
}
main {
min-height: 60vh;
font-family: "proxima-nova", sans-serif;
}
#main {
margin-top: 0;
}
#map {
margin: auto;
}
/* accessibility */
a.skip-link {
position: absolute;
top: -2rem;
z-index: 1;
padding: 0 0.5rem;
background: #ccc;
color: #16284c;
font-size: small;
height: 2rem;
line-height: 2rem;
display: block;
transition: top 1s ease-out;
outline: none;
}
a.skip-link:focus {
top: 0;
transition: top 0.1s;
}
.hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip a {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip a:focus {
position: static;
width: auto;
height: auto;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sidebar a:hover {
font-weight: bold;
color: #314c75;
}
.join-the-team .owl-carousel .owl-item {
min-height: 400px;
background-color: #fafafa;
padding: 25px;
}
.join-the-team .owl-carousel .owl-item p {
text-align: right;
margin-top: 40px;
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
height: 100px;
font-size: 16px;
color: white;
margin: auto;
}
.dropdown #location-menu {
max-height: 500px;
overflow-y: scroll;
}
.dropdown label {
color: #000;
font-weight: bold;
}
.dropdown #dropdownMenuButton {
color: #000;
width: 100%;
background-color: #fff;
text-align: left;
border: 1px solid lightgray;
border-radius: 5px;
}
.dropdown #dropdownMenuButton:focus {
box-shadow: none;
}
.dropdown .dropdown-menu {
width: 100%;
padding: 0;
}
.dropdown .dropdown-menu a:hover {
background-color: #16284C;
color: #fff;
}
.awards ul li a {
text-decoration: underline;
}
.learning-center .col-xl-3 div {
margin: 2px 2px;
background-color: #f3f3f3;
}
.learning-center p {
font-family: "bebas-neue";
font-size: 1.4em;
color: #385887;
}
.calculators a {
font-family: "proxima-nova", sans-serif;
}
.calculators .title {
font-weight: bold;
color: #385887;
}
.faq .title {
color: #385887;
}
.my-acct li a:hover {
font-weight: bold;
}
.checklist ul {
list-style: none;
}
.checklist ul li svg {
color: #b5bd00;
margin-right: 5px;
}
.owl-carousel .item {
width: 100%;
height: 472px;
background-color: #196EB7;
cursor: pointer;
}
.owl-carousel .prequal {
background-image: url("https://www.houseloan.com/newIndex/img/prequalify2.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .prequal .inner {
margin-left: 0px;
}
.owl-carousel .prequal .inner h1 {
line-height: 42px;
font-size: 4em;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel .prequal .inner h1:nth-of-type(odd) {
margin-top: 35px;
}
.owl-carousel .prequal .inner h2 {
font-size: 1.8em;
line-height: 18px;
color: white;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .loanfly {
background-image: url("https://www.houseloan.com/newIndex/img/Loanfly3.jpg");
background-size: contain;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .loanfly .inner {
margin-left: 0px;
}
.owl-carousel .loanfly .inner h1 {
margin-top: 25px;
line-height: 28px;
font-size: 4em;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel .loanfly .inner h1:nth-of-type(odd) {
margin-top: 25px;
}
.owl-carousel .loanfly .inner h1:nth-of-type(even) {
margin-bottom: 25px;
}
.owl-carousel .loanfly .inner h2 {
font-size: 1.8em;
line-height: 18px;
color: white;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .refinance {
background-color: white;
background-image: url("https://www.houseloan.com/newIndex/img/Refinance.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .refinance .inner {
margin-left: 0px;
}
.owl-carousel .refinance .inner h1 {
line-height: 45px;
font-size: 4em;
color: #385887;
}
.owl-carousel .refinance .inner h1:nth-of-type(even) {
margin-bottom: 8px;
}
.owl-carousel .refinance .inner h2 {
background-color: white;
padding: 5px;
font-size: 1.8em;
line-height: 18px;
color: #385887;
max-width: fit-content;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .inhouse {
background-color: white;
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .inhouse .inner {
margin-left: 0px;
}
.owl-carousel .inhouse .inner h1 {
line-height: 45px;
font-size: 3em;
color: #385887;
}
.owl-carousel .inhouse .inner h1:nth-of-type(even) {
margin-bottom: 8px;
}
.owl-carousel .inhouse .inner h2 {
background-color: white;
padding: 5px;
font-size: 1.8em;
line-height: 1;
color: #385887;
max-width: fit-content;
font-family: "bebas-neue-by-fontfabric";
}
.smaller {
font-size: 12px;
}
@media (min-width: 576px) {
.owl-carousel .item {
width: 100%;
}
.owl-carousel .prequal .inner {
margin-left: 0px;
}
.owl-carousel .prequal .inner h1 {
line-height: 58px;
font-size: 4.8em;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel .prequal .inner h2 {
font-size: 2.2em;
line-height: 22px;
color: white;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .loanfly {
background-size: cover;
background-repeat: no-repeat;
}
.owl-carousel .loanfly .inner {
margin-left: 0px;
}
.owl-carousel .loanfly .inner h1 {
margin-top: 25px;
line-height: 30px;
font-size: 4em;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel .loanfly .inner h1:nth-of-type(odd) {
margin-top: 25px;
}
.owl-carousel .loanfly .inner h1:nth-of-type(even) {
margin-bottom: 25px;
}
.owl-carousel .loanfly .inner h2 {
font-size: 2em;
line-height: 25px;
color: white;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .refinance {
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
}
@media (max-width: 768px) {
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 1.8rem;
}
.join-the-team h1 {
font-size: 2.1rem;
}
.join-the-team nav {
margin-top: 15px;
}
.join-the-team img {
max-width: 100%;
}
}
@media (min-width: 768px) {
.owl-carousel .item {
width: 100%;
height: 472px;
}
.owl-carousel .prequal {
height: 472px;
}
.owl-carousel .loanfly {
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .loanfly .inner {
margin-left: 40px;
}
.owl-carousel .loanfly .inner h1 {
line-height: 38px;
font-size: 4.8em;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel .loanfly .inner h1:nth-of-type(odd) {
margin-top: 35px;
}
.owl-carousel .loanfly .inner h1:nth-of-type(even) {
margin-bottom: 25px;
}
.owl-carousel .loanfly .inner h2 {
font-size: 2.5em;
line-height: 25px;
color: white;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .refinance {
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .refinance .inner {
margin-left: 15px;
}
.owl-carousel .refinance .inner h1 {
line-height: 50px;
font-size: 4.5em;
color: #385887;
}
.owl-carousel .refinance .inner h1:nth-of-type(odd) {
margin-top: 25px;
}
.owl-carousel .refinance .inner h1:nth-of-type(even) {
margin-bottom: 15px;
}
.owl-carousel .refinance .inner h2 {
background-color: white;
padding: 5px;
font-size: 3em;
line-height: 45px;
color: #385887;
max-width: fit-content;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .inhouse {
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .inhouse .inner {
margin-left: 15px;
}
.owl-carousel .inhouse .inner h1 {
line-height: 50px;
font-size: 4.5em;
color: #385887;
}
.owl-carousel .inhouse .inner h1:nth-of-type(odd) {
margin-top: 25px;
}
.owl-carousel .inhouse .inner h1:nth-of-type(even) {
margin-bottom: 15px;
}
.owl-carousel .inhouse .inner h2 {
background-color: white;
padding: 5px;
font-size: 3em;
line-height: 45px;
color: #385887;
max-width: fit-content;
font-family: "bebas-neue-by-fontfabric";
}
}
@media (min-width: 992px) {
.bottom-btn a div {
display: inline;
}
.owl-carousel .item {
height: 300px;
}
.owl-carousel .prequal {
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .prequal .inner {
margin-left: 25px;
}
.owl-carousel .prequal .inner h1 {
margin-top: 25px;
line-height: 58px;
font-size: 6.5em;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel .prequal .inner h1:nth-of-type(even) {
margin-bottom: 25px;
}
.owl-carousel .prequal .inner h1:nth-of-type(odd) {
margin-top: 14vh;
}
.owl-carousel .prequal .inner h2 {
font-size: 3em;
line-height: 35px;
color: white;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .loanfly {
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .loanfly .inner {
margin-left: 40px;
}
.owl-carousel .loanfly .inner h1 {
margin-top: 25px;
line-height: 65px;
font-size: 6.5em;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel .loanfly .inner h1:nth-of-type(odd) {
margin-top: 55px;
}
.owl-carousel .loanfly .inner h1:nth-of-type(even) {
margin-bottom: 45px;
}
.owl-carousel .loanfly .inner h2 {
font-size: 3em;
line-height: 45px;
color: white;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .refinance {
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .refinance .inner {
margin-left: 15px;
}
.owl-carousel .refinance .inner h1 {
line-height: 80px;
font-size: 6.5em;
color: #385887;
}
.owl-carousel .refinance .inner h1:nth-of-type(odd) {
margin-top: 25px;
}
.owl-carousel .refinance .inner h1:nth-of-type(even) {
margin-bottom: 25px;
}
.owl-carousel .refinance .inner h2 {
background-color: white;
padding: 5px;
font-size: 3em;
line-height: 45px;
color: #385887;
max-width: fit-content;
font-family: "bebas-neue-by-fontfabric";
}
.owl-carousel .inhouse {
background-size: cover;
background-repeat: no-repeat;
height: 472px;
}
.owl-carousel .inhouse .inner {
margin-left: 15px;
}
.owl-carousel .inhouse .inner h1 {
line-height: 80px;
font-size: 6.5em;
color: #385887;
}
.owl-carousel .inhouse .inner h1 {
margin-top: 25px;
margin-bottom: 25px;
}
.owl-carousel .inhouse .inner h2 {
background-color: white;
padding: 5px;
font-size: 3em;
line-height: 45px;
color: #385887;
max-width: fit-content;
font-family: "bebas-neue-by-fontfabric";
}
}
@media screen and (max-width: 992px) {
.bottom-btn a {
margin-top: 2px;
}
.owl-carousel .test {
object-fit: cover;
}
.owl-carousel .loanfly {
background-size: cover;
background-repeat: no-repeat;
}
.owl-carousel .prequal {
background-size: cover;
background-repeat: no-repeat;
}
.owl-carousel .refinance {
background-size: cover;
background-repeat: no-repeat;
}
.owl-carousel .inhouse {
background-size: cover;
background-repeat: no-repeat;
}
.owl-carousel .item {
height: 275px;
background-color: #196EB7;
}
}
@media screen and (max-width: 768px) {
.mobile {
display: flex;
}
#mobile-only {
display: block;
}
.desktop {
display: none;
}
}
@media (max-width: 335px) {
.owl-carousel .loanfly .inner {
margin-left: 0px;
}
.owl-carousel .loanfly .inner h1 {
margin-top: 25px;
line-height: 28px;
font-size: 3.5em;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel .loanfly .inner h1:nth-of-type(odd) {
margin-top: 55px;
}
.owl-carousel .loanfly .inner h1:nth-of-type(even) {
margin-bottom: 25px;
}
.owl-carousel .loanfly .inner h2 {
font-size: 1.5em;
line-height: 18px;
color: white;
font-family: "bebas-neue-by-fontfabric";
}
}
/* location */
.filter #clear {
border-color: #16284C;
color: #16284C;
}
.filter #clear:active, #clear:hover{
background-color: #16284c;
color: #fff;
}
.hide{
display: none;
}