/*==================================================
=                    Default                       =
==================================================*/

html {
  scroll-behavior: smooth;
}

body {
	color: #333;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	overflow-x: hidden;
}

p,ul,ol,dl,dd,blockquote,pre,td,th,textarea {margin-bottom: 1.5rem;}

ul li ul {margin-top: 1.5rem;}
#main_content li {margin-bottom: 1rem;}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {margin-bottom: 1.5rem;}

.block-title {color: #0F4273; font-size: 1.8rem; font-weight: 600;}
.page-title {color: #689dee; font-size: 3rem;}
.section-title {font-size: 1.6rem; font-weight: 600;}
.carousel-title {font-size: 1.2rem; font-weight: 600;}

@media only screen and (min-width: 1200px) {
	.block-title {font-size: 1.8rem;}
	.page-title {font-size: 3.5rem;}
	.section-title {font-size: 2.5rem;}
	.carousel-title {font-size: 1.8rem;}
}

h1,.h1 {}
h2,.h2 {}
h3,.h3 {}
h4,.h4 {}
h5,.h5 {}

p strong {font-weight: 600;}

/* avoid collapsing margins you might need this, depending on your design */
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child {}
/* avoid last-child bottom margin */
p:last-child,ul:last-child,ol:last-child,dl:last-child,blockquote:last-child,pre:last-child,table:last-child {}

/* avoid supp margin on nested elements */
li p,li ul {}

a,.accordion button.btn-link {
	color: #074f54;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}

a:hover,.accordion button.btn-link:hover {
	color: #008088;
	text-decoration: none;
}

a:focus { outline: none;}

.blockquote-footer {color: #2c3984; font-size: 1rem; font-weight: 600;}

.uppercase {text-transform: uppercase;}

/* ====== Accordion ================*/


/* ====== Page Body Classes ================*/


/* ====== Pricing Tables ================*/
.pricing .card {box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.10)}
.pricing .card-title {padding: 1.25rem 1.25rem 0 1.25rem;}
.pricing .card-text ul {margin-left: -15px;}
.pricing .card-footer {padding: 0; border-top: none;}
.pricing .card-footer a {background-color: #008087; color: #fff; display: block; padding: .5rem 1.25rem;}
.pricing .card-footer a:hover {background-color: #074f54; color: #fff;}

/* ====== No Hyperlink ================*/

.no-hyperlink {color:#4B4B4B!important;cursor:default!important}.no-hyperlink:hover{color:inherit!important;text-decoration:none!important}

/* ====== Header ================*/

.img-brand {height: 30px;}
@media only screen and (min-width: 1200px) {
	.img-brand {height: 40px;}
}
@media only screen and (min-width: 1600px) {
	.img-brand {height: 45px;}
}

/* ====== Navigation ================*/

.navbar {background-color: #fff; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);}

.navbar,.dropdown-item {font-size: .9rem; font-weight: 400;}
.navbar-light .navbar-nav .nav-link,.dropdown-item {color: #666;}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {color: #689dee;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .dropdown-item:hover {color: #008088!important;}

.navbar-expand-lg .navbar-nav .nav-link {padding-right: .75rem; padding-left: .75rem;}

.dropdown-toggle::after {display: none;}

.dropdown-item.active, .dropdown-item:active {background-color: transparent; color: #2991F2;}

.dropdown-item:focus, .dropdown-item:hover {
	background-color: transparent;
	color: #2991F2;
}

/* ====== Dropdown Top Arrow ================*/

.dropdown-menu-arrow {
  top: -25px;
  left: 10%;
  width: 0;
  height: 0;
  position: relative;
}
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-width: 7px 8px;
  border-style: solid;
  border-color: transparent;
  z-index: 1001;
}
.dropdown-menu-arrow:after {
  bottom: -18px;
  right: -8px;
  border-bottom-color: #fff;
}
.dropdown-menu-arrow:before {
  bottom: -17px;
  right: -8px;
  border-bottom-color: rgba(0,0,0,.15);
}

.top-bar .nav-link {color: #fff; font-size: .8rem; font-weight: 400; padding: .25rem .5rem;}

@media only screen and (min-width: 1200px) {
	.top-bar .nav-link {color: #fff; font-size: .9rem; font-weight: 400;}
}

/*==================================================
=                    Utilities                     =
==================================================*/

.social {background-color: #6a3375;}
.social .fab {color: #fff;}
.social .padding {padding: 1.75rem 1.25rem;}

.divider {background-image: url(../../assets/img/bg-color-pattern.png); height: 5px; margin-bottom: 2.5rem; margin-top: 2rem; width: 100%;}

.search {width: 100%;}
.search input {background-color: rgba(255, 255, 255, 0.3); border: transparent; border-radius: 0; width: 80%!important;}
.search input::-webkit-input-placeholder { /* Edge */ color: #fff;}
.search input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff;}
.search input::placeholder {color: #fff;}
.search button {border: transparent;}
.search button:hover {background-color: transparent;}

@media only screen and (min-width: 1200px) {
	.container-fluid.contain {
		max-width: 1400px;
	}
}

.section {padding-bottom:2rem; padding-top:2rem;}

@media only screen and (min-width: 1200px) {
	.section-divide {border: 1px solid #e8e8e8; margin-bottom: 6rem; margin-top: 6rem;}	
}

@media only screen and (min-width: 1200px) {
	.section {padding-bottom:4rem; padding-top: 4rem;}
}

/* ====== Buttons ================*/
button {
	border-color: #007bff;
	display: inline-block;
	    font-weight: 400;
	    text-align: center;
	    vertical-align: middle;
		border: 1px solid transparent;
		padding: .375rem .75rem;
	    font-size: 1rem;
	    line-height: 1.5;
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.btn, button[type=submit] {border-radius: 0; text-transform: uppercase;}

.btn-white {border-color: #fff; color: #fff;}
.btn-white:hover {background-color: rgba(255, 255, 255, 0.2); border-color: #fff;}

.btn-gold {background-color: #d9a13f; border-color: transparent; color: #333;}
.btn-gold:hover {background-color: #ebbb67; border-color: transparent; color: #333;}

.btn-black {background-color: #333; border-color: transparent; color: #fff;}
.btn-black:hover {background-color: #444444; border-color: transparent; color: #fff;}

.btn-primary, button[type=submit] {background-color: #074f54; border-color: transparent; color: #fff;}
.btn-primary:hover, button[type=submit]:hover {background-color: #008088; color: #fff;}




/* ====== Borders ================*/


/* ====== Colors ================*/

.bg-green {background-color: #074f54; color: #fff;}
.bg-grey {background-color: #EDEDED;}
.text-color-blue {color: #2c3984;}
.text-color-white {color: #fff;}
.section-title.text-color-blue:before,.section-title.text-color-blue:after {background-color: #2c3984;}
.bg-blue .section-title:before,.bg-blue .section-title:after {background-color: #fff;}

/* ====== Form ================*/
label {font-size: .9rem;}

.input-group-lg>.custom-select, .input-group-lg>.form-control, .input-group-lg>.input-group-append>.btn, .input-group-lg>.input-group-append>.input-group-text, .input-group-lg>.input-group-prepend>.btn, .input-group-lg>.input-group-prepend>.input-group-text {font-size: .9rem;}

/* ====== Text & Fonts ================*/

.fw-light {font-weight: 300!important;}
.fw-med {font-weight: 600!important;}

/* ====== Modal ================*/

.modal-backdrop {z-index: 99;}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline: 0;
	/* background-color: rgba(0, 31, 59, 0.9); */
}

.modal .close {
	color: #fff;
	font-size: 3rem;
	font-weight: 400;
	opacity: 1;
}

.modal-body {padding: 0;}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}
.modal-header {border-bottom: none;}
.modal-footer {border-top: none;}
.modal-footer .btn-link {color: #074f54;}

@media (min-width: 576px) {
	.modal-dialog {
		max-width: 100%;
	}
}

.modal-header .close {padding: .5rem 1rem;}    
  

/* ====== Cards ================*/
.card {border-radius: 0;}
.services .card {border: 4px solid #159198;}
.services .card .card-title {color: #0e757b; font-size: 1.4rem; font-weight: 600;}
.services .card .card-text {font-weight: 600;}
.services .card-footer {background-color: transparent; border: none;}
.services .card-footer a {color: #074f54; font-weight: 600;}
.services .card-footer a:hover {color: #159198;}

.tailored-to-fit .card {background-color: #074f54; color: #fff;}
.tailored-to-fit .card .card-title {font-size: 1.8rem;}
.tailored-to-fit .card .card-footer {background-color: transparent; border: none;}
.tailored-to-fit .card .btn {color:#fff; padding-left: 1.5rem; padding-right: 1.5rem;}

.card,#mycbb .pricing .card {border: 4px solid #159198;}

#mycbb .card {border: none;}
#mycbb .card .card-body {padding-left:0; padding-right:0;}
#mycbb .card p.card-text {font-size: .9rem;}

.numbered-decks .card-title {font-size: 1.5rem; padding: 0 1.25rem 1.25em 1.25rem}
.numbered-decks .card-title span {background-color: #209197; color: #fff; display: block; font-weight: 700; position: absolute; right: -1px; top: -1px; padding: 1rem 1.25rem; text-align: center; vertical-align: middle;}

@media (min-width: 1400px) {
	#mycbb .card .card-body {padding-left:1.25rem; padding-right:1.25rem;}
}

/* ====== Homepage Cards Solid Strat ================*/
.solid-strat .card {border: none; border-radius: 0!important; box-shadow: none!important;}
.solid-strat .card a {color: #fff;}
.solid-strat .card-img-overlay:hover {background-color: rgba(44, 58, 133, 0.9); background-image: url('../../assets/img/strat-angle.svg'); transition: 0.25s; transition-timing-function: ease-out; color: #689dee;}
.solid-strat .card-title {bottom: 0; text-align: right; width: 100%;}
.solid-strat .card-img-overlay {background: url('../../assets/img/strat-angle.svg');}

/* ====== Homepage Elevated Capabilities ================*/
.elevated-cap .list-group-item {background-color: #6a3375; color: #fff; border-radius: 0; margin-bottom: 15px; width: 100%;}
.elevated-cap .list-group-item:hover {background-color: #2c3984;}
.elevated-cap .btn-link {color: #fff;}
.elevated-cap .btn-link:hover {color: #6a3375;}

.logo-alpha {background-image: url(../../assets/img/icon-logo-alpha.png); background-repeat: no-repeat; background-position: 75% -20%;}

@media (min-width: 1400px) {
	.logo-alpha {background-position: 75% 60%; background-attachment: fixed;}
}

/*==================================================
=                    Custom                       =
==================================================*/

#faqs .card-header .btn {text-transform: none; font-weight: 700;}

.slick-slide {
    text-align:center;
    margin-right:15px;
    margin-left:15px;
}
.slick-slide{
	width: 270px;
}

.anchor {display: block; height: 125px; margin-top: -125px; visibility: hidden;}

.testimonials blockquote p {color: #999; font-size: 1.875rem;}

.option-galore {background-image: url(../../assets/img/bg-option-galore.jpg); background-size: cover; color: #fff;}

.faq {background-image: url(../../assets/img/faq-bg.jpg); background-size: cover; background-position: right center; color: #fff;}

/* ====== Jumbotron ================*/
.jumbotron {border-radius: 0;}

/* ====== Carusel Banner ================*/

#home-hero {background-image: url(../../assets/img/california-business-bank-orange-county.jpg); background-size: cover; background-position: center center; color: #fff; margin-bottom: 0; padding: 8% 0px;}

#interior-hero {background-image: url(../../assets/img/california-business-bank-orange-county.jpg); background-size: cover; background-position: center center; color: #fff; margin-bottom: 0; padding: 6% 0px;}

#home-hero h1,#interior-hero h1 {font-size: 2.5rem; font-weight: 600;}
#home-hero p,#interior-hero p {font-size: 1.2rem;}

#home-hero .btn-outline-primary,#interior-hero .btn-outline-primary {border: 1px solid #fff; color: #fff;}
#home-hero .btn-outline-primary:hover,#interior-hero .btn-outline-primary:hover {background-color: #003d41;}

@media (min-width: 1200px) {
	#home-hero h1,#interior-hero h1 {font-size: 3.5rem; font-weight: 600;}
	#home-hero p,#interior-hero p {font-size: 1.8rem;}
	#home-hero .btn-outline-primary,#interior-hero .btn-outline-primary {font-size: 1.25rem;}
}

/* ====== Virtual Vault Smart Safe ================*/
.bg-smart {background:linear-gradient(rgba(13,79,83,0.75),rgba(13,79,83,0.75)),url(../../assets/img/bg-smartsafe.jpg)!important; background-position: center center; background-size:cover !important; color: #fff; margin-bottom: 0; padding: 5% 0px!important;}
.smart-safe #interior-hero {background-size: cover; background-position: center center; color: #fff; margin-bottom: 0;}
.smart-safe.bg-2492 #interior-hero {background-image: url(../../assets/img/2400-top.jpg);}
.smart-safe.bg-7903 #interior-hero {background-image: url(../../assets/img/7900-main.jpg);}

.smart-safe blockquote p {color: #108086!important; font-style: italic; font-size: 1.5rem;}

@media (min-width: 1200px) {
	.bg-smart {padding: 3% 0px!important;}
	.bg-smart h1 {font-size: 3.5rem; font-weight: 600;}
	.bg-smart p {font-size: 1.2rem!important; margin-bottom: 2.5rem;}
}

/* ====== Business & Commercial Banking ================*/
.benficial-ownership #interior-hero {background-image: url(../../assets/img/beneficial-ownership.jpg); background-size: cover; background-position: center center; color: #fff;}

.commercial-loans #interior-hero {background-image: url(../../assets/img/business-and-commercoal-loans.jpg); background-size: cover; background-position: center center; color: #fff;}

.business-deposits #interior-hero {background-image: url(../../assets/img/coffee_shop_owners_bg_2.jpg); background-size: cover; background-position: center center; color: #fff;}

.business-loans #interior-hero {background-image: url(../../assets/img/business-and-commercoal-loans.jpg); background-size: cover; background-position: center center; color: #fff;}

.community #interior-hero {background-image: url(../../assets/img/cbb-in-the-community.jpg); background-size: cover; background-position: center center; color: #fff;}

.who-we-are #interior-hero {background-image: url(../../assets/img/bankers-in-the-field.jpg); background-size: cover; background-position: center center; color: #fff;}

.directors #interior-hero {background-image: url(../../assets/img/cbb-3200.jpg); background-size: cover; background-position: center center; color: #fff;}

.sba-loans #interior-hero,.business-cd #interior-hero {background-image: url(../../assets/img/img-sba-loans.jpg); background-size: cover; background-position: center center; color: #fff;}

.business-loans #interior-hero {background-image: url(../../assets/img/business-and-commercoal-loans.jpg); background-size: cover; background-position: center center; color: #fff;}

.commercial-real-estate-loans #interior-hero {background-image: url(../../assets/img/commercial-real-estate-loans.jpg); background-size: cover; background-position: center center; color: #fff;}

.business-checking #interior-hero {background-image: url(../../assets/img/business-deposit-business-checking.jpg); background-size: cover; background-position: center center; color: #fff;}

.business-money-market #interior-hero {background-image: url(../../assets/img/business-money-market.jpg); background-size: cover; background-position: center center; color: #fff;}

#mycbb #interior-hero {background-image: url(../../assets/img/pier_bg.jpg); background-size: cover; background-position: center center; color: #fff;}

#mycbb .contact-us {background-image: url(../../assets/img/customer_service_bg1.jpg); background-size: cover; background-position: center center; color: #fff;}

.bankers {background-image: url(../../assets/img/who-we-are-f.jpg); background-size: cover; background-position: center center; color: #fff;}
.bankers .card {background-color: rgba(255, 255, 255, 0.75); border: none;}
.bankers .card-footer {background-color:rgba(7, 79, 84, 0.75);}
.bankers .card-footer a {color:#fff; font-size: .9rem;}
.bankers .card-footer a:hover {color:rgba(255, 255, 255, 0.5);}
.bankers .card-title {font-size: 1.25rem; font-weight: 600;}
.bankers .card-title,.bankers .card-text {color: #333;}

.carousel-banner .carousel-item,.carousel-page .carousel-item {background-size: cover !important; background-position: center center !important; height: 240px; overflow: hidden;}
.carousel-banner .carousel-item h1 {font-size: 2rem; text-transform: uppercase;}
.carousel-banner .carousel-item .text-horizontal-line:before,.carousel-banner .carousel-item .text-horizontal-line:after {background-color: #fff;}
.carousel-banner .carousel-caption {bottom: auto; top: 50%; -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); transform:translate(0, -50%);}

.carousel-page .carousel-caption {
	background-color: rgba(22, 97, 166, 0.85);
	bottom: auto;
	height: 240px;
	left: 0;
	padding: 0;
	position: relative;
	right: 0;
	max-width: 500px;
	top: 0;
}

.carousel-page .carousel-caption .carousel-content {
	right: 0;
	left: 0;
	padding: 1rem 2rem;
	position: relative;
	text-align: left;
	top: 50%;
	-webkit-transform:translate(0, -50%);
	-ms-transform:translate(0, -50%);
	transform:translate(0, -50%);
}

.carousel-page .carousel-indicators {
	right: 0;
	bottom: 0;
	left: 15px;
	top: 200px;
	z-index: 15;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: left;
	justify-content: left;
	padding-left: 0;
	margin-right: 0;
	margin-left: 0;
	list-style: none;
	padding-left: 2rem;
}

@media (min-width: 576px) {
	.carousel-banner .carousel-item,.carousel-page .carousel-item,.carousel-page .carousel-caption {height: 555px;}
	.carousel-page .carousel-indicators {top: 500px;}
}

@media (min-width: 768px) {
	.carousel-banner .carousel-item h1 {font-size: 3rem;}
	.carousel-page .carousel-indicators {top: 640px;}
	.carousel-page .carousel-item,.carousel-page .carousel-caption {height: 700px;}
}

/* ====== Carusel Banner Welcome Item ================*/

.carousel-banner .carousel-item.welcome h1 {font-size: 1rem; text-transform: uppercase;}
.carousel-banner .carousel-item.welcome h1 span {font-size: 1.4rem;}

@media (min-width: 576px) {
	.carousel-banner .carousel-item.welcome h1 {font-size: 1.2rem;}
	.carousel-banner .carousel-item.welcome h1 span {font-size: 2rem;}
}

@media (min-width: 768px) {
	.carousel-banner .carousel-item.welcome h1 {font-size: 1.6rem;}
	.carousel-banner .carousel-item.welcome h1 span {font-size: 3rem;}
}

/* only apply on screens over 576px -- the `sm` breakpoint */
@media (min-width: 576px) {
	.custom-index {z-index: 2;}
	.image-offset-right {
  	position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
  }
    
  .image-offset-left {
		position: absolute;
    left:0;
    top:0;
    bottom:0;
    z-index: 1;
  }
    
  .fit {
  /* optional to reprevent image resize*/
  	object-fit: fit;
  }
}

/* ====== Footer ================*/
footer {background-color: #074f54; color: #fff;}
footer .section-title {color: #689dee;}
footer .btn-link {color: #fff;}
footer a {color: #fff;}
footer a:hover {color: #008088;}

/* ====== Text Box ================*/


/* ====== Text Box ================*/

.promo-strip .btn-primary {background-color: transparent; border: 2px solid #fff;}
.promo-strip .btn-primary:hover {background-color: rgba(255, 255, 255, 0.2);}


/* ====== Text Blocks with Image ================*/


/* ====== Page Blocks with Image ================*/


/* ====== Bio Box ================*/


/* ====== Calendar Box ================*/


/* ====== Events Box ================*/


/* ====== Meetings Box ================*/


/* ====== Text Box ================*/

.img-box .box-title {color: #0F4273; font-size: 1.2rem; font-weight: 600; margin-top: 1rem;}

.box-modal {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	margin-bottom: 2rem;
}

.box-modal .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .3s ease;
  background-color: rgba(20, 96, 163, 0.7);
}

.box-modal:hover .overlay {opacity: 1;}
.box-modal:focus { outline: none; }

.box-modal span {
  color: #fff;
  font-size: 2.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

/* ====== Accessibility ================*/

#skip-to-content {
  padding: 1em;
  position: absolute;
  top: -40px;
  left: 1em;
  z-index: 100000;
  color: white;
}

#skip-to-content:focus {
  position: absolute;
  top: 0;
  background: #222;
}