:root {
  --TRGblue: #094d87;
} /* to use = : var(--TRGblue); */


#advisorTitleBar {
  max-height:50px;
  height:50px !important;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 0px auto;
}

#advisorTitleBar p,
#advisorTitleBar h1,
#advisorTitleBar h2,
#advisorTitleBar h3,
#advisorTitleBar h4,
#advisorTitleBar h5,
#advisorTitleBar h6,
#advisorTitleBar div,
#advisorTitleBar { 
  font-size:20px !important;
  padding: 8px 0px;
  font-family: Arial, Verdana, Helvetica;

}

.connectContainer {
  width:100%;
  padding: 5px 0px 15px 0px;
  margin: 0px auto;
} 

#connectBoxes {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: wrap;
  width:100%;
  margin: 0px auto;
  max-width: 960px;
}

.advisorImage {
  display: flex;
  justify-content: center;
  align-content:center;
  padding: 0px;
  margin:0px;

}

.advisorImage .advisorPhoto img {
  max-width:150px;
  width:100%;
  /*box-shadow: 0px 2px 5px rgba(0,0,0,.9);*/
  margin:0px;
  height:100% !important;
}


.advisorCard {
  max-width: 150px;  
  background-color: rgba(240,240,240, 1);
  margin: 10px 10px;
  padding: 0px;
  box-shadow: 0px 2px 5px rgba(0,0,0,.6);
  word-break: break-word;
  width:20%;
}


.advisorCard p {
  padding: 0px;

}
.AdvisorNameDiv{
  text-align:center;
  height:40px;
  font-size:12px !important;
  font-family: Arial, Verdana, Helvetica;
}

.AdvisorName a,
.AdvisorName div {
  text-decoration:none;
  color:black;
  font-weight:bold;
}

.AdvisorName div a:hover {
  color: var(--TRGblue);
}

.cardDescription{
  display:block;
  padding: 5px 0px 0px 0px;
  /*  height:49%; */
  margin:0px auto !important;
  height:auto;
}

.cardDescription p {
  text-decoration:none;
  font-size: 12px;
}

.learnMoreLink{
  padding: 10px;
}

/* ----- learn More button  ---- */
.learnMoreLink a.readMore  {
  display: flex;
  justify-content:center;
  align-content:flex-end;
  text-decoration:none;
  margin: 0px auto;
  border-style: solid;
  border-width:1px;
  border-color: var(--TRGblue);
  background-color: transparent;
  padding: 8px 0px;
  color: var(--TRGblue) ;
  border-radius: 2px;
  width: auto;
  max-width: 400px;
  font-family: Arial, Verdana, Helvetica;
  font-size: 14px !important;
}

.learnMoreLink a.readMore:hover{
  background-color: var(--TRGblue);
  color: white;
}

.learnMoreLink a.readMore active{
  transform: scaleY(1.1);
  color: black;
  border-color: black;
}

/*==== end button ==== */

/*== Tablet == */
@media only screen and (max-width: 1050px) { 

  .advisorCard p {
    padding: 0px 20px;

  }

  .cardDescription{
    padding: 15px 0px 0px 0px;
    margin:0px auto !important;
  }

}

/*== Tablet == */
@media only screen and (max-width: 870px) { 
  #connectBoxes {
    max-width:870px;
    margin:0px auto;
  } 
  .advisorCard {
    width: 19%;
    max-width: 150px;
    margin: 10px 3px;
  }  

  .AdvisorNameDiv {
    word-break: break-word;
  } 

}


/*== Mobile == */
@media only screen and (max-width: 667px) { 
  #connectBoxes{
    margin: 0px auto auto auto;
    max-width: 500px;
  }
  .advisorCard {   
    width: 50%; 
    max-width: 150px;
    margin: 10px;

  } 
  .heroTextOverlay h1 {
    font-size:18px !important; 
  }

  .advisorImage img {
    padding 10px !important;   
  }

  .AdvisorNameDiv{
    text-align:center;
    height:40px;
  }


}


/*== Mobile == */
@media only screen and (max-width: 440px) { 

  #advisorTitleBar {
    max-height:40px;
  }

  #advisorTitleBar p,
  #advisorTitleBar h1,
  #advisorTitleBar h2,
  #advisorTitleBar h3,
  #advisorTitleBar div{ 
    font-size:16px !important
  }

  #connectBoxes{
    margin: 0px auto auto auto;
  }

  .advisorCard {
    width: 45%;
    max-width: 150px;
    margin: 10px auto;

  }  

  .heroTextOverlay h1 {
    font-size:16px !important; 
  }
  .AdvisorNameDiv {
    font-size:12px !important;
    word-break: break-word;
    padding:0px;
    height:40px
  } 

  .cardDescription {
    padding:10px 0px 0px 0px !important; 
  }


}
/* ================= Begin Dynamic Page Styling ====*/

.profileWrapper {
  width:100%;
  box-shadow: 1px 3px 5px rgba(200,200,200,.6);
}

.profileContainer {
  max-width:1200px;
  margin:0px auto;
  padding-bottom:15px;
}

.dynamicTitleBar {
  width: 100%;
  color: black;
  padding: 10px 0px 0px 0px;
  font-size:26px;
  text-align:center;
  word-break: break-word;
  max-width:90%;
  margin:0px auto;

}

.profileCard {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap; 
  padding: 10px 0px;
  justify-content:center;
  width:100%;

}

.profileImage {
  background-color:white;
  margin-left:30px;
}

.cardContactInfo{
  padding:0px 10px;
  word-break: break-word;
}

.profileImage img {
  display:flex;
  box-shadow: 0px 2px 5px rgba(0,0,0,.6);

}


.longDescription{
  padding:20px 30px;
  max-width:1200px;
  margin:0px auto;
}

.pageBreadcrumb,
.pageBreadcrumb a {
  text-decoration:none;
  color:#8c1221;
  padding:2px 6px; 
}

.pageBreadcrumb a:hover {
  color:black;
}


/*== Tablet == */
@media only screen and (max-width: 920px) { 
  .profileCard {
    /* justify-content:flex-start; */
  }
  .cardContactInfo{ 
    padding:0px 30px;
  }
  .profileContainer {
    padding-bottom:0px;  

  }

  /*== Mobile == */
  @media only screen and (max-width: 667px) { 


  }


  /*== Mobile == */
  @media only screen and (max-width: 440px) { 

  }