body {
  background-color: ghostwhite;
  color: 222222;
  margin-bottom: 60px;
}

.recipeBtn.bi.bi-list-ol {
  fill: ghostwhite;
  width: 1.1em;
  height: 1.1em;
}

.card-header.bg-foodiesite, .bg-foodiesite {
  background-color: steelblue;
}

.bookImg {
  max-width: 200px;
}

.bookBuy {
  width: 250px;
}

.card {
  border-color: silver;
}

.card-header, .card-footer {
  background-color: white;
}

.c_footer, .material-icons {
      vertical-align: middle;
}

.fb-10 {
  flex-basis: 10%;
}

.facebookIcon {
  fill: lightgrey;
}

.facebookIcon:hover {
  fill: #3b5999;
}

.gridItem .listHide {
  display: none;
}

.card-header.opened .chevron img {
  transform: rotate(-90deg);
}

.twitterIcon {
  fill: lightgrey;
}

.twitterIcon:hover {
  fill: #55acee;
}

.recipeDetails svg {
  color: ghostwhite;
  fill: yellow;
}

.card.pastal-blue {
  border-width: thin;
  border-color: #BCC5FF;
}

.pastal-green {
  border-width: thin;
  border-color: #DBFDDB;
}

.pastal-orange {
  border-width: thin;
  border-color: #FCE5CB;
}

.pastal-purple {
  border-width: thin;
  border-color: #E9CBFC;
}

.pastal-red {
  border-width: thin;
  border-color: #FFBCBC;
}

.pastal-yellow {
  border-width: thin;
  border-color: #FEFB72;
}

.pinterestIcon {
  fill: lightgrey;
}
.pinterestIcon:hover {
  fill: #bd081c;
}

.jumbotron {
  border-radius: 0;
  background-color: steelblue;
  color: ghostwhite;
}

#location_map {
    width: 100%;
    height: 350px;
    border: 1px solid lightgrey;
    margin-bottom: 1em;
}

.method-group {
  list-style: decimal inside;
}

.method-step {
  display: list-item;
}

.promotedRecipeImg {
  background-color: ghostwhite;
  width: auto;
  height: 80px;
  margin: 0px;
}

.promotedRecipe .div .img {
  object-fit: cover;
}

.recipeHeroImg {
  height: auto;
}

.recipeInfoLogo {
  flex-basis: 20%;
  flex-grow: 1;
  margin-right: 1.2em;
  margin-top: 4px;
  vertical-align: bottom;
  text-align: right;
}

.recipeInfoDetails {
  flex-basis: 60%;
  text-align: left;
  vertical-align: baseline;
}

.recipeNoImage {
  padding: 10px;
  height: 221px;
  width: auto;
}

.textRight {
  text-align: right;
}

.textLeft {
  text-align: left;
}

.recipeBump {
  width: 100%;
  margin: 1em 2px 1em;
}

/* Small and above - not mobile */
@media (min-width: 576px) {
  .heroCard {
    flex-basis: 45%;
  }

  .recipeBump {
    width: 50%;
    margin: 1em 1em 1em;
  }
}

/* Large screen and above */
@media (min-width: 992px) {
  .heroCard {
    flex-basis: 30%;
  }
}