/* Cards */
.pageContent {
  position: relative;
}

.perkCards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
}

.perkCard {
  box-sizing: border-box;
  padding: 4rem;
  position: relative;
  opacity: 1;
  color: #fff;
  background: url('/images/membership/member-perks/perksBack.png') center center/cover no-repeat;
  flex-grow: 1;
  max-width: 100%;
  min-width: 410px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.rmhc.perkCard {
  background: url('/images/block-images/RMHC%20Families%20bg.jpg') center center/cover no-repeat;
  max-width: 100%;
}

.perkCard.perkInternal {
  max-width: 100%;
}

.perkCard.perkInternal > .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.perkCard > * {
  position: relative;
  z-index: 2;
}

.perkCard p,
.perkCard h4 {
  color: #fff;
  margin: 0;
  text-align: center;
}

.perkCard-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.47;
  z-index: 1;
}

.perkCard-logo {
  max-width: 75%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perkCard-logo img {
  max-height: 100px;
  display: block;
}

.perkCard-logo img,
.perkCard-content > *,
.perkCard .button-ibw-i {
  filter: drop-shadow(1px 1px 1px #333);
}

.perkCard .ib-btn-container {
  margin: 1rem 0 0;
}
.perkCard .button-ibw-i:hover {
  color: #fff;
  filter: drop-shadow(0 0 0);
  height: 64px;
}

.atb .perkCard-overlay {
  background: #0c5ba7;
}
.atb .button-ibw-i:hover {
  border: 4px #fec552 solid;
  background: #fec552;
}

.bmo .perkCard-overlay {
  background: #d24643;
}
.bmo .button-ibw-i:hover {
  border: 4px #1660a9 solid;
  background: #1660a9;
}

.bell .perkCard-overlay {
  background: #0066a4;
}
.bell .button-ibw-i:hover {
  border: 4px #0066a4 solid;
  background: #0066a4;
}
.bell.perkHeader .perkCard-overlay {
  opacity: 0.8;
}

.brokercore .perkCard-overlay {
  background: #000;
  opacity: 0.3;
}
.brokercore .button-ibw-i:hover {
  border: 4px #0054a6 solid;
  background: #0054a6;
}

.commcore .perkCard-overlay {
  background: #e56017;
}
.commcore .button-ibw-i:hover {
  border: 4px #2a73d7 solid;
  background: #2a73d7;
}

.csio .perkCard-overlay {
  background: #00546f;
}
.csio .button-ibw-i:hover {
  border: 4px #f8d665 solid;
  background: #f8d665;
}

.ecl .perkCard-overlay {
  background: #027379;
}
.ecl .button-ibw-i:hover {
  border: 4px #dfe01b solid;
  background: #dfe01b;
}

.elitePromo .perkCard-overlay {
  background: #000;
}
.elitePromo .button-ibw-i:hover {
  border: 4px #ff4338 solid;
  background: #ff4338;
}

.epay .perkCard-overlay {
  background: #37b04a;
}
.epay .button-ibw-i:hover {
  border: 4px #37b04a solid;
  background: #37b04a;
}

.finevo .perkCard-overlay {
  background: #1c2753;
}
.finevo .button-ibw-i:hover {
  border: 4px #82dbfd solid;
  background: #82dbfd;
}

.firstinsurance .perkCard-overlay {
  background: #5e6578;
}
.firstinsurance .button-ibw-i:hover {
  border: 4px #061f5c solid;
  background: #061f5c;
}

.goodlife .perkCard-overlay {
  background: #ee2e24;
}
.goodlife .button-ibw-i:hover {
  border: 4px #ee2e24 solid;
  background: #ee2e24;
}

.ibacTech .perkCard-overlay {
  background: #8e2e87;
}
.ibacTech .button-ibw-i:hover {
  border: 4px #8e2e87 solid;
  background: #8e2e87;
}

.nationalBank .perkCard-overlay {
  background: #879dab;
}

.nationalBank .button-ibw-i:hover {
  border: 4px #fe171f solid;
  background: #fe171f;
}

.neushield .perkCard-overlay {
  background: #49b6ac;
}

.neushield .button-ibw-i:hover {
  border: 4px #ddd755 solid;
  background: #ddd755;
}

.nirix .perkCard-overlay {
  background: #0b56db;
}

.nirix .button-ibw-i:hover {
  border: 4px #ee9200 solid;
  background: #ee9200;
}

.marks .perkCard-overlay {
  background: #000;
}

.marks .button-ibw-i:hover {
  border: 4px #f78f1e solid;
  background: #f78f1e;
}

.moneris .perkCard-overlay {
  background: #00667d;
  opacity: 0.3;
}

.moneris .button-ibw-i:hover {
  border: 4px #00b6c8 solid;
  background: #00b6c8;
}

.oilers .perkCard-overlay {
  background: #02225d;
}

.oilers .button-ibw-i:hover {
  border: 4px #d14520 solid;
  background: #d14520;
}

.opta .perkCard-overlay {
  background: #d44b2b;
}

.opta .button-ibw-i:hover {
  border: 4px #807f84 solid;
  background: #807f84;
}

.opta .perkCard-overlay {
  background: #d44b2b;
}

.opta .button-ibw-i:hover {
  border: 4px #807f84 solid;
  background: #807f84;
}

.papaJohn .perkCard-overlay {
  background: #4a9645;
}

.papaJohn .button-ibw-i:hover {
  border: 4px #ff0000 solid;
  background: #ff0000;
}

.pathway .perkCard-overlay {
  background: #1e2a4f;
}

.pathway .button-ibw-i:hover {
  border: 4px #1cc0a9 solid;
  background: #1cc0a9;
}

.perkopolis .perkCard-overlay {
  background: #e6088c;
}

.perkopolis .button-ibw-i:hover {
  border: 4px #8bc44a solid;
  background: #8bc44a;
}

.pronavigator .perkCard-overlay {
  background: #6db0c7;
}

.pronavigator .button-ibw-i:hover {
  border: 4px #e18048 solid;
  background: #e18048;
}

.quickFacts .perkCard-overlay {
  background: #159ba3;
}

.quickFacts .button-ibw-i:hover {
  border: 4px #613494 solid;
  background: #613494;
}

.rexall .perkCard-overlay {
  background: #62cfc3;
}

.rexall .button-ibw-i:hover {
  border: 4px #38a69a solid;
  background: #38a69a;
}

.rmhc .perkCard-overlay {
  background: #8c2e83;
  opacity: 0.85;
}

.rmhc .button-ibw-i:hover {
  border: 4px #96c93d solid;
  background: #96c93d;
}

.sage .perkCard-overlay {
  background: #87a559;
}

.sage .button-ibw-i:hover {
  border: 4px #87a559 solid;
  background: #87a559;
}

.silverberg .perkCard-overlay {
  background: #767561;
}

.silverberg .button-ibw-i:hover {
  border: 4px #1a3f70 solid;
  background: #1a3f70;
}

.trufla .perkCard-overlay {
  background: #f39917;
}

.trufla .button-ibw-i:hover {
  border: 4px #7e81be solid;
  background: #7e81be;
}

.willful .perkCard-overlay {
  background: #0064dc;
}

.willful .button-ibw-i:hover {
  border: 4px #ffdc1e solid;
  background: #ffdc1e;
}

.perkHeader {
  position: absolute;
  width: 100%;
  height: 150px;
  left: 0;
  top: -150px;
  z-index: 5;
  display: flex;
  align-items: center;
  backdrop-filter: blur(5px);
}

.perkHeader-back {
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0.4;
}

img.perkInfo {
  width: 100%;
}

.perkHeader img {
  position: relative;
  z-index: 2;
  max-height: 100px;
}

.ib-flex-cell h4 {
  margin-top: 0;
}

.ib-flex-cell .ib-btn-container {
  margin-bottom: 0;
}

section .ib-flex-cell {
  display: inline-block;
}

.ib-flex-cell > .ib-text-content {
  max-width: 100%;
}

.ib-flex-cell .ib-image {
  display: none;
}

.perkHeader.centerLogo {
  backdrop-filter: none;
  height: 500px;
  top: -500px;
}

.perkHeader.centerLogo img {
  width: 100%;
  height: 100%;
  max-height: 300px;
}

@media (min-width: 992px) {
  .perkCard {
    max-width: calc(50% - 1rem);
  }
  section .ib-flex-75 {
    gap: 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
  }

  section .ib-flex-25 {
    gap: 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .ib-flex-cell .ib-image {
    width: 100%;
    height: 100%;
    display: block;
  }
}