.container.jmb_costco {
  border: 1px solid #CCCCCC;
  margin-top: 16px;
  margin-bottom: 16px;
}
.d-block-web { display: inline-block; }
.d-block-mob { display: none; }
.jmb_costco .hero-banner {
  display: table;
  background-color: #1C4D94;
  min-height: 320px;
}
.jmb_costco .hero-banner .hero-background {
  display: table-cell;
  width: 40%;
  background-image: url(/wp-content/themes/JMBullion/images/costco/img-background-goldbars-1oz-bar-in-hand.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  clip-path: polygon(80% 0%, 0% 0%, 0% 0%, 0% 100%, 100% 100%);
}
.jmb_costco .banner-text {
  display: table-cell;
  width: 40%;
  background-color: #1C4D94;
  color: #FFFFFF;
  padding: 3%;
  padding-right: 8%;
  min-height: 320px;
  text-align: center !important;
}
.jmb_costco .banner-text h1.title {
  font-size: 2.9rem;
  margin: 0;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.jmb_costco .banner-text h2.subtitle {
  margin-top: 0;
  font-size: 1.8rem;
}
.jmb_costco .banner-text .cta.main-btn {
  display: block;
  text-align: center;
  padding: 14px 16px;
  font-size: 17px;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}
.jmb_costco .banner-text .cta.subtext {
  text-align: center;
  font-size: 1.1rem;
  margin: 0;
  font-weight: 500;
}
.jmb_costco .banner-text .cta.subtext a { color: #FFFFFF; font-weight: 600; display: inline-block;}
.jmb_costco .inner-content { padding: 2.5rem; }
.inner-content a { text-decoration: underline; display: inline-block; }
.inner-content h2 {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.inner-content .subtext { margin: 20px 0; font-size: 1rem; color: #778899; }
.inner-content p { line-height: 1.4; }
.jmb_costco .showcase-text {
  background-color: #1C4D94;
  background-image: linear-gradient(to right, #0D4171, #27689D);
  color: #FFFFFF;
  position: relative;
}
.showcase-text .inner-content { width: 54%;}
.showcase-text .product-showcase {
  position: absolute;
  bottom: -10px;
  right: 0;
  width: 45%;
}
.showcase-text .inner-content h3 { font-size: 1.5rem; margin-top: 0; }
.jmb_costco .benefits-text {
  background-color: #F7F7F7;
  background-image: linear-gradient(to bottom, #F7F7F7, #F3F3F3);
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
}
.jmb_costco .benefits-text .title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.jmb_costco .benefits-text .btn-blue-alt {
  color: #FFFFFF;
  border: solid 1px #CCCCCC;
  background: -o-linear-gradient(#1A6BAF, #13365C);
  background: -moz-linear-gradient(#1A6BAF, #13365C);
  background: linear-gradient(#1A6BAF, #13365C);
  text-decoration: none;
  text-shadow: none;
  padding: 12px;
  width: 100%;
  margin-bottom: 12px;
  min-width: 320px;
}
.benefits-text .benefits-content-cols {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 30px;
}
.benefits-content-cols .icon-text-col p { line-height: 1.5; margin-top: 10px; }
.jmb_costco .table-differences {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.table-differences h2 {
  font-size: 36px;
  width: 50%;
}
.jmb_costco .inner-content.pt-0 { padding-top: 0 !important; }
.table-differences table {
  width: 80%;
  border-collapse: collapse;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}
.table-differences table tr {
  border-bottom: 1px solid #CCCCCC;
}
.table-differences th h3 {
  font-size: 20px;
  margin: 0;
}
.table-differences table td:first-child {
  text-align: left;
}
.table-differences table td i.fa {
  font-size: 20px;
}
#jmLogo {
  width: 65px;
}

@media only screen and (max-width: 662px) {
  .container { width: 100%;}
  .d-block-mob { display: inline-block; }
  .d-block-web { display: none; }
  .hero-banner {
      display: flex !important;
      flex-direction: column !important;
  }
  .hero-background {
      width: 100% !important;
      height:280px !important;
      clip-path: none !important;
  }
  .banner-text {
      width: 100% !important;
      padding: 5% !important;
      min-height: auto !important;
  }
  .p-0 { padding: 0 !important; }
  .jmb_costco .banner-text h1.title { font-size: 2rem; }
  .jmb_costco .banner-text h2.subtitle { font-size:1.2rem; }
  .jmb_costco .banner-text .cta.main-btn, .jmb_costco .banner-text .cta.subtext { font-size: 1rem; }
  .jmb_costco .inner-content { padding: 1.5rem; width: 100%; }
  .jmb_costco .showcase-text { background-image: linear-gradient(to bottom, #0D4171, #27689D);}
  .showcase-text .product-showcase { position: initial; width: 100%; }
  .jmb_costco .benefits-text .title-row { justify-content: center; margin-bottom: 20px; }
  .benefits-text .benefits-content-cols, .jmb_costco .table-differences { flex-direction: column; gap: 30px; }
  .table-differences table { width: 100%; }
  .table-differences h2 { font-size: 28px; width: 100%; text-align: center; }
  
}
#merchant_page select#sa_sort {
  background: #edf2f4;
  border: 1px solid #cbced0;
  border-radius: 5px;
  color: #0451a1;
  font-size: 12px;
  margin-left: 10px;
}

#review_image a {
  display: block !important;
}

@media screen and (max-width: 600px) {
  #review_header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  #review_header .block {
    margin: 0 !important;
  }
  #review_header .overall {
    margin: 25px 0 !important;
  }
  #review_header .percentage {
    display: flex;
    flex-direction: column;
    margin: 30px 0 !important;
  }
  #merchant_page label[for="sa_sort"], #merchant_page label[for="sa_sort"] {
    margin: 0 !important;
  }
  #sa_review_paging {
    display: flex;
  }
  #review_image .sa_logo {
    margin-top: 30px !important;
    margin: auto;
    float: none;
  }
  .fa-check-circle::before {
    content: "\f058";
  }
}