/* ------------------- Top Navigation -----------------*/

#topnav {position:fixed;top:0;width:100%;padding:0px;height: 68px;z-index:1000;background-color:var(--wht);border-bottom:solid 1px #37474F;}
.navbar {margin:0px auto 0px auto;}
.uber-wrap { padding:0px;justify-content:center;}
.bcp-logo {max-width:180px;margin-top:15px;margin-bottom:-15px;}
.brand-wrap { text-align:left;margin-top:-24px;}	
.btn-wrap { text-align:right;}

@media all and (max-width:640px) {
  #topnav {background-color:var(--dblu);}
.uber-wrap {background-color:var(--dblu);max-height:650px;}
nav {height:auto;}
.btn-wrap { margin-top:24px;margin-bottom:-24px;text-align:center;}
.fa-bars {color:var(--wht);}
}

.ubermenu-target-description {color:var(--blk);line-height:1.3em;margin-top:6px;}
/* section - hero */

#hero {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 750px;
  padding-top: 60px;
  background-image:url('../images/bg.rays.webp');
  background-position:center;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed;
  position: relative;
  z-index: 0;
  text-align: left;
}

#hero img.bcp {width: 75%; padding-top:25%;margin:0 0 5% 15%;
}
#hero img.sfsky {width:90%; float: right;
}
#hero h1 {
    font-size: 32px;font-weight:300;line-height:1.2em;color:var(--slate);margin-left:15%;text-shadow: none;
  }

@media all and (max-width: 640px) {
#hero {
	min-height: 600px;
  padding-top: 0;
  padding-bottom:24px;
    background-image:url('../images/bg.rays.webp');
  background-position:left;
    background-repeat:no-repeat;
    background-attachment: fixed;
    position: relative;
    text-align: center;
  }
#hero img {width: 300px; padding-top:2%; margin: 0px 30px 0 20px;
  }
#hero h1 {
    font-size: 24px;
    text-align: center;
  }
}

/* -----------------title banner -------------*/

.title-banner {
  width:100%;
  background-color: var(--coal);
text-align:center;
  max-height:180px;
  position:fixed;
  padding-top:36px;
  border-bottom: 2px solid var(--wht);
box-shadow: 0px 3px 5px #ccc;
  z-index:100}

.title-banner h1 {font-size:2.2em;font-weight:400;color:var(--wht);padding-top:50px;}



@media all and (max-width:640px) {
.title-banner {
  display:none;}
}

.plx {
  height: 650px;
  margin-top: 60px;
  background-color: #10256f;
}

/* logo bar */

#logobar {
  align-items: center;
  height: auto;
  background-color: var(--wht);
  padding:0;
  border:solid .5px var(--slate);
}

#logobar .container {
  align-items: center;
  height: auto;
  padding:0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 10));
  }
}
.slider {
  background: #f5f5f5;
  height: 100px;
  margin:0 auto;
  padding-top: 18px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider::before, .slider::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  animation: scroll 150s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 100px;
  width: 250px;
}

/* banner feature */
#banner {background-color:var(--coal);}
#banner h2 {font-size: 1.4rem;
    font-weight: 400;color:var(--wht);margin-bottom:-2px;}
#banner h2 a {color:var(--wht);}

@media all and (max-width: 640px) {
  #banner h2 {font-size:.75rem;}
}

/* sections */
#strategy, #executive, #recruiting, #about, #whybsp, #lp {box-shadow: inset 0px 6px 10px -7px rgba(0,0,0,0.75);}
#strategy, #executive, #consulting-clients, #recruiting, #about {padding:200px 0 100px 0;}
#whybsp, #lp {padding:250px 0 100px 0;}

#mission { background-image: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,.6) 80%),url('../images/bg.rays.webp');
  background-position:center;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed;}

.port-consult, .port-talent { height:auto;min-height:425px;border-radius:15px ;padding:10% 10% 25% 10%;
                box-shadow: 0 3px 5px #ccc;position:relative;}
.port-consult { background: linear-gradient(3deg, rgba(18,146,168,0.5) 40%, rgba(98,166,177,.8) 80%), url('../images/bg.port.01.webp');background-repeat: no-repeat;
    background-size: cover;color: var(--wht);border:solid 2px var(--wht);
}
.port-consult h3, .port-talent h3 {font-size:36px;}
.port-talent {
    background: linear-gradient(
        3deg,
        rgba(16, 39, 110, 0.8) 40%,
        rgba(19, 62, 156, 0.5) 80%
    ), url('../images/bg.port.02.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 2px var(--wht);
} 

@media all and (max-width: 640px) {
#mission .btmgn { padding-bottom:50px;}
#mission h3 { text-align:center;}
}

#differentiation { 
  background-image: linear-gradient(0deg, rgba(19,62,156,0.9) 0%, rgba(19,62,156,0.6) 80%),url('../images/bg.rays.webp');
  background-position:center;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed;
}
#strategy, #whybsp, #marketing, #about, #lp, .clients-consult { background-image: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,.6) 80%),url('../images/bg.lines.webp');
  background-position:center;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed;}

  #enablement { 
  background-image: linear-gradient(0deg, rgba(19,62,156,0.9) 0%, rgba(19,62,156,0.6) 80%),url('../images/bg.chart.webp');
  background-position:center;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed;
}
#differentiation h2, #differentiation h3, #differentiation h4,#differentiation .sym-md, #differentiation .sym-md,  #enablement h2, #enablement h5, #enablement p, #metrics h2, #metrics h3, #metrics p, #metrics .sym-md,#metrics .sym-sm {color: var(--wht);}
#enablement h2, #enablement h5, #enablement p, #metrics h2, #metrics h3 {text-shadow: 2px 2px  var(--blk);}



#metrics { 
  background-image: linear-gradient(0deg, rgba(19,62,156,0.9) 0%, rgba(19,62,156,0.8) 80%),url('../images/bg.metrics.webp');
  background-position:center;
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed;
}
#operations {
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 36%, rgba(222,222,222,1) 87%);
}
#operations .port {
background: #e4ddc4;
}
#sales .height-wrap { height:250px;}
#sales .post-wrap { width:33%;margin-bottom:36px;}

@media all and (max-width:640px) {
	#sales .height-wrap { height:400px;}
	#sales .post-wrap {width:100%;margin-bottom:26px;background-color:pink;}
}
#sales h4 {font-size:20px; font-weight:600;}

.roles {text-align: center;}
.clients-consult { padding-top:150px; }
.clients-recruit { padding-top:100px; }

.teamintro {padding-top:300px;padding-bottom:50px;}
.teamintro p {text-align: center;font-size:22px;line-height:1.5em;}
.circ { border:solid 3px #999;border-radius: 50%;width:50%;box-shadow: 1px 2px 5px #999;}

@media all and (max-width: 640px) {
#strategy, #whybsp {padding-top:50px;}
.teamintro {padding-top:50px;padding-bottom:50px;}
.roles {text-align: center;}
.clients-consult { padding-top:150px; }
.clients-recruit { padding-top:75px; }
}

#executive h4 {
font-size: 20px;
    font-weight: 500;
    color:var(--wht);
    padding-bottom:1.5em;
}
.title {text-align: center;}
.source-box {background: rgb(18,146,168);
  background: linear-gradient(3deg, rgba(18,146,168,0.5) 40%, rgba(98,166,177,.8) 80%), url('../images/bg.positions.webp'); background-position:center;
  background-size: cover; color: var(--wht);border:solid 2px var(--wht);border-radius: 20px;}


/* client */
.log-pad { text-align:center; }
.log-pad img { max-width: 200px;padding:12px 25px; }

/* CTA sections */

  #cta {background-image: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.6) 75%), url("../images/bg.metrics.webp");
  background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
      background-attachment: fixed;
    background-position: bottom;
    position: relative;
    border-top:solid 2px var(--dblu);
    box-shadow: inset 0px 6px 10px -7px rgba(0,0,0,0.75);
    z-index: 0;}
  
  #cta h2 {color: var(--dblu);font-size:2.5rem;text-shadow:none;}
 #cta p { color:var(--coal);
  }
.box .selected {
    align-self: center;
}

.fade-in-section {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* drop shadows */

.mb24.tc.drop {
  text-shadow: 0 1px 1px var(--wht);
}

.mb24.tc.drop-box {
  box-shadow: 1px 2px 3px #999;
}

.dbox {
  box-shadow: 1px 2px 6px #999;
}

.dbox-inset {
  box-shadow: inset 0 0 6px #ccc;
}

/* borders */

.br10 {
  border-radius: 10px;
}

.bbb {
  border-bottom: solid 4px #1A5276;
}

.bbg {
  border-bottom: solid 4px #596475;
}

.bbr {
  border-bottom: solid 4px #AD0D1A;
}

.label {font-size: 14px;font-weight: 400;color: #999;}


/* sales */
@media all and (min-width: 641px) { 
.flex-row {
  display: flex;
  flex-wrap: wrap;
  align-items:flex-start;
  justify-content: center;
  align-content: space-between;
  width: auto;
}
}
.start { 
  align-items:flex-start;
}
.stretch {
    align-items:stretch;
}
.h100 {  height:100px;background-color:limegreen; }
.h140 {  height:140px;background-color: var(--dblu); }

.h150 {  height:150px; }
.h175 {  height:175px; }
.h200 {  height:200px;}
.h250 {  height:250px; }
.h300 {  height:300px; }
.h350 {  height:350px; }
.h400 {  height:400px; }
.h450 {  height:450px; }
.h500 {  height:500px; }
.h550 {  height:550px; }
.h600 {  height:600px; }
.h650 {  height:650px; }

.post {height:auto;}
.w00 {width:18%;}
.w01 {width:98%;}
.w02 {width:46%;margin:0 auto;}
.w03 {width:33%;}
.w04 {width:23%;margin:0 auto;}
.w05 {width:20%;}

.post .wrap {width:86%;margin:7%;}
#enablement .post .wrap, #techstack .post .wrap {width:75%;margin:0 auto;}

@media all and (max-width: 640px) { 
  .hxx {  max-height:400px;padding-bottom:36px; }
  #enablement .mob .wrap {width:70%;margin:0 auto;}
}

.source h5 {padding-bottom:12px;}

p.lead {
font-family: "Mona Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    font-size: 22px;
    line-height: 1.2em;
  text-align: justify;
  color: var(--coal);
}

@media all and (max-width: 640px) { 
 p.lead {
  font-size: 20px;
  font-weight: 400;}
}

.sym-md, .sym-sm {color:var(--slate);}
.sym-md {font-size:62px;}
.sym-sm {font-size:48px;}

@media all and (max-width:640px){
.sym-md {font-size:62px;}
.sym-sm {font-size:62px;}
}

                
.f-wrap {display:flex;flex-direction: row;padding: 1rem 1rem; align-items: center;
    justify-content: center; }
.f-wrap-r {display:flex;flex-direction: row-reverse;padding: 1rem 1rem; align-items: center;
    justify-content: center; }

.article-wrap-null {display:flex;flex-direction: row;padding: 1rem 1rem;
                vertical-align: middle;}

.cont {margin-left:30px;}
.cont .wrap {width:60%;margin:0 auto;}

 .f-row-r.cont {margin-right:15px;}
 .shadow-box {box-shadow: 0px 3px 5px #ccc;}
 
.adjust { background: rgb(246,246,246);
background: linear-gradient(100deg, rgba(246,246,246,0) 3%, rgba(246,246,246,1) 16%, rgba(246,246,246,1) 80%, rgba(246,246,246,0) 97%); padding:36px 0;margin:36px 0; }
.adjust-b { background: rgb(215,226,238);
background: linear-gradient(100deg, rgba(215,226,238,0) 3%, rgba(215,226,238,.6) 16%, rgba(215,226,238,.6) 80%, rgba(215,226,238,0) 97%); padding:36px 0;margin:36px 0; }
.adjust h3, .adjust-b h3 { font-size: 38px;font-weight:400;font-size-adjust:1.3em;color: var(--slate);padding-top:20px; }

@media all and (max-width: 640px) {
.adjust { background: rgb(246,246,246);
background: linear-gradient(100deg, rgba(246,246,246,0) 0%, rgba(246,246,246,1) 16%, rgba(246,246,246,1) 83%, rgba(246,246,246,0) 100%); padding:36px 0;margin:36px 0; }
.adjust h3 { font-size: 32px;font-weight:500;font-size-adjust:1.3em;color: var(--slate); }
}

#feature { padding:130px 0 150px 0;background-image:url(https://staging.baycloudpartners.com/wp-content/uploads/2023/12/bg.benchmark.svg);background-repeat: no-repeat;background-size:cover;text-align:left;}
#feature h2, #feature h3, #feature p {color:var(--wht);}
#feature h2 {text-shadow: 2px 3px #6a81a5;}
#feature h3 {font-size:1.5em;font-weight:500;}
#feature p {font-weight:400;}

@media all and (max-width:640px) {
#feature h2 {font-size:24px;}
#feature h3 {font-size:1.3em;}
}

.featcvr { width:100%;height:auto;margin:32px auto 32px auto;background: url(https://staging.baycloudpartners.com/wp-content/uploads/2025/04/ebook-survey-2025.webp);background-repeat: no-repeat;background-size:80%;}
      @media all and (max-width: 640px) { 
		  .featcvr { margin:0 auto 36px auto;width:100%;height:300px;background-size:100%;}
}

#eventrt .post {
  margin-left:3%;
    padding:24px;border-radius:20px;
  }
  
.sub-item {color:red;padding:24px;}

.exec-form-wrap {background-color:red;}
.form-choice-wrap { background-color:blue;border:solid 2px var(--blk);border-radius:15px;}

.wpforms-submit .form-btn {
  padding: 10px 56px;
  border: solid 1px var(--wht);
  border-radius: 50px;
  background-color: var(--teal);
  font-size: 18px;
  font-weight: 600;
  color: var(--blk);
  margin-left: 36px;
  margin-right: 36px;
  box-shadow: 0px 3px 5px #ccc;
}

.wpforms-submit .form-btn:hover {
  background-color: #999; color:#333 !important ;
}
.reverse {color:var(--wht);}
.source-box h3 {font-size:36px;color:var(--wht);padding-bottom:40px;}

figcaption {padding-top:24px;}

.locbot {position:absolute;bottom:10%;left: 50%;transform: translateX(-50%);}