/* CSS for pethub.com/Perks2 page */

body.page-perks2 h1.page-header {
  display: none;
}

/********** Perks2 - page showing the grid of available Perks2 **********/
img#perks-banner {
  width: 845px; /* going for height of 180px. Cannot set height; it messes with img-responsive */
}
/* center the content card image */
span.articles-field-content-card-image img {
  margin-left: auto;
  margin-right: auto;
}

/* get columns to have same height (see post: https://www.codeply.com/p/pdiSNSEfzD ) */

body.page-perks2 .row-flex {
  display: flex;
  flex-wrap: wrap;
}

.ph-articles-grid-full-height {
  height: 100%;
  padding: 20px 20px 10px
}

body.page-perks2 article.node a {
  font-weight: bolder;
}

/*
body.page-perks2 [class*="col-"] {
  margin-bottom: 30px;
}
*/
body.page-perks2 div.view-content [class*="col-"] {
  margin-bottom: 30px;
}

/** "More Info" button positioning on the /perks tile **/
.perk-space-holder {
  height: 40px;
}
.perk-body {
  position: relative;
  overflow-wrap: break-word;
  margin-top: 10px;
  margin-bottom: 10px;
}
.perk-btn-more-info {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}
.btn-perk {
  width: 75%;
}

/********** Perks2 View - page showing a specific perk **********/
h2.perk-title {
  margin-bottom: 20px;
  margin-top: 0;
}
div.perk-company-logo img.img-responsive {
  float: right;
  /* margin-right: 0; */
  /* padding-right: 0; */
}
div#perks-share-fb {
  margin-top: 15px;
}

/********** Perks2 My Claimed Perks **********/
a.btn-perk-redeem {
  width: 60%;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.perk-instructions {
  margin-top: 20px;
  margin-bottom: 20px;
}


/**
General styles meant for use wherever this file is loaded
 */
.main-container h3 {
  color: var(--ph-color-orange-dark);
}

/********** Media Modifications for Viewport Size **********/

/*** Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/*** Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/*** Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}