.recipe_wrapper {
   display: relative;
}

.recipe_wrapper .fa {
   position: absolute;
   top: 5px;
   right: 20px;
   color: darkgrey;
   font-size: 20px;
}

.circle-icon {
    background: white;
    padding:5px;
    border-radius: 30%;
    opacity: 0.7
}

.fa-print {
  color: darkgrey;
}


.jumbotron h1, .jumbotron h3, .jumbotron h4, .jumbotron h6, .jumbotron h6 a {
  color: #dddddd !important;
}

@media (min-width: 575.98px) {
  .jumbotron {

    background-image: url('/static/images/_banner.png') !important;
    background-size: cover !important;
  }
}


@media (max-width: 576px) {

  .jumbotron {
    background-image: url('/static/images/_banner-sm.png') !important;
    background-size: cover !important;

  }
}

.rwk_book {
  display: inline-block;
  font-size: 1.2em;
  font-weight: 500;
  margin-top: 25px;
  margin-bottom: 50px;
  text-align: center;
  padding-top: 15%;
  padding-right:10%;
  padding-left: 10%;
  width: 150px;
  height:200px;
  color: #fce6a7;
  border-radius: 2px 8px 8px 2px;
  box-shadow: 10px 10px 5px darkgray;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  background-image: linear-gradient(90deg, #160903 10px, transparent 12px), linear-gradient(135deg, #5a250c, #2d1206);
}

.rwk_book:hover {
  transform: scale(1.2);
}

.book_grid {
  text-align: center;
}

.container, .jumbotron {
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

i {
  cursor: pointer;
}

.progress_bar {
    background: blue;
}



//
// Image displays including modal view
//

a#pic_modal {
    max-width: 100%;
    width: 100%;
}


img#pic_display {
    max-width: 100% !important;
    width: 100% !important;
    //image-orientation: from-image;
}

img.pic_large {
    max-width: 1024px;
    width: 100%;


}

#pic_modal {
    max-width: 1024px;
    width: 80vw;
    max-height: 1024px;
    height: 80vh;
    overflow-y: scroll;
}

a.close-modal {
    top: 5% !important;
    right: 5% !important;
}

.comments {
    font-size: 90%;
}

.comment_entry {
    padding-top: 1vh;
    padding-bottom: 1vh;
    border-bottom: solid 1px lightgray;
}

.comment_name_date {
    color: #444444;
    font-weight: bold;
}

.btn-comment {
    height: 3vh !important;
    font-size: 90%;
    padding: 0 0.5vw 0 0.5vw;
    margin-top: 1vh;
}