/*****************BLOG************************/

.blog-container {
  height: 340px;
}

.recipe {
  background-color: #464646;
  background-image: url('/Home/assets/recipe-1-420x340.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  height: 340px;
  position: relative;
}

.category-pills-wrapper {
  position: relative;
  z-index: 10;
  left: 20px;
  width: 80%;
}

.category-pill-items {
  display: inline-flex;
  flex-wrap: wrap;
}

.blog-badge {
  color: #fff;
  font-size: inherit;
  margin: 4px;
  padding: 6px 8px;
}

.tag-badge a {
    color: #fff;
}

.pill-item {
  background-color: #4884c2;
  color: #fff;
  font-size: inherit;
  margin: 4px;
  padding: 6px 8px;
  border-radius: 20px;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #222;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.5s ease;
  z-index: 100;
}



.blog {
  height: 340px;
  background-color: #c3b664;
  position: relative;
}

.blog > img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 300px;
    object-fit: cover;
    object-position: top;
    
}


.blog-block {
	background-color: #222;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	width: 100%;
	border-right: 1px solid #ccc;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

        
.blog-item{
    margin-bottom: 0px;
    height: 340px !important;
    cursor: pointer;  
}


.blog-list > img, .blog-item > img {
  width: 100%;
}

#blog-details-photo {
	width: 100%;
	max-height: 340px;
	min-height: 340px;
    object-fit: cover;
}

.blog-details-area > .blog-details-photo {
  padding: 20px;
}

.blog-content-wrapper {
    margin-bottom: auto;
}

.blog-tags-row {
	margin-bottom: auto;
}


/***** NEW BLOG STYLE *******/


.blog-desc {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #313030 none repeat scroll 0 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
    opacity: 0;
    padding: 20px;
    transition: all .6s ease-in-out;
    align-items: center;
}
.blog-desc:hover {
opacity: 1;
}


.blog-title {
padding-left: unset !important;
text-transform: capitalize !important;
font-family: alternate-gothic-compressed !important;
font-size: 60px !important;
margin-bottom: 0;
line-height: 60px;
}

.blog-title a {
  color: #eee;
}

.blog-title a:hover {
  text-decoration: none;
  color: #FF9700;
}

.read-more {
   margin-bottom: 0 !important;
    padding: 0 !important;
}

.read-more a {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    color: #337ab7
}

.read-more a:hover  {
color: #FF9700 !important;
}

.blog-item {
font-family: alternate-gothic-compressed;
sans-serif;
color: #fff;
font-size: 30px;
font-weight: 600;
line-height: 1;
position: relative !important;
z-index: 5;
}


.tag-badge {
font-family: "Montserrat", sans-serif !important;
color: #fff;
font-size: 12px;
font-weight: 500;
margin: 4px 4px 4px 0;
padding: 6px 12px;
background-color: #4884c2;
text-transform: capitalize;
}

.tag-badge a:hover {
color: #fff;
}

.blog-block a {
font-family: "Montserrat", sans-serif !important;
font-size: 36px;
padding-top: 4px;
display: block;
color: #666;
}



/******BLOG PAGE LAYOUT*******/
.blog-section > * > * >.col-md-4, .blog-section > * > * >.col-sm-6, .blog-section > * > * >.col-xs-12 {
    padding: 0;
    margin: 0;
}


/******BLOG SINGLE POST******/

.bg-img-1 {
background-image: unset;
background-color: #333;
}

.today-date {
    height: max-content;
    width: max-content;
    padding: 12px;
}

.today-date span {
color: #888;
}

.meta-month {
color: #FF9700 !important;
padding: 8px 0 4px 0;
}

.meta-year {
font-size: 20px !important;
}

.edit-row-wrapper {
display: flex;
justify-content: space-between;
}

.edit-row-wrapper__new-post {
justify-content: center;
}

#delete-btn {
opacity: .8;
background-color: #e03b3b;
}

#blog-btn, #edit-btn, #new-btn {
opacity: .8;
background-color: #798B9D;
}

#blog-btn, #edit-btn, #new-btn, #delete-btn {
    padding: 4px 6px 4px 8px;
    letter-spacing: .8px;
    color: #fff;
}

#delete-btn:hover, #blog-btn:hover, #edit-btn:hover, #new-btn:hover {
opacity: 1;
color: #fff;
}

.blog-details-photo > img {
	height: auto;
	max-height: unset !important;
}

.blog-comment {
    font-weight: 400;
    color: #666;
}