html, body {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
}


.tb-megamenu-item .level-1 .mega a{
	color:#FFFFFF !important;
}

.c-navbar, .c-prefooter, #foundation-usa-menu, .tb-megamenu-submenu.dropdown-menu.mega-dropdown-menu.nav-child.x11, .c-mega-menu.c-pull-right.c-mega-menu-dark.c-mega-menu-dark-mobile.c-mega-menu-onepage.c-fonts-uppercase.c-fonts-bold.c-shown, .cbp-popup-navigation{
	background-color: #252a2a80 !important;
}

.tb-megamenu-item:hover{
	background-color: #252a2a !important;
}

li.tb-megamenu-item.level-1.mega > a:hover{
	color: #FFFFFF !important;
}

.button-primary {
  background-color: transparent;
  color: #296285 !important;
  border: 2px solid #296285 !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  padding: 10px 20px !important;
  display:block;
  width: calc(100% - 12px);
  margin: 0 auto;
  box-sizing: border-box;
  overflow-wrap:anywhere;
  white-space: normal;
  text-align:center;
}

.button-primary:hover {
  background-color: #296285 !important;  
  color: #ffffff !important;            
}

.button-primary:hover a{
  background-color: #296285 !important;  
  color: #ffffff !important;            
}

.button-primary-inverse {
  background-color: #296285 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  padding: 10px 20px !important;

  display: inline-flex;              /* important */
  align-items: center;
  justify-content: center;

  white-space: normal;               /* allow wrapping */
  word-break: normal;                /* DON'T break words */
  overflow-wrap: break-word;         /* only if needed */

  text-align: center;
  min-width: 220px;                  /* KEY: prevents ugly wraps */
  max-width: 100%;
}

.button-primary-inverse:hover {
  background-color: transparent !important;  
  color: #296285 !important;             
  border: 2px solid #296285 !important;           
}

.button-primary-inverse:hover a{
  background-color: transparent !important;  
  color: #296285 !important;             
  border: 2px solid #296285 !important;          
}


/* Whole column/card */
.honoree-card {
  border: 1px solid #000;
  border-radius: 14px;
  padding: 18px;
  background: #fff;
}

/* Keep Bootstrap’s responsive col-* behavior; just allow equal heights */
#details.honoree-row {
  display: flex;          /* Bootstrap row already is, but safe */
  flex-wrap: wrap;        /* ensures wrapping works */
  align-items: stretch;   /* IMPORTANT: equal height columns per row */
}

/* Make each column stretch its child */
#details.honoree-row > [class*="col-"] {
  display: flex;          /* IMPORTANT */
}

/* Make the card fill the column height */
#details .honoree-card-2 {
  width: 100%;
  height: 100%;           /* IMPORTANT */
  min-height: 180px;      /* keep if you want baseline */
  box-sizing: border-box;

  border: 1px solid #000;
  border-radius: 14px;
  padding: 18px;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: your inline justify-content:center on the row can fight spacing.
   This keeps columns normal while still centering text inside cards. */
#details.honoree-row {
  justify-content: flex-start !important;
}


.honoree-row {
  display: flex;        /* just to be explicit */
  flex-wrap: wrap;  
}

/* Lighter grey for the text underneath */
.honoree-card_meta {
  color: #777;          /* grey */
  line-height: 1.35;
}

/* Optional: if your "MD" is on its own line and you want it a bit tighter */
.honoree-card_meta p,
.honoree-card_meta div {
  margin: 0;
}


.ticket-info {
  display: none;
  margin-top: 10px;
}

.ticket-btn {
  cursor: pointer;
}
.ticket-details {
  display:none;
  margin-top:10px;
}

.row.center-cols{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}